AS3: Hello World Movie

First AS3 Movie: Hello World

This is a guide to making a quick Hello World app in FlashDevelop with ActionScript 3. This tutorial assumes you have FlashDevelop up and running, and a default ActionScript 3 project open, ready to build and run. If not check this tutorial for instructions on how to get there.

Building on the last tutorial, this is a very simple addition.

   // entry point
   var textField:TextField = new TextField(); // Create a new TextField object
   textField.text = "Hello World";    // Assign the text property of the field
   addChild(textField);      // Add the TextField to this Sprite

Breaking it down line by line:

• Declaring and assigning a TextField:
  

     var textField:TextField = new TextField(); // Create a new TextField object

  This statement declares a TextField type variable named textField. The syntax for declaring a variable is: var variableName:variableType; Declaring a variable just tells the program to prepare for the existence of an object. If you try to do anything with an unassigned variable other than assign it to something, or check if the variable is null, you will get some kind of null object error. The way the variable is assigned above is just for convenience, it could also be done using:
  

     var textField:TextField; // Declare a new TextField variable
     textField = new TextField(); // Assign the variable to an object




• Setting the text to be shown:
  

  textField.text = "Hello World";    // Assign the text property of the field

  
  This statement assigns the "text" property of the textField object to "Hello World". The "text" field contains the string that the TextField will draw to the stage. "Hello World" is surrounded by double quotes, which makes it a string in AS3.
  


• Adding the TextField object to be drawn:
  

     addChild(textField);      // Add the TextField to this Sprite

  addChild(parameter) is a method that makes the object you used as a parameter a child of the drawable object that used the method. This means that textField is now a child of Main, and when Main draws, so will TextField (unless it's "visible" property is set to false). The class you are using extends the class "Sprite" so although you don't see the function addChild() defined anywhere in your code, it is a member of your class through its superclass.


• Note:If you copy this instead of typing it in and using the autocomplete feature you will have to add this line up by your other imports to use the TextField:

  import flash.text.TextField;

Now build your project and run, you should now see the words "Hello World" in the top left corner of your window.

.zip source code for this project can be found here.

Tutorials on the Basics:
Embedding an Image
Dynamically loading an Image
Embedding and Playing Sound
Dynamically loading and Playing Sound

FlashDevelop: AS3 FlashDevelop Default AS3 Project

AS3 FlashDevelop Default AS3 Project

Time to explain what all that automatically created code in Main.as means. This tutorial assumes that you already have FlashDevelop up and running, and able to compile and run ActionScript 3. If you aren't at this point, check out my previous post.

This tutorial is really beginner programming info, If you already understand the code in Main.as, you can just scan, or skip to the next tutorial.

This is how Main.as looks initially:

package
{
 import flash.display.Sprite;
 import flash.events.Event;

 /*
  *
  * ...
  * @author your name
  */
 public class Main extends Sprite
 {

  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);
   // entry point
  }

 }

}

• Basic syntax info:
  Blocks of code are opened and closed using { and }. The general format is "Statement { code; }". In AS3 blocks without a statement essentially do nothing because there is no block level scope for variables. If you don't what that means don't worry about it yet.

Breaking it down line by line:

• Package:
  

  package

  You'll see this in all classes, it can be used for organizing your code. Unless you are planning on releasing your code to the public, or are creating an organized library for yourself, you can generally leave the package as is. One other point, your package must reflect your file system, so for example flash.display.Sprite would have to be in the path "..\src\flash\display\" and have the classname "Sprite".



• Import:
  

   import flash.display.Sprite;
   import flash.events.Event;

  These statements make the Sprite class, and Event class accessible to your class. In flash you must import all of the classes you intend to use. You shouldn't have to worry about import too much because code completion in FlashDevelop automatically adds necessary import statements for you when you use it.



• Documentation Comments:

   /*
    *
    * ...
    * @author your name
    */

  Commented lines. This is a specific type of comment meant to be used by a documentation generator. It is opened with /** and closed with */. If you type "@" on one of the comment lines, autocomplete will pop up and give you a bunch of tag options. These tags will be displayed in specific ways if you generate documentation. Even if you don't feel like setting up documentation for your class/project, it's still a good idea to put in a description of what the class is supposed to do where the "..." is to help you understand your code if you come back to it.



• Declaring the class:
  

   public class Main extends Sprite

  This declares the class you are making. "public" means this class is accessible to any other class that wants to use it. "class" is a keyword labels the contents of the related code block as a class. Main is the name of your class. Quick side note about names, in AS3 public classes must be created inside files that match the name of the class, this is why our class "Main" is declared in the file "Main.as". If you screw this convention up, really it's ok because FlashDevelop gives you a nice descriptive error. "extends Sprite" declares this class as a subclass of Sprite. What this means is that our class will essentially be a Sprite, with whatever we code added to it. If you don't know about subclasses and inheritance yet, it might be wise to google "class inheritance" and "polymorphism".



• Declaring a constructor:
  

    public function Main():void

This is the function that will be called when the Main class is used to create an object. Constructors will generally be declared public, unless you are making an abstract or static class, which isn't in the scope of this tutorial. function is a keyword that labels the related code block as a function. Main is the name of the function. In this case, the name must match the name of the class, which is what makes it a constructor in AS3. ( and ) are a space for parameters, but there are none to this constructor. Finally :void tells AS3 that this function does not return a value when called.



• Class creation code:
  

  if (stage) init();
  else addEventListener(Event.ADDED_TO_STAGE, init);

This is an if-else statement. It first checks if this object's stage has been defined. This is somewhat like the _root of AS2, it is basically the main drawing area of a movie. If the stage exists in this object, then your code begins running the init() function. If not, addEventListener makes this class wait until it has been added to the stage, at which point it will call init. addEventListener arguments are the event time, and then the name of the method the event should call when it occurs.



• Declaring an initialization function:
  

  private function init(e:Event = null):void

This function will be called either by the Main function, or the EventListener that the main function creates. It is private because it should only be called from within the Main class. The parameter e:Event = null declares a parameter named e, that is of the type Event. It is assigned to null which means that if you call init using init(); with no parameters, e will automatically be null. e is required to be there because functions called by event listeners will use the event parameter to report which event caused the function to be called. The :void means the function has no return value.



• Coding an initialization function:
  

  removeEventListener(Event.ADDED_TO_STAGE, init);

This simply removes the event listener from this object if it was added in the constructor. This stops any potential problems of init being called by the handler again accidentally.


• Code comments:
  

  // entry point

  Code comments start with a // and are terminated by a line end. They are just another way to document what your code does. Comments inside of code will not show up in documentation like the previously shown comments do.
  

Final Comments:
This default Main file works ideally for components that involve drawing. Using the init function and event listeners ensures that you don't attempt to do any drawing before your object is added to the stage. If your class doesn't require the stage you can just put your init code in the constructor and delete the init function.

Next Tutorial, Hello World >>

FlashDevelop: Setting Up FlashDevelop for AS3 Programming

Setting Up FlashDevelop for AS3 Programming:
-Absolute beginner guide

Hopefully this should be a straightforward tutorial of how to get FlashDevelop up and running your ActionScript 3 material... this tutorial was written on FlashDevelop 3.0 and Adobe Flex SDK 3.3.

Files you need to grab:

1. FlashDevelop at http://www.flashdevelop.org/community/viewforum.php?f=11 it's hosted in their forum I guess, not sure how long this link will be good.
2. Adobe Flex SDK at http://www.adobe.com/products/flex/flexdownloads/ you can also get FlexBuilder from this site, I believe there is currently a month long trial before you have to buy. Lots of webpages say it is worth the money, but it's irrelevant to me because I will never have the money so I haven't tried it. Just grab the SDK if you are a cheap bastard like me.
3. Windows Flash Player 9 or 10 Projector content debugger http://www.adobe.com/support/flashplayer/downloads.html this is optional, but you need some kind of Flash Player in order to run your movies, and this seems the best option to me because you have to deal with annoying security warnings etc if you use a Flash browser plugin to test. (The Projector is a standalone .exe).

It doesn't matter what order you do the installations in for the current FlashDevelop (3.0) because the installer doesn't ask for any sort of SDK path.

For SDK Install:

1. Download the SDK http://www.adobe.com/products/flex/flexdownloads/
2. Extract the SDK to a directory you will be able to find in the future. I went with "C:\AS3\flex_3.3.0.4852"
3. Don't forget the location before you get FlashDevelop up and running.

For FlashDevelop Install:

1. Download the latest FlashDevelop http://www.flashdevelop.org/community/viewforum.php?f=11
2. Run the installer (standard windows procedure for installing)
3. Run the program.

For Windows Flash Player 10 Projector content debugger install:

1. Download the exe file from http://www.adobe.com/support/flashplayer/downloads.html
2. Place the exe somewhere that you'll remember it. I stuck it in "C:\AS3\"

Set Up ActionScript 3 IDE:

1. Run FlashDevelop
2. First you need to set your compile path, so that the SDK can compile your scripts. To do this go to Tools > Program Settings...
3. A window titled Settings should pop up. You want to select AS3Context in the list on the left.
4. Now in the right list under the Language category, there should be a property called "Flex SDK Location" set default to something like "c:\flex_sdk_3". You need to change this to the path where you unzipped all that Adobe Flex SDK stuff. You can open a folder browse window to make it easier by clicking on the "..." button that appears when you select "Flex SDK Location"
5. Time to check if everything is set up correctly.

Time to create an AS3 project and run it to see if everything is working:

1. Click Project > New Project.
2. Select AS3 Project in the Installed Templates List.
3. Enter a Name for your Project
4. This is a personal preference, but I always check "Create directory for project" because programming can quickly make a mess of your computer if you don't put atleast a little effort into organizing.
5. If it isn't already selected, select the Project tab in the window on the right of your workspace.
6. You should now see 3 folders: bin, lib, and src. bin will have some stuff in it to assist you in viewing/deploying your program that you don't really have to worry about right now. lib you can use later for your library files (if you use any). Currently we are concerned with the src folder. It should contain Main.as which you can double click to open in your editor window. There should be some basic framework code which I'll explain in the next tutorial, all you need to worry about now is checking if your setup works. Press F8 or click Project > Build Project To compile your empty project. The output should now flash a bunch of stuff and say "Build suceeded, Done (0)" at the end. If something else happens look at troubleshooting at the end of this blog.
7. Now that your movie is built you can try to run it. You need to associate .swf files with the Flash Projector Debug program you downloaded earlier. In order to do this, expand your bin folder, and right click on a .swf file.
8. Click Shell Menu... then Open With...
9. Select the "Select a program from a list of installed programs" radio button and click OK.
10. Click Browse... and find the Flash Projector exe file you downloaded.
11. Check the "Always use the selected program to open this type of file box" and click OK.
12. Now press F5 or click Project > Test Project to run your movie.
13. The flash player you downloaded should now pop up and display a big white block. CONGRATULATIONS. Read on to the next tutorial to get yourself something a bit more impressive.

Troubleshoot:

Problem: When I try to build, a window pops up saying "Would you like to open the AS3 context settings to configure the compiler?"

Solution: You probably forgot to set the Flex SDK Location property, or left it default. Check steps 2-4 under "Set Up ActionScript 3 IDE".

Problem: When I press Test Program or hit F5 nothing happens.

Solution: Check your output, does it say something about Execute not being related to any program? This means you didn't set up your file association correctly. Check steps 7-11 in the list right above troubleshooting.

Explanation of the default AS3 project next >>