Useful resources for Flex AS3
I recently spent a summer creating Adobe Flash applications for Kickstart Digital using the Flex framework. Back in my teenage years I spent a lot of time creating pseudo-agencies with flashy adverts (Flash 4/5/MX). It has progressed incredibly since then.
AS3 is a respectable, highly featured language. Flash is capable and still has a place in development. I cannot imagine developing for it without Adobe Flash Builder 4. Until a widely adopted Javascript/Canvas IDE is developed, Flash will have a place delivering rich media on the web.
Starting out
Essential resources include the Spark components and complete list of Flex 4 classes. Learning how to handle exceptions is essential as much of development time is spent testing. Bugs are inevitable after all.
These resources should be bookmarked before embarking on a Flex adventure. It is important to use the latest Spark components such as s:BitmapImage instead of older mx:Image components. Some tutorials can now be improved using Spark components.
The program can attach events to the UI lifecycle. Common attachment attributes include preInitialize, initialize, creationComplete and applicationComplete. I use initialise the most, placing the handler before dimensions are calculated but after all child components have been initialised first.
Layouts
By default spark groups position children using absolute coordinates. Other layouts can be assigned using the spark layout element:
<s:Group>
<s:layout>
<s:HorizontalLayout />
<s:layout>
</s:Group>
Prefer to use inbuilt element abbreviations. A large amount of interfaces can be created using just these three component containers.
<s:HGroup />
<s:VGroup />
<s:TileGroup />
Each group can have a default alignment for child components. Gap is the name for spacing in Spark components as is an extremely useful attribute.
Data structures
AS3 has inbuilt Array, Object, Dictionary, Vector data structures. This page provides a brilliant overview. In addition there is a LinkedList implementation though I have not found a place to use it yet.
The Vector data structure is interesting because it is the only typed container. It was added to improve performance of high throughput game code using internal prediction (as each data item has fixed size).
var newVec:Vector.<int> = new Vector.<int>;
newVec.push(1);
Note the strange dot syntax, unlike Java or C++. Expect more of these generics in later versions of ActionScript.
The Dictionary object has many useful features. The operator in is useful for determining whether a key is in an associative array. A useful AS3 feature allows direct iteration over both keys and values:
for (var key:Object in dict) { }
for each (var value:Object in dict) { }
Arrays do not have a copy method. The best solution I have found is to use concat to create the new array.
Data structures have functional methods like Array.filter. Unfortunately the callback function is verbose.
function callback(item:*, index:int, array:Array):Boolean;
AS3 Data Structures For Game Developers is promising for data intensive applications.
Design patterns
Classes have strange behaviours. For instance you have to be careful how you call super. They have an additional internal modifier the common private/protected/public/static modifiers. This specifies that a property is visible within the same package (see more).
Singletons are often useful in AS3. Especially when performing multiple calls to a web service. Unfortunately private constructors are not supported by Adobe to preserve backwards compatibility with the ECMA specification.
Many people diagree with Singletons. See Why Singletons are Evil for a powerful argument against their use. I think they have a place in rapid web development, at the expense of component rigidity.
Text handling
Font embedding is required by most Flash application designs. It is not intuitive in Flash Builder 4. The first comment about this article works well. It details:
- Start a new flex app
- Go to design view
- Open the “Appearance” tab on the right
- In the font drop down list, you can choose browse to find your font files.
Word wrapping in Flex 4 is achieved by setting a width and changing the line break style:
<s:Label width="200" lineBreak="toFit" />
Scrolling
Scrolling is common in a large amount of applications that load data dynamically. Joeflash’s Enigmacopaedia has an excellent explanation of how to mask a group with a rounded rectangle. You can bind horizontalScrollPosition to the scrollbar value. Then when the scrollbar is modified the visible area of the scrollable group reflects the value change without additional code.
Top source for learning is the Adobe documentation on HSlider.
Skinning
Most media projects require complete skinning. Learning how to skin a scrollbar takes you most of the way towards creating a variety of custom skinned components.
Many components can be skinned simply by changing the source image of an internal bitmap. Skinning in Flash using XML Spark components reduces release size. Layering inbuilt shapes with strokes, fills and visual effects can easy emulate Photoshop designs of interface elements.
Mouse handling
Any descendant of the Sprite class (most UI components) has a buttonMode MXML attribute that shows the pointer cursor when the mouse hovers over the element. By default transparent sections in the element are ignored by the mouse. This is intuitive but can annoy users when half the pixels are not clickable. This mouseEnabledWhereTransparent property toggles this behaviour.
Thanks for reading, please add your comments.
