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

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. _x = _width + Math.random() * ( Stage.width - _width );
  11. _y = _height + Math.random() * ( Stage.height - _height );
  12. _rotation = Math.random() * 360;
  13. var randomness = Math.random()*5;
  14. vX = Math.random() * randomness + 1;
  15. vY = Math.random() * randomness + 1;
  16. }
  17. function onEnterFrame ()
  18. {
  19. _rotation += 1.69;
  20. _x += vX;
  21. _y += vY;
  22. if ( _x < 0 || _x > ( Stage.width - _width/2 ) )
  23. {
  24. vX *= -1;
  25. _x += 2 * vX;
  26. }
  27. if ( _y < 0 || _y > ( Stage.height - _height/2 ) )
  28. {
  29. vY *= -1;
  30. _y += 2 * vY;
  31. }
  32. }
  33. }

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)

Post Metadata

Date
May 21st, 2005

Author
Aral Balkan

Category

Tags


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


  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.



  3. J0u

    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.


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



  5. aral

    Hi Anand,

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



  6. Myriam

    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


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


  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!


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



  10. arrow

    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



  11. aral

    Hi Arrow,

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



  12. Brent

    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.


  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?


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



  15. PhillC

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


Leave a Reply