When playing the video forwards everything ran smooth, the processor usage remained low and the memory consumption remained low as well. When playing the video backwards, using mc.gotoAndStop(frame), the processor usage shot way up and the memory consumption went over a GB and in some cases over 2 GB.

At first we figured it was due the the extra computing Flash Player needed to do in order to calculate the difference between keyframes in the video when playing it in reverse. FLVs are encoded to play forwards with a keyframe containing all the pixel data, then subsequent frames containing only the data of the pixels that have changed since the last keyframe. When playing in reverse Flash Player would need to read from multiple frames to determine how the current frame should be rendered. This takes additional processing power. The thing is, we had a keyframe on every single frame, so this could not be the issue.

Next we figured it might be due to smoothing the video. We needed to scale the video up and down so this was not something we could do without, but it was worth looking into anyways. We applied smoothing to the video, after loading it from an external SWF at runtime, by getting a reference to the Video object using this code:

var videoFLV:Video = _video.getChildByName('flv') as Video;
videoFLV.smoothing = true;

We removed the smoothing and still no luck.

Finally we stumbled onto the issue by accident. When replacing the video on the timeline I forgot to give the Embedded Video object an instance name. All of the sudden the video was playing great in both directions but it did not have smoothing on because our code had no reference to the video object. When I added the instance name back, it ran slow again. After hours of tests and searching the internet for information, we figured it out. Adding an instance name to your video object will wreak havoc on your processor and memory usage when playing in reverse.

Our solution to re-add smoothing was to get a reference to the Embedded Video object using the following code:

var videoFLV:Video = _video.getChildAt(0) as Video;
videoFLV.smoothing = true;


I hope you find this article helpful and if you have any insight about this bug please comment.

Fraser

P.S. I am not sure if it makes a difference, but we were using an ActionScript Project in Flash Builder 4 compiled for Flash Player 9.0.124.

I worked on the initial stages of this redesign at Critical Mass over two years ago. My involvement at the time was building a working prototype of the site in Flash. Only a few vehicles could be selectable back then, but overall the site’s design has not changed too much. The Mercedes-Benz’ development team has done a great job of finishing it off.

Congratulations to everyone involved in creating this site.

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

The new products include:

• Adobe InDesign CS3
• Adobe Photoshop CS3
• Adobe Illustrator CS3
• Adobe Acrobat 8 Professional
• Adobe Flash CS3 Professional
• Adobe Dreamweaver CS3
• Adobe Fireworks CS3
• Adobe Contribute CS3
• Adobe After Effects CS3
• Adobe Premiere Pro CS3
• Adobe Encore CS3
• Adobe Soundbooth CS3

The launch will be broadcasted here:
http://www.adobe.com/products/creativesuite/launchevent/webcast/

If you are interested, here are the new features of Flash CS3
http://www.adobe.com/products/flash/features/

Here is a snippet of code showing the workaround to this issue:

function reset():Void {
  var next:Boolean = false;
  var prev:Boolean = false;
  var keyboardListener:Object = new Object();
  keyboardListener.onKeyDown = function () {
    if (Key.getCode() == 39) next = true;
    if (Key.getCode() == 37) prev = true;
  }
  this.onEnterFrame = function() {
    if (next) {
      delete this.onEnterFrame;
      trace("next page");
      flash.external.ExternalInterface.call("alert",
                                            "next page");
      reset();
    }
    if (prev) {
      delete this.onEnterFrame;
      trace("previous page");
      flash.external.ExternalInterface.call("alert",
                                            "previous page");
      reset();
    }
  }
  Key.addListener(keyboardListener);
}
reset();

I added some JavaScript Alerts to prove it works in the browser.

Some of the new features include:
- Advanced Color Picker
- Export All CSS
- Support for StyleName Styles
- Text Formatting Styles
- Text-Entry for Slider Controls
- Inclusion on New Components
- Improved Navigation
- Indication of Components Edited
- Progressive Disclosure of Controls
- Improved Graphic Representation of Styles
- Improved Scrollbar management

To read more about the new Flex Style Explorer visit Adobe Consulting.
Try the online version.

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.

Read the full press release

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

package ca.flashdev.debug {
  public class TraceDebug {
    public function traceString(myString:String) {
      trace(myString);
    }
  }
}

Paste this code into a text file and save it as TraceDebug.as in a folder structure of ca\flashdev\debug.

Create a new movie and using the Actions (F9) panel put the following code on the first frame of the timeline:

import ca.flashdev.debug.TraceDebug;

var classInstance:TraceDebug = new TraceDebug();
var myString:String = "Hello World!";
classInstance.traceString(myString);

Save the movie as trace.fla in the same directory as your ca folder.
Publish (ctrl-enter) your movie and you should see “Hello World!” in the Flash Output window.

You can use trace to output all kinds of information into the Output window, but what do you do if you have to test your file outside of Flash? Often I run into pathing issues where my movie will work great on my system, but when I send my movie to a client it will break on their server. In cases like these you can output information into a javaScript alert window in order to debug the issue. To do this you will have to use ExternalInterface to call the javascript:alert() method in a web browser.

Create a new actionScript file and paste the following code into it:

package ca.flashdev.debug {
  import flash.external.ExternalInterface;
  public class AlertDebug {
    public function alertString(myString:String) {
      ExternalInterface.call("alert", myString);
    }
  }
}

Save this file as AlertDebug.as in the same folder as TraceDebug.as.

Create a new movie and add the following code:

import ca.flashdev.debug.AlertDebug;

var classInstance:AlertDebug = new AlertDebug();
var myString:String = "Hello World!";
classInstance.alertString(myString);

Save this file as alert.fla in the same folder as trace.fla.
Open the Publish Settings (Ctrl+Shift+F12)window and place a checkmark beside HTML then click Publish. Open alert.html in your web browser (I used Mozilla Firefox because Internet Explorer kept crashing). You should see a javaScript alert window with “Hello World!” in it.

Well now you know hot to do basic debugging in AS3. You will most likely want to replace myString with variables in your code that you think might be undefined or NaN, causing your program to fail. If your variable is an Object then these two methods won’t tell you much. All they will display is [object Object]. In my next post we will explore how to trace the insides of an Object.

Download the Source Files

Open a text editor, I use SEPY for coding ActionScript, and type the following code:

package ca.flashdev.hello {
  public class HelloWorld {
    public function sayHello():String {
      var greeting:String = "Hello World!";
      return greeting;
    }
  }
}

Save this file as HelloWorld.as. Place it in a folder structure ca\flashdev\hello\.
If you already code in ActionScript 2 you will notice the addition of package to the top of my code. When you use OOP you place your class files in a folder structures. Each folder is considered a package. When you import classes into your code you have to option of importing an entire folder of classes using the * symbol (e.g. import ca.flashdev.utils.*). Packages let us organize classes into logical groups and also prevent naming conflicts between classes. Now in ActionScript 3 you put the package name (the folder name that this class file is contained inside) in the top of you class file.

The next step is to open Adobe Flash 9 Public Alpha. File -> New -> Flash Document. Select the Text Tool (t) and create a dynamic text field on the stage with an instance name of hello_txt. Click Embed in the properties panel and select Uppercase, Lowercase and Punctuation. Create another Layer in the Timeline and name it actions. Click on the new blank frame in the Timeline, open your Actions (F9) panel and add the following code:

import ca.flashdev.hello.HelloWorld;
var classInstance:HelloWorld = new HelloWorld();

hello_txt.text = classInstance.sayHello();

Save this file in the same folder as your ca folder and name it helloWorld.fla. Now publish the Movie (Ctrl-Enter). The text field you added should display Hello World!.

Make sure you have ActionScript 3 selected in the ActionScript Version field of your Publish Settings (Ctrl-Shift-F12).

Download the Source Files