Embedding Bitmap Images in ActionScript 3 with FlashDevelop

24 Aug 2010 • Flash and ActionScript

ActionScript is probably one of the easiest languages to program visual effects. It has a wealth of APIs to manipulate images in all kinds of different ways. However, getting images into your program isn’t all that well documented. Especially if you are not working with Adobe’s commercial Flash products. For instance, the wonderful and free FlashDevelop. This article shows how to use the “embed” tag to embed images inside your Flash applet, which is one of the cleanest ways you can add those bitmaps to your application.

This article is based on FlashDevelop 3.2.2 RTM but will probably work with almost any FlashDevelop version. It is an updated, rewritten and more focused version of this article, published back in May 2008. In this tutorial I’ll show you how to get started with FlashDevelop, embed a bitmap and show it on screen.

Setup your system

Before you get started with this tutorial, you should make sure that you have configured FlashDevelop as explained in the FlashDevelop getting started guide. When the debug players are installed (I went with version 10.1), choose the ActionScript 3 option at the bottom of the page and install the free Flex SDK (I picked the free Adobe Flex 4 SDK).

Creating a project

With FlashDevelop installed and configured, the next step is creating a new project:

  • Project > New Project
  • We’re going to write an ActionScript 3 application, so pick AS3 Project
  • At the bottom of the dialog, enter a name and a location. It doesn’t really matter what you enter here, just choose something that suits you.
  • I left the package blank, which creates files in the default package.
  • OK

You should see your project structure on the right. Now open the “src” folder and double-click Main.as. This should open the file. If you test the movie (the blue arrow triangle in the top bar, just to the left of the “debug” dropdown), you’ll probably see an error in the output pane (bottom): “No application is associated with the specified file for this operation”.

Go back to the project window on the right (I had to click on the little tab at the bottom)
  • Right click on your projects top folder.
  • Choose “Properties…”
  • At the bottom, in the “Test Movie” dropdown, pick “Play in new tab” (this is my preferred method, feel free to experiment with the others)

After clicking ok and rerunning the test (blue triangle), a new tab should open which displays absolutely nothing. That’s fine though, it means everything is working. Close the tab and we’ll get started on the program.

Embedding an image

Now it’s time to get to the gist of the tutorial, actually embedding the image. If you look at your project structure, you’ll also see that FlashDevelop has created a “lib” folder, this is where we’re going to put the images we use in the program.
First, find an image somewhere on the Internet and put it in that lib folder. If it shows up on the project view in FlashDevelop, you did it correctly.
The final step before we can use the image is to add it to the library: right click on the image in the project view and choose “Add to library”. If everything goes well, it will now display in blue instead of black.
With the Main.as file open:
  • Put the cursor somewhere just above the “function Main()” declaration
  • Right click on the image you want to embed and choose “Insert Into Document”
  • An “Embed” code should have appeared.
  • Just underneath this new line, add the variable declaration for this image. 
private var layer0Class : Class;
  • On the next line, instantiate the class, so that we can use it: 
private var layer0:Bitmap = new layer0Class();
  • If you type this, you will see a FlashDevelop popup when you start typing Bitmap. As soon as you see this, you can select the class you need, which is “flash.display.Bitmap”. This will also import that class.
  • If that didn’t happen, you will need to manually add the import. Right at the top of the file, where there are two import statements, add: 
import flash.display.Bitmap;

Displaying the bitmap

Now comes the easiest part:
  • Find the function where it says “// entry point” (feel free to remove this line as it is not functional)
  • Just underneath that line add 
addChild(layer0);
You should now have the following program: 
package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	
	public class Main extends Sprite 
	{
		[Embed(source = '../lib/Parallax-scroll-example-layer-0.gif')]
		private var layer0Class:Class;
		private var layer0:Bitmap = new layer0Class();
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			addChild(layer0);			
		}
	}	
}

If you test the movie again, the image should show up. You’ve just embedded and instantiated your first bitmap in ActionScript.

With this knowledge and some very basic ActionScript 3 programming experience, you can already create some nice effects, such as this parallax scrolling example:

You can find the full source and project files on GitHub.

(Image credit)

Related Posts