dnjiro’s 9VAe blog

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

タッチすると拡大するアニメの作り方

画面をタッチするとその部分を拡大するアニメをつくってみよう。

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

 

f:id:dnjiro:20191017185342g:plain





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

 

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

 

1. 文字を入れる

  1. 拡大するサンプルの文字を入れましょう。どんな文字でもかまいません。この例では、9VAeきゅうべえの開発年表を作ってみました。

    f:id:dnjiro:20191017201143p:plain文字入力ボタン(1)を押して何か文字を入力してください。(2)を押しながらドラッグして左に寄せましょう。選択枠中心の「+」(3)を押してメニューから「複製する」で文字を複製します。

  2. f:id:dnjiro:20191017202301p:plain複製した文字を移動し、中心の「+」をタッチ。あと2回「複製する」を繰り返すと上のようになります。

  3. 文字を順番に選択し、選択枠の中心の「+」メニューから「文字の内容変更」をタッチし、4つの文字を別の内容に変更しましょう。

  4. f:id:dnjiro:20191017203017p:plain

    文字が大きすぎる場合、全体を四角形で選択し、選択枠の角の▪️をドラッグして縮小します。文字を整列させるには、両端の文字を左端、右端に移動させたあと、全体を選択し、「メニューバー>配置>横軸を合わせる」と「配置>左右のすきまを均等に」を実行します(パソコン版は「調整>整列」の中にあります)。文字背景の塗りつぶしは塗り色(下図1)です。文字に影をつけるのは、文字パレット(下図2)を押して「F」ボタンメニューから「影(枠)」にチェックを入れます。

    f:id:dnjiro:20191017204734p:plain

 

2. 文字を記憶ツールに入れてアニメキャストを作る

文字をさわると拡大するようにするには「アニメキャスト」の「さわるとみえる」設定を使います。

f:id:dnjiro:20191017212427p:plain

 
  1. まず文字を選択し、記憶ツールボタン(上図1)をタッチすれば、文字が記憶ツールにはいります。

  2. 記憶ツールの下の「q」ボタン(上図2)をタッチ。アニメキャストの名前入力になります。そのまま「OK」を押してもかまいません。

  3. アニメキャストの中心の「+」をタッチ。メニューの「さわったら見える」にチェックを入れます。
  4. そのあとメニューの「アニメ(xx)を修正」をタッチ。アニメキャストの中身のページが開きます。

 

3. 続きのページを作成

f:id:dnjiro:20191017221226p:plain

  1. ページの上の時間(上図1)をタッチ。メニューから「0.1秒短くする」を何回かタッチして「0.3秒」にします。
  2. ページの右側のf:id:dnjiro:20181221171302g:plainボタン(上図2)をタッチ。メニューから「続きのページを作る」をタッチ。1ページの内容が2ページにコピーされます。

 

 

4.文字を拡大し、「往復」を入れる

f:id:dnjiro:20191017223200p:plain

  1. 文字の選択枠の角の▪️(上図1)をドラッグして拡大。
  2. ツールメニュー(上図2)から「往復」をタッチ。2ページに「往復」命令を入れます。
  3. プレイボタン(上図3)で動きをみてください。文字が0.3秒で拡大し、その状態を保ちます。アニメを止めるには、プレイボタンの右側の停止ボタン、iPhoneの場合はメニューバーをタッチしてください。
  4. 画面の左上の太い文字(上図4)をタッチ。メニューから「このアニメに戻る」をタッチすれば元のアニメに戻ります。

 

5.他の文字にもアニメキャストをつける。往復を入れる。

f:id:dnjiro:20191017224935p:plain

  1. 他の文字にも同じように「さわったら見える」アニメキャストをつけましょう。
  2. 「ツールメニュー>往復」で元のページにも「往復」命令をいれます。これがないと1秒でアニメが終了してしまい、文字が拡大されたままになりません。
  3. 「表示>大きいサイズで再生」で動作を確かめてください。
  • 文字の上に点線で表示された透明なアニメキャストが重なっています。
  • 「さわったら見える」にチェックがあるため、そこをタッチしたときにアニメキャストがスタートします。
  • 0.3秒で文字が拡大され「往復」命令があるため拡大した状態を保ちます。
  • ほかの文字の場所をタッチすれば、元の文字は見えなくなり、タッチした文字が拡大されます。

 

6.「さわったら見える」の応用

  1. 今回作成したアニメーションについて、最初から見えている文字を「?????」といった文字にすれば、最初は何をかいてあるかわからずに、その場所をさわると文字が表示されるというアニメーションになります。
  2. 最初の文字を英語にし、アニメキャストの中の文字を日本語にすれば、英単語をタッチすると日本語訳が表示されるといった学習用のアニメーションが作れます。

 

7.説明用アニメーションの作り方

  • このページの最初にある説明用アニメーションは、対話型ではないため、アニメキャストは使っていません。「続きのページをつくる」をつかって文字を順番に拡大し、指のイラストをそれに合わせて動かしています。
  • 指のイラストは、FreeSVG の次のイラストを使いました。

    Finger pointing nog in black and white image | Free SVG

  • こういう説明用アニメが簡単に作れるのも 9VAeきゅうべえの魅力です。

 

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

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

 

 

9VAeきゅうべえの黒バック機能(ダークモード)について

9VAe きゅうべえの iPhone版のリリースをすすめている。そのとき、9VAeで作成した「1コマアニメーション」を、ARグラスに表示できるようにしようと考えている。

 

そうすると、背景が黒のほうが都合よい。それで「ダークモード」を新設し、これをONにすると背景が黒になるようにした。iOS / macOSがダークモードをはじめたのでそういうのがあってもよいだろう。

 

予想される問題点

ダークモードでは、背景が黒なので、線は白で描画するだろう。

  • SVGで保存する場合、背景を黒にしないと線が見えなくなる
  • データにダークモードON/OFFの情報を記録しておかないと、プレーヤーで再生するときにこまるのでは?
  • 昔のデータは白バック前提でつくられている。ダークモードに設定したプレーヤーで再生すると、全部黒バックで再生される。これは良さそうな気がする。
  • iPhoneは、黒バックで起動する予定。するとここで作られるデータは、白い線で書かれることになる。それをパソコン版で読みだした時、パソコン側も黒バックで起動したほうがよいのでは。つまり、パソコンにもダークモードを導入していくのがよいかも
  • データには、指定なし、白バック、黒バックの3種類を新たに記録する。
  • 記録がない場合、iPhoneは黒バック、その他は白バックで起動。記録がある場合はそれに従って、エディタの背景色をファイルごとに切り替える?
  • いや、エディタは手動でダークモードを切り替える。プレーヤーだけファイルごとに切り替えるがよいような気がする。

順次、機能追加していくつもり。

 

SVGからアニメGIF作成「手をあげる」

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

 

f:id:dnjiro:20191004171816g:plain



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

 

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

 

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

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

    Happy housewife - FreeSVG

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

f:id:dnjiro:20191012231025p:plain

 

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

「ツール>ネットからダウンロード」で読み込むと、イラストはアニメキャストという部品のアニメになります。イラストを動かすにはアニメキャストの中身を開きます。
 
  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正する」をクリック。アニメキャストの中が開きます。

  2. 「ファイル>名前をつけて保存」で「housewife」と名前をつけて保存しましょう。

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

 

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

(1)点の数を減らす

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

 

(2)グループの解除

  1. iPhoneの場合「<<  <」ボタンをタッチすれば画面が広くなります。
  2. 画面の図形をクリック。選択枠の中心の「+」をクリック、メニューから「グループ解除」をクリック。これで図形が別々になります。

(3)続きのページをつくる

  1. iPhoneの場合、メニューバーをタッチするとページが見えます。画面を横にしてください。
  2. ページの右側の緑色のf:id:dnjiro:20181221171302g:plainをタッチ。メニューから「続きのページを作る」をタッチ。これで2ページ目ができます。

    f:id:dnjiro:20191004161030p:plain

 

4.右手を選んで点を表示する

  1. iPhoneの場合「<<  <」ボタン
  2. 右腕を左上から四角形で囲むようにして選ぶ。
  3. 選択枠の中心の「+」をクリック、メニューから「点の編集」をタッチ。これで右腕の点が表示されます。

    f:id:dnjiro:20191004161125p:plain

 

5.右手を下に移動

  1. 右手と腕の上半分の点を選んで下に移動させます。

    f:id:dnjiro:20191004163013p:plain

  2. 肩から腕の点を下に移動させます。このとき、線と塗りの2つの図形が重なっているので、1点を移動させるときでも点を囲むように選択し、選択枠中心の「+」をクリックし、メニューから「移動」をタッチして移動させるとよいでしょう。スマホの場合、2本指のピンチアウトで画面を拡大できます。パソコンの場合、マウスダイヤルをまわせば、画面を拡大縮小できます。

    f:id:dnjiro:20191004163438p:plain

  3. このイラストは塗りと縁が別の図形になっており、1点ずつ移動させると塗りと縁の線の形がずれてしまいます。その場合、塗りの点と線の点を選んで「配置>1点に集める」とすれば同じ位置になります。外から四角形で2点同時に選び中心の「+」から「移動」で2点同時に移動させるとよいでしょう。
  4. 肩の部分は別の図形なので、何もないところをタッチし、肩の図形を選んで、形を整えます。

    f:id:dnjiro:20191004164155p:plain


     

 

6.1ページに移動し、往復ボタンをいれる

  1. iPhoneの場合、メニューバーをタッチし、画面を横にするとページが見えます。
  2. 1ページをタッチして1ページに移動。1ページの左上(下図の赤丸)をタッチし、メニューから「往復」をタッチ。これで1ページに「往復」がはいります。

    f:id:dnjiro:20191004165450p:plain

  3. プレイボタンf:id:dnjiro:20181029083754g:plainを押してアニメが動くのをみてください。おかしい部分は図形を選び、点の位置を移動させて調整しましょう。

 

7.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。

    f:id:dnjiro:20191004172828p:plain

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

 

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

 

9.SVGアニメ出力

  • スマホ版、Mac版(9va-mac64)では普通に保存すれば、SVGアニメ形式で保存されます。ChromeFirefox で開けばはアニメーションになります。(Internet Explorer や Edge では静止画になります。)
  • 9VAeきゅうべえ(Windows版、Linux版)では、保存するときにフォーマットを選べば、SVG形式で保存できます。

 

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

  • 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。

 

9VAeでイラストから動くアイコンがすぐ作れる 

  • 9VAeきゅうべえを使えば、SVGイラストから絵をかかずに動くアイコンが作れます。FreeSVGのような多くのSVGイラストサイトがあります。いろんな動くアイコンをつくってみてください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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

 

 

SVGからアニメGIF作成「ペンで字をかく」

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

 

f:id:dnjiro:20190906092221g:plain
作業時間は15分程度です。他のアニメの作り方はこちらをご覧ください

 

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

 

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

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

    Wacom Tablet Svg Png Icon Free Download (#431412) - OnlineWebFonts.COM

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

f:id:dnjiro:20190905193454p:plain



 

2. アニメキャストの中身を保存

よみこんだイラストはアニメキャストという部品のアニメになります。編集するにはアニメキャストの中身を開きます。
 
  1. 選択枠の中心の「+」をクリック。メニューの上から2番目「アニメ(...)を修正する」をクリック。アニメキャストの中が開きます。

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

 

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

  1. メニューバー「ファイル>閉じる」をクリック。
  2. メニューバー「ファイル>開く」をクリック。上で保存した、「tablet」を開く。
  3. これに動きをつけていきましょう

(1)点の数を減らす

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

 

(2)グループの解除

  1. 画面の図形をクリック。中心の「+」をクリック、メニューから「グループ解除」をクリック。これでペンとタブレットが別々になります。●イラストによっては図形がグループ化されていない場合もあります。その場合、9VAeきゅうべえでパーツにわけていきます(例1例2)。

 

4.登録をつかって、ペンとタブレットをわける

(1)ペンを選んで点ボタン(下のまる)

  1. ペンを選んで点ボタンを押す。ペン以外の点が選ばれた場合は、ペンの点だけ選んでもう一度「点ボタン」を押せば、その点を含む図形の点だけが選ばれる。これを使ってペンの点だけを選ぶ

    f:id:dnjiro:20190905195411p:plain

(2)ペンを登録して「隠す」

  1. スマホの場合、「<<」ボタン(下図1の場所)をクリックすると、登録パレットが表示されます。下の絵の「+」ボタンの下が登録エリアです。
  2. 登録パレットの「+」(下図2)をクリック。選んでいたペンがボタンに登録されます。
  3. 登録されたボタン(下図3)をクリック。メニューから「隠す」を選びます。ペンが見えなくなります。

    f:id:dnjiro:20190905200950p:plain

 

5.ペンの消えた部分をなおす

  1. タブレットを選んで、点ボタンをクリック
  2. ペンが消えたあとの線の端の点を選びます。

    f:id:dnjiro:20190905201824p:plain

  3. スマホの場合、「配置」メニュー>「左に寄せる」。パソコンの場合、「調整>整列>左に寄せる」をクリック。これで選んだ点が選択した領域の一番左端に移動します。これで線がつながりました。(最初からペンのないタブレットとペンを別々に読み込めばよいという意見もありますが、SVGイラストをパーツ分けする例として紹介しました。)

    f:id:dnjiro:20190905202510p:plain

 

6.タブレットに色をつける

  1. タブレットの外側の線の点を選んで、もう一度点ボタンをクリックすると、外側の線の点だけが表示されます。
  2. 外側の線上の点を全部選びます。
  3. 選択枠の中心の「+」をクリック、メニューから「点の後ろに図形を入れる」をクリック。これでタブレットに色がつきます。色はカラーパレットで変えられます。

    f:id:dnjiro:20190905203546p:plain

  •  SVGイラストの多くは、線が線でなく、輪郭で囲まれた図形になっている場合が多いです。そういった場合に中を塗りたいときは、点を選択して「点のうしろに図形を入れる」を使います。

7.ペンをアニメキャストにして色をつける

(1)ペンを選んでアニメキャスト(部品)にする

  1. 登録パレットのペン(下図1)をクリック。メニューから「選択する」をクリック。これでペンが選ばれます。
  2. カットするボタン(下図2)をクリック。ペンが記憶ツールの中に移動します。
  3. アニメキャストを作る「q」ボタン(下図3)をクリック。
  4. アニメキャストの名前例えば「ペン」と入力します。これで、ペンがアニメキャストになりました。

    f:id:dnjiro:20190905204947p:plain

(2)ペンの中身をひらいて色をつける

  1. ペンの中心の「+」をクリック。メニューから「アニメの中を修正する」をクリック
  2. ペンの中が開くので、ペンの中を選んで、カラーパレット(下図1)で色をつけましょう。単純にペンを選んで色をつけると、線の色が変わってしまいます。ペンの中に色をつけるにはタブレットに色をつけたやり方をするとよいでしょう。ペンを選んで点モードにし、点を全部選んでから中心の「+」をクリックし「点の後ろに図形を入れる」。はいった図形に色をつけます。

    f:id:dnjiro:20190905205740p:plain

(3)反転をつかってペンを下にむける

  1. ペン全体を選ぶ。上の辺の「■」(下図1)をクリック。メニューから「反転」をクリック。画面をもう一度クリックすると位置がきまります。

    f:id:dnjiro:20190906005553p:plain



8.元のページにもどってペンに動きをつける

(1)元のページに戻る

  1. 画面の上の太字「tablet(.svg)」(上図2)をクリック。メニューから「このアニメに戻る」をクリック。元のページに戻ります。

 

(2)動き矢印をつける

  1. ペンの中心の「+」(下図1)をクリック。メニューから「動き矢印を入力」。これで赤い矢印が表示され、点を追加できるモードになります。

    f:id:dnjiro:20190906011050p:plain

(3)点を追加して動きをつける

  1. まず中心の緑色の「◇」(下図1)をドラッグしてペン先に移動してください。この点が矢印にそって移動するときの基準点になります。
  2. 赤い矢印に点を追加して、好きな形にしてください。
  3. ページの時間(下図2)(大きな画面の場合はページの上部)をクリックし、時間を長くしましょう。
  4. プレイボタン(下図3)をクリックすると動きます。動きをみながら赤い矢印の形や時間を調整してください。f:id:dnjiro:20190906012733p:plain

  動きをみながらいろいろ工夫してみてください。下に文字をいれ、それをなぞってみるのもよいでしょう。

9.アニメGIF出力

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

 

最初にあげた作例では、次の修正を行っています。

  • 先頭ページに「背景」をいれ、タブレットを移動し、9VAe の文字をいれました。背景ページは、先頭ページの左側の「<」をクリックしてメニューから「背景ページを入れる」を実行します。タブレットの移動は、きおくツールをつかいました。
  • 2ページで「9VAe」の文字に動き矢印をあわせました。
  • 画面サイズを 1100×750 にしました。スマホ版では、「ファイル>ページ設定」。パソコン版では、「ページ>ページ設定」で変更できます。

 

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アニメ出力

 

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

  • 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。

 

9VAeでイラストから動くアイコンがすぐ作れる 

  • 9VAeきゅうべえを使えば、SVGイラストから絵をかかずに動くアイコンが作れます。15万点以上のイラストを保有するOpenclipart が、2019年からサイトリニューアルのため見えなくなっているようですが、他にも多くのSVGイラストサイトがあります。いろんなアイコンをつくってみてください。
  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

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

 

 

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