Up till now I’ve worked with designers who have given me images and guidelines on how to use them in Flex. So I would get a load of PNGs, and we would sit down together and toy with the animation that would use them in the application. Now I’m confronted with something a bit more ambitious : Using Flash objects and communicating with them. This includes stuff like comboboxes designed in Flash. I’m working with this guy, take a look.

This should be easy but somehow isn’t. As I understand the upcoming Flash Builder will ease some of the pain. In the meantime, I’ve spent quite a bit of time figuring out how to get things going with a minimum of a code and a maximum of help from the IDE. The best method for this is for the designer to do his work in Flash, and export all his elements in a Flash library. You may have seen these around, their file extension is .SWC. These files are actually zips which contain 2 things : the actual resources, like a SWF, and a catalog file describing what is inside.

If you import this SWC file in Flex, the Flex compiler has access to the exported objects contained in it, and they show up in the auto-complete dialog. If for example the Flash designer exports a  « Banner » clip, then you can use Banner directly in Flex. The main  problem is that you can’t include these in your typical Flex visual object. If you try to add the banner to a Flex object using the addChild method as you would with another Flex object, you will get the following compiler error :

TypeError: Error #1034: Type Coercion failed: cannot convert InscriptionTitre@d1ba4c1 to mx.core.IUIComponent.

There is however a workaround for this. You have to use a Flex object as a wrapper. The one I’ve found that works the best is mx.controls.Image. In MXML you would do the following :

<mx:Image source=”{Banner}”/>

Image recognises Banner as a static resource, instanciates it and shows it. That’s already a nice start. But what if you to do something which needs some interaction ? Suppose you have an animated banner, and you don’t want the animation to start straight away, but only when you call the play() method on it. Let’s call this AnimatedBanner. This code won’t cut it :

<mx:Image source=”{AnimatedBanner}”/>

This fails you because you don’t have a pointer to the AnimatedBanner instance. So what you can do is the following :

private var _animatedBanner :AnimatedBanner ;

In your MXML :

<mx :Image id= « animatedBannerWrapper»/>

In your init function :

_animatedBanner = new AnimatedBanner() ;

animatedBannerWrapper.source  = _animatedBanner ;

Voila !

In this way, when you are good and ready, you can call _animatedBanner.play() ;

There are a couple more issues that could use addressing in a follow up post, but that should get you started.