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

ホーム動画の作成 > 無料でFLASHバナーを作成する

無料でFLASHバナーを作成する

vol.56 無料でFLASHバナーを作成する

FLASH作成フリーソフトSuzuka

前回は、無料の画像編集ソフトGIMPを使って、
静止画バナーの作り方をご紹介しました。

今回は、この静止画バナーを、
フリー(無料)のFLASH作成ソフトであるSuzukaを使って加工し、
FLASHバナーを作ってみようと思います。

以前、ParaFlaという無料のFLASHソフトをご紹介しました。
ParaFlaとSuzukaの大きな違いは、
Suzukaの場合は、タイムラインがはっきりとしているので、
視覚的にも分かりやすく、
また、本家のAdobe FLASHの操作と似ているので、
非常に使いやすいソフトです。

また、FLASHを作る上で、
Action Script(アクションスクリプト)というコードというか、
呪文のような記述をしなければいけないのですが、
SuzukaにもParaFlaと同じように簡易モードがあるので、
すぐに使えて便利です。

こういう有益なフリーウェアを作ってくれている人たちに
本当に感謝したいものです。

静止画のバナーを動かす

FLASHバナーを作る時の段取りとして、
3段階あります。

1)静止画でバナーを作る
2)静止画を動かす
3)リンクを付ける

今回は動かすことを目的にして、
FLASH化しているので、2)は必須です。

また、クリックしたらどこかにリンクしないと、
バナーである意味がないので、3)も必須です。

前回1)についてご紹介したので、
今回は2)の段階をご紹介します。

前回作った静止画バナーがこちらです。

無料でFLASHバナーを作成する・元の静止画バナー

このバナーの、
イラスト部分と、テキスト部分を動かして、
FLASH化してみます。

では、具体的な作り方です。

1)Suzukaをダウンロードする

  Suzukaのサイトに行って、ダウンロードします。
  http://www.cty-net.ne.jp/~uzgensho/

  「SonEditXコンポーネントが別途必要です。」
  という記述がある通り、
  このソフトを入れないと行けないようなので、
  合わせてダウンロード&インストールしておきます。

2)GIMPで画像を分けて書き出す

  次に、GIMPで前回作ったバナーの
  イラスト部分とテキスト部分を分けて書き出します。

  レイヤーの「目」のアイコン部分をクリックすると、
  レイヤーが非表示にされます。

無料でFLASHバナーを作成する・イラストを書き出す

  これで、まずイラスト以外のレイヤーを
  非表示にした状態で、
  JPEG形式で書き出します。
  名前を「haitatsu_01.jpg」にしました。

  同じようにして、
  送料無料!と、キャンペーン中!!
  という文字部分もJPEG形式で書き出します。
  名前を「souryoumuryou_01.jpg」にしました。

無料でFLASHバナーを作成する・テロップを書き出す

3)Suzukaに読み込む

  Suzukaを起動し、
  ファイル→プロジェクトのプロパティをクリックします。
  プロパティが表示されるので、
  幅 234、高さ 60、FPS 30、SWF8に設定します。

無料でFLASHバナーを作成する・テロップを書き出す

  さらに、左側にあるID、種別、名称などが書いてある
  部分で右クリックし、
  アイテムを追加 → ファイルを追加をクリックします。

無料でFLASHバナーを作成する・ファイルを追加

  2)で保存した
  「haitatsu_01.jpg」「souryoumuryou_01.jpg」を読み込みます。

無料でFLASHバナーを作成する・ファイルを読み込む

4)タイムラインに配置する

  真ん中のスペースにドラッグして配置します。
  ここで、配達員のイラストを上に、
  テキストを下に配置しておきます。

無料でFLASHバナーを作成する・真ん中にドラッグ

5)イラストの背景を透けさせる

  ここまでで、
  2つのレイヤーを重ねられたわけですが、
  イラストのレイヤーが上にあるために、
  テキストのレイヤーが見えていません。

  そこで、イラストのレイヤーの白い部分を
  透けさせます。

  左側のボックスのhaitatsu_01.jpgをダブルクリックすると、
  画像のプロパティが表示されるので、
  「透過色を指定」にチェックを入れ、
  色を全て255(つまり、白)に設定します。
  また、エッジの処理を「ぼかし」にし、強度を1にしておきます。

無料でFLASHバナーを作成する・白部分を透けさせる

  これでOKを押して進むと、
  イラストの白い部分だけ透けて、
  下のレイヤーのテキストが表示されるようになります。

無料でFLASHバナーを作成する・イラストの白が透過してテキストが見える

6)トゥイーンを使って、画像を動かす

  次に、タイムラインの10フレームのところで右クリックし、
  キーフレーム追加をクリックします。

無料でFLASHバナーを作成する・キーフレームを打つ

  同様に、90フレームのところでも
  キーフレームを追加しておきます。

  1から10フレームのところをドラッグして選択し、
  右下にある「トゥイーン」にチェックを入れます。

無料でFLASHバナーを作成する・キーフレームを打つ

  すると、選択した部分が赤くなり、
  トゥイーン化されました。
  同様にして、10から90フレームの部分も、
  トゥイーン化します。

無料でFLASHバナーを作成する・トゥイーン化する

7)イラストを動かす

  イラストのタイムラインの1フレーム目をクリックします。

  その状態で、
  下の画面のイラストを画面の左外までドラッグして
  はみ出させます。

無料でFLASHバナーを作成する・位置のキーフレームを打つ

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

  画面の左端からイラストが登場して、
  右側に止まるという動きが繰り返されるようになりました。

  これは、先程キーフレームというのを
  設定したことで、時間に対する位置が指定されたので、
  イラストの位置は、

  1フレーム目 → 画面の左からはみ出した位置
  1〜10フレ → 左から右へ移動
  10〜90フレ→ 右の位置で静止

  という動きになったわけです。

8)テキストを動かす

  7)と手順は全く一緒です。
  今度は送料無料は右から左に登場するようにします。

9)SWFファイルを書き出す

  最後にファイル→SWFファイル生成をクリックすると、
  SWFファイルが書き出されて完成です。

ここまでで、静止画を動かすことが出来ましたが、
FLASHバナーとしては、リンクさせないと意味がないので、
次回はその方法をご紹介します。




 

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

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

 

カスタム検索




ニュース

お問合せ

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