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

GIFアニメの作り方と素材庫

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

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

 ルートマップは、ルートを辿れるように動きがあった方がよいと思い作ってみました。

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

 今日は、このGIFアニメーションの作り方をご紹介します。

 方法はいくつかあるのですが、今回、管理人が作った方法で説明します。結構きれいに仕上がっていると思います。

世界地図を入手する

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

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

アニメーションの作成

 アニメーションを何で作るか迷ったのですが、今回はPower Pointのアニメーション機能を使うことにしました。
 ルートが少しずつ進んでいくアニメーションは、『ワイプ』を使っています。

1.Power Pointの白紙スライドに世界地図の画像を読み込む。
2.出発地ニューヨークから最初の到着地、イギリスのサウサンプトン港までのルートを描く。
 1889年11月14日午前9:40、ニューヨークのホーボーケン港を出港したネリーを乗せた蒸気船アウグスタ・ヴィクトリア号は、8日後の11月22日 午前2:30、イギリスのサウサンプトン港に入港します。
 ① Power Pointの、[挿入] ⇒ [図形] ⇒ [フリーハンド]で、ルートを描きます。
 ② 描いた図形をクリックして選択し、[書式] ⇒ [図形の枠線]で、「テーマの色」を「白」を選択。[太さ]を「0.75pt」とします。
 ③ (図形が選択された状態で)[アニメーション]タブ ⇒ [アニメーション]グループの[ワイプ]を選択。
 画面右側に「アニメーション ウインドウ」が開いていると思います。もし、開いていなかったら、
 [アニメーション]タブ ⇒ [アニメーションの詳細設定]グループの中の[アニメーション ウインドウ]をクリックして開きます。

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

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

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

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

 スライドショーで表示してみて、OKであれば、描画作業終了です。

 メニューバーの[ファイル] [保存と送信] ⇒ [ビデオの作成]で、名前を付けて保存。 wmv形式の動画として保存されます。

動画形式の変換

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

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

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

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

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

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

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

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

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


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

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

速度の調整

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

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

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

 今回のGIFアニメは、作るのはそれほど面倒ではないのですが、ちょっと手間がかかります。

 本当は、ルートだけでなく、出発地や到着地の地名をルートの進行に合わせて次々に表示させ、さらに、出発日からの経過日数をデジタル表示したかったのですが、めんどくさくなったのでやめました。