フラッシュのスライドショーの簡単な作り方

GIFアニメの作り方と素材庫

 フラッシュには、Flashムービー(swf)とFlash Video (flv)の2種類の形式があります。

 ブログに貼り付けることを考えると、プレーヤーが表示されないswfの方が個人的には好きです。

 ここでは、すべてフリーソフトでフラッシュ(swf)のスライドショーを簡単に作る方法を3つご紹介します。全くの初心者でもすぐにフラッシュが作れるように解説しています。最後の方法は音を入れることができます。

『Flashを使ったスライドショーの作り方』

 以下、具体的な手順を説明します。

方法1.MotionSWF(フリーソフト)で作る

 『MotionSWF』は画像ファイル(tga,bmp,jpg)及び動画ファイル(avi,mpeg)から自動的でフラッシュに変換するフリーソフトです。大変シンプルなソフトで、複数の画像を単純にフラッシュ形式に変換したい場合に便利です。

 使い方は、下の過去記事に書いています。後で見たらこのソフトのヘルプに詳しく書いてあるので、そちらもご覧ください。
 注意する点は、① 画像はあらかじめ連番にしておくこと、② フォルダを作成し、その中に連番化したファイルを入れ、③「フォルダ」をソフトのウインドウにドロップということだけです。ファイルではなく「フォルダ」です。お間違いなく。 このソフトは、Gif形式は対応していないので、Seezなどのフリーソフトを使ってGifをjpgに一括変換しておきます。

方法2.Effect generatorで作る

 『Effect generator』はフリーのフラッシュスライドショー・ジェネレータで、サイト上に写真をアップロードして、フラッシュを作成してくれるサービスです。非常に多機能です。画像を触ったとき、波打つような効果(mouse ripple)も加えることができます。(このサービスは2011年頃に終了しており、現在は使えません。)

 ただし、このサイトで生成したフラッシュはダウンロードできません。どうやっても無理です(私にはできません)。ソースが公開され、だれでもソースにアクセスできます。

方法3.Paraflaで作る

 Paraflaは、本格的フラッシュを作成できるフリーソフトです。

 ここでは、音楽入りのスライドショーを作る方法をご紹介します。簡単に作れます。必要なフリーソフトがそろっていれば、フラッシュ作成のための作業時間は10分くらいです。

準備

1.ネットで探して、Paraflaをダウンロードします。
2.使用する画像のサイズをそろえます。「縮小専用。」などのフリーソフトで一括して、画像サイズをそろえ、かつ、画像サイズの小さくします。方法は過去記事もご覧ください。
 ① 「irfan View」などの画像処理ソフトで画像を開き、その画像の現在のサイズを調べます(以下、irfan Viewで説明)。
  ツールバーの「画像」>「リサイズ/リサンプル」をクリック。
 ② 「リサイズ/リサンプル設定」画面で、「アスペクト比を保存」にチェックを入れ、UPしたいフラッシュの横幅を入力(たとえば、本館では、570pxを使っています)。すると、縦サイズの値が表示されます(428px)。この値をメモしておきます。
 ③ 枚数が少ない場合は、irfan Viewで、1枚ずつサイズ変更しますが、枚数が多い場合には、「縮小専用。」で一括変換します。この場合、「縮小専用。」を起動し、メモした縦横のサイズを入力し、変換したいファイルをドロップします。
 これをやらないと巨大なswfファイルになってしまいます。
 gif形式は使用できないので、Seezなどでjpg形式に一括変換しておきます。

フラッシュの作成

1.Paraflaを起動し、画像ファイルを、ウインドウの左側にある「素材ファイルをここにドロップ」というところにドロップします。
(注:スクリプトは使わないので、たびたび開くスクリプトエディタのウインドウはその都度閉じてください)



2.メニューバーの「ファイル」>「プロジェクトのプロパティ」と進み、基本設定欄で、先ほどの画像ファイルの縦横のサイズを入力します。これがフラッシュのサイズになります。

3.ドロップした画像をすべて選択(上の手順に従えば、すでに選択状態になっている)し、右クリックし、「イベントに追加」をクリック。画像が右側のウインドウ(イベントリストといいます)に追加されます。

4.メニューバーの「ファイル」>「swfファイル生成」で保存すれば、swfフラッシュが完成です。作業時間1分です。

時間の調整

 上で保存したフラッシュは動きが早く、とても使えません。そこで動きを遅くします。
1.イベントリストの画像ファイルをすべて選択状態にします。(CTRL+A)

2.その状態で右クリックし、「プロパティ」を開きます。→「イベントのプロパティ」ウインドウが開きます。

3.「イベントのプロパティ」ウインドウの「フレームカウント」欄に、たとえば「60」という数値を入力し、「適用」をクリック。これで、すべてのフレームが60/100sのスピードにセットされます。

4. メニューバーの「プレビュー」>「プレビューウインドウ」で、スライドショーの状態を確認します。もっとゆっくりしたスライドショウにしたいときは、上の操作を繰り返し、もっと大きな数値を入力します。

効果

 効果は、いろいろ種類があるのですが、あまり効果を使いすぎるとうっとおしいスライドショーになるので、ここでは、ズームと移動だけご紹介します。ここでの効果は、「イベントのプロパティ」で設定します。効果は1枚ずつでも、一括して入れることもできます。一括の場合は、上の手順で「イベントのプロパティ」を開きます。ここでは、1枚ずつ効果を入れる方法でご説明します。

A.移動

1.基本画面右の「イベントリスト」の中から、効果を設定するフレームを選択し、「右クリック」>「プロパティ」で「イベントのプロパティ」を開きます。

2.「イベントのプロパティ」画面で、「画面位置」が初期画面、「移動先」が移動後の位置を示します。表示されている画像をドローして、位置を決めます。

3.「イベントプレビュー」ボタンを押して、プレビューし、位置を調整します。

B.ズームイン、ズームアウト

 「イベントのプロパティ」画面の「画面位置」および「移動先」の「サイズ」で設定します。「画面位置」のサイズ欄にマイナスを付けた数値を入力すると、元サイズより小さいサイズでスタートし、「移動先」のサイズで終了します。この数値の大小でズームイン、ズームアウトを調整します。

C.スタートボタン

 初期設定では、自動スタートになっています。勝手にスタートするフラッシュは、見る人にとってあまり気持ちの良いものではないので、見たい人だけが見られるように、スタートボタンを設定します。今回は、ボタン画像を用いず、画像をクリックするとスタートする方法で説明します。

1.イベントリストのフレームの中で、1番目のフレームを選択し、右クリック>コピー>貼り付けで、1番目のフレームのコピーを作ります。イベントリストのフレームの中で、1番目のフレームを選択し右クリック>プロパティ で「イベントのプロパティ」を開き、フレームカウントを1にします。
フラッシュを開いたとき、このフレームが最初に停止状態で表示されます。

2.イベントリストのフレームの中で、2番目のフレームを選択し、右クリック>アクションを挿入と進みます。→「イベントのプロパティ」画面が開きます。

3.「イベントのプロパティ」画面のアクションの設定メニューの中から、停止を選びます。これで、最初の画面を表示した状態でフラッシュは停止します。

4.次に、2.および3.と同じ操作を繰り返し、今度は、再生を選びます。

5.最初のフレームを選択し右クリック、プロパティで、「イベントのプロパティ」を開きます。

6.「ボタンにする」にチェックを入れ、アクションの設定で「再生」を選択。その右にあるボタンの画像IDで「ボタンを押下」にチェックを入れ、ファイルID欄に2番目のフレームのID番号(0001などの番号。ただし0は不要)を入れます(上記の操作の場合は1番目の番号と同じになります)。

D.音楽を入れる

1.操作は上で説明した方法と同じです。音楽ファイル(MP3かWAV)をドロップ、イベントに追加、サウンドイベントで「再生」、最終フレームにアクションを追加し「音楽同期を中止」を入れ、音楽を停止させます。


以上で、簡単に音入りフラッシュのスライドショーが作れます。要する時間は10分くらいだと思います。
 今回の素材は、本館でアップしている「Dancing beauty」のフラッシュ作成で用いたものです。是非、本館のフラッシュをご覧ください。手抜きですが。本館の右サイドバーの特選過去記事「スクレの美女たち」から入れます。
 本館のフラッシュで今回説明していないのは、画像を回転させたり、文字を入れたりしている部分ですが、使っていれば、段々と分かってくると思います。

さらなる効果

 Paraflaは、もっと多くのことができるのですが、通常のスライドショーではこれで十分ではないでしょうか。テーマにもよりますが、シンプルな方が好きです。効果てんこ盛りのフラッシュは、見ていて疲れます。
 さらなる効果を加える方法を知るのには、説明を読むのでなく、実際にどのように設定しているのかを見る方が、早く覚えます。
 上の基本的な操作手順を覚えたら、[parafla]フォルダの中の[sample]フォルダに10のサンプルが入っているので、これを開いて、さらなる効果と設定の方法を確認する方法をお勧めします。
 作ったswfをブログに貼るタグは過去記事をご覧ください。
HPに貼る場合には、事前に、ツールバーの詳細設定で、『swf生成時にHTMLも保存する』にチェックを入れておけば、HTMLを一緒に作成してくれるので便利です。