« 2006年04月 | メイン | 2006年06月 »
ロールオーバーで再生と逆再生
この絵を見て「ん？」って思った人もいるでしょうね。ピンク色の表紙「FLASH ActionScriptスーパーサンプル集」の「03-1ロールオーバーで再生と逆再生」のサンプルです。
このサンプルを動作を同じままでスクリプトを書き換えてみました。サンプルは２個あって、１つはムービークリップシンボルにフレームアクションを書き込んだスタイル。もう１つはMovieClipクラスを拡張したPistonクラスをリンケージするスタイルです。
サンプル：
スクリプトリストとflaファイルのダウンロードのリンクは「続き・・・」にあります↓
Pistonクラス：
class Piston extends MovieClip {
var rollover:Boolean = false;
//
//最初は停止から始める
//
function onLoad() {
stop();
}
//
//マウスカーソルがロールオーバーした
//
function onRollOver() {
//ロールオーバー開始
rollover = true;
onEnterFrame = animation;
}
//
//マウスカーソルがロールアウトした
//
function onRollOut() {
//ロールオーバー終了
rollover = false;
onEnterFrame = animation;
}
//
//フレームが進む度に実行
//
function animation() {
if (rollover) {
//次のフレームへ進む（最終フレームでは無視される）
nextFrame();
} else {
//手前のフレームに戻る（先頭フレームでは無視される）
prevFrame();
}
//先頭または最後のフレームに到達したらアニメーションを終了する
if ((_currentframe == 1) || (_currentframe == _totalframes)) {
//onEnterFrameイベントハンドラを消去する
delete onEnterFrame;
}
}
}
flaファイルとasファイルはココからダウンロードできます。→ダウンロード
雪が降るアニメーション
ピンク本「Flash ActionScriptスーパーサンプル集」の「07-1 雪が降るアニメーション」もFlash 8用に書き換えてみました。ただ、見た目はほとんど同じですが、手法はまったく別のやり方になっています。
雪のインスタンスを[start]ボタンでアタッチし、アタッチした複数のインスタンスを配列で管理する方法に書き換えてあります。カスタムクラスは使っていませんが、ムービークリップのインスタンスをアタッチ・消去する、配列で管理するというサンプルになっています。
サンプル：
flaファイルはココからダウンロードできます。→ダウンロード
ホッピングするボール
ボールをクリックすると落下して地面で跳ね返ります。ボールの位置はドラッグできて、どこからでも落とすことができます。傾斜にぶつかったら斜めに跳ね返らないのかよ〜っていうのは、スクリプトを単純化するために省略です。
いったいどうやっているのか考えてみてください？ 斜めに跳ね返らせる方法もね。
地面を突き抜けないようにするくふうもポイント。
サンプル：
flaファイルはココからダウンロードできます。→ダウンロード
投稿者 oshige : 18:16 | コメント (0) | トラックバック
障害物と方向転換
ちょっと変わったサンプルを作ってみました。障害物となるインスタンスの中に入ると進む向きを変更します。動きをよく観察してみてください。
衝突チェックはMovieClip.hitTest()で行います。
var hit:Boolean = hit_mc.hitTest(_x, _y, true);
移動から衝突チェックまでのスクリプト（抜粋）は次のようになります。vx、vyがベクトルの成分です。高校数学を思い出してね。
//移動
_x += vx;
_y += vy;
//向き
_rotation = d;
//
//衝突チェック
var hit:Boolean = hit_mc.hitTest(_x, _y, true);
if (hit) {
//10度曲がる
d += 10;
vx = speed*Math.cos(d*Math.PI/180);
vy = speed*Math.sin(d*Math.PI/180);
}
サンプル：
投稿者 oshige : 11:57
クリックした位置を中心に回転する
ムービークリップを回転させるには_rotationプロパティの値を少しずつ加算（減算）すればいいですよね。では、次のサンプルのようにクリックした位置を中心点にして回転させるにはどうすればいいでしょう？？
ぼくもけっこう試行錯誤したんですが、答えは意外にも簡単でした！ さあ、考えてみてください。
サンプル：
で、これをさらに発展させたのが次のサンプルです。今度はドラッグしてぐるぐる回せます。こっちはちょっと難しいですね。
サンプル：
クリックした位置を中心に回転する（回答）
先日の「クリックした位置を中心に回転する」はどうやるかを種明かししましょう。写真をクリックするとクリックした点を中心に写真が回転します。そのままドラッグすることもできるというサンプルです。
サンプル：
ムービークリップのインスタンスを回転させるには、インスタンスの_rotationプロパティを連続的に変更します。_rotationプロパティの単位は度数なので、
this._rotation += 5;
とすれば5度ずつ回転します。このとき、回転の中心はムービークリップの座標の中心点です。ムービークリップには変形の中心点と座標の中心点がありますが、変形の中心点はあくまでもオーサリング時の[自由変形ツール]での変形の中心であって、スクリプトでは座標の中心点が回転や拡大などの中心点になるので誤解しないようにしましょう。
さてここからが種明かしです。（最後にflaファイルのダウンロードのリンクがあります）
回転させるためには写真をムービークリップシンボルにしなければならないというのは予想できると思いますが、実は回転させているのは写真のインスタンスではないのです。ステージに写真のインスタンスを作ったならば、それを選択してもう１回ムービークリップシンボルに変換します。つまり、入れ子になっているムービークリップを作ります。ステージに置いてあるのは、この写真が入れ子になっているインスタンスです。
インスタンスがクリックされたならば、クリックされた座標にインスタンスを移動します。これでマウスの位置にインスタンスの中心点が移動します。しかし、これでは写真の位置が動いてしまうので、インスタンスをマウスの位置に移動しただけ、中に入っている写真のインスタンスを逆方向に動かします。これで写真は元に位置から動いていないように見えます。後はこのままインスタンスを回転させればインスタンスはマウスの位置で回転するので、写真はマウスクリックした位置を中心点にして回転するように見えるのです。
//回転・ドラッグ開始
function onPress() {
//ドラッグ開始
this.startDrag(false);
//クリックした位置に移動
var xm:Number = this._xmouse;
var ym:Number = this._ymouse;
this._x = _root._xmouse;
this._y = _root._ymouse;
//移動した分だけmyMC（写真）の位置を補正
myMC._x -= xm;
myMC._y -= ym;
onEnterFrame = mawasu;
onMouseMove = updateStage;
}
//回転・ドラッグ終了
function onRelease() {
this.stopDrag();
delete this.onEnterFrame;
delete this.onMouseMove;
}
//回転・ドラッグ終了
function onReleaseOutside() {
this.stopDrag();
delete this.onEnterFrame;
delete this.onMouseMove;
}
//画面リフレッシュ
function updateStage() {
updateAfterEvent();
}
//インスタンスを回す
function mawasu() {
this._rotation += 5;
}
マウスクリックの位置を中心として回す方法はほかにも考えられますが、この方法がもっともお手軽なのではないかと思いますよ。発想の転換ですね。この考え方はいろいろなケースで応用できると思うので、研究してみてください。