dnjiro’s 9VAe blog

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

ミャクミャク様の二次創作してみた:ひとコマ解説

ミャクミャク様は2025年大阪・関西万博キャラクタです。二次創作が許可されたので早速作ってみました。

 

作り方を解説します。ほかの解説動画はこちら

 

 

ミャクミャク様とは

  • ミャクミャクはいろんな形に変化するらしいです。上は一例で全く同じものは認められません。自由に変形できるベクトルアニメーションむきのキャラクタと言えます。

 

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

ミャクミャク様の二次創作には 9VAeきゅうべえを使いました。

 

ミャクミャク様キャラクタの顔をつくる

公式キャラクタの絵を画面キャプチャして下書きにします。

  1. ミャクミャクを画面キャプチャして保存します。
  2. 9VAeの先頭ぺーじに背景ページを作ります。
  3. ミャクミャクの画像を背景ページにいれまず。
  4. ページをタッチして、2ページに移動します。
  5. +ボタンで拡大できます。
  6. 塗り色のカラーパレットを開きます。
  7. 「画面から色を選ぶ」
  8. 顔をタッチして、顔の色を選びます。
  9. まるを描くボタンを選びます。
  10. 中心から顔のまるを描きます。
  11. 選択ボタンを押すと周りに選択枠が表示されます。
  12. 中心をドラッグすると移動できます。
  13. 選択枠中心の「+」のメニューから「複製する」
  14. 中心をドラッグすると移動できます。
  15. パレットの下をタッチすると画面が広がります。
  16. 複製と移動をつかって顔をつくります。
  17. 選択枠の辺の■をドラッグすると、楕円が作れます。
  18. 外側からドラッグして顔全体を選びます。
  19. 右下の「もどす」でパレットが表示されます。
  20. 線種のパレットで線を「なし」にします。
  21. パレットの「+」をタッチし登録します。
  22. 登録したパレットをタッチし「下と重ねる」で顔が透けて見えます。

 

ぐるぐるまわる目をつくる

目を描いてアニメキャストにする

  1. 赤い顔は登録して「下と重なる」を設定すれば、背景が透けて見えます。これをもとに目を描きましょう。
  2. 虫眼鏡の左の「+」で拡大できます。
  3. 登録パレットのメニューから「固定」を設定。これで赤い顔が選択できなくなります。
  4. まるをかくボタンをタッチ
  5. 塗り色を「白」にします。
  6. 下の「Shift」をおしてから描くと、円が描けます。(中心からドラッグ)
  7. 塗り色を「黒」にします。
  8. 黒目を描きます。
  9. 選択ボタンを押して選択モードにします。
  10. 外からドラッグして目を選びます。
  11. 「カット」ボタンで、目をきおくツールに切り取ります。
  12. 「←q」ボタンでアニメキャストを作ります。名前は「eye」にしましょう。アニメキャストにするときれいに回転させられます。
  13. 虫眼鏡ボタンで全体が表示されます。
  14. 選択枠中心の「+」から「複製する」で目を複製します。
  15. 中心をドラッグして移動します。
  16. 選択枠の角の■をドラッグして回転します。
  17. 同様に複製、移動、回転してほかの目をつくります。

続きのページをつくって回転

  1. ページ右側の「+」から「続きのページを作ります」
  2. 目を選び、選択枠中心の「+」メニューから「枠の角度」を実行します。アニメキャストは角度を指定して回転できます。いくつかの目は360度を加えた値にしましょう。1回転します。
  3. 他の目を選んで+」メニューから「枠の角度」を実行します。いくつかの目は720度を加えた値にしましょう。2回転します。
  4. ページをタッチして2ページに移動します。
  5. ツールメニューから「繰り返し」命令を2ページに入れます。これで目がぐるぐる回転します。
  6. プレイボタンで見てみましょう。

 

胴体をサンプルからつくる

  1. ヘルプメニュー(パソコン版はヘルプ>サンプル)から「リミックス」を選びます。
  2. 画面の太字(new-sample)をタッチすると中にふくまれるアニメキャストのリストが表示されます。「who」を選ぶとアニメキャスト「who」が開きます。
  3. 1ページの番号1をタッチし、メニューから「ページの指定ここから」
  4. 2ページの番号2をタッチし、メニューから「ページの指定ここまで」。これで1ページから2ページまでが選ばれた状態になります。
  5. 「コピー」ボタンをタッチ。これで胴体がきおくツールにコピーされます。
  6. 「9VA」ボタンをタッチ。メニューの下に読み込んでいるファイルのリストが表示されます。ミャクミャク作成中のファイルを選んで切り替えます。
  7. 「←q」ボタンで胴体をアニメキャストにします。名前は「body」にしましょう。
  8. 「重なりを下にする」ボタンを何回かタッチし胴体が顔の下になるようにします。
  9. 選択枠「+」をドラッグして移動します。
  10. 選択枠の角の■をドラッグすると拡大できます。
  11. 辺の■をドラッグすると引き伸ばしできます。ミャクミャクの胴体にあわせて位置、サイズを調整します。
  12. 塗り色パレットから色を青にします。アニメキャストの色が青色になります。
  13. パレットの「+」で登録します。
  14. パレットをタッチし、メニューから「下と重ねる」で下が透けて見えます。
  15. 自由曲線を描くボタンをタッチ
  16. パレットで白色を選びます。
  17. 口を描きます。
  18. 「<<」ボタンで先頭ページに移動します。
  19. 1ページのページ番号1のメニューから「ページを切り取る」。これで背景ページがなくなります。
  20. 胴体を選び、中心の「+」から「アニメ(body)を修正」。これでアニメキャストの中が開きます。
  21. 胴体を選びます。
  22. 虫眼鏡の左側「+」で拡大
  23. 点追加削除ボタンをタッチ。
  24. 外からドラッグして頭の点を選びます。これを削除します。
  25. 消しゴムボタンで点が削除されます。
  26. 太字のファイル名をタッチ。メニューから「このアニメにもどる」でミャクミャクに戻ります。
  27. プレイボタンで、ミャクミャクが歩くところを見てみましょう。

 

リミックスのキャラクタをミャクミャクにする

  1. 1ページの番号1をタッチし、メニューから「ページの指定ここから」
  2. 2ページの番号2をタッチし、メニューから「ページの指定ここまで」。これで1ページから2ページまでが選ばれた状態になります。
  3. 「コピー」ボタンをタッチ。これでミャクミャクがきおくツールにコピーされます。
  4. ヘルプメニュー(パソコン版はヘルプ>サンプル)から「リミックス」を選びます。
  5. 6ページに移動します。
  6. 「←q」ボタンできおくツールのミャクミャクをアニメキャストにします。名前は「みゃくみゃく」にしましょう。
  7. リミックスのアニメキャストを選びます。
  8. 「9VA」ボタンでメニューを開きます。
  9. メニューの「みゃくみゃく」を選びます。「アニメキャストを入れ替えますか?」に「はい」。「他のページも修正しますか?」に「はい」を選ぶと、アニメキャストがミャクミャクに入れ替わります。
  10. アニメキャスト作成につかったミャクミャクを選びます。
  11. 「消しゴム」ボタンで削除します。
  12. 7ページに移動します。
  13. 文字を選んで、中心の「+」メニューから「文字の内容変更」。文字を「2025年大阪・関西万博に行こう」にしました。
  14. 9VAeキャラクタを選び、中心の「+」メニューから「つながった図形を選ぶ」。これで前の9VAeキャラクタがいっしょに選ばれます。
  15. 「消しゴム」ボタンで削除します。プレイボタンで再生してみましょう。

 

二次創作を公開するとよい場所とタグ

 

 

内容:


解説動画の作り方

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

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

 

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
  • FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 Mac
  • Shift + Command + 4 (スペースでウィンドウ指定)
デスクトップ
 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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

f:id:dnjiro:20220119154101g:plain

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

アニメGIF、動画出力

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

 

 

9VAe は素材動画が作れる無料アプリ 

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

OS

フリーソフト

9VAeで作成する素材動画

Windows

AviUtl

連番PNG または MP4

Mac / iPhone / iPad

iMovie

MP4 または QuickTime(古いMac)

Android / Chromebook

/ iPhone / iPad

PowerDirector

CapCut

GIF または MP4

MP4

作り方

 

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

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

 

 

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

 

 

Google フォームの使い方:ひとコマ解説

Googleフォームの使い方を説明します。

ほかの解説動画はこちら

 

Googleフォームとは

  • ユーザーアンケートや、イベント参加募集など、さまざまな、情報収集が無料で作成できるサービスです。

 

Googleアカウント作成、ログイン

  1. Googleアカウントサイトを開く。アカウントを持っていない場合は「アカウントを作成」をクリック。「自分用」をクリック
  2. 姓名をいれると、登録可能なユーザー名(メールアドレス)が入力されます。パスワードを2つ入力
  3. 「次へ」をクリック。電話番号の入力になります。ショートメッセージで6桁の番号が送られます(2段階認証)。その後、生年月日、性別などを入力。最後に「同意する」で、Googleアカウントがつくられます。
  4. 名前、または、ユーザー名(メールアドレス)を入力。
  5. 「次へ」。パスワードを入れるとログイン状態になります。

 

Googleフォーム作成と保存

  1. Googleアカウントにログインしたら右上の「9点ボタン」をクリック。
  2. 下にドラッグして「Forms」ボタンをクリック。Googleフォーム画面が開きます。
  3. 「+」ボタンをクリック。「無題のフォーム」ができます。
  4. 「無題のフォーム」をクリックし、中身がわかる名前に変更しましょう(後からいつでも変更できます)
  5. 名前の右側の「フォルダ」ボタンを押して、フォームを保存する場所を指定できます。最初は「マイドライブ」に作成されますが、たくさんのファイルがある場合、分類用フォルダを作成し、その中に移動しておくとわかりやすいでしょう。

 

フォームの入力アドレスは?

作成したフォームには、URLアドレスが割り当てられます。それをメールなどでおくれば、フォームにデータ入力してもらえます。

  1. Googleフォーム作成画面から、右上の「送信」ボタンをクリック。
  2. クリップボタンをクリック。Googleフォームの公開様URLアドレスが下に表示されます。「URLを短縮」にチェックすると短くできるので、こちらをコピーするとよいでしょう。
  3. 右下の「コピー」をクリック。これでURLアドレスがコピーされます。これをメールで送信するとか、SNSで公開すれば入力してもらえます。
  4. 「X」で送信画面を終了。コピーしたURLアドレスをブラウザのアドレス欄に入力して開けば、Googleフォーム入力のテストを行うことができます。

 

回答を表にまとめるには?(保存先の設定)

  1. Googleフォーム作成画面から「回答」タブをクリック。ここに結果がグラフで表示されます。
  2. 「3点」ボタンをクリック。「回答先を選択」をクリック。「新しいスプレッドシートを作成」を選んで「作成」。Formを保存した場所に(回答)という名前のスプレッドシート表計算)ができます。回答結果はここに追記されていきます。(「既存のスプレッドシートを選択」を選ぶと、すでにある表に回答のシートが追加できます)
  3. 表計算」ボタンをクリック。(回答)スプレッドシートが開きます。この結果を取得するには「ファイル」メニュー「ダウンロード」で、エクセル形式やPDFファイルでダウンロードできます。

回答の削除

  • 「回答」タブ>「個別」をクリック。回答が表示されるので、ゴミ箱ボタンでその回答を削除できます。
  • 上の作業をおこなっても、出力したスプレッドシートにはデータが残ります。

質問の作り方

  1. 質問の右側の▼をクリック。質問の種類が選べます。「記述式」は名前や数字など1行の文字入力です。
  2. 質問の内容を書きます。
  3. 右下の「・・・」をクリック。「説明」を選ぶと説明を追加できます。
  4. 説明を入れます。上の「山」ボタンで画像も追加できます。
  5. 右上の「+」で次の質問を入力できます。
  6. 最初はラジオボタンがはいります。質問を入れます。
  7. 選択肢を入れます。下のクリックで選択肢を追加できます。
  8. 下のコピーボタンで、質問が複製できます。

 

質問の種類 内容
ラジオボタン 複数項目から1つ選ぶ
チェックボックス 複数回答選択できる
プルダウン プルダウンメニューから1つ選ぶ
記述式 1行の自由記述
段落 複数行
均等目盛り 〇段階評価

 

回答後のメッセージ

  1. Googleフォーム作成画面から「設定」タブをクリック。
  2. 「プレゼンテーション」の右側の「V」ボタンをクリック。
  3. 「確認メッセージ」の下をクリックすれば、回答後のメッセージを変更できます。

グラフの作成

  1. Googleフォーム作成画面から「回答」タブをクリック。ここに結果がグラフで表示されます。
  2. グラフが表示されていない場合は「概要」
  3. 「コピー」ボタンをクリック。これでグラフがコピーされます。
  4. Googleドキュメントに貼り付けできます。

 

 

内容:


解説動画の作り方

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

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

 

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
  • FFmpeg を使って Youtube 動画にすることもできます。

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 Mac
  • Shift + Command + 4 (スペースでウィンドウ指定)
デスクトップ
 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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

f:id:dnjiro:20220119154101g:plain

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

アニメGIF、動画出力

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

 

 

9VAe は素材動画が作れる無料アプリ 

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

OS

フリーソフト

9VAeで作成する素材動画

Windows

AviUtl

連番PNG または MP4

Mac / iPhone / iPad

iMovie

MP4 または QuickTime(古いMac)

Android / Chromebook

/ iPhone / iPad

PowerDirector

CapCut

GIF または MP4

MP4

作り方

 

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

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

 

 

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

 

 

Springin' Classroom (スプリンギン)の使い方:ひとコマ解説

Springin' Classroom の使い方を説明します。

ほかの解説動画はこちら

 

Springin' Classroom とは

  • Springin' (スプリンギン) は、しくみデザインが開発した、手描きイラストに物理演算を働かせて、動く絵本やゲームが作れるアプリです。言語をつかわないので子供でも簡単にできるプログラミング開発環境といってもよいです。Springin' Classroom は、Springin' を学校教育向けに修正したもので、コインのやりとりやコンテスト応募をなくし、授業で使える教材などが追加されています(要アクティベート)。

Springin' Classroom ダウンロード

契約して使う教育機関向けのソフトとのことですが、無料で試用できます。学習用はこちらがおすすめ

Classroom でない Springin' はこちら

 

絵を描いてレイアウト

絵を描くのは簡単です。描き終わるとパーツになります。ドラッグして画面にレイアウトします。

  1. Springin' Classroom を起動。「アクティベートせずに試用」でスタート
  2. 「+」で作成画面になります。
  3. 下の「i」ボタンが「ヘルプ」です。使い方説明が表示されます。画面説明やサンプルゲームの作り方まで動画でわかりやすいです。
  4. 「+」で絵を描く画面になります。
  5. まるい顔を描いてみましょう。
  6. 終了は、右下のチェックマーク。描いた図形が部品リストに入ります。
  7. もう一回「+」
  8. 「し」の形の線を描きましょう。
  9. チェックマークで終了
  10. 「し」をドラッグして、右側にいれます。タッチするとパレットが表示されます。
  11. 拡大ボタンをタッチ
  12. ドラッグして拡大します。2本指でさわって拡大、回転することもできます。

 

重力を設定して動かす

重力を設定すると、レイアウトした図形が下に落下します。ピン留めすると落下しなくなります。自由に回転する設定もあります。

  1. 顔をドラッグして入れます
  2. 何もないところをタッチすると重力設定ボタンが表示されます
  3. 重力設定ボタン
  4. 中央から下にドラッグすると下向きの重力が設定されます。
  5. チェックマークで完了
  6. 顔をタッチ。
  7. パレットから「自由回転」をタッチ。これで顔の向きが自由に動きます。
  8. 線をタッチ
  9. パレットから「ピン止め」をタッチ。「自由回転」が設定されていないので、線は動かなくなります。
  10. 「スタート」をタッチ。顔が下に落ちて転がります。重力が小さいと止まります。
  11. 「停止」ボタンで終了
  12. 重力をもっと下にのばすと、重力が強くなります。重力を強くすると顔が外に飛び出します。

 

ホッケーゲーム

タブレットだと、描いた図形を指ではじいて動かすことができます。形を変えるといろんな方向にはねかえります。

  1. 「+」で新規作成
  2. 「+」で絵を描きます。
  3. 三角、四角、まる、ホッケーのリンクを描きます。ホッケーリンクは上下にすきまをあけておきます。角をまるくしておいたほうがよいでしょう。
  4. 描いた図形をドラッグして画面に配置します。
  5. ホッケーリンクを選びます。
  6. 拡大ボタン
  7. ドラッグして拡大
  8. ホッケーリンクを選びます。
  9. ピン止めボタン
  10. 三角を選びます
  11. 自由回転
  12. 四角も選んで自由回転にします
  13. パレットは、端のボタンで消すことができます。
  14. スタートボタンで、ゲームスタート
  15. 指で、交互に、三角、四角を指ではじいて、ゴールにボールをいれたほうが勝ち

 

Springin' Classroom の魅力

  • 自分の描いた絵に簡単に動きがつけられるのが魅力です。
  • 物理演算があり、プログラム言語を使わずに、複雑な動きを作ることができます。9VAeは自分が描いた絵をキーフレーム補間で動きをつけますが、より複雑な動きが簡単に作れます。
  • 形によって接触したときの動き方がかわるので、どのような形をつくれば、どんな動きをするか、想像しながら自由に作れます。

 

内容:


解説動画の作り方

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

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

 

  • 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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

f:id:dnjiro:20220119154101g:plain

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問

 

 

9VAeきゅうべえの使い方:ひとコマ解説

9VAeきゅうべえの使い方を説明します。

ほかの解説動画はこちら

 

9VAeきゅうべえとは

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

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

動画編集ソフトと9VAeの関係

  • フリーソフト9VAeをつかうと、上の「カニとたたかう」のような自由に動く動画を作成できます。動画編集アプリといっしょに使うと効果的です。プロは 動画を作成するときに、Adobe Premiere と After Effects を組み合わせてつかいますが、9VAe は、AfterEffects でやる作業を初心者でもできるように開発したアプリです。

 

サンプル動画の作成

9VAeをダウンロードしたら、まず、サンプル動画を作成してみましょう。ヘルプメニュー「カニとたたかう」を見てみましょう。たった5枚のキーフレームでなめらかに動く動画が作られています。

  1. 9VAeを起動。ヘルプメニューから「カニとたたかう」
  2. 右下の空白をタッチするとパレットが消え、表示画面が広くなります。
  3. ファイルメニュー>動画出力
  4. サイズの横幅を空白にします。空白にすると横幅の値が自動設定されます。
  5. サイズの縦を1080にします。
  6. 秒コマを30にします。
  7. OKでMP4動画が作成されます。

Windows版、Linux版9VAeで MP4動画を出力したい場合、FFmpegが必要です。こちらを参照。

 

ファイルの保存と切り替え

9VAeで名前をつけてファイルを保存しましょう。複数のファイルの切り替えは「9VA」ボタンです。

  1. 9VAeを起動。ヘルプメニューから「カニとたたかう」
  2. 右下の空白をタッチするとパレットが消え、表示画面が広くなります。
  3. ファイルメニュー>名前をつけて保存。「かに」と名前をつけました。
  4. 右下の「もどす」でパレットが見えます。
  5. ヘルプメニューから「変身」を読み出します
  6. 「9VA」ボタンをタッチ。メニューの「↓編集中のアニメ」の「かに」をタッチすると「かに」が開きます。
  7. 「9VA」ボタンメニューの「↓編集中のアニメ」の「(new-sample)」をタッチすると「変身」が開きます。(new-sample)は保存する前の仮の名前です。
  • あるファイルの図形をコピーし、別のファイルに入れたいときに上の方法でファイルを切り替えます。

 

保存したファイルを開く、複数ファイルの切り替え

 

SVGフリー素材イラストを読み込む

9VAeきゅうべえは、既存のSVGイラストを読み込んで、自由に動きがつけられるのが特長です。この機能を持ったアプリは、他には見当たりません。

SVGフリーイラストを提供しているサイトには、以下のようなものがあります。

 

SVG素材サイト
アドレス
  Openclipart  
  https://openclipart.org  
unDraw
 https://undraw.co/illustrations 
OpenDoodles
  https://www.opendoodles.com 
 SASHIE
 https://sashie.org/ 
 シルエットデザイン
 https://kage-design.com/ 

 

  • SVGファイルをダウンロードして、ファイルメニュー「開く」で読み込めます。
  • スマホ版9VAeでは、Android版はダウンロードから読み込めます。iPhone/iPad版では、ファイルアプリをつかって「9VAe」フォルダに移動してください。もしくは、SVGファイルのアドレスをコピーし、ツールメニュー「ネットからダウンロード」でも読み込めます(アニメキャストになります)。

 

Openclipartからの読み込み

ここ(Shishi Lion Dance)から読み込んでみます。

  1. SVGボタンを長押しし「リンクをダウンロード」。iPhone/iPad版では、共有>ファイル>「9VAeDangla」または「9VAe」フォルダに保存します。
  2. 9VAeを起動。パレットの下をタッチすると画面が広がります。右下の「もどす」で戻ります。
  3. 表示メニュー「ダークモード」で白黒反転します(スマホ版)
  4. ファイルメニュー「開く」。ダウンロードした「shishi.svg」を読み込みます。
  5. ページの右側「+」をタッチ。メニューから「続きのページを作る」。これで2ページを作ります。
  6. 点選択ボタンをタッチし、歯と下顎の点を選んで下に下げます。この操作の詳細な説明はこちらをご覧ください。
  7. 1ページをタッチして移動
  8. ツールメニュー「往復」
  9. プレイで再生してみましょう。下のようになるはずです。


unDraw から読み込み(Android

ここから「Coffee with friends」を読み込んでみます

  1. Coffee with friends をタッチ
  2. Download SVG for your projects ボタンをタッチ。iPhone版では、ファイルアプリでダウンロードから「9VAe」「9VAeDangla」フォルダに移動してください。
  3. 9VAeを起動。パレットの下をタッチすると画面が広がります。右下の「もどす」で戻ります。
  4. 表示メニュー「ダークモード」で白黒反転します(スマホ版)
  5. ファイルメニュー「開く」。ダウンロードしたSVGファイルを読み込みます。
  6. ページの右側「+」をタッチ。メニューから「続きのページを作る」。
  7. コーヒーカップと腕の点を選択して回転。細かい操作はこちらを参考
  8. プレイボタンで再生

 

OpenDoodles から読み込み(iPhone

ここから下のイラストを読み込んでみます。

  1. イラストをタッチ。SVGボタンが表示されます。
  2. SVG ボタンを長押し「リンク先のファイルをダウンロード」
  3. iPhone版では、ファイルアプリを起動し、「iPhone内」の「ダウンロード」フォルダを開きます。
  4. ダウンロードしたSVGファイルを長押し。メニューから「移動」
  5. iPhone内」の「9VAe」「9VAeDangla」フォルダを選んでください。
  6. 「移動」
  7. 9VAeを起動。パレットの下をタッチすると画面が広がります。右下の「もどす」で戻ります。
  8. 表示メニュー「ダークモード」で白黒反転します(スマホ版)
  9. ファイルメニュー「開く」。ダウンロードしたSVGファイルを読み込みます。
  10. ページの右側「+」をタッチ。メニューから「続きのページを作る」。
  11. 髪の毛を選び、形を変形します。
  12. 1ページに移動
  13. ツールメニューから「往復」を入れます。
  14. 1ページの時間を「0.4秒」にします。
  15. プレイで再生してみましょう。

いらすとやのイラストに動きをつける

https://cdn-ak.f.st-hatena.com/images/fotolife/d/dnjiro/20220102/20220102102840.gif

作り方はこちら

 

ミャクミャク様の二次創作

作り方はこちら

ACイラストに動きをつける

https://cdn-ak.f.st-hatena.com/images/fotolife/d/dnjiro/20210328/20210328120307.gif

作り方はこちら

口パクキャラクタ動画の作り方

https://cdn-ak.f.st-hatena.com/images/fotolife/d/dnjiro/20220102/20220102092234.gif

作り方はこちら

 

ダンス動画の作り方

f:id:dnjiro:20200714065023g:plain

作り方はこちら

内容:


解説動画の作り方

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

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

 

  • 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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

f:id:dnjiro:20220119154101g:plain

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問

 

 

文字や図形のアウトライン化:ひとコマ解説

文字や図形を無料アプリをつかってアウトライン化する方法を説明します。

ほかの解説動画はこちら

 

文字のアウトライン化 

  • フリーソフト9VAeきゅうべえは、文字を回転させることができません。しかし、文字をアウトライン化し、図形にすれば、自由自在に変形できるようになります。

 

Vectornator で文字のアウトライン化:iPhone / iPad / Mac の場合

iPhone / iPad /Mac の場合、Vectornator が使えます。

  1. Vectornstor を起動。iPhoneiPadの場合、保存先を本体にするとよいでしょう。
  2. 「+」ボタンで新規作成。用紙サイズは「A4」にしました。
  3. 「あ」ボタン
  4. 画面をドラッグして文字をいれる領域を設定し、文字を入力します。
  5. 選択ボタン
  6. 文字を選択
  7. iPhone縦なら下の「^」ボタンで文字スタイルがでてきます。
  8. フォント、フォントタイプ(太さなど)、サイズなどが変更できます。
  9. ブラシボタンで元の画面に戻ります。
  10. 上向矢印で保存します。
  11. SVG」をタッチ
  12. 「テキストからアウトラインを作成」をON
  13. 「ファイルに保存」
  14. 9VAeでよみこむには「9VAe」フォルダに保存します。
  15. 「保存」

  1. 9VAeで「ファイル>開く」を実行し、保存したSVGを開きます。
  2. 左側パレットの下を押せば、画面が広がります(スマホ版)
  3. 文字を選び、選択枠中央の「+」をタッチし、メニューから「ゴム変形」
  4. 上にドラッグすれば、文字が湾曲します。

 

LibreOffice で文字をアウトライン化:Windowsの場合

Windows版の9VAeきゅうべえは、LibreOfficeでコピーしたものを、貼り付け(ペースト)操作で入力できます。グラフ入力などにも使えます。(Windows版だけの機能です)

  1. LibreOfficeを起動。挿入メニューから「フォントワーク」
  2. 「Simple」
  3. 文字をクリックして選択し、入れたい文字に変更します。
  4. 選択枠の上の辺のハンドルをドラッグして高さを調整
  5. 編集メニュー>コピー
  6. 9VAeを起動。編集メニュー>貼り付け。これで文字が入ります。
  7. 選択枠中央の「+」をタッチし、メニューから「ゴム変形」
  8. 上にドラッグすれば、文字が湾曲します。

 

内容:


解説動画の作り方

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

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

 

  • 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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

f:id:dnjiro:20220119154101g:plain

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問

 

 

CapCutの使い方:ひとコマ解説

Capcutの使い方を説明します。

ほかの解説動画はこちら

内容:

CapCut とは

  • CapCut は、TikTok 用動画を作成するために開発された、スマホ用の動画編集アプリです。無料でいろんな動画編集ができます。

CapCutと9VAeの関係

 

サンプル動画の作成

CapCutの使い方を説明するため、サンプル動画を9VAeで作成しました。他の動画をつかってもかまいません。

  1. 9VAeを起動。ヘルプメニューから「カニとたたかう」
  2. 右下の空白をタッチするとパレットが消え、表示画面が広くなります。
  3. ファイルメニュー>動画出力
  4. サイズの横幅を空白にします。空白にすると横幅の値が自動設定されます。
  5. サイズの縦を1080にします。
  6. 秒コマを30にします。
  7. OKでMP4動画が作成されます。

 

動画の不要なシーンをカット(分割と削除)

CapCut の使い方を説明します。

  1. Capcutを起動。「新しいプロジェクト」をタッチ
  2. 編集したい動画をタッチ。
  3. 下の「追加」ボタンで編集スタート。
  4. 下の動画トラックを左にドラッグし、分割したいコマを表示します。
  5. 「分割」で2つに分割されます。
  6. 削除したいほうをタッチします。
  7. 「削除」で削除されます。
  8. プレイボタンで再生してみましょう。

 

CapCutのロゴを削除

CapCutのロゴは削除できます。

  1. 動画トラックを左にドラッグして一番最後を表示
  2. CapCutロゴをタッチ
  3. 「削除」
  4. プレイで再生してみましょう

 

トリミング(上下左右を縮める)

動画の端のいらない部分を削除するやり方

  1. 「編集」をタッチ
  2. 下のバーを左にドラッグして「編集」を表示します。
  3. 「編集」をタッチ
  4. 「カット」
  5. 「9:16」にしました。もし動画に合わせて不要な部分を削除したい場合は「カスタム」を選びます。
  6. 「V」で設定完了
  7. プレイで再生してみましょう。

縦横変換

動画全体の縦横比率を変更したいとき

  1. フォーマット
  2. 縦横比率を選びます

文字テロップを入れる

テキストで文字が入れられます。文字を自由に動かしたい場合は9VAeをつかうとよいでしょう。

  1. テキスト
  2. テキストを追加
  3. 文字を入力すると上にはいります。ドラッグで位置の変更、右下のドラッグでサイズ変更できます。
  4. 下のバーの長さを調節すれば、文字が表示される時間を調整できます。
  5. スタイル
  6. スタイル
  7. 縁取り文字。下のカラーパレットで色を変更できます。

吹き出しの入れ方

  • テキスト>テキストテンプレート>上の分類を左にドラッグして「泡」。これでいろんな吹き出しがいれられます

 

音楽を入れる

CapCutを使うと簡単に音楽を入れられます。

  1. オーディオ
  2. 楽曲
  3. ジャンルを選ぶ
  4. 好きな音楽を選んで「+」をタッチ
  5. 音楽のトラックが追加されます。動画と長さを合わせるために、左にドラッグします。
  6. 音楽トラックをタッチ
  7. 分割
  8. 後ろの音楽をタッチ
  9. 削除
  10. プレイ

 

音を消す(音だけ取り出す)

  1. 音入りの動画をCapCutで開きます
  2. トラックをタッチして選びます。
  3. 「オーディオを抽出」ボタン。音のトラックが下にできます。
  4. 音のトラックをタッチして選びます。
  5. 「削除」

オーバーレイ>はめこみ合成で、音入り動画をいれたあと、上の方法でオーディオを抽出し、動画トラックを削除すると音だけ追加できます。

回転

90度ずつ回転

  1. 「編集」をタッチ
  2. 下のバーを左にドラッグして「編集」を表示します。
  3. 「編集」をタッチ
  4. 「回転」
  5. 「回転」
  6. 「回転」
  7. プレイで再生してみましょう。

速度調整(早送り、スロー再生)

  1. トラックをタッチして選びます。
  2. 「速度」ボタンを押します。
  3. 「通常」ボタンを押して速度を調整します。「曲線」ボタン「カスタム」ボタンを順番におすとグラフで速度を変化させることができます。

 

せりふ、口パクキャラクタの作り方

f:id:dnjiro:20210129094901g:plain作り方

ハートの背景素材の作り方

f:id:dnjiro:20210618174235g:plain作り方

f:id:dnjiro:20210730230715g:plain作り方

CapCutに素材動画をいれる方法

 

動画出力

上向矢印で動画出力します。

 

  1. 上向矢印で動画出力します。
  2. そのあと、シェアする方法を選びます
  3. パソコンに転送したい場合は、iOSなら「その他」>「ファイル」>「iCloud」に保存(iPhoneとPCの転送はこちらAndroidなら「その他」>「ドライブ」でGoogleドライブに保存するとよいでしょう。

 

 

 

 

 

 


解説動画の作り方

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

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

 

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

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 Mac
  • Shift + Command + 4 (スペースでウィンドウ指定)
デスクトップ
 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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

f:id:dnjiro:20220119154101g:plain

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

アニメGIF、動画出力

  • ファイルメニュー>アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
    Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
  • スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。
  • アニメGIFは、背景を透明にできます。音がいれられません。
  • MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、1秒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きゅうべえに関する質問

 

 

初心者むけ、Unityのはじめ方:ひとコマ解説

初心者が Unityをはじめる方法を説明します。

ほかの解説動画はこちら

 

Unityとは

  • Unity は、3次元グラフィックスをつかったゲームや教材など様々なコンテンツを開発、公開、販売ができる、ツール・素材・サービスの集合体です。
  • 開発ツールはOSごとに異なります。ユーザーアカウントは、Webサービスで共通です。それらを UnityHub というアプリで管理しています。
  • Unity をはじめるには、まず、(1)UnityHubをインストールする。(2)アカウント登録しログインする。(3)Unity Editor などのツールを、UnityHub経由で取得する。という手順を踏みます。
  種類 内容
Unity サイト
Unity Hub アプリ
  •  開発ツールの管理
  • プロジェクトの管理
Unity Editor アプリ
  • プロジェクト開発環境

以下の資料を参考にしました。

Unity は、mouse E10 のような1万5千円のパソコンでも動きます。SDカードをつかって、Cドライブを増やし、インストール先を変更する必要があります。

Unity Hub ダウンロード

f:id:dnjiro:20220305165512g:plain

  • 完了すると、Unity Hub が開き、(1)アカウント作成 (2)サインイン (3)UnityEditor ダウンロード画面になります。

 

Unity Hub からアカウント作成、Editorダウンロード

f:id:dnjiro:20220305182758g:plain

  • Unityアカウントを作るには、メールアドレス、パスワードが必要です。Googleアカウント、Facebookアカウント、Apple IDでもかまいません。
  • アカウント作成したら、サインインし、Editor (Unityの開発環境)をダウンロードします。Mac だと M1 CPU用と、Intel CPUがあります。

 

Learningで使い方を学ぶ

  • Unity Editorをダウンロードしたら、Unity Hub >NewProject  から、lerningプロジェクトをダウンロードして使い方を勉強しましょう。
  • 左の Learning からいろんな教材をダウンロードできます。実際のEditor上で操作が学べます。

f:id:dnjiro:20220305213131g:plain

  • 2D Platformer は簡単な横スクロール型のゲームサンプルです。LEGO Microgameは3次元のゲームです。「Tutorial」をひらき、右下の「Start」をおすと、実際のエディタでどう操作するか順番に教えてくれます。操作を間違えると次に進めないので、必ず理解できるでしょう。
  • プロジェクトを保存したフォルダが読み書き禁止になっていた場合、Learningが次に進めなくなることがありました。フォルダのセキュリティ設定(右ボタンプロパティ)でフルコントロールに設定しましょう。

保存先フォルダの変更

mouse E10 のように C ドライブに空きがないパソコンの場合、 Unity Hubの保存先を別のドライブに変更しましょう。

  1. Unity Hubの歯車ボタンをクリックします。
  2. 「Projects」
  3. プロジェクトの保存先フォルダを設定します。
  4. 「Installs」
  5. Unity Editor の保存フォルダを設定します。

 

3次元立体に、動画をはりつけてみよう

もっとも簡単なプロジェクトをつくって動かしてみましょう。

  1. UnityHub Project 右上の「NewProject」をクリック
  2. 「3D Core」を選ぶ。
  3. 名前をつけて
  4. 「CreateProject」。これでEditorが開きます。
  5. Editorにアクセスを許可。空のプロジェクトが起動します。
  6. メニュー「GameObject(ゲームオブジェクト) > 3D Object(3Dオブジェクト) > Cube(キューブ)」
  7. Cube の「Scale(スケール)」を「X16 Y12」に変更。Cubeの大きさが4:3のスクリーンに変わります。
  8. なんでもよいので、外からMP4動画をドラッグ。9VAeのサンプルでもかまいません。(1) 9VAe「ヘルプメニュー>練習用>カニとたたかう」(2) ファイルメニュー「動画出力」でMP4動画を作成できます。
  9. 下にはいった動画をドラッグして Cube に重ねる。これで、Cubeの表面が動画になります。
  10. Cubeの「VideoPlayer」の「WaitForFirstFrame(最初のフレームを待つ)」をOFF、「Loop(ループ)」をONにしましょう。
  11. Playボタンで、再生するはずです。
  12. 動画の上下左右が反転しているので、Scale(スケール)の「X」を -16 、「Y」を-12にします。
  13. Playボタンで、再生してみましょう。

UnityEditorの左側が、プロジェクトの構造をあらわすリスト(ヒエラルキー)でここに部品が並びます。部品を選ぶと、右側に部品の属性(インスペクター)が表示されます。下は素材(プロジェクトフォルダの中にあるファイル)です。

 

バーチャルカメラで3次元のなかを動く

Cinemachine バーチャルカメラで、Cubeに貼り付けた動画を、遠くから近づいてみてみましょう

  1. UnityEditor > Window(ウィンドウ) > PackageManager(パッケージマネージャ)
  2. 左上 Packages:(パッケージ) を「Unity Registry(レジストリ)」に変更
  3. 右上の検索窓で「Cinemachine」を検索
  4. Cinemachine を選びます
  5. Install(インストール)
  6. 右上「X」で閉じます
  7. GameObject(ゲームオブジェクト) > Cinemachine > Virtual Camera でバーチャルカメラを入れます
  8. GameObject > Cinemachine > Dolly Track with CartCart(台車)とTrack(レール)を入れます
  9. 左の Dolly Track を選びます
  10. WayPoints 0(レールの開始点)、1(レールの終了点)のZ座標をそれぞれ「-50」「10」に変更します。これで、より遠くから接近するようになります。
  11. Looped にチェックをいれます。これでレールの上を台車が往復します
  12. DollyTrack の Position(位置) Y を「-6」にします。これで、レールがスクリーンの一番下を通り抜けることになります。
  13. 左の CM vcam1 を選びます。
  14. Follow を、「Dolly Cart」 に設定します。これでカメラが台車といっしょに動きます。
  15. Look at を「Cube」に設定します。これでカメラが自動的にスクリーンをみるようになります。
  16. 左の DollyCart を選びます。
  17. 「Speed(速度)」を「5」に設定します。
  18. プレイボタンでカメラの映像をみてみましょう。下のようになりました。もし動かなかったら、CM vcam1  の「Body」の右側の設定が「Transposer」になっているか確かめてください。

これは9VAeの動画クリップをはりつけた例ですが、同様にして、いらすとやのイラストなども貼り付けられます。shader を Sprite/default にすると外側が透明になります。

日本語化

Unity Editor > Edit > Preference で言語指定するのですが、その前に、UnityHub で、日本語を追加しておく必要があります。また、一部しか日本語化されません。

  1. UnitiHub >歯車ボタン
  2. Appearance
  3. 「日本語」に変更
  4. Xで閉じます
  5. インストール(Installs)
  6. 歯車ボタン>モジュールを加える(Add Modules)
  7. 「日本語」にチェック
  8. インストール(Install)
  9. Unity Editor を起動。 Edit > Preferences
  10. Languages
  11. 「日本語」に変更
  12. Xで閉じます

 

LEGO Learning Project をやってみよう

3次元空間での物体の作り方は独特です。Learningで実際に操作して練習するのがわかりやすいです。

  1. UnitiHub >プロジェクト(Project)
  2. 新しいプロジェクト(NewProject)
  3. 使い方を学ぶ(Learning)
  4. LEGO Microgame
  5. プロジェクトを作成(Create Project)。はじめて作成する場合、テンプレートのダウンロード、年齢の確認などが求められます。
  6. Load tutorials
  7. 右側の「Start」で開始します。最初にゲームを実際に操作します。
  8. プレイボタンで、ゲームスタート。キー操作でキャラクタを操作できます。スペースでジャンプします。
  9. このゲームは、最初はクリアできないようになってます。「Next」ボタンを押していくと、ゲームをつづけるために、プレーヤーの速度をあげたり、空中に橋を設置したり、そのために、物体の配置や、3次元での視点変更などの操作を順番に練習していきます。Unity の使い方がわかると、ゲームがクリアできるようになっています。

 

 

内容:


解説動画の作り方

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

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

 

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

 

画面キャプチャ方法

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 Mac
  • Shift + Command + 4 (スペースでウィンドウ指定)
デスクトップ
 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 1秒長押し
  • 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. 文字タブ2をクリック
  3. 文字の色をクリック
  4. 赤に設定
  5. 文字と矢印をドラッグして選ぶ
  6. 図形タブ1をクリック
  7. 線の種類から「縁をつける」
  8. 線の種類から「影をつける」、線の種類から「広く」
  9. 線の色「赤」

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

f:id:dnjiro:20220119154101g:plain

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

アニメGIF、動画出力

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

 

 

9VAe は素材動画が作れる無料アプリ 

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

OS

フリーソフト

9VAeで作成する素材動画

Windows

AviUtl

連番PNG または MP4

Mac / iPhone / iPad

iMovie

MP4 または QuickTime(古いMac)

Android / Chromebook

/ iPhone / iPad

PowerDirector

CapCut

GIF または MP4

MP4

作り方

 

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

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

 

 

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