Flash vs. Flex equals Shared Libraries

– taterboy | February 20th, 2010

Filed under: ActionScript 3, Flash, Flex, Tips

SWC are files full of gooey goodness. They are an archive file or class library contianing an swf and xml catelog. You may have used an SWC to integrate a Flex/Flash application with any of the most popular web applications like facebook or yahoo. If not, then what are you waiting for?

I’m not sure what S.W.C stands for, but I do know they are an awesome way to share and distribute code. Everything is in one file, super easy to update, and if a newer version is not compatible with old code, it’s easily revered by replacing the newer SWC with a preivous build.

How To:
For a great tutorial on how to get started building and distributing your own shared libraries from Flex, check this out. http://tv.adobe.com/watch/adc-presents/creating-swc-files/ This video, I think is pretty deep, the swc build stuff starts about 7:20 in, but watch everything and hopefully it will all make scense.

Here is some more light reading (the SWC basics):
http://livedocs.adobe.com/flex/3/html/help.html?content=building_overview_5.html

Flash and Flex Love:
Building code libraries are cool and everything, but the reason I love SWC’s so much is the compatibility between Flash and Flex. It is like a holy union, they way graphic or media elements from Flash can be shared as classes for use in Flex. We use SWC’s for any project with a custom UI, basic skins and advanced visual effects.

The Battle Royal:
There is a growing question about the future of Flash and Flex, especially now that Flex is called Flash Builder (That’s just too confusing for me, so I’ll continue to call it Flex for now). Flex 4 has these new skin classes, Catalyst is getting a ton of buzz and the beta version of Flash CS5 looks to have a more Flex-like coding environment. So, which one will reign supreme? For me that question is hard to answer, I currently start most of our projects in Flash, all of the media elements are imported to build a library of visual/audio components. Any complex animations are created using the Flash Timeline. The decision about which program will be used for the rest of the project is based on how much coding is necessary. Flash CS4′s coding environment is no match for Flex’s, if there are more than a hundred lines of code needed, then Flex wins the day. It will be interesting how much this will change once I get my hands on a copy Flash CS5.

For more information on how to get started building Flex Components in Flash, check out this tutorial. http://tv.adobe.com/watch/adc-presents/turning-animations-into-flex-components

To get the Flex Component Kit for Flash http://www.adobe.com/go/flex_ck_en

For more info on Flex Containers from Flash watch this:
http://tv.adobe.com/watch/adc-presents/creating-flex-containers-in-flash

As A General Rule, No Code:
Using SWCs are a great way for Flex programmers to work with the creative team. Designers can build everything they need in Flash and hand it off as a shared library file(SWC) that drops in the “libs” folder of the Flex project. Flex components from Flash include all the graphics, animation, audio and code. The Flash guys can build complete working components in Flash then hand them off to the Flex team. As a general rule do not include code in your Flex components from Flash. By just providing the visual symbols, the Flex team can code everything and make updates to all non-visual elements as needed. In most cases the Flex team will maintain the app long after the design team has moved on to new projects. The more code that can be updated in Flex, the better, it sucks having to send the SWC back to the design team for code updates that could have easily been done by the Flex team. This seems to be the catalyst approach, allow the designer to build the UI, while keeping all of the code accessible to Flex.

The Big Question:
Besides code, what are the benefist of using Flex components from Flash instead of the, commonly preferred, image files? Packaging and consolidation has merit. Flash also saves out vector graphics which can be easily scaled unlike bitmap files. Scale 9 Grid is super easy to setup in the Flash IDE, just check a box and visually align the grid to the artwork. There are many other custom component and UI opportunities, like animation, that are only available when using SWC’s from Flash.

The Downside:
The creative / non-programmer person on the team may have terrible naming convention skills, using creatively vague names for all these new Flex Components, like naming some elements after Star Wars vehicles or some other nonsense. The designer will have to create a legend file describing all the components and their names. It is also helpful if an swf or image is provided with all the symbols layedout and properly labeled by class name. I would suggest prefixing all of the new component names with the name or abreviation of the project. That way after a few taps of the keyboard in Flex, you can see a nice list of all the class names from the SWC.

Please provide some comments on how you work with Flash and/or Flex. If you know or have a good guess on what SWC stands for, comment that as well.

Technorati Tags: animation, class library, component, Flash, Flash vs Flex, Flex, shared library, swc

3 Comments »

“That’s just too confusing for me, so I’ll continue to call it Flex for now)”

“Flash CS4’s coding environment is no match for Flex’s, if there are more than a hundred lines of code needed, then Flex wins the day. ”

Thats just the point, to avoid the confusion you fell into.

Flex is using the Flex framework. If you don’t use the Flex framework, but built it with Flash Builder, it is Flash not Flex.

Comment by Tink — February 24, 2010 @ 3:10 pm
When talking to the client, everything being called “Flash” is a good thing in Adobe’s eyes. The confusing thing for me is when I tell someone, on the team, I programmed this in Flash, they don’t know if I am talking about an FLA or MXML based application. I use the Flash CS4 IDE with a timeline, drawing tools, and lots of other designer goodies, that to me is “using Flash”. I also use Flash Builder, which has a completely different IDE(Eclipse), Classes and uses the Flex Framework.

Comment by taterboy — February 24, 2010 @ 4:47 pm
[...] Flash vs. Flex equals Shared Libraries | Taterboy.com: Graphics … [...]

Pingback by Fantasy Photo Effect | Stunning Mesh | Tutorialicious.info — April 16, 2010 @ 8:03 am