Updated: October 19th, 2010

Debugging ActionScript and JavaScript simultaneously with Flash Builder 4 and Aptana Studio.

iconOctober 19th, 2010 icon3 Comments

Flash or Flex applications commonly interact with JavaScript to enable browser specific functionality. Debugging a single application’s ActionScript and JavaScript is often done within different debugging environments. Different environments often make it difficult to setup and run simultaneous debug sessions for the AVM and JavaScript VM. This post shows how to debug an application’s ActionScript and JavaScript simultaneously within Flash Builder using Aptana’s JavaScript debugger. Post details will include where to get and install Aptana Studio, how to configure a Flex project for JavaScript debugging, and steps for launching a simultaneous ActionScript/JavaScript debugging session.

As ActionScript developers spend a large amount of time within Flash Builder, a JavaScript debugging solution that has similar features, user interface, and workflow is an ideal solution. Aptana Studio is a great web development environment that is built on the same Eclipse base that Flash Builder uses. Because of the common base debugging JavaScript with Aptana’s debugger is nearly identical to debugging ActionScript with Flash Builder’s debugger. To follow the steps in this post, Flash Builder must have Aptana Studio installed as an Eclipse plug-in. Aptana Studio can be found on Aptana’s download page. The Eclipse Plug-In Version should be installed. Steps to install the version will appear after clicking the “Download Aptana Studio 2″ link on the download page.

Before going into the steps to set up a simultaneous debugging session, a few details should be mentioned.

Simultaneous ActionScript/JavaScript debugging can be broken down into the following steps.

  1. Flash debugger configuration. To configure the ActionScript debugger select Run > Debug > Other… from the menu bar. Under the Web Application icon select the Flash project that requires simultaneous debugging. In the URL or path to launch field, ensure the Use default check box is deselected and enter “/” into the field. This ensures that the Flash debugger won’t automatically launch the Flash instance when a Flash debugging session is initialized. This is opposite to the normal technique of Flash debugging, but becomes important later on and is key to the technique described here.

    Flash debugger configurationFlash debugger configuration within Flash Builder.

  2. JavaScript debugger configuration. To configure the JavaScript debugger select Run > Debug > Other… from the menu bar. Under the Web Browser icon select the Firefox – Internal Server configuration. Under the Start Action section ensure the Specific page radio button is selected and the value of the Specific page field contains a relative path to the application entry point. The root of the path should be based on the root of the project being debugged. Under the Server section ensure the Use base URL radio button is selected and the value of the Use base URL field is an absolute path to the folder on the web server that is hosting the project files.

    JavaScript debugger configurationJavaScript debugger configuration from Aptana Studio.

  3. Launch Flash debug session. Open the Debug Configurations panel of Flash Builder, select the debug configuration specified in step 1, and press the Debug button. As there is a nonexistent path to launch specified in step 1, the debugger will wait until a Flash instance has been started before creating a connection to the debugger. There is a time out set by Flash Builder that closes the Flash debug session if a Flash instance isn’t started quickly enough. This is important information for the next step.

  4. Launch JavaScript debug session. In the Debug Configurations panel, select the debug configuration specified in step 2, and press the Debug button. The time out mentioned in the previous step is important. Launching the JavaScript debug session also initializes the Flash instance that connects to the Flash debugger that was started in step 3. Time spent launching the JavaScript debug session, or time spent inspecting JavaScript breakpoints before the Flash instance is started should be minimized to avoid triggering the Flash debugger time out.

    JavaScript debugging sessionJavaScript debugging session with simultaneous ActionScript debugging session running.

  5. Success! Successful completion of steps 1 through 4 should yield a simultaneous ActionScript/JavaScript debugging session. Clicking on the [Web Application] and [Web Browser] threads will determine the log visible in the console panel. Variables are specific to the breakpoint that is activated. If an ActionScript breakpoint is set, the variables are specific to the AVM. JavaScript breakpoints list JavaScript variables in the variable panel. Breakpoints for both ActionScript and JavaScript files are listed in the breakpoints panel. Closing the browser window will terminate both the ActionScript and JavaScript debugging sessions.

    ActionScript breakpointActionScript breakpoint with stack trace and variable list.

    JavaScript breakpointJavaScript breakpoint with stack trace and variable list.

  6. Troubleshooting. Due to the number of steps, it can be difficult to setup a simultaneous AVM and JavaScript VM debugging session. It’s good practice to test both ActionScript and JavaScript debugging sessions on their own to ensure they work individually before attempting to run them simultaneously. The time sensitivity of step 4 can cause problems. If the Flash debugger time out has been triggered, restart at step 2. Finally, the Aptana debugger often won’t connect if Firefox is already open when launching a new debug session. For this reason it’s smart to quit Firefox completely before starting a new debugging session.

    Debug session terminatedBoth ActionScript and JavaScript debug sessions terminate after the browser window is closed.

Unit testing Flash panels within the Flash authoring environment using FlexUnit 4 and Flash Builder.

iconJuly 1st, 2010 icon2 Comments

For a recent project of mine I created an ActionScript 3.0 API for JSFL. The API is used as a communication layer between a Flash panel (built in Flex), and the JSFL interpreter in the Flash authoring environment. What follows is an explanation of how to execute unit tests in the Flash authoring environment, verify the results in Flash Builder, and uses the ActionScript 3.0 JSFL API as an example.

To ensure the robustness of my project I wrote a number of unit tests for my model, and other key pieces of the application including the JSFL API. As it was built using Flex 4, the unit testing features of Flash Builder came in handy. There was cause for concern however, as JSFL only runs within the interpreter in the Flash authoring environment, unit tests for the ActionScript 3.0 JSFL API would not work in the browser, or standalone runtime, because the API wouldn’t have access to the JSFL interpreter. Fortunately, with Flash Builder, and FlexUnit 4 there’s a way to write and execute unit tests in Flash Builder while testing them in the Flash authoring environment. Below are step-by-step instructions on how to run unit tests in the Flash authoring environment. The steps are written for those that have a basic level of understanding of how to create and run a custom Flash panel in the Flash authoring environment.

How to run tests within the Flash authoring environment.

  1. In the project settings of the Flash Builder project with the unit tests, modify the output folder in the Actionscript Build Path to the WindowSWF directory of your local installation of the Flash authoring environment.
    On a Mac:
    /Users/{username}/Library/Application Support/Adobe/Flash CS5/en/Configuration/WindowSWF/
    On a PC:
    \Documents and Settings\{username}\Local Settings\Application Data\Adobe\Flash CS5\en\Configuration\WindowSWF\
  2. The bin-debug directory will now link to the above directory on your local system.
  3. In the run dialogue of Flash Builder, run “FlexUnit Tests.” Ignore the results. This step is to make sure that the FlexUnitApplication.swf has been compiled.
  4. Restart, or open Flash. This step makes sure that Flash recognizes the new FlexUnitApplication WindowSWF.
  5. In the Flash menu bar select Window > Other Panels > FlexUnitApplication. This loads and executes the test runner within the Flash authoring environment.
  6. To see the results of the tests, view the FlexUnit Results panel within Flash Builder. The test runner passes the test results from the Flash authoring environment to Flash Builder in the same way as it would if the test runner was executed in a browser, or standalone version of the Flash player.
  7. When adding or modifying tests repeat step 3, completely close the FlexUnitApplication panel by clicking the close button in the top right of the panel, then repeat steps 5, and 6. It’s not necessary to restart Flash everytime you add or modify a test.

The above steps work in Flash CS5. For Flash CS4, I created an ActionScript only Flash Builder project that was run as a Flash panel. The Flash panel was used as a container for the test runner SWF and would re-load the test runner SWF file each time the Flash panel was clicked. Using the container panel made it easier to rerun tests after modifying or adding to the test suite.

Runtime Font Publisher, a tool for runtime font sharing.

iconJune 22nd, 2010 icon4 Comments

The Runtime Font Publisher makes it easy to create, configure, and publish SWFs that contain fonts for runtime sharing. Each SWF that is created by the Runtime Font Publisher can contain a single font definition, or multiple definitions. True Type, TrueType Collection, and OpenType fonts files can be used to create font definitions. Font definitions can be configured by name, style, embedded character ranges, and more.

A while ago I released a CS4 version of the Runtime Font Publisher. This post is to announce an updated version of the Runtime Font Publisher. Important new features include the ability to:

In addition to the new features, the Runtime Font Publisher has a number of easy-to-use controls to configure and define the behavior of an embedded font. An embedded font can be configured by name, file, style, characters & ranges, anti-aliasing option, and Compact Font Format. As well, the code base for the Runtime Font Publisher is now open source, and can be found on Google Code.

Runtime Font Publisher

Download and start using the Runtime Font Publisher

Download the Runtime Font Publisher directly from Google Code. The most recent version of the Runtime Font Publisher and the one described in this post requires Flash CS5. The official code base for the Runtime Font Publisher can be found on Google Code. Instructions on using the extension and runtime shared fonts exist on the Wiki. The extension has also been submitted to the Adobe Exchange and is currently in review has been approved.

For those not interested in the extension, there may still be value in checking it out. There are a set of Flex 4 skins that are a close match to the look and feel of the CS5 interface, and an ActionScript 3.0 library of JSFL commands for file system interaction that are worth taking a look at for anyone interested in creating their own extension.

On using the [Embed] tag with fontStyle & fontWeight properties.

iconMay 19th, 2010 icon5 Comments

Using the [Embed] tag with fontStyle and fontWeight properties allows for runtime access of a font defined by a single name, that contains multiple font faces. This post discusses how to configure embedded fonts to enable this functionality. The use of TrueType, TrueType Collection, and OpenType font files will also be covered. All examples are specific to source fonts and have been tested by compiling with the Batik, AFE, and CFF font managers that come with the Flex SDK.

The fontStyle & fontWeight embed properties.

When embedding fonts within an SWF file, the fontStyle and fontWeight properties are optional parameters. Using the properties is not necessary to embed a font for runtime use, however correct compile time use of the properties allows for accessing a font at runtime by a single name, that has multiple faces. For a font with a single name, as far as I’ve seen, there are four possible font faces. Those faces are defined by the different states of the fontStyle and fontWeight properties. The baseline states for both properties are set to “regular”, fontStyle has an additional state called “italic”, and fontWeight has an additional state called “bold”. Both properties also accept other states, but at compile time are processed down to either “italic” or “bold”. At least according to the different examples I’ve seen in the Flex SDK (see the isBold and isItalic methods). The four font faces are, fontStyle regular fontWeight regular, fontStyle italic fontWeight regular, fontStyle regular fontWeight bold, and fontStyle italic fontWeight bold. Consider the following two embedded font files.

[Embed source="GenAR102.TTF" fontName="My Gentium"
unicodeRange="U+0061-U+007A" fontStyle="regular" fontWeight="regular" mimeType="application/x-font-truetype"]
public static const font1:Class
[Embed source="GenAI102.TTF" fontName="My Gentium"
unicodeRange="U+0061-U+007A" fontStyle="italic" fontWeight="regular" mimeType="application/x-font-truetype"]
public static const font2:Class

Notice that both classes share the same fontName. After both classes have been registered at runtime using the flash.text.Font.registerFont() method, the “My Gentium” font will be available for runtime use. In addition, the font will contain a font face with regular style and weight, and a font face with italic style and regular weight. For text in a classic TextField, a TextFormat object that uses “My Gentium” for the font property will render correctly with the italic property set to true or false. For text in a text engine TextBlock, a FontDescription object that uses “My Gentium” for the fontName property will render correctly with the fontPosture property set to either FontPosture.ITALIC or FontPosture.NORMAL.

Returning to the different values that the fontStyle and fontWeight properties accept. For fontStyle, values of “italic” or “oblique” will set an italic font face. For fontWeight, either “bold” or a number value higher than 700 will set a bold font face (character case for values does not matter). There’s also documentation that suggests a value of “heavy” will set a bold font face.

Font file types & font managers

TrueType, TrueType Collection, and OpenType fonts all work with the different fontStyle and fontWeight properties. There is one important detail. The file that is referenced in the source property of the embed tag must have a font subfamily that matches the accepted values for the fontStyle or fontWeight properties. To clarify, to set the fontStyle to italic, the source font file must have a subfamily of either italic or oblique. To set the fontWeight to bold, the source font must have a subfamily of bold (character case does not matter). The AFE and Batik font managers will throw a compile time error if the font file subfamily does not match a fontStyle property set to italic, or a fontWeight property set to bold. The CFF font manager will ignore a fontStyle property set to italic or a fontWeight property set to bold if there is no matching subfamily.

To check what subfamilies are available in a specific file, on OS X, open the the file with Font Book. The available subfamilies are listed in a dropdown directly underneath the font name. On Windows XP, AMP Font Viewer is a free application that lists subfamilies available to a specific font file.

TrueType Collection font files can hold multiple fonts, each with a different subfamily. If a TrueType Collection file contains multiple subfamilies it’s possible to embed the different subfamilies under a single fontName that can then be used at runtime. Each font subfamily must be embedded once per font face. The following example shows a single TrueType Collection file being used to embed all four font faces.

[Embed source="Cochin.ttc" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="regular" fontWeight="regular" mimeType="application/x-font-truetype-collection"]
public static const font1:Class
[Embed source="Cochin.ttc" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="italic" fontWeight="regular" mimeType="application/x-font-truetype-collection"]
public static const font2:Class
[Embed source="Cochin.ttc" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="regular" fontWeight="bold" mimeType="application/x-font-truetype-collection"]
public static const font3:Class
[Embed source="Cochin.ttc" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="italic" fontWeight="bold" mimeType="application/x-font-truetype-collection"]
public static const font4:Class

After all four classes have been registered at runtime, it’s possible to use a TextFormat to reference the “My Cochin” font with any combination of bold or italic settings. Note that the TrueType Collection is referenced once for each font face.

It’s also possible to mix and match font files to font faces. For example, replacing the first embed in the above example with the following embed is possible.

[Embed source="ChunkFive.otf" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="regular" fontWeight="regular" mimeType="application/x-font-opentype"]
public static const font1:Class

Now, after runtime font registering, the non-italic, non-bold “My Cochin” font face will use the outlines defined in the Chunkfive.otf file, while the other font faces will use the outlines defined in the TrueType Collection. Special note: I have only tested the above example by runtime registering each font face specific to a fontName once. Registering by overwriting a fontName with a matching face, I haven’t tried. Undiscovered country.

The majority of this post was based on tests using version 4 of the Flex SDK on OS X. A number of the tests were also verified on Windows XP with version 3.5 of the Flex SDK. As well I used Chunk, and Gentium, two great open source fonts. Cochin was pre-installed on OS X. Haven’t found an open source TrueType Collection file yet. Where possible I checked existing documentation. As always, feel free to correct or comment.

A property list for embedding fonts with the [Emded] metadata tag.

iconJanuary 20th, 2010 icon5 Comments

The purpose of this post is to document all the different properties available when using the [Embed] metadata tag to embed fonts into an SWF file. Much of this information is spread throughout Adobe’s documentation, and some of it came from personal experience while developing the Runtime Font Publisher extension. This list was generated out of a desire to see all this information in a single easy-to-read table.

While researching this post the most important points I discovered are that the Flex SDK uses three different font managers, that the font type (OpenType versus TrueType) often impacts the behavior of a property, and in a few cases, setting a value on one property will affect the behavior of a different property. As such I’ve repeated properties to point out behaviors specific to font type, and the notes point out instances where setting one property affects the behavior of a different property. Enjoy!

Font Type Property Values Notes
OpenType not supported TrueType systemFont Exact name of a system font
(e.g., "Arial")
The font must be installed on your system. The JRE font manager is used to embed system fonts. The Flex SDK does not support embedding OpenType sytem fonts.
OpenType source Absolute or relative location of font file (e.g., "c:/akbar.otf") OpenType fonts are transcoded by the AFE font manager.
TrueType source Absolute or relative location of font file (e.g., "../akbar.ttf") TrueType fonts can be transcoded by the AFE or Batik font manager. Modifying the flex-config.xml file defines which font manager is used.
OpenType TrueType fontName String alias The fontName property is used to reference the font at runtime within the Flash Player. To shadow a font, that is giving it the same name as a system font, set the show-shadows-system-font-warnings compiler option to false. Shadowing a font often causes issues at runtime, especially if the system font that is being shadowed has a different weight or style than the embedded font.
OpenType TrueType fontFamily String alias Exhibits the same behavior as the fontName property.
OpenType fontWeight normal | bold | heavy The fontWeight property must be set to the typeface style defined by the font file. Adobe’s documentation only references the three values, however some font files have a different typeface style. In theory, these could also be used. Have yet to test.
TrueType fontWeight normal | bold | heavy The fontWeight property behaves the same for TrueType fonts as OpenType font when using the source property to embed a font. When the systemFont property is used, the font can be set to either normal or bold. I believe this styling is done by functions of the compiler, and not the exact font outlines defined in the font file. Must research more.
OpenType fontStyle normal | italic | oblique The fontStyle property must be set to the typeface style defined by the font file. Adobe’s documentation only references the three values, however some font files have a different typeface style. In theory, these could also be used. Have yet to test.
TrueType fontStyle normal | italic | oblique The fontStyle property behaves the same for TrueType fonts as OpenType font when using the source property to embed a font. When the systemFont property is used, the font can be set to either normal or italic. I believe this styling is done by modifying the outlines for the font, and not using the exact outlines defined within the font file. Must research more.
OpenType TrueType unicodeRange Unicode characters written in U+hex notation. Also accepts string range names. Ranges are specificed by dashes. Characters and ranges are comma delimited. String range names are defined in flex-config.xml.
OpenType TrueType advanced-
AntiAliasing
true | false By default the Flex SDK sets this value to true. Fonts that use advanced anti-aliasing appear sharper at smaller sizes. This property is ignored if the cff property is set to true.
OpenType TrueType cff embedAsCFF true | false Compact Font Format embedded fonts are created when set to true. CFF fonts are used by the Flash Text Engine. Classic textfields (flash.text.textfield) cannot use embedded CFF fonts.
OpenType mimeType application/x-font This property must be set to succesfully embed the font.
TrueType mimeType application/x-font | application/x-font-truetype Unknown if using either mimeType affects behavior of embedded font.

Runtime Font Publisher; A Flash CS4 Extension.

iconSeptember 28th, 2009 icon10 Comments

Recently, I created my first Flash CS4 extension. The Runtime Font Publisher extension makes it easy to create, configure, and publish SWFs that contain fonts for runtime sharing. Each SWF that is created by the Runtime Font Publisher can contain a single font definition, or multiple definitions. For each font definition it is possible to configure the font name, font source file, font family, font style, and embedded character sets.

Runtime Font Publisher

How-to use

Using a font SWF published from the Runtime Font Publisher is as easy as using the loader class to load the SWF and then updating the textformat object of a textfield to use a font name chosen in the Runtime Font Publisher. SWFs published by the extension will automatically register the fonts with the Flash Player when loaded.

As a simplified example, the following code loads the font SWF that contains the embedded fonts.var loader:Loader = new Loader();
var request:URLRequest = new URLRequest('RSFont.swf');
loader.load(request);
loader.contentLoaderInfo.addEventListener(Event.INIT, onInit);
The Event.INIT handler then updates the textformat object of a textfield on the stage to match the font name of a font embedded in the font SWF. function onInit(event:Event):void {
//embedFonts must be set to true to display a runtime shared font.
textField.embedFonts = true;
var textFormat:TextFormat = textField.getTextFormat();
textFormat.font = "MyFont"; //MyFont is defined in the Font name field.
textField.defaultTextFormat = textFormat;
textField.text = "Some Text";
}

Known issues

Issues know to cause compiler errors include selecting a non-TrueType font for the Family, or selecting style properties incompatible with a specific font file. As the Family drop-down lists all device fonts on a system, selecting a font that is not a TrueType font will cause a compiler error. To quickly determine if a font in the Family drop-down is TrueType or OpenType (indicated by icon), select a textfield and view the Family drop-down in the Flash CS4 properties panel. The font SWFs use the [Embed] tag to embed the fonts. Adobe has a good tutorial on how to embed fonts as metadata. Understanding the details of Adobe’s article will make it easier to debug any compiler errors.

Further troubleshooting can be accomplished by viewing the source files the extension generates. Source files are saved into the \Documents and Settings\{username}\Local Settings\Application Data\Adobe\Flash CS4\en\Configuration\Commands\RSFont\src folder on a PC, and /{username}/Library/Application Support/Adobe/Flash CS4/en/Configuration/Commands/RSFont/src folder on a Mac.

Selecting “All” within the Ranges list often results in SWFs that don’t include any font outlines. No compiler errors are thrown and it’s only obvious by the extremely small file size of the output SWF. Compiling the source with the command line against the 3.2.0 Flex SDK yields success. Could be an issue with the Flash CS4 IDE.

Download

Download the Runtime Font Publisher directly from my site. Please let me know what you think. I have ideas for more features, and I’d love to get more feedback. This extension will be submitted to the Adobe Exchange.

The MovieClip life cycle revisited. From Event.ADDED to Event.REMOVED_FROM_STAGE.

iconJune 15th, 2009 icon7 Comments

This post is a follow up to my previous post on the MovieClip life cycle. Previously I took a look at the sequence of events that occur during the life of a single frame. This post adds to the discussion by covering event types relevant to MovieClip display object children. Those events are Event.ADDED, Event.ADDED_TO_STAGE, Event.REMOVED, and Event.REMOVED_FROM_STAGE.

What follows is the same order of events from before, plus the four new events. The four have been around since Flash Player 9, they’re just new to my discussion. And to keep things short, I’m only going to discuss the new events in depth.

  1. Event of event type Event.ENTER_FRAME dispatched
  2. Constructor code of children display objects is executed
  3. Event of event type Event.ADDED dispatched from children display objects
  4. Event of event type Event.ADDED_TO_STAGE dispatched from children display objects
  5. Event of event type Event.FRAME_CONSTRUCTED dispatched
  6. MovieClip frame actions are executed
  7. Frame actions of children MovieClips are executed
  8. Event of event type Event.EXIT_FRAME dispatched
  9. Event of event type Event.RENDER dispatched
  10. Event of event type Event.REMOVED dispatched from children display objects
  11. Event of event type Event.REMOVED_FROM_STAGE dispatched from children display objects

A special note about these events. The order of the above is only specific to MovieClips added or removed from the timeline in the Flash IDE. Manually calling addChild() or addChildAt() will dispatch Event.ADDED and Event.ADDED_TO_STAGE events immediately after the add child call. The same holds true for the removeChild() and removeChildAt() calls, and the related Event.REMOVED and Event.REMOVED_FROM_STAGE events.

Steps 3 and 4

Event.ADDED and Event.ADDED_TO_STAGE are both dispatched when the playhead moves across the MovieClip timeline and encounters a keyframe with a new child display object. If the child exists in the frame immediately previous to the keyframe there a number of conditions that will still cause both events to be dispatched. Both events will be dispatched if the child exists on a different layer, or has a different instance name, or is being masked/unmasked. Masked is defined as the mask being added by keyframe to the mask layer. Unmasked means that in the next frame the mask layer is empty.

Regardless of the order that listeners are added, Event.ADDED is dispatched before Event.ADDED_TO_STAGE. If a child, in the frame the playhead is on, is not being added neither event will be dispatched.

Steps 10 and 11

Event.REMOVED and Event.REMOVED_FROM_STAGE are dispatched at the end of the current frame when a child exists on the timeline and does not exist in the next frame. There are other conditions that cause the remove events to be dispatched from a child that remains on the timeline. Conditions mirror those of the added events and include when the child in question appears on a new keyframe on a different layer, or the child has a different instance name, or the child is about to be masked/unmasked.

Regardless of the order that listeners are added, Event.REMOVED is dispatched before Event.REMOVED_FROM_STAGE. If a child is not being removed in the next frame, then neither event will be dispatched.

The MovieClip life cycle, Event.FRAME_CONSTRUCTED,
and Event.EXIT_FRAME.

iconMay 22nd, 2009 icon8 Comments

The release of Flash Player 10 introduces two new frame related event types. Event.FRAME_CONSTRUCTED, and Event.EXIT_FRAME are the two new event types. These two new event types add another level of control for making animation sensitive changes to display list objects. The purpose of this post is to illustrate when these event types occur within a frame’s life cycle. Details will discuss the order that the events occur relative to Event.ENTER_FRAME, Event.RENDER, frame scripts, and constructor code of children display objects.

To provide context to the discussion it’s best to start with the order of events that are fired during a frame’s life cycle. This list was made by creating a Flash test file and looking at the currentFrame property of a MovieClip with the different frame event type listeners.

  1. Event of event type Event.ENTER_FRAME dispatched
  2. Constructor code of children MovieClips is executed
  3. Event of event type Event.FRAME_CONSTRUCTED dispatched
  4. MovieClip frame actions are executed
  5. Frame actions of children MovieClips are executed
  6. Event of event type Event.EXIT_FRAME dispatched
  7. Event of event type Event.RENDER dispatched

Steps 1 and 2

Flash Player 9 introduced Event.ENTER_FRAME, which is dispatched every time the playhead enters a new frame and is tied to the frame rate being run by the Flash Player. Event.ENTER_FRAME functions in much the same way as onEnterFrame() did in AS 2.0. In step 2 constructor code for any display list children is executed. This includes any display list objects extending from the native display list classes of the Flash API. The order of these two steps is the same as it was in Flash Player 9. Nothing new to report here.

Step 3

New to Flash Player 10 the event, Event.FRAME_CONSTRUCTED is executed. It’s important to remember the order for when this event is executed. At frame construction is the first time that it’s possible to start referencing newly added display list children of the MovieClip that is being listened to. This caused all sort of issues in Flash Player 9 after issuing a gotoAndStop call to a frame with display list objects that didn’t exist on the frame where the gotoAndStop call was made. Due to the fact that display list children had yet to be instantiated, targeting a display object child would return null the first time an Event.ENTER_FRAME was called after the gotoAndStop.

Steps 4 and 5

Steps 4 and 5 remain the same in Flash Player 10 as they did in Flash Player 9. First the frame actions of the MovieClip acting as a display object container are executed. Then the frame actions for display list children are executed. Note that in the Flash CS3 IDE the load order, a setting adjustable in publish settings panel, would affect the order that the display list children would execute their constructors and frame scripts. I haven’t found that dialogue in the Flash CS4 IDE publish settings, maybe Adobe removed it? In any case, by default, it uses a load order of bottom up in CS4. That means that display objects that are on a lower layer will have their constructor and frame scripts executed before display list objects on higher layers.

Steps 6 and 7

New to Flash Player 10, Event.EXIT_FRAME is executed in step 6. As it’s at the end of the frame life cycle, it would be good to use when there is a need to manipulate a display list object after its constructor and frame scripts have been executed.

Another possible use for Event.EXIT_FRAME is to replace calls in Flash Player 9 that were using Event.RENDER. Flash Player 9 introduced Event.RENDER, which according to Adobe documentation is dispatched right before the display list is scheduled to be updated. Depending on how one looks at it this may be true, as it’s at the end of the life cycle above, that would mean it’s at the beginning of the next frame life cycle. During testing for this article I found that according to the value of currentFrame on the MovieClip I had assigned all my listeners to, Event.RENDER was the last event to execute. In addition Event.RENDER first requires a Stage.Invalidate call before it is dispatched. On top of those two issues there were issues with dispatching Event.RENDER in the first few versions of Flash Player 9. Developers need to do sub-version detection of Flash Player 9 to ensure consistent behavior. For these reasons I suggest investigating Event.EXIT_FRAME to see if it works in place of Event.RENDER.

Despite the issues with Event.RENDER there are still times when Stage.Invalidate can be used. For example, calling Stage.Invalidate during mouse movements in Flash movies with a low FPS setting will smooth drag and drop animations.

GotoClip. A solution for Error #1009, gotoAndStop, gotoAndPlay and targeting children MovieClips.

iconApril 30th, 2009 icon3 Comments

One of the differences between ActionScript 2.0 and 3.0 is the behavior of MovieClip timelines and code targeting display list children. For example in AS 2.0 it was possible to call gotoAndStop or gotoAndPlay and then directly manipulate MovieClips at the targeted frame.
gotoAndStop(25);
child_mc._rotation = 25;
In AS 3.0 calling the equivalent code
gotoAndStop(25);
child_mc.rotation = 25;
will yield a runtime error such as this.
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at MyFla_fla::MainTimeline/frame1()

GotoClip is a class that restores some of the AS 2.0 timeline functionality to AS 3.0 MovieClips. It will allow calls to be made like this
gotoAndStop(25);
var child:MovieClip = getChildByName("child_mc") as MovieClip;
child.rotation = 25;
while avoiding runtime errors. The class makes it possible to target a display list child MovieClip anywhere on the timeline after a gotoAndStop, or gotoAndPlay call. Then within the same code block properties can be set on the child MovieClip. During runtime the GotoClip class behaves as a proxy to store the commands made to the child MovieClip. GotoClip then applies those commands when the Flash Player has successfully drawn the child MovieClip to the stage, thereby avoiding the typical runtime Error #1009.

GotoClip resides within a small ActionScript library I created called the AS3 Display List Library. The library resides on Google Code. It includes a Wiki and the downloads section includes samples with source code and a swc which can be used for compiling with Flash and Flex projects.

TheCaminus.com live now!

iconMarch 25th, 2007 icon1 Comment

After months of development, all during off hours outside of my regular day job, it feels great to finally launch thecaminus.com. The site is the portfolio of Calgary based photographer Jamie Clark. The page design was a collaboration between Jamie and myself. I handled all the programming and motion design. There are nine sections and approximately 125 photos to view. A basic MVC framework was used to control the site, and the galleries are all driven by XML. Check the site out now and take a look at some amazing photographs. Congrats Jamie!

The Author

Johannes Tacskovics
ECMAScript Developer

Portrait of Johannes Tacskovics

On front-end software engineering this is the blog of Johannes Tacskovics, a Los Angeles based ECMAScript Developer. This blog is focused on object oriented software development for the web.

Article Categories

Article Archives

Meta