総トップページにジャンプ

 Flash MX あらまし3(実用)



 この Flash MXのあらまし(実用)とは、実際にこの劇場をつくるときの覚えとして記したものです。なぜならば、作業が多くなってくると煩雑になって収拾がつきにくくなるからです。したがって、あらかじめ標準作業を確立しておいてスムースな進捗が計りたいのです。
 また、前の画面に戻るときは左上の緑色の「戻る」ボタンをクリックしてください。もしも、そこがダメなときは新しいウィンドウで開いているので右上の[×](「閉じる」ボタン)で戻ってください。本当は一つずつハイパーリンクをすればよいのですけれど、面倒なのでそのようにしてなくてすんません。

○一連の物語を作る基本とは?

 基本的な創作劇場の進め方としてのモデルを作ってみました。
 なお、下の例の内容にはとくに意味がありません。なぜならばイメージとして、いちばん簡単な様式を考えただけですから。むろん、実際には背景が動いたり、音楽が鳴ったり、人物が動いたり、会話をしたり、さらに画面にはカラーが施されているのですが、ここでは考え方の基本を示すためですから、何も工夫はしていません。
 画面のスクロールなども、もっと自然な方法にすることはもちろんです。
 「挿入>ファイル>Flashファイル」で「.swf」ファイルを下に貼り付けてみましょう。

 なお、途中のカットに用いた紫陽花の絵は、私が Excel で描いたものです。始めに出てくるほうが、原寸で後のほうは縮小をしたもです。このような小物は、なるべく自作をした作品を使いたいものです。他のホームページなどにあったものを無断で使ってはいけません。
 また、カット自体がその中で動画になっているのも好ましいでしょう。しかし、あまり動きすぎては効果が逆に半減してしまうかもしれません。例えば、下のようなものはどうでしょうか。

 多摩動物公園で撮影をしてハチドリ(正式にはチャムネ エメラルド ハチドリといいアメツバメ目に属します)ですが、数十コマのうち3コマ分を切り出してトリミングを改めたものです。なぜならば、なるべく負荷を小さくしたいからです。
 なお、下に貼り付けた動画の画像は Flash で作成したものではなく GIF画像にしたものです。小さい作品に Flash を使うのが大げさと考えたからです。
 Flash の「.swf」ファイルを Web ページに貼り付けるときは、「挿入>ファイル>Flashファイル」とするのですが、「.gif」ファイルでしたら「画像ファイルの挿入」アイコン(富士山のマーク)だけでファイル名を指定して簡単にできます。

 ついでですから、Flash で作成した「.swf」ファイルも参考までに次に貼り付けておきましょう。

○タイトル文字の工夫をしよう

 タイトルの文字自体を工夫することによって、かなり印象が異なってきます。
 ただ、で〜んと表示をしてあるよりも変化を付けたほうが、何となく印象に残るようです。なお、下のデザインはちょっと意表を突こうというもので、あまり一般的なものではなく、利用方法も考えなければなりません。

 注意をしなければいけないことは、変化が早いとチラチラしてしまうことです。あまり目に負担をかけない落ち着いたもののほうがよいでしょう。そんな意味では、下のタイトルは何となく抵抗を感じるようでもありますね。

○部品単位で細工をしよう

 この Flash の便利なところは、図形を単位ごとに操作できることです。例えば、下の画面のように眉、目、鼻、口を別々に描くことができます。そして「修正>シンボルに変換」や「修正>分解」をすることによって、部品として扱ったり、全体を一つの図形として操作できるので便利です。

 つまり、一つの顔であってもモジュール化して作成ができるのです。
 なお、右と左は向かって言うのか、おかめ本人の左右かなどとは、どちらでもかまいません。いずれにしても、これをドラッグして顔のところにもっていくと次のようになりました。
 また、部品に分解をしてしまえば各部品ごとに拡大・縮小や変形などができるので便利です。それらが、非常に簡単な手法で効果的ですから、あなたもいろいろと工夫をしてみてください。

 実は、これで私は1時間ぐらい遊んだのです。いろいろとやってみると面白くなって、百面相や政治家や犯人などのポンチ絵みたいなことができることがわかりました。でも、本当のことをいうと上の絵は、妻の顔を似顔絵風に描いたものなんです。
 しかし、これではちょっと気の毒ですから、もう少し真面目に変更をしたら下のようになりました。

 ちょっといい男になったでしょう。同じパーツでも配置のしかたによっては、かなり変わることがわかりました。おかめは女ですから、ほんとうは男前にはならないのですが、……
 そしてよく見ると、不思議なことに何となく私の顔に似ています。夫婦は、互いに似たものというからでしょうか? 私は還暦を過ぎてからもいい男ですが、残念ながらパタリロやガキデカのように下ぶくれなんです。せめておぼっちゃまくんくらいでしたらいいのにと、つくづく思います。

○背景を動かす工夫をしよう

 背景を動かすと、効果的な映像が実現できます。
 各場面で背景を考える一例として、猫を走らせてみましょう。
 つまり、主人公や登場人物が画面の中央にいるときに、背景が動くと何ともリアルな映像になるからです。
 ここでは「挿入>ファイル>Flashファイル」ではなく、その台紙となっている「html ファイル」にハイパーリンクをしています。

   背景が動く例

 なお、あえて「新しいウィンドウ」にはしていません。
 GGM(バックグラウンドミュージック)も鳴らしてみました。音がうるさいときは、「音量」アイコンをミュートにするか、あるいは絞ってください。
 元の画面に戻るときは、表示中の画面の左上3行目の緑色矢印「戻る」ボタンをクリックしてください。ほんとうは、猫の画面に「戻るボタン」を付けるといいんですが、面倒なので省略をしちゃったんです。
 このプログラムは簡単です。

 猫の動きは、ライブラリに収まっています。

 

 

 このような簡単な4枚の絵を繰り返すことで、走っているように見えるのですから不思議です。
 ここでは単に猫が走っただけですが、背景に風景・町並み・商店街などを用いると、非常に効果的な演出が可能になるでしょう。

 ちょっとここで BGM(バックグラウンドミュージック)に用いた音楽について触れておきましょう。
 曲は、私が作曲をしようとして途中でやめてしまった「ヴァイオリンソナタ イ短調」の冒頭の部分です。なぜならば音楽の利用については、かなり著作権がやかましいので、私はすべて自作のものを使っているからです。
 なお、年数を経て著作権が切れているものにも、その演奏をした人の権利があるので、軽い気持ちで利用をすることができません。やはり、後でトラブる場合があるようですので、注意をしてください。

 それはともかく、猫の走るのにヴァイオリンソナタを合わせてしまいましたが、一連のスライド写真にも何とか利用できるような感じもしました。そこで、

   テクノレディの一連の物語

に付けてみましたので、よろしかったら確かめてください。
 いかがでしたでしょうか?
 このページの後のほうで説明をする「展覧会の絵」のところに、振り付ける方法の説明がありあますので参考にしてください。
 なお、『テクノレディ物語』に関する一枚一枚のスライドがもっている実際の内容が必要でしたら
ここ をクリックして「回想創造法」をご覧ください。

○画面全体を上から下に徐々に消してみよう

 ときには画面を少しずつ消していくのも、アニメの演出には効果的でしょう。実際にそれを行うと、次のようになります。むろん、方向や速さなどはいろいろと変更ができます。ここでは、その一例を示すにとどまります。

(1) まず、「.swf」ファイルの貼り付けです。「挿入>ファイル>Flashファイル」から行います。

(2) 次に「html」ファイルへのハイパーリンクです。「リンクの挿入」アイコンから行います。

   画面を消していく実例

 なお、この画面のようにだだっ広い状態が見にくかったら、最初から小さい画面で開くようにします。
その方法は、http://rikinf.hp.infoseek.co.jp の「ホームページの作り方入門」にある

「ホームページビルダー」の「新しいウィンドウを任意の大きさで開く方法」を参考にしてください。
 または、ここ をクリックしていただいても同じです。
 画面を消していく実例は、次のような状態から Flash が自動的にしてくれます。

 次のようにして、その変化を実現する30コマ分を自動的に確保したのです。

   挿入>タイムラインエフェクト>変形/トランジション>トランジション

とします。すると、次のような画面になります。いろいろとやってみて、「プレビュー」をクリックして確かめましょう。

 これで「OK」をクリックすればで完成です。

○図形全体を次第に消していこう

 図形全体を一様に、ふわーっと消してみましょう。そのような消し方を「フェードアウト」といいます。このフェードアウトは使い方によって、非常に劇の効果を高めることが可能です。したがって、利用価値が大いにあることでしょう。
 ここにあるサンプルと異なって、もっと細かい配慮で図形の加工や時間の配分をしてください。

(1) まず、消える前の元の図形を描きます。その図形を「修正>シンボルに変換」します。そして、コマ10にキーフレームを設定してから再びコマ1に戻し、トゥイーンを「モーション」にします。
 ここまでの作業画面を下に示しておきましょう。

(2) 再びコマ10に進めます。図の上をクリックすると、プロパティ画面が変わります。
 そこで、カラーを「アルファ」とします。それまであった図は、その瞬間に消えて枠だけになります。右のパーセントは「0%」となっています。
 下のような画面になっているのではないでしょうか。

 これで、ふわーっと図形が消えるための操作は終わりです。実際に動かしてみると、次のようになるでしょう。ただし、ふつう劇などの中では一回だけ消えたら終わりですが、ここではループで動作をするように表示しています。

○図形全体を次第に現していこう

 ふわーっと現れてくるのは、「フェードイン」です。その方法は、上のフェードアウトの場合とは逆の行程を指定すればOKです。
 つまり、「トゥイーン」をモーションに指定した後で、10コマ目で図形をクリックしてカラーを「アルファ」にして100%とし、1コマ目では図形をクリックして0%とすればよいのです。
 その結果は、ここ をクリックして新しいウィンドウ上で確かめてください。

○徐々に図形全体を変化をさせてみよう

 ものの形を徐々に変化をさせていくのも効果的です。
 いままでのものは、すべて最初の形と終わりの形を指定しました。途中の形を「トゥイーン」の「モーション」で自動設定したり、また途中の形もすべて指定したものばかりだったでしょう。
 ここでは、最初の形と最後の形だけを指定して、図形を効果的に変化させていく方法を理解しておきます。なぜならば、その技法は簡単ですから「創作劇場」では大いに利用できると考えるからです。

 やさしい実例として、猿の影絵が鶏の影絵になる図形を考えてみましょう。

(1) まず、猿の影絵をステージに書きます。ここでは、事前にタイムラインのコマなどは、何もセットする必要がありません。

(2) 次に最終図形を描きます。
 ここでは、20コマ目で左クリックして「キーフレームの挿入」をしています。むろん、効果を考えて最終コマの位置を決めてください。すると、下の図のようになります。

(3) そこにある前の図をDeleteキーで削除して、鶏の影絵を描きました。メニューバーから「編集>削除」としてもよいでしょう。すると、下の図のようになります。

(4) 選択ツールにして1コマ目に行って、「プロパティ」画面の「トゥイーン」を「シェイプ」にします。すると、下のような画面になります。

 こまの上に進む範囲が矢印で出ていることがおわかりでしょう。
 これを実際にうごかすしてみるときは、猿から鶏(とり)へ をクリックしてください。

 これでは、最初の形と最後の形がよくわかりません。動きが早すぎるからです。そこで、前後にちょっと間を置いたらどうでしょうか。間の時間はあまり長くなると、間が抜けた感じになるし、短すぎると何とも気忙(きぜわ)しい状態になるので、よろしく調節してください。
 それでは、さるととりのかわり をご覧ください。

○展覧会の絵を作ってみよう

 今度は別窓で、サンプルを出してみましょう。次々に絵を表示する単純なものです。それでも、BGM を入れることに慣らしておきましょう。
 下の画面図のタイムランにある「絵」は、12枚の絵を次々と表示する指定です。絵はライブラリにあるビットマップの12枚で、下図にはその1枚目が表示されています。
 「絵」の下にある「ピアノ」というレイヤーが音楽を入れた部分です。ちょうど、12枚の絵に対して1つの曲が割り振られているのがおわかりでしょうか?

 ここでも、「挿入>ファイル>Flashファイル」ではなく、「新しいウィンドウ」として「html ファイル」にハイパーリンクをさせています。しかし、何もないところにハイパーリンクをすると、

   tenrankai_no_e

のようになって、その「html ファイル」のファイル名(本体、拡張子を省いた形)が出てきます。つまり、上は空白にハイパーリンクを指定した例なのです。

 やはり、 展覧会の絵 のようにしたほうがわかりやすいでしょう。どちらでも効果は同じですから、文字かボタンを用意したほうがよいのではないでしょうか?
 もしも、各一枚ずつの絵の内容がお知りになりたかったら、ここ をクリックして「自己福音書」をご覧ください。

 なお、このページの「展覧会の絵」で用いた図はすべて拡張子が「.jpg」のビットマップファイルになっています。
 また、絵と音楽のバランスを考えて「修正>ドキュメント」でドキュメントプロパティを

のようにしました。

○相互に動いている感じを出す方法と音楽を鳴らす方法は?

 一つのレイヤーでも、2つの動作を表現することができます。例えば、下のダンスがそうです。男性も女性も実際には、同じレイヤー上にいるんです。

 また、音楽を付けることも簡単です。
 実際に音を鳴らしておくわけにいきませんので、別ウィンドウで見ていただきましょう。
 いちおう「新しいウィンドウ」で独立した画面として開きました。したがって終わるときは、右上の「閉じる」ボタンをクリックしてください。すると、音もやんで直ちにこの画面に戻ります。

   ダンスに音楽を付ける

 簡単な方法ですから、ぜひ利用してあなたも効果的なシアターを作成してください。

○ここで一区切りしよう

 Flash のあらまし(入門)、Flash のあらまし(中級)、Flash のあらまし(実用)と今まで記述をしてきた例題を作成したところで、使用期間の30日が過ぎてしまいました。そこで、ここで一区切りをします。
 今までは、マニュアルもないままに暗中模索で自分なりに進めてきました。したがって、もしかしたら間違いや勘違いがあるかもしれません。また、もっとよい方法があるのに、それに気付いていないこともあるでしょう。そのようなことを皆さまにお断りしておくとともに、Macromedia社に感謝をいたします。
 今後は、改めて製品版を購入して大いに利用をさせていただくこととなるでしょう。


Kuroda Kouta (2004.11.01/2007.02.10)