ActionScript.com The Flash/Flex ActionScript Developer Community

Saturday, July 05, 2008

You are here : Article

Home

Tutorials

Forum

Consulting Services

Archives

About Us

Towards Open Source Flash Development

Created By Carlos Rovira, at 3/7/2005 - 139 comments.

Carlos Rovira is focused on Macromedia Flash, J2EE, and PHP server-side technologies via Flash Remoting.

Click to view this author's website.

Update (1/3/2006): This topic continues in the article Far Beyond Open Source Flash Development

If you love Flash Technology and Open Source development, you're lucky because some folks in the Flash community are developing really good tools, which integrate with other existing Open software. The result: A dream environment for Flash SWF creation. From now on you don't have to pay any kind of license and you are able to modify the source code of any tool.

Through this article I want to assemble all the pieces needed to make this happen. In other words, I want to explore with you the powerful combination of MTASC compiler with the Eclipse IDE (wrapped up with some plugins for ActionScript writing and SWF preview). Best of all, you can develop, in some cases, a full application without leaving the proposed enviroment.

Let me show you how easy and fast it is to create SWF files from scratch with these free toys:

Putting all the pieces together.

First of all you must download all the required software:

http://www.mtasc.org

To start installing the software you can unzip the MTASC ActionScript Compiler in a custom folder. This powerful open source command line compiler lets you produce your SWF files without using the Macromedia Flash enviroment. This piece of software is based on the best compiler technology available (namely http://www.ocaml.org/ programming language) and is amazingly fast. It's capable of compiling around 100 classes in less than 5 seconds! Now you can understand the associated MTASC phrase "no more coffee break while compiling".

http://www.eclipse.org

Eclipse is the favourite IDE of most Java developers. It's a friendly tool with a lot of features like project manager, powerful code editor, CVS integration, code refactoring, plugin architecture, etc. To install Eclipse simply unzip the downloaded file in a folder of your choice (i.e, "c:\\\\eclipse\\\\"). Note: You must have a Java Runtime Environment (JRE) installed on your computer. Eclipse requires version 1.3 or 1.4 of a Java 2 Standard Edition JRE[http://eclipse.org/eclipse/faq/eclipse-faq.html#users_3].

If you plan develop a Flash RIA with J2EE business logic now you have finish by installing an IDE that was specifically created to fight with J2EE technology. You can use other Open Source Software suited for this purpose and listed below:

http://sourceforge.net/projects/openamf. A mature J2EE Flash remoting implementation alternative.

http://jonas.objectweb.org. One of the best J2EE Application Servers available on the web.

http://jope.objectweb.org. A useful Eclipse plugin to configure and manage JOnAS app server.

http://sourceforge.net/projects/aseclipseplugin

In order to help you creating your ActionScript files you must install the ActionScript Development Tool (ASDT) plugin in the Eclipse platform. To install the plugin unzip the file in the plugins folder (i.e, "c:\\\\eclipse\\\\plugins") of your Eclipse installation. (Really simple isn't it?) This plugin is currently under development, but you can enjoy features like code competion and coloring, Class and Project wizards, support for MTASC compiler, Outline panel, and more.

http://www.potapenko.com/flashout

Now it's time to talk about Flashout. This Eclipse plugin is like the Test Movie option in the Flash IDE, plus login support. Again, to install, simply unzip the file in the Eclipse's plugin folder.

Now that you have installed the enviroment it is time to really do something...

Setting up the enviroment and creating a simple project in 10 steps.

In order to start developing you must to follow these steps:

Enter Eclipse Preferences dialog (menu Window > Preferences) to configure MTASC and Flashout.

In the MTASC folder you must set the MTASC and Macromedia class locations. Now you can configure other not-so necessary features like the compile on save option.

In the Flashout folder you must to introduce the MTASC and Macromedia classes locations, too. Close Preferences dialog.

Go to Customize Perspective dialog (menu Window > Customize Prespective...). In the shortcuts tab > submenus > New you must check the ActionScript checkbox so you can later get quick acess to Class and Project wizards in the navigator panel.

Now you are ready to start using your new Flash open source environment. Let's go, to create a simple project.

Inside the Navigator panel right click and select New > New Actionscript2 project. In the dialog box enter the project name (i.e, "Flash_OS_prj"). Note that you can change your workspace, but for this simple example we create the structure in the default workspace location.

Create the "src" and "deploy" folders. To accomplish this task right click the "Flash_OS_prj" project folder and select New > Folder.

Add "src" to the project's classpath. Right click in the "Flash_OS_prj" project folder and select Properties. In the ActionScript2 project properties node Add "src" to the classpath and click the Apply button. Now you can create namespaces (i.e, folders) inside "src" like "com", "flashweek", etc. and start adding class files to that project's namespaces.

Add the class file and application entry point. Right click in the "src" project folder and select New > New ActionScript2 Class. Insert "Test.as" in the class name input text. Click Finish. Insert the following code in the Test.as file:

/* 
 * Generated by ASDT 
*/ 

class Test {

	private var scopeRef:MovieClip;
	
	function Test(scope:MovieClip) {
	
		scopeRef = scope;
	
		// --- Creates a 'tf' TextField size 100x600 at pos 100, 100
		scopeRef.createTextField("tf", 0, 100, 100, 800, 600);
	
		// --- Write some text into it
		scopeRef.tf.text = "Hello FlashWeek!!!!";
	}
	
	// --- Main Entry Point
	static function main() {		
		var test:Test = new Test(_root);
	}
}

Now to configure Flashout. Right click in the "Flash_OS_prj" project folder and select New > File. Insert a name of your choice with a .flashout extension (i.e, "flash_os_prj.flashout"). Inside the "compilation preference" tab.
- Path to swf: browse to "[path to Flash_OS_prj]\\\\deploy\\\\Test.swf"
- Root (main) class: browse to "[path to Flash_OS_prj]\\\\src\\\\Test.as"
- Additional params for compilation: -header 800:600:20

Push ::: COMPILE ::: button and voila! You can see your first open source SWF file in action.

Flashout Log feature.

If you want to use the log features of Flashout you must copy the Flashout.as file that comes with the Flashout zip file into the src folder. To test that all is working, insert the following line at the beginning of the Test class constructor:

	Flashout.info("Test instance!");

If you test the SWF you can check the log in the Flashout Log tab. Other levels of log available are warning, log, debug, error, serverIn, serverOut.

Dynamic MovieClip linkage

In order to use only your new Eclipse enviroment and avoid the Flash IDE, you must to know how to link classes dynamically. You might have noticed that you don't have any Library now because you don't have any FLA file. (Hmm, how can we workaround this problem?) Some MTASC developers at the http://lists.motion-twin.com/archives/mtasc have resolved this issue with the "__Packages" trick described in http://www.peterjoel.com/blog/?archive=2004_01_01_archive.xml:

Create Folders "com" and "flashweek" inside "src".

Create TestClip.as file inside com.flashweek

Insert the following code in the new class file:

/* 
* Generated by ASDT 
*/ 

class com.flashweek.TestClip extends MovieClip {

	static var SymbolName:String = "__Packages.com.flashweek.TestClip";
	static var SymbolOwner:Object = TestClip;
	static var SymbolLinked = Object.registerClass(SymbolName, SymbolOwner);
	
	public function TestClip(){
		Flashout.info("TestClip instance!");
		
		beginFill(0xCCCCCC);
		lineTo(100, 0);
		lineTo(100, 100); 
		lineTo(0, 100); 
		lineTo(0, 0); 
		endFill();
	}
}

In Test.as add the following code.

At the beginning of the file:

import com.flashweek.TestClip;

At the end of the constructor:

	// --- Dynamic MovieClip linkage
	var linkedClip:MovieClip = scopeRef.attachMovie(TestClip.SymbolName, "testClip_inst", 1);
	linkedClip._x = 200;
	linkedClip._y = 200;
	linkedClip._rotation = 30;
	linkedClip._alpha = 70;

Don't forget to check "-separate" in the flashout configuration tab.

Eclipse Navigator Panel (16k image)

http://www.actionscript.com/carlos/Flash_OS_prj.zip is the finished eclipse project

If you test the SWF now you can see a TestClip instance. You don't need to rely on the Flash IDE anymore to create your own assets.

Actually you must to rely on assets made with the Flash Drawing API or loaded via loadMovie and, for this reason, a way to embed images in future releases would be very appreciated.

The need for an Open Source Component Framework

As you develop with this new IDE you'll notice the necessity of a Open Source Component Framework in order to be productive. This is a great challenge for the Flash community -- to work out a solution to this issue and make Flash open source development a true reality.

Note: There's a v2 component framework workaround on the MTASC site that shows you how to use Macromedia's components, but this method is currently a hack and is out of the scope of this article. You can check it out http://www.mtasc.org.

Conclusion

I'd like to finish by listing some quick phrases grouped into PROS and CONS, about this emerging Open Source tendency.

PROS

Amazing quick compilation time.

Unique and integrated Enviroment.

All software is Free and Open Source.

Development process very similar to traditional web development.

Great and fast support at the product's mailing list.

CONS

Open Source Component Framework needed.

There's no way to embed images and rich media in the SWF.

del.icio.us || Digg It || Technorati