アルファベットが流れるアニメーション
アルファベットが透明度を変えながら上に流れていくアニメーションです
解説はつづきから
新規ファイル作成
ステージ設定はサイズを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の矩形を描き、画像のように線形のグラデーションをかける
これでムービープレビューすると、以下のようになってるかと思います
以上、アルファベットが流れるアニメーションの作り方でした