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

 Flash MX あらまし2(中級)



 Flash MXの扱い方1では次のような項目をマスターしました。

○Flash MX とは?

○Flash MXの簡単な操作

○Flash の起動

○新規作成/Flashドキュメント

○まず何かを描いてみる

○図形を動かす準備をしよう

○実際に図形を動かしてみよう

○同じ場所で動かしてみる

○ホームページに貼り付けて実際に利用する

○背景を付けてみよう

○物体を動かしてみよう

○鞠つきとお手玉

○画像を読み込んでみよう

○ムービーで撮った連続写真を利用してみよう

○回転をさせてみよう

○ステージに読み込んだ画像を加工してみよう

○次第に大きさを変えてみよう(大から小へ)

○次第に大きさを変えてみよう(大から小へ)

○ステージの大きさを変えてみよう

○二つの物体を動かしてみよう


 このページでは今までの基本をもとにして、さらに次のようなステップアップをしていきましょう。

○フレームを活用しよう

 アニメを構造化して、フレームに分割をして下絵を描くとよいでしょう。そしてここでは、そのようなことを前のページから引き続いて考えてみましょう。前にあった、自動車と飛行機が反対方向に走る例題です。その例題に、動かない地面と動かない雲を追加してみましょう。

(1) レイヤーのアイコンをクリックしてレイヤー3を出して、その目盛り1をクリック、リバースにします。地面を描いてから、選択ツールで囲んで「修正>シンボルに変換……」をします。

(2) 同様に、レイヤーのアイコンをクリックしてレイヤー4を出して、その目盛り1をクリック、リバースにします。雲を描きます。バケツツールで塗りつぶしていますから、選択ツールで囲んで「修正>シンボルに変換……」をする必要はないでしょう。

 このようにすると、下図のようになります。

 実際に動かしてみると、下のようになります。
 この場合では、地面の向こう側に自動車が走っていたり、雲が飛行機の手前にあることがわかるでしょう。

 雲の形や色が悪かったり、地面がおかしな形をしていることなどは、ここでは言わないことにします。
 ただ、レイヤーを4つ用いていることに注意をしてください。そして、2つは動く物体、2つは動かない背景に使っています。実際には、雲をゆっくりと流れるように動かすほうがよいかもしれません。しかし、それもこのテーマでは省略をしています。

○実感のある物体を実感的に動かそう

 ここでは、ペイントで描いた月を読み込んで、何となく実感できる動きを作ってみよう。
(なお、ペイントを用いて陰影を付けた図を作成する方法は、http://rikinf.hp.infoseek.co.jp の「ホームページの作り方入門」にある「絵の作り方」を参考にしてください。)

 目盛り1から20までを移動するわけですが、最初は直線的に移動させます。そして、次に移動場所を少しだけずらしただけなのです。つまり、目盛り5、10、15の3箇所で位置を少しだけ上にずらしました。しかし、目盛り1の状態に戻してあるので下の図ではわかりません。
 そんなちょっとした工夫で、見た目には何となく実感を感じられるようになるのです。なぜならば、目が欺かれやすいためでしょう。

 実際に、これを動かすと次のようになります。どうでしょうか?

○Quick Time のムービーを読み込んでみよう

 私のオリンパス製のデジカメは、ムービーを撮ると拡張子が「.mov」のQuick Time 方式でファイルを作成します。Windows付属の Windows Media Player では再生ができないので、なかなか面倒な手続きが必要でした。そこで、GIF動画にするなど手数がかなりかかりました。
 しかし、このFlashはQuick Timeからでも難なく読み込んでくれたので、やれやれと思いました。
 ステージに読み込むときは、

   ファイル>読み込み>ステージに読み込み

とします。そして、拡張子「.mov」の付いているファイルを指定するわけです。すると、次のようなウイザートのメッセージが出ました。

 そのまま「次へ」をクリックします。さらに、ウイザートは続いて

となりました。これも、そのまま「次へ」としました。そして、

 上のような画面になって、「終了」で読み込みは終了しました。しかし、かなり大きいとみえて、次のようなメッセージが出ました。

 ここでも、気楽に「はい」としたら何とか成功をしたようです。
 次のような Flash の画面になりました。

 それで、「ファイル>パブリッシュプレビュー>デフォルト(HTML)」として、それを下記に貼り付けてみました。

 電車の中で手ぶれがあったりして、どうも不味いムービーです。多摩動物公園に行くときに、いつも通る路線で運転席の後ろから撮りました。最後のところから、最初に戻して永久ループにしてあります。どこが継ぎ目か、はっきりとおわかりになるでしょう。

○写真を加工してイラスト風にしてみよう

 写真を加工してイラスト風にしてみましょう。フォトレタッチなどでもセピア風にしたり、いろいろな加工ができます。ここでは Flash の内部で写真を加工して、アニメに使えるような工夫を体験しておきます。
 まず、

   ファイル>読み込み>ステージに読み込み

で、写真を読み込みます。その一例を下に示しました。

 そして、これをもとに加工をするのです。

   修正>ビットマップ>ビットマップのトレース

を行います。すると、

のような画面がでます。そのままOKをクリックしてください。

 どうでしょうか? 何となく絵の具で描いた絵のようになって、アニメで利用しても違和感がないでしょう。
「ビットマップのトレース」画面の数字を変えることによって、いろいろと効果が違ってきますので確かめてみるとよいでしょう。

○図形の移動のまとめ

 図形の移動については、すでに体験をしました。しかし、ここで移動方法に関してまとめをしておきましょう。
 テーマとしては、自動車が左から右へ走り、飛行機が右から左へ飛び、そして雪が上から下へ降る光景です。しかし、理解を確実にするための例題ですから、ものすごく簡単なモデルにしてあります。
 もしも飽き足らなかったら、あなた自身で条件を追加してください。

 これを実際に動かすと、次のようになるでしょう。
 ここでは、雪の降り方や飛行機の構造、また自動車の形などには触れないことにします。つまり雪が手前に降っているかとか後方に降っているかとかいう問題です。また、自動車と飛行機の速度などの問題もあるでしょう。しかしここで、理解をしておくことは、単に

(1) すべて目盛り1から50までの変化であり、目盛り50には「挿入>タイムラン>キーフレーム」がなされている。なお、最初に設定された目盛り50には「挿入>タイムラン>フレーム」が行われている。矢印はすべて目盛り1から50までの方向である。

(2) 目盛り1の状態では、自動車は左端、飛行機は右端、雪は上端にセットされている。そして目盛り50では、自動車は右端の終点、飛行機は左端の終点、雪は下端の終点である。

(3) 自動車、飛行機、雪すべては中間点、例えば目盛り25で下のプロパティ画面の「トゥイーン」を「モーション」にセットしている。

 そのようにして、完成したのが下図ですが、いずれにしてもその動作は目盛り1から目盛り50の矢印の範囲内で行われています。中間点で上記(3) の「モーション」設定をすることによって簡単に移動が実現できることに注目をしてください。

○消しゴムと方眼の使い方に慣れておこう

 ここでは、「消しゴムの使い方」と「ライブラリにあるシンボル絵の利用方法」と「グリッド(方眼)の使い方」そして「拡大をして作図する方法」などに慣れるために、今までの復習をしてみましょう。
 モデルは、単純化をした人が画面中央でラジオ体操するものです。

(1) まず方眼をステージに表示するために、「表示>グリッド>グリッドの表示」とします。
 そして、その中央に人をかいてみましょう。描きやすいように200%にしています。

(2) 選択ツールで囲んで「修正>シンボルに変換…」をします。名前は「シンボル1」のままでよいでしょう。
すると、その時点で右側のアイテム欄にこの「シンボル1」が表示されます。そして、以後は必要に応じて利用ができるのです。さらにありがたいことには、同時に作業をしている別な画面のシンボルも引き出すことができます。別なライブラリを指定すると、そこに別な作業の図がすでにシンボルとしてあるからです。

 レイヤー1の目盛り5のところを右クリックして、「フレームの挿入」、同じく「キーフレームの挿入」をします。すると、そこに小さい●が現れます。そして、目盛り5の図形に修正をするのです。
 しかし、ここで消しゴムツールで消そうとしても、再び線が現れてしまって消えません。なぜならば、ライブラリに登録をされたシンボルは、その分身として写しがステージにあるからです。
 そこで、選択ツールで囲んでから、いったん「修正>分解」をして編集ができる図にします。

(3) そのようにして、消しゴムツールで消して新たに必要な部分を書き直します。そして、再び選択ツールで囲むと、その図形もライブラリに登録をされます。右にあるシンボル2です。

(3) 目盛り10の位置では、手を上に上げてください。それをシンボル3にしましょう。

(4) そして、さらに15の位置では再び横になります。そのときは、すでにあるライブラリにあるシンボル2をステージまでドラッグすればいいんです。新たに図形を作る必要はありません。

(5) 最後に目盛り20のところにフレームを挿入します。時間の調整ですから、キーフレームは必要ありません。
 じっさいに100%に戻して動かしてみると、下の図のようになります。

 

○ボタンの試み(1)

 まず、ボタンの動きだけを確かめてみよう。
 びっくり箱というのでしょうか、バケツにマウスのカーソルをもっていくとフタがちょっとだけ空いて、中に何かが入っている感じがします。そこで、クリックをすると赤い蛇がでてくる構図です。急いで作ったので、あまりていねいな絵ではないが、それでも動きだけは理解できると思います。
 ここに、その手順のあらましを忘れないうちに記しておきましょう。

(1) まず、ボタンを作るための専用画面にしなければならない。そのために、

   挿入>新規シンボル

とする。「新規シンボルの作成」画面が出るので、「名前:」をインプットする。例えば、「hebi」のようにである。そして、ボタンのラジオスイッチをオンにする。

(2) ボタン作成画面になる。そこには「アップ」「オーバー」「ダウン」「ヒット」という4つの行程が表示される。

 アップは、最初のイメージ図形であり、オーバーはマウスのポインタ(カーソル)を置いたときに変化をする図形だ。さらに、ダウンはマウスの左ボタンをクリックしたときに現れる図形になっている。そしてヒットは、最初のイメージ図形の上のどの場所にマウスのカーソルが来たらオーバー図形になるかという領域の指定に使われる特殊な画面である。

(3) まず、アップの図形を描く。描き終えたら、次のオーバーの目盛りのところで右クリックをして、「キーフレームの挿入」をする。そして、次のオーバーの作図に進む。なお、作図の最後に「シンボルに変換」などをする必要はとくにないようだ。

(4) オーバーも同じ要領で描く。描き終えたら、次のダウンの目盛りのところで右クリックをして「キーフレームの挿入」、ダウンに進む。

(5) ダウンを描く。終わったら「キーフレームの挿入」をして、ヒットに進む。

(6) 作図の最後はヒットだ。これはマウスの位置を指定する図形ですから、ただ黒く塗りつぶしておけばよい。作画は、この行程で終わりだから「キーフレームの挿入」は不要。

(7) 4行目にある「シーン1」をクリックする。すると、通常のFlash 画面になる。そこで、レイヤー1の目盛り1をクリックして、ボタンの画像をドラッグしてステージに貼り付けてください。
 ボタンは、右側にある最初に名前を付けた「hibi」という図形です。「ボタン」とあるもので「グラフィック」ではありません。間違えないようにしましょう。このサンプルで作ったボタンを貼り付けると画面は下のようになります。

(8) ここまでできたら、

   制御>ムービープレビュー

を行って動作を確認してください。
 動作がOKでしたら、その作業のファイルをセーブします。「ファイル>パブリッシュプレビュー>デフォルト-HTML」も忘れないでください。

 上の画面にあるバケツの下の部分にマウスのカーソルをもっていってください。手の形に変わるでしょう。そこで、クリックをしてみてください。すると、……
 なお、それぞれの行程の画面を修正するには、いったんライブラリを読み込んで修正画面で行うようです。そして、再び4つの行程に貼り付けていくことになるでしょう。また、効果音なども付けることができますが、ここでは煩雑になるので省略してしまいました。
 折角のツールですから、もっと簡便な方法はないのでしょうか?
 前記の作業途中(3)(4)(5)(6)では、作図がライブラリに補完されます。したがって、前の行程で作成した図を基にして、次の図を加工していくと効率的です。「ウィンドウ>ライブラリ」として、右側に表示される一例を示しておきましょう。

○グラデーションを大いに利用しよう

 ここでは、グラデーションの方法について考えてみよう。
 このページで、前に例題とした「月」は私がこの Windows のアクセサリに付属していた「ペイント」で描いたものです。1時間ぐらいかかって1ドット(ピクセル=点)ずつ落としていきました。

 しかし、少し大きくして見るとずいぶんとお粗末なものです。時間をかけた割に、あまりうまくできていません。左上からの光を受けている想定ですが、何となく不自然です。
 そこで、いっそ簡単な方法でできるグラデーションを利用することを考えてみましょう。なぜならば、製作時間が大幅に節約できるからです。
 ここでは、次のような手順で練習をしてみましょう。

(1) まず円を描いて、その中をグラデーションする。右側のカラーミキサーを開いて、「塗りのスタイル」を「放射状」にする。

(2) 左にあるグラデーションポインタをクリック、内側の色をセット。同様に右のグラデーションポインタで、外側の色をセット。

 これで、緑色の中に黄色ができることになる。中央にある黄色い部分の位置を変えたいときは、バケツツールでドラッグをするとよい。

(3) 目盛り10のところにフレームとキーフレームを入れる。目盛り5のところで、トゥイーンをモーションにする。

 実際に作業をしてみると、下の画面のようになりました。真ん中の球の回りを左側の小さい黄色な球が動きます。なお、右にある○は黄色い球の全体の動きを知るために仮に入れてあるものです。

 さらに、実際に動かしてみると下のようになります。
 真ん中にある球を地球らしい色合いにしていただいて、さらに月は月らしくして、右側の仮に入れてある○を除いてください。

○各種テスト

 この考にある以下の作品はテストのために未加工のものです。後日に修正または削除をします。
 写真スライドの例を製作途中で貼り付けてあります。



Kuroda Kouta (2004.10.19/2006.08.24)