FLASHのお勉強　ーモーショントウイーンー

（特１）　写真の出し入れ（5）
　今回は、スクリプトを全く使わないで画像をスライスし、それぞれにモーショントウイーンを施して、ダイナミックに写真を出し入れするお勉強である。　SAMPLEは2枚の写真の入れ替えであり、付与したモーションも思いついたものを例示したに過ぎない。　いろいろ応用、拡張は出来そうである。　すべてモーショントウイーンで作成するので、かなりの労力が必要である。　集中するのが苦手な方には向いていないかもしれない。　こういうことが楽しくやれるようでないと、、、
　画像をスライスする方法は、シェイプを画像で塗りつぶす手法を応用している。　まずは、この手法から解説することにしたい。
SAMPLE
（1）ステージの準備
　●w240、H190、背景色黒、24ftpのステージを設定する
　　（最終的のこの大きさにするが、スライス画像を作るときは、
　　　550*400ぐらいの大き目のサイズで行うほうがやりやすい）
　●w200、H150の写真（rose1，rose2）を2枚ライブラリーに読み込む
　●24fps
(２)シェイプを画像で塗りつぶす方法（参考)
●描画ツールで矩形、円形などを描く
　（ここでは、星の形を描いた。塗りつぶし後に枠線をシンボル化しドロップシャドウをかけているがこれは必ずしも必要ではない)
●ステージに画像(写真)を読み込み塗りつぶし単位の大きさに調節する
　（ここでは、バラの花びら部分をくりぬいたものを用意した、右上に表示されている)
●画像(花びら）を右クリック、「分解」・・・・シェイプに変換
●スポイトツールでシェイプに変換された画像をクリック
　（塗りつぶしツール窓に画像が表示される)
●バケツ（塗りつぶし)ツールで、シェイプ(星)を塗りつぶす
（３）スライス画像の作成
●ここでは、200*150の写真を12分割（4列3行)する方法を述べる
●レイヤーを12枚作る。
●レイヤー1に50*50の枠線のない矩形を描く（色は何色でも良い）
●レイヤー2にレイヤー1の矩形をコピー・ペイストし、レイヤー1の矩形の右側にくっつけて配置する
●レイヤー3〜レイヤー12まで、同様に矩形をペイストし、4列3行に配置、全体で写真と同じ大きさになるようにする。
　　（左上がレイヤー1)
●新規レイヤーにライブラリーからrose1を表示し、右クリックー分解でビットマップからシェイプに変換する
●スポイトツールで、rose1シェイプをクリックし、御用済みのrose1のレイヤーを削除する
●4列3行の矩形集合体を全部選択し、塗りつぶしツールで塗りつぶす
●矩形全体がrose1でタイル状に塗りつぶされるが、rose1がきれいに収まってはいない。
　（同じ大きさのシェイプで塗りつぶしてはいるが、基点が同じになっていない)
●矩形全体を動かして、rose1と同じ写真が出来上がるように、トライアンドエラーで塗りつぶしを繰り返す
　（文章では分からないかも。実際にやってみるとわかります。でも、もっといい方法がないかな〜）
　もっといい方法ありました：集合矩形の全体サイズと、ステージのサイズを同じにしておけば、いっぺんできれいに塗り　つぶせます。その後、ステージの大きさを変えて、全体を移動させれば好みのレイアウトが作れます。
●集合体の写真が出来上がったら、スライスを1枚1枚ばらして、12枚がお互いに少し離れるように配置する
　（こうしないと、シンボルに変換するときに複数選択したりして、うまくいかない）
●スライスを1枚1枚選択しながら、シンボル（ムービークリップ、基準点真中)に変換し、p1-p12までの名前を付ける
●できあがったスライスをきちんと４列３行に並べると、rose1の写真と同じものができあがる
●同様に、rose2についてもq1-q12までのスライスを作成し、ライブラリーに格納しておく
　（使ったレイヤーも削除する）
（４）モーショントゥイーン
rose1の登場
●レイヤー1〜12までのFRAME10を一括選択し、キーフレームを挿入
●FRAME5あたりを一括選択し、右クリック、モーショントウイーンを作成
●FRAME1を一括選択し、どれかのインスタンスをクリックして選択し、アルファ→0 に
●レイヤー1から順番にFRAME1でインスタンスを選択し、縦横を10に縮小、座標を全部（230,180)に
●レイヤー2のトウイーンの付いたFRAMEを全て選択し、ドラッグしてFRAMEを３つ右に移動
●レイヤー3〜12についても、順次３FRAME ずつ右にずらす
rose1の退場
●全てのレイヤーのFRAME55及び65にキーフレームを挿入、その間でモーショントウイーンを作成
●全てのFRAME1で、全てのスライスについて自由変形ツールで大きさを最小にし、さらに、プロパティーインスペクタでw1、h1にし、ほとんど見えないようにする
rose2の登場
●レイヤー1、FRAME75にキーフレームを挿入し、インスタンスp1を選択（小さいから注意）、プロパティーインスペクターの入れ替えで、ｑ１と入れ替える。FRAME85にキーフレームを挿入して、その間にモーショントウイーンを作成し、プロパティーインスペクターで右回り1回転を設定する
●FRAME75のインスタンスの座標を(1,1)に移動（全てのレイヤーのインスタンスについても同じ座標に移動)
●FRAME85で各インスタンスの大きさを50*50に設定し、最初にrose1が登場した位置に座標を戻す
●同様に、レイヤー2〜12までについても、FRAMEを3つずつずらせながらモーショントウイーンを作成する
rose2の退場
●レイヤー12のFRAME130及び140にキーフレームを挿入、その間にモーショントウイーンを作成、右回り1回転を設定
●FRAME140で大きさをw1,h1に縮小し、座標を（235,185)に移動する
●レイヤー11〜1についても同様に、FRAMEを2ずつずらせながら、モーショントウイーンを作成する
●ｆｌａファイル
本SAMPLEの ｆｌａ ファイルをダウンロードできるようにしますので、興味のある方は、こちらからどうぞ。
HOME　　　お勉強総リスト