描いた線上を動く
描いた線の上をボールが動いていくアニメーションの作り方です
解説はつづきから
新規ファイル作成
ステージ設定はサイズを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); } }
これでムービープレビューすると以下のようになってるかと思います
以上、描いた線上を動くアニメーションの作り方でした