Where’s the MovieClip in Flex?
Saturday, April 11th, 2009The Transition
Making the transition from AS 3.0 Developer to Flex Developer has been a bumpy ride. I can best describe it like moving to another country that’s similar but different enough to feel not at home. My go-to tricks that were oh so reliable don’t exist. Common items have different names. Routine tasks have an extra wrinkle. From the outside it appears like it’s all the same, but the details are quite different. Similar results, but very different paths are traveled.
MovieCilp Love Story
One of the hardest things for me was adjusting to life without MovieClips. When I first started Flex development I liked the idea of components. I was drawn to the Horizontal and Vertical layout schemes that are oh so (wait for it…) very FLEXible. But I missed the MovieClip. It was my first love and it had it all. It had frames, it could be instantiated, and it was click-able. What more could you want? But now we’ve both graduated and have moved on to other things. I’m doing more development while she’s concentrating on time lines and animations.
Reunion
Well I’ve recently had a breakthrough and I can thank Joey Lott and Chafic Kazoun for helping me get there. I’ve been looking at Flex Development through the eyes of Flash instead of embracing the Flex way of life. My first steps was to let go of the name MovieClip and look for it’s functionality in other places.
At it’s core the Application tag is really just a 2 frame MovieClip with sub clips containing assets that can do all sorts of things. Frames are really similar to states. Instantiation of components is done much the same way. I was getting along okay, but I was still hung up on a few stupid little details.
Can I Draw In Flex?
Although I’m embarrassed to share this, I’ve been trying like hell just to draw a simple circle and add it to the display list in Flex for longer than it should have taken me. I thought I’ve tried everything, but my problem was that I was following the AS 3.0 diagram. I started at MovieClip. Ennnnnnnttttttt! Wrong answer. Then I progressed up the tree to Sprite. Sarrrrr-reeeey! Then up to DisplayObjectContainer… ummm graphics aren’t available here. DAMN! WTF? How can something built on top of AS 3.0 not allow me to create something simple like a circle?
Potaeyto Potahhto
Then I found it. Flex uses a different structure. Instead of MovieClip it’s called Container. See for yourself.
-
-
-
<![CDATA[
-
import mx.core.Container;
-
private var mc:Container = new Container();
-
-
private function createCircle():void{
-
this.addChild(btn);
-
-
mc.graphics.beginFill(0xFF0000)
-
mc.graphics.drawCircle(0,0,40);
-
mc.x=75
-
mc.y=100
-
this.addChild(mc)
-
}
-
-
]]>
Container is built on a similar structure that roots in something called a FlexSprite. The big differences stem from the fact that most objects in Flex generally have some sort of chrome. Flex is geared for prototyping functionality very quickly, not necessarily graphics and animation. Although you do have the ability to create graphics and animation… sort of. Flash is still best suited for that sort of thing. Flex’s makes it’s living on functionality though panels, widgets, components, and states. Container is one of the building blocks used to create anything from a Box, to a Canvas to even an Application.
Finding container was a big key piece to bridging my AS 3.0 and Flex development together.
### AMENDMENT ####
I’ve just recently found out about custom component development which bring Flex and AS 3.0 much closer together. You can have access to Object and instantiate it. I’ll post about it as soon as I can.
