読者です 読者をやめる 読者になる 読者になる

写真画像のフェードイン・フェードアウト

フェードイン・フェードアウトのプログラム作成

写真4枚を連続でフェードイン、フェードアウトするFlashのプログラムを作成します。

Phtoshopで作成した写真を読み込む

f:id:develog:20160903113337p:plain

car.psdを選択します。

f:id:develog:20160903113507p:plain

そのまま「OK」を選択します。

f:id:develog:20160903113616p:plain

写真が読み込まれてレイヤーが4つできています。

f:id:develog:20160902005926p:plain

写真画像をシンボルに変換

タイムラインのレイヤーを選択(選択されたレイヤーは青くなります)し、それぞれ「シンボルに変換」を行います。

メニューバーの「修正」->「シンボルに変換」

レイヤー5 名前:car4  種類:ムービークリップ  基準点:中央

レイヤー4 名前:car3  種類ムービークリップ  基準点:中央

レイヤー3 名前:car2  種類ムービークリップ  基準点:中央

レイヤー2 名前:car1  種類ムービークリップ  基準点:中央

f:id:develog:20160903114928p:plain

f:id:develog:20160903150542p:plain

レイヤー5のシンボルに変換が終わったらレイヤー5をロック&非表示にし、レイヤー4のシンボルに変換を行います。同様にレイヤー3と2も行います。

f:id:develog:20160903115108p:plain

キーフレームの挿入

15フレーム目、45フレーム目、60フレーム目にキーフレームを挿入します。

レイヤー5から2の4つ全てを選択->マウスの右ボタンをクリック->キーフレームの挿入

f:id:develog:20160903115338p:plain

15フレーム目、45フレーム目、60フレーム目にキーフレームを挿入しました。 

f:id:develog:20160903120021p:plain

レイヤーのプロパティ設定を行う

「プロパティ」タブが出ていない場合は、作業タイプをデザイナーに替えます。

タイムラインの1フレーム目と60フレーム目にカラー効果を設定します。

タイムラインの1フレーム目の設定

レイヤー5を選択します。

f:id:develog:20160903122232p:plain

プロパティのカラー効果設定

カラー効果を以下のように設定します。

 スタイル:アルファ  アルファ:0%

f:id:develog:20160903122511p:plain

アルファを0%に設定した時点でレイヤー5の写真は消えてレイヤー4の写真が表示されています。

f:id:develog:20160902010021p:plain

レイヤー5をロック&非表示にします。

同様にレイヤー4~2までカラー効果の設定を行います。

 すべて行うと全ての写真が消えて以下のようになります。

f:id:develog:20160902010034p:plain

タイムラインの60フレーム目の設定

レイヤー5~3までのロック&非表示を解除して、タイムラインの1フレーム目と同様に、レイヤー5~2までカラー効果の設定を行います

クラシックトゥイーンを作成

45~60フレームの任意のフレームでレイヤー5~2を同時に選択します。

マウスの右ボタンをクリックして「クラシックトゥイーンを作成」を選択します。

1~15フレームの任意のフレームでレイヤー5~2を同時に選択します。

マウスの右ボタンをクリックして「クラシックトゥイーンを作成」を選択します。

f:id:develog:20160903134706p:plain

4枚の写真を表示する時間をずらす

レイヤー3を選択します。フレームの青くなっている部分の任意のところをドラッグして任意の場所(ここでは56フレーム目)に移動します。

f:id:develog:20160903142542p:plain

f:id:develog:20160903142552p:plain

f:id:develog:20160903142556p:plain

レイヤー4を選択します。フレームの青くなっている部分の任意のところをドラッグして任意の場所(ここでは111フレーム目)に移動します。

f:id:develog:20160903143647p:plain

レイヤー5を選択します。フレームの青くなっている部分の任意のところをドラッグして任意の場所(ここでは166フレーム目)に移動します。

f:id:develog:20160903143110p:plain

処理速度を変える

フェードイン・フェードアウトがでデフォルトでは速いので少し遅くします。

タイムラインの下に1秒間に何フレーム実行するかを設定する場所があるので、そこをデフォルトの24.00fpsから12.00fpsに変更します。

f:id:develog:20160903140342p:plain

f:id:develog:20160903140348p:plain

プログラムの完成

リターンキーを押すと以下のような処理が実行されます。

レイヤー2の写真がフェードイン->レイヤー2の写真を普通に表示レイヤー2の写真がフェードアウト->レイヤー2の写真がフェードアウトしている途中でレイヤー3の写真がフェードイン->レイヤー3の写真を普通に表示->レイヤー3の写真がフェードアウト->レイヤー3の写真がフェードアウトしている途中でレイヤー4の写真がフェードイン->レイヤー4の写真を普通に表示->レイヤー4の写真がフェードアウト->レイヤー4の写真がフェードアウトしている途中でレイヤー5の写真がフェードイン->レイヤー5の写真を普通に表示->レイヤー5の写真がフェードアウト