データ編集のインターフェースを作成する。
印刷用に表示
XML を利用したインタラクティブな円グラフの作成
この記事では、XMLを利用して円グラフを描画する、簡単なサンプルアプリケーションを作成します。XMLで保存されたデータを読み込んで計算し、データの内容を表示するとともに、円グラフを1%ずつ回転させながら表示します。また、表示されたデータを画面上で直接編集し、画面に反映させることもできます。
サンプルファイルのダウンロード
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
※本記事では、CS5をベースに解説しています。
サイトの演出にビデオを利用するメリット、そのビデオ制作にAfter Effectsを使うメリット
Flashでは、サイトにビデオを組み込んで柔軟に設計することができます。一口に「ビデオを組み込む」といっても様々な使い方がありますが、本記事ではビデオ再生プレイヤーではなく、演出面の1つとしてビデオを利用する方法を紹介します。ビデオをサイトの演出に組み込んだ例としては、次のサイトが有名です。
最近では、エンドユーザーの帯域が豊富になったことや、マシンの処理スペックも向上していることもあり、演出の自由度が高まってきています(もちろん容量の最適化や再生負荷の軽減は重要なタスクですので、環境がよくなってきたからといって怠ってはなりません)
そして、Flashのタイムラインアニメーションの作成は、バージョンアップを重ねるごとに機能が進化しており、動きのブラッシュアップがしやすくなってきています。ただし、Flashのアニメーションの場合、エンドユーザーの環境でも「リアルタイムに再生できること」が条件となります。そのため複雑な形状のパスデータや、描画モード、フィルター効果の過度の利用には注意が必要です。処理スペックの低いマシンでは、描画負荷が高くなりフレームレートが低下し、制作者が意図した再生速度を維持できない場合もあります。こういったユーザー環境の制限をあまり意識せずに演出用のタイムラインアニメーションを制作したい場合には、After Effectsを使うと便利です。レンダリングした映像をFlashにビデオとして組み込むため、リアルタイムでの再生負荷の制限をそれほど意識することなく※1、様々なエフェクトを加えてアニメーションを制作することができます。※1 一概にビデオの方が処理負荷が軽くなるわけではありません。ビデオを再生するにも圧縮データのデコードという処理について負荷が発生するため、負荷の見極めは重要です。負荷の発生は主にサイズ/FPS/コーデック/透過の有無が影響します。ただ、ビデオは同一サイズであれば、どれだけ複雑に編集しても再生負荷はほとんど変わりません。264)が処理負荷に影響します。例えば、「スクリーン」や「オーバーレイ」といった描画モードの種類がFlashよりも豊富であったり、多彩なエフェクトが搭載されています。After Effectsでは、タイムラインでビットマップやテキスト、パスデータなどのオブジェクトを操作することができます。※2 サードパーティー製のプラグインを導入することで、他にも様々なエフェクトを利用することができます。
図3 デフォルトで用意されているエフェクト効果の例
一般的に、Flashにビデオを組み込む方法としては、次の2通りがあります。タイムラインにFLVを組み込むため、タイムライン上でビデオの位置・拡大・回転を制御したり、マスクを適用したりといった柔軟な編集が可能です。ただし、再生するにはSWFの読み込みが完了している必要があるため、時間の長いビデオを組み込んだ場合には、エンドユーザーを待たせてストレスを与えてしまう可能性があります。外部からFLVを読み込むため、プログレッシブ再生もしくはストリーミング再生を行い、ビデオを読み込みながら再生することができ、エンドユーザーの待ち時間を軽減することができます。今回はシンプルな1の手法を解説します。以下は、解説用のサンプルです。サイトのオープニングムービーのようなもので、アニメーション後に2つのボタンが表示されます。
図4 本記事のサンプル
サンプルの動作を確認する。新しくコンポジションを作る場合は次の手順で作成します。
メニューバーから[コンポジション]→[新規コンポジション
]を選択し、[コンポジション設定]ダイアログを表示します※3
[ピクセル縦横比]を「正方形ピクセル」、[フレームレート]を「30」フレーム/秒として設定します。[幅][高さ]の項目はFlashで扱いたいビデオのサイズに合わせ、[デュレーション]は扱いたい秒数、[解像度]の項目は「フル画質」に設定します。
※3 サンプルファイルの設定を確認する場合は、コンポジションの「movie」タブを選択した状態で、メニューバーから[コンポジション]→[コンポジション設定
]を選択し、[コンポジション設定]ダイアログを開きます。ここで重要なポイントは、[ピクセル縦横比]を「正方形ピクセル」とすることです。ビデオ規格によってはピクセルが正方形ではありません。例えば、DVフォーマット(NTSC)では横が縦に比べて90%程小さい縦長のピクセルとなっています。Flashはパソコンのモニタ上で再生するため、縦横を正しく表示させるためには、正方形ピクセルにする必要があります。フレームレートはFlashと同一の値にします。一般的に日本国内ではFlashも映像も30フレーム/秒で作られることが多いです。
97フレーム/秒」といったフレームレートがありますが、Flashではドロップフレームの仕組みはないので、「29
97フレーム/秒」よりは「30フレーム/秒」で作る方がよいでしょう
After Effectsでは直接FLVファイルとして書き出すことができますが、後の作業を考慮して、未圧縮のビデオファイルとして書き出すことをおすすめします。というのも、FLVの容量は成果物のSWFのファイル容量に影響するため、エンコードの際にビットレートの調整に試行錯誤することが多々あります。そのたびにAfter EffectsからFLVを書き出すとなると、レンダリングとエンコードの両方の時間がかかります。目安としてAfter Effectsのレンダリングは数分~数時間の処理時間、エンコードは数分の処理時間となります。そこで、After Effectsではレンダリングしたものを未圧縮のビデオとして保存しておき、何度も試行錯誤するであろうエンコード作業は別のソフトウェアを使うことで作業を分離しておけば、時間を要するレンダリング作業は1回だけで済むようになり、効率的に作業できるというわけです。未圧縮のビデオファイルの書き出し方は次の通りです。]を選択します。[レンダーキュー]パネルを開きます。[レンダリング設定]を「最良設定」にします。[出力モジュール]を「ロスレス圧縮」にします。[出力先]の右側の下線付きのテキストをクリックして、保存先を選択します。[レンダーキュー]パネル内の[レンダリング]ボタンをクリックします。以上でレンダリングが実行され、選択したフォルダにムービーが書き出されます。
コラム:透過情報を書き出す場合
透過情報を書き出す場合は、レンダリングキューパネルの下にある「出力モジュール」のプルダウンメニューから「カスタム」を選択し、[メインオプション][形式]を「QuickTimeムービー」にし、[チャンネル]を「RGB + アルファ」に選択します。[形式オプション]ボタンをクリックし[圧縮設定]ダイアログが開きますが、[圧縮の種類]を「アニメーション」にします。QuikcTimeムービーのアニメーション圧縮は可逆圧縮のため画質の劣化は起こらず、圧縮の種類が「なし」の場合に比べてファイルサイズを抑えることができます。
ビデオファイルをFLVに変換
次に書き出したビデオファイルをFLVに変換します。書き出しに便利なプリセットが用意されていますが、今回は高画質設定でエンコードするためにカスタマイズします。]ボタンをクリックし、先程書き出したビデオファイルを選択します。]ボタンをクリックし、[書き出し設定]ダイアログを開きます。[出力名]の右側の下線付きのテキストをクリックして、保存先を選択します。flv」というファイル名で保存します。オーディオを利用しない場合は[オーディオの書き出し]のチェックを外します。[最高レンダリング品質を使用]にチェックを入れます。[OK]ボタンをクリックし、[書き出し設定]ダイアログを閉じます。[キューの開始]ボタンをクリックし、エンコードを開始します。
ビデオ形式はFLVを利用しますが、[マルチプレクス]の選択肢にある「F4V」はH
264コーデックが利用されたビデオ形式です。FLVに利用されているOn2 VP6コーデックよりも圧縮の効率が高く画質が良いことが利点ですが、透過情報を扱えない点と、Flashのタイムラインに組み込めない点がデメリットです。[プロパティ]パネルでステージのフレームレートとサイズをAfter Effectsで出力した設定と合わせておきます。
メニューバーから[ファイル]→[読み込み]→[ビデオの読み込み
]を選択し、[ビデオの読み込み]ダイアログを開きます。[SWFにFLVを埋め込み、タイムラインで再生する]にチェックを入れます。[続行]をクリックします。
図12 ビデオの読み込みダイアログ
[埋め込み]の画面では、シンボルタイプや必要な設定を行うことができます。ここではデフォルトのまま解説を続けます。[続行]をクリックします。[ビデオの読み込みの終了]の画面では[終了]をクリックします。以上の作業でタイムラインにビデオを埋め込むことができました。このビデオはタイムラインのムービークリップと同様に移動・拡大・回転したりマスクを適用することもできます。アニメーションの中に組み込み、柔軟に制御できる点がメリットです。サンプルでは、ビデオの終点でタイムラインの再生を停止し、ボタンを表示しています。また停止したタイミングでは背景をより画質の高い画像で表示するため、After Effectsのコンポジションで最終フレームを静止画として書き出したものに差し替えています。FLVは動きのあるうちは画質の低下が気になりませんが、静止させたときには若干画質が落ちているのは気になります。そのため、停止するタイミングで画質の高い静止画に差し替えました。次回はスクリプトでビデオを読み込む方法を解説します。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
フレームレートとアニメーションについて
アニメーションのキーフレームの作成
トゥイーンアニメーションの作成
モーショントゥイーンの作成
モーショントゥイーンに対するイージングの適用とカスタムイーズインおよびイーズアウト
シェイプトゥイーンの作成
シェイプトゥイーンでのシェイプヒントの使用
フレーム単位のアニメーションの作成
アニメーションの編集
タイムラインエフェクトの使用
アニメーション用スクリプトの作成について
アニメーション、フィルタ、およびTweenクラスの組み合わせ
アニメーションと描画APIの組み合わせ
フレームレートとアニメーションについて
フレームレート(アニメーションの再生速度)は、1秒あたりのフレーム数で表されます。フレームレートが遅過ぎると、アニメーションの動きがぎこちなくなります。早過ぎると、アニメーションの動きに悪影響が出たり、ユーザのコンピュータ処理能力を過剰に消費することがあります。アニメーションの複雑さとアニメーションを再生するコンピュータの速度は、再生の滑らかさに影響します。各種のコンピュータでアニメーションをテストし、最適なフレームレートを設定してください。アニメーションで作業をする際は、フレームレートについて考慮する必要があります。SWFファイルとそれを再生するコンピュータのパフォーマンスに影響を与えるためです。フレームレートを高く設定し過ぎると、特に多数のアセットを使用している場合やActionScriptを使用してアニメーションを作成している場合に、プロセッサの問題が発生する可能性があります。ただし、フレームレートの設定についても、アニメーション再生の滑らかさに影響を与えるため、考慮する必要があります。例えば、プロパティインスペクタで12fps(フレーム/秒)に設定したアニメーションは、1秒あたり12フレームで再生されます。ドキュメントのフレームレートを24fpsに設定すると、12fpsで実行した場合より、アニメーションの動きが滑らかに見えます。ただし、24fpsに設定したアニメーションは12fpsより高速で再生されるため、全体の長さ(秒数)が短くなります。したがって、より高いフレームレートを使用して5秒間のアニメーションを作成する場合、この5秒間を埋めるために、低いフレームレートの場合より多くのフレームを挿入する必要があります。このため、アニメーションの合計ファイルサイズが大きくなります。24fpsに設定した5秒間のアニメーションは、通常、アセットやコンテンツのアニメーション方法に応じて、12fpsに設定した5秒間のアニメーションよりファイルサイズが大きくなります。このコンテンツを視聴するには Flash が必要です。ヒント:Flashドキュメント全体に対して1つのフレームレートしか指定しないため、アニメーションを作成する前にこのレートを設定することをお勧めします。メモ: onEnterFrameイベントハンドラを使用してスクリプトで記述されたアニメーションを作成すると、そのアニメーションは、タイムライン上でモーショントゥイーンを作成したかのように、ドキュメントのフレームレートで実行されます。この場合、フレームレートに依存する代わりに、指定された間隔で関数を呼び出します。できる限り低いフレームレートを使用すると、エンドユーザのプロセッサ負荷が減るため、アニメーションが実行時に滑らかに再生されます。30~40fpsを超えるフレームレートは使用しないでください。高いフレームレートを設定すると、プロセッサに大きな負荷がかかります。また、アニメーションによる演出を実行時に変更することは好ましくありません。最後に、特にタイムラインベースのアニメーションで作業している場合、開発プロセスのできるだけ早い段階でアニメーションのフレームレートを選択するようにします。SWFファイルをテストする場合、アニメーションの長さとSWFファイルのサイズをチェックします。フレームレートは、アニメーションの速度に大きな影響を与えます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
フレームレートとアニメーションについて
アニメーションのキーフレームの作成
トゥイーンアニメーションの作成
モーショントゥイーンの作成
モーショントゥイーンに対するイージングの適用とカスタムイーズインおよびイーズアウト
シェイプトゥイーンの作成
シェイプトゥイーンでのシェイプヒントの使用
フレーム単位のアニメーションの作成
アニメーションの編集
タイムラインエフェクトの使用
アニメーション用スクリプトの作成について
アニメーション、フィルタ、およびTweenクラスの組み合わせ
アニメーションと描画APIの組み合わせ
アニメーションのキーフレームの作成
キーフレームとは、アニメーション内で変更を定義するフレームです。フレーム単位のアニメーションを作成する場合、ほとんどのフレームがキーフレームとなります。トゥイーン処理したアニメーションでは、アニメーションの重要なポイントでキーフレームを定義し、Flashでトゥイーン間のフレームの内容を作成します。Flashでは、トゥイーン処理したアニメーションの補間フレームは薄い青または薄い緑で表示され、キーフレーム間に矢印が描画されます。Flashドキュメントでは各キーフレームにシェイプを保存するため、キーフレームは作品の変更ポイントにのみ作成する必要があります。キーフレームはタイムラインに示されます。内容のあるキーフレームは黒丸で表され、空のキーフレームは白丸で表されます。同じレイヤーに追加する後続のフレームは、キーフレームと同じ内容になります。キーフレームを作成するには、次のいずれかの操作を実行します。タイムラインのフレームを選択し、挿入/タイムライン/キーフレームを選択します。トゥイーンはタイムラインに配置されます。タイムラインのインスタンスをアニメーション化するコードを配置することもできます。アニメーションの外観は、アニメーションの作成に使用するテクニックによって変わる可能性があります。モーショントゥイーンは、開始キーフレームの黒丸で表されます。
中間のトゥイーン処理されたフレームは、薄い青の背景に黒の矢印が付きます(図3を参照)
シェイプトゥイーンは、開始キーフレームの黒丸で表されます。
中間のトゥイーン処理されたフレームは、薄い緑の背景に黒の矢印が付きます(図4を参照)
破線は、最後のキーフレームがない場合など、トゥイーンが破損しているか不完全なことを示します(図5を参照)
破損しているシェイプトゥイーン
1つのキーフレームは黒丸で表されます。
1つのキーフレームの後のライトグレーのフレームには、未変更の同じ内容が含まれ、スパンの最後のフレームに白い矩形が付いた黒線で表示されます(図6を参照)
未変更の内容を含み、多数のフレームにスパンするキーフレーム
小さなaは、アクションパネルでフレームにフレームスクリプトが割り当てられていることを示します(図7を参照)
関連するスクリプトを含むフレーム
ライトグレーの背景を持つ一連のキーフレームは、フレーム単位のアニメーションを示します(図8を参照)
フレーム単位のアニメーションを表すいくつかの連続したキーフレーム
白丸の円は空のキーフレームを表し、白のフレームは内容のないフレームを表します。このフレームは、レイヤー上で内容のないセクションを開始します。例えば、レイヤー上で点滅するインスタンスがある場合、空のキーフレームをそのインスタンスを表示させない場所に挿入できます。
多数の連続した空のフレーム(すべて内容なし)を持つ空のキーフレーム
レイヤーとアニメーションについては、Flashユーザーガイド/モーションの作成/アニメーションのレイヤーについておよびFlashユーザーガイド/モーションの作成/トゥイーンアニメーション用レイヤーへのオブジェクトの配分のセクションを参照してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
フレームレートとアニメーションについて
アニメーションのキーフレームの作成
トゥイーンアニメーションの作成
モーショントゥイーンの作成
モーショントゥイーンに対するイージングの適用とカスタムイーズインおよびイーズアウト
シェイプトゥイーンの作成
シェイプトゥイーンでのシェイプヒントの使用
フレーム単位のアニメーションの作成
アニメーションの編集
タイムラインエフェクトの使用
アニメーション用スクリプトの作成について
アニメーション、フィルタ、およびTweenクラスの組み合わせ
アニメーションと描画APIの組み合わせ
モーショントゥイーンの作成
インスタンス、グループおよびタイプのプロパティの変化をトゥイーン処理するには、モーショントゥイーンを使用します(図10を参照)
Flashでは、インスタンス、グループおよびタイプの位置、サイズ、回転および傾斜をトゥイーン処理できます。さらに、インスタンスとタイプのカラーをトゥイーン処理して、段階的なカラーシフト効果を作成したり、インスタンスをフェードイン/アウトさせることもできます。グループやタイプのカラーをトゥイーン処理するには、それらをシンボルに変換する必要があります。シンボルの作成について詳しくは、Flashユーザーガイド/シンボル、インスタンス、およびライブラリアセットの使用/シンボルの作成を参照してください。モーショントゥイーンを適用してから、2つのキーフレーム間のフレーム数を変更するか、いずれかのキーフレームでグループやシンボルを移動する場合、Flashでは、フレームが再度自動的にトゥイーン処理されます。次の2つのいずれかの方法で、モーショントゥイーンを作成できます。アニメーションの開始キーフレームと終了キーフレームを作成し、プロパティインスペクタの「モーショントゥイーン」オプションを使用します。アニメーションの最初のキーフレームを作成し、必要なフレーム数をタイムラインに挿入します。次に、挿入/タイムライン/モーショントゥイーンを作成を選択して、オブジェクトをステージ上の新しい場所に移動します。終了キーフレームが自動的に作成されます。図10のアニメーションには複数のレイヤーがあります。蜂のすべてのアセットはムービークリップ内にあります。このため、インスタンスをメインタイムライン上でアニメーション化できます。インスタンス内のいくつかのエレメント(羽など)は、アニメーションがネストされたムービークリップインスタンスです。羽にはコマ送りのアニメーションが設定されています。このコンテンツを視聴するには Flash が必要です。
複数のレイヤーを持つアニメーション
位置をトゥイーン処理する場合、オブジェクトを非線形のパスに沿って移動させることができます。パスに沿ったトゥイーン処理については、Flashユーザーガイド/モーションの作成/パスに沿ったモーションのトゥイーン」を参照してください。
「モーショントゥイーン」オプションを使用してモーショントゥイーンを作成するには:
flaという名前を付けます。レイヤー1のフレーム1を選択します。ここからアニメーションを開始します。ペン、楕円、矩形、鉛筆、ブラシの各ツールを使用して、グラフィックを作成します。グラフィックを選択して、修正/シンボルに変換を選択します。シンボルに変換ダイアログボックスで、「ムービークリップ」オプションが選択されていることを確認し、「OK」をクリックします。これで作成したグラフィックがステージ上のインスタンス(ライブラリに登録されたシンボル)になります。レイヤ1のフレーム10を選択し、F6キーを押して2番目のキーフレームを作成します。これはアニメーションが終了する場所です。フレーム10でステージ上のインスタンスを選択します。次のいずれかを実行してインスタンスを変更します。そのインスタンスをステージ上の新しい位置に移動します。自由変形ツールを使用して、項目のサイズ、回転または傾斜を変更します。
トゥイーンのフレームスパン内の任意のフレームをクリックし(例えば、レイヤー1のフレーム5を選択)、プロパティインスペクタのトゥイーンポップアップメニューから「モーション」を選択します(ウィンドウ/プロパティ/プロパティ)
フレームを選択したまま、プロパティインスペクタのイージング値の横にある矢印をドラッグするか(ウィンドウ/プロパティ/プロパティ)、値を入力してトゥイーン処理したフレーム間の変化の度合いを調整します。メモ: デフォルトでは、トゥイーン処理したフレーム間の変化の度合いは一定です。イージングでは、変化の度合いを徐々に調整して、加速や減速時により自然な動きが得られます。トゥイーン処理中に選択した項目を回転するには、回転メニューのオプションを選択します。回転を防止するには、「なし」(デフォルト設定)を選択します。オブジェクトを1回モーションの最小方向に回転するには、「自動」を選択します。オブジェクトを指定どおりに回転するには、「時計回り」または「反時計回り」を選択し、回転数を入力します。メモ: 手順9の回転は、手順6で終了フレームに適用した回転に追加されます。制御/ムービープレビューを選択してアニメーションを確認します。メモ: パスに沿ったアニメーションについては、Flashユーザーガイド/モーションの作成/パスに沿ったモーションのトゥイーンを参照してください。「モーショントゥイーンを作成」コマンドを使用しても、モーショントゥイーンを作成できます。詳しくは、Flashユーザーガイド/モーションの作成/インスタンス、グループ、およびタイプのトゥイーンを参照してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
フレームレートとアニメーションについて
アニメーションのキーフレームの作成
トゥイーンアニメーションの作成
モーショントゥイーンの作成
モーショントゥイーンに対するイージングの適用とカスタムイーズインおよびイーズアウト
シェイプトゥイーンの作成
シェイプトゥイーンでのシェイプヒントの使用
フレーム単位のアニメーションの作成
アニメーションの編集
タイムラインエフェクトの使用
アニメーション用スクリプトの作成について
アニメーション、フィルタ、およびTweenクラスの組み合わせ
アニメーションと描画APIの組み合わせ
モーショントゥイーンに対するイージングの適用とカスタムイーズインおよびイーズアウト
イージングという用語は、アニメーション中の段階的な加速や減速のことを指し、アニメーションをよりリアルにするのに役立ちます。イージングでは、変化の度合いを徐々に調整して、加速や減速時により自然な動きが得られます。モーションをよりリアルにするために、イージングを作成したモーショントゥイーンに適用できます。Flashには、イージングをモーショントゥイーンに適用できる次の2つの方法が用意されています。イーズスライダを使用すると、作成した各モーショントゥイーンにイージング値を指定できます。または、カスタムイーズイン/イーズアウトダイアログボックス(Flash Professionalのみ)を使用して、モーショントゥイーンの速度をより正確に制御できます。
通常のイージングをモーショントゥイーンに適用するには:
flaという名前を付けます。レイヤー1のフレーム1を選択します。ここからアニメーションを開始します。ペン、楕円、矩形、鉛筆、ブラシの各ツールを使用して、グラフィックを作成します。グラフィックを選択して、修正/シンボルに変換を選択します。シンボルに変換ダイアログボックスで、「ムービークリップ」オプションが選択されていることを確認し、「OK」をクリックします。これで作成したグラフィックがステージ上のインスタンス(ライブラリに登録されたシンボル)になります。レイヤ1のフレーム10を選択し、F6キーを押して2番目のキーフレームを作成します。これはアニメーションが終了する場所です。フレーム10でステージ上のインスタンスを選択します。次のいずれかを実行してインスタンスを変更します。そのインスタンスをステージ上の新しい位置に移動します。自由変形ツールを使用して、項目のサイズ、回転または傾斜を変更します。
トゥイーンのフレームスパン内の任意のフレームをクリックし(例えば、レイヤー1のフレーム5を選択)、プロパティインスペクタのトゥイーンポップアップメニューから「モーション」を選択します(ウィンドウ/プロパティ/プロパティ)
フレームを選択したまま、プロパティインスペクタのイージング値の横にある矢印をドラッグするか(ウィンドウ/プロパティ/プロパティ)、値を入力してトゥイーン処理したフレーム間の変化の度合いを調整します。モーショントゥイーンを緩やかに開始し、アニメーションの終わりにかけてトゥイーンを加速するには、スライダを上にドラッグするか、–1~–100の負の値を入力します。モーショントゥイーンを高速で開始し、アニメーションの終わりにかけてトゥイーンを減速するには、スライダを下にドラッグするか、1~10の正の値を入力します。メモ: デフォルトでは、トゥイーン処理したフレーム間の変化の度合いは一定です。イージングでは、変化の度合いを徐々に調整して、加速や減速時により自然な外観が得られます。制御/ムービープレビューを選択してアニメーションを確認します。図11のSWFファイルでは、通常のイージング(上の蜂)とカスタマイズされたイージング(下の蜂)を示します。左から右にアニメーションする垂直線には、イージングは適用されていません。このコンテンツを視聴するには Flash が必要です。
通常のイージング(上の蜂)とカスタマイズされたイージング(下の蜂)
カスタムイージングを使用すると、直感的なグラフを通じてこれらのエレメントを制御できます。このグラフでは、モーショントゥイーンで使用される位置、回転、拡大・縮小、カラーおよびフィルタをそれぞれ切り離して制御できます。
モーショントゥイーンを作成しタイムラインでそれを選択すると、「編集」ボタンをクリックして、モーショントゥイーンをカスタマイズできます(図12を参照)
「編集」ボタンをクリックして、トゥイーンのイージングをカスタマイズ
カスタムイーズイン/イーズアウトダイアログボックスには、時間経過に伴うモーションの度合いを表すグラフが表示されます(図13を参照)
フレームは水平軸で表され、トゥイーンの変化の割合は垂直軸で表されます。アニメーションの最初のキーフレームは0%、最後のキーフレームは100%となっています。トゥイーン処理したインスタンスの変化の度合いは、グラフの曲線の傾斜で表されます。グラフに水平線(傾斜なし)を作成すると、変化の速度がゼロになり、垂直線を作成すると、瞬間的な変化が発生します。
カスタムイージングダイアログボックスを開くには:
このセクションの最初の例で説明したように、モーショントゥイーンを作成します。
トゥイーンのフレームスパン内の任意のフレームをクリックし、プロパティインスペクタのトゥイーンポップアップメニューから「モーション」を選択します(ウィンドウ/プロパティ)
プロパティインスペクタの「編集」ボタン(「イージング」の横)をクリックして、カスタムイーズイン/イーズアウトダイアログボックスを開きます(図13を参照)
グラフを編集してモーショントゥイーンのイージングをカスタマイズし、次のアニメーションを作成
このコンテンツを視聴するには Flash が必要です。このダイアログボックスには、次の追加コントロールがあります。「すべてのプロパティに対して同じ設定を使用する」チェックボックス: このチェックボックスにデフォルト値が選択されている場合、表示されている曲線がすべてのプロパティに使用され、プロパティポップアップメニューが無効になります。このチェックボックスがオフの場合、プロパティポップアップメニューが有効になり、各プロパティにはそのプロパティの速度を定義する別個の曲線が設定されます。プロパティポップアップメニュー:このメニューは、「すべてのプロパティに対して同じ設定を使用する」チェックボックスがオフの場合にのみ有効になります。有効な場合、メニューに表示される5つのプロパティそれぞれに別個の曲線が維持されます。このメニューのプロパティを選択すると、そのプロパティの曲線が表示されます。プロパティは次のとおりです。位置: ステージ上のアニメーションオブジェクトの位置に関するカスタムイージング設定を指定します。回転:アニメーションオブジェクトの回転に関するカスタムイージング設定を指定します。たとえば、ステージ上のアニメーションキャラクターがユーザのほうに振り向く速さを微調整できます。伸縮:アニメーションオブジェクトの拡大・縮小に関するカスタムイージング設定を指定します。たとえば、オブジェクトの大きさを簡単にカスタマイズすることで、オブジェクトがいったん遠ざかってから近づき、また遠ざかる様子などを表現できます。カラー:アニメーションオブジェクトに適用されるカラーのトランジションに関するカスタムイージング設定を指定します。フィルタ:アニメーションオブジェクトに適用されるフィルタに関するカスタムイージング設定を指定します。たとえば、ドロップシャドウのイージング設定を制御することで、光源の方向の変化をシミュレートできます。「再生」および「停止」ボタン:このボタンを使用すると、カスタムイーズイン/イーズアウトダイアログボックスで定義した現在の速度曲線をすべて使用して、ステージ上のアニメーションをプレビューできます。「リセット」ボタン:このボタンを使用すると、速度曲線をデフォルトの直線の状態にリセットできます。選択したコントロールポイントの位置:ダイアログボックスの右下隅に、選択したコントロールポイントのキーフレームと位置が数値で表示されます。コントロールポイントを選択しなければ、値は表示されません。コントロールポイントを線に追加するには、斜線を1回クリックします。これで線にコントロールポイントが追加されます。コントロールポイントの位置をドラッグすると、オブジェクトのモーションを精密に制御できます。フレームインジケータ(四角形のハンドル)を使用して、オブジェクトの動きを減速させる位置や加速させる位置をクリックしてください。コントロールポイントのハンドル(四角形のハンドル)をクリックすると、そのコントロールポイントが選択され、左右いずれかの側に接点が表示されます。接点は白丸の円で表されます。コントロールポイントと接点は、マウスでドラッグするか、キーボードの矢印キーを使用して配置できます。ヒント:デフォルトでは、コントロールポイントはグリッドに吸着します。吸着をオフにする場合は、Xキーを押しながらコントロールポイントをドラッグします。コントロールポイント以外の曲線上の領域をクリックすると、曲線のシェイプが変わらずにその位置に新しいコントロールポイントが追加されます。曲線上でもコントロールポイントでもない場所をクリックすると、コントロールポイントの選択状態が解除されます。カスタムイージングツールについて詳しくは、Flashユーザーガイド/モーションの作成/モーショントゥイーンへのカスタムイーズイン/イーズアウトの適用/現在のイーズイン/イーズアウト設定との互換性およびFlashユーザーガイド/モーションの作成/モーショントゥイーンへのカスタムイーズイン/イーズアウトの適用/サポートされないイージング曲線を参照してください。ActionScriptを使用したイージングの適用方法については、次の情報を参照してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
フレームレートとアニメーションについて
アニメーションのキーフレームの作成
トゥイーンアニメーションの作成
モーショントゥイーンの作成
モーショントゥイーンに対するイージングの適用とカスタムイーズインおよびイーズアウト
シェイプトゥイーンの作成
シェイプトゥイーンでのシェイプヒントの使用
フレーム単位のアニメーションの作成
アニメーションの編集
タイムラインエフェクトの使用
アニメーション用スクリプトの作成について
アニメーション、フィルタ、およびTweenクラスの組み合わせ
アニメーションと描画APIの組み合わせ
シェイプトゥイーンでのシェイプヒントの使用
複雑で難しいシェイプ変化を制御するには、シェイプヒントを使用します。シェイプヒントでは、シェイプの開始と終了のポイントが特定されます。たとえば、文字MをNにトゥイーンする場合、シェイプヒントを使用して文字のシェイプの角をマークすることができます。
これにより、シェイプ変化によって文字が線の複雑な集合になることなく、どちらの文字も認識できる状態を保ったまま、独立して変化します(図15を参照)
シェイプヒントを使用するには:
シェイプトゥイーンを作成します(前のセクション「シェイプトゥイーンの作成」を参照)
タイムライン上にアニメーションのあるレイヤーのフレーム1を選択します。修正/シェイプ/シェイプヒントの追加を選択します。マークするエッジまたは角までシェイプヒントを移動します。トゥイーンシーケンス内で次のキーフレームを選択します。終了側のシェイプで、マークした最初の位置に対応するエッジまたはコーナーにシェイプヒントを移動します。この処理を繰り返して、他のシェイプヒントを追加します。新しいヒントは、順番に次の文字(b、c、など)で表示されます。図15のSWFファイルでは、文字Mを文字Nにアニメーション化しています。上のSWFファイルでは2つの文字の間のモーフィングにシェイプヒントを使用していませんが、下のSWFファイルではシェイプヒントを使用してモーフィングを改良しています。flaでこの記事の内容を実行しているので、参照してください。または、図16で各シェイプヒントの位置を確認してください。このコンテンツを視聴するには Flash が必要です。
2つの文字の間のデフォルトのシェイプトゥイーン(上)と、シェイプヒントを使用して文字のモーフィングを制御しているアニメーション(下)
シェイプヒントには、開始側のシェイプと終了側のシェイプの間での対応を示す文字(aからz)が含まれています。26個までのシェイプヒントを使用できます。シェイプヒントは、開始キーフレームでは黄色、終了キーフレームでは緑色、その間またはシェイプの外では赤色で示されます。Flashは、赤色のシェイプヒントは無視します。シェイプのトゥイーンで最適な結果を得るためには、以下のガイドラインに従ってください。複雑なシェイプトゥイーンでは、開始シェイプと終了シェイプだけを定義するのではなく、中間のシェイプをいくつか作成して、それらをトゥイーンします。シェイプヒントは論理的である必要があります。たとえば、1つの三角形に対して3つのシェイプヒントを使用する場合、元の三角形とトゥイーンする三角形の間で順番が同じである必要があります。最初のキーフレームでの順番がabcで、2番目のキーフレームではacbであるということは許されません。シェイプヒントの配置は、シェイプの左上隅から開始して反時計回りが最適です。
2つの文字の間のモーフィング(上のアニメーション)を制御するために追加されたシェイプヒント
シェイプヒントの詳細については、Flashユーザーガイド>モーションの作成>シェイプヒントの使用を参照してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Adobe - デベロッパーセンター : ボーンツールを活用したインタラクションの作成
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ボーンツールを活用したインタラクションの作成
基本的なボーンツールの使い方
印刷用に表示
今までは、人間や動物の関節の動きや、歯車やピストンといった複雑な動きなど、複数のオブジェクトが連携するアニメーションを作成するには、ひとつひとつのオブジェクトに対して、個別にアニメーションをつける必要がありました。しかし、この「ボーンツール」を使えば、人間の関節のような、複数のオブジェクトが連動したアニメーションを容易に作成することが可能です。この記事では、ボーンツールによるボーン(インバースキネマティック)の作成と、IKArmatureクラスを用いたインバースキネマティックの制御の方法について、解説していきます。0を使用します。
ボーン(インバースキネマティック)とは
ボーンとは複数オブジェクト同士の連携を設定するために、骨と関節を設定することにより、一意のオブジェクトの位置や角度などの情報をもとに、関連するオブジェクトの位置や角度なども自動的に計算し、位置調整を行う機能です。この機能を使うと、例えば手の動きに連動させて、腕や肩の関節を動かすアニメーションを簡単に作成することが可能です。
ボーンを使ったアニメーション
3Dソフトなどで、モデリングされたキャラクターなどにアニメーションをつける際などに、使われることが多く、インバースキネマティック(逆運動学)とも呼ばれます。今までは、末端の関節の角度や位置を定める方法は、根元の関節から順に計算する必要があり、アニメーションを作成する際には、とても非効率なものでした。その問題を解決する方法として考案されたものが、各関節の位置を末端から逆順に計算していくインバースキネマティックという手法です。Flashでは、つながったボーン全体を「アーマチュア」、ボーン間を連結する点を「ジョイント」と呼んでいます。
アーマチュアとボーンとジョイント
シェイプ内へのアーマチュアの作成
複数のシンボル間のボーンの作成
作成したボーンおよびアーマチュアのIKArmatureクラスによる制御
シェイプ内へのアーマチュアの作成
シェイプをつなげたボーン
単一のシェイプ内にアーマチュアを作成し、ボーンや各ジョイントの位置に合わせて、シェイプを変形させることができます。※ツールバー[選択ツール]を利用してボーンアニメーションを確認いただけます。
複数のシンボル間のボーンの作成
シンボルをつなげたボーン
シンボルを別のシンボルに接続し、複数のシンボルを繋ぐアーマチュアを作成することができます。ボーンや各ジョイントの位置に応じて、各シンボル同士が連動し、位置の変更や回転を行うことが出来ます。作成したボーン、ジョイント、一連のアーマチュアをIKAramatureクラスを用いて、制御することが可能です。
著者について
主にFlashを用いての広告サイト制作やアプリケーションの開発などをする傍ら、ActionScript講座「ほんきでクスール」にて講師を務める。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
この記事で紹介するのは、複数のビデオを表示できるビデオショーケースのテンプレートです。このビデオショーケースにはビジュアルナビゲーションやビデオチャプタのキャプション機能が付いています。どのような用途にも使えますが、プライベートなビデオコレクションを公開したいという人に特におすすめです。しかも、このテンプレートは簡単にカスタマイズができるようになっています。この記事では、ビデオショーケースの概要と、そのカスタマイズ方法について解説します。この記事では、以下のソフトウェアを使用しています。net/にて配布されています、オープンソースの物理演算ライブラリです。0で書かれたクラスファイルとなっていますので、flaファイルと同じフォルダにライブラリ一式を入れておけば高性能な物理演算をFlash内で利用することができます。net/を見ますと確認することができます。四角形や円に限らず多角形も作ることができたり、モデル同士をジョイントで繋いだりと、魅力的な機能と精度を備えています。
実際に制作したサンプル「引越し奉行」
画面の左端から、右にある家に向かって物を投げるという内容です。ゲーム中に登場する家は「壁・屋根・床・家具」など、全て「Box2DFlashAS3」でできており、物をぶつけることで豪快に崩壊します。その様もかなりリアルで、あたかも本当に柱や屋根があるようです。こういった、形が崩れていく表現には非常に効果のあるライブラリだと思います。図:豪快に崩壊します。アーム右側の重りの重さでアームを回転させ、遠心力で物を上空に飛ばしています。こういった使い方にも十分使える優れたライブラリです。ロープの部分にはジョイント機能を使用しており、アームに付けられた重りは振り子運動のように揺れます。図:モデルごとに重さを設定できるので、投石器のような仕組みも再現できる。ロープの部分にはジョイントが使われている。
もう一箇所、タイトル画面の開始ボタンを押した際、文字がバラバラになって落下しますが、この文字にも
開始ボタンをクリックした際にスリープを解除して落下させています。図:開始ボタンをクリックすると、文字のモデルのスリープが解除され、一斉に落下する。これからBox2DFlashAS3の組み込みを簡単にご紹介いたしますが、残念ながら今の段階では組み込めばすぐに、お手軽に使える、という状態にはなっていません。サンプルとなるflaファイルが2つ入っていますので、この中身を見て利用するための手順を学ぶ必要があります。fla」は、このライブラリのもっとも基本的な機能に絞って作られています。flaファイルの中身はライブラリにムービークリップが3つあるだけで、あとはドキュメントクラスが設定されているだけです。as」にモデル生成などの情報が入っていますので、まずはこれを見て仕組みを理解すると良いです。
fla」 モデルの作成のみの基本的な機能
fla」は「Box2DFlashAS3」が持っている機能のほとんどを利用していますので、こちらを学ぶと、このライブラリの一通りの機能を学ぶことができます。
こちらはドキュメントクラスに「Main
as」を設定しています。
fla」 ジョイント、モーター、マウス操作など一通りの機能を使用したサンプル
コンテンツの目的にあわせてライブラリを充実させる。サンプルのゲームを作るには、Box2DFlashAS3にいくつかの機能を加え、カスタマイズする必要があります。このカスタマイズは少し時間のかかる作業ですが、ここで作っておくと、今後の制作にも十分役に立ちます。fla」は、swfファイルを実行した段階から物理演算が行なわれていますが、コンテンツの内容によっては常に必要ではなく、要所要所で利用するケースがあります。今回私が制作した「引越し奉行」も同様に、swfを実行した時点ではライブラリを利用していません。このような場合はドキュメントクラスを利用せずに、必要な時にflash側のアクションスクリプトから実行するようにします。fla」をドキュメントクラス無しで利用する場合は、プロパティパネルにある項目「ドキュメントクラス」を消し、「Box2DFlashAS3」を利用したいタイムラインに次のように書きます。次に、その時の状況に応じて作成するモデルを変更する場合や、ユーザーの操作によってモデルが追加、削除される場合があります。こういう状況のため、簡単にモデルを生成する命令集をクラス内に作成しました。flaファイル内のアクションスクリプトからモデルを生成したり、削除しています。as」内の次のスクリプトになります。ここの箇所をpublic functionとしてas内に定義しておけば、flaドキュメント内のアクションスクリプトからメソッドを実行してボックスのモデルを生成することができます。引き数でボックスの座標や大きさを指定できるようにしておけばとても便利です。これで一通りの機能を揃えますと、実際に制作することができます。制作で行なう作業は「モデルの配置」がほとんどですので、ここまで出来ましたら完成したも同然です。制作期間は1ヶ月ほどでしたが、作業全体で考えますと「Box2DFlashAS3」の使い方を調べ、カスタマイズする方に時間を費やした感じです。ゲームの制作に取り掛かると、比較的短期間で作ることができましたので、今後大いに活用できそうです。
2月現在のバージョン(1
3)では特定のモデルの参照を取得することが少し難しいため、この関連の機能が強化されると更に便利になりそうです。また、今回は触れておりませんが、ジョイントやモーターなど便利な機能も多いので、一度お試し頂くことをお勧めします。
著者について
フリーランスのFlashゲームデザイナー
最近は実写映像の撮影にハマりだし、先日ビデオカメラや編集機材を揃えたところ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
このチュートリアルでは、Photoshop でデザインされたファイルを使用したインタラクティブなポートフォリオを作成します。完成したアプリケーションを見るには、この画像をクリックしてください。
チュートリアル使用上の注意
このチュートリアルは開発中のビルドを元に作成されているため、機能の仕様やユーザーインターフェイスが開発中に変更される場合があります。そのため、以前のビルドで作成したファイルを新しいビルドでは開けない場合があります。また、開発中の製品にはバグが含まれている場合があるため、業務に支障のないコンピューターで使用してください。Betaリリースでは、UI 上に翻訳されていないメニューや文字切れているメニューがあります。ダウンロードしたPSD 素材をPhotoshop で開き、レイヤーとフォルダーの構成を確認してください。様々な要素ごとに名前がつけられてフォルダー内にまとめられています。スタートアップ画面が表示されます。psd」ファイルを選択して開きます。アートボード上に読み込まれたコンテンツが表示されます。レイヤーパネルでレイヤーやフォルダーの構造や表示/ 非表示設定が元のPhotoshop ファイルを同じであることを確認してください。Flash Catalyst では、フォルダーのことを「レイヤー」と呼び、レイヤーに含まれる個々のシェイプやビットマップを「オブジェクト」と呼びます。
コンポーネントの作成
コンポーネントとは、ボタン、スクロールバー、リスト、コンボボックスなどのような、ユーザーがアプリケーションを操作するためのコントローラーです。Flash Catalyst では予め動作が設定されたコンポーネントを使用できるため、アートワークを簡単に特定のコンポーネントに変換することができます。アートワークをボタンに変換する。まず、左側のサムネールをボタンコンポーネントに変換してロールオーバーとクリックの動作を設定します。選択ツールで左側のサムネールの一番上の画像(紫の花)をクリックして選択します。HUD パネル(黒いフローティングパネル)で、「アートワークをコンポジションに変換」プルダウンメニューから「ボタン」を選択します。これはコンテキストメニューや「変更」メニューからも選択できます。ボタンのステートを設定する。作成したボタンをダブルクリックするか、HUD パネルで「アップ」をクリックして、コンポーネントの編集モードにします。これにより、ボタンの外観を編集できるようになります。ウィンドウの上部に「ページ/ ステートパネル」が表示されています。コンポーネントのステートとは、ユーザーが操作する状態によって様々に変化する状態のことです。動作全体をカスタマイズすることもできますが、ここでは既に設定されたボタンのステートを変更してマウスを重ねたときに透明なオーバーレイが表示されるようにします。ページ/ ステートパネルで「オーバー」ステートをクリックします。デフォルトではこのサムネール画像はすべてのステートで自動的に共有されているため、この時点では外観は変わりません。ツールパネルで長方形ツールをクリックして選択し、サムネールの上をドラッグして同じ大きさの白い長方形を作成します。ページ/ ステートパネルで「ダウン」ステートを選択します。レイヤーパネルで、作成した長方形の左側のカラムをクリックして目玉アイコンを表示します。これにより、現在のステート(ダウン)に長方形が表示されるようになります。白い長方形が選択されていることを確認し、プロパティパネルで不透明度を15 に設定します。この変更は「ダウン」ステートにのみ適用され、他のステートには影響しません。※注意:プロパティパネルで値を入力した後はEnter キーを押して、入力を確定してください。ページ/ ステートパネルで「オーバー」ステートを選択します。白い長方形が選択されていることを確認し、プロパティパネルで不透明度を30 に設定します。アートボードの上部にあるナビゲーションバーの左端に表示されている矢印かプロジェクト名をクリックするか、Esc キーを押すか、ボタン以外の部分をダブルクリックして、コンポーネントの編集を終了します。
これまでのステップを繰り返して、他の二つのサムネールもボタンに変換してステートを設定します(作業時間短縮のために、最初のボタンで作成した長方形をコピーしておき、他のボタンのステートにペーストして使用することもできます)
ボタンの動作をプレビューする。これによりプロジェクトをブラウザ上で実行することができます。マウスをボタンに重ねたりクリックした時の動作を確認してください。
メインアプリケーションのページの作成
ここでは、サムネールをクリックしたときにメインの写真が切り替わり、選択したサムネールの背景に表示される長方形がクリックしたサムネールの背景に移動するような動作を設定します。これには「ページ」を使用します。「ページ」とはウェブアプリケーションのページのようなものですが、Flash Catalyst では、先ほど説明したコンポーネントのステートのように動作します。アイテムは異なるページ間で共有されますが、それらのプロパティはページごとに設定することができるのがウェブページとは異なる点です。
ステート/ ページの作成
ページ/ ステートパネルの下部にある「ステートを複製」ボタンをクリックして、全部で3つのページを作成します。これにより、すべてのコンテンツを共有するページが作成されます。この時点では外観に違いはありません。これにより、桜の木が表示されます。ツールパネルから選択ツールを選択します。アートボードで、最上部にあるサムネールの背景に表示されている淡いグレーの長方形を選択します。Shift キーを押しながら、下矢印キーを押して長方形を2番目のサムネールの後ろに移動します。下記のような外観になります。アートボードで、最上部にあるサムネールの背景に表示されている淡いグレーの長方形を選択します。Shift キーを押しながら、下矢印キーを押して長方形を3番目のサムネールの後ろに移動します。ページ/ ステートパネルでそれぞれのページをクリックして、外観が正しいかどうかを確認します。
ページを切り替える動作をサムネールに設定
次に、サムネールをクリックするとページが切り替わるように「カスタムインタラクション」を作成します。紫の花のサムネールを選択します。HUD パネルで、「カスタムインタラクション」セクションの右側にある「+」ボタンをクリックします。カスタムインタラクションが追加されます。左側のドロップダウンメニューから「ステートのトランジションを実行」を選択します。右側のドロップダウンメニューから「Page1」を選択します。同様に、2番目と3番目のサムネールに、それぞれPage2 とPage3 に移動するインタラクションを設定します。ファイルメニューから「プロジェクトを実行」を選択し、ブラウザ上でサムネールをクリックすると写真が切り替わることを確認します。
(まだアニメーションはありません)
トランジション時のアニメーションの作成
ここでは、ページの移動時の滑らかなアニメーションを設定します。タイムラインパネルの左側にはステート間のトランジションが表示されており、その右側に選択したトランジションのタイムラインが表示されます。2つのステート間にアニメーションを設定する場合は、ステートのトランジションを使用します。トランジションとは、2つのステート間で異なるアイテムをどのような動きで変化するかを指定します。例えば、あるステート上には表示されているアイテムが別のステートには表示されていない場合は「フェードアウト」します。あるいは、ステート間で位置が違うときには「移動」します。
Page1 を選択し、タイムラインパネルが表示されていない場合は、タイムラインパネルのタブをダブルクリックして開きます(必要に応じてパネルの高さを調整します)
ステート間のトランジションは「ステートのトランジション」セクションに表示されています。トランジションのタイムラインは、ステートに変化がない場合は空です。タイムラインの左側はPage1 ステートに関連し、右側はPage2 ステートに関連します。タイムラインパネルの上部にある再生ボタンをクリックします。トランジションのエフェクトを簡単にプレビューすることができます。「滑らかなトランジション」ボタンをクリックするか、手動でエフェクトバーの長さを変更してエフェクトの変化にかかる時間(デュレーション)を調整したり、位置を変更してエフェクトが開始する時間を変更したりできます。
ズームスライダーの作成
最後に、右側パネルの下にズームスライダーを作成します。ここでは、実際に画像をズームすることはできませんが、スライダーを設定することはできます。これには、「アートワークをコンポーネントに変換」機能を使用します。スライダーやスクロールバーのようなコンポーネントは、「サム」と呼ばれるスライダーのつまみや、サムを動かすための右/ 左ボタンといった複数の「パーツ」を必要とするためボタンよりやや複雑ですが、Flash Catalyst では、オリジナルのアートワークを使用して簡単にパーツを設定することができます。レイヤーパネルで「Background」レイヤーの左側にある空のカラムをクリックしてロックアイコンを表示します。HUD パネルで、「アートワークをコンポーネントにコンポーネントに変換」ドロップダウンメニューから「水平スクロールバー」を選択します。作成されたスクロールバーをダブルクリックして、コンポーネントの編集モードにします。変更メニューから、アートワークをパーツに変換>トラックを選択します。これによりスライダーが動く範囲を設定します。(先ほど作成したボタンとは異なり、ここでは「アップ」と「オーバー」用の別々のアートワークがあります。変更メニューから、アートワークをパーツに変換>サムを選択します。これにより、スライダー上をスライドするオブジェクトを設定します。アートボード上で、作成したサムをダブルクリックするか、変更メニューから「コンポーネントを編集」を選択してコンポジションの編集モードにします。「ダウン」ステートも同様にします。Esc キーを押すか、サムの背景をダブルクリックして、スクロールバーの編集モードに戻ります。Esc キーを押すか、スクロールバーの背景をダブルクリックして、メインのアートボードに戻ります。ファイルメニューから「プロジェクトを実行」を選択して、スクロールバーの動作を確認します。これで終了です。プロジェクトを保存するには、ファイルメニューから「保存」を選択してください。
著者について
この記事は、アドビ システムズ社の著作物です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Progressionを使えば、Flashサイトであっても、HTMLサイトのようなページ構成や画面遷移といったサイト基本機能を簡単に実装することができます。すでに多くのクリエイターが利用しており、個人サイトだけでなく、企業サイトでもProgressionが採用されています。
みなさんも、サイトの仕様書やクライアントへの説明資料を作成する際に、各ページをキャプチャして掲載しているのではないでしょうか
HTMLサイトの場合、自動的に巡回して画像化するキャプチャツールがあります。一方、Flashサイトの場合、全ページを自動的にキャプチャするツールは今までありませんでした。それは、Flashでは表現の自由度が高いために、作り手・コンテンツで設計が統一できないことが原因です。下記サンプルサイトにアクセスして、右クリックから[キャプチャしてPDFに保存する]を選択してください。」をクリックするとPDFを任意の場所に保存できます。このサンプルは、トップページ、スライドショーの一覧ページ、各スライドのページ(3つ)、クレジットページの計6ページで構成されています。
書き出されたPDFファイル
各ページが1つのPDFとして書き出されています。
例えば、FlashサイトをPDFにすれば、赤字を入れやすくなり、検証精度も向上するでしょう
また、クライアントとの打ち合わせの資料として利用すれば、認識共有を図ることができます。
資料を一枚一枚プリントスクリーンして用意しているのであれば、その作業が自動化されることにより、検証・確認のサイクルが確実にスピードアップするでしょう
検証スタッフ:PDFベースでの文言・画像のチェック
ディレクター:クライアントや協力会社への説明資料の作成
条件が高いため、注意してください。
書き出し設定
実装するには、数行のスクリプトを加えるだけです。以下はProgression 3をすでにインストールした状態であることを前提として説明しています。classesフォルダがない場合は作成してください。この作業は、プロジェクトごとに行う必要があります。1以前のバージョンからアップデートした場合は、swcファイルへのパスが通っていない場合もあるので、パスを通すように設定ください。メニューから[ファイル→パブリッシュ設定→Flash(タブ)→設定(スクリプト右のボタン)→ライブラリパス(タブ)]を選択し、SWCファイルを設定できるダイアログを表示します。
次に[+]のボタンをクリックして「
1と仕様を合わせるために入力しています。基本的には次の2行のスクリプトを書くだけで実装完了です。それぞれの実装方法をまとめておきます。flaファイルのrootのタイムライン1フレーム目に、以下のスクリプトを記述します。
// ライブラリのインポート
// タイマーによる遅延処理
flaファイルのrootのタイムライン1フレーム目の_complete関数の閉じ括弧直前に次のスクリプトを記述します。asクラスの_onInit()関数内の閉じ括弧直前に、以下のスクリプトを記述します。この状態で画面内の任意の場所で右クリックをすると[キャプチャしてPDFに保存する]というメニューが表示されます。これを選択すると、サイト内の自動巡回キャプチャが開始されます。」をクリックすると保存ダイアログが表示されるので、PDFの保存先を指定します。実際のWeb制作現場で役立ててほしいと思っています。今後のバージョンアップとして、ご要望があればProgression公式フォーラム内に拡張機能のトピックがあるので、そこに投稿してください。もし興味がありましたら、ぜひこちらも利用してください。
著者について
Web制作会社を得てフリーランスとして今年4月に独立
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
かんたん作成
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
埋め込みビデオ
FLVのプログレッシブダウンロード
FLVのストリーミング
エンコードに関する基礎用語
印刷用に表示
かんたん作成
初めまして、中村理絵です。FlashPlayer がビデオ再生のサポートを始めてから、クリエイティブな表現のなかで再生されるビデオ映像の演出に取り組んでいます。本連載では、数回に渡り Flash Video に関する基本知識から作成方法まで、その魅力について順を追って解説します。このページで紹介されているサイトのビデオは、Flash Player 6 以降がインストールされていれば、視聴できます。
著者について
インターネット放送局 impress TV の開局当初より、ストリーミングコンテンツ制作に従事
現在、ストリーミング・コーディネーターとして、フリーで、インターネット上での動画コンテンツ制作に幅広く携わる。過去に、映像、音響機材の販売や、音響技術者としての経験があり、エンコードの品質や表現方法には、人一倍のこだわりを持つ。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
かんたん作成
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
埋め込みビデオ
FLVのプログレッシブダウンロード
FLVのストリーミング
エンコードに関する基礎用語
かんたん作成
※プラグインなしで直接 FLV ファイルへ書き出しができるアプリケーション
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
かんたん作成
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
かんたん作成
初めまして、中村理絵です。FlashPlayer がビデオ再生のサポートを始めてから、クリエイティブな表現のなかで再生されるビデオ映像の演出に取り組んでいます。本連載では、数回に渡り Flash Video に関する基本知識から作成方法まで、その魅力について順を追って解説します。このページで紹介されているサイトのビデオは、Flash Player 6 以降がインストールされていれば、視聴できます。
FLV のプログレッシブダウンロード
FLVのプログレッシブダウンロード
FLVのストリーミング
埋め込みビデオ
SWF ファイルのなかに、要素のひとつとして、ビデオデータを埋め込むタイプの方法です。
<ビデオ再生に必要なもの>
<配信、視聴の流れ>
視聴者がSWFファイルにアクセスすると、SWF ファイルが視聴者のパソコンにダウンロードされ、埋め込まれたビデオを視聴できます。ビデオデータはSWFファイルに含まれます。Flash タイムライン上で、ビデオのフレームを確認しながら、インタラクティブ機能を作成できる。ビデオの連続再生が約120秒を超えると、オーディオとの同期に問題が生じることがある。ファイルの長さは最大16,000 フレームに制限される。ビデオのフレームレートは、ベースであるFlashタイムラインのフレームレートと同じにする必要がある。ビデオを修正するごとに、SWF ファイルの書き換えが必要となる。ビデオデータを含めて1ファイルとなるため、書き出しやプレビューにも時間がかかる。
FLV のプログレッシブダウンロード
SWFファイルとは別に作成された、FLV ファイルを Web サーバーからダウンロードしながら再生するタイプの方法です。FLV ファイルは、ビデオのみのデータが含まれたファイルで、そのほかのボタンやアニメーションなどのインタラクティブな機能は、すべて SW Fファイルに含まれます。
<ビデオ再生に必要なもの>
<配信、視聴の流れ>
視聴者が SWF ファイルにアクセスすると、SWF ファイルと SWF ファイルから呼び出された FLV ファイルが視聴者のパソコンにダウンロードされます。ビデオを再生するには SWF ファイルとFLVファイルの両方が必要であり、どちらが欠けても、ビデオを見ることはできません。FLV ファイルと SWF ファイルの2ファイルに分かれており、FL Vファイルにはビデオのみ、SWF ファイルには、インターフェースやインタラクティブ機能のみが含まれているため、SWF のファイルサイズは小さく、読み込みや書き出しに時間がかからない。ビデオの再生にファイルサイズや長さの制限はない。SWF ファイルのフレームレートと、FLV ファイルのフレームレートを同じにする必要はない。SWFファイルとは別に作成された、FLVファイルをストリーミングで再生するタイプの方法です。
<ビデオ再生に必要なもの>
<配信、視聴の流れ>
視聴者がSWFファイルにアクセスすると、SWFファイルのみが視聴者のパソコンにダウンロードされ、SWFファイルから呼び出されるFLVファイルは、毎回、FCSに接続して再生します。そのため、ビデオを見るには、常にFCSに接続可能なネットワークに接続している必要があります。ビデオを再生するにはSWFファイルとFLVファイルの両方が必要です。ストリーミングの場合、FLV のプログレッシブダウンロードの特徴に追加して以下のような特徴があります。FLVファイルはダウンロードされず、ユーザーのパソコンのキャッシュにも保存されない。ビデオチャットやイベントの生中継など、リアルタイムに映像を配信できる。
※プラグインなしで直接 FLV ファイルへ書き出しができるアプリケーション
エンコードに関する基礎用語
ビデオカメラなどで撮影した映像や、パソコン上で作成した映像などを、インターネットで配信するために最適なファイルへ変換させることを「エンコード」といいます。このような作業のことをエンコードといいます。また、視聴するには常にサーバーとネットワークを経由した接続環境が必要なため、ネットワーク回線の速度や混雑などの影響を受けます。
ライブ配信(生中継など)が可能
視聴者にビデオファイルをダウンロードされないため、権利が保護される。一時的なデータを受け取ったらすぐに再生が始まる。視聴者のネットワーク環境によって、画質の良し悪しが左右されたり、見られないことが生じたりする。「ダウンロード」は、基本的に Web Server から配信されるビデオの視聴方法で、視聴者のパソコンにビデオファイルが残ります。よって、一度ダウンロードされたビデオファイルは、インターネットに接続した状態でなくても再生できます。視聴者のネットワーク環境に関係なく、高品質なファイルを作成できる。インターネットに接続しなくてもビデオファイルを再生できる。長時間の場合、再生までに時間がかかる場合がある。
視聴者のパソコンに、ファイルサイズがダウンロードできる分のディスク容量が必要
全てのデータを視聴するためには、データを全てダウンロードする必要がある。ビデオファイルには、音声のビットレートと映像のビットレートがそれぞれに割り当てられており、その合計値がファイル全体のビットレートとなります。基本的には、高いビットレートでエンコードされたビデオファイルほど高品質なビデオファイルに仕上がりますが、ストリーミング再生の場合は、視聴者のネットワーク回線環境によって、視聴者がビデオを十分に再生することができなくなることがあるので注意が必要です。逆に、低いビットレートでエンコードされたビデオファイルは、どんなに視聴者のネットワーク回線環境が高速でも、それ以上の品質で再生することはできません。ビットレートの設定には、ターゲットとする視聴者のネットワーク回線環境の想定と、ビデオの品質とのバランスが重要です。「固定ビットレート(CBR)」では、動きの変動などに関係なく、一定のビットレートを保って再生されます。ストリーミングなど、一定のネットワーク速度で再生する場合には「CBR」でエンコードする必要があります。「VBR」では、動きの変化の多い場面では多くのビットレートを割り当て、動きの変化の少ない場面では少ないビットレートを割り当てるなど、時間の経過とともに、ビデオの動きなどによってビットレートが変化します。たとえば、アナウンサーが原稿を読み上げているときなどほとんど映像が動かない場面では、ビデオデータも少ないためビットレートを下げ、スポーツや車の走行シーンなど映像の変化が激しい場面では、多くのビデオデータが含まれているためビットレートを上げるなど、ビットレートを変化させてエンコードします。「VBR」のほうが、動きの多い場面でのビットレート不足によるノイズなどは発生しにくく画質も向上しますが、インターネット上で配信する場合、ネットワークの速度はほぼ一定なので、ストリーミングでの配信には向いていません。
フレームとフレームレート
映像は、何枚かの静止画を高速に切り替えることで、あたかも動いているかのように再生しています。そして、この静止画のことを「フレーム」といい、1秒間に再生されるフレーム数のことを、「フレームレート」といいます。たとえば日本では、通常、ビデオカメラで撮影した映像は、1秒間に約30枚のフレームを切り替えて再生しています。このように、1秒間に約30枚の静止画を切り替えて再生している場合、フレームレートは『30fps』ということになります。フレームレートの値が大きいほど動きは滑らかになりますが、画質も綺麗だとは限りません。フレームが増える分、それだけ多くデータ量も必要となります。フレームレートを15fps に設定した場合、単純に計算すると1フレームあたり20kbps のビットレートが割り当てられますが、30fps に設定すると、1フレームあたり10kbps のビットレートとなり、1フレームあたりのビデオデータは半分に下がり、画質も劣ってしまいます。また、画質を維持して VBR でエンコードした場合には、フレームが多いほどファイルサイズも大きくなります。エンコードされたビデオファイルは、インターネット上で快適にビデオを視聴できるよう、ファイルを圧縮しています。そのため、必ずしも1枚の絵として成り立った完全なフレームのみを切り替えて再生しているわけではなく、1枚の絵として成り立った完全なフレームは、数フレームごとにしか挿入されていません。その間にあるフレームには、変化した動きの差分データしか含まれていないのです。「キーフレーム」とは、1枚の絵として成り立った完全なフレームのことで、「キーフレームの間隔」では、キーフレームを挿入する間隔を決定します。「1 Pass エンコーディング」とは、ビデオの最初から最後までを1回の作業でエンコードする方法のことです。それに対して「2 Pass エンコーディング」とは、2回の作業でエンコードする方法のことで、1回目にはビデオファイル全体を分析、2回目の作業でエンコードします。基本的には「2 Pass エンコーディング」でエンコードしたほうがビデオファイルの品質はよくなりますが、その分、エンコードに要する時間は長くなります。
著者について
インターネット放送局 impress TV の開局当初より、ストリーミングコンテンツ制作に従事
現在、ストリーミング・コーディネーターとして、フリーで、インターネット上での動画コンテンツ制作に幅広く携わる。過去に、映像、音響機材の販売や、音響技術者としての経験があり、エンコードの品質や表現方法には、人一倍のこだわりを持つ。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
トゥイーン、トランジションおよびイージングについて
トランジションクラスとTweenクラスの使用
繰り返しアニメーションの作成
3次元空間でのアニメーション
ボーンツールを使用したアニメーション
0としてのモーションのコピー」を使ったアニメーションの作成
印刷用に表示
0でのアニメーションの作成
ActionScript言語には、アニメーション作成のための専用クラスがいくつか用意されています。これらのクラスにより、タイムラインを使用しなくても、単純なものから複雑なものまで様々なモーション効果を作成できます。0アニメーション機能を簡単に使用できることを説明します。利用できるオプションを調べて、ムービークリップとコンポーネントをアニメーション化し、SWFアプリケーションにアニメーションを追加する方法を学んでください。このチュートリアルを完了するには、次のソフトウェアがインストールされている必要があります。
この記事に必要な予備知識
この記事は、Flashオーサリング環境の基本を理解していること、およびActionScriptの使用経験があることを前提にしています。
著者について
Jen deHaan氏: カナダ北部の奥深い森で狼に育てられたという数奇な生い立ちを持つ。
成人してからは、Flashのデザイナー/開発者として活躍
Flashの5つのバージョンにわたり解説書を執筆
その後、一旦はFlashに関わる業務から離れる。
タイムライン上のモーション*業務に専念
趣味は雨の中を長時間歩きながら、伝記や生活史の中でFlashという言葉を何回使えるかを考えること
一時期、カナダのドーナツチェーン店「Tim Horton」のコーヒーにどっぷりはまっていて、米国カリフォルニア州に長年住んでから、ようやくコーヒー中毒から抜けられたと語っている。一般向けおよびAdobe製品チーム向けのeラーニングアプリケーションやWebアプリケーションの開発も手がける。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0になってから、Flashでも3Dの表現をよくみかけるようになってきました。ただし、ActionScriptの知識はそれなりに必要になり、気軽に始めたい人には少しハードルが高いイメージがあります。その理由は以下の2つのものにあります。ステージにおいているものをそのまま3Dにできる。Papervision3Dではコンポーネントを使うなどの方法は別として、まずは3D空間をプログラミングで作る必要があります。対するMatrix3Dでは通常のFlash開発のように、ステージにムービークリップを配置し、それに奥行きをつけることができます。イラストなどの絵の世界観をそのまま3D表現にできる。3Dの表現では一般的に、立方体に絵をマッピングするなどして、絵を空間に貼り付けていきます。この方法だとどうしてもカクカクした画像や、いかにも3Dを使っているように見えてしまいます。Matrix3Dではタイムラインに奥行きを持たせることができるので、イラストなどの見た目をそのまま3D空間のように見せることができます。まずはトゥイーンで3Dを表現する。
まずはスクリプトなしで、3Dの表現を作ってみましょう
ツールを使うだけでも簡単に傾きが表現できます。ステージに背景とロゴをひとまとめにしたムービークリップを配置します。タイムラインを伸ばし、モーショントゥイーンを作成します。3Dの傾きは「変形パネル」の「3D 回転」の値を変えるか、ツールの「3D回転ツール」を使います。
タイムラインを移動させるとムービークリップが傾いているのがわかるでしょう
これだけではちょっと物足りないので、ロゴが画面から飛び出しているように見せましょう
各ロゴのプロパティ「z」の値を変更するだけで、前に飛び出します。z軸はマイナスになるほど手前にきます。同じロゴのムービークリップを黒くし、背景におけば影の演出もできます。
テクスチャなし
テクスチャあり
画面全体にテクスチャを置いてアナログっぽくみせるなど、通常の2DでのFlashの表現とも相性がいいです。スクリプトで背景を傾ける。先ほどはモーショントゥイーンで動かしていましたが、今度はActionScriptを使って背景を傾かせ、画面全体がゆらゆらと動いている表現を作ります。X軸とY軸を傾けます。例:X軸を傾ける。※回転の仕組みの詳細は野中文雄さんの記事をご覧ください。実際にはenterFrameのイベント使い、連続的にそれぞれの軸を回転させます。傾く角度をランダムに設定し、傾きを変えながら連続して動かすと、画面がゆらゆらしたような演出になります。ロゴをz軸にトゥイーンさせる。今度はロゴのZ軸の動きをTweenerというライブラリを使って動かしてみます。Tweenerというとスクリプトでアニメーションを動かす時によく使うライブラリなのですが、だいたいがX、Y軸に動く、つまり平面上を動かすために使われます。ただこれはZ軸にも採用することができます。つまり奥から手前に移動する動きを簡単に作成することができます。Z軸をトゥイーンさせることで、より奥行きのある空間に見せることができます。※Tweenerのライブラリはこちらからダウンロードください。z軸の動きを音楽を同期させる。さきほどのサンプル3の動きと音を連動させてみます。こちらも2次元ではよくあるサンプルなのですが、3次元の動きと連動させると、少し違った演出ができます。音に合わせてロゴのZ軸の動きを変えたり、背景の落書きもイコライザのように動かしてみました。// 音情報を解析する。// 音の大きさを取得する。
// 音の大きさをZ軸分アニメーションさせる(サンプルではある指定した音の領域の平均値を使っています)
トゥイーンの動きは「サンプル3」と同じようにTweenerを使います。最後に演出的なおまけをつけてみました。3D空間にすると正面の物体はよく見えるのですが、底辺や側面にある物体は陰に隠れていたり、小さくなったりして見えにくいです。その部分にギミックなどを入れてみると、回転したときに初めて確認できるようなおまけ要素が付けられます。画面の下に要素を配置しておくと、普段は見えにくいですが、回転することで見えるようになります。今回サンプルでいろいろと作ってみましたが、意外と簡単に3Dのギミックができるような感じがしました。3Dを本格的にするのはちょっとハードルが高いという人は、まずはタイムラインでぐりぐり動かしてみるのも面白いかと思います。あとは2Dの世界でも使っているActionScriptを利用し、それをZ軸に変えてみると今までとは違った動きができるかもしれません。※サンプルのファイルは自由に触っていただいて結構ですが、絵の素材は実際のクスールのサイトでも使っていますので、個人利用のみに使用していただけると幸いです。
著者について
2002年カナダバンクーバーから帰国したのち、株式会社バスキュールにFlashデベロッパーとして勤務
2004年にフリーとして独立し、2006年に株式会社クスールを設立
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ただ、WebサイトをすべてFlashで構築するとなると、ある共通の問題点にぶつかります。ページごとに異なるURLがある、それがWebの特性の1つですが、Flashコンテンツではそうもいきません。
たとえば、誰かに自分のWebサイトにある問い合せページを教えたいとしましょう
通常なら、問い合せページのURLを教えれば、相手はWebブラウザのアドレスバーにそのURLを入力して直接そのページにアクセスすることができます。
comという私のWebサイトにアクセスしたら、メニューから“会社案内”をクリックして、さらにその中にある“問い合せ”をクリックしてください」という風に伝えることになるでしょう
あきらかに、URLを教えるだけの方が簡単で分かりやすいです。Webサイト全体を1つのFLAファイルで構築し、パブリッシュしたSWFファイルをWebページに配置した場合、そこにあるのは1つのページだけです。つまり、そのWebサイトにアクセスする手段は、1つのURLだけしかないのです。その他に直接Webサイトにアクセスする手段はありません。
あるいは、Webサイト全体ではなく、ヘッダやナビゲーションバー部分にSWFファイルを使いたい場合もあるでしょう
すべてのHTMLページ(またはPHPページ)にそのSWFを埋め込んで、表示されるページの内容に合わせてヘッダの画像を変えたり、ナビゲーションメニューでの現在位置を示したりしたいものです。この記事では、上記のようなFlashが抱える問題を解決する方法を紹介します。Flashサイト、あるいはFlashヘッダやナビゲーションの特定のパートに、個別のURLでアクセスできるようにします。記事を読み進める前に、用語の補足説明をしておきます。この記事のタイトルにもある「ディープリンク」とは、ダイレクトリンク、つまりWebサイトの中に埋もれているコンテンツに直接リンクするという意味です。これは、Webアプリケーションの特定のコンテンツや状態に直接リンクするURLを持つという意味です。この記事では、以下のソフトウェアを使用しています。
事前に必要な知識
この記事は、ActionScriptに不慣れなデザイナーやデベロッパーを対象とした内容です。ノート: Adobe Flex®を使用している、あるいはActionScriptを使ったよりフレキシブルで強力な方法を学びたいという人は、この記事の最後に紹介している「さらに学習したい方へ」を参考にしてください。記事へフィードバックをくださったみなさん、感謝しています。
おそらく、Flashベースのサイトを作る上で一番簡単な構成は、メインタイムラインに異なるキーフレームを挿入して、各キーフレームにWebサイトの「状態」(ページや画面のこと)を割り振る方法でしょう(図1)
図1: Webサイトのページごとにキーフレームを設定する。この記事は、上記のような構成をしたFlashサイトやコンテンツを対象としています。記事タイトルが示すように、URLを使って特定のフレームに直接リンクできるテクニックを紹介します。フレームアンカーを使用する。ActionScriptや他のスクリプトをまったく使用せずに、どのようにフレームにリンクを貼るのかというと、Flashの「フレームアンカー」を利用するのです。HTMLに馴染みのある人であればお分かりの通り、アンカーとはWebページ内のリンク先のようなものです。
たとえば、HTMLページのある場所から同じページ内の特定の場所へリンクしたい場合にアンカーを使います(実際、HTMLのハイパーリンクを指定するために使用するa要素のaは「anchor(アンカー)」を意味しており、a要素はハイパーリンクだけでなく、アンカーリンクにも使われています)
HTMLでのアンカーリンクのシンタックスは、以下のように「#(ポンド記号)」に続けてアンカー名を記述します。フレームアンカーの概念は、このHTMLのアンカーと同じです。ただ、アンカーリンクの先が、HTMLの特定の場所ではなく、メインタイムラインの特定のフレームとなります。Webブラウザ上でアンカーリンクが指定されると、SWFファイル内の再生ヘッドが該当するフレームへとジャンプするのです。ディープリンクを実現するには、FLAファイルで以下の2つの作業を行います。
行き先となるフレームにフレームアンカーを追加
適切なHTMLを出力できるようにパブリッシュ設定を変更
フレームアンカーを追加しますが、Flashでフレームラベルを使用したことがある人であれば、簡単に行えます。フレームラベルを追加する方法と同じ手順で、フレームアンカーを追加することができます。
アンカー先としてフラグを立てたいキーフレームを選択します(図2)
図2: アンカー先となるキーフレームを選択します。
プロパティインスペクタのフレームラベル入力欄にアンカー名を入力します (このアンカー名がアンカーリンクのURLに使用されます)
図3: アンカー名を入力します。
「ラベルの種類」メニューから、「アンカー」を選択します(図4)
図4: 「ラベルの種類」メニューから、「アンカー」を選択します。以上の作業でフレームアンカーができました。
メインタイムラインを見ると、キーフレームの部分にアンカー名と錨のアイコンが追加されています(図5)
図5: キーフレームの部分にアンカー名と錨のアイコンが追加される。ステップ2で入力したアンカー名は、ユーザーがアクセス時に利用するURLで使用します。このようなURLでページにアクセスすると、SWFファイルはその再生ヘッドを該当するフレームに移動させます。ディープリンクを実現するには、もう1つ重要な作業があります。パブリッシュ設定で、適切なテンプレートでSWFファイルが出力されるようにします。メニューから「ファイル/パブリッシュ設定」を選び、HTMLタブをクリックします。
テンプレートメニューから「名前付きアンカーを含むFlash」を選びます(図6)
図6: パブリッシュ設定で、名前付きアンカーを含むFlash」を選びます。この設定でパブリッシュを行うと、SWFファイルとHTMLファイルを出力します。そのHTMLファイルには、URLからアンカー名を抽出して、SWFの再生ヘッドを該当するアンカーフレームへ移動させるためのHTMLソースとJavaScriptコードが記述されています。最後にこのテクニックを使う上でのアドバイスを紹介します。フレームアンカー専用のレイヤーを用意して、そのレイヤーのキーフレームだけにアンカー名を設定します。アンカー名とフレームラベルは違います。なお、1つのキーフレームにアンカー名とフレームラベルを同時に付けることはできません。そのため、別々のレイヤーを用意してそれぞれにキーフレームを挿入し、1つをアンカー名に使い、もう1つをフレームラベルに使用します。
使用する上での注意点
この記事ではあえてActionScriptをまったく使わない方法を紹介しましたが、簡単に利用できる反面、制約もあります。特に、この方法では、タイムラインとフレームでFlashサイトのページを構成する必要があります。そうなると、タイムラインの1つのフレーム内に複数のムービークリップを入れ子にしてページレイアウトを構成しているようなWebアプリケーションには使えません。他にも、URLがユーザーには見つかりにくいという欠点があります。アンカーリンクURL以外の手段でキーフレームに移動した場合、たとえばアニメーションやユーザーのクリックによるgotoAndStop()で移動した場合、Webブラウザのアドレスバーに表示されるURLにはアンカー名が付いていません。
そのため、ページや画面ごとに異なるURLが割り振られていることが気づかれにくいでしょう
さらに学習したい方へ
以下のリストは、上記の問題点を改善するための様々なテクニックです。私自身試したわけではないので保証することはできませんが、いろいろな人々がおすすめとしているテクニックですので、参考にしてみてください。
バックボタンとURLに関する考察
ディープリンクを使用したURL制御のためのオープンソースFlexライブラリ
FlashアプリケーションでバックボタンやディープリンクをサポートするためのJavaScriptライブラリ
RESTなFlashアプリケーションを実現するためのテクニック
個人的には、ActionScriptを使うことになりますが、FlashVarsとサーバサイドコードでフレームをダイナミックに移動させる方法が一番シンプルでいいと思います。特に、URLが異なる複数のページで共通して利用するバナーやナビゲーションを作成して、ページごとに変化をつけたい場合は有効です。
著者について
Paulはアドビ認定デベロッパーであり、インディアナ大学からインストラクショナルシステム技術に関する修士号を得ています。RIAとコードライブラリの開発*、RIA開発に関する執筆*、RIA開発に関する講演*を行う以外の時間には、写真を撮ったり、台所用品を集めたり、あるいはレゴの技術やスターウォーズに関する知識といった重要な分野で3人の子供たちに負けないように努力したりしています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Flash 8 によるキャラクターデザインとアニメーション | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
シンボルの操作
スケッチを基にしたキャラクター作成
5D" アニメーションのテクニック
Flash 8 によるキャラクターデザインとアニメーション
各種の描画ツールにはそれぞれ特徴があり、使い分けていろいろな画風を出すことができます。また、ファイルサイズが大きくなるツールもあれば、小さいファイルを作成できるツールもあります。
使い込むにつれて、作風やファイルサイズ要件に応じた最適なツールの選び方がわかってくるでしょう
ファイルサイズとダウンロード時間や再生パフォーマンスの間には単純なトレードオフの関係があります。このセクションでは、Flash 描画ツールのそれぞれについて長所と短所を見ていくことにします。ブラシツール (図 1) はおそらく最も使い道が広いツールであり、特に筆圧感知タブレットと組み合わせたときに有用です。ブラシツールで描画することは、シェイプを使って描画するのと同じことです。筆圧と傾きを入力できる方法で使うのが最も自然だと感じられるツールです。ワコム*製のタブレットは有名で、さまざまなサイズの製品があり、Flash での使用にも適しています。同社のタブレットには、コードレスでバッテリー不要の "スタイラス" と呼ばれるペンが付属しています。ワコムのタブレットは既存のマウスと併用することも、完全にマウスの代替として使用することもでき、Flash だけに限らず非常に幅広い使い方ができます。とはいえ、タブレットを持っていなくてもブラシツールは使えるので心配する必要はありません。傾きと筆圧の感知機能は使えませんが、それを除けば特に問題ありません。ご使用のコンピュータに筆圧感知タブレットが接続されている場合は、ブラシツールを選択すると、このツールに属する設定項目として、描線の品質に影響する 2 つのオプションが表示されます。
ツールボックスの最下部にある筆圧と傾きのオプションがそれです (図 2)
これらの一方または両方を選択することにより、Flash のブラシツールを使って得られる結果がさまざまに変化します。
筆圧と傾きのオプション
図 3 は、ブラシツールで描画した結果を示しています。左側の筆跡はシェイプになっており、そのため周囲にベクターポイントが表示されています。オブジェクトに含まれるポイントが多くなるほど、ファイルサイズは大きくなります。この左側のシェイプは筆圧感知タブレットで描いたものなので、筆跡にかかった筆圧の変化に応じて、線端が細くなったり、太さが変わったりしています。右側も同じブラシツールを使用した筆跡ですが、こちらは筆圧感知の設定をオフにして描いたものです。
筆圧感知の設定をオン (左) およびオフ (右) にして描画したシェイプ
ブラシツールには、描画結果に特定の効果を与える次のようなオプションがあります (図 4)
標準 : 同じレイヤー上にある線や塗りをペイントで上書きします。塗りをペイント : 塗りのカラーの内側、および (ステージ上にある) シェイプの外側をペイントします。背面をペイント : 既存の塗りや線の背面をペイントします。選択範囲をペイント : 選択した塗りの内側だけをペイントします。内側をペイント : 塗りの内側からペイントを開始した場合、線の外側にはみ出さないようにします。
オブジェクトの描画
個々のシェイプを独立したオブジェクトとして描画し、相互に干渉しないようにすることができます。これまで、あるシェイプが別のシェイプによって切り取られてしまうのを避けるために、個々のシェイプを独立したレイヤー上に描画する必要がある場合がありましたが、Flash 8 では、描画ツール (ブラシ、鉛筆、ペン、楕円、矩形) の [オプション] の下にある [オブジェクトの描画] (図 5) をオン / オフにすることで、このような心配をせずに描画ができるようになりました。
オプションの [オブジェクトの描画] ボタン
既存のシェイプに重ねて新しいシェイプを描画すると、[オブジェクトの描画] をオンにしていない場合、図 6 のように 2 つのシェイプが結合し、一方が切り取られます。これは結合描画モードと呼ばれ、シェイプから別のシェイプを切り取って新しい形を作る場合に便利です。オブジェクトの描画モードでシェイプを描画すると、自動的に描画オブジェクトになり、他のシェイプとは結合しません。
描画オブジェクト同士の重ね合わせは、切り取りが発生する心配をせずに実行できます (図 7)
これは、オブジェクトの配置を調整したい場合や、単に個々のシェイプを分けて扱いたい場合に便利です。図 8 は私のトレードマークである少年のキャラクターですが、これはすべてマウスだけで、矩形ツールと楕円ツールを使って作成したものです。ワコムのタブレットとブラシツールを組み合わせて使う必要はありませんでした。もちろんブラシツールを使ってもよかったのですが、シェイプツールを使ったことにより、この作品の制作の意図に合う非常にすっきりした描線が出ています。ブラシツールでは、ともすると不要なポイントが多数できてしまい、ファイルサイズが大きくなるばかりか、後でシェイプを編集しようとすると大変な思いをすることがあります。この少年のグラフィックの場合は、形をシンプルにし、ファイルサイズをできるだけ小さくするように心掛けました。
シェイプツールで作成したキャラクター
鉛筆ツール (図 9) は、一定の幅の線を使ってイメージ全体を描きたい場合や、できる限りファイルサイズを小さくしたい場合に最適のツールです。鉛筆ツールで線を描画すると、含まれるベクターポイントの数が少なくなります。完全な直線では、両端に 1 つずつ、合計 2 つのポイントしか含まれません。
曲線に含まれるポイントは 3 つ以上で、曲がる回数に応じてポイント数は異なります (図 10)
鉛筆ツールで描画した線
鉛筆ツールにも、描線の品質に関して次のモードがあります (図 11)
まっすぐに : フリーハンドでまっすぐな線を引きたい場合にたいへん便利です。たとえ手が震えていても、線を描き終えると自動的に直線になります。スムーズ : 意図した基本の形を維持しつつ、描線を自動的にスムーズにします。インク : 描線の品質を調整しません。フリーハンドやルーズな作風を出す場合に便利です。
鉛筆ツールの品質モード
シェイプツール (楕円ツールと矩形ツール) は、基本的な図形の塗りと線を作成します (図 12)
Shift キーを押しながらシェイプツールを使うと、真円や正方形を描くことができます。
シェイプツール : 楕円と矩形
塗りと線のカラーは、プロパティインスペクタで選択できます (図 13)
いずれかの色見本をクリックすると、カラーパネルが開き、線またはカラーの選択肢を編集できます。
矩形ツールのプロパティインスペクタ
赤い斜線の付いた四角形を選択すれば、カラーなしの線または塗りを指定することもできます (図 14)
この四角形を選択するとカラーなしで描画できます。
直線または滑らかな流れる曲線を使って正確なパスを描くには、ペンツールを使用します (図 15)
直線または曲線のセグメントを作成し、直線のセグメントの角度や長さ、および曲線のセグメントの傾きを調整できます。ペンツールでは、クリックすると直線のセグメント上のポイントを作成でき、クリックしてドラッグすると曲線のセグメント上のポイントを作成できます。線上のポイントを調整すると、直線および曲線のセグメントを調整できます。曲線を直線に、または直線を曲線に変換することもできます。曲線を引いていくと、アンカーポイントごとにコントロールハンドルが作成されるのがわかります。
後で線を編集する際には、ダイレクト選択ツール (白い矢印) を使ってアンカーを選択し、このコントロールハンドルをドラッグします (図 16)
特定のアンカーポイントに対応するハンドルを動かすと、その場所で曲線の形が変わります。
ペンツールで描画した線のセグメントを、ダイレクト編集ツールで編集
オニオンスキンツールは、[タイムライン] パネルの下部にあります (図 17)
オニオンスキンツールを選択すると、タイムライン上の再生ヘッド位置インジケータにオニオンスキンマーカーが追加されます (図 18)
それらのマーカーをドラッグすると、現在のフレームの前後にある対象フレームの数を拡大できます。標準のオニオンスキン : 現在のフレームがフルカラーで表示され、その前後のフレームは現在のフレームから離れるほど淡く表示されます。
これにより、一連の絵を半透明の紙に描いて積み重ねたような表示になります (図 18)
アウトラインモードのオニオンスキン : 現在のフレームがフルカラーで表示され、その前後のフレームはアウトライン表示されます (図 19)
現在のフレームの前後にある異なるキーフレームをいくつも表示する場合は、こちらのほうが見やすくなります。
アウトラインモードのオニオンスキン
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Flash 8 によるキャラクターデザインとアニメーション | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
シンボルの操作
スケッチを基にしたキャラクター作成
5D" アニメーションのテクニック
Flash 8 によるキャラクターデザインとアニメーション
5D" アニメーションのテクニック
Flash ではトゥイーン処理が簡単にできるからといって、それに頼ってばかりいては魅力的なアニメーションを作れません。もちろん、トゥイーンは非常に短い時間で相応の効果をあげることができる便利な機能ですが、ステージ上で単純なオブジェクトを移動させるという以上のことはできません。
しかし、そのトゥイーンを応用して、キャラクターにリアル感を与えることができるとしたらどうでしょうか
トゥイーンの手軽さを、他の Flash ユーザーがあまり考えつかなかったところに利用してみましょう
トゥイーンに関することはもう何でも頭に入っているという方も、知識の最初の 1 合目までいったん引き返して脇道に入り、その先に何があるか見に行ってみましょう
このレッスンでは、本格的な 3D エフェクトのようにそれらしく見える、大きな威力を持った Flash アニメーションテクニックを公開します。このテクニックのよいところは、作業を Flash 環境の中だけで完結できることです。2D の世界から出る必要はありません。ここは次元のはざまなので、2D がなぜか 3D に見えるという不思議な現象が起きるのです。
それでは、皆さんを 2
5D アニメーションの世界へご案内しましょう
5D アニメーション" なんて初耳だと言われても無理はありません、筆者の造語ですから
このテクニックを筆者が発明したなどと主張する気は特にありませんが、"2 次元と半分" という呼び方は筆者が考えました。com*) で使っているロゴキャラクターです。
かわいいでしょう
図 29 は、個々のシンボルをそれぞれ別のレイヤーに配置した状態です。キャラクターの各部分がどのように分かれているかが見えるように、アウトライン機能をオンにしてあります。モーショントゥイーンでは 1 つのレイヤー上に 1 つのシンボルしか配置できないので、このようにしてあることには重要な意味があります。1 つのモーショントゥイーン内で同じレイヤーに 2 つの異なるシンボルを配置しようとすると、トゥイーンは正常に動作しません。各シンボルはそれぞれ専用のレイヤーに配置されています。各レイヤーには名前も付けてあります。これは必須ではありませんが、いずれタイムラインが大きくなれば、スクロールして探す機会が多くなるので、レイヤー名を付けておくと便利です。また、チーム環境で作業する場合には、ファイルを他のメンバーと共有するためにも重要なことです。整理しすぎて困ることもありません。タイムラインの用意ができたら、次はキャラクターにモーショントゥイーンを適用する作業にかかります。ここではキャラクターの頭部を構成するシンボルだけをアニメーション化するので、それ以外のレイヤーをすべてロックし、間違えて無用の変更を加えることがないようにしてあります。まず、頭部の回転を開始および終了させる時点にキーフレームを作成します。
上端のレイヤーをクリックして下端のレイヤーまで下へドラッグし、キーフレームに変換します (F6 キー)
これを 2 回実行してください。2 つのキーフレームの間には 15 ~ 20 フレーム程度の間隔を確保しておきます。
モーショントゥイーンを適用する準備
頭部の動きが終了するフレームに再生ヘッドを合わせた状態で、自由変形ツールを使い、ステージ上の個々のシンボルを編集します。筆者の手順にならって操作してみてください。まず、片方の目から取り掛かることにします。2 つの目は球状の物体 (頭部) の表面に付いていることを意識してください。これが本物の 3D オブジェクトだとすれば、手前にあるほうの目が大きく見えるはずです。また、目は卵形ではないので、幅を広くします。筆者のキャラクターの場合、目は 3 つのシンボルで構成されているので、3 つを同時に操作するために Shift キーを押しながらすべて選択し (図 31)、自由変形ツールを使って伸縮させます。完璧な形にならなくても、いつでも後から微調整できるので問題ありません。実際の効果はモーショントゥイーンを適用してみるまでわからないのですから、今は目をつぶって作業しているようなものです。
目のシンボルを選択
次は鼻の部分です。キャラクターがこちらに振り向くとき、近づいてくる部分はすべて右から左へと移動します。
本当の 3D オブジェクトならば、鼻は頭部からまっすぐに張り出しているはずですが、動きがよくわかるように、右から左へと動かすのに合わせて少しずつ下に向けることにします (図 32)
近づいてくるのを表すために少しずつ拡大するのも忘れないでください。その次は、反対側の目を動かし、サイズを大きくし、さらに楕円の幅を広くして円形に近づけます。
また、両方の眉毛についても、移動させ、わずかに回転させ、サイズを拡大します (図 33)
反対側の目の修正
ここで、いま編集したそれぞれのレイヤーにモーショントゥイーンを適用します。
編集の結果を見て、さらに調整を加える必要があるかどうか確認してみましょう
うまく行かなくても、何も問題はありません。この効果が思ったとおりに表示されるまでには、必ずといってよいほど数多くの手直しが必要になるからです。図 34 は、キャラクターが振り向いた顔の現時点の状態を示しています。
キャラクターの頭部を回転
このコンテンツを視聴するには Flash が必要です。
完成した振り向く頭部のアニメーション
まだ最初の段階ですが、案外よくできたのではないでしょうか
このように、自由変形ツールで単純な編集操作を少し加えるだけで、エフェクトを実際に動かすことができます。完璧ではありませんが、この時点で完璧である必要もありません。納得のいくエフェクトができるまで、各部品の伸縮の度合や配置、傾斜の付け方などを何度でも手直しすればよいでのす。振り向く動作をさらに効果的に見せるために、頭部に付いている他の部分も編集することにします。肝心なのは、平面的な 2D オブジェクトにまるで厚みや質量があるかのように、見る人を錯覚させることです。また、アニメーションの中に空間の奥行きがあるかのような錯覚を起こさせることも必要です。それには、頭の中の空間でいろいろな 3D オブジェクトを使ってこのキャラクターを組み立てる必要があります。もし本当にキャラクターがが 3D 空間内にいて、実際にこちらに振り向いたとすれば、最初こちら側にあった部分は向こう側に回るはずです。たとえば、自転軸を中心として回転する地球の姿を思い浮かべてください。地球は基本的に左回りで回転しています。その場合、こちらの真正面に向いている場所が左から右へと移動する一方で、一番遠くにある真裏の場所は、反対に右から左へと移動していくことになります。
これをキャラクターの頭部に当てはめてみましょう
頭部のシンボル自体は単なる横長の楕円なので、実際に行う必要がある操作は、形を少し歪めることです。また、同時に少し右側に動かすことにします。これは、誰かの顔がこちら側に振り向くと、左目の向こう (向かって右) にある皮膚の部分がより多く見えるようになるからです。また、この頭部本体は顔の部品よりも遠くにあるので、回転すれば反対に何ピクセルか右に動くはずだからです。これらの動きは誇張しすぎてはいけません。このエフェクトは、数少ない大きな変化ではなく、数多くの微妙な動きによって最高の効果を発揮します。要素としての微妙なアニメーションがいくつも集まって、全体としての印象的なエフェクトが完成するのです。
次に、帽子のつばを右側に向かって回転させます (図 36)
先ほど説明したとおり、裏側にある部分は手前とは反対の向きに動くからです。
帽子のつばを回転
この操作では矢印キーを使ってつばを右へと動かし、より首の後ろへと回り込む感じを出します。
帽子の本体も同じ理屈に従って操作し、形を歪めて狭くすると共に、数ピクセルだけ右に移動します (図 37)
耳については少し形を歪め、場所を少し左上に移動します (図 38)
耳の形を歪める。髪の毛も忘れてはいけません。このキャラクターの髪は 3 つの独立したシンボルを使ってデザインしてあるので、各シンボルを別々に編集できます。
頭部が振り向いたときの髪は、目のほうへ向けて形を歪め、さらに、見る人に対して正面から向き合う形に近くなるのを表すために短く描きました (図 39)
これは遠近感を錯覚させる手法ですが、場合によっては難しいこともあります。シンボルを歪めたり伸縮させたりする程度には制限があるからです。繰り返しますが、このエフェクトは控えめに、微妙な動きとして使うのが肝心です。できることの範囲内で、無駄なく見せるのが一番です。髪の形を歪める。後から編集を加えたレイヤーに、ここでモーショントゥイーンを追加します。これまでの手順を実行できたら、結果を再生してみてください。
格好よくなってきましたね
まるで本当に 3D オブジェクトが振り向いているように見えます。ところで、人間のキャラクターなら耳は 2 つあるものです。
顔の向こうに反対側の耳が見えるようにするために、もう 1 つ新しいレイヤーを最背面に追加しましょう
手前にある耳をコピーして、新しいレイヤーの、モーショントゥイーンの途中にある空のキーフレーム (フレーム 22 のあたり) にペーストします。それから、[修正]-[変形]-[横反転] を選択して左右を反転します。頭部の向こうから、向かって右側に半分だけ耳がのぞくように配置します。
そのくらい見えるようにすれば十分でしょう (図 40)
もう 1 つの耳を配置
図 41 のように、フレーム 30 (他のすべてのキーフレームがある位置) に 2 番目のキーフレームを追加します。
2 番目のキーフレームを追加
この耳の最初のキーフレームに戻り、耳の場所を頭部の真裏あたりに配置し直します。
このとき、他のレイヤーのいくつかをアウトラインにしておくと配置が見えるようになります (図 42)
裏側にある耳の配置を調整
では、これにモーショントゥイーンを適用しましょう
アニメーションを再生してみると、頭部が振り向くのに合わせて耳が見えてくるようになりました (図 43)
このちょっとしたディテールを加えるだけで、振り向く動作のリアルさが驚くほど増し、頭部に実際に丸みがあるかのような印象をいっそう強く与えることができます (再生には Flash Player 8 が必要です)
このコンテンツを視聴するには Flash が必要です。
頭部が振り向く動作に従って耳が見えてくるアニメーション効果の完成
何か不自然に感じるところがあれば、タイムラインをスクラブして動きを確認しながら自由に調整を加えてください。どの程度の手間をかけるかは、人それぞれのこだわり方と、実際に作成するキャラクターの複雑さによります。この例の少年は、デザインに使っているオブジェクトの量からすると、かなり複雑なキャラクターだといえます。仕上げとして、頭部の振り向き動作にもう少し手を加えることにします。ご存知のように、速度が一定のモーショントゥイーンではダイナミックな雰囲気を出しにくく、そのままでは動きがぎこちなく見えてしまうことがあります。これは、トゥイーンの中に動きが加速するところと減速するところを作る機能です。最初の手順は、モーショントゥイーンを適用することです。これには次の 2 つの方法があります。2 つのキーフレームの間にあるフレームを右クリックし、ポップアップメニューから [モーショントゥイーンを作成] を選択する。選択ツールでクリックしてドラッグすることにより、すべてのレイヤーを選択して黒くハイライト表示させ、プロパティインスペクタの [トゥイーン] ドロップダウンメニューから [モーション] を選択する。
プロパティインスペクタには [編集] ボタンがあります (図 44)
[編集] ボタンをクリックすると、[カスタムイーズイン / イーズアウト] パネルが開きます。
このボタンをクリックすると、[カスタムイーズイン / イーズアウト] パネルが開きます (図 45)
新しい [カスタムイーズイン / イーズアウト] パネル
新しい [カスタムイーズイン / イーズアウト] パネルでは、以前のバージョンよりも細かくイージングをコントロールできます。このパネルに表示されるグラフは、時間の経過に沿ったモーションの度合いを表しています。水平軸がフレームの進行、垂直軸がオブジェクトの変化の割合を示します。グラフの曲線によって、オブジェクトの変化の度合いがコントロールされます。曲線が水平な (傾きがない) 区間では変化の速度がゼロになり、曲線が垂直になっている時点では、まったく途中経過を表示しない瞬間的な変化が発生します。[すべてのプロパティに対して同じ設定を使用する] チェックボックスをオンにすると、現在の曲線がすべてのプロパティ (位置、回転、伸縮、カラー、フィルタ) に適用されます。オフにすると、次の各プロパティについて異なる曲線を適用できます。位置 : ステージ上のアニメーションオブジェクトの位置に関するカスタムイージング設定を指定します。回転 : アニメーションオブジェクトの回転に関するカスタムイージング設定を指定します。たとえば、ステージ上のアニメーションキャラクターがユーザーのほうに振り向く速さを微調整できます。伸縮 : アニメーションオブジェクトの拡大・縮小に関するカスタムイージング設定を指定します。たとえば、オブジェクトの大きさを簡単にカスタマイズすることで、オブジェクトがいったん遠ざかってから近づき、また遠ざかる様子などを表現できます。カラー : アニメーションオブジェクトに適用されるカラーのトランジションに関するカスタムイージング設定を指定します。フィルタ : アニメーションオブジェクトに適用されるフィルタに関するカスタムイージング設定を指定します。たとえば、ドロップシャドウのイージング設定をコントロールすることで、光源の方向の変化をシミュレートできます。[再生] および [停止] ボタン : [カスタムイーズイン / イーズアウト] ダイアログボックスで定義した現在の速度曲線をすべて使って、ステージ上のアニメーションをプレビューします。[リセット] ボタン : 速度曲線をデフォルトの直線の状態にリセットします。斜線をシングルクリックするとコントロールポイントが追加され、それらのコントロールポイントをドラッグして動かすことにより、オブジェクトのモーションを精密にコントロールできます。フレームインジケータ (四角形のハンドル) を使って、オブジェクトの動きをイーズインする (加速させる) 位置やイーズアウトする (減速させる) 位置をクリックしてください。コントロールポイントのハンドル (四角形のハンドル) をクリックすると、そのコントロールポイントが選択され、左右いずれかの側に接点 (中空の円形) が表示されます。コントロールポイントと接点は、マウスまたはキーボードのキーを使って動かすことができます。ヒント : デフォルトでは、コントロールポイントはグリッドに吸着します。一時的に吸着をオフにしたい場合は、X キーを押しながらコントロールポイントをドラッグします。コントロールポイント以外の曲線上の位置をクリックすると、その位置に新しいコントロールポイントが追加されます。曲線上でもコントロールポイントでもない場所をクリックすると、コントロールポイントの選択状態が解除されます。アニメーションが緩やかに始まって緩やかに終わるようにするには、図 46 のような曲線に調整してください。コントロールポイントをいろいろな位置に作成し、コントロールポイントと接点をさまざまな形に調整して、アニメーションの再生がどのように変化するか、ぜひ実際に試してみることをお勧めします。再生にはパネルの左下隅にある [停止] ボタンと [再生] ボタンを使用します。そうすれば、曲線の形とアニメーションの効果との関係を、すぐに感覚的に理解できるようになります。
使用するイーズイン / イーズアウトの曲線
では、アニメーションを再生しましょう
頭部の動きがだんだんと速くなり、最後にはだんだんと遅くなることに注意してください。頭部が元の位置に戻るようなアニメーションにする場合は、フレーム 1 からフレームをコピーし、上で作成したトゥイーンの後にペーストするだけです。同じ手順を繰り返してモーショントゥイーンを追加し、イーズインやイーズアウトを適用することで、キャラクターが振り向いたり元の姿勢に戻ったりする複雑な動きを付けることができます。
フィルタの適用
不可能が可能になりました。Flash 8 でグラフィックフィルタとブレンドモードが新しく導入されたのです。Flash ユーザーのコミュニティは大歓迎しました。この機能によって、ドロップシャドウ、ぼかし、グロー、ベベル、グラデーショングロー、グラデーションベベル、カラー調整などのエフェクトを任意のムービークリップインスタンスに適用できるようになったからです。
ここでは、キャラクターにドロップシャドウを適用してみましょう
最初に必要となる操作は、キャラクターをムービークリップシンボル内に配置することです。
タイムライン上をクリックしてドラッグし、すべてのレイヤーに含まれるすべてのフレームを選択してください (ヒント : 左上隅のフレーム 1 をクリックし、最下段のレイヤーの最終フレームに向かって斜めにドラッグします)
すべてのフレームとレイヤーが黒くハイライト表示されたら、[編集]-[タイムライン]-[フレームのコピー] を選択して (または Ctrl+At+C を押して)、タイムライン全体をクリップボードにコピーします (または、ハイライト表示されたフレーム内のどこかを右クリックし、ショートカットメニューから [フレームのコピー] を選択します)
コピーしたことを頭に置きつつ、次の手順に進んでください。ライブラリを開き (Ctrl+L)、右上隅のドロップダウンメニューから [新規シンボルの作成] を選択し、[ムービークリップ] タイプを選択して [OK] をクリックします。すると、新しいシンボルの編集モードに入ります。
タイムライン上で先頭フレームを選択し、[編集]-[タイムライン]-[フレームのペースト] を選択して (または Ctrl+Alt+V を押して)、図 47 のように先ほどのコピー内容をペーストします (または、フレーム 1 を右クリックし、ショートカットメニューから [フレームのペースト] を選択します)
フレーム 1 を右クリックし、[フレームのペースト] を選択
メインステージに戻り、新しいレイヤーを作成します。
ライブラリに新しく作成したムービークリップシンボルを選択し、ステージ上の新しいレイヤーにドラッグします (図 48)
ムービークリップをステージにドラッグします。元のキャラクターが含まれている他のレイヤーをすべて削除します。これにより、タイムライン上には、キャラクターのアニメーションを含んだ 1 つのムービークリップシンボルと 1 つのレイヤーだけが残ります。作成できるシャドウには 2 つの種類があります。標準のドロップシャドウでは、キャラクターから少しずれた位置の背面に影ができます。このエフェクトは平面的な外観になりやすく、そのままでは、壁などの平らな表面に投影した影のように見えます。今回は地面にできるような影を作りたいので、これではあまり感心しません。もっとリアルなシャドウエフェクトを得るには、若干の手順を踏む必要があります。
ムービークリップインスタンスを複製し、元のインスタンスの背面に配置します (元のインスタンスと同じレイヤー上の背面に複製を配置しても、背面に新しいレイヤーを追加してそちらに複製をペーストしてもかまいません)
複製したインスタンスを選択し、プロパティインスペクタの [フィルタ] タブで、プラス (+) メニューから [ドロップシャドウ] を選択します (図 49)
強さのレベルを 45% 前後に調整し、[オブジェクトを隠す] を選択します。すると、ムービークリップオブジェクトは見えなくなりますが、ドロップシャドウフィルタのプロパティが表示されるので、必要に応じて調整してください。画質を低、中、または高に設定できる他に、ぼかしの量、カラー、および角度、また、元のグラフィックとぼかしエフェクトの間の距離を指定できます。
複製したムービークリップインスタンスにドロップシャドウフィルタを適用
元のオブジェクトを背面の平らな壁に投影しただけのような平面的な影にならないように、フィルタを適用したムービークリップインスタンスを自由変形ツールで傾斜させましょう
このテクニックをうまく適用するには、多少の試行錯誤が必要です。
地面にできた影のように見えるところまで、インスタンスをつぶして傾斜させてください (図 50)
場合によっては、インスタンスの位置も調整しないとそれらしく見えるようになりません。
自由変形ツールを使って、複製したムービークリップを変形
ムービーをプレビューし、エフェクトを実際に再生してみてください。
アニメーションをループさせ、他のいくつかのアニメーションループと組み合わせれば、図 51 のように本格的な視覚効果を得ることができます (再生には Flash Player 8 が必要です)
このコンテンツを視聴するには Flash が必要です。
ドロップシャドウフィルタを使用した 2
5D エフェクトの例
この例を見れば、ドロップシャドウエフェクトはアニメーションの立体感を演出する強力な手段になることがわかるでしょう
このアニメーションは、少年のキャラクターと犬のキャラクターそれぞれのアニメーションループを含んだ一連のムービークリップによって表現されています。筆者が今後執筆を予定している記事では、小さいアニメーションループを活用してムービーの表現力を大幅にアップする方法についても説明するつもりです。皆さんが Flash によるデザインとアニメーションのスキルを磨くうえで、この記事が参考になれば嬉しく思います。Flash でアニメーション制作に使えるテクニックとしては、この他にも、フルアニメーション ("フレームバイフレーム" と呼ばれる手法) およびシェイプトゥイーン、また、ビデオや 3D アニメーションプログラムからのイメージシーケンスの読み込みなどがあります。デザイナーやアニメータが作った強力なプラグインも数多くあり、Flash での制作作業工程を短縮するために役立ちます。そうしたテクニックやツールの活用に関する記事も発表していきますので、どうぞご期待ください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
Flash 8 によるキャラクターデザインとアニメーション | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Flash 8 によるキャラクターデザインとアニメーション
Macromedia Flash は、ベクターベースのアニメーション制作用ツールとして多くのアニメータに使用されています。幅広いワークフローや制作プロセスに対応できることが Flash の強みの 1 つです。筆者は、いろいろな動く部品を作成して操ることにより複雑なアニメーションキャラクターを表示する、独自のテクニックをいくつか開発してきました。この記事では、鉛筆描きのスケッチから 1 つのキャラクターを起こし、本格的な動きをつけた Flash のアニメーションにするまでの作業をとおして、筆者のとっておきの秘技をいくつか紹介していきます。このチュートリアルをすべて実行するには、次のソフトウェアおよびファイルがインストールされている必要があります。
チュートリアルおよびサンプルファイル :
初級者および Flash 経験者の両方が対象読者であり、スキルの程度は問いません。各種の描画ツールにはそれぞれ特徴があり、使い分けていろいろな画風を出すことができます。また、ファイルサイズが大きくなるツールもあれば、小さいファイルを作成できるツールもあります。
使い込むにつれて、作風やファイルサイズ要件に応じた最適なツールの選び方がわかってくるでしょう
ファイルサイズとダウンロード時間や再生パフォーマンスの間には単純なトレードオフの関係があります。このセクションでは、Flash 描画ツールのそれぞれについて長所と短所を見ていくことにします。ブラシツール (図 1) はおそらく最も使い道が広いツールであり、特に筆圧感知タブレットと組み合わせたときに有用です。ブラシツールで描画することは、シェイプを使って描画するのと同じことです。筆圧と傾きを入力できる方法で使うのが最も自然だと感じられるツールです。ワコム*製のタブレットは有名で、さまざまなサイズの製品があり、Flash での使用にも適しています。同社のタブレットには、コードレスでバッテリー不要の "スタイラス" と呼ばれるペンが付属しています。ワコムのタブレットは既存のマウスと併用することも、完全にマウスの代替として使用することもでき、Flash だけに限らず非常に幅広い使い方ができます。とはいえ、タブレットを持っていなくてもブラシツールは使えるので心配する必要はありません。傾きと筆圧の感知機能は使えませんが、それを除けば特に問題ありません。ご使用のコンピュータに筆圧感知タブレットが接続されている場合は、ブラシツールを選択すると、このツールに属する設定項目として、描線の品質に影響する 2 つのオプションが表示されます。
ツールボックスの最下部にある筆圧と傾きのオプションがそれです (図 2)
これらの一方または両方を選択することにより、Flash のブラシツールを使って得られる結果がさまざまに変化します。
筆圧と傾きのオプション
図 3 は、ブラシツールで描画した結果を示しています。左側の筆跡はシェイプになっており、そのため周囲にベクターポイントが表示されています。オブジェクトに含まれるポイントが多くなるほど、ファイルサイズは大きくなります。この左側のシェイプは筆圧感知タブレットで描いたものなので、筆跡にかかった筆圧の変化に応じて、線端が細くなったり、太さが変わったりしています。右側も同じブラシツールを使用した筆跡ですが、こちらは筆圧感知の設定をオフにして描いたものです。
筆圧感知の設定をオン (左) およびオフ (右) にして描画したシェイプ
ブラシツールには、描画結果に特定の効果を与える次のようなオプションがあります (図 4)
標準 : 同じレイヤー上にある線や塗りをペイントで上書きします。塗りをペイント : 塗りのカラーの内側、および (ステージ上にある) シェイプの外側をペイントします。背面をペイント : 既存の塗りや線の背面をペイントします。選択範囲をペイント : 選択した塗りの内側だけをペイントします。内側をペイント : 塗りの内側からペイントを開始した場合、線の外側にはみ出さないようにします。
オブジェクトの描画
個々のシェイプを独立したオブジェクトとして描画し、相互に干渉しないようにすることができます。これまで、あるシェイプが別のシェイプによって切り取られてしまうのを避けるために、個々のシェイプを独立したレイヤー上に描画する必要がある場合がありましたが、Flash 8 では、描画ツール (ブラシ、鉛筆、ペン、楕円、矩形) の [オプション] の下にある [オブジェクトの描画] (図 5) をオン / オフにすることで、このような心配をせずに描画ができるようになりました。
オプションの [オブジェクトの描画] ボタン
既存のシェイプに重ねて新しいシェイプを描画すると、[オブジェクトの描画] をオンにしていない場合、図 6 のように 2 つのシェイプが結合し、一方が切り取られます。これは結合描画モードと呼ばれ、シェイプから別のシェイプを切り取って新しい形を作る場合に便利です。オブジェクトの描画モードでシェイプを描画すると、自動的に描画オブジェクトになり、他のシェイプとは結合しません。
描画オブジェクト同士の重ね合わせは、切り取りが発生する心配をせずに実行できます (図 7)
これは、オブジェクトの配置を調整したい場合や、単に個々のシェイプを分けて扱いたい場合に便利です。図 8 は私のトレードマークである少年のキャラクターですが、これはすべてマウスだけで、矩形ツールと楕円ツールを使って作成したものです。ワコムのタブレットとブラシツールを組み合わせて使う必要はありませんでした。もちろんブラシツールを使ってもよかったのですが、シェイプツールを使ったことにより、この作品の制作の意図に合う非常にすっきりした描線が出ています。ブラシツールでは、ともすると不要なポイントが多数できてしまい、ファイルサイズが大きくなるばかりか、後でシェイプを編集しようとすると大変な思いをすることがあります。この少年のグラフィックの場合は、形をシンプルにし、ファイルサイズをできるだけ小さくするように心掛けました。
シェイプツールで作成したキャラクター
鉛筆ツール (図 9) は、一定の幅の線を使ってイメージ全体を描きたい場合や、できる限りファイルサイズを小さくしたい場合に最適のツールです。鉛筆ツールで線を描画すると、含まれるベクターポイントの数が少なくなります。完全な直線では、両端に 1 つずつ、合計 2 つのポイントしか含まれません。
曲線に含まれるポイントは 3 つ以上で、曲がる回数に応じてポイント数は異なります (図 10)
鉛筆ツールで描画した線
鉛筆ツールにも、描線の品質に関して次のモードがあります (図 11)
まっすぐに : フリーハンドでまっすぐな線を引きたい場合にたいへん便利です。たとえ手が震えていても、線を描き終えると自動的に直線になります。スムーズ : 意図した基本の形を維持しつつ、描線を自動的にスムーズにします。インク : 描線の品質を調整しません。フリーハンドやルーズな作風を出す場合に便利です。
鉛筆ツールの品質モード
シェイプツール (楕円ツールと矩形ツール) は、基本的な図形の塗りと線を作成します (図 12)
Shift キーを押しながらシェイプツールを使うと、真円や正方形を描くことができます。
シェイプツール : 楕円と矩形
塗りと線のカラーは、プロパティインスペクタで選択できます (図 13)
いずれかの色見本をクリックすると、カラーパネルが開き、線またはカラーの選択肢を編集できます。
矩形ツールのプロパティインスペクタ
赤い斜線の付いた四角形を選択すれば、カラーなしの線または塗りを指定することもできます (図 14)
この四角形を選択するとカラーなしで描画できます。
直線または滑らかな流れる曲線を使って正確なパスを描くには、ペンツールを使用します (図 15)
直線または曲線のセグメントを作成し、直線のセグメントの角度や長さ、および曲線のセグメントの傾きを調整できます。ペンツールでは、クリックすると直線のセグメント上のポイントを作成でき、クリックしてドラッグすると曲線のセグメント上のポイントを作成できます。線上のポイントを調整すると、直線および曲線のセグメントを調整できます。曲線を直線に、または直線を曲線に変換することもできます。曲線を引いていくと、アンカーポイントごとにコントロールハンドルが作成されるのがわかります。
後で線を編集する際には、ダイレクト選択ツール (白い矢印) を使ってアンカーを選択し、このコントロールハンドルをドラッグします (図 16)
特定のアンカーポイントに対応するハンドルを動かすと、その場所で曲線の形が変わります。
ペンツールで描画した線のセグメントを、ダイレクト編集ツールで編集
オニオンスキンツールは、[タイムライン] パネルの下部にあります (図 17)
オニオンスキンツールを選択すると、タイムライン上の再生ヘッド位置インジケータにオニオンスキンマーカーが追加されます (図 18)
それらのマーカーをドラッグすると、現在のフレームの前後にある対象フレームの数を拡大できます。標準のオニオンスキン : 現在のフレームがフルカラーで表示され、その前後のフレームは現在のフレームから離れるほど淡く表示されます。
これにより、一連の絵を半透明の紙に描いて積み重ねたような表示になります (図 18)
アウトラインモードのオニオンスキン : 現在のフレームがフルカラーで表示され、その前後のフレームはアウトライン表示されます (図 19)
現在のフレームの前後にある異なるキーフレームをいくつも表示する場合は、こちらのほうが見やすくなります。
アウトラインモードのオニオンスキン
シンボルの操作
描画したものや読み込んだものは何でも、すべてシンボルに変換でき、また、そうするのが望ましい使い方です。
これはなぜなのか、説明しましょう
オブジェクトはシンボルに変換すると、自動的にその Flash ドキュメントのライブラリに属するアイテムとなります。どの Flash ドキュメント内にも必ずそれ自身のライブラリがあり、そこからシンボルをステージ上にドラッグできます。すると、ステージ上に今度は "インスタンス" と呼ばれるオブジェクトが配置されます。インスタンスがステージ上にどれだけ多く存在しても、Flash はそれらを 1 つのシンボルについて 1 回だけロードすれば済みます。このことによって、Flash では小さいファイルサイズでのストリーミングアニメーションを実現しています。シンボルをできるだけ多く再利用することで、効率性は目覚ましく高まります。インスタンスには各種のエフェクト (伸縮、着色、アルファ、明度など) を適用することも、また、モーショントゥイーンに複数のエフェクトを組み合わせて適用することもできます。
この話を先へ進める前に、シンボルとその動作について基本的な事項を説明しておきましょう
まず、何かオブジェクトを作成してください。簡単なシェイプ 1 つで十分です。
すると、[シンボルに変換] ダイアログボックスが開きます (図 20)
[シンボルに変換] ダイアログボックス
[シンボルに変換] ダイアログボックスで、シンボルの名前を入力し、3 種類の動作のいずれかを選択し、さらに、このオブジェクトの基準点を決定します。3 種類の動作とそれぞれの意味は次のとおりです。ムービークリップにはレイヤーとフレームをいくつでも含めることができ、また、それ自体に固有の、他から独立したタイムラインがあります。たとえば、太陽系の中でいえば、個々の惑星はそれぞれ独立に太陽の周りを周回し続けています。そうした惑星の 1 つ 1 つがムービークリップのようなものであり、その場合、メインタイムラインは太陽に属していることになります。ボタン : ボタンには、オーバー状態、アップ状態、ダウン状態、ヒット状態の 4 つの状態があります。ボタンシンボルでは、これらの状態をそれぞれキーフレームとして表します。必要に応じて各状態にグラフィックを配置し、ボタンのインスタンスに ActionScript を適用することで、Flash ムービーにインタラクティブ性を持たせることができます。グラフィック : グラフィックシンボルはムービークリップに非常によく似ていますが、ダイナミックではなく、ActionScript による操作の対象とならない点が異なります。ただし、ムービークリップシンボルの中にグラフィックシンボルを配置することはできます。グラフィックシンボルにはレイヤーとフレームをいくつでも含めることができ、また、常にメインタイムラインおよび他のグラフィックシンボルと同期して動作するという最も重要な特徴があります。このことは、タイムベースのアニメーションを作成する際に非常に役立ちます。このアニメーションチュートリアルでは、グラフィック動作を選択することをお勧めします。そうすると、Flash オーサリング環境内でタイムラインを "スクラブ" してアニメーションの再生を確認できるからです。"スクラブ" とは、再生ヘッドを手で前後に動かしてタイムラインのコンテンツを再生する操作のことです。ムービークリップシンボルの場合、フレーム 1 以外のコンテンツを再生するためには、作成した Flash ムービーをプレビュー (Ctrl+Enter) するか、SWF ファイルとしてムービーを書き出す必要があります。
スケッチを基にしたキャラクター作成
よいデザインはたいていの場合、紙と鉛筆を使った昔ながらのスケッチから始まります。筆者の経験でも、長くて退屈なマネージャ研修の時間に最高のアイデアが出ることはよくあるし、紙ナプキンに描いた落書きがヒントになって凄いキャラクターを思いつくこともあります。ひらめきは、どこで、どんなときにやってくるかわかりません。いつも鉛筆を 1 本お尻のポケットや耳の上に準備しておくのは大切です。既に説明した Flash のいろいろなツールを使ってスケッチすることもできますが、紙に描いたスケッチを基にして Flash のキャラクターを作りたい場合は、スキャナでそのスケッチをスキャンして、グラフィックファイルに保存する必要があります。たいていのスキャナには、この作業を簡単に実行できるソフトウェアが付属しています。スケッチを Flash に読み込んだ後は、それをどうやって個別の部品に分解するかを考える必要があります。ここが大変なところで、非常に概念的な作業であり、最終的には、作りたいアニメーションの作風やキャラクターの雰囲気に応じて考えるしかありません。"形は機能に従う" という哲学がフォルクスワーゲンにはあるそうですが、これはキャラクターをデザインする上でも重要な考え方です。キャラクターがどのように動くのかをビジュアルに考えることは必要不可欠です。それが全体的なデザインの方向性を決めることになるからです。図 21 は、スケッチの一例と、そこから起こした Flash のキャラクターの完成品です。このキャラクターは楕円ツールと矩形ツールだけを使って描かれています。元のスケッチを参考にして Flash の描画ツールでトレースしつつ、イメージの完成度を上げるために微妙な変更や調整を加えていることがわかります。スケッチの隣に空のキーフレームを作成すると (F7 キー)、オニオンスキン機能をオンにし、スケッチを透かして見ることができるようになります。オニオンスキンで表示されたスケッチを下書きに、お好きな描画ツールを使って描画してください。筆者は今回、図 22 のように楕円ツールを使って少年の顔を描きました。体の部品やいろいろな飾りを作るときは、全体の姿がどうなるかを想像しながら描いてください。そのキャラクターが 3 次元空間に存在する立体的なものとして考えながら、ビジュアルを思い浮かべる必要があります。実際には 2 次元のデザインを制作するわけですが、3D アーティストと同じように考えることで、いろいろな部品同士の繋がりかたをビジュアルに理解できるようになります。
楕円のシェイプで作ったキャラクターの顔
キャラクターを描画し終えたら、それをコピーして新しいレイヤーにペーストします。筆者の場合は、シンボルへの変換をいつもこの時点で実行します。また、ここで各種レイヤーに名前を付けることもできます。
シンボルをレイヤーに配置することによる時間の節約
筆者は、オブジェクトを必ずシンボルに変換し、短くて意味のわかりやすい名前を一定の規則に従って付けるようにしています。ただしレイヤーの名前はまだ付けません。これについては、もっと簡単で手早くできる方法があるからです。すると、個々のシンボルがそれぞれ独立したままで、すべて同じ 1 つのレイヤー上に配置されます。これ以外のレイヤーをすべて削除し、キャラクターのシンボルをすべて含んだ 1 つのレイヤーだけが残るようにしてください。この次の手順が、一番の見どころです。
もう一度すべてのシンボルを選択してから、キャラクター上を右クリックし、[レイヤーに配分] を選択してください (図 23)
すべてのシンボルを選択してから、キャラクター上で右クリックし、[レイヤーに配分] を選択します。なんと、個々のシンボルをそれぞれ専用のレイヤーに配置するばかりでなく、各シンボル名に応じてレイヤーの名前まで自動的に付けてくれます。これは非常に便利です。
上手なドキュメント管理による時間の節約
図 24 は、筆者のキャラクターをデザインしてシンボルに変換し、アニメーション化する用意ができた段階のタイムラインの例です。レイヤーの名前を編集する場合は、そのレイヤー名をダブルクリックし、新しい名前を入力します。レイヤーに含まれるオブジェクトの種類に応じて各レイヤーにわかりやすい名前を付けることは、タイムラインとファイルの管理の観点から望ましいことです。特に、アーティストが複数いる場合や、チーム環境で作業する場合などでは非常に重要な意味があります。
筆者のトレードマークキャラクターを構成する部品とシンボルを配置したタイムライン
Flash MX (バージョン 6) 以降では、必要に応じてレイヤーフォルダを作成できるようになりました。レイヤーフォルダとは、フォルダのように他のレイヤーを保持できる新しいレイヤーです。表示を展開したり畳んだりすることができ、いくつものキャラクターがあって多数のレイヤーを扱う場合には非常に便利です。
個々のキャラクターについてレイヤーフォルダを作成し、すべてのレイヤーをフォルダの下に配置すると、現在実行している作業の対象キャラクター以外はすべて閉じておくことができます (図 25)
これによってタイムラインを延々とスクロールする手間が省け、作業時間を大幅に節約できます。
レイヤーフォルダによる時間の節約
Flash ドキュメント内を整理するには、ライブラリ内をうまく編成するという方法もあります。前述のとおり、シンボルを作成するか、何らかのオブジェクトをシンボルに変換すると、オブジェクトはそのムービーのライブラリに属するものとして自動的に登録されます。ライブラリ (図 26) には、その中に含まれる個々のシンボルについて、各種の情報やオプションが表示されます。シンボル名をクリックして選択すると、ライブラリのプレビューウィンドウにサムネールが表示されます。
筆者のトレードマークキャラクターのライブラリ
また、アニメーションを含んだシンボルの場合は、プレビューウィンドウの右上隅に [再生] ボタンと [停止] ボタンが表示され、プレビューウィンドウ内でアニメーションをプレビューできます。ライブラリの右上隅には、いくつかのオプションを含んだポップアップメニューがあり (図 27)、新規のシンボル、フォルダ、フォント、またはビデオを作成できます。また、既存のシンボルに対しては、名前の変更、フォルダへの移動、複製、削除、およびプロパティの編集と表示ができます。
5D" アニメーションのテクニック
Flash ではトゥイーン処理が簡単にできるからといって、それに頼ってばかりいては魅力的なアニメーションを作れません。もちろん、トゥイーンは非常に短い時間で相応の効果をあげることができる便利な機能ですが、ステージ上で単純なオブジェクトを移動させるという以上のことはできません。
しかし、そのトゥイーンを応用して、キャラクターにリアル感を与えることができるとしたらどうでしょうか
トゥイーンの手軽さを、他の Flash ユーザーがあまり考えつかなかったところに利用してみましょう
トゥイーンに関することはもう何でも頭に入っているという方も、知識の最初の 1 合目までいったん引き返して脇道に入り、その先に何があるか見に行ってみましょう
このレッスンでは、本格的な 3D エフェクトのようにそれらしく見える、大きな威力を持った Flash アニメーションテクニックを公開します。このテクニックのよいところは、作業を Flash 環境の中だけで完結できることです。2D の世界から出る必要はありません。ここは次元のはざまなので、2D がなぜか 3D に見えるという不思議な現象が起きるのです。
それでは、皆さんを 2
5D アニメーションの世界へご案内しましょう
5D アニメーション" なんて初耳だと言われても無理はありません、筆者の造語ですから
このテクニックを筆者が発明したなどと主張する気は特にありませんが、"2 次元と半分" という呼び方は筆者が考えました。com*) で使っているロゴキャラクターです。
かわいいでしょう
図 29 は、個々のシンボルをそれぞれ別のレイヤーに配置した状態です。キャラクターの各部分がどのように分かれているかが見えるように、アウトライン機能をオンにしてあります。モーショントゥイーンでは 1 つのレイヤー上に 1 つのシンボルしか配置できないので、このようにしてあることには重要な意味があります。1 つのモーショントゥイーン内で同じレイヤーに 2 つの異なるシンボルを配置しようとすると、トゥイーンは正常に動作しません。各シンボルはそれぞれ専用のレイヤーに配置されています。各レイヤーには名前も付けてあります。これは必須ではありませんが、いずれタイムラインが大きくなれば、スクロールして探す機会が多くなるので、レイヤー名を付けておくと便利です。また、チーム環境で作業する場合には、ファイルを他のメンバーと共有するためにも重要なことです。整理しすぎて困ることもありません。タイムラインの用意ができたら、次はキャラクターにモーショントゥイーンを適用する作業にかかります。ここではキャラクターの頭部を構成するシンボルだけをアニメーション化するので、それ以外のレイヤーをすべてロックし、間違えて無用の変更を加えることがないようにしてあります。まず、頭部の回転を開始および終了させる時点にキーフレームを作成します。
上端のレイヤーをクリックして下端のレイヤーまで下へドラッグし、キーフレームに変換します (F6 キー)
これを 2 回実行してください。2 つのキーフレームの間には 15 ~ 20 フレーム程度の間隔を確保しておきます。
モーショントゥイーンを適用する準備
頭部の動きが終了するフレームに再生ヘッドを合わせた状態で、自由変形ツールを使い、ステージ上の個々のシンボルを編集します。筆者の手順にならって操作してみてください。まず、片方の目から取り掛かることにします。2 つの目は球状の物体 (頭部) の表面に付いていることを意識してください。これが本物の 3D オブジェクトだとすれば、手前にあるほうの目が大きく見えるはずです。また、目は卵形ではないので、幅を広くします。筆者のキャラクターの場合、目は 3 つのシンボルで構成されているので、3 つを同時に操作するために Shift キーを押しながらすべて選択し (図 31)、自由変形ツールを使って伸縮させます。完璧な形にならなくても、いつでも後から微調整できるので問題ありません。実際の効果はモーショントゥイーンを適用してみるまでわからないのですから、今は目をつぶって作業しているようなものです。
目のシンボルを選択
次は鼻の部分です。キャラクターがこちらに振り向くとき、近づいてくる部分はすべて右から左へと移動します。
本当の 3D オブジェクトならば、鼻は頭部からまっすぐに張り出しているはずですが、動きがよくわかるように、右から左へと動かすのに合わせて少しずつ下に向けることにします (図 32)
近づいてくるのを表すために少しずつ拡大するのも忘れないでください。その次は、反対側の目を動かし、サイズを大きくし、さらに楕円の幅を広くして円形に近づけます。
また、両方の眉毛についても、移動させ、わずかに回転させ、サイズを拡大します (図 33)
反対側の目の修正
ここで、いま編集したそれぞれのレイヤーにモーショントゥイーンを適用します。
編集の結果を見て、さらに調整を加える必要があるかどうか確認してみましょう
うまく行かなくても、何も問題はありません。この効果が思ったとおりに表示されるまでには、必ずといってよいほど数多くの手直しが必要になるからです。図 34 は、キャラクターが振り向いた顔の現時点の状態を示しています。
キャラクターの頭部を回転
このコンテンツを視聴するには Flash が必要です。
完成した振り向く頭部のアニメーション
まだ最初の段階ですが、案外よくできたのではないでしょうか
このように、自由変形ツールで単純な編集操作を少し加えるだけで、エフェクトを実際に動かすことができます。完璧ではありませんが、この時点で完璧である必要もありません。納得のいくエフェクトができるまで、各部品の伸縮の度合や配置、傾斜の付け方などを何度でも手直しすればよいでのす。振り向く動作をさらに効果的に見せるために、頭部に付いている他の部分も編集することにします。肝心なのは、平面的な 2D オブジェクトにまるで厚みや質量があるかのように、見る人を錯覚させることです。また、アニメーションの中に空間の奥行きがあるかのような錯覚を起こさせることも必要です。それには、頭の中の空間でいろいろな 3D オブジェクトを使ってこのキャラクターを組み立てる必要があります。もし本当にキャラクターがが 3D 空間内にいて、実際にこちらに振り向いたとすれば、最初こちら側にあった部分は向こう側に回るはずです。たとえば、自転軸を中心として回転する地球の姿を思い浮かべてください。地球は基本的に左回りで回転しています。その場合、こちらの真正面に向いている場所が左から右へと移動する一方で、一番遠くにある真裏の場所は、反対に右から左へと移動していくことになります。
これをキャラクターの頭部に当てはめてみましょう
頭部のシンボル自体は単なる横長の楕円なので、実際に行う必要がある操作は、形を少し歪めることです。また、同時に少し右側に動かすことにします。これは、誰かの顔がこちら側に振り向くと、左目の向こう (向かって右) にある皮膚の部分がより多く見えるようになるからです。また、この頭部本体は顔の部品よりも遠くにあるので、回転すれば反対に何ピクセルか右に動くはずだからです。これらの動きは誇張しすぎてはいけません。このエフェクトは、数少ない大きな変化ではなく、数多くの微妙な動きによって最高の効果を発揮します。要素としての微妙なアニメーションがいくつも集まって、全体としての印象的なエフェクトが完成するのです。
次に、帽子のつばを右側に向かって回転させます (図 36)
先ほど説明したとおり、裏側にある部分は手前とは反対の向きに動くからです。
帽子のつばを回転
この操作では矢印キーを使ってつばを右へと動かし、より首の後ろへと回り込む感じを出します。
帽子の本体も同じ理屈に従って操作し、形を歪めて狭くすると共に、数ピクセルだけ右に移動します (図 37)
耳については少し形を歪め、場所を少し左上に移動します (図 38)
耳の形を歪める。髪の毛も忘れてはいけません。このキャラクターの髪は 3 つの独立したシンボルを使ってデザインしてあるので、各シンボルを別々に編集できます。
頭部が振り向いたときの髪は、目のほうへ向けて形を歪め、さらに、見る人に対して正面から向き合う形に近くなるのを表すために短く描きました (図 39)
これは遠近感を錯覚させる手法ですが、場合によっては難しいこともあります。シンボルを歪めたり伸縮させたりする程度には制限があるからです。繰り返しますが、このエフェクトは控えめに、微妙な動きとして使うのが肝心です。できることの範囲内で、無駄なく見せるのが一番です。髪の形を歪める。後から編集を加えたレイヤーに、ここでモーショントゥイーンを追加します。これまでの手順を実行できたら、結果を再生してみてください。
格好よくなってきましたね
まるで本当に 3D オブジェクトが振り向いているように見えます。ところで、人間のキャラクターなら耳は 2 つあるものです。
顔の向こうに反対側の耳が見えるようにするために、もう 1 つ新しいレイヤーを最背面に追加しましょう
手前にある耳をコピーして、新しいレイヤーの、モーショントゥイーンの途中にある空のキーフレーム (フレーム 22 のあたり) にペーストします。それから、[修正]-[変形]-[横反転] を選択して左右を反転します。頭部の向こうから、向かって右側に半分だけ耳がのぞくように配置します。
そのくらい見えるようにすれば十分でしょう (図 40)
もう 1 つの耳を配置
図 41 のように、フレーム 30 (他のすべてのキーフレームがある位置) に 2 番目のキーフレームを追加します。
2 番目のキーフレームを追加
この耳の最初のキーフレームに戻り、耳の場所を頭部の真裏あたりに配置し直します。
このとき、他のレイヤーのいくつかをアウトラインにしておくと配置が見えるようになります (図 42)
裏側にある耳の配置を調整
では、これにモーショントゥイーンを適用しましょう
アニメーションを再生してみると、頭部が振り向くのに合わせて耳が見えてくるようになりました (図 43)
このちょっとしたディテールを加えるだけで、振り向く動作のリアルさが驚くほど増し、頭部に実際に丸みがあるかのような印象をいっそう強く与えることができます (再生には Flash Player 8 が必要です)
このコンテンツを視聴するには Flash が必要です。
頭部が振り向く動作に従って耳が見えてくるアニメーション効果の完成
何か不自然に感じるところがあれば、タイムラインをスクラブして動きを確認しながら自由に調整を加えてください。どの程度の手間をかけるかは、人それぞれのこだわり方と、実際に作成するキャラクターの複雑さによります。この例の少年は、デザインに使っているオブジェクトの量からすると、かなり複雑なキャラクターだといえます。仕上げとして、頭部の振り向き動作にもう少し手を加えることにします。ご存知のように、速度が一定のモーショントゥイーンではダイナミックな雰囲気を出しにくく、そのままでは動きがぎこちなく見えてしまうことがあります。これは、トゥイーンの中に動きが加速するところと減速するところを作る機能です。最初の手順は、モーショントゥイーンを適用することです。これには次の 2 つの方法があります。2 つのキーフレームの間にあるフレームを右クリックし、ポップアップメニューから [モーショントゥイーンを作成] を選択する。選択ツールでクリックしてドラッグすることにより、すべてのレイヤーを選択して黒くハイライト表示させ、プロパティインスペクタの [トゥイーン] ドロップダウンメニューから [モーション] を選択する。
プロパティインスペクタには [編集] ボタンがあります (図 44)
[編集] ボタンをクリックすると、[カスタムイーズイン / イーズアウト] パネルが開きます。
このボタンをクリックすると、[カスタムイーズイン / イーズアウト] パネルが開きます (図 45)
新しい [カスタムイーズイン / イーズアウト] パネル
新しい [カスタムイーズイン / イーズアウト] パネルでは、以前のバージョンよりも細かくイージングをコントロールできます。このパネルに表示されるグラフは、時間の経過に沿ったモーションの度合いを表しています。水平軸がフレームの進行、垂直軸がオブジェクトの変化の割合を示します。グラフの曲線によって、オブジェクトの変化の度合いがコントロールされます。曲線が水平な (傾きがない) 区間では変化の速度がゼロになり、曲線が垂直になっている時点では、まったく途中経過を表示しない瞬間的な変化が発生します。[すべてのプロパティに対して同じ設定を使用する] チェックボックスをオンにすると、現在の曲線がすべてのプロパティ (位置、回転、伸縮、カラー、フィルタ) に適用されます。オフにすると、次の各プロパティについて異なる曲線を適用できます。位置 : ステージ上のアニメーションオブジェクトの位置に関するカスタムイージング設定を指定します。回転 : アニメーションオブジェクトの回転に関するカスタムイージング設定を指定します。たとえば、ステージ上のアニメーションキャラクターがユーザーのほうに振り向く速さを微調整できます。伸縮 : アニメーションオブジェクトの拡大・縮小に関するカスタムイージング設定を指定します。たとえば、オブジェクトの大きさを簡単にカスタマイズすることで、オブジェクトがいったん遠ざかってから近づき、また遠ざかる様子などを表現できます。カラー : アニメーションオブジェクトに適用されるカラーのトランジションに関するカスタムイージング設定を指定します。フィルタ : アニメーションオブジェクトに適用されるフィルタに関するカスタムイージング設定を指定します。たとえば、ドロップシャドウのイージング設定をコントロールすることで、光源の方向の変化をシミュレートできます。[再生] および [停止] ボタン : [カスタムイーズイン / イーズアウト] ダイアログボックスで定義した現在の速度曲線をすべて使って、ステージ上のアニメーションをプレビューします。[リセット] ボタン : 速度曲線をデフォルトの直線の状態にリセットします。斜線をシングルクリックするとコントロールポイントが追加され、それらのコントロールポイントをドラッグして動かすことにより、オブジェクトのモーションを精密にコントロールできます。フレームインジケータ (四角形のハンドル) を使って、オブジェクトの動きをイーズインする (加速させる) 位置やイーズアウトする (減速させる) 位置をクリックしてください。コントロールポイントのハンドル (四角形のハンドル) をクリックすると、そのコントロールポイントが選択され、左右いずれかの側に接点 (中空の円形) が表示されます。コントロールポイントと接点は、マウスまたはキーボードのキーを使って動かすことができます。ヒント : デフォルトでは、コントロールポイントはグリッドに吸着します。一時的に吸着をオフにしたい場合は、X キーを押しながらコントロールポイントをドラッグします。コントロールポイント以外の曲線上の位置をクリックすると、その位置に新しいコントロールポイントが追加されます。曲線上でもコントロールポイントでもない場所をクリックすると、コントロールポイントの選択状態が解除されます。アニメーションが緩やかに始まって緩やかに終わるようにするには、図 46 のような曲線に調整してください。コントロールポイントをいろいろな位置に作成し、コントロールポイントと接点をさまざまな形に調整して、アニメーションの再生がどのように変化するか、ぜひ実際に試してみることをお勧めします。再生にはパネルの左下隅にある [停止] ボタンと [再生] ボタンを使用します。そうすれば、曲線の形とアニメーションの効果との関係を、すぐに感覚的に理解できるようになります。
使用するイーズイン / イーズアウトの曲線
では、アニメーションを再生しましょう
頭部の動きがだんだんと速くなり、最後にはだんだんと遅くなることに注意してください。頭部が元の位置に戻るようなアニメーションにする場合は、フレーム 1 からフレームをコピーし、上で作成したトゥイーンの後にペーストするだけです。同じ手順を繰り返してモーショントゥイーンを追加し、イーズインやイーズアウトを適用することで、キャラクターが振り向いたり元の姿勢に戻ったりする複雑な動きを付けることができます。
フィルタの適用
不可能が可能になりました。Flash 8 でグラフィックフィルタとブレンドモードが新しく導入されたのです。Flash ユーザーのコミュニティは大歓迎しました。この機能によって、ドロップシャドウ、ぼかし、グロー、ベベル、グラデーショングロー、グラデーションベベル、カラー調整などのエフェクトを任意のムービークリップインスタンスに適用できるようになったからです。
ここでは、キャラクターにドロップシャドウを適用してみましょう
最初に必要となる操作は、キャラクターをムービークリップシンボル内に配置することです。
タイムライン上をクリックしてドラッグし、すべてのレイヤーに含まれるすべてのフレームを選択してください (ヒント : 左上隅のフレーム 1 をクリックし、最下段のレイヤーの最終フレームに向かって斜めにドラッグします)
すべてのフレームとレイヤーが黒くハイライト表示されたら、[編集]-[タイムライン]-[フレームのコピー] を選択して (または Ctrl+At+C を押して)、タイムライン全体をクリップボードにコピーします (または、ハイライト表示されたフレーム内のどこかを右クリックし、ショートカットメニューから [フレームのコピー] を選択します)
コピーしたことを頭に置きつつ、次の手順に進んでください。ライブラリを開き (Ctrl+L)、右上隅のドロップダウンメニューから [新規シンボルの作成] を選択し、[ムービークリップ] タイプを選択して [OK] をクリックします。すると、新しいシンボルの編集モードに入ります。
タイムライン上で先頭フレームを選択し、[編集]-[タイムライン]-[フレームのペースト] を選択して (または Ctrl+Alt+V を押して)、図 47 のように先ほどのコピー内容をペーストします (または、フレーム 1 を右クリックし、ショートカットメニューから [フレームのペースト] を選択します)
フレーム 1 を右クリックし、[フレームのペースト] を選択
メインステージに戻り、新しいレイヤーを作成します。
ライブラリに新しく作成したムービークリップシンボルを選択し、ステージ上の新しいレイヤーにドラッグします (図 48)
ムービークリップをステージにドラッグします。元のキャラクターが含まれている他のレイヤーをすべて削除します。これにより、タイムライン上には、キャラクターのアニメーションを含んだ 1 つのムービークリップシンボルと 1 つのレイヤーだけが残ります。作成できるシャドウには 2 つの種類があります。標準のドロップシャドウでは、キャラクターから少しずれた位置の背面に影ができます。このエフェクトは平面的な外観になりやすく、そのままでは、壁などの平らな表面に投影した影のように見えます。今回は地面にできるような影を作りたいので、これではあまり感心しません。もっとリアルなシャドウエフェクトを得るには、若干の手順を踏む必要があります。
ムービークリップインスタンスを複製し、元のインスタンスの背面に配置します (元のインスタンスと同じレイヤー上の背面に複製を配置しても、背面に新しいレイヤーを追加してそちらに複製をペーストしてもかまいません)
複製したインスタンスを選択し、プロパティインスペクタの [フィルタ] タブで、プラス (+) メニューから [ドロップシャドウ] を選択します (図 49)
強さのレベルを 45% 前後に調整し、[オブジェクトを隠す] を選択します。すると、ムービークリップオブジェクトは見えなくなりますが、ドロップシャドウフィルタのプロパティが表示されるので、必要に応じて調整してください。画質を低、中、または高に設定できる他に、ぼかしの量、カラー、および角度、また、元のグラフィックとぼかしエフェクトの間の距離を指定できます。
複製したムービークリップインスタンスにドロップシャドウフィルタを適用
元のオブジェクトを背面の平らな壁に投影しただけのような平面的な影にならないように、フィルタを適用したムービークリップインスタンスを自由変形ツールで傾斜させましょう
このテクニックをうまく適用するには、多少の試行錯誤が必要です。
地面にできた影のように見えるところまで、インスタンスをつぶして傾斜させてください (図 50)
場合によっては、インスタンスの位置も調整しないとそれらしく見えるようになりません。
自由変形ツールを使って、複製したムービークリップを変形
ムービーをプレビューし、エフェクトを実際に再生してみてください。
アニメーションをループさせ、他のいくつかのアニメーションループと組み合わせれば、図 51 のように本格的な視覚効果を得ることができます (再生には Flash Player 8 が必要です)
このコンテンツを視聴するには Flash が必要です。
ドロップシャドウフィルタを使用した 2
5D エフェクトの例
この例を見れば、ドロップシャドウエフェクトはアニメーションの立体感を演出する強力な手段になることがわかるでしょう
このアニメーションは、少年のキャラクターと犬のキャラクターそれぞれのアニメーションループを含んだ一連のムービークリップによって表現されています。筆者が今後執筆を予定している記事では、小さいアニメーションループを活用してムービーの表現力を大幅にアップする方法についても説明するつもりです。皆さんが Flash によるデザインとアニメーションのスキルを磨くうえで、この記事が参考になれば嬉しく思います。Flash でアニメーション制作に使えるテクニックとしては、この他にも、フルアニメーション ("フレームバイフレーム" と呼ばれる手法) およびシェイプトゥイーン、また、ビデオや 3D アニメーションプログラムからのイメージシーケンスの読み込みなどがあります。デザイナーやアニメータが作った強力なプラグインも数多くあり、Flash での制作作業工程を短縮するために役立ちます。そうしたテクニックやツールの活用に関する記事も発表していきますので、どうぞご期待ください。
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
たいらひでかづ氏
FlashによるWebコンテンツの開発と同様の方法で、WindowsやMacintoshで実行するネイティブアプリケーションを作成でき、Flashによるコンテンツ開発を経験されたことがある方ならどなたでも容易に開発することができます。本チュートリアルでは、FlashによるAIRアプリケーションの開発に必要な開発環境やAIRアプリケーション実行環境の準備、簡単なアプリケーションの作成から実行までの一連の流れをご紹介します。
Flashで作るAIRアプリケーションの開発の必要構成
この記事を読み進める前に、次のソフトウェアをインストールする必要があります。
実行環境・開発環境のインストール
AIRアプリケーション開発用のFlashドキュメントの作成
AIRファイルの作成
AIRアプリケーションのインストールと実行
実行環境・開発環境のインストール
AIRアプリケーションの開発を行うためには、実行環境および作成環境を用意する必要があります。まずは、実行環境となる Adobe AIR(英語版)をダウンロードしてインストールします。AIRベータ版をインストールしている場合は、アンインストールをしてから上記の動作を行ってください。ダウンロードしたAdobeAIRInstallerファイルをダブルクリックして、インストーラー画面の指示に従いインストールしてください。次に開発環境を準備します。アップデータを適用することで、機能が追加されます。
もし、上記のようになっていない場合は、[ヘルプ]メニューの[アップデータ
画面の指示に従い、アップデートを実行してください。ここまでが、AIR開発を行うための事前準備です。
準備ができたら早速、AIRアプリケーションを作成してみましょう
AIRアプリケーション開発用のFlashドキュメントの作成
fla」というファイル名をつけて、デスクトップに保存をします。まずは、ステージサイズの高さを200程度に設定してください。次に、ステージ上部に静止テキストで「Adobe AIRの世界へ、ようこそ」という文字列を入力します。また、その下部にダイナミックテキストを追加して、インスタンス名を"time_txt"とします。
(フォントサイズを大きめにしましょう
次に、1フレーム目を選択してアクションパネルを開き、以下のコードを入力します。
それでは、ムービープレビューを行ってみましょう
以下のようなアプリケーションが実行されます。プレビュー中のアプリケーションは、確認が終わったら、ウィンドウ右上の[×]ボタンをクリックして閉じてください。
AIRファイルの作成
それでは次に、このアプリケーションを配布できるように設定を行い、AIRファイルへの書き出しを行います。[コマンド]メニューの [AIR - アプリケーションとインストーラーの設定]を選択します。以下、設定内容を説明します。
アプリケーションの実行ファイルのファイル名
初期状態では、FLAファイルにつけたファイル名が表示されますが、自由に変更できます。ただし、使用できる文字はASCIIキャラクターのみで、ファイル名の最後にピリオドを使用することはできません。
ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示される名前
初期状態では、FLAファイルにつけたファイル名が表示されますが、自由に変更できます。なお、文字の使用に制限はありません。
作成したアプリケーションに割り振る固有のID
初期状態では、Flash自動でIDを割り振りますが、自由に変更できます。
IDに使用できる文字は、英数字と「ドット(アプリケーションのバージョンを指定します。ユーザーがアプリケーションをインストールする際に、インストールウィンドウに表示されるアプリケーションの説明文を指定することができます。この情報はWindowsにインストールされたアプリケーションには使用されません。アプリケーション実行時の、使用するウィンドウスタイルを指定します。[システムクローム] 標準ウィンドウで表示します。[カスタムクローム(不透明)] OSの標準ウィンドウ枠を非表示にします。[カスタムクローム(透明)] ページに透過情報を追加します。
アプリケーションのアイコンに使用する画像を選択(初期状態では、Adobe AIRのロゴが使用されます)
[アイコン画像を選択]ボタンをクリックすると、「アイコン画像」ダイアログボックスが開き、各サイズで使用する画像を指定します。このアイコンに使用できる画像の形式はPNGのみです。また、画像ファイルは、アプリケーションのフォルダ内に置く必要があります。作成したファイルタイプの関連づけ、初期ウィンドウサイズ、インストール先フォルダなどを指定します。]ボタンをクリックして、開かれる「詳細設定」ダイアログボックスで設定を行います。自分で定義したアプリケーション記述ファイルを使用する場合にチェックを入れて、そのファイルを指定します。電子証明書を指定します。AIRアプリケーションでは書き出しにはこの設定が必要です。
作成したAIRアプリケーションの保存先を指定
初期状態では、FLAファイルを保存したディレクトリとなっており、右側の「フォルダと虫眼鏡の図」のアイコンのボタンをクリックして任意の場所を指定することができます。
含まれるファイル:
AIRファイルに含めるアセットファイルなどを指定することができます。初期状態では、アプリケーション本体であるSWFファイルと、アプリケーションの設定を行うアプリケーション記述ファイル(XML)が含まれます。最終出力の前に、AIRアプリケーションの作成には、電子署名を使用しますので、その設定も行います。※電子署名は、アプリケーションの作成後にコードの変更が行われていないことや、コードが破損していないことを保証するためのものです。AIRアプリケーションを配布し、ほかのユーザーが利用できるようにするには、必ずこの電子署名が必要となります。この電子署名には、商用の証明書だけでなく、アプリケーション制作者自身が発行する自己証明書を使用することができます。なお、後で電子証明書を追加するという前提で一時的に署名なしでアプリケーションファイルを作成することもできます。以下の手順で電子署名を設定します。
※電子証明書は、Acrobatなどで使用されている電子署名ファイル(拡張子
商用の証明書を使用するには、[参照
]ボタンをクリックして証明書を選び、パスワードを入力して[OK]ボタンをクリックします。
自己証明書を作成するには、[作成
]ボタンをクリックして「自己署名の電子証明書を作成」ダイアログボックスを開き、各項目を入力します。「種類:」ではセキュリティのレベルを設定します。
ここでは、新規に電子証明書を作成してみましょう
「電子署名:」の右側の[設定
]ボタンをクリックします。
開かれた「電子署名」ダイアログボックスで、[作成
]ボタンをクリックします。「自己署名の電子証明書を作成」ダイアログボックスで、電子証明書の内容を入力し[OK]ボタンをクリックします。[OK]ボタンをクリックしたときに、以下のような画面が表示されれば電子証明書の作成は完了です。ここで[OK]ボタンをクリックして、「電子署名」ダイアログボックスに戻ります。「電子署名」ダイアログボックスに戻ったら、「証明書:」のところで、先に作成した電子証明書が選択されていることを確認してください。また、「パスワード:」のところに、先の電子証明書の作成時に指定したパスワードを入力します。パスワードを記憶させておきたいときは、「このセッションのパスワードを保存」のチェックボックスをオンにします。最後に[OK]ボタンをクリックします。最後に「AIR - アプリケーションとインストーラの設定」ウィンドウに戻り、ウィンドウ下部の[パブリッシュ]ボタンをクリックします。以下のように表示されれば、AIRファイルの作成が完了です。
デフォルトでは、FLAファイルを保存したディレクトリ(今回はデスクトップ)にAIRファイル(AIRアプリケーションのインストールと実行
(※インストールには、使用しているコンピューターの管理者権限が必要です)
airをダブルクリックすると、AIRのインストーラーが起動します。インストーラーの指示に従って、AIRアプリケーションのインストールを行います。インストール完了後、アプリケーションが自動的に実行されます。また、このAIRアプリケーションをアンインストールする場合は、OSのアンインストール機能(Windows Vistaの場合は、コントロールパネルの「プログラムと機能」)から行うことができます。
もっと学ぶには
Flashの基本しっかりとおさえたい方にオススメのトレーニングコースです。基本となる制作方法や、環境設定、アニーション、ユーザーインターフェース、画像の挿入、テキスト、ナビゲーション、サウンド、ビデオなど、Flashコンテンツの制作に欠かせない要素を多数ご説明します。このコースでは、操作方法の習得だけでなく、Flash制作における概念知識もしっかりとマスターすることができ、実務の活用にも結びつけることができます。Flashの基礎はマスターされた方で、ActionScriptを初歩から習得したい方はこちらのトレーニングコースがおすすめです。ActionScriptの用語の説明や書き方などの基礎的な部分から、実践で使えるスクリプトまで、ハンズオン形式で習得します。さらに上級のActionScriptを習得されたい方におすすめのトレーニングコースはこちらです。Flashコンテンツの制作をおこなう上で必須となる知識を、総合的に学習できます。0の基本的な概念をより深く理解することにより、表現の幅はぐっと広がり、さまざまなFlashコンテンツを作れるようになります。
著者について
たいらひでかづ氏
m-School(エムスクール)は、プロフェッショナルのためのアドビ認定トレーニングセンターです。“あなたが今、必要とするスキル”が即座にマスターできる、短期集中の講座を多数ご用意しています。法人研修や出張講座の実績も多数あり、すぐに業務で活用できるノウハウをご提供しています。運営は、教育関連事業で90年の実績がある学校法人駿河台学園(駿台予備学校)グループの、エスエイティーティー株式会社が行っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
~コンポーネントやライブラリを利用する~ | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
エリア情報を取得する。エリア情報を表示する。ジャンル・予算情報を取得・表示する。検索ボタンを作成する。検索結果を表示する。サムネイルのロールオーバーを設定する。表示効果をつける。
印刷用に表示
~コンポーネントやライブラリを利用する~
前回はウィンドウの見た目をカスタマイズし、店舗情報を別ウィンドウに表示させる手順をご紹介しました。しかし、このままでは、幹事さんが「居酒屋」で予算は「3500円ぐらい」のお店を探そうと思ったら、サムネイルを1つずつクリックしなくてはなりません。
これでは、幹事さんが大変
そこで今回は、検索機能を追加し、条件を絞って店舗情報を探せるようにする手順をご紹介します。
(これで、幹事さんも一安心でしょう
)さらに、見た目をかっこよくするための表示効果を加えて、アプリケーションをいったん完成させます。
著者について
m-School(エムスクール)は、プロフェッショナルのためのアドビ認定トレーニングセンターです。“あなたが今、必要とするスキル”が即座にマスターできる、短期集中の講座を多数ご用意しています。法人研修や出張講座の実績も多数あり、すぐに業務で活用できるノウハウをご提供しています。運営は、教育関連事業で90年の実績がある学校法人駿河台学園(駿台予備学校)グループの、エスエイティーティー株式会社が行っています。
現在、株式会社リクルートの実証・研究機関であるメディアテクノロジーラボにて研究員として活動中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
アプリケーションの実行
AIRファイルへの書き出し
はじめてのMXMLアプリケーション
デザインモードでレイアウトを行う。Panelコンポーネントを配置します。配置したPanelコンポーネントを選択し、以下のプロパティを設定します。以下のような見た目になります。左側のDataGridコンポーネントには、ホットペッパーWebサービスのグルメサーチAPIから取得した店舗の一覧を表示させたいと思います。そして、右側のPanelには、DataGridでユーザーが選択した店舗の詳細情報を表示させたいと思います。続けて、Panelコンポーネント内部に表示する店舗の詳細情報を表示させる部分を作成していきます。以下のコンポーネントを順番にPanelコンポーネントにドラッグ&ドロップして、それぞれプロパティ値を設定してください。
[コントロール] Textコンポーネント(※同じものを続けて3つ配置します)
水平方向の位置揃え:
垂直方向の位置揃え:
詳細ページへ
以下のような画面になります。
では実行してみましょう
ウインドウ全体の領域が小さいようですね
少し調整をしましょう
Flex Builderのデザインモード画面に戻り、エディタビューの外側の灰色の部分をマウスで選択します。Flexプロパティビューで以下の値を設定します。それでは実行してみてください。画面全体が見えるようになりました。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
たいらひでかづ氏
いよいよ本連載も最終回となりました。今回は二部構成でお送りします。第二部では、第一部と同様のAIRアプリケーションをFlexでイチから作成する方法を、基本的なFlexのシンタックスを解説しながらご紹介いたします。画像をクリックしてください。インストールが開始されます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
このたびリリースされたFlash Player 10には、ダイナミックに生成されたサウンドを再生するための新機能が含まれています。ダイナミックサウンド生成機能が実装されたことにより、これからは読み込んだサウンドデータの修正(およびその修正済みサウンドの再生)が可能になります。また、MP3ファイルを読み込まなくても、サウンドデータを生成したり、生成されたデータに基づくサウンドを再生することができます。この記事では、Flash Playerでダイナミックに生成されたサウンドの活用例として、2つのサンプルアプリケーションを紹介します。
このアプリケーションは、読み込み済みのMP3ファイルのサウンドデータをバイト配列として読み取り、そして、そこからサウンドサンプルを除去(これにより、ピッチがより高い位置にシフト)することで、出力データを加工します(図1参照)
このコンテンツを視聴するには Flash が必要です。メモ:ご利用のコンピュータスピーカの音量がミュートされていないことを確認してください。2つ目のサンプルアプリケーション、DynamicSoundSample2は任意のテキストを国際モールス符号として再生するためのオーディオを生成します。このアプリケーションは、オーディオ波形をバイト配列に保管されるサウンドサンプルとして生成します。
サウンドオブジェクトはこのバイト配列を利用してオーディオを生成します(図2参照)
(ここでも、ご利用のコンピュータスピーカの音量がミュートされていないことを確認してください。) 「Play」ボタンをクリックすると、入力したテキストがモールス符号に変換された後、再生されます。このコンテンツを視聴するには Flash が必要です。この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。サンプルファイルのフォルダには、次のファイルが含まれています。
mp3: 1つ目のサンプルアプリケーションで使用するソースMP3オーディオ
この記事に必要な予備知識
Flashを使用した一般的なアプリケーション構築経験を有することが推奨されます。
ダイナミックサウンド生成の基本
sampleDataイベントのイベントハンドラ側では、このSoundオブジェクトのオーディオバッファに追加するサウンドサンプルを供給することができます。サウンドサンプルの供給は、1組の浮動小数点数が2,048~8,192個含まれたバイト配列を作成することで行います。
浮動小数点数のペアはその1組ずつが単一のオーディオサンプルを表し、片方の値がサンプルの左チャンネルの振幅(-1
0の値)、もう一方が右チャンネルの振幅をそれぞれ表します。そして、このデータがSoundオブジェクトのオーディオバッファに追加されます。このメソッドは、既にMP3ファイルが読み込まれた状態のSoundオブジェクトからサウンドデータを抽出することを可能にします。ユーザは、この抽出されたデータを加工(サウンドサンプルを調整・追加・除去するなど)し、ダイナミックに生成されたデータを扱う、他のSoundオブジェクトのデータとして利用することができます。そして、オーディオのピッチをシフトするためのデータ加工を行った後、2つ目のSoundオブジェクト(およびsoundSampleイベント)を利用して加工後のデータを再生します。
インターフェイスの定義
アプリケーションのユーザインターフェイスは、この2つのコンポーネントによって構成されます。0アプリケーションのドキュメントクラスは、MovieClipクラスを継承するクラスであり、アプリケーションの最上位レベルの機能性を定義します。Flash CS4では、「パブリッシュ設定」ダイアログボックス上で、SWFアプリケーションのドキュメントクラスを設定することができます。
(ファイル/パブリッシュ設定を選択し、「Flash」タブの「スクリプト」ドロップダウンメニューのそばにある「設定」ボタンをクリック
asファイルに定義されています。このクラスのコンストラクタ関数は、アプリケーションにソースMP3ファイルを読み込むとともに、Buttonコンポーネントのイベントハンドラを定義します。
ピッチをシフトしたサウンドの再生
このメソッドは、あらかじめボタンのラベルを調整してからイベントリスナを調整することで、ボタンが「Stop」ボタンとしても機能するようにします。この部分のコードは次の通りです。この際、オブジェクトにはMP3データが読み込まれていないため、当該オブジェクトはサウンドサンプルデータをリクエストするためにsoundSampleイベントを発します。この処理は、以下の要領で行われます。この操作によって、sampleDataイベントによってディスパッチされるSoundオブジェクトの出力バッファにバイトデータが追加されます。shiftBytes()メソッドは、サウンドデータが含まれたバイト配列をパラメータとして受け付けます。このメソッドは、所定のピッチシフト係数(pitchShiftFactorプロパティの値)に適合するようにサウンドサンプル(各サンプルは2つの浮動小数点数によって表現)が除去された、加工後のバイト配列を返します。
例えば、ピッチシフト係数が2
0に設定され、1つおきにサウンドサンプルが除去されます。
ピッチシフト係数が1
0に設定され、2つおきにサウンドサンプルが除去されます。
また、ピッチシフト係数が1
0に設定され、3つおきにサウンドサンプルが除去されます。サウンドのピッチ(周波数)はサンプルが除去されることで、より高い位置へとシフトします。
サウンドの停止
これでサウンドが停止されます。
インターフェイスの定義
アプリケーションのユーザインターフェイスは、この2つのコンポーネントによって構成されます。0アプリケーションのドキュメントクラスは、MovieClipクラスを継承するクラスであり、アプリケーションの最上位レベルの機能性を定義します。Flash CS4では、「パブリッシュ設定」ダイアログボックス上で、SWFアプリケーションのドキュメントクラスを設定することができます。
(ファイル/パブリッシュ設定を選択し、「Flash」タブの「スクリプト」ドロップダウンメニューのそばにある「設定」ボタンをクリック
asファイルに定義されています。このクラスのコンストラクタ関数は、Buttonコンポーネントのイベントハンドラを定義します。また、MorseCodeオブジェクトのインスタンス化もこのコンストラクタ関数によって行われます。
モールス符号オーディオの生成と再生
このメソッドは、あらかじめボタンのラベルを調整してからイベントリスナを調整することで、ボタンが「Stop」ボタンとしても機能するようにします。これによって、入力された文字列がモールス符号として再生されます。」「–」および空白文字の組み合わせに変換されます。この変換処理は、codesという名のスタティック配列のテーブルを参照することで行われます。この部分のコードは次の通りです。codes配列は各文字に対して、それぞれに対応するモールス符号をマップします。–"として定義されます。この正弦波は、Soundオブジェクトのサウンドサンプルとして使用される際、純音で表現されます。各サウンドサンプルは、1つは左チャンネル用、もう1つは右チャンネル用の2つの浮動小数点数で表されます。このSoundオブジェクトはオーディオデータをリクエストするために、このイベントをディスパッチします。
(各サンプルは2つの4バイト浮動小数点数で構成
メモ:十分なサンプルデータを供給しない限り、サウンドバッファが空になり次第、サウンド再生が停止します。
サウンドの停止