AS3: Embedding Images in FlashDevelop with AS3

Embedding Images in FlashDevelop with AS3

Embedding images in an AS3 movie will give faster access to images without preloading. As an alternative, the same images can be used in multiple movies. In order to update images without rebuilding your project, or save space by using the same images in multiple movies, you may want to also check out a tutorial on how to load images from an external source here.

The Set Up:

• Get yourself an image. I haven't found a definite confirmation of formats supported for embedding anywhere, but from personal use I know "gif/jpg/png/svg" filetypes are supported. SVG is a vector graphic file, which I used Inkscape (a free open source vector art program) to create.
• Create a new AS3 project space in FlashDevelop.
• Right click on your "src" folder, in the dropdown menu click "add >> new folder"
• Change the name of your New Folder to img.
• Now add your image to the project in one of two ways:
• A) Find your image in the windows filesystem and drag it directly into your project and drop it on your "img" folder.
• B) Right click the "img" folder, click "add >> existing item", select the image you want to add.

Note: Creating the "img" folder is not necessary, it is just good to get in the habit of organizing your projects. Alternately you could just store everything directly in the "src" folder.

Getting your image in the movie:

1. Add the Embed tag:
   FlashDevelop makes it easy to generate the necessary code to embed images. Place the typing cursor on an empty line above your main function. Next, in the Project View, right click on your image and click "Insert Into Document". FlashDevelop should add something like this at the cursor:

   [Embed(source='img/image.png')]

2. Create a class for the Embed tag:
   In order to use the embed tag, a class variable must be defined directly below it. This class variable is instantiated to create the embedded image. The signature of a variable used for embedding can vary, the example below is a class variable and should be added after the opening brackets of your class, before any function definitions:

   [[Embed(source='img/image.png')]
   private const embeddedImage:Class;

3. Create an instance an embedded image:
   In order to create a useable object from an image class, you simply create a new instance if the image class, and cast it to an instance of DisplayObject. This code should go after the //entry point comment in your AS3 project.

   // entry point
   var imgInstance:DisplayObject = new embeddedImage();

4. Display the image:
   All that is left is to display the image. The position and rotation can be adjusted first, or they can be left to default (zero). This code can be inserted directly below the code from step 3:

      imgInstance.x = 50; // Set x coordinate of image
      imgInstance.y = 45; // Set y coordinate of image
      imgInstance.rotation = 45; // Set rotation to 45 degrees
      addChild(imgInstance); // Add this image to the Sprite object

.zip source for this project can be found here