You can embed fonts, sounds, graphics, and even other SWFs in your application. When embedding assets into an application, you don't get an opportunity to control quality settings, so if you have control over the compression settings of these files, you must tweak these using external programs.

You can embed the following content:

Of these, SVG files and font files may not be loaded at runtime.

The easiest, and typical, way to get assets into your application is to use styles. By placing the image embed right where it will be used, this approach becomes intuitive and easily manageable. Flex 2 uses the Embed() notation, a Flex extension to CSS in the vein of url().

The Embed() functional notation can take multiple parameters, some of which apply only to certain types of assets. The default parameter is source, which if there are no other parameters, can be left out.

When writing CSS in a style sheet, use the Embed notation normally:

<mx:Style>
       MonaLisa {
              background-image: Embed("/assets/monalisa.jpg");
              background-size: "100%";
       }
</mx:Style>
<louvre:MonaLisa/>

And when writing styles inline as attributes of a tag, write @Embed() instead:

<mx:Image source="@Embed('/assets/monalisa.jpg')" width="100%" height="100%"/>

Embed() uses paths relative to the file they are written in, and the root of the path is the source folder as set in Flex Builder 2's project preferences. Unless you have a good reason not to, you should use absolute paths so moving source (code) files has no impact.

Assets that you embed become part of the application, and are available both to code you write and the application at runtime. The greatest part about assets is that they are turned into classes! While it seems far out at first, this makes sense in the context of Flash Player 9's new display architecture. The method for creating any kind of display object is simply new. When you create new components that extend existing ones, they are still created with new. So bitmap assets are subclasses of BitmapAsset (which are sub-sub-classes of Bitmap), which happen to extend the functionality of a blank Bitmap by displaying some particular image instead:

var a:Button = new Button(); addChild(a);
var b:Panel = new Panel(); addChild(b);
var c:TextInput = new TextInput(); addChild(c);
var d:InboxView = new InboxView(); addChild(d); //custom component
var e:MonaLisaBitmap = new MonaLisaBitmap(); addChild(e); //asset!

When you embed assets in CSS, the Flex 2 compiler automatically generates names for the classes. If you want to access them from outside CSS, you can embed assets using metadata in ActionScript.

You can use the Embed metadata tag to embed assets in ActionScript. Embedded assets are associated with the Class reference you provide. You can also use curly brace binding to reference that class in inline CSS attributes:

[Embed(source="assets/delete.gif")]
private const DeleteAsset:Class;

<!-- embedding directly in inline CSS -->
<mx:Button icon="@Embed(source='/assets/delete.gif')" label="Delete"/>
<!-- binding to class embedded using metadata -->
<mx:Button icon="{DeleteAsset}" label="Delete"/>

Because variables referencing classes can't be used for typing, you can't type var foo:DeleteAsset. When passing references to assets, use their superclass instead. Bitmaps are imported as BitmapAssets, fonts as FontAssets, SVG as SpriteAsset, etc. You may also use the common interface IFlexAsset for typing.

Whether you use Embed() in a metadata tag, in an inline style, or a style sheet, you can use parameters with it. With every kind of asset it supports the source and mimeType properties, used to specify the source file and MIME type of the object.

Graphical assets also support properties for scale-9 slicing. Scale-9 allows you to scale an image discontinuously, typically for use as a background or skin for a resizable component. By scaling the middle and keeping the corners at their original size, you can stretch many images without deforming the important details at the corners. You define two lines on each axis, which split the image into a grid of nine subdivisions. The vertical lines' positions are measured in pixels from the left, and the vertical lines' positions are measured from the top (as the origin in Flash Player is at the top left). For example, we could use this to preserve the size of a frame in a framed painting:

<mx:Image source="@Embed(source='/assets/monalisa-framed.jpg',
       scaleGridTop=22, scaleGridLeft=22, scaleGridRight=395, scaleGridBottom=575)"
       width="100%" height="100%"/>

To embed a font in a style sheet, you can use url() instead of Embed(). Use the special selector @font-face to define the font, and set font-family to create its name:

/* embedding the font */
@font-face {
       src: url("/assets/fonts/caecilia-light.ttf");
       font-family: "Caecilia";
}
/* using the font */
.partlyhuman {
       font-family: "Caecilia";
       font-size: 32;
}

Using the font is as simple as referencing the font-family you declared in your embed.

You can embed a font from a TTF file, from a TrueType font installed on your system, or from a font embedded in a SWF. If you have to use PostScript or OTF fonts, embed them in a SWF and use the SWF as the target of your src property. When using fonts from a SWF, you must create a @font-face item for every style you wish to use (bold, italic, bold italic):

@font-face {
       src: url("assets/fonts/caecilia.swf");
       font-family: "Caecilia";
}
@font-face {
       src: url("assets/fonts/caecilia.swf");
       font-family: "Caecilia";
       font-style: italic
}
@font-face {
       src: url("assets/fonts/caecilia.swf");
       font-family: "Caecilia";
       font-weight: bold;
}
@font-face {
       src: url("assets/fonts/caecilia.swf");
       font-family: "Caecilia";
       font-style: italic;
       font-weight: bold;
}

You can embed both SWFs themselves, and symbols from a SWF's library into your Flex application. When you embed an entire SWF, you can use code in it if it was published with ActionScript 3 for Flash Player 9 or later, or you can communicate with older SWFs using a LocalConnection in both the host and the embedded SWF. Embedded SWFs are created as subclasses of mx.core.MovieClipLoaderAsset, which extends MovieClip.

You can also use SWFs as libraries to organize graphical assets that your Flex application uses, and use the Flash authoring tool to manage your assets. All symbols exported for ActionScript as Button or MovieClip types are available by their linkage name. Embedded symbols have all code extracted from them, so they are best used for graphics only. To specify which symbol to embed from a SWF, use the symbol parameter of the Embed() notation. For example, to use a symbol from a SWF with a collection of paintings, you might use the following:

<mx:Image id="laJoconde" source="@Embed(source='paintings.swf', symbol='monaLisa')"/>

By using the ActionScript 3.0 drawing API, you can procedurally draw graphics on the screen. If your intended look and feel can be accomplished with strokes, fills, gradients; if you require a customizable theme; if you might apply themes to elements of wildly differing size; or if file size is tantamount, you should consider using code to generate your skins.

The built-in "halo" theme of Flex 2 is entirely programmatic. This means:

To create a programmatic skin for a style, create a class that extends an appropriate abstract class provided in the mx.skins package, and implement the updateDisplayList() method to draw itself. By examining the styles set on your class (which are passed in from the styles set on the component it is theming), you can modify the way your skin is drawn.

Once your skin class is created, you can set it to skin styles with an additional notation called ClassReference(), which also may be inserted in inline CSS by prepending an at symbol (@):

Button {
       up-skin: ClassReference('com.partlyhuman.books.flexshortcut.CustomButtonSkin'),
}

It is possible to compile all of your skinned classes, assets, and styles into a SWC file and reuse this file across multiple SWFs, or distribute it, as a theme. A SWC file is an archive containing compiled code and assets, which can be linked in by the compiler without recompiling its contents. If you decide to link a SWC file dynamically, it can exist outside the SWF file, being loaded in on demand. This is an excellent tactic when splitting an application into multiple SWFs, because the shared theme will be downloaded once, rather than compiled into all SWFs. This results in smaller download size.

Use the command-line Flex compiler, mxmlc, with the –theme command-line argument to create theme files. The Flex 2 documentation explains this process in depth.

Most Effect attributes are specific to what effect they represent, but there are common ones that control the animation in general. The most useful ones are:

A word on easing functions: since you can only set this property to a function reference, it's not immediately clear how to customize properties of tweening functions that take extra parameters. The solution is to use a partial function, a function for which some of the inputs are already defined. In some functional programming languages this is supported directly in the syntax, but in ActionScript 3.0 we simply construct a container function:

private const CUSTOM_BACK_S:Number = 100;
private const backEaseOutCustom:Function =
       function(a:Number, b:Number, c:Number, d:Number):Number
       {
              return Back.easeOut(a, b, c, d, CUSTOM_BACK_S);
       };

<mx:Resize duration="1000" easingFunction="{backEaseOutCustom}"/>

Effects do not limit you to single-property animations. By composing together different Effects you can create arbitrarily complex animations. The effects system uses the same general style of declarative animation as that standardized in W3C's Synchronized Multimedia Integration Language (SMIL).

There are only two classes that control timing of animation groups, Parallel and Sequence, and they are simple to understand. Children of a <mx:Parallel> tag will start at the same time and all play at the same time, in parallel. Children of a <mx:Sequence> tag will play one by one in order. These two classes extend Effect as well, so the Effect you assign to an effect trigger may have a root node of Parallel or Sequence.

The suite of provided Effect classes and the ability to compose them into more complex effects means that you will rarely need to write your own Effect subclasses.

The Flex 2 framework exposes a wide variety of useful triggers for your effects. Though you may not subscribe to all of them, Flex 2's built-in components send all sorts of events flying about as it does its work of building and managing a UI for you. Many of these double as effect triggers, so there are very natural places to put effects. Below is a by-no-means-exhaustive list of ideas for places to apply effects.

Writing effect instances directly inside the tags that trigger them is fine for demonstrations, but is not a good practice for creating reusable, readable code. There are several things you can do to make your effect code compact.

First, you can remove literal numbers from the effect tags and replace them with constants, which you bind to using curly braces. Many of these numbers end up being linked; for example, effects that turn on and off symmetrically will use the same values for durations and swap from- and to- properties. By moving these into constants in a Script block, you can modify these to your liking from one place:

private const GLOW_BLUR_MAX:Number = 20;
private const GLOW_BLUR_MIN:Number = 0;
private const GLOW_ALPHA_MIN:Number = 0;
private const GLOW_ALPHA_MAX:Number = 0.5;
private const GLOW_DURATION:Number = 500;
private const GLOW_COLOR:uint = 0xffa0a0;
private const GLOW_EASE:Function = mx.effects.easing.Cubic.easeOut;

<mx:Button>
       <mx:rollOverEffect>
              <mx:Glow color="{GLOW_COLOR}"
                     duration="{GLOW_DURATION}"
                     easingFunction="{GLOW_EASE}"
                     blurXFrom="{GLOW_BLUR_MIN}" blurXTo="{GLOW_BLUR_MAX}"
                     blurYFrom="{GLOW_BLUR_MIN}" blurYTo="{GLOW_BLUR_MAX}"
                     alphaFrom="{GLOW_ALPHA_MIN}" alphaTo="{GLOW_ALPHA_MAX}"/>
       </mx:rollOverEffect>
       <mx:rollOutEffect>
              <mx:Glow color="{GLOW_COLOR}"
                     duration="{GLOW_DURATION}"
                     easingFunction="{GLOW_EASE}"
                     blurXFrom="{GLOW_BLUR_MAX}" blurXTo="{GLOW_BLUR_MIN}"
                     blurYFrom="{GLOW_BLUR_MAX}" blurYTo="{GLOW_BLUR_MIN}"
                     alphaFrom="{GLOW_ALPHA_MAX}" alphaTo="{GLOW_ALPHA_MIN}"/>
       </mx:rollOutEffect>
</mx:Button>

If you reuse the same effect for multiple instances, as you are likely to do, you can put an id on your effect instances and use binding to refer to the whole effect:

<mx:Glow id="buttonGlowIn" ... />
<mx:Button rollOverEffect="{buttonGlowIn}" ... />

The next step you could take is to move all of your common effects into a class, and include and bind to that every place you need an effect from it. You might create a CommonEffects.mxml:

<mx:Object xmlns:mx="http://www.adobe.com/2006/mxml">
       <mx:Glow id="buttonGlowIn" ... />
       <mx:Glow id="buttonGlowOut" ... />
</mx:Object>

And use it:

<fx:CommonEffects id="common"/>
<mx:Button
       rollOverEffect="{common.buttonGlowIn}" rollOutEffect="{common.buttonGlowOut}"/>

Or you could create a "microclass" for a Button of the proper style: create an MXML class that extends Button and has all the effects you want set on it. Then, use the tag for your class where you would normally use <mx:Button>.

If you are reusing effects this much, what you might really want is to style effects. Little known fact: effect triggers are internally implemented as styles! You can use setStyle("effectTrigger", EffectClass) on a component in ActionScript to set effects. To use effects inside stylesheets, use the ClassReference() notation to locate either a built-in Effect class, or a subclass which you create. Note that because Effect constructors must take a parameter, you cannot create an Effect subclass in MXML. You could write custom effects like ButtonGlowIn.as below:

package com.partlyhuman.books.flexshortcut.effects
{
       import mx.effects.Glow;
       import mx.effects.easing.Cubic;

       public class ButtonGlowIn extends Glow
       {
              public function ButtonGlowIn(target:Object = null)
              {
                     super(target);
                     duration = 500;
                     color = 0xffa0a0;
                     //...
                     alphaTo = 0.5;
              }
       }
}

And apply them in your CSS files:

Button {
       up-skin: Embed("/assets/button-up.png");
       down-skin: Embed("/assets/button-down.png");
       over-skin: Embed("/assets/button-over.png");
       roll-over-effect:
ClassReference('com.partlyhuman.books.flexshortcut.effects.ButtonGlowIn'),
       roll-out-effect:
ClassReference('com.partlyhuman.books.flexshortcut.effects.ButtonGlowOut'),
}

This lets you combine the power of styles and effects to create styles that are not just about appearance, but motion and even sound.