Getting Started with Flash Develop and AS3
Posted: 20 April 2008 07:02 PM   [ Ignore ]
Administrator
Avatar
RankRankRankRank
Total Posts:  435
Joined  2006-11-09

Introduction:


I wanted to make a really easy to follow tutorial on how to get started using the Flash Develop and Actionscript 3.0. FlashDevelop, is a .NET open source editor for Flash and web developers. I personally have recently switched to FD and am very impressed by the results, much faster workflow and project management. So this tutorial will to do things: quickly walk you through a typical FD installation and then how to compile your first application.

Please note: Flash Develop is WINDOWS ONLY!

Requirements:


Java 1.6+ (Download)
Microsoft.NET 2.0 Runtime (Download)
* Flash Player 9 Debugger (Download)
* Flex SDK 3.0 (Download)

* Included in Tutorial Files

Instructions:



1) Download the tutorial files and extract to your desktop.
2) Run the Flash Develop (FD) setup (Installs\FlashDevelop-3.0.0...)
3) Go through FD setup choosing all default values.
4) After FD installs COPY the Flex_SDK folder (Installs\Flex_SDK) to (C:\Program Files\Flash Develop)
5) Launch FD and it will load Start Screen
6) Select Tools > Program Settings
7) Select AS3Context on left THEN Flex SDK Location (4th down) Click and browse to your FD install folder (C:\Program Files\Flash Develop) and Choose Flex_SDK folder. [See Attached Image]
8) Select FlashViewer on left THEN External Player Path Click and browse to your Flex_SDK folder (C:\Program Files\Flash Develop\Flex_SDK) and select FlashPlayer.exe
9) Click Close and then Close FD
10) Find and Open SampleProject.as3proj (SampleProject\src)
11) After FD is open click the blue arrow on top (or hit F5) to compile the SampleProject
12) Start learning AS3 and enjoy FD

Explanation:




Sample Project Notes:



The example included will teach you three basic things: creating custom objects (SampleSquare), embedding and rending typography, and basic animation sequence with TweenLite.

package
{
    
// General Imports...
    
import flash.display.Sprite;
    
import flash.events.MouseEvent;    
    
import flash.text.TextFormat;
    
import flash.text.TextField;
    
import flash.text.TextFieldAutoSize;
    
    
// Internal Library Imports...
    
import com.sample.SampleSquare;
    
    
// External Library Imports... (you did not write)
    
import gs.TweenLite;
    
    
// Begin Class
    
public class Main extends Sprite
    {        
        
// Embed Font
        
[Embed(source "../deploy/Arial.ttf"fontFamily "n_font")]  
        private 
var n_font:Class;        
        
private var n_format:TextFormat = new TextFormat();
        
private var n_text:TextField = new TextField();    
        
private var n_square:SampleSquare = new SampleSquare();    
    
    
// Constructor Method - Adds a Custom Square (SampleSquare)
    
public function Main()
    
{        
        this
.addChildn_square );
        
n_square.stage.stageWidth 2;
        
n_square.stage.stageHeight 2;
        
n_square.addEventListener(MouseEvent.CLICKrotateObj);    
        
// n_square.addEventListener(TouchEvent.CLICK, rotateObj);
        
drawText();
    
}
    
    
// Adds Text to the Square
    
private function drawText():void
    {
            n_format
.font"n_font";
           
// Not Shown...
    
}    
    
    
// Tween Square with External Library (gs.TweenLite)
    
private function rotateObj(e:MouseEvent):void 
    {
        TweenLite
.to(n_square1{rotation:360,tint:Math.random()*0xFFFFFF});
    
}
  }
// End Class
}


Directory Structure:

  • src - This is where your main source goes for your project.
  • int - This is where your libraries are stored (a library you wrote).
  • ext - This is where external libraries are stored (a library you DID NOT write).
  • deploy - This is where all assets for a project go such as fonts, images, or video files.



Whats Next?


The next tutorial posted will teach you how to get Touchlib (mulitouch) working with Flash…

Related Forum Posts


Related Links

 Signature 

~

Profile
 
 
Posted: 21 April 2008 07:17 AM   [ Ignore ]   [ # 1 ]
Elite
Avatar
RankRankRankRank
Total Posts:  120
Joined  2008-01-28

THANK YOU !! smile
this is EXACTLY what i was searching for .....

 Signature 

..’m not the best..but ‘m not like the rest....

Profile
 
 
Posted: 23 April 2008 12:41 AM   [ Ignore ]   [ # 2 ]
New Member
Avatar
Rank
Total Posts:  26
Joined  2008-02-25

Thanks, nuiman.  I’ve done a few fairly large projects using Eclipse and the flex SDK. It was frustrating not having autocomplete and debugging built into the IDE, but it’s a fair trade considering it’s saving you about $250 USD off the cost of flex builder.  One thing that always bothered me though was the inability to quickly draw vector artwork and associate symbols with classes like you can in flash CS3.  Using the graphics API for every bit of UI in your interface is incredibly tedious (just making a shape with a gradient fill and some layer effects can easily top 40 lines of code).  Do you know any workaround for this?  Is there free software that can export vector artwork as swf, or create swc components without compiling them in flash?

Heh, I did some googling and found that flex supports SVG embedding.  Still doesn’t solve the problem of custom components, but it’s a start.

Parker

Profile
 
 
Posted: 19 May 2008 06:40 AM   [ Ignore ]   [ # 3 ]
Administrator
Avatar
RankRankRankRank
Total Posts:  168
Joined  2007-04-03

It seems that FlashDevelop is much nicer than using Adobe Flash CS3.
However due to the lack of a REAL debugger I never bother to use it (I don’t like to put zillion lines of TRACE() in my sourcecode, I just want to set breakpoints and step).

Fortunately someone else made a small plugin called fdbPlugin:
http://www.flashdevelop.org/community/viewtopic.php?t=2958&start=0

Which is a flash as3 debugger supporting breakpoints.

1. Install instructions
Download FlashDevelop 3.0.0 Beta7 and install it as mentioned in the first post:
http://www.flashdevelop.org/community/viewtopic.php?t=2893

Next, download (fdbPlugin0.1.1.0.zip):
http://www.flashdevelop.org/community/viewtopic.php?p=13303#13303

Unzip it to a temp folder but don’t follow the instructions in the readme.txt

Locate your FD plugins directory in your user files:
From FD main menu: Tools > Application Files… (it will open up a new explorer dialog)

Copy all the files Aga.Controls.dll and fdbPlugin.dll to the plugin directory.
Do not use FlashDevelop.exe from the zipfile (for some odd reason the exe seems to be corrupted here).

2. Using the debugger

Start FD.
It should show 2 new dialogs, which you can drag into the main GUI. To set breakpoints do a shiftclick on the left.
To start a debug session press the new play button (if you check the gui, you will see a few new icons, play,pause,stop,fastforward etc)
mouseclickpoint.PNG

When the program hits a breakpoint you can hoover on the variable to view its contents/value. (Just like in visual studio)
00.png

 Signature 

My multitouch blog: http://www.multigesture.net
Howto: Compile touchlib on windows XP/Vista
Howto: Compile touchlib on Ubuntu Linux
Downloads: Touchlib SVN builds

Profile