Flash CS3 / Flex 2 butterflies (part two)
As you’ll see in this new sample app, I’ve been having fun playing with Flex Component Kit for Flash CS3. The new app has some important features that my sample app for part one did not have:
- The movie clip in the FLA extends a custom class (defined, of course, in a separate AS file).
- The SWC dispatches a custom event that is handled in the Flex code.
- The SWC exposes a public API (properties and methods) that is accessed from the Flex code.
Overall, there is more interaction between the SWC and the Flex app, and yet at the same time they are more loosely coupled (the Flex app no longer specifies the view state of the SWC).
In the course of putting this demo together, I ran across a number of bugs and gotchas. These may be documented elsewhere, but I’m listing them here for convenience:
1. At one point, I placed the FLA and AS source in the root folder of the Flex app, thinking it would make distribution simpler. I did not receive any error message, but the Flash component simply refused to appear in the compiled Flex app. Lesson: don’t put your Flash source in the Flex root!
2. When you use external AS files in your FLA, you need to manually set the source attachment parameter in Flex to point to the root folder of your Flash AS files. In Flex Builder, you do this like so:
Open Project Properties -> Flex Build Path -> Library path
Expand your SWC by clicking on the plus sign next to it
Click on Source attachment and click Edit (or double-click on Source attachment)
Enter the path to your Flash source files (or click Browse to navigate and select)
3. In the AS file for the Flash movie clip class, it’s necessary to import flash.display.MovieClip even though you don’t use it in the class. If you don’t import it, you’ll get a compiler error in Flash and an utterly unhelpful error in Flex (see #4).
4. If there’s a problem with the Flash component, you are likely to get a message from the Flex compiler telling you that an “internal error” has occurred. This, of course, is the sort of error message that’s lots of fun to see, because it tells you absolutely nothing yet prevents you from making any progress in your work. Yippee!!!
5. When your Flash SWC movie clip is based on a custom class, you need to take an extra step after running Commands -> Make Flex Component: In the movie clip’s Symbol Properties, the Base class needs to be changed back to flash.display.MovieClip.
6. Flex Builder’s Auto-complete did not detect the custom event defined in the SWC base class, so I had to type it in by hand (ugh!). However, Flex seemed to recognize the event name after it was typed; I didn’t get a compiler error or warning.
7. This one may seem obvious to you, but I didn’t think about it till I ran afoul of it. In your Flash SWC movie clip, you may use a boundingBox to establish your component’s size inside Flex (so that Flex doesn’t keep resizing it when it animates). Well, your boundingBox must be on the stage for the entire timeline of movie clip, or Flex will do really weird things with your component.
Overall, the integration is still more cumbersome and buggy than I would like, but there is reason to hope it will improve as Flex 3 moves through its Betas toward production. Meanwhile, the Flex Component Kit is usable, and it provides a useful tool for building very cool applications.
You can view the demo app here. Usually, all you need to do is right-click on the app to access the source; however, the SWC seems to be interfering with that, at least with version 9.0.28 of the player. If you right-click a few times and can’t get the “View source” option, then click here to get the source. Enjoy!
(In case you’re wondering, the demo app was inspired by an old Far Side cartoon that showed a scientist catching a butterfly and asking for a jar of ether.)
Update: Links updated on 1/5/2011
Reader Comments
good work man
Thanks for the helpful info! The tip on the source attachment property helped me get my Flash component working in Flex. I now have another problem that is somewhat related and wondered if you’ve come across this in your work.
The component worked fine when the swc and source files were in the same directory, well, once I specified the directory using the source attachment property. But I recently changed the filed structure to make more sense in my larger flex app. I changed the package structure in my classes accordingly, along with the base locations in my fla and re-compiled the swc.
All was well in flash, but I could not get it working in flex. I have tried to add the swc in the library build path and edit the swc’s source attachment property to point to the root directory of my classes, but it seems to be ignoring the package structure.
Maybe I have the wrong idea of how to use the source attachment property, but I’m kind of thinking of it in the same way I think of the class path in flash. So I’m expecting the swc to be able to find the necessary classes in the source attachment directory via package declaration. But it doesn’t seem to be finding the classes at all. Any ideas as to why I can access my class files in flash, but not in flex?
Thanks,
Erica
@Erica,
Without actually seeing your project setup, I can’t really tell what the problem is. A couple of ideas do come to mind, though:
1) Naming conflict. Could there be a conflict between your Flex package/class names and those in your Flash SWC that might confuse the compiler?
2) The source attachment property should point to the root folder that contains your packages. For example, suppose your Flash AS classes are in a package called “com.foo”, and they reside in a directory structure that looks like this:
flash_files
|_ com
|_ foo
You would point the source attachment property to the “flash_files” directory.
Those are the ideas that come to mind immediately. If you would like to discuss it some more, feel free to contact me directly (use the contact link at the top of the left nav panel or in the footer).
can you please update http://ria.eyestreet.com/~jrobson/blog/butterflies_2/srcview/index.html link.