Flash CS3 - Flash CS4

Free tutorials and scripts for all.
Actionscript 3.0

The Slider component of Flash CS3

This is a discussion on The Slider component of Flash CS3 within the Tutorials forums, part of the English Forums category; I find the Slider component of Flash CS3 very useful indeed. How many of you has asked themselves: but to ...


Go Back   Forum Flash CS3 Flash CS4 > English Forums > Tutorials

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
  2 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 27-09-07, 21:37
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
The Slider component of Flash CS3

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 !
__________________

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #2 (permalink)  
Old 28-02-08, 12:58
Junior Member
 
Join Date: Feb 2008
Posts: 6
Rep Power: 0
ziadn27 is on a distinguished road
Re: The Slider component of Flash CS3

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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #3 (permalink)  
Old 29-02-08, 07:27
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Re: The Slider component of Flash CS3

Hi,

do you mean something like this:







Here is the new code of Proporzioni.as
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.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;
		}
	}
}
__________________

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #4 (permalink)  
Old 29-02-08, 07:28
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Re: The Slider component of Flash CS3

lol


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

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #5 (permalink)  
Old 29-02-08, 08:40
Junior Member
 
Join Date: Feb 2008
Posts: 6
Rep Power: 0
ziadn27 is on a distinguished road
Re: The Slider component of Flash CS3

i cant see anything

is it possible you can upload the fla file to a hosting site?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Flash Multi Gallery
  #6 (permalink)  
Old 29-02-08, 08:44
Junior Member
 
Join Date: Feb 2008
Posts: 6
Rep Power: 0
ziadn27 is on a distinguished road
Re: The Slider component of Flash CS3

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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #7 (permalink)  
Old 29-02-08, 08:45
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Re: The Slider component of Flash CS3

Here it is:

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

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #8 (permalink)  
Old 29-02-08, 08:47
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Re: The Slider component of Flash CS3

Quote:
Originally Posted by ziadn27 View Post
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 ?
__________________

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #9 (permalink)  
Old 29-02-08, 09:01
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,446
Rep Power: 6
Flep is on a distinguished road
Re: The Slider component of Flash CS3

Done:

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

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #10 (permalink)  
Old 29-02-08, 09:15
Junior Member
 
Join Date: Feb 2008
Posts: 6
Rep Power: 0
ziadn27 is on a distinguished road
Re: The Slider component of Flash CS3

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 ???
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads

Thread Thread Starter Forum Replies Last Post
ProgressBar Component of Flash CS3 Flep Tutorials 1 28-10-08 06:28
RadioButton component of Flash CS3 Flep Tutorials 1 05-08-08 09:52
Using NumericStepper - Flash CS3 component Flep Tutorials 1 09-02-08 18:12
ColorPicker - Flash CS3 Component Flep Tutorials 0 08-10-07 16:14
Componente Slider di Flash CS3 Flep Articoli e tutorials 0 20-09-07 13:01


All times are GMT. The time now is 21:57.


Powered by vBulletin versione 3.7.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC4
Forum SiteMap


FlepStudio
by Filippo Lughi
P.IVA 03605860406