The Slider component of Flash CS3

[Flep]

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:

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 !

[ziadn27]

I want somthing simmilar to this only there will be one slider and a propeller instead of a circle.. in which where the propeller will turn clock wise if the slider is moved to the right and the fartrther right it goes it should move faster. And to move counter clockwise when the slider is moved to the left and the farther left it goes the faster.. If someone knows how to do this i would appreciate if they can upload the fla file for such animation.. thank you

[Flep]

Hi,

do you mean something like this:

Here is the new code of Proporzioni.as

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.minimum;
			
			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
		{
			
			circle_mc.rotation+=slider_0_mc.value;
		}
	}
}

[Flep]

lol


I can't see the slider... you too ?

[ziadn27]

i cant see anything

is it possible you can upload the fla file to a hosting site?

[ziadn27]

ok now i see it.. this is great only one thing.. the slider should be on pause as a default when the slider is centerized. when it is moved to the left it should move counterclockwise and when its to the right it should move clockwise.. and like i have said previeoulsy the farther left it is the faster it will turn counterclockwise and the farther right the faster it will go clockwise

[Flep]

Here it is:

http://www.flepstudio.org/sharing/slider2.zip

[Flep]

Originally Posted by ziadn27

ok now i see it.. this is great only one thing.. the slider should be on pause as a default when the slider is centerized. when it is moved to the left it should move counterclockwise and when its to the right it should move clockwise.. and like i have said previeoulsy the farther left it is the faster it will turn counterclockwise and the farther right the faster it will go clockwise

ok, I am trying to do that.

PS:
what did you do to view the SWF correctly and the slider please ?

[Flep]

Done:

http://www.flepstudio.org/sharing/slider3.zip

[ziadn27]

i just refreshed the page and it worked ..

for some reason the zip3 u uploaded is not working.. i have flash mx 2004.. do u think that could be the problem ???