スポンサーサイト

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FLASH作成講座

2010年03月23日 00:00

ちょっと前にあるフレに尋ねられて作った記事です。
その内、細かい部分を手直しして一般公開しようと思って放っておいたんですが、
結局、大した修正もないまま公開することに・・・。
分かり易く書いたつもりだったけど、分かり難かったらすみません。 (ノ∀`)



フラッシュ作成講座です。
作成方法は完全オリジナルなので、精度についてはあんまり信用しないように・・・。

~フラッシュの利点~
ここで作成するフラッシュは主に動画のような扱いですが、
ブログ等に載せる際の利点として、割ときれいな画質を保ったまま小さいサイズ容量で作成できます。

~使用するもの~
フラッシュを作成するためのツールとして以下のものを用意して下さい。

「Wink」
2010-01-10_09-35-48.jpg
指定部分を画像形式で連続キャプチャーするためのソフトです。

「SSさん」
2010-01-10_09-38-23.jpg
特定キーを押すことで指定フォルダに選択したウィンドウの画像をキャプチャーして保存するソフトです。

「PhotoShifter」
2010-01-10_09-35-35.jpg
画像のトリミング・サイズ変換・ファイル形式変換などを一括して行うことができるソフトです。

「LeeYes」
2010-01-10_09-36-20.jpg
画像ビューワです。
ウチは画像ビューワは別のものを使用しているのですが、
いつの間にか公開停止になっていたのでフリーだけど性能優秀なこちらを紹介しておきます。
動かすのに別途ファイルが必要だった気がするので、うまく動かない場合は検索でもして調べて導入して下さい。

「ParaFla」
2010-01-10_09-38-36.jpg
フラッシュ作成のためのソフトです。
文字化けする場合はランタイムが必要だと思うので別途用意して導入して下さい。

「ペイント」
2010-01-10_09-43-04.jpg
画像編集ソフトです。
OSがWindowsなら大抵の方は標準で入っていると思います。
今回のフラッシュ作成では基本的にサイズの確認とトリミング(指定部分の切り出し)しか行いませんので、
無い場合は別のソフトでもかまいません。

「PictBear」
2010-01-10_09-40-57.jpg
同じく画像編集ソフトです。
今回の講座では必要ありませんが、応用的なものを作るのには便利かもしれないので紹介しておきます。
フリーの画像編集ソフトでは一番優秀なんじゃないかとも思います。


~作成原理~
動きのある映像を画像形式で連続キャプチャーしてパラパラマンガ形式にし、
それをフラッシュ化して連続で表示させることで映像のようにします。
簡単な手順としては以下の通りです。

①映像を画像形式でキャプチャー
  マビ内の動画でもできますが、今回はキャラクターシミュレーターを用いています。
  シミュレーターで作成した動くキャラクターを「Wink」を用いて画像形式で連続キャプチャーします。
②1ループ分を抽出
  キャラクターシミュレーターの動きはある一動作をループさせているので、
  キャプチャーした連続画像から、その1ループ分の動きだけを抽出します。
③画像編集
  「SSさん」、「ペイント」、「PhotoShifter」などを用いて、トリミング・サイズ変更・画像形式変更などを行います。
④ループ確認
  画像ビューワ「LeeYes」を用いて動きがきれいにループ出来ているか最終確認します。
⑤フラッシュ化
  「ParaFla」を用いて画像をフラッシュ化します。


~作成方法~
それでは具体的な作成方法を紹介します。
難しそうに見えるかもしれませんが、原理的にはものすごく簡単なので、
2~3つフラッシュを作ってみれば、もうここを見なくてもできるようになると思います。

まずはキャラクターシミュレーターを開きましょう。
「くくらぼ」様の「Mabinogi Character Simulator 2」が便利です。
ここで自分の好みのキャラクターを作成して下さい。
2010-01-10_09-47-29.jpg

今回は背景色を白色(ffffff)にしていますが、この部分はブログ等の背景に合わせるのがいいと思います。
背景が一様な色合いなら楽ですが、細かい模様がたくさんある場合はちょっと難しいです。
出来ないことはありませんが、労力的には膨大なのでここでは省きます。
背景色の細かい色合いはブログのテンプレートのソース等を見ればわかると思いますが、
よく分からない場合は「PictBear」を用いて下さい。


一応、「PictBear」を用いた背景色の調べ方も載せておきます。
まずブログのフラッシュを貼り付けたい部分のあたりをBMP形式で保存します。
2010-01-10_11-16-10.jpg

「SSさん」で保存する場合はBMP形式で保存してそれを「PictBear」で開きます。
キーボードの「Print Screen」キー(キーボード上の表示ではおそらく「Prt Sc」)を使用する場合は、
キーを押した後、「PictBear」を開いて「貼り付け」を行います。

指定部分の色合いを調べるには、左側にあるメニューから「色の取得」を選択します。
2010-01-10_11-25-55.jpg

ここでは仮に中央に写っている人の服の色を調べてみます。
「色の取得」を選択して調べたい部分をクリックすると、右側にあるパレットに色の情報が出ます。
2010-01-10_11-30-43.jpg

この情報をシミュレーターの「カラーパレッド」の「RGB」の部分に入力すると目的の色が得られます。
2010-01-10_11-35-53.jpg

ただし、フラッシュ作成の過程で画像形式を「BMP」から「JPEG」に変換するため、
色合いが劣化してフラッシュの背景色とブログの背景色が一致しない場合があります。
その場合は、大人しくあきらめるか外枠をつけるなどの別の方法を用いましょう。


話が少しそれましたが、作成のお話の続きに戻ります。
キャラクターを作成し終えたら「モーション」で好きな動きを選びます。
2010-01-10_11-42-04.jpg

キャラクターのモーションを選択し、フラッシュ化したい動きが決まったらキャプチャーを行います。
ここでのキャプチャーは「Wink」を用います。

「ファイル」→「新規」を選ぶと以下のような画面になると思います。
2010-01-10_11-49-32.jpg
左側にある緑色の枠がキャプチャーする領域を選択する部分です。
「新規プロジェクト作成ガイド」の「領域」の部分がこの枠の大きさを調整する部分にあたりますが、
初回の設定では「スクリーン」になっていると思いますので、「~矩形」を選択して下さい。
これで緑色の枠部分を動かすことでキャプチャー領域を自由に選択することができると思います。
また「タイマーによるキャプチャーレート」の部分は「100(フレーム/秒)」に設定しておいて下さい。
細かい話はよくわかりませんが、とりあえずウチはこの数値で普段作っています。
この数値を大きくするほどフラッシュの動きが滑らかになると思いますが、サイズ容量は大きくなります。

「新規プロジェクト作成ガイド」を開いたまま、
「キャラクターシミュレーター」を最前面にして緑色の枠を動かし、キャプチャー領域を決定して下さい。
2010-01-10_11-49-33.jpg

「キャラクターシミュレーター」が最前面に出ていないと、キャラクターが動かないので注意して下さい。
また緑色の枠がキャプチャーする領域は一番内側の線までですので注意して下さい。
緑色の枠を動かすと「新規プロジェクト作成ガイド」の領域部分の数値が適宜変化しますが、
ここは後々のために縦と横のサイズがそれぞれ4の倍数になるようにするのがいいと思います。
このサイズの数値は縦・横ともにメモしておきましょう。

キャプチャーする領域が確定したら「新規プロジェクト作成ガイド」の「OK」を選択します。
「新規プロジェクト作成ガイド」の2つ目のステップになりますので、「最小化してトレイに格納」を選択します。
これで画面右下のタスクトレイに「Wink」が格納されます。
2010-01-10_12-17-20.jpg

ここでキャプチャーする時間ですが、最低でもキャラクターの一動作分をキャプチャーする必要があります。
例えば以下のフラッシュはフルートの演奏の動きを表わしたものです。


キャラクターの動きが一番左端に寄った時を開始点と考えると、
2010-01-10_10-02-12.jpg

右端まで行って折り返し、
2010-01-10_10-02-32(001).jpg

再度、左端まで戻ってくることで1ループ分です。
2010-01-10_10-02-50.jpg

最低でもこの1ループ分を包括するようにキャプチャーしましょう。

「Wink」がタスクトレイに格納されている状態で「Shiftキー+Pauseキー」を押すとキャプチャーが開始します。
再度、「Shiftキー+Pauseキー」を押すとキャプチャーが終了します。
キャプチャー中はタスクトレイの「Wink」アイコンの表示が変化するので分かると思います。
キャプチャーする前に「シミュレーター」のキャラクターがきちんと動いていることは確認しましょう。
動いていない場合は「シミュレーター」が最前面に出ていません。

キャプチャーを終了したらタスクトレイの「Wink」のアイコンを右クリックして「キャプチャー完了」を選択します。
2010-01-10_11-42-05.jpg

キャプチャーを完了すると「Wink」は以下のような画面になります。
2010-01-10_12-41-09.jpg
画面下にならんでいる画像を選択すれば上の大きな部分でその画像が表示されます。
矢印キーの「→」キーや「←」キーを押しっぱなしにすることでパラパラマンガのように画像が動いているように見えます。
これを見ながら1ループ分の画像だけを残して、他の画像は削除しましょう。
この1ループ分抽出の部分が一番重要で難しいかもしれません。
キャラクターの微細な動きの変化を見ながら根気よく頑張りましょう。

今回キャプチャーした画像は全部で120枚(画面上の部分にも1/120となっています)ですが、
この内、1ループ分が8番目から72番目であったとします。
なので73番目以降と1~7番目の画像を削除します。
2010-01-10_12-41-10.jpg
画像を削除する際、番号が小さい画像を削除するとそれ以降の画像の番号が削除した枚数分ずれるので、
混乱を防ぐためにも後ろの方から削除していきましょう。
削除が完了したら、残った画像の枚数を確認しておきましょう。
今回は65枚です。

次にこの残った画像を「SSさん」で一枚ずつキャプチャーしていきます。
「Wink」自体で保存できるのかもしれませんが、よくわからないので今回はこの方法です。
「SSさん」を起動すると以下のような画像になります。
2010-01-10_12-58-14.jpg
「SS画質」は「BMP」を選択して下さい。

「設定」で以下のような画面になります。
各項目は画像のようにして下さい。
「SS保存フォルダ」は自分でわかりやすい場所に設定しておいて下さい。
2010-01-10_12-41-12.jpg
この設定で「Pause」キーを押すとSS音がなり、最前面ウィンドウのキャプチャー画像が保存フォルダ保存されます。

「Wink」の残した画像を1番目から順番に「SSさん」でキャプチャーしていきます。
面倒な作業に見えるかもしれませんが、「→」キーと「Pause」キーを交互に押して行くだけで終わります。

全てキャプチャーし終わると、保存フォルダにそれらが保存されているはずです。
2010-01-10_13-05-58.jpg
これらのファイル数と先ほど調べた残した画像の枚数が一致しているか確認しましょう。
一致していなければキャプチャーし忘れがあったり、重複キャプチャーになっていたりします。

最終的に「LeeYes」等の画像ビューワで画像の通し番号が全て順番通りに一枚ずつ並んでいるか確認しましょう。
通し番号は画像上部の「1/65」などの表示で確認できます。
2010-01-10_13-55.jpg

また、ここでも画像の選択部分で矢印キーを押しっぱなしにすることで、
抽出した画像がきれいにループしているかどうかが確認できます。

きちんとループしていない場合は「Wink」の「元に戻す」などを活用して、
再度、抽出する画像を選びなおしましょう。
2010-01-10_13-50.jpg

きちんとループしていることを確認したら次は画像のトリミング(指定部分の切り出し)です。
キャプチャーした画像の内、必要な部分はキャラクターとその周りの背景部分のみなので、そこだけをトリミングします。
適当な一枚を選択して「ペイント」で開きましょう。

抽出する部分を選択します。
選択する際、画面左下に選択開始点(選択部分左上:ここでの数値は(145,92))と
選択サイズ(ここでは180x360)が表示されます。
選択開始点の数値はトリミングがきちんとできた場合は必要になりますのでメモしておきましょう。
選択サイズは「Wink」で決定した領域サイズとぴったり同じになるようにしましょう。

トリミングがきれいにできていればキャラクターの周りは背景色のみのはずです。
2010-01-10_13-38-39.jpg

逆に選択領域が若干ずれていると黒い部分が残ってしまいます。
2010-01-10_13-38-40.jpg

また元の画像の全体の大きさもファルダから確認してメモしておきましょう。
2010-01-10_13-55-30.jpg
ここでは「746x679」です。

なお、この「ペイント」での作業はあくまでサイズ確認だけなので、
うっかり上書き保存したりしないようにしましょう。

次にこのサイズ情報を基に全ての画像を一括でトリミングします。
一括編集には「PhotoShifter」を使用します。

キャプチャーした画像をすべて選択して「PhotoShifter」の左部分の領域にドラッグ&ドロップします。
2010-01-10_13-55-28.jpg

「環境変換」を選択します。
2010-01-10_13-55-29.jpg

「トリミング」のタブで「トリミングを有効にする」にチェックを入れて、トリミングする領域を指定します。
2010-01-10_14-04-03.jpg
ここで使用する数値は
 ①「ペイント」で確認した抽出する範囲の選択開始点(今回は(145,92))
 ②ペイント」で確認した抽出する範囲(「Wink」のキャプチャー領域:今回は「180x360」)
 ③画像の大きさ(今回は「746x679」)
の3つです。

トリミングの選択領域の「左」と「上」にはそれぞれ①の数値を入力します。
「右」には①と②の左側の数値の和を③の左側の数値から引いた数値を入力します。
今回は746-(145+180)=421の数値です。
「下」には①と②の右側の数値の和を③の右側の数値から引いた数値を入力します。
今回は679-(92+360)=227の数値です。

まぁ、簡単な数学のお話ですね。
2010-01-10_13-06-42.jpg

「BMPに変換」を選択し、
2010-01-10_14-13-21.jpg

「すべて変換して保存」を選択。
2010-01-10_14-25-16.jpg

保存先フォルダを指定すると、そこにトリミングされた画像が全て保存されます。
2010-01-10_13-06-43.jpg

このままではフラッシュにしたときにサイズ容量がブログのアップロード制限をオーバーしますので、
さらに縮小した上でJPEG形式に変換することでサイズを小さくします。

「PhotoShfter」の左側の画像を全て選択解除します。
2010-01-10_14-30-31.jpg

先ほど一括トリミングした画像を全て「PhotoShifter」の左側にドラッグ&ドロップして、「JPEGに変換」を選択します。
2010-01-10_14-33-46.jpg

「環境変換」を選択し、「トリミングを有効にする」のチェックをはずします。
2010-01-10_14-35-50.jpg

「リサイズ」のタブで、「リサイズを有効にする」にチェックを入れて、
「幅」の項目で「ピクセル」表記から「%」表記に変更し、数値入力欄に「75」と入力します。
「高さ」の項目の「縦横比維持」にもチェックを入れて追いましょう。
これで縦・横ともに75%に一括リサイズすることができます。
2010-01-10_14-36-02.jpg

先ほどと同様に「すべて変換して保存」を選択します。
ただし、保存先のフォルダは分けておきましょう。

これでフラッシュ化手前までのトリミング・リサイズ・形式変換の済んだ連続キャプチャー画像を入手できました。
念のために「LeeYes」等の画像ビューワできちんとループしているかなどを再度確認しておきましょう。
2010-01-10_14-43-19.jpg

最後に「Parafla」でフラッシュ化を行います。
「ParaFla」の左下の「ここに素材をドロップ」の部分に、
変換を全て済ませた画像をドラッグ&ドロップしましょう。
2010-01-10_14-48-16.jpg

全て選択した状態で右クリックして「イベントに追加」を選択します。
2010-01-10_14-51-16.jpg

「ファイル」→「プロジェクトのプロパティ」を選択します。
2010-01-10_14-53-30.jpg
基本設定の「幅」と「高さ」の部分はリサイズを済ませた時点での最終的なファイルの大きさを入力します。
「FPS」は画像を連続で表示するスピードのようなものですが、
「20」くらいが一番シミュレーターのスピードに近いと思います。
「詳細設定」の「SWFファイルを圧縮する」にチェックをいれると、
もう少しファイル容量が小さくなりますが、画質が多少落ちます。

また「ファイル」→「詳細設定」を選択して下さい。
2010-01-10_14-58-42.jpg
「SWF生成時、HTMLも保存する」にチェックを入れて下さい。
フラッシュを閲覧する際に便利です。

「ファイル」→「SWFファイル生成」を選択し、保存先とファイル名を指定するとフラッシュが作成できます。
2010-01-10_15-00-54.jpg

保存先を見ればフラッシュ本体(SWFファイル)と
サイズ情報などが記載された閲覧に便利なHTMLのファイルの2種類が保存されていると思います。

HTMLの方をブラウザなどで開くと作成したフラッシュが確認できます。
2010-01-10_15-06-41.jpg

ブログのアップローダーにフラッシュ本体(SWFファイル)の方をアップロードすれば、
ブログにフラッシュを載せることができます。
2010-01-10_15-09-45.jpg

2010-01-10_15-10-08.jpg

フラッシュを表示するタグは以下の通りです。
<embed width="" height="高さ" src="ファイルのアドレス"></embed>

フラッシュのサイズ情報はフラッシュ作成時に一緒に生成されたHTMLファイルをメモ帳などで開くと確認できます。
2010-01-10_15-17-45.jpg

今回作成したフラッシュはこんな感じです。


どうもお疲れさまでした。
マビに関連した全てのブログ・サイト運営者様に幸あれ。 ( ´∀`)


コメント

  1. ネヴィ | URL | -

    Re: FLASH作成講座

    UPありがとうございます!!!
    いやはや、勇気を出して言ってみてよかったです( ゚ω゚;)

    し、しかし只今PhotoShifterのDLで停滞中デス。。
    LhasaとゆうものもDLしてみたのですが・゚・(゚うェ´゚)・゚・

    明日起きたら再チャレンジしてみたいと思います♪

    ( *・ω・)*_ _))ペコリン

  2. | |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

  3. ヴラヴァツキ | URL | -

    Re: Re: FLASH作成講座

    > ネヴィさん
    ソフトの解凍で手間取ってるのかな。
    ウチは解凍ソフトは「WinRAR」や「Lhaplus」とかいうのを使ってます。
    もしよかったら参考にして下さい。

    > 匿名さん
    お役に立てたのなら何よりです。
    不都合とかは特にありませんので遠慮なくどうぞ。

コメントの投稿

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://vlavatsky.blog81.fc2.com/tb.php/477-627b21e8
この記事へのトラックバック


最新記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。