バネ運動を使ったマウスアクション
マウスに追従して動く球にバネのような動きをさせたモノの作り方です
ついでに残像も加えてあります
解説はつづきから
新規ファイル作成
ステージ設定はサイズを400×300、フレームレートは30に
まずは背景を作成
400×300の矩形を描き、#222222から#000000の色でグラデーション
新規レイヤーを追加し、10×10のサイズの円を描く
線はなし、色は#FFFFFFから#FF6666のグラデーション
描いた円をシンボルに変換
ActionScriptに書き出しにチェックを入れて、クラス名をBallに
ステージにある円のインスタンス名をballに
円をダブルクリックし、シンボル編集モードに
円をさらにシンボル化し、画像のようにフィルタをかける
シーン1に戻り、新規レイヤーを追加し、ActionScriptを記述
Mouse.hide(); //マウスカーソル非表示 var spring:Number = 0.2; //バネ係数(0〜1) var easing:Number = 0.9; //収束値、1で無限に動き続ける //初期速度 var speedX:Number = 0; var speedY:Number = 0; //ballの動作イベント追加 addEventListener(Event.ENTER_FRAME, springAction); function springAction(event:Event):void { //マウスとballの距離 var disX = mouseX-ball.x; var disY = mouseY-ball.y; //距離にバネ係数をかけたものを速度に加算 speedX += disX*spring; speedY += disY*spring; //収束値を速度にかける speedX *= easing; speedY *= easing; //ballを速度分移動 ball.x += speedX; ball.y += speedY; //残像になるball2設定 var ball2:Ball = new Ball(); //ball2をballの位置に ball2.x = ball.x; ball2.y = ball.y; //ball2初期透明度 ball2.alpha = 0.9; //ballより一つ下の位置にball2追加 addChildAt(ball2,numChildren - 1); //追加されたball2イベント追加 ball2.addEventListener(Event.ENTER_FRAME,ballAction); function ballAction(e:Event):void { ball2.alpha -= 0.04; //透明度変化 //大きさ変化 ball2.scaleY -= 0.04; ball2.scaleX -= 0.04; //完全に透明になったら削除 if (ball2.alpha < 0) { ball2.removeEventListener(Event.ENTER_FRAME,ballAction); removeChild(ball2); } } }
これでムービープレビューすると以下のようになってるかと思います
以上、バネ運動を使ったマウスアクションの作り方でした