Compiling Flash CS3 compatible SWC’s with Flex
October 22nd, 2007
Recently I wanted to find out how to compile SWC libraries which could be used in Flash CS3 since I knew it was possible to go the other way using the Flex Component Kit for Flash CS3. As of Flex 2.01, support was added so that Flash and Flex authored SWC’s were compatible (previously I believe the SWC format differed between them). The focus of the update however was on getting Flash authored components into Flex and only in passing was the reversed case mentioned as being supported.
I figured the best starting point would be a normal Flex library project in Flex Builder. After adding a class and compiling a SWC, I dropped it into the Components folder under Flash CS3 to see if it would show up. This folder is usually found here:
C:\Documents and Settings\{username}\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Components\
This is the folder where MXP’s typically put component SWC’s so that they show up in the Components panel in the Flash IDE. Anyway, after dropping the SWC in and refreshing the Components palette I didn’t see anything new. So I was back to drawing board.
After re-reading the quick start guide regarding the deployment of custom Flex components I thought I’d try the recommendation given regarding the creation of a manifest.xml file. I had never done this before because it’s mentioned as an “optional” step and we’ve never done this for any of our libraries at work. Usually if my library project compiles a SWC, I’m happy. From the article:
Manifest files map a component namespace to class names. They define the package names that the components used before being compiled into a SWC file. They are not required when compiling SWC files, but they can help keep your source files organized.
Well it turns out that this was the missing piece. I created a manifest.xml file which listed my component and then updated the compiler settings to point at this file.
Flex compiler settings
manifest.xml
Notice the key part where a namespace is specified as well as the path to the manifest.
After dropping the newly built SWC into Flash’s Components folder, the new component showed up and I was able to drop it into my library!
This brings me to the point that I imagine one may be wondering, why would you even want to do this? Well in my case I was working on creating a MovieClip based component that was aware of some interfaces we use in our framework. This is similar in spirit to the UIMovieClip class that is included with the Flex Component Kit. I could probably create this component using Flash, then point the FLA to the library where our interfaces might live, but I wanted to see if I could do it from within Flex Builder. I think there are a few other reasons someone might want to do this:
- developer prefers to work in Flex Builder (better code completion, familiar environment, etc
- SWC creation could be part of an automated build process via ANT
- easily create a SWC based on other Flex libraries
I think the last point might not apply because I’m pretty sure if you put Flex authored (2.01) SWC’s in the classpath for an FLA, it will be able to see them. I still think it’s nicer to use Flex Builder for this though.
There’s one caveat I should point out. I’ve only been able to create base classes or utility classes so far using this method. If you want to create a view component, let’s say a new video player component, there’s a trick that dates back a few versions of Flash where one has to put something in the first frame of the component MovieClip before exporting it as a SWC from within Flash. This still seems to be the case and if you try to create a component using the method above, add the SWC to the Components folder, then drag it onto the stage, nothing will show up. You will have added the component to the FLA’s library though and this is useful for getting classes into the FLA. Maybe there’s a way around this and I just haven’t explored enough.
Another thing to note. I’ve been told (courtesy of Peter Watson from Adobe) that if you’re using Flex 3, then you need to add the following compiler option in order to create a SWC that works with this method I’ve outlined above.
compute-digest=false
Apparently this prevents the compiler from creating a newer format SWC which is compatible with the new RSL caching mechanism. I had noticed that the SWC’s I created in Flex Builder 3 weren’t working in Flash CS3, so this should help fix that (haven’t tried it yet).
I know some more screenshots or a video would be useful in explaining this so feel free post comments and ask questions. I wanted to post something as soon as I could because I’ve seen this topic brought up a few times in the comments on other blogs. This use case of creating SWC’s which are used in Flash doesn’t seem to be highlighted anywhere in the documentation and I think it could be useful for certain projects.
Currently residing in Scituate, MA and working at 
October 23rd, 2007 at 4:21 am
“developer prefers to work in Flex Builder (better code completion, familiar environment, etc”
An alternative to achieve the above is to create an AS 3.0 project in FB and just use the main class as the document class in your FLA, but be aware that the meta data for embedding assets won’t work when compiling from Flash.
October 23rd, 2007 at 10:34 am
I agree with your three reasons why someone would want to do this from Flex. However, this:
“I think the last point might not apply because I’m pretty sure if you put Flex authored (2.01) SWC’s in the classpath for an FLA, it will be able to see them.”
is only partially true. You can compile against the SWC but the classes are not compiled into your SWF, causing runtime errors, unless the SWF is loaded into a Flex-built SWF that contains the library. It’s a way of creating module SWF, I suppose. Unfortunately, there doesn’t seem to be an option to include the classes.
For my project I created an FLA with MovieClip symbol and associated AS file that referenced all of the classes, the same source AS files as my Flex library SWC, and exported the SWC. It works as a component in Flash and as a library SWC in Flex.
But I like this solution better, because of being able to compile on the commandline and using Flex Builder rather than Flash.
From the “About library projects” section of the Flex help docs it mentions adding “catalog.xml file that is the manifest of the elements contained within the SWF file.” This is the XML file you’ll find in any SWC. The catalog.xml file is already a manifest and is very similar for a Flash-built SWC and Flex-built SWC. Not sure why we need yet another manifest XML file.
It’s too bad FB2 (FB3?) don’t produce the manifest file for us, or that Flash can’t use Flex library SWCs.
October 23rd, 2007 at 4:25 pm
Great article, it helped me creating a swc from a class library so people can use it in the Flash CS3 IDE. Especially the “compute-digest” helped me a lot.
October 24th, 2007 at 1:30 am
As you told, I’m also looking for visual components built on Flex builder and use it in Flash CS3. If you have time to explore on that extend, that would be really great.
Thanks
October 24th, 2007 at 2:56 pm
Hi Tim,
It isn’t completely clear from your post if you’re creating a component to use in Flash or simply a class that can be used in Flash.
What I’m looking for is the ability to use a utility class in Flash from an SWC created from a Flex Library project. I started off thinking that’s what you were trying to accomplish, but you also mention components.
I have a library project that just has some utility classes and have tried including a manifest file, although it’s a little unclear from your post if we need to specify each class as a component. I would prefer to be able to specify one “component”, and, if need be,have a class that references the other classes, to ensure they’re included. That way you can simply include the library component in the FLA instead of including every single class separately.
Does that make sense?
November 6th, 2007 at 3:00 pm
Brilliant. Good work. You’re right, a lot of people are wondering how to do this but don’t know how.
This is a great solution for libraries coded up in Flex that you can use in your Flash CS3 projects.
January 25th, 2008 at 12:35 pm
Thanks, this is a cool method to reuse the AS3 code we’ve been doing in Flex. I can vouch for the Peter Watson’s compiler option fixing the problem.
February 13th, 2008 at 1:32 pm
If an SWC has been compiled with -compute-digest=true, there is still a way to use it in Flash. (Like the 3.0 version of rpc.swc)
After looking at the differences between SWC version 1.0 (Flex 2.0.1) and 1.3 (Flex 3.0.1), I realized that one can convert a 1.3 SWC back to 1.0 simply by removing the tag from the catalog.xml inside the swc and zipping it back up.
I’ve tested this with the 3.0 version of rpc.swc, it will load into Flash CS3 9.0.0.
The same trick does not work for framework.swc, however. As far as I can tell, this has to do with differences in the library.swf itself.
Looking forward to the next patch for Flash making it compatible with SWC 1.3!
February 13th, 2008 at 1:34 pm
<digests> tag was the tag I referred to above. It seems it was rendered into HTML or taken out.
February 24th, 2008 at 5:17 pm
Hi Tim,
Thanks for this post, it’s encouraging, but I didn’t have much luck with FB3.
I just tried building the new version of PureMVC (all actionscript 3 classes, no visual components) as a swc from within there with -compute-digest=false as a compiler argument. I already have the manifest file in place, so I hoped this extra step would make it work with Flash CS3, but I could not make it show up when I placed it in the components directory.
Hopefully their will be an answer for this by the time Flex 3 is released. For now the swc will be for Flex clients only. Based on your description of the compiler option, I’m afraid that there’d be problems with using the framework with modules otherwise.
Again, thanks. Please post again if you make any headway on this front with FB3/CS3.
-=Cliff>
March 20th, 2008 at 5:36 am
To get a Flex ActionScript library project into Flash, you need to compile the SWC (as usual). This SWC needs to be put in the classpath of the FLA file and this will enable Flash to perform type checking. Now to actually incorporate those classes into your Flash file at runtime, you need to create a class in which you make references to the classes you want to use, then compile that class with mxmlc to an SWF. Finally, you need to load (with an instance of Loader) the SWF in the same application domain of your Flash file (i.e. load with new LoaderContext(false, ApplicationDomain.currentDomain)).
March 30th, 2008 at 5:43 pm
Thanks Tim. This works perfectly in 2.01 projects, but I still can’t get it working in Flex 3, even with the compute-digest=false. Did you have any more luck with that?
April 15th, 2008 at 1:28 pm
Hi Tim,
Same thing here, I can’t make it work for Flex 3.0. Do you have anything new on that issue?
Thanks
May 4th, 2008 at 8:45 pm
Sorry for the lack of replies on my part. I logged into wordpress and realized I wasn’t getting my email notifications for comments. I’ll try to respond to a few things here:
Derek Vadneau
“It isn’t completely clear from your post if you’re creating a component to use in Flash or simply a class that can be used in Flash.”
Derek, I was creating a component to use in Flash. It served as a base class just like UIMovieClip does but I wanted it to show up in the component palette just like UIMovieClip does. I have found out that you can simply point an FLA at a SWC in the classpath and use classes in the SWC, but in my case we were creating a MXP for 3rd party use.
Tink
Going the AS3 project route wasn’t an option. See what I wrote above. I realize I wasn’t very clear in my post regarding my exact situation. My goal was to create a MXP which contained a SWC that I authored in Flex (for the reasons stated above). I’m pretty sure this is how Adobe created the SWC in the Flex Component Kit for Flash.
Cliff Hall
I’d like to look at this, I’ll email you. I would think we could get this to work.
Keith and Rene
Nils said the compiler flag worked for him. I’ll give it a try with the project I originally used this approach for.
May 22nd, 2008 at 6:27 pm
Tim, thanks for the post! It was very thorough and saved us several hours of headache. Thanks again!
June 19th, 2008 at 10:22 am
Did you ever get anywhere with the “visual” aspect?
I managed to get automate the whole patching of a Flex SWC to work in CS3 - I’ve gotten LivePreview working too.
But whenever I run from within CS3, any components I dropped in are dropped from the SWF. Strangely, inspectable parameters *and* LivePreview works… all very bizarre.
I should mention. LivePreview works - but the DiplayObject size information is completely lost, and everything drag-drops at 500 x 375.
I’m going to experiment with some very simple visual only classes and see whether with the aid of a hex edit I can find out what is going on. The ABC dumps for library.swf are a little different from CS3 and Flex:
—- Flash
size [Rect -480 -840 1160 800]
frame rate 12
frame count 1
FileAttributes 4b 0%
SetBackgroundColor 3b 0%
undefined 11b 0%
DoABC2 792b 1%
—- Flex
size [Rect 0 0 10000 7500]
frame rate 24
frame count 1
FileAttributes 4b 0%
77 (invalid) 458b 0%
EnableDebugger2 31b 0%
DebugID 16b 0%
ScriptLimits 4b 0%
SetBackgroundColor 3b 0%
ProductInfo 26b 0%
DoABC2 7503b 10%
—————————————-
Disappointing so far. Flex exports share ready classes but not shapes. Flash exports share ready shapes and no classes.
Pfft.
June 25th, 2008 at 9:26 am
Great info, Tim. It helped a bunch. Thanks again!
July 15th, 2008 at 10:28 am
Hi Thanks for the post, please let me know how to access the Flex component in Flash CS3
Regards
Balaji
July 15th, 2008 at 11:46 pm
I had created one library file in Flex and that swc file is working in
Flex application..
now that component has to work in the Flash CS3,
Let me know how to do that,,
or send me some URL for doing that.
Thanks and regards
Balaji
July 21st, 2008 at 3:33 pm
You saved me a lot of compile time, thanks!