Flash Professional入門 第1回:様々なシーンで活用できるFlashコンテンツ

連載

Flash Professional入門

本連載では、Flash Professional CS6を使ってアニメーションを作成するための基礎知識を解説していきます。

ア ニメーションの作成方法を解説していく前に、まずはFlash Professional CS6で作成したアニメーションをどのように利用できるのか紹介しましょう。Flash Professional CS6で作成したコンテンツは、Flashムービー以外の形式でも書き出すことができ、デバイスを問わず、様々なシーンで活用できます。

Flash Professional CC の体験版をダウンロード サンプルファイルをダウンロード

図1 Flash Professional CS6で作成したコンテンツは、様々なシーンで活用できます

【Flash Professional CS6から書き出せるコンテンツ形式】

コンテンツを作成する際は、最終的に書き出すコンテンツ形式に合わせて「新規ドキュメントの作成」と「書き出しの設定・操作」を行う必要があります。

新規ドキュメント作成とパブリッシュ

新規ドキュメントを作成するには、[ファイル]メニュー→[新規…]を選びます。すると、図2のように[新規ドキュメント]ダイアログボックスが開きます。6種類のドキュメントが用意されており、ここから書き出すコンテンツ形式に合わせて選びます。

図2 [新規ドキュメント]ダイアログボックス。書き出すコンテンツ形式に合わせて、ドキュメントを選びます

続いて、「書き出しの設定・操作」についてです。Flash Professionalでは、書き出す操作のことを「パブリッシュ」と呼びます。[ファイル]メニュー→[パブリッシュ設定…]を選ぶと、[パブ リッシュ設定]ダイアログボックスが表示されます。「Flashムービー」や「アプリケーション」としてパブリッシュする場合は、このダイアログボックス でどのようにパブリッシュするかを設定します。

図3 [パブリッシュ設定]ダイアログボックス

ここで主に設定するのは、[ターゲット](再生環境)と[スクリプト](使用するActionScriptのバージョン)です。

図4 [ターゲット]と[スクリプト]に用意されている項目

※[パブリッシュ設定]ダイアログボックスは、[プロパティ]パネルから開くこともできます。また、[プロパティ]パネルで[ターゲット]と[スクリプト]を変更できます。

※パブリッシュの設定は、一度設定したあとでも、パブリッシュ時に任意の形式に再設定してから書き出すことが可能です。

パブリッシュを行うには、[ファイル]メニュー→[パブリッシュ]を選ぶか、[パブリッシュ設定]ダイアログボックス内の[パブリッシュ]ボタンを押します。

図5 [ファイル]メニュー→[パブリッシュ]を選びます

「HTML5コンテンツ」「動画ファイル」「画像ファイル」としてパブリッシュする場合は、上記とは異なる操作が必要です。詳細は後述します。それでは、各コンテンツ形式にパブリッシュする際の設定や操作について見ていきましょう。

Flashムービーとしてパブリッシュする

PCブラウザー向けにパブリッシュする

Flashムービーは、ブラウザーに「Flash Player」が組み込まれている環境で再生できます。PCブラウザー向けのアニメーションを作成する際は、この形式を選択します。以下は、一般的なFlashムービーとして作成・パブリッシュする際の設定です。

図6 PCブラウザー向けFlash ムービーとしてパブリッシュする場合の設定と、書き出されたファイルの例

ドキュメント作成時 [ActionScript 3.0]を選択 ターゲット 最新バージョンのFlash Playerを選択 スクリプト [ActionScript 3.0]を選択 パブリッシュ操作 [ファイル]メニュー→[パブリッシュ]

※ActionScriptとは、Flashのコンテンツを操作するためのスクリプト言語です。2012年11月現在での最新バージョンは「ActionScript3.0」ですが、そのひとつ前の「ActionScript2.0」を利用することもできます。

携帯電話(ガラケー)向けにパブリッシュする

従来の携帯電話(いわゆるガラケー)の多くには、「Flash Lite」機能が搭載されており、専用のブラウザー上や待ち受け画面にFlashムービーを表示することができます。

た だし、携帯電話(ガラケー)向けのFlashムービー作成に使用できるActionScriptには制限があります。そのため、携帯電話(ガラケー)用の 設定が必要となります。以下は、携帯電話(ガラケー)向けのFlashムービーとして作成・パブリッシュする際の設定です。

図7 携帯電話(ガラケー)向けFlash ムービーとしてパブリッシュする場合の設定と、書き出されたファイルの例

ドキュメント作成時 [Flash Lite 4]を選択 ターゲット Flash Lite1.0~4.0を選択 スクリプト ターゲットに応じたバージョンを選択 パブリッシュ操作 [ファイル]メニュー→[パブリッシュ]

HTML5コンテンツとしてパブリッシュする

モバイルデバイス(スマートフォンやタブレット)の多くには、Flash Playerが組み込まれていないため、Flashムービーを再生できません。しかし、Flash Professional CS6からは、「Toolkit for CreateJS」拡張機能を使って、モバイルデバイスでも再生できるHTML5コンテンツとしてパブリッシュすることができるようになりました。

[ウィンドウ]メニュー→[Toolkit for CreateJS]を選ぶと、[Toolkit for CreateJS]パネルが表示されるので、このパネルから設定・パブリッシュを行います。

図8 HTML5コンテンツとしてパブリッシュする場合の設定と、書き出されたファイルの例

ドキュメント作成時 [ActionScript 3.0]を選択 ターゲット 特に指定の必要なし スクリプト 特に指定の必要なし パブリッシュ操作 [Toolkit for CreateJS]メニュー→[パブリッシュ]

※「Toolkit for CreateJS」拡張機能は別途インストールする必要があります。Toolkit for CreateJS関連のメニューやパネルが見当たらない場合は、[ヘルプ]メニュー→[アップデート]を選択し、Flash Professionalをアップデートするとインストールされます。

動画ファイルとして書き出す

AVIやMOVなど、いわゆる動画ファイル形式でパブリッシュすることができます。動画ファイルとして書き出すには、[ファイル]メニュー→[書き出 し]→[ムービーの書き出し…]を選択し、表示されるダイアログボックスの[フォーマット]で[Windows AVI(*.avi)][QuickTime(*.mov)]などの動画ファイル形式を選択します。なお、AVIを選択できるのは、Windows版のみ です。

図9 動画ファイルとして書き出す場合の設定と、書き出されたファイルの例

ドキュメント作成時 [ActionScript 3.0]を選択 ターゲット 特に指定の必要なし スクリプト 特に指定の必要なし パブリッシュ操作 [ファイル]メニュー→[書き出し]→[ムービーの書き出し…]。表示されるダイアログボックスの[フォーマット]で[Windows AVI(*.avi)][QuickTime(*.mov)]を選択

画像として書き出す

任意のフレームを画像形式で書き出す

任意の位置のアニメーションを、JPEG/GIF/PNGといった画像ファイル形式で書き出すことができます。画像として書き出すには、タイムラインのマーカーを書き出したい位置に移動し、[ファイル]メニュー→[書き出し]→[イメージの書き出し…]を選択します。

図10 画像ファイルとして書き出す場合の設定と、書き出されたファイルの例

ドキュメント作成時 [ActionScript 3.0]を選択 ターゲット 特に指定の必要なし スクリプト 特に指定の必要なし パブリッシュ操作 [ファイル]メニュー→[書き出し]→[イメージの書き出し…]。表示されるダイアログボックスの[フォーマット]で、任意の画像ファイル形式を選択

アニメーション全体を連番画像として書き出す

アニメーション全体を、PNG形式の連番画像(PNGシーケンス)としてパブリッ シュすることができます。PNGシーケンスとしてパブリッシュするには、[ファイル]メニュー→[書き出し]→[ムービーの書き出し…]を選択し、表 示されるダイアログボックスの[フォーマット]で[PNG シーケンス(*.png)]を選択します。

また、任意のムービークリップインスタンスのみを書き出したい場合には、そのインスタンス上で右クリックし、コンテキストメニューから[PNGシーケンスを書き出し…]を選択します。

図11 PNGシーケンスとして書き出す場合の設定と、書き出されたファイルの例

ドキュメント作成時 [ActionScript 3.0]を選択 ターゲット 特に指定の必要なし スクリプト 特に指定の必要なし パブリッシュ操作 [ファイル]メニュー→[書き出し]→[ムービーの書き出し…]。表示されるダイアログボックスの[フォーマット]で[PNGシーケンス(*.png)]を選択。または、任意のインスタンス上で右クリック→[PNGシーケンスを書き出し…]を選択

スプラトシート形式で書き出す

スプライトシートとは、アニメーションの各コマのイメージを、1枚の画像内に連続して配置した画像 ファイルのことです。Flash Professional CS6では、任意のアニメーション(ムービークリップ)をスプライトシートとして書き出すことができます。また、スプライトシートから画像を切り取る際の 情報が記録されたファイルをセットで書き出せます。

スプライトシートとしてパブリッシュするには、インスタンス/[ライブラリ]パネル内のシンボルを選択後、右クリック→[スプライトシートを生成…]を選択すると表示される[スプライトシートを生成]ダイアログボックスで設定・書き出しを行います。

作成したスプライトシートは、ゲームコンテンツのマップチップや、キャラクターアニメーション用のファイルとして使用できます。

図12 スプライトシートとして書き出す場合の設定と、書き出されたファイルの例

ドキュメント作成時 [ActionScript 3.0]を選択 ターゲット 特に指定の必要なし スクリプト 特に指定の必要なし パブリッシュ操作 書き出し操作 書き出したいインスタンス/[ライブラリ]パネル内のシンボルを選択後、右クリック→[スプライトシートを生成…]を選択

アプリケーションとしてパブリッシュする

ActionScriptを使用し、インタラクションを持つコンテンツを、PCやモバイルデバイス(スマートフォンやタブレット)上で動作するアプリケー ションとしてパブリッシュすることができます。なお、プラットフォームに応じて、証明書ファイル/設定ファイル/アイコン用ファイルなどを指定する必要が あります。

ドキュメント作成時 [AIR][AIR for iOS][AIR for Android]のいずれかを選択 ターゲット 最新バージョンのFlash Playerを選択 スクリプト [ActionScript 3.0]を選択 パブリッシュ操作 [ファイル]メニュー→[パブリッシュ]

このように、Flash Professional CS6には多彩な書き出し方式が用意されており、作成したコンテンツを様々な環境で表示・活用することができます。