Pages

Friday, February 10, 2012

Make Spinner with AS3

    Create a new Flash file, change the size of the Stage on Properties to 450 x 300, the FPS = 12.00.
      Click the Oval Tool (O) in the Toolbox to create a circle object. Make a circle on the Stage with a size of 240 x 240. Give color to Stroke Color = Black and Fill Color = Gray. Position the circle as shown below.



      Click the Text tool and create a static text the number "12" with Font = Times New Roman, Size = 18. Position the text in a circle as shown below.



      Next we will do the copying technique in text objects to create some text that number again to look like the numbers on the clock.

      Select the text 12 and press Ctrl + C on your keyboard, then press Ctrl + V or Ctrl + Shift + V (to create a duplicate object in order to position the same as the original object). Duplication with the position of moving objects as shown below and change the text to "6".


      Do this several times a copy for each text object and change the text to the position as shown below so it will look like the numbers on a clock.


      Next we will make it a spinner arrow. Select the menu Insert > New Symbol (Ctrl + F8). Give the name "panahClip", select Type = Movie Clip press OK.


      Click the Line Tool in the Toolbox, make a horizontal line with a thickness in the Stroke = 3.0. Create a line of length 42.


      Further objects make a triangle as shown below with the Fill Color = yellow, and Stroke Color = black , thickness = 1.0.






      Select all the objects had an arrow, and then position it right on the right sign "+" in the edit symbol.





      Return to the Edit Document, select the menu Edit > Edit Document (Ctrl + E).
      At the Library select the movie clip and drag "panahClip" input into the Stage and set the exact position in the middle of the circle as shown below.





      Next we will create two buttons that would serve to control the spinner.
      Select the menu Insert > New Symbol (Ctrl + F8), name "tombolSpin" and select Type = Button and press OK.





      In the Timeline click on the Frame Up, then the Rectangle Tool create a rectangular object with the Stroke Color = black, Fill Color = Gray. Create an object with a size of 100 x 25.


      Click on the Over frame and select Insert Keyframe right click, change the Fill color of the object with a darker color or other colors to suit your taste.

      Click on the Down Frame and Insert Keyframe again, change the Fill color to the color yellow or the other different.

      Insert Keyframe on Frame Hit again, change the Fill color with the Fill color to the object at Frame Up. Timeline so it will look like in the following figure.


      Add a new layer in the Timeline, Text name. Click the Text tool and create a static text with Font = Arial, Size = 18, color = black. Position the object in the middle square.


      Turning to the Library panel, select "tombolSpin" then right click select Duplicate, name the "tombolStop" and press OK.


      Select "tombolStop" the Library and right click and select Edit. Change text SPIN to STOP.


      Subsequent return to the Edit Document, select Edit menu > Edit Document (Ctrl + E). Put the two buttons (and STOP SPIN) from the Library into the Stage as shown below.


      Select "tombolSpin" and name on the Instance Properties with "tombolSpin". Choose "tombolStop" Instance name "tombolStop". Select the object Instance name panahClip "mcPanah".
      Switch to the Timeline, add a new layer and name it Actions.


      Click Frame 1 on the Actions layer, open the Actions panel (F9) and write the following script.

      var step:Number = 15;
      var tm:Timer = new Timer(10);
      tm.addEventListener(TimerEvent.TIMER, spin);
      function spin(tevt:TimerEvent):void {
      mcPanah.rotation += step;
      }
      tombolSpin.addEventListener(MouseEvent.CLICK, startSpin);
      function startSpin(mevt:MouseEvent):void {
      tombolStop.addEventListener(MouseEvent.CLICK, stopSpin);
      tombolSpin.removeEventListener(MouseEvent.CLICK, startSpin);
      tm.start();
      }
      function stopSpin(mevt:MouseEvent):void {
      tm.stop();
      tombolSpin.addEventListener(MouseEvent.CLICK, startSpin);
      tombolStop.removeEventListener(MouseEvent.CLICK, stopSpin);
      mcPanah.rotation = 30*Math.round(mcPanah.rotation/30);
      }

      Press Ctrl + Enter to see the results. Press the SPIN button to rotate the spinner and press the STOP button to stop it. Save your work.


        No comments:

        Post a Comment