《#16》 前進するアニメーション 《#18》 3D回転(1)

2009年12月25日 (金)

nanaicon

Digicon Magazine読者のみなさんこんにちは、ななきちです。

5月にスタートしたこの連載もいつの間にか7ヶ月が過ぎました。
今回は、2009年の最後ということで、いままでのレッスンを通して身をもって覚えてきたFlashムービー制作のポイントを、おさらいしていきましょう。

テーマは、「シンボルとインスタンス」についてです。


目次

  • シンボルとは?
  • シンボルの作成
  • インスタンスとは?
  • インスタンスの配置
  • シンボルの編集
  • その他の特徴

    これまでのレッスンで、何度か“シンボル”と“インスタンス”を使ってきました。たとえば、第11回から第14回で作成したロボットの部品はシンボルでできています。
    第5回から第10回までさまざまなアニメーションの基本を紹介したボールのサンプルや、第3回の色が変わるロールオーバーのボタンも、シンボルを使っています。

    「シンボルとインスタンス」はFlashムービーを作成する上で、核となる部品なので、これが理解できれば、ムービーやアクションスクリプトの理解度もグンと深まります。


    シンボルとは?

    さまざまなデータを格納する「ライブラリ」パネルに格納されたオブジェクトが、シンボルです。

    シンボルは、Flashムービーで使う部品のマスターデータ(元となる部品)のようなもので、ステージ上に配置して、何度でも使用可能です(ステージに配置した部品がインスタンスです)。

    シンボルと、シンボルでないさまざまなオブジェクト(イラストや写真データ、文字データなど)との違いは、ライブラリに格納されているかどうかです。

     

    symbol_01

    シンボルとは、ライブラリに登録されたオブジェクト。


    シンボルの作成

    シンボルを作成するには、格納したいオブジェクトを選択した状態で、メニューバーから[修正ーシンボルに変換]を選択します。

    おさらいですが、一緒に手順を試したいときは、サンプルデータをダウンロードし、その中に入っている「symbol_00.fla」を使ってください。

     

    symbol_02

    この場合は複数の図形があるので、[選択]ツールで図のまわりを囲むようにドラッグして選択します。

     

    symbol_03
    メニューバーの[修正ーシンボルに変換]を選択します。

    「シンボルに変換」ダイアログボックスが開くので、シンボルの名称、シンボルの種類を選択します。

    symbol_04

    ここでは「種類」は「グラフィック」にしてシンボルに変換。

    ライブラリにシンボルとして登録されました。「ライブラリ」パネルは、ステージの右側にあります。表示されないときは、メニューバーの[ウィンドウーライブラリ]で表示できます。

    symbol_05

    ライブラリに「うさぎ」という名前のグラフィックシンボルが登録された。

    これのシンボルを、ステージ上に自由に配置することができます。

    シンボル化されたオブジェクトは、ステージ上に配置されると、モーショントゥイーンでのアニメーション化や、アクションスクリプトでの制御が可能となります。

     

    シンボルの種類

    シンボルには以下の3つのタイプがあります。シンボルの種類は、オブジェクトをライブラリに格納する時に選択しますが、登録後に変更することも可能です。

     

    【グラフィックシンボル】

    グラフィックシンボルは、主に、静止画に使うシンボルです。
    アクションスクリプトで制御することができません。

    アニメーションにも使うことができますが、メインのタイムラインに依存するので、グラフィックシンボル内で設定したタイムラインのフレーム数と、同じ長さのフーム数をメインのタイムラインに設定する必要が出てきます。下のサンプルファイルは、「symbol_1.fla」です。

    データ容量が軽いのが特徴です。

    このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

    Adobe Flash Player を取得

    グラフィックシンボル


    【ボタンシンボル】

    ボタンシンボルは、マウスオーバーやクリックなどで反応するシンボルです。

    ボタンシンボルは、アクションスクリプトで制御することができます。ただし、ActionScript 3からは制約があります。

    作成方法は第3回を参照して下さい。

    下のサンプルファイルは、「symbol_2.fla」です。

     

    このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

    Adobe Flash Player を取得

    マウスを近づけてクリックして下さい。

    【ムービークリップシンボル】

    ムービークリップシンボルは、主に、アニメーションに使うシンボルです。
    グラフィックシンボルとは違い、メインのタイムラインに依存することなく、自身のタイムラインに合わせてアニメーションの再生ができるため、メインのタイムラインが1フレームだけでも、アニメーションの再生が可能です。

    例えば、雨がずっと降っている、星が終始またたいている、鳥や虫の羽がずっと羽ばたいている、などなど数コマでループ再現するアニメーションを格納します。
    また、グラフィックシンボルとは違い、アクションスクリプトでの制御が可能です。

    下のサンプルファイルは、「symbol_3.fla」です。

     

    このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

    Adobe Flash Player を取得

    ムービークリップシンボル

     

     

    インスタンスとは?

    ステージ上に配置したシンボルのことを「インスタンス」といいます。

    インスタンスは、シンボルが親とするのであれば、子供(コピー)のようなものです。Windowsのショートカットアイコンや、Macのエイリアスに似ています。

    インスタンスは、ステージ上にいくつも配置が可能です。

     

    symbol_06

    ステージに配置されたのがインスタンスです。

    また、親である元のシンボルを編集すると、配置されたインスタンスすべてに変更が反映されます。

     

    symbol_07

    シンボルを変更すると、インスタンスすべてが変わる。ここでは目を変更してみました。

     

     

    インスタンスの配置

    ライブラリに登録されたシンボルは、ドラッグ&ドロップでステージに配置できます。試してみたい場合は、サンプルデータの「symbol_04.fla」を使って下さい。

    ライブラリの中の、シンボルアイコンを選択し、ステージに向けてドラッグ&ドロップします。

    fla16_003

    インスタンスが配置されました。

    fla16_004

    もし不要になれば、ステージのインスタンスは、Delキーなどを押して削除できます。その場合も、ライブラリのシンボルが削除されることはありません。

     

    シンボルの編集

    シンボルを編集するには、ライブラリでシンボルアイコンをダブルクリックします。すると、メインのステージがシンボル編集画面に切り替わります。

    fla16_005

    メインのステージの左上にあるナビゲーションで、現在開いているシンボル名が確認できるようになっています。

    fla16_005b

    もとのステージに戻るには、左上のナビゲーションで「シーン1」をクリックします。

    fla16_006

    シンボルは、ステージで選択したとき編集できない部分も、シンボル編集画面では、通常のオブジェクトのように編集できるようになります。

     

    その他の特徴

    インスタンスは個々の情報を持つことも可能で、インスタンスごとに位置情報やサイズ、動作、色情報などを持つことができます。

    symbol_08

    ステージにあるインスタンスを、それぞれ色を変えたり、サイズを変えたりできます。元データは同じシンボルのままです。こういったインスタンスの利用も今後もっと紹介していきたいと思います。

    またインスタンス同士を組み合わせたものをシンボル化することも可能です(孫、ひ孫…とシンボルとインスタンスを制作していくことができます)。

     

    symbol_09

    うさぎに別のシンボルとして格納してある花をつけて、うさぎと花をひとつのシンボルとして格納しました。

     

    symbol_10

    うさぎインスタンスと、花インスタンスをまとめて、1つのシンボルとして登録。

     

     

    シンボルはあくまでも元データで、ステージには配置されません。
    インスタンスとしてステージに配置されることで、初めてFlashムービーのパーツとして再生可能になります。

     

    ”シンボル”と”インスタンス”は、文章だけではなかなか理解しきれない部分もあるので、お正月休みにでも、是非自分でFlashを触っていろいろ試してみて下さい。

    経験上、私もこの違いを理解した後からFlashをより理解することが出来ました。ギターで言うところの”Fコード”!最初の難関です。もう一つ先のFlashの扉を開いてみましょう!

    また今後も、理解しておきたいポイントをピックアップした、今回のようなレッスンも行いたいと思いっています。

    では、みなさん良いお年を!
    来年もよろしくお願いします★

    トラックバック

    このページのトラックバックURL:
    http://www.typepad.jp/t/trackback/387238/22722305

    このページへのトラックバック一覧 《#17》 おさらい「シンボルとインスタンス」:

    コメント

    コメントを投稿

    コメントは記事の投稿者が承認するまで表示されません。

    《#16》 前進するアニメーション 《#18》 3D回転(1)