スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeFlash講座 > スケールメニュー

スケールメニュー

投稿日:2006年6月20日   レベル:中級    ソフトウェア:Flash



1ページ目
スケールメニューチュートリアルへようこそ!ここではスケールメニューの作り方について紹介します。

これは単なるアニメーションではなく、ボタンに好きなものを置き換えることができます。つまり、サイトナビゲーションとしてもつかえますよ!忘れないでください、可能性は無限です!

2ページ目
では、最初にグラフィクスを用意する必要があります。
10個のムービークリップを作成してください。それらがページのメニューとして機能することになるのです。それぞれにインスタンス名、item0からitem9の名前を付けてください。ここで作成するスクリプト内では、インスタンスをitem0~9という名前で認識します。これらのムービークリップをメニューの一部として使用するのです。

シンボル名と混同しないでください。インスタンス名はステージ上での異なったモノを認識するためのものです。シンボル名はライブラリ上でのモノで、リンケージはライブラリ内のアイテムをアクションスクリプトに使用するためのモノです。

500_501_020_01.jpg


3ページ目
このコードを_rootタイムラインの最初のフレームに追加してください。

MovieClip.prototype.scaleTo = function(xscale, yscale, speed, callbackObj, callbackFunc) {
this.createEmptyMovieClip('scale_mc', 2);
this.scale_mc.xscale = xscale;
this.scale_mc.yscale = yscale;
this.scale_mc.speed = speed;
this.scale_mc.callBackObj = callbackObj;
this.scale_mc.callBackFunc = callbackFunc;
this.scale_mc.onEnterFrame = function() {
this._parent._xscale += (xscale-this._parent._xscale)/speed;
this._parent._yscale += (yscale-this._parent._yscale)/speed;
if ((Math.abs(xscale-this._parent._xscale)<0.4) && (Math.abs(yscale-this._parent._yscale)<0.4)) {
this._parent._xscale = xscale;
this._parent._yscale = yscale;
var cbo = this.callBackObj;
var cbf = this.callBackFunc;
var prt = this._parent;
delete this.onEnterFrame;
this.removeMovieClip();
cbo[cbf](prt, 'scaleTo');
}
};
};
MovieClip.prototype.alphaTo = function(alpha, frames, callbackObj, callbackFunc) {
this.createEmptyMovieClip('alpha_mc', 3);
this.alpha_mc.alpha = alpha;
this.alpha_mc.frames = frames;
this.alpha_mc.framecount = 1;
this.alpha_mc.aperframe = (alpha-this._alpha)/frames;
this.alpha_mc.callBackObj = callbackObj;
this.alpha_mc.callBackFunc = callbackFunc;
this.alpha_mc.onEnterFrame = function() {
this._parent._alpha += this.aperframe;
if (this.framecount == this.frames) {
this._parent._alpha = this.alpha;
var cbo = this.callBackObj;
var cbf = this.callBackFunc;
var prt = this._parent;
delete this.onEnterFrame;
this.removeMovieClip();
cbo[cbf](prt, 'alphaTo');
} else {
this.framecount++;
}
};
};

4ページ目

このコードはスケーリングとアルファアニメーションに関するものです。これによって滑らかな変化を加えることが出来ます。かなり難しい内容なので、詳しい説明はここではしません。もし興味があれば、私のActionScript for Newbies and ActionScript Animationチュートリアルを見て下さい。

コードはまだ完成していません。ここで、ムービークリップをスケーリングさせるコードを作成していきます。これは、アニメーションに比べれば、少しのコードですが、とても重要です。

stop();
_root.onMouseMove = function () {
for (var i=0; i!=10; i++) {
var xdst = Math.abs(_root._xmouse - _root["item"+i]._x);
var ydst = Math.abs(_root._ymouse - _root["item"+i]._y);
var scale = 175-(xdst/2);
var alpha = 100-(xdst/5);
if ((scale > 100) && (ydst < 50)) {
_root["item"+i].scaleTo(scale, scale, 5);
_root["item"+i].alphaTo(alpha, 10);
} else {
if (_root["item"+i]._xscale != 100) {
_root["item"+i].scaleTo(100, 100, 5);
_root["item"+i].alphaTo(50, 10);
}
}
}
}

4ページ目
コードに関して手短に説明しておきます。
ここでは、マウスが動くたびに、ムービークリップの大きさとアルファが変化するようにしたいわけです。FlashにはonMouseMoveというイベントがあり、それを呼び出すコードを記述しました。イベントが呼び出されるたびに、その機能が実行されるのです。
マウスからitemまでの絶対的な距離を計算し、itemのスケールとアルファを決定します。その効果を変更したければ、式を変えることで可能です。スケールが100以上になり、マウスがitemより縦方向に50ピクセル以上離れると、先に定義した機能が適用されます。計算されるスケールが100以下で、itemのスケールが100でなければ、アイテムとアルファは元の状態に戻ります。

ページ5
これで完成です!もし、コメント、批評などありましたら是非送ってください。


引用:Web Design Library著者:MicrOchip翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

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