Basic AS3 Tutorial

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
Line 1: Line 1:
-
[[File:010_015.png|center]]
+
[[File:Basic_as3_splash.png|center]]
-
haXe is an open source and multiplatform programming language. To learn more and get the latest info on using haXe and the platforms it targets, check out the [http://haxe.org/doc/intro haXe's Introduciton].
+
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.
 +
<br/>
= <center>Source Files</center> =
= <center>Source Files</center> =
-
[[File:Download_soruce_files.png|center|link=http://github.com/downloads/Powerflasher/FDT-Resources/haXe_finish.zip]]
+
[[File:Download_soruce_files.png|center|link=http://github.com/downloads/Powerflasher/FDT-Resources/as3_basic_finish.zip]]
 +
= <center>Video</center> =
 +
::::{{#widget:Vimeo|id=15571978}}
 +
= <center>Creating Your First Project</center> =
 +
[[File:02_004.jpg|center|200px]]
 +
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]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_001.jpg]], right click in the [[Flash Explorer]] and choose ''New Flash Project'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_002.jpg]] or choose ''New Flash Project'' from the ''File>New'' menu [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_003.jpg]].
-
=Installation=
+
Right away you'll see FDT's new [[Project Template Wizard]] open [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_004.jpg]]. 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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_005.jpg]].
-
To get started with haXe, you'll need to download a few extra add-ons.
+
-
==Download haXe==
+
= <center>Creating Your First Class</center> =
 +
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_006.jpg]].
-
Visit haXe's download page [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_001.gif]], and download one of the automatic installers for your platform. For this example, we'll be installing haXe for OSX.
+
* This top SDK icon tells us the [[Project Type]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_007.jpg]]
 +
* The ''src'' folder has been setup as our default [[Source Folder]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_008.jpg]]  
 +
* The ''bin'' folder is set as the default [[Output Folder]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_009.jpg]]
 +
* The ''.settings'' folder and ''.project'' file are what FDT uses to keep track of [[Project Settings]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_010.jpg]]
-
While installing, the installer may ask you to install ''Neko''. Neko is a language / Virtual Machine platform that comes with the installer. Even if you've never use Neko and haXe together, it may come in handy in the future so go ahead and install that as well [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_002.gif]].
+
To run and build a Flash Project, FDT only needs one file. If you're familiar with Flash Authoring [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_011.jpg]] or Flash Builder [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_012.jpg]], 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'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_012x.jpg]]. What pops up is FDT's [[New ActionScript Class Wizard]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_013.jpg]]. Once here, we'll just fill in a valid class name, ''Main'' is pretty standard [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_014.jpg]], and then define the superclass by clicking on the ''Browse...'' button [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_015.jpg]].  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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_016.jpg]].
-
+
-
When the installer is complete [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_003.gif]], confirm that the installation of haXe was successful by opening your console and executing the command ''haXe'':
+
-
<syntaxhighlight lang="bash">
+
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_017.jpg]].
-
haxe
+
-
</syntaxhighlight>
+
 +
=<center>Writing Code For Your Class</center>=
 +
With our ''Main.as'' file open, let's create a simple red circle on the screen and then run our file.
-
If installed correctly, the console should print out haXe info:
+
Within the [[constructor]] of your class, add this bit of code to add a red circle to the stage [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_018.jpg]].  
-
 
+
-
<syntaxhighlight lang="bash">
+
-
OSXs-MacBook:~ OSX$ haxe
+
-
haXe Compiler 2.06 - (c)2005-2010 Motion-Twin
+
-
Usage : haxe -main <class> [-swf9|-swf|-js|-neko|-php|-cpp|-as3] <output> [options]
+
-
Options :
+
-
  -cp <path> : add a directory to find source files
+
-
  -js <file> : compile code to JavaScript file
+
-
  -swf <file> : compile code to Flash SWF file
+
-
  -swf9 <file> : compile code to Flash9 SWF file
+
-
  -as3 <directory> : generate AS3 code into target directory
+
-
  -neko <file> : compile code to Neko Binary
+
-
  -php <directory> : generate PHP code into target directory
+
-
  -cpp <directory> : generate C++ code into target directory
+
-
  -xml <file> : generate XML types description
+
-
  -main <class> : select startup class
+
-
  -lib <library[:version]> : use a haxelib library
+
-
  -D <var> : define a conditional compilation flag
+
-
  -v : turn on verbose mode
+
-
  -debug : add debug informations to the compiled code
+
-
  -help  Display this list of options
+
-
  --help  Display this list of options
+
-
</syntaxhighlight>
+
-
 
+
-
 
+
-
If it doesn't - try restarting your computer or reinstalling it again.
+
-
 
+
-
==Install FDT's haXe Plugin==
+
-
*Start up FDT 4 and select ''Help>Install new Software'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_0001.png]].
+
-
*Select the ''FDT Plugins Site'' update site [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_0002.png]] (If it is not included in your drop down menu, enter: http://fdt.powerflasher.com/plugins in the ''Work with'' text input and hit return).
+
-
*Select "FDT haXe Plugin" from the plugin list [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_0003.png]], hit ''Finish'' and follow the final installation steps.
+
-
 
+
-
=Setting up the haXe Plugin=
+
-
Before authoring and compiling haXe, you'll need to define the haXe SDK location for FDT to reference. Open FDT's preference widow and navigate to ''HaXe>SDK'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_005.gif]] and input the installation directory of haXe. If you're not sure where haXe is installed, the installation window will clue you in [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_006.gif]]. Here we can see that the installer is moving files and creating links to ''/usr/lib/haxe'' - this is the default location for OSX. After inputing the sdk location, hit ''OK'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_007.gif]].
+
-
 
+
-
=Create Your First haXe Project=
+
-
 
+
-
All haXe projects begin with a Flash Project base and then are converted to a haXe project. Begin by creating an ''Empty AS3 Project'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_008.gif]] and then create a new HaXe class by right clicking on ''src'' and choosing ''Other'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_010.gif]]. When the wizard pops up choose HaXe Class [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_011.gif]] and give the class the name ''Main'' and hit ''Finish'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_012.gif]].
+
-
 
+
-
==Convert Project To A haXe Project==
+
-
With your first class created, right click on the project and select ''Add HaXe Project Nature'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_013.gif]]. When this happens, FDT will ask you to input some project variables. We already have configured our ''HaXe SDK Location'' so just hit ''Next'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_014.gif]].
+
-
 
+
-
Let's leave the haXe configuration file to the default location but modify the ''Output Path'' to ''bin/Main.swf'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_015.gif]].  When completed, FDT will have created a few extra files and folders for us.  We don't need to worry about ''.hxtypes'' but we use ''project.hxml'' to set configurations to our project [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_016.gif]]. We can also see that FDT has begun to parse our project for syntax errors [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_017.gif]].
+
-
 
+
-
==Adjust Compiler Settings==
+
-
Before writing some code, let's alter some compiler options - this is done via the ''project.hxml'' file. Open us the file by double clicking on it [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_018.gif]] and then add this argument to the bottom:
+
-
 
+
-
<syntaxhighlight lang="bash">
+
-
-swf-header 550:400:40:FFFFFFF
+
-
</syntaxhighlight>
+
-
+
-
Here we are setting the ''Width'' and ''Height'' properties to 500 x 400 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_020.gif]].
+
-
 
+
-
= Compiling and Viewing your .SWF =
+
-
 
+
-
==Adding haXe Code==
+
-
The syntax of haXe is a bit beyond the scope of this tutorial - but that doesn't mean we have to code something boring! Copy and paste the code below to make a simple animation [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_021.gif]]. Or type in the the code yourself to begin exploring the syntax auto completion FDT provides [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_022.gif]].
+
-
 
+
<syntaxhighlight lang="actionscript">
<syntaxhighlight lang="actionscript">
-
package ;
+
var circle : Shape = new Shape();
-
import flash.display.Sprite;
+
circle.graphics.beginFill(0xff0000);
-
import flash.events.Event;
+
circle.graphics.drawCircle(150, 150, 100);
-
 
+
addChild(circle);
-
class Main{
+
-
static var view:Sprite;
+
-
static var x: Float = 0;
+
-
static var y: Float = 200;
+
-
static var speed :Float = 20;
+
-
static var max_x : Float = 550;
+
-
+
-
    static function main() {
+
-
new Main();  
+
-
    }
+
-
   
+
-
    function new(){
+
-
    view = new Sprite();
+
-
    flash.Lib.current.addChild (view);
+
-
    flash.Lib.current.stage.addEventListener(Event.ENTER_FRAME, update_view);
+
-
    }
+
-
   
+
-
    function update_view (e: Dynamic){
+
-
    view.graphics.clear();
+
-
    view.graphics.beginFill(0xff0000, 1);
+
-
    view.graphics.drawCircle(x, y, 50);
+
-
   
+
-
    if(is_invalid_x()) speed  = speed * -1;
+
-
    x+= speed;
+
-
    }
+
-
   
+
-
    function  is_invalid_x() : Bool {
+
-
    return x > max_x || x < 0;
+
-
    }
+
-
}
+
</syntaxhighlight>
</syntaxhighlight>
-
==Compiling haXe==
 
-
For the time being, FDT will automatically attempt to compile your .SWF every time you save it. If there are no errors in your project, your .SWF will appear in your ''bin'' folder [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_023.gif]]. If it doesn't appear, try refreshing your project [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_024.gif]].
+
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_019.jpg]].
-
==View Your SWF==
+
=<center>Launch Your SWF</center>=
 +
[[File:02_020x.jpg|center]]
 +
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'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_020.jpg]]. FDT will being the build process, as can been seen in the [[Console]] view [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_021.jpg]], and when complete, FDT will launch the [[External SWF Viewer]] that runs our .SWF with the red circle on the [[Stage]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_022.jpg]].
-
As this FDT plugin is still in it's early stages, there are no launch configurations to automatically view your .SWF - but we can make a simple Ant script to view our .SWF! We'll quickly go over a simple script to view our .SWF but for more in depth know-how on using Ant, check out the [[FDT and Ant Tutorial]].
+
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'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_023.jpg]].
-
Create a new Ant script by beginning with a simple XML file by right clicking on the project and choosing ''new>other'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_025.gif]] and then select an XML file to create [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_026.gif]] and hit ''Finish''. Give the script any name you like, this one is called ''view_swf.xml'' and hit ''Finish'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_027.gif]].
+
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''.
-
 
+
-
Next, copy the code below to have FDT launch the external .SWF viewer [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_028.gif]]:
+
-
 
+
-
<syntaxhighlight lang="xml">
+
-
<project>
+
-
<target name="view.swf">
+
-
<fdt.extSWFViewer.startSWF width="550" height="400"
+
-
                    file="${basedir}/bin/Main.swf"/>
+
-
</target>
+
-
</project>
+
-
</syntaxhighlight>
+
 +
=<center>Wrap Up</center>=
 +
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.
-
Then, drag your .XML file to the Ant view [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_029.gif]] and double click the target to launch [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:010_030.gif]]. You will then see a red ball moving back and forth on the screen.
+
=<center>FAQ</center>=
 +
*Q: My project compiled but it didn't open in the External SWF Viewer
 +
*A: Check to see if [http://www.adobe.com/support/flashplayer/downloads.html Flash Player] and [http://www.java.com/en/download/installed.jsp Java] are properly installed.
-
*note: ''If you get an error while tying to run the Ant file, it's probably a JRE error, check out the [[FDT and Ant Tutorial]] to learn how to correct it.''
+
*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
-
=Wrap Up=
+
*Q: Does my class need to be named ''Main''.
-
That's it, you've successfully set up your first FDT haXe Flash project!
+
*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.
-
As this plugin is still an Alpha release, please bare with us! For any feedback, feature requests, improvements, bugs and other issues we encourage you to use our community driven tracking website to make the haXe support in FDT the greatest ever. We also suggest anyone anyone interested in haXe developement to subscribe to the haXe mailing list. It's a very active group with smart people and interesting topics.  
+
*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...''.
-
On the behalf of the FDT Team and Influxis, we hope you are as excited as we are and enjoy the FDT haXe plugin.
+
*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.

Revision as of 14:39, 12 November 2010

Basic as3 splash.png

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.

Contents

Source Files

Download soruce files.png

Video

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

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

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 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.

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