Flash and ActionScript tutorials – flashadvanced

Today I will show you how to create a nice flash application using the Slider component. This slider will be used to rotate and scale objects on the stage.

1. Open a new Flash document and save it under “slidercomponent.fla”.

2. Rename the first layer to “figures” and draw a rectangle and a pentagon.

3. Convert the two figures to Movie Clips with registration points center. Give the rectangle instance name “rect” and the pentagon – “pent”.

4. Create a new layer called “sliders”. Go to the Components by clicking Window -> Components. Drag two Slider components to the stage and position them under the figures. Give the first slider instance name “sliderrect” and the second – “sliderpent”.

5. Create a new layer called “txt fields” and create two dynamic text fields and place them under the sliders. Give the first text field instance name “angle_txt” and the second “scale_txt”. Don’t forget to embed the font you use:

6. Now, create a new layer called “actions” and open the actions panel.

//importing SliderEvent class
import fl.events.SliderEvent;

//adding event listener to the first slider
sliderrect.addEventListener(SliderEvent.CHANGE, rotateObject);
//setting slider's maximum value to 100
sliderrect.maximum = 100;
/*boolean value that indicates whether the SliderEvent.CHANGE event
	is dispatched continuously as the user moves the slider thumb*/
sliderrect.liveDragging = true;
//adding event listener to the second slider
sliderpent.addEventListener(SliderEvent.CHANGE, scaleObject);
//setting slider minimum value to 1 because we don't want our object to disappear
sliderpent.minimum = 1;
//setting default slider thumb's position
sliderpent.value = 5;
sliderpent.liveDragging = true;

function rotateObject(e:SliderEvent):void{
	/*we create a variable that stores slider's value (from 0 to 100) multiplied by 3.6
		so that the variable returns values from 0 to 360*/
	var rotVal:int = (sliderrect.value)*3.6;
	//setting rectangle's rotation
	rect.rotation = rotVal;
	//rotation info
	angle_txt.text = rotVal.toString();
}

function scaleObject(e:SliderEvent):void{
	//dividing event target value by 5 because we don't want too big figures
	pent.scaleX = e.target.value / 5;
	pent.scaleY = e.target.value / 5;
	//scale info
	scale_txt.text = (e.target.value / 5).toString();
}

That was all!

Here is the final result: