ムービングレター

moving_letter



マウスによって文字列をウネウネ動かすアクションの作り方です
解説はつづきから




新規ファイル作成
ステージ設定はサイズを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;
        }
    }
}


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



以上ムービングレターの作り方でした