dnjiro’s 9VAe blog

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

「1コマアニメーション」ワークショップ(2019 ATCロボットストリート)

機材

項目 機材 使用ソフト
タブレット Windows タブレット5台 PEAS motch! one
ネットワーク RaspberryPi WiFi アクセスポイント 設置方法
再生用PC WindowsノートPC 1台 9view-lastday
プロジェクタ 1台
説明用PC LinuxノートPC 1台 9view
  • 5台のタブレットのデータを、ラズベリーパイWiFiサーバーで収集し、再生用PC+プロジェクタで上映。説明用PCで作り方アニメーションを連続再生。

結果

実施日 作品数 総再生時間 総データサイズ
11/2(土)(10:00-17:00) 530本 1時間15分 2 MB
11/3(日)(10:00-17:00) 485本 1時間24分 2 MB
  • 530本合計1時間15分のアニメーションが2MBしかありません。1コマの線の座標値しか記録していないので驚異的に小さく、ラズベリーパイ(8GBのSDカード)で収集できます。

作品例

11/2 の9作品


1コマアニメーション9作品(2019 ATCロボットストリート)

11/3 の9作品


1コマアニメーション9作品(2019 ATCロボットストリート)

  • 9va-mac64 で、9本ずつMP4動画に変換しました。動画にすると9本が20MBになりました。

機材レイアウト

f:id:dnjiro:20191105190842j:plain

  • 1-5=タブレット 6=RaspberryPi 7=再生用PC 8=説明用PC 9=プロジェクタ

メモ

  • タブレット端末5台、PEAS motch! one は5分の時間制限を設定、担当者1名で実施。順番待ち席を3席用意したが、順番を明らかにするために必ずいる。3席では足らず、5席ほしかった。
  • 制限時間5分の自動運転は良好。初期状態に戻るので運用が楽。時間不足で不満を示した子は1名のみ。制限時間で自動的にデータ転送され上映されるのをみて満足する子が大半。リピータも多かった。
  • 担当者のメイン作業は順番の交代。(1)席があいていたらそこに誘導。(2)席がうまっていたら、順番席にすわるよう促す。近くにたっていると順番がわからなくなる。(3)アプリの残り時間をみて、終了に近い子供がだれか把握しておく。終了すると自動的に完成しアップロードされるので、大画面での再生を確認してから、席をかわってもらう。
  • よくある質問。(1)茶色はどうする-色が表示されている場所をタッチするとパレットがでてくる。(2)消しゴムが消しにくい-まわりを囲むと消える。(3)終わったらどうするー上向き矢印でアップロード。

  • 9va_data/afa9vaqas.png をリネームし、ページ追加ができないモードにした。(キッズプラザ大阪でもこの設定で運用している。)

  • WiFi アクセスポイントは、Raspberry Pi2 + WiFiアンテナ+ Jessie で、トラブルなし。しかし、バックアップとして持参した Pi3(WiFi内蔵) では一部の端末が接続できなかった。イベント会場ではWiFiの接続が保証できないことが多い。

  • 折り畳み机の端にすわった太った子供のひざが、机の端の脚のささえに当たって、机の脚が折りたたまれ、機材が落ちるというトラブルが2回(両側の脚で)発生した。

  • PC性能について、タブレットについては、6000円で購入した中古のWindowsタブレットでも十分なスピードで動作した。再生用ノートPCは低価格のノートではやや速度不足。ものすごい本数の線を入力した場合はコマ落ちが見られた。WiFiサーバーは、RaspberryPi2+WiFiアンテナで問題なし。

プログラミング教育フリーソフトで 9VAeきゅうべえが第4位

2019年「ミスターPC」5月号、フリーソフト紹介のページで、プログラミング学習に適したフリーソフトのランキングがこうなっていた。

 

  1. 子供向けプログラミングツール:Scratch デスクトップ
  2. 初歩から学びたい人に適する:PG0
  3. 子どもの意見を取り入れて開発:プログラミングゼミ 
  4. アニメから学ぶプログラム:9VAeきゅうべえ
  5. ゲームでプログラミングの基礎を知る:ハナのマイクラでプログラミング冒険

 

9VAeきゅうべえはこう紹介されていた。

アニメーションに動きを追加していくという特殊な方法でプログラミングを学習、アニメ制作ソフトとしても使えます。

すばらしい紹介文だ。5位のマインクラフト-Microsoftよりも上になっているのがすごい。

f:id:dnjiro:20200105175005g:plain



 

1.9VAeきゅうべえがプログラミング教育ソフトになる理由

9VAeきゅうべえがなぜ、プログラミングになるかというと、9VAeきゅうべえを開発した理由が、もともと絵を描く枚数を減らしてアニメーションを作りたかったからだ。(入手 iOS版Android版Amazon Fire版PC/Mac版Youtube解説

 

f:id:dnjiro:20210501063334p:plain

アニメーションに必要なコマを全部手描きすると相当な枚数になる。プログラミングで絵を作成するほうが楽にできる。例えば、同じ動きは部品化して使いまわす。部品を軌道にそって動かす。ループを簡単にする。羽ばたく鳥を飛ばそうとおもうと、階層化が必要だ。そうするとアニメーションがプログラムになっていく。全部のコマを手描きするのは、1から1000まで数字を足すのに、1+2+3+4+と全部の数字を書くようなものだ。これはループで書いたほうが簡単である。アニメーションを楽に作る手段がプログラミングなのである。(参考:9VAeきゅうべえのプログラミング要素

 

以下、ランキングのほかのソフトと 9VAeきゅうべえを比べてみた。それぞれの特長がわかる。ソフトを選ぶときの参考にしていただきたい。

 

2.「Scratch」と 9VAeきゅうべえは伸ばすところが違う

1位が「Scratch」というのは納得できる。MITが開発した教育界でもっとも有名なソフトだ。プログラム言語を知らなくても、ブロックをならべていくことでプログラムができる。世界中で使われている。

f:id:dnjiro:20210501061316p:plain

 

プログラミングが作業手順の分解だと考えると、Scratchの基本単位がブロックだ。そのため、どんなブロックがあるかを知ることが重要である。もともとブロックはテキストプログラミングの命令をブロックで置き換えたものだったが、初心者がプログラム演習するときに、楽しく学習できるように、いろんなブロック(たとえば音がでるブロックなど)が追加された。

 

ロボットをブロックで動かす場合、ひとつのブロックは「1歩前進」だったりする。ところが実際の動きをみると、「1歩歩く」は右足と左足を動かしており、もっと細かく分解できるはずだ。ところが、ブロックの単位を細かくすると1歩歩くだけで大変になってしまう。

 

そのため、ブロックを使うプログラミングでは、用意されたブロックによって、できることが左右される。自由に思いついたことをプログラミングするよりも、答えが存在する課題(用意されたブロックで実現できる課題)に向いている。しかし、答えのブロックを見つける勉強になってしまうと、教科書の勉強と同じようになってしまう。

 

9VAeきゅうべえにはブロックがないのでなんでもできる

9VAeの場合はどうか、鳥が3羽、羽ばたいて飛ぶアニメをつくろうとすると、1羽の鳥をパーツにして、それを3羽複製するとよい。羽がはばたくところは、胴体と羽を別々のパーツにしておいて羽を上下にうごかすとよい。

 

この場合、羽というパーツや胴体というパーツ(ブロックに相当)が最初からあるわけではない。最初は自分で絵を描く。それをどうブロックにわけるか自分で考えるのである。

 

そのためブロックによる制限がない。だから子供が自由に思いついたことから始められる。例えば「モンスターが地面からもこもこと現れてきた。」と思いついたら、Scratch ならモンスターのキャラクタを探すことから始めるだろう。9VAeの場合は自分で描けばよい。もこもこと現れるとはどういうことか、自分で描いた絵を変形して、動きを考えればよい。つまり思いついたことが何であっても、そこからスタートできるのである

 

Scratchと9VAeきゅうべえの似たところ

Scratchでプログラムを作ったら、期待どおりに動くか実行して確かめる。9VAeきゅうべえではアニメーションを再生して、期待どおりの動きになるか確かめる。細かく部品化していくと、複雑な動きが実現できるが、思ったとおりに動かすのが難しくなっていく。これはプログラムのデバッグ作業と同じである。つまり、9VAeきゅうべえのベクトル図形はソースコードなのである。どこでも自由に修正し、再生できる。ブロックもプログラム言語もないが、プログラミング開発環境なのである。

 

ただ、9VAeきゅうべえでプログラミングが全部学べるかというとそうではない。そもそも変数がない。自分で作業を分解するプログラミング的な考え方が身につくだけだ。Scratchと9VAeきゅうべえは伸ばすところが違う。ぜひ両方体験してほしい。9VAeきゅうべえは、Scratchコスチュームが簡単に作れるので連携できる。

 

3.「PG0」は数値、  9VAeきゅうべえは絵を扱う

PG0 はテキストでプログラムを書き、プログラム実行の仕組みがわかるプログラミング言語+開発環境である。筆者がさいしょにパソコンでBASICをつかったときはこんな感じだった。左側にプログラムを書いて実行すると、右側に自動的に変数が毎時表示される。値がどう変わっていくか表示されとてもわかりやすい。言語はCやJavaを簡単にした独自言語。

f:id:dnjiro:20210501071816p:plain

 

ただ算数をしらない幼児には難しいかもしれない。PG0  は数を扱う。9VAeは絵を動かす。扱うものが全く違う。9VAeは数という抽象的なものでなく具体的な絵を扱うので、幼児から取り組める。抽象的なことが苦手な子供には、9VAeから始めるとよいかもしれない。

 

ところが9VAeきゅうべえの内部では絵が数値で表現されている。線を右に移動させるには、X座標の数値を増やす。回転させるには行列演算を行う。 9VAeきゅうべえを開発したければ、PG0が理解できなければならない。9VAeきゅうべえがどのように動いているかと聞かれたら、PG0のようなプログラムが図形の頂点の場所を計算していると答えるとよい。9VAeをさわることで、なぜPG0が必要かが実感できる。

 

4.「プログラミングゼミ」は先生、9VAeきゅうべえは道具

プログラミングゼミはソーシャルゲームDeNAが本気で作った教育アプリだ。9VAeきゅうべえとは開発規模、レベルがまったく違う。低学年の子供がゲーム感覚でプログラミング学習ができる。一言でいえば「Scratch」をゲーム会社が作ったらこうなる、といったアプリで、Scratchよりわかりやすい。

f:id:dnjiro:20210501060707p:plain

 

使い方を動画で説明してくれる。やさしいサンプルを提示し、ステージを順番にクリアして難易度があがっていくのはゲームソフトと同じ作り方だ。iPadでやってみたが、これなら先生がいなくてもブロック言語をつかってキャラクタを動かす方法が身につけられそうだ。Scratch が難しいと感じたらこちらをやるとよいだろう。

 

DeNAと開発規模が違うので比較するのもおかしいが、9VAeきゅうべえは不親切で、先生のかわりに教えてくれる機能は全くない。

 

9VAeきゅうべえには練習用サンプルが付属しているが、基本は白紙からスタートする。線をひいた段階で、すべての子供は異なる地点から出発する。その後の展開を自分で考えなければならない。9VAeきゅうべえには便利な機能があちこちに隠れているが、それを自ら発見してほしいと考えている。登山にたとえると、プログラミングゼミは整備された登山道だ。誰でもこの道を通って頂上までいける。見所ポイントを順番に全部みることができる、しかし見える景色は同じだ。9VAeきゅうべえは出発点がみんな異なり、さまよいながら頂上をめざす。登り方は自分で考える。大人が思いつかなかった新しい景色に出会うかもしれない。筆者はそういう可能性をもった道具が好きである。

 

9VAeは動画素材が作れる実用ツールである。順番としては、プログラミングゼミを先にやってみて、自分の世界を表現したくなったら、9VAeきゅうべえを体験してみるのがよいと思う。

 

5.「ハナのマイクラでプログラミング冒険」は3次元、9VAeは2次元

ハナのマイクラでプログラミング冒険は、Microsoft が教育向けに作成した解説書。Minecraft(下図)は世界的にヒットした3次元ゲームソフトで、3次元の世界を自分で作ることができる。 MakeCodeというプログラミング環境を使ってさらに複雑な処理ができる。その使い方をまんがで説明したもの。

f:id:dnjiro:20210501062837p:plain

 

「プログラミングゼミ」がゲーム会社が作った教育ソフトとすると、こちらはもっと本格的だ。Windows版の 9VAeきゅうべえも Microsoft のプログラム環境VisualStudio で開発している。3次元のゲームの世界の中でプログラミングが勉強できるという本物感がある。ただ、今は「Office 365 Education account」などのアカウントがないと実行できない。9VAeもMinecraftのように外部からコントールできる(こちら)

 

 

以上まとめると、このランキングには、Scratch, DeNA, Microsoft, という巨人の中に、PG0 と 9VAeきゅうべえという小さなソフトがはいっているわけだ。商業用ソフトに偏っていないバランスがとれたランキングだと思う。

 

6.Viscuit は簡単だが難しい。9VAeは実用的

さて言語を使わないプログラミング学習といえば「Viscuit ビスケット」が有名だ。おそらく次点に選ばれていると思う。そのかわりに 9VAe が選ばれたのは、Viscuitビスケットと同じような特長をもった新しいソフトだったからかもしれない。

f:id:dnjiro:20210501075153p:plain

  • 白紙からはじめる、みんなが違う結果になる。
  • 答えがない。自分で考える。
  • めがねの追加で、どのような動きになるか、予測が難しいが、そこがおもしろい。奥が深い。

 

一方、9VAeきゅうべえが、Viscuitビスケットと違うのは、

  • 文字、写真やイラストを動かす動画作成アプリとして実用的。
  • 期待した動きをつくるのは、9VAeのほうが直感的でわかりやすい。

9VAeには、ユーザー登録がなく、個人情報を収集しない。広告がなく、出力にロゴがはいらない点も安心。ぜひ他の教育ソフトといっしょに、9VAeきゅうべえを使ってみてほしい。

 

 

7.Springin' スプリンギン

言語をつかわないプログラミング環境として、しくみデザインの Springin' スプリンギンはおすすめ。

  • 物理演算が可能で、絵の形と重力や反発係数、重さなどの設定によって、いろんな動きが制御できる。Viscuitよりわかりやすく、9VAeより複雑な動きを簡単に表現できるのが魅力。
  • こちらに使い方があります。

一方、描いた絵が物理演算とは関係なく変化していく動きは、9VAeが作りやすいです。

 

8.さらに勉強したいなら Python (パイソン)

より先にすすめたいなら、Python がおすすめです。無料でプログラムがつくれます。解説記事も豊富です。

 

9.Webアニメコンテストに応募しよう

 9VAeで作成した、EVAアニメ、GIFアニメは、PEAS Webアニメコンテスト に応募してみましょう。学校のクラブからの応募も多く、小中学生の作品が多数掲載されています。賞品は、ワコムペンタブレットCLIP STUDIO PAINT など。募集期間は6月から9月末まで。(大人でも応募できます。)

01webアニメコンテスト10MB.gif

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

 

PEAS motch! で1コマアニメーション動画を作成

PEAS motch アンドロイド版で、5分で動画を作ってみました。

 

f:id:dnjiro:20191025162415g:plain

9VAeきゅうべえアンドロイド版PC版iPad版iPhone版でもつくれます。
他のアニメの作り方はこちらをご覧ください

 

■ PEAS motch! one(Android)のダウンロード

フリーソフト9VAeきゅうべえでも最初に「1.」ボタンを押せば作れます。

 

1. 絵を描いて、アニメーション再生ボタンを押す

f:id:dnjiro:20191025164121p:plain

 

  1. PEAS motch! の左上のボタン(上図1)を押せば、画面が広がります。
  2. 色はカラーボタン(上図2)で変更できます。線の太さを変更したいときは左上のボタン(上図1)ををおして、メニューからペンサイズを変更します。
  3.  順番を考えながらメッセージを書きましょう。間違えたときは、戻るボタン(上図4)で取り消しできます。
  4. アニメーションボタン(上図3)で、アニメーションになります。(9VAeきゅうべえの場合は最初に「1.」を押して、絵を描いたあと、もう一度「1.」を押せば1コマアニメーションができます。)

書いた順番に線が書けるアニメーションを「ホワイトボードアニメーション」といい、普通は絵を描く様子を録画して作成します。9VAeきゅうべえ/PEAS motch! の「1コマアニメーション」は録画ではありません。完全な図形エディタなので、後から、形や色を自由に修正できます。

 

 

2. 後から形を自由に修正できる

f:id:dnjiro:20200302143710p:plain右上の文字「て」(上図1)の形がおかしくなってしまったので修正します。

 
  1. 選ぶボタン(上図2)をタッチし、「て」を選びます。

  2. もう一度、選ぶボタン(上図2)をタッチすると「て」の内部の点が表示されます(上図1)
  3. 2本指を離す動作(ピンチアウト)で画面拡大ができます。
  4. 点を移動させて形を整えます。(上図3)

 

3. 影をつける

入力した線に後から影やぼかしをつけることができます。線の太さや色も後から変更できます。

f:id:dnjiro:20200302143958p:plain

  1. 選ぶボタン(上図1)をタッチして図形を選択(上図2)。
  2. 線の種類ボタン(上図3)をタッチ。影(上図4)で影がつきます。
  3. これでもうアニメーションができました。

  

4.アニメGIF出力

  • ファイルメニュー>「アニメGIF(ジフ)をつくる」で、好きなサイズのアニメGIFを作成できます。
  • 画像サイズについて、MP4動画を作る場合は高さ「720」(下図1)に設定するとよいでしょう。幅は空白(下図2)にしておけば、比率を保った数値が自動設定されます。

    f:id:dnjiro:20191025171059p:plain

  • ファイル名をいれて「OK」ボタンを押せばアニメGIFができます。
  • PEAS motch! Android版の場合、完成したファイルは、端末内の「PEASMotch」フォルダの中に、指定した名前で出力されます。フォトアプリで、「アルバム>PEASmotch」で見ることができます。ただし最初は何もかかれていないので静止画では白紙のように見えます。

 

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

ezgif サイトを使えば、アニメGIFをMP4動画に変換できます。無料でロゴもはいりません。

  1. ブラウザで、ezgif.com ( Online GIF to MP4 Video converter ) を開く
  2. 「ファイルを選択」をタッチ> 作成したファイルを選ぶ。(Android版の場合、「ファイル」をタッチし、出力されたアニメGIF(白紙に見える)を選ぶ)
  3. Upload!」ボタンをタッチすれば下図のようになります。

    f:id:dnjiro:20191025172659p:plain



  4. Convert GIF to MP4!」ボタン(上図1)をタッチ

    f:id:dnjiro:20191025175008p:plain

  5. Save」ボタン(フロッピーディスクアイコン 上図1)をタッチ
  • これで、MP4動画ファイルが「ダウンロード」フォルダに保存できます。上に表示されている時間、13秒(上図2 length)を覚えておきましょう。

 

6.Youtube に動画をアップ

  • 作成したMP4動画ファイルは、Youtube アプリを使ってアップロードできます。
  1. Youtubeアプリを起動
  2. 一番上のカメラボタンをタッチ
  3. Youtube にファイルアクセスを許可する
  4. 「ダウンロード」したファイルが表示されるので、それをタッチ。1コマアニメーションは最初が白紙なので画面には白紙で表示されています。13秒の白紙を選びます。
  5. タイトルを入れて上の送信ボタン(紙飛行機ボタン)を押せば、スマホからYoutubeにアップできます。
  6. 最初はプライバシーが「限定公開」になっており、「共有」ボタンでリンクを通知すれば動画を送った人だけにみてもらえます。プライバシーを「公開」に変更すれば、誰でも Youtubeでみることができるようになります。


    PEASmotchで1コマアニメーション動画を作成

7.ポイント

  • PEAS motch ! を使えば、スマホだけで簡単に動画(ホワイトボードアニメーション)が 作成できます。
  • 今回の例では13秒のアニメーションが5分で作れました。PEAS motch! は9ページの1コマアニメーションが作れるので、1分程度のメッセージアニメーションが簡単に作れます。
  • 結婚式のお祝いメッセージ動画を、その場で Youtube にアップするといった使い方ができそうです。
  • 1コマアニメーションの歴史、いろんな応用が以下に書かれています。

    dnjiro.hatenablog.com

 

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

タッチすると拡大するアニメが作れる無料アプリ:9VAeきゅうべえ

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

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

 

f:id:dnjiro:20191017185342g:plain





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

 

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


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.「さわったら見える」の応用

  • 「さわったら見える」アニメーションは、9VAe上でしか動作しません。
  • PowerPointのかわりに、9VAeをつかってプレゼンテーションするときにつかえます。
  • 9VAeをプログラミング教材として使う場合には、いろんな使い道があるでしょう。

 

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

 

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

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

    Finger pointing nog in black and white image | Free SVG

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

 

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

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

 

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

 

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

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

 

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

 

予想される問題点

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

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

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

 

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

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

 

f:id:dnjiro:20190906092221g:plain
作業時間は15分程度です。

他のアニメの作り方はこちら9VAeの質問はこちら

 

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


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

 

 

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 で修正。公開した。