Saturday, December 25, 2010

Adobe flash CS5 -Actionscript 3.0 -Basic Menu using ActionScript


External reference:
http://www.flashdev.ca/article/building-a-basic-menu-in-actionscript-30-tutorial/
I slightly modify it for CS5
1) Open Flash Professional CS5
2) File ->New->ActionScript 3.0 Class, type class: BasicMenu, type following code:
package  {
  import flash.display.Sprite;
  import flash.display.Shape;
  import flash.events.MouseEvent;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

   public class BasicMenu extends Sprite {  

    // Create the array of button names.
    private var __MenuArray:Array = new Array("Button 0",
                                              "Button 1",
                                              "Button 2",
                                              "Button 3",
                                              "Button 4");   

    /**
     * The constructor. This method is fired automatically
     * when the class is instantiated.
     */
    public function BasicMenu():void {
      drawMenu();
    }

    /**
    * Draw the menu.
    */
    private function drawMenu():void {

      // This variable will hold the x position
      // of the next button in the menu.
      var xPos:Number = 0;

      // Create a holder that will contain the menu.
      var menuHolder:Sprite = new Sprite();

      // Add the holder to the stage.
      addChild(menuHolder);   

      // Create text formatting for the text fields in the menu.
      var format:TextFormat = new TextFormat();
      format.font = "Verdana";
      format.color = 0x000000;
      format.size = 12;
      format.bold = true;

      // Loop through the array.
      //Create each item listed in the array.
      for (var i in __MenuArray) {

        // Create the button.
        var button:Sprite = new Sprite();
        button.name = "button"+i;

        // Disable the mouse events of all the
        // objects within the button.
        button.mouseChildren = false;

        // Make the sprite behave as a button.
        button.buttonMode = true;

        // Create the label for the down button state.
        var label:TextField = new TextField();
        label.autoSize = TextFieldAutoSize.LEFT;
        label.selectable = false;
        label.defaultTextFormat = format;
        label.text = __MenuArray[i];

        // Create an up state for the button.
        var up:Sprite = new Sprite();
        up.graphics.lineStyle(1, 0x000000);
        up.graphics.beginFill(0x00FF00);
        up.graphics.drawRect(0, 0, 100, 30);
        up.name = "up";

        // Create an over state for the button.
        var over:Sprite = new Sprite();
        over.graphics.lineStyle(1, 0x000000);
        over.graphics.beginFill(0xFFCC00);
        over.graphics.drawRect(0, 0, 100, 30);
        over.name = "over";

        // Adder the states and label to the button.
        button.addChild(up);
        button.addChild(over);
        button.addChild(label);    

        // Position the text in the center of the button.
        label.x = (button.width/2) - (label.width/2);
        label.y = (button.height/2) - (label.height/2);

        // Add mouse events to the button.
        button.addEventListener(MouseEvent.MOUSE_OVER,
                                displayActiveState);
        button.addEventListener(MouseEvent.MOUSE_OUT,
                                displayInactiveState);
        button.addEventListener(MouseEvent.CLICK,
                                displayMessage);

        // Add the button to the holder.
        menuHolder.addChild(button);

        // Position the button.
        button.x = xPos;

        // Increase the x position for the next button.
        xPos += button.width + 2;

        // Hide the over state of the button.
        over.alpha = 0;
      }

      // Postion The Menu.
      menuHolder.x = 20;
      menuHolder.y = 20;

    }

    /**
     * Show the active state of the button.
     */
    private function displayActiveState(event:MouseEvent):void {

      // Show the over state of the button.
      event.currentTarget.getChildByName("over").alpha = 100;
    }

    /**
    * Hide the active state of the button.
    */
    private function displayInactiveState(event:MouseEvent):void {

      // Hide the over state of the button.
      event.currentTarget.getChildByName("over").alpha = 0;
    }

    /**
     * Display a message in the Output window.
     */
    private function displayMessage(event:MouseEvent):void {

      // Output the name of the clicked button.
      trace(event.currentTarget.name)
    }
  }
}
save as BasicMenu.as


4)File ->New->ActionScript 3.0, in left panel
under properties->publish->ActionScript Setting->Edit
change source path to the path you stored BasicMenu.as
Document class: BasicMenu
save as BasicMenu.fla
5) Control->Test Movie->in Flash Professional or (Ctrl enter)
you can watch swf file
6) File->Export->Export Movie, save as BasicMenu.swf

No comments:

Post a Comment