Animate text from array

Question

I have this code that is supposed to take an array with some words, and apply the tweens to them, one by one, with a specified timeout. I think I have to make an empty movieclip out of them and then animate them with a foreach loop with a timeout, but I'm lost in how I would do that exactly.

This is where I'm at:

var array:Array = new Array("word", "is", "here");

var bounce:Function = function(mc:MovieClip):void {
mc.bounce1 = new Tween(mc, "_y", Bounce.easeOut, 35, 75, 1, true);
mc.bounce2 = new Tween(mc, "_xscale", Bounce.easeOut, 0, 400, 4, true);
mc.bounce3 = new Tween(mc, "_yscale", Bounce.easeOut, 0, 400, 4, true);
mc.bounce4 = new Tween(mc, "_alpha", Regular.easeInOut, 100, 0, 2, true);
};
array.forEach(bounce, me);

Could really need some assistance.

Answer 1

Depending on your Tween engine you might be able to chain the Tweens. Not being sure what is your Tween engine is exactly, here's a more classical approach. The animateNext() function is called once in the beginning and should thereafter only be invoked by your last Tweens onComplete handler (or a Timer method):

var wordList:Array = new Array('one','two','three');

// Keeps track of the current showing word
var currentIndex:int = -1;

// Starts the animation
animateNext();

function animateNext():void
{
   // increments the word counter
   currentIndex ++;

   // resets the word count if all the words are done
   if(currentIndex >= wordList.length)
      currentIndex = 0;

   // Apply the right word here
   var word:String = wordList[currentIndex];
   trace(word);

   // animation tweens here :
   ...

   // place callback function onComplete to animateNext()

}

Answer 2

I don't have CS3, but I whipped up a quick example using a free tweening library called Tweener. You can find it here.

import flash.events.Event;
import flash.display.MovieClip;
import flash.text.TextField; 
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
/* this is a free Tweening library. I don't have flash CS3 but this is analogous to fl.transitions.Tween */

import caurina.transitions.Tweener; 

public class Main extends MovieClip 
{
 public function Main():void 
 {
  if (stage) init();
  else addEventListener(Event.ADDED_TO_STAGE, init);
 }

 private function init(e:Event = null):void 
 {
  removeEventListener(Event.ADDED_TO_STAGE, init);

  /* your array of words */
  var array: Array = new Array("word", "is", "here")

  /*we'll use this to control the position of each word*/
  var x : int = 0

  var delay : Number = 0.0

  for each(var s : String in array)
  {
   var word: TextField = new TextField()
   word.autoSize = TextFieldAutoSize.LEFT

   /* here we can adjust text format */
   word.defaultTextFormat = new TextFormat(null, 75, 0xff0000)

   word.text = s
   word.x = x
   word.y = 75

   /* put the new word into our MovieClip */
   addChild(word)

   /* apply some tweens */
   bounceText(word, delay)

   /* adjust our animation and position variables */
   delay += 1.3
   x += word.width
  }
 }

 private function bounceText(a_textField : TextField, a_delay : Number) : void
 {
  /* duration of each tween */
  var t:Number = 0.75

  /* this is the "up" part of the tween, from y=75 to y=35 */
  Tweener.addTween(a_textField, { y:35, delay:a_delay, time:t, transition:"easeOutQuad" } );

  /* this is the "down" part of the tween. note the "delay" parameter is offset by the time of the first tween.
   * the "onComplete" function calls BounceText again when the second Tween is complete. If you are using fl.transitions.Tween,
   * you can add an event listener for a TweenEvent.MOTION_FINISH event, or set the "looping" property of the Tween to true.
   * */
  Tweener.addTween(a_textField, { y:75, delay:a_delay + t, time:t, transition:"easeInQuad", onComplete:bounceText, onCompleteParams:[a_textField, 0.25] } );
 }
}