Embedding images into a Flash document using the [Embed] metadata

by Peter deHaan on October 26, 2008 · 5 Comments

The following example shows how you can use the [Embed] metadata in Flash CS4 to embed assets into a Flash document using ActionScript.

Full code after the jump.

For more examples of Flash CS4 and Flex SDK integration, see my coworker Tareq AlJaber’s Flash Authoring blog.

The following example embeds a .PNG file (bullet_red.png) from the same directory as the .FLA file:

// ActionScript 3.0
/**
 *  Note: This example assumes the bullet_red.png file 
 *  is in the same directory as your .FLA file.
 */
 
import mx.core.BitmapAsset;
 
[Embed("bullet_red.png")]
const BulletRed:Class;
 
var bullet:BitmapAsset = new BulletRed();
bullet.move(10, 10);
addChild(bullet);

You can also set the bullet variable’s data type to DisplayObject instead of “BitmapAsset”, as shown in the following example:

// ActionScript 3.0
/**
 *  Note: This example assumes the bullet_red.png file
 *  is in the same directory as your .FLA file.
 */
 
[Embed("bullet_red.png")]
const BulletRed:Class;
 
var bullet:DisplayObject = new BulletRed();
bullet.x = 10;
bullet.y = 10;
addChild(bullet);

After playing around a bit more, there are a few other neat tricks you can do with the [Embed] metadata.

The following example embeds three assets:

BULLET_RED — a .PNG file located in the same directory as the FLA file.
BULLET_ORANGE — a bullet icon MovieClip with a class name of “BulletOrange” from an external .SWF file (BulletLibrary.swf).
BULLET_YELLOW — a bullet icon MovieClip with a class name of “BulletYellow” from an external .SWF file, but it shows a shorthand syntax for specifying both the source and symbol to embed.

Next, the three embedded assets are added to a DataProvider object which gets displayed in a Flash CS4 List component:

// ActionScript 3.0
/**
 *  Note: This example assumes the bullet_red.png and 
 *  BulletLibrary.swf files are in the same directory as 
 *  your .FLA file.
 */
 
import fl.controls.List;
import fl.data.DataProvider;
 
[Embed("bullet_red.png")]
const BULLET_RED:Class;
 
[Embed(source="BulletLibrary.swf", symbol="BulletOrange")]
const BULLET_ORANGE:Class;
 
[Embed("BulletLibrary.swf#BulletYellow")]
const BULLET_YELLOW:Class;
 
var listDP:DataProvider = new DataProvider();
listDP.addItem({label:"Red", icon:BULLET_RED});
listDP.addItem({label:"Orange", icon:BULLET_ORANGE});
listDP.addItem({label:"Yellow", icon:BULLET_YELLOW});
 
var myList:List = new List();
myList.dataProvider = listDP;
myList.rowCount = listDP.length;
addChild(myList);
 
var tX:uint = uint((stage.stageWidth - myList.width) / 2);
var tY:uint = uint((stage.stageHeight - myList.height) / 2);
myList.move(tX, tY);

5 Responses to Embedding images into a Flash document using the [Embed] metadata

b2b says:

June 22, 2009 at 12:23 am

can I remove images after that?

Reply
dev_jc says:

August 19, 2009 at 6:10 am

This would work:
removeChild(object);

Have you tried this?

Reply
Srikanth says:

October 25, 2009 at 10:07 am

Hi, I need your help.
I have tried your code in Flex AS3 proj, and it worked well.
I was successful in generating an swf with embedded image.
But when I try to do the same using FlashCS3, it is giving me errors.

My requirement is .Fla without any images in library, once compiled should have an embedded image in itself.

Here is the code. Please help.
```
package
{
	import flash.display.DisplayObject;
	import flash.display.*;
public class Main2
	{
		[Embed("test.jpg")]
		const BulletRed:Class;
 
		public function Main2()
		{
			var bullet:DisplayObject = new BulletRed();
			bullet.x = 10;
			bullet.y = 10;
			addChild(bullet);
		}
	}
}
```
Reply
Peter deHaan says:

October 25, 2009 at 3:48 pm

@Srikanth,

I believe you’d need Flash CS4 in order to use the Flex [Embed] metadata.

Peter

Reply
srikanth says:

October 26, 2009 at 3:05 am

Thanks Peter,
Above code works fine in Flash CS4.
I wanted to confirm if Flash CS3 can embed image from external location and your suggestion answered my query.

Thanks.

Reply