I just finished skimming through this book and have decided that every Flex developer should own a copy. I have been developing Flex applications for over a year now and I still managed to learn a ton of new things from this book. The authors have done an excellent job of formatting the book into problem and solution scenarios. Quick and easy answers. The book starts off with issues a Flex noob might encounter and then proceeds all the way up to issues a Flex pro might encounter. Each solution includes code and a discussion/explination. This book is not really a cover to cover read, but more of a quick reference that you want to have within an arms reach while coding. I still recommend skimming through it when you first get it, because I’m sure you’ll learn a bunch of new tidbits right off the bat.

You can get more info and purchase this book here.

http://developer.yahoo.com/flash/articles/display-list.html

The Yahoo! Flash Developer Center also has some great open-source components available for download. I am playing around with the Charts and I am very impressed. These seem like a great and free alternative to FusionCharts, which at this time are not available for ActionScript 3.0.

Here are some examples of the Yahoo! ASTRA Charts:
http://developer.yahoo.com/flash/astra-flash/charts/examples.html

First off lets start with loading an XML file and reading its contents. I realize that there are much easier ways to load XML into Flash than this, but the advantage here is that I can use File.applicationResourceDirectory which allows me to target the installation directory for the XML file that was included with the AIR package. In this snippet I am using the synchronous open method. This essentially pauses everything else in the Flash movie until it has completed its task (opening the file).

import flash.filesystem.*;

private var _data:String; // Data string pulled from the xml file.

/**
 * Load the xml file and read its data.
 */
private function loadData():void
{
  var dataFile:File = File.applicationResourceDirectory.resolve("data.xml");
  var stream:FileStream = new FileStream();
  stream.open(dataFile, FileMode.READ);
  _data = stream.readUTFBytes(stream.bytesAvailable);
  stream.close();
}

This next snippet shows how to save data to a file using the asynchronous openAsync method. The asynchronous methods allow Flash to continue running normally and use events to trigger user specified actions.

private var _dataXML:XML;	// The XML data.

/**
 * Save the modified data to the xml file.
 */
private function saveData():void
{
  var dataFile:File = File.applicationResourceDirectory.resolve("data.xml");
  var stream:FileStream = new FileStream();
  stream.openAsync(dataFile, FileMode.WRITE);
  stream.writeUTFBytes(_dataXML);
  stream.addEventListener(Event.CLOSE, onDataSaved);
  stream.close();
}

/**
 * Called when the data has been successfully saved.
 * Load the saved data back into the application.
 */
private function onDataSaved(event:Event):void
{
  loadData();
}

If you are planning on using AIR (Apollo) for your own projects I would highly recommend reading Apollo for Adobe Flex Developers Pocket Guide by Mike Chambers, Robert L. Dixon & Jeff Swartz.

I am currently in the process of reading the excerpt from Tom Muck’s Flash Remoting: The Definitive Guide. This excerpt is part of a new partnership between ActionScript.org and O’Reilly. It seems like a good deal for both sides. I am sure this will drive a lot more traffic to ActionScript.org and inevitably lead to more book sales for O’Reilly. So far the first few pages of the excerpt have been very well written and quite informative.

While reading the article I have realized that I will have to change my job title. Now that Flex has been released I am no longer a Flash Developer, but instead, a Client-Side ActionScript Programmer. I think that this is a much more dynamic sounding title, but it will take some getting used to after referring to myself as a Flash Developer for so long.

I am quite excited about the freshened up ActionScript.org site and enjoy having the ability to preview books before investing in them. Of course O’Reilly is one of my favorite publishers, so this is good news to me.

And now for the code:

package ca.flashdev.example {		

  import flash.display.Sprite;
  import flash.display.Shape;
  import flash.events.MouseEvent;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;
  import flash.net.URLLoader
  import flash.net.URLRequest
  import flash.xml.XML
  import flash.events.Event;
  import flash.error.Error;

  public class BasicMenuXML extends Sprite {		

    // Create an XML list to hold the buttons.
    private var __menuList:XMLList;	 

    // External file loader.
    private var __loader:URLLoader;

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

    /**
     * Load the XML.
     */
    private function loadXML():void {			

      // Create a URL loader.
      __loader = new URLLoader();

      // Attach a listener to the loader.
      __loader.addEventListener(Event.COMPLETE, onXMLLoaded);

      // Load the xml file.
      __loader.load(new URLRequest("menu.xml"));
    }

    /**
     * Called when the XML has been loaded.
     * @param   event   The event that called this method.
     */
    private function onXMLLoaded(event:Event):void {

      // Put some error catching in case the XML is malformed.
      try {

        // Load the data into the XML object.
        var menuXML:XML = new XML(__loader.data);

        // Create a list of the buttons.
        __menuList = menuXML.button; 

        // Now that the XML is loaded create the menu.
        drawMenu();	

      } catch(error:Error) {

        // Display an error message.
        var errorMessage:TextField = new TextField();
        errorMessage.autoSize = TextFieldAutoSize.LEFT;
        errorMessage.textColor = 0xFF0000;
        errorMessage.text = error.message;
        addChild(errorMessage);
        return;
      }
    }

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

      // This variable will hold the x position for the next button.
      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 list and create each button in the list.
      var count:int = 0;
      for each (p in __menuList) {

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

        // Disable the mouse events of objects inside 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 = __menuList[count].text();

        // Create a 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 a 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;

        // Increase the count.
        count++;
      }

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

    }

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

      // Hide 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 {

      // Show 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 this file as BasicMenuXML.as in a folder structure of ca.flashdev.example.
Create a new movie and add ca.flashdev.example.BasicMenuXML to the ActionScript 3.0 Settings Document class field. Save this file as basicMenuXML.fla in the same directory as your ca folder. Publish (Ctrl+Enter) your movie and you should see the menu.

Download the source files

http://labs.oreilly.com/code/

The following example will demonstrate how to loop through an array and draw a button for each item in that array. Each button will have a label, an up state and an over state. I have read that it is good practice to use the SimbleButton object whenever possible, but I am not going to use the it in this tutorial because I am interested in learning more about addChild(), getChildByName(), currentTarget, mouseChildren and other features of ActionScript 3.0 that could be avoided using the SimpleButton.

package ca.flashdev.example {		

  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 this file as BasicMenu.as in a folder structure of ca.flashdev.example.
Create a new movie and add ca.flashdev.example.BasicMenu to the ActionScript 3.0 Settings Document class field. Save this file as basicMenu.fla in the same directory as your ca folder. Publish (Ctrl+Enter) your movie and you should see the menu.

Download the source files

In the following example I will demonstrate how to use addEventListener to add a click event to a button that is built using the new SimpleButton object. The SimpleButton is a light weight alternative to the heavier MovieClip object.

package ca.flashdev.example {		

  import flash.display.Sprite;
  import flash.display.Shape;
  import flash.display.SimpleButton;
  import flash.events.MouseEvent;
  import flash.events.Event;

  public class ButtonTrace extends Sprite {		

    private var __button:SimpleButton = new SimpleButton();

    public function ButtonTrace():void {
      drawButton();
      activateButton();
    }

    private function drawButton():void {

      var down:Sprite = new Sprite();
      down.graphics.lineStyle(1, 0x000000);
      down.graphics.beginFill(0xFFCC00);
      down.graphics.drawRect(10, 10, 100, 30);

      var up:Sprite = new Sprite();
      up.graphics.lineStyle(1, 0x000000);
      up.graphics.beginFill(0x0099FF);
      up.graphics.drawRect(10, 10, 100, 30);

      var over:Sprite = new Sprite();
      over.graphics.lineStyle(1, 0x000000);
      over.graphics.beginFill(0x9966FF);
      over.graphics.drawRect(10, 10, 100, 30);

      __button.upState = up;
      __button.overState = over;
      __button.downState = down;
      __button.useHandCursor = true;
      __button.hitTestState = up;

      addChild(__button);
    }

    private function activateButton():void {
      __button.addEventListener(MouseEvent.CLICK, displayMessage);
    }

    private function displayMessage(e:Event):void {
      trace("Don't push my buttons!");
    }
  }
}

Save this file as ButtonTrace.as in a folder structure of ca.flashdev.example.
Create a new movie and add ca.flashdev.example.ButtonTrace to the ActionScript 3.0 Settings Document class field. Save this file as button.fla in the same directory as your ca folder. Publish (Ctrl+Enter) your movie and you should see a button that you can click.

Download the source files

Lets take a look at how it is done:

package ca.flashdev.drawing {
  import flash.display.Sprite;
    public class DrawShapes extends Sprite {
      function DrawShapes():void {
        createCircle(50, 50, 25, 0x0099FF)
        createEllipse(100, 25, 50, 100, 0x9933CC)
        createRect(175, 25, 50, 100, 0xFFCC00)
        createRoundRect(250, 25, 50, 100, 20, 20, 0xFF3366)
      }
      public function createCircle(x:Number,
                                   y:Number,
                                   radius:Number,
                                   color:Number):void {
        var circle:Sprite = new Sprite();
        circle.graphics.beginFill(color);
        circle.graphics.drawCircle(x, y, radius);
        circle.graphics.endFill();
        addChild(circle);
      }
      public function createEllipse(x:Number,
                                    y:Number,
                                    width:Number,
                                    height:Number,
                                    color:Number):void {
        var ellipse:Sprite = new Sprite();
        ellipse.graphics.beginFill(color);
        ellipse.graphics.drawEllipse(x, y, width, height);
        ellipse.graphics.endFill();
        addChild(ellipse);
      }
      public function createRect(x:Number,
                                 y:Number,
                                 width:Number,
                                 height:Number,
                                 color:Number):void {
        var rect:Sprite = new Sprite();
        rect.graphics.beginFill(color);
        rect.graphics.drawRect(x, y, width, height);
        rect.graphics.endFill();
        addChild(rect);
      }
      public function createRoundRect(x:Number,
                                      y:Number,
                                      width:Number,
                                      height:Number,
                                      ellipseWidth:Number,
                                      ellipseHeight:Number,
                                      color:Number):void {
        var roundRect:Sprite = new Sprite();
        roundRect.graphics.beginFill(color);
        roundRect.graphics.drawRoundRect(x,
                                         y,
                                         width,
                                         height,
                                         ellipseWidth,
                                         ellipseHeight);
        roundRect.graphics.endFill();
        addChild(roundRect);
    }
  }
}

Add this code to a new actionScript file and save it as DrawShapes.as in a folder structure of ca.flashdev.drawing.

Now create a new movie in Flash and open the Publish Settings (Ctrl+Shift+F12) window. Click on the Flash tab, then on the settings button. In the Document class: field insert ca.flashdev.drawing.DrawShapes. Test Movie (Ctrl+Enter) and voila, you have shapes.

You will notice I am extending the Sprite object. Here is an explanation of what a Sprite is:

“The Sprite class is a basic display list building block: a display list node that can display graphics and can also contain children.
A Sprite object is similar to a movie clip, but does not have a timeline. Sprite is an appropriate base class for objects that do not require timelines. For example, Sprite would be a logical base class for user interface (UI) components that typically do not use the timeline. The Sprite class is new in ActionScript 3.0. It provides an alternative to the functionality of the MovieClip class, which retains all the functionality of previous ActionScript releases to provide backward compatibility.”
- ActionScript 3.0 Language Reference

If you previously coded in AS2 you will also notice the addChild function. Depth management has changed in AS3. In AS2 we would have used getNextHighestDepth in the same function that we are creating our object with. Now in AS3 we use addChild after our object is created, to add our object to the next highest depth, or addChildAt to specify a specific depth.

Download the source files

package ca.flashdev.debug {
  public class ObjectDebug {
    public function traceObject(myObj:Object) {
      trace("Using a regular trace: " + myObj);
      trace("");
      trace("Using a for loop: ");
      for (var i in myObj) {
        trace(i + ' = ' + myObj[i]);
      }
    }
  }
}

Save this file in a folder structure of ca\flashdev\debug.

Create a new movie named traceObject.fla and add the following code to the first frame of the timeline:

import ca.flashdev.debug.ObjectDebug;
var classInstance:ObjectDebug = new ObjectDebug();
var myObj:Object = new Object();
myObj.firstName = "Fraser";
myObj.lastName = "Crosbie";
myObj.occupation = "Flash Developer";
classInstance.traceObject(myObj);

Save this file into the same directory as the ca folder and Test Movie (Ctrl+Enter).
The results in your Output window should be:

Using a regular trace: [object Object]  

Using a for loop:
firstName = Fraser
lastName = Crosbie
occupation = Flash Developer

In AS2 I would recommend using the ObjectDumper to trace the insides of an Object, but it appears that they have yet to write AS3 versions of the mx classes.

Download the source files