配列からテキストをアニメ化する

Question

いくつかの単語を配列にとり、指定されたタイムアウトで1つずつトゥイーンを適用することになっているこのコードがあります。空のムービークリップを作成し、タイムアウトのあるforeachループでアニメートする必要があると思いますが、どうやってそれを正確に行うのかは分かりません。私がでてる場所です

：

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); 

は、実際にいくつかの援助を必要とすることができます。

Answer 1

私はCS3を持っていないが、私は手早くTweenerという無料のトゥイーンライブラリを使った簡単な例です。あなたはそれを見つけることができます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] }); 
    } 
} 

Answer 2

Tweenエンジンに応じて、のチェーン Tweensになる可能性があります。 Tweenエンジンは正確にはわかりませんが、ここでは古典的なアプローチがあります。 animateNext（）関数は、最初に一度と呼ばれ、その後、唯一のあなたの最後のトゥイーンonCompleteのハンドラによって呼び出されるべき（またはタイマー方式）：

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() 

}