このflash講座1234は,flashの使い方,flash画像の作り方,及びflashアニ,flash動画の制作方法を無料で公開したものです。
FLASH講座 ーモーショントウイーンー
(特1) 写真の出し入れ(5)
 赤いバラ白いバラ
 今回は、スクリプトを全く使わないで画像をスライスし、それぞれにモーショントウイーンを施して、ダイナミックに写真を出し入れするflash講座です。

 SAMPLEは2枚の写真の入れ替えであり、付与したモーションも思いついたものを例示したに過ぎません。 いろいろ応用、拡張は出来そうです。 しかしすべてモーショントゥイーンで作成するので、かなりの労力が必要ですね。 集中するのが苦手な方には向いていないかもしれません。(笑) 

画像をスライスする方法は、シェイプを画像で塗りつぶす手法を応用します。 
SAMPLE
(1)ステージの準備
 ●w240、H190、背景色黒、24ftpのステージを設定する
  (最終的のこの大きさにするが、スライス画像を作るときは、
   550*400ぐらいの大き目のサイズで行うほうがやりやすい)
 ●w200、H150の写真(rose1,rose2)を2枚ライブラリーに読み込む
 ●24fps
(2)シェイプを画像で塗りつぶす方法(参考)
●描画ツールで矩形、円形などを描く
 (ここでは、星の形を描いた。塗りつぶし後に枠線をシンボル化しドロップシャドウをかけているがこれは必ずしも必要ではない)
●ステージに画像(写真)を読み込み塗りつぶし単位の大きさに調節する
 (ここでは、バラの花びら部分をくりぬいたものを用意した、右上に表示されている)
●画像(花びら)を右クリック、「分解」・・・・シェイプに変換
●スポイトツールでシェイプに変換された画像をクリック
 (塗りつぶしツール窓に画像が表示される)
●バケツ(塗りつぶし)ツールで、シェイプ(星)を塗りつぶす
(3)スライス画像の作成
●ここでは、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までの名前を付ける
●できあがったスライスをきちんと4列3行に並べると、rose1の写真と同じものができあがる
●同様に、rose2についてもq1-q12までのスライスを作成し、ライブラリーに格納しておく
 (使ったレイヤーも削除する)
(4)モーショントゥイーン
rose1の登場
●レイヤー1〜12までのFRAME10を一括選択し、キーフレームを挿入
●FRAME5あたりを一括選択し、右クリック、モーショントウイーンを作成
●FRAME1を一括選択し、どれかのインスタンスをクリックして選択し、アルファ→0 に
●レイヤー1から順番にFRAME1でインスタンスを選択し、縦横を10に縮小、座標を全部(230,180)に
●レイヤー2のトウイーンの付いたFRAMEを全て選択し、ドラッグしてFRAMEを3つ右に移動
●レイヤー3〜12についても、順次3FRAME ずつ右にずらす
rose1の退場
●全てのレイヤーのFRAME55及び65にキーフレームを挿入、その間でモーショントウイーンを作成
●全てのFRAME1で、全てのスライスについて自由変形ツールで大きさを最小にし、さらに、プロパティーインスペクタでw1、h1にし、ほとんど見えないようにする
rose2の登場
●レイヤー1、FRAME75にキーフレームを挿入し、インスタンスp1を選択(小さいから注意)、プロパティーインスペクターの入れ替えで、q1と入れ替える。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の flash ファイルをダウンロードできるようにしますので、興味のある方は、こちらからどうぞ。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。   macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。
                                                                       (by Hiraoka)
HOME   Flash講座総リスト     モーショントゥイーン(特1-6)