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

Introduction:

<div style="padding:15px; background-color:#EEEEEE; border:1px solid #C3C3C3; padding-top:0px">
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!</div>

Requirements:

<div style="padding:15px; background-color:#EEEEEE; border:1px solid #C3C3C3; padding-top:0px">
Java 1.6+ (Download)
Microsoft.NET 2.0 Runtime (Download)
* Flash Player 9 Debugger (Download)
* Flex SDK 3.0 (Download)
<br><sub>* Included in Tutorial Files</sub>
</div>

Instructions:

<div style="padding:15px; background-color:#EEEEEE; border:1px solid #C3C3C3; padding-top:0px">
<div style="padding:15px; background-color:#FFFFFF; border:1px solid #C3C3C3; padding-top:0px">
Download Tutorial Files
</div><div style="padding:15px; background-color:#FFFFFF; border:1px solid #C3C3C3; padding-top:0px">
Watch Video Tutorial
</div>
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
</div>

Explanation:

<div style="padding:15px; background-color:#EEEEEE; border:1px solid #C3C3C3; padding-top:0px">
<div style="padding:15px; background-color:#FFFFFF; border:1px solid #DDDDDD; padding-top:0px">

Sample Project Notes:

<div style="padding:15px; background-color:#F3F3F3; border:1px solid #CCCCCC; padding-top:0px">
<div style="padding:15px; background-color:#FFFFFF; border:1px solid #CCCCCC; padding-top:0px">
The example included will teach you three basic things: creating custom objects (SampleSquare), embedding and rending typography, and basic animation sequence with TweenLite.
</div>

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
}

<div style="padding:15px; background-color:#F3F3F3; border:1px solid #CCCCCC; padding-top:0px">

Directory Structure:

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

Whats Next?

<div style="padding:15px; background-color:#F4F4F4; border:1px solid #CCCCCC; padding-top:0px">
Next: Learn how to get started with AS3 Multitouch and Flash Develop: http://amitsarangi.wordpress.com/2009/09/23/getting-started-with-multitouch-actionscript-3-0-programming-in-flashdevelop/
</div>

Related Forum Posts

<div style="padding:15px; background-color:#F4F4F4; border:1px solid #CCCCCC; padding-top:0px">
Getting Started with TUIO
Actionscript 3.0 Examples
Actionscript 3.0 Libraries
</div>

</div>
</div>

<div class="attachTitle">Related Links</div><div class="attachBody"><div class="itempad">Flash Develop Homepage</div></div>

 Signature 

~

Profile
 
 
Posted: 21 April 2008 07:17 AM   [ Ignore ]   [ # 1 ]
Avatar
RankRank
Joined  2008-01-28
Total Posts:  124
Member

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

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

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 ]
Avatar
RankRank
Joined  2007-04-03
Total Posts:  241
Moderator

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

Image Attachments
mouseclickpoint.png00.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
 
 
Posted: 08 September 2008 02:11 AM   [ Ignore ]   [ # 4 ]
Rank
Joined  2008-07-02
Total Posts:  11
New Member

Hi, I’m trying out this tutorial and needed some help. The example ran fine by itself without any modification. It is only when I uncomment this line in the main() fruntion

// n_square.addEventListener(TouchEvent.CLICK, rotateObj);

I’ve downloaded the Touchlib flash library and imported it into the project. It compiled fine but just does not respond to my FTIR. I had started OSC and FLOSC fine.

my FTIR is running fine with Touchlib’s flash demo.

What am I missing here?

Profile
 
 
Posted: 16 October 2008 05:16 PM   [ Ignore ]   [ # 5 ]
Rank
Joined  2008-10-16
Total Posts:  6
New Member

Kennny i have the same problem, the blobs are not recognized in this program, in demos runs perfectly, i have tried with the simulator and the MT mini and nothing, can anybody help us?

Profile
 
 
Posted: 18 October 2008 10:22 AM   [ Ignore ]   [ # 6 ]
Rank
Joined  2008-08-25
Total Posts:  39
New Member

hey, i’m a design-student, so i already have the educational version of flash cs3. is there any sense in still using FlashDevelop? I guess it’s faster.

Profile
 
 
Posted: 18 October 2008 11:30 AM   [ Ignore ]   [ # 7 ]
Avatar
RankRank
Joined  2007-08-19
Total Posts:  212
Member

Thanks Nuiman.. 

Just what i was lookin for !!
you rock !

 Signature 

"And crawling on the planets face. Some insects called the human race.
Lost in time, And lost in space and meaning… “

Profile
 
 
Posted: 18 October 2008 01:13 PM   [ Ignore ]   [ # 8 ]
Avatar
RankRankRankRank
Joined  2008-06-09
Total Posts:  905
Moderator

Kenny and Angel,
I think you need to have your program connect to TUIO. In the wiki, there is an article on building your first application in AS3, and I think you need these lines (at least):

//--------connect to TUIO-----------------
TUIO.init(this,’localhost’,3000,’’,true);
trace("MyTouchApp Initialized");
//----------------------------------------

Link to pg: http://wiki.nuigroup.com/Building_Your_First_Multi-Touch_Application_in_Flash

Hope this helps
rbedi100

 Signature 

My Multi Touch Blog
Join us on NUI Chat !
Read Multi-Touch Technologies Book!

Profile
 
 
Posted: 18 October 2008 11:02 PM   [ Ignore ]   [ # 9 ]
Rank
Joined  2008-10-04
Total Posts:  41
New Member

Hi!  Thanks for this tutorial.  I’m currently trying to learn AS3, but if this would be easier, why not?  I’ve been trying to figure out how the dragging operations work....  I hope this would be the answer.  Thanks.

Profile
 
 
Posted: 19 October 2008 03:09 PM   [ Ignore ]   [ # 10 ]
Rank
Joined  2008-10-16
Total Posts:  6
New Member

thanks rbedi, you have helped me a lot.

Profile
 
 
Posted: 23 September 2009 04:51 AM   [ Ignore ]   [ # 11 ]
RankRankRankRank
Joined  2009-08-21
Total Posts:  553
Elite

Hello people
The tutorial is very nice to start with FlashDevelop. But as i am a newbie I was not able to fgure out how to get started with touchlib’s library using FlashDevelop . I had problems like TUIO.init not working , TouchEvent class not found etc etc .So i gathered some informations from different places in the forum and compiled ait to post a tutorual on how to get started with touchlib and Flash Develop . It can be found here

Hope it helps people.Suggestions and Question expected smile . Wanted to contribute something smile .
Thanks

 Signature 

~~Amit~~

Blog - Twitter - Facebook

Profile