熊本大学大学院教授システム学専攻
目次:
【第9回】アニメーションGIF、情報倫理(情報発信の際の留意事項)、CSS(1)
第1章
第3章
第4章
現在の場所: ホームページ > [2]HTMLとCSS > 【第9回】アニメーションGIF、情報倫理(情報発信の際の留意事項)、CSS(1) > 第2章 > より動きのあるアニメーションGIFファイル

より動きのあるアニメーションGIFファイル

【本節の目的】
より動きのあるアニメーションGIFの作成法の参考資料です。 時間に余裕があれば読んでみて下さい。

回転する画像

3次元オブジェクトをうまく作れば、 物体が回転しているアニメーションを作ることができます。

回転画像の素材

回る情報基礎
Copyright (C) Masahiro Migita 2003-2005, All Rights Reserved

以下の手順で2次元画像(文字も含む)を3次元オブジェクトに変換しています。

1) 2次元画像を選択する

2次元画像の選択

2) 選択画像上で右クリックし、「変換」から「立体に変換」(もしくは「3D回転体に変換」)を選択

立体に変換

↓

立体画像

3) 3D化された画像上で右クリックして、「3D効果」を選択

3D効果を選択

↓

3D効果

上記の手順で作成した3次元オブジェクト利用して、物体が回転して見えるように角度を調整した画像をいくつか用意します。それらの画像を用いてアニメーションファイルを作成します。

3D回転体の素材

作ったアニメーションファイルを実際に表示すると、 このように回転しているように見えますね。

3D回転体

移動する画像

StarSuite Impressで平面上を移動するアニメーションを作るには、 各フレーム画像を背景と一緒に作る必要があります。 背景画像がないと、別の場所に置いたオブジェクトも、 フレーム内では中心位置に来てしまい動きが表現できません。

例えば、下図のネズミを走らせるアニメーションを作ってみましょう。 そのために、背景となる画像も一緒に準備します。 下図では、水色の長方形が背景になります。

ネズミの元絵

背景画像上にネズミを配置し、アニメーションの各フレーム画像を登録していきます。 このとき、各フレーム画像は、 背景とネズミの2つのオブジェクトの組み合わせになっていますので、 フレームとして登録する画像が全部選択されているのを確認して下さい。

ネズミの初期フレーム

↓

ネズミの2番目のフレーム

↓

ネズミの最終フレーム

作ったアニメーションファイルを実際に表示すると、 このように走っているように見えますね。(見えませんか?)

走るネズミ
Copyright (C) Eri Hayashi 2005, All Rights Reserved

Copyright (C) Masahiro Migita and Kenichi Sugitani 2005, All Rights Reserved