フリーの Flash 作成ソフト 『Suzuka 』
を使って簡単なスライドショーを作ってみました。その過程をチュートリアルとして残したいと思います。
完成品:
3枚の画像を使い、3秒表示 > 1秒かけて次の画像へフェード > 3秒表示・・・とループするムービーです。
プロジェクトファイル (14.0
KB)
では、チュートリアルを開始しましょう。
Step1:
プロジェクトの設定をする
Suzuka を起動したら、メインメニューの[ファイル][プロジェクトのプロパティ]を開き以下のように設定します。
Step2:
素材画像を用意する
今回は以上の3枚の画像を使いました。ダウンロードして使ってください。
Step3:
素材画像をSuzukaに読み込む
用意した画像をエクスプローラから、Suzuka画面左の「シンボルリスト」にドラッグ&ドロップします。
Step4:
最初の画像を3秒表示させる
シンボルリストから driver.jpg を「レイヤーリスト」にドラッグ&ドロップします。
続いて、画面右下の「キーフレーム編集枠」で以下のように設定します。
タイムラインで灰色の領域が 1?30 フレーム(FPS10と設定したので3秒)分に広がったのがわかると思います。
なお、タイムライン上の青赤灰の部分をダブルクリックすると、開始フレーム・フレームカウントをドラッグ&
ドロップで操作できるようになります。マウスか数値入力、お好みの方法を使ってください。
Step5:
最初の画像をフェードアウトさせる
driver.jpg のタイムライン上の31フレームをクリックし、コンテキストメニューから[キーフレーム追加]を選択します。
続いて、キーフレーム編集枠で[トゥイーン]にチェックします。
同じく、40フレームにキーフレーム追加し、キーフレーム編集枠で[不透明度]を0%に設定します。
さあ、F5キーを押して、プレビューを見てください。フェードアウトするアニメーションが見れたと思います。
(F7キーでブラウザを使ったプレビューも可能です)
ここでタイムラインを見てみると、31?40フレームがピンク色になっています。31フレームで[トゥイーン]にチェックしたことで、
31フレームの不透明度100%から、40フレームの不透明度0%まで徐々に変化するアニメーションを自動的に作ってくれます。
Step6:
2番目の画像を表示させる
Step4の要領で、今度は hasami.jpg を表示させてましょう。
ここで注意することは3つ。
hasami.jpg は レイヤーリストで driver.jpg の真下に追加する。
開始フレームは driver.jpg のフェードアウトと重なるように、31にする。
フレームカウントは 40 にする。(30ではない)
こうすることで、ドライバーからハサミへ、徐々に変化するアニメーションができます。
Step7:
2番目の画像をフェードアウトさせる
もうおわかりかとおもいますが、Step5 にしたがって hasami.jpg にもフェードアウトする部分を作ってください。
この時点で、レイヤーリストとタイムラインは以下のようになっているはずです。
Step8:
3番目の画像を追加する
同様に、hasami.jpg の真下に megane.jpg を追加し、表示時間調整・フェードアウトをします。
そして、ここがちょっとしたポイントですが、今回のアニメーションはループしたいので、megane.jpg の真下にもう一度
driver.jpg を10フレーム(1秒)分追加しておきます。こうすることで、
最初の画像へ滑らかに変化するアニメーションができます。
終了付近のタイムラインは以下のようになっています。
Step9: 完成 .swf
ファイルへ書き出す
メインメニュー[ファイル][SWFファイル生成]で .swf ファイルに書き出すことができます。
なお、
メインメニュー[ツール][オプション][パブリッシュ設定][HTMLファイルも保存する]にチェックしておくと完成品のホームページへの組み込みが楽です。
おしまいです
いかがでしたでしょうか?単純な Flash ムービーではありますが、慣れればかなり短時間で作れてしまいます。元来、私はあまり
Flash が好きではないのですが、フェード効果がありながらファイルサイズわずか 15KB というのは、
シンプルなバナーとして魅力的かもしれない、と思うようになりました。
最後になりましたが、良いソフトを無料で提供してくださっている作者様に感謝します。