Andrew Trice

Wednesday April 29, 2009

Experimenting With The New Flex 4 Animation/Effects Framework

The new Flex 4 Animation/Effects framework certainly looks to be promising. Here's a quick example showing how to use use MotionPath and Keyframe instances to create complex animations for rollOver and rollOut effects on Flex components.

Before we dive too far into things, you might want to know a little about the Flex 4 architecture. The new Flex 4 component model is called "spark". After recent debates over using Fx prefixes on class names, it was decided that Flex components would be divided into multiple namespaces. The components within the Flex 4 framework are divided into 3 namespaces: "mx" for the Flex 3-compatible (halo) components, "s" for Flex 4 (spark) components, and "fx" for common items (Scripts, declarations, non-visual controls, etc...). You can read a much more detailed description about code organization and the Flex 4 namespaces at http://opensource.adobe.com/wiki/display/flexsdk/MXML+2009.

Spark components are designed to work better with the designer-developer workflow, and to allow more expressive application interfaces. A little about Spark from Adobe Labs...

The biggest feature of the Design in Mind theme is our new skinning and component architecture, code-named Spark. Building on top of the existing Halo architecture we provide a much more efficient mechanism for developers and designers to work together to control the appearance of their Flex applications.

The Flex 4/Spark MotionPath class allows you create complex multi-step animations where in Flex 3, you would have used regular effects. In Flex 3, you can use sequenced and parallel effects to create complex animations, but the MotionPath and KeyFrame classes provide you with greater control over what is happening to particular properties at specific points in time within the animation. Here's a really basic experiment showing the use of MotionPath and KeyFrame elements to create complex animations on a Button instance (all using Spark controls). When you mouse-over the button, you will see if first resize horizontally, then vertically, and then both horizontally and vertically, during this resize sequence, there will be a color transition changing the basecolor to green, and then back to normal. When you mouse out, it will do the opposite; it will first animate vertically, then horizontally, then both at once, with a red color transition.

This was built using the 4.0.0.6368 nightly build of Flex 4 and Flex Builder 3. The code for this experiment is below. You can see that my MotionPath animations are children of an Animate effect. Each MotionPath could have it's own interpolator, and each KeyFrame could have its own easer, so you could get very complicated with custom animations and transitions. The HSBInterpolator class is used for properly animating transitions in color values.

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
   xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/halo" >
   
   
   <fx:Declarations>
      <s:Animate id="rollOver" >
         <s:MotionPath property="width">
             <s:KeyFrame time="0" value="100" />
             <s:KeyFrame time="300" value="200" />
                 <s:KeyFrame time="600" value="150" />
                 <s:KeyFrame time="1500" value="150" />
                 <s:KeyFrame time="2000" value="175" />
            </s:MotionPath>
         <s:MotionPath property="height">
             <s:KeyFrame time="0" value="100" />
             <s:KeyFrame time="600" value="100" />
                 <s:KeyFrame time="1500" value="150" />
                 <s:KeyFrame time="2000" value="175" />
            </s:MotionPath>
            <s:MotionPath property="baseColor">
               <s:interpolator>
                     <s:HSBInterpolator />
                 </s:interpolator>
              <s:KeyFrame time="1000" value="0x00FF00" />
                 <s:KeyFrame time="2000" value="0xCCCCCC" />
          </s:MotionPath>
      </s:Animate>
      <s:Animate id="rollOut" >
         <s:MotionPath property="width">
                 <s:KeyFrame time="1000" value="200" />
                 <s:KeyFrame time="1500" value="100" />
                 <s:KeyFrame time="1750" value="120" />
                 <s:KeyFrame time="2000" value="100" />
            </s:MotionPath>
         <s:MotionPath property="height">
                 <s:KeyFrame time="500" value="100" />
                 <s:KeyFrame time="1500" value="100" />
                 <s:KeyFrame time="1750" value="120" />
                 <s:KeyFrame time="2000" value="100" />
            </s:MotionPath>
            <s:MotionPath property="baseColor">
               <s:interpolator>
                     <s:HSBInterpolator />
                 </s:interpolator>
              <s:KeyFrame time="1000" value="0xFF0000" />
                 <s:KeyFrame time="2000" value="0xCCCCCC" />
          </s:MotionPath>
      </s:Animate>
   </fx:Declarations>
   
   <s:Button 
      label="A Button"
      rollOverEffect="{ rollOver }" 
      rollOutEffect="{ rollOut }" 
      x="50" y="50"
      width="100" height="100"/>
   
</s:Application>

Related Links:

MXML 2009 (Summary of Flex 4 component architecture, organization, and namespaces):
http://opensource.adobe.com/wiki/display/flexsdk/MXML+2009

Using Spark Effects (a little out-dated b/c it uses Fx prefixes, but the concepts are the same):
http://blogs.adobe.com/flexdoc/pdfs/sparkEffects.pdf

Gumbo Component Architecture:
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture

Flex 4 Download Nightly Build (4.0.0.6368):
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4