flashでモーフィング

質問

flashでモーフィングを作る方法を教えてください。
図形の○が■になり文字の"あ"と変化してくれればOKです。
難しいんですかね？？
モーショントゥイーン
ってやつだけでは無理ですか？？

回答No.2

DPE · ベストアンサー

＃１です。

１番目のキーフレームに○、２番目のキーフレームに■、３番目のキーフレームに「あ」の字を書いて間をシェイプトゥイーンでつなぐと、○が■になり、■から「あ」の字に変わるアニメになります。

要するに、○→■と■→「あ」の字という２つのシェイプトゥイーンを、１つのレイヤーで続けて作成するだけです。
■を描いたキーフレームは、○→■のトゥイーンの終了フレームであると同時に■→「あ」の字のトゥイーンの開始フレームでもあります。

最終的には「あ」の字だけが表示されて終了し、○も■も残らないはずですが。

２番目および３番目のキーフレームに○や■の絵が残っていませんでしょうか？
絵のあるキーフレームの次に「キーフレームの挿入」でキーフレームを作ると、前のフレームと同じ絵が配置されたキーフレームが作成されます。
２、３番目のキーフレームに前のフレームの絵がコピーされている場合は、これを消して描画してください。

例えば○が■に変わるシェイプトゥイーンでは、１番目（開始フレーム）のキーフレームに○を描き、２番目（終了フレーム）のキーフレームでは○のあった場所に■を描きます。
○を描いたキーフレームの隣に「キーフレームの挿入」でキーフレームを作ると○がコピーされますから、この○を消して■を描いてください。
＃１でご紹介しました「オニオンスキン」機能を使うと、２番目のキーフレームで○を消しても前のフレームの○の位置を参考にしながら描くことができます。

「空白キーフレームの挿入」で何も描かれていないキーフレームを作りながら、１つずつ絵を描いていく方法もあります。
普通、モーフィングは元の絵と同じ位置で変化するものだと思いますので、この場合も、「オニオンスキン」を利用して前のフレームの絵を見ながら、前の絵と同じ位置に次のキーフレームの絵を描画してみてください。

-----------------------------------------------------------------

シェイプトゥイーンは、選択ツールなどで選んだ時に、四角い枠が出てひとまとまりのデータとして扱われる絵（シンボル・グループ・テキストなど）では作成できません。
キーフレームにこれらの絵が１つでも混ざっていると、シェイプトゥイーンの作成に失敗してしまいます。

タイムラインで、シェイプトゥイーンを設定したフレームを見てください。
フレームの背景が淡い緑色になり、キーフレーム（●で表されます）の間が矢印で結ばれていれば、正常にシェイプトゥイーンが作成されています。

矢印ではなく点線になっている時はトゥイーンの作成に失敗しています。
トゥイーンが正常に作成されていない場合は、キーフレームの中にシェイプ以外の絵が混入していないかを確認してください。
点線になっていても、キーフレームで問題のある絵を「修正」→「分解」（グループの場合は「修正」→「グループ解除」）でシェイプにすると、トゥイーンが作成されることがあります。

お礼

ありがとうございます。
できました。

回答No.1

DPE

映画や 3DCG などで使われているような複雑なものは作れませんが、簡単なものであればシェイプトゥイーンで作れます。

Flash には、最初と最後を作るだけで間のコマを作成してくれるトゥイーンという機能があります。
トゥイーンにはモーションとシェイプの２種類があります。
絵の内容はそのままで位置や大きさ・角度・アルファ（透明度）などの要素だけが変化するアニメを作る時は、モーショントゥイーンの方が向いています。
○が■に変わるなど形そのものが変化するアニメにはシェイプトゥイーンを使います。

シェイプトゥイーンはパス（シェイプ）でなければ作成できません。
ムービークリップに変換してしまった場合は、「修正」メニューの「分解」でシェイプに戻してください。
「あ」の字はテキストツールで描くと思いますが、テキストもシェイプトゥイーンを利用できません。
同じく「修正」→「分解」で、シェイプに分解してください。

なお、テキストを分解すると、テキストの属性は失われてフォントや大きさ・字などを変更できなくなります。
その代わり、描画ツールで描いたものと同様にグラデーションで塗りつぶしたり変形したりといった加工が可能になります。
テキストツールではあまり大きな字を入力できません。
入力できるサイズを超えるほどの大きな字を使いたい場合は、分解してから変形ツールで拡大するといいでしょう。

**************************************

シェイプトゥイーンの作り方そのものはモーショントゥイーンと同じです。
お使いの Flash のバージョンが書かれていませんが、とりあえず Flash MX 以降（ MX ・ MX 2004 ・ Flash 8 ）として話を進めます。

キーフレームを作り、最初と最後の絵を描画します。
ご質問の例ですとスタートは○とのことですから、楕円ツールで円を描画してください。
次のフレームにキーフレームを作り、矩形ツールで■を描画します。
その次のフレームにもキーフレームを作り、テキストツールで「あ」の字を入力します。
先述の通り、テキストのままではシェイプトゥイーンは実行できませんので、「修正」→「分解」を選んで分解してください。

前のフレームを参考に次のキーフレームを描く場合は、「オニオンスキン」機能を使うと便利です。
タイムラインの下に小さなボタンが５つほど並んでいます。この、左から２番目のボタンを押してください。
前後のフレームが薄く表示され、これを目安に描画することができます。
「オニオンスキン」で表示するフレームは、タイムラインの再生ヘッドを中心に表示されるマーカーのハンドル（○マーク）をドラッグすると変更できます。
オニオンスキンは、再度「オニオンスキン」表示ボタンをクリックすると解除されます。

キーフレームができましたら、「あ」の字を描いたキーフレームをドラッグしてフレームを移動してください。
例えばフレーム３からフレーム 50 までドラッグすると、フレーム３から 50 の間にフレームが自動的に挿入されます。
同じ要領で、■を描いたキーフレームも移動してください。
先の例ですと 50 フレームまではフレームが挿入されています。
仮にフレーム 25 にドラッグしたとすると、フレーム１に○、フレーム 25 に■、フレーム 50 に「あ」の字、各キーフレーム間は普通のフレームという構成になります。

キーフレームとの間が、グレーで塗りつぶされているかと思います。
このグレーの部分をどこでもいいので選択した状態で、「プロパティ」パネルを見てください。
中央に「トゥイーン：」という項目があります。
このリストから「シェイプ」を選んでください。シェイプトゥイーンが作成されます。

以上で基本的なシェイプトゥイーンは完成です。
「制御」メニュー→「再生」で、確認してみてください。

**************************************

図形によっては思った通りに変化しないことがあります。
上手くいかない時は、”シェイプヒント”を使うと解決できる場合もあります。

「修正」メニューの「シェイプ」の中に、「シェイプヒントの追加」という項目があります。
シェイプトゥイーンの開始フレームでこの項目を選択すると、小さな赤い丸の中にアルファベットが書かれたマークが挿入されます。
これを、変形点を指示したいところにドラッグしてください。

シェイプヒントを入れた後でトゥイーンの終了フレームを見ると、緑色の丸にアルファベットが書かれたマークが、開始フレームで挿入した分だけ挿入されています。
開始フレームのマークのアルファベットと正しく対応するように、各マークをドラッグしてください。
対応するマーク同士をヒントにしてトゥイーンの計算が行われるようになります。

線だけの図形が線と塗りの図形に変化するなど劇的に変わる図形では、シェイプヒントを使っても今ひとつきれいにいかないことが多いようです。

お礼

バージョンは8です。
ありがとうございました！！

もう１つお願いなのですが、この場合だと
○■
が残ってしまいます。
これはなんとかならないでしょうか？