トランジッション効果Flashフォトアルバム　第１回

  1. まずは完成サンプルをご覧下さい。全３回の終了後の完成サンプルです。
    写真をクリックすると、派手なトランジッション効果とともに写真が切り替わります。
  2. 素材写真をこちらからダウンロード
    幅：640、高さ480の写真が３枚入っています。
  3. ［ファイル］メニューから［新規］をクリック。
  4. ［一般］タブの［Flashドキュメント］をクリック。［OK］ボタンをクリック。
    FlashCS3をお使いの方は、［ファイル］メニューから［新規］をクリック。
    ［一般］タブを選択して［Flashファイル（AS2.0）］を選択します。
  5. ［プロパティインスペクタ］のサイズボタンをクリック。
  6. ［サイズ　幅：640px　高さ：480px］、［フレームレート24fps］と設定する。［OK］ボタンをクリック。
  7. ［ファイル］メニューから［保存］をクリック。
  8. 任意の場所に「transition_album.fla」というファイル名で保存しておく。
    以下、こまめに上書き保存をしていきたい。
  9. ［ファイル］メニューから［読み込み］→［ライブラリに読み込み］をクリック。
    素材写真３枚をすべて選択して［開く］ボタンをクリック。
  10. ［F11］（もしくは［ウインドウ］メニューから［ライブラリ］をクリック）を押してライブラリを開くと、写真が３枚格納されている。
  11. ［レイヤー１］をダブルクリックして、「photo」と名前を設定する。［Enterキー］を押して確定する。
  12. ［ライブラリ］から［photo1.jpg］をステージにドラッグアンドドロップする。
  13. ［プロパティインスペクタ］で、［X:0 Y:0］と設定して［Enterキー］を押して確定する。
  14. ［photoレイヤー］のフレーム２をクリックする。
  15. ［F6］を２回押す。フレーム３までキーフレームが伸びて、写真もコピーされます。
  16. ［フレーム２］をクリック。ステージの写真をクリック。
  17. ［プロパティインスペクタ］で［入れ替え］ボタンをクリック。
  18. ［photo2.jpg］をクリック。［OK］ボタンをクリック。
  19. 同様に、［フレーム３］をクリック。写真をクリック。［入れ替え］ボタンで写真を［photo3.jpg］と入れ替えよう。
  20. ［レイヤーの追加］ボタンをクリック（もしくは、［挿入］メニューから［レイヤー］をクリック）して、新規レイヤーを作成。「btNext」と名前をつける。
  21. ［矩形ツール］をクリック。［線：なし　塗り：赤］と設定して、
    ステージをドラッグする。
  22. ［選択ツール］をクリック。ステージの赤い長方形をクリック。
    ［プロパティインスペクタ］で［W:640 H: 480 X:0 Y:0］と設定する。
  23. ［選択ツール］をクリック。ステージの赤い長方形をクリック。［F8］を押す。
    ［名前：btNext　タイプ：ボタン　基準点：左上］と設定して［OK］ボタンをクリック。
  24. ステージの赤い長方形をダブルクリック。
  25. ［アップフレーム］のキーフレームをクリック。マウスを離して少し間を置いて、［ヒットフレーム］にドラッグして移す。
    ヒットフレームしかキーフレームがないシンボルにする。
  26. ［シーン１］をクリック。

  27. 水色の透明なボタンインスタンスになっている。
    これはムービープレビューをすると画面には表示されないボタンインスタンス。ボタンアクションを設定することができる。
  28. ［選択ツール］で水色の透明なボタンインスタンスをクリック。
    ダブルクリックをすると、シンボルの中に入ってしまうので、注意が必要。
    ダブルクリックしてしまった場合は、シーン１に戻って、クリックし直す。
  29. ［プロパティインスペクタ］でインスタンス名を「next_btn」と設定する。
    メモ：インスタンス名は半角英数字を使うこと、頭に数字をつけることはできない。
    インスタンス名の設定は忘れやすいので注意したい。
  30. 新規レイヤーを作成。「as」とする。
  31. ［asレイヤー］のフレーム１をクリックして、［F9］を押す。以下のフレームアクションを記述する。
    透明なボタンインスタンスにアクションを割り当てている。
    ボタンが押されたら、次のフレームに進みなさいというアクションを設定する。
    stop();
    next_btn.onRelease = function() {
    nextFrame();
    };
  32. 保存する。
  33. ［制御］メニューから［ムービープレビュー］をクリック。
    写真をクリックすると、写真が切り替わる。ただし３枚目の写真で行き止まりになる。
    メモ：ムービープレビューは頻繁に使うのでショートカットキー「Ctrl+Enter」を覚えておこう。
  34. ムービープレビューのウインドウは閉じよう。
  35. ［asレイヤー］のフレーム4をクリックして、［F6］を押す。
  36. そのまま［F9］を押す。以下のフレームアクションを記述する。
    gotoAndStop(1);
  37. ムービープレビューをしよう。エンドレスで写真を切り替えることが可能になった。
    あとは、トランジションのエフェクトをつけていく。
    メモ：フレーム４までタイムラインはあるのに、フレーム４は表示されないのがポイント。フレームアクションは、フレームが表示される前に実行される。
  38. 一回目はここで終了です。お疲れ様です。
    ここまでの完成ファイルがダウンロード

→次の手順へ