dnjiro’s 9VAe blog

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

9VAeきゅうべえアンドロイド版で年賀アニメを作成

年賀アニメを作ってみました。9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。製作時間は30分くらいで、絵がうまくなくてもできます。作成方法を説明しましょう。

f:id:dnjiro:20181221220918g:plainほかのアニメの作り方はこちらをご覧ください

 

9VAeダウンロード

 

猪のSVGイラストをOpenclipartから取得

  1. こちら Openclipart - boar を使うことにしました。Openclipartは商用利用可能なSVGイラストサイトです。
  2. boar(猪)を検索するとたくさん出てくるので、これを使うことにしました
  3. f:id:dnjiro:20181221154520p:plain

  4. このページにある「Download」ボタンを長押しすると、メニューが表示されるので「リンクアドレスをコピー」をタッチします。

 

9VAeアンドロイド版でSVGイラストを開く

  1. 9VAeきゅうべえアンドロイド版を起動
  2. ツールメニュー>「ネットからダウンロード」
  3. httpアドレス入力欄を長押し>「貼り付け」。これで上でコピーした猪のSVGアドレスが入力されます。
  4. 左下の虫眼鏡ボタンで全体が表示されます。これをアニメーションにします。

    f:id:dnjiro:20181221154802p:plain

    パソコン版9VAeきゅうべえの場合はいったんダウンロードしてから、読み込んでください。
  5. 読み込んだ状態では、アニメキャスト(パーツアニメ)になっており、中身が編集できません。
  6. 選択枠の中心の「+」をタッチ。メニューから「アニメ(xxx)を修正」をタッチ。これでSVGの中身が開きました。
  7. ねんのため、ファイルメニュー>「名前を付けて保存」で「boar」と名前をつけて保存しておきましょう。
  8. ファイルメニュー>「閉じる」。ファイルメニュー>「開く」で「boar.svg」を読み込んでみてください。

地面を背景にする

猪を走らせたいので地面を分離します。

  1. 1ページの左側の「<」をタッチ。メニューから「背景ページを入れる」をタッチ。
  2. 2ページをタッチ。猪をタッチし、f:id:dnjiro:20181221163257g:plainをタッチ。これで背景ページに猪がはいります。

  3. 1ページと2ページの間の「>」をタッチ。「空白ページを入れる」をタッチ。これで1ページと3ページのリンクが切れるので、背景ページの点を自由に削除できるようになります。
  4. 1ページの背景をタッチ。猪をタッチして選び、点選択ボタンf:id:dnjiro:20181027163024g:plainをタッチ。地面以外の点を選んで、削除ボタンf:id:dnjiro:20181221164227p:plainをタッチして消していきます。


    f:id:dnjiro:20181221164453p:plain

  5. 細かい部分はf:id:dnjiro:20181221164812g:plainの「+」で拡大し、地面以外の点を削除します。
  6.  背景の猪を消したら、3ページに移動し、地面の点を削除します。

 

地面をスクロールさせる

  1. 1ページの「背景」の文字をタッチ。「スクロール→」をタッチ

    f:id:dnjiro:20181221170826p:plain

  2. 2ページは不要なのでページ番号「2」をタッチし「ページを切り取る」をタッチ
  3. f:id:dnjiro:20181029083754g:plainをタッチすると地面が右に動くのが見えるでしょう。

 

猪の足や尾を変形

  1. 2ページの右側の f:id:dnjiro:20181221171302g:plain をタッチ。「続きのページを作る」。これで2ページが3ページにコピーされます。
  2. 前足を選択し、選択枠の下の■をタッチ。「のばす」をタッチし、画面をドラッグして足の形を変えます。

    f:id:dnjiro:20181221185130p:plain

  3. 同様にほかの足や尾を動かします。
  4. 全体を選択し、中心の「+」から「ゴム変形」や「移動」なども使いました。

    f:id:dnjiro:20181221193211p:plain

2ページに「往復」を入れて時間調整

  1. 2ページに移動し、ツールメニュー>「往復」
  2. 2ページの時間をタッチし、「0.1秒短くする」をタッチ。2ページの時間を0.2秒に設定。

    f:id:dnjiro:20181221200126g:plain

  3. 尾が切れているので、ファイルメニュー>「ページ設定」で横幅を拡大します。
  4. 上書き保存でパーツの作成完了

 

1コマアニメーションで「猪突爆進」と入れる

  1. ファイルメニュー>「新規作成」
  2. 1コマアニメ作成ボタンf:id:dnjiro:20181221201107p:plainをタッチ。okをタッチ
  3. 「猪突爆進」と書いて、もう一度f:id:dnjiro:20181221201107p:plainをタッチ。これで1コマアニメの完成。
  4. 文字の形が気に入らない場合は点選択して形を修正できます。
  5. ファイルメニュー>「名前を付けて保存」で、「boartitle」と名前をつけて保存します。

 

パーツアニメを合成

  1. ファイルメニュー>「新規作成」
  2. ツールメニュー>「9VAeアニメを入れる」で「boar.svg「boartitle.svg」を入れてレイアウト。
  3. 画面サイズはファイルメニュー>「ページ設定」で調整。
  4. ページの時間を調整。文字タイトル「boartitle.svgを選んでからページの時間をタッチすれば、タイトルを表示する時間(boartitleの時間)が表示されます。(猪「boar.svgを選んだ場合、無限ループなので時間は表示されません。)
  5. ファイルメニュー>「名前を付けて保存」で、「boarmain」として保存。
  6. 再生してみると、背景がスクロールしません。

実は、パーツアニメ(アニメキャスト)の中のスクロールは無視されるのです。そこで背景スクロールページを「boarmain」に移動させます。

 

きおくツールを使って背景ページを親のアニメに移動させる

  1. アニメキャスト「boar.svgを選択
  2. 中心の「+」をタッチ。「アニメ(boar.svg)を修正」をタッチ
  3. 背景ページのページ番号「1」をタッチ。「ページを切り取る」をタッチ。これで背景スクロールページが右側のきおくツールにはいりました。
  4. 太字 boarmain.svg > boar.svg の「boarmain.svg」をタッチ。「このアニメにもどる」をタッチ。boarmain に戻ります。
  5. 1ページの左側の「<」をタッチ。「記憶したページを入れる」をタッチ。これで背景スクロールページがはいります。
  6. 地面の場所を猪にあわせて移動させます。
  7. スクロールページに書き込みをすれば、スクロールします。スクロールの方向、スピードはスクロールの矢印の向き、長さで調整できます。

 

アニメGIF出力

  1. ファイルメニュー>「アニメGIF出力
  2. 画面サイズ、秒間コマ数を設定して「OK」。すこし時間がかかります。
  3. 内部の「9VAe」フォルダとカメラロールのなかにアニメGIFができます。

 

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版でもつくれます。制作時間は20から30分。

f:id:dnjiro:20181025162237g:plain

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

 

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きゅうべえのダウンロード

 

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作成

  1. 「ファイル>アニメGIF出力」で保存場所とファイル名を指定(iPad版は設定画面でファイル名を指定)
  2. アニメGIF設定画面で、画面サイズ、秒数、秒間コマ数、背景を透明にするかどうかを指定。往復がはいっており無限ループになっているため、時間の指定が必要。往復時間「2」秒を指定します。
  3. 「出力開始」または「OK」でアニメGIFができます。(iPad版は出力後にカメラロールにコピーされます。)

 

 

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コマ絵を作るだけで作成しました。