Peter Elst

I had an interesting comment on one of my blog posts asking about creating your own custom effects in MXML. I knew it was possible but wasn’t really up to speed on the best way to do it. Well, after a bit of research here is an example — its a very basic rotation effect that rotates an object by a given number of degrees over time.

First thing I did was create a new AS2 class called Rotate that subclasses mx.effects.TweenEffect and save that file as Rotate.as (obviously).

class Rotate extends mx.effects.TweenEffect {

   var rotateBy:Number;
   var rotateTween:mx.effects.Tween;

   function Rotate(targetObj:Object)   {
      target = targetObj;
   }

   function playEffect():Void   {
	rotateTween = new mx.effects.Tween(this, target._rotation,
        target._rotation+rotateBy, duration);
   }

   function onTweenUpdate(tweenValue):Void   {
      target._rotation = tweenValue;
   }

}

In the constructor we create a reference to the target object, the playEffect method is called when the effect is triggered and just created a new mx.effects.Tween instance from the target objects original rotation to its rotation plus the rotateBy value (which is passed through the MXML tag) over the time that is defined in the duration attribute value. The onTweenUpdate method is called by the Tween instance and passes the interpolated tween value to update the target object rotation.

That’s it for the AS2 class! Now on to the MXML - pretty much the same as before, with one twist I wasn’t aware of. In order for MXML to find your Rotate class you need to define an additional namespace in the Application tag.

In this MXML file I defined an Effect block as before and have a tag called Rotate (note that it doesn’t have the mx prefix) with the attributes we use in the Rotate AS2 class (rotateBy and duration) and a name of “myRotateEffect”. Further down in the document we once again have an Image tag that embeds an external SWF and a mouseDownEffect trigger that is hooked up to “myRotateEffect”.

When you run this file and click on the embedded SWF you’ll see it rotate by 360 degrees over 1 second. Really like this way of working with effects will definitely experiment with it further!

If you’re looking for something a little more challenging Macromedia has a more extensive example of a custom rotate effect here.