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

 Flash MX あらまし1(入門)



○Flash MX とは?

 Flash MXはアニメーションを作るときのツールです。
 非常に優れた機能と操作性をもっているので、かなりのことが比較的容易に実現できるようです。
 まず、60日間試用版から

   Macromedia Flash MX 2004
   
(FLASH MX Professional トライアル版 Version 7.0.1)

を私のパソコンにインストールして、いろいろなことを確かめてみました。
 なお、私のパソコンとは

   富士通 FMV−BIBLO NB16C にWindows XP ホーム

です。

○Flash MXの簡単な操作

 最小限で、必要な操作をここに記しておきます。
 なぜならば、自分自身で用いるメモや後でメンテナンスをするために覚えの記録がどうしても必要だからです。
むろん、これから始める人が最短コースを行こうとしたときに、何らかの参考になるでしょう。なぜならば、最小限のことしか記述がされていないからです。
 しかし私自身が初心者のために、もっとよい方法があるのに気づかなかったり、不勉強のために知らなかったりすることがあるかもしれません。注意をしたつもりですが、もしもお気づきのことがあったら、どうぞメールでお知らせください。

 このFlash は、非常に高度の内容をもっていますので、その全体をくまなく知ろうとすると時間がかかりすぎてしまいます。若い時代ならよいでしょうが、私のように老人になってしまうと先があまり長くないので、必要最小限のことで済ませておかないと、人生が終わってしまうでしょう。
 そんな意味も含めて、ここでは深入りをしていません。
 したがって、とてもわかりやすいと思います。
 なお、間違いのないと思われる場合には、「Macromedia Flash MX 2004」を単に「Flash」と表記します。

○Flash の起動

 Flashを起動すると、最初に次のような画面がでます。

 使用期間中であり、(残り 24 日)となっているのがおわかりでしょう。そこのラジオボタンに丸を付けて、「続行」をクリックします。すると、初期画面は次のようになります。
 ただし、「最近使用した項目を開く」にある「neko-1.fla」というのは私が作ったもので、初期画面にはありませんでした。

 なお、上の図は私のパソコンで「Fn」キーと「Alt」キーと「Prt Sc」キーを同時に押して、クリップボードに保存したものをペイントに貼り付け、それをこのホームページのFlash画面用フォルダに保存しました。そしてそれをここに表示したのです。
 最初に開始をするときは、新規作成のFlashドキュメントをクリックします。

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

 下の図は、新規作成の最初の画面です。

○まず何かを描いてみよう

 そこで、人物の基本的な形をワイヤーフレームでかいてみました。
 ブラシを用いて、いちばん細い●を指定しました。面倒くさいので、人の形のワイヤーフレームです。しかし、こんなところから面倒だなんて言ったら、もしかしたら先が思いやられます。
 本当は、美しいドレスを着た女性でありたかったところです。

 なお、画面の周囲にある小さい三角をクリックすると、その図面が大きくなったり小さくなったりします。
 下向きまたは右向きのときは、それぞれの方向に大きくなり、また上向きまたは左向きのときは、それぞれの方向に小さくなります。
 「アクション-フレーム」や「ヘルプ」「プロパティ」の左側に付いている三角も画面の大小を決めますが、それらは大きくしたときに下向きの三角になります。

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

 次に、この簡単な人の形をした図形を右に向かって動かしてみましょう。
 その前に動かす準備です。

(1) 選択ツール(左側の矢印)で図形を囲む

(2) 修正>シンボルに変換……
 ここで「シンボル1」を「人シンボル1」にしました。また、グラフィックのラジオボタンをオンにして、基準点を真ん中にしました。そして「OK」をすると、下図のようになります。

 すると図形が枠で囲まれて、中心の位置が丸十で示されます。上の図形では、ちょうどオチンチンの位置です。智(ちぎ)『天台摩訶止観』や道元(どうげん)『正法眼蔵』では「臍下丹田(せいかたんでん)」と言って、人間の重心はヘソの辺りといいます。しかし、この図形では丸十の位置なのです。本当は女性のイメージですから、オチンチンではなくオマンマンのところになっています。しかし、優れた技術者は、作業中には卑猥なことを一切考えないのです。閑話休題して、

(3) レイヤー1の10コマ目をクリック。

   挿入>タイムラン>フレーム

として、フレームを増やしてください。そして、さらに

   挿入>タイムラン>キーフレーム

として、丸十を右の最終地点までドラッグします。すると、図形が移動をします。
 ここで、2回目は「フレーム」でなく「キーフレーム」なので、注意をしてください。

(4) 中間のフレーム、どこでもよいのでクリックします。
 そして、プロパティ画面の「トゥイーン」を「モーション」にします。すると、そのコマへ図形が写ります。

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

   制御>再生

をすると、実際に図形が動きます。何回かやってみてください。この「制御>再生」は面倒ですから、単に「Enter」キーを押すだけでもよいでしょう。
 下の図は、動き終わったところです。

 しかし、動いていると言っても、ただ同じ図形が左から右へツツツーと移動しているだけです。
したがって、これではとてもアニメーションにはなりませんね。また、早くてわかりずらいようです。
 そこで、動きをうんと遅くしてみましょう。

   修正>ドキュメント

として、フレームレートを1とします。フレームレートは1秒辺りのコマ数ですから、1とすると1秒間に1コマが進むことになります。

 だいぶゆっくりになりますが、観察をするのによいでしょう。むろん、いつでも変更ができますから実際には仕上げのときに最適な速さにするとよいでしょう。

○同じ場所で動かしてみよう

 パラパラマンガのように図形を変えることによって、同じ位置で動いた効果を作ってみましょう。
 ここでは練習ですから、4枚の絵で歩行を実現します。しかし、本当は左右の手足が逆になった場合を別にしなければならないのですが、面倒なので左右同一の絵を利用します。最初から「面倒なので」などというのは、もしかしたら老化の初めかもしれません?

(1) 新しいFlash ドキュメントを作成します。

   ファイル>新規>Flash ドキュメント

で「OK」とします。
 そこに1コマ目を描きます。

 なお上の参考画面は、後でここを読み直して何だか説明が不親切のように思ったので、ちょっと反省をしたために完成をした後の図面を貼り付けたものです。タイトルがおかしいのは、「本当はマラソンにしたかった」のですが、ちょっと大変なので歩く女性に変更をしたためです。
 さらに、4コマ分の各ポーズを知りたい方は、
    http://rikinf.hp.infoseek.co.jp または ここ をクリックして、

「ホームページの作り方入門」にある「動画の作り方」を参照してください。桃色の女性ではありませんが、左から右に足踏みをしている男性の例題があるので、そっくり参考になるでしょう。

(2) レイヤー1の2コマ目をクリック。そして、

   挿入>タイムライン>キーフレーム

とします。そして、前にある不要な図形は

   編集>削除

で消してしまい、2コマ目を描きます。

(3) 3コマ目と4コマ目も同様な手法で進めてください。

(4) すべての図形が終わったら、「制御>再生」で動かしてみます。このときに、まず「制御>ループ再生」にチェックを入れておくと、反復再生を何回もします。止めるときは、「制御>停止」とします。
 また、速さが早すぎるときは、「修正>ドキュメント」のフレームレートで遅くします。

○ホームページに貼り付けて実際に利用しよう

 実際にホームページで公開するためには、今までに作成した拡張子が「.fla」のファイルを「.swf」ファイルにする必要があります。その作業は、

   ファイル>パブリッシュプレビュー>デフォルト-(HTML)

でできます。
 ここでは、「.swf」ファイルの他にHTMLファイルも作られて、直ちにページ上での動きが見られるようになっています。しかし実際には、その「.swf」ファイルをホームページの該当箇所にホームページビルダーの

   挿入>ファイル>Flashファイル……これはホームページビルダーのコマンド、Flash ではない!

で貼り付ければ、それでOKなのです。
 以下に、上で作成した2つのファイルを貼り付けてみましょう。 

 どうでしょうか。ツツツーと動いているのがわかるでしょう。
 そして、もう一つは同じ場所で足踏みをしているような格好です。本当は進みながら手足を動かすのですが、ちょっと複雑になるので、ここでは同じ場所の足踏みにしたのです。
 手足を振りながら前へ進んでいくのがいいんですが、それは後のテーマにしましょう。
 また、ドレスアップした美しい女性が歩く姿のほうが、見た目もいいでしょう。「立てば芍薬(しゃくやく)、座れば牡丹(ぼたん)、歩く姿は百合の花」などと昔から言います。したがって、このサイトでも目的として、そんな光景を実現できるようにがんばっているんです。
 そして、それらの基本をマスターした上で、ストーリを構築していく計画なんですから、……

○背景を付けてみよう

 動く姿の向こう側に、何か簡単な背景を付けてみましょう。
 自動車の背景として地面と雲が3つを描いてみます。

 このように簡単なのは手抜きをしたわけではありません。私は少しでも早く、rikwhiシアターを作りたいのです。
でも、このFlash は複雑でわかりんくく、もしかしたら私の手に負えないものかもしれません。そんな意味で、簡単なのです。
 背景を描くためには、レイヤーをもう一つ追加します。なぜならば、背景は動かさなくてもよいからです。
 前にありました人が歩く例題と同じ要領で、自動車が左から右に走るものとしましょう。
 それに、次の作業を追加します。

(1) レイヤー1を選択してリバースにします。そして、レイヤー1とある下のいちばん左「レイヤーの追加」アイコンをクリック。

(2) いままでのレイヤー1の上に、レイヤー2が出ます。ここに背景を描きます。レイヤー2をリバースにしてください。描ける場所ということが鉛筆のマークで示されているのがおわかりでしょう。

(3) 作業が済んだら、「制御>再生」で確かめます。
 そして、OKだったら「ファイル>パブリッシュプレビュー>デフォルト-(HTML)」で実行ファイルも作成します。

 いかがでしょうか?
 でも、車の車輪が地面から離れているのが、ちょっとまずいですね。実は、それは簡単に直るんです。動いている物体が、画面上で細かく移動するように設定をすればいからです。
 自動車の絵が何となく見慣れてきたので、次は簡単なUFOで復習をかねてやってみましょう。

○物体を動かしてみよう

 いままでは、人や自動車が直線的な動きしかしなかったが、ここではモーションガイドを用いて物体を自由に動かしてみましょう。

 なんとも奇妙なUFOですが、色の異なる楕円を二つ描いただけです。色を変えてあるのは、後で回転をさせたときにわかりやすくするためです。でも、何だかセンスが疑われるんじゃないかと、ちょっと心配だよん。
 これを前の人がツツツーと歩くときと同じように、

(1) 選択ツールで図形を囲む

(2) 修正>シンボルに変換……

(3) レイヤー1の10コマ目をクリック。そして
   挿入>タイムラン>フレーム
   挿入>タイムライン>キーフレーム
として、丸十を右の最終地点までドラッグ。

(4) 中間のフレームをクリック。プロパティ画面のトゥイーンをモーションにする。

のようにしたものが、下の画面です。


 レイヤー1のところに矢印が付いているのがおわかりでしょうか?
 この状態では、当然のことながら「制御>再生」(Enterキーでもよい)をしても、直線的に動くだけですね。だって、前と同じだからです。

 レイヤー1の1コマ目をクリックして、UFOを最初の位置に戻しておきます。
 そして、レイヤー1を選択してリバースにします。次に「モーションガイドの追加」アイコンをクリックします。レイヤー1の下にある赤い点々の付いている2番目のアイコンです。するとガイドレイヤー1が現れますから、そこを選択します。
 次に「鉛筆ツール」を選び、下のオプションをスムーズにしましょう。そして、物体の移動するガイドラインを途切れないように描きます。そうすると、下の画面のようになります。

 よろしいでしょうか?
 ここで、いよいよ移動をするときの位置の指定です。

 まず、レイヤー1の2コマ目をクリックして、ガイドラインを基準にして図形をドラッグして上に引っ張ります。このときは、選択ツールでないといけません。移動をするときは、マウスのカーソルに十字が出ているのでわかります。
 下の画面は、3コマ目を操作しているときの様子です。

 元の図が決定をするまでは残っていて、決定をすると線だけのところに移動をします。
 そのようにして全コマを終わって、実際に動くようにした後で、「ファイル>パブリッシュプレビュー>デフォルト-(HTML)をした「.swf」ファイルを下に貼り付けてみました。

 動きがわかりやすくなるように遅くしましたので、ちょっとギクシャクして動きになめらかさがありません。実際には、さらに細かい地点を指定してスムーズに動くようにするわけです。しかし、ここでは方法を理解するためですから、少々の不都合には我慢をします。

○鞠つきとお手玉をしてみよう

 下のような鞠(まり)つきをしてみましょう。

 この鞠つきは、動作がわかりやすいように少し遅めにしてあります。実際には、もう少し早いほうがよいかもしれませんね。出来上がったところをまず下に示しましょう。そして、作成をした手順のあらましを記しておきます。
 本当は、鞠の落下する速さの調整や下端(地面を描かなければいかないのですが、……)で弾むときにできる影なども描きたいところです。
 しかし、ここでは基本的なことを理解するのが目的ですから、省略をしてしまいました。
 実際の効果を考える手法は、創作シアターを構築するときに行う予定です。

 ******
 これができたら、お手玉をしてみます。そして、さらに糸の付いているヨーヨーもしましょう。
 ……

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

 あらかじめ作成した画像を中央のステージに読み込んでみよう。そのためには、

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

として、フォルダにあるファイルでしたら、フォルダを開いてからファイル名をクリックします。
 すると、下のようなメッセージが出ることがあります。

 これは、指定したファイル名が連番になっていることによるのでしょう。ここで、実際に読み込むファイル名は「kiso01.jpg」ですが、その他に「kiso02.jpg」というファイル名があることによります。
 この場合は、「kiso01.jpg」を一枚だけ読めばいいんですから、「いいえ」とします。すると、次のような画面になります。

 この例は、宇宙遊泳をしている宇宙飛行士を描いたイラスト画です。むろん、写真でも同じことになります。このようにすると、その絵をもとにしてスライドなどを作成することができるので便利です。この最初に読み込んだ絵は、レイヤー1の1コマ目になります。
 この絵を動かすのは、少し後のことになるでしょう。

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

 デジカメのムービーモードで撮った連続写真をそのまま利用してみよう。
 やはり、上の宇宙飛行士の絵と同様に

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

をすればよいのです。
 しかし、連続写真のファイル名は「s01.jpg」から「s27.jpg」までの連番が付けてありますから、やはり上のメッセージが出ます。その場合は「はい」としますと、次のような27枚の写真をただ単純に貼り付けてくれるのです。

 1枚目(s01.jpg)

 2枚目(s02.jpg)

 3枚目(s03.jpg)

                          ……

 27枚目(s27.jpg)

 途中の4枚目から26枚目の見本提示は、ここでは省略をしました。むろん、すべての写真は動きを示しているので、少しずつ変化をしていることでしょう。また、枚数は何枚でもかまいません。本当は、もっと動きがなめらかになるような枚数でないといけません。
 ここでは、動作がわかればよいということで、細かい注文はしないんです。
 また、この写真は私がデジカメを買って、うれしくてしょうがなく1週間も経たないうちに、井の頭動物園の水生物園で撮ったものです。したがって、撮影の技術も未熟なんです。しかし、そのことについても文句を言わないことにしましょう。

 これを実行すると、下のようになります。
 ただし、s27の次はs01に戻っているのです。実際には時間的につながっていないのですが、無理矢理に最初に戻しています。それが、どこかおわかりでしょうか?

 この作業は非常に簡単です。
 ここで、ついでながらQuick Timeファイルを分解する方法を述べておきましょう。
 ……
 ついでに、水槽などのガラス面を通して写真を撮るときの注意をしておきましょう。
 光線の具合やガラス面の状態によっては、鏡の効果があるのでデジカメや自分自身の姿が映ることがあります。そのようなときは、カメラ自体を暗い色の布で覆ったり、さらには自分自身がすっぽりと何かを被るとよいでしょう。
 下に、その悪い例を示しておきましょう。ピンともあまり合っていません。そんなことがないように、あなた自身でもいろいろと工夫をしてみてください。

 そこで、手元を少し暗くして撮したものを次に示しましょう。ちょっとした工夫で、反射が防げることに注目してください。

○回転をさせてみよう

 前にしたUFOで回転を体験してみましょう。
 最終地点で、右に10回ほど回転をするというものです。

 その方法は簡単です。
 まず、レイヤー1の最終地点の後に10コマを追加します。そして、新たに最終になった20コマ目を左クリックして「キーフレームの挿入」をすればよいからです。すると下の画面のように矢印が出ます。その部分で回転を指示しているのです。

 実際の指示は、プロパティ画面で行います。つまり、下の画面のように回転を「時計回り」として、「10回」とすればよいのです。

 ここで、レイヤー1のところの最終コマが20でないのが気にかかります。しかし、それは意味があるわけではなく、単に私が間違えたんです。うっかりしていて、ごめんなさい。
 それはともかく、10コマ目までは位置を変えるための指定、11コマ以後は位置は同じで配置を換えるための指定であることを理解してください。
 下に、その実行結果を貼り付けてみましょう。

 UFOが最初に移動をして、最終地点で回転をするのがおわかりでしょう。

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

 ステージに読み込んだ画像を加工して、アニメを作ることを考えてみます。
 まず、元となる画像を下に示しておきましょう。

 この辺で、この男の子とボールを動かしてみようというわけです。ちょっと難しそうですが、挑戦をしてみましょう。

 やはり、ちょっと大変です。できないのではなく、すると時間がかかってしまうのです。それに、この作業は面倒くさがりやの私に対して大変な努力と忍耐を与えるので、やはり後ですることにしましょう。つまり、苦痛を伴うことから逃れたいという本能のはたらきなのです。
 上の動いている図は、そこまでやって後の大変さを身にしみてわかったところで、投げ出したものです。ボールだけを動かしてはみたものの、男の子の動きを考えると何となく面倒な作業ということが、あなたもおわかりになりませんか?
 どうも、変な弁解でごめんなさい。

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

 形を大きくしたり小さくすることは、簡単にできます。
 前に練習をしたUFOが左から右へ移動して、そこで回転をするサンプルです。その回転が終わってから、UFOを次第に小さくしてみましょう。

 その操作は、上の画面のようにします。つまり、19コマ目で回転をやめたUFOが25コマ目まで次第に小さくなっていくのです。本当は消えてなくなりたいところですが、ここでは練習だから見えなくならないほうがよいかとも思い、上のような大きさまでとしました。また、回転をしながら小さくなるほうがよいかもしれません。しかし、それもわかりにくくなるのでやめました。
 実際のテクニックは、「創作シアター」のところで考えていきましょう。
 いちおう、ここまでの手順を説明しておきます。

(1) レイヤー1の25コマ目を右クリック、「フレームを挿入」をします。

(2) 同じく、もう一度25コマ目を右クリック、「キーフレームの挿入」をします。
 すると、レイヤー1にあるコマに19から25に向かって矢印が出ます。上の図で確認をしてください。実際には、両端に●があるので、20コマから24コマになっていることがおわかりでしょうか。この矢印は、どこからどこまでが変化をしていくかということを表しているのです。

(3) 次に、実際に小さくする作業をします。
 ツールボックスから「自由変形ツール」を選びます。鉛筆の下にある四角い枠のアイコンです。すると図形の4隅と上下左右で計8個の小さい■、そして中心に小さい○が現れます。その右下の■を斜めの矢印にしてドラッグすると図形全体が小さくなります。

(4) 「制御>再生」をするか「Enter」を押して、その動きを確かめてください。

 今回に追加した部分は、右下でUFOが次第に小さくなっていく部分です。
 上のサンプルデモでは反復をさせていますので、いちばん小さくなったら元にもどって一連の同じ動きを繰り返します。

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

 次に小さくなったUFOを直線的に画面の中央にもってきて、今度は次第に大きくしてみよう。
 次のような手順では、どうでしょうか?

(1) 25コマ目から30コマ目で小さいままのUFOを移動します。
 メモリ上にある赤いインジケータをドラッグして25までもっていってください。
 枠と丸十を図形に出してください。(例えば、選択ツールで図形を囲みます。)

(2) レイヤー1の30コマ目をクリック。
 そして、「挿入>タイムライン>フレーム」と「挿入>タイムライン>キーフレーム」をします。そして、図形の丸十を中央までドラッグ。すると、下の画面のようになります。

(4) メモリ上にある赤いインジケータをドラッグして30までもっていってください。

(5) レイヤー1の30コマ目をクリック。(枠と丸十があればいいのです。)続いて、レイヤー1の40コマ目をクリックします。そして、「挿入>タイムライン>フレーム」と「挿入>タイムライン>キーフレーム」をします。
 そして、図形の丸十を中央までドラッグ。自由変形ツールで左上を引っ張って大きくします。すると、下の画面のようになります。

 さらに、これを実行すると次のようになります。

 なお、最後の大きくなった状態といちばん初めのスタート状態はつまがっていません。ただ、連続表示にしてあるだけなのです。なぜならば、止まってしまって移動の動作が確認できなくなってしまわないためです。
 また、本来ならば中央に戻るときや中央で大きくなるときには、UFOが回転をしていたほうがよいかもしれません。しかし、ここでは理解しやすいようにモデルをなるべく単純にしました。

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

 ステージの大きさを変えるには、初期画面のプロパティのサイズにある数字をクリックします。
 すると、次のような画面が出てくるでしょう。

 この「ドキュメントプロパティ」にあるサイズがFlashのデフォルト(初期値)なのですが、ここではこれを少し小さくして

   500 px(幅) × 330 px(高さ)

に変えてみましょう。
 ただ、数字を改めてインプットすればよいのです。そして「デフォルトにする」として、その大きさを以後は用いましょう。そして、次に

   表示>グリッド>グリッドの表示

として、画面に方眼を出しておきましょう。
 方眼をだしておくと、作図をするときに位置の確認ができるので便利です。
 さらに、ルーラーを出すとスケール上の数字が確認できるので、いっそう作業が確実になります。もしも、画面上の基準点や基準位置が必要でしたら、ガイドを利用するとよいでしょう。

 なお、これらの機能はトグルスイッチになっていて、例えばグリッドが表示されているときには「グリッドの表示」の前にチェックが付いています。ステージにグリッドを着けた状態の画面は、次の項にある画面で確認をしてください。
 以後しばらくは、この状態から作業を始めてみましょう。

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

 レイヤーを二つ使うと、二つの物体を逆方向に動かすことができます。
 ここでは簡単な例として、左から右へ動く自動車をレイヤー1に置き、右から左に動く飛行機をレイヤー2に置いてみましょう。自動車の部分は、すでにしましたが復習の意味を含めて、ここに説明を反復しておきます。

(1) ブラシツールで自動車を描いてから、選択ツールで図形を囲みます。そして「修正>シンボルに変換……」をして、シンボル1に名前を付けて「OK」とします。
 そして、レイヤー1の10コマ目をクリックして、
   「挿入>タイムラン>フレーム」と「挿入>タイムラン>キーフレーム」
を行います。そして、最終地点まで図形をドラッグして移動をさせます。
 さらに中間のフレームをクリックして、プロパティ画面のトゥイーンを「モーション」にします。そこで、Enterキーを押して動きを確かめてください。

(2) 目盛りの上にある再生ヘッドをドラッグして、自動車を1の位置に戻します。

(3) 「レイヤーの追加」アイコンをクリックして、レイヤー2を出します。
 そして、レイヤー1の1コマ目をクリックして飛行機を最初の位置に描き、選択ツールで図形を囲みます。そして「修正>シンボルに変換……」をして、シンボル2に名前を付けて「OK」とします。

(4) 飛行機のほうは、右から左に向かって動くわけですから、位置の調整はグリッドでしながら描く目盛りの場所を指定していきます。次の目盛りをクリックして図形を動かせるときは、図形の上にマウスをもっていくと十字のカーソルになるのでわかります。
 そのようにして、最終地点つまり目盛り10のところにきたのが下図の画面です。

 また、実際に動かすと下図のようになりました。


Kuroda Kouta (2004.10.11/2006.08.24)