目次:
【第9回】アニメーションGIF、情報倫理(情報発信の際の留意事項)、CSS(1) 第1章
第3章
第4章
--CSSとは
--確認のための演習
|
現在の場所: ホームページ > [2]HTMLとCSS > 【第9回】アニメーションGIF、情報倫理(情報発信の際の留意事項)、CSS(1)
> 第2章 > より動きのあるアニメーションGIFファイル
より動きのあるアニメーションGIFファイル
【本節の目的】
より動きのあるアニメーションGIFの作成法の参考資料です。 時間に余裕があれば読んでみて下さい。 回転する画像3次元オブジェクトをうまく作れば、 物体が回転しているアニメーションを作ることができます。
以下の手順で2次元画像(文字も含む)を3次元オブジェクトに変換しています。 1) 2次元画像を選択する
2) 選択画像上で右クリックし、「変換」から「立体に変換」(もしくは「3D回転体に変換」)を選択
3) 3D化された画像上で右クリックして、「3D効果」を選択
上記の手順で作成した3次元オブジェクト利用して、物体が回転して見えるように角度を調整した画像をいくつか用意します。それらの画像を用いてアニメーションファイルを作成します。
作ったアニメーションファイルを実際に表示すると、 このように回転しているように見えますね。
移動する画像StarSuite Impressで平面上を移動するアニメーションを作るには、 各フレーム画像を背景と一緒に作る必要があります。 背景画像がないと、別の場所に置いたオブジェクトも、 フレーム内では中心位置に来てしまい動きが表現できません。 例えば、下図のネズミを走らせるアニメーションを作ってみましょう。 そのために、背景となる画像も一緒に準備します。 下図では、水色の長方形が背景になります。
背景画像上にネズミを配置し、アニメーションの各フレーム画像を登録していきます。 このとき、各フレーム画像は、 背景とネズミの2つのオブジェクトの組み合わせになっていますので、 フレームとして登録する画像が全部選択されているのを確認して下さい。
作ったアニメーションファイルを実際に表示すると、 このように走っているように見えますね。(見えませんか?)
|