Basic AS3 Tutorial

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(Launch Your SWF)
(Launch Your SWF)
Line 1: Line 1:
-
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.
+
<p>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.
-
 
+
</p><p>If you haven't installed and created your workspace yet, check out the <a _fcknotitle="true" href="Installing and Running FDT">Installing and Running FDT</a> tutorial to guide you through the process.
-
If you haven't installed and created your workspace yet, check out the [[Installing and Running FDT]] tutorial to guide you through the process.
+
</p><p><br />
-
 
+
<img src="/w/images/thumb/a/a8/Download_arrow.png/30px-Download_arrow.png" _fck_mw_filename="Download arrow.png" _fck_mw_width="30" alt="Download arrow.png" /> Visit the <a _fcknotitle="true" href="Downloads">Downloads</a> page to download the source code used in this tutorial!
-
 
+
</p><p><br />
-
[[File:Download_arrow.png|30px|]] Visit the [[Downloads]] page to download the source code used in this tutorial!
+
</p>
-
 
+
<h1> Creating Your First Project </h1>
-
 
+
<p><img src="/w/images/thumb/e/e3/02_004.jpg/200px-02_004.jpg" _fck_mw_filename="02 004.jpg" _fck_mw_location="center" _fck_mw_width="200" alt="02 004.jpg" class="fck_mw_center" />
-
 
+
Once you have FDT open, you have a few different ways of creating a new project. You can click <i>Create new Flash Project</i> via the <a _fcknotitle="true" href="Welcome Screen">Welcome Screen</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />, right click in the <a _fcknotitle="true" href="Flash Explorer">Flash Explorer</a> and choose <i>New Flash Project</i> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" /> or choose <i>New Flash Project</i> from the <i>File&gt;New</i> menu <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.  
-
= Creating Your First Project =
+
</p><p>Right away you'll see FDT's new <a _fcknotitle="true" href="Project Template Wizard">Project Template Wizard</a> open <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />. Give the project a name, <i>AS3 Project</i> will work fine, and let's stick with choosing <i>Empty AS3 Project</i>. When a valid project name has been added and a project template has been selected, the <i>Finish</i> button will highlight - so click finish to continue <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.
-
[[File:02_004.jpg|center|200px]]
+
</p>
-
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]].  
+
<h1> Creating Your First Class </h1>
-
 
+
<p>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 <i>Empty AS3 Project</i> template has setup for us <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.
-
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]].
+
</p>
-
 
+
<ul><li> This top SDK icon tells us the <a _fcknotitle="true" href="Project Type">Project Type</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.  
-
= Creating Your First Class =
+
</li><li> The <i>src</i> folder has been setup as our default <a _fcknotitle="true" href="Source Folder">Source Folder</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.  
-
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]].
+
</li><li> The <i>bin</i> folder is set as the default <a _fcknotitle="true" href="Output Folder">Output Folder</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.  
-
 
+
</li><li> The <i>.settings</i> folder and <i>.project</i> file are what FDT uses to keep track of <a _fcknotitle="true" href="Project Settings">Project Settings</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.   
-
* This top SDK icon tells us the [[Project Type]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_007.jpg]].  
+
</li></ul>
-
* 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]].  
+
<p>To run and build a Flash Project, FDT only needs one file. If you're familiar with Flash Authoring <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" /> or Flash Builder <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />, this is like creating your Document Class or Main class. Create this file by right clicking on the <i>src</i> folder and choosing <i>new&gt;AS Class</i> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />. What pops up is FDT's <a _fcknotitle="true" href="New ActionScript Class Wizard">New ActionScript Class Wizard</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />. Once here, we'll just fill in a valid class name, <i>Main</i> is pretty standard <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />, and then define the superclass by clicking on the <i>Browse...</i> button <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.  You can use either <i>Sprite</i> or <i>MovieClip</i> for superclass and unless you have a special reason, Sprite will work fine. Filter the Sprite class by beginning to type <i>Sprite</i> within the search input box on the top and when you see <i>Sprite - flash.display</i> click on that and hit the <i>OK</i> button. After filling in a valid Class name and a valid superclass to extend, hit the <i>OK</i> button <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.
-
* The ''bin'' folder is set as the default [[Output Folder]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_009.jpg]].  
+
</p><p>FDT will now create a new Class for you automatically and open it within the <a _fcknotitle="true" href="Editor View">Editor View</a>. If some reason it didn't open for you, double click on the <i>Main.as</i> file within the Flash Explorer <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.
-
* 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]].   
+
</p>
-
 
+
<h1>Writing Code For Your Class</h1>
-
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]].
+
<p>With our <i>Main.as</i> file open, let's create a simple red circle on the screen and then run our file.
-
 
+
</p><p>Within the <a _fcknotitle="true" href="Constructor">Constructor</a> of your class, add this bit of code to add a red circle to the stage <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:02_017.jpg]].
+
</p>
-
 
+
<div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="actionscript source-actionscript"><pre class="de1"><span class="kw2">var</span> circle&nbsp;: Shape = <span class="kw2">new</span> Shape<span class="br0">&#40;</span><span class="br0">&#41;</span>;
-
=Writing Code For Your Class=
+
circle.<span class="me1">graphics</span>.<span class="kw3">beginFill</span><span class="br0">&#40;</span>0xff0000<span class="br0">&#41;</span>;
-
With our ''Main.as'' file open, let's create a simple red circle on the screen and then run our file.
+
circle.<span class="me1">graphics</span>.<span class="me1">drawCircle</span><span class="br0">&#40;</span><span class="nu0">150</span>, <span class="nu0">150</span>, <span class="nu0">100</span><span class="br0">&#41;</span>;
-
 
+
addChild<span class="br0">&#40;</span>circle<span class="br0">&#41;</span>;</pre></div></div>
-
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]].  
+
<p><br />
-
 
+
When typing this code within the constructor, FDT will flag some errors. Resolve these errors by using one of FDT's <a _fcknotitle="true" href="Smart Editor">Smart Editor</a> features, <a _fcknotitle="true" href="Organize Imports">Organize Imports</a>. Invoke this by pressing <i>Cmd+Shift+O</i> (OSX) or <i>Ctrl+Shift+O</i> (Windows). FDT will automatically add the missing import statements <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.
-
<syntaxhighlight lang="actionscript">
+
</p>
-
var circle : Shape = new Shape();
+
<h1>Launch Your SWF</h1>
-
circle.graphics.beginFill(0xff0000);
+
<p><img src="/w/images/thumb/1/10/02_020x.jpg/500px-02_020x.jpg" _fck_mw_filename="02 020x.jpg" _fck_mw_location="center" _fck_mw_width="500" alt="02 020x.jpg" class="fck_mw_center" />
-
circle.graphics.drawCircle(150, 150, 100);
+
To quickest way to launch your application is to right click on the <i>Main</i> class within the editor and select <i>Run As&gt;FDT SWF Application</i> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />. FDT will being the build process, as can been seen in the <a _fcknotitle="true" href="Console">Console</a> view <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />, and when complete, FDT will launch the <a _fcknotitle="true" href="External SWF Viewer">External SWF Viewer</a> that runs our .SWF with the red circle on the <a _fcknotitle="true" href="Stage">Stage</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.  
-
addChild(circle);
+
</p><p>With compilation successful, FDT will have created a .SWF in your <a _fcknotitle="true" href="Output Folder">Output Folder</a> <i>bin</i> by default and created a <a _fcknotitle="true" href="Launch Configuration">Launch Configuration</a> located within the folder <i>.settings&gt;launch</i> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.
-
</syntaxhighlight>
+
</p><p>After viewing your .SWF, close the External SWF Viewer and confirm your .SWF was created by opening up your <i>bin</i> output folder and looking for <i>Main.swf</i>.
-
 
+
</p>
-
 
+
<h1>Wrap Up</h1>
-
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]].
+
<p>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  <a _fcknotitle="true" href="Launch Configuration Tutorial">Launch Configuration Tutorial</a> for more info on that.
-
 
+
</p>
-
=Launch Your SWF=
+
<h1>FAQ</h1>
-
[[File:02_020x.jpg|center|500px]]
+
<ul><li>Q: My project compiled but it didn't open in the External SWF Viewer
-
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]].  
+
</li><li>A: Check to see if <a href="http://www.adobe.com/support/flashplayer/downloads.html">Flash Player</a> and <a href="http://www.java.com/en/download/installed.jsp">Java</a> are properly installed.
-
 
+
</li></ul>
-
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]].
+
<ul><li>Q: How Do I change .SWF settings like background color or size?
-
 
+
</li><li>A: Check out the <a _fcknotitle="true" href="Launch Configuration Tutorial">Launch Configuration Tutorial</a> tutorial to learn about different ways to compile and view your Flash Applications
-
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''.
+
</li></ul>
-
 
+
<ul><li>Q: Does my class need to be named <i>Main</i>.
-
=Wrap Up=
+
</li><li>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 <a _fcknotitle="true" href="Launch Configuration Tutorial">Launch Configuration Tutorial</a> for more info.
-
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.
+
</li></ul>
-
 
+
<ul><li>Q: Why is my output swf named <i>Main.swf</i> and why is my launch configuration named <i>Main</i>.
-
=FAQ=
+
</li><li>A: When clicking on a Class and choosing <i>Run As...</i> 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 <i>Run As...</i> or <i>Debug As...</i>.
-
*Q: My project compiled but it didn't open in the External SWF Viewer
+
</li></ul>
-
*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.
+
<ul><li>Q: Why is it that when I click on my project within the Flash Explorer and then go to the <a _fcknotitle="true" href="Run Menu">Run Menu</a>, I don't see my <i>Main class</i> but I see <i>(no launch history)</i> or I see <i>Run As&gt;FDT SWC Library</i>.
-
 
+
</li><li>A: FDT works  differently than other IDEs. It uses <a _fcknotitle="true" href="Launch Configurations">Launch Configurations</a> and doesn't force you to hardcode any settings. This includes compiler options, your <i>Main</i> class or the name of your output .swfs. You can even create many different launch configurations for one project. Learn more with the <a _fcknotitle="true" href="Launch Configuration Tutorial">Launch Configuration Tutorial</a> tutorial.
-
*Q: How Do I change .SWF settings like background color or size?
+
</li></ul>
-
*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.
+

Revision as of 23:05, 4 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 and created your workspace yet, check out the <a _fcknotitle="true" href="Installing and Running FDT">Installing and Running FDT</a> tutorial to guide you through the process.


<img src="/w/images/thumb/a/a8/Download_arrow.png/30px-Download_arrow.png" _fck_mw_filename="Download arrow.png" _fck_mw_width="30" alt="Download arrow.png" /> Visit the <a _fcknotitle="true" href="Downloads">Downloads</a> page to download the source code used in this tutorial!


Contents

Creating Your First Project

<img src="/w/images/thumb/e/e3/02_004.jpg/200px-02_004.jpg" _fck_mw_filename="02 004.jpg" _fck_mw_location="center" _fck_mw_width="200" alt="02 004.jpg" class="fck_mw_center" /> 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 <a _fcknotitle="true" href="Welcome Screen">Welcome Screen</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />, right click in the <a _fcknotitle="true" href="Flash Explorer">Flash Explorer</a> and choose New Flash Project <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" /> or choose New Flash Project from the File>New menu <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.

Right away you'll see FDT's new <a _fcknotitle="true" href="Project Template Wizard">Project Template Wizard</a> open <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="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 src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="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 src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.

  • This top SDK icon tells us the <a _fcknotitle="true" href="Project Type">Project Type</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.
  • The src folder has been setup as our default <a _fcknotitle="true" href="Source Folder">Source Folder</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.
  • The bin folder is set as the default <a _fcknotitle="true" href="Output Folder">Output Folder</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.
  • The .settings folder and .project file are what FDT uses to keep track of <a _fcknotitle="true" href="Project Settings">Project Settings</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.

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

FDT will now create a new Class for you automatically and open it within the <a _fcknotitle="true" href="Editor View">Editor View</a>. If some reason it didn't open for you, double click on the Main.as file within the Flash Explorer <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="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 <a _fcknotitle="true" href="Constructor">Constructor</a> of your class, add this bit of code to add a red circle to the stage <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.

<span class="kw2">var</span> circle : Shape = <span class="kw2">new</span> Shape<span class="br0">(</span><span class="br0">)</span>;
circle.<span class="me1">graphics</span>.<span class="kw3">beginFill</span><span class="br0">(</span>0xff0000<span class="br0">)</span>;
circle.<span class="me1">graphics</span>.<span class="me1">drawCircle</span><span class="br0">(</span><span class="nu0">150</span>, <span class="nu0">150</span>, <span class="nu0">100</span><span class="br0">)</span>;
addChild<span class="br0">(</span>circle<span class="br0">)</span>;


When typing this code within the constructor, FDT will flag some errors. Resolve these errors by using one of FDT's <a _fcknotitle="true" href="Smart Editor">Smart Editor</a> features, <a _fcknotitle="true" href="Organize Imports">Organize Imports</a>. Invoke this by pressing Cmd+Shift+O (OSX) or Ctrl+Shift+O (Windows). FDT will automatically add the missing import statements <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.

Launch Your SWF

<img src="/w/images/thumb/1/10/02_020x.jpg/500px-02_020x.jpg" _fck_mw_filename="02 020x.jpg" _fck_mw_location="center" _fck_mw_width="500" alt="02 020x.jpg" class="fck_mw_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 <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />. FDT will being the build process, as can been seen in the <a _fcknotitle="true" href="Console">Console</a> view <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />, and when complete, FDT will launch the <a _fcknotitle="true" href="External SWF Viewer">External SWF Viewer</a> that runs our .SWF with the red circle on the <a _fcknotitle="true" href="Stage">Stage</a> <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="Img preview.png" />.

With compilation successful, FDT will have created a .SWF in your <a _fcknotitle="true" href="Output Folder">Output Folder</a> bin by default and created a <a _fcknotitle="true" href="Launch Configuration">Launch Configuration</a> located within the folder .settings>launch <img src="/w/images/c/c3/Img_preview.png" _fck_mw_filename="Img preview.png" alt="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 <a _fcknotitle="true" href="Launch Configuration Tutorial">Launch Configuration Tutorial</a> for more info on that.

FAQ

  • Q: How Do I change .SWF settings like background color or size?
  • A: Check out the <a _fcknotitle="true" href="Launch Configuration Tutorial">Launch Configuration Tutorial</a> 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 <a _fcknotitle="true" href="Launch Configuration Tutorial">Launch Configuration Tutorial</a> 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 <a _fcknotitle="true" href="Run Menu">Run Menu</a>, 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 <a _fcknotitle="true" href="Launch Configurations">Launch Configurations</a> 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 <a _fcknotitle="true" href="Launch Configuration Tutorial">Launch Configuration Tutorial</a> tutorial.
Get FDT5