こんにちは。植物のグラフィックをイラストレータで作成し、枝や根の部分がにょきにょきと伸びていくような様子を表すアニメーションを作ろうとしています。理想的な動きはこのような感じです。http://www.ayura.co.jp/opening_j.html
または、http://www.beat13.co.uk/
これらはどのような手順で作成できるのでしょうか。

試行錯誤を繰り返しながら辿り着いた私なりの方法としては、イラストレータで作成したグラフィックを、大まかな部分別に分解し、パーツ別のJPGを用意しました。そのJPGファイルたちを、Flashにインポートし、それぞれをべた画像化し（英語版のメニューでいうと、「Break Apart」を施しました。）、それらべた画像を丁寧に消しゴムで消しこんでフレームに小刻みに割り当て、最後にフレームの順を逆にする、ということで効果を出していました。

ですが、この方法では、スムーズに植物が生える、伸びる、というような効果が出ません。上のリンクのようなアニメーションは、どのように作成してるのでしょうか。どなたか良い案をご存知の方、アドバイスをいただけませんか？

よろしくお願いします。

まじめにやる場合は配列でツリー構造を作って描画していきます。

リンク先の一個目ものはていねいにマスクでトレースしているんじゃないですか？

いろんな形の木か描きたいのか
それとも単にひとつの絵ができればいいかで変わってくると思います。

Flash-JPも含めて「文字を書く」表現としてしばしばトピックにでてきますが
ていねいに作られたもの以外
あまりろくなものは無いのが現状です。

このジャンルを本格的にやる場合はコッホ曲線やフラクタル図形について調べるとSWFで作られた面白いものを見つけることができると思います。

私はパーツを利用して木が成長するようなものを作ろうと思っています。
最初のリンク先のような形のものはやはり式を立てるのむずかしそうです。

----------------
通常のハンドル名：×○○×　ねた回収モードに突入　現在1/100

基本的には、ご自身が試された「消しこみ」の技法で間違っていないと思います。

ただし、絵をJPEG画像にしてしまうと、（成長していく）先端部分の加工が難しくなるので、
ドローのままインポートして、シェイプにまで分解（Break Apart）してから、消去の作業をするのがいいでしょう。

消した後で、先端に蕾や芽などを一コマずつ描き加えると、それらしい雰囲気が出ると思います。
葉っぱが成長するようなアニメーションシンボルを作成して、所々に加えるのもいいかもしれません。

いずれにせよ、根気の要る作業ですが、がんばってみて下さい。

----------------
笠居 マッドシー
http://www.mad-c.com/

Fla4manさん、笠居トシヒロさん、早速のご返答ありがとうございます。例に挙げているリンクのアニメーション２種は、私の目には全然違った方法を取っているように映ります。
AYURA（一つ目のリンク）のものは、消し込みのような感じを受けますが、Beat13（二つ目のリンク）のアニメーションは、伸びるにつれ、サイズ（太さ）も大きくなって、見事に「成長」しているアニメーションが表現されています。

私は以前、この消し込み方法を利用して、文字（サイン）の動きを作成したことがありました。それは、何とかそれらしくできたのですが、同じ方法を利用して、木の成長を表現させようとしたところが、その微妙な感覚が得られず、苦心しています。

Fla4manさんへ：

私が今作ろうとしてい木というのは、木の根が下方向に多様な形（方向）に伸びていくもので、左右対称の動きではないものですが、この場合、これら２つの例のアニメーションのどちらの方法を取るべき、どちらに近い表現なのでしょうか。

リンク先の一つ目のアニメーション（AYURAのサイト）の作成方法について、マスクで丁寧にトレースしているのではないか、ということですが、具体的にどういう作業のことでしょうか。アニメーション初心者で理解に時間がかかっていて申し訳ありませんが、その方法を教えていただけたら大変助かります。


笠居トシヒロさんへ：

「消しこみ方法」について、『ドローのままインポートして、シェイプにまで分解（Break Apart）してから、消去の作業をするのがいいでしょう。』とアドバイスをいただきましたが、イラストレータで作成した画像を、どのフォーマットにてエクスポートすれば、Flash上でどのような作業が可能になるのでしょうか。

今試してみたのは、EPSにてFlashにエクスポートし、FlashからそのEPSファイルをインポートし、BreakApartを施したところ、各部分（メインの木、枝、蔓など）が、青い箱によって全部別々の部分に分解されました。ここで、これらを個々のレイヤーに割り当てなおし、新たにBreakApartを施した上で、消し込みを各部分に入れたレイヤーを作成し、タイムラインに時間差をつけて配置、ということをしていますが、この理解でよろしかったでしょうか？

EPS以外のフォーマットでエクスポートした方が良いなど、他に良作がありましたらアドバイスいただけましたらと思います。どうぞよろしくお願いします。

笠居さんが書かれているように、ハッパの成長をちゃんと描いてやるのはポイントだと思います。枝の成長にしたがって、ハッパの位置も変わってきますし。
ひとつのレイヤーで一気にやろうとせず、ハッパや枝などにパーツを分割して、シェイプトゥイーン、モーショントゥイーンを併用してやると、わりと楽に表現できると思いますよ。

追記
植物の成長はいくつかの要素が複合してますよね。「トトロ」のドングリの発芽シーンなんかが参考になるかもしれません。

1.枝が伸びる
これは形状によっては（作例2のような、一方向に伸びるもの）単純な移動のトゥイーンでも表現できそうです。カーブが大きい場合はマスクを消し込むことで表現ある程度表現できそうです
2.枝が太る
形状がシンプルであれば、枝全体を拡大トゥイーンさせることで表現できそうです。絵のタッチがシルエットの場合はシェイプトゥイーンも利用できそうです（線シェイプで描画して、線の太さを変化させるなど）
3.ハッパの成長
これはシンボル内で拡大モーショントゥイーンさせることで表現できそうです
4.ハッパの位置の変化
枝といっしょに拡大させるだけだと人工的な感じになっちゃうので、枝の成長よりちょっと遅らせる感じで移動させるといい感じになりそうです。角度も変化させると生きている感じが出そうです
5.成長にともなう枝の動き
くねるような動きが入ると「生きている」感じになります。基本的にはコマアニメになりますが、表現によってはシェイプトゥイーンが利用できるかもしれません。

これらを複数レイヤーやシンボルのイレコで表現していくことになると思いますが、絵のタッチによって、伸縮トゥイーンだと線の太さが変わっちゃうのが問題になったり、構図によってマスクが難しい場合なども考えられますね。トゥイーンが利用できそうなところはトゥイーンで、細かい部分は一コマ一コマ手作業にせざるをえないと思います。

----------------
まつむらまきお
http://www.makion.net

ファイルのエクスポート・インポートですが、IllustratorファイルはAI8形式で保存します。
特にEPSにする必要はありません。

その際に、パーツごとにレイヤーを分けて作画しておくと、Flashに読み込んでからの作業が楽になります。
＃Illustratorのレイヤー構造が、そのままFlashにインポートされます。
このAI8ファイルを、Flashに「読み込み」すればOKです。

このようにレイヤー分けをしておくと、まつむらさんか書かれているような、
「ハッパや枝などにパーツを分割して、シェイプトゥイーン、モーショントゥイーンを併用して」
という作業がやりやすくなります。


現在Charoさんがやられているように、EPSにしたものをインポート、という手順でも間違ってはいませんよ。
レイヤーに後から分けるのが大変なので、先にやっておいたほうがいいですよ、というだけです。

----------------
笠居 マッドシー
http://www.mad-c.com/

追伸です。

引用：
BreakApartは、青い箱も消えて、全部の絵が「アミ点」で選択を表す状態の
「シェイプ」になるまで、繰り返し実行してください。

この状態なら、消しゴムツールを使って、ビットマップの絵を消すように、消すことができます。

----------------
笠居 マッドシー
http://www.mad-c.com/

まつむらまきおさん、笠居トシヒロさん、
パーツ別に詳細に渡ったアドバイスをありがとうございました。その後、ご指導いただいたテクニックを使い、アニメーションを作ってみました。

にょきにょき伸びる根や蔓の動きを出すときの消しこみ方ですが、ベクターイメージのハンドルたちをひとつずつ丁寧に拾って形を整えながら消しこんでいくと、思ったよりもきれいな動きが出ました。
やはり葉っぱの成長の表現には、ムービークリップで表現し、作成したムービーをメインシーン上にタイムラインをずらして貼り付けながら再利用して完成しました。

色々とご丁寧なご返答を本当にありがとうございました。お陰様で、つまづいて困っていたところを克服して、他のプロジェクトにも応用していくことができるようになりました。
これからもどうぞよろしくお願いします。

ebiです。

もう、着地されたみたいなんで蛇足ですが、せっかく書いたので発言させて下さい。Charoさん以外の方に参考になる事もあるかも（ないかも...）

１つ目。
あくまで描画はIllustratorで行うという事であらば、いちいちIllustratorでエクスポート→FLASHでインポートという手順を踏まなくてもIllustratorでコピー→FLASHにペーストでも可能です。※その際、IllustratorのカラーモードはRGBで。※こちらもご参考に。

２つ目。
ケースによってはモーショントゥイーンが利用できます。本来アニメーションのための機能なのですが描画にも応用します。

例えば、今回の場合



こんな風です。
11コも手順あるのぉ?？　と思われるかもですが、
実際やるといつもやってる描画の手間と変わりません。
ただし、あくまでケースによっては使える手です。
枝...というより蔓が、グゥルグルグゥニャグニャしている上
かなり長く、かつ沢山の葉を均等に付けたいって場合が最適。
回転や大きさを調整しながら１つ１つ葉を配置していく手間を
思えば。（有機性のために微調整は必要かもです）

３つ目。
動きに絞って学ぶならこの本が、すごく参考になります。デジタルに動きを制御・処理するんでなく、アナログに動きを描き込むって面では、かなりオススメです。この手の本はあんましないので貴重だし。分業時の意識統一にもかなり役立ちます。

...余談ですが、この本、どうも挿絵に偏見ある人が多いようです。わりと。（実際、僕のまわりにも何人か）アホかと思います。FLASHを始めたからには少なからず“動き”に興味があるはずなのに“動き”って言葉を“アニメ”に変えただけでパス！とか...（ワケワカラン）一昔前の“アニメ＝ヲタ＝キモ”みたいな根拠ない嫌悪感がまだ残ってるのかなぁ？　たしかに挿絵、いわゆる漫画アニメっぽいタッチだなーと思いますが（A.e.Suckさん、ごめんなさい。悪く言ってるわけじゃないデス）学びたいのは動きの技術・手法なわけで、自分のタッチに置き換えて応用できる事はたくさんあるのに...見たらすぐ感化されちゃうほど自信ないのかなぁ？　ちと残念に思います。 　以上、ブツブツ失礼しました