In 2008, over one thousand people experienced the world’s first virtual web conference. Together, we created a new type of conference that is environmentally-friendly, affordable, and interactive.

In 2009, we are going to take it one step further.

FAMES: FAME + Swfmill = Fully open source flash

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:
    

  1. 

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

    2. 

  2. 

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

    3. 

  3. 

    	<background color="#ffffff"/>
    

    4. 

  4. 

     
    

    5. 

  5. 

    	<frame>
    

    6. 

  6. 

    		<library>
    

    7. 

  7. 

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

    8. 

  8. 

    		</library>
    

    9. 

  9. 

    	</frame>
    

    10. 

  10. 

    </movie> 
    

    11.

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:
    

  1. 

    class Application extends MovieClip
    

    2. 

  2. 

    {
    

    3. 

  3. 

    	var tfCaption:TextField;
    

    4. 

  4. 

    	
    

    5. 

  5. 

    	// Clips attached dynamically from Swfmill library
    

    6. 

  6. 

    	var mcSpheres:MovieClip;
    

    7. 

  7. 

     
    

    8. 

  8. 

    	var sW:Number = null; 	// Stage width
    

    9. 

  9. 

    	var sH:Number = null;	// Stage height 	
    

    10. 

  10. 

    		
    

    11. 

  11. 

    	private function Application ( target )
    

    12. 

  12. 

    	{
    

    13. 

  13. 

    		// Link movie clips to classes
    

    14. 

  14. 

    		Object.registerClass ( "spheres", Particle );		
    

    15. 

  15. 

    		
    

    16. 

  16. 

    		// Assimilate the target
    

    17. 

  17. 

    		target.__proto__ = this.__proto__;
    

    18. 

  18. 

    		target.__constructor__ = Application;
    

    19. 

  19. 

    		this = target;		
    

    20. 

  20. 

     
    

    21. 

  21. 

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

    22. 

  22. 

    		
    

    23. 

  23. 

    		// Store stage dimensions for easy look-up
    

    24. 

  24. 

    		sW = Stage.width;
    

    25. 

  25. 

    		sH = Stage.height;
    

    26. 

  26. 

    		
    

    27. 

  27. 

    		// Draw border around the stage
    

    28. 

  28. 

    		lineStyle ( 1, 0x000000 );
    

    29. 

  29. 

    		moveTo ( 0, 0 );
    

    30. 

  30. 

    		lineTo ( sW, 0 );
    

    31. 

  31. 

    		lineTo ( sW, sH );
    

    32. 

  32. 

    		lineTo ( 0, sH );
    

    33. 

  33. 

    		lineTo ( 0, 0 );
    

    34. 

  34. 

    		
    

    35. 

  35. 

    		//
    

    36. 

  36. 

    		// Create a caption
    

    37. 

  37. 

    		//
    

    38. 

  38. 

    		var captionTextFormat = new TextFormat();
    

    39. 

  39. 

    		captionTextFormat.size = 12;
    

    40. 

  40. 

    		captionTextFormat.font = "_sans";
    

    41. 

  41. 

    		
    

    42. 

  42. 

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

    43. 

  43. 

    		
    

    44. 

  44. 

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

    45. 

  45. 

    		var captionWidth:Number = captionTextExtent.textFieldWidth;
    

    46. 

  46. 

    		var captionHeight:Number = captionTextExtent.textFieldHeight;
    

    47. 

  47. 

    		var captionX = sW / 2 - captionWidth / 2;
    

    48. 

  48. 

    		var captionY = sH - captionHeight;
    

    49. 

  49. 

    		
    

    50. 

  50. 

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

    51. 

  51. 

    	
    

    52. 

  52. 

    		// Write caption text
    

    53. 

  53. 

    		tfCaption.text = captionText;
    

    54. 

  54. 

    		
    

    55. 

  55. 

    		// Add ten particles
    

    56. 

  56. 

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

    57. 

  57. 

    		{
    

    58. 

  58. 

    			// Attach a sphere clip
    

    59. 

  59. 

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

    60. 

  60. 

    		}
    

    61. 

  61. 

    	}
    

    62. 

  62. 

    	
    

    63. 

  63. 

    	static function main ()
    

    64. 

  64. 

    	{
    

    65. 

  65. 

    		// Create an Application instance and 
    

    66. 

  66. 

    		// have is assimilate _root.
    

    67. 

  67. 

    		var test:Application = new Application( _root );
    

    68. 

  68. 

    	}
    

    69. 

  69. 

    } 
    

    70.

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:
    

  1. 

    class Particle extends MovieClip
    

    2. 

  2. 

    {
    

    3. 

  3. 

    	var vX:Number = null;
    

    4. 

  4. 

    	var vY:Number = null;
    

    5. 

  5. 

    	var randomness:Number = null;
    

    6. 

  6. 

     
    

    7. 

  7. 

    	function Particle ()
    

    8. 

  8. 

    	{
    

    9. 

  9. 

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

    10. 

  10. 

    		
    

    11. 

  11. 

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

    12. 

  12. 

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

    13. 

  13. 

    		
    

    14. 

  14. 

    		_rotation = Math.random() * 360;
    

    15. 

  15. 

    		
    

    16. 

  16. 

    		var randomness = Math.random()*5;
    

    17. 

  17. 

    		
    

    18. 

  18. 

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

    19. 

  19. 

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

    20. 

  20. 

    	}
    

    21. 

  21. 

    	
    

    22. 

  22. 

    	function onEnterFrame ()
    

    23. 

  23. 

    	{
    

    24. 

  24. 

    		_rotation += 1.69;
    

    25. 

  25. 

    		
    

    26. 

  26. 

    		_x += vX;
    

    27. 

  27. 

    		_y += vY;
    

    28. 

  28. 

    		
    

    29. 

  29. 

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

    30. 

  30. 

    		{
    

    31. 

  31. 

    			vX *= -1;
    

    32. 

  32. 

    			_x += 2 * vX;
    

    33. 

  33. 

    		}
    

    34. 

  34. 

    		
    

    35. 

  35. 

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

    36. 

  36. 

    		{
    

    37. 

  37. 

    			vY *= -1;	
    

    38. 

  38. 

    			_y += 2 * vY;
    

    39. 

  39. 

    		}
    

    40. 

  40. 

    	}
    

    41. 

  41. 

    } 
    

    42.

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)

Creative Commons LicenseThe 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.

Post Metadata

Date
May 21st, 2005

Author
Aral Balkan

Category
Flash

Tags

Trackback URI

Comments RSS


3 Trackbacks & Pingbacks

  1. October 27, 2006 9:36 am

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

  2. December 7, 2006 10:03 pm

    hoot and holler :

  3. May 2, 2007 10:45 pm

    Open Source Flash Guru « it.guy.kelly :

15 Comments


  1. JesterXL
    1

    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.

    May 21st, 2005 at 5:28 pm


  2. Aral Balkan
    2

    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.

    May 22nd, 2005 at 10:33 am


  3. J0u
    3

    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.

    June 4th, 2006 at 1:35 pm


  4. Anand
    4

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

    September 19th, 2006 at 7:30 am


  5. aral
    5

    Hi Anand,

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

    September 19th, 2006 at 11:31 pm


  6. Myriam
    6

    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

    October 19th, 2006 at 1:00 pm


  7. richard willis
    7

    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! :)

    October 27th, 2006 at 10:49 am


  8. richard willis
    8

    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!

    October 30th, 2006 at 10:03 am


  9. marionxlx
    9

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

    January 26th, 2007 at 1:38 pm


  10. arrow
    10

    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

    February 11th, 2007 at 10:04 am


  11. aral
    11

    Hi Arrow,

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

    February 11th, 2007 at 9:36 pm


  12. Brent
    12

    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.

    March 21st, 2007 at 12:22 am


  13. Chuck
    13

    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?

    September 7th, 2007 at 12:38 am


  14. Rezib
    14

    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”.

    October 6th, 2007 at 6:56 am


  15. PhillC
    15

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

    October 18th, 2007 at 6:30 pm

Leave a Reply

← Gotta love technology! Would you look at that lovely blue sc…
How to never lose any work ever again →