Hi guys,
At the moment I'm looking to test pure actionscript 3.0 code, because one, cs4 takes ages to load and two, flash develop can be used anywhere.
I've heard that flash develop is a free to use but I wanted to know how to install it.
Any help would be great.
OK.
At the moment, Flashdevelop is only available for windows. (I believe there are mac and *nix ports in the pipeline...Not sure how well it runs on wine.). So Windows XP or Vista is the main prerequisite. (should also work on windows 7 too!)
The other main prerequisites are the Java 1.6 runtime and the flash player 9 active X runtime control (I think I use the debug version!). I think you might also need one of the .NET runtimes (2 or 3 I expect!). All of these are free downloads! If you're running vista or 7 then the appropriate .NET runtime will most likely be in place already.
Once you've got the pre-requisites installed, you'll also need the Flex 3 SDK...If you have Flash CS3 or CS4 installed, then the SDK is already installed somewhere (can't remember offhand what the default path is).
So if you have CS3/CS4, you need to locate the SDK and make a note of the path!
If you don't have CS3/CS4, or if you can't find the SDK, you can download the Flex3 SDK for free from Adobe. Once you've downloaded the SDK, unzip it somewhere on your hard-drive and make a note of it's location!
Next download and install the latest version of FlashDevelop from flashdevelop.org.
The installer is pretty straightforward...set your preferred installation options and away you go!
Once it's installed, fire it up and away you go!
Copy and paste the following code into a new file and save it as Test.as:
/**
* ...
* @author Jason Trunks
* @version 0.1
*/
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
[SWF(backgroundColor="0xffffff", width="800", height="600", frameRate="25")]
public class Test extends Sprite
{
private var ball:Sprite;
private var vx:Number;
private var vy:Number;
private const radius:Number=30;
public function Test()
{
init();
}
private function init():void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
ball = new Sprite();
ball.graphics.beginFill(0xff0000);
ball.graphics.drawCircle(0,0,radius);
ball.graphics.endFill();
ball.x=stage.stageWidth/2;
ball.y=stage.stageHeight/2;
vx=Math.random()*20-10;
vy=Math.random()*20-10;
addChild(ball);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void
{
ball.x+=vx;
ball.y+=vy;
var left:Number = 0;
var right:Number = stage.stageWidth;
var top:Number = 0;
var bottom:Number=stage.stageHeight;
if(ball.x+radius>right)
{
ball.x=right-radius;
vx*=-1;
}
else if(ball.x-radius<left)
{
ball.x=left+radius;
vx*=-1;
}
if(ball.y+radius > bottom)
{
ball.y=bottom-radius;
vy*=-1;
}
else if(ball.y-radius < top)
{
ball.y=top + radius;
vy*=-1;
}
}
}
}Next hit Ctrl+F8 to compile the file into a .swf.
At some point you should get a dialog that will prompt you to enter the path to the Flex3 SDK. Next either manually enter the path to the flex SDK, or navigate there and hit OK. That done, flashdevelop now knows where to find the SDK and will compile the posted code into a .swf.
With any luck you should end up getting a .swf with a red ball bouncing around the screen...
And that's it, you're now ready to use flashdevelop!
Ctrl+F8 will allow you to compile the current source file into a .swf.
(also accessed using 'tools->flash tools->build current file')
Alternatively you can use 'file->new project' and use the project wizard to select one of the default projects and use the build/test project functionality of the IDE...This is very similar to creating a project in visual studio or netbeans, there are templates for several different types of flash project.
The workflow in flashdevelop is a little different to the workflow you're used to in the Flash IDE's, but there are some example projects that you can download from the flashdevelop site which will show you the basics.
BTW: If you're on *nix, there's currently no *nix version of FlashDevelop, but it is still possible to use the flex SDK to compile .swfs as the SDK contains binary tools for windows, Mac and *nix.
Simply run mxmlc and pass it the file you want to compile as a parameter.
Either do it from the command line/shell, or create a shell script to do it!
On my *nix box I've got Test.as saved on my dektop and the Flex SDK is in my Home directory...So to compile Test.as into a swf I'd use the following command:
/home/ jason/flex3sdk/bin/mxmlc /home/jason/Desktop/Test.asFlash development on *nix is a bit more of a pain because there are no real IDE's available at the moment, but it's still possible. Just create the classes you need to complete your project, then use a main class to pull it all together. Finally you compile the .as file for the main class with mxmlc and thus a .swf is born. The output from mxmlc is pretty verbose too, so you'll soon track down any errors in your code.
If you have any other questions, bung 'em my way, I'd be happy to help!
Cheers for now,
Jas.
Great Explanation Jason,
For download:
http://www.flashdevelop.org/community/viewtopic.php?f=11&t=5456
Hi,
Just downloaded the stuff I need but I can't get it to do a simple trace statement and see the output on the screen?
for example...
trace("hello");
If you could give me all the steps one by one.
Oh and how do you point it to the flash.exe so I don't have to create a html file with the .swf embedded in it to actually see it in action?
I hope you installed everything, please follow the below steps to get the trace.
1. Open flashdevelop, Goto project ->new project
2. For example give name of the project as "Testing", select the location to store the project. select the "create directory for project", Give Ok (It will create the project within the folder named Testing) (see one.jpg)
3. Ensure the project manager is visible (view -> ProjectManager)
4. RightClick on dot from project manager and create a new class file (see two.jpg)
5. Save the file after completion of the class to trace the word "hello" (see three.jpg and four.jpg)
6. Create a new fla file from flashIDE and save it in the same "Testing" folder
7. Dont forget to give the "nameofclass" in the class (see five.jpg)
8. Run testmovie from flashdevelop (see six.jpg & seven.jpg)
I have to mention onething Iamthwee, am also new to flashdevelop
Thanks for the reply, but the purpose of using Flash develop was to get away from using the bloated CS4 suite and its legal restrictions per machine.
Anyway I found a work around. Seeing as I just want to test pure actionscript code for my xml classes I am dumping all my output to a text field.
Here are my steps.
1) Create a new actionscript file in flash develop called Test.as
2) Paste the code in.
Test.as
package
{
import flash.display.FrameLabel;
import flash.display.MovieClip;
import flash.events.FocusEvent;
import flash.text.Font;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.text.AntiAliasType;
public class Test extends MovieClip
{
public function Test()
{
var myText:TextField;
myText = new TextField;
myText.autoSize;
addChild ( myText );
myText.width = 1000;
myText.height = 1000;
myText.mouseWheelEnabled = true;
myText.multiline = true;
myText.appendText("Hello world");
}
}
}ctrl + F8 to build...
This will generate a .swf file in the folder "FlashDevelop"
Then I create a html file with the following code
Test.html
<object width="500" height="500">
<param name="movie" value="Test.swf">
<embed src="Test.swf" width="500" height="500">
</embed>
</object>in the flash develop folder. And I just use this html to preview my actionscript 3.0 code.
Sorry I'm late to the conversation...Not been about today!
I'm on my linux box again, so I haven't got a copy of Flashdevelop open in front of me...But if memory serves, there is trace functionality built into Flashdevelop. It always used to be an external plugin, but I'm pretty certain it's finally been integrated into the IDE now.
Unfortunately, I think the trace functionality only works if the actionscript file is part of a project....It doesn't seem to work if you're building/testing a single standalone AS file that isn't part of a project.
Theres no need to create any .fla's or .swfs with CS4....No need for any of that at all..Although Flashdevelop does integrate really well with the Flash IDE's, so you don't have to completely abandon the Flash IDE if you don't want to. You can get the best of both worlds! Another advantage of having the Flash IDE installed (especially if it's the professional) is you can use the more advanced Flash components in your Flashdevelop projects! Anyway..going off topic there!
Where were we? Oh yeah!
If you want to use the trace functionality, all you need to do is create a new AS3 project using one of Flashdevelops built in AS3 templates...I'd pick one of the more minimal AS3 templates...(without seeing it in front of me I can't think exactly which template it is, but you should be able to work it out!)
Then start adding your classes to your project, bung in some trace statements wherever you need 'em and then build/test the project in debug mode....When your .swf has built and starts running, anything output via trace will appear in the output panel of the FlashDevelop IDE.
The flashdevelop project files don't involve any bloat or nastiness...they're only a few k. Developing your .swfs using the projects helps to keep your code more organised and stops more complicated projects from getting too messy...But you don't have to use them....Unless you want to use the trace functionality it would seem! heh heh!
I'll try to fire up the ol' xp machine at some point and blat out a couple of example projects...Or perhaps I'll see if I can find/modify some of the example projects I downloaded back when I started using flashdevelop!
Cheers for now,
Jas.
Thanks Jas. Yeah, ideally I don't want to use CS4 at all because of the bloat and obviously I can only use it on the one PC I have it installed on with that license.
Now when I build the file ctrl + F8 I get a swf file generated in the flashdevelop folder. But I can only see the output if I create a html file.
So that must mean I'm not setting the path to the flash debug exe. So the question is how do I do that, so I don't have to go about using the convoluted way of creating a textField as a makeshift trace function?
Other than that, I'm really liking how quickly you can compile and test PURE actionscript 3.0 code.
I can't tell you how painful it was compiling a big project in CS4, sometimes it would take a whole minute to compile. Now I can just separate out my xml functions and build/compile them in Flash Develop -which is much more faster.
Thanks for the heads up on Flash develop!
Thanks Iamthwee, I executed your script and got the solution that you had.
Settings:
1. Go to -> Tools -> program settings (F10)
2. From left select AS3Context and Right select Flex SDK Location (Give proper location of your flexsdk)
3. From left select FlashViewer and Right select External Player Path (Give proper location of your player)
By these settings I got the swf directly executed from the player when used ctrl+f8. But can't able to trace. Needed help from Jason.
Yup you got it Raja, that's how you set up the path to the SDK and the path to the external flash player!
I've got my Flashdevelop set up to use the flashplayer10 debug executable!
Note: in the FlashViewer section of the program settings, ensure that the 'Movie Display Style' property is set to External!
'Popup' and 'Document' use the default player (fp 9 debug ActiveX)
In order to demonstrate tracing in flashdevelop, I've knocked a little example project together. (see attached files.)
To actually create the project, I've just gone to 'project->new project' in the menu and then in the dialog I've selected the 'AS3 Project' template and called the project Tracing.
Flashdevelop has now created a few directories (bin, lib and src) and files. Briefly exploring the generated files and folders:
The bin folder is where the final .swf will end up being built.
Initially the bin folder contains a html file which is set up to embed the final .swf using swfobject.js (found in the js sub-folder). It also includes expressinstall.swf, which is also used by the html page, in case people viewing the page have an older version of flash...in which case, it can download and install the correct version.
The lib folder is where you can put any assets for your project (Bitmaps fonts etc.). It should be noted that simply adding items to the lib folder does not make them instantly accessible to the project. You first have to right-click them and then select 'Add to library'. Once you've added items to the library, you can drag them out of the library and drop them onto a blank line in your code and Flashdevelop will automatically generate code to embed the asset!
And finally the src folder is where your actionscript files will go.
Initially for the 'AS3 project' template there will be one file called main.as. Main.as is the main application class. So this is the class that holds everything together!
Main.as initially contains the Main class constructor and a function called init.
The constructor code is interesting...
if the 'stage' object has already been created and initialised, the init function is called.
Otherwise an event listener is set up to listen for the ADDED_TO_STAGE event. The listener will call the init function..
Never seen that code in the blank AS3 project before..This is new to me, I've only just upgraded my flashdevelop to the latest version, I was running the beta9 version of FD...hmm..Pretty nifty though!
So the init function is the entry point, this is where you initialise your application.
OK, so now we're ready to enter some code...
All I'm going to do here is write a bit of code to output some trace statements...But before that, I'm just gonna set the size of the final .swf!
In the menu, select 'project->properties' and change the dimensions of the .swf to 150X150 (we don't need anything too big seeing as we're not gonna be putting anything on the stage!)
OK that's that! Now we'll enter some code.
This is what I've put into main.as:
package
{
import flash.display.Sprite;
import flash.events.Event;
/**
* ...
* @author Jason Trunks
*/
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
// entry point
removeEventListener(Event.ADDED_TO_STAGE, init);
trace("Inside init function...");
trace("Calling doSomething function..");
doSomething();
trace("Back inside init function...");
}
private function doSomething():void
{
trace("Inside doSomething function..");
for (var i:Number = 0; i < 10; ++i)
{
trace("value of i is: " + String(i));
}
}
}
}All we've done there is add a few trace statements to the init function and added another function called doSomething, which just runs a quick for loop and traces the value of the loops index (variable 'i'!).
Next we ensure that the project is in debug mode by checking the dropdown box in the main toolbar (it should be by defalt!)....Looking at that....Yup, that's definitely in debug mode!
Next click on the blue triangular icon that looks like the play button on your VCR/Media player/Walkman/Mp3 player/iPod, this will build our .swf and open it in the external flash player.
Surely enough, flash player pops up and displays a blank white movieclip...Lovely jubbly!
"OK, so where are the Trace statements?" I hear you cry...Well, if you mouse over the 'output' tab in the bar at the bottom of the screen you should see some trace statements. {Ta daaaaa! heh heh!} (see also the attached .png!)
If you can't see the 'output' tab, select 'view->output panel' from the main menu and the output tab should appear.
If you need to keep the output panel open so you can see your traces at all times, you can pin it in place (rather like visual studio).
Additional notes on tracing...
As mentioned, tracing only works when you are in debug mode and only when your file is part of the currently active/open project.
Also, when you are done with debugging your masterpiece. don't forget to set the configuration to release and then rebuild your .swf.
This will omit your trace statements from the final .swf (they stay in your code, they just don't get compiled into the .swf), it also removes some other additonal bits 'n bobs that are used by FD for debugging..
I can't count the number of times that I've been on websites recently and got a popup from flash player asking where the local debugger instance is because some doughnut of a designer on a deadline forgot to rebuild their .swf in release mode before uploading it to a site...Grrr...This issue doesn't affect your average joe with their vanilla flash player, it only affects people who use the content debugger versions...Like me...Aaaaagh! :@ heh heh!
There was one site that became virtually unusable to me a while ago because every single page had this one annoying flash advert at the top of the page that was a debug build...So every time I went to a different page I got that damn popup from flashplayer....That drove me nuts!
Installing the adblock pro plugin for firefox solved that problem for me! "Take that you clueless half-arsed advertising morons with your poor actionscript skills and annoying flash banners!" Ha! :icon_evil:
Ooops, sorry! :$ Went into a bit of an anti advertising rant there!
OK, so that's tracing in FD. It only works if you use it in an active/open project and only in debug mode!
And don't forget to rebuild in release mode once your done debugging! heh heh! ;)
Cheers for now,
Jas.
Everything works except trace,
output panel shows:
Starting new compile.
Loading configuration file C:\Program Files\FlashDevelop\Flex_SDK\frameworks\flex-config.xml
Loading configuration file C:\Documents and Settings\rajarajan\Desktop\ProjectTracing\obj\ProjectTracingConfig.xml
obj\ProjectTracing633905373543906250 (999 bytes)
(fcsh)
Build succeeded
Done (0)
[Capturing traces with FDB]Everything works except trace,
output panel shows:Starting new compile. Loading configuration file C:\Program Files\FlashDevelop\Flex_SDK\frameworks\flex-config.xml Loading configuration file C:\Documents and Settings\rajarajan\Desktop\ProjectTracing\obj\ProjectTracingConfig.xml obj\ProjectTracing633905373543906250 (999 bytes) (fcsh) Build succeeded Done (0) [Capturing traces with FDB]
OK, well the only thing I can think of is perhaps you aren't using one of the debug flash players...Only the content debugger versions of flashplayer will allow you to see trace actions.
The standard player doesn't show them.
Try going to http://www.adobe.com/support/flashplayer/downloads.html and download and install the flash player 10 projector content debugger.
Once you've got it, set your copy of Flashdevelop up, so it uses the content debugger as the external player. Next, reload your project and try building/testing it!
You should now be able to see trace statements!
Cheers for now,
Jas.
Sweet jesus that was a lot of work but finally got it.
I was downloading the wrong exe it's the third one down
Download the Windows Flash Player 10 Projector content debugger (EXE, 5.18 MB).
Thanks a lot.
Notes
Project > properties > play in external player.
Then you have to set the output file of the swf.
Then on the tree menu in the right hand side, right click on the actionscript file and choose 'Always compile'.
Make sure it is set to debug and then finally click the blue triangle. Pressing ctrl+F8 doesn't show the trace.
Oh and you've got to create this as a project and not just a stand alone actionscript file.
Thanks a lot Iamthwee and Jason, now its working.
Hi Friend,
Unable to Add other .hx files with orginal .hx files
Everything works except trace,
output panel shows:Starting new compile. Loading configuration file C:\Program Files\FlashDevelop\Flex_SDK\frameworks\flex-config.xml Loading configuration file C:\Documents and Settings\rajarajan\Desktop\ProjectTracing\obj\ProjectTracingConfig.xml obj\ProjectTracing633905373543906250 (999 bytes) (fcsh) Build succeeded Done (0) [Capturing traces with FDB]
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.