12th Aug 2008

Cycling Fading Clips Using Tweens

I did this to answer a post on Flashkit and just to have something to play with. You can see the original post here. The indidividual wanted to have 3 clips fade in and out in sequence and have that sequence rotate. Here is what I came up with:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
/*
Create tween objects and immediately stop them so that they can be re-used.
*/
var yellowTween:Tween = new Tween (circle_mc.yellow_mc, “alpha”, None.easeInOut, 0 , 1 , 2 , true );
yellowTween.stop();
var blueTween:Tween = new Tween (circle_mc.blue_mc, “alpha”, None.easeInOut, 0 , 1 , 2 , true );
blueTween.stop();
var redTween:Tween = new Tween (circle_mc.red_mc, “alpha”, None.easeInOut, 0 , 1 , 2 , true);
redTween.stop();
/*Add an event listener to the first tween to trigger the fade in the oposite
direction. Subsequent listeners will be assigned and removed in the event
handler functions.
*/
yellowTween.addEventListener(TweenEvent.MOTION_FINISH, fadeOut);
/*
Since movie clips allow for the creation of dynamic properties (aka variables), simply create a
refence to the next tween that should be triggered directly on the clip. With
this system you could easily add aditional clips by cretaing a new tween and adding
another reference on the new clip to be tweened.
*/
circle_mc.yellow_mc.nextTween = blueTween;
circle_mc.blue_mc.nextTween = redTween;
circle_mc.red_mc.nextTween = yellowTween;
/*
Start the first tween to kick off the sequence. This should be the tween that you
added the event listener to in the previous code.
*/
yellowTween.start();

/*
Create a generic handler for the end of the fade in event. Since the TweenEvent object
holds a reference to the tween that caused the even, we can reference that tween via
the event.target property.
*/
function fadeOut(event:TweenEvent) {
/*remove the event listener that triggers this function from the tween since we have
gotten past the point of needed it and we dont want it to complete with the next part
of the sequence.
*/
event.target.removeEventListener(TweenEvent.MOTION_FINISH, fadeOut);
/*Add a new event listener that will trigger the next part of the sequence*/
event.target.addEventListener(TweenEvent.MOTION_FINISH, startNext);
/*Set the begin and finish properties of the tween object to the oposites
of those we used to create the fade in effect. I had originally tried to do
this with the built in yoyo function, but it produced un expected results.
*/
event.target.begin = 1;
event.target.finish = 0;
/*Restart the tween with the new properties, when this tween is finished,
it will trigger the new event handler we assigned in this function and
continue the sequence.
*/
event.target.start();
}
/*Now that the tween has fadded in and out, start the next tween. Again since TweenEvent
holds a reference to the tween that triggered the event, we can reference that tween.
Additionally, since the tween object holds a reference to the clip being tweened,
we can reference the properties of that clip. In this case we are interested in the
nextTween property we assigned in the previous code as this is what we will use
to start the next tween.
*/
function startNext(event:TweenEvent) {
/*Removed the event listener that triggered this function.*/
event.target.removeEventListener(TweenEvent.MOTION_FINISH, startNext);
/*
event.target is the tween that tirggred the function. obj is the property on
the tween objetc that holds a reference to the clip being tweened. hence, we can
reference the next tween to be triggered by accessing the nextTween property we created.
*/
/*
add a listener to trigger the fade out function completing the logical loop.
*/
event.target.obj.nextTween.addEventListener(TweenEvent.MOTION_FINISH, fadeOut);
/*Reset the values of the tween so that the effect is to fade in.*/
event.target.obj.nextTween.begin = 0;
event.target.obj.nextTween.finish = 1;
/*start the tween and the cycle repeate itself.*/
event.target.obj.nextTween.start();
}

After some playing with it, I was able to get it down to this:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
var yellowTween:Tween = new Tween (pics_mc.yellow_mc, “alpha”, None.easeInOut, 0 , 1 , 2 , true );
yellowTween.stop();
yellowTween.addEventListener(TweenEvent.MOTION_FINISH,fadeOut);

if (pics_mc.numChildren > 1) {
for (var c:int = pics_mc.numChildren-1; c>=0; c–) {
var clip:Object = pics_mc.getChildAt(c);
clip.alpha = 0;
if (c > 0) {
clip.nextClip = pics_mc.getChildAt(c-1);
} else {
clip.nextClip = pics_mc.getChildAt(pics_mc.numChildren-1);
}
trace (pics_mc.getChildAt(c).name)
trace (clip.nextClip.name)
}
}

yellowTween.start();

function fadeOut(event:TweenEvent) {
event.target.removeEventListener(TweenEvent.MOTION_FINISH, fadeOut);
event.target.addEventListener(TweenEvent.MOTION_FINISH, startNext);
event.target.begin = 1;
event.target.finish = 0;
event.target.start();
}
function startNext(event:TweenEvent) {
event.target.removeEventListener(TweenEvent.MOTION_FINISH, startNext);
event.target.addEventListener(TweenEvent.MOTION_FINISH, fadeOut);
event.target.obj = event.target.obj.nextClip;
event.target.begin = 0;
event.target.finish = 1;
event.target.start();
}

As long as all of the transitions are to be of the same length this works fine and all you would have to do to continue this would be to add additional clips to the housing clip (pics_mc) and the transition would be applied for you.

Comments are closed.