ActionsScript Mobile Project, Flash Builder 4.5 Tutorial

 

This beginner tutorial for Flash Builder 4.5 will teach you how to create your first ActionScript Mobile Project. We will build a simple app that displays Hello World on the mobile phone or pad. Flash Builder 4.5.1 can be used to create mobile apps for Android phones / pads, iOS such as iPhone / iPad and for Blackberry devices. No prior knowledge of Flash, ActionScript or Flash Builder is required to follow along in this tutorial.

This tutorial describes how to create an ActionScript Mobile Project in Flash Builder 4.5. If you are looking for an tutorial on how to create a Flex Mobile Project in Flash Builder then you can find that here.

You need Flash Builder 4.5 take part in this guide. Flash Builder 4.5 can be downloaded from Adobe. They offer a 60 days free trial. Install the program on your computer.

The first thing we do after we have started Flash Builder 4.5 is to select File in the menu at the top left corner of the program. Then select New in the drop down menu and finally ActionScript Mobile Project in the menu that opens to the right.

Flex meny träd

The Create an ActionScript Mobile AIR Project wizard will open. Enter a Project name in the first input box. I have chosen the name HelloWorldASM. Then select the location on where you like to store the project, I recommend using the default location if you don't have any specific requirements on where to store the files on your computer. Make sure that the Flex SDK version is Flex 4.5.1 or higher. (Flex 4.5 is okay if you only want to develop for Android and not for iPhone / iPad, they need version 4.5.1 of the Flex SDK). Click on the Next button at the bottom of the wizard window.

Flex meny träd

In this part of the wizard you select witch platforms to target. You can choose one or more of Apple iOS, Blackberry Tables OS and Google Android. All are selected by default and we cane leave it like that. There are some other settings on this page but we can leave them all as they are. I just want to mention two of them. Automatically reorient - this will help us to automatically reorient our content on the mobile screen when the user rotates the device. Full screen - this will make the app take upp the full screen of the mobile device and hiding the statusbar. Proceed by clicking Finish at the bottom of the wizard window.

Flex meny träd

Flash Builder creates the new ActionScript Mobile Project for us and opens its main file. The file has already been populated with the following code by Flash Builder.

package
{
   import flash.display.Sprite;
   import flash.display.StageAlign;
   import flash.display.StageScaleMode;
   
   public class HelloWorldASM extends Sprite
   {
      public function HelloWorldASM()
      {
         super();
         
         // support autoOrients
         stage.align = StageAlign.TOP_LEFT;
         stage.scaleMode = StageScaleMode.NO_SCALE;
      }
   }
}

We need to add code to display the text Hello World and start by creating a text field by adding the following line of code at the end before the three }.

var tText:TextField = new TextField();

Next we assign the text field string to display. In our case Hello World. We do that with the following ActionScript code.

tText.text = "Hello World";

Then we need to add the text field to the display list in order for it to show on the mobile phone screen. All visual elements in ActionScript 3 need to be added to the display list to be rendered on the screen and visible to the user. We add the text field to the display with the ActionScript code bellow.

addChild(tText);

This is all the ActionScript code that we need in this project.

Lets do a test run of the app on a simulated phone on the computer. Click on the run button Run button at the top of Flash Builder. This will normally run the last used run configuration but now it will instead launch the Run Configurations wizard since we have not done any run before.

We will create a new Mobile Application configuration. I have changed the Target platform to Google Android and selected the launch method to On desktop. (We will run on a real device later). Then choose a device to simulate. I have chosen Motorola Droid Pro. Feel free to select any one you like. Then click on run button at the bottom of the Run Configuration wizard window.

Flex meny träd

This will run the app on the simulated Android mobile phone and will look like this.

Flex meny träd

Great that worked! Now lets test on a real Android phone. You need a real Android mobile phone to follow along in the tutorial from here on. The phone need to have Android Froyo, version 2.2, or higher installed and also needs to have Adobe AIR installed on the phone / pad.

Now you need to prepare your Android phone before we can run the app on the device, start by enabling USB debugging. You find it in the your Android phone under Settings > Applications > Development, make sure that USB debugging is selected here. Then connect your Android phone to your computer using a USB cable.

In Flash Builder 4.5 click on the little down arrow next to the run button Run button arrow and select Run Configurations in the drop down menu that opens. (Do not just click on the run button like before, remember that that will launch the last used configuration).

Change the Launch method to On device and then click on run at the bottom of the wizard window. This will run the app on your mobile phone or pad and it fill start automatically on the phone.

You also need to have the correct drivers installed on your computer to be able to connect to the phone. For more information on this click on Device Connection Help found in the Run Configurations window.

That concludes this tutorial about how to create your first ActionScript Mobile Project in Flash Builder 4.5. 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.