横浜システム工学院専門学校

スライドショーを作ろう

スライドショーを作ろう

複数の写真が徐々に入れ替わるスライドショーを作成します。

◆ドキュメントプロパティの設定

今回はドキュメントのサイズを 400px × 300px に設定し

ます。また、フレームレートは 12fps に設定します。

①１枚目の写真の配置

◆使用する写真をライブラリに読み込む

[ファイル]-[読み込み]-[ライブラリに読み込み]でスライドショーに使用する写真を読み込

みます。⼀度に複数のファイルを読み込めます。読み込みが完了したらライブラリパネルを表

示し、確認しましょう。

◆写真の配置

ライブラリのプレビューからステージ上に写真をドラッグドロップで配置します。

◆サイズと位置の修正

まず、中心位置を確認します。情報パネルで下の図のように中心位置が左上になっているこ

とを確認します。次に、右の図を参考に、幅(W)、高さ(H)、縦位置(X)、横位置(Y)の値を設

定します。

◆シンボルに変換

ステージに配置した写真を選択し、[修正]-[シンボルに変換]でムービ

ークリップシンボルに変換します。

◆モーショントゥイーンの設定

ステージ上のインスタンスを右クリックして[モーショントゥ

イーンを作成]を選択します。

◆キーフレームの設定

トゥイーンスパンを 30 フレームまで延⻑し、20 フレーム目と 30 フレーム目で右クリックをして、 [キーフレーム

の挿入]から[すべて]を選択します。プロパティキーフレーム◆が挿入されます。

-1-
 横浜システム工学院専門学校
スライドショーを作ろう

◆アルファ（不透明度）の設定

20 フレーム目から 30 フレーム目にかけて透

明に消えていくモーションを設定します。

1 フレーム目のインスタンスと 20 フレーム

目のインスタンスでは、カラー効果[アルファ：

100%]、30 フレーム目ではカラー効果[アルフ

ァ：0%]に設定します。

②2 枚目の写真

◆新規レイヤーの追加と写真の配置

レイヤー１を選択し、[レイヤーの追加]ボタ

ンをクリックし、新しいレイヤーを追加します。

前と同様にライブラリに写真を読み込み、次に

20 フレーム目に空白のキーフレームを挿入し、

そこに 2 枚目の写真を配置します。写真を配置

したら忘れずにムービークリップシンボルに変

換しましょう。

◆モーショントゥイーンの設定

ステージ上のインスタンスを右クリッ

クして[モーショントゥイーンを作成]を

選択します。

◆キーフレームの設定

トゥイーンスパンを 60 フレームまで延⻑し、30,50,60 フレーム目にキーフレームを挿入します。

◆アルファ（不透明度）の設定

20,60 フレーム目を選択し、ステージ上のインスタンスを選択し、プ

ロパティパネルでカラー効果[アルファ：0%]に設定する。同様に 30,50

フレーム目にはカラー効果[アルファ：100%]を設定します。20〜30

フレームでは 2 枚目の写真が徐々に表示され、50〜60 フレームで徐々

に消えていきます。

レイヤー１の 20〜30 フレームでは 1 枚目の写真が徐々に消えていく

設定となっているので、2 枚の写真が自然に切り替わります。

-2-
 横浜システム工学院専門学校
スライドショーを作ろう

◆動作確認

メニューバーの[制御]-[再生]を選択し、1 枚目の写真から 2 枚目の写真への切り替わりが自然に切り替わるか確認し

ましょう。

③3 枚目の写真

3 枚目以降は写真を配置してシンボルに変換した後、モーションをコピー/ペーストします。手順はレイヤー2 のトゥ

イーンスパンを右クリックし、[モーションをコピー]を選択します。続いてレイヤー3 の 1 フレーム目で右クリックし、

[モーションのペースト]を実⾏します。下の図を参考にトゥイーンスパンを 50 フレーム目に移動します。

レイヤー名 レイヤー3

シンボル名 シンボル 3

開始フレーム 50 フレーム目

④4 枚目の写真

同様にして 4 枚目の写真を追加します。設定は下を参考にしてください。

レイヤー名 レイヤー4

シンボル名 シンボル 4

開始フレーム 80 フレーム目

-3-
 横浜システム工学院専門学校
スライドショーを作ろう

⑤1 枚目の写真につなげる

最後に、ループ再生したときに 1 枚目の写真につながるように、1 枚目の写真が徐々に表示

されるモーションを設定します。誤操作の無いようにレイヤー4 をロックしておきます。

レイヤー1 の 120 フレーム目にフレームを挿入して、110,120 フレーム目にキーフレームを

挿入します。レイヤー1 は 30 フレーム目でアルファ 0%になってるので、挿入したキーフレームもアルファ 0%になり

ます。ここでは 120 フレーム目のアルファを 100%に設定します。これで 4 枚目の写真から 1 枚目の写真に切り替わ

るモーションが設定されました。

タイムライン全体を表

示すると右の図のように

なります。ルーラー右側

の[フレーム表示設定]ボタンをクリックして表示を細かくし、全体を確認しましょう。

⑥ムービープレビュー

メニューバーの[制御]-[ムービープレビュー]を実⾏すると、実際にどのよう

に表示されるか確認できますが、.fla ファイルと同じファイル名で.swf ファイ

ルが作成されるので、先に「Slideshow.fla」というファイル名で名前をつけて

保存をします。保存が完了したら[Ctrl]＋[Enter]でムービープレビューしてみ

ましょう。

⑦パブリッシュ

メニューバーの[ファイル]-[パブリッシュ]を実⾏すると、デフォルトの設定

では.swf ファイルと、swf を埋め込んだ.html ファイルが.fla ファイルと同じ

場所に作成されます。.html ファイルをダブルクリックしてブラウザで確認し

てみましょう。Internet Explorer の場合は、情報バーが表示されるので、ク

リックして「アクティブコンテンツの許可」を実⾏しないと Flash ムービーが

表示されませんので注意してください。

-4-