Intro To haXe Development With FDT
From FDT Documentation
Line 9: | Line 9: | ||
[[Image:Download soruce files.png|center|Download soruce files.png]] | [[Image:Download soruce files.png|center|Download soruce files.png]] | ||
- | = <center>Installation</center> = | + | = <center>Installation</center> = |
To get started with haXe, you'll need to download a few extra add-ons. | To get started with haXe, you'll need to download a few extra add-ons. | ||
- | == <center>Download haXe</center> == | + | == <center>Download haXe</center> == |
Visit haXe's download page [[Image:Img preview.png|Img preview.png]], and download one of the automatic installers for your platform. For this example, we'll be installing haXe for OSX. | Visit haXe's download page [[Image:Img preview.png|Img preview.png]], and download one of the automatic installers for your platform. For this example, we'll be installing haXe for OSX. | ||
Line 23: | Line 23: | ||
<br> If installed correctly, the console should print out haXe info: | <br> If installed correctly, the console should print out haXe info: | ||
<div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="bash source-bash"><pre class="de1">OSXs-MacBook:~ OSX$ haxe | <div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="bash source-bash"><pre class="de1">OSXs-MacBook:~ OSX$ haxe | ||
- | haXe Compiler | + | haXe Compiler 2.07 - (c)2005-2011 Motion-Twin |
- | + | Usage : haxe -main <class> [-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 | ||
+ | -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 | ||
- | == <center>Install FDT's haXe Plugin</center> == | + | </pre></div></div> |
+ | If it doesn't - try restarting your computer or reinstalling it again. | ||
+ | |||
+ | == <center>Install FDT's haXe Plugin</center> == | ||
*Start up FDT 4 and select ''Help>Install new Software'' [[Image:Img preview.png|Img preview.png]]. | *Start up FDT 4 and select ''Help>Install new Software'' [[Image:Img preview.png|Img preview.png]]. | ||
Line 32: | Line 51: | ||
*Select "FDT haXe Plugin" from the plugin list [[Image:Img preview.png|Img preview.png]], hit ''Finish'' and follow the final installation steps. | *Select "FDT haXe Plugin" from the plugin list [[Image:Img preview.png|Img preview.png]], hit ''Finish'' and follow the final installation steps. | ||
- | = <center>Setting up the haXe Plugin</center> = | + | = <center>Setting up the haXe Plugin</center> = |
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'' [[Image:Img preview.png|Img preview.png]] and input the installation directory of haXe. If you're not sure where haXe is installed, the installation window will clue you in [[Image:Img preview.png|Img preview.png]]. 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'' [[Image:Img preview.png|Img preview.png]]. | 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'' [[Image:Img preview.png|Img preview.png]] and input the installation directory of haXe. If you're not sure where haXe is installed, the installation window will clue you in [[Image:Img preview.png|Img preview.png]]. 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'' [[Image:Img preview.png|Img preview.png]]. | ||
- | = <center>Create Your First haXe Project</center> = | + | = <center>Create Your First haXe Project</center> = |
All haXe projects begin with a Flash Project base and then are converted to a haXe project. Begin by creating an ''Empty AS3 Project'' [[Image:Img preview.png|Img preview.png]] and then create a new HaXe class by right clicking on ''src'' and choosing ''Other'' [[Image:Img preview.png|Img preview.png]]. When the wizard pops up choose HaXe Class [[Image:Img preview.png|Img preview.png]] and give the class the name ''Main'' and hit ''Finish'' [[Image:Img preview.png|Img preview.png]]. | All haXe projects begin with a Flash Project base and then are converted to a haXe project. Begin by creating an ''Empty AS3 Project'' [[Image:Img preview.png|Img preview.png]] and then create a new HaXe class by right clicking on ''src'' and choosing ''Other'' [[Image:Img preview.png|Img preview.png]]. When the wizard pops up choose HaXe Class [[Image:Img preview.png|Img preview.png]] and give the class the name ''Main'' and hit ''Finish'' [[Image:Img preview.png|Img preview.png]]. | ||
- | == <center>Convert Project To A haXe Project</center> == | + | == <center>Convert Project To A haXe Project</center> == |
With your first class created, right click on the project and select ''Add HaXe Project Nature'' [[Image:Img preview.png|Img preview.png]]. When this happens, FDT will ask you to input some project variables. We already have configured our ''HaXe SDK Location'' so just hit ''Next'' [[Image:Img preview.png|Img preview.png]]. | With your first class created, right click on the project and select ''Add HaXe Project Nature'' [[Image:Img preview.png|Img preview.png]]. When this happens, FDT will ask you to input some project variables. We already have configured our ''HaXe SDK Location'' so just hit ''Next'' [[Image:Img preview.png|Img preview.png]]. | ||
Line 46: | Line 65: | ||
Let's leave the haXe configuration file to the default location but modify the ''Output Path'' to ''bin/Main.swf'' [[Image:Img preview.png|Img preview.png]]. 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 [[Image:Img preview.png|Img preview.png]]. We can also see that FDT has begun to parse our project for syntax errors [[Image:Img preview.png|Img preview.png]]. | Let's leave the haXe configuration file to the default location but modify the ''Output Path'' to ''bin/Main.swf'' [[Image:Img preview.png|Img preview.png]]. 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 [[Image:Img preview.png|Img preview.png]]. We can also see that FDT has begun to parse our project for syntax errors [[Image:Img preview.png|Img preview.png]]. | ||
- | == <center>Adjust Compiler Settings</center> == | + | == <center>Adjust Compiler Settings</center> == |
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 [[Image:Img preview.png|Img preview.png]] and then add this argument to the bottom: | 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 [[Image:Img preview.png|Img preview.png]] and then add this argument to the bottom: | ||
- | <div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="bash source-bash"><pre class="de1"> | + | <div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="bash source-bash"><pre class="de1"><span class="re5">-swf-header</span> <span class="nu0">550</span>:<span class="nu0">400</span>:<span class="nu0">40</span>:FFFFFFF</pre></div></div> |
Here we are setting the ''Width'' and ''Height'' properties to 500 x 400 [[Image:Img preview.png|Img preview.png]]. | Here we are setting the ''Width'' and ''Height'' properties to 500 x 400 [[Image:Img preview.png|Img preview.png]]. | ||
= <center>Compiling and Viewing your .SWF</center> = | = <center>Compiling and Viewing your .SWF</center> = | ||
- | == <center>Adding haXe Code</center> == | + | == <center>Adding haXe Code</center> == |
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 [[Image:Img preview.png|Img preview.png]]. Or type in the the code yourself to begin exploring the syntax auto completion FDT provides [[Image:Img preview.png|Img preview.png]]. | 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 [[Image:Img preview.png|Img preview.png]]. Or type in the the code yourself to begin exploring the syntax auto completion FDT provides [[Image:Img preview.png|Img preview.png]]. | ||
Line 60: | Line 79: | ||
<br> | <br> | ||
<div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="actionscript source-actionscript"><pre class="de1">package ; | <div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="actionscript source-actionscript"><pre class="de1">package ; | ||
- | + | <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>; <span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">Event</span>; <span class="kw2">class</span> Main<span class="br0">{</span> <span class="kw3">static</span> <span class="kw2">var</span> view:Sprite; <span class="kw3">static</span> <span class="kw2">var</span> x: Float = <span class="nu0">0</span>; <span class="kw3">static</span> <span class="kw2">var</span> y: Float = <span class="nu0">200</span>; <span class="kw3">static</span> <span class="kw2">var</span> speed :Float = <span class="nu0">20</span>; <span class="kw3">static</span> <span class="kw2">var</span> max_x : Float = <span class="nu0">550</span>; <span class="kw3">static</span> <span class="kw2">function</span> main<span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw2">new</span> Main<span class="br0">(</span><span class="br0">)</span>; <span class="br0">}</span> <span class="kw2">function</span> <span class="kw2">new</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> view = <span class="kw2">new</span> Sprite<span class="br0">(</span><span class="br0">)</span>; flash.<span class="me1">Lib</span>.<span class="me1">current</span>.<span class="me1">addChild</span> <span class="br0">(</span>view<span class="br0">)</span>; flash.<span class="me1">Lib</span>.<span class="me1">current</span>.<span class="kw3">stage</span>.<span class="me1">addEventListener</span><span class="br0">(</span>Event.<span class="me1">ENTER_FRAME</span>, update_view<span class="br0">)</span>; <span class="br0">}</span> <span class="kw2">function</span> update_view <span class="br0">(</span><span class="kw3">e</span>: <span class="kw3">Dynamic</span><span class="br0">)</span><span class="br0">{</span> view.<span class="me1">graphics</span>.<span class="kw3">clear</span><span class="br0">(</span><span class="br0">)</span>; view.<span class="me1">graphics</span>.<span class="kw3">beginFill</span><span class="br0">(</span>0xff0000, <span class="nu0">1</span><span class="br0">)</span>; view.<span class="me1">graphics</span>.<span class="me1">drawCircle</span><span class="br0">(</span>x, y, <span class="nu0">50</span><span class="br0">)</span>; <span class="kw1">if</span><span class="br0">(</span>is_invalid_x<span class="br0">(</span><span class="br0">)</span><span class="br0">)</span> speed = speed <span class="sy0">*</span> -<span class="nu0">1</span>; x+= speed; <span class="br0">}</span> <span class="kw2">function</span> is_invalid_x<span class="br0">(</span><span class="br0">)</span> : Bool <span class="br0">{</span> <span class="kw1">return</span> x <span class="sy0">></span> max_x <span class="sy0">||</span> x <span class="sy0"><</span> <span class="nu0">0</span>; <span class="br0">}</span> <span class="br0">}</span></pre></div></div> | |
- | == <center>Compiling haXe</center> == | + | == <center>Compiling haXe</center> == |
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 [[Image:Img preview.png|Img preview.png]]. If it doesn't appear, try refreshing your project [[Image:Img preview.png|Img preview.png]]. | 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 [[Image:Img preview.png|Img preview.png]]. If it doesn't appear, try refreshing your project [[Image:Img preview.png|Img preview.png]]. | ||
- | == <center>View Your SWF</center> == | + | == <center>View Your SWF</center> == |
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]]. | 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]]. | ||
Line 72: | Line 91: | ||
Next, copy the code below to have FDT launch the external .SWF viewer [[Image:Img preview.png|Img preview.png]]: | Next, copy the code below to have FDT launch the external .SWF viewer [[Image:Img preview.png|Img preview.png]]: | ||
- | <div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="xml source-xml"><pre class="de1"> | + | <div dir="ltr" class="mw-geshi" style="text-align: left;"><div class="xml source-xml"><pre class="de1"><span class="sc3"><span class="re1"><project<span class="re2">></span></span></span> <span class="sc3"><span class="re1"><target</span> <span class="re0">name</span>=<span class="st0">"view.swf"</span><span class="re2">></span></span> <span class="sc3"><span class="re1"><fdt.extSWFViewer.startSWF</span> <span class="re0">width</span>=<span class="st0">"550"</span> <span class="re0">height</span>=<span class="st0">"400"</span></span> <span class="sc3"> <span class="re0">file</span>=<span class="st0">"${basedir}/bin/Main.swf"</span><span class="re2">/></span></span> <span class="sc3"><span class="re1"></target<span class="re2">></span></span></span> <span class="sc3"><span class="re1"></project<span class="re2">></span></span></span></pre></div></div> |
<br> Then, drag your .XML file to the Ant view [[Image:Img preview.png|Img preview.png]] and double click the target to launch [[Image:Img preview.png|Img preview.png]]. You will then see a red ball moving back and forth on the screen. | <br> Then, drag your .XML file to the Ant view [[Image:Img preview.png|Img preview.png]] and double click the target to launch [[Image:Img preview.png|Img preview.png]]. You will then see a red ball moving back and forth on the screen. | ||
*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.'' | *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.'' | ||
- | = <center>Wrap Up</center> = | + | = <center>Wrap Up</center> = |
That's it, you've successfully set up your first FDT haXe Flash project! | That's it, you've successfully set up your first FDT haXe Flash project! |
Revision as of 11:18, 10 May 2011
Supported by Influxis
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 haXe's Introduciton.
Contents |
Source Files
Installation
To get started with haXe, you'll need to download a few extra add-ons.
Download haXe
Visit haXe's download page , and download one of the automatic installers for your platform. For this example, we'll be installing haXe for OSX.
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 .
When the installer is complete , confirm that the installation of haXe was successful by opening your console and executing the command haXe:
haxe
If installed correctly, the console should print out haXe info:
OSXs-MacBook:~ OSX$ haxe haXe Compiler 2.07 - (c)2005-2011 Motion-Twin Usage : haxe -main <class> [-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 -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
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 .
- Select the FDT Plugins Site update site (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 , 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 and input the installation directory of haXe. If you're not sure where haXe is installed, the installation window will clue you in . 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 .
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 and then create a new HaXe class by right clicking on src and choosing Other . When the wizard pops up choose HaXe Class and give the class the name Main and hit Finish .
Convert Project To A haXe Project
With your first class created, right click on the project and select Add HaXe Project Nature . When this happens, FDT will ask you to input some project variables. We already have configured our HaXe SDK Location so just hit Next .
Let's leave the haXe configuration file to the default location but modify the Output Path to bin/Main.swf . 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 . We can also see that FDT has begun to parse our project for syntax errors .
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 and then add this argument to the bottom:
<span class="re5">-swf-header</span> <span class="nu0">550</span>:<span class="nu0">400</span>:<span class="nu0">40</span>:FFFFFFF
Here we are setting the Width and Height properties to 500 x 400 .
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 . Or type in the the code yourself to begin exploring the syntax auto completion FDT provides .
package ; <span class="kw3">import</span> flash.<span class="me1">display</span>.<span class="me1">Sprite</span>; <span class="kw3">import</span> flash.<span class="me1">events</span>.<span class="me1">Event</span>; <span class="kw2">class</span> Main<span class="br0">{</span> <span class="kw3">static</span> <span class="kw2">var</span> view:Sprite; <span class="kw3">static</span> <span class="kw2">var</span> x: Float = <span class="nu0">0</span>; <span class="kw3">static</span> <span class="kw2">var</span> y: Float = <span class="nu0">200</span>; <span class="kw3">static</span> <span class="kw2">var</span> speed :Float = <span class="nu0">20</span>; <span class="kw3">static</span> <span class="kw2">var</span> max_x : Float = <span class="nu0">550</span>; <span class="kw3">static</span> <span class="kw2">function</span> main<span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw2">new</span> Main<span class="br0">(</span><span class="br0">)</span>; <span class="br0">}</span> <span class="kw2">function</span> <span class="kw2">new</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> view = <span class="kw2">new</span> Sprite<span class="br0">(</span><span class="br0">)</span>; flash.<span class="me1">Lib</span>.<span class="me1">current</span>.<span class="me1">addChild</span> <span class="br0">(</span>view<span class="br0">)</span>; flash.<span class="me1">Lib</span>.<span class="me1">current</span>.<span class="kw3">stage</span>.<span class="me1">addEventListener</span><span class="br0">(</span>Event.<span class="me1">ENTER_FRAME</span>, update_view<span class="br0">)</span>; <span class="br0">}</span> <span class="kw2">function</span> update_view <span class="br0">(</span><span class="kw3">e</span>: <span class="kw3">Dynamic</span><span class="br0">)</span><span class="br0">{</span> view.<span class="me1">graphics</span>.<span class="kw3">clear</span><span class="br0">(</span><span class="br0">)</span>; view.<span class="me1">graphics</span>.<span class="kw3">beginFill</span><span class="br0">(</span>0xff0000, <span class="nu0">1</span><span class="br0">)</span>; view.<span class="me1">graphics</span>.<span class="me1">drawCircle</span><span class="br0">(</span>x, y, <span class="nu0">50</span><span class="br0">)</span>; <span class="kw1">if</span><span class="br0">(</span>is_invalid_x<span class="br0">(</span><span class="br0">)</span><span class="br0">)</span> speed = speed <span class="sy0">*</span> -<span class="nu0">1</span>; x+= speed; <span class="br0">}</span> <span class="kw2">function</span> is_invalid_x<span class="br0">(</span><span class="br0">)</span> : Bool <span class="br0">{</span> <span class="kw1">return</span> x <span class="sy0">></span> max_x <span class="sy0">||</span> x <span class="sy0"><</span> <span class="nu0">0</span>; <span class="br0">}</span> <span class="br0">}</span>
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 . If it doesn't appear, try refreshing your project .
View Your SWF
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.
Create a new Ant script by beginning with a simple XML file by right clicking on the project and choosing new>other and then select an XML file to create and hit Finish. Give the script any name you like, this one is called view_swf.xml and hit Finish .
Next, copy the code below to have FDT launch the external .SWF viewer :
<span class="sc3"><span class="re1"><project<span class="re2">></span></span></span> <span class="sc3"><span class="re1"><target</span> <span class="re0">name</span>=<span class="st0">"view.swf"</span><span class="re2">></span></span> <span class="sc3"><span class="re1"><fdt.extSWFViewer.startSWF</span> <span class="re0">width</span>=<span class="st0">"550"</span> <span class="re0">height</span>=<span class="st0">"400"</span></span> <span class="sc3"> <span class="re0">file</span>=<span class="st0">"${basedir}/bin/Main.swf"</span><span class="re2">/></span></span> <span class="sc3"><span class="re1"></target<span class="re2">></span></span></span> <span class="sc3"><span class="re1"></project<span class="re2">></span></span></span>
Then, drag your .XML file to the Ant view and double click the target to launch . You will then see a red ball moving back and forth on the screen.
- 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.
Wrap Up
That's it, you've successfully set up your first FDT haXe Flash project!
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 Jira, 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.
On the behalf of the FDT Team and Influxis, we hope you are as excited as we are and enjoy the FDT haXe plugin.