1 FL チュートリアルFlashスケールメニュー Sun Mar 20, 2011 4:06 am
Admin
Admin
1ページ目
スケールメニューチュートリアルへようこそ!ここではスケールメニューの作り方について紹介します。
これは単なるアニメーションではなく、ボタンに好きなものを置き換えることができます。つまり、サイトナビゲーションとしてもつかえますよ!忘れないでください、可能性は無限です!
2ページ目
では、最初にグラフィクスを用意する必要があります。
10個のムービークリップを作成してください。それらがページのメニューとして機能することになるのです。それぞれにインスタンス名、item0から
item9の名前を付けてください。ここで作成するスクリプト内では、インスタンスをitem0~9という名前で認識します。これらのムービークリップを
メニューの一部として使用するのです。
シンボル名と混同しないでください。インスタンス名はステージ上での異なったモノを認識するためのものです。シンボル名はライブラリ上でのモノで、リンケージはライブラリ内のアイテムをアクションスクリプトに使用するためのモノです。
[You must be registered and logged in to see this image.]
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]
スケールメニューチュートリアルへようこそ!ここではスケールメニューの作り方について紹介します。
これは単なるアニメーションではなく、ボタンに好きなものを置き換えることができます。つまり、サイトナビゲーションとしてもつかえますよ!忘れないでください、可能性は無限です!
2ページ目
では、最初にグラフィクスを用意する必要があります。
10個のムービークリップを作成してください。それらがページのメニューとして機能することになるのです。それぞれにインスタンス名、item0から
item9の名前を付けてください。ここで作成するスクリプト内では、インスタンスをitem0~9という名前で認識します。これらのムービークリップを
メニューの一部として使用するのです。
シンボル名と混同しないでください。インスタンス名はステージ上での異なったモノを認識するためのものです。シンボル名はライブラリ上でのモノで、リンケージはライブラリ内のアイテムをアクションスクリプトに使用するためのモノです。
[You must be registered and logged in to see this image.]
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]