くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[FLASH]クロスフェード 

 

FLASHクロスフェードの動画を作成します。

クロスフェードとは:複数の画像がフェードイン・フェードアウトしながら、自動的に切り替わるもの。

 

○各画像のレイヤー
○全体の再生停止等の指示をするレイヤー
○再生・停止を指示するボタンのレイヤー

を分けて作ります

 

① Photoshopで画像を複数枚用意します。(サイズを揃えましょう)これを、psd形式で名前をつけて保存します

f:id:pleasure10501:20150409190044p:plain

② FLASHを起動し、ActionScript2.0で新規作成しておきます

③ ①で保存したpsdファイルを読み込みます

ファイル > 読み込み >ステージに読み込み

f:id:pleasure10501:20150409190401p:plain

「背景」のレイヤーは不要なのでチェックを外して読み込みます

PSのレイヤーがそのままFLASHのレイヤーに移りました。

f:id:pleasure10501:20150409190656p:plain

一番下のレイヤー1は自動で作られるものですが、空レイヤーです。1番上に移動して「Action」用にします。レイヤー名も「Action」に変えます。

④ 各レイヤーを「シンボル」に変換
 修正 > シンボルに変換 
 名前は「ph01」、オプションは「グラフィック」

f:id:pleasure10501:20150409185720p:plain

シンボルに変換すると、シンボルとインスタンスができます。インスタンスの淵が青くなったらOK

f:id:pleasure10501:20150409222442p:plain

⑤ キーフレームの挿入

25、51、75コマ目にキーフレームの挿入f:id:pleasure10501:20150409185718p:plain

画像のレイヤーを全て選択し、25コマ目にカーソルを移して右クリック→キーフレームの挿入

⑥ レイヤーをフェードイン・フェードアウトにする

※1つずつ丁寧にやりましょう。他のレイヤーに影響が出ないようにロックします

  1. 1コマ目を選ぶ
  2. インスタンス全体を選択し、青い枠で囲んだ状態にする
  3. プロパティのカラー効果 >スタイル:アルファ  数値は0 透明になります
  4. 最後のコマも3を繰り返す

f:id:pleasure10501:20150409185714p:plain

 

⑦ レイヤーをずらしていく

レイヤーを1行選択してから、1コマ目の黒丸を動かします

f:id:pleasure10501:20150409192637p:plain

 

Ctrl(Command)+ Enter でシーンプレビューができます

この時点では、動きが自動再生し、かつエンドレスに繰り返される状態です。

 

⑧ Actionの設定

全体の再生停止等の指示をするレイヤーです。Actionレイヤーに書き込みます。
1コマ目に自動再生を止める指示をかけます。

  1. Actionレイヤーを選択
  2. プロパティ(フレーム)の右上にある矢印ボタンを押す
  3. 別ウィンドウが起動し、スクリプト「stop( );」を書き込みます
  4. ウィンドウを閉じる

f:id:pleasure10501:20150409193615p:plain

f:id:pleasure10501:20150409193623p:plain

レイヤー全体が青くなっていたら、どのコマにもstopがかかってしまうので1コマ目以外は削除します(フレームの削除)

 

自動再生を止めたので、再生するためのボタンが必要になりました。
画面のどこを押してもボタンになるようにします。

⑨ ボタンの作成

  1. 新規レイヤー追加 Actionレイヤーの下に移動
  2. 長方形ツールでボタンの領域を囲む
  3. 長方形を選んで、ボタンに変換 修正>シンボルに変換>ボタン
  4. ライブラリのボタンのアイコンをダブルクリックで開く
  5. ヒットにキーフレームの挿入

    f:id:pleasure10501:20150409194936p:plain

  6.  

    シーン1へ戻る
  7. ボタンの1コマ目を選んで、プロパティ(<インスタンス名>)の矢印を押してスクリプトを書き込むf:id:pleasure10501:20150409185716p:plain
  8. 閉じる
  9. 再生ボタンは動画の最初だけ出したいので、1コマ目以外が青くなっていれば削除する

 

シーンプレビュー(Ctrl(Command)+ Enter)は適宜行うと効率的です。

完成したら書き出しはファイル>パブリッシュ設定 です。