1 FL チュートリアルFlash ランダムなモーション Sun Mar 20, 2011 4:03 am
Admin
Admin
アクションスクリプトを使えば、ランダムなモーションを簡単に作成できます。この効果のサンプルは kikupa.comで見れます。
このチュートリアルはこの効果を作成する手順を紹介していきます。
1)まず、新しいドキュメントをディフォルトのサイズで立ち上げます。ここでの設定はたいした問題ではありません、
あくまでもメインはアクションスクリプトです。ここで私の使ったサイズは300×200です、このチュートリアルを
そのまま使いたければ、このサイズにしてください。もし、違うサイズを設定したら、スクリプトを編集しなければなりません。
その方法については、最後に説明します。
[You must be registered and logged in to see this image.]
2) 次に、“ランダムな動き”を加えるオブジェクトを作成します。小さくて、シンプルなものがよいと思います。
私は、四角を使いました。オブジェクトを作成したら、それをシンボルに変換します。
[You must be registered and logged in to see this image.]
3)作成したムービークリップに次のスクリプトを記述します。
onClipEvent (enterFrame) {
move();
}
(このスクリプトは現在のクリップにこれから作成するスクリプトを適用するものです)
4)ここでランダムモーションを作り出すスクリプトを作成していきます。スクリプトがどう動作するかをよく見て下さい。
このスクリプトをフレーム1に記述します。
function getdistance(x, y, x1, y1) {
var run, rise;
run = x1-x;
rise = y1-y;
return (_root.hyp(run, rise));
}
function hyp(a, b) {
return (Math.sqrt(a*a+b*b));
}
MovieClip.prototype.reset = function() {
width = 300;
height = 200;
var dist, norm;
this.x = this._x;
this.y = this._y;
this.speed = Math.random()*4+2;
this.targx = Math.random()*width;
this.targy = Math.random()*height;
dist = _root.getdistance(this.x, this.y, this.targx, this.targy);
norm = this.speed/dist;
this.diffx = (this.targx-this.x)*norm;
this.diffy = (this.targy-this.y)*norm;
};
MovieClip.prototype.move = function() {
if (_root.getdistance(this.x, this.y, this.targx, this.targy)>this.speed) {
this.x += this.diffx;
this.y += this.diffy;
} else {
this.x = this.targx;
this.y = this.targy;
if (!this.t) {
this.t = getTimer();
}
if (getTimer()-this.t>1000) {
this.reset();
this.t = 0;
}
}
this._x = this.x;
this._y = this.y
5)このスクリプトの記述を終えたら、ムービークリップを複製してステージの異なった場所に配置してください。
これでランダムモーションを加えることができます、インスタンスは異なった方向、時間間隔で動きます。ムービーをテストしてみましょう!!
引用:Web Design Library著者:Tutorialwiz.com翻訳:atuk]
このチュートリアルはこの効果を作成する手順を紹介していきます。
1)まず、新しいドキュメントをディフォルトのサイズで立ち上げます。ここでの設定はたいした問題ではありません、
あくまでもメインはアクションスクリプトです。ここで私の使ったサイズは300×200です、このチュートリアルを
そのまま使いたければ、このサイズにしてください。もし、違うサイズを設定したら、スクリプトを編集しなければなりません。
その方法については、最後に説明します。
[You must be registered and logged in to see this image.]
2) 次に、“ランダムな動き”を加えるオブジェクトを作成します。小さくて、シンプルなものがよいと思います。
私は、四角を使いました。オブジェクトを作成したら、それをシンボルに変換します。
[You must be registered and logged in to see this image.]
3)作成したムービークリップに次のスクリプトを記述します。
onClipEvent (enterFrame) {
move();
}
(このスクリプトは現在のクリップにこれから作成するスクリプトを適用するものです)
4)ここでランダムモーションを作り出すスクリプトを作成していきます。スクリプトがどう動作するかをよく見て下さい。
このスクリプトをフレーム1に記述します。
function getdistance(x, y, x1, y1) {
var run, rise;
run = x1-x;
rise = y1-y;
return (_root.hyp(run, rise));
}
function hyp(a, b) {
return (Math.sqrt(a*a+b*b));
}
MovieClip.prototype.reset = function() {
width = 300;
height = 200;
var dist, norm;
this.x = this._x;
this.y = this._y;
this.speed = Math.random()*4+2;
this.targx = Math.random()*width;
this.targy = Math.random()*height;
dist = _root.getdistance(this.x, this.y, this.targx, this.targy);
norm = this.speed/dist;
this.diffx = (this.targx-this.x)*norm;
this.diffy = (this.targy-this.y)*norm;
};
MovieClip.prototype.move = function() {
if (_root.getdistance(this.x, this.y, this.targx, this.targy)>this.speed) {
this.x += this.diffx;
this.y += this.diffy;
} else {
this.x = this.targx;
this.y = this.targy;
if (!this.t) {
this.t = getTimer();
}
if (getTimer()-this.t>1000) {
this.reset();
this.t = 0;
}
}
this._x = this.x;
this._y = this.y
5)このスクリプトの記述を終えたら、ムービークリップを複製してステージの異なった場所に配置してください。
これでランダムモーションを加えることができます、インスタンスは異なった方向、時間間隔で動きます。ムービーをテストしてみましょう!!
引用:Web Design Library著者:Tutorialwiz.com翻訳:atuk]