dnjiro’s 9VAe blog

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

SVGから動く年賀状作成「マウス」

9VAeきゅうべえアンドロイド版でもPC版iPad/iPhone版でもつくれます。

 

f:id:dnjiro:20191218062516g:plain




作業時間は10分程度です。他のアニメの作り方はこちらをご覧ください


9VAeで簡単動く年賀状作成「マウス」

 

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

 

1. 新規作成して、最初に「1.鉛筆」を押す

9VAeきゅうべえで、絵を順番にかいていく「ひとコマアニメーション」を作る場合、絵を描く前に「1.鉛筆」を押す必要があります。制作中の作品が間違えて「ひとコマアニメーション」にならないようにするためにこうしています。

  1. 「ファイルメニュー>新規作成」をクリック
  2. ページの右側のf:id:dnjiro:20190424153550p:plain(下図A)をクリック>「線を書いたあと、もう一度このボタンを押してください」が出たら「OK」
これで1コマアニメーションの作成準備ができました。

 

f:id:dnjiro:20191216174858p:plain

2.「MOUSE」と書いてもう一度「1.鉛筆」を押す

 これで「MOUSE」と書けばひとコマコマアニメーションができます。
  1. 画面に「MOUSE」と書きましょう。
  2. 「<<  <」ボタン(上図B)を押して、左下の虫眼鏡ボタンを押せば描く場所が広がります。
  3. 描けたら「1.鉛筆」をもう一度押します。これでひとコマアニメのできあがり。
  4. 選択ボタン(上図C)を押して、修正したい線を選べば、位置やサイズを調整できます。「1.鉛筆」を押せば、毎回、ひとコマアニメーションを作り直します。
 

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

  1. 以下のイラストを開く 。ダウンロードは「[↓] SVG FILE」ボタン

    wiredComputer mouse vector icon|FreeSVG

  2. スマホの場合「[↓] SVG FILE」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。
  3. パソコンの場合は「[↓] SVG FILE」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ツール>9VAeアニメを入れる」をクリック。ダウンロードしたファイルを選ぶ
これで、マウスのイラストが読み込まれます。

f:id:dnjiro:20191216180304p:plain


4. マウスを小さくしてMの左上に移動

よみこんだイラストはアニメキャストという部品になります。これを動かしてみましょう。

  1. 左下の「-」ボタン(上図D)を何回か押せばマウス全体が見えます。
  2. 選択枠の角のハンドル(上図E)をドラッグして小さくします。
  3. 選択枠の中心のハンドル「+」(上図F)をドラッグしてMの左上に移動します。

 

5. マウスに動き矢印をつける

  1. 選択枠の中心のハンドル「+」(上図F)をタッチ。メニューから「動き矢印を入力」
  2. 矢印の先の点(下図G)をドラッグして「MOUSE」の右下に移動
  3. 矢印の線上をタッチし、ドラッグすれば点(下図H)が追加されるので「M」の左下に移動

    f:id:dnjiro:20191216190106p:plain

 

6. 動き矢印をMOUSEの書き順の形にする

  1. 動き矢印の上に点を追加して、MOUSEの書き順の形にします(下図の矢印)。

    f:id:dnjiro:20191216193941p:plain

 

7. 矢印にそって向きを変えるに設定。登録ボタンに追加

  1. 選択ボタン(上図I)をタッチ
  2. 選択枠の中心の「+」(上図J)をタッチ。メニューから「矢印にそって向きを変える」をタッチ。
  3. 右側の登録エリアのボタン(上図K)をタッチ。メニューから「追加登録する」をタッチ。これで「MOUSE」の書き順と同じタイミングで動くようになります。
  4. ページの時間(上図L)をタッチ。時間を「10秒」程度にしましょう。
  5. プレイボタン(上図M)で動きをみてみましょう。
  6. 書き順とマウスの動きがあわない場合、点の追加ボタン(上図N)をタッチしてマウスが早く動きすぎる場所に点を追加します。点を増やせばその部分を通過するスピードが遅くなります。

 

8. 文字を入れる

  1. 文字ボタン(下図O)をタッチ。文字を入力します。
  2. 文字の選択枠の角のハンドル(下図P)をドラッグすれば、文字サイズを変更できます。中心の「+」または枠線(下図Q)をドラッグすれば場所を変更できます。
  3. プレイボタンで動きを見てみましょう。

    f:id:dnjiro:20191218053516p:plain

     

9. ページの複製

  1. ページ番号「1」(上図R)をタッチ。メニューから「ページを記憶する」。
  2. ページの右側の「+」(上図S)をタッチ。メニューから「記憶したページを入れる」。これで1ページが複製され、2ページができます(下図)。

    f:id:dnjiro:20191218055935p:plain

 

10. 間に0秒のページをいれる

この状態では1ページの文字、図形が2ページの文字、図形とリンクしており、書き順アニメーションが2ページで逆転します。一度、プレイしてみてください。このリンクを切るために0秒のページをいれます。

  1. ページの中間の「>」(上図T)をタッチ。メニューから「空白ページを作る」
  2. 空白ページの時間「〇〇秒」(下図U)をタッチ。メニューの「1秒短くする」を何回もタッチして0秒にします。
  3. これでプレイボタンを押せば、2回書き順アニメが繰り返されます。

    f:id:dnjiro:20191218061546p:plain

 

11. 文字を変更

  1. 3ページ(上図V)をタッチして3ページに移動
  2. 文字をタッチして文字を選択。文字のまわりに選択枠が表示されます。
  3. 選択枠中心の「+」(上図W)をタッチ。メニューから「文字の内容変更...」をタッチ。
  4. 好きな文字に変更し、プレイボタンを押してみましょう。

 

12.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。
  • 画像サイズについて、スマホ版では、幅、高さのどちらかを空白にしておけば、比率を保った数値が自動設定されます。MP4動画を作る場合は高さ「720」に設定するとよいでしょう。
  • Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前で出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

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

アニメGIFは簡単にMP4動画に変換できます。(Mac / iPhone / iPadならアニメGIFを介さずに直接MP4が出力できます。)

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

 

9VAeをつかえば短い動画がすぐ作れる 

  • 9VAeきゅうべえを使えば、短い動画がすぐ作れます。FreeSVG など多くのSVGイラストサイトの素材が使えます。いろんな動画をつくってみてください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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

 

9VAeきゅうべえに関する問い合わせ