dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

SVGイラストからアニメGIF作成「ワインを飲む女」

絵を描かずになめらかなアニメGIFを作る方法を解説します。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。制作時間は20から30分。

f:id:dnjiro:20181025162237g:plain

ほかのアニメの作り方はこちらをご覧ください

 

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


9VAeきゅうべえの使い方

 

1. SVGイラストのダウンロード

  1. こちら  Clipart - Only Wine Extra 003を開く
  2. スマホの場合は、「ダウンロード」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。
  3. パソコンの場合は「ダウンロード」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル>開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。
  4. これで、9VAeにSVGイラストが読み込まれます。
  5. 左下の「虫眼鏡」ボタンをクリックすると全体が見えます。

    f:id:dnjiro:20181025172937p:plain

2. アニメキャストの中身を保存(スマホの場合)

よみこんだイラストは静止画のアニメキャストになります。動きをつけたい場合は、アニメキャストの中身を開きます。(静止画で使いたい場合はアニメキャストにしておくほうが便利です)

  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正」をクリック。アニメキャストの中が開きます。
  2. 「ファイル>名前をつけて保存」で「OnlyWine」と名前をつけて保存。
  3. メニューバー「ファイル>新規作成」をクリック
  4. メニューバー「ファイル>開く」をクリック。上で保存した、「OnlyWine」を開く。
  5. これに動きをつけていきます。

 

3. ワイングラスをアニメキャストにする

  1. 全体を選んで点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをクリック。
  2. ワイングラスに近い点を選び、左下の虫眼鏡の左側の拡大ボタン「+」をクリックして拡大
  3. ワイングラスに含まれる点(グラスの上と台とワイン)を選び、点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをもう一度クリック。これでワイングラスの点だけが表示されます。

    f:id:dnjiro:20181027163655p:plain

  4. もう一度点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをクリック。通常選択モードになります。f:id:dnjiro:20181027165131p:plainをクリック。ワイングラスが記憶ツールにカットされます。
  5. f:id:dnjiro:20181027165315g:plainをクリック。「wineglass」と名前つけて「OK」ボタンをクリック。ワイングラスがアニメキャストになります。アニメキャストにすれば正確に回転できますし別な動きをあとからつけることができます。

 

4. 続きのページを作る

  1. 上の1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これで2ページ目ができます。

 

5. 肘からグラスまでを回転する

  1. ワイングラスの選択と同じ手順で、肘から先とワイングラスの点を選択し、f:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainをもう一度クリック。肘から先とワイングラスの点だけを選択します。
  2. 選択枠の角の■をクリック。メニューから「中心点の移動」をクリック。画面をドラッグして肘の位置に回転中心「+」を移動させます。

    f:id:dnjiro:20181029071435p:plain

  3. 選択枠の角の■をクリック。メニューから「回転」をクリック。画面をドラッグして回転させます。

    f:id:dnjiro:20181029074111p:plain

  4. 選択枠の中心の「+」をクリック。メニューから「移動」をクリック。画面をドラッグしてワイングラスを口の前に移動させます。
  5. 手首の角度を調整するために手首から肘までの点だけ選択して反時計回りに回転させます。中心点の移動をつかってください。

    f:id:dnjiro:20181029080037p:plain

6. 肩から肘までを上に縮める

  1. 肘を選択。点編集ボタンf:id:dnjiro:20181027163024g:plainf:id:dnjiro:20181027163046g:plainを何回かクリックし、肘の点だけを選びます。

    f:id:dnjiro:20181029081254p:plain

  2. 選択枠の下の辺の中心の■をクリック。メニューから「のばす」をクリック。画面をドラッグして肘の位置を合わせます。
  3. プレイボタンf:id:dnjiro:20181029083754g:plainをクリックすれば、手をもちあげてワイングラスを口に運ぶアニメがみえます。肘の形がスムーズに変化するように、それぞれの点の位置を調整します。うまくいかない場合は、f:id:dnjiro:20181023071022g:plainで作業がもどせます。「Shift」ボタンをタッチしてからf:id:dnjiro:20181023071022g:plainを押せばもう一度やり直します。

 

7. 点の位置を整える

点の位置を整えるいくつかの方法を紹介します。

  1. 一部の点を選択してから形を変形すると、選んだ点と選んでいない点との間で点がねじれたり不整合が生じます。また、もともとのイラストは静止画なので、止まっていると隠れているので問題ないが、動かすと都合が悪い点もあります。そういった点の位置を調整しなければなりません。
  2. ねじれたり、ややこしくなった点は、ややこしい部分を選択してから、選択枠の中心の「+」メニューから「なめらかにする」をクリックし、右に移動させればねじれが解消します。(「なめらかにする」は Ver.0.6.4で追加された機能)
  3. 9Veの曲線の性質上、曲線の点A(□)と曲線の点B(□)の間が極端に長く、その次の点CがBと非常に近い場合、点Bと点Cの間にふくらみができます。このふくらみは点Bを角の点(△)に変更すればふくらみがなくなります。パレットの右上の

    f:id:dnjiro:20181029090533g:plainが角の点(△)、f:id:dnjiro:20181029090607g:plainが曲線の点(□)です。

  4. プレイボタンf:id:dnjiro:20181029083754g:plainで形fの変化がおかしい場合、変形途中の形は現在のページと前のページの点の位置が関係しています。したがって、場合によっては前のページの点の位置を変更します。このとき、点を選択しておいてからページを移動すれば、その点に対応した点が選ばれています。これを利用し、点を選びやすいページで点を選択し、形を修正したいページに移動するとよいです。

  5. 肘を変形するときに肘の端の点が開いていると「なめらかにする」がつかえません。端の点を選んで右上のパレットの閉じる開くボタンf:id:dnjiro:20181029092741p:plainの左側のボタンで閉じるようにすれば、「なめらかにする」が使えるようになります。

    f:id:dnjiro:20181029093045p:plain「なめらかにする」をクリックしてから右にドラッグすれば直線に近づくので台形にします。そのあともう一度「なめらかにする」をクリックし左にドラッグすれば曲線になり、以下のようにきれいになります。

    f:id:dnjiro:20181029093614p:plain

  6. 点を修正するときに、すでに修正が終わった図形は右下の登録パレットに登録し登録場所をクリックしたメニューから「固定」や「隠す」を押せば、選択されなくしたり、一時的に隠すことができます。ワイングラスと手を登録して「固定」を設定しました。登録ボタンに赤いバツ印が表示されます。登録は図形を選んでからf:id:dnjiro:20181029095306p:plainをクリックです。(iPhoneで登録パレットが見えない場合、f:id:dnjiro:20181023074752g:plainをタッチすれば登録パレットが見えます。)

    f:id:dnjiro:20181029100141p:plain

  7. 肘のおかしい部分を選んで選択します。ワイングラスをつかんだ点が「固定」に設定されているため、選択されません。

    f:id:dnjiro:20181029100900p:plain

  8. 中心の「+」メニューから「なめらかにする」をクリックし、右側にドラッグ。

    f:id:dnjiro:20181029101017p:plain

 

8. 顔、髪型の変形、髪飾り

  1. 2ページの顔を右側にむける。髪の毛を左側にのばす。髪飾りは横に縮めて位置を調整。登録パレットを使ったパーツ分け、表示の拡大縮小、点の選択、なめらかにする、ゴム変形など、いろいろな変形をつかって形を整えます。

    f:id:dnjiro:20181029104145p:plain

9. ワインをゆらしながら飲む

手をうごかしている間、ワインはそのまま。ワイングラスが止まったら、ワインがゆれながら減っていくようなアニメーションにします。

  1. 手とワイングラスが「固定」されている場合は、登録パレットの下のf:id:dnjiro:20181029155754p:plainをクリックして解除。
  2. ワイングラスを選択し、中心の「+」をクリック。メニューから「アニメ(:wineglass)を修正」をクリック。ワインとワイングラスが開きます。
  3. 上の1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これでワイングラスの2ページ目ができます。f:id:dnjiro:20181029162606p:plain
  4. ワインをクリックしてf:id:dnjiro:20181027165131p:plainをクリック。これでワインが記憶ツールにカットされます。

    f:id:dnjiro:20181029162701p:plain

  5. f:id:dnjiro:20181027165315g:plainをクリック。「wine」と名前つけて「OK」ボタンをクリック。ワインがアニメキャストになります。

  6. 作成したワインを選択し、中心の「+」をクリック。メニューから「アニメ(:wine)を修正」をクリック。ワインが開きます。
  7. 1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これでワインの2ページ目ができます。
  8. ゆれるワインを表現するために、ワインを選んで時計回りに少し回転させます。
  9. メニューバーの「表示>前後のページを重ねて表示」をクリックすれば、1ページのワインが線で表示されるので、それを参考にゆれた形をつくります。

    f:id:dnjiro:20181029172224p:plain

  10. 1ページに移動し、メニューバー「ツール>往復」をクリックし、往復ボタンをいれます。プレイボタンf:id:dnjiro:20181029083754g:plainを押してワインが揺れるのを確認してください。
  11. 左下の虫眼鏡ボタンf:id:dnjiro:20181029172848g:plainをクリックし倍率をもどし、画面上の太文字「wineglass」をクリック。メニューから「このアニメにもどる」をクリック。ワイングラスに戻ります。プレイボタンf:id:dnjiro:20181029083754g:plainを押してワイングラスの中でワインが揺れるのを確認してください。
  12. ワイングラスの2ページの時間「1秒」をクリックし、メニューから「1秒長くする」をクリックして4秒にしましょう。
  13. 2ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これでワイングラスの3ページ目ができます。
  14. 3ページのアニメキャスト「wine」を選んでグラスの左下に小さく縮小します。これでワインが揺れながらなくなっていきます。プレイボタンf:id:dnjiro:20181029083754g:plainを押してみてください。

    f:id:dnjiro:20181029190857p:plain

  15. 左下の虫眼鏡ボタンf:id:dnjiro:20181029172848g:plainをクリックし倍率をもどし、画面上の左端の太文字「onlywine」をクリック。メニューから「このアニメにもどる」をクリック。ワイングラスを持った女の人に戻ります。1ページの時間を3秒に、2ページの時間を4秒にします。ワイングラスの1ページの時間も3秒にします。結果3秒間でワイングラスを口につけ、4秒間でワインを飲むアニメになります。
  16. あとは、プレイをみながら気になったところを修正して完成です。
  17. 最初に掲載したアニメGIFの元データ(SVGアニメ)が

    Clipart - Only Wine Extra 003 Animation からダウンロードできます。9VAeで開いてみてください。

 

10. アニメGIF出力

  1. メニューバーの「ファイル>アニメGIF出力」をクリック。
  2. 画面サイズや秒間のコマ数を設定してアニメGIFを作成できます。

 

 

11.ezgif サイトで、MP4動画に変換

アニメGIFは簡単にMP4動画に変換できます。動画にする場合、アニメGIFの高さは「720」で作成するとよいでしょう。

  1. ezgif.com ( Online GIF to MP4 Video converter ) を開く
  2. 「ファイルを選択」をクリック > 作成したファイルを選ぶ。(Android版の場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ)
  3. Upload!」ボタンをクリック
  4. Convert GIF to MP4!」ボタンをクリック
  5. Save」ボタン(フロッピーディスクアイコン)をクリック
  • これで、MP4ファイルが保存できます。

 

 

9VAeきゅうべえAndroid版を使えば、スマホだけで、SVGイラストから絵をかかずにアニメGIFを作成できます。Openclipart には15万点以上のSVGイラストがあります。いろんなアニメを作ってみてください。

 

長いアニメや動画を作りたい場合は、以下をご覧ください。

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

 

9VAeきゅうべえに関する質問

 

 

SVGイラストからアニメGIF作成「ネコのしっぽを動かす」

絵を描かずになめらかなアニメGIFを作ってみました。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。なれてくれば10から15分で作れます。

 

f:id:dnjiro:20181023093523g:plain

ほかのアニメの作り方はこちらをご覧ください

 

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


9VAeきゅうべえの使い方

1.  SVGイラストのダウンロード

  1. こちら Clipart - Cats In Love By Annalise1988 を開く。(開かない場合こちらから「ダウンロード」
  2. スマホの場合は、「ダウンロード」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。
  3. パソコンの場合は「ダウンロード」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル>開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。
  4. これで、9VAeに猫のSVGイラストが読み込まれます。
  5. 左下の「虫眼鏡」ボタンをクリックすると全体が見えます。

    f:id:dnjiro:20181022190045p:plain

2. アニメキャストの中身を保存(スマホの場合)

よみこんだイラストは静止画のアニメキャストになります。動きをつけたい場合は、アニメキャストの中身を開きます。(静止画で使いたい場合はアニメキャストにしておくほうが便利です)

  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正」をクリック。アニメキャストの中が開きます。
  2. 「ファイル>名前をつけて保存」で「CatsInLove」と名前をつけて保存。
  3. 「ファイル>開く」で、保存した「CatsInLove」を開く。
  4. これに動きをつけていきます。

3. 画面サイズの調整

  1. 「ページ>ページ設定」(iPadの場合「ファイル>ページ設定」)で全体がみえるようにページサイズを調整します。(幅1800, 高さ3200)

4. 点の数を減らす

イラストの制御点が多いと動きをつけにくいので、点の数を減らします。

  1. ネコをドラッグして選ぶ。選択枠が表示される。
  2. 「編集>効果>点を減らす」(iPadの場合「編集>点を減らす」)
  3. これで制御点の数が減りました。

5. 続きのページをつくる

  1. 上の1ページの右側の緑色の「+」をクリック。メニューから「続きのページを作る」をクリック。これで2ページ目ができます。

6. しっぽの形をかえる

  1. しっぽをドラッグして選ぶ
  2. 左側の点編集ボタンをクリック(「A」ボタンの2つ下。右側が点の追加、左側が追加なし、どちらでもよい)これで、ネコの制御点が全部表示されます。
  3. ドラッグでしっぽの一部を選びます。点編集ボタンをもう一度クリック。これで、えらんだしっぽだけが表示されます。

    f:id:dnjiro:20181022202054p:plain

  4. 左下の虫眼鏡の左側の「+」を2回クリック。これでしっぽが拡大されます。
  5. 点を動かして、しっぽの形をかえてください。
  6. しっぽの先を回転させる場合、回転中心を指定できます。まず、ドラッグで回転したい点を選びます。
  7. 選択枠の角の■をクリック。メニューから「中心点の移動」をクリック。ドラッグして回転中心(+)の場所を指定。
  8. 選択枠の角の■をクリック。メニューから「回転」をクリック。マウスを移動(iPadの場合はドラッグ)すると回転します。

 7. さらに続きのページをつくってしっぽの形をかえる

  • 同様に3ページ目をつくってしっぽの形をかえます。
  • しっぽの形を変えるときに、点の位置を自由に変更すると、アニメーションしたときにしっぽの太さが変化してしまいます。しっぽの太さが変化しないためには、近くの制御点が同じように変形する必要があり、注意深く点を移動させる必要があります。
  • うまくいかないときは、「やり直し」ボタンf:id:dnjiro:20181023071022g:plainをクリックして何回もやり直してください。

    f:id:dnjiro:20181023073825p:plain

8. 「往復」を入れる

  1. f:id:dnjiro:20181023072419g:plainやページをクリックして1ページに移動

  2. 「ツール>往復」をクリック。「往復」ボタンがはいります。
  3. 選択枠の中心の「+」をクリック。メニューから「次ページにリンクコピー」。2ページに往復ボタンが広がります。
  4. プレイボタンを押すと往復します。

9. 時間の調整

  1. 1ページの上の時間表示(1秒)をクリック。メニューから「0.1秒短くする」を5回クリックし、0.5秒にします。(iPhoneでページの上部が見えない場合、f:id:dnjiro:20181023074752g:plainをタッチすれば見えるようになります。)
  2. 2ページの時間も0.5秒にします。
  3. プレイボタンを押して確認
  4. 完成したら「ファイル>上書き保存」で上書き保存しておきます。

10. 画面サイズの調整(全体のサイズ縮小、位置調整)

  1. 「ページ>ページ設定」(iPadの場合「ファイル>ページ設定」)で全体がみえるようにページサイズを調整します。(幅1800, 高さ3200)
  2. 幅と高さの数字が大きすぎると設定できなくなります。この場合は全体を縮小、位置調整します。
  3. 先頭ページのページ番号「1」をクリック。メニューから「ページの指定 ここから」をクリック。
  4. 最後のページ番号「3」をクリック。メニューから「ページの指定 ここまで」をクリック。これで全部のデータが選択されます。
  5. 選択枠の角の■をクリックし「拡大/縮小」をクリック。これで全体のサイズ調整ができます。
  6. 選択枠の中心「+」をクリックし「移動」をクリック。これで全体の位置調整ができます。

11. アニメGIF、MP4動画作成

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要Youtube解説
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

 

12.ezgif サイトで、MP4動画に変換

アニメGIFは簡単にMP4動画に変換できます。動画にする場合、アニメGIFの高さは「720」で作成するとよいでしょう。

  1. ezgif.com ( Online GIF to MP4 Video converter ) を開く
  2. 「ファイルを選択」をクリック > 作成したファイルを選ぶ。(Android版の場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ)
  3. Upload!」ボタンをクリック
  4. Convert GIF to MP4!」ボタンをクリック
  5. Save」ボタン(フロッピーディスクアイコン)をクリック
  • これで、MP4ファイルが保存できます。

 

9VAeきゅうべえAndroid版を使えば、スマホだけで、SVGイラストから絵をかかずにアニメGIFを作成できます。Openclipart には15万点以上のSVGイラストがあります。いろんなアニメを作ってみてください。

 

長いアニメや動画を作りたい場合は、以下をご覧ください。

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

 

9VAeきゅうべえに関する質問

 

 

Softnic にフリーソフトを登録する方法

9VAeきゅうべえが、Softnic 日本語ページに登録された。 

Softnicがちゃんとレビューも書いてくれてる。うれしい。

 

ただ日本語版はベクターサイトがあるので Softnic に載せてほしいのは英語版だ。と思って、英語サイトに登録する方法を調べた。するとソフトの登録方法が、PAD® を登録する方法になっていた。PADは、ソフトウェア掲載に必要な情報を標準化したXML文書だ。サイト側は登録が簡単になるし、作者は複数のサイトに登録するとき毎回情報入力しなくてよい。

PADファイルは正確に作らなければならない。AppVisor » PAD® サイトで作成すると、細かく文法チェックしてくれる。

 

Softnic に、英語版アプリを登録する手順

PADファイルの作成

  1. Softnic Developer Hub にユーザー登録(無料)

    Softonic Developer Hub

  2. 「Create new program」ボタンを押す。すると、PADファイルを登録せよと言われる。
  3. PADファイルは、AppVisor サイトで作成できる。最初にユーザー登録(無料) 

    http://publisher.appvisor.com/

  4. まず、左上の追加ボタンで「Brand」を作成し、開発者情報を入力。「Save and Exit」
  5. 次に追加ボタンで「Program」を追加し、プログラムの情報を入力。
  6. 右上端の「<<」ボタンで入力チェックができる。プログラム名に「-」を入れるとよくないとか、いろいろ教えてくれた。
  7. 未記入や、ダウンロードモジュールが 直接ダウンロードできない Warning か残ったが、とりあえず「Save & Exit」して「Publish」。このあと人手でチェックしてくれるらしい。
  8. PADの作成は無料だが、その後ダウンロードサイトに、PADを送る部分は親切なサービスや宣伝もついて有料みたい。なるほど。
  9. そこで、PADを無料で作成できるサイトをみつけた。ここに AppVisor で作成したデータを入力すると、PADファイルを作成してダウンロードできた(ただPADの Versionが古い)

    Online PAD Generator - Web Based XML PAD Maker - Free PAD Creator - PAD Editor

PADファイルとダウンロードモジュールを softnic に登録

  1. Softonic Developer Hub で、「Create new program」ボタンを押す。
  2.  上で作成した、PADを指定してアップロード。正しいPADでないと拒否される。
  3. Online PAD Generator のバージョンがひくいため、<Program_Target_Platform>Windows</Program_Target_Platform>  タグがないというエラーがでた。Windows を入れたものを、<Program_Install_Support>の下に追加すると、エラーがなくなった。ちなみに Macの場合は <Program_Target_Platform>OS X</Program_Target_Platform> ここに何をいれたらよいかは、AppVisor が教えてくれる。
  4. 次にダウンロードモジュールを登録する。ダウンロードURLの入力、ZIPファイルのアップロードの2通りが選べる
  5. アプリのモジュールをアップロードすると登録完了。あとは Softnic のレビュー待ち。

PADファイルの修正

 

掲載された英語版、Windows版はアップした日に公開された(ただ、Softnicのレビューはついてない)。

アイ・コラボレーション神戸 わたし達の未来をつくるハッカソンに参加

視覚障碍者をたすけるハッカソンに参加。覚書

 

9VAeきゅうべえ Ver.0.6 はアニメーションの文字を差替えできるようになる

きゅうべえVer.0.6 をつくっている。

DXライブラリとか、Webアニメコンテストとか、いろいろやって、なかなかすすまないが、とりあえず、Ver.0.6 が出せそうだ。

 

次の目玉は、

  • 検索機能
  • 再生中の文字の差し替え

だ。この2つは関係があって、これを組み合わせて、チュートリアルアニメーションのフランス語バージョンができるようにする。

 

今、9VAeきゅうべえはフランス人ボランティアの努力によって、プログラムがフランス語化されている。ところが、ソフトの操作方法を説明したチュートリアルアニメーションがフランス語されていない。

 

これをフランス語にするためには、アニメーションと文字を分離する必要がある。プログラムは、テキスト文字がリソースに分離されているため、その部分だけ対訳をつくればよい。それと同じことがアニメーションでもできるようにする。

 

ドラマの字幕の差し替えのようなものだが、9VAeきゅうべえのチュートリアルアニメは、ボタン操作ができる対話的なアニメーションなので、もっと複雑だ。

 

これを実現するためには、チュートリアルアニメーションに含まれる文字列を検索し、タグに置き換え、対訳リストと結び付けなければならない。そういった作業が完成し、リリースに近づいている。

 

検索はアニメキャストの中まで検索できるので、かなり便利である。

 

キッズプラザ大阪「1コマアニメーション」カリキュラム

 キッズプラザ大阪・コンピュータ工房で、フリーソフト PEAS motch! を使ったワークショップが 2018/1/25-4/8 にかけて行われました。

PEASmotch!

 

キッズプラザ大阪では、1枚の絵を描くだけ作れるコンピュータアニメーションを「1コマアニメーション」と呼びます。

 

1コマアニメーションは

  • 1コマ絵を描くだけで作ることができます。

    f:id:dnjiro:20180330122316g:plain

    キッズプラザ大阪の指導員が作成した1コマアニメーション
  • 4歳児から作れるコンピュータアニメーションです。
  • 動くので、何を描いても楽しいです。ほかの人に見せたくなります。
  • 時間の経過、ものごとの順番、論理展開などを、静止画よりわかりやすく表現できます。
  • 米国ではホワイトボードアニメションと呼ばれ、理解度を高める動画の手法として注目されています。

    ホワイトボードアニメーション

  • 写真やテキスト文字も入れられます。

 

1コマアニメーションは、絵を書きうつすだけでも楽しいです。自分で書くと理解が深まるので、様々な学習用途で使えます。

  • 正しい書き順で書けるようになる(国語)
  • 実験の手順、反応の進み方、自然現象の説明(理科)
  • なぜこの事件がおこったのか、背景の説明(社会)
  • 主人公の気持ちの変化(国語)
  • 筆算のやり方、三角形の面積の求め方(算数)
  • プログラムの流れ図、データの受け渡しの説明(プログラミング学習)
  • 黒板に書けることはすべて1コマアニメーションにできます。
  • 学習したことを1コマアニメーションにまとめていけば、楽しく勉強できるでしょう。

 

1コマアニメーションワークショップのカリキュラム

キッズプラザ大阪で行われたワークショップカリキュラムを紹介します。操作が単純なので、4歳児からできます。

 

1.作品情報入力(2分)省略してもよい

ソフトキーボードをタッチして、下の名前を入力します。複数のパソコンを使用する場合、PEAS motch!のプログラム名に、peasmtch-01 のようにパソコン番号を追加しておけば、作品名の先頭と最後に、パソコン番号、年齢、性別が追加されます。

  • 下の名前、年齢、性別の入力(2分)

 

2.操作説明(10分)

  • サンプルの絵をかき、鉛筆ボタンを押してアニメにして見せる。何を書いてもよいが、よく知っているキャラクタだと興味を引く。(1分)
  • 線の種類、太さ、色の切り替えを教える(下図参照)(2分)
  • 最初のページは練習用にして、自由に描かせる。(3分)
  • まわりを囲んで消す「消しゴム」、作業を取り消す「戻す」を教える。(1分)
  • 消しゴムの練習、いろんなボタンを試させる。(2分)
  • 「新しいページ」を作る方法を教える(1分)

f:id:dnjiro:20180404142249g:plain

  • 戻すは作業自体が取り消され、何も残らないため、最初は、消しゴムを使うほうがよいでしょう。
  • 消しゴムを使えば、絵の内容が変わっていくアニメが作れます。
  • 茶色を書きたい場合、虹色パレットの上の四角をタッチすれば多くの色が選べます。
  • 消しゴムの下の「選ぶ」を使えば、線の場所や大きさ、色など変更できますが、ワークショップでは使いません。

 

3.自由制作(10分ー20分)

  • 2ページ以降、自分の作品を自由に制作する。
  • 自由制作時間の途中で、みんなの作品を共有サーバーにいったん保存。プロジェクタで互いの作品を見る。新しい表現方法など、発想の刺激になる。
  • 練習ページを削除したい場合、ページ番号をタッチし「ページをきりとる」で削除する。

 

4.上映会(5-10分)

  • みんなの作品を共有サーバーに保存し、順番に上映する
  • 時間があれば、何を描いたか説明してもらう。

 

  • 作品を保存する場所は、プログラムフォルダ「9va_data」の中の「setpath.ini」ファイルで指定できます。ここに共有ドライブのパスを設定しておけば、複数のパソコンの作品を1つのフォルダに集められます。
  • 作品フォルダを再生プレーヤー 9view-full にドラッグすれば、中の作品を順番に再生できます。左右キーで作品の切り替え、スペースキーで停止、再開、上下キーで再生スピード調整ができます。
  • ワコムタブレットを使う場合、ファンクションボタンに、上書き保存(Ctrl+S)を割り当てておくと保存が簡単になります。

 

 子供たちが自分で発見できること

PEAS motch! はボタンの数が少なく、機能が単純なので、何も説明せずに、自分でボタンを押しながら操作を発見していくことができます。実際に子供たちが自分で発見したことをあげてみます。

  • 画面全体を塗りつぶす場合、線を太くしてから塗りつぶした方が早く塗りつぶせる。
  • 消しゴムはまわりを囲んで消すと早い。
  • 虹色パレットの上の四角をタッチすると、茶色などもっとたくさんの色が使える。
  • 線の種類で、ぶれを選ぶと、線がびよびよ動く。
  • 線の種類で、かげを選ぶと、立体的な線がかける。
  • 線を書いた中に色を塗ったあと、もう一度線を書くと、きれいに中を塗ったようになる。
  • 上のページの右側の「+」を押すと、新しいページができる。
  • リンゴを描いて、外側から消しゴムですこしずつ消していくと、リンゴを食べていくように見える。

自分で使い方を見つけることは、とても楽しいことです。時間があるなら、あまり説明せずに自由に使わせてみましょう。

 

文字、写真の入れ方

  • PEAS motch! のファイル>「すすんだメニュー」をクリックすれば、文字、写真を入れたり、アニメGIF、APNG出力ができるようになります。

    f:id:dnjiro:20180406091408g:plain

アニメGIF、APNG出力

  • 「すすんだメニュー」の「ファイル」から「アニメGIF出力」を選べば、任意のサイズ、任意のコマ数のアニメGIFを作成できます。このブログの説明図は、みな1コマアニメーションです。PEAS motch! を使い、1コマ絵を作るだけで作成しました。

ひとコマアニメーションはアニメーションの革命か?!

ひとコマアニメーションは、2018年キッズプラザ大阪コンピュータ工房のワークショップでうまれた言葉だ。どんなものか体験できる「うるさいえほん」がこちら

 

キッズプラザ大阪では、フリーソフト PEAS motch! を使ったアニメ制作ワークショップが行われ、 3か月で、3000点近いアニメ作品が制作された。その期間中の3月3日、あるボランティアスタッフTが「夢のある「ひとコマ」マンガです。」と感想欄に書いた。それをプランナーSが「ひとコマでアニメーション」とは面白いとミーティングで紹介した。アプリを開発した大和団次郎はこの言葉に驚いた。

 

アニメーションは何コマも絵を書く必要があり、「2コマアニメーション」は存在するが、「ひとコマアニメーション」は存在しないと思われる。ところが、線を書く途中をアニメーションにすれば1コマでもアニメができる。いわれてみれば当たり前だが、実は、画期的なアニメーションだとわかってきた。下がキッズプラザの指導員が作成したひとコマアニメーションのサンプルだ。

f:id:dnjiro:20180330122316g:plain

 

1.ひとコマアニメーションは制作コストが圧倒的に低い

今まで手軽に作れるアニメーションといえば、任天堂DSの「うごくメモ帳」のような、絵を何枚か書いて再生する、というものだった。線を描くだけなので相当簡単なのだが、それでも、数枚絵を描く必要がある。ところが、

 

  • ひとコマアニメーションは、1コマ描くだけである。

 

これは制作コストが静止画と同じということだ。WebページやPowerPoint など、 静止画はいろんな場面で使われている。アニメーションを作ったことがない人でも、静止画を作ったことはあるだろう。

 

  • ひとコマアニメーションは、制作コストが静止画と同じ。

 

例を示そう。下は、 PEAS motch! 画面の説明図で、上はひとコマアニメーション、下が静止画である。

f:id:dnjiro:20210202173758g:plain

f:id:dnjiro:20210202173928g:plain

 

 上のアニメーションは、下の静止画を作成したあと、ボタンを1つ押すだけ。文字や矢印にアニメーション効果が自動的に追加される。アニメ化の時間は0.1秒。制作コストが同じなら、どちらを使いたいだろうか? データサイズも小さい。上のアニメは62KB。変化部分だけ記録するので静止画よりすこし大きい程度である。

 

今までのアニメーションは何コマか作成するので、静止画より必ず制作コストが高くなるわけだが、ひとコマアニメーションは、同じなのである。

 

  • ひとコマアニメーションは静止画より優れている。

 

ひとコマアニメーションが静止画よりすぐれていることは、心理学的に検証されている。ひとコマアニメーションは、米国ではホワイトボードアニメーションといい、このような線を順番に書いていくアニメーションは単純な動画よりも一目をひき、理解度も高いことが実証されている。その制作コストが静止画と同じなら、つかわない理由はない。世の中の多くの静止画が、ひとコマアニメーションに置き換えられてもおかしくない。相当インパクトがあることがわかるだろう。

 

 

2.ひとコマアニメーションの定義

ひとコマアニメーションを次のように定義した。

  • 1コマのデータで作られるコンピュータアニメーション
  • 書いた順番に線や文字が書かれていく

さらに、次のような機能があってもよい。

  • 消しゴムがあり、一部を消して書き換えることができる。その書き換えも再生時に再現される。
  • 背景に絵や写真が入れられる。
  • 制作過程の単なる録画ではなく、線の形や色、再生時間、再生の順番など、後から自由に修正できる。

 

ひとコマアニメーションらしきアニメーションは昔からあった。

  • 絵描き歌
  • 絵を描く漫談
  • ホワイトボードアニメーション
  • 絵の制作過程を録画した動画

 

 

3.ひとコマアニメーションはアニメーションか?

上の例で、「絵の制作過程を録画した動画」はアニメーションと呼ぶには抵抗があるかもしれない。絵をかく様子を撮影した実写だからだ。

 

これについて、静止画制作が目的で途中の様子を撮影したものなら単なる動画かもしれないが、アニメーション制作を目的に作られたもので、書いた時間と異なる時間で再生されたら、アニメーションだと考える。

 

アニメーションは、従来の2次元アニメーション(セルアニメ人形アニメ・・)とコンピュータグラフィックスで作成する3次元アニメーションに分類されていた。ひとコマアニメーションはそのどちらにも属さない新しいジャンルと考えられる。

 

f:id:dnjiro:20190821012305g:plain

 

ひとコマアニメーションの絵は、従来のアニメーションのコマとは異なった作り方になりそうだ。車のアニメーションを例に説明してみる。

 

 

従来のアニメーションでは、1コマめに車を描いたあと、次のコマでは、その車を少し移動、変化させ、車の動きを表現するだろう。

 

ひとコマアニメーションは、違う考え方をすべきだ。

 

ひとコマアニメーションでは、車を描いたあと、その余白に、車以外の情報を書き加えていく。どんな人が乗っているのか、何を運んでいるのか、どんな道なのか、どこに行くのか、これから何が起こるのか、そういった情報を順番に追加していく。

 

ひとコマアニメーションを再生すると、その情報が徐々にわかっていき、最後に全体が明らかになる。といったストーリーをもった構成がひとこまアニメーションらしいと考える。車だけの動きよりも、車のいる場面全体を描くほうがおもしろいだろう。

 

別の言葉で言えば、ひとコマアニメーションは、複雑な事件を1枚の絵で説明する情報整理の方法と考える。ひとコマアニメーションは長編アニメを作る方法ではない。長いストーリーを1コマにまとめる表現で、ショートアニメーションの技法のひとつだろう。これは短い空き時間でスマートフォンをみる現代人向きのアニメーションといえる。

 

何コマも描いて動きを表現する今までのアニメーションの作り方ではなく、一枚の絵にどんな内容を含めるか、ストーリーを考えて作ったほうが魅力的なひとコマアニメーションになるだろう。

 

ひとコマアニメーションは今までのアニメーションとはジャンルの異なるコンピュータアニメーションである。

 

4.黒板書きはひとコマアニメーションである

情報を1枚の絵に順番に表現していく方法がひとコマアニメーションだと考えると、学校の授業で先生が黒板に絵をかいていく様子はひとコマアニメーションだろう。実際、米国ではこれをホワイトボードアニメーションと呼んでおり、通常の動画よりも、説明をわかりやすく伝えられる動画として注目されている。

 

黒板書きがひとコマアニメーションなら、ノートの手書き、スケッチなど、ペンや筆で書くものはすべてひとコマアニメーションになるはずだ。以下のグラフィックレコーディングもひとコマアニメにするとよりわかりやすくなりそうだ。

 

グラフィックレコーディングをやってみました!

 

 5.Draw My Life はひとコマアニメーションで簡単に作れる

ホワイトボードに自分の人生を書いていく、Draw My Life 動画は、ひとコマアニメーションである。自分の人生を紹介した動画は、Youtube で評判になっており、自己ブランディング手法として注目されている。2013年米国ではじまったらしい。

 

自分の人生を描く、Draw my lifeの魅力 | UPLOAD

 

このように、ひとコマアニメーションは昔からあった。それなら  PEAS motch! のひとコマアニメーションはどこが新しいのだろうか。

 

従来の黒板やノートやスケッチは、書き終わったあと、静止画になってしまう。それを動画にするため、ホワイトボードアニメーションや Draw My lifeではビデオカメラを使い、動画編集によってアニメーションを作っていた。そのため、制作には結構手間がかかっていた。

 

ひとコマアニメーションは違う。静止画を描いた時点でアニメが完成している。あとから、いつでも再生、編集できる。これはコンピュータアニメーションであるからだ。その点が違う。アニメーション自体は新しくないが、アニメーションの記録、再生、編集方法が異なり、そのため制作コストが全く違う。

 

6.アニメーションをベクトルで記録する

黒板書きを記録、再生する方法が、今までは、動画撮影しかなかった。米国のホワイトボードアニメーションの制作では、ホワイトボードに書く様子を動画に撮影し、動画編集を行って仕上げていた。 PEAS motch! は、線のデータをベクトル(図形情報)で記録し、線がのびていく様子をその場で計算して再生する。そのため、動画編集を行う必要がない。 「うるさいえほん」JavaScriptで記述されたひとコマアニメ作成Webアプリである。このデータは、ONEP(One Picture)というテキストフォーマットで座標データが記録される。

 

7.手書きメモはひとコマアニメーションに拡張される

今、スマホで写真を撮影し、その上に手書きできるアプリがある。たとえば、

MetaMoJi Noteでできること | あらゆるタブレット端末で使える手書きノートアプリ MetaMoJi Note

など、多くは静止画だが、当然アニメーションになったほうが表現力が高くなり、より楽しくなる。写真上の手書きメモは、ひとコマアニメーションにかわっていくだろう。

 

 スマホアプリ picsart

写真加工アプリで有名な、picsart は、ひとコマアニメーションが作成できる。ただ、録画ボタンを押して絵を書く様子を記録するという作り方で、あとからアニメを編集することができない。本格的な1コマアニメーションを制作するには、PEAS motch! のように、入力した線の形や色や配置を自由に変更できる機能がほしくなるだろう。

 

 

スマホアプリ Gocco Doodle!(らくがキッズ)

GooglePlay2014年上半期ベストアプリに選ばれたフリーソフト「らくがキッズ」は、絵を描く過程を再生する機能がついている。絵はベクトル情報で記録しているようで、ひとコマアニメーションといってよい。再生ボタンをおすとのびていく線があり、アニメーションのような特殊効果をつくることができる。しかし、絵を描く順番を利用してアニメーションを作るという考えはもっていないようだ。

 

 

同じようなアプリには、以下のようなものがある。

 

 

8.ひとコマアニメーションのデータフォーマット

ひとコマアニメーションは、1画面の図形データがあればよいので、SVGのような既存のベクトルフォーマットがそのまま使える。それを読み込んで、再生するライブラリがあれば、ひとコマアニメーションが実現できる。

 

一方、再生時間を細かくコントロールしたければ、再生スピードの情報の追加が必要になる。再生ライブラリを外部からコントロールするといった形になるだろう。

 

 PEAS motch! は、9VAEきゅうべえアニメ研究所が開発した、9VAeLib ライブラリを用いている。9VAeLib は、SVGベースの図形データを読み込んで時間情報を追加し、アニメーションにして再生できる。 「うるさいえほん」JavaScriptで記述されたひとコマアニメ作成Webアプリである。このデータは、SVGを簡略化した「ONEP」というテキストフォーマットで座標データが記録されている。

 

JavaScript で実現した「ひとコマアニメーション」

ひとコマアニメーションは線のデータを記録、再生するだけなので、比較的容易に、JavaScriptで表現できる。静止画を扱ういろんなサイトに「ひとコマアニメーション」を組み込んでいき、アニメーションの活用範囲を広げていくことが考えられるだろう。

 

9.ひとコマアニメーションに描く内容

 ここでは、ひとコマアニメーションに適した絵は、どんな絵かを考えてみたい。ひとコマアニメーションは、絵に対して、新しい情報をどんどん追加していく作り方が考えられるが、どんな情報を追加していくのがよいだろうか。

 

  • 情景描写:これがどんな場面なのかを、順番に説明していく
  • 効果:光とか爆発とか波線とか色をかえて線を書き加えていくだけでも楽しい
  • 増えていく:同じ種類のものが増えていく
  • 場面転換:画面をまっくろにぬるなど
  • ・・・・・

 

 塗るか消しゴムで消すか2つの方法

  • 線を書き加える
  • 線で塗ってから消しゴムで一部を消して形をつくる

 

背景写真に書き加えていく

  • 背景ページに写真をいれ、写真をなぞって線を加えていく
  • 逆にスケッチ画から写真になるという表現もおもしろい

 

複数の人で順番に絵を付け加えていくひとコマ寄せ書きアニメーション

  • 順番に書く人が交代して絵を描き加えていく。新しい要素が追加されていくため、再生したとき、絵の趣旨が意外な方向に転換していくおもしろさがでてくる。NT京都2018 でやってみたが、これはおもしろそうだ。下のアニメはNT京都2018でその場にいた3名の方に書いてもらった。最初の水色の静止画に新しい情報が追加されている。時間を制限すると緊張感が出ておもしろそうだ。

    f:id:dnjiro:20180326162550g:plain

 

順番にひとコマアニメーションを書いていく手法は初対面の人のコミュニケーションツールとしてもつかえそうだ。グループでひとコマアニメーションを作成し、みんなでアニメーションを見るという運営が考えられる。ちなみに、太さの変わる線は、ワコムペンタブレットで書いている。「続きをどうぞ」とペンを渡すと書いてくれた。

 

ネタアニメもできそうだ。Youtube動画が簡単に作成できるし、ひとコマアニメーション作家がうまれそうだ。Draw My Life 動画の作り方も多いに参考になる。

 

10.「ひとコマアニメーション」という言葉の使い方

 Web制作現場では、画面を設計するときに、ここに写真を入れ、ここにイラストをいれて・・・といった検討が行われているだろう。そこには「イラスト」と同じコストで作れ、ホワイトボードアニメーションと同じ効果をもつ「ひとコマアニメーション」も検討に入れるとよいだろう。

 

クライアントから、トップの部分には一目をひくために「アニメーション」を入れたいと要望があるかもしれない。このとき「ひとコマアニメーション」でもよいですか?と提案できるだろう。それが認められれば、静止画と同じコストで作れることになる。

 

「ひとコマアニメーション」は、「静止画と同じコストで制作できること」が重要である。「ひとコマアニメーション」と同じアニメーションはいろんな方法で作ることができる。たとえば、絵を書くようすをビデオ撮影し、あとから動画編集して作ることができる。この場合、絵を書いたあと、動画編集する手間が余分にかかり、制作コストは静止画と同じではない。これは「ホワイトボードアニメーション」と呼べばよい。PEAS motch! の上で同じ絵を書けば、アニメにするのは「鉛筆ボタン」を押すだけである。そのようなアニメーションを「ひとコマアニメーション」として区別するとよい。

 

「ひとコマアニメーション」は従来のアニメーションとは別の新しいジャンルのアニメーションになるだろう。ひとコマアニメーションを制作する人はアニメータではなく、静止画を書くイラストレータが主体になるだろう。

 

 

11.「ひとコマアニメーション」はアニメーションデジタル化の第一歩

日本のアニメーション制作について、デジタル化が遅れていることが問題になっている。これは、アニメーション制作の基本が紙の上に何枚もコマを書いていくことから始まっているからだ。紙の上に絵を書いてスキャナーで入力してからデジタル作業を行うと、最初からデジタル入力するより手間がかかり、国際競争力が低下するのではと危惧されているらしい。 

http://www.meti.go.jp/meti_lib/report/H28FY/000431.pdf

 

それなら「ひとコマアニメーション」から始めるとよいのではないか。ひとコマアニメーションはデジタル入力によって制作コストが静止画と同じになる。これでアニメーションに興味をもち、本来のアニメーションに発展していくという学習過程をたどれば、自然にアニメーションがデジタル化されていくだろう。

 

12.キッズプラザ大阪にひとコマアニメーション制作コーナー設置

f:id:dnjiro:20190821012907g:plain

2019年7月にキッズプラザ大阪の3階デジタル体験広場アクアに、ひとコマアニメーション制作端末が5台設置され、1日150〜200本のアニメが作られている。制作しているのは、4歳児から小学生の子供達だ。(1)1枚絵を描いて (2)アニメーションボタンを押し (3) アップロードボタンを押せば、大画面で1コマアニメーションが再生される。使われているソフト「PEAS motch! one」はここからダウンロードできる。PEAS motch アンドロイド版はこちら