2016年12月07日

地図上に旅行ルートのラインが描かれていくGIFアニメの作り方


 前回の記事『19世紀末の二人のアメリカ人女性による究極の「世界一周」への挑戦』で、当時最速で世界一周を果たしたネリー・ブライの旅行ルートをGIFアニメーションで示しました。

 それが下のGIFアニメーションです。

Around-the World-Nellie-Rout-Map.gif


 ルートマップは、ルートを辿れるように動きがあった方がよいと思い作ってみました。
 このルートは、結構正確に描いています。サンフランシスコからニューヨークまでのルートは、ロッキー山脈が大雪により大陸横断鉄道が不通となったため、ネリーを派遣したワールド社は、雪の影響を受けない南回りの路線を運営する鉄道会社を買収し、特別列車を仕立ててネリーをニューヨークまで運びました。シカゴからニューヨーク間も通常の大陸横断鉄道のルートではなく南ルートを採用しています。

 今日は、このGIFアニメーションの作り方をご紹介します。
 方法はいくつかあるのですが、今回、管理人が作った方法で説明します。結構きれいに仕上がっていると思います。

世界地図を入手する

 まず、ベースとなる世界地図を入手します。

 今回は、地球一周なので、地球を楕円形にして、 北極/南極に近い地方の形のゆがみを少なくした「モルワイデ図法」の世界地図を使うことにしました。

アニメーションの作成

 アニメーションを何で作るか迷ったのですが、今回はPower Pointのアニメーション機能を使うことにしました。

 ルートが少しずつ進んでいくアニメーションは、『ワイプ』を使っています。

1.Power Pointの白紙スライドに世界地図の画像を読み込む。

2.出発地ニューヨークから最初の到着地、イギリスのサウサンプトン港までのルートを描く。

 1889年11月14日午前9:40、ニューヨークのホーボーケン港を出港したネリーを乗せた蒸気船アウグスタ・ヴィクトリア号は、8日後の11月22日 午前2:30、イギリスのサウサンプトン港に入港します。

 @ Power Pointの、[挿入] ⇒ [図形] ⇒ [フリーハンド]で、ルートを描きます。
 A 描いた図形をクリックして選択し、[書式] ⇒ [図形の枠線]で、「テーマの色」を「白」を選択。[太さ]を「0.75pt」とします。
 B (図形が選択された状態で)[アニメーション]タブ ⇒ [アニメーション]グループの[ワイプ]を選択。

 画面右側に「アニメーション ウインドウ」が開いていると思います。もし、開いていなかったら、
 [アニメーション]タブ ⇒ [アニメーションの詳細設定]グループの中の[アニメーション ウインドウ]をクリックして開きます。

Rout-Map-Making1.png


 次に、@ 「アニメーション ウインドウ」の右上の下向き▼をクリックしてプルダウンメニューを表示し、A [効果のオプション]を選択。

 
Rout-Map-Making2.png


 開いたウインドウで、[効果]タブの[方向]を「左から」に設定。

Rout-Map-Making3.png


 [タイミング]タブの[開始]を[直前の動作の後]に設定。また、「持続時間」を「3秒(遅く)」に設定します。

Rout-Map-Making4.png


 同様に、次のルートを描いて、設定するを繰り返します。
ルートをすべて描いてからアニメーションにしてもよいのですが、ひとつずつやった方が効率的です。

 スライドショーで表示してみて、OKであれば、描画作業終了です。
 メニューバーの[ファイル] [保存と送信] ⇒ [ビデオの作成]で、名前を付けて保存。 wmv形式の動画として保存されます。

動画形式の変換

 wmv形式だと扱いが面倒なので、Windows付属の「Movie Maker」で動画を読み込み、mp4形式で保存し直します。(wmv ⇒ mp4変換)

動画をGIFアニメーションに変換

 動画をGIFアニメーションに変換します。

 今回は、「EZGIF.COM」の「Animated GIF Maker」を使って変換します。

 上のリンクから「EZGIF.COM」にアクセスし、@ [Video to GIF]タブで、A [参照]をクリックして、変換したい動画を選定。 B [Upload!]ボタンをクリックして、ファイルをアップロードします。ちなみに、アップロードできる動画のサイズは80MBが上限です。

Rout-Map-Making5.png


 アップロードが完了すると画面が変わるので、画面下部にある[Concert to GIF!]ボタンをクリックして、動画をGIFアニメに変換します。

 変換が終了すると、同じ画面の下部に、変換されたGIFアニメが表示されます。GIFアニメが最後まで表示されていたら作業終了です。次に、余分な部分の切り取り作業に入ります。

 GIFアニメが最後まで表示されず、途中までしか再生されない場合は、次のようにします。

 @ [End time]の右にある[Use current position]をクリック。
今回は「33.08」と表示されました。[Frame rate 10]では30 secondsが最大なので、「33.08」ではオーバーしています。A そこで、60 secondsまで可能な[Frame rate 5]を選択し、B [Convert to GIF!]をクリック。再度変換します。

Rout-Map-Making6.png


 最後まで表示されたらOKです。
 
 次に、余計な部分を切り取ります。表示されている画面下の[Crop]アイコンをクリックして、余計な部分を取り除きます。ファイルサイズを小さくするために、余計な部分は必ず切り取ります。

Rout-Map-Making7.png


 余分な部分の切り取りが終わったら、GIFアニメ画面を右クリックして保存します。

速度の調整

 今回は、出発のニューヨークと、到着のニューヨーク、つまり、アニメの最初と最後の部分を長い時間表示させたいので、表示速度を調整します。

 フリーソフト[Giam]に作成したGIFアニメを読み込みます。

 最初と最後のフレームのウエイト時間を2秒に設定。[200]と入力します。

Rout-Map-Making8.png


 今回のGIFアニメは、作るのはそれほど面倒ではないのですが、ちょっと手間がかかります。
 本当は、ルートだけでなく、出発地や到着地の地名をルートの進行に合わせて次々に表示させ、さらに、出発日からの経過日数をデジタル表示したかったのですが、めんどくさくなったのでやめました。


posted by ネコ師 at 00:02 | Comment(0) | GIFアニメの作り方と素材庫 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
記事に関係ないコメント、宣伝的なコメントは削除させていただきます。
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

▲ このページのTOPに戻る