First ActionScript Project in Flash Builder 4 Tutorial

 

UPDATE: The tutorial was written for Flash Builder 4 but works just as well for Flash Builder 4.5

This tutorial is for beginners and will teach you how to create your very first ActionScript Project in Flash Builder 4 and also works for Flash Builder 4.5 that was released after this tutorial was written. We will create an application that displays Hello World on the screen. You do not need any prior knowledge of ActionScript 3.0 or Flash Builder to follow along in this guide. You do need to have Flash Builder 4 installed on your computer. You can get a 30 days free evaluation version on Adobes site if you do not already have the program and a 60 days free trial for the latest Flash Builder 4.5

This article describes how to create an ActionScript Project in Flash Builder 4 but also works for Flash Builder 4.5.1. If you are looking for an article on how to create a Flex Project in Flash Builder then you can find that here.

The first thing to do in Flash Builder is to create the project. Select File in the menu bar at the top of the program. Then select New in the drop down menu and finally select ActionScript Project in the menu that open to the right.

Flash Builder menu

This will open the Create an ActionScript project wizard. Enter the name of your project in the first text field labeled Project name. I use the project name HelloWorldAS. We can leave the rest of the settings as they are so click on finish at the bottom right corner of the window.

New ActionScript Project Wizard

This will create the project and open the HelloWorldAS class file. This is the main class of the ActionScript project. The file is pre-populated with some essential code.

package
{
   import flash.display.Sprite;

   public class HelloWorldAS extends Sprite
   {
      public function HelloWorldAS()
      {
	
      }
   }
}

We will add more code inside the {} after public function HelloWorldAS(). First we will create a variable that we name tText. This variable will hold our text field and we cast the variable to a type of TextField.

var tText:TextField;

We then create a TextField using the new operator and assign it to the variable we previously created.

tText = new TextField();

The next thing to do is to define what to display in the text field. We do this using the text property on the text field in the following way.

tText.text = "Hello World";

The last thing to do is to add the text field to the display list. Otherwise nothing will be shown on the screen. We do this using the addChild method of the main class.

addChild(tText);

The code is now complete and should look like this.

package
{
   import flash.display.Sprite;
   import flash.text.TextField;

   public class HelloWorldAS extends Sprite
   {
      public function HelloWorldAS()
      {
         var tText:TextField;
         tText = new TextField();
         tText.text = "Hello World";
         addChild(tText);
      }
   }
}

The line import flash.text.TextField; should have been added automatically by Flash Builder 4 when you typed the first line of code. Otherwise add it yourself. This line declares which package the class TextField is located in.

Now we are ready to test the application. Hit the run button Run button in the button bar at the top of the Flash Builder window. The program might ask you if you like to save the file before continuing. Click OK. A browser window should now open and you should be able to see the text Hello World in that window.

You have just finished your first ActionScript Project in Flash Builder 4!

This is the end of the tutorial on how to create your first ActionScript application in Flash Builder 4. Learn more about ActionScript 3.0, Flash Builder 4.5 and the Flex framework in our other tutorials on this site. I hope you found this AS3 guide to be helpful.