sample164_049【PDFダウンロード】

49
1枚の写真とマスクでつくる
見栄えのするプロフィール画面
http://www.octopus69.net/
制作・文：nao（psycho-candy）
ミュージシャンのWebサイトを制作する場合などに
は、限られた素材と時間の中で見せ方を工夫してい
かなければならない。そのようなときに役立つのが
マスク機能。マスクをうまく使えば、1枚の写真から
でも見栄えのするコンテンツをつくることができる。
●マスクにモーショントゥイーンを設
定し写真の見え方に変化をつける
●写真の動きに合わせてボタンにも
モーショントゥイーンを設定する
●人物のシルエットをマスクにし、そ
こに顔のアップを表示する
下図のような基本デザインを作成した
ら、Flashを使った作業に移る。まず、
Flashで作成するパーツのサイズを割り出し、
新規ドキュメントを作成。ここでは［サイズ：
440×305 ピクセル］
、
［フレームレート：20
fps］
、
［背景：白］
に設定
01
Photoshopで加工した画像をJPEG形
式で保存（画質最高の低圧縮）。画像を
Flashに読み込み、一番下の階層に用意した「メ
ンバー」
レイヤーに配置。挿入メニュー→
“シンボ
ルに変換”
でムービークリップシンボル「photo」
に変換する
02
164
バンドメンバー選択用のシルエットを作成していく。
まず、新規レイヤー「影」を作成。手順2のJPEG画
像からつくったシルエットの画像「影.JPEG」を読み込み、
ステージ右下に配置。
「影マスク」レイヤーを追加し、シル
エット全体を覆う四角形を描画。四角形を選択し、ムービ
ークリップシンボル「影マスク」に変換する
03
「影マスク」レイヤーを選択。修正メニュー→“レイヤー”を実行し、
［タイプ：マ
スク］に設定。シルエットの「影」レイヤーをマスクの対象にする。
「影マスク」
レイヤーにモーショントゥイーンを設定して、シルエットに動きをつける。ここでは、
1、12、14、16フレーム目でマスクをステージ外へ出し、10、13、15、17フレ
ーム目でシルエットを完全に覆うようにマスクを配置。このとき、マスクにさらに動
きをつけたり、透明度の違うマスクを重ねたりすると動きに変化が出る
04
シルエットが表示されるタイミングに合わせて、数
字が現れるようにする。まず「1」から「4」までの数
字をムービークリップシンボルに変換。スクリプト用のレ
イヤー「アクション」とラベル用の「ラベル」レイヤーを追
加。
「ラベル」レイヤーの1フレーム目に「out」
、5フレーム
目に「over」とラベルをつけ、マウスアウト時とマウスオ
ーバー時の状態を設定。マウスオーバーしたときは文字
のサイズを1.5倍にし、
［着色］で色を変える。最後に「アク
ション」レイヤーの5フレーム目に「stop（）;」と記述する。
同様の作業を「1」から「4」までの数字について行う
05
シーン編集画面に戻り、数字配置用のレイヤーを
4つ追加。手順5で作成した数字のシンボルを、開
始フレームとなる17フレームに配置し、グラフィックシ
ンボルに変換。プロパティパネルで［開始フレーム：1］の
［シングルフレーム］
に設定する
06
165
数字にモーショントゥイーンをつけてい
く。26フレーム目で数字の位置をフィ
ックス。その次の27フレーム目にキーフレー
ムを挿入し、各数字をムービークリップシン
ボルに変換。インスタンス名を「mc1」から
「mc4」とする
07
マウスオーバー時にメンバーの顔のア
ップが表示されるようにする。基本は
手順3、4と同様。メンバーの写真シルエッ
トを用意し、マスク用の「マスク」レイヤーに
配置。その下の階層にメンバーそれぞれの
顔写真を配置し、
「マスク」レイヤーを［タイ
プ：マスク］に設定。顔写真が点滅しながら
表示されるようにキーフレームを挿入する
09
166
27フレーム目に配置する透明ボタンをつくる。まず、任意の大きさの四角形を作成し（こ
こでは「30×30 px」に設定）
、ボタンシンボル「透明ボタン」に変換。アップフレームに
ある四角形をヒットフレームに移動し、アップフレームは空白のまま。シーン編集画面に戻り、
残りの「2」から「4」に「透明ボタン」シンボルを配置。ラベル用の「フラッグ」レイヤーを追加し、
28フレーム目に「menu」とラベルをつける。さらにスクリプト用のレイヤー「アクション」を追
加し、
「透明ボタン」を停止させるために29フレーム目に「stop();」と記述する
08
マウスオーバー時のモーション開始フレームと、マウスアウト時のモーション終了フレームに、それぞれ「＜
インスタンス名＞_over」
、
「＜インスタンス名＞_out」のラベル名をつける。これを「m1」から「m4」シンボ
ルすべてについて行う。次に、マウスオーバーの終了フレームに「stop();」、マウスアウトの終了フレームに
gotoAndPlay("menu");」と記述し、メニューのフレームに戻るように設定する
10
ステージに配置した「透明ボタン」シンボルを選択し、以下のスクリプトを記述。これにより、マウスオーバ
ー時にメンバーの顔のアップが表示され、クリックしたときにはポップアップウィンドウが開いて各メンバ
ーのプロフィールが見られるようになる。このスクリプトをすべての「透明ボタン」に記述すれば完成。実際の仕
上がりは、OCTOPUSのWebサイト（http://www.octopus69.net/）で見ることができる
11
on (rollOver, dragOver) {
_root.m1.gotoAndPlay("over");
gotoAndPlay("m1_over");
}
on (rollOut, dragOut) {
_root.m1.gotoAndPlay("out");
gotoAndPlay("m1_out");
}
on (release) {
getURL("javaScript:openPop(’./profile-ba.html’,’l’,400,400,1,0,1,0,0,0,0);");
}
移動確定後にボタンシンボルを配置する
今回のように、移動するオブジェクトをボタンにしたい場合は（手順8を参照）
、オブジェク
トの移動が完了したあとにキーフレームを挿入し、そこにボタンシンボルを配置するとよ
い。こうしておけば、オブジェクトの移動中にボタンが誤動作することはない。
167