XFLフォーマットを利用したInDesignからFlashへの書き出し
Sorry, this page is not available
Sorry, this page is not available
You may wish to try one of the following links:
- 作成日:
- 19 Dec 2008
- ユーザレベル:
- 中級, 上級
- 製品:
- Flash CS4 以上
InDesign CS4 以上
InDesignのドキュメントをXFLファイル形式で書き出します。Flash Proffesionalでそれを開き、通常通り編集ができることを学びます。
必要条件
このチュートリアルのデモンストレーションと同じ操作を行うには下記のソフトウェアが必要です。
Adobe Flash Professional CS4
Adobe InDesign CS4
サンプルファイル
lrvid4093_fl.zip (ZIP, 84MB)
前提として必要な知識
InDesign CS4を用いたレイアウトとデザインの中級知識
XFLフォーマットを利用したInDesignからFlashへの書き出し
Adobe InDesign CS4を利用すれば、単なるプリント用ドキュメントのレイアウトのみでなく、インタラクティブなFlashドキュメント上でのレイアウトも可能となります。
XFLファイルフォーマットへ書き出し
FlashはXFLファイルをサポートします。レイアウト情報とアセットを含むアーカイブのファイル形式です。
- InDesignドキュメントを開きます。
- 「ファイル」 / 「書き出し」を選び、次にフォーマットで「Adobe Flash CS4 Pro(XFL)」を選択します。

図 1: 書き出しダイアログボックス
- ファイル名は2ページ目のみを書き出しするのでCheck_Magazine_Web_p2とします。
- 「保存」をクリックします。「Adobe Flash CS4 Professional(XFL)を書き出し」ダイアログボックスが表示されます。

図 2: 「Adobe Flash CS4 Professional(XFL)を書き出し」ダイアログボックス
- 「拡大・縮小」を100%で選択します。
- 「Adobe Flash CS4 Professional(XFL)を書き出」しダイアログボックスでは、コンテンツのサイズを指定したり、ある一定のpixelに収めたり、あるいは書き出したいファイルの幅と高さを指定したりすることができます。
- ページについては「すべて」を選ぶか、または「範囲」を指定することができます。ここでは「範囲」を2ページとして選択します。
- 「見開き印刷」にはチェックを入れ、「ページをラスタライズ」はチェックを外し、そして「透明を分割・統合」にはチェックマークを入れます。
- テキストをInDesignからFlashへ書き出しする場合、「InDesignテキストからFlashテキストへの書き出し」と、「InDesignテキストからベクトルパスへの書き出し」と「InDesignテキストからラスター画像への書き出し」があります。ここでは「InDesignテキストからFlashテキストへの書き出し」を選択します。
- 「OK」をクリックしてXFLファイルを書き出しします。
FlashでXFLファイルを開く
いったんInDesignドキュメントをXFLファイルとして書き出せば、Flashで開くことができます。
- Flashへ移動して、「ファイル」 / 「開く」と進み、開きたいXFL ファイルを選択し、開きます。
- 少しズームを調整して、全体をFlashで見れるようにします。「表示」 / 「表示比率」 / 「ウィンドウに合わせる」と進めます。

図 3: ウィンドウに合わせる
- ライブラリを開いてみると、InDesignで使われてきたビットマップのアセット(DataAddict)と共に、今書き出しされたムービクリップのページも確認できます。

図 4: 「ライブラリ」パネル
- XFLファイルからFlaファイルが生成されましたが、この時点ではまだ保存されていません。「ファイル」 / 「名前をつけて保存」を選択し、check-magazine.flaと設定し、「保存」ボタンをクリックします。
FLAファイルにインタタラクティビティを追加
いったんファイルをFlashに取り込んでしまえば、その後Flashが利用することのできるどんなインタタラクティビティも追加することができるようになります。
- ステージ上のムービークリップをダブルクリックしてタイムラインに入ります。
- ムービークリップを見ると、テキストはInDesignから書き出しされた状態でまだ編集可能であることがわかります。例えば画面左上のcover storyテキストをダブルクリックすれば、テキストを変更することができるようになります。
- 「選択」ツールを使い、Checkのテキストを選択し、「修正」 / 「シンボルに変換」を選択し、この要素からシンボルを作ります。
- 名前欄にはCheckと入力、種類欄ではムービークリップを選択してから、「OK」をクリックします。
ムービークリップにアニメーションを適用
- ムービークリップを選択し、「編集」 / 「カット」へと進み、layer 1から切り取ります。
- 新しいレイヤーを作成し、レイヤー名はcheckと名付けます。
- 「編集」/ 「同じ位置にペースト」と進み、このムービークリップを切り取ったのと同じ場所にペーストします。

図 5: 新しいレイヤーを作成
- ムービークリップに対してアニメーションのモーションプリセットを適用してみます。「ウィンドウ」 / 「モーションプリセット」へと進めます。
- デフォルトのプリセットを展開し、好みのプリセットを選びます。
シンボルが選択されていることを確認し適用をクリックします。
- 「モーションプリセット」パネルは閉じます。
- レイヤー1のタイムラインをチェックレイヤーに合わせて拡張しましょう。
タイムラインでフレームをクリックして、F5キーを押します。
- タイムラインをスクラブして、アニメーションを確認します。
ActionScriptの追加
さらにここへActionScriptを追加することもできます。
- 新しいレイヤーをcheckレイヤーの上に作成し、actionと名付けます。
- actionレイヤーの最後のフレームを選び、F7キーを押して空白のキーフレームを作成します。
- 「アクション」パネルを開きます。

図 6: 「アクション」パネル
- 最後のフレームでアニメーションが停止するように、「アクション」パネルに、stop actionを書き入れます。
- 入力が終わったら「アクション」パネルを閉じます。
- 「制御」 / 「ムービープレビュー」を選択しアニメーションを確認します。
その他のリンク

この記事は、Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenseのもと提供しています。
著者について
Sorry, this page is not available
Sorry, this page is not available
You may wish to try one of the following links: