Basic AS3 Tutorial

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
Line 4: Line 4:
[[File:Download_arrow.png|30px|]] Visit the [[Downloads]] page to download the source code used in this tutorial!
[[File:Download_arrow.png|30px]] Visit the [[Downloads]] page to download the source code used in this tutorial!
= Creating Your First Project =
= Creating Your First Project =

Revision as of 22:05, 8 October 2010

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

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

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



Creating Your First Project

02 004.jpg

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 Img preview.png, right click in the Flash Explorer and choose New Flash Project Img preview.png or choose New Flash Project from the File>New menu Img preview.png.

Right away you'll see FDT's new Project Template Wizard open Img preview.png. Give the project a 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 - so click finish to continue Img preview.png.

Creating Your First Class

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

To run and build a Flash Project, FDT only needs one file. If you're familiar with Flash Authoring Img preview.png or Flash Builder Img preview.png, 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 Img preview.png. What pops up is FDT's New ActionScript Class Wizard Img preview.png. Once here, we'll just fill in a valid class name, Main is pretty standard Img preview.png, and then define the superclass by clicking on the Browse... button Img preview.png. 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 Img preview.png.

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 file within the Flash Explorer Img preview.png.

Writing Code For Your Class

With our 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 Img preview.png.

var circle : Shape = new Shape();;, 150, 100);

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 Img preview.png.

Launch Your SWF

02 020x.jpg

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 Img preview.png. FDT will being the build process, as can been seen in the Console view Img preview.png, and when complete, FDT will launch the External SWF Viewer that runs our .SWF with the red circle on the Stage Img preview.png.

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 Img preview.png.

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.


  • 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