2014-11-30

2014-11-30

タイムラインコントロール - クロスフェードAdd Star

 

 

Flashムービー

  1. PhotoshopのレイヤーをFlashのレイヤーにコンバート
  2. 各写真を「シンボルに変換」
  3. 時間を設計しながら「キーフレームの挿入」
  4. モーションを設定
  5. 各レイヤーをクロス状態にずらしていく
  6. 必要があれば、ActionScriptを記述する

Photoshopでの準備

  • 必要な画像のサイズで写真をひとつのファイルにする
  • Photoshop形式で保存
  • 背景レイヤーは削除しておく

 

f:id:web-css-design:20120526100635j:image

 

 

f:id:web-css-design:20120526095431j:image

 


Flashでの作業

新規ドキュメントに読み込む

 

f:id:web-css-design:20120526100320j:image

 

 

f:id:web-css-design:20120526111123j:image

 


  • Flashの「レイヤー1」を一番上に移動して、「Actions」とレイヤー名を変更
  • ActionScript3.0スニペットが「Actions」というレイヤー名を採用しているため

 

f:id:web-css-design:20120526101336j:image

 


シンボルに変換
  • 「修正」メニュー→「シンボルに変換」
  • グラフィックを選択

 

f:id:web-css-design:20120526101801j:image

 

 

f:id:web-css-design:20120526101934j:image

 

 

f:id:web-css-design:20120526102336j:image

 



 

f:id:web-css-design:20120526102836j:image

 

 

f:id:web-css-design:20120526103110j:image

 


トゥイーンを作成
  • この場合、キーフレームを先に配置してあるので「クラシックトゥイーンを作成」
  • Shiftキーで、必要なレイヤーを選択する

 

f:id:web-css-design:20120526111609j:image

 

 

f:id:web-css-design:20120526112208j:image

 


  • タイムラインの「1フレーム」を選択後に、ステージのインスタンスをすべて選択

 

f:id:web-css-design:20120526112511j:image

 


  • 「プロパティ」→「カラー効果」→「アルファ」
  • 「アルファ:0」で透明にする

 

f:id:web-css-design:20120526112857j:image

 


同様に「最終フレーム」も、「アルファ:0」にする


  1. レイヤー名をクリックし、フレーム全体を選択する
  2. クロスする位置までずらす
  3. すべてのレイヤーを同様にする

 

f:id:web-css-design:20120526113339j:image

 


この時点では「再生」を繰り返します。

 

 
Gadgets powered by Google

 


  • 最後の写真がフェードして見えなくなるまえに動きを止めます

 

空白キーフレームの挿入

 

  • 空白キーフレームの位置にActionScriptを記述する

 

f:id:web-css-design:20120526120235j:image

 


 

f:id:web-css-design:20120526121128j:image

 


  • ムービーが停止した瞬間に、外部サイトに移動する

 

f:id:web-css-design:20120526121129j:image

 


  • ガジェットからは、移動しません
  • ムービー上をクリックすると、再び再生します

 

 
Gadgets powered by Google

 


応用

  • 「グラフィック」シンボルのままで、移動のタイミングを重ねます

 

 
Gadgets powered by Google

 


 

 
Gadgets powered by Google