How I became a Flex Addict - Part 2

Sorry this took me longer than expected. I had a busy holiday season with lots of family house guests. As promised I’ve recompiled my first project in Flex 3 with view source enabled. I’ve added the new project to the bottom of this post.

Let me first give credit to the reflection component (Reflection.as) and the moving tooltip (FXCTooltip.as). The reflection component was written by Ben Stucki and the tooltip component was written by Maikel Sibbald.

Looking at the code you can see my first application didn’t produce the cleanest code as I was learning and hacking around anything I didn’t quite understand yet. You’ll notice the door transition is not really a true reusable effect. Instead it is a set of two containers with images that I manually slide open and closed with parallel effects.

One interesting revelation in writing this application was that there is no animated GIF support built into Flex. At the time I was a little annoyed having been used to it being available in Java for years. That broke my idea of using an animated GIF for the little moving gears on the left sliding door. I now know you typically embed a Flash SWF animation for situations like this, but I don’t have Flash Professional so converting my animated GIF was not an option.

My hack solution is found in “components/AnimateImage.mxml”. Basically I extended mx:Canvas and stacked all the frames of my animated GIF in separate mx:Image components. At any given render only one of these images is “visible”. This animation is achieved by flipping through the frames forwards or backwards depending on what direction I want the gears to turn. The tricky part was figuring out how to get the gears to animate in sync with the sliding door container. What I discovered was that each component on the DisplayList will get a render event each time a render occurs. So what I did was add an event listener for this render event to one of the image controls like so:

i1.addEventListener(Event.RENDER, eventHandler);

Each render even will call the eventHandler function that will flip the displayed image to the next image in the animation. This works perfectly to keep the gears moving at the same speed as the sliding door. As each door render will cause the render event to fire on the image. This basically means that any easing function I place on the sliding door movement will also effect the gear animation. As the door accelerates or decelerated the gears speed up or slow down in sync.

One pitfall of using the render event is that it fires anytime anything causes the Flash player to render to the screen. This means that you must remove this even handler when you want the gear animation to stop. In this case the event listener is added when I start moving the door, and removed when the door is finished moving.

Feel free to post questions about the code or even suggestions on how to fix some of the poor code. I’ve learned a lot since I wrote this first application but, while I know how I personally would clean up some of this code, I know that there is always someone that can always teach me new tricks.

Here is the recompiled application with view source enabled: