Edited at

1コマアニメーション(書き順アニメ)の作り方:PEAS motch! / 9VAe

1コマアニメーションという言葉は、2018年キッズプラザ大阪コンピュータ工房でうまれました。1枚の絵を描くだけで4歳児から作成できるコンピュータアニメーションで、書き順アニメとも呼ばれます。

米国では、ホワイトボードアニメーションといい、普通の動画よりも学習効果が高いとして注目されています。

001.gif


1コマアニメーションとは

アニメ分類.gif


  • 4歳児から作れるコンピュータアニメーション

  • 書いた順番に線や文字が書かれていく

  • 一部を消して書き換えできる。書き換えも再生時に再現される。

  • 背景に絵や写真が入れられる。

  • 線の形や色、再生の順番、時間など、後から自由に修正できる。

→1コマアニメーション「PEAS motch!」がすごい。


PEAS motch! は何か描くだけで1コマアニメーションができる


  • 絵を書く

  • 鉛筆ボタンを押す

たったこれだけ。1コマ絵を描くだけなので、作り方は静止画と同じです。

usage3.gif


  • ページの左「<」をクリックし、「背景ページ」に画像を入れれば、上のような説明アニメが作れます。

  • 「ファイル>すすんだメニュー」から、アニメGIF出力できます。


9VAeは最初に「1」を押すと1コマアニメーションができる

9VAeきゅうべえでは、新しいアニメを開いた直後に「1」ボタンを押したときだけ、1コマアニメーションを作ることができます。

000a.gif

1コマアニメーションを作成し、プレゼンソフトにアニメGIFを入れるまでの手順は以下のようになります。PowerPointも同じ手順です。


  1. 「1」ボタンをクリック

  2. 文字を書く

  3. 「1」ボタンをもう一度クリック。これでできあがり。

  4. アニメGIF出力し、PowerPointやLibreOfficeに入れます。
    ★「挿入」>「画像」を使う点に注意(動画、アニメーションではなく、静止画の扱いです。)

PowerPointでは、スライドショーさせるとアニメが動きます。LibreOfficeでは編集画面でも動きます。


9VAeきゅうべえダウンロード

最新版ダウンロード(リンク先右上の Untitled.png をクリック)
ダウンロードできない場合はこちら
説明

9va-win (Windows版)
9va-win (ベクター)
windows

9va-mac64 (MacOS 10.10以上)
(古いMac10.4-10.9はこちら)

9va-mac (ベクター)
mac

9va-pi (ラズベリーパイ版)
9va-pi (ベクター)
pi

9va-pi (Ubuntu, Mint/ Linux X86 32bit版)(64bitの場合)

linux

〇くわしいインストール方法はこちら

1コマアニメーション「PEAS motch!」(Windows/Mac)

win/mac

Androidd版 Gooogle Play

Android


手描きスケッチが写真に変化するアニメも簡単

手描きスケッチが写真に変化するアニメも簡単につくれます。作り方はこちら。

000c.gif

(ラズベリーパイで9VAアニメを作っているところです)


1コマアニメーション(書き順アニメ)の仕組み

「1」ボタンを使って簡単に1コマアニメーションを作れるのは、以下の複数の手順を、9VAeきゅうべえが代行してくれるためです。作成した書き順アニメは、9VAeで自由に編集することができます。「PEAS motch!」は「1」ボタンを押さなくてもいつでも書き順アニメが作れるよう設定されています。


最初の「1」ボタン

「1」ボタンによって、9VAeきゅうべえの内部では以下の設定が行われます。


  • 線の種類


    1. ノーマル

    2. 矢印

    3. 〇太さが変化する線



  • 線の属性


    1. 点線

    2. 〇ぶれ

    3. ぼかし


    4. 縁取り



  • 線の太さ:〇太い


  • もし、ワコムの筆圧ペンタブレットを接続していれば、筆圧によって線の太さが変わります。マウスでは、適当に線の太さが変化します。文字の形や線の太さは、あとから自由に変更できます。


  • 「ぶれ」は、アニメーション中にゆらいで、手描きアニメのような効果を出す機能で、筆がかすれたような表現ができます。「ぶれ」の強さは「線の種類」パレットで調整できます。



2回目の「1」ボタン

次の処理が行われます。


  1. 画面上にあるすべての線とテキスト文字に「書き順」属性を追加します。

  2. 線とテキスト文字の長さに応じて、ページの時間を設定します。

  3. 全体を動きグラフの登録エリアに登録します。

  4. 書き順を少し早めに終了する動きグラフを付けます。

  5. アニメーションを1回再生します。


  • 上のアニメーションの例では、1ページの時間が「4秒」に設定され、「アニメの作り方」という文字が4秒で描かれるアニメができます。

  • 書き順のスピードは、ページの上の「4秒」をクリックして調整できます。


簡単にアニメGIFが作れる

9VAeきゅうべえの「ファイル」メニュー(PEAS motch! の場合はすすんだメニュー)に「アニメGIF」出力があり、縦横サイズ、秒間のコマ数を設定すれば、簡単に、背景透明のアニメGIFを作成できます。


アニメGIFはプレゼンソフトで動く


  • PowerPointやLibreOfficeに挿入するときに、GIFなので「動画」ではなく「静止画」として入れてください。LibreOfficeでは、エディタの画面でも動きます。PowerPointでは、スライドショーを実行すると動きます。


プロ用有料ソフトよりはるかに簡単

イラストレータと AfterEffect を用いた作り方が以下にあります。

この方法と比較すると、9VAe きゅうべえの作り方がいかに簡単かわかります。

PicsArtというアプリでも、書き順アニメを作成できます。作成方法は簡単ですが、

書いた手順をそのまま録画する方法なので、後から文字の形を整えるといった編集をすることができません。


作り方を解説したアニメの作り方

9VAeきゅうべえで作っています。こちらをご覧ください。http://dnjiro.hatenablog.com/entry/make-9va-manual



関連記事


9VAeきゅうべえ のご紹介


  1. 無料ソフトでアニメを作ってみよう(9VAe きゅうべえ)

  2. インストール方法

  3. スクラッチ、ビスケットの次は 9VAe=第3のプログラミング学習環境

  4. よくある質問

  5. 印刷用マニュアル


9VAeきゅうべえ 初級編


  1. 9VAe チュートリアル(1)ーページでタイムラインなし

  2. 9VAe チュートリアル(2)ー図形入力、選択、移動、サイズ変更

  3. 9VAe チュートリアル(3)ーアニメキャストを作る、時間調整

  4. 9VAe チュートリアル(4)ーアニメキャストの修正、往復

  5. 9VAe チュートリアル(5)ー動きグラフ、ページコピー、GIF作成

  6. 9VAeきゅうべえ:長いアニメを作る方法


9VAeきゅうべえ 中級編


  1. アニメの作り方


9VAeきゅうべえ 上級編


  1. AviUtil と 9VAeきゅうべえを使った簡単アニメ動画作成

  2. 動くLINEスタンプのAPNG作成:無料ソフト9VAeきゅうべえ

  3. 萌えキャラ デジたんを目ぱちさせるまで:APNGアニメの作り方

  4. openclipartの無料イラストをアニメ化する6つの手順

  5. イラストから動くLINEスタンプのようなアニメを簡単に作る方法


  6. フリーソフト9VAeきゅうべえで簡単デジタルサイネージ

  7. Openclipart の 無料SVG をアニメにするテクニック

  8. 無料アニメソフト9VAeきゅうべえの裏技集


9VAeきゅうべえ サンプル作品


  1. 9VAeきゅうべえ」で絵を描かずに作れるGIFアニメ

  2. 9VAeきゅうべえで作成したSVGアニメーション


9VAeきゅうべえ 技術資料


  1. アニメソフト 9VAe をカスタマイズする方法

  2. イラストレータのデータを 9VAe(きゅうべえ)に変換する方法

  3. 9VAeをキッズプラザ大阪向けに改造する

  4. 9VAe / 9svg データフォーマット解説

  5. Xtra-PCを日本語化して使ってみた

  6. ワコム筆圧ペンで太さが変わる線をひくアルゴリズム

  7. Raspberry Piとペンタブレットで毛筆描画アプリを作る

  8. OpenCV と Python を使ったアニメーション動画用紙のスキャン画像位置合わせ