I was working recently on a MovieClip which had several different states, where the elements were in different positions, or in some states certain elements didn’t exist. I guess there are two common solutions to dealing with this – 1: animating the transitions between the states on the timeline OR 2: describing all the different states in code, and using Tweens such as greensocks to make the transitions.

There are problems with both ways:

Solution 1 is time consuming setting up animations on the timeline, especially if there are changes down the track. It also gets ridiculous if there are many states and the transitions don’t go back to a neutral state before animating to the next state.

Solution 2 is a purely code solution so once the design is set up, it’s then generally up to the developer to translate the designer’s work to something that can be fed into the tween classes Again this can be time-consuming, especially when there are changes.

So I was thinking the other day, wouldn’t it be cool if you(or preferably the designer!) could just prepare the different states in a movieclip on different frames with frame labels, and BAM, the states are set and merely by requesting that state, the elements perform the appropriate tween.

We could still use the designer’s work, but we wouldn’t need to translate the design to code. The tweens would all be automatic and changes would be easy to implement.

So here’s my idea, I’ve called the class StateManager. To use it your movieclip just needs to use it as a base class, and then to go to a different state(for example, ‘initState’), just call:

goState('state1');

The default tween time is 0.5 seconds, this is also an optional parameter you can pass:

goState('state2', 1);

For an example of how to use this class, click here.

At the moment the only properties that are tweened are x,y, alpha, scaleX and scaleY. If further properties seem to be necessary they could be included easily.

Here it is, feel free to comment, interested to know what people think.

package com.craiggrummitt.display
{
    import com.greensock.TweenLite;
    import com.greensock.plugins.AutoAlphaPlugin;
    import com.greensock.plugins.TweenPlugin;
    
    import flash.display.DisplayObject;
    import flash.display.FrameLabel;
    import flash.display.MovieClip;
    import flash.text.TextField;
    
    public class StateManager extends MovieClip
    {
        private var displayObjectInstances:Array;
        private var labelObjectStates:Array;
        public function StateManager()
        {
            super();
            TweenPlugin.activate([AutoAlphaPlugin]);
            init();
            removeAll();
            goState(currentLabels[0].name,0);
        }
        private function init():void {
            displayObjectInstances=[];
            labelObjectStates=[];
            for (var i:int=0;i<currentLabels.length;i++) {
                var label:FrameLabel=currentLabels[i] as FrameLabel;
                initState(label.name);
            }
        }
        private function removeAll():void {
            do {
                this.removeChildAt(0);
            } while (this.numChildren>0);
        }
        public function goState(stateName:String,time:Number=0.5):void {
            for (var displayObjectInstance:String in displayObjectInstances) {
                var displayObject:DisplayObject=displayObjectInstances[displayObjectInstance];
                var state:Object=labelObjectStates[stateName][displayObjectInstance];
                if (!this.getChildByName(displayObject.name)) this.addChild(displayObject);
                
                if (state) {
                    TweenLite.to(displayObject,time,{x:state.x,y:state.y,autoAlpha:state.alpha,scaleX:state.scaleX,scaleY:state.scaleY});
                } else {
                    TweenLite.to(displayObject,time,{autoAlpha:0});
                }
            }
        }
        private function initState(label:String):void {
            gotoAndStop(label);
            labelObjectStates[label]=[];
            for (var i:int=0;i<this.numChildren;i++) {
                var obj:DisplayObject=this.getChildAt(i);
                if (!displayObjectInstances[obj.name]) {
                    displayObjectInstances[obj.name]=obj;
                }
                labelObjectStates[label][obj.name]={x:obj.x,y:obj.y,alpha:obj.alpha,scaleX:obj.scaleX,scaleY:obj.scaleY};
            }    
        }
    }
}