dnjiro’s 9VAe blog

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

FFmpegでMP4動画が作れる無料アプリ 9VAeきゅうべえ:ひとコマ解説

FFmpegは、有名な動画作成・変換用フリーソフトですがコマンドが難しいという問題がありました。フリーソフト9VAeきゅうべえ と組み合わせてつかえば、FFmpeg のコマンドを知らなくても、音、音楽入りの動画が作れます。Youtubeはこちら

f:id:dnjiro:20220118150601g:plain



ほかの解説動画はこちらFFmpeg命令の説明はこちら

なお、Mac版、スマホ版の9VAeきゅうべえは、FFmpegなしで動画出力できます。

 

内容:


www.youtube.com

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

 

WindowsFFmpegの入手

f:id:dnjiro:20211228100801g:plain

  1. 「DOWNLOAD」ボタン
  2. Windowsを選ぶ
  3. どちらでもダウンロードできますが「Windows builds by BtbN」がZIP形式なので簡単
  4. ffmpeg-maser-latest-win64-gpl-shared.zip」をクリック。ダウンロードフォルダにZIPファイルがダウンロードされます。「ffmpeg-maser-latest-win64-lgpl-shared.zip」でもかまいません(サイズが小さい)。
  5. ダウンロードフォルダの「ffmpeg-maser-latest-win64-gpl-shared.zip」をダブルクリック。中身が表示されます。
  6. ffmpeg-maser-latest-win64-gpl-shared」フォルダをドラッグ(マウス左ボタンでおして押しながら)移動して、デスクトップなどにコピー(好きな場所にコピーしてかまいません)
  7. コピーした場所の中の「bin」フォルダの中に「ffmpeg.exe」がはいっています。これを9VAeに設定すれば、動画出力できるようになります。

WindowsFFmpegの設定

f:id:dnjiro:20211228110844g:plain

  1. 9VAeの「ファイルメニュー>動画出力」
  2. ダウンロードしたFFmpeg のフォルダを開きます。
  3. 「bin」フォルダの中の「ffmpeg.exe」を選んで「開く」を実行。これで、ffmpegが9VAeに設定されます。次回から設定する必要はありません。
  4. そのあと、動画ファイル名を指定し、動画出力することができます。

 

Linux版(ラズベリーパイ・Ubuntuなど)FFmpegの入手

  • ターミナルから以下の命令を実行すると、ffmpeg を導入できます。ターミナルは、メニューバーや、アプリ>ユーティリティなどの中にあります。
    sudo apt-get -y install ffmpeg
  • 上の命令で失敗した場合以下をお試しください。(/snap/bin/ffmpeg にインストールされます。Ubuntu 18 以降, ただし、USBブートだと、snapでインストールした ffmpeg は実行できないようです。)
    snap install ffmpeg
  • なお、次の命令で、mpg321 を導入すれば、9VAe上で、MP3音楽を利用できるようになります(Mint / RaspberryPi、Ubuntu32bit)。
    sudo apt-get -y install mpg321
  • Ubuntu で、MP4動画が見えない場合、vlc を導入すればよいです。
    snap install vlc

 

動作確認・制限事項など

  1. 9VAe「ヘルプメニュー>かおであそぼう>リミックス」で音入りサンプルアニメが開きます。
  2. 「ファイルメニュー>動画出力」
  3. ファイル名を指定
  4. 動画サイズ、動画時間、1秒のコマ数を設定し「出力開始」

これで、動画が作成されるはずです。

  • 動画作成途中、連番画像を保存するために「__tmp_」というフォルダができます。これは動画出力後に自動的に削除されますが、もし残っている場合は削除してください。
  • Windows版9VAeは、MIDI音楽を使うことができますが、MP4動画に、MIDI音楽ははいりません。同じ名前の MP3音楽を同じフォルダにいれてください。MIDI音楽をMP3に変換する方法はこちら。
  • 動画を作成する FFmpeg 命令はこちらで解説しています

内容:


解説動画の作り方

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

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


www.youtube.com

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
  • Youtube動画より簡単、スクロールしなくても見えるのが特長です。
  • 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 が必要Youtube解説
  • スマホの場合、端末内の「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きゅうべえ」

2022年年賀用に、かわいい虎がジャンプする動画を 9VAeきゅうべえで作ってみました。作業時間は15分くらいです。

f:id:dnjiro:20211226154511g:plain



他のアニメの作り方はこちらをご覧ください。年賀アニメ:2024龍うさぎとらうしねずみいのしし

 

内容:

 

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

 

2.素材イラストの入手

以下のSVGイラストを、Openclipart から入手しました

 SVGイラストは次のようにして、9VAeに読み込みます。

  1. スマホiOS/Android/Chromebook)の場合、上のリンクをひらき「SVGVector)」を長押しし、メニューから「コピー」(「リンクアドレスをコピー」)をタッチします。次に、9VAeきゅうべえを開き、「ファイルメニュー>新規作成」のあと「ツールメニュー>ネットからダウンロード」を実行し、http 入力欄を長押しして「ペースト(「貼り付け」)をタッチ。
    OKをタッチすれば、キャラクタが入力されます。
  2. パソコン(Win/Mac/Linux)の場合、「SVGVector)」を右ボタンでクリックし、メニューから「リンク先を保存(または対象を保存)」をクリックして保存します。次に、9VAeきゅうべえを開き、「ツールメニュー>9VA/SVG/WMFを入れる」でダウンロードしたSVGファイルを読み込んでください。

 

2.メインアニメ

f:id:dnjiro:20211226161946p:plain

  • このアニメはメインアニメの中に「虎」「トランポリン」「ポリン」の3つのアニメキャストが重なっています。
  • アニメキャストはパーツのアニメです。やり方はこちら
  • 虎には、動き矢印をつけています。3ページの虎は角度を720度にして2回転させています。
  • 2ページは飛び上がった虎を見せるために最後に中間ページを作りました。
  • 1ページ、2ページに往復命令をいれ、ジャンプを繰り返しています。

 

3.虎

f:id:dnjiro:20211226162639p:plain

  • Openclipartから読み込んでから、中心の+メニューから、中身を修正し、地面を削除しました。
  • 地面を選び、中心の+メニューから「つながった図形を選択」を実行すると複数ページの地面が選択され、一度に削除することができます。

 

4. トランポリン

f:id:dnjiro:20211226162925p:plain

  • まずトランポリンの上の人を削除しました。アニメキャストの中身をひらき、選択し、点選択してから、トランポリンの上の人を選んで、削除ボタンで簡単に削除できます。
  • つぎに虎が着地したときに、へこむ動きをつけます。
  • 続きのページ作成で2ページを作成し、トランポリンの面の点線を選んで、ゴム変形で曲げました。
  • 右側の登録パレットに登録し、動きグラフをつけました。
  • 虎のジャンプにあうように、ページの時間や動きグラフの形を調整します。
  • タイムラインなしで細かい調整ができるのが9VAeの使いやすいところです。

 

5. 文字「ポリン」

f:id:dnjiro:20211226163539p:plain

  • 虎が着地したときだけポリンという文字がでるようにしました。
  • 文字入力は左側の「A」ボタンです。
  • 「ポリン」と文字を入力してから、右上のタブ3で、星形吹き出しボタンをおすと、文字の下に吹き出しをいれることができます。点選択で形を変えました。
  • 1ページの文字は0.3秒
  • 2ページに空白ページをいれ1.7秒
  • 繰り返し命令を1ー2ページに入れ、虎の着地に合わせて文字がでるようにしました。

6.再生

  • プレイボタンで再生されます。何枚も絵をかかなくても簡単に動画がつくれます。

 

7. アニメGIF / 動画出力

  1. 出力する前に「ファイルメニュー>名前を付けて保存」で名前をつけて保存しておきましょう。
  2. 「ファイルメニュー>アニメGIF出力」または「動画出力」でアニメGIFまたはMP4動画が出力できます。スマホ版では、「9VAeフォルダ」と「カメラロール」に保存されます。パソコン版では最初に保存場所を選びます。
  3. 動画素材を作る場合、画面サイズは、幅を空白、高さを720または1080、コマ/秒を30にするとよいでしょう。「OK」ボタンで出力されます。

    f:id:dnjiro:20201213004713p:plain

     

 動画(MP4)の作成

Windows / Linux の場合、「動画出力」するためには「FFmpeg」が必要です。

 

 

8.印刷する 

印刷したいときは、印刷機能をもったアプリを使います。

Windowsの場合

  1. LibreOffice Impress を使うのが簡単です。ダウンロードはこちら
  2. 9VAeの印刷したいページ1ページだけ保存します。静止画のSVGイラストができます。
  3. LibreOffice Impressを起動。「挿入メニュー>画像」。保存したSVGを選びます。
  4. 適当にレイアウトして印刷

Macの場合

  1. プレビューアプリを使うのが簡単です。
  2. 9VAeの印刷したいページに移動する。
  3. プレビューアプリを起動。「ファイルメニュー>スクリーンショットを撮る>選択部分」を実行。
  4. 9VAeの画面を選択すれば、選択範囲がプレビューにコピーされます。
  5. プレビュー「ファイルメニュー>プリント」

 

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きゅうべえに関する質問

 

 

Mac に 複数バージョンの MacOS をインストールする方法

Intel Mac に複数のパーティションを作成し、複数のバージョンのOSを入れる方法を説明する。M1 Mac ではできないみたい。パーティションの操作を失敗すると、起動できなくなったり、Macを完全に初期化しないといけなくなったりするので注意。

Intel Mac

  • ディスクユーテリティを使って、パーテイションをわけておけば、複数のOSをインストールできる。

パーティションの作り方

  • 複数のOSを入れた場合、一番新しいOSでパーティション作成しないと、起動できなくなる可能性があるので注意。
  • アプリケーション>ユーティリティ>ディスクユーティリティ
  • 左側にディスクやドライブが階層的に表示される。
  • パーティションを作りたいディスクのルートを選び、上の「パーティション」を実行
  • 下の「+」でパーティションが追加できる(まだ処理していない)
  • 区別しやすい半角英数の名前をつけておく。Xcode を入れるならサイズは150GB必要。
  • フォーマットは「OSX拡張(ジャーナリング)」だとあとからサイズ変更できる。「exFAT」にするとWindowsから読み書きできるがパーティションの位置が固定になる。「MSDOS(FAT)」は4GBより大きいファイルが作れないのですすめない。
  • 「適用」ボタンでパーティション作成が実行される。再起動してパーティションができたかどうか確認。

インストール用USBメモリを作る

  • こちらのやり方で、インストールUSBを作成。何回も失敗したが、El Capitan のインストールUSBは作成できた。El Capitan OS上では他のOSのインストールUSBも作れた。
  • インストールUSBをさしこみ、Optionキーを押しながら再起動すると、ISBメモリから起動できる。
  • OS をインストールした後は、アップルメニュー>システム環境設定>起動ディスクで起動するOSを切り替えられる。
  • Big Sur 以降をいれると、パーティションが APSF になる。APSFは、El Capitan、High Sierra  から起動ディスク変更ができない。Optionキーを押しながら再起動すると切り替えできる。
  • El Capitanから Catalinaには VerUpできない。いったん Mojaveにする必要あり。

この方法で、Intel Mac には、複数バージョンのOSをいれることができる。バージョンがあがると、どんどん遅くなる。AndroidStudio は El Capitan がはやい。

M1 Mac

Macの初期化(パーティションの削除)

  • 起動切り替えは、Optionキーではなく「電源ボタン」の長押し
  • オプション>ユーテリティ>ターミナルを起動
  • resetpassword と入力して実行
  • メニューで「Mac消去」に切り替えて、Mac消去を実行。完全に初期化する
  • そのあと、インストール用USB を実行すれば、Big Sur / Monteley を再インストールできる
  • バックアップせずに再インストールした場合、オプション>ユーテリティ>ターミナルから、cp コマンドで消去される前のデータをUSBメモリーにコピーできる。各パーティションUSBメモリには、/Volumes/ドライブ名 でアクセスできる。

Rosetta のインストール

  • OS再インストールでは Intel アプリを動かすのに必要な Rosetta がインストールされない。AndroidStudio を実行するには、adbがM1対応していないためRosettaが必要。ターミナルで以下のコマンドを実行し「a」を入力してインストールする必要がある。
softwareupdate --install-rosetta

 

Windowsとファイル共有

  • データ共有用にパーティションを作成するには、exFAT にするとよい。FAT32だと、4GB以上のファイルが作れないため、空きがあるのに容量不足エラーが出る。
  • ドライブを右ボタンで選択し、右ボタンメニュー>情報を見る>「共有フォルダ」にチェックをいれると、アップルメニュー>システム環境設定>共有>ファイル共有にドライブが追加される。「オプション」をクリックし>Windowsファイル共有で、ユーザーパスワードを設定する

その他

  • macOS は新しくするほど応答がおそくなる。Androidアプリをつくる AndroidStudio を Intel Mac で動かすなら、 El Capitan がはやい。
  • iOSアプリをつくる Xcode は、新しいOSにしないと最新版がいれられない。iOS15 対応アプリをつくるには、Big Sur 以上の Xcode にしないといけない。iOS 15.4 なら、Monterey の Xcodeが必要。
  • Xcode のバージョンをあげるときに、ディスクの空きが 100GB ぐらい必要。
  • El Capitanから Catalinaには VerUpできない。いったん Mojaveにする必要あり。

スペチャ(SpatialChat)の部屋を作るには:ひとコマ解説

スペチャ(SpatialChat) の部屋を作る方法、参加方法を説明しました。

ほかの解説動画はこちら

 

●SpatialChatルームの作り方: SpatialChatはこちら

f:id:dnjiro:20211119194032g:plain

・管理アドレスから入室すると背景を変えたりできる

 

●Chatルーム参加方法:ルームアドレスをメールでおくる

f:id:dnjiro:20211214144655g:plain



・離れると声が小さくなる、・下の右端のメガホンをもつとみんなに聞こえる、・メンバーの名前タッチでその人のそばにいける

 

■ SpatialChat とは

  • 5名まで無料でオンライン会話ができるサービスです。(2022年5月から5名になりました。Skypeなら50名まで無料
  • だれでもチャットルームを作成できます。
  • チャットルームには、アカウント登録なしに、ブラウザから誰でもはいれます。
  • チャットルームの中で、自由に移動することができ、複数グループにわかれた会話が自然にできます。
  • 画面共有、テキストチャットもあり

 

ひとコマ解説動画は、無料ソフト9VAeきゅうべえで作っています。制作方法を解説します。

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

 

内容:

 

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

 

1.ひとコマアニメーション

解説動画は、キッズプラザ大阪で開発された「ひとコマアニメーション」という手法で作られています。

 

「ひとコマアニメーション」は1コマで簡単に作れます。

  1. 描いた順番に線や文字がでてくる。
  2. 再生時間が自動的に調整される。
  3. 修正が簡単。
  4. データサイズが小さい。

 

解説動画は、次のパーツの配置で作成します。

  1. キャプチャー画像
  2. 縁つき矢印
  3. 縁つき文字

 これらをページ上に順番に配置したら完成です。動きをつける作業はありません。

 

2.説明したい画面をキャプチャし、連番をつける

解説したい画面を必要な枚数だけ画面キャプチャし、ファイル名を連番にします。

 各システムで、画面キャプチャーする方法をまとめました。

 

OS
画面キャプチャ方法
保存先
 Windows
クリップボード
 Mac
  • Shift + Command + 4 (スペースでウィンドウ指定)
デスクトップ
 Android
  •  電源 + 音量Down
 adbコマンド (開発者向け)
  •  adb shell screencap -p /sdcard/screen.png
     adb pull /sdcard/screen.png
フォトアプリ>
スクリーンショット
 
iPhone / iPad
  •  ホームボタン + 電源ボタン
  • サイドボタン + 音量UP
写真>
アルバム>
スクリーンショット

 

キャプチャした画像のファイル名に連番がついている場合はそのまま使えます。 ファイル名が日付、時間などになっている場合は連番の名前に変更します。

f:id:dnjiro:20210420070006g:plain

9VAeは連番画像をまとめて読み込むことができ、読み込んだあとからファイル番号の指定を変更します。

 

3.連番画像を9VAeきゅうべえフォルダに集める

スマホ版の9VAeきゅうべえは、連番画像を9VAeフォルダ(Chromebook/Android版の場合はダウンロードフォルダでもよい)にいれておく必要があります。キャプチャ画像は最初カメラロールにはいるため、カメラロールの画像をファイルマネージャなどでコピーします。こちらの記事も参考にしてください。

パソコン版では、連番画像用フォルダを作成し、その中に連番画像を集めるとよいでしょう。

 

f:id:dnjiro:20201015125339g:plainメモ:9VAeに連番画像を読み込んだ場合、9VAeのファイルには連番画像のファイルパス名だけが記録されます。9VAe本体は連番画像と同じフォルダに保存するのがよいでしょう。

 

4. 9VAeで連番画像を読み込む。

以下、説明画面で、ABCDの順番に操作していきます。 

f:id:dnjiro:20210420072026g:plain

  1. 画像入力ボタン(上図A)をクリック。用意した連番画像の最初の画像を選びます。「すべて読み込みますか」と表示されるので「OK」をクリックします。
  2. ページサイズを画像に合わせたい場合は上図のように中心メニューから「ステージの大きさにする」「ページを画像に合わせる」を実行します。
  3. 選択枠の中心の「+」(上図C)をクリック。メニューから「連番()-()」をクリック。開始、終了番号が「-1」「-1」(-1は自動設定の意味)になっています。これを先頭の画像番号(001なら1)にします。1番なら「1 」「空白」とします。

f:id:dnjiro:20201015125339g:plainメモ:連番画像は、初期設定(開始番号と終了番号が−1)になっていると、再生時に連番画像が順に表示されます。開始番号を「1」終了番号空白に設定すれば、1番の画像だけが再生されます。

 

5. 文字を入れる

f:id:dnjiro:20210420083045g:plain

  1. 文字を入れるには文字入力ボタン「A」(上図E)をクリックします。
  2. 文字の選択枠の角のハンドル(上図F)をドラッグすれば、文字を拡大できます。
  3. 線の種類を設定するボタン(上図G)をクリック。メニューから「縁をつける」をクリックすると文字に縁がつきます。同様にメニューから「影をつける」をクリックすると文字に影がつきます。メニューから「太く」を何回かクリックすれば、縁や影を太くできます。
  4. 塗り色2ボタン(上図H)をクリック。ここで縁の色を変更できます。

  5. 文字タブ(上図I)をクリック。パレット2(文字属性)に切り替えます。
  6. 文字色ボタン(上図J)をクリック。

f:id:dnjiro:20201015125339g:plainメモ:線の属性ボタンをつかって、矢印や文字に縁取り、影がつけられます。縁どりの色は図形パレットの色2で設定します。

 

6. 矢印を入れる

f:id:dnjiro:20210420110028g:plain

  1. パレットのタブ1(上図L)をクリックしてパレット1(図形属性)を表示。
  2. 線の種類ボタン(上図M)をクリック。メニューから矢印を選択
  3. 多角形入力ボタン(上図N)をクリック。このモードでは頂点を順番にクリックして入力します。
  4. 最初の点(上図O)をクリック
  5. 終了点(上図P)をクリック
  6. 選択ボタン(上図Q)を2回クリック。線の入力が終了し、矢印が入ります。
  7. 線の太さボタン(上図R)をクリック。メニューの「太くする」を数回クリックし、矢印を太くします。
  8. 線の色ボタン(上図S)をクリック。矢印の色を赤にしました。

f:id:dnjiro:20201015125339g:plainメモ:多角形を入力するボタンでは点を順番にクリックして入力します。最初か最後の点と同じ点、もしくは、選択ボタンをクリックすれば入力が終了します。

 

7. ページに「ひとコマ」を設定。プレイする。

f:id:dnjiro:20210420142728g:plain

  1. 2ページの時間(上図T)をクリック。メニューから「ひとコマ」をクリック。
  2. プレイボタン(上図U)をクリック。これで矢印がのびていく「ひとコマアニメーション」が作成されます。 

f:id:dnjiro:20201015125339g:plainメモ:「ひとコマ」に設定したページは、プレイボタンを押すたびに、描いた順番に絵ができるアニメーションが作成されます。ページの時間は毎回自動設定されます。

 

8. 次ページを作成。連番画像を次の番号にする

f:id:dnjiro:20210420162328g:plain

  1. ページの右側の「+」(上図V)をクリック。メニューから「続きのページを作る」。これで次のページができます。
  2. 画像をクリック。選択枠中心の「+」(上図W)をクリック。メニューから「連番 (1)-(1) 」をクリック。開始番号、終了番号の入力画面になります。
  3. 開始番号、終了番号を次の番号「2」「空白」に変更します。これで、次の画像に変わります。
  4. ページの時間(上図X)をクリック。「ひとコマ」に設定します。

f:id:dnjiro:20201015125339g:plainメモ:連番画像の開始番号、終了番号を変更すれば、画像の切り替えができます。

 

9.文字、矢印をカットして「複製」

f:id:dnjiro:20210420165413g:plain

  1. 矢印や文字をクリックして選択(上図Y)。
  2. 切り取りボタン(上図Z)をクリック。矢印や文字を記憶ツールに入れます。
  3. 貼り付けボタン(上図a)をクリック。メニューから「複製する」をクリック。矢印や文字を元の位置に戻します。
  4. 点選択ボタン(上図b)をクリック。矢印の点が表示されます。
  5. 矢印の先(上図c)をドラッグして矢印の向きを次の操作の位置に変更します。

f:id:dnjiro:20201015125339g:plainメモ:矢印や文字をいったん切り取って複製するのは前のページとのリンクをきりはなすためです。続きのページ作成では、前のページとリンクした図形になり、再生すると形が変化します。いったん削除して「複製する」を行うとリンクしていない別の図形になり形が変化しなくなります。

 

10.細かい調整を行うときは「ひとコマ」を解除する

次のことを覚えておくとよいでしょう。

  1. ページの時間が「ひとコマ」になっている場合、アニメ再生すると内容に応じて毎回ページの時間が再計算されます。
  2. 再生時間を調整したい場合、ページの「ひとコマ」をクリックし、時間を長くしたり、短くしたりできます。時間を調整すると「ひとコマ」は解除され、時間の再計算を行わなくなります。
  3. 「ひとコマ」では、文字は必ず1文字ずつでてくる動きになりますが、「ひとコマ」を解除し、文字を選択し、中心の「+」をクリックし、メニューから「全文字」をクリックすると、文字が一度に全部でてくる動きになります。1文字ずつ表示するときは、文字の左下に1本線がつきますが、全文字のモードでは2重線になります。
  4. 「ひとコマ」を解除してから、文字や矢印を選んで、「調整メニュー>書き順」をクリックすれば、選んだ図形の書き順が解除され、その図形は最初から表示され動かなくなります。

f:id:dnjiro:20201015125339g:plainメモ:「ひとコマ」に設定した状態では、そのページの文字、図形が、すべて「書き順」「1文字」に設定され、ページの時間が自動調整されます。ページの時間を変更して「ひとコマ」を解除すれば、文字、図形ごとに「書き順」をやめたり「全文字」に変更したりできます。

 

11. アニメーションを動画にする

  1. 出力する前に「ファイルメニュー>名前を付けて保存」で名前をつけて保存しておきましょう。
  2. 「ファイルメニュー>アニメGIF出力」でアニメGIFが出力できます。スマホ版では、「9VAeフォルダ」と「カメラロール」に保存されます。パソコン版では最初に保存場所を選びます。
  3. 動画素材を作る場合、画面サイズは、幅を空白、高さを720、コマ/秒を30にするとよいでしょう。「OK」ボタンでアニメGIFが出力されます。

     

     

 動画(MP4)の作成

  1. Mac/iPhone/iPad の場合、ファイルメニュー「動画出力」で、MP4動画を作成できます。

  2. Windows/Linux/Android/Amazon Fire の場合、変換サイト:Online GIF to MP4 Video converter - Ezgif.comでアニメGIF を MP4 動画に変換できます。

  3. Windows/Linux の場合、 APNG to MP4 Video converter - Ezgif.com を使えば、APNG をMP4 動画に変換できます。時間がかかりますがGIFよりきれいです。

 

ezgif.comでMP4動画を作成する方法 

  1. GIF to MP4 または、APNG to MP4 を開く
  2. アニメGIFまたはAPNGファイルを指定(背景は透明にしない)

  3. 「Upload!」をクリック > 「Convert GIF to MP4!」をクリック > 「Save」(フロッピーディスクアイコン)をクリック。MP4をダウンロードできます。

 

f:id:dnjiro:20201016170757g:plainメモ:Mac版、 iPhone版は、MP4動画が出力できます。iPhoneを使った音入りアニメの変換方法はこちら

  

 

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

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

OS

フリーソフト

9VAeで作成する素材動画

Windows

AviUtl

連番PNG または MP4(Ezgifで変換)

Mac/iPhone/iPad

iMovie

MP4 または QuickTime(古いMac)

Android

PowerDirector

GIF

作り方

 

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

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

 

 

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

 

 

iPhoneの動画を Windowsパソコンに転送する方法:ひとコマ解説

iPhoneの動画をWindowsパソコンに転送する方法を説明します。 

f:id:dnjiro:20220119210802g:plain

ほかの解説動画はこちら

 

1. WindowsiCloud を入れる

f:id:dnjiro:20220119191411g:plain

  1. Microsoft Store で、iCloud の「入手」ボタンを押します。
  2. 「入手」ボタン。これで、 iCloud が、Windows にインストールされます。
  3. Windows ボタンから iCloud を実行します。
  4. Apple ID を入れます。
  5. パスワード
  6. サインインボタンを押します
  7. iPhone に6桁の番号が通知されるので、その番号を、Windows に入れます。
  8. iCloud 設定画面が開きます。データ転送するだけなら、iCloud Drive だけチェックを入れるとよいでしょう。
  9. 「適用」ボタン
  10. 「閉じる」ボタン
  • これで、iPhone で、iCloud に保存した動画が、Windows の「iCloud Drive」にはいります。「iCloud Drive」は同期しているため、Windowsでファイルを削除すると、iPhoneからみえる「iCloud 」のファイルも削除されるので注意。
  • 「写真」にチェックをいれると、iPhone/iPad の「iCloud」に保存されたフォトライブラリが「iCloud写真」の中に見えるようになります。たくさんの写真があると同期に時間がかかります。最初は「iCloud Drive」だけにチェックを入れ「適用」ボタンを押すとよいでしょう。あとから「写真」を同期することができます。

 

 

2. iPhone iMovie で、iCloud に動画を保存する

iMovie で作成した動画は、次のようにしてWindowsに転送できます。

f:id:dnjiro:20220119203859g:plain

  1. 出力ボタン「↑」を押す。
  2. 「ファイルに保存」
  3. iCloud Drive」(または「iCloud Driveに追加」)
  4. 「保存」

 

出力ボタン「↑」の代わりに「ビデオ保存」を選ぶと、動画はいったんフォトライブラリ(カメラロール)にはいります。iMovieによっては動画サイズを変更できます。

  1. ビデオを保存「↓」を押す。フォトライブラリに保存されます。
  2. 「写真」で保存されたビデオを開く
  3. 出力ボタン「↑」を押す。「ファイルに保存」>「iCloud Drive」(または「iCloud Driveに追加」)

 

 

3. Windows iCloud で動画を開く

f:id:dnjiro:20220119195728g:plain

  1. エクスプローラをひらく(Windowsボタン+E)
  2. 左側の「iCloud Drive」を選ぶ
  3. 少し待つと、動画ファイルが見えます。(ファイルが見えるまで時間がかかります。待てない場合、Windowsを再起動します。)
  • ファイルに「雲マーク」がついているとき、同期前(iCloudにはあるがWindowsにはない状態)を表します。ダブルクリックすると「回転マーク」にかわり同期が始まります。同期が完了すると「チェックマーク」になります(iCloudWindowsは同じ)
  • Windowsで「Downloads」フォルダにファイルをいれると、iPhone/iPad の「iCloudのダウンロード」で受け取ることができます。
  • iCloud アプリで「写真」にも同期するようにチェックをいれると、ビデオ保存した動画が、「iCloud写真」の中に見えます。

 

内容:


解説動画の作り方

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

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


使い方.youtube

上を見るとダウンロード、形の変形、SVGイラストをパーツ化する方法がわかります。

  • 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定するだけで作れます。
  • Youtube動画より作成が簡単で、スクロールしなくても見えるのが特長です。
  • 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 + ウィンドウ一覧キー(上の中央のキー)
マイファイル >
ダウンロード

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

音声合成でしゃべる解説動画の作り方

アニメGIF、動画出力

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

 

 

9VAeきゅうべえ Windows11版 開発メモ (2万円ドン・キ PCでプログラム開発)

Windows11 がリリースされたので、アニメ作成ソフト9VAeきゅうべえの アプリストア版を開発しようと思い、試行錯誤した記録です。今の 9va-win はアプリストアに登録できず、ZIPで実行系を配布しています。C#で作り直せば登録できるのですが、C と C++で作られているので、C++/WinRT を試してみることにしました。C++/WinRT は、ARM版とIntelWindowsアプリが同時開発できる新しい開発環境です。知識がない状態から、どのように開発していくのか公開します。 アプリ開発してストアへの登録作業までやってみました。2万円のWindowsパソコンに開発環境を入れる方法も紹介します。

 

 

ドン・キホーテ2万円ノートパソコン に VisualStudio を入れる方法

  • ドン・キホーテのノートパソコン U1 は、メモリ4GB、ストレージ64GB が2万円程度で入手できた激安ノート。キーボードをはずしてタブレットにもなります。
  • ただ64GB の C ドライブに、Visual Studio をいれると、WindowsUpdateができなくなります。しかし、SDカードには、Visual Studioがいれられません
  • 32GBのSDカードを、仮想ディスク(VHD)にすると、そこにインストールでき、ちゃんとプログラム開発できることがわかりました。その方法を紹介します。
  • ちゃんとデバッガも動きました。なお、実際の開発はデスクトップ機でやっています。ドンキ U1 はキーボードにくせがあり初心者にはすすめにくいですが、CPUを改良した U1C が入手できるようです。また、ストレージがすくない他のWindowsノートパソコンでも同じ方法が使えると思います。

 

仮想ディスク(VHD)の作り方

  1. 32GB 以上のSDカードをセット
  2. Windowsボタン>設定>「ディスク管理」を検索して実行(Win10)。「ディスクの管理」が起動します。
  3. 下にあるSDカード(リムーバブル)のバーを右ボタンクリック。メニューから「フォーマット」。これで、SDカードを「NTFS」でフォーマットします。exFATFAT32だと、数GBのファイルしか保存できないので、NTFSにしなければいけません。フォーマットにより中身はすべて消去されます。★★かならずリムーバブルを確認★★
  4. 「操作メニュー>VHDの作成」を実行。
  5. 「参照ボタン」でSDカードに仮想ディスクのファイル名を設定。短い半角英数名がよいです。
  6. 、最大サイズを設定し、OKボタンを押します。32GBのSDだと、28GBぐらいのファイルが作れます。
  7. ファイルができると、SDカードの下に「ディスク2」のバーができます。ウィンドウを縦にのばしてください。ファイルの作成には時間がかかります。
  8. 最初は「初期化されていない」「未割り当て」なので、左側を右ボタンクリックし「ディスクの初期化」を実行。GPTパーティションでよい。左側の表示が「オンライン」にかわります。
  9. 右側の「未割り当て」を右ボタンクリック。「新しいシンプルボリューム」を実行。「次へ」を何回かクリックし「NTFS」フォーマットのボリュームを作成します。
  10. 作成が完了すると、ドライブが割り当てられ、保存ができるようになります。この中に、Visual Studio をインストールすることができます。

作成した仮想ドライブを自動的にマウントする方法

  • PCを再起動すると、最初、仮想ディスクVHDは単なるファイルです。
  • 仮想ディスクファイルVHDをダブルクリックすれば、マウントされ、仮想ディスクが使えるようになります。
  • VHDファイルを右ボタンでクリックし「ショートカットの作成」でショートカットを作ります。これを、スタートアップフォルダにいれて、起動時に実行するようにします。
  • スタートアップフォルダは、Windowsボタンと「R」を同時におし、「ファイル名を指定して実行」で「shell:startup」で開きます。この中に、VHDのショートカットを入れます。

Visual Studio インストール

  1. ダウンロードはこちら  
  2. 古い Visual Studio を使っていた場合は、先に削除しましょう。ツールメニュー>「ツールと機能を取得」>Visual Studio Installer が起動します。「閉じる」>「インストール済み」タブ 「その他>アンインストール」
  3. Visual Studio Installer から、Visual Studio Community をインストールします。
  4. 「インストールの場所」タブで、上の2つの場所はCドライブ以外に変更できます。ただし、SDカードのようなリムーバブルディスクは選べません。上のように仮想ドライブを準備しておく必要があります。
  5. インストール場所を設定後、「ワークロード」タブで、言語やツールを選びます。C++/WinRTの開発の場合は、「C++によるデスクトップ開発」、「ユニバーサルWindowsプラットフォーム開発」を選びます。
  6. 不足していたモジュールは、あとから「個別のコンポーネント」タブで追加できます。

 

サンプルの動画編集プログラム(MediaEditing) をビルドして実行

  1. ここ GitHub を開く
  2. 「Code」ボタンの右側の▼をクリック。メニューから「Download ZIP」をクリック。Windows-universal-samples-main(.zip) がダウンロードフォルダに入手できます。
  3. ダウンロードフォルダを開く。Windows-universal-samples-main(.zip) を右ボタンでクリック。メニューから「すべて展開」を実行。「展開」ボタンをおすとダウンロードフォルダの中に「Windows-universal-samples-main」ができます。
  4. Windows-universal-samples-main」の中の「Samples」フォルダの中にたくさんのサンプルがはいっています。
  5. この中の「MediaEditing」を開きます。「cpp」の中にC++、「cs」の中にC#プログラムがはいっています。
  6. 「cpp」の中の「MediaEditing.sln」をダブルクリックします。
  7. Visual Studio が起動します。
  8. メニューバーの下の「Debug▼」「ARM▼」「リモートコンピュータ▼」がありますが、「ARM」の右側の▼をクリック。「x86」に変更します。「リモートコンピュータ」が「ローカルコンピュータ」に変わります。
  9. 「ローカルコンピュータ」をクリックすると、ビルド(プログラムから実行系を作る作業)が始まります。成功するとアプリがインストールされます。
  10. 初回、「開発者向け設定」画面が開きます。自作アプリをインストールするには「任意のソースからのアプリのインストール(開発者モード)」をオンにします。
  11. ドン・キホーテノートでも「MediaEditing」サンプルが起動しました。1) Trimming and Saving a clip をクリックすると、「1 Choose Video」「2 Trim Video」「3 Save Result」ボタンが表示されます。「1 Choose」ボタンで動画を選択。「2 Trim」で動画の前、後ろを削除。「3 Save Result」で、結果を保存できます。
  12. 以下、このサンプルプログラムを手掛かりに、WinRT アプリを作っていく過程を紹介しています。

Visual Studioでよく使うキー

  • Alt +B のあと B    ビルド
  • F5  実行、続きを実行
  • F9  ブレークポイント ON/OFF
  • F10  ステップ実行
  • F11  関数の中にはいる
  • Shift+F11  関数から外に抜ける 

Visual Studio メモ

  • 右側がソリューションエクスプローラで、プロジェクトに含まれるファイルなどが表示
  • ソリューションエクスプローラの親を右ボタンでクリックし、「スタートアッププロジェクトに設定」すると、右向き▲ボタンでこのプロジェクトが実行される。
  • ソリューションエクスプローラの親を右ボタンでクリックし、一番下の「プロパティ」を開くと、コンパイラー、リンカーなどの設定がみえる
  • プロパティの $(ProjectDir); はプロジェクトがあるフォルダ(.vcxproj, .sln)ほかの意味はこちら
  • ビルドすると下に結果が表示される。下の「出力」タブを押すとエラーが見える
  • プロパティの $(GeneratedFilesDir); は、x86, x64, ARM などのCPUフォルダ

 

WinRTに関する調査

  • C++/WinRT を開発するには、Visual Studio 2019 が必要。 C++17 のコンパイラが必要。いったん古い VisualStudioを削除し、2019 Community を入れるとよい。
  • 実行には、Windows10.0.17134.0 (Windows 10、バージョン 1803) 以上が必要らしい
  • IntelとARM版Windowsの両方で動くようになるらしい。M1 Mac はすばらしかったが、ARM Windows はいらん。あ、M1 Mac で動かすのかしら。ChromebookIntelとARM版があり、ARM のほうが応答が速い気がする。

C#のドキュメントは多いのですが、C++の資料があまりありません。C# のプログラムは、C++ プログラムに書き換えられるようです。MicrosoftのサンプルにはC#とC++の両方が用意されてます。

 

文字列処理

C# で使えるが、C++だと使えない文字列処理があるみたい。そのために、関数を定義して使うようだ。Substring関数の例

//選択したファイルの拡張子を差し替える文字列処理例
StrageFile ^pickedFile;
int len = pickedFile->Name->Length();
int ext = pickedFile->FileType->Length();

String ^suggestedFileName = Substring(pickedFile->Name,0,len-ext) + ".mp4";

 

String^ Helpers::Substring(String^ s, std::wstring::size_type startIndex, std::wstring::size_type length)
{
    std::wstring sourceString(s->Data());
    std::wstring substring = sourceString.substr(startIndex, length);
    return ref new String(substring.data());
}

非同期プログラム 

winRT は、多くの関数が非同期実行(結果がでる前に終了する)になっており、呼び出し方がきまっています。WinRTは co_await, C++/CXは、task クラス、.then メソッドを使います。/ZW コンパイラ スイッチ UWP用 が必要みたいです。WinRTの非同期関数の型 IAsyncAction, IAsyncOperationで、WithProgressで経過を処理できるみたいです。 

 

パッケージ

Windowsアプリにするためには、パッケージ化する必要あり

 

 

ファイルアクセス

  • UWPアプリには、ファイル システム全体にアクセスする権限がありません。
  • StorageApplicationPermissions クラスの FutureAccessList プロパティを使うとよいらしい。リストに1000件までいれられる。
  • auto picker = ref new FileOpenPicker();

動画編集

  • MediaComposition
  • MediaClip を画像ファイルから作成するには、画像ファイルと再生時間を指定して CreateFromImageFileAsync 

  •  ファイル作成は RenderToFileAsync。 作成経過は、AsyncOperationWithProgress 

  • 音は BackgroundAudioTrack.CreateFromFileAsync で BackgroundAudioTrack を作成。 BackgroundAudioTracks プロパティに追加。
  • 複数の音を入れるにはトラックを clone。Delayプロパティで開始時間をセット

 画像の作成は、SoftwareBitmapを使います。

  • SoftwareBitmap
  •  #include <MemoryBuffer.h> // IMemoryBufferByteAccess
  • SoftwareBitmap.LockBuffer で BitmapBuffer を取得
  • IMemoryBufferByteAccess.GetBuffer でデータを書き込む
  • unsafe キーワード宣言が必要。 プロジェクトの [ビルド] プロパティ>、[アンセーフ コードの許可] をオン

 

Canvasを使ったプログラムの作り方

Win2D を使うと、古いスタイルでプログラムできるみたいだ。

XAML といっしょに使う場合は、SurfaceImageSource を使うらしい。Canvasは古い?XAML には、<Image をいれるようだ。描画を高速で行う場合は、SwapChainPannelを使うらしい。

 

UWP サンプル

 

 試行錯誤の記録

未知の状態からプログラムを開発していく過程を紹介します。かなり苦労してます・・・が、独学とネット検索ですすめます。

 

勉強方法

新しいプログラム言語の習得は、次のようにやっています。

  1. 知っている人がいれば、その人にきく。>>WinRTを知っている人はいなかった。
  2. いない場合、やりたいことに近いサンプルコードを見つける
  3. サンプルコードを少しずつ改造していく

 

  • 今回やりたいことは、「9VAe Windows版にMP4出力をつけて、ストアプリにする」です。
  • その前段階として、9va2mp4 という変換アプリを作成します。
  • サンプルプログラムはすぐ見つかりましたが、中を見ると知らない言葉が・・。これを解読していきます。

元にするサンプル

見つけたサンプル「MediaEditing」はつぎのようなプログラムです。

 

  1. 動画ファイルを選択
  2. 動画の一部をクリップして保存
  3. 音楽トラックを追加

これを改造していきます。まずそのまま動作することを確認します。改造してエラーがでたら間違いとわかります。すこしずつ改造して動かしてみることが重要です。これを繰り返して正しい書き方を勉強していきます。9VAeは静止画を何枚も作成して動画にするので、まず、1枚のJPEGを動画にするように改造してみます。

動画作成方法の習得

  1. JPEGファイルを選択
  2. JPEGファイルから動画を作成して保存
  • 動画ファイル選択から、Xamlファイルの「Click=」に関数名をかくと、ボタンを押したときにその関数が実行されるとわかりました。
  • ハンドル宣言子(^)は、自動的に削除されるオブジェクトのポインタだと調べました。中身は(*)、メンバーは(->)でアクセスするとわかりました。
  • C# だと「MediaClip.CreateFromImageFileAsync(IStorageFile file, TimeSpan originalDuration)」が、C++ だと「MediaClip::CreateFromImageFileAsync(file, originalDuration)」と書けることがわかりました。
  • MediaCompositionを作成し、MediaClipを追加して、GeneratePreviewMediaStreamSourceで動画作成できることがわかりました。
  • JPEG画像を5秒つづける動画ができました。

さらに次のように改造します。関連したコードをコピペしてプログラムを作成します。文法エラーが出るので、それをなくすように修正していくと必要な知識があつまってきます。

  1. 画像を自分で作成する
  2. 動画を保存する
  •  Create_task then を続けて書く方法が見つかりました
  • 自分でBitmapを作成する場合は、SoftwareBitmap を使う。以前は、 WritableBitmap だった。これは、DirectXの内部メモリを直接アクセスし、高速。WinRTでは Windows::UI::Xaml::Media::Imaging::WritableBitmap が定義されたようです。
  • DirectX の中をさわるために、Microsoft::WRL::ComPtr 、IBufferByteAccess を使う。
  • IBufferByteAccess を使うためには、#include <robuffer.h> が必要。
  • IMemoryBufferByteAccess を使うには、#include <MemoryBuffer.h>が必要
  • AsComPtr 、ThrowIfFailed は自分で定義するようです。
  • SoftwareBitmapの作り方がわかりました。

次は動画を作成してみます。

  1. 画像が変化する動画を作成する。
  2. 1クリックで1コマめを作成し、2クリックで違う絵になる動画を作成する。
  • 動画にするには、いったんファイルにするほうがよいことがわかりました。
  • その場合、数1000枚の画像ができるため、終了後にこれを削除しなければいけません。
  • 作成した画像は、std::vector<Windows::Storage::StorageFile^>files; に記録すればよい。初期化は、files.resize(0); ファイル追加は、files.push_back(file); 全部削除は、for each( auto f in files) f->DeleteAsync();  vector の使い方はこちら。#include <vector> が必要
  • 削除も非同期処理になりますが、上のリストにいれておけばエラーを出さずに削除できることがわかりました。

 

タイマーイベントで動画作成するように変更します。

  1. クリックしなくても、自動的に何コマも作成できるようにする
  • タイマーイベントは、Windows::System::Threading::ThreadPoolTimer::CreatePeriodicTimer を使う。void timerThread(Windows::System::Threading::ThreadPoolTimer^ timer); 関数を定義する。
  • ただ、タイマーイベントにすると非同期処理がうまく動作せず、ボタンクリックで次の処理に進む方法にしました。

音の追加方法の習得

動画ができるめどがついたので、つぎに音楽をつけます。

  1. 動画に音をつける
  2. 指定した音の一部の時間を、動画の指定した時間からはめこむようにする
  • 指定した音楽ファイルがなかった場合、ファイルエラーが発生しますが、これを、try catch では処理できないようです。ファイルセキュリティのせいかもしれません。そのため、なかった場合はファイルを作成し、開いたファイルが直前につくられたものならファイルがなかったものにするという処理にしました。
  • 音の開始時間は、BackgroundAudioTrack ->Delay (TimeSpan) で設定。
  • 音の再生時間は、後ろからトリミングする。BackgroundAudioTrack ->TrimTimeFromEnd
  • 複数の音を動画に追加することができました。

ユーザーインタフェースの習得

音楽のめどがついたので、動画パラメータ(サイズ、コマ数、再生時間)ファイル名、の入力部分を作成します。

 

  1. 9va2mp4 の起動画面をつくる
  • アプリのスタートは、App::OnLaunched からスタートすることがわかりました。最初のページは、MainPageでした。これを、TrimAndSaveClip に変更し、画面を単純化しました。
  • xml にサイズ、コマ数、再生時間を追加する方法を調査。
  • <VisualStateManager.VisualStateGroups>でレイアウトを状態によって変更するようです。
  • <StackPanel でボタンを一列に並べる。 Orientation="Horizontal"で横。<Grid 表組、Grid.Row=行
  • <TextBlock 注釈などの表示
  • <TextBox 文字入力。 x:Name="PicWidth"  Margin="5" 、VerticalAlignment="Center"、TextChanged=" で入力が変化するごとに文字処理する。数値は、 FromStringTo<int>(PicWidth->Text); で取得できる。エラー処理のサンプルコード、TextChangedHandlerDouble 、自分で用意。PicWidth->Text = number.ToString();
  • <Button ボタン。x:Name="save" この「save」がオブジェクトポインタになる。save->IsEnabled = false; でボタン無効。Click="Save_Click"。 Save_Click が実行関数

既存ルーチンの組み込み

これで、コンバーターのUI部分はできました。9VAeのソースコードを組み込みます。

  • C のソースを追加すると「/ZW オプションがあるとコンパイルできない」エラーが出た。/ZW オプションは、プロジェクトには必要。Cソースには、/ZW オプションをいいえにできるようだ。
  • 「プリコンパイルヘッダー検索中に不明なEOFが見つかりました。pch.h をソースに追加しましたか?」エラーが出た。Cソースには、プリコンパイルヘッダを使わないよう個別設定。
  • 「error C3861: '__readfsdword': 識別子が見つかりませんでした。」エラーが出た。これは、プロジェクト>プロパティ>C/C++>コード生成>構造体メンバーアラインメントを8バイト(/Zp8)にすると出なくなった。
  • インクルードファイル(*.h)もすべてプロジェクトにいれておかないと正しく処理できない。
  • 9VAeソースは C++ライブラリにして、スタティックリンクするとよいかも。これだとライブラリのビルド設定は、メインと異なる設定で作れる。fopen を使う方法
  • スタティックライブラリの作成ができた。しかし、メインとリンクできず。「 LNK2001: 外部シンボル __imp__SelectObject@8 は未解決」など・・これらは以下のライブラリをプロジェクトに追加すると解決された。
  • gdi32.lib 。描画関数
  • kernel32.lib 。ファイル関係
  • shell32.lib  。ShellExecute
  • comdlg32.lib。コモンダイアログ
  • YesNoダイアログなど、winRT側で表示したほうがよい関数は、メインプロジェクトに cpp 関数をつくっていれて、リンクエラーがなくなった!
  • プロジェクトツリーの親を右ボタンクリックし「ビルドの依存関係」でライブラリを追加すれば、いっしょにビルドすることができ、ライブラリもデバッガーで動く。すばらしい。

ファイルアクセス権限の調査

リンクエラーがなくなったので、メインとの接続部分を作っていきます。

winRT で 9VA ファイルを選択してライブラリにわたし、縦、横サイズが取得できるまでを作ります。

auto picker = ref new FileOpenPicker();
create_task(picker->PickSingleFileAsync()).then([this](StorageFile^ videoFile)
{
    auto tempFolder = ApplicationData::Current->TemporaryFolder;
    create_task(videoFile->CopyAsync(tempFolder, videoFile->Name, NameCollisionOption::ReplaceExisting)).then([this](StorageFile^ tempFile)
    {
        String^ path = tempFile->Path;
        std::wstring wp(path->Data());
        std::string sp(wp.begin(), wp.end());
        char* cpath = (char*)sp.c_str(); //これで fopenできた
    }
}

 

選択した9VA ファイルから1コマの動画を作成し、プレビューに表示するまで作ります

  • ファイルにアクセスできたが、描画するための HDC(描画先) や HWND(ウィンドウ) をどう取得すればよいか問題に。Windows.UI.Component というのをつかうとよいらしいが、ややこしそう。
  • HDCは、GetDC(NULL) で、ディスプレイのHDCが得られるようだ。これで9VAeがディスプレイに直接描画した!最後は描画しないようにしないといけないがどこまで動いたかわかるのでこのままにしておく。

アプリの完成

ライブラリと接続し、デバッガーで動作するようになったので、あとは、次のような点を調整

  1. 入力数値のエラー処理
  2. 中断処理
  3. 8の倍数でない出力ができるか
  4. 外部ファイル(画像、音楽)の読み出し(テンポラリーへの複製ができるか)
  5. MIDI音楽の再生  >> 難しそうなのであきらめ
  6. 漢字ファイル名への対応  >> この変換プログラムを使用
  7. 多国語対応

ファイルピッカーでユーザーが指定したファイルしか読みだせないので、最初にアニメーションで使っているファイルをすべて選択してもらうことにする。これをテンポラリに転送し、その中で読み出しを行う。

  • 複数ファイルを選択し、全部テンポラリにコピーするコード

auto picker = ref new FileOpenPicker();
create_task(picker->PickMultipleFilesAsync()).then([this]

    (IVectorView<StorageFile^>^ files)

{
    auto tempFolder = ApplicationData::Current->TemporaryFolder;
    for (auto file : files) {//複製
        flle->CopyAsync(tempFolder, file->Name, NameCollisionOption::ReplaceExisting);
    }
});

  • auto は自動型設定(右にあわせる)、ref new で割り当てると自動的に解放される
  • create_task  then は非同期処理。[this] は非同期処理に this をわたす。^で定義したオブジェクトは外側の定義が引き継がれるので[  ] には入れない。
  • IVectorView<StorageFile^>^ files は、torageFile^の配列で、複数選択結果
  • for (auto file : files) 、autoで fileの型が自動設定される。
  • NameCollisionOption::ReplaceExisting は同名があったとき上書き

 

  • 動画を作成するために全フレームのBMP画像をテンポラリフォルダに作成しているが、MP4を作成したあと、メディア表示にも使われるみたい。削除するとメディア表示ができなくなった。

 

9VAeファイルからMP4動画に変換するアプリ「9va2mp4」に仕上げます。

 

多国語対応

  • Stringsフォルダを自分で作成して、en-US, ja-JP フォルダを入れる。英語の説明
  • 新規追加>XAML>リソースファイル(.resw)を入れ「Resources.resw」にリネーム。しかしこの方法では、Stringフォルダも en-US フォルダもできなかった。
  • いったん除外し、エクスプローラで、String/en-US, String/ja-JP フォルダを作成し、Resources.resw をそこに入れてからプロジェクトに追加。
  • Xamlやプログラム中の文字列の入れ替えは説明をみてもよくわからず、サンプルから以下のコードを抽出。アプリの先頭に以下のコードをいれた。

//定義
    private:
        Windows::ApplicationModel::Resources::Core::ResourceMap^ strMap;
        Windows::ApplicationModel::Resources::Core::ResourceContext^ strContext;


//プログラムの先頭にいれる "Resources" は、"Resources.resw"に対応
    strMap = Windows::ApplicationModel::Resources::Core::ResourceManager::Current->MainResourceMap->GetSubtree(L"Resources");
    strContext = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView();

    button1->Content = strMap->GetValue("button1", strContext)->ValueAsString;
    textBlock1->Text = strMap->GetValue("textBlock1", strContext)->ValueAsString;

  • button1はボタン(xaml のx:name)、ja-JP フォルダの"Resources.resw" に 名前"button1" 値 "日本語のボタン"、 en-US フォルダの"Resources.resw" に 名前"button1" 値 "English button name"、といった感じで書いておく。 textBlock1 はテキスト

f:id:dnjiro:20210918213711p:plain

上の日本語の表示は ja-JPフォルダ。英語は en-USにはいっており言語によって切り替えできるようになった。

 

パッケージ化

  1. 「サイドローディング」「自動更新」のチェックははずしておく。「次へ」
  2. 「署名の追加」ここで「作成」をおすとテスト用署名がつくれる。これがPCに登録され、PCにインストールできる。
  3. バージョン、アーキテクチャ選択
  4. 「自動更新」のチェックがあると、自動更新を配信するサイトが必要
  1. Windows10SDK これは、Visual Studio をいれると導入される。「ツールメニュー>ツールと機能の取得>個別のコンポーネント」で確認できる
  2. Windows設定で「開発者モード」をオンにする
  3. VisualStudio でパッケージ作成すれば、Windowsアプリ認定キットで実行できる

パッケージの動作テスト

  • パッケージの中の「Add-AppDevPackage.ps1」を右ボタンクリック。Powershellで実行。これで管理者権限の取得やアプリの登録が実行される
  • デバッガーで実行した後だと、同じアプリがすでに登録されているエラーになる。Windows設定からアプリを削除する必要あり(新しくインストールしたものから検索)

アプリストアに登録してみます。まず、開発者登録。

開発者登録

  • 開発者登録はこちら。料金は個人19ドル。1回限りでよい(Appleは毎年とられる)
  • 国名:Japan
  • Publisher名、住所、電話番号、を入力。Microsoft Acountをいれたが支払いのページで1回失敗したが、アカウントに戻り再入力すると、支払いページに別の支払い方法リンクにはいり登録できた。多くの人は開発者登録のクーポンで登録するのだろう。
  • 登録すると Microsoft Partner Centerが開く。アプリ作成方法がかいてある。

 

アプリの登録

  • アプリの名前:9vae2mp4 といれると、アプリのページが新しくできた。
  • Application overview:Pricing and availability
  • 価格を無料に設定して保存すると、次の項目になった。
  • Submission 1:Properties  > Photo+Video  
  • プライバシーポリシー情報を入力
  • Display mode:Mix Reality表示するか >いいえ
  • Product declarations:宣言
  • System requirements:必要なハードウェア。特に設定せず
  • Age ratings:年齢に関連した情報をいれる
  • Packages:作成したパッケージを登録する。下のようにしてパッケージ作成。x86_bundle.msixupload をドラッグして登録。Windows10 Desktop だけにチェックした。古いDLL使用で認定テスト不合格だが動くので登録してみる。
  • Store listings:アプリの説明を言語ごとに作成
  • Default description:アプリの説明、Screenshots:スクリーンショット
  • Store logos、Trailers and additional assets、Supplemental fields は省略
  • Additional information にURLを追加、Copyright (c) 9VAe Lab、Developed by Danjiro Daiwa とした
  • ここまで入力して審査に提出>>やはり、下の認定テストに通らないとアップできない。

 

Microsoft Store と関連づけてからパッケージ作成、認定テスト実施

  1. VisualStudio >プロジェクト右ボタン>公開>アプリを Microsoft Store と関連づけを実行
  2. PartnerCenterに登録した名前 9vae2mp4 がリストに表示されたのでそれと関連付けできた。
  3. 公開者ID:関連付けを行うと自動作成された
  4. プロジェクト右ボタン>公開>パッケージ作成
  5. PartnerCenterに登録した公開者、名前で作成 。アーキテクチャ x86 のみとした。
  6. Windowsアプリ認定キットを使用にチェックを入れて作成実行
  7. 作成完了後「Windowsアプリ認定キットを起動」をクリック
  • HDCを使った描画関数などが使用不可で不合格という判定が出た。テスト実行はできたが、アプリ登録は不可。gdi32.dll, kernel32.dll, user32.dll, winmm.dll 

認定テストが合格になり、ストアの掲載情報を入力すれば、Microsoftに審査提出できるみたい。描画部分を全部、Direct2Dに置き換えないといけない。これは時間がかかりそう。Windowsストアアプリが増えなかった一因かも。

 

感想:Mac の M1 対応の場合、古い描画関数(Objective-C)がそのまま使えた(一部修正はあったが)。Windowsの場合、GDI関数の抽象化が不十分なため、ARMでも動かすために描画関数を使えなくするようだ。ハードアクセラレータの組み込みを簡単にするためCPU描画をなくしたいのかも。MacOSは、スティーブ・ジョブズMac を追い出されてつくった Next社の Next Step がベースで、Objective-C で作られていた。NextStep は、PowerPCでも Intel でも動いたので、MacIntel から、 Arm の M1 CPUに変更できた。Windowsも同じことをやりたいが、ハードアクセラレータの部分もいっしょに抽象化したいのだろう。 テスト実行(サイドローディング)だと昔のCPU描画でも動くのは、移行支援のためか。方針は納得できるが、過去のCPU描画アプリをストアアプリに修正するのは、Mac よりも相当難しいみたいだ。自分で確保したバッファメモリ中に文字を描画できない点がネック。(Android版 9VAe のDXライブラリもそうなっている)

Direct2D、DirectWrite

HDCがつかえるライブラリみたいだが、たぶん難しかったのだろう。開発がとまっているらしい。なんとか完成させてほしい。

 最終目標:下がWindowsストアアプリでできるようにする

f:id:dnjiro:20210722171735g:plain

 

いまのところの結論

  • CPU描画の過去のプログラムを、Windowsストアアプリに変更するのは、内部の作り方によっては、相当むずかしいことがわかった。9VAeの移植はいったんあきらめ。
  • 過去のWindows有名アプリも同じような状況と予想。AviUtlなど多くのソフトが、ストアアプリにならないのではないか。Objective-C が使えるAppleと異なる。ストアアプリがふえないので、Android アプリを動かす作戦に出たのでは。
  • ハードアクセラレータが必須の3次元アプリは、作り直さないといけないので、ストアアプリにできる。
  • もともと、9VAeに動画出力をつけるのが目的だった。「ffmpeg」をつかったらできた
  • あきらめていたら、Amazon版9VAeがWindowsストアアプリに勝手になった。Windows Subsystem for Android を使う。

 

 

動く動画フレームの作り方:無料ソフト9VAeきゅうべえ

9VAeきゅうべえアンドロイド版でもPC版iPad版でもつくれます。作業時間は15分くらいです。動画編集用素材にもなります

f:id:dnjiro:20210730230715g:plain

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

 

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

 

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

Openclipart (Heart Fractal Outline) からダウンロードします。

 

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

f:id:dnjiro:20210730235631g:plain

 

アニメキャストの中身を保存して開く(ツールメニューから読み込んだ場合)

ツールメニューからよみこんだイラストはアニメキャストという部品になります。アニメキャストが便利な場合もありますが、動きをつけたい場合は、アニメキャストの中身を開きます。
 
  1. 選択枠の中心の「+」(上図B)をクリック。メニューの上から2番目「アニメ(...)を修正」をクリック。アニメキャストの中が開きます。

  2. 「ファイルメニュー>名前をつけて保存」で「heartframe」という名前をつけて保存します。(上図C)
  3. 「ファイルメニュー>開く」(上図D)。「heartframe」を開きます。

  4. これに動きをつけていきましょう

中央上のハートをひとつ選んで移動

  1. パレットの下(下図E)をタッチするとパレットが消えます。スマホ版ではよく使う操作です。右下の「もどす」で元に戻ります。

    f:id:dnjiro:20210731074127g:plain

  2. ページ右の「+」(上図F)をタッチ。「続きのページを作る」をタッチ。これで2ページができます。
  3. ハートをタッチして選びます(上図G)。
  4. 点選択ボタン(上図H)で点がすべて表示されます。
  5. 中心の上のハートの点の一部(上図I)を選びます。
  6. 点選択ボタン(上図J)をもう一度押せば、選んだ点のハートだけ点が表示されます。
  7. 左下の表示拡大ボタン「+」(上図K)で選んだハートが拡大されます。
  8. ハートの全部の点を選びます(上図L)
  9. 選択枠中心の「+」をドラッグして下に下げます(上図M)
  10. 「表示メニュー>前後のページを重ねて表示」(上図N)これで1ページのハートの位置が薄い色で表示されます。

ハートをひとつずつ隣に移動

  1. ハートをタッチして選びます(下図O)。

    f:id:dnjiro:20210731092210g:plain

  2. 点選択ボタン(上図P)。全部の点が表示されます。
  3. 中心からひとつ左のハートの点(上図Q)を選びます。
  4. 点選択ボタン(上図R)を2回タッチ。1回めで選んだハートだけの点になり、2回めでハートがひとつ選択された状態になります。
  5. 中心の「+」をドラッグして右下に移動(上図S)。
  6. 選択枠の角の■(上図T)をタッチ。メニューから「回転」。前のページのハートの位置に重ねます。
  7. この作業を繰り返します。
  8. ハートをタッチし、左側のハートの一部の点を選択(上図U) 
  9. 点選択ボタン(上図V)。移動し、回転し、となりのハートに重ねます(上図W)

上の作業を繰り返し

  • ハートをひとつずつ移動させます。
  • スマホの場合、2本指で画面をスクロールすると表示場所が変えられます。
  • パソコンの場合、スペースキーを押しながら画面をドラッグすると表示場所が変えられます。

f:id:dnjiro:20210731101142g:plain

 繰り返し、文字をいれる

  1. 左下の虫眼鏡ボタン(下図X)で全体を表示。

    f:id:dnjiro:20210731143220g:plain

  2. 1ページ(上図Y)をタッチし1ページに移動。
  3. 「ツールメニュー>繰り返し」をタッチ(上図Z)。これで「繰り返し」命令がはいり、1ページと2ページの間が繰り返し再生されるようになります。
  4. 1ページの時間(1秒)(上図a)をタッチ。メニューから「0.1秒短くする」を5回おして、1ページの時間を 0.5秒に設定
  5. 先頭ページの左側の「<」(上図b)をタッチ。メニューから「グリーンの背景を入れる」を実行。背景がグリーンバックになります。
  6. 2ページ(上図c)をタッチし3ページに移動。
  7. 文字入力ボタン「A」(上図d)をタッチ。「9VAeでつくれるよ」と入力。
  8. 選択枠の角の■をドラッグして文字を拡大(上図e)。
  9. 右下の「もどす」(上図f)をタッチしてパレットを表示。
  10. 線の種類ボタン(上図g)をタッチ。「縁をつける」で文字が縁取りされます。
  11. 文字タブ2(上図h)をタッチ。文字色ボタン(上図i)で文字の色を設定します。
  12. f:id:dnjiro:20210722162654g:plainプレイボタンで動きをみてみましょう。

    f:id:dnjiro:20210730230715g:plain

 アニメGIF / 動画(MP4)出力

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

 

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

アニメ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きゅうべえを使えば、SVGイラストからいろんな動画素材を作成できます。SVGの静止画のフリー素材イラストがネット上にたくさんあります。いろんな動画素材を作ってみてください。

 

  • 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote
アニメGIF 背景を透明にして出力(PowerPointの例
iMovie
PowerDirector
グリーンバック動画 先頭にグリーンバック背景を入れる。(iMovieの例PowerDirectorの例
AviUtl 連番PNG 背景を透明にして出力(AviUtlの例

 

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

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

 

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