初心者のための動画作成講座|仕事で使える映像制作 初心者のための動画作成講座

ホーム動画の作成 > (25)フラッシュバナーの作り方(3)

フラッシュバナーの作り方(3)

メルマガ vol.25 フラッシュバナーの作り方(3)

フラッシュバナーについて

以前、フラッシュ(FLASH) バナーの作り方について書いたのですが、
その時は本家Adobeのフラッシュで作り方を書こうとしたので、
なかなか手順が煩雑になって、分かりにくかったと思います。

そこで、いろいろと探してみたところ、
なんと2006年から配布されているParaFlaというソフトがあるのに
やっと気が付きました。遅いですね。

いろんな方々がParaFlaの使い方を講義されているようですが、
ここでも遅ればせながら、フラッシュバナーに特化して、
やってみようと思います。

例えば、無印良品のサイトのトップバナーは、
大きな画像が7秒ほどで切り替わり、
それぞれのキャンペーンページへリンクできるようになっています。

こんな感じのものを作ってみましょう。

ParaFla を使ったフラッシュバナーの作り方

サンプルとして、
こんな感じのフラッシュバナーを作ってみましょう。

大きさは無印良品のものより小さいですが、
これは任意に変えられますので、ここでは気にしないでください。

1)ParaFlaをダウンロードする
  まずは、ParaFlaのサイトへ行って、
  最新版をダウンロードして下さい。

  parafla.exeをダブルクリックして、
  ParaFlaを起動させて下さい。

2)プロパティを設定する
  ファイル → プロジェクトのプロパティをクリックし、
  幅、高さ、FPS、SWFバージョン、画質をそれぞれ設定します。

paraflaを使ったフラッシュバナーの作り方の説明画像1

  FPSというのは、1秒当たりのフレーム数で、
  FPS30ということは、
  1秒間に30枚の割合で画像が変化するという意味です。
  これは、日本のテレビのFPSとほぼ同じです。

3)素材を読み込む
  「素材ファイルをここにドロップ」と書いてある部分に、
  表示させたい画像をドラッグ&ドロップして、
  読み込ませます。

  残念ながらGIFはダメみたいなので、
  JPEGまたはPNGで画像を作る必要があります。
  ここでは全てJPEGで素材を用意しました。

  上手く読み込めると、
  左上に画像のサムネイルが表示され、
  左下に画像のファイル名がリストで表示されます。

paraflaを使ったフラッシュバナーの作り方の説明画像2

4)画像を配置する
  左下の画像リストをダブルクリックすると、
  右のリストに並べられます。

paraflaを使ったフラッシュバナーの作り方の説明画像3

  3つともダブルクリックして、
  まずは、画像を並べます。

paraflaを使ったフラッシュバナーの作り方の説明画像4

  一度、ここでプレビュー → プレビューウィンドウを
  クリックしてみて下さい。

  すると、3つの画像が目まぐるしく変わっているはずです。
  これは、カウントが1、すなわち1/30秒の間隔で
  画面が切り替わっているからです。

  ※さすがに見ていて気持ち悪いので、
  ここではクリックすると止まるように仕掛けてあります。

  これではあまりにもせわしないので、
  次に、尺を調整します。

5)尺を調整する
  右側のリストの一番上の画像をダブルクリックすると、
  イベントのプロパティという画面が開きます。

  ここで、フレームカウントを90に設定します。

paraflaを使ったフラッシュバナーの作り方の説明画像10

  これを3つの画像のそれぞれに設定します。

paraflaを使ったフラッシュバナーの作り方の説明画像8

  今、1秒を30フレームと設定しているので、
  90フレームは3秒です。
  つまりこれで、3秒の間隔で切り替わるバナーができました。

6)トランジションを加える
  このままでもいいのですが、
  せっかくフラッシュで作っているので、
  それぞれの画像の前に、
  白紙からふわっと出てくるトランジションエフェクトを
  加えておきます。

  右側の画面で画像をさらに挿入したい部分を選択してから、
  左下の画面で差し入れたい画像をダブルクリックします。

  画像の並びで言うと、
  画像1、画像1、画像2、画像2、画像3、画像3
  という順に並んでいることになります。

paraflaを使ったフラッシュバナーの作り方の説明画像5b

  右側の画面で、今追加した画像をダブルクリックし、
  フレームカウント  →  15
  描画位置 不透明度 →   0%
  移動先  不透明度 → 100%
  に設定します。
  これを残りの2つの追加した画像についても設定します。

paraflaを使ったフラッシュバナーの作り方の説明画像6

  すると、こんな感じで、
  ふわっと出てくる効果がついているはずです。

  つまり、先程の設定は、
  15フレーム=0.5秒間で透明から実体になるようにする
  という指示だったわけです。

7)リンクを付ける
  このままだと、クリックしてもリンクしないので、
  バナーとしては成立していません。

  次に、リンク機能を付けます。

  右側画面内の画像をダブルクリックし、
  イベントのプロパティの画面で、
  ボタンにするにチェックを入れ、
  アクション → URLを取得
  URL → リンクしたいURLを書き入れます。

paraflaを使ったフラッシュバナーの作り方の説明画像7

  これをすべての画像について行い、
  ファイル → SWFファイルの書き出し をクリックして、
  SWFファイルを書き出せば完成です。
  クリックするとリンクするバナーになっているはずです。

  ちなみに、最終的なparaFlaの画面はこんな感じになります。

paraflaを使ったフラッシュバナーの作り方の説明画像9

少々長い工程でしたが、
覚えてしまえばそんなに難しいわけではありません。

すでにこれまで作っている静止画のバナーをお持ちの方は、
是非、フラッシュ化してみると面白いと思います。




 

このような記事をメルマガで毎週金曜日14時から配信しています。もちろん無料です。 映像作りに興味をお持ちの方は、メルマガへの登録は以下のフォームをご利用下さい。

メルマガ購読・解除
仕事で使える映像制作
読者購読規約
>> バックナンバーpowered by まぐまぐ!
 

 

カスタム検索




ニュース

お問合せ

copyright 仕事で使える映像制作 Since 2010