Flex 4 animate properties

Author: Dave January 25, 2010

I came across a situation while doing a Flex 4 upgrade for an Adobe Developer Center sample app where I wanted to use some the Spark animate properties classes.

This is SO cool because it gives you truly granular control over every aspect of a component you want to animate. In the sample I’m upgrading, there is an extended TileGroup component that has three columns and two rows of charts for an enterprise dashboard application. When a user clicks a button to zoom in on any given chart, I wanted to make use of some of the new Spark effects to really create a 3D look and feel quickly (without delving too much into custom layouts). Actually, the layout I made is a custom TileGroup, but I wanted to point out some ways you can use the Animate class to make sweet transitions on any property of a component in your own apps for simple animation, without having to create custom layouts.

This super simple test was to find out if I could use the Animate class to move the entire TileGroup to a new X,Y and increase its horizontalGap and verticalGap at the same time. In other words, could I use the Animate class to create my whole animation in one shot, truly custom? I watched Chet Haase on Adobe TV’s Codedependent on animating properties, and it worked great, but I needed it running in ActionScript.

The above code is the MXML that worked great for my test, and here’s the AS3 equivalent:

			import spark.effects.Scale;
			import spark.effects.Move;
			import mx.effects.Parallel;
			import spark.effects.Animate;
			import spark.effects.animation.MotionPath;
			import spark.effects.animation.SimpleMotionPath;
			import flash.events.MouseEvent;

			public function handleClick(event:MouseEvent):void
			{

				var p:Parallel = new Parallel(t);
				p.duration = 1000;

				var s:SimpleMotionPath = new SimpleMotionPath();
				s.valueFrom = t.horizontalGap;
				s.valueTo = 200;
				s.property = "horizontalGap";

				var s2:SimpleMotionPath = new SimpleMotionPath();
				s2.valueFrom = t.verticalGap;
				s2.valueTo = 200;
				s2.property = "verticalGap";

				var v:Vector. = new Vector.();
				v.push( s );
				v.push( s2 );

				var a:Animate = new Animate();
				a.motionPaths = v;

				var m:Move = new Move();
				m.xTo = t.width/2;
				m.yTo = t.height/2;

				p.addChild( a );
				p.addChild( m );
				p.play();

			}

Thanks to Chet too for spotting what my tired eyes didn’t see 😛 sheesh, it’s been one of those days.

This sample is not very exciting, except for the fact that it gives you the idea how you can animate any property over time. If I wanted to (and I have for my project) animate the x, y, z, width, and height at the same time using the Animate class, you could easily create a very specific animation this way.

For my purposes, I used the SimpleMotionPath to specify certain properties to change, and since the Animate class’s Interpolator is set to NumberInterpolator by default, it worked out great to fill in the steps for the “tween” automatically for me. I’d like to get to the point where I come up with my own Flat-terpolator for some other project one day just to see what I can create, but for now, this worked out fine.

You can download the FXP for this sample and try it out yourself here. Once you see how this works, you can imagine the possibilities afforded to Flex 4 that will allow you to make some truly amazing animations. Mine’s turning out to be pretty cool, but you’ll have to wait until the ADC releases it 😛 In the meantime, you can get started on this one to catch up on Flex 4 and Flash Builder.