2005年 03月 18日
文字を順に表示するアニメーション・ムービーを制作しよう! |
Adobe Illustrator(Ver. 9以降)から備わったSWFファイルの書き出し機能を使って、アニメーション・ムービーをたのしみましょう。
まずは、完成品をごらんください。
セミナーでも、ぼくは、ときどきオマケでやったりします(笑)。みなさん、目の色を変えて喜ばれます。
細かいコントロールはMacromedia Flashにかないませんが、簡単にたのしむ分には、うれしい機能だと思っています。
Adobe Illustrator起動、この場合だと、ファイル/[新規...](Mac: コマンド+N, Win: Ctrl+N)でサイズ:468×60pxのバナーサイズを選択しました。どんなサイズでもかまいません。
(1)文字ツール(T)でテキストを入力、適宜着色。
(2)[文字]/[アウトラインを作成]Mac: コマンド+shift+O, Win: Ctrl+Shift+O(outlineの「オー」)。
(3)レイヤーパレットのレイヤーを展開。(右向き三角をクリック、下向き▼にします)
(4)<グループ>のレイヤーを選択、レイヤーパレット右上の丸三角のパレットオプションメニューから[レイヤーに分配(ビルド)]を選択。
<グループ>レイヤーが分配されて左記のようになります。下のレイヤーから1文字ずつ増えるサムネールが表示されていたら成功です。
【解説】(お急ぎの方は、解説をスキップして次(5)項目へどうぞ)
このレイヤーをMacromedia Flashでいうフレーム(コマ)に変換することで、Flashムービーをつくることになります。ちなみにMac: optionキー, Win: Altキーを押したまま、各レイヤーの目のアイコンを下から順に上へダブルクリックしていってみてください。それだけで、手動ですが、十分アニメーションを実現できていることに気づかれるでしょう。
余談ですが、Adobe Photoshopでも、レイヤーのこの目のアイコンを使って、同じように簡単なアニメを疑似体験できます。そして、このことをさらに発展させていったのが、Adobe ImageReadyだということは、容易に推察していただけると思います。こんなことも知らないでいるよりは知っているといいと思います。
では、いよいよ、おたのしみのアニメーション・ムービーとして書き出しましょう。
(5)[ファイル]/[データ書き出し...]から、Mac: フォーマット,
Win: 形式(?不確かです)で、Macromedia Flash(swf)を選択。
(6)すると、左記のようなダイアログボックスが出てきます。
(7)ここでのポイントは書き出し形式で左記のように[AIレイヤーをSWFフレームに変換]を選択することです。そして、左記ではしていませんが、多くのみなさんは、[HTMLを生成]のチェックも入れておかれるといいでしょう。
フレームレート以降の項目に関しては、自由にチェック入れたり外したりして、どのように変わるのかを試行錯誤していただければいいです。
(8)これで保存先にファイルが出来ています。
(9) HTML(拡張子.html)ファイルはインターネットブラウザで、SWF(拡張子.swf)ファイルはフラッシュ・プレイヤーでブラウズ、アニメーション・FLASHを確認できます。
ループ処理にチェックを入れていたら、何度もアニメを繰り返します。
ここでは、一度表示したら終了としました。ブラウザの更新ボタンを押すか、Mac: コマンド+R, Win: Ctrl+Rで再生をたのしめます。
あと、あまり知られていなかったり、使われていなかったりしますが、ムービーの上でWin: 右クリック、Mac: controlキーを押しながらクリックしてコンテクスト(コンテキスト)・メニューを表示して再生を選んでも可能です。その際、拡大を選択してみるのたのしんでみてください。
下の二つは、メニューを出さないようにMacromedia Dreamweaver上でパラメータmenu/false処理しています。
完成品は、さらにMacromedia Dreamweaverを使って、加工しています。
みなさんの完成品は、いちばん上一行だけがブラウズできている状態です。
真ん中のものは、Macromedia Dreamweaver上でswfファイルを読み込み、背景に着色しています。Adobe Illustrator上で、背景を着色することもできますが、たいへんな作業を強いられます。
下のゆっくりとした動きは、[書き出しオプション]のフレームレートを「4フレーム/秒」等に小さい数値にすることで実現させています。
これでも短くしたつもりですが今回はずいぶん長くなってしまいました。ごめんなさい。
でも、たのしさとよろこびを手にするためにも、果敢にアタック!学習してください。
まずは、完成品をごらんください。
セミナーでも、ぼくは、ときどきオマケでやったりします(笑)。みなさん、目の色を変えて喜ばれます。
細かいコントロールはMacromedia Flashにかないませんが、簡単にたのしむ分には、うれしい機能だと思っています。
Adobe Illustrator起動、この場合だと、ファイル/[新規...](Mac: コマンド+N, Win: Ctrl+N)でサイズ:468×60pxのバナーサイズを選択しました。どんなサイズでもかまいません。
(1)文字ツール(T)でテキストを入力、適宜着色。
(2)[文字]/[アウトラインを作成]Mac: コマンド+shift+O, Win: Ctrl+Shift+O(outlineの「オー」)。
(3)レイヤーパレットのレイヤーを展開。(右向き三角をクリック、下向き▼にします)
(4)<グループ>のレイヤーを選択、レイヤーパレット右上の丸三角のパレットオプションメニューから[レイヤーに分配(ビルド)]を選択。
<グループ>レイヤーが分配されて左記のようになります。下のレイヤーから1文字ずつ増えるサムネールが表示されていたら成功です。
【解説】(お急ぎの方は、解説をスキップして次(5)項目へどうぞ)
このレイヤーをMacromedia Flashでいうフレーム(コマ)に変換することで、Flashムービーをつくることになります。ちなみにMac: optionキー, Win: Altキーを押したまま、各レイヤーの目のアイコンを下から順に上へダブルクリックしていってみてください。それだけで、手動ですが、十分アニメーションを実現できていることに気づかれるでしょう。
余談ですが、Adobe Photoshopでも、レイヤーのこの目のアイコンを使って、同じように簡単なアニメを疑似体験できます。そして、このことをさらに発展させていったのが、Adobe ImageReadyだということは、容易に推察していただけると思います。こんなことも知らないでいるよりは知っているといいと思います。
では、いよいよ、おたのしみのアニメーション・ムービーとして書き出しましょう。
(5)[ファイル]/[データ書き出し...]から、Mac: フォーマット,
Win: 形式(?不確かです)で、Macromedia Flash(swf)を選択。
(6)すると、左記のようなダイアログボックスが出てきます。
(7)ここでのポイントは書き出し形式で左記のように[AIレイヤーをSWFフレームに変換]を選択することです。そして、左記ではしていませんが、多くのみなさんは、[HTMLを生成]のチェックも入れておかれるといいでしょう。
フレームレート以降の項目に関しては、自由にチェック入れたり外したりして、どのように変わるのかを試行錯誤していただければいいです。
(8)これで保存先にファイルが出来ています。
(9) HTML(拡張子.html)ファイルはインターネットブラウザで、SWF(拡張子.swf)ファイルはフラッシュ・プレイヤーでブラウズ、アニメーション・FLASHを確認できます。
ループ処理にチェックを入れていたら、何度もアニメを繰り返します。
ここでは、一度表示したら終了としました。ブラウザの更新ボタンを押すか、Mac: コマンド+R, Win: Ctrl+Rで再生をたのしめます。
あと、あまり知られていなかったり、使われていなかったりしますが、ムービーの上でWin: 右クリック、Mac: controlキーを押しながらクリックしてコンテクスト(コンテキスト)・メニューを表示して再生を選んでも可能です。その際、拡大を選択してみるのたのしんでみてください。
下の二つは、メニューを出さないようにMacromedia Dreamweaver上でパラメータmenu/false処理しています。
完成品は、さらにMacromedia Dreamweaverを使って、加工しています。
みなさんの完成品は、いちばん上一行だけがブラウズできている状態です。
真ん中のものは、Macromedia Dreamweaver上でswfファイルを読み込み、背景に着色しています。Adobe Illustrator上で、背景を着色することもできますが、たいへんな作業を強いられます。
下のゆっくりとした動きは、[書き出しオプション]のフレームレートを「4フレーム/秒」等に小さい数値にすることで実現させています。
これでも短くしたつもりですが今回はずいぶん長くなってしまいました。ごめんなさい。
でも、たのしさとよろこびを手にするためにも、果敢にアタック!学習してください。
by hagetaka0
| 2005-03-18 13:11
| AI-->Flash SWF