Basic AS3 Tutorial

From FDT Documentation

Revision as of 14:48, 29 September 2010 by Aklement (Talk | contribs)
Jump to: navigation, search

Beginning with FDT4, creating AS3 projects has never been easier. FDT 4 now features powerful template management that is designed to help developers get up and running in a flash.

If you haven't installed and created your workspace yet, check out the Installing and Running FDT tutorial to guide you through the process.

Contents

Creating Your First Project

Once you have FDT open, you have a few different ways of creating a new project. You can click Create new Flash Project via the Welcome Screen [1], right click in the Flash Explorer and choose New Flash Project [2] or choose New Flash Project from the File>New menu [3].

Right away you'll see FDT's new Project Template Wizard open [4]. Give the project a new name, AS3 Project will work fine, and let's stick with choosing Empty AS3 Project. When a valid project name has been added and a project template has been selected, the Finish button will highlight. Click finish to continue [5].

Creating Your First Class

Now we can see the project FDT created for us within the Flash Explorer. Click on the little arrow next to the project icon to expand it's contents. Here you can see a basic FDT project setup and see what our Empty AS3 Project template has setup for us. [6]

To run and build a Flash Project, FDT only needs one file. If you're familiar with Flash Authoring [11] or Flash Builder [12], this is like creating your Document Class or Main class. Create this file by right clicking on the src folder and choosing new>AS Class. [13] What pops up is FDT's New ActionScript Class Wizard. [14] Once here, we'll just fill in a valid class name, Main is pretty standard [15], and then define the superclass by clicking on the Browse... button. [16] You can use either Sprite or MovieClip for superclass and unless you have a special reason, Sprite will work fine. Filter the Sprite class by beginning to type Sprite within the search input box on the top and when you see Sprite - flash.display click on that and hit the OK button. After filling in a valid Class name and a valid superclass to extend, hit the OK button [17].

FDT will now create a new Class for you automatically and open it within the Editor View. If some reason it didn't open for you, double click on the Main.as file within the Flash Explorer [18].

Writing Code For Your Class

With our Main.as file open, let's create a simple red circle on the screen and then run our file.

Within the constructor of your class, add this bit of code to add a red circle to the stage [19].

var circle : Shape = new Shape();
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(150, 150, 100);
addChild(circle);


When typing this code within the constructor, FDT will flag some errors. Resolve these errors by using one of FDT's Smart Editor features, Organize Imports. Invoke this by pressing Cmd+Shift+O (OSX) or Ctrl+Shift+O (Windows). FDT will automatically add the missing import statements [20].

Launch Your SWF

To quickest way to launch your application is to right click on the Main class within the editor and select Run As>FDT SWF Application. [21] FDT will being the build process, as can been seen in the Console view [22], and when complete, FDT will launch the External SWF Viewer that runs our .SWF with the red circle on the Stage. [23]

With compilation successful, FDT will have created a .SWF in your Output Folder bin by default and created a Launch Configuration located within the folder .settings>launch [24].

After viewing your .SWF, close the External SWF Viewer and confirm your .SWF was created by opening up your bin output folder and looking for Main.swf.

Wrap Up

Congratulations, you’ve built your first FDT application. From here, you’ll probably want to learn more about editing Launch Configurations and compiler options such as .SWF size and background color. See our Launch Configuration Tutorial for more info on that.

Download arrow.png Visit the Downloads page to download the source code used in this tutorial!

FAQ

  • Q: My project compiled but it didn't open in the External SWF Viewer
  • A: Check to see if Flash Player and Java are properly installed.
  • Q: How Do I change .SWF settings like background color or size?
  • A: Check out the Launch Configuration Tutorial tutorial to learn about different ways to compile and view your Flash Applications
  • Q: Does my class need to be named Main.
  • A: Not at all - any legal class name works. FDT has a very powerful and flexible way of building and running your applications. Check out the Launch Configuration Tutorial for more info.
  • Q: Why is my output swf named Main.swf and why is my launch configuration named Main.
  • A: When clicking on a Class and choosing Run As... from either the Editor View or the Flash Explorer - if FDT doesn't detect that a launch configuration already exists for that file, FDT will create a new one. The new launch configuration created will have the same name as the Class that was selected when choosing Run As... or Debug As....
  • Q: Why is it that when I click on my project within the Flash Explorer and then go to the Run Menu, I don't see my Main class but I see (no launch history) or I see Run As>FDT SWC Library.
  • A: FDT works differently than other IDEs. It uses Launch Configurations and doesn't force you to hardcode any settings. This includes compiler options, your Main class or the name of your output .swfs. You can even create many different launch configurations for one project. Learn more with the Launch Configuration Tutorial tutorial.
Get FDT5