I find the Slider component of Flash CS3 very useful indeed.
How many of you has asked themselves: but to personalise a scrollBar to my taste, am I obliged to apply the whole math that I have seen in the article Math Proportions ?
The answer is: with Flash CS3 no!
The new version of Adobe has the Slider component available that, can be said, implements all those calculations on its own.
How? Mainly using its 3 properties: .minimum, .maximum, .value.
I prepared an example because as usual I do not like to chat too much but prefer pass my experience with Flash to all of you using concret examples.
Here it is...
I create a FLA and save it as 'slider.fla', into which:
- a MovieClip with an instance name 'circle_mc'
- a MovieClip with an instance name 'ball_mc'
- two instances of the Slider component with the following instance name 'slider_0_mc' and 'slider_1_mc'
I create a Document Class, an AS file saved as 'Proporzioni.as', implemented the following way:
Code:
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import fl.controls.SliderDirection;
import flash.events.Event;
public class Proporzioni extends MovieClip
{
private var clip:MovieClip;
public function Proporzioni()
{
init();
}
private function init():void
{
stage.frameRate=31;
slider_0_mc.width=300;
slider_0_mc.move(stage.stageWidth/2-slider_0_mc.width/2,stage.stageHeight-30);
slider_0_mc.minimum=1;
slider_0_mc.maximum=200;
slider_0_mc.value=slider_0_mc.maximum;
slider_1_mc.width=300;
slider_1_mc.direction=SliderDirection.VERTICAL;
slider_1_mc.move(stage.stageWidth-30,stage.stageHeight/2-slider_1_mc.width/2);
slider_1_mc.minimum=1;
slider_1_mc.maximum=200;
slider_1_mc.value=slider_1_mc.maximum;
createClips();
initListeners();
}
private function createClips():void
{
clip=new MovieClip();
addChild(clip);
}
private function initListeners():void
{
clip.graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2);
clip.addEventListener(Event.ENTER_FRAME,proporzioni);
}
private function proporzioni(e:Event):void
{
e.target.graphics.clear();
clip.graphics.lineStyle(2,0x333333,1);
e.target.graphics.drawEllipse
(stage.stageWidth/2-slider_0_mc.value/2,
stage.stageHeight/2-slider_1_mc.value/2,
slider_0_mc.value,slider_1_mc.value);
var rapporto:Number=360/slider_0_mc.maximum;
var proporzione:Number=rapporto*slider_0_mc.value;
circle_mc.rotation=proporzione;
var rapporto2:Number=stage.stageWidth/slider_0_mc.maximum;
var proporzione2:Number=rapporto2*slider_0_mc.value;
var arrX:Number=stage.stageWidth-proporzione2;
var dx:Number=arrX-ball_mc.x;
var ax:Number=dx*.1;
ball_mc.x+=ax;
}
}
}
The result here:
Let's analise the code.
Properties
an instance of the MovieClip class used to draw the ellipse
private var clip:MovieClip;
Methods
init();
I impost the frame rate
stage.frameRate=31;
I impost the width of one of the Slider
slider_0_mc.width=300;
I position the Slider
slider_0_mc.move(stage.stageWidth/2-slider_0_mc.width/2,stage.stageHeight-30);
I impost a minimum and maximum value to the Slider
slider_0_mc.minimum=1;
slider_0_mc.maximum=200;
I assign a value to the Slider (the dragger will position itself to the given value)
slider_0_mc.value=slider_0_mc.maximum;
same thing for the second slider, but I position the Slider vertically using the SliderDirection class and its static property VERTICAL
slider_1_mc.width=300;
slider_1_mc.direction=SliderDirection.VERTICAL;
slider_1_mc.move(stage.stageWidth-30,stage.stageHeight/2-slider_1_mc.width/2);
slider_1_mc.minimum=1;
slider_1_mc.maximum=200;
slider_1_mc.value=slider_1_mc.maximum;
I call createClips() and iniListener() methods
createClips();
initListeners();
createClips();
I assign to the clip property the state of new MovieClip (I create a new MovieClip)
clip=new MovieClip();
I add clip to the DisplayObject otherwise it would not be visible
addChild(clip);
initListeners();
I move its graphics to the center of the stage
clip.graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2);
I create an interval ENTER_FRAME which will call the proporzioni() method
clip.addEventListener(Event.ENTER_FRAME,proporzion i);
Proporzioni();
in the first part of this method, I act on the 'clip' newly created
I initialise its graphics
e.target.graphics.clear();
clip.graphics.lineStyle(2,0x333333,1);
through the drawEllipse method which wants 4 parameters x, y, Width, Height. As X I pass the center of the stage width less the value of the orizontal Slider (so that the design always remains centered), as Y I pass the center of the stage heigth less the value of the vertical Slider, as Width I pass the value of the orizontal Slider and as Heigth the value of the vertical Slider
e.target.graphics.drawEllipse(stage.stageWidth/2-slider_0_mc.value/2,stage.stageHeight/2-slider_1_mc.value/2,slider_0_mc.value,slider_1_mc.value);
In this part I act on 'circle_mc' placed on stage
I create a variable in which I constantly insert the value of 360 (the maximum degrees of rotation of a MovieClip) divided by the maximum value of the horizontal Slider
var rapporto:Number=360/slider_0_mc.maximum;
I create a variable which checks the value of the variable 'rapporto' multiplied by the actual value of the orizontal Sliders
var proporzione:Number=rapporto*slider_0_mc.value;
I assign to the property .rotation of 'circle_mc' the value of the variable 'proporzione'
circle_mc.rotation=proporzione;
In this last part, I act on 'ball_mc' placed on stage
I create a variable in which I constantly insert the value of the stage width divided by the maximum value of the orizontal Slider
var rapporto2:Number=stage.stageWidth/slider_0_mc.maximum;
I create a variable to which I assign the value of the variable 'rapporto2' multiplied by the actual value of the orizontal Slider
var proporzione2:Number=rapporto2*slider_0_mc.value;
here I apply the inertia effect (see article: Inertia with Actionscript 3.0 ) and as an arrival point I impost the value of the stage width less 'proporzione2' (so that the green ball goes the opposite way as the orizontal Slider)
var arrX:Number=stage.stageWidth-proporzione2;
var dx:Number=arrX-ball_mc.x;
var ax:Number=dx*.1;
ball_mc.x+=ax;
Stay tuned !
Bookmarks