How to Create a Reusable Embedded Image in Adobe Flex Builder 2

Earlier we looked at using an Embedded Image within an image tag. The benefit of embedding an image is that it's then immediately available at runtime, it doesn’t have to be externally loaded. The downside is that it will increase your file size. We are going to work with embedding an image again here.

Open the third NaturalExperiences Application, wt3, run the application to see where we have been. Our flower image is positioned over the panel and if you recall, it is an embedded image, meaning that it is baked into the SWF literally, so it's immediately available at runtime. However, embedding images not only increases your file size, it also means that if the image must change, you need to recompile the application and so as a gross generalization if an image may change in the future, do not embed it. If the image is likely to remain fixed, such as internal icons and other small graphical elements, you may choose to embed those within the document.

Go back into your code. Scroll down to the Declare Variable section and here we are going to declare a bindable embedded image as a variable so that the image may be reused in multiple areas of the application without having to embed it multiple times. First the Bindable Metadata keyword to indicate that what we are about to create will be available for use within Data Bindings, anywhere that it would be relevant.

Next we are once again going to use the Embed Directive, this time as Metadata. Here we will assign the Source Attribute explicitly and because we are not inside the tag, we could use double quotes here so the path again is embedded_assets/flowers.png. Close the Embed Directive and use a square bracket to close the Metadata and then we now declare the name of the variable into which this image will be embedded. We will declare a public property of our application, a variable defined within a class and our application is a Class, publicvarflowers data typed to the Class type.

This creates a reusable embedded instance of flowers.png which we may bind to using this property name flowers. Now scroll down through your code to the image tag, in the flowerPic image tag, delete the Embed Directive that we added earlier. Replace it with a binding to the flowers variable we just added, so add in your open and close braces for the binding and then add the property name flowers which contains an embedded instance of that image. Save the changes and run the application.

You will see no visible difference at the moment. The point is, is that we can now reuse that particular instance of the image without having to embed it a second time, overall potentially reducing file size. To illustrate the point, regarding reuse, please copy your image tag and paste it below itself. You will need to change the ID from flowerPic to flowerPic2 as you cannot otherwise reuse the same ID more than once in your application and then also change the Y property from 35 to 55 so that it will appear in a slightly different location. Save the change and run your application.

We now have two instances of the same embedded image appearing within the application. We have embedded it once, we used it twice, we could use it as many times as we need without increasing our file size. Go back into your code, Save any unsaved changes and close the application.