WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

Flashでクロスフェード

f:id:mmmmofu:20160922022836j:plain

前回の記事

mmmmofu.hatenablog.com

Photoshopでの準備

Photoshopにフェードする写真をレイヤーごとに配置しておく。
一番最初からある背景は削除しておく
PSDファイルで保存する

f:id:mmmmofu:20160922022335p:plain

Flash

Flashを起動したら新規作成(AS 2.0)を選択して新規作成する。
ファイル→読み込み→ステージに読み込み
で先ほど保存したPSDファイルを読み込む

レイヤー1は一番上に移動し、「Acrion」と名前を変更する。
ここにActionScriptを記述する。

読み込んだタイムラインの写真を1つ選択し、
「修正」→「シンボルに変換」→名前は任意。種類「グラフィック」
写真を全部シンボルに変換する

一定の間隔ごとにキーフレームを3つ追加する。
写真のフレームを全て選択し、右クリック「クラシックトゥイーンを作成」する。
一番最初のキーフレームを選択し、ステージ上の写真を選択する。
プロパティの「カラー効果」→「アルファ」を0にする。
一番最後のキーフレームを選択し、
同じくプロパティの「カラー効果」→「アルファ」を0にする。

これでフェードイン→しばらく待機→フェードアウトのアニメーションが作成できたので
クロスフェードしているように見えるようにフレームを移動していく。
フレームをShiftを押しながら全選択→右にドラック&ドロップ

最後のフェードアウトする前にアニメーションをストップさせる。
ストップさせたいフレームに右クリック→「キーフレームの挿入」
そこを選択したまま「F9」でアクションを呼び出す
そこに

stop();

と記述する。

CTRL + ENTERで再生してみる。

f:id:mmmmofu:20160922024957p:plain
デモはこちらのライブラリを使用しました。

GitHub - ienaga/swf2js: JavaScript製FlashPlayer「swf2js」

qiita.com