This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Using Actionscript projects in Flex or Flash

Using Actionscript projects in Flex or Flash

Many of the tutorials here on Flashmagazine.com as well as other sites are based on Actionscript classes. You can easily use these with either Flex, Flash or other editors such as FlashDevelop by following the instructions in this tutorial.

Any class that extends either a Sprite or a Movieclip can be used to create a SWF. How you set this up varies depending on what software you use and this tutorial offers instructions for Adobe Flex Builder, Adobe Flash CS3/CS4 as well as the popular Open Source editor FlashDevelop.

Flex Builder 3

These are the steps required to create a SWF based on a class file using Flex Builder.

1. Start by creating a New Actionscript project (File -> New Actionscript Project) and enter the name of your project. Flex builder will create a folder on your computer that contains four folders:

  • bin-debug: When you click the Run-button, Flex Builder will create a SWF in this folder
  • bin-release: When you click the Export Release Build-button, Flex Builder will create a SWF in this folder that is stripped on unnecessary code.
  • html-template: In this folder you can find the HTML template that Flex Builder will use to display your SWF. If you want to use SwfObject2 instead of the usual export template, simply modify this template
  • src: This is where you place your source files

2. Switch to Windows Explorer (or Finder if you're on a Mac) and copy the file just as you would do to any other file. Copy the class file you want to use into the "src" folder in the project you just created. The project folder is located in your computers default Documents folder unless you use a custom setup.

3. Return to Flex Builder and expand the "src" folder to view it's content. If you cannot see the file you copied, right click the project folder and select "Refresh" from the popup menu (or F5 on your keyboard). Flex Builder will usually do this for you so it may not be required.

4. Right click the Class file you copied and select "Set as default application".

5. Select the Run-button in the top toolbar (or use the Run-menu) to create the SWF.

If the class requires other classes to run, you will see this in the Problems panel as a series of errors. If you are reading this tutorial to use examples from our Away3D tutorial series, make sure you have copied the contents of the Away3D "src" folder into your root project folder. Alternatively, you can add the Away3D classes from a folder on your file system. Right click your project folder, select "Properties", Click "Actionscript Build Path" and click "New Folder" to add the Away3D src folder.

Flashdevelop

Flashdevelop is a blazingly fast and free alternative for those on a Windows platform.

1. Create a new project and set your output preferences.

2. Copy the class file into the projects folder and right click it to select "Always Compile".

3. Export the SWF using CTRL+enter

As for Flash and Flex Builder, you may need to copy some extra supporting files into the projects folder, just as explained above.

Flash CS3 / CS4 / CS5

In Flash, you either put code on the main timeline (procedural programming) or you enter the path to the Actionscript class in the Properties panel as the Document Path. In this case, we'll need to set up the Document Class.

1. Start by creating a new FLA file and save it in the same folder as the class you want to use.

2. The next step is to set the Document class. Open the Properties Panel and locate the Document Class input field.

 

image

 

(Note: in Flash CS4, this input is just called "Class")

If you want to use the class file named "Basic07_plane.as", you'll type "Basic07_plane" (without the .as) into the document class input. To confirm that the path was correct, click the pencil just next to the input. This will make Flash open up the Document class file for editing. If the path is incorrect, you'll receive this warning:

image

If you get this warning, make sure the FLA is saved in the same folder as the Actionscript class.

3. Unless the class contains references to bitmaps or requires a custom Stage size, you can now export the file using the menu Control -> Test movie.

If a window opens upon export that tells you something is wrong, you may be missing other class files referenced in the class you want to run. If you are reading this tutorial to use examples from our Away3D tutorial series, make sure you have copied the contents of the Away3D "src" folder into the same folder as your FLA.

Alternatively, you can leave the Away3D files somewhere else on your file system and just tell Flash where they are located. To do this, select File -> Publish Settings and click the Flash tab. Click the "Settings" button next to the Actionscript version and add the path to the Away3D "src" folder in the classpath list. In Flash CS4, this is called "Source Path" rather than Classpath.

What Flex Builder or FlashDevelop offers over Flash CS3 / CS4

There are obvious advantages to using a code-centric tool for writing Actionscript code rather than the Flash IDE. Many users prefer to use Flash "since they know it already" and don't want to learn another tool. If you are one of these and you've never forced yourself to use a pure coding-tool for an extended period of time, you are really missing out on something and you're probably wasting unnecessary time.

Let's face it. The Flash Actionscript panel is not a good code editor. It works, but you have to remember all sorts of things and nothing is automated for you. You have to type it all in. If you are using custom classes in the Flash IDE, you won't get the code hints that you get for the native Flash classes that tells you what parameters are required or the path to a class. Flash will also do some things for you automatically, so if you send your source files to a Flex user, chances are that some required imports are missing.

Flex Builder (FB) and FlashDevelop (FD) offers code hinting for every class, also the ones you've created yourself. Both can auto-insert import statements for you so you don't need to scroll up to the top of your class file just to add an import. Have you ever seen a custom class and wondered what it is? In FB or FD you just control-click that class and it opens up. The same goes for properties and methods so this makes it really fast to look through other peoples code.

These two things alone speed up your coding but there's tons of more features. Duplicating code blocks with the click of a hotkey, inserting code snippets, maintaining TODO-lists within the code, simple commenting of code and much more. If you still use the Flash IDE for Actionscript, consider trying either Flex Builder, FlashDevelop or other tools such as FDT.

A note about Tutorial files

Keep in mind that tutorial files are written for clarity and ease of use. It is best practice for Actionscript projects and classes to use fully qualified package names. For beginners, this makes example files harder to use so most examples will use the default package for simplicity.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by Jongha on 11/16 at 10:44 AM

I am one of the users who are trying to migrate to Flex Builder. One thing that I am not sure is that
when I export a MovieClip to Actionscript in Flash, it says Flash will automatically create a class file for that MovieClip. In Flash IDE I can reference that class even though there is no Class file created.
But in this case Flex Builder doesn’t know the auto-generated class file and throw error.
I copied the FLA file under the same folder as class.
I am not sure how to handle this kind of situation.
Please advise me. Thanks.


Posted by Jens C Brynildsen on 11/16 at 01:37 PM

Hi Jongha,
First of all - copying the FLA to the class folder probably won’t have the effect you’re looking for. FLA files are a binary file that Flex does not know how to deal with.

What you want to do is to link the movieClip, export to a SWF and then use the symbol from the SWF in Flex. This is how you’d do it:

1. In Flash, right click the MovieClip in library and check the “Export for Actionscript” button, type in a good name in the Class-input and click OK

2. Next, you export a SWF. Copy this SWF to the same directory as the class (or maybe a sub-folder called assets to keep assets and code separate)

3. Embed the symbol inside the class using the Embed metadata tag like this:

[Embed(‘video/mySWF.swf’, symbol=‘mySymbol’)]
private static var mySymbol:Class;

This will make Flex import the symbol and set it up for use with Actionscript.

4. Instantiate the MovieClip inside Flex like this:
var mc1:MovieClip = new mySymbol() as MovieClip;

You can find more details on the Embed-tag in this tutorial:
http://www.flashmagazine.com/Tutorials/detail/using_flex_actionscript_files_with_metadata_in_flash_cs3/

Best of luck!

J


Posted by Jongha on 11/17 at 06:04 PM

Jens

Thanks for the detail step by step instruction.
the Embed metadata works fine.
Now I can reference the MovieClip generated from Flash in Flex Builder.
But this means that I have to export all of MovieClips and embed into Flex Builder.
In this case Flash is being used as visual asset generator and Flex Builder is being used as AS3 Editor.
It seems a little separated though.
but I will try this way.
Thanks a lot.


Posted by Jens C Brynildsen on 11/19 at 01:46 PM

Yeah. It is kind of ‘separated’, but I’ve found it to be the best way when working with designers. For design-heavy projects, I’d use the opposite workflow - keep the assets in Flash, edit all code in Flex and set up the Document class and compile in Flash.

Keep in mind - you only need one SWF. When you use the “symbol”-parameter in the Embed-tag, only that one symbol is imported.

J


Posted by devenh on 05/09 at 11:49 PM

This was a great tutorial!  I’ve been using Flex for some time, but I’m having all kinds of issues learning Flash and how to integrate the two.  I’ve gotten over the initial hurdle since I can get a basic ActionScript proj in Flex Builder to play.  However, I’m trying to add animation tweens and I’m confused how to do this strictly through Flex Builder.  I will check out the Embed tag tutorial to see if this answers my questions.

Thanks!


Posted by sji1981 on 08/05 at 09:51 PM

I have downloaded one example from http://www.actionscript.org/resources/articles/838/1/AS3-PhotoViewer-V2/Page1.html

The .fla file and .as files are in the same folder but it shows the above mentioned error when I click on the pencil. And when I run the example it shows a blank white screen. No pictures nothing. HOw can I correct this problem. Any help would be greatly appreciated. Thanks

Submit a comment

Only registered members can comment. Click here to login or here to register