A picture is worth ten thousand words, and with Flex you have the ability to add pictures as well as animation, audio, and video to your applications. Flash Player has its roots in graphics and animation, and over time it has grown into a strong development runtime for interactive custom user interfaces. Flash Player has a long history in handling rich media on the Web, and Flex can leverage that strength and provide a truly engaging user experience. Flash Player not only handles many of the bitmap graphics formats that traditional web browsers do, but it also has native support for vector-based graphics, animation, audio, and video.
This chapter covers loading and embedding assets, streaming media, supported media types, and working with the different media types.
You can incorporate media into an application in one of two ways: at runtime or at compile time. Adding media at compile time is called embedding, because the content is compiled into the SWF. Adding media at runtime is called loading, because the content exists as separate files from the application that must be loaded into the Flex application when they are requested.
Note
One other method of loading media is called streaming. We'll discuss streaming in Working with Audio and Video” later in this chapter, because streaming applies only to those media types.
There are benefits to both methods. Which one you choose is important, because each one can impact the loading time of your application, the file size of the resultant SWF, the ability to change the media after an application is compiled, and the ability to dynamically change the content.
It’s beneficial to embed content within an SWF file; doing so makes the media asset available to the application as soon as it is initialized, since it is packaged within the SWF file that is used to load the application. It is a good idea to embed small assets, such as button icons and application skins that often don’t need to be redefined at runtime. You will typically want such graphics to be available immediately, as they can negatively impact the perceived performance of your application if each item requires a separate download.
Note
You also can embed assets using runtime shared libraries. Because runtime shared libraries are loaded when an application is initialized, they are treated in the same manner as embedding assets within the main application SWF. We covered working with shared libraries in Chapter 2.
It’s beneficial to load content, because the content won’t be embedded as a constant (resource) within your application. For example, when building an application to manage images, you cannot embed the images within your application; instead, you need to load the images because the content will change often as new images are added to the image repository. Also, not having to embed the content within the application SWF lets your application be downloaded quickly, and once it's initialized, the application can load the media that's needed on demand without having to reload the application SWF.
Embedding and loading assets are complementary and not competing approaches to working with media in a Flex application. As you work with media and Flex applications, you’ll discover when to use which approach, but to start here are some guidelines.
Consider embedding assets when:
The asset is mainly defined at compile time.
The asset will always or almost always be needed by the user, such as component skins or application appearance items.
You have few assets that are not large in terms of file size. Embedding items increases the file sizes proportionally.
Flex supports the asset only at compile time.
Consider loading assets when:
The assets are large. The definition of a large asset depends on where your application will be deployed. If your application is an internal intranet application that is always accessed from a high-bandwidth location, this may not be a factor. If your application will be public-facing, you will likely want to limit the total embedded assets to less than 200 KB.
The assets are not defined at compile time. Instead, they are uploaded by a user or modified after the Flex application is compiled.
The assets comprise video and most audio files, which typically are large in size.
Flash Player natively supports SWF, GIF, JPEG, PNG, MP3, and FLV media. As such, a Flex application can load all media supported by Flash Player.
Note
Flex 3 requires Flash Player 9 or later. Our discussion of supported media and methods of dealing with media will assume that you are targeting Flash Player 9 or later. Although Flex 3 requires Flash Player 9, embedded and loaded SWF media do not have to be Flash Player 9 content.
In addition to the vast array of formats supported natively by the player, with the help of the Flex compiler you also can handle SVG content and Flash library items within SWF files. For example, Flash Player does not natively support SVG content, but it has the technical capability to render basic SVG content with the help of the Flex compiler. The Flex compiler achieves this by processing SVG files and embedding the converted graphics definition data within a compiled SWF as native Flash bytecode, including the vector data definition information. This means that at runtime, the developer cannot distinguish between SVG content and native Flash vector data but does get the benefit of using SVG content. Because SVG support is provided by the Flex compiler, SVG content cannot be loaded dynamically at runtime.
Table 11-1 lists Flex-supported media types.
Table 11-1. Flex-supported media types
Format | Media type | Loadable? | Notes |
|---|---|---|---|
SWF | Graphics and animation | Yes | Flex 3 requires Flash Player 9, but it can load any SWF content. You will be limited by what type of interoperability you can have with the content based on the version of the SWF content. Flash Player 9 content that uses ActionScript 3.0 is the most compatible. |
SWF library item | Graphics and animation | No | SWF files that contain a library of multiple graphics and animation files can be embedded. This requires the Flex compiler, and only the referenced library item will be embedded within the final SWF file. |
GIF | Graphics | Yes | Standard GIF is supported, including transparency. Animated GIF files are not supported. |
JPEG | Graphics | Yes | Baseline JPEG files as well as progressive JPEG files are supported. |
PNG | Graphics | Yes | Both PNG8 and PNG24 are supported. Alpha transparency is fully supported as well. |
SVG | Graphics | No | The Flex compiler supports the SVG 1.1 basic specifications. SMIL, animations, filters, pattern fills, advanced gradients, interactivity, and scripting are not supported. |
MP3 | Audio | Yes | MP3 files can be loaded, embedded, and streamed using a Real Time Messaging Protocol (RTMP) server. |
FLV | Video | Yes | FLV is Flash’s video file format. Depending on the Flash Player version you will be targeting with your application, you can support traditional FLV video as well as H.264 encoded video. H.264 video support was added in Flash Player 9 Update 3. Files can be loaded, embedded, and streamed using an RTMP server. The file extensions of Flash video can be FLV as well as MP4. Flash Player does not actually care for the file extension. Instead, it inspects the binary data of the video being loaded to determine whether it is a valid video file. |