アニメーション
gif
9VAe
書き順
1コマアニメーション

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

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

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

001.gif

1コマアニメーションの定義

  • 4歳児から作れるコンピュータアニメーション
  • 書いた順番に線や文字が書かれていく
  • 一部を消して書き換えできる。書き換えも再生時に再現される。
  • 背景に絵や写真が入れられる。
  • 線の形や色、再生の順番、時間など、後から自由に修正できる。

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

PEAS motch! で1コマアニメーションを作成する方法

  • 絵を書く
  • 鉛筆ボタンを押す

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

usage3.gif

  • ページの左「<」をクリックし、「背景ページ」に画像を入れれば、上のような説明アニメが作れます。
  • 「ファイル>すすんだメニュー」から、アニメGIF出力できます。

9VAeで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-mac (Macintosh版) 9va-mac (ベクター) mac
9va-pi (ラズベリーパイ版) 9va-pi (ベクター) pi
9va-pi (Ubuntu, Mint/ Linux X86 32bit版)(64bitの場合) linux
〇くわしいインストール方法はこちら
1コマアニメーション「PEAS motch!」(Windows/Mac) win/mac
iPhone/iPad版の作り方 ios

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

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

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きゅうべえの「ファイル」メニューに「アニメGIF」出力があり、縦横サイズ、秒間のコマ数を設定すれば、簡単に、背景透明のアニメGIFを作成できます。

プレゼンソフトに入れる

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

他の1コマアニメーション(書き順アニメーション)の作り方との比較

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

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

PicsArtというアプリでも、書き順アニメを作成できます。作成方法は簡単ですが、
書いた手順をそのまま録画する方法なので、後から文字の形を整えるといった編集をすることができません。

1コマアニメーション(書き順アニメ)の作り方を解説したアニメ

9VAeきゅうべえや PEAS motch! を使えば、書き順アニメをアニメーションパーツ(アニメキャスト)にして、いろんな解説アニメを作ることができます。以下では、9VAeきゅうべえを使った解説アニメの作り方を説明します。

9VAeきゅうべえで解説アニメを作る利点

こういった解説アニメを作成するには、従来は作業画面を撮影し、動画編集するのが一般的でした。9VAeで作成すれば、画面撮影が不要になり、次のような利点があります。

  • 編集、一部の差し替えが、あとから簡単にできる。
  • アニメーションのデータ容量が動画よりはるかに小さく処理が軽い。
  • 部品を再利用できるため、同じようなアニメーションを何種類も作るときに作成がどんどん楽になる。
  • 日本語、英語バージョンを同時に作成できる。

解説アニメの構造

9VAeはアニメーションを階層構造で作成します。1つの階層には最大9ページ入れられます。上の解説アニメのトップの階層は次の5ページです。

strkOrdr01.png

  1. 表紙
  2. 書き順アニメの入力
  3. 書き順アニメの再生
  4. アニメGIF出力
  5. LibreOfficeに挿入

1ページには文字でタイトルが日本語と英語で書かれており、「ヘルプ」メニュー>「-->English」「-->Japanese」で表示を切替えられます。

2ページの中には以下のような8ページのアニメが入っています。

strkOrdr02.png

  1. 背景(エディタ画面)
  2. 「1」ボタンを赤い丸で表示
  3. 指で「1」ボタンを押す
  4. 「線で書いたあともう一度1ボタンを押してください」
  5. 押した後の画面を表示
  6. 「アニメの作り方」を書く
  7. 書き終わった状態
  8. もう一度「1」ボタンを押す

解説アニメの作り方

このような解説アニメをどう作っているか解説します。

日本語と英語の文字の切替え

  • 9VAeきゅうべえの文字には、日本語、英語、区別なしの3種類の設定ができます。日本語に設定した場合、ヘルプから英語表記に変えると表示されなくなります。

000b.gif

アニメキャスト(アニメーションの部品化)

2ページには書き順アニメの入力方法を記述したアニメが、アニメキャストになってはいっています。

アニメキャストは、アニメをパーツ化する仕組みで、以下の特長があります。

  • アニメーションができる。
  • アニメキャストの中にアニメキャストが入れられる。
  • 軌道(動き矢印)にそって動かせる。
  • 角度を指定して正確に回転させられる。
  • アニメキャストの中の図形全体の太さを変更したり、色をつけたりできる。
  • 同じアニメキャストの中身は一か所で管理されるため、そこを修正すれば、全部のアニメキャストを同時に修正できる。

よく使うパーツはアニメキャストにしておくと便利です。

アニメキャストの作り方

アニメキャストにしたい図形やページを記憶ツールに入れます。それに名前をつけてアニメキャストにします。

  1. 図形を入力し、記憶ツールの中にカットする
  2. 「q」ボタンをクリック
  3. アニメキャストに好きな名前をつける。

000p.gif

背景にアニメキャストを入れる

  • 変化しない背景は、背景ページに入れると便利です。
  • 背景ページの内容は、次の背景ページが来るまで、背後に表示されます。

上で説明したアニメキャストを背景に入れる手順を紹介します。

000e.gif

複数のアニメを切り替えてコピーする

  • 9VAeは複数のアニメを同時に編集することができ、「9VA」ボタンで切り替えできます。
  • 「書き順」アニメを作るために、新しいアニメを開いて書き順アニメを作成し、解説アニメの背景の次のページに入れる手順を示します。

000n.gif

アニメキャストをパスにそって動かす

  • アニメキャストは「動き矢印」というパスにそって動かせます。
  • 動き矢印上の点(支点)は最初はアニメキャストの中心にありますが移動させることができます。
  • 文字を書くようにペンを書き順アニメの上に重ねる手順を示します。

000o.gif

SVGイラストを読み込んでアニメにする

  • 9VAeきゅうべえは、SVGイラストを読み込んで動きをつけることができます。
  • Openclipartというサイトには、10万点以上のフリーのイラストが登録されており、それを読み込んで、アニメにすることができます。その手順を紹介します。
  • SVG ファイルを 「9VA」ボタンから読み込めば、アニメキャストになります。
  • アニメキャストの中身を編集して動きをつけます。
  • なお、アニメキャストのサイズを変更しても、線の太さはかわりません。太さを調整する必要があります。

000m.gif

複数ページをアニメキャストにする

  • 作成した複数ページのアニメを1ページに入れる手順を示します。
  • 空白ページを作成してアニメキャストを入れたあと、ページの時間をアニメキャストの時間に設定します。

000h.gif

まとめ

書き順アニメの作り方と、解説アニメの作り方を説明しました。

9VAeきゅうべえを使えば、いろんなアニメを簡単に作れます。ご活用ください。


関連記事

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. 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 を使ったアニメーション動画用紙のスキャン画像位置合わせ