webkroll.com

Just recently I have come across an issue while trying to tween dynamic text fields in Flash. The problem I am about to describe is not a Fuse/Zigo Engine (FuseKit) problem, but more a general Flash problem when trying to animate movie clips containing this type of text field using ActionScript.

Demo 1 - The problem

Demo 1

As you can see, the text field labels are all showing up before the actual alpha fade has finished, which is not the effect that is desired in this case. Each item label should show up once the tween has completed to give a more smooth appearance.

Demo 1 code
As you can see in the code snippet, a new Fuse is opened, and all movie clips and tweens are pushed into the Fuse, to able to run
all animations in sequence once we’re done looping over our items. After all that’s one of the things Fuse is for, sequencing animations.

1. // ZIGO ENGINE & FUSE
2. import com.mosesSupposes.fuse.*;
   ZigoEngine.simpleSetup(Shortcuts,Fuse,PennerEasing);
3.  
4. // Open a new fuse for sequencing
   Fuse.open();
5. for (var i = 0; i < 5; i++)
   {
6. var mcThis:MovieClip = _level0.attachMovie(”mcItem”, “mcItem” + i, i, {_alpha:0});
7.  
8. mcThis._y = ((mcThis._height + 10) * i);
9.  
10. // Assign the item label text
    mcThis.txtLabel.text = “Item ” + i;
11.  
12. // Alpha tween to be added to the Fuse
    ZigoEngine.doTween(mcThis,”_alpha”, 100, 0.3, “easeInSine”);
13. }
14. // Close the fuse and start the sequence
    Fuse.closeAndStart();

You would think that since the text for ‘txtLabel’ is assigned as part of the Fuse it would show up in sequence, just like every single alpha tween that is part of the Fuse sequence in the end. Alas, that is not the case.

I have tried a few ways around this, but to no avail. You can try to add a custom function call to the Fuse using addCommand() to let your own function assign the text to ‘txtLabel’ once the sequence is executed 1-by-1, but that won’t change a thing. All text fields will display their values immidiately once the Fuse has been closed and started.

Demo 2 - The solution

Demo 2

After a bit of digging in the documentation I found the event handlers I was looking for, namely ‘onTweenEnd’. Adding a new event listener to each of the movie clip allows you to have each label display once the alpha tween for said item has finished, nice and in sequence.

This might be old news to Fuse buffs, but since it took me a while to work out (especially the fact that not everything that happens inside a fuse is actually added to the sequence), and judging from a few forums i have read I was not alone.

Demo 2 code
The code below shows where I have added the event listener that will add the text to ‘txtLabel’ once the tween has finished. I have also added a variable to each movie clip which will hold the ‘txtLabel’ text, so the event listener knows what to attach once the onTweenEnd event fires.

All additions to the script are highlighted in pink. (Lines 4-8, 16 & 18)

1. // ZIGO ENGINE & FUSE
2. import com.mosesSupposes.fuse.*;
   ZigoEngine.simpleSetup(Shortcuts,Fuse,PennerEasing);
3.  
4. // Event Listener for the item tweens
   var myItemListener:Object = {
5. onTweenEnd:function(o:Object):Void {
6. o.target.txtLabel.text = o.target.thisLink;
7. }
8. };
9.  
10. // Open a new fuse for sequencing
    Fuse.open();
11. for (var i = 0; i < 5; i++)
    {
12. var mcThis:MovieClip = _level0.attachMovie(”mcItem”, “mcItem” + i, i, {_alpha:0});
13.  
14. mcThis._y = ((mcThis._height + 10) * i);
15.  
16. // Create a new parameter in this movie clip to hold the text field value for later
    mcThis.thisLink = “Item ” + i;
17.  
18. // Add the event listener
    mcThis.addListener(myItemListener);
19.  
20. // Alpha tween to be added to the Fuse
    ZigoEngine.doTween(mcThis,”_alpha”, 100, 0.3, “easeInSine”);
21. }
22. // Close the fuse and start the sequence
    Fuse.closeAndStart();

Posted on: Saturday, February 10th, 2007 19:43:50
Posted in: Development, Flash
Feed: RSS 2.0
Leave a response | Trackback