Aral Balkan

21 May 2005

The acronyms they keep a-growin'. I started out with AME (ASDT, MTASC and Eclipse), got the Flashout plugin working and entered the world of FAME before getting my Borg on and assimilating _root. I knew I was well on my way to open-source Flash development but there was still a piece of the puzzle missing: How do I create my initial SWF, its library, resources, etc.

Enter swfmill by Daniel Fischer. Swfmill is a wonderful little command line tool that allows you to go from XML to SWF (using a dialect called swfml) and vice-versa. The path to totally open-source Flash development thus makes our acronym FAMES (which I'm sure Jesse would pronounce "famous"!)

Here are the steps to recreate the FAMES swf you see above:

1. Create a new ActionScript project in ASDT (Eclipse)

2. Create a new XML file called application.xml. This is the swfml file that Swfmill will compile to create the skeleton swf that contains your library.

3. Add the following code to the swfml file:

XML:



<?xml version="1.0" encoding="iso-8859-1"?>


<movie width="320" height="240" framerate="30">


	<background color="#ffffff"/>


 


	<frame>


		<library>


			<clip id="spheres" import="library/spheres.png"/>


		</library>


	</frame>


</movie>

4. Create a new AS File to use as the main application class and call it Application.as. Here is the code for Application.as:

ActionScript:



class Application extends MovieClip


{


	var tfCaption:TextField;


	


	// Clips attached dynamically from Swfmill library


	var mcSpheres:MovieClip;


 


	var sW:Number = null; 	// Stage width


	var sH:Number = null;	// Stage height 	


		


	private function Application ( target )


	{


		// Link movie clips to classes


		Object.registerClass ( "spheres", Particle );		


		


		// Assimilate the target


		target.__proto__ = this.__proto__;


		target.__constructor__ = Application;


		this = target;		


 


		Flashout.log ("Application initialized: " + this );


		


		// Store stage dimensions for easy look-up


		sW = Stage.width;


		sH = Stage.height;


		


		// Draw border around the stage


		lineStyle ( 1, 0x000000 );


		moveTo ( 0, 0 );


		lineTo ( sW, 0 );


		lineTo ( sW, sH );


		lineTo ( 0, sH );


		lineTo ( 0, 0 );


		


		//


		// Create a caption


		//


		var captionTextFormat = new TextFormat();


		captionTextFormat.size = 12;


		captionTextFormat.font = "_sans";


		


		var captionText:String = "Made with FAMES (FAME + Swfmill)";


		


		var captionTextExtent:Object = captionTextFormat.getTextExtent ( captionText );


		var captionWidth:Number = captionTextExtent.textFieldWidth;


		var captionHeight:Number = captionTextExtent.textFieldHeight;


		var captionX = sW / 2 - captionWidth / 2;


		var captionY = sH - captionHeight;


		


		createTextField( "tfCaption", 10000, captionX, captionY, captionWidth, captionHeight );


	


		// Write caption text


		tfCaption.text = captionText;


		


		// Add ten particles


		for ( var i = 0; i < 10; i++ )


		{


			// Attach a sphere clip


			attachMovie ("spheres", "mcSphere", 1000 + i );


		}


	}


	


	static function main ()


	{


		// Create an Application instance and 


		// have is assimilate _root.


		var test:Application = new Application( _root );


	}


}

The important new bit of functionality here concerns linking the "spheres" clip to the Particle class (achieved with the Object.registerClass statement in the constructor) and attaching instances of it on stage.

5. Here is the code for the Particle class:

ActionScript:



class Particle extends MovieClip


{


	var vX:Number = null;


	var vY:Number = null;


	var randomness:Number = null;


 


	function Particle ()


	{


		Flashout.log ( "Particle created: " + this );


		


		_x = _width + Math.random() * ( Stage.width - _width );


		_y = _height + Math.random() * ( Stage.height - _height );


		


		_rotation = Math.random() * 360;


		


		var randomness = Math.random()*5;


		


		vX = Math.random() * randomness + 1;


		vY = Math.random() * randomness + 1;		


	}


	


	function onEnterFrame ()


	{


		_rotation += 1.69;


		


		_x += vX;


		_y += vY;


		


		if ( _x < 0 || _x > ( Stage.width - _width/2 ) )


		{


			vX *= -1;


			_x += 2 * vX;


		}


		


		if ( _y < 0 || _y > ( Stage.height - _height/2 ) )


		{


			vY *= -1;	


			_y += 2 * vY;


		}


	}


}

Before compiling the project, you need to use Swfmill to create the application.swf. To do this, open up a command prompt and enter the following command from your project folder (make sure you add swfmill.exe to your path first):

swfmill simple application.xml application.swf

6. Finally, you need to configure Flashout. To do this, browse to the Application class to set it as the "Root (main) class" and browse to the application.swf file created by Swfmill to set it for the "Path to swf" option. Hit "compile" and you should see the SWF run!

FAMES opens up a whole new world of cool possibilities.

Download the Swfmill particles example (12k)

The FAMES: FAME + Swfmill = Fully open source flash article by Aral Balkan, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial 2.0 UK: England License.

Add Your Comment

FAMES: FAME + Swfmill = Fully open source flash

20 Comments »

Dammit, I wish I knew Java. Spike was kind enough to give me a plethora of links to Eclipse plugin development, but it is a bit overwhelming. Someone needs to write a panel around that functionality so we can have a library replacement, more like evolution, as a GUI.

Don’t get me wrong, as a Flash Developer, I’ve done my fair share of hand writing XML, but this missing component needs to be made easier for the developer.

Either way, now all we’re missing is declaritive layout via XML with an ability to compile that down to initialization ActionScript.

JesterXL
Yeah Jesse — I’ve actually checked out ASDT and built ASDT (Eclipse makes plugin development really easy with its own tools) and I’m playing with it a bit.

A panel for Swfmill would be really cool indeed.

The Swfmill XML is very low level and mirrors the SWF structure directly (try going swf2xml on the application.swf that you create with the “simple” tag and you’ll see the actual — non-simple — XML.)

Something like Ted’s FLOW — or a compile-time version like Flex — would be a great addition, no doubt.

Aral Balkan
Could you please tell me what parameters you use with this example in mtasc? I don’t use Flashout so I don’t know and I want to compile this example on console.

J0u
I cannot wait unti I can dump windows all together – can I use AMES to develop swf apps and replace Flash MX?

Anand
Hi Anand,

You can use AMES to develop SWF applications or you can use it alongside the Flash IDE.

aral
Hey,

i try your example but i have a problem.
I can`t compile, it says:
C:/MyProjects/second/Application.as:14: characters 36-44 : type error Unknown class Particle

But the class particle is in the right folder.

Any idears?

Thank you

Myriam
[...] http://theresidentalien.typepad.com/fames/part1.htm http://theresidentalien.typepad.com/fames/part2.htm http://aralbalkan.com/index.php?p=373&more=1&c=1 http://osflash.org/asdt/logging [...]

FlashCodersBrighton » Blog Archive » installing FAMES: a user’s guide
hey myriam

i had this problem yesterday but i’ve managed to get this example working today. here’s how:

1. go to your MM (adobe…) core classes folder (for me on window xp this is ‘C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Classes’)
2. create new folder ‘com’
3. inside ‘com’ create new folder ‘aralbalkan’
4. inside ‘aralbalkan’ create new folder ‘particle’
5. go back to the folder that contains ‘Particle.as’
6. to avoid any confusion, rename as ‘abParticle.as’ (aral’s initials as a faux-namespace)
7. open ‘abParticle.as’ in a text editor
8. retype the class declaration as ‘class com.aralbalkan.particles.abParticle extends MovieClip’
9. retype the constructor method as ‘function abParticle ()’
10. save and close
11. go back to eclipse and refresh your AS project. now if you expand your ‘core’ classes folder you should see the new package and class file
12. open ‘Application.as’ and add ‘import com.aralbalkan.particles.abParticle;’ as a new first line above the class declaration
13. retype the line ‘Object.registerClass ( “spheres”, Particle );’ as ‘Object.registerClass ( “spheres”, abParticle );’
14. go to your Flashout plugin and hit compile
15. voila!

actually not voila! straightaway. not for me anyway, the compiler starting moaning about the ‘TRACE’ method in Flashout.as. as a quick&Dirty fix i commented out all the TRACE calls in Flashout.as and THEN we had a working ‘Application.swf’

and there was much rejoicing! :)

richard willis
who put that fcb link there? ;)

just to add: you can fix the compiler error in Flashout.as by making all uppercase TRACE calls lowercase. whoever did put that link there, you’ll note if you go there that doing just this is part of the instructions.

happy trails hans!

richard willis
FAMES…

Really been getting my teeth into this FAMES tutorial that come in 2 parts: how install FAMES and your first FAMES project from the (dormant?) resident alien blog.
FAMES stands for Flashout, ASDT, Motion Twin ActionScript Compiler(MTASC), Eclipse and…

hoot and holler
hi 2 all.
hello world! It is nice site. Keep working!
best regards
i found you here http://google.com ^^

marionxlx
Hi,

I just began exploring the open source flash development with your tutorial.
What I noticed is that we need Flash installed on the system in order to use the core classes provided by macromedia.

Is there some open source library of actionscript core classes that we can use ?

warm regards
arrow

arrow
Hi Arrow,

You can use the intrinsic classes that come with the latest versions of MTASC.

aral
Has anyone been able to use the -out MTASC option with asdt? I’ve tried adding:

-header 320:240:30 -out output.swf

in the Additionals section, but I can’t seem to get a new file to be produced.

Brent
[...] FAMES: FAME + Swfmill = Fully open source flash [...]

Open Source Flash Guru « it.guy.kelly
Thanks for the great tutorial!

I have the same problem as Myriam did about a year ago with “type error Unknown class Particle” on compile.

Im using the core MTASC library because I don’t have flash. I tried some things similar to what richard willis suggested only with where my core MTASC libraries are located. This didn’t work.

I looked up the documentation on Object.registerClass and it seems pretty straight foreword.

Anyone know where I can look to resolve this?

Chuck
Chuck,

I ran into the same problem.

I wracked my brain until 1:00 AM and then it finally occurred to me that Particle.as should reside int he same location as the Flashout.as file. You do this, and its “All Good”.

Rezib
If you add -cp to the MTASC additional tab when you hit compile this will tell the compiler where to find Particles.

PhillC
I would like to find a completely open source tool chain that works under Linux to generate flash files which contain time lapse sequences with music playing in the background.

I no flash programming experience, but this application should not be all that complex, but it is absolutely necessary that it be scriptable in some fashion since the sequences will consist of several hundred frames.

I would greatly appreciate any advice as to which software to start out with, and any simple example code to get started.

Thanks in advance,
-Arlen

Arlen R
Thanks for a great tutorial! Doing this entirely in open source makes me all warm and happy.

I also had trouble getting the example to recognize Particle as a class.
To clarify what Phillc wrote, I added the following to the “Additionals” tab of the Flashout panel:

-cp “D:\Documents and Settings\JHowell\eclipse_workspace\swfmill_demo\src”

I had placed the .as files in a subdir of the project. Don’t forget those double quotes if you have a space in the path!

Mike Howell

Add Your Comment

FAMES: FAME + Swfmill = Fully open source flash

Send me a message