Flash Gallery | Flash Templates | Flash Menu | Flash Design | Flash Audio & Video

flash page flip

Actionscript 3.0 video tutorials

+ Reply to Thread
Results 1 to 2 of 2

Thread: Using NumericStepper - Flash CS3 component

  1. #1
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,459
    Rep Power
    8

    Using NumericStepper - Flash CS3 component

    amazing Flash templates

    Today I would like to introduce the NumericStepper component to carry on the series of tutorials on how to use the Flash CS3 components.
    Normally this component is used in application containing lots of numerical data or also is useful when developing forms to send data.
    In this tutorial, I will used it applied to a MovieClip using Actionscript 3.0 .



    I create a FLA and I save it as "main.fla" into which I have a MovieClip of square shape with an instance name "clip_mc".
    I create the Document Class, an AS file saved as "Main.as", implemented the following way:


    Code:
    package
    {
    	import flash.display.MovieClip;
    	import flash.events.Event;
    	import fl.controls.NumericStepper;
    	
    	public class Main extends MovieClip
    	{
    		private var num_x:NumericStepper;
    		private var num_y:NumericStepper;
    		private var num_w:NumericStepper;
    		private var num_h:NumericStepper;
    		
    		public function Main()
    		{
    			init();
    			initSteppers();
    		}
    		
    		private function init():void
    		{
    			stage.frameRate=31;
    		}
    		
    		private function initSteppers():void
    		{
    			num_x=new NumericStepper();
    			num_x.move(30,30);
    			num_x.minimum=0;
    			num_x.maximum=stage.stageWidth;
    			num_x.value=clip_mc.x;
    			num_x.stepSize=1;
    			addChild(num_x);
    			
    			num_y=new NumericStepper();
    			num_y.move(num_x.x+num_x.width,30);
    			num_y.minimum=0;
    			num_y.maximum=stage.stageHeight;
    			num_y.value=clip_mc.y;
    			num_y.stepSize=1;
    			addChild(num_y);
    			
    			num_w=new NumericStepper();
    			num_w.move(num_y.x+num_y.width,30);
    			num_w.minimum=clip_mc.width/2;
    			num_w.maximum=clip_mc.width*2;
    			num_w.value=clip_mc.width;
    			num_w.stepSize=1;
    			addChild(num_w);
    			
    			num_h=new NumericStepper();
    			num_h.move(num_w.x+num_w.width,30);
    			num_h.minimum=clip_mc.height/2;
    			num_h.maximum=clip_mc.height*2;
    			num_h.value=clip_mc.height;
    			num_h.stepSize=1;
    			addChild(num_h);
    			
    			num_x.addEventListener(Event.CHANGE,moveX);
    			num_y.addEventListener(Event.CHANGE,moveY);
    			num_w.addEventListener(Event.CHANGE,resizeW);
    			num_h.addEventListener(Event.CHANGE,resizeH);
    		}
    		
    		private function moveX(evt:Event):void
    		{
    			clip_mc.x=evt.target.value;
    		}
    		
    		private function moveY(evt:Event):void
    		{
    			clip_mc.y=evt.target.value;
    		}
    		
    		private function resizeW(evt:Event):void
    		{
    			clip_mc.width=evt.target.value;
    		}
    		
    		private function resizeH(evt:Event):void
    		{
    			clip_mc.height=evt.target.value;
    		}
    	}
    }

    The result is the following:









    Let us analyse the code


    I import the needed classes
    import flash.display.MovieClip;
    import flash.events.Event;
    import fl.controls.NumericStepper;


    Properties
    4 variables type NumerciStepper
    private var num_x:NumericStepper;
    private var num_y:NumericStepper;
    private var num_w:NumericStepper;
    private var num_h:NumericStepper;


    Constructor function
    I call the method init()
    init();
    I call the method initSteppers
    initSteppers();


    Methods
    init();
    I impost the frame rate
    stage.frameRate=31;


    initSteppers();
    I create the 4 NumericStepper, assign a position, a minimal value, a maximal value, an initial value, a step value (the added value at each click) and I add them to the stage
    num_x=new NumericStepper();
    num_x.move(30,30);
    num_x.minimum=0;
    num_x.maximum=stage.stageWidth;
    num_x.value=clip_mc.x;
    num_x.stepSize=1;
    addChild(num_x);


    num_y=new NumericStepper();
    num_y.move(num_x.x+num_x.width,30);
    num_y.minimum=0;
    num_y.maximum=stage.stageHeight;
    num_y.value=clip_mc.y;
    num_y.stepSize=1;
    addChild(num_y);


    num_w=new NumericStepper();
    num_w.move(num_y.x+num_y.width,30);
    num_w.minimum=clip_mc.width/2;
    num_w.maximum=clip_mc.width*2;
    num_w.value=clip_mc.width;
    num_w.stepSize=1;
    addChild(num_w);


    num_h=new NumericStepper();
    num_h.move(num_w.x+num_w.width,30);
    num_h.minimum=clip_mc.height/2;
    num_h.maximum=clip_mc.height*2;
    num_h.value=clip_mc.height;
    num_h.stepSize=1;
    addChild(num_h);
    I add to each NumericStepper a listener to the event Event.CHANGE which will call the respective functions
    num_x.addEventListener(Event.CHANGE,moveX);
    num_y.addEventListener(Event.CHANGE,moveY);
    num_w.addEventListener(Event.CHANGE,resizeW);
    num_h.addEventListener(Event.CHANGE,resizeH);


    moveX(evt:Event):void
    I move the clip_mc x based on the value of the correspondent NumericStepper (retrieved with evt.target which is the numeric stepper with the changed value and then .value, its value)


    moveY(evt:Event):void
    I move the clip_mc y based on the value of the correspondent NumericStepper


    resizeW(evt:Event):void
    I change the clip_mc width based on the value of the correspondent NumericStepper


    resizeY(evt:Event):void
    I change the clip_mc height based on the value of the correspondent NumericStepper


    See you soon!

    Last edited by Flep; 28-08-08 at 06:40.

  2. #2
    Junior Member Settled In soytofu is on a distinguished road
    Join Date
    Feb 2008
    Posts
    1
    Rep Power
    0

    Re: Using NumericStepper - Flash CS3 component

    i want to create something like this,

    http://www.wral.com/news/local/flash/1989625/

    and do you know how to make it?

    Thank you.

+ Reply to Thread

Similar Threads

  1. ProgressBar Component of Flash CS3
    By Flep in forum Tutorials
    Replies: 3
    Last Post: 21-08-09, 00:09
  2. Win a Flash component CurveMenu
    By Flep in forum Components
    Replies: 125
    Last Post: 25-05-09, 06:29
  3. RadioButton component of Flash CS3
    By Flep in forum Tutorials
    Replies: 1
    Last Post: 05-08-08, 09:52
  4. NumericStepper - componente di Flash CS3
    By Flep in forum Articoli e tutorials
    Replies: 0
    Last Post: 29-10-07, 06:43
  5. ColorPicker - Flash CS3 Component
    By Flep in forum Tutorials
    Replies: 0
    Last Post: 08-10-07, 16:14

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Search Engine Optimization by vBSEO