◎Flashフリーソフト「SUZUKA」でスライドショー_フェード作成レシピ

Step1: プロジェクトの設定をする

    Suzuka を起動したら、メインメニューの[ファイル][プロジェクトのプロパティ]を開き以下のように

   設定します。
     
    

Step2: 素材画像を用意する

     今回は3枚の画像(例:幅500、高さ375)を使います。(画像の大きさは一応の目安です)

   (画像の名前は自由です。例1.jpg

    画像は、ディスクトップにフォルダを作成し、その中に入れて置きます。

Step3: 画像をSuzukaに読み込む

       ディスクトップに用意した画像を、Suzuka画面左の「シンボルリスト」にドラッグ&ドロップします。

Step4: 最初の画像を3秒表示させる

    シンボルリストから 1.jpg を「レイヤーリスト」にドラッグ&ドロップします。

    

   続いて、画面右下の「キーフレーム編集枠」で以下のように設定します。

    
  
    

  タイムラインで灰色の領域が 130 フレームに広がりました。

    (FPS10と設定しました。)

 注、FPS10は1秒で10フレーム動きますので、30フレームでは3秒分です.

    

  なお、タイムライン上の青赤灰の部分をダブルクリックすると、開始フレーム・フレームカウントをドラッグ& ドロップで操作できる
  ようになります。

  マウスか数値入力、好みの方法を使ってください。

 

   Step5: 最初の画像をフェードアウトさせる

    1.jpg のタイムライン上の31フレームを指定し、右クリックでコンテキストメニューから

   [キーフレーム追加]を選択します。

    

    

  続いて、キーフレーム編集枠で[トゥイーン]にチェックします。

  

  つぎに、「カラー」タブをクリックして置きます。

   同じく、40フレームにキーフレーム追加し、キーフレーム編集枠で[不透明度]0%に設定します。

  
  

F5キーを押して、プレビューを見てください。

フェードアウトするアニメーションが見れると思います。
(F7キーでブラウザを使ったプレビューも可能です)

ここでタイムラインを見てみると、
3140フレームがピンク色になっています。

31フレームで[トゥイーン]にチェックしたことで、 31フレームの不透明度100%から、

40フレームの不透明度0%まで徐々に変化するアニメーションを自動的に作ってくれます。

 

Step6: 2番目の画像を表示させる

   Step4の要領で、今度は 2.jpg を表示させます。

ここで注意することは3つ。

1. 2.jpg レイヤーリストで 1.jpg の真下に追加する。

2. 開始フレームは 1.jpg のフェードアウトと重なるように、31にする。

3. フレームカウントは 40 にする。(30ではない)

   こうすることで、風景1(1.jpg)から風景2(2.jpg)へ、徐々に変化するアニメーションができます。

Step7: 2番目の画像をフェードアウトさせる

    Step5 にしたがって 2.jpg にもフェードアウトする部分を作ります。

 71フレームをクリックして、右クリックでコンテキストメニューから「キーフレーム追加」を選択。

   キーフレーム編集枠で[トゥイーン]にチェックします。

   80フレームに「キーフレーム追加」し、「カラー」タブをクリック、「不透明度を0%に」設定します。

  この時点で、レイヤーリストとタイムラインは以下のようになっているはずです

  
  

Step8: 3番目の画像を追加する

1. 同様に3.jpg レイヤーリストで 2.jpg の真下に追加する。

2. 開始フレームは 2.jpg のフェードアウトと重なるように、71にする。

3. フレームカウントは 40 にする。

   Step5 にしたがって 2.jpg にもフェードアウトする部分を作ります。

 111フレームをクリックして、右クリックでコンテキストメニューから「キーフレーム追加」を選択。

   キーフレーム編集枠で[トゥイーン]にチェックします。

   120フレームに「キーフレーム追加」し、「カラー」タブをクリック、「不透明度を0%に」設定します。

  


Step9:アニメーションをループにする。

     そして、ここがちょっとしたポイントですが、今回のアニメーションはループしたいので、

     3.jpg の真下にもう一度 1.jpg 10フレーム(1)分追加しておきます。

111フレームをクリックして、右クリックでコンテキストメニューから「キーフレーム追加」を選択。   

●フレームカウントは10にする。

    こうすることで、 最初の画像へ滑らかに変化するアニメーションができます。

終了付近のタイムラインは以下のようになっています。

   



Step10: 完成 .swf ファイルへ書き出す

      メインメニュー[ファイル][SWFファイル生成] .swf ファイルに書き出すことができます。

      なお、 メインメニュー[ツール][オプション][パブリッシュ設定][HTMLファイルも保存する]

      チェックしておくと完成品のホームページへの組み込みが楽です。

 

以上です         

TOPへ