AS3: Dynamically Loading Images in FlashDevelop

Dynamically Loading Images in FlashDevelop with AS3

Dynamically loading images in an AS3 movies allows you to store images seperately from your movie. Depending on where and how your image is stored there may be significant time involved in loading an image. Another method of using images in your movie by embedding them directly into your movie can be found here.

The Set Up:

• Either upload an image do your own webspace, or find the address to one online to use for testing. The image must be formatted as a gif, jpg, or png.
• Create a new AS3 project space in FlashDevelop.

Non-blocking image load:

• ... Non-Blocking?:
  Loading an image without Blocking means that while the image is being loaded, code continues to run. This is a problem if the application demands that the image displays immediately after you call addChild(). However, blocking image loading takes some foresight in AS3, and non-blocking image loading is adequate for many situations. Blocking image loading will be covered in a future tutorial.

The Code:

// entry point
var imgInstance:Loader = new Loader(); // Create a new loader object
imgInstance.load(new URLRequest("http://sites.google.com/site/programmingetc/Home/image.png")); // Begin loading the image from web
addChild(imgInstance); // Display the image

Line By Line:

1. Lines up with the "//entry point" comment that should be in the default as3 project in FlashDevelop.
2. Create a loader object. It will be used to load the image, and can also be used as a DisplayObject for displaying the loaded image.
3. Call the load method, with a URL parameter that points to an image (hosted on my google webspace).
4. Add the loader instance to the sprite. The image will be displayed when it loads.

.zip source for this project can be found here

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