無料で楽しむWeb動画制作 | かたつむりファーム管理人室

先日、いつも、いろいろな意味でお世話になっています
てざん店長さん、かめころさんの画像の使用許可をいただきまして、
Web動画を制作してみました。

最終的には、YouTubeに登録して、限定公開としたのですが、

この動画を、どのように制作したのか、自分のメモ代わりに、
ここに書き留めておこうと思っています。

以前、このブログでも、
「GIMP2」「FireAlpaca」といった無料で楽しめるお絵描きツールを
紹介しましたが、私自身が愛用しているのは、
「SAI」というお絵描きソフトです。

手ぶれ補正機能がついた、この「SAI」という比較的安価なソフトを使用しているので、
完全無料で制作したとは、言えないのですが、でも、動画を作成するために
無料のお絵描きソフトを使用すれば・・・という若干のこじつけの元で、
「無料で楽しむWeb動画」として制作の過程を記事にしてみます。


【制作に使用するソフト一覧】
1.Parafla(フラッシュ動画制作ツール)
  以前、FF11の動画を制作する際に、使用したツールですが、
  使い勝手が良い事、そして、なによりも無料で使用できるという点で、
  愛用しています。

2.FireAlpaca (ペイントツール)
  動画の素材となる画像データを制作します。
  「GIMP2」なども、無料で使用できる高機能ペイントツールです。

3.Freemake Video Converter(画像データ変換ソフト)
  スパイウェアを潜在しているダウンロード版も存在するようですが、
  使い勝手は、悪くないです。
  主に、MP4フォーマットのビデオデータをFLV形式に変換する際に
  使用します。

4.Freemake Audio Converter(音楽データ変換ソフト)
  画面操作は、上述の「Freemake Video Converter」と同様です。
  ということで、使い勝手は、悪くないです。
  充分、注意して使用しましょう。

5.Swivel(SWF形式データをMP4形式に変換するソフト)
  「Parafla」というソフトは、SWFという形式のフラッシュ動画を
  制作することができるソフトですが、SWF形式のままでは、
  「YouTube」には、登録できません。
  MP4形式などに変換した後で、YouTubeにアップロードします。


 本当は、1本の市販ソフトで、制作すれば、こんなにソフトを準備する
必要はないのですが、ここは、無料にこだわりたいと思います。

 

【「ParaFla」について】
 「Parafla」というソフトで使用できるデータの形式は、限られています。
 使用できる画像形式は、GIF、JPEG、PNG、といった代表的な形式は
 使用可能ですが、
 ビデオデータは、「FLV」形式しか使用できません。
 そして、音声データも「WAV」と「MP3」形式データを使用することに
 なります。

 制作するフラッシュ動画に、ビデオデータを組み込む場合は、
 組み込むビデオデータが、FLV形式ならば、そのまま使用できます。
 MP4形式ならば、「Freemake Video Converter」などを使用してFLV形式に変換します。

 ビデオ映像を使用せずに、音声データだけを動画に組み込む場合は、
 「Freemake Audio Converter」などを使用します。

  このソフトで、映像付きのビデオデータから、音声のみのデータに
  変換することができます。
  「MP3」または、「WAV」にします。


準備は、これで完了です。


変換ソフトを使用して、揃えた素材データが、次のようになります。

・FLV形式ビデオデータ・・・・1個
・WAV形式・MP3形式音声データ ・・・・今回は使用せず。
・Jepg画像データ・・・背景・枠内の固定画像などに使用
・PNG画像データ・・・動画として使用
・GIF画像データ・・・・・今回は使用せず


【補足説明:あくまでも、参考程度の補足なので、読み飛ばしてかまいません】
 JPEGと、PNGデータの大きな違いは、
 透明部分をつくることができるか、できないかというところです。
 透明部分を使用できる形式に、GIF形式がありますが、このGIF形式は
 色数が、256色に限定されます。
 PNG形式は、色数が限定されません。

 もう一つ付け加えると、GIF形式は、使用権利があるため、保存する機能を
ソフトに持たせるには、使用料を、ペイントツールの開発者が負担しなければ
ならないらしいのです。

「FireAplica」「SAI」は、インストールの際、保存形式で、「GIF形式」を
選択できません。その理由は、このあたりにあると思います。

「GIMP2」は、保存形式は、たくさん用意してあって、もちろん、「GIF形式」での保存が
できます。


 前置きが、長くなりましたが、ここから作り始めます。

 

【STEP 1】 テンプレート(基本設定)を開きます。
 私の場合、基本的に、次の3つの構成で、作り始めます。

 1.メインフレーム(動画・音声を実行)
 2.サブフレーム1(文字データを展開・実行)
 3.サブフレーム2(画像データを展開・実行)

【1.メインフレームの説明】
 ① 画像・・・基本となる背景画像
 ② アクション・・・・何もしない
 ③ スプライト・・・・「上述のサブフレーム1:文字データ」
 ④ スプライト・・・・「上述のサブフレーム2:画像データ」
 ⑤ ビデオ・・・・・・「ビデオデータ」・・・1077カウントまで実行
 ⑥ アクション・・・・停止

 ③の文字データ画面と、④の画像データ画面のカウントを「1」として、
 ビデオデータも次のステップで実行することで、
 あたかも、3画面を同時に、進行させているように見せる事ができます。

 「深度」というのは、画面を重ねる深度となり、画像ソフトで言うところの
 レイアーにあたります。

 「深度」として、0、5、100を使用しているので、
 ④のスプライトが、深度0番なので、一番奥になります。
 ③のスプライトが、深度5番なので、その手前になります。
 ⑤のビデオが、深度100番なので、③のさらに、手前になります。

 つまり、固定画像ページを奥に配置して、
 文字データをその前面に展開し、
 その、さらに前面に、ビデオ映像を固定で最前面に配置したわけです。
 (ビデオ映像の代わりに、音声データにする場合は、
  画像がないので、深度は、特に気にしなくても平気です)


【STEP 2】 背景動画を制作します。
  スプライト1を編集します。
  左サイドに、画像・映像データをセットします。
 

ID0001 ビデオ・・・amekiss.flv   ・・・映像データです。
ID0002 テキスト・・[雨にキッスの花束を!] ・・・文字データです。
ID0005 画像・・・・haruko001.png ・・・透明化した画像データです。

ID0007 スプライト(1)・・・今、編集している画像用サブフレームです。

ID0009~ID0027まで・・・JPEG形式の画像データです(透明化されていません)。

ID0028 スプライト(2)・・・後ほど編集する文字用サブフレームです。

 

 

【ソフトウェア画面説明】
「フレーム」・・・タイムチャートに該当します。
「カウント」・・・画像パーツを表示する時間を指定します。
「種別」・・・・・「画像:画像パーツです」「アクション:停止、消去などの制御用です」


 ここから、絵コンテ(あればですが)に従って、画像を順番に並べていきます。
 左に配置した画像パーツを選択して、イベント追加することで、
 右側のタイムラインに、追加していくことができます。

 画像を左右上下に移動させるアクションを構成しながら、
 「プレビュー」-「選択イベントのみ」で、動画の動きを確認しながら、
 タイムチャート(フレーム)を埋めていきます。


【主な画像の動かし方】

 画像を、左から右へ移動させるには、
 「描画位置」と、「移動先」位置を設定します。
  設定画面は、次のような画面になります。

 画像を、ズームアップさせるには、
 「描画位置」と、「移動先」位置の設定後、
 「サイズ」を変更します。


 この他、画像の動かし方は、移動、ズーム、回転、透明⇒透明解除
 など、いろいろと変化をつけることができます。




【STEP 3】 文字データ(歌詞)を制作します。
  スプライト2を編集します。
  左サイドに、文字データをセットします。
  歌のフレーズに合わせて、タイムチャートのカウントを整えていきます。

  (私の場合は、「フレーズ歌詞」・・・「何もしない」を繰り返し、
   「何もしない」の間隔:カウントを調整します)

 文字の変化も、文字エフェクトなどで、簡単に変化を付けることが
 できます。

【STEP 4】 仕上げ確認。

 全ての歌詞を配置し終わったら、完了です。

 メインフレームに戻って、3つのフレーム(メイン+サブ2つ)を合成して、最後の微調整を
 行います。

 「プレビュー」-「プレビューウインドウ」で、合成結果を確認できます。


【STEP 5】 フラッシュ動画として保存

 全ての確認が終わったら、フラッシュ動画として保存します。

「ファイル」-「SWFファイル生成」を選択します。

「ファイル」-「詳細設定」で、「SWF生成時にHTMLも保存する」にチェックを
しておくことで、SWFファイルの他、HTMLファイルも生成できるので、
ホームページへの登録が楽になります。


【STEP 6】 ホームページスペースにアップロードする。
 
 FTPソフトなどを利用して、自分で使用可能なホームページスペースに
 HTMLファイルと、SWFファイルをアップロードします。

 私は、「FFFTP」というソフトを使用します。

 アップロード後、登録した、HTMLページを開いて、動画の動作状況を見ます。
 私が、契約しているYahooホームページサポートサービスでは、英数文字で、
 ファイル名を作成したほうが、誤りは少ないです。


【STEP 7】 YouTube等に登録する。

 自分のホームページスペースに動画を登録することは自由です。
 しかし、登録した動画の素材に、他者が制作した画像や、音声データを
 許可なく使用することは、厳禁とされています。
 市販されている音楽コンテンツ・楽曲を使用する場合、それが、自分の声だけで
 制作されたものであっても、JASRAC様などとの契約をする必要があります。

 そこで、使用許可の契約をしているサイト(「YouTube」や「ニコニコ動画」)に
制作した動画を登録し直す必要があります。


 SWF形式の動画を、MP4形式にするために使用しているのが、
 「Swivel」というソフトです。

 簡単な操作で、ParaFlaで制作した「SWF形式フラッシュ動画」をMP4に変換できます。

 但し、10分を越えるような動画の場合、データ圧縮で、画質が劣化したり、
 音声が消えたりする場合があります。

 ソフトの操作で、画質を落として、MP4変換することで、だいたいの場合は対処できましたが、
パーツとして使用しているJPEGファイルや、映像データ、PNGファイルなどのサイズを小さく
まとめるなどして対処しないと、ダメなケースもあります。

 そのあたりの調整は、慣れるしかないかと思います。


アップロードまで完了したものが、以下の動画となります。
 

※ 当ブログの母体であります「かたつむりファーム」というサイトは、
  音楽の使用許諾を得ていますので、許可された使用曲数以内であれば、
  ストリーム配信での閲覧に限って、楽曲を使用することができます。

  もちろん、管理人以外の方が制作した動画を載せる事も可能です。

  その場合は、HTMLファイル内や、動画内に、広告となる映像、文字が記載されて
  いないことが条件となります。
【注意点】SWF形式で個人ページから公開する場合は、画面の拡張機能や、
音声ボリュームコントロールも、動画内にプログラムとして
設定する必要があります。
You Tube などでは、そのへんは、簡単にコントロールできてしまいますが・・・
それとは別に、SWF形式であると、スタートボタンや、リンクボタン、
画像自体を ボタンにして、リンク先に飛ばしたり、クリックで、画像を変化させたり
そういう機能を、動画に載せることが比較的容易にできるようになります。
 

当ブログの左上に、動画フラッシュ倉庫をプラグインで、設置しました。
そちらのリンクで参照できるフラッシュ動画版が、次のリンク先となっています。

「雨にキッスの花束を-フラッシュ動画版-」

誤り記述、ソフトウェアリンク先の追加など、また、余裕がある際に、
加筆修正などしていきたいと思います。
お気づきの点や質問は、ご遠慮せず、してくださってかまいません。
こんな風に、無料でも簡単に作れるんだということが、伝わればと思い、
記事にいたしました。