スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

針金をはじいたような動き

壁にささった針金を指ではじいたような。というかそんなカンジのサンプルです。円の部分をマウスでつまんでテキトーに動かしてボタンを離すと、バネっぽく振動します。





やってることは、バネの動きをする円スプライトとステージ左端から円の中心までの曲線を描画してるだけデス。円スプライトは、画面左端の線の根元を中心とする円周を動きマス。バネっぽい動きの計算は、初期位置を0度としての角度に対してやってマス。

円スプライトの最初のx位置は、ステージ幅の2/3の位置(=半径)デス。曲線のほーは、ステージ左端を始点、ステージ幅の1/3の位置をコントールポイント、円スプライトの中心を終点としてGraphics#curveToで描画しています。

今回のサンプルでは、円と曲線の2つのスプライトをActionScriptで作成/操作しています。
円のほーは、Spriteを継承したBallクラスを定義して使ってマス。

package {
import flash.display.Sprite;
import flash.display.Graphics;
/**
* 塗りつぶした円のスプライト。
*/
public class Ball extends Sprite {
/**
* コンストラクタ。
* @param radius 半径
* @param color 色
* @param alpha 透過度
*/
public function Ball(radius:Number = 10,
color:uint = 0x000000,
alpha:Number = 1.0) {
var g:Graphics = this.graphics;
g.beginFill(color, alpha);
g.drawCircle(0, 0, radius);
g.endFill();
}
}
}
コイツは単に半径や色を指定してnewすると指定した通りの円が描画されるだけで、あとはSpriteと同等なクラスです。

曲線用のスプライトは、フレームアクションに記述してます。フレームアクションはこんなカンジです。
// ボールの色
var ballColor:Number = 0x9999FF;
// ボールの大きさ
var ballSize:Number = 10;
// 線の色
var lineColor:Number = 0x3333FF;
// ボールの初期x座標
var ballX:Number = stage.stageWidth * 2 / 3;
// ボールの初期y座標
var ballY:Number = stage.stageHeight / 2;
// コントロールポイントのx座標
var controlX:Number = stage.stageWidth / 3;
// ばね定数
var k:Number = 0.9;
// 減衰係数
var a:Number = 0.8;
// 最大角度
var range:Number = 30 * Math.PI / 180;

// フィルタ
var filterArray:Array = [new DropShadowFilter()];

// 線描画領域
var canvas:Sprite = new Sprite();
canvas.filters = filterArray;
addChild(canvas);

// ボールを配置
var ball:Ball = new Ball(ballSize, ballColor);
ball.filters = filterArray;
ball.x = ballX;
ball.y = ballY;
addChild(ball);

// かかっている力
var p:Number = 0;
// ボールの角度
var r:Number = 0;

// ボールをつかめるようにする
ball.addEventListener(MouseEvent.MOUSE_DOWN,
function (e:Event):void {
// つかめるようにするためボール移動イベントリスナを登録
stage.addEventListener(MouseEvent.MOUSE_MOVE, onBallMouseMove);
// 振動させるためボールフレームイベントリスナを解除
stage.removeEventListener(Event.ENTER_FRAME, onBallEnterFrame);
});
stage.addEventListener(MouseEvent.MOUSE_UP,
function (e:Event):void {
// ボール移動イベントリスナを解除
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onBallMouseMove);
// フレームイベントリスナを登録
stage.addEventListener(Event.ENTER_FRAME, onBallEnterFrame);
});
// ボールのマウス移動イベントハンドラ
function onBallMouseMove(e:Event):void {
// マウスのy座標から角度を求めてボールのx,y座標を決定
r = Math.asin((mouseY - ballY) / ballX);
if (r < -range) {
r = -range;
} else if (r > range) {
r = range;
}
}

// ボールのフレームイベントハンドラ
function onBallEnterFrame(e:Event):void {
// かかっている力
p = p * a - r * k;
r += p;
if (r < -range) {
r = -range;
} else if (r > range) {
r = range;
}
}

// フレームイベントハンドラ
addEventListener(Event.ENTER_FRAME,
function (e:Event):void {
ball.x = ballX * Math.cos(r);
ball.y = ballX * Math.sin(r) + ballY;
var g:Graphics = canvas.graphics;
g.clear();
g.lineStyle(1, lineColor);
g.moveTo(0, ballY);
g.curveTo(controlX, ballY, ball.x, ball.y);
});
まずボールのほーですが、ballというのがBallクラスのインスタンスです。ballをつまんで動かせるようにするために(あと離したときに振動するように)、ballにMouseEvent.MOUSE_DOWNイベントリスナを、stageにMouseEvent.MOUSE_UPイベントリスナを登録してます。

ボールをつまんで動かしてる間は、ボールの位置はマウスカーソルの位置になります。そんで、ボタンを離すと振動します。コレをするために2種類のイベントリスナをボタンを押したときと離したときに切り替えています。

ボタンを押したときに有効にしてるイベントリスナは、MouseEvent.MOUSE_MOVEデス。イベントハンドラのonBallMouseMoveメソッドでは、マウスカーソルのy座標を元に角度を計算してballのx,y座標を求めています。また、角度が指定した範囲に収まるように調整してます(このサンプルでは-30度~30度です)。

ボタンを離したときに有効になるイベントリスナはEvent.ENTER_FRAMEデス。イベントハンドラのonBallEnterFrameメソッドでは角度rがバネっぽい変化をするように計算しています。一応、ここでも角度が指定した範囲に収まるようにしています。

曲線の方はというと、canvasが曲線を描画する領域となるSpriteデス。Event.ENTER_FRAMEイベントハンドラで、canvasをクリアして、ステージ左端からballの中心までの曲線を描画しています。
スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.12.12 | | Comments(0) | Trackback(0) | Flash CS3

コメント

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。