Join David Gassner for an in-depth discussion in this video Creating image libraries , part of Flash Builder 4 and Flex 4 New Features.
In Flex 4, MXML documents now support the use of image libraries. A library is a collection of definitions, each of which represents a graphical image of some sort. Each graphical image can either be a vector graphic or a bitmap graphic. Vector graphics get described using MXML code, whereas BitmapGraphic get imported as embedded graphics using a new class called bitmap graphic. I'll demonstrate how to use an image library using this application, ImageLibraries.mxml, and I will work with files in the images folder of this project.
I'll use this graphical file, aloe_vera.jpg. First, I'm going to demonstrate the use of a new class called BitmapImage. This is known as a primitive class in Flex 4. The bitmap image class, unlike the older MX image class, only is used for embedding graphics, not for loading graphics at run time. Here's a basic example of how you might use it. I'll declare the BitmapImage tag and then set its source attribute using the Embed compiler directive.
Within the directive, I'll describe the relative location of the file that is relative to the source code root folder of the project. That will be images/aloe_vera.jpg. Now with the BitmapImage control, I can scale the image. So, I'll set properties of scaleX and scaleY to values of .5, meaning I'm going to display the image at 50% of its original size. I'll save and run the application and here is the result.
The image becomes a part of the SWF application file. Now I'm going to move that BitmapImage into a library so that I can reuse it. To get started with an image library, place the <fx:library> element at the top of the application. With very few exceptions, the <fx:library> tagset must be placed as the first child element of the application itself. Each library can have multiple instances of the <fx:Definition> tag. Each definition tag represents one image.
I'll create a <fx:Definition> tag and assign it a name of AloeVera. During the compilation process, each definition is compiled as an ActionScript class, and it will be a subclass of whatever you place as the first child element of the definition. I'm going to take this BitmapImage tag and cut and paste it and place it within the definition. Now if I run the application at this point, you'll see that the image doesn't appear at all. That's because I've wrapped the BitmapImage tag inside the Definition.
I can now place multiple instances of that image in this MXML document. It is important to understand the limitation that when you define an image in a library, it's available only in the MXML document in which it's defined, not throughout the entire application. Now in order to declare an instance of the bitmap image within the application, I'll treat the name attribute of the definition as a class, like this. I'll type in the less than character and then start typing the name of the definition, aloe.
Notice that Flash Builder shows the name of the definition in the code assist list. I'll select it and then close the tag set. I'll run the application, and you'll see that the image scaling has already happened. That is to say I'm seeing it at half of the original size, because that definition was retained in the bitmap image inside the definition. Now I'm going to wrap this instance of AloeVera inside an HGroup. An HGroup is a horizontal group.
It's similar to the HBox container that was used in Flex 3, but unlike HBox, is only used for layout; that is, it doesn't do any visual presentation of its own, but is only used to organize the layout of its child elements. Now I'll copy and paste AloeVera three times, making a total of four instances of the image. I'll run the application, and you'll see four copies of the image lined up next to each other. The great thing about an image library though, is I'm only embedding one copy of the image in the application SWF file.
So, instead of embedding it over and over again, I'm embedding it once, and I can use it as many times as I want. The same sort of functionality was available in Flex 3, but involved a different type of code. If you're accustomed to using the embed metadata tag in Flex Applications, you can take a look at this new code architecture, the Library and Definition tags, and you might find it easier to use for your particular application.
- Understanding MXML namespaces
- Moving classes and components between packages
- Managing templates for new MXML and ActionScript files
- Exploring MXML language changes
- Working with the Spark component framework
- Adding visual controls with CSS, MXML graphics, and custom Spark skins
- Displaying images and dynamic data