While working at Rare Method our team invested a lot of effort into designing and developing this great interactive Flash and HTML/CSS hybrid site. ArtPad was commissioned by the Calgary Glenbow Museum for the purpose of informing and interesting youth in contemporary art. I’m not sure when this site finally went live, but chances are that you have never seen or even heard about it, as I was unable to find a press release or news article anywhere. Take a few minutes to check it out. I think you will enjoy it and maybe learn a thing or two about contemporary art.

http://www.glenbow.org/artpad

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.

The official announcement from the Adobe Creative Solutions PR team.
http://blogs.adobe.com/creativesolutionspr/

Fraser

Before leaving Critical Mass I spent around three months on the Rolex team helping out on the development side of this site. Although the site appears to be completly Flash to the common user, it supports deep linking and it is search engine friendly. If the user does not have Flash installed it degrades gracefully to an HTML version.

The design is incredible, featuring stunning photographs of scenery from around the world as well as many very gorgeous models, and of course plenty of beautiful watches that most of us will never be able to afford.

Congratulations to everyone involved in creating this site.

Congratulations and the best of luck Scott!

P.S. Make sure you say hi to Schiller and Dr. Yes for me.

If you have any ideas for Blaze you should submit them to the Flash 9 wishlist.

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

The new Flash CS3 will definitely have enhancements to its importing abilities with Photoshop and Illustrator. From what I have heard, you will be able to access bitmaps and vectors right down to a specific layer within the import window. I am sure copy & paste between programs will function a lot smoother than previously.

Fraser

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