Animation without aggravation

Happy New Year. Now with all those holidays behind me I can get back to blogging more regularly. To start off the year, I thought I would start with an example from Klok.

I recently was asked how I accomplished the animation when minimizing the left panel in Klok. It doesn't get much easier than this folks. This is one of those things that seems like it would be difficult to accomplish but Flex really does all the work for you.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
 <mx:HBox width="100%" height="100%">
  <mx:Canvas height="100%" width="200" backgroundColor="#ff0000" resizeEffect="Resize" id="leftPanel"/>
  <mx:Canvas height="100%" width="100%" backgroundColor="#0000ff"/>
 </mx:HBox>
 
 <mx:Button click="leftPanel.width=10" label="Shrink It"/>
 <mx:Button click="leftPanel.width=200" label="Grow It"/>

</mx:Application>

Basically, all the magic happens by setting the resizeEffect. This causes the change in size to be animated. Setting the resizeEffect to the string "Resize" will cause an instance of mx.effects.Resize to be created with the default properties. If you want control over those properties, it isn't much more complicated.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[
   import mx.effects.easing.Bounce;
  ]]>
 </mx:Script>
 <mx:Resize duration="1000" id="myResize" easingFunction="{Bounce.easeOut}"/>
 <mx:HBox width="100%" height="100%">
  <mx:Canvas height="100%" width="200" backgroundColor="#ff0000" resizeEffect="{myResize}" id="leftPanel"/>
  <mx:Canvas height="100%" width="100%" backgroundColor="#0000ff"/>
  
 </mx:HBox>
 <mx:Button click="leftPanel.width=10" label="Shrink It"/>
 <mx:Button click="leftPanel.width=200" label="Grow It"/>
</mx:Application>

Notice that in both examples the buttons aren't calling any methods to kick off the animation. The buttons just set the width property. Pretty simple isn't it?

In reality you probably would be changing the width inside a method, but the important thing is that you don't have to tell the animation to "play". It is just hooked up view the resizeEffect attribute. There are many effect attributes that you can set which can allow you to do some cool stuff.