お絵かき掲示板Art.netイラスト講座>投稿イラスト講座 vol.18『しぃペで動画アニメーション』トメヂさん

投稿イラスト講座vol.18『しぃペで動画アニメーション』

イラスト講座作成:トメヂさん 制作日:2012年11月25日 使用ツール: お絵かき掲示板 しぃペインターの使い方

はじめに。

アニメーション自体の講座ではありませぬ。
それはこちらが教えてほしいくらいで(笑)。
タイトルの通り、しぃペインターの動画機能を利用して、
アニメーションを作ってみようという講座です。

用意するものは
しぃペインター通常版もしくはプロ版。
それと時間と根性です。

しぃペイントBBSはレイヤーが二枚しかないので、
不可能ではありませんが、かなりキツイと思います。

1.アニメーションのしくみ

パラパラ漫画のようなものです。
連続とはなにか、
とかまでいくと哲学の世界になってしまうので、

ここでは、
脳は画像をつなげて見ることも出来る、くらいに思ってください。
動きのいくつかがすっぽ抜けていても
その間を予測して、補ってくれるのです。

パラパラ漫画


2.動かし方

画像一枚につき、レイヤーを一枚用意します。
上の棒人間でいうとレイヤーは四枚使用しています。

これらのレイヤーを操作していくことで、
パラパラ漫画をやります。
画像は動かす枚数分、
あらかじめ完成させておかなければなりません。

レイヤーを用いた動かし方は主にふたつ。
表示/非表示法(オンオフ法)と、レイヤー移動法です。
やりやすい方をためしてみてください。


2−1.表示/非表示法

レイヤー透明度調節バーの
右にある[○]ボタンを利用します。
お絵かき講座『掲示板の使い方』レイヤーの項を参照)

用意した画像をすべて非表示の状態にしておき、
アニメーション開始とともに下から順に表示していきます。
レイヤーの状態

画像をループさせたい場合

最後のレイヤーを表示させたのち、最初のレイヤーを表示のままにして、
あとは下から上へ順次非表示にしていきます。

最後のレイヤーを非表示にしたら、
最初のレイヤーが表示されることになるので、
あとはまた下から表示していきます。
ループさせたい回数だけこれをくり返します。根性です。
ループさせる場合のレイヤー状態

アニメの構成さえしっかりしていれば、
レイヤーを動かす必要がなく、混乱の少ないところが
「表示/非表示法」の利点です。

よくやってしまう失敗

背景を塗り潰しておかないと、
下のレイヤーに描いた絵が透けて表示されてしまい、
残念なことになってしまいます。
頑張って描いたものがすべてパァになってしまうので、
これは避けたいところ。
アニメーションの失敗例

作成の流れ


2−2.レイヤー移動法

こちらも、お絵かき講座『掲示板の使い方』レイヤー移動の項を参照してみてください。

「レイヤー移動法」の場合も、まずはレイヤー1〜4に、アニメの各シーンを描いておきます。
四枚のレイヤーの内容

この動かし方の場合は、
アニメにつかう画像をすべて「表示」にしておきます。

  • レイヤー1をドラッグして、レイヤー4の上までもっていきます。
  • レイヤー2をドラッグして、レイヤー1の上までもっていきます。
  • レイヤー3をドラッグして、レイヤー2の上までもっていきます。
  • 並び方レイヤ4
    レイヤ3
    レイヤ2
    レイヤ1
    レイヤ1
    レイヤ4
    レイヤ3
    レイヤ2
    レイヤ2
    レイヤ1
    レイヤ4
    レイヤ3
    レイヤ3
    レイヤ2
    レイヤ1
    レイヤ4

・・・というように、
動かしたい画像を常にレイヤーの一番上にもっていくのが、
レイヤー移動法です。
見せたい画像が、常に一番上へ移動するところが特徴。

ループさせたい場合は、
お好みの回数分だけ操作をくり返します。根性です。

こちらは、表示非表示を切り替える必要がありません。
ループや巻戻しなどの演出も比較的容易にできます。

自由度が高い半面、どのレイヤーがどの位置にあるのか、
常に把握してないとワケが分からなくなり、混乱しやすい部分もあります。

レイヤー移動法の流れ
レイヤー移動法の流れ


3.その他のテクニック

あればなおこまやかな表現が可能となる技のご紹介です。
ひとまず自分が知っているのはこの三つ。

・速度調節

上記の動かし方ではあっというまに終わってしまうので、
もうひと手間くわえて速度を調節します。

・動画隠し

作業中のお絵かきを見せず、
アニメーションだけ見ていただく方法です。

・コピー移動

お手軽かつ究極の滑らかさ。けれども非推奨。


3−1.速度調節

このテクニックは、動画絵師たまぞうさんから教わりました。
公開の許可を快諾してくださり、ありがとうございます!

アニメーション用の画像をすべて描き終わったあと、
何も描かれていない空のレイヤーを用意します。

上記ふたつの動かし方で、レイヤーを一枚操作するたびに、
空レイヤーをレイヤー移動させ(場所はどこでもかまいません)
レイヤー透明度調節バーの右にある○ボタンを一回クリック。

好みの速度にあわせてクリックの回数をふやします。

ようするに、
描画には直接反映されないけれども、動画内でカウントはされる、という
行為をくり返すことによって、
アニメーションの速度を調節します。
他の方法もありますが、今のところ
自分はこれが一番混乱が少なく、かつ調節しやすい方法であると思います。

これを行うと
画像一枚表示1カウントであったものが3カウントになります(クリック一回の場合)。

速度調節の有無サンプル
棒人間 速度調節なし(→)
棒人間 速度調節あり(→)

レイヤーを動かしてウェイトを入れる


3−2.動画隠し

動画は、お絵かきの途中経過すべてが記録されてしまうので、
描き手がアニメーションをつくっている最中に、それがどんなアニメなのか、
見る側は予測がついてしまいます。それを防ぐ技です。

レイヤー透明度調節バーをドラッグしてバーを左へスライドさせ、
レイヤーを非表示にします。○ボタンを使わないのがポイント。

この方法でレイヤーを非表示にすると、
お絵かき中は下レイヤが表示されますが、動画中では
非表示にしたはずの、上のレイヤーが表示されたままになります。

「動画隠し」のサンプル動画をご覧ください。(→)
水色で塗り潰しをして、上記の技を用い、
下のレイヤーに鳥の絵を描きました。
お絵かきが終わったら、≪必ず≫
動画隠しとして使用したレイヤーを
バーを右へスライドするか、[\]ボタンを押して
ふたたび表示してから、○ボタンであらためて非表示にしてください。
(すこしややこしいですね)

このステップを踏まえないと、
一番上の、動画隠しのレイヤーが表示されっぱなしになり、
お絵かきしたものが見えなくなってしまいます。

また、この技は不安定なところがあり、
操作の前後で「戻る」ボタンをつかうと、
技が効かない場合があります。

それと、アトネさんではお絵かき途中でも、
動画の様子をチェックできますが(すばらしいですね^^)
途中保存時の動画では、この技は反映されないみたいです。
実際に投稿すれば、技は効いている・・・はず。




3−3.コピー移動(非推奨)

そのまんまの意味で、コピー機能を利用して
画像を直接うごかしていきます。

自然に近いなめらかな動きを表現できるのと、
レイヤー関係なしに動かせるのがメリット。

デメリットは、動画破損のリスクが跳ね上がるのと、
細かく動かすには大変な労力が伴うことです。

コピー移動で作成した動画をご覧ください。(→)

マウスポインタを表現するのに約51カウント。
それ以外はすべてコピー移動によるカウント数です。
100回近く動かしたわけですが、
動画再生スピード「既」で見てもはやすぎますね。
自然な動きにするには、
これの3倍のカウント数くらいはほしいところ。



以上です。
はじめはほぼ必ず失敗するとおもうので、
いきなり大作などはつくらず、アニメーション枚数4〜8枚の
作品でいろいろ慣れていったらいいと思います。

自分のオリキャラが、まばたきをするだけで、
もうそこには
なんらかの生命がやどっている、ように感じられる・・・はず。

動きの神秘を感じます。
みなさんにもぜひ味わってもらいたいです^^b
大変だけれどがんばって!

トメヂ 2012年11月25日

作例

こちらは以前作成した動画です。(→)

使用したレイヤーは20枚、レイヤー移動法で動かしています。
カウントライン1370あたりからはじまります。

速度調節と、動画隠しの技も使用。そして、
ところどころで操作を失敗しています(笑)
ご参考までに。




このイラスト講座は役立ちましたか?  CTぱちぱち。

皆様ご覧頂きありがとうございました。 編集担当のミミニャ〜です。
ご感想はトメヂさんの絵師名簿ARTNETテキスト掲示板などにお寄せください(^ー^)

皆さんもおもしろい絵板動画ができたらぜひご投稿ください。

それでは皆様、次のイラスト講座(大募集中)で、お会いしましょう(^o^)/~
2012年11月26日


お絵かき掲示板Art.netイラスト講座>投稿イラスト講座 vol.18『しぃペで動画アニメーション』トメヂさん
PCHViewer © Shi-dow