アルファベットが流れるアニメーション

rising_bit



アルファベットが透明度を変えながら上に流れていくアニメーションです
解説はつづきから






新規ファイル作成
ステージ設定はサイズを400×300、フレームレートは30、背景を#000000に






まずはステージにダイナミックテキストでアルファベットを一文字打つ
画像のように設定し、インスタンス名をmyTextに





埋め込みボタンを押し、アルファベットの大文字を選択し、OKを押す




文字を選択状態でF8キーを押し、シンボルに変換
基準点は左上、シンボル名とインスタンス名をletterInsideに





letterInsideが選択されている状態でF8キーを押し、さらにシンボルに変換
基準点を左上にし、ActionScriptに書き出しにチェックを入れて、クラス名をBitLetterに





構造としては画像のような状態
BitLetterの中にletterInsideがあって、letterInsideの中にダイナミックテキストがある




シーン1に戻って、ステージ上にある文字を削除
新規レイヤーを追加し、ActionScriptを記述

var letters:Array = new Array();

for (var i=0; i < 6; i++) {    //縦に6個並べる

    for (var j=0; j < 8; j++) {    //横に8個並べる

        var myLetter:BitLetter = new BitLetter();

        //文字の初期位置設定
        myLetter.x = stage.width/10 * j+50;
        myLetter.y = 2*myLetter.height * i;

        //文字の上昇速度設定
        myLetter.speedY = Math.random() * 5 + 2;

        addChild(myLetter);    //文字追加

        letters.push(myLetter);    //配列に格納
    }
}

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//文字の上昇する動きに対しての設定
//文字の設定や透明度の設定はBitLetter内に
function enterFrameHandler(e:Event):void {

    for (var i = 0; i < letters.length; i++) {

        //設定された速度ずつ上昇
        letters[i].y -= letters[i].speedY;

        //ステージの上に到達したらステージの下に移動
        if (letters[i].y+myLetter.height < 0) {
            letters[i].y = stage.stageHeight;
        }
    }
}


これで、文字の動きの設定ができたので、次に文字の変化の設定





BitLetterをダブルクリックし、シンボル編集画面へ
新規レイヤーを追加し、ActionScriptを記述

//透明度を上げるかどうか
var increaseAlpha:Boolean;

//文字の初期透明度を0に
letterInside.alpha = 0;

//タイマーの間隔をランダムで設定
var timerDelay:int = Math.random() * 4000 + 2000;

//アルファベットを配列に指定
var nList:Array = ["A","B","C","D","E","F","G","H","I","J","K",
"L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

//タイマー設定
var timer:Timer = new Timer(timerDelay);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.start();

//設定されたタイマー間隔ごとに起動
function timerHandler(e:Event):void {

    //透明度を上げるように
    increaseAlpha = true;

    //アルファベットをランダムに書き換え
    var i:int = Math.random()*nList.length;
    letterInside.myText.text = nList[i];
}

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//透明度変化の設定
function enterFrameHandler(e:Event):void {

    if (increaseAlpha == true) {
        letterInside.alpha += 0.01;
    } else {
        letterInside.alpha -= 0.01;
    }
    //透明度が1を超えたら透明度を下げるように
    if (letterInside.alpha > 1) {
        increaseAlpha = false;
    }
    //透明度0未満の場合は0に戻す
    if (letterInside.alpha < 0) {
        letterInside.alpha = 0;
    }
}



シーン1に戻って、背景を作成
400×300の矩形を描き、画像のように線形のグラデーションをかける




これでムービープレビューすると、以下のようになってるかと思います







以上、アルファベットが流れるアニメーションの作り方でした