2009年08月03日

回転する地球儀をGIFアニメーションで作る


 回転する地球儀をGIFアニメーションで作ってみました。

 前回は写真でしたが、今回は地図で作りました。
 クリックすると大きな地球儀になります。

回転する地球儀(GIFアニメ)


【作り方】
 作り方を書きますが、書くほどのことはないほど簡単にできます。

 基本となる地図はこちらのサイトからダウンロードします。
 無料で日本や世界各国の白地図も提供しています。非常に役立つサイトだと思います。私はよくこのサイトの白地図を使わせていただいています。
『白地図、世界地図、日本地図が無料』

 地図画像をダウンロードしたら、地図だけ残して、余分な縁の所を切り抜き、保存します。

 ソフトは、GIMPを使っています。1枚の地図から自動で回転する球体を作ってくれます。あとは、地軸の傾斜角をセットすればできあがりです。

 [フィルター]⇒[アニメーション]⇒[回転する球体]と進みます。
 コマ数は、60位にします。「左から右に回転」にチェックを入れます。このチェックを入れないと、地球が逆回転します。 

 
das1.jpg


 上の設定の場合、レイヤーが60枚表示されますが、それら全てに鎖マークをつけます。

 画像>キャンパスサイズの変更で、キャンパスサイズのところの鎖マークをクリックして、鎖を切ります。あとは、高さを幅と同じ程度の数値にします。(実際の地球は、赤道半径の方が大きいです。)

 ツールボックスの【拡大・縮小】をクリックし、画像をクリック。拡大・縮小の数値を、先ほど設定した高さにサイズを合わせます。これで、全てのレイヤーが丸い地球の形に拡大されます。(全てのレイヤーが鎖マークでつながっていないと、1つのレイヤーだけ変形してしまいます。)

 できあがりを、[フィルタ]⇒[アニメーション]⇒[再生]で確認します。

 最後に、[ツールボックス]⇒[回転]で角度の欄に23.4度を入力します。これで、地球の地軸が傾きます。

 後は、GIFアニメーションとしてセーブすればお終いです。
 コマ数が多いと、回転画像を作るのに結構時間がかかります。120枚でも作ったことがありますが、サイズが大きくなり、回転画像レイヤー作成にすごく時間がかかるので、おすすめできません。60枚くらいで十分きれいに見えます。GIFアニメーションとしてセーブする途中で、「動画GIFオプション」の画面がでます。ここで、400ミリ秒くらいに設定し、「全フレームのフレーム間の時間にこの値を使用」にチェックを入れれば、ここでご紹介しているようなゆっくりとした回転になります。

 ポールシフトして横倒しになった地球儀も作ってみたのですが、両極の部分がうまくつながらず、回転させるとあまりきれいなできばえでないので、削除しました。

 横倒しになった地球を見て、相当違和感を感じます。両極が赤道にきてごろごろ回転しているのは思っていた以上に不気味です。 
posted by ネコ師 at 06:46| Comment(4) | GIFアニメの作り方と素材庫 | 更新情報をチェックする
この記事へのコメント
回転する地球儀、ブログにて使用させていただきました。ありがとうございます。
Posted by 中村裕二 at 2010年08月23日 11:02
某大学で教員をしております。
当教室では地理を教えており、教室のサイトに相応しいアイコンを探しておりました。フリー素材ということで、有り難く使わせていただきます。多謝。
Posted by 鈴木 at 2012年02月29日 18:59
回転する地球儀の作り方で、画像を保存したあと、一番最初の「フィルタ」→「アニメーション」の次の「回転する球体」が選択できないのですが、どのようにすれば「回転する球体」が選択できるようになるのでしょうか?
教えていただけると助かります。
よろしくお願い致します。
Posted by 傳法谷 博昭 at 2013年02月23日 10:42
>傳法谷さんへ
 コメントありがとうございます。
 普通に読込むと確かに選択できませんね。説明が荒っぽくて申し訳ない。

 たぶん、画像のモードがインデックス・カラーのためだと思います。[画像]⇒[モード]⇒[RGB]にしてみてはいかがでしょうか。

 念のため、今作ってみた"選択できる"ファイルをアップします。地図を適当に切り抜いたので、このバージョンではうまくつながりませんが、操作サンプルとして使ってみて下さい。[CTRL]+[SHIFT]+[D]で好きなだけコピーを作り、一番上のレイヤで回転処理します(ファイルは1週間で削除されます)。

http://firestorage.jp/download/cd1237882af4eaf676f1f1a6ba2419e6389ddc92

背景を透明にするには、[レイヤ]⇒[透明部分]⇒[アルファチャンネルを追加]です。


Posted by ネコ師 at 2013年02月26日 00:41
コメントを書く
コチラをクリックしてください