ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeFlash講座 > ランダムなモーション

ランダムなモーション

投稿日:<2006年7月4日>   レベル:中級    ソフトウェア:Flash


アクションスクリプトを使えば、ランダムなモーションを簡単に作成できます。この効果のサンプルは kikupa.comで見れます。
このチュートリアルはこの効果を作成する手順を紹介していきます。

1)まず、新しいドキュメントをディフォルトのサイズで立ち上げます。ここでの設定はたいした問題ではありません、
あくまでもメインはアクションスクリプトです。ここで私の使ったサイズは300×200です、このチュートリアルを
そのまま使いたければ、このサイズにしてください。もし、違うサイズを設定したら、スクリプトを編集しなければなりません。
その方法については、最後に説明します。

ランダムなモーション画面サイズ


2) 次に、“ランダムな動き”を加えるオブジェクトを作成します。小さくて、シンプルなものがよいと思います。
私は、四角を使いました。オブジェクトを作成したら、それをシンボルに変換します。

シンボルに変換

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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング