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. <movie width="320" height="240" framerate="30">
  3. 	<background color="#ffffff"/>
  4.  
  5. 	<frame>
  6. 		<library>
  7. 			<clip id="spheres" import="library/spheres.png"/>
  8. 		</library>
  9. 	</frame>
  10. </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:
  1. class Application extends MovieClip
  2. {
  3. 	var tfCaption:TextField;
  4. 	
  5. 	// Clips attached dynamically from Swfmill library
  6. 	var mcSpheres:MovieClip;
  7.  
  8. 	var sW:Number = null; 	// Stage width
  9. 	var sH:Number = null;	// Stage height 	
  10. 		
  11. 	private function Application ( target )
  12. 	{
  13. 		// Link movie clips to classes
  14. 		Object.registerClass ( "spheres", Particle );		
  15. 		
  16. 		// Assimilate the target
  17. 		target.__proto__ = this.__proto__;
  18. 		target.__constructor__ = Application;
  19. 		this = target;		
  20.  
  21. 		Flashout.log ("Application initialized: " + this );
  22. 		
  23. 		// Store stage dimensions for easy look-up
  24. 		sW = Stage.width;
  25. 		sH = Stage.height;
  26. 		
  27. 		// Draw border around the stage
  28. 		lineStyle ( 1, 0x000000 );
  29. 		moveTo ( 0, 0 );
  30. 		lineTo ( sW, 0 );
  31. 		lineTo ( sW, sH );
  32. 		lineTo ( 0, sH );
  33. 		lineTo ( 0, 0 );
  34. 		
  35. 		//
  36. 		// Create a caption
  37. 		//
  38. 		var captionTextFormat = new TextFormat();
  39. 		captionTextFormat.size = 12;
  40. 		captionTextFormat.font = "_sans";
  41. 		
  42. 		var captionText:String = "Made with FAMES (FAME + Swfmill)";
  43. 		
  44. 		var captionTextExtent:Object = captionTextFormat.getTextExtent ( captionText );
  45. 		var captionWidth:Number = captionTextExtent.textFieldWidth;
  46. 		var captionHeight:Number = captionTextExtent.textFieldHeight;
  47. 		var captionX = sW / 2 - captionWidth / 2;
  48. 		var captionY = sH - captionHeight;
  49. 		
  50. 		createTextField( "tfCaption", 10000, captionX, captionY, captionWidth, captionHeight );
  51. 	
  52. 		// Write caption text
  53. 		tfCaption.text = captionText;
  54. 		
  55. 		// Add ten particles
  56. 		for ( var i = 0; i < 10; i++ )
  57. 		{
  58. 			// Attach a sphere clip
  59. 			attachMovie ("spheres", "mcSphere", 1000 + i );
  60. 		}
  61. 	}
  62. 	
  63. 	static function main ()
  64. 	{
  65. 		// Create an Application instance and 
  66. 		// have is assimilate _root.
  67. 		var test:Application = new Application( _root );
  68. 	}
  69. }

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. {
  3. 	var vX:Number = null;
  4. 	var vY:Number = null;
  5. 	var randomness:Number = null;
  6.  
  7. 	function Particle ()
  8. 	{
  9. 		Flashout.log ( "Particle created: " + this );
  10. 		
  11. 		_x = _width + Math.random() * ( Stage.width - _width );
  12. 		_y = _height + Math.random() * ( Stage.height - _height );
  13. 		
  14. 		_rotation = Math.random() * 360;
  15. 		
  16. 		var randomness = Math.random()*5;
  17. 		
  18. 		vX = Math.random() * randomness + 1;
  19. 		vY = Math.random() * randomness + 1;		
  20. 	}
  21. 	
  22. 	function onEnterFrame ()
  23. 	{
  24. 		_rotation += 1.69;
  25. 		
  26. 		_x += vX;
  27. 		_y += vY;
  28. 		
  29. 		if ( _x < 0 || _x > ( Stage.width - _width/2 ) )
  30. 		{
  31. 			vX *= -1;
  32. 			_x += 2 * vX;
  33. 		}
  34. 		
  35. 		if ( _y < 0 || _y > ( Stage.height - _height/2 ) )
  36. 		{
  37. 			vY *= -1;	
  38. 			_y += 2 * vY;
  39. 		}
  40. 	}
  41. }

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)

Comments