《#2》 あっという間にできるパラパラアニメ
Category : Lesson02
Digicon Magazine読者のみなさんこんにちは、ななきちです。
前回は、Flash上で描画したイラストをswf（Flashムービーファイル）として書き出し、ブラウザに表示する方法を勉強しました。
今回は、Flashで描画したものではなく、あらかじめ用意しておいた画像を使ってパラパラ漫画のようなアニメーションを制作してみます。
目次
- CS4へ外部データを読み込む
- Illustratorファイルを読み込む
- 画像ファイルを読み込む
- Flashタイムライン
- フレームアニメーションを作る
- ［プロパティ］パネルでスピードを調整する
- 今日のおまけ講座（タイムラインのボタン名称）
今日のサンプル
まず最初に、今日の完成図を見てみましょう。
（※動画とFlashムービーは仕上がりサイズが若干異なります）
サンプルデータをこちらからダウンロードして、スタートしましょう。
Flash CS4へ外部データを読み込む
前回は、ペンツールやブラシツールで、Flashのステージにイラストを描きました。今後紹介していくカラーパネルやフィルタ機能を使って、Flashだけで、さまざまなコンテンツやインターフェースを作っていくことができます。
でも、「絵を描くときはIllustratorを使うんだよね」、「手書きで描いたものをスキャナで読み込んでからPhotoshopで加工したいのに」という人も居ますよね。ご安心を。Flash CS4では、IllustratorやPhotoshopなど他のアプリケーションで制作したグラフィックやイラストを、読み込んで使用できます。外部データの読み込みさえ覚えれば、Flashに慣れていなくても、スピーディにデータの作成ができます。
Flash CS4に読み込み可能なファイルの種類は、多数あります。代表的なものでは、PSD（Photoshop）をはじめBMP、PICT、JPEG、GIF、PNG、TIFFなどの画像ファイル、Illustrator（.ai）やFreehandなどのベジェファイルがあります。Illustratorは、CS3やCS4などの新しい形式で保存してあるもののほうが、互換性が高いのが特徴です。特に、Flash CS4は、Adobe社のソフト同士で相性がよく、互換性も高くなっています。
今回は、Illustratorデータ（.ai）、画像データ（.jpg）の読み込みを行ってみましょう。外部データの読み込みは、［ファイル］メニューの［読み込み］を選択します。まず、新規Flashドキュメントを開いておき、以下の操作を一緒に試してみましょう。
Illustratorファイルを読み込む
まずはIllustrator（.ai）の読み込みから。［ファイル—読み込み—ステージへ読み込み］を選択し、読み込みたいIllustratorファイルを選択します。一緒に試したい場合は、サンプルデータの中に、イラストレーターファイル「kinoko_teacher.ai」が入っていますのでこれを使ってみてください。
［ファイル—読み込み—ステージへ読み込み］を選択
続いて表示されるファイルの選択ダイアログで、読み込むIllustrator（.ai）ファイルを選択します。
ファイル選択ダイアログ
下のように、［〈ファイル名〉をステージに読み込む］ダイアログが表示されます。ここでは、読み込みたいレイヤーのみ読み込むことが可能です。読み込むレイヤーにチェックを入れて、［OK］ボタンをクリックします。
読み込みオプションを設定し、［OK］ボタンをクリック
ステージ上にIllustratorで作成したデータが読み込まれました。
中央にイラストが表示された
画像ファイルを読み込む
次に、画像ファイル（.jpg）を読み込んでみましょう。
Illustratorと同じく、［ファイル—読み込み—ステージへ読み込み］を選択します。［読み込み］ボタンをクリックすると、ステージ上にビットマップ形式で読み込まれます。
ステージへ読み込み、ファイル選択ダイアログ
ビットマップ画像が読み込まれたステージ
Photoshopデータなど、レイヤーがあるビットマップファイルの場合は、Illustratorと同じく、読み込みオプションが表示されます。
このように、いろいろな素材を読み込むことが可能ですので、自分が得意とするアプリケーションでデータを作成し、動きのみFlashで作成するといったワークフローが可能です。 また、CS4からAfterEffectsの新フォーマットであるXFLでの書き出しで、コンポジジョンのレイヤー情報がFlashで読み込み可能になりました。これを使用することで、AfterEffectsの映像をより簡単にウェブ上で公開できます。この方法については後日、説明したいと思っています。
Flashのタイムライン
タイムラインは、Flashの時間軸を表すものです。Flashムービーの動きを作成するのに欠かせない役割をします。
パラパラ漫画で考えてみましょう。
タイムラインには、左端の1から順に、たくさんの「フレーム」が並んでいます。このフレーム1コマが、パラパラ漫画の1ページに当たります。フレームをたくさん用意して順番に進めていけば、アニメーションができあがるというわけです。
今回は、コマ撮りした写真（.jpgデータ）を使って、パラパラアニメーションを作ってみましょう。
これは、Flashのアニメーションのうち「フレームアニメーション」と言われるものです。もうひとつのトゥイーンアニメ—ションについても、近いうちに紹介します。
［タイムライン］パネルは、Flash CS4を起動したとき、ウィンドウの下部に表示されている細長いパネルです。
パネル内は、Adobe Premirere、After Effectsのタイムラインと似ているので、DigiCon読者の方には、そう、とっつきにくいものではないと思います。
［タイムライン］パネル
フレームアニメーションを作る
さて、先ほどレッスンを行った、外部読み込みの機能を使って、タイムライン上1コマ（1フレーム）に1枚ずつ画像を挿入していきたいと思います。
今回46枚のJPEGファイルを用意しました。これを先ほどのように1枚ずつ、読み込みを行うのはかなり大変ですよね。
そこで、一括読み込みをします。
Flashは外部ファイルの読み込みの際に、同一ディレクトリ（フォルダ）にあるデータのファイルネームが番号で終わっていて、番号が連続しているものを一括して読み込んで、ファイルネームの番号順で各フレームに読み込んでくれます。
ですので、読み込むファイル名は、
photo01.jpg、photo02.jpg、photo03.jpg……
と順番にして、同一ディレクトリにデータを置いておきます。
画像データが同一ディレクトリにある図
メニューバーから［ファイル—読み込み—ステージに読み込み］を選択して、フォルダ内の画像を１つ選択します。
フォルダ内の画像ファイルを１つ選択して［読み込み］
すると、図のようなメッセージダイアログが表示されます。
シーケンスの読み込みを行うかのダイアログ
このダイアログで［はい］を選ぶと連番がついたファイルが一気にタイムライン上に読み込まれます。選んだ番号以降のものが読み込まれますので、例えば「photo03.jpg」を選んだ場合は、「photo01.jpg」、「photo02.jpg」は読み込まれません。
（［いいえ］を選ぶと、選択したファイルのみが読み込まれます。）
タイムラインに読み込まれた画像が配置されている図
メニューバーから［ウィンドウ—ツールバー—制御パネル］を選択し［制御］パネルを表示し、再生ボタンを押すと、Flashドキュメント上で、タイムラインを再生してくれます。タイムライン再生のキーボードショートカットを使うなら、Enterキーを押します。
制御パネル
パブリッシュで、swfファイルとhtmlを書き出して、ブラウザを使って再生してみましょう。前回のように、ドキュメントを保存し、［パブリッシュ設定］ダイアログで［パブリッシュ］ボタンを押します。一度設定が終わっていれば［ファイル—パブリッシュ］で実行すると、すばやく操作できます。
ブラウザが開き、Flashムービーが再生されます
［プロパティ］パネルでスピードを調整する
上手に実行できましたか？
再生したムービーが、ものすごく速いスピードで動いていますよね？
これは、フレームレート（fps：frame per second = 1秒間に何フレーム再生するか）の設定がデフォルトのままで、24fpsになっているためです。映画やテレビ映像ならともかく、パラパラアニメのような場合、1秒に24枚の写真が再生されたら、ちょっとめまぐるしいですね。
この数値をもうすこし小さくしてあげれば、再生もゆっくりと再生されます。
ではフレームレートを変更しましょう。変更は、［プロパティ］パネルで行います。メニューバーから［ウィンドウ—プロパティ］を選択して［プロパティ］パネルを開きます。その際にステージ、タイムラインとも何かを選択していたら、ステージの外の、何もない部分をクリックして選択解除します。
［プロパティ］パネルには、フレームレートが表示されるので、数値を変更しましょう。
プロパティパネル
プロパティパネルでフレームレートを6fpsに変更
変更後、もう一度パブリッシュして再生情報を見てみましょう。数値を小さくすればゆっくりと、数値を大きくすれより速く再生することを確認しましょう。
また、出力したswfが実際の画像にくらべると右端がかけていたりしませんか？
これはFlashのステージサイズが550×400ピクセルになっており、swfファイル出力時にはこのサイズを基準にして書き出しが行われるためです。ステージサイズを修正したいですね。
このステージサイズも［プロパティ］パネルを使って変更できます。
［プロパティ］パネルのサイズ設定の［編集］ボタンをクリックすると［ドキュメントプロパティ］のダイアログ画面が開きます。
［プロパティ］パネルの［フレームレート］を変更
今回使用した写真のサイズは640×425ピクセルですので、直接数値を入れて変更することも可能ですし、「サイズを合わせる」の「内容」を選択することで、ステージ上に配置されている一番大きなサイズの、ドキュメント（画像）に合わせた画面サイズに変更されます。
［ドキュメントプロパティ］ダイアログ
この変更したうえ、ドキュメントを保存し、再度パブリッシュたムービーを再生してみましょう。fpsは6fps、ステージサイズは640×425ピクセルに変更しました。
適度な速度で、読み込んだドキュメントサイズにあったFlashムービーができあがったと思います。
今日のおまけ講座（タイムラインのボタン名称）
タイムラインのタイムラインを使い始めてしばらくすると、操作の悩むことも出てくるでしょう。そんなときにさまざまなボタン、機能が便利に思われてくるはずです。タイムラインパネルの各部の名称と機能を最後にまとめておきます。
- ［レイヤーを挿入］タイムラインにレイヤーを追加します。新規ドキュメントには、1レイヤーだけ用意されています。
- ［フォルダを作成］たくさんレイヤーを作った際には、フォルダを作り、効率よく管理できます。
- ［レイヤーを削除］選択したレイヤーを削除します。
- ［中央のフレーム］タイムラインが長くなったときや拡大表示されてすべて表示しきれないとき、再生ヘッドのあるフレームが、［タイムライン］パネルの中央に表示されるようにタイムラインの表示位置をスクロールします。
- ［オニオンスキンアウトライン］オンにすると、タイムラインに「オニオンスキンマーカー」が表示されてマーカーで選択した範囲のアニメーションの様子がコマ送りのような絵で表示できます。
- ［現在のフレーム］再生ヘッドがあるフレーム番号を表示します。
- ［フレームレート］ドキュメントに設定されている1秒当たりの再生フレーム数
- ［経過時間］再生ヘッドがある位置の経過時間
- ［レイヤーの表示／非表示］タイムラインの左側にはレイヤーがあり［レイヤーを挿入］でPhotoshopなどと同様レイヤーが作成でき、パーツ管理が行えます。［すべての～］のボタンでは、タイムラインの全レイヤーを表示したり、非表示にします。レイヤーごとの「・」をクリックしたときは、それぞれのレイヤーを表示／非表示にします。
- ［レイヤーをアウトラインで表示］レイヤー上のパーツをアウトライン表示に切り替えます。複雑な図形の確認をする際に、役立ちます。
- ［レイヤーのロック／ロック解除］レイヤー上のパーツをロックし、動かないようにします。
［にわとり助手による今回のまとめ］
今回は、Flashに外部ファイルを取り込んで、パラパラアニメを作りました。操作の要点をおさらいしておきます。
- 画像やイラストなどの外部ファイルを読み込むときは［ファイル—読み込み—ステージへ読み込み］を選択する。取り込まれたファイルはステージに表示されます。
- 連続したファイルをまとめて取り込むむときは［ファイル—読み込み—ステージへ読み込み］を選択し、連番で名前を付け、同じフォルダに保存しておいたファイルのうち、１つを選択すれば、シーケンスとして取り込みができます。
- Flashムービーの再生速度は、フレームレートで変更できます。［プロパティ］パネルの［フレームレート］で設定ができます。
- Flashムービーのできあがりサイズは、［ドキュメントプロパティ］の［サイズ］で設定ができます。
さて次回は「Flashといえばまずこれが作ってみたい！」「Flashやってみたけど、これでつまずいてしまいました。」という方が多い、ボタン機能の勉強をしましょう。
ではまた次回！
コメント