フリーの Flash 作成ソフト 『Suzuka』 を使って簡単なスライドショーを作ってみました。その過程をチュートリアルとして残したいと思います。
完成品:
3枚の画像を使い、3秒表示 > 1秒かけて次の画像へフェード > 3秒表示・・・とループするムービーです。
では、チュートリアルを開始しましょう。
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 というのは、 シンプルなバナーとして魅力的かもしれない、と思うようになりました。
最後になりましたが、良いソフトを無料で提供してくださっている作者様に感謝します。
と、いってもイトーヨカードー食品売り場で買った(330ml \227)やつなんですが。
