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).
Example usage:
[as] //import symbol from FLA
import assets.MySymbol1;
…
//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?
Latest Tweets
This is exactly how I work in FDT. Its a nice workflow. http://shaun-oconnor.com/2009/01/15/flash-development-design-work-flow/
Nice one! I’ve used swc made by Flex Builder to share APIs, but never from Flash. One tip – if you drop the swc into the ‘libs’ folder, the swc is automatically added to the project – no need for step 6.
One disadvantage: now the designers/animators crappy naming schemes invade the code too.
I use to have the asset-names defined as string-constants (use a JSFL to generate this) and use a getDefninitionByName-type of lookup (eg: the assets-names are class-members). But by using this SWC method they become full class-names(!) that will clutter FDT/Flash-Builders’s auto-complete functionality with all kinds of horrible stuff.
And using SWC’s ties the assets hard to the code (inseperateble, so it’s harder to load only certain assets).
Another disadvantage to this method is that Flash can strip out all of the actionscript from the timelines of your symbols when it makes the swc. This seems to happen when you go over a certian number of symbols in the swc, or possibly when the swc goes over a certain file size. I’ve encountered this bug with CS3 and CS4.
As a rule I don’t put actionscript on the timeline but I think stuff like stop() and gotoAndPlay() is acceptable for controlling animations. When Flash has decided to strip out the actionscript, there’s nothing much you can do about it other than resorting to addFrameScript to put it all back in again.
I think that it’s a shame that this bug exists because using swcs in this way is far neater than using swfs to import assets.
@Macaca – if the designer is naming the FLA symbols, you definitely need to agree on a naming convention. I usually use something like this: Symbol linkage ids use camel case and are in the ‘assets’ package (assets.MySymbol). Sub-clips use reverse polish notation (e.g. mcClip , txtLabel).
@Al – I’ve not experienced Flash stripping timeline code using this method. Can you reproduce your bug?
SWC’s are great, aren’ t they? I use Flash CS3 to “skin” my AS3-based components. The rule I use is: don’t mix CS3 animation with as3 code. IOW, any symbol I import from the SWC should not have any animation, and all of the visual elements for the symbol should be on the first and only frame.
Bending this rule is fine, but I find that tweening a named Object (like a MovieClip) on the timeline can cause unexpected behavior when you try to access the object from your code.
I tried using this method and the .abc files for my assets in my .swc file end up in the (default) package instead of a package called assets. Is this because I’m using Flash CS3 to create the SWC? If not, how do you specify a package. Thanks!
@john – you set the package name in the FLA symbol’s Linkage Id. Use something like ‘assets.MySymbol’
Nice one! Thanks for sharing!
I have been working with that technique for some time. One drawback is that the debugger in fdt or Flex/Flash Builder will not have acess to the code in the swc. So if you get runtime-errors in the swc, you will have a hard time debugging them. One way around the problem is to only use the classes in flash (the swc) to define graphical stuff. It also solves another issue, that you have tor recompile ypur flash-project to add new features. Instead, extend the class from the swc with your logic, or use composition, as you can do in f. ex. box2d. (Have a variable in you class that handles the logic, that contains the Sprite or MovieClip)
/e
I think a good approach to this is to have one FLA dedicated to produce a simple library SWC and have there just what will work fine. Not the main project but something like “resources.SWC”…
Very good.
Generally what I do is have two FLA files. One that holds the Symbols, and the other is just a Container. However, if I change the Symbol FLA to a SWC, would that not mean that the loader on the Container FLA would be pretty much useless, as it would have to load the SWC on frame 1?
And what about runtime loading of external SWC asset libraries? Is there anyway of adding the SWC to the build path, but changing ‘merged into code’ to ‘external’ in order to have access to the library definitions when developing but without the library being compiled into your swf?
I’ve been trying to do this for the longest. Thanks!! Question: What if you wanted to create a class that will encapsulate various methods and procedures for each component in the SWC. Should I extend the class:
import assets.MySymbol1;
public class CustomMySymbol extends MySymbol1
Or is there a better efficient way? Maybe using my Custom Class as the Base Class along with the Linkage ID to the assets package?
Great! Thanks!
But another question. How can i use a symbol from swc in the Tree function “iconFunction”? This function requires a return value of Class. How can I cast a swc symbol to Class? Every try faild with an error! Do you have a hint for me?
[…] preferable workflow of Flash IDE and Flex Builder/Flash Builder/FlashDevelop integration. See also Airtightinteractive blog for more information about this workflow and Geewa blog for strategy using the […]
[…] preferable workflow of Flash IDE and Flex Builder/Flash Builder/FlashDevelop integration. See also Airtightinteractive blog for more information about this workflow and Geewa blog for strategy using the […]
After exporting assets.swc within SWC, I see the light package and event package.
Where I’m wrong?
Its a fine approach. But designer/developer should follow a class naming approach in Flash Authoring tool. So linkage property class should be something like, “com.riageeks.Yourclasshere”. If you are making use of Flash Assets in your Flex Project, you can also make use of “Flex Component Kit for Flash”, so now, all your MovieClips, become UIMovieClip, and you can directly add them to any container e.g. Panel, Canvas, VBox, HBox etc. without wrapping them in a UIComponent and adding child to several other UIComponents.
It should also be noted, that, while SWC files reduce a lot of stress for programmers who code on the time line and sometimes want to use an IDE for other parts of programming, they relieve NO stress for users that purely code in classes.
For example:
Lets say I have a MovieClip of a dog in my library. Inside the dog MC, I have an MC with an instance name of tail_mc.
In the library properties for my dog clip, I have set the class to assets.MyDog. I publish the movie, producing an SWC and then I go back to Flash Builder to start coding stuff for the dog to do.
We can
import assets.MyDog;
and then
var theDogInstance:MyDog = new MyDog();
But, In order for me to code stuff for my MyDog class, I want to create a class in my assets package called MyDog (remember I don’t wanna use the time line.) But, if I do this, that SWC and the tail_mc will no longer appear in my code hints. And, when I type tail_mc inside the MyDog class, Flash Builder barks at me with errors saying that the tail_mc may not have been properly initialized.
Of course, these are merely cosmetic because the source will compile just fine. I’ve gotten to the point that I just use this[“tail_mc”] to avoid having to see these errors. And when referencing tail_mc from outside the package I would do something like theDogInstance[“tail_mc”] to avoid it again.
I guess the rant I’m getting off on here is “When will Adobe truly integrate the IDE and the Flash Authoring Environment?”.
SWC files are not the answer if you are writing classes for your MovieClips, but are very useful if you have a clip that you won’t need to write a class around or you like programming on the time line. I guess you could just put those in the assets package in their properties and they would work great in the IDE.
I think that this no longer works so simple with flash builder 4
First you have to refer to the flash asset in the same way
FlashIDE > MC > Class > Custom Comp
export the swc and add it to the class path in fb4
ok so far
now we seem to need to place the tag inside the
Declarations are supposed to be for non visual items ? Question raised…
ok so it compiles but the runtime error is that of the wrong type a coercion error I think it needs to be UIMovieClip so that flex can handle it…
I’m stuck on just trying to get a simple basic asset from flash to display using flex 4 ! And I cant find anything simple out there I have to jump through hoops, this is not good.
I have the same issue as Jerome Doby. There needs to be a way to cleanly apply/modify class code written in FB to movieclips created with Flash IDE, while referencing movieclips within those as well without errors flying.
[…] http://www.airtightinteractive.com/news/?p=327 […]
[…] blog.nightspade.com/flex/2010/02/embedding-asset-at-compile-time-in-pure-as3-project/ http://www.airtightinteractive.com/news/?p=327 blog.geewa.com/post/2009/03/16/Integrating-Flash-Professional-and-Flex-Builder-Using-SWC.aspx […]
[…] http://www.bit-101.com/blog/?p=853 http://www.bit-101.com/blog/?p=864 http://gskinner.com/blog/archives/2007/03/using_flash_sym.html http://www.airtightinteractive.com/news/?p=327 […]