1. HOME
  2. 多キャラ箱講座
  3. だれでも作れるアニメ講座 ⑥キャラクターを動かす
 
     

だれでも作れるアニメ講座

⑥キャラクターを動かす

さて、ここからは少し難易度を上げて、キャラクターを動かしてみます。

まず、動かすキャラの下絵を描きます。
今回は、サンプルとしてくまが歩くアニメーションを作ります。
紙に描いてスキャナで取り込んでも良いですし、そのままFlashに直接下絵を描いてもかまいません。

紙に下絵を描いた場合、それをスキャナで取り込み、保存します。
[ファイル]→[読み込み]→[ステージ]に読み込みで画像を開きます。
このままだと線が濃いので、画像の上で右クリック→シンボルに変換します。
グラフィックにチェックを入れてOKをクリックします。
画像を選択した状態で下に出るプロパティから、カラーをアルファにし、その右側の数値を好みの濃度に下げます。

他にも、取り込んだ絵の上に、水色など薄い色の矩形を描き、それをシンボルに変換→ムービークリップでOKをクリックします。
下のプロパティから、ブレンドをスクリーンにすることで下絵の線を使用した色にすることが可能です。

どちらの方法でもお好みでお使いください。

下絵の準備ができたら、そのレイヤーはロックし、上に新しいレイヤーを作って清書をします(絵が完成したら、下絵レイヤーは削除します)。

下絵を取り込まず、直接Flashで描く場合は、下絵を薄い色で描くか、描いた後に全選択で色を薄い色に変え、上から清書をします。   線を描く時は、はみ出しなど気にせず描いて、後で消すほうが良いです。図のように、はみ出した部分を選択ツールで選択し、Deleteキーで削除可能です。
着色方法ですが、私は主にバケツツールで着色します。
その際、影や色が違うところは鉛筆の極細線で、わかりやすい、他で使っていない色を選んでまず境界線を描きます。
  線が引けたら、バケツツールで着色します(バケツツールで大まかに塗った後に線を引いて影部分を着色することもできます)。
この時、バケツツールを使っても塗れない場合は、どこか線がつながっていない可能性がありますので、ダイレクト選択ツールでチェックしてみましょう。
つながっているように見えても、ダイレクト選択ツールで選択して拡大すると、線がつながっていないことがあります。
磁石マークの吸着ツールを使うと、線のつなぎ目をぴったりくっつかせることもできます。
着色が終わったら、色分け用の極細線をダブルクリックで選択して削除します。ダブルクリックすることで、その線がすべて選択されます。   これで塗りも完成しました。他のパーツも同じように作っていきます。

動かすパーツを考えつつ描き、それぞれパーツごとにシンボルに変換します。
この時、わかりやすい名前をそれぞれのパーツにつけておきましょう。

くまが右から左に移動するだけではなく、手足を動かしながら移動するアニメーションを作りたいので、今回はシンボル内にアニメを作らなければなりません。
手足を動かしながら右から左へ移動させる動きを一度につけるのは大変なのと、手間もかかりますので、内部では手足を動かすだけの設定、外では右から左へ移動させる動きをつけるのです。
詳しくは後述します。

このように、すべてパーツごとにシンボル化したら、すべて選択してこれをまた1つのインスタンスに(シンボル化)します。
シンボル化したら、ダブルクリックをして中の編集画面に入り、すべて選択された状態で、くまの上で右クリック→レイヤーに配分をクリックします。

レイヤーに配分すると、パーツごとにレイヤーに配分されます。
一番上のレイヤー1はいらないので削除します。

次は、パーツごとに動かす設定をする前に、それぞれの中心点を変えます。
中心点を変えないままだと、後でおかしな動きになってしまいますので、忘れずに行いましょう。
パーツは中心点を軸として動くので、どこを軸とするかを決めるものです。

レイヤーをクリックして「自由変形ツール」をクリックすると、そのレイヤーに配置されているインスタンスが選択されます。中心にある白い○が中心点です。
この中心点にカーソルを合わせると、カーソルの隣に小さな○が出ますので、そのままクリックして軸となる場所まで移動させます。
これを全パーツに行います。

これで準備ができました。
次に、5フレーム目を上から全レイヤーを選択(一番上のレイヤーの5フレーム目をクリックしたまま一番下のレイヤーまでドラッグ)し、その上で右クリック→キーフレームの挿入を選択します。
全レイヤーに同じところでキーフレームを入れる必要はなく、それぞれのレイヤーごとに違う動きをつけることが可能ですが、今回は単純な動きですので、このようにしました。

次は、それぞれのパーツを動かす位置まで移動させます。
たとえば手前の腕だと、後ろから前に動かしたいので、5フレーム目をクリックして、「自由変形ツール」で腕の根元を軸に前に回転させます。

他のパーツも同じように、奥の腕を後ろ方向に、手前の足を後ろに、奥の足を前に、首や体も必要であれば動かします。
すべてのパーツの移動ができたら、1フレーム目を全選択(同じように上から下までクリックしたままドラッグ)し、下のプロパティからトゥイーンでモーションを選択します。

これで再生すると動きますが、歩くアニメの場合、このあとまた最初の位置まで戻る必要がありますので、1フレーム目を全選択し、選択したフレームの上でマウスの右クリック、その後現れるメニューから「フレームのコピー」を選択します。
その後9フレーム目を上から全選択し、右クリック→フレームのペーストをします。
その後5フレーム目をまた全選択し、下のプロパティからトゥイーンをモーションにします。

Adobe Flash Player を取得

これで歩く動きは完成しました。再生してみましょう。

プレビューや、パブリッシュで動かす場合は、最初のシーンで歩かせる長さまでフレームを伸ばさないと動きません(ムービークリップにすれば、1フレームだけでずっと動きます)。

では、このくまを右から左に移動させてみます。
まず、最初の画面から、1フレーム目のくまをステージ外に配置します(少しくまのサイズを小さくしました)。

配置したら、次に歩かせる場所まで移動させるため、好みの長さのところでキーフレームを作り、そのキーフレームで好みの場所まで移動させます。今回は真ん中まで移動させたいので、とりあえず27フレーム目にキーフレームを作り、27フレーム目のくまを中心近くまで移動させ、1フレーム目のプロパティからトゥイーンをモーションにします。
1フレーム目からEnterを押して再生してみると、とことこ歩いていると思います。

Adobe Flash Player を取得

このままではつまらないので、ここからコマアニメでおじぎをさせてみたいと思います。
28フレーム目を右クリックで「空白のキーフレームを挿入」を選択し、ここに正面を向いているくまを新たに描きますので、オニオンスキンを使います。
パーツをうまく使って、横から前向きまで同じパーツを使用して移動させる方法もキャラによって可能ですが、今回はコマアニメの説明もかねて1コマずつ描きます。
前のコマをコピーして修正して使いたい場合は、空白のキーフレームではなく、普通にキーフレームを挿入してもかまいません。ただし、グループ化のものは良いですが、シンボル化したものを修正すると、元画像が変わってしまいますので、その場合はインスタンス自体を複製し、配置している画像を右クリックでシンボルを入れ替えてください。

今回は、12fpsと粗めであることもあり、おじぎをするまでに3枚描きました。
①正面の絵②少し頭を下げ始めた絵③頭を下げている絵の3枚です。
アニメーションではなくコマごとに描いた(修正した)ので、パーツごとにグループ化したものに手を加えました。

この後、頭を上げて正面に戻すため、頭を下げたコマの後に②と①をコピーし、最初とは逆の順番で配置します。さらに正面で少しとめてからおじぎをさせたいので、正面の絵を5フレーム分に伸ばしました。伸ばしたいフレームの上で右クリックし、フレームの挿入を選択するか、伸ばしたいフレーム数分選択してフレームの挿入を選択すると、その分フレーム数が増えます。
他のコマも、再生してみると少し早かったので、2フレームに、頭を下げたところでも少し長く止めたいので3フレームにしました。最後の正面を向いている場面でも少し止めてから動かしたいので、3フレームとしました。

最後に、おじぎをした後は左に歩いて行かせるため、最初に使った歩くアニメーションのインスタンスをおじぎ後の次の空白フレームに配置し、最初と同じようにトゥイーンでステージ外に歩かせる設定をします。
この場合、27フレーム目のコマを選択した状態で、上の編集メニューから「コピー」を選択します。おじぎ後の空白フレームで、上の編集メニューから「同じ位置にペーストする」を選ぶことでも同じ位置に配置することができます。
背景もつけてとりあえずアニメーションは完成しました。

Adobe Flash Player を取得

こうしてフラッシュアニメが完成します。
ぜひ、自分で創ったオリジナルキャラクターを動かしてみてください!

 

このページの先頭へ