One problem with Flash development recently is the disconnect between assets created in the Flash IDE and code written in the code editor (Flex Builder, Flash Develop, FDT etc). The code editor has no knowledge of the FLA, so there is no way to list the FLA’s exported symbol linkage ids or the names of movieclips within a symbol instance (sub-clips). This can lead to lots of back and forth between Flash and the code editor, tracking down missing or misnamed symbols and sub-clips.
For AS projects, Flash assets are typically loaded by using ‘Embed’ metatags, using ‘getDefinitionByName’ or using something like Grant Skinner’s FlashLib. I recently found out about an alternative method via a comment on Ian Lobb’s blog, which is to use SWCs.
It turns out that using SWCs solves the above issues for very little extra setup. Using SWCs means the compiler knows about the FLA and gives code completion on symbol names and sub-clips. Anytime the compiler knows about stuff, it’s going to save you debugging time by flagging errors before they happen. Symbols also retain their timeline ActionScript (unlike using Embed tags).
[as] //import symbol from FLA
//Instantiate symbol instance
var clip:MySymbol1 = new MySymbol1();
//access symbol’s sub-clip properties
clip.mcGreen.alpha = 0.5;[/as]
Example Flex Builder code completion:
Where this technique gets really interesting is with Flash Builder 4’s Package Explorer. This allows you to browse inside a SWC and view all exported symbols and sub-clips.
This technique can be used with any smart AS editor. The set-by-step for Flash Develop is here. For Flex Builder you want to do something like this:
- In Flex Builder, create a new AS project.
- In the project folder create a new FLA: ‘assets/assets.fla’.
- In the Flash publish settings, check ‘Export SWC’.
- Create a symbol in the FLA. Set the Linkage id to: ‘assets.MySymbol’.
- Publish the SWC.
- In Flex Builder do Project -> Properties-> ActionScript Build Path -> Library Path -> Add SWC. Enter the path to the SWC (‘assets/assets.swc’) .
- In Flex Builder, edit the main class. Type ‘import assets.’. The symbol name you defined in the FLA will now show as a code completion option.
Anyone know of any disadvantages of using this method?