dnjiro’s 9VAe blog

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

9VAeきゅうべえiOS版 http:ダウンロードとタイル塗りつぶし

9va-mac64bit版がいちおうできたので、そのソースを利用して、iOS版を作り直している。

 

ネットからhttp:URLからのダウンロードができなくなってる

  • 一度作成したとき、initWithContentsOfURL をつかってダウンロードできていたように思ったが、次のようなエラーがでてダウンロードできなくなった。"NSURLErrorDomain" - code: 18446744073709550414
  • 同様のエラー記事がこちら。

    NSURLErrorDomain Issues |Apple Developer Forums

  • なんと、iOS9 から http:通信ができなくなってるらしい。iOS8対応にすればよいかと思ったら、iOS8だとスクリーンにへこみがあるときの SafeAreaがつかえない。

    iOS9のWebviewでNSURLErrorDomainとなる場合の対処法(ATS) - Qiita

  • 上の記事にあった対応をしてみる。App Transport Security Setting の中にある NSAllowsArbitraryLoads をYESにするとダウンロードできるようになった。

    アプリ内のInfo.plistを編集し、NSAllowsArbitraryLoadsYESとするとATSは無効化されます。

     

タイル塗りつぶし

  •  mac64bit版の描画をそのままつかうとタイル塗りつぶしができるようになった。ただ、半透明になっているのがすこしおかしい。

    f:id:dnjiro:20190903185947p:plain

    と思ったら mac64bit も同じ症状である。修正しないといかん。

 

 Ver.0.6.8 で修正。公開した。

9VAeきゅうべえVer.0.6.7 について

2019年8月末に、9VAeきゅうべえVer.0.6.7(Mac版、Windows版、ラズパイ、Ubuntu版)をリリースしました(ダウンロードはこちら。)その内容を紹介します。Ver.0.6.6から、Ver.0.6.7までソースコードがかなり変更されました、その内容は大きく次の2つです。

  1. キッズプラザ対応(PEAS motch! one)
  2. macOS 64bit 版対応

 

キッズプラザ対応

キッズプラザ対応とは、キッズプラザ大阪のフロアに5台設置するための対応で、

  • タイマー処理の追加。子供が操作しないと自動的に作品をアップロードして初期状態にもどる。
  • ファイル名の自動付与
  • 保存先フォルダの指定。5台の端末の保存先を1つのフォルダにする。
  • プレーヤーの改善。作品を順番に再生するが、アップロードされた作品はすぐ再生する。最後にアップロードされた10作品だけを再生する。日付がかわったら新しいフォルダの作品を再生する。
  • ネットワークの接続が切れたらすぐわかる表示

など、多くの機能を追加しました。これらは、9VAeきゅうべえを教室で使うときにも便利に使えます。後の「日付フォルダ保存機能」で説明します。

 

macOS 64bit 版対応

macOS 64bit 版対応は4月から取り組みました。画面の描画システムを Core Graphics 、イベント処理を Cocoa に変更し、メインルーチンをすべて書き換えました。文字表示やダイアログ作成、音の再生、動画出力など、多くの処理手順がかわったため、9VAeきゅうべえライブラリに影響がありました。64bit化により、16bit処理で作られていたアニメGIF出力ルーチンが動かなくなり、コードの修正が必要でした。

 

SVG保存

 macOS 64bit 版は標準の保存形式を、EVAからSVGに変更しました。SVGで保存するとファインダで選んだときにプレビューが表示されます。SVG保存はEVAで保存するより時間がかかります。名前をつけて保存するときに、拡張子「.eva」をつければ、EVA形式で保存できます。

 

タイル塗りつぶし

Core Graphicsを使ってタイル塗りつぶしを行ったところ、改善点がみつかったので、Windows版、Linux版のタイル塗りつぶしも修正しました。タイル塗りつぶし表現が少し変わってしまったかもしれません。

 

 

日付フォルダ保存機能の使い方

複数台のパソコンをつかって、アニメ制作体験コーナーを実施すると、以外に手間がかかるのが、データの保存です。普通は(1)フォルダを指定し、(2)ファイル名をつけて保存します。もし共通のフォルダに保存しようと思うと、同じ名前が存在すると困るので、パソコンに番号をつけておき、ファイル名に必ずパソコン番号を入れるといった対応をします。そういった説明が手間で、そのとおりできない子供が必ずあらわれます。

 

これを解決するために

  • 保存先をファイル(setpath.ini)に書いておく
  • そこに、2019-0810 といった年-月日フォルダを自動作成し、そこに保存する
  • ファイル名は自動的に連番を作成する

この機能が「日付フォルダ保存機能」です。9VAeきゅうべえ Ver.0.6.7 から使えます。

 

使ってみる(Windows / ラズベリーパイ、Linux の場合)

    1. 9va-win, 9va-pi の場合、9va_data フォルダの中に、#setpath.ini ファイルがはいっています。これを、setpath.ini にリネームします。
    2. setpath.ini をテキストエディタで開き、次のような行(保存先をデスクトップとしたときのフルパス)を最後に追加します。パソコンの環境によって追加する文字列は異なります。

C:¥Users¥xxxxxx¥Desktop(Windowsでデスクトップを指定した例)

/home/pi/Desktop(ラズベリーパイでデスクトップを指定した例)

  • この状態で、9va-win, 9va-pi  を起動します。
  • ヘルプメニュー>「かおであそぼう(練習用)」>わらえもん
  • 顔を自由に移動、変形して、ファイルメニュー>名前をつけて保存

これで、デスクトップに今日の日付フォルダが作成され、ファイル名に「0000.eva」が表示されれば成功です。保存してから、もう一度「わらえもん」を作成すると、次は「0001.eva」になるはずです。

 

使ってみる(Macintoshの場合)

  1. 9VAeアイコンがはいっているフォルダにある readme.txt を「複製」する
  2. setpath という名前にリネームする。
  3. ファインダで選択し、右ボタンメニューから「情報を見る」
  4. 「名前と拡張子」を「setpath.ini」に変更し、拡張子を「.ini」に変更する
  5. 「setpath.ini」をテキストエディタで開き、中身を全部選択し、削除し、何もはいっていない状態にする。
  6. ファインダで「デスクトップ」をドラッグし、テキストエディタの上にドロップする。すると下のような、デスクトップフォルダのパスがはいる(内容は環境によって違います)

/Users/xxxxxx/Desktop

 

  • setpath.ini を保存して閉じる
  • 9VAeを起動し、 上と同じように「わらえもん」を作って保存してみてください。
  • Macの場合、デスクトップに日付フォルダができますが、保存するときに自分で日付フォルダを選ばなければなりません。保存ダイアログを開くときのフォルダの場所をプログラムで指定する方法が見つからないためです。

 

9View-lastday プレーヤーの使い方

上のようにして日付フォルダに保存したデータを再生する専用プレーヤが「9view-lastday」です。キッズプラザ大阪でも使われています。

 

  1. プレーヤー「9view」または「9View」 を複製します。(Macは複製、Win/Linux は、コピー&ペースト)
  2. 名前を「9view-lastday」または「9View-lastday」にリネームします。
  3. 「9view-lastday」を起動します

これで、setpath.ini で指定したフォルダの中の一番新しい日付フォルダをさがして、その中の作品を連続再生します。日付がかわると自動的に新しい日付フォルダに移るため連続運転が可能です。

 

 

パソコン1台でアニメ制作体験

日付フォルダ保存機能と、9view-lastday 、ヘルプメニューから開く「わらえもん」は、パソコン1台でアニメ制作体験を行うために開発した機能です。この機能があれば、「わらえもん」を順番に開くだけで、ファイル名が連番で保存できる(新しくわらえもんを開くときに、保存するかどうか尋ねられるので、Yesを押せば連番で保存できる)ので、次々に子供達がきても簡単にアニメ作成、保存ができます。

 

9view-lastday を起動しておけば、最後の10本が繰り返して再生されます。

この機能は、Ver.0.6.7 から使えます。ご活用ください。

簡単エンドロール動画の作り方 :9VAeきゅうべえ

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

f:id:dnjiro:20190426092918g:plain



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

 

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

 

1. 文字をいれる

  1. f:id:dnjiro:20190426101709g:plainをクリックして文字を入れる

  2. 文字は250文字以内で区切って入れる
  3. f:id:dnjiro:20190426102049g:plainの右側の「-」をクリック。画面の外が見えるので、画面の下に後から出てくる文字を入れる。

文字を整列させるには次のようにします。

  1. 文字を全部選ぶ。「編集>選択する>全て」。(スマホ版は「編集>すべて選択」)
  2. 「調整>整列>縦軸を合わせる」(スマホ版は「配置>縦軸を合わせる」)
  3. 「調整>整列>上下のすきまを均等に」。(スマホ版は「配置>上下のすきまを均等に」)f:id:dnjiro:20190426102824p:plain

 

2. 背景をいれる

  1. 先頭ページの左側の「<」をクリック>メニューから「背景ページを入れる」
  2. f:id:dnjiro:20190426103850g:plainをクリック。画面全体を四角で囲んで背景に色をつける。色は右側のパレットで選ぶ。

  • 背景に写真を入れてもかまいません。メニューから「ツール>絵・写真を入れる」をクリック。(スマホ版の場合、ファイルマネージャアプリを使って写真を「9VAe」フォルダに入れておきます。)
  • 文字の色を変更したい場合、2ページをクリックして移動し、文字を全部選んでから、f:id:dnjiro:20190426104430g:plainをクリックし「タブ2」の中の色ボタンで変更します。

    f:id:dnjiro:20190426105009p:plain


     

3. 続きのページを作成

  1. 2ページの後ろのf:id:dnjiro:20181221171302g:plainをクリック。「続きのページを作る」をクリック
  2. 文字を全部選び、ドラッグして上に移動。(選んだあと中心の「+」>「移動」でもかまいません。「Shift」キーを押しながら移動させれば、まっすぐ上に移動します。スマホ版は「Shift」ボタン)

 

4. 時間調整、プレイして確認

  1. 2ページの上の「〇〇秒」をクリック。メニューから「1秒長くする」で時間を調整。
  2. 3ページの時間で、エンドロール終了後の文字の停止時間を調整できます。
  3. プレイボタンf:id:dnjiro:20181029083754g:plainで動作を確認

    f:id:dnjiro:20190426110623p:plain

 

 

5.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」
  • 出力画面サイズの「高さ」を720に設定。スマホ版の場合、幅を空白にすれば同じ比率で「幅」が自動的に設定される。
  • 「OK」ボタンでアニメGIFファイルができる

 

6.ezgif サイトで、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きゅうべえと ezgif を使えば簡単にエンドロール動画が作れます。
  • この方法は、自由度が非常に高く、文字の位置、文字サイズ、エンドロールがでてくる場所、タイミングなど自由自在に作成できます。
  • アニメーションをいれたり様々なエンドロールが作れます。

Android版では、あまり長いアニメGIFは作成できません。

  • もっと長いアニメを作りたい場合、以下をご覧ください。

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

 

 

1枚の写真から簡単MP4動画の作り方

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

f:id:dnjiro:20191204123643g:plain


このアニメーションは、キッズプラザ大阪の写真の上に楕円と文字をいれたひとこまアニメーションで10分ぐらいで作れます。他のアニメの作り方はこちらをご覧ください

 

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

 

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

9VAeきゅうべえで「ひとこまアニメーション」を作る場合、絵を描く前に「1.鉛筆」を押す必要があります。これは制作途中の作品が勝手に「ひとこまアニメーション」にならないようにするためのルールです。

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

 

f:id:dnjiro:20191204142831p:plain

 

2. 背景ページを作る

 

  1. 先頭ページの左側の「<」(上図B)をクリック>メニューから「背景ページを入れる」。これで先頭に背景ページができます。

背景ページに写真をいれておけば、編集が楽になります。背景ページに描いた絵は後ろのページの背景に表示されます。

 

3. 写真のダウンロード

  1. キッズプラザ大阪の写真はこちらにあります。
  2. アンドロイドの場合、写真を長押しし、写真のリンクアドレスをコピーします。そのあと、9VAeきゅうべえの「ツールメニュー>ネットからダウンロード」にリンクアドレスをペーストし「OK」を押せば写真が背景ページにはいります。(Ver.191119 以上)入力できない場合は新しいバージョンにしてください。
  3. iPhone/iPad版の場合、写真をカメラロールにダウンロードしてから、9VAeきゅうべえの「ツールメニュー>絵・写真を入れる」で写真を選びます。
  4. Windows/Mac/Linux版の場合、写真をダウンロードしてから、9VAeきゅうべえの「ツールメニュー>絵・写真を入れる」で写真を選びます。

f:id:dnjiro:20191204144247p:plain

4. 写真のサイズ、位置調整

  1. 写真の選択枠の角の「■」ハンドル(上図C)をドラッグすれば写真が拡大できます。
  2. 写真の中心の「+」や枠線(上図D)をドラッグすれば写真の位置が変更できます。
  3. 9VAeきゅうべえは写真を回転させることはできません。

 

5. 2ページに移動。楕円をいれる。

  1. 2ページ(上図E)をクリックして2ページに移動
  2. 楕円ボタン(下図F)をクリックし、中心(下図G)から楕円を描きます。
  3. 選択ボタン(下図H)を押せば、入力した線の色や属性を変更できます。
  4. 線の色は、カラーパレットの下の左側(下図I)です。白にしてみましょう。
  5. 線の属性は下の右から2番目(下図J)で、「ぶれ、ぼかし、影、光、縁取り」があります。ぼかしにしてみましょう。
  6. 間違えた場合、戻すボタン(下図K)を押せば何回でもやりなおせます。

    f:id:dnjiro:20191204150643p:plain

 

6. 文字をいれる。

  1.  文字入力ボタン(下図L)をクリックし、文字をいれます。
  2. 選択枠の角の「■」ハンドル(下図M)で文字の大きさを調整できます。
  3. 文字の色は、文字タブ(下図N)をクリックし、カラーパレットから変更します。白にしてみましょう。
  4. 文字にも線と同じ属性をつけることができます。図形タブ(下図O)をクリックし、線の種類ボタン(下図P)をクリックし、「縁取り」にしてみましょう。
  5. 縁取りの色は、色2(下図Q)で設定します。濃い青にしてみましょう。
  6. 縁取りの太さは線の種類ボタン(下図P)のメニューの下にある「広く・せまく」で調整できます。

    f:id:dnjiro:20191204153815p:plain

 

7. ひとこまアニメーション完成

  1. ページの右側のf:id:dnjiro:20190424153550p:plain(上図R)をクリック>これでアニメーションが完成です。
  • f:id:dnjiro:20190424153550p:plainは何回でもクリックできます。その都度1コマアニメーションが作り直されます。
  • ページの上の「〇〇秒」(上図S)をクリックし、時間を修正すれば、アニメーションの速さを調整できます。
  • 文字が1文字ずつでてこない場合、9VAeきゅうべえのバージョンが古い可能性があります。Ver.0.6.11 以上にしてください。

 

8.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」
  • もし、Youtube動画を作成したい場合は、出力画面サイズの「高さ」を720に設定するとよいでしょう。スマホ版の場合、幅を空白にすれば同じ比率で「幅」が自動的に設定されます。
  • 「OK」ボタンでアニメGIFファイルができます。

 

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

  • Mac / iPhone / iPad版には、ファイルメニューの中に「動画出力」があり、アニメGIFと同じ操作で、MP4動画を作成できます。
  • Windows / Linux / Android 版の場合、次のように、ezgif.com を使って、アニメGIFを、MP4動画に変換するのが簡単です。

 

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

     

 

9VAeを使えばショートクリップ動画がすぐ作れる 

  • 9VAeきゅうべえを使えば、スマホだけで短い動画が簡単につくれます。ぜひご利用ください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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

 

 

9VAeきゅうべえ Mac 64bit版 開発メモ

9VAe Mac版の Mojave 対応版をリリースしたが、Sierra より動作が遅い。32bit版アプリの動作が制限されているようだ。仕方がないので、64bit版への移植を開始。

Objective-C で移植します。Cプログラムの移植には、Swiftよりはるかに使いやすいです。

 

いろいろ試行錯誤を繰り返しなんとか動くようになったので、こちらで公開(9va-mac64)しました。

以下は、macOS 10.15 Catalina ベータ版での画面です。左上のフォルダが従来の9VAeで、32bit アプリなのでストップマークがついて実行できません。2つめのフォルダが今回移植した64bit版9VAeです。ストアアプリでないので最初に警告がでますが、マウス右ボタンメニュー>「開く」をもう一度実行すると、ちゃんと動作しました。

 

f:id:dnjiro:20190828191236p:plain



 

 

 

64bit版移植の方針

  • Objective-C を使う。9VAe iOS版が Objective-C で書かれているので、それを利用して移植する。
  • Objective-C のサンプルコードは、ネットから入手できなくなっている。そこで、古いMacOSのDVDにはいっている Xcode サンプル Sketch を使う。
  • これを最新の Xcode で読み込むと新しいプロジェクトにコンバートしてくれる。
  • イベント処理を残し、iOS版の9VAeのプログラムを追加し、Sketchの処理ルーチンを取り除く。
  • iOSmacOSで関数が異なる部分を修正する。iOSのUI関数が、macOSでは使えない。また、mouseの処理、メニュー処理が iOSにないので追加する。

 

プロジェクトの修正

  • Sketch プロジェクトの名前を QVAe に修正。
  • MacOS Development Target を 10.10 にする
  • Build Settings > Search Paths > Always Search User Paths(Deprecated) をNoにする

プロジェクトターゲットの修正

  • General > App Icons  (1)「Migrate」ボタンクリック(1回しか押してはいけない) (2) 左側のリスト > Resources > Images.xcassets > AppIcon (3) 右側に128x128 png アイコンをドラッグして追加 

リソースの修正

  • 古いアイコン Draw2App.icns を削除
  • Draw2.nib > Localization > (1) English にチェック (2) English,deprecatedのチェックをはずす (3) Builds for を Deployment Target(10.7) 
  • Sketchを検索して9VAeに変更。(1) メニュー (2) infoplist.strings

ターゲットにリソースを追加

  • ターゲット>Copy Bundle Resources > + をクリックしてファイルを追加

ターゲットにFramework 追加

SKTGraphicView を Window全体に一致させる

SKTGraphicView を 9VAeの描画ウィンドウにする。9VAeは Viewを1つしかもっていない。

  • DrawWindow.nib のView の直下に SKTGraphicViewを移動
  • Use Auto Layoutにチェック
  • 上下左右値0の Constraints を追加 

 

SKTGraphicView に Timerを追加

SKTGraphicView に mousemoved イベントを受けるよう設定

  • 何もしないと mousemoved イベントが無視されるため、ホバー処理ができない。以下のコードを、初期化処理にいれる。

CGRect rect = CGRectMake(0.0f, 0.0f, self.frame.size.width, self.frame.size.height);

NSTrackingAreaOptions options = NSTrackingActiveInKeyWindow | NSTrackingMouseMoved | NSTrackingInVisibleRect;

NSTrackingArea *_trackingArea = [[NSTrackingArea alloc] initWithRect:rect options:options owner:self userInfo:nil];

[self addTrackingArea:_trackingArea];

objective c - NSView mouseMoved event sometimes doesn't fire - Stack Overflow

以下の関数を追加

- (void)mouseMoved:(NSEvent *)event

- (void)mouseUp:(NSEvent *)event

- (void)mouseDragged:(NSEvent *)event

- (void)rightMouseDown:(NSEvent *)event

- (void)rightMouseDragged:(NSEvent *)event

- (void)rightMouseUp:(NSEvent *)event

 

drawRect の処理 

  • Windowサイズが変更されたら画面バッファを作り直す
  • SKTGraphicViewのcontextに対応したイメージを作成。描画はそこに行う
  • drawRect では描画したイメージから毎回矩形転送する

 タブの削除

  • WindowController ウィンドウ生成時に以下をいれる

[NSWindow setAllowsAutomaticWindowTabbing: NO];

 

キー

ファイル開く

ファイル保存

メニュー

  • メニューの表示項目変更、メニュー実行は以下のコードを SKTGraphicView.m に入れる。(NSInteger)[item tag] でメニュー項目に設定した tag 値を取得できる。それを9VAeLib にわたしてメニューの状態を得る。

- (BOOL)validateMenuItem:(NSMenuItem *)item {

  int ret = [qvae qVAtestCommand:(int)[item tag]]; //tag はメニュー項目数値

  [item setState:(ret&2 ? NSOnState : NSOffState)]; //チェックの切り替え

  return ret&1 ? NO:YES; //灰色にするかどうかの切り替え

}

  •  メニュー項目の実行は以下のコード。メニューの tag に 9VAeLib の処理番号をいれておく
  • Draw2.nib のメニュー項目>Outlets > Sent Action の(+)をドラッグして、FirstResponderのなかの qvaeCommand とつなぐ。

- (IBAction)qvaeCommand:(NSMenuItem *)menuItem{

  [qvae qVAsendCommand:(int)[menuItem tag]]; //tag はメニュー項目数値

}

文字入力

フォント

アニメGIF出力

QuickTime出力

音再生

多国語対応

9View

バッチ処理

deprecated 対応

 

 いろいろ試行錯誤を繰り返し、メインルーチンを何度も書き直した結果、なんとか動くようになった。こちらで公開(9va-mac64)

 

 

 Mojaveでdmgを作成すると、10.10でマウントできなくなった

  • 新しいOSに対応せねばなるまいと、Mojave + Xcode11で開発していた。
  • 新しいOSで動作しない問題点があったので、新OSへの対応ばかりやっていたら、ダウンロードモジュール dmg が、古いOSでマウントできなくなっているようだ!なんということだ。Appleの下位機種切り捨てにやられた。
  • 古い機種に対応するためには、古いOSで作らないといかん。
  • そうすると、今度は、Mojave でビュアが起動しなくなった。dmg のバージョンによってファイル名がかわるのか、アプリの性質がかわるのか??

9VAeきゅうべえ/PEAS motch! Android版ダウンロード

9VAeきゅうべえは、初心者からセミプロまで使える無料アニメーション作成ソフトです。

Windows / Mac / Linux / RaspberryPi 版を移植しました。

 

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

PEAS motch! Android版 ダウンロード

  • Google Play (PEAS motch! one Android版)

    f:id:dnjiro:20191026001620g:plain


    ★新しいバージョンがインストールできない場合は、一度アプリを削除してからインストールしてください。保存したデータは削除されません。

 

めも

  • 9VAeきゅうべえ・PEAS motch! アンドロイド版は、Play ストアで公開しました。今後、ストアで更新します。
  • Ver.190110 で、自動バックアップファイルが残っている場合に開くか消すか起動時に尋ねるようにしました。以前のバージョンを使用して自動バックアップファイルが残っている場合は、「いいえ」ボタンで削除してください。
  • スマホを回転したあと画面をタッチすれば縦横が切り替わります。
  • ファイルの書き込み権限を許可しておかないと保存できません。
  • データはスマホ内部の「9VAe」フォルダに保存されます。(PEAS motch!は「PEASmotch」フォルダ)

 

アンドロイド版 9VAe で作成したサンプル

f:id:dnjiro:20181221220918g:plain

絵を描かなくてもこんなアニメが作れます。作り方はこちら

 

履歴

  • 191002 PEAS  motch! プレイストアで公開
  • 190404:PEAS  motch! デザイン変更
  • 190208 (1.1): 全体再生の改善(メニューバーの文字消去、縦横比率の保存)
  • 190207: アニメキャストを開いたときのステージが基準枠を含むように修正
  • 190206: 半透明画像が使えるようにした。サイズ変更のバグ修正
  • 190205: PEAS motch! デザイン変更, 背景バッファサイズが間違っていたのを修正
  • 190204: PEAS motch! デザイン変更(色変更矢印を追加)。動くスタンプのメニュー表示追加。
  • 190203: アニメGIF出力で、幅と高さを空白にすると比率を保って自動設定する機能を追加。
  • 190202: 塗りのあるポリゴンや穴に対してどこでも点の追加ができるよう修正(今までは開いたポリゴンの場合、開いた辺に点の追加ができなかった。)
  • 190201: 点を削除して穴を結合するときのバグ修正
  • 190121: 表示倍率拡大ボタンを押しやすくした
  • 190120: 拡張子 .svg をつけないと読み出せなくなるバグを修正
  • 190115: SVG入力(太い線が細くなる問題を改善)
  • 190111: 英語に対応
  • 190110: 起動時にバックアップファイルがあれば開く機能を追加。ファイルの上書き確認
  • 190106: 細かい修正
  • 190105: 背景、記憶ツールの文字表示を実装。バグ修正(ポップアップメニュー、線入力時のピンチ表示、ページの動きパス表示)
  • 190101: スタンプの読み込みを改善。画面サイズ設定の枠を拡大。SVG入力を改善
  • 181229: 起動時にファイルアクセス権限を取得するようにした
  • 181225: Android8 でヘルプのリンクボタンを押すと落ちる問題を修正
  • 181222: 画面サイズを720x480に拡大
  • 181212: SVG保存したアニメ情報を読み出せない場合があるバグを修正、手書き入力中に画面の再描画をおさえる処理を追加
  • 181202: 最初のバージョン

 

実装状況

  • ほぼ実装できました。
  • ときどき上書き保存してください。
  • ARM64版(非公開)で、ポリポリゴンが表示できません。

 

主な修正

  • PEAS motch!デザインの変更(190404
  • 半透明画像(190206
  • PEAS motch!デザインの修正(190203190204
  • アニメGIFの高さ、幅だけ指定(残りは自動設定)ができるようにした(190203)
  • 保存バグ修正(190120)
  • ファイル上書き時の確認、おちたあとバックアップファイルを開く機能を追加(190110)
  • 背景、きおくツールの文字表示を追加。(190105, 190106)
  • ファイル権限を与えたあとのスタンプ画像の再読み込み(190101)
  • アニメGIF設定画面を修正(181229)
  • 一部の機種で、ヘルプ文書のリンクでおちる問題を修正。(181225)

SVGからアニメGIF作成「動く温泉マーク」

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

f:id:dnjiro:20190405174302g:plain



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

 

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

 

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

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

f:id:dnjiro:20190405095741p:plain

 

2. アニメキャストの中身を保存(スマホの場合)

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

  2. ねんのため「ファイル>名前をつけて保存」で「onsen」と名前をつけて保存しましょう。

  3. メニューバー「ファイル>閉じる」をクリック。
  4. メニューバー「ファイル>開く」をクリック。「onsen」を開く。
  5. これに動きをつけていきましょう

 

3. 点の数を減らして、グループ解除

(1)点の数を減らす

  1. 画面をタッチして図形を選択。
  2. メニューバー「編集>点を減らす」をクリック。これで点の数が減り、編集しやすくなります。(パソコンの場合は、編集>効果>点を減らす)

 

(2)グループの解除

  1. 画面の図形をクリック。中心の「+」をクリック、メニューから「グループ解除」をクリック。もう一度湯気をクリック。中心の「+」をクリック、メニューから「グループ解除」をクリック。これで図形がばらばらになります。

 

4.湯気をのばして透明グラデーションをつける

(1)湯気3本を複製して下につなげる

  1. 3本の湯気をいっしょに選択。中心の「+」をクリック、メニューから「複製」をクリック。
  2. 複製した湯気を下に移動し、長い湯気を作ります。中央の湯気は少し下に移動させましょう。

    f:id:dnjiro:20190405141536p:plain

(2)6本の湯気をグループ化し「いっしょに塗る」ようにしてグラデーションをつける

  1. 6本の湯気を同時に選択。中心の「+」をクリック、メニューから「グループ化」をクリック。湯気をひとつのグループにまとめます。
  2. 中心の「+」をクリック、メニューから「いっしょに塗る」をクリック。
  3. 右上のパレットからグラデーションのパレットをクリック。上から4番目のかまぼこ型グラデーションをクリック。下のようなグラデーションになります。

    f:id:dnjiro:20190405143106p:plain

(3)グラデーションの制御点◇を選んで右上に移動させる

  1. 点選択ボタンf:id:dnjiro:20181027163024g:plainをクリック。湯気の点が表示されるので、右端の◇、または左上の湯気の点を1点だけ選んで、もう一度f:id:dnjiro:20181027163024g:plainをクリック。これで下図のようにグラデーションの点が選びやすくなります。
  2. グラデーションの点◇4点を選んで、右上に移動。選択枠の角のハンドルをドラッグして、サイズを半分に縮めます。

    f:id:dnjiro:20190405144401p:plain

    グラデーションの点の意味は、緑色の◇がグラデーションの範囲、オレンジ色の◇を結ぶ線がグラデーションの方向になります。

(4)グラデーションの色2を透明にする

  1. カラーパレットの色2ボタン(上図の黄色いボタン)をクリック。色を赤にし、カラーパレットの上の透明度を一番左側(透明)にします。虫眼鏡ボタンを押して再描画すると下図のようになります。

    f:id:dnjiro:20190405150010p:plain

 

5.続きのページを追加

動きをつけるために続きのページを作りましょう。

  1. ページの右側の f:id:dnjiro:20181221171302g:plain をクリック。メニューから「続きのページを作る」をクリック。2ページができます。

 

6.前後のページを表示し、下の湯気を前のページの上の湯気に合わせる

  1. メニューバー「表示>前後のページを重ねて表示」をクリック。前のページの湯気の場所が水色で表示されます。
  2. 2ページの湯気を選び、下の湯気が前のページの上の湯気に重なるように移動させます。
  3. 中心の湯気の位置も合わせましょう。湯気を選んで、点選択ボタンf:id:dnjiro:20181027163024g:plainをクリック。中心の湯気の点を一部選んで、2回f:id:dnjiro:20181027163024g:plainをクリック。これで中心の湯気だけ選ばれるので前のページの湯気の位置にあわせます。

    f:id:dnjiro:20190405152638p:plain

7.2ページのグラデーションを1ページと同じ位置にする

  1. 2ページのグラデーションの点を選んで、1ページのグラデーションの点と同じ位置に移動させます。

    f:id:dnjiro:20190405153815p:plain

8.1ページに「繰り返し」をいれる

  1. 1ページに移動。メニューバー「ツール>繰り返し」をクリック。これで1ページと2ページの間を繰り返します。
  2. プレイボタンf:id:dnjiro:20181029083754g:plainをクリックし、下から湯気があがっていくアニメーションをみてください。

 

9.アニメGIF出力

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

 

10.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ファイルが保存できます。

 

11.SVGアニメ出力

  • Ver. 0.6.6 以上のバージョンでSVG出力してください。
  • 9VAeきゅうべえ(スマホ版)は、SVG形式で保存されます。ChromeFirefox ではプラグインなしでアニメーションになります。(Internet Explorer や Edge では静止画になります。)
  • 9VAeきゅうべえ(Windows版、Linux版)では、保存するときに、SVG形式で保存できます。Mac版では、ファイルメニューの中に、SVG出力があります。

 

12.完成したSVGアニメの読み込み

  • 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。
  • こちら(完成データ)を長押し、もしくは右ボタンメニューでダウンロードし、9VAeきゅうべえで開いてみてください。

 

9VAeでイラストからループアニメーションがすぐ作れる 

  • 9VAeきゅうべえを使えば、SVGイラストから絵をかかずにループアニメが作れます。Openclipart には15万点以上のSVGイラストがあります。そのまま静止画として使うのはもったいない。ぜひ動きをつけてご利用ください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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