NEWS

2016.09.02 「Photoshopとpapervision3dでテクスチャ付3Dを作成する(4)」を更新しました。

  • Web creators

アニメーション

背景をスムーズに表示する

概要

一つの背景画像から他の背景画像に少しずつ変わります。

サンプル解説

一定時間で画像が変化します。

作成法

(1) シンボルの作成
  ・2つの背景画像をライブラリに保存します。
画像保存
  ・シンボルを作成して、それぞれに画像を設置します。
シンボルの作成
(2) シンボルをステージに配置
  ・レイヤー1にシンボル「イメージ1」を、レイヤー2にシンボル「イメージ2」を設置します。
(3) アニメーションの設定
  ・レイヤー1の最終フレームにキーフレームを挿入し、最初のフレームから最終フレームまでをモーショントゥイーンにします。
  ・レイヤー1の最初のフレームにあるシンボルを選択して、「プロパティ」→「カラー」内のアルファを0%にします。
  ・アルファの設定をしてフレーム1を見ると、レイヤー1が透明になりレイヤー2の画像が表示されます。
(4) ループ時の対応
  ・レイヤー1の上にレイヤー「2-b」を作り、シンボル「イメージ2」を用いて上記(3)の設定を行います。

解説

モーショントゥイーンの「アルファ」はシンボルの透明度を設定することができます。
初めのキーフレームではアルファ0%だったものが、フレームが進むにつれアルファが100%になるので、透明のものが少しずつ本当の姿を現し画像が切り替わるように見えます。
今回は透明にした画像の下に既に画像を設置していましたが、何もない場所でこのアニメーションを使用すると、浮き出るような表現が可能です。
また、アニメーションはループしてフレーム1に戻ってくるので、レイヤー「2-b」で違和感がないように少しずつ元の画像に戻るようにしています。

ページ上部へ