Ahmed Nuaman Freelance Designer and Developer

So after my tutorial on Flashtuts+ (Quick Guide to Creating and Using SWCs), I’ve had a few emails and comments about the usage of SWCs.

So, after responding to them individually, I’ve compiled this post so you guys can see what a SWC can help you with and what it can’t.

Quick usage with visual assets

So I’ve just gone and draw a shape in the Flash IDE like so:

Now I then convert this shape to a symbol (that’s by pressing F8, or going to Modify > Convert to symbol, or dragging into the Library panel) and when it asks me what type, I specify “MovieClip” and call it “RedCircles”. I then make sure that I tick the box that left of the “Export for Actionscript” label. This will mean I can use it in my code.

And finally, I open up the publish settings of my FLA (by going to File > Publish settings; the keyboard shortcut never works for me, damn IDE) and make sure that in the “Flash” tab under “SWF settings” I tick “Export SWC”.

Ok, so now we’re ready to export our SWC. Make sure you’re exporting it to a place where your compiler or IDE (such as Flash/Flex Builder or FDT) can access it. With IDEs, you normally have to tell the compiler that the SWC is there, this is quite simple, and there should be plenty of docs out there to help you.

So know you’ve created your shape, added it to your development environment, so now let’s add it to our application. Remember, our SWC assets (whether they be MovieClip, Button or Bitmap) are display objects, that means they are added to a subclass of the display object class, otherwise that class doesn’t have the ability to add children.

So, we add the asset like so:

Which gives us:

Simples eh? Not only can you add just MovieClips, but you can also add buttons with over, down, etc.. states and Bitmaps too. It’s quick a nice workflow between the developer and the designer.

How about extending that asset’s class?

Right, many ask how to do this, and many more ask why. But the simple truth is that yes, you can extend a SWC’s asset, and the reason you may want to is to enable stylings, resizing or just do a bit more. So, for example, when you customise visual components in Flex, you can add the component, whether they’re classes, or links, and then you also have the option to add a component class. This class acts as a mediator between the component you’re styling and the asset itself. It can, for example, set its height and width, add children to it, etc… For more info, read up on my post about styling Flex components.

So, let’s assume that you want to extend the SWC asset to change the width, so create a new class, call it “RedCirclesExtended” for example, and paste in the following code:

All we’re doing here is changing the asset’s width to 200. Now, a lot of people get confused here, especially about how to reference the class. This is how you’ve got to think about it:

1. Your asset exists on frame 1 of your application
2. Your SWC’s visual assets extend the display object but have no class path of their own
3. Therefore your SWC’s visual assets are accessible by just calling their class name without having an import path

Please note how I’ve mentioned them as your visual assets, as a SWC can also be formed of coded classes that may (well should) have a class path defined. And remember, SWCs aren’t linked into your application, they’re actually baked in.

So, now we just update our main application file like so:

And that gives us, drum roll please:

So, there we have simply extended the visual asset before we used it in our code. This applies for both Actionscript and Flex applications.

So what about work flow?

Well like I said, this is such a good work flow: the designer is confined to doing the assets in the FLA, you then tell them what you want the assets to be called. Now like I mentioned earlier these visual assets exist at the top of the class path, so frame 1. I always tell my designers to follow a strict naming convention:

Bitmaps start with “BitmapAsset” and then the identifier, and then the variable, such as size or colour; so a logo would be: “BitmapAssetLogoBig”
• Buttons start with “ButtonAsset” and again, using the same convention as with Bitmaps, we get: “ButtonAssetEmailUsSmall”
• Text Fields start with “TextAsset” (of course, they’re confined to MovieClips, but ones that contain TextFields only) and again, using the same convention as with Bitmaps and Buttons, we get: “TextAssetHeaderLarge”
• Now with MovieClips, it’s a bit tricky. Some just see MovieClips as what they are, but they are complex things, for example, a MovieClip could just be a vector shape, or it could contain text, buttons and animation, so I’ve got a naming convention for that too:
  • If the MovieClip just contains one set visual asset, such as a vector shape or combined shapes and bitmaps that aren’t interactive or animated, it then is specified as a “SimpleAsset”, for example, “SimpleAssetTopLogoLarge” could contain your company’s logo as a bitmap and some copy as a textfield. It’s not interactive, nor animated.
  • If a MovieClip contains interaction, such as a button, or animation, it’s then referred to as a “MixedAsset”, for example, “MixedAssetTopMenuWide”

I know some of you are looking at this think “What the frick…” but honestly, this way it saves you overwriting any classes and programmatically constructing the visual side of your application without having to remember irregular class names for assets.

So I hope this has helped, tell me if there are more questions.