これをアニメーションにする方法を説明します。」という2次元キーフレームアニメーションソフトを使います。ダウンロード以下のリンクからアプリをダウンロードしてください。クリックし、「継続(Keep)」をクリックしてください。ファイルを解凍し、フォルダ(Macintoshの場合はディスクイメージ)の中のアプリをダブルクリックすれば、9VAeきゅうべえを起動できます。「ダウンロードしたアプリケーションの実行許可」をみてください。「9va-pi」「9va-win」「9va-mac」を起動9VAeアイコンをダブルクリックし、9VAeきゅうべえを起動。以下のような画面が表示されます。As(リンク先を別名で保存)」をクリック(ブラウザによって表示が異なる。Epiphanyブラウザの場合。)左側の「Home(ホーム)」をクリック「Desktop」をダブルクリック「Save(保存)」をクリックこれでデスクトップに「barrelFish.svg」が保存される。barrelFish.svgを開く「9va-pi」のアイコンをクリックし、「9va-pi」を表に出す。これは「9va-pi」がフィルタ機能を持っていないためで、ひとまず「OK」ボタンをクリックする。樽の一部がこげ茶色になっているのがフィルタの変換エラーである。これを取り除くため、まず樽をクリックし全体を選択する。「Modify(調整)」>「Ungroup(グループ解除)」をクリック。これで階層的なグループが1階層解除される。この操作を4回繰り返す。これでこげ茶色の板を単独で選択できるようになる。登録+「隠す」を利用してこげ茶色の板だけ選択こげ茶色の板を選んでマウスボタンをクリック。右側の登録領域の上にある「+」ボタンをクリック。これで選んだ図形が登録される。登録されたボタンをクリック>「Hide(隠す)」をクリック。これでこのボタンに登録された図形が表示されなくなる。この操作により選択した図形を画面から消していくことができるので、これを何回か繰り返せば、こげ茶色の板を選んで消すことができるはずである。「隠す」の操作によって、こげ茶色の板だけ消すことができたら、こげ茶色の板が登録されたボタンをクリック>「Select(選択する)」をクリック。これでこげ茶色の板だけ選択できるので、画面左側の「消しゴム」ボタンをクリックし、こげ茶色の板を削除する。Page(続きのページを作る)」をクリック。これで1ページと同じ内容の2ページめが作られる。尾びれの右上からマウス左ボタンを押しながらドラッグし、四角形で尾びれを選択する。その後、画面左側の「点選択」ボタンをクリックする。このように制御点が表示されるので、尾びれの制御点だけ右上からあらためて選び、画面左下の「+」ボタンを数回クリックする。虫眼鏡の左の「+」ボタンは選択された領域を中心に拡大表示する。選択枠の右辺の中央のハンドル(■)をクリック>「Stretch(のばす)」をクリック。マウスをゆっくり移動させると尾びれが変形するので、適当な形にして左ボタンをクリックする。左下の「虫眼鏡」ボタンをクリックすると全体が表示される。何もないところを何回かクリックすると、点選択が解除される。胸びれをクリックし、右側の登録領域の上の「+」ボタンをクリック。これで胸びれのパーツが1つ登録される。胸びれが登録されたボタンをクリック>「Hide(隠す)」をクリック。これで登録された胸びれが表示されなくなる。胸びれのパーツをもうひとつクリックして選択。これを先ほど登録したボタンに追加登録する。Group(追加登録する)」をクリック。これで追加登録されたパーツも表示されなくなる。胸びれの影も登録したら、胸びれの登録ボタンをクリック>「Select(選択する)」をクリック。その後、画面左側の「点選択」ボタンをクリックすると胸びれの制御点が表示される。胸びれの制御点全体をマウスドラッグによる四角形で囲んで選択する。選択された制御点は赤く表示される。選択枠の右辺中央のハンドル(■)をクリック>「Stretch(のばす)」をクリック。マウスをゆっくり移動させると胸びれが変形するので、適当な形にして左ボタンをクリックする。何もないところを何回かクリックして点の選択を解除する。尻びれの一部をマウスドラッグで選択する。画面左の点選択ボタンをクリックする。尻びれの一部をマウスドラッグで選択する。画面左下の「+」ボタンを何回かクリックする。虫眼鏡の左の「+」ボタンで選択した部分を中心に拡大することができる。尻びれの制御点だけを選ぶには、Ctrlキーを使う。場合、Ctrlキーはコマンドキー(コピー&ペーストのときに「CV」といっしょに押すキー)と読み替えてほしい。点選択モードで、Ctrlキーを押しながらマウスをドラッグすると、青い線が書かれるので、これで制御点を囲むようにすれば、任意の形で制御点を選択することができる(なげなわ選択)。9va-pi(Ver.0.2.9)で導入された機能である。pin(端をとめて変形)」を2回クリック。pin(端を弱くとめる)」にチェックがついた状態になる。その後、「Stretch(のばす)」をクリック。マウスをゆっくり移動させると胸びれが変形する。ここで「端を弱くとめる」または「端をとめて変形」にチェックをつけて変形すると、選択した制御点のすぐ外側の点が変形中に青く表示される。この青い点がピン止めされた点でこの点の付近の制御点は、元の位置からあまり変形しない。その結果、なめらかにつながった変形結果が得られる。口をピン止め変形して広げる画面左下の「虫眼鏡」ボタンをクリックし、全体を表示する。何もないところを何回かクリックして点選択を解除する。口の中はピン止め変形したくない(ピン止め変形すると楕円の形が崩れる)ので、口の中をクリックして選択。選択枠の中心の「+」をマウスでドラッグして左に移動させる。口の断面をマウスドラッグによる四角形で囲み、点選択ボタンをクリックし、制御点を表示させる。口の断面の制御点だけをマウスドラッグによる四角形で囲み、選択する。口元がピン止めされた状態で口が拡大される。口がラッパのように広がった状態になる。何もないところを何回かクリックして点の選択を解除する。先ほど左に移動させた口の中をクリックして選択。選択枠の中心の「+」をマウスでドラッグして元の位置に戻す。選択枠の角のハンドル(■)をマウスドラッグで移動し口の中を拡大する。樽のリングについた鉄の玉に動きをつけるために、鉄の玉をまとめて登録する。鉄の玉とリングが重なっているため、区別して選択するのは難しい。そのため、選択したあとで画面右側の登録エリアの上の「+」ボタンをクリックし、リンク用と鉄の玉用の2つの登録ボタンを作成し、このいずれかに追加登録していく。登録したボタンをクリック>「Hide(隠す)」をクリック。これで登録された図形は表示されなくなる。Group(追加登録する)」をクリック最終的に、この図のように、鉄の玉とリングが2つの登録ボタンに分類され、鉄の玉もリングもすべて表示されないようにする。鉄の玉の登録ボタンをクリック>「Select(選択する)」をクリック。Objects(つながった図形を選択)」をクリック。これで1ページと2ページの鉄の玉が同時に選択される。複数ページの図形が選択されている場合、選択枠は2重線の表示になる(下図)。画面右側の記憶ツールへの切り取りボタン「×」をクリック。1ページ、2ページの鉄の玉が記憶ツールの中に切り取られる。1ページに鉄の玉をアニメキャストにして入れる画面右側の記憶ツールの下の「9」ボタン(アニメキャストにして取り出すボタン)をクリックアニメキャストの名前を入力(なんでも良い。「OK」ボタンをクリック。記憶ツールの中身がアニメキャストとして1ページに入る。アニメキャストを入れると画面の上に「barrelFish」というファイル名が太字で表示される。アニメキャストには個別の動きをつけることができる。ring」をクリック。アニメキャストの中身が表示される。Size(ページ設定)」をクリック。600」を入力し、「OK」ボタンをクリック。画面左下の「虫眼鏡」ボタンをクリックし、全体を表示する。Page(背景ページを入れる)」をクリック。背景ページが先頭に追加される。2ページをクリックし、2ページに移動マウスドラッグによる四角形で全体を選択。画面左にある「前のページにコピーする」ボタンをクリック背景ページに鉄の玉がコピーされる。背景ページに入れた図形は後ろのページにも表示され、位置決めに利用することができる。3ページに移動、左列の一番上の玉を削除3ページをクリックし、3ページに移動する。3ページの鉄の玉を移動させてリングが回転する動きを作ることにする。左の列の鉄の玉を上から3つ選択。虫眼鏡の左側の「+」ボタンを何回かクリックして拡大表示する。上の玉をマウスドラッグで選択。画面左側の「消しゴム」ボタンをクリックして削除する。上の玉を削除しても、背景ページの玉が表示される。この位置に2つ目の玉を移動させる。2つ目の玉をCtrlキーを使って1つ目の玉の位置に移動2つ目の玉をマウスドラッグで選択。選択枠の中心「+」ハンドルを、Ctrlキーを押しながら下にマウスでドラッグする。(Macintoshの場合は、コマンドキー)Ctrlキーを押しながら選択枠の中心「+」ハンドルをドラッグすると、「+」ハンドルだけが移動する。移動中のCtrlキーは制御点への吸着の機能を持つので、玉の一番下の点に「+」ハンドルを吸着させてドラッグを終了する。次に、「+」ハンドルをマウスドラッグして上に移動させる。玉が移動し始めたら、Ctrlキーを押してドラッグを続ける。移動中のCtrlキーは、吸着の機能を持つので、マウスを上の玉の下の制御点に近づけると、2つ目の玉が1つ目の玉の位置に正確に移動する。操作をまとめると、まず、Ctrlキーを押しながら「+」ハンドルを移動させ、玉の一番下の点に吸着させる。次に「+」ハンドルをドラッグで移動し、移動先でCtrlキーを押して背景の玉の一番下の点に吸着させる。この操作を繰り返し左列の玉を1つずつ上に移動させる。操作を失敗した場合、Backspaceキーを押せば、操作を元に戻すことができる。3つ目以降の玉を順番に1つ上の位置に移動3つ目の玉を2つ目の玉に移動したら、スペースキーを押しながら、画面を上方向にドラッグ。これで画面を上にスクロールさせることができる。この操作を繰り返し、左側の列の玉をすべて一つずつ上の位置に移動させる。下の玉を移動させた後、選択枠の中心の「+」ハンドルをクリック>「Duplicate(複製する)」をクリック複製した玉を一番下の玉の位置に正確に移動させる。画面左にある「前のページにコピーする」ボタンをクリック。2ページに玉をコピーする。選択枠の中心の「+」ハンドルをマウスドラッグし、少し左下に移動させる。選択枠の角の「■」ハンドルをマウスドラッグして縮小する。3ページに移動し、右下の玉を下に移動して縮小3ページをクリックし、3ページに移動。3ページの右側の玉の列の一番下の玉をマウスドラッグで選択する。選択枠の中心の「+」ハンドルをマウスドラッグし、上図のように少し左下に移動させる。元の位置には背景の玉が表示されている。選択枠の角の「■」ハンドルをマウスドラッグして縮小する。左側の列と同じ操作で、右側の列の玉を1つずつ下に移動させる。1ページに移動し背景ページを削除、左列の一番上の玉を削除ページ領域の下にある「<<」ボタンをクリックして先頭ページに移動する。Page(ページを切り取る)」をクリック。これで1ページが削除される。左の列の一番上の玉をマウスドラッグで選択し、画面左の「消しゴム」ボタンをクリックして削除する。玉の動きをプレイページバーの左下にある「プレイ」ボタンをクリック。これで鉄の玉が回転するアニメーションが再生されるはずである。停止は、「プレイ」ボタンの右側にある「停止」ボタン、もしくはESCキー。戻る太字名「barrelFish」をクリック>「Return(このアニメにもどる)」をクリック。プレイ「プレイ」ボタンをクリック。これでアニメーションが再生される。停止は、「プレイ」ボタンの右側にある「停止」ボタン、もしくはESCキー。再生状態を見ながら、おかしいところを微調整する。解説では、尾びれ、胸びれ、尻びれ、口への動きのつけ方を説明したが、アニメーションの例では、目や他のひれも動かしている。as(名前をつけて保存)」をクリック。ファイルの種類「9VA/EVA」をクリック>「SVG」をクリック。これで保存先を指定すれば、アニメSVGが保存される。Export(アニメSVG出力)」をクリックで、SVG保存ができる。なしで直接再生できる。Export(アニメGIF出力)」をクリック。保存先とファイル名を入力し「Save(保存)」ボタンをクリック。アニメGIFの設定画面が表示される。Limit(出力秒数)」には2秒を入力。「OK」ボタンをクリックすれば、アニメGIFが保存される。アニメGIFは、ビットマップ形式であり、拡大するとぎざぎざになるが、どのブラウザでも再生できる互換性の高いフォーマットである。この解説の最初のアニメーション例もアニメGIFを用いている。無料SVGを読み込んで、アニメーションを作成するテクニックを紹介した。OpencliartのSVGを利用すれば、アニメーションを0から作るよりも、はるかに簡単にアニメーションを作成できる。見た目は単純だが、SVG静止画を図形データとして読み込んで、パーツを整理し、動きを自由につけることができる高度な機能を備えている。upLoginユーザーは見つかりませんでした。