誰でも作れるFLASH作成講座

ここではMacromedia FlashMXを使ってFlashムービーを作成します。
このとおりにやれば誰でも作れますので、挑戦してみましょう。

問  次の条件に従ってFLASHムービーを作成せよ。

    完成品は、ここをクリックして下さい。 
 
【条件】 
@ ドキュメントプロパティ 
FLASHドキュメント名 summer.fla
FLASHムービー名 summer.swf
サイズ 550×400
背景
フレームレート 12
 
A 使用シンボル
シンボル名 タイプ 使用シンボル
うちわ グラフィック うちわ.swf
グラフィック .swf
少女 グラフィック 少女.swf
星空 グラフィック 星空.swf
草むら1 グラフィック 草むら1.swf
草むら2 グラフィック 草むら2.swf
草むら3 グラフィック 草むら3.swf
暑中見舞い グラフィック (テキスト)
俳句 グラフィック (テキスト)
流星 グラフィック (シェイプ)
流れ星 グラフィック (流星)
蛍点滅 ムービークリップ (蛍)
少女動作 ムービークリップ (少女)(うちわ)
草むら ムービークリップ (草むら1〜3)
メッセージ グラフィック (暑中見舞い)

FLASHの基本構造について
【シーン】

いわゆるステージに相当します。この上で表示されるアニメーションが実際のムービーとなるわけです。シーンは、複数のレイヤーによって構成されます。
またそれぞれのレイヤーにはフレームが設定され、時間の経過に伴い表示されるフレームが移動します。フレームレートは1秒間にいくつのフレームが表示されるかを示します。

【レイヤー】

レイヤーは,言ってみれば透明なセルだと考えれば良いでしょう。
シーンやシンボルにはレイヤーが複数設定できます。それぞれのレイヤーには上下関係があり、上のレイヤーほど優先して表示され、下のレイヤーは上のレイヤーに隠されることになります。

【フレーム】

アニメーションの基本は、複数の絵を連続的に表示することでものが動いているように見せることです。フレームは、その絵の1枚1枚に相当します。
各レイヤーは、1フレームから開始されます。
通常は、時間の経過に伴い1フレームずつ再生ヘッドが移動しますが、ActionScriptにより、分岐させることも可能です。

【シンボル】

シンボルは、ドキュメントで使用する再利用可能なエレメントです。
シンボルには、グラフィック、ボタン、ビデオクリップ、サウンドファイル、またはフォントを組み込むことができます。
作成された新しいシンボルは、ファイルのライブラリに保存されます。
シンボルをステージ上に配置すると、そのシンボルのインスタンス (オリジナルのシンボルを参照する、コピーのようなもの)が作成されます。

【インスタンス】

シンボルをステージや他のシンボルに貼り付けると、インスタンスになります。
これは、あくまで元のシンボルを参照するエイリアスなのでデータ量は少なくて済みます。
また、インスタンスを変形することで元のシンボルとは異なる形になることもあります。

【グラフィック】
静止イメージや、メインムービーのタイムラインに連動する再利用可能なアニメーションを作成するには、グラフィックシンボルを使用します。グラフィックシンボルは、ムービーのタイムラインに合わせて動作します。グラフィックシンボルのアニメーションシーケンスでは、インタラクティブコントロールとサウンドが機能しません。
【ムービークリップ】
再利用可能なアニメーションを作成するには、ムービークリップシンボルを使用します。ムービークリップは、メインムービーのタイムラインとは別に再生される独自のマルチフレームタイムラインを備えています。つまり、ムービークリップはメインムービー内のミニムービーのようなものであり、インタラクティブコントロール、サウンド、その他のムービークリップインスタンスを含めることができます。また、ボタンシンボルのタイムライン内部にムービークリップインスタンスを配置すれば、アニメーション化したボタンを作成することもできます。
【ボタン】

マウスのクリックやロールオーバー、またはその他のアクションに反応するインタラクティブボタンをムービー内で作成するには、ボタンシンボルを使用します。ボタンの各状態に関連付けるグラフィックを定義し、ボタンインスタンスにアクションを割り当てます。


【手順1
@FlashMXを起動します。
A
まず画面下部のドキュメントプロパティを設定します。
ここでは背景を黒にして下さい。
  
B 次のシンボルを作成します。
これらはいずれもあらかじめFlashMXで作成されているイメージデータです。
ここからダウンロードしてから実行して自己解凍して下さい。
 [挿入]−[新規シンボル]−(シンボル名入力,タイプ:グラフィック) 
 [ファイル]−[読み込み]−(ファイル名入力)
 を繰り返して新規シンボルを順次作成してください。
シンボル名 シンボルタイプ ファイル名
うちわ グラフィック うちわ.swf
グラフィック .swf
少女 グラフィック 少女.swf
星空 グラフィック 星空.swf
草むら1 グラフィック 草むら1.swf
草むら2 グラフィック 草むら2.swf
草むら3 グラフィック 草むら3.swf
 
C 次のシンボルを作成します。
  これらはすべて、テキストおよびシェイプによりシンボルを作成します。
  [挿入]−[新規シンボル]−(シンボル名入力,タイプ:グラフィック)
  
で新規シンボルを作成してください。
シンボル名 シンボルタイプ 内容 フォント
暑中見舞い グラフィック (テキスト) HGS行書体 42P 横書き
俳句 グラフィック (テキスト) HGS行書体 28P 縦書き
流星 グラフィック (シェイプ) 左上がりの直線 実線 太さ1 長さ20
 
D 次のシンボルを作成します
シンボル名 シンボルタイプ 使用シンボル
メッセージ グラフィック 暑中見舞い
タイムライン
 
1)新規シンボルを作成して、すでに作成してある「暑中見舞い」グラフィックを貼り付けてください。
2)21フレーム、31フレームと50フレームにキーフレームを挿入します。
  該当するフレームをクリックして、
  [挿入]−[キーフレーム]でキーフレームを挿入します。
3)1フレームと50フレームにアルファ値を設定してください。
  アルファ値を設定することにより、インスタンスを透明や半透明にできます。
  該当するフレームをクリックして、インスタンスをクリックしてアルファ値を0%に設定してください。

 
4)1フレームと31フレームにモーショントゥイーンを設定してください。
  該当するフレームをクリックして、
  [挿入]−[モーショントゥイーンを作成]でモーショントゥイーンを設定できます。
 
E 次のシンボルを作成します。
シンボル名 シンボルタイプ 使用シンボル
流れ星 グラフィック 流星
タイムライン
ガイドレイヤーは、左上がりの直線になります。これは流れ星の通り道になります。
  
【ガイドレイヤー】
モーショントゥイーンを作成する際に、アニメーションの通り道を設定する特殊なレイヤーがガイドレイヤーです。

[挿入]−[モーションガイド] でガイドレイヤーが作成できます。
ガイドレイヤーには、通り道(この場合は、斜線ですね。)だけを描いて下さい。
 
F 次のシンボルを作成します。
シンボル名 シンボルタイプ 使用シンボル名
蛍点滅 ムービークリップ
タイムライン
新規シンボルを作成して、「蛍」グラフィックを貼り付け、上記のように蛍が点滅するムービークリップを作成してください。
 
G 次のシンボルを作成してください。
シンボル名 シンボルタイプ 使用シンボル名
草むら ムービークリップ 草むら1〜3
タイムライン
シンボル 草むら1 草むら2 草むら3
フレーム 30 30 30
−242 −226 −210 55
−100 −100 −100 −120
回転 10° −5°
 
それぞれ、「草むら1〜3」グラフィックを貼り付けて、重ね合わせて草むらが風で揺れているようにアニメーションを作成します。動作は、上記のように回転、または平行移動を使用してください。
 
H 次のシンボルを作成してください。
シンボル名 シンボルタイプ 使用シンボル名
少女動作 ムービークリップ  少女,うちわ
タイムライン
ここでは「少女」グラフィックの上に「うちわ」グラフィックを重ねて、うちわを回転させることでうちわを扇いでいるように動作させてください。
回転軸はひじにくるように設定してください。
1フレームに「少女」と「うちわ」を重ねるように配置してください。








 
25フレームで「うちわ」をひじが軸に顔が隠れなくなるまで左に回転させてください。
   
1,50フレーム 25フレーム
 
I メインステージに次のようにレイヤーを設定します。
1)1〜50フレームには、「メッセージ」グラフィックを貼り付けてください。
  画面の中央にメッセージが表示されるように配置してください。
2)70330フレームには、「星空」グラフィックを貼り付けてください。
  ステージいっぱいに配置してください。
3)331フレームにキーフレームを挿入してください。
4)70フレームにはモーショントゥイーンを設定してください。
  70フレームの「星空」インスタンスのアルファ値を0%に設定して下さい。
 
J メインステージに次のように新規レイヤーを挿入してください。
「草むら」ムービークリップをステージの下部に配置してください。
 
K メインステージに次のように新規レイヤーを挿入してください。
タイムライン
1)「少女動作」ムービークリップをステージの右側に配置してください。
2)50フレームにはモーショントゥイーンを設定してください。
3)331フレームにActionScriptを挿入します。
これはちょうどマクロのようなものでプログラムをフレームに埋め込むことができます。
 【アクションの手順】
1)331フレームをクリックしてアクション−フレームをクリックします。
2) アクション画面が開くので左側のリストにある「gotoAndplay」をクリックします。
3) 右側に gotoAndplay() と表示されますので()の中に210と入力してください。
これは331フレームにきたら次に210フレームに移動しろという命令です。
つまり繰り返し処理を続けるようになります。
4) アクション−フレームをクリックしてアクション画面を閉じます。
完成したら [制御]−[ムービープレビュー] で動作を確認してください。
 
L メインステージに次のように新規レイヤーを挿入してください。
タイムライン
ここでは「蛍点滅」ムービークリップを配置します。
1)110フレームにキーフレームを挿入して、「蛍点滅」ムービークリップを貼り付けます。
  140フレームに空白キーフレームを挿入して下さい。
2)213フレームにキーフレームを挿入して、「蛍点滅」ムービークリップを貼り付けます。
  243フレームに空白キーフレームを挿入して下さい。
3)270フレームにキーフレームを挿入して、「蛍点滅」ムービークリップを貼り付けます。
  301フレームにキーフレームを挿入して、「蛍点滅」ムービークリップを貼り付けます。
4)270フレームにモーショントゥイーンを設定してください。
  ここでは蛍が点滅しながら右から左へ飛んでいる様子を描きます。
  
「蛍点滅」インスタンスの位置は下記の通りです。
フレーム 110 213 270 301
166 220 111 9
279 359 293 240
 
M メインステージに次のように新規レイヤーを挿入してください。
230フレームから261フレームでは蛍が点滅しながら左から右へ飛んでいる様子を描きます。
 
N メインステージに次のように新規レイヤーを挿入してください。
 
O メインステージに次のように新規レイヤーを挿入してください。
「流れ星」グラフィックを貼り付けてください。
2つの流れ星はいずれもステージの左上の外側に配置してください。
ただし少し位置をずらしておきましょう。
 
P メインステージに次のように新規レイヤーを挿入してください。
 「俳句」グラフィックをステージの左上に配置してください。
 
Q これで完成です。
  [制御]−[ムービープレビュー]でテストしてください。
  おかしなところがあれば戻って修正してください。
 
R {ファイル]−[パブリッシュ]でhtmlファイルを作成します。
  ファイル名は、"summer.html"と自動的につけられます。