ムービングレター
マウスによって文字列をウネウネ動かすアクションの作り方です
解説はつづきから
新規ファイル作成
ステージ設定はサイズを400×300、フレームレートは30に
レイヤー1のフレーム1をクリックしてActionScriptを記述
まずは表示させたい文字列を作成して表示
//文字列の設定 var letter:String = "Flash Tutorial"; //文字を入れる箱作成 var txt:TextField = new TextField(); txt.text = letter; //文字を箱に配置 addChild(txt); //箱配置
これでムービープレビューすると画像のように文字が表示されてると思います
ひとまずは文字をまとめて動かすアクションを記述
//文字列の設定 var letter:String = "Flash Tutorial"; //文字を入れる箱作成 var txt:TextField = new TextField(); txt.text = letter; //文字を箱に配置 addChild(txt); //箱配置 //文字の動き適用 addEventListener(Event.ENTER_FRAME,moveTxt); //文字の動き設定 function moveTxt(evt:Event):void { txt.x += (mouseX-txt.x+12)/5; txt.y += (mouseY-txt.y)/5; }
これで文字列がマウスに従って動くようになりました
次は一文字ずつに分解して動かします
文字を入れる箱を文字数分作って、それぞれに文字を格納し、動かすという考えでいきます
//文字列の設定 var letter:String = "Flash Tutorial"; //文字列を一文字ずつ分解 var letters:Array = letter.split(""); //文字を入れる箱の配列作成 var txtList:Array = new Array(); //文字配置設定 for (var i = 0; i<letters.length; i++) { //文字を入れる箱を文字数分作成 var txt:TextField = new TextField(); txt.text = letters[i]; //文字を箱に配置 addChild(txt); //箱配置 txtList.push(txt); //箱を配列に格納 } //文字の動き適用 addEventListener(Event.ENTER_FRAME,moveTxt); //文字の動き設定 function moveTxt(evt:Event):void { for (i = 0; i<letters.length; i++) { //一番初めの文字はマウスに従って動くように設定 if (i==0) { txtList[i].x += (mouseX-txtList[i].x+12)/5; txtList[i].y += (mouseY-txtList[i].y)/5; //一つ前の文字に続いて動くように設定 } else { txtList[i].x += (txtList[i-1].x-txtList[i].x+15)/5; txtList[i].y += (txtList[i-1].y-txtList[i].y)/5; } } }
これで文字を動かすアクションはできました
最後に背景を配置して、文字のフォーマットも変えます
//文字列の設定 var letter:String = "Flash Tutorial"; //文字列を一文字ずつ分解 var letters:Array = letter.split(""); //文字を入れる箱の配列作成 var txtList:Array = new Array(); //テキストフォーマット設定 var tf:TextFormat = new TextFormat(); tf.font = "Kartika"; tf.size = 28; tf.color = 0xFFFFFF; //文字配置設定 for (var i = 0; i<letters.length; i++) { //文字を入れる箱を文字数分作成 var txt:TextField = new TextField(); txt.text = letters[i]; //文字を箱に配置 txt.setTextFormat(tf); //テキストフォーマット適用 txt.selectable = false; //文字選択不可に addChild(txt); //箱配置 txtList.push(txt); //箱を配列に格納 } //文字の動き適用 addEventListener(Event.ENTER_FRAME,moveTxt); //文字の動き設定 function moveTxt(evt:Event):void { for (i = 0; i<letters.length; i++) { //一番初めの文字はマウスに従って動くように設定 if (i==0) { txtList[i].x += (mouseX-txtList[i].x+12)/5; txtList[i].y += (mouseY-txtList[i].y)/5; //一つ前の文字に続いて動くように設定 } else { txtList[i].x += (txtList[i-1].x-txtList[i].x+15)/5; txtList[i].y += (txtList[i-1].y-txtList[i].y)/5; } } }
ムービープレビューすると以下のようになってるかと思います
以上ムービングレターの作り方でした