Embedding metadata with Flash

This section describes how to use the [Embed] metadata tag in Flash CS4 Professional to embed GIF, PNG, JPEG, or MP3 files. The first example takes a look at the process for adding an embedded GIF file.

If you haven't already, be sure to download the sample files available on the first page of this article. To follow along with the provided examples, uncompress the ZIP file and open the folder named \gif to examine the sample files:

1. Create a new Flash CS4 file by selecting File > New > Flash File (ActionScript 3.0).
2. Save the Flash file as GIFEmbed.fla.
3. Select File > New > ActionScript File to create a new ActionScript file.
4. Save the ActionScript file as GIFEmbed.as.
5. While GIFEmbed.as is the active tab, copy and paste this code into the Script window:

The highlighted line of code includes a source attribute that specifies the name and path of the asset to embed. You can use an absolute path or a document-relative path to the file containing the embed statement. In this example, the ActionScript class named GIFEmbed.as is navigating up one directory to locate the folder named \assets that contains the talapetra.gif image file.

Note: The [Embed] tag for metadata can also take another optional attribute, mimeType, that allows you to specify the MIME type of the linked asset. I'll discuss this attribute in more detail later.

The order of the ActionScript code is important. You must add the [Embed] metadata tag before declaring the variable, and that variable has to be of the type Class. In the code snippet below, the [Embed] metadata tag is used before a private variable called theClass of type Class is declared:

Inside the function named GIFEmbed, a new variable named displayObj of the type DisplayObject is used to instantiate a new DisplayObject from theClass. The next line uses the addChild method to add the displayObj to the display list and render it on the Stage:

Refer to the sample files to see the folder structure and identify the path between the GIFEmbed.as class file and the GIF image file named talapetra.gif (located in the \assets folder).

6. After making these changes, save the GIFEmbed.as file.
7. Open the GIFEmbed.fla by clicking the corresponding tab. Click the Stage to see the publish properties in the Property inspector.
8. Enter the class name into the Class field to attach the class to the Flash file as a document class. In this example, enter the name of the class you created, GIFEmbed (see Figure 1).

9. Test the movie by choosing Control > Test Movie.

   An error message appears because the project is attempting to use features in Flash CS4 that require some additional Flex classes. Flash detects the missing Flex classes and displays the message in Figure 2.

In the dialog box, you have the option to set the path to the Flex SDK, but it is not necessary to browse and locate it because the path is already set. All you need to do is click the Update Library Path button to ensure that the correct path for the flex.swc ($(FlexSDK)/frameworks/libs/flex.swc) is automatically added to the Library path of the current FLA file.

Note: After running the SWF for the first time, the Flex SDK Required window no longer appears. Instead, you'll see compiler errors regarding the missing classes (see Figure 3).

10. Click the Update Library Path button to add the flex.swc file from the Flex SDK to the Library path of the FLA file.
11. You can see what happened by following these steps:
    • Choose File > Publish Settings and then click on the Flash tab.
    • Click the Settings button next to the Script drop-down menu (see Figure 4).

• In the Advanced ActionScript 3.0 Settings window, select the Library Path tab. The list should include the path to the flex.swc file in the Flex SDK directory (see Figure 5).

12. Click OK to close the ActionScript settings window. Then click OK to close the Publish Settings dialog box.
13. Choose Control > Test Movie to test the SWF again. The standalone Flash Player displays the SWF, which now displays the embedded GIF file correctly (see Figure 6).

As I mentioned previously, the [Embed] metadata tag can take two attributes:

• Source: (Required) Use this attribute to specify the name and path of the embedded assets. If you are embedding a symbol, you can also use the symbol keyword to specify the name of the symbol in a SWF to embed.
• mimeType: (Optional) Use this attribute to specify the MIME type of the embedded asset. If this attribute is not set, Flash will attempt to load the appropriate type of imported asset based on the file extension in the source attribute.

Flash CS4 Professional supports the same set of MIME types that Flex supports:

• application/x-font
• application/x-font-truetype
• application/x-shockwave-flash
• audio/mpeg
• image/gif
• image/jpeg
• image/png
• image/svg
• image/svg-xml

Using the [Embed] tag in a frame script

Similar to the process previously listed, metadata can also be applied to a frame script. In this section, I describe how to use the [Embed] tag to embed metadata in a frame script. If you are following along with the sample files, refer to the files in the \Embed on Frame Script folder:

1. Create a new Flash CS4 file by selecting File > New > Flash File (ActionScript 3.0).
2. Save the Flash file as GIFEmbed.fla.
3. Select Frame 1 of Layer 1 and open the Actions panel (Window > Actions).
4. Copy and paste the following code into the Script window:

5. Repeat Steps 10–13 from the previous section to test the SWF and update the Library path to add the flex.swc file in the Flex SDK directory.

This section describes how to use the [Embed] metadata tag in Flash CS4 Professional to embed GIF, PNG, JPEG, or MP3 files. The first example takes a look at the process for adding an embedded GIF file.

If you haven't already, be sure to download the sample files available on the first page of this article. To follow along with the provided examples, uncompress the ZIP file and open the folder named \gif to examine the sample files:

1. Create a new Flash CS4 file by selecting File > New > Flash File (ActionScript 3.0).
2. Save the Flash file as GIFEmbed.fla.
3. Select File > New > ActionScript File to create a new ActionScript file.
4. Save the ActionScript file as GIFEmbed.as.
5. While GIFEmbed.as is the active tab, copy and paste this code into the Script window:

The highlighted line of code includes a source attribute that specifies the name and path of the asset to embed. You can use an absolute path or a document-relative path to the file containing the embed statement. In this example, the ActionScript class named GIFEmbed.as is navigating up one directory to locate the folder named \assets that contains the talapetra.gif image file.

Note: The [Embed] tag for metadata can also take another optional attribute, mimeType, that allows you to specify the MIME type of the linked asset. I'll discuss this attribute in more detail later.

The order of the ActionScript code is important. You must add the [Embed] metadata tag before declaring the variable, and that variable has to be of the type Class. In the code snippet below, the [Embed] metadata tag is used before a private variable called theClass of type Class is declared:

Inside the function named GIFEmbed, a new variable named displayObj of the type DisplayObject is used to instantiate a new DisplayObject from theClass. The next line uses the addChild method to add the displayObj to the display list and render it on the Stage:

Refer to the sample files to see the folder structure and identify the path between the GIFEmbed.as class file and the GIF image file named talapetra.gif (located in the \assets folder).

6. After making these changes, save the GIFEmbed.as file.
7. Open the GIFEmbed.fla by clicking the corresponding tab. Click the Stage to see the publish properties in the Property inspector.
8. Enter the class name into the Class field to attach the class to the Flash file as a document class. In this example, enter the name of the class you created, GIFEmbed (see Figure 1).

9. Test the movie by choosing Control > Test Movie.

An error message appears because the project is attempting to use features in Flash CS4 that require some additional Flex classes. Flash detects the missing Flex classes and displays the message in Figure 2.

In the dialog box, you have the option to set the path to the Flex SDK, but it is not necessary to browse and locate it because the path is already set. All you need to do is click the Update Library Path button to ensure that the correct path for the flex.swc ($(FlexSDK)/frameworks/libs/flex.swc) is automatically added to the Library path of the current FLA file.

Note: After running the SWF for the first time, the Flex SDK Required window no longer appears. Instead, you'll see compiler errors regarding the missing classes (see Figure 3).

10. Click the Update Library Path button to add the flex.swc file from the Flex SDK to the Library path of the FLA file.
11. You can see what happened by following these steps:
    • Choose File > Publish Settings and then click on the Flash tab.
    • Click the Settings button next to the Script drop-down menu (see Figure 4).

• In the Advanced ActionScript 3.0 Settings window, select the Library Path tab. The list should include the path to the flex.swc file in the Flex SDK directory (see Figure 5).

12. Click OK to close the ActionScript settings window. Then click OK to close the Publish Settings dialog box.
13. Choose Control > Test Movie to test the SWF again. The standalone Flash Player displays the SWF, which now displays the embedded GIF file correctly (see Figure 6).

As I mentioned previously, the [Embed] metadata tag can take two attributes:

• Source: (Required) Use this attribute to specify the name and path of the embedded assets. If you are embedding a symbol, you can also use the symbol keyword to specify the name of the symbol in a SWF to embed.
• mimeType: (Optional) Use this attribute to specify the MIME type of the embedded asset. If this attribute is not set, Flash will attempt to load the appropriate type of imported asset based on the file extension in the source attribute.

Flash CS4 Professional supports the same set of MIME types that Flex supports:

• application/x-font
• application/x-font-truetype
• application/x-shockwave-flash
• audio/mpeg
• image/gif
• image/jpeg
• image/png
• image/svg
• image/svg-xml

Using the [Embed] tag in a frame script

Similar to the process previously listed, metadata can also be applied to a frame script. In this section, I describe how to use the [Embed] tag to embed metadata in a frame script. If you are following along with the sample files, refer to the files in the \Embed on Frame Script folder:

1. Create a new Flash CS4 file by selecting File > New > Flash File (ActionScript 3.0).
2. Save the Flash file as GIFEmbed.fla.
3. Select Frame 1 of Layer 1 and open the Actions panel (Window > Actions).
4. Copy and paste the following code into the Script window:

5. Repeat Steps 10–13 from the previous section to test the SWF and update the Library path to add the flex.swc file in the Flex SDK directory.

In the previous section, I reviewed the process for using the [Embed] tag to embed the metadata of an image using a GIF file. Displaying external data is very useful, but there are many other possibilities available when using the [Embed] metadata tag. This section describes the steps to embed a whole SWF file or embed a specific symbol from a SWF file.

If you are following along with the downloadable sample files, refer to the files in the folder named \SWF with slice 9. Follow these steps:

1. In Flash CS4, choose File > Open and select Movie.fla from the \SWF with slice 9 folder located in the sample files.
2. Choose Window > Library to open the Library panel (if it is not already open).
3. Right-click (or Control-click on Mac) the Slice9 symbol inside the Library and select Properties from the context menu (see Figure 7).

4. In the Symbol Properties dialog box, check the Export for ActionScript option (if it is not checked) as shown in Figure 8.

Note: For this exercise, also ensure that the Enable Guides for 9-Slice Scaling option is checked.

5. Choose Control > Test Movie to test the FLA.
6. Close the movie.swf in the standalone Flash Player. Also close movie.fla in Flash.
7. Choose File > New > Flash File (ActionScript 3.0) and name it SWFEmbed.fla.
8. Choose File > New > ActionScript File and save it as SWFEmbed.as.
9. Copy and paste the following code into the script window of the SWFEmbed.as file:

In this code, the [Embed] metadata tag uses the source parameter to specify the name and path to the SWF file that will be embedded. The symbol parameter specifies the name of the specific symbol to be embedded from the SWF that is referenced in the source parameter.

10. After adding the code, save the ActionScript file as SWFEmbed.as.
11. Click the other tab in Flash CS4 to make SWFEmbed.fla active. Click once on the Stage and look at the publish properties in the Property inspector.
12. In the Class field, enter the class name SWFEmbed to link the ActionScript file to the Flash file.
13. Choose Control > Test Movie to preview the SWF in the standalone Flash Player. The Flex SDK Required dialog box appears (see Figure 9).

14. Click the Update Library Path button to add the flex.swc file from the Flex SDK to the Library path of the FLA file.
15. Choose Control > Test Movie to preview the SWF again, and you'll see the symbol displayed in the SWFEmbed.swf file (see Figure 10).

In addition to embedding image files, SWFs, and symbols from SWFs, the [Embed] metadata tag has the ability to embed OpenType and TrueType fonts into a Flash file. In this section, I illustrate how to use the [Embed] metadata tag to embed fonts in Flash CS4. This article assumes that you have Arial Bold already installed on your system. If you don't have it, you can buy it from SearchFreeFonts.com or similar sites.

Note: The [Embed] metadata tag supports only classes and member variables, so if you attempt to use the [Embed] tag on a function, the following compiler error will occur:

If you are following along, refer to the folder named \TrueType in the sample files:

1. Create a new ActionScript file by selecting File > New > ActionScript File.
2. Save the file as FontClass.as.
3. Copy and paste the following code into the Script window:

In the highlighted code above, the following parameters inside the [Embed] metadata tag are used to embed an Arial bold font:

• Source: This parameter passes the location of the font file. If desired, you can also embed system fonts by specifying their name using the systemFont parameter instead of source.
• fontName: This parameter specifies the name of the embedded font, which serves as an identifier so you can call the font by name when you wish to do so.
• mimeType: This parameter describes the MIME type for the embedded metadata. Since you are embedding a font in this example, you can set the MIME type to "application/x-font".
• fontWeight: This parameter specifies the weight of the font, such as "bold" or "normal."

Note: If the font has a weight and you do not include the fontWeight parameter in the [Embed] metadata tag, you'll receive the following compiler error when the SWF is tested:

along with the path to the embedded font (see Figure 11).

The same type of error results if the embedded font has a specific style (such as italic) that is not indicated by using the fontStyle parameter in the [Embed] metadata tag. Be sure to specify all of the necessary parameters when embedding fonts with metadata.

4. After pasting the code into the Script window, be sure to save the file named FontEmbed.as.
5. Create a new Flash file by selecting File > New > Flash File (ActionScript 3.0).
6. Save the Flash file as EmbedFont.fla.
7. Click the Stage and access the Property inspector (choose Window > Properties).
8. In the Publish properties, enter the class name into the Class field: FontClass.
9. Test the FLA by choosing Control > Test Movie.
10. When the Flex SDK Required dialog box appears, click the Update Library Path button. This instructs Flash to add flex.swc to the Library path of the FLA file. You can tell that this happened by testing the FLA again.
11. Select Control > Test Movie. This time, the expected text (in the Arial bold font) is displayed in the EmbedFont.swf file (see Figure 12).

In the earlier sections of this article, I reviewed the process for using the [Embed] metadata tag to embed graphic files, SWF files, symbols from SWF files, and fonts into a SWF. All of those possibilities are very useful, but there is another type of file that can also be embedded in a SWF using the [Embed] metadata tag: XML files.

I saved the best for last because this functionality is extremely helpful for bringing in external data to SWFs—and is straightforward to accomplish. You can do some very interesting things with embedded XML data, so this is a great tip to keep in mind for future projects.

The following example provides instructions for embedding an XML file using the [Embed] metadata tag. If you are following along, refer to the folder named \XML in the sample files:

1. Select File > New > Flash File (ActionScript 3.0) and save the file as XMLLoader.fla.
2. Select File > New > ActionScript File and save the file as XMLLoader.as.
3. While XMLLoader.as is active, copy and paste the following code into the Script window:

Note: When embedding XML data, you must set the mimeType parameter to "application/octet-stream". Flash is not able to detect the correct MIME type by the XML file extension, so make sure to set the mimeType parameter whenever you embed XML data.

4. After pasting the code into the Script window, be sure to save the file named XMLLoader.as.
5. Click the tab to make XMLLoader.fla active. Click once on Stage and open the Property inspector (Window > Properties) if it is not already open.
6. In the Publish properties, enter the class name in the Class field. In this example, add the class you just created: XMLLoader.
7. Test the FLA by selecting Control > Test Movie. The Flex SDK Required dialog box appears.
8. Click the Update Library Path button to add the flex.swc file to the Library path of the FLA file.
9. Test the FLA again by selecting Control > Test Movie. This time you'll see the XML data displayed in the Output panel (see Figure 13).

Where to go from here

To see other examples of working with the [Embed] metadata tag, see Loading or embedding a shader in the "Working with Pixel Bender shaders" section of the Programming ActionScript 3.0 for Flash documentation. Also check out Using Flex metadata in the "ActionScript" section of the Using Flash CS4 Professional documentation.

See also the Flash Authoring blog for more details, as well as Peter deHaan's blog entry: Using Flex classes in Flash CS4. Be sure to visit the Flash Developer Center and Flex Developer Center to find more articles, tutorials, and sample projects.