Images and Icons
In Flex images can be embedded or loaded.
Embedded images as described by the Image LiveDocs:
Embedded images load immediately, because they are already part of the Flex SWF file. However, they add to the size of your application and slow down the application initialization process. Embedded images also require you to recompile your applications whenever your image files change.
Loaded (or referenced) images, the alternative to embedding, as described by the Image LiveDocs:
The alternative to embedding a resource is to load the resource at runtime. You can load a resource from the local file system in which the SWF file runs, or you can access a remote resource, typically though an HTTP request over a network. These images are independent of your Flex application, so you can change them without causing a recompile operation as long as the names of the modified images remain the same. The referenced images add no additional overhead to an application's initial loading time. However, you might experience a delay when you use the images and load them.
Supported image types:
- SWF
- JPEG
- GIF - supports alpha channel
- PNG - supports alpha channel
- SVG - supported with @Embed
TODO... Embed some cool Flex image browser application...
mx.controls.Image
The mx.controls.Image control is perhaps the easiest way to use an image in a Flex application.
<mx:Image source="http://www.adobe.com/ubi/globalnav/include/adobe-lq.png" />
TODO... Embed example (X_Images1)
The above is an example of using a loaded image.
The image's source property can be an absolute or relative URL.
(Relative to where the Flex application is loaded from.)
An image control can also be used to display embedded images.
<mx:Image source="@Embed('/assets/images/logo.jpg')" />
The above example uses an image to display an embedded asset.
Embedded Images
Images, like other assets, can be embedded in a Flex application.
The @Embed(...) directive allows images to be embedded...
The [Embed] metadata tag...
Learn more about embedding assets...
Control Icons
Many of Flex's controls have an icon property that can be used...
<mx:Button label="OK" icon="@Embed('assets/icons/accept.png')" />
TODO... Embed example (X_Icons1)
As a best practice, control icons should usually be embedded images.