Tutorial for bloody beginners and ActionScript newbies

When i started with ActionScript Development I was pissed that there was no step by step tutorial that told me how to setup a simple project. Pehaps I just did not know where to search. Here is my attempt to write such tutorial. I will try to explain every single step and the vocabulary I use in this tutorial. I hope it will not confuse you as I was confused reading my first ActionScript Tutorials.

Choosing the IDE

First of all download some handy IDE (Intergrated Development Environment) that support ActionScript 3. That is the Program you create Flash Applications with. I recommend the the FDT 3 from the Powerflasher guys or FlashBuilder 4 from Adobe. Both IDEs are commercial solutions based on the Eclipse IDE. Eclipse is a powerful tool used by many Developers all over the world. Better don't use Flash (I mean the Appication within the Creative Suite) for ActionScript Development. It seems to be easy, but can be very frustrating. I only use it to design the controls of my Application.

Another alternative is downloading the SDK (Software Development Kit) and use it with your favourite IDE. The SDK brings everything you need to compile Flash Applications. In other words, it tells how to make swf's from ActionScript Code. It might be complicated to use it another IDE than Eclipse. I have never tried. Nerdy people can also use a command line compiler to get their Flash.

I use the FDT 3 in this Tutorial. Perhaps I add a Flash Builder Tutorial some day.

Select your Workspace

This is the FDT Startscreen, click on "Workbench" and you will not see it again.

Finally you arrived, this is an empty workbench. It looks similar if you use FlashBuilder. Lets start coding.

Create a Project

When the workspace is loaded create a new ActionScript Project (Flash Project in FDT). The IDE will ask you for a "Project Name" and some other settings.

Just right-click some within the "Flash Explorer" Window, and choose "New" > "New Flash Project".

This is the Dialog that  will show up. As "Project Name" choose what ever is on your mind. This will be the name of the Folder inside your Workspace Dialog. Be sure to select "Action Script 3" as "Project Language" and choose the "Flex_3_SDK_0_Pure_for_FP_10" as SDK. Finally click on the "Finish" Button.

The FDTwill create some folders you can navigate using the "Flash Explorer" Window (on the left by default). You should find a project folder with the name you choosed. The "Linked SWCs" Folder contains the SDK. The "src" folder is empty at this moment. This is the folder that will contain the classes we create.

Adding the first class

Lets create a Main class. This is the class that will be invoked when the final Application is launched (aka. DocumentClass in Flash).

To do so, right-click on the "src" folder and select "New" > "AS Class". A Dialog will show up.

This is the "New ActionScript Class" Dialog. The "Source Folder" should be "src" by default. As "Package" enter a Java-Style package String. Package-Names begin always lower case by convention. Use the dot as seperator and begin with the top level domain your work is related to (ie. com, org or de). After the top level domain enter the name of your company or your pseudonym. The package defines a namespace for the classes that are located within in it. Because of this you can use the same ClassName in different Packages. The FDT creates a folder structure on your hard disk that reflects the package Structure. In this example it would be "C:\myWorkspace\myProject\src\com\myName\myProject\".

After you entered a package name you are free to choose a fancy class name. Classes always begin with a upper-case letter by convention. If have chosen "MyProject" because I named the project folder "myProject". The class name will also be the name of the swf-file.

Finally you have to select "flash.display.Sprite" as "Superclass". Click on the "Browse" Button and begin typing "Sprite". The superclass is the class your new class will be derived from. This means you can use all methods of the superclass. The Sprite Class is the required base-class for all pure ActionScript Projects it will be shown in the FlashPlayer when you open the swf or embed it in some html document. The superclasses of the Sprite Class are: DisplayObjectContainer -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object. The top type ("type" is another name for "class") is always the Object class. You don't have to select Object as Supertype, this is the Default Setting. All Classes derive from Object.

Click on the finish Button.

The FDT created the package structure and a file called "MyProject.as". This file will show up as tab in the "Editor" Window. Some content will be predefined.

Writing the first Program

package com.myName.myProject {
 import flash.display.Sprite;

 /**
  * @author Nicholas
  */
 public class MyProject extends Sprite {
  public function MyProject() {
  }
 }
}
 

The FDT created a method (aka function) with the same name as the class. This method is called constructor and is invoked by default, when the class is instantiated. Because we are in our main class, that we will compile later on, this is our entry point.

package com.myName.myProject {
 import flash.display.Sprite;

 /**
 * @author Nicholas
 */
 public class MyProject extends Sprite {
  public function MyProject() {
   trace("hello world");
  }
 }
}
 

This is the basically your first ActionScript Application. The method "trace" will show the text within the console of the FDT when you compile the class using the debug compile option.

Just right-click the class and select "Debug As" > "1 FDT AS3 Application" and the FDT will compile your application.

A blank window will pop up. This window shows the "MyProject.swf" that apeared in the "Flash Explorer". As you will see, the text you entered appears in the "Console" at the bottom. It's magic. Because this is boring, lets do some cooler stuff.

Loading an image at runtime.

Loading external data is not that complicated.

Right-Click and save this beautiful image into your Project-Folder.

The Image should show up in the Flash Explorer within the myProject folder. If not right-click "Refresh" somewhere in the Window.

package com.myName.myProject {
 import flash.events.Event;
 import flash.net.URLRequest;
 import flash.display.Loader;
 import flash.display.Sprite;

 /**
  * @author Nicholas
  */
 public class MyProject extends Sprite {
  private var imageLoader:Loader;
  public function MyProject() {
   imageLoader = new Loader();
   loadMyImage();
  }
  private function loadMyImage():void{
   var request:URLRequest = new URLRequest("myImage.png");
   imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
   imageLoader.load(request);
  }
  private function onLoadComplete(e:Event):void{
   addChild(imageLoader.content);        
  }
 }
}
 

Now we need some ActionScript to load this image and show it on the screen.

I added a variable to the MyProject Class at line 11. The "private" is the access modifier. If a variable is declared private you can only access it within the class it belongs to. The "var" is the language element that defines a variable (aka attribute or property) of the class in ActionScript. You can choose any name that is not already in use, begin lower-case by convention. The colon seperates the type from the name. In this case it is a variable of type Loader. The Loader Class is primary used to load Images in ActionScript 3.

At line 13 the Loader Class is instanciated. The "new" language element tells the compiler that you want to create an instance of a class. To use this instance later on, we store it by assigning it to the variable "imageLoader".

At line 14 we call a method. The brackets indicate that we want to do so. The method we want to invoke is declared at line 16. The "function" language element tells the compiler, that you want to create a method. After the colon the return type of the method specified. We do not need this method to return anything, so the return type is void.

At line 17 we create a instance of the URLRequest Class. It is a class that allows you to manage HTTP Request. The constructor of this class has paramerters (aka arguments), so we can pass the url of the file we want to load to the URLRequest instance. The url has to be relative to the postion of the swf file in our example. We store this request temporarilly inside the method, it is not accessible from elsewhere.

At line 18 we add a Event Listener to the Loader instance we created within the constructor. Events are used to communicate with other instances and classes when you expect some latency or wait for the user to do something. The Loader Class dispatches an event when the loading process is complete. Unfortunately in this case you can't add the Listener to the Loader instance, you have to add it to the contentLoaderInfo object within the loader instance. The event we are waiting for is Event.COMPLETE ("complete"). We tell the dispatching class what to do, when the event occurs by referencing a method. In this example it is the onLoadComplete method.

At line 19 we tell the Loader instance to load the file we defined as request. The Loader starts load immediately.

The method defined at line 21 is invoked when the image is loaded. Because it will be invoked by an event, it has to have a parameter of the same or a compatible type as the event. You get some information, about the event and where it occured. Quite useful is the "target" property of the Event instance that is passed to the onLoadComplete method. Write trace(e.target) and you will see, which class dispatched the event in the console.

At line 22 we add the content of the Loader instance to our MyProject class instance.

Now guess what you get when you compile the application. Hit F11 if you do not want to right-click the class in the "Flash Explorer".