Flash は元々はアニメーションツールとして、そして近年では他言語のプログラマーも参入してくるほどの高度なスクリプト表現ができる環境として、実にいろんなタイプのユーザーに使われているアプリケーションです。

Flash では、アニメーション、グラフィック、写真、映像、音楽、インタラクティブ、モーショングラフィック、ユーザーインターフェース、インフォメーションアーキテクト、プログラミング、物理表現、数学表現、ゲーム、ネタ、MAD、挙げていけばキリがないぐらいの表現が可能です。興味深いのは、ある一つジャンルをきっかけに Flash を始めた人がいろんな Flash サイトを見たり使ったりしていくうちに他のジャンルにも関心を持ち、デザイナー・プログラマーという枠にとらわれないクリエイターになっていくということです。

ActionScript 3.0 の登場により、やや難しくなったと噂されている Flash 。確かに RIA（リッチインターネットアプリケーション）に代表される大規模 Web アプリケーションの開発に携わる場合には相応のスキルが要求されるようになりました。ですが「自分が表現したいものを作るためのツール」としての Flash が損なわれてしまったわけではありません。「自分が作りたいものを、自分の力量に合わせて、自分の時間が許す限りで作ってみる」ための Flash も健在です。この連載ではそんな「創作ツールとしての Flash」の楽しみ方をお伝えできればと考えています。

---

四六時中 Flash のことを考えてみる

週末の趣味を Flash による作品制作と決めてしまえば、次はネタを探しましょう。Flash のことを考え続けていれば日常生活の中からでも創作のヒントは見つかります。ヒゲを剃っている時（Pet Moustache）や、携帯電話をどちらの手で持つか迷った時（Nokia 6133）、封書を舐めて糊付けするという行為をネタにして見事に Flash ゲームにした例（Marketing Manager Olympics）もあります。
雑誌をめくっている時に「あ、これを Flash で再現してみよう！」と考えられるか（Book beta demo）、電車の扉の閉まり方やエレベーターの止まり方、バイクが加速する様子を見て、そこにアニメーション運動の規則性を見出せるか（Transition Types）等々、何気ない日常の中にコンテンツのネタや表現のヒントが隠されているのです。

とはいっても何気ない日常から創作のヒントを探し出すのは慣れないうちは少々苦労します。そんな時はアート鑑賞やスポーツ・レジャー、旅行等、ちょっと非日常なイベントに参加することでモチベーションを上げ、創作のヒントを探す気分を演出してみるのもよいでしょう。家でモニタに向かってコードを書くだけが Flash ではありません。Flash のことを考え続けていれば Flash の神様はどこにでも降りてくるはずです。
今回は僕が Flash のことを考えながら「ジブリの絵職人 男鹿和雄展（おがかずおてん）」に行った感想をレポートさせていただきます。

「ジブリの絵職人 男鹿和雄展−トトロの森を描いた人。」

10月1日まで、東京都現代美術館で開催されている「ジブリの絵職人 男鹿和雄展−トトロの森を描いた人。」ではスタジオジブリ作品の背景を手がけた男鹿和雄さんの原画が展示されています。すでに画集も何冊か発売されているようですが、実際の原画の方が、紙のテクスチャ、筆のタッチ等、細部の質感がよくわかります。日曜の10時半に行って30分待ち、僕が帰る頃には80分待ちの行列（屋内なのが救い）でしたが、行ったからこそ得られた収穫も多かったと思います。

この「アニメーションの背景制作」という分野ですが、絵の質だけではなくスピードも要求されるお仕事です。そこには「最短の作業時間で最大の効果」を得るためのノウハウが蓄積されています。かつ、背景は一枚絵として成立させるのが目的ではなく「その上で動くアニメーションのことを考えた」絵作りが必要です。
実はこれらは Flash における作業にも当てはまり「描画負荷を抑えつつも、効果を得られる表現手法」「プログラムで表現できるシンプルな法則性を見つけること」「アニメーションさせやすい素材作り」などのヒントを得るための参考になります。

森の表現

森の緑の表現に関してですが展覧会サイトで紹介されている絵を見ても分かりますが、3〜4色でブラシを点々と打ち込んだようなストロークで表現されています。このような大胆かつスピーディーだけど効果的な表現手法というのは ActionScript で絵作りする際のヒントになります。

僕はこの表現手法を見て、書籍「.fla」で fladdict さんが紹介されていた「印象画風フィルター」を思い出しました。これは素材となる写真上のピクセルの位置と色をランダムに取得し、その場所に同じ色のブラシをかぶせていく、それを ActionScript で自動化するというものです。
この「印象画風フィルター」を改造することで Flash で男鹿さん風のタッチを表現する「ジブリの森フィルター」を作ってみたくなりますね。

書籍「.fla」の「印象画風フィルター」を木の写真に適応させた例。描画処理中の1分間ほどはブラウザがやや重たくなります。徐々にブラシサイズを小さくする工夫がされていますね。
「ジブリの森フィルター」用にカスタマイズするとすれば、もう少し色のコントラストを上げたほうがいいかもしれません。緑の部分と空、道の部分を異なるブラシで描画する方が「ジブリ」っぽさが表現できるかもしれません。ジブリ作品で特徴的な「木漏れ日」も入れてみたいところです。
そうやって自分が欲しい表現を実現するために考えを巡らせることはとても楽しい作業です。

雲の表現

展示の中に背景画の空に雲のセルがかぶせられている作品があるのですが、そのリアルな雲はエッジまで完全に不透明な雲だったのです。 「雲は半透明」というイメージを持っていると photoshop を使って全体的に半透明でエッジもぼやけているアルファチャンネル付き PNG 画像を作ってしまいそうですが、意外にもエッジをクッキリと切り抜いても「雲」の表現はできるようです！２色だけでリアルな雲が描けるということにも驚きました。

少しテーマは変わりますが「煙」についてのお話。ActionScript に限らず、プログラムから描画する際には「パーティクル」という粒子から発想を巡らせることもあります。最初はたった1ピクセルの点なのですが、着色したり、ぼかしたり、残像を付けたり、複数個のパーティクルを群れにしたり、散らしたりと、いろんな効果をいろんな順番で加えることで「これって点からできてるの！？」と驚いてしまうような表現ができるのです。
「Partigen」という製品はパーティクルにいろんな加工を施すことによって、煙や炎、爆発、雨や滝等のエフェクトを Flash 上で手軽に利用できるようになるという Flash の機能拡張です。Flash の IDE（操作パネル）に組み込めるのでエントリーユーザーにも使いやすい製品なのですが、実は、いろんな加工の正体を解き明かすことこそがとても楽しく、同時に表現者としてのスキルアップに繋がる行為なのです。そしてそのヒントは日常生活の中で物事を観察することから得られるのです。パーティクルを煙に見せるにはどの効果をどの順番でかければいいのかを頭の中でイメージし、興味が湧いたら ActionScript で書いてみる。そんな好奇心の繰り返しがスキルアップに繋がるのではないでしょうか。

炎の表現

「ハウルの動く城」で使われた戦火で街が炎上している絵がありました。 ここで注目したのが炎の描写。中心から白→黄色→オレンジの塗りで表現できることを再確認。
「Gallery Incomplet」というサイト内の Web カメラを使ったサンプルの中に「動いた部分から炎が出るようなエフェクト」があるのですが、 これはおそらく Web カメラで取得した画像と直前の画像とを比較して差のあったピクセルを検出し、その場所に炎の表現をかぶせる手法で表現されているのですが、その「炎の表現」を自分で再現する時の参考になります。あるいはもっと炎らしい表現をするための手がかりになるかもしれません。その表現アプローチが人それぞれあんな手法やこんな手法、いろいろあるのでそれを探すのも面白いですよ。

一枚の絵が出来上がるまで

展示の後半には男鹿さんが下絵から絵を描いていく様子を解説しているコーナーがあり、男鹿さんが不透明水彩絵の具を使って絵を描く様子や、ある絵に対して何色の色を使っているかが紹介されています。 透明水彩（塗りが半透明）だとFlashでの描画負荷が高くなりそうなので、不透明というのは Flash のネタを探す上では朗報です。思い出されるのは同じく不透明な「油絵」で少ない筆種でスピーディーな絵作りを解説してくれていた「ボブの絵画教室」ですね。

アニメーションの参考資料も

今回の展示ですが、背景画だけでなくその背景画やデジタルセル（セル画は最近は使わない）を使ってどういうアニメーションを実現しているのかが立体セットを使って紹介されているコーナーもあります。背景の上に何枚のレイヤー（※注）を乗せてどう動かしてやるとどんな効果が得られるのか。

具体的には：

【水の流れの表現】- 小川の流れは、川底のみを背景画で用意し、川の流れは白い線を描いたレイヤーをアニメーションさせることで表現する。

【遠景と近景を使ってスピード感を表現】 - 森の中を疾走するシーン。遠くの木々はゆっくり、近くの木は速くスライドアニメーションさせる。

【何層にもレイヤーを重ねてカメラを引くことでパン効果を表現する】 - こちらはスライド移動ではなく、奥行き移動の例。オブジェクトの遠近ごとに別レイヤーにし、カメラを遠ざけていくことで、より表現力のあるアニメーションになっていました。

等です。また、「山々に立ちこめる雲を表現するには何枚の雲レイヤーを用意すればいいか」といった、必要な効果を得るために用意すべき素材数を知ることができるのも貴重な経験です。百聞は一見に如（し）かず、会期が残り少ないですが興味ある人は是非行ってみて下さい。
（※このコラムでは「セル」を Photoshop 風に「レイヤー」と表記していますが、「背景画の上にかぶせる透明シート」という意味で同義に扱っています。また、「デジタルセル」ではなく、アニメ業界的な呼び名があったのですが忘れてしまいました。）

最後に

今回の展覧会のタイミングで男鹿さんのインタビュー記事が公開されていました。印象に残った言葉を引用させていただくと：

・絵をきちんと勉強したことのない人間でも食っていける数少ない仕事
・数をこなさなければならないので、いつも時間に追われています。
・失敗してもいいからとりあえずどんどんやってみる...

いかがですか？ビックリするぐらいに Flash 制作者にもあてはまる意見を仰っているので必見です。
他にも、ネット上に「男鹿和雄展」の紹介番組がアップされているようで、こちらのページからまとめて視聴できるようになっていますね。