October 2006

Ted Patrick created a community-driven repository of ActionScript and MXML code called "Just MXML and AS3". His blog posting announcing the forum can be found here. I learned about this forum from Brian Riely's blog posting.

There's a post on Josh Buhler's blog about a great presentation called "Tips and Tricks for Delivering More Responsive Flex Applications" by David George of Adobe. Here are my notes from the session:

Regarding object creation, it's best to delay the creation of objects until they become visible. And, you can stagger the creation of objects to improve the perceived startup time. You can set the creationPolicy property to "queued" in order to have the contents of a container initialize over time. Be careful when using the Repeater and avoid when possible (here's how).

Regarding measurement & layout, there are costly computations involved when the Flash player has to draw the screen, which involves a Measurement Phase (traversing tree from the bottom up) and a Layout Phase (traversing the tree from the top down).

You should reduce container nesting by using HBox and VBox instead of Grid. Avoid nesting a VBox inside a Panel or Application because those containers already know how to do that. You should keep in mind that the root of an MXML component doesn't necessarily need to be a container. When you use a canvas container with constraints, it typically means a flatter and faster application. Be on the lookout for containers with only a single child.

Avoid redundant redraws by being careful not to have child object changes trigger parent redraw each time. You should delay data requests until creationComplete fires so that user is at least looking at an initialized application instead of a progress bar. Limit the geometry changes when a response arrive, and you can also stagger data requests and queue responses

If an object's properties are changed, it's bounding box is a redraw region, and all objects inside the bounding box will have to be redrawn. You can use the debug player to visualize redraws by using the "show redraw region" setting. Objects that overlap the redraw region are redrawn.

You can use the cacheAsBitmap property so that complex vector graphics is rendered into an offscreen bitmap. But, you need to be careful, especially when an object is resized often because the cache has to be stored as well. The cacheAsBitmap technique is especially useful when an alert box is going to be shown (and then when it's done being displayed). "Blitting" is the process of moving something from cache back into the object.

You can use Resize.hideChildren to hide children during state transition. "As you're animating, simplify." Avoid the mixture of device text and vector graphics (interweaved together). Place device text on top of the vector graphics (instead of interweaved in a z-order). If an effect is not rendering well, you can use Effect.suspendBackgroundProcessing to cause the effect to play first.

In order to reduce memory usage, discard unused objects by using removeChild. Remove event listeners or use weak references when calling addEventListener. You should reduce the amount of data hanging around by clearing references to unused data by setting properies to null or undefined. The memory profiling tools in the debugger are helpful to use.

When there are a large number of UI screens, load screens on an as-needed basis by loading subordinate SWFs using . You can use a runtime shared library (RSL) so that each subordinate SWF does not need to have the application model or redundant class information. More information about RSLs is available in on the Adobe site. More information about modular applications is available on Roger Gonzalez's blog (here and here). When there are large amounts of data being used in an application, implement a paging scheme.

When setting styles, changing a rule set is very expensive (i.e. setting all buttons to red) and should be avoided. The only time the setStyle() method is cheap is during object creation (before being attached to the display list). If a style needs to change at runtime, initialize it at authoring time to something so that there's a slot available for the data to be stored in. In order to change styles using inline code, you should set the property in the MXML instead of using the setStyle() method.

There is a 4-part overview for handling data with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Defining data models: Data models are defined and used in Flex applications to store application-specific data in a structured format. You can define data models in an MXML tag, ActionScript function or an ActionScript class. An example was provided that illustrated the use of a Transfer Object (aka Value Object), which contains just the data required to interact with a piece of business logic.
2. Using data binding: You can tie data between one object and another with binding. Data binding can be achieved by using curly braces syntax, using ActionScript expressions in curly braces, using the tag in MXML, or using bindings in ActionScript.
3. Validating data: Flex has built-in mechanisms you can use to validate data entered by users. Validation logic can be implemented using MXML and/or ActionScript.
4. Formatting data: Flex formatters are components that give you the ability to format currency, dates, numbers, phone numbers and ZIP codes.

There is a 4-part overview for building custom components with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Building components in MXML: Custom components defined as separate MXML files that are saved in a folder structure in the project. The root tag of the custom component identifies the control that is being extended, just as would be done using ActionScript. Components that contain multiple component definitions are called composite MXML components. If you want to extend the functionality of a composite component, you need to create a custom component that uses the composite component as its root tag. You can create reusable loosely coupled components by defining implicit accessors (setter and getter methods) in order to pass information back and forth. It is helpful to use the [Inspectable] metadata tag to indicate that the property should appear in the code hints of Flex Builder. It is considered a best practice to return information from a component back to the main application through the dispatching of events.
2. Building components in ActionScript: Custom components can be coded in ActionScript and stored in a folder structure just like custom components for MXML files. You can use the setStyle() method in the constructor of the custom component in order to override the default settings of the component superclass.
3. Building components using code behind: In practice you will use a combination of MXML and ActionScript to build Flex components; MXML is useful for layout of controls, and ActionScript is useful for defining the logic. With the release of Flex 2 comes a new technique for coupling the two together: code behind. You make this work by creating an MXML component and make its root tag correspond to an ActionScript class. In order for this to work, child controls must be declared as public properties in the ActionScript class. There is a thorough example provided using a best practices architecture that conforms to the Arp framework.
4. Deploying components: You can deploy components as SWC files or as part of a Runtime Shared Library (RSL) for convenience, runtime efficiency and security purposes. In order to use SWC files when building a Flex application, you specify the SWC file on the Library path tab of the Flex Build Path in the Properties window of your project in Flex Builder.

There is a 6-part overview for building an advanced user interface with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Using the Repeater component: You can use the Repeater component to emulate loops by executing multiple times instructions for creating components or containers that associate to the number of items in an array. One important thing to remember is that the Repeater component instantiates all objects that are repeated, whereas the HorizontalList, TileList and List controls only instantiate objects visible in the list, so there are performance considerations here.
2. Skinning your components: You can skin components in various status either graphically or programmatically using either inline code, using the setStyle() method or using CSS.
3. Using item renderers: There are several controls derived from the ListBase class that you can use to represent lists of items: DataGrid, HorizontalList, List, Menu, TileList and Tree. Drop-in item renderers allow you to customize the display of items using components that implement the IDropInListItemRenderer interface. You can exert more control over the rendering by defining in-line item renderers, either in a separate area of the application code using the Component tag or in their own MXML files as custom components.
4. Creating item editors: You can use item editors to let users modify the value of a cell in list controls such as the DataGrid, List and Tree. You use drop-in item editors just like you do drop-in item renderers.
5. Using data providers: You can use the ArrayCollection mechanism to robustly bind object data to list-based controls. If a control needs to handle different types of collections (i.e. ArrayCollection and XMLListCollection, then you should bind the data provider to a type ICollectionView. There was an example illustrating the use of an HTTPService that stores XML data into an ArrayCollection. Another example illustrated modifying data in data providers and listening for events.
6. Adding drag-and-drop support: There are several components with drag-and-drop capability in Flex: DataGrid, HorizontalList, List, Menu, PrintDataGrid, TileList and Tree. You can also create custom drag-and-drop behaviors with components.

Sho Kuwamoto put together a nice 3-part discussion on Flex MXML tags and how they map to ActionScript so that you know the implications of implementing various MXML code directives. Part 1 - Part 2 - Part 3.

There has been some discussion about the performance considerations and appropriateness of using Number vs. int vs. uint in various situations in ActionScript 3 code. After reading the analysis by Sho, Grant, Tink and Keith, my plan is to use Number almost all the time, except when I'm just using an integer counter in a loop, in which case I'll be using int (and not uint).

There is an 8-part overview for building a simiple user interface with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Using controls: Examples of using Text controls (Label, Text, TextArea, TextInput and RichTextEditor), Button controls (Button, LinkButton, CheckBox, RadioButton and PopupButton) and List controls (ComboBox, List, HorizontalList, DataGrid, Tile, Menu, and Tree).
2. Using containers: Examples of Layout containers (Panel, HDividedBox, VDividedBox, Tile, Form, ApplicationControlBar and ControlBar) and Navigation containers (Accordion, TabNavigator and ViewStack). The Spacer control was also discussed. In order to use the ViewStack container, you must also use a LinkBar, TabBar, ButtonBar or ToggleButtonBar control.
3. Styling your components: Using local style definitions, external style sheets, inline styles and the setStyle() method (which is computationally expensive and should be avoided when possible).
4. Adding effects: Example of defining effects and binding them to triggers.
5. Creating states: Example of multiple view states that correspond to different application conditions.
6. Defining state transitions: Example of using transitions when a view state change occurs, either in parallel or in sequence.
7. Using tooltips: Example of using ToolTips to provide helpful information to users.
8. Controlling the cursor: Example of controlling the (standard or custom) cursor image.

There is a 5-part overview of getting started with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Coding with MXML and ActionScript: MXML gets compiled into ActionScript classes, so you can use MXML or write the equivalent code in ActionScript directly -- examples of both methods are shown.
2. Creating your first application: Basic structure of an application.
3. Handling events: There are three ways to receive event notifications:
   • Registering an event handler in MXML
   • Creating an inline event handler in the MXML definition (not recommended)
   • Registering an event listener through ActionScript
4. Positioning and laying out Flex components: There are three ways to position components in a Flex application:
   • Automatic positioning
   • Absolute positioning
   • Constraint-based layout, which allows you to anchor the edge of a component, stretch a component, or anchor the center of a component.
5. Embedding application assets: Examples provided of embedding images, stretching images with scale-9, using CSS for skinning, embedding SWFs (and their library assets), and embedding sounds and fonts.

Grant Skinner gave a talk at the Flashforward 2006 conference in Austin regarding Flash resource management, including a discussion of the Garbage Collector in Flash Player 9. Grant provided sample code and classes (made available with the presentation) that use intelligent resource management techniques.

At the recent Flashforward conference, Hillman Curtis showcased his filmmaking talents by presenting several of his films, all of which are available on the Film & Video page of his website.

The Milton Glaser documentary offers an amazing glimpse of the work and perspectives of this legendary designer. There's too much to take in with just one viewing -- I had to watch it several times (including one time just listening to the audio and not looking at the screen). This quote was on display near one of the desks in his studio: "Love is the extremely difficult realization that something other than oneself is real." - Iris Murdoch

The Pentagram documentary amazingly captures the essence of this design firm, which is a collection of independent and equal partners. In the film each partner is given the same time on screen, yet the audio of each partner talking overlaps between visual segments, brilliantly capturing the interconnectedness of these independent partners.

The Movement Study with NYC dancers is a film that I'm finding hard to describe with words, other than it's a wonderful display of artistry.

The MTIV Teaser is a short for the book called MTIV: Process, Inspiration and Practice for the New Media Designer by Hillman Curtis. A pleasant surprise in the video was the reference to the last line of the E.E. Cummings poem called "somewhere i have never travelled,gladly beyond".

At the most recent Boston Flash Platform User Group meeting, Keith Peters gave a talk about "Making Things Move in AS3." One of the main parts of his presentation was a discussion about the three options for getting started working with ActionScript 3:

1. Download the new Flash 9 AS3 Preview (free for Flash 8 users)
2. Purchase Flex Builder 2
3. Download the Flex 2 SDK (free), which is basically just a SWF compiler. Then, you can download the FlashDevelop IDE (free) and Apache Ant (free) to organize your project files and compile instructions. Keith has made available on his blog the templates he uses to structure his projects using this configuration.