人気ブログランキング |

体重と今日食べたもの

k1segawa.exblog.jp

ダイエット

ブログトップ

[9VAe きゅうべえ] 2Dアニメーション作成ツールの簡単な使い方 - 図形記述言語SVG編集ソフト [動くイラスト] (11/8)

ブログに自分で作った説明図を付けたかったが簡単なソフトがないので、いつもネットの海から取得していた。

しかし、きゅうべえ(9VAe)というソフトが簡単にそれも2Dアニメーションを作れるらしい。
そしてWebアプリ大賞みたいな賞に入賞して注目を浴びたのと、そのHPでの作者のコンセプトが気に入ったので、使ってみた。

[作者コンセプト]
・ベクターベースでタイムライン上のどのシーンも修正可能
・商用利用可
・伽藍とバザールっぽいUGC(ユーザ作成コンテンツ)の発展を目指してる

自分の使い方としては、
・説明図
⇒ イラストはへたなので、図形を描く
・わかりやすさ
⇒ 正確な説明のために言葉より動きでやれば簡単かなと思う

なので、簡単な使い方を以下に説明する。

とりあえず動きのある図形を作るまでを、例として「車が右へ移動するアニメ」をやってみる。
(readme.txtでもいいんだけど、それだと完成した料理を見て素人が作り方を推測するみたいに、何から始めたらいいか包丁の使い方などの基本的なことがわからない)

【手順】
1.インストール
(1) ホームページへ行く
a0034780_13444420.png
ここの記事でコンセプトに興味を持った。
ダウンロードは次のサイトから。

(2) ブログへ行く
a0034780_13521517.gif
サイドメニュー内の(9VAe ダウンロード)のリンクをクリックし、Win版をダウンロード(現時点は 9vaw0608.zip)・インストール(zip解凍)する。

2.起動
9vaw0608.zipを解凍して開くエクスプローラ画面で、9va-win(.exe)をダブルクリックする。

fig.1 起動画面
a0034780_14010979.png


いきなり、手書きのアイコンで面食らったが、車が描ければいいので左上の四角と丸、折れ線アイコンあたりが使えればOK。

3.図形描画
まず、基本図形の描き方から。
(1) 車のボディ:四角の白いアイコン
(2) タイヤ:丸の白いアイコン
(3) ヘッドライト(向き):折れ線のアイコン・・・丸の一つ飛ばした先のアイコン(わかりづらいーこういう説明をアニメでやりたい)
折れ線の終了はダブルクリック。

出来たのがこれ。
fig.2 車の絵
a0034780_14125422.png
赤枠の部分はこれから作るアニメの部分なので、まだ表示されていないはず。

4.アニメーション作成
たぶん、全体を選択して右にずらせばいいはず。
(1) 左上のトップにある矢印アイコンをクリック
(2) マウスで車を範囲選択
(3) コントロール+Cでコピー

次がちょっとわからなかったが2回ほど試して判明した。
(4) 上の緑の+の入った〇をクリック
(5) 「続きのページを作る」を選ぶ
(6) コントロール+Vで貼り付け

すると元の位置に車が貼り付くので、動きを付けるため右へ車を移動する。
(7) 選択状態のままSHIFTキーを押しながら、枠ぎりぎり(ポインタが十字矢印に変わる)を持って右へマウスで移動する

ここ、難しい。
SHIFTは水平固定なので。
でも間違ってもコントロール+Zで前に戻れるから、何回もやり直せる。

うまくいけば上の「fig.2 車の絵」のように1と2という画面に車が表示される。

5.実行
1と2の画面だけで、間のアニメーションは自動的に作成されるようだ。
実行してみよう。
(1) 「fig.2 車の絵」の1の画面の下にある、プレイアイコン(右向き▲黄色背景)ボタンを押す

ゆっくりと車が左から右へ移動した。
fig.3 アニメーション
a0034780_14320224.gif
6.保存とGIFアニメ
セーブしておこう。
(1) ファイル>名前を付けて保存>(new1).eva
(new1)の部分を例えば「1st」と変えて保存する。
保存先はzip解凍した先になる(変更可)。

あとブログにアップするのに、GIFファイルにする。
(2) ファイル>アニメGIF出力
上の場合だと、1st.gifという名前になる(変更可)。
保存先も同じ。

これで完成。
あとはブログなりホームページなりへアップロードすれば、上のように車が動くようになる。

以上、簡単な使い方を説明した。

ちゃんとした手順はどこかに入門編としてあるのかもしれない。
さあ、次は綺麗な線で説明図を描こう~




by k1segawa | 2019-11-08 13:45 | Comments(0)