描いた線上を動く

orbital_line



描いた線の上をボールが動いていくアニメーションの作り方です
解説はつづきから






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





まずは背景を作成
400×300の矩形を描き、#FFFFFFから#EEEEEEの色でグラデーション





新規シンボル作成
サイズを15×15、線を1pxの太さで色#FF9933、塗りの色#FFCC33の円を描く




シーン1に戻り、新規レイヤーを追加し、ActionScriptを記述

var speed = 2;    //ballの動く速度
var ball:Ball = new Ball;

//線の座標を格納する配列
var myArray:Array = new Array();
var i=0;

//線を描く土台追加
var base:Shape = new Shape();
addChild(base);

//マウスを押したときのイベント追加
stage.addEventListener(MouseEvent.MOUSE_DOWN,drawOn);

function drawOn(event:MouseEvent) {
    //描画されてる線を消去
    base.graphics.clear();
    //線の太さと色を設定
    base.graphics.lineStyle(3,0x999999);
    //線の描画の開始位置をマウス位置に
    base.graphics.moveTo(mouseX,mouseY);
    //マウスを動かしたときのイベント追加
    stage.addEventListener(MouseEvent.MOUSE_MOVE,drawLine);
}

function drawLine(event:MouseEvent) {
    //マウス位置まで線を描く
    base.graphics.lineTo(mouseX,mouseY);

    //マウス位置を配列に格納
    var point:Point = new Point(mouseX,mouseY);
    myArray.push(point);
}

//マウスを離したときのイベント追加
stage.addEventListener(MouseEvent.MOUSE_UP,drawOff);

function drawOff(event:MouseEvent) {
    //線を描画するイベント削除
    stage.removeEventListener(MouseEvent.MOUSE_MOVE,drawLine);
    stage.removeEventListener(MouseEvent.MOUSE_DOWN,drawOn);

    //ballを動かすイベント追加
    addEventListener(Event.ENTER_FRAME,moveBall);
    addChild(ball);    //ball追加
}

function moveBall(e:Event):void {
    //配列に格納した座標の数内のとき
    if (i < myArray.length) {
        //ballの位置をi番目の線の座標の位置に動かす
        ball.x = myArray[i].x;
        ball.y = myArray[i].y;
        i += speed;    //iをspeedづつ増加

    //座標の数を超えたとき
    } else {
        //ballを動かすイベント除去
        removeEventListener(Event.ENTER_FRAME,moveBall);
        //線を描くイベント再追加
        stage.addEventListener(MouseEvent.MOUSE_DOWN,drawOn);
    }
}


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







以上、描いた線上を動くアニメーションの作り方でした