TOPページ > リファレンス > FlashMotion(Flash制作講座)

Flash Motion(Flash制作講座)

Flash制作講座一覧へ

Flashの基礎知識 -シェイプとシンボルの作成方法-

■作成前の準備

1.新規ファイルを作成します。

Flashを起動するとスタートメニューが表れます。 新規作成【Flashドキュメント】を選択します。 または、メニューバー【ファイル】【新規】【Flashドキュメント】で新規ファイルを作成します。

2.設定を行います。

メニューバーの【ウィンドウ】【プロパティ】を選びプロパティウィンドウを表示します。
プロパティウィンドウでドキュメントのサイズ、背景色、フレームレートを決めます。

サイズは500×250ピクセル、背景色は黒か白、フレームレートは30fpsくらいが個人的には制作しやすいかと思います。(モーショングラフィック作品の場合)

※フレームレートとは1秒間に何回画面が切り替わるかを表します。つまり値が大きいほど滑らかな動きが実現できます。 人間が認識できるのは60fps程までとされているので、それ以上、上げる意味は無いです。しかし、フレームレートを上げすげると、制作が大変ですし、 マシンスペックも必要となるので、個人的には30fpsがベストと思っています。コマアニメなら10fps程度で十分だと思います。

■図形を描いてみよう

1.まずツールの設定を行います。

画面左のツール一覧から【楕円ツール】アイコンをクリック。 すると、プロパティウィンドウに選択されたツールのプロパティが出ると思います。 ここで、塗りの色、枠線の色、線種、線の太さを変更できます。

2.実際に円を描いてみます。

開始位置を決めドラッグしていくと、楕円が描けます。 【shift】を押しながらドラッグすると、正円が描けます。 【alt】を押しながらドラッグすると、中心点を固定しながら拡大縮小できます。出来上がった図形を【シェイプ】と呼びます。

※その他のツールの使い方はツールの説明ページをご覧ください。

■シェイプの特徴

1.線と塗り

シェイプは塗りと線に分かれており、それぞれは独立しています。適用できる効果はそれぞれ違います。

【選択ツール】を使って、塗りの部分をクリックしてみましょう。すると塗りの部分だけが選択されるかと思います。 プロパティウインドウを見るとわかりますが、線の色のボックスには斜線が引かれています。これは、線が存在しないということを意味します。逆に枠の部分だけ選択してみると、塗りの色のボックスに斜線が引かれています。

つまり、線と塗りはそれぞれ独立していて、楕円ツールで描かれるシェイプは、線と塗り、2つのシェイプが組み合わさっていると言えます。 それぞれは独立しているので、線または塗りのどちらかだけを移動や削除、色の変更等をすることが可能です。

また、線は塗りに変換することが出来ます(メニューバー【修正】【シェイプ】【線を塗りに変換】)。個人的には変換したほうが作業しやすい感じがします。

2.変形

シェイプの大きな特徴として、自由に形を変えることが出来るということが挙げられます。変形させる方法はいくつかありますので紹介します。

ダイレクト選択ツール
シェイプの端をクリックすると、シェイプを囲むようにパスが表れます。パスの四角い部分(アンカーポイント)をドラッグするとシェイプの形状を自由に変えることができます。
選択ツール
シェイプを選択してない状態でシェイプの端をドラッグすると変形することが出来ます。しかし、ダイレクト選択ツールのようにパスは表示されないので使いにくいかと思います。
自由変形ツール
元の形を維持しつつ変形させることが出来ます。使用方法はツールの説明ページをご覧ください。
3.色の変更

カラーミキサー(メニューバー【ウィンドウ】【デザインパネル】【カラーミキサー】)を使用することによって、 選択したシェイプにグラデーション効果や透明度を設定できます。

※線にはグラデーション、透明度を適用できません。

■図形のシンボル化

シンボル化を行うと、図形やアニメーションを部品として管理できるようになり、必要に応じてその部品を使うことが可能になり、何かと便利です。 最初のうちは、「シンボル化する意味あるの?」かと思うかもしれません。 しかし、シンボル化はFlashを作る上での基本的要素になるので頑張って理解してください。

シンボル化をするには、シンボル化したい部分を選択し、
メニューバー【修正】【シンボルに変換】、または【F8】を押します。

シンボルには3種類タイプがあります。

グラフィック
静的グラフィックやアニメーション等に利用します。
ムービークリップ
webインターフェイスやスクリプトを組み込むグラフィックに利用します。
ボタン
ボタンの作成に利用(ムービークリップで代用可能なので必要なし)します。

シンボルはライブラリに登録されます。以降はライブラリからドラック&ドロップで再利用可能です。 ライブラリパネルは【ウインドウ】【ライブラリ】で開けます。

■シンボルとは?

シンボルの中にはシェイプやアニメーション情報を入れられる。また別のシンボルを入れることも可能。 シンボルとはシェイプやアニメーションの情報を入れる箱のようなもので、外側からは中のシェイプやアニメーションを編集することができません。編集したい場合はライブラリのシンボルをダブルクリックして、シンボルの中に入ります。 そうすれば、中のシェイプを自由に編集することができます。また、シンボルの中にシンボルを入れることも可能です。ただし、グラフィックシンボルのなかにムービークリップシンボルを入れると誤作動することがあります。

■シンボルとインスタンス

インスタンスとはシンボルのコピーです。 実際にアニメーションで使用されるのはインスタンスであり、 シンボルは使われることはありません。

インスタンスをダブルクリックすると、中のシェイプが編集できます。 Flashのインスタンスは単なるシンボルコピーではなく、中のシェイプを編集するとコピー元であるシンボルまでが編集されてしまうので注意! インスタンスの外側(インスタンス自体のプロパティ)であれば編集しても、シンボルには影響はありません。

■インスタンスの編集

インスタンスはシェイプのように形状を複雑に変形させることができません。 インスタンスの変形は拡大縮小、回転は可能ですが、ダイレクト選択ツールを使用した、変形や、エンベロープを使用した変形はできません。 インスタンスはプロパティウインドウで、カラーの変更ができます。 シェイプのカラーの変更とは扱いが全く異なるので注意してください。

プロパティウィンドウカラー
明度
明るさ変更
着色
塗りの色変更
アルファ
透明度変更
詳細
明度、着色、アルファを一括に設定。

■グラフィックとムービークリップの違い

先ほど、簡単に説明しましたがおさらいしましょう。
シンボルにはグラフィック、ムービークリップ、ボタンの3種類があります。
図形をシンボル化する際「とりあえずムービークリップに変換すればいいや」と思っている人が少なからずいるかと思います。 一見両者に違いがないように思えますが、実は大有りです。ではそれぞれの特徴を解説します

グラフィック
アニメーションに特化したインスタンスです。コマアニメやシェイプトゥイーン等の情報を含めることができます。 オーサリング時に親のタイムラインと同期がとられている(親のタイムラインの進行と同時にグラフィックインスタンスのタイムラインも進行)のでアニメーションの調整が容易です。
ただし、欠点として「特定のフレームでアニメーションを停止する」といったような細かな制御はできません。また、グラフィックインスタンス内部にムービークリップインスタンスを入れると不具合が起こります。
ムービークリップ
一言でいえばグラフィックインスタンスの強化版です。グラフィックインスタンスの機能に加えて、ActionScriptを使用し様々な制御が可能です。Flashで構成されたwebサイトを作成するのに必須の要素です。
欠点はグラフィックインスタンスと違い、オーサリング時に親のタイムラインと同期がとられていない(親タイムラインからは1フレーム目しか参照できない)為、アニメーションの調整が困難です。 また、グラフィックシンボルと比較すると動作速度が遅いです。純粋にアニメーションを作成するのであればグラフィックシンボルのほうをオススメします。
(※Flash8から、グローやドロップシャドウなど強力な機能が使用可能になりました。)
ボタン
アニメーションの再生ボタンなどを作成する場合に使用します。ムービークリップの機能限定版とも言えます。
お手軽にボタンを作成可能ですが、アニメーションさせられません。

Flash制作講座一覧へ