このfalsh講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです。 |
|
| FLASH講座ーアクションスクリプトの実践的事始めー 活用編 (11) クリックで画像が拡大・縮小する画像ギャラリー 水墨画カレンダー |
|
| 今回のflash講座は、サムネイルをクリックして切り替え表示される画像です。 そしてさらにクリックするとその一部が拡大表示されます。 もう一度クリックすると元の大きさに戻る。 このようなタイプの画像ギャラリーの作成が今回の講座です。 このようなタイプのギャラリーの作成を思いついたのは、SAMPLEを見ていただければ分かると思います。 12ヶ月分のカレンダーをFLASHムービーで紹介する際に、絵の部分だけを拡大表示したかったのです。 題材は、水墨画家、雲遊さんの描いた作品が掲載されたカレンダーです。（URA：http://suibokuga.jp） なお、スクリプトは、サムネイル画像、および、表示画像のアクションをクラスファイル（menuevent.as）に記述する方法をとりました。 さらに、このasファイルの中の、重複記述が必要な部分を、別asファイル（moExchange.as）に記述しました。 どうも、この種のscriptは、クラス方式で記述した方が楽なような気がします。 |
|
| SAMPLEの、水墨画カレンダーです。 | |
| ステージの準備 | |
| ●サイズ800×600、背景色：#41536D、１２ｆｐｓのステージを準備する。 ステージの左（座標 x：10,y：5）にw211、h588の矩形（色：#B4BFD1）を描く。 1月から12月までのサムネイル（75×57）をこの矩形内に2列に配置する。 ●サムネイルと同じ大きさの矩形（色：白、アルファ70）のシンボルを作成、各サムネイルの上層に配置し、インスタンス名をsh1-sh12と名付ける。 ●座標 ｘ：450、ｙ：510あたりにダイナミックテキストボックス（whatMonth）を配置し、HGP行書体、32pt、B、色：白、ビットマップテキストを設定する。 ●ステージ（座標 ｘ：310、ｙ：0）に400×600の矩形を描き、アルファーを0とし、シンボルに変換、areaと名付ける。 なお、sh1-sh12、areaについては、プロパティインスペクターでインスタンス名（シンボル名に同じ）を忘れずに記入する。 ●挿入ー新規シンボルで540×435の矩形を描き、アルファーを0にして、paint_maskと名付けて、リンケージを設定する。 ●ステージ右下には、静止テキストで「カレンダーを クリックすると 拡大･縮小します」と記載。 ●ｓｗｆファイルと同じディレクトリーに600×598のカレンダー画像（m1.jpg-m13.jpg）を置く。 |
|
| スクリプト（Action Script） | |
1-12月+表紙の数だけmenuEventインスタンスを作成 areaがクリックされたら表示されている月の画像についてmenuEvent クラスのpaintZoom関数を実行する |
|
| クラスの定義 変数の定義 コンストラクタ関数 moExchangeクラスで表紙を表示 サムネイル上層のshを配列に ロールオーバー時に ロールオーバーされたshの番号を flagの値とする ロールアウト時は０に リリースされたら、 テキストボックスにその月を表示 その月の画像を表示 flagが1-13なら アルファを0に 0なら100に 関数の定義 マスクとなるムービークリップを配置 初期の大きさ（scale） 配置座標 もし、scaleが70以下なら load_mcのscaleを100に ｘ座標を210に マスク設定 mask_mcのscaleを100に ｙ座標を270に そうでなかったら（拡大していたら） load_mcのscaleを65（初期値）に load_mcのx座標を310（初期値）に マスク解除 |
|
| クラスの定義 変数の定義 コンストラクタ関数の定義 load_mcの作成 MovieClipLoaderインスタンス 引数(month)月の画像ファイル名 画像の表示 画像の座標 画像のscale |
|
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
|
|
| HOME Flash講座総リスト アクションスクリプトの実践的事始め-活用編(12) |
