Basic AS3 Tutorial

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(Creating Your First Project)
(Creating Your First Project)
Line 6: Line 6:
= Creating Your First Project =
= 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]] [http://fdt.powerflasher.com/docs/File:02_001.jpg], right click in the [[Flash Explorer]] and choose '''New Flash Project''' [http://fdt.powerflasher.com/docs/File:02_002.jpg] or choose '''New Flash Project''' from the 'File>New menu' [http://fdt.powerflasher.com/docs/File:02_003.jpg]. Right away you'll see FDT's new [[Project Template Wizard]] open [http://fdt.powerflasher.com/docs/File:02_004.jpg]. 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. [http://fdt.powerflasher.com/docs/File:02_005.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]] [http://fdt.powerflasher.com/docs/File:02_001.jpg], right click in the [[Flash Explorer]] and choose '''New Flash Project''' [http://fdt.powerflasher.com/docs/File:02_002.jpg] or choose '''New Flash Project''' from the File>New menu [http://fdt.powerflasher.com/docs/File:02_003.jpg]. Right away you'll see FDT's new [[Project Template Wizard]] open [http://fdt.powerflasher.com/docs/File:02_004.jpg]. 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. [http://fdt.powerflasher.com/docs/File:02_005.jpg]
= Creating Your First Class =
= Creating Your First Class =

Revision as of 16:07, 27 September 2010

Beginning with FDT4, creating AS3 projects has never been easier. FDT 4 now features powerful template management that are 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.

Download the finished project here. Learn about importing this project in the Sharing and Archiving Projects tutorial.

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 our 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]

Congratulations, you’ve built your first FDT application. From here, you’ll probably want to learn more about editing Launch Configurations (Understanding Launch Configurations) and Compiler Options such as SWF size and background color.

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'

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 Compiling and Viewing Projects 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 Compiling and Viewing Projects 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 Understanding Launch Configurations tutorial.
Get FDT5