この講座は,flashソフトを用いてflashアニメなどの制作をスクリプトを通して無料で公開したものです。 |
||
| FLASH講座 ーアクションスクリプトの実践的事始めー 基本編 (9)虫眼鏡 |
||
| 今回のflash講座は、定番の虫眼鏡です。 ちょっと息抜きのつもりです、易しいスクリプトで楽しんでください。 なお、マスクについては、講座シリーズ「マスク｣を参照願います。 また、同じくマスクの応用で作成した「イメージマップ風ナビゲーター｣でも、同様のスクリプトを使っています。 |
||
| １．マウスに追随する虫眼鏡 | ||
| ステージの設定・及び準備 （１）w480､h320のステージを設定する。 （２）背景となる写真(画像)を準備する。ここでは、w720､h480の写真をステージ（レイヤー1)に挿入し、さらに、この写真を新しいレイヤー(レイヤー2)にコピー・ペイストして2枚同じ位置に重ねる。上部にのっている2枚目の写真をシンボルに変換、photoと命名した。 （３）1枚目の写真、すなわち、下層にある写真のサイズをステージと同じw480、h320に縮小する。1,2枚目の写真は、いずれも座標の起点（0,0）を左上隅に置く。 （４）次に、レイヤーを２つ追加し、レイヤー3に半径１００の真円を描く(縁線は描かない)。白黒放射状のグラデーション塗りで、中心は白、アルファー値０、縁は黒、アルファー値10とする。（虫眼鏡っぽく見せるため) 真円をシンボルに変換し（基準点を中心にする)、enと命名した。 （５）レイヤー4にレイヤー3の真円(シンボル)をコピー・ペイストする。 （６）レイヤー3を右クリックし、マスクにチェックを入れる。レイヤー2だけをマスク対照にする。（レイヤー1がマスク対象になってしまった場合は、レイヤーのアイコン部をダブルクリックして、マスクのチェックをはずす) |
||
| スクリプト（シンボルphotoに） | ||
| onClipEvent(enterFrame) { this._x=-0.5*_root._xmouse; this._y=-0.5*_root._ymouse; } |
マスク対象の写真(レイヤー2)は、虫眼鏡の部分しか見えないが、背後に見えている写真の1.5倍サイズである。したがって、虫眼鏡で見える上層写真部分と、下層写真部分にずれが生じる。そこで、虫眼鏡(中心はマウス位置)に同じ部分がくるようにするため、上層写真を、マウスの動きにつれて移動させる必要がある。 移動させる値は、−方向に （1.5-1.0）×マウス座標 である。 |
|
| スクリプト（シンボルenに） | ||
| onClipEvent(enterFrame) { this._x=_root._xmouse; this._y=_root._ymouse; } |
これは単に円(虫眼鏡）をマウスに追随させるためのスクリプトである。このスクリプトは、マスク用のenと、表面にのっているenの両方に記述する。（両方の円が同じ位置を保ちながら移動する) | |
| ２．自動的に移動する虫眼鏡 | ||
| スクリプト（シンボルphotoに） | ||
| onClipEvent(enterFrame) { this._x=-0.5*_root.en._x; this._y=-0.5*_root.en._y; } |
移動する虫眼鏡（en）とともに、マスク対象写真を移動させる。 |
|
| スクリプト（シンボルenに） | ||
| onClipEvent(load) { this._x=this._y=50; dx=10; dy=7; } onClipEvent(enterFrame) { this._x+=dx; this._y+=dy; if (this._x <50 || this._x>430) { dx = -dx; } if (this._y <50 || this._y>270) { dy = -dy; } } |
虫眼鏡の初期位置 移動速度の係数 水平方向の直線移動 垂直方向の直線移動 enの外周がステージの左右の縁に触れたら 反対方向へ enの外周がステージの上下の縁に触れたら 反対方向へ |
|
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
|
||
| HOME Flash講座総リスト flash action script 基本編(10) | ||
