I’m not sure how many people are aware of this technique. You simply export you flash movie as a swc, exporting some symbols as classes, and then link the swc when compiling you AS3 or Flex project. I didn’t find it documented anywhere, and instead found many other laborious hacks for doing this, involving loading swfs as ByteArrays. This is much simpler.. it may look like a lot of steps, but most of it is stuff you would be doing anyway, as a Flash designer / developer.

Flash IDE to Actionscript 3

Part One : In Flash IDE

1. Open ye olde Flash IDE (in my case CS3)
2. Draw some stuff on stage
3. Select and hit F8 to convert to symbol
4. Select MovieClip for type and ‘export for actionscript’
5. Enter the class name you want it exported as, eg. Smiley
6. Make sure File > Publish Settings ‘export swc’ option is checked
7. Publish - you should see a .swc with the same filename as your .fla

Part Two in ActionScript

1. In your favourite ActionScript development environment… create a class which extends Sprite
2. Create a new instance of the class you exported in the IDE
3. Add that instance to the stage
4. Save - mine looks like something this…

    package 
    { 
        import flash.display.Sprite;
        public class SmileyTest extends Sprite
        {
            private var smile:Smiley = new Smiley();
            public function SmileyTest()
            {
                addChild(smile);
            }
        }
    }

Part Three - compile

Use whatever you use normally, but make sure you add the .swc to your library path, eg.

mxmlc --library-path+=MyFlashLibrary.swc FlashAssetTest.as

When you run the swf you should see you expected graphic item show up on stage. Yay!

Using Timeline Scripting and Tweens

Since you exported a MovieClip, you have access to the MovieClip API in ActionScript, including such old favourites as ‘gotoAndPlay()’ etc. So after you created your symbol in the IDE, you can go into it and do animation on the timeline, make some tweens, set up some frame labels, and control it all from within you ActionScript class. Who says the timeline is dead ! I can see this being very useful for easy animations in games, playing sounds etc.

Getting a Sprite

Now you may not be interested in that, but you may want to save a few bytes by using a Sprite instead of a MovieClip. No problem! Just change the export type to Sprite instead of MovieClip, and you will see the filesize drop slightly, and presumably runtime memory usage will also. Unfortunately it doesn’t seem to work for Shape.. the IDE sets it back to MovieClip.

Flash IDE to Flex

Same steps in IDE except you’ll need to change the export class to mx.flash.UIMovieClip. Then you can use it in a mxml file such as this

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" >                  
<local:Ufo />        
</mx:Application>

There is a extension for the IDE called the Flex Component Kit but as far as I can tell, it simply automates the settings outlined above (setting the export class is the only setting which is different for the plain ActionScript export). I guess it will save you typing the export class type = mx.flash.UIMovieClip.

That’s all. I’ll attach a zip of my files I was using to test this, in case you get stuck. I think this workflow would be really useful for collaboration between designers and developers, as the developer can work on the logic of the app, and just update the .swc of graphics assets as they are updated. I’m just thinking it will help me crank out some game graphics by drawing them in Flash (or Illustrator and importing them into Flash IDE) and then using them in an ActionScript project with my favorite coding IDE instead of coding in the Flash IDE.

update*

I just found this free excerpt from Colin Moock’s Lost ActionScript Weekend series, with a video tutorial on how to do this.