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

Add Your Comment

Spam Protection by WP-SpamFree

FAMES: FAME + Swfmill = Fully open source flash

  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.

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

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

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

    Anand
  5. Hi Anand,

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

    aral
  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

    Myriam
  7. FlashCodersBrighton » Blog Archive » installing FAMES: a user’s guide
  8. 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
  9. 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
  10. 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
  11. hi 2 all.
    hello world! It is nice site. Keep working!
    best regards
    i found you here http://google.com ^^

    marionxlx
  12. 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
  13. Hi Arrow,

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

    aral
  14. 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
  15. [...] FAMES: FAME + Swfmill = Fully open source flash [...]

    Open Source Flash Guru « it.guy.kelly
  16. 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
  17. 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
  18. If you add -cp to the MTASC additional tab when you hit compile this will tell the compiler where to find Particles.

    PhillC
  19. 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
  20. 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