dnjiro’s 9VAe blog

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

立体イラストを３次元的に回転させる動画の作り方

動画 アニメの作り方 おすすめ

下の動画は、「快盗ハラマン実体テレビ」というアニメのオープニング映像です。
３次元の実体テレビが立体的に回転しています。このアニメの作り方を説明します。

パソコンやスマホの無料アプリで作れます。いらすとやを動かす方法はこちら。ダンス動画の作り方はこちら。音声合成はこちら。

ほかの解説動画はこちら。

内容：

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

アプリはフリーソフト9VAeきゅうべえを使います。下からダウンロードできます

操作方法

  1. 9VAeきゅうべえアニメ研究所をひらき、Downloadをタッチ
  2. ダウンロードする9VAeのアイコンをタッチ
  3. パソコン版は右上のダウンロードボタン。スマホ、タブレット版はアプリストアから「インストール」して開きます
  4. Mac版は解凍したあと、右ボタンメニューから「開く」を２回。Win版は「詳細情報」から実行します

２．穴のあいた図形の書き方

操作方法

  1. 最初に八角形をかきます。多角形塗りつぶしのアイコンをタッチします
  2. 時計回りに頂点を、順番に入力します。最初の点をタッチすると、入力が完了します。
  3. 左右に２つ、穴をあけます。穴の形は、時計の逆回りに入力します
  4. ３つの図形が入力できたら、選択ボタン
  5. 外側からドラッグして３つの図形を選びます
  6. 選択枠の中心のプラスをタッチし、メニューから「グループ化」を選びます。
  7. もう一度、中心のプラスをタッチし、「いっしょに塗る」をタッチします。２つ穴があいた、図形ができます。
  8. 外側の図形と、穴の図形が、逆回りにかかれていれば、穴があきます。もし穴があかなければ、中心のプラスメニューから「穴の反転」をタッチし、穴の図形をタッチしてください。

３．実体テレビの足をかく



操作方法

  1. 多角形塗りつぶしで、足を入力します。
  2. 色は右上のパレットで、かえられます

４．パネルを複製して手前にずらす

操作方法

  1. 選択ボタンをタッチして、パネルを選ぶと、選択枠がつきます
  2. 選択枠の中心のプラスをタッチし、メニューから、「複製」します。
  3. 左側の、重なりを上にするボタンで、足より手前にします
  4. ドラッグして、位置を左にずらします。
  5. 右側の登録ボタン「＋」で、パレットに登録します
  6. 登録したパレットをタッチし、メニューから「下と重ねる」で、下がすけてみえます。
    「固定」をタッチすると、選択できなくなります
  7. 後ろのパネルを選んで、灰色にしましょう

５．背後の面から順番にかく

操作方法

  1. 多角形塗りつぶしをつかって、面を入力していきます。
  2. キーボードがある場合は、コントロールキーを押せば、頂点の位置に点が吸着します
  3. 色は塗り色パレットで、変更できます
  4. 全部の面が入力できたら、登録パレットをタッチし、「選択する」をタッチして、
    手前のパネルを選びます。
  5. 重なりを上にするボタンで、一番手前にします
  6. 固定や、表示属性は、右下のまるボタンでリセットできます。タッチすれば、手前のパネルが不透明になります

６．ブラウン管とアンテナをかく

操作方法

  1. 多角形をつかって、アンテナをかきましょう
  2. 右上の、３つめのタブから、スタンプが入力できます。角まるふきだしを入力しましょう
  3. 点追加、削除ボタンで、図形の点が表示されます。ふきだしの、つのの点を選びましょう
  4. 削除ボタンで、点を削除すれば、角まる四角形になります
  5. 四隅の点の位置を調整して、実体テレビにはめこみます

７．続きをつくって足の台を回転

操作方法

  1. ページの右側の「＋」をタッチし、メニューから「続きのページを作る」をタッチします。１ページの内容が２ページにコピーされます
  2. 台を選んで、点選択ボタンをおします。台の点が表示されます
  3. 台の点を時計まわりに、移動させましょう
  4. １ページの時間をタッチし、時間を６秒に変更します。
  5. プレイボタンをタッチして動きをみてみましょう。台が回転するアニメができました

８．面を選んで前面、横板、背面を分類

操作方法

  1. 図形を選択し、パレットの「＋」ボタンをタッチすれば、図形がパレットに登録されます。
  2. パレットをタッチし、メニューから「追加登録する」をタッチすると、そのパレットに図形が追加されます。これで分類していきます
  3. 手前のパネルをいれたパレットをタッチし「隠す」をタッチすれば、表示が消えて、下が見えるようになります

９．前面パネルの角の点を結合

操作方法

  1. 手前のパネルのパレットをタッチし「隠す」を解除します。
  2. 全部の図形を選びます。「隠す」に設定された背後のパネルは選択されません
  3. 点選択モードにします。
  4. 左下の「＋」ボタンを押して画面を拡大します
  5. 手前のパネルの、かどの点を外側からドラッグします。その場所にある点をすべて選びます
  6. 選択枠の中心の「＋」メニューから「点の結合」を実行します。選んだ点が結合され、点のまわりにまるがつきます。
  7. 同じようにほかの角の点も結合します
  8. 左下の虫眼鏡ボタンで、全体が見える表示にもどります。
  9. 手前の八角形パネルの、８個のかどにある点を、同じように結合します。
    これで手前のパネルを動かすと、結合した側面や底面がいっしょに動くようになります

10．背後のパネルの角の点を結合

操作方法

  1. 手前のパネルのパレットをタッチし、隠します。手前のパネルが消えます
  2. 背後のパネルのパレットをタッチし、「隠す」を解除します。背後のパネルが表示されます
  3. 背後のパネルの、８個のかどにある点を、８箇所選んで、メニューから点を結合します。
  4. 左下の「＋」「ー」ボタンをつかって、拡大縮小して、点を選んでください

11．前面、背面パネルを立体的に回転

操作方法

  1. 手前のパネルのパレットをタッチし、メニューから「選択」します。
  2. 選択枠の右側の辺のハンドルをタッチします。メニューから「のばす」を実行し、左下にむかって変形します
  3. 今度は、選択枠の左側の辺のハンドルをタッチし、メニューから「のばす」を実行し、右上にむかって変形します
  4. 手前のパネルが、直線になればOKです。次に、背後のパネルのパレットをタッチし、メニューから「選択」します。
  5. 選択枠の左側の辺のハンドルをタッチし、メニューから「のばす」を実行し、右上にむかって変形します
  6. 選択枠の右側の辺のハンドルをタッチします。メニューから「のばす」を実行し、左下にむかって変形します

12．アンテナを回転

操作方法

  1. アンテナを選んで、点選択モードにして形を変形します
  2. 横から見た形に変形します
  3. プレイボタンで動きをみてみましょう

13．ページをコピーして続きをつくる

操作方法

  1. １ページのページ番号をタッチしメニューから「ページを記憶する」を実行。
  2. ページの右側の「＋」をタッチし、メニューから「記憶したページをいれる」を実行します
  3. １ページの内容が３ページにコピーされます

14．前面、背面パネルを反転して重なりを変更

操作方法

  1. 手前のパネルのパレットをタッチし、メニューから「選択」します。
  2. まず左下の「シフト」をおします。
  3. 次に、選択枠の右側の辺のハンドルをタッチし、メニューから「反転」を実行します。シフトをおせば、同じ位置で左右反転します
  4. 重なりを下げるボタンを何回かおして、一番下にさげます。
  5. 背後のパネルのパレットをタッチし、メニューから「選択」します。
  6. 左下の「シフト」をおしてから、
  7. 選択枠の右側の辺のハンドルをタッチし、メニューから「反転」を実行します。
    同じ位置で左右反転します
  8. 重なりをあげるボタンを何回か押して、一番手前にあげます。

15．前面、背面パネルの場所と色を入れ換え

操作方法

  1. 背後のパネルのパレットをタッチし、メニューから「選択」します。
  2. 中心をドラッグして、背面パネルを、前面パネルの位置に移動します。
  3. 色を前面パネルと同じ色に変更します。
  4. 次は、手前のパネルのパレットをタッチし、メニューから「選択」します。
  5. 中心をドラッグして、手前のパネルを、背面パネルの位置に移動します。
  6. 色を背面パネルと同じ色に変更します。
  7. 実体テレビを後ろからみた形になりました

16．アンテナと下の台を回転

操作方法

  1. アンテナを選んで、左右反転させます
  2. 台の点を１８０度回転させます

17．２ページのパネルの重なりを入れ換え

操作方法

  1. ２ページをタッチして、２ページに移動します
  2. 手前のパネルのパレットをタッチし「選択」します。
  3. 重なりを下げるボタンをタッチして、一番下にさげます
  4. 背後のパネルのパレットをタッチし「選択」します。
  5. 重なりをあげるボタンをタッチして、一番手前にあげます
  6. プレイボタンで動きをみてみましょう。180度回転するアニメができました

18．実体テレビのエンジンをつくる

操作方法

  1. 円を描くボタンをタッチし、円を３つかきます。円は中心からドラッグします
  2. 選択ボタンをおして、３つの円を選びます。
  3. 右側のカットボタンで、記憶ツールの中に円がはいります。
  4. 記憶ツールの下の、「q」ボタンをタッチ。好きな名前をつければ、記憶ツールの中の円が、アニメキャストになります
  5. アニメキャストの選択枠の、中心の「＋」をタッチ、メニューから「アニメの修正」で、アニメキャストの中が開きます
  6. ３つの円がはいっています

19．エンジンを点滅させる

操作方法

  1. ページの右側の「＋」ボタンをタッチし、続きのページを作ります。１ページが２ページにコピーされます
  2. 円を選び、塗り色ボタンで、カラーパレットから別の色を選びます
  3. 続きのページを作ります。２ページがコピーされます
  4. カラーパレットから別の色を選びます
  5. ステージの上の、太い文字が、ファイルと、アニメキャストの名前です。
    左側の文字をタッチし、「このアニメにもどる」をタッチします

20．エンジンを中に入れる

操作方法

  1. エンジンを選んで、重なりをさげるボタンで、パネルの下にいれます
  2. 選択枠の中心の「＋」をタッチし、「複製」をタッチ。右側に移動します
  3. ２つのエンジンを選んで、「前のページにコピー」ボタンをタッチ。重なりを調整し、全部のページのテレビの中にいれます。回転に従ってエンジンの位置も変更してください

21．回転するテレビをアニメキャストにする

操作方法

  1. １ページの番号をタッチし、メニューから「ページの指定　ここから」をタッチ。
  2. ３ページの番号をタッチし、メニューから「ページの指定　ここまで」をタッチ。
    これで全部のページが選ばれます
  3. ページの番号をタッチし、メニューから「まとめて切り取る」で、ページが記憶ツールにはいります。
  4. 「q」ボタンをタッチし、名前をつけて、アニメキャストにします
  5. 画面の左下に、アニメキャストを移動し、選択枠の角をドラッグして、サイズを小さくします。
  6. 続きのページをつくります
  7. アニメキャストをドラッグして、右上に移動します
  8. 選択枠のかどをタッチして、メニューから、「拡大、回転」します
  9. １ページをタッチし、１ページにもどります
  10. アニメキャストには、赤い矢印ができています。これをタッチし、点を追加します。点を移動し、矢印を、上にまげます
  11. １ページの左上のすきまをタッチ。メニューから往復」をタッチします。往復命令がはいります。これで、１ページと２ページの間を往復します
  12. １ページの時間を１５秒にします。
  13. プレイボタンで動きを見てみましょう

１８０度まで回転させる方法を説明しましたが、オープニングでは、３６０度回転させています。さらに背景や、ブラウン管に、作者のサインをつけました。

アニメキャストについて、こちらも参考になります。＞ベクトルとビットマップの違い

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

↑これを見るとダウンロード、キーフレーム補間、SVGイラストをパーツ化して口パクさせる方法がわかります。パソコンでもiPadでも同じ操作です。

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定すると解説動画が作れます。
  • Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
  • FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
（ペイントに貼り付けて保存）
 Mac
  • Shift + Command + 4 （ShiftキーはZの左、スペースでウィンドウ指定）
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ＞
ライブラリ＞
Screenshots
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真＞
アルバム＞
スクリーンショット
 Linux Mint
  • Print Screen キー
クリップボード
ファイル
 Amazon Fire
  • 電源 + 音量Down １秒長押し
  • USBケーブルでPCと接続し、
    設定＞接続デバイス＞USB＞ファイル転送
ピクチャ >
スクリーンショット
 Chromebook
  • Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）
マイファイル >
ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

f:id:dnjiro:20220119095713g:plain

  1. 画像入力ボタン「山」でキャプチャ画像を読み込む
  2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
  3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

  1. 文字入力ボタン「A」で数字を入力
  2. 角の■をドラッグでサイズ変更。
  3. 中心の「＋」または枠線のドラッグで移動
  4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
  5. 折れ線ボタンをクリック
  6. 開始点
  7. 終了点
  8. 選択ボタンで入力終了
  9. 太さ設定ボタン。メニューから「太くする」で太くできます。
  10. 文字入力ボタン「A」で説明文章を入力
  11. 背景の色を設定
  12. 線の種類メニューの「ー」で枠線がつきます
  13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

f:id:dnjiro:20220119140955g:plain

  1. 文字を選ぶ
  2. 文字タブ２をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ１をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

ひとコマアニメーションにする

  1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
  2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
  3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

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

 

 

9VAeをつかえば素材動画が作れる 

      • 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
      • Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
      • 動画編集ソフトで動画に合成できます。

OS

無料動画ソフト

9VAeで作れる素材

Windows

CapCut

AviUtl

MP4

連番PNG または MP4

Mac/iPhone/iPad

CapCut

iMovie

MP4 

MP4

Android

CapCut

PowerDirector

MP4

GIF または MP4

作り方

 

      • もっと長いアニメを作ることもできます。以下をご覧ください。

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

 

 

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

 

 

音楽にあわせて絵や写真がおどる動画の作り方

動画 アニメの作り方 おすすめ

パソコンやスマホで、音楽にあわせて絵や写真がおどる動画の作り方を解説します。いらすとやを動かす方法はこちら。ダンス動画の作り方はこちら。音声合成はこちら。



ほかの解説動画はこちら。

内容：

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

アプリはフリーソフト9VAeきゅうべえを使います。下からダウンロードできます

操作方法

  1. 9VAeきゅうべえアニメ研究所をひらき、Downloadをタッチ
  2. ダウンロードする9VAeのアイコンをタッチ
  3. パソコン版は右上のダウンロードボタン。スマホ、タブレット版はアプリストアから「インストール」して開きます
  4. Mac版は解凍したあと、右ボタンメニューから「開く」を２回。Win版は「詳細情報」から実行します

２．サンプルリミックスを保存

操作方法

  1. 9VAeを起動し、ヘルプメニュー（サンプル）から「リミックス」
  2. ファイルメニュー「名前をつけて保存」で適当な名前で保存します。そのフォルダに「guiter-f」という音ファイルが保存されます。

３．キャラクタを新しいファイルに保存

操作方法

  1. キャラクタをタッチして選択。
  2. 右側の記憶ツールのコピーボタン「○」。キャラクタが記憶ツールに入ります。もしスマホ版で記憶ツールがみえなかったら、右下の「もどす」をタッチ
  3. ファイルメニュー「新規作成」
  4. 記憶ツールの下の貼り付けボタン「←」。メニューから「複製する」。これでキャラクタが新しいファイルにコピーされます

４．音楽ファイルを入れる

操作方法

  1. 右側の「♪」ボタンをタッチ。音「guiter-f」をいれます。
  2. ページの時間をタッチ。「１秒長くする」を何回かタッチし「１０秒」にします。
  3. プレイボタンで再生。キャラクタが動きます。この動くキャラクタを9VAeでは「アニメキャスト」と呼びます。

５．アニメキャストを開く

操作方法

  1. アニメキャストを選びます。
  2. 選択枠の中心の「＋」をタッチ。メニューから「アニメを修正」。アニメキャストの中が開きます。これをテンプレートにして絵や写真を動かしてみましょう。

６．キャラクタを画像に変更

操作方法

  1. 外側からドラッグして、9VAeキャラクタを全部選択
  2. 左側の削除ボタン。これで、図形が消えます。
  3. 右側の画像入力ボタンから、絵や写真を選んでいれましょう。どんな画像でもかまいません。写真がなければ絵をかいてもかまいません。
  4. ２ページをタッチして２ページに移動
  5. 全部選択
  6. 削除（
  7. 画像入力ボタン
  8. これを繰り返して、9VAeキャラクタを動かしたい絵・写真に変更してください。
  9. 「(new) >9vaeTalk」のような太字の左側をタッチ。メニューから「このアニメにもどる」で、元のアニメにもどります。「(new)」が元のファイル名「9vaeTalk」がアニメキャストのファイル名です

７．アニメキャストをサイズ変更

操作方法

  1. アニメキャストを選んで、ドラッグして中央に移動
  2. 選択枠の角の■をドラッグして拡大

８．アニメキャストのローマ字を変更

操作方法

  1. アニメキャストの選択枠の中心の「＋」をタッチ。メニューから「sec...」とローマ字で書かれた部分をタッチして変更します
  2. 最初の数字は秒です。小数点がつかえます。８秒にしましょう。
  3. ：の右側がアニメキャストのページです。「．」が最初のページ、「ａｉｕｅｏ」が２から６ページを表します。ローマ字の子音でも画像が切り替わりますが、絵を切り替える場合は母音だけつかうとよいでしょう。「8.0:.aiueooo」と入力してください。８秒で８文字です。
  4. プレイボタンで再生。１秒で１枚ずつ絵が表示されます

９．速く切り替える

操作方法

  1. アニメキャストの選択枠の中心の「＋」をタッチ。メニューからローマ字をタッチ
  2. 「8:..a.iauieuoeoeoe」と入力してください。８秒で１６文字です。これで0.5秒ごとに絵が切り替わることになります。プレイボタンで再生してみてください。

10．アニメキャストにラベルをつける

操作方法

ローマ字では「.aiueo」の６枚で絵を切り替えますが、もっと絵の数を増やしたい場合は、ラベルを使います。

  1. アニメキャストの選択枠の中心の「＋」をタッチ。メニューから「アニメを修正」
  2. ２ページの左上のすきまをタッチ。メニューから「ラベル入力/変更」で「ａ」を入力します。
  3. 同様に３ページのラベルを「ｉ」
  4. ４ページのラベルを「ｕ」
  5. ５，６ページのラベルを「ｅ」「ｏ」にします。ここで「ａｉｕｅｏ」に設定しましたが、別の半角英数１文字でもかまいません。１ページは何をいれても「．」になります。
  6. ７ページのラベルを「Ｘ」にしましょう。
  7. 画像入力ボタンで７枚目の絵をいれます。
  8. 画面の上の太文字の左側をタッチ。メニューから「このアニメにもどる」で、元のアニメにもどります。

11．ローマ字ラベルを「X」に変更

操作方法

  1. アニメキャストの選択枠の中心の「＋」をタッチ。メニューからローマ字をタッチ
  2. 「8:..a.iauieuXeXeXe」に変更してみましょう。プレイボタンで再生してみてください。「X」の文字のときに新しくいれた絵が表示されます。

12．長い音楽にあわせる方法

操作方法

  1. 先頭ページに「♪」ボタンで音楽のファイルをいれます。MP3、WAVの音ファイルが使えます。
  2. 上の方法をつかって、１小節分のアニメキャストを作ります。ローマ字の前の時間（秒）を１小節の長さに調整してください。0.01秒単位で長さを指定できます。コロン「:」の右側にローマ字またはラベル１文字いれると、全音符、２文字で２分音符、４文字で四分音符のようになります。同じ絵を続ける場合は、同じ文字を並べます
  3. ページにアニメキャストをいれたら、選択した状態で、ページの時間をタッチすれば、一番下の項目がアニメキャストの指定した時間になります。
  4. ２ページ以降、同じ時間のページを作成し、アニメキャストを複製してください。
  5. 各ページが音楽の１小節に対応するので、音楽の音符にあわせて、ローマ字の文字を修正します。文字の修正だけなので、タイムライン方式の他のアプリをつかうより、はるかに簡単に音楽にあわせた動きがつくれます
  6. プレイボタンで再生してみましょう。場合によっては、同期がすこしずつずれてくることもあるでしょう。その場合は、先頭のページ番号をタッチ「ページの指定ここから」。最後のページをタッチ「ページの指定ここまで」で全体を選択してから、ページの時間をタッチすれば「まとめて調整する」で、全体の時間を調整できます。音楽と同期して動くように全体の長さを調整してください。

13．動画出力

操作方法

  1. 完成したら、ファイルメニュー「動画出力」ですきなサイズ、すきなフレームレートのMP4動画が作成できます。パソコン版では最初に保存場所を指定します。スマホ版では、端末内部の「ダウンロード」フォルダのなかの「9VAe」フォルダにファイルができます。写真アプリでも再生できるはずです。

歌詞動画の例

dreamin' bird


www.youtube.com

アニメ（アマビエ）は以下のようにして作っています。

  • 胴体固定（背景）
  • 髪のゆらぎはキャスト
  • 歌詞はフレーズごとに調整してキャスト
  • 口パクは母音のみ５つのパーツを作り、歌詞と同様にキャスト
  • ギターのコードごとに左手の形のパーツを作成、位置合わせしてキャスト
  • 右手の腕、指のストローク・タッピングは数種類作成してキャスト
  • (1)歌詞(2)口の動きを曲に連動
  • ギターは実際に弾いているコードではない
  • 弦と手の動きを何種類かのキャストにして割当て
  • 口パクは「あ」「い」「う」「え」「お」の5種類の母音をキャストに 　子音は考慮せず母音で統一
  • 口パクをリアルに近づけるときもちわるい絵になりますｗ

EllE


www.youtube.com

  • (1)歌詞(2)ギターコードと弦の動きを曲に連動
  • 曲で使われているコード数種類をキャストして割当て
  • 特殊なストロークとタッピングは別のキャストで割当て
  • 口パクは発声している箇所だけ「あ」「い」「お」の3種類をてきとうに繰り返し
  • グリーンバックのアニメにしてFilmoraという有料アプリで実写と合成。 　実写はフリー素材

アニメキャストについて、こちらも参考になります。＞ベクトルとビットマップの違い

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

↑これを見るとダウンロード、キーフレーム補間、SVGイラストをパーツ化して口パクさせる方法がわかります。パソコンでもiPadでも同じ操作です。

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定すると解説動画が作れます。
  • Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
  • FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
（ペイントに貼り付けて保存）
 Mac
  • Shift + Command + 4 （ShiftキーはZの左、スペースでウィンドウ指定）
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ＞
ライブラリ＞
Screenshots
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真＞
アルバム＞
スクリーンショット
 Linux Mint
  • Print Screen キー
クリップボード
ファイル
 Amazon Fire
  • 電源 + 音量Down １秒長押し
  • USBケーブルでPCと接続し、
    設定＞接続デバイス＞USB＞ファイル転送
ピクチャ >
スクリーンショット
 Chromebook
  • Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）
マイファイル >
ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

f:id:dnjiro:20220119095713g:plain

  1. 画像入力ボタン「山」でキャプチャ画像を読み込む
  2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
  3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

  1. 文字入力ボタン「A」で数字を入力
  2. 角の■をドラッグでサイズ変更。
  3. 中心の「＋」または枠線のドラッグで移動
  4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
  5. 折れ線ボタンをクリック
  6. 開始点
  7. 終了点
  8. 選択ボタンで入力終了
  9. 太さ設定ボタン。メニューから「太くする」で太くできます。
  10. 文字入力ボタン「A」で説明文章を入力
  11. 背景の色を設定
  12. 線の種類メニューの「ー」で枠線がつきます
  13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

f:id:dnjiro:20220119140955g:plain

  1. 文字を選ぶ
  2. 文字タブ２をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ１をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

ひとコマアニメーションにする

  1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
  2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
  3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

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

 

 

9VAeをつかえば素材動画が作れる 

      • 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
      • Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
      • 動画編集ソフトで動画に合成できます。

OS

無料動画ソフト

9VAeで作れる素材

Windows

CapCut

AviUtl

MP4

連番PNG または MP4

Mac/iPhone/iPad

CapCut

iMovie

MP4 

MP4

Android

CapCut

PowerDirector

MP4

GIF または MP4

作り方

 

      • もっと長いアニメを作ることもできます。以下をご覧ください。

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

 

 

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

 

 

１万円台の低価格タブレットで、２分割画像を作成する方法

動画 アニメの作り方 開発

１万円台で入手できる、Androidタブレットや Amazon Fireタブレットで、２分割、４分割画像を作成する方法を解説します。いらすとやのイラストを動かす方法はこちら。

ほかの解説動画はこちら。

内容：

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

アプリはフリーソフト9VAeきゅうべえを使います。下からダウンロードできます

操作方法

  1. 9VAeきゅうべえアニメ研究所をひらき、Downloadをタッチ
  2. ダウンロードする9VAeのアイコンをタッチ
  3. パソコン版は右上のダウンロードボタン。スマホ、タブレット版はアプリストアから「インストール」して開きます
  4. Mac版は解凍したあと、右ボタンメニューから「開く」を２回。Win版は「詳細情報」から実行します

２．画像を１枚読み込む、画像の幅を設定

操作方法

  1. 9VAeを起動したら、右側の画像ボタンをタッチし、画像を選びます。スマホ版でパレットが消えている場合は右下の「もどす」ボタン
  2. 画像を読み込んだら、ファイルメニュー（パソコン版はページメニュー）から「ページ設定」で、画像の幅を画像２枚分のサイズにします。画像サイズは画像をタッチすれば下に表示されます。（この数値は編集時の仮の値で、実際の画像サイズは出力時に設定できます）
  3. 画像をタッチして選択し、配置メニュー（パソコン版は調整メニュー＞整列）から「左に寄せる」。これで画像が左端に配置されます。

３．２枚目を読み込む

操作方法

  1. 右側の画像ボタンをタッチし、画像を選びます。
  2. 配置メニュー（パソコン版は調整メニュー＞整列）から「右に寄せる」。これで画像が右端に配置され、２分割画像ができます。
  3. 左下の虫眼鏡ボタンで全体が見えます

４．画像を出力

操作方法

  1. ファイルメニュー＞画像出力で、画像サイズを設定すれば、PNG画像が出力されます
  2. スマホ版は、端末本体の、ダウンロードのなかの「9VAe」フォルダの中に出力されます。写真アプリでも見えるはずです

５．４分割画像の作り方

操作方法：続けて４分割画像の作り方

  1. ファイルメニュー（パソコン版はページメニュー）から「ページ設定」で、画像の高さを画像２枚分のサイズにします。画像サイズは画像をタッチすれば下に表示されます。（この数値は編集時の仮の値で、実際の画像サイズは出力時に設定できます）
  2. 外からドラッグして画像２枚選択
  3. シフトボタンを押してから、選択枠中央の「＋」メニューから「複製」
  4. シフト＋複製で同じ位置に複製されます
  5. 配置メニュー（パソコン版は調整メニュー＞整列）から「下に寄せる」。これで画像が下端に配置され、４分割画像ができます。
  6. 左下の虫眼鏡ボタンで全体が見えます
  7. 左下の画像をタッチして選択
  8. 選択枠中央の「＋」メニューから「絵・写真の変更」
  9. 右下の画像をタッチして選択
  10. 選択枠中央の「＋」メニューから「絵・写真の変更」

これで４分割画像ができました。

ファイルメニュー＞画像出力で、画像サイズを設定すれば、PNG画像が出力されます。

 

 

 

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

↑これを見るとダウンロード、キーフレーム補間、SVGイラストをパーツ化して口パクさせる方法がわかります。パソコンでもiPadでも同じ操作です。

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定すると解説動画が作れます。
  • Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
  • FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
（ペイントに貼り付けて保存）
 Mac
  • Shift + Command + 4 （ShiftキーはZの左、スペースでウィンドウ指定）
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ＞
ライブラリ＞
Screenshots
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真＞
アルバム＞
スクリーンショット
 Linux Mint
  • Print Screen キー
クリップボード
ファイル
 Amazon Fire
  • 電源 + 音量Down １秒長押し
  • USBケーブルでPCと接続し、
    設定＞接続デバイス＞USB＞ファイル転送
ピクチャ >
スクリーンショット
 Chromebook
  • Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）
マイファイル >
ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

f:id:dnjiro:20220119095713g:plain

  1. 画像入力ボタン「山」でキャプチャ画像を読み込む
  2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
  3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

  1. 文字入力ボタン「A」で数字を入力
  2. 角の■をドラッグでサイズ変更。
  3. 中心の「＋」または枠線のドラッグで移動
  4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
  5. 折れ線ボタンをクリック
  6. 開始点
  7. 終了点
  8. 選択ボタンで入力終了
  9. 太さ設定ボタン。メニューから「太くする」で太くできます。
  10. 文字入力ボタン「A」で説明文章を入力
  11. 背景の色を設定
  12. 線の種類メニューの「ー」で枠線がつきます
  13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

f:id:dnjiro:20220119140955g:plain

  1. 文字を選ぶ
  2. 文字タブ２をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ１をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

ひとコマアニメーションにする

  1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
  2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
  3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

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

 

 

9VAeをつかえば素材動画が作れる 

      • 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
      • Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
      • 動画編集ソフトで動画に合成できます。

OS

無料動画ソフト

9VAeで作れる素材

Windows

CapCut

AviUtl

MP4

連番PNG または MP4

Mac/iPhone/iPad

CapCut

iMovie

MP4 

MP4

Android

CapCut

PowerDirector

MP4

GIF または MP4

作り方

 

      • もっと長いアニメを作ることもできます。以下をご覧ください。

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

 

 

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

 

 

Python パイソンで エクセル表からファイルを作る方法

開発 教育 python

Python パイソンで エクセル表からファイルを作る方法を解説しました。Pythonで アニメを作る方法はこちら。Pythonの使い方はこちら

ほかの解説動画はこちら。

目次

Python (パイソン) の入手

Windows の場合

ラズベリーパイの場合

Mac の場合

  • M1版 Macの場合、Python.jpのフルインストーラ版から、ダウンロードするのが簡単。ここ（pythonlinks.python.jp） からダウンロードできます。
  • Intel 版 Mac では、python (Ver2), python3(Ver3) が最初からはいっており、ターミナルから使えました。
  • ターミナルは「アプリケーション＞ユーティリティ」の中にはいっています。ドックの上にターミナルアイコンをドラッグして登録しておくとよいでしょう。

python2 と python3 の違い

  • python2 と python3 で書き方が違うところがあるので注意（ネット上には、python2のプログラムもあり、そのまま python3で動かすとエラーになります）
  • プログラムに日本語を入れたいとき（表示したい文字が日本語など）は、python3 を使います。

 

Python (IDLE) の起動

Pythonを使ってみましょう。基本的な IDLE を使ってみます。

Windows の場合

  1. Windowsボタンをクリックし「python」と入力して、アプリ　IDLE(Python) を実行。
  2. ターミナルから「idle」を実行してもかまいません。Python という名前で IDLE が起動します。

ラズベリーパイの場合

  1. 画面左上の Raspi ボタン＞Programming(プログラミング) > Python の Shell ウィンドウ（実行画面）が開きます。

 

IDLE（Python）の操作

  1. Fileメニューから、New File を実行。エディタがひらきます
  2. ここに下のようなプログラムを入れます 
  3. Run メニューから、Run Module を実行
  4. Pythonウィンドウで実行されます。エラーがあれば、ここに表示されます

Python のプログラム 例１

下のような Python プログラムをいれてみましょう。

  1. エクセルから出力した CSVファイルを開く
  2. CSVファイルの各行を読み込んで、１行ずつ出力
  3. 終了を表示して入力待ちする

プログラム例を示します。

import os         # ファイル操作
srcCSV = "c:/test/test.csv"    # CSVファイル
fr = open(srcCSV,'r')
for ln in fr:
    print(ln)
fr.close()
a = input("***end*** ")
  • import os は、ファイル処理するときに必要です
  • srcCSV は、CSVファイルのフルパス。パスの区切りは「/」です
  • open がファイルを開く関数。'r' は読み出しの意味。
  • for ln in fr: は、ファイルを１行ずつ読み出して、ln にいれるの意味
  • print() でなかの変数を表示
  • Input() 文字入力関数で、"***end*** " を表示して入力待ちになります

UnicodeDecodeError: 'cp932' codec can't decode エラー

上のプログラムを実行すると、上のエラーが出ました。

cp932 は、Shift-JISのことです。open に 「encoding="utf-8"」をいれるとエラーが出なくなりました

fr = open(srcCSV,'r',encoding="utf-8")
  • Python のプログラムは、文字コード utf-8 で書かないといけないのですが、ファイル open の文字コードが、何も書かないと、Shift-JIS になるようです。初期のころ、Windows も Mac も日本語の標準が Shift-JISだったなごりでしょう

 

Python のプログラム 例２

プログラムを改造していきましょう。

  1. エクセル行の最初の値が「Folder」の場合、その後ろにある文字列をとりだして、その名前のフォルダを作成する
  2. ルートフォルダの場所は、先頭で指定

下のようなCSVファイルを想定しています。

Folder,aaa,bbb,ccc
Data1,100,101,102
Data2,200,201,202

プログラム例を示します。

import os         # ファイル操作
import csv        # CSV処理
srcCSV = "c:/test/test.csv"    # CSVファイル（各自の環境に合わせて修正）
outDIR = "c:/test/"            # 出力先フォルダ（各自の環境に合わせて修正）
fr = open(srcCSV,'r')
cr = csv.reader(fr)
for ln in cr:
    if ln[0] == "Folder":
        for nm in ln[1:]:
            dir = outDIR+"/"+nm
            if not os.path.exists(dir):
                os.mkdir(dir)
                print(ln)
fr.close()
a = input("***end*** ")
  • import csv で、csv.reader が使えるようになります
  • for ln in cr: の ln は、リスト（文字列の配列）になります
  • ln[0] は最初の文字列（先頭は０）
  • for nm in ln[1:] の ln[1:] はリストの２番目から最後まで。nmは名前になります
  • os.path.exists(dir) がファイル・フォルダの存在チェック
  • os.mkdir(dir) でフォルダ作成

Runメニュー＞Run Module で実行します。エラーがなければ aaa,bbb,cccフォルダが作成されるはずです。

Python のプログラム 例3

さらに、プログラムを次のように改造しましょう。

  1. 作成した各フォルダの中に、テキストファイルを作成し、値をいれる
  2. テキストファイル名は、先頭列の名前にする

下のようなCSVファイルを想定しています。

Folder,aaa,bbb,ccc
Data1,100,101,102
Data2,200,201,202

プログラム例を示します。

import os         # ファイル操作
import csv        # CSV処理
srcCSV = "c:/test/test.csv"    # CSVファイル（各自の環境に合わせて修正）
outDIR = "c:/test/"    # 出力先フォルダ（各自の環境に合わせて修正）
dirs = ""
fr = open(srcCSV,'r')
cr = csv.reader(fr)       # csv読み出し
for ln in cr:             # １行リスト
  if ln[0] == "Folder":
    dirs = ln             # フォルダ名を記憶
    for nm in ln[1:]:
      dir = outDIR+"/"+nm
      if not os.path.exists(dir):
        os.mkdir(dir)
        print(nm)
    continue  # Folder行終了
  for id,nm in enumerate(ln): #番号id と中身nm を取り出す
    if id > 0:
      txt = outDIR+"/"+dirs[id]+"/"+ln[0]+".txt"
      if os.path.exists(txt):
        os.remove(txt)    # 存在していたファイルを削除
      fw = open(txt,'x')  # 'x'新規 'w'既存ファイルに書き込み 'a'追記
      fw.write(nm)        # 項目をテキストに書き込みます
      fw.close()          # 書き込み終了
fr.close()
a = input("***end*** ")

Runメニュー＞Run Module で実行します。エラーがなければ 下のようなフォルダとファイルが作成されるはずです。

test
　　├──aaa
　　│　　　　├──Data1.txt　　　　
　　│　　　　└──Data2.txt　　　　
　　├──bbb
　　│　　　　├──Data1.txt　　　　
　　│　　　　└──Data2.txt　　　　
　　├──ccc
　　│　　　　├──Data1.txt　　　　
　　│　　　　└──Data2.txt

改行コードを指定する方法

上のプログラムを Windowsで実行すると、改行コードが、CR,LF になります。

  1. open の引数に "b"をつける。これで書き出しがバイナリーモードになります
  2. 文字列の出力のうしろに、.encoding() をつけます。
  3. LFは、文字列「"\n"」、CRは、文字列「"\r"」を出力します

上のプログラムの修正箇所

      lf="\n" #改行(LF)
      fw = open(txt,'xb')  # 'b'バイナリー
      fw.write(nm.encode())
      fw.write(lf.encode())

 

さらに勉強をすすめたいなら

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

 

 

 

 

PNG画像の背景を透明にする方法

動画 アニメの作り方 開発

背景が透明なPNG画像の作り方を解説します。

ほかの解説動画はこちら。

 

透過PNGとは

  • PNG形式の画像は、画像の一部を透明・半透明にできます。
  • 下のアイコンの周りの青い色を透明にしてみます。



スマホ、Windows＞remove.bg（Webサイト）

操作方法

  1. remove.bg を検索してひらく。クッキーについての説明「閉じる」
  2. 画像をアップロード
  3. 自動的に背景が透明になるので、OKならダウンロード
  4. 修正したい場合、「削除/復元(Erase/Restore)」ペンをタッチ
  5. 「Magic Brush」をONにして、修正したい部分をなぞって修正
  6. 「完了(Done)」＞「ダウンロード」で結果を取得

 

Mac＞プレビュー

  • Mac のプレビューで、透明にしたい部分を範囲選択し、削除して保存すれば、削除した部分が透明なPNGができます。
  • 画面を拡大して１画素単位で削除できるので、商用利用の場合はこちらで調整するとよいです

 

内容：

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

↑これを見るとダウンロード、キーフレーム補間、SVGイラストをパーツ化して口パクさせる方法がわかります。パソコンでもiPadでも同じ操作です。

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定すると解説動画が作れます。
  • Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
  • FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
（ペイントに貼り付けて保存）
 Mac
  • Shift + Command + 4 （ShiftキーはZの左、スペースでウィンドウ指定）
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ＞
ライブラリ＞
Screenshots
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真＞
アルバム＞
スクリーンショット
 Linux Mint
  • Print Screen キー
クリップボード
ファイル
 Amazon Fire
  • 電源 + 音量Down １秒長押し
  • USBケーブルでPCと接続し、
    設定＞接続デバイス＞USB＞ファイル転送
ピクチャ >
スクリーンショット
 Chromebook
  • Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）
マイファイル >
ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

f:id:dnjiro:20220119095713g:plain

  1. 画像入力ボタン「山」でキャプチャ画像を読み込む
  2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
  3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

  1. 文字入力ボタン「A」で数字を入力
  2. 角の■をドラッグでサイズ変更。
  3. 中心の「＋」または枠線のドラッグで移動
  4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
  5. 折れ線ボタンをクリック
  6. 開始点
  7. 終了点
  8. 選択ボタンで入力終了
  9. 太さ設定ボタン。メニューから「太くする」で太くできます。
  10. 文字入力ボタン「A」で説明文章を入力
  11. 背景の色を設定
  12. 線の種類メニューの「ー」で枠線がつきます
  13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

f:id:dnjiro:20220119140955g:plain

  1. 文字を選ぶ
  2. 文字タブ２をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ１をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

ひとコマアニメーションにする

  1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
  2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
  3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

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

 

 

9VAeをつかえば素材動画が作れる 

      • 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
      • Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
      • 動画編集ソフトで動画に合成できます。

OS

無料動画ソフト

9VAeで作れる素材

Windows

CapCut

AviUtl

MP4

連番PNG または MP4

Mac/iPhone/iPad

CapCut

iMovie

MP4 

MP4

Android

CapCut

PowerDirector

MP4

GIF または MP4

作り方

 

      • もっと長いアニメを作ることもできます。以下をご覧ください。

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

 

 

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

 

 

9VAeきゅうべえの色処理の調査

動画 アニメの作り方 開発

無料アプリ9VAeきゅうべえの色処理に誤差が生じているのでは、という報告があったので、調べてみました。

ほかの解説動画はこちら。

 

9VAeきゅうべえとは

  • 9VAe は、イラストに動きをつけてオリジナル動画素材が作れる無料のモーショングラフィックスアプリです。上のタイトルも9VAeで作成しました。

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

白の値、色再現性

9VAeに白い画像とカラーパレットを配置し、それを出力したときに白色がどういう値になるか、カラーパレットの色の値が再現されるか調べました。

OS 
 Windows版 
 Windows11(WSA)版 
Mac版
 ios/iPad版 
 Android版 
  
PNG出力 ff ff ff, ok ff ff ff, ok ff ff ff, ok ff ff ff, ok  ff ff ff, ok  
アニメGIF出力 ff ff ff, ok* ff ff ff, ok* ff ff ff, ok* ff ff ff, ok*  ff ff ff, ok*  
MP4出力 fc ff fc, no ff ff ff, no ff ff ff, no ff ff ff, no ff ff ff, no  

 

  • Windows版のMP4出力で、白の値が変わっていますが、MP4動画を作成する前の連番画像の白は（ff ff ff）でした。したがって、ffmpegの処理で色がかわっているようです。MP4動画は非可逆圧縮で、色情報も極力情報量を減らすため、色情報が変わるのもやむを得ないみたいです。また、MP4を再生するプレーヤーの特性や、色空間やホワイトバランスなども関連するようで、値を合わせるのは難しいみたいです。
  • アニメGIFは色が２５６色に制限されており、画像の色が２５６色以内なら再現されています

 

内容：

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

↑これを見るとダウンロード、キーフレーム補間、SVGイラストをパーツ化して口パクさせる方法がわかります。パソコンでもiPadでも同じ操作です。

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定すると解説動画が作れます。
  • Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
  • FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 Mac
  • Shift + Command + 4 （ShiftキーはZの左、スペースでウィンドウ指定）
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ＞
ライブラリ＞
Screenshots
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真＞
アルバム＞
スクリーンショット
 Linux Mint
  • Print Screen キー
クリップボード
ファイル
 Amazon Fire
  • 電源 + 音量Down １秒長押し
  • USBケーブルでPCと接続し、
    設定＞接続デバイス＞USB＞ファイル転送
ピクチャ >
スクリーンショット
 Chromebook
  • Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）
マイファイル >
ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

f:id:dnjiro:20220119095713g:plain

  1. 画像入力ボタン「山」でキャプチャ画像を読み込む
  2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
  3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

  1. 文字入力ボタン「A」で数字を入力
  2. 角の■をドラッグでサイズ変更。
  3. 中心の「＋」または枠線のドラッグで移動
  4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
  5. 折れ線ボタンをクリック
  6. 開始点
  7. 終了点
  8. 選択ボタンで入力終了
  9. 太さ設定ボタン。メニューから「太くする」で太くできます。
  10. 文字入力ボタン「A」で説明文章を入力
  11. 背景の色を設定
  12. 線の種類メニューの「ー」で枠線がつきます
  13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

f:id:dnjiro:20220119140955g:plain

  1. 文字を選ぶ
  2. 文字タブ２をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ１をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

ひとコマアニメーションにする

  1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
  2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
  3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

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

 

 

9VAeをつかえば素材動画が作れる 

      • 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
      • Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
      • 動画編集ソフトで動画に合成できます。

OS

無料動画ソフト

9VAeで作れる素材

Windows

CapCut

AviUtl

MP4

連番PNG または MP4

Mac/iPhone/iPad

CapCut

iMovie

MP4 

MP4

Android

CapCut

PowerDirector

MP4

GIF または MP4

作り方

 

      • もっと長いアニメを作ることもできます。以下をご覧ください。

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

 

 

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

 

 

フリパクリップやアイビスペイントより簡単な、ベクトルアニメの作り方

動画 解説動画 アニメの作り方

フリパクリップやアイビスペイントはビットマップ方式のアニメーションアプリなので絵を何枚もかかないといけません。それに対し、ベクトル方式の9VAeきゅうべえは、絵をほとんど描かずにアニメが作れます。ベクトルアニメーションの作り方を解説します。イラストを動かす方法はこちら

ほかの解説動画はこちら。


youtubeでみる

9VAeきゅうべえとは

  • 9VAe は、イラストに動きをつけてオリジナル動画素材が作れる無料のモーショングラフィックスアプリです。この解説も9VAeで作成しました。

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

 

フリパクリップや最近アニメも作れるようになったアイビスペイントはビットマップ方式のアプリです。セルアニメーションの作り方で、絵を何枚も描けるアニメータに適したツールです。

アニメを動かすには、絵が何枚必要かを考え、各フレームの絵を描く必要があります。これは初心者にとって大変な作業です。

 

9VAeきゅうべえは、絵を描くのが苦手な人でも、アニメが作れるよう設計されたアプリです。動きをみてから、おかしい部分を後から簡単に修正できます。ビットマップ方式では何枚も絵を描きなおす必要があるため大変です。

 

フリパクリップと、9VAeきゅうべえはアニメの作り方が全く違います。説明しましょう。なお9VAeでも何枚も絵を描くことができ、ビットマップ方式と同じこともできます。

 

ビットマップ方式とベクトル方式の違い

  • ビットマップ方式とベクトル方式では、絵の記録方法が違います。ビットマップ方式は、絵の色情報を１ドットごとに記録する方法で、写真や動画の保存に使われます。アプリではペイントブラシが有名です。
  • ベクトル方式は、絵を図形の重なりで表現する方法で、各図形の色と頂点の座標を記録します。プレゼンテーションソフトの PowerPoint やイラストレータが有名です。
  • フリパクリップは、ビットマップ方式で、9VAeきゅうべえはベクトル方式です。

  • ビットマップ方式は画像を縮小すると、１ドットにたくさんの色が混ざります。それを拡大すると、混ざった色から元の色が復元できないのでぼんやりした絵になります。線と線を重ねると、下の線の色が消えてしまうため、あとから線を分離しすることができません。
  • ベクトル方式は、画像を拡大・縮小すると、頂点の座標を拡大、縮小してから図形を描きなおすので、拡大、縮小を繰り返してもぼけません。図形は別々に描画するので、重なっている図形をばらばらに分解することができます。
  • 後から編集したい場合はベクトル方式が優れています。

 

 

ボールがはずむ

フリパクリップを最初に起動すると、ボールがはずむアニメーションの作り方が説明されます。絵を順番に描きますが、実際の動きをフレームに分割した形を描く必要があります。その絵が描ける人がアニメータで、フレーム分解がうまくできれば、気持ち良い動きになります。

9VAeは、フレーム分解ができない人を対象にしており、つぎのようにします。

・まずボールがはずむ動きをつくる

・動きのタイミングをグラフで調整する

・動きの速さを調整する

この操作を行う過程で、絵を描きなおす必要がありません。

具体的な方法を説明しましょう。

 

続きのページを作成、移動

往復をいれる

時間調整

登録して動きグラフをつける

 

動きのパーツ化

  • 9VAeのもう一つの特長は、動きのパーツ化です。アニメをつくると、人が歩きながら進むとか、鳥が羽ばたきながら飛ぶとか、繰り返して動くパーツが移動するシーンがよくあります。
  • このアニメーションを作るときに、歩いている人、羽ばたいている鳥をまず作成し、それを軌道に沿って移動させるように作れば制作が簡単になります。フリパクリップでは、同じ操作を繰り返すにはフレームをコピーする必要があります。それを少しずつ移動させなければならず非常に大変です。
  • 9VAeは、簡単にパーツ化ができます。パーツアニメのことをアニメキャストと呼びます。

複数ページを選択してカット

アニメキャストの作成

次ページにリンクコピー

動き矢印を修正

アニメキャストは図形と同じように扱える

  • アニメキャストを図形と同じように扱えるのが9VAeのすごい点です。
  • 拡大縮小、点の修正、色の変更、複製など、普通の図形と同じように処理できます。ほかのアプリではパーツ化したものは通常の図形とは異なり、専用の処理しかできないことが多いです。9VAeは同じ操作ができるので覚えることが少ないです。
  • アニメキャストと図形を選んで、新しいアニメキャストを作ることも普通にできます。これで階層的なパーツ化ができるので、かなり複雑なアニメが作れます。

アニメキャストを複製して色をつける

アニメキャストを別のアニメにして修正

  • 同じパーツは同じアニメキャストにしておけば、１ヶ所修正すれば、全部が修正されます。
  • 別のアニメにして修正すれば、別のパーツになります。

 

 

内容：

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえで作成しています。

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

↑これを見るとダウンロード、キーフレーム補間、SVGイラストをパーツ化して口パクさせる方法がわかります。パソコンでもiPadでも同じ操作です。

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定すると解説動画が作れます。
  • Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
  • FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 Mac
  • Shift + Command + 4 （ShiftキーはZの左、スペースでウィンドウ指定）
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ＞
ライブラリ＞
Screenshots
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真＞
アルバム＞
スクリーンショット
 Linux Mint
  • Print Screen キー
クリップボード
ファイル
 Amazon Fire
  • 電源 + 音量Down １秒長押し
  • USBケーブルでPCと接続し、
    設定＞接続デバイス＞USB＞ファイル転送
ピクチャ >
スクリーンショット
 Chromebook
  • Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）
マイファイル >
ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

f:id:dnjiro:20220119095713g:plain

  1. 画像入力ボタン「山」でキャプチャ画像を読み込む
  2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
  3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

f:id:dnjiro:20220119131719g:plain

  1. 文字入力ボタン「A」で数字を入力
  2. 角の■をドラッグでサイズ変更。
  3. 中心の「＋」または枠線のドラッグで移動
  4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
  5. 折れ線ボタンをクリック
  6. 開始点
  7. 終了点
  8. 選択ボタンで入力終了
  9. 太さ設定ボタン。メニューから「太くする」で太くできます。
  10. 文字入力ボタン「A」で説明文章を入力
  11. 背景の色を設定
  12. 線の種類メニューの「ー」で枠線がつきます
  13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

f:id:dnjiro:20220119140955g:plain

  1. 文字を選ぶ
  2. 文字タブ２をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ１をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

ひとコマアニメーションにする

  1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
  2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
  3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

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

 

 

9VAeをつかえば素材動画が作れる 

      • 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
      • Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
      • 動画編集ソフトで動画に合成できます。

OS

フリーソフト

9VAeで作成する素材動画

Windows

AviUtl

連番PNG または MP4

Mac/iPhone/iPad

iMovie

MP4 または　QuickTime(古いMac)

Android

PowerDirector

GIF または MP4

作り方

 

      • もっと長いアニメを作ることもできます。以下をご覧ください。

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

 

 

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