2005年12月06日

Flashってフリーで作れるんですね

MacromediaのFlashってありますよね。あの動画のFlashって、てっきりMacromedia社のFlash Basic 8とか最低26,250円もするソフトじゃないと作れないと思っていました。一応、無償トライアル版が60日間使えますけど、それ以降が困りますしね。

日経ソフトウェア2006年1月号でフリーソフト徹底活用!というのがあり、そこで、Flashを作れるフリーソフト「ParaFla」が紹介されていました。

ParaFla!」

ファイルサイズは817KB(Ver0.9a9)で、インストール不要でレジストリも触らないようなので触りやすいです。VB6.0のランタイムが必要ですのでVector等で探してインストールして下さい。

ParaFlaの概要(公式より抜粋)
  • 簡単な操作でFlashムービー(swfファイル)を作成することが出来ます。
  • JPEG・BMP・PNGといったビットマップ画像が使用できます。
  • PDR(ParaDraw専用形式)によるベクタ画像が使用できます。
  • サウンドにMP3を使用することが出来ます。ストリーミング再生にも対応しています。
  • FLV形式のビデオファイルが使用できます。
  • ボタンにアクションを割り当てて、簡単にムービーをコントロールできます。
  • FLASH MX相当の本格的なアクションスクリプトも使用できます。
  • 携帯電話で動作可能なSWF4を生成することもできます。アクションスクリプトも使用できます。
  • フリーソフトウェアです。

    また、それに使えるベクター形式画像を編集するソフトParaDrawも無料で公開されていました。
    ベクター形式というのは、Windowsのペイントにあるような何マス目に赤とか青とかマス目毎の色を決める画像ではなく、画像内のココからココまでは青色の線を引くという感じです。なので、画像を大きくしたり小さくしたりしても、滑らかな画像になるのが特徴です。その分、難しいですけど。。。Adobe Illustratorなんかが有名です。


    基本はパラパラ漫画のように画像を並べて、この画像は何コマ表示するというのを指定すればOKです。
    簡単なパラパラ漫画なFlashを私のトロの名言集で作ってみました。



    まずはParaFlaを起動します。インストールはないので、parafla.exeを直接ダブルクリックして下さい。
    下のような画面が出てきますので、左下にある「素材ファイルはここへドロップ」の場所「素材リスト」に、ファイルをドラッグ&ドロップします。すると画像ファイル名が追加されますので、クリックすると左上のプレビュー画面に表示されます。それでOKならリストをダブルクリックして、右のリスト「イベントリスト」に追加します。それを6回繰り返した状態です。
    基本は右のリストの順番に再生が行われます。素材リストの「種別・ID」と、イベントリストの「種別・(空白)」が対応しています。
    ParaFlaメイン画面
    ※本当は13ファイルだったんですが、容量を減らしたいので6ファイルに削りましたので、左のリストの「ID」が歯抜けになっています。ホントは1から順番につきますよ〜!


    イベントリストで種別画像をダブルクリックすると、このような画面が表示されます。
    ParaFlaイベント画面1
    左上にあるフレームカウントが何フレーム分表示するかです。初期状態では1となっていますが、ParaFlaでは標準で1秒間に12フレームのため、0.1秒も表示されません。16フレームにして1.3秒間程度の表示にしました。この数字だけを変更して、下の適用ボタンをポチッ。
    これを全イベント対して行いました。一つ一つは大変なので、エクスプローラーのファイル選択のように、CTRLを押しながらクリックやShiftを押しながらクリックで複数選択して右クリック→プロパティで、一度に変更出来ます。入力した値だけが選択したイベントに適用されます。


    ちょっとだけ差をつけるために、最後の画像だけ手を加えてみました。
    左の真ん中の欄「移動先」にある、不透明度を0%にしてみました。
    ParaFlaイベント画面2
    これが意味するのは、「フレームカウント内で徐々に不透明度100%から不透明度0%にしていきます」ということで、フレームカウントの16フレーム(1.3秒間)の間に、通常の画像状態(不透明度100%)から、透明(不透明度0%)に変化させるという事です。上のFlash動画の最後がスー・・と白くなるのは、Flash自体の背景色が白色のためにフェードアウトしてるように見えるんですね。


    こちらが、メイン画面のファイル→プロジェクトのプロパティを開いた状態です。
    ParaFlaイプロジェクト画面
    基本設定の幅・高さで、画像にあわせたサイズに変更します。標準では320x320なので余白が見えちゃうためです。
    FPSは、1秒間のフレーム数です。テレビなどは秒間フレーム数が30と言われるように多いほどスムーズです。その反面、多いほどCPUパワーを使います。見る相手に負担を掛けないように理由が無い限りはこのままで十分です。
    今回、フェードアウトして白くなるのはここにある背景色が白色の設定のためです。RGBで色を設定しますので、適当に数値を変更しましょう。
    右の詳細設定で「SWFファイルを圧縮する」を選ぶと、出来上がるFlashのサイズが圧縮されて小さくなります。今回、画像を単純に置いただけなので、サイズも殆ど変わらないのでチェック無しにしました。


    メイン画面でF5キーを押すと、プレビュー画面が開き、イベントエリアの内容を元に動画再生されます。早すぎると思ったらフレームカウントを変更して調整しましょう。


    そしてFlashを作るのですが、その前にメイン画面のファイル→詳細設定を開いて「SWF作成時にHTMLを保存する」のチェックをつけておきましょう。
    Flashは自動でブラウザのサイズに合わせて拡大縮小されます。このチェックがあるとHTMLが一緒に作成されるので、それをブラウザで見ると上のプロジェクトのプロパティで設定した大きさで表示されるようになります。
    ParaFla詳細設定画面
    この設定が終わりましたら、メイン画面のファイル→SWFファイル生成で、Flash動画(拡張子がswfファイル)が作成されます。一緒に作成されたHTMLをブラウザで開くと、無事にFlashが見れたと思います。


    こいうパラパラ漫画的なモノは簡単に出来ると思います。
    但し、本人は楽しいかも知れませんが、画像を多くするとサイズが大きくなり嫌われます。私のブログに来る人の7%はダイアルアップいました。アクセサリ等に容量を掛けないのが優しさですよ〜。

    良くあるFlashで作る画面はActionScriptというスクリプト言語でプログラムを組んでいます。私も初めて使うので、よくわかりませんが・・・JavaScriptに似てますね? 調べてみるとJavaScriptから独自拡張と書いていました。道理で・・・です。もっと早くに気付けばぁ〜!


    今回説明した理由はコレのためです。
    そうです、ブログペットの背景です!!


    好きな画像に時計機能つけたいんですけど、Flashじゃないとダメなので困ってたんですよね。これなら、簡単に時計付背景が作れますね♪ もちろん、プログラムはサッパリ・・・の人も多いと思います。ですので、今回作ったBlogPetの時計付背景のセットをアップしてみました。


    BlogPetの時計付背景Flash作成用ParaFlaセットbpflash.lzh (16,437バイト)

    bpflash.lzhに含まれるファイルは下記の4ファイルです。
    ・bpflash.pfl   :PalaFlaのソースファイル
    ・back.jpg    :背景画像
    ・bpflash.swf   :Flash動画
    ・bpflash.html  :Flash動画実行用HTMLファイル

    back.jpgをお好きなJPEG画像(サイズ130x150)で置き換えて、PalaFlaを起動してbpflash.pflを読み込み、Flashを生成すれば出来上がりです。
    ※画像の著作権には気をつけて下さいね〜。今回は「Light and Shadow」さんから頂いた画像です。


    時計動作用のコーディングですが・・・イベントが判らない上に時計の表示フォーマットの関数等が判らなかったのでぬこちゅーさんの文字操作のコードを元に作りました(*ノノ) いいコードあれば私の勉強?のためにも教えて下さい〜。

    ぬこちゅーさんに無駄な処理削除などの最適化をして頂きました♪
    近いうちに修正版をアップしますので、お待ち下さい〜♪


    【今回、作り方についてお世話になったサイト】
    ParaFla!
    ParaFla!Wiki
    初心者のためのPARAFLA学習帳
     MENUから、順番に見ていくと基礎編が出来ます。
    Flash ActionScript入門ノート
     ビルトインクラス一覧にあるDateクラスなど、詳しい事がイッパイです!ActionScriptの参考にとってもなりました♪
    OpenSpaceActionScript 逆引きクイックリファレンス
    OpenSpace Macromedia Flash MX 2004 日本語版の用例
    ぬこちゅーさんのこぴぺスクリプト
     発生イベントが判らなかったので、フレームの処理の参考にしました。
    PARAFLANOIA
    超文系型Flash ActionScriptの練習


    思った以上に、イベントやクラスなどのリファレンス集が見つかりませんでした。イベントが判らないのはツライです。。。本家のMacromediaも全然ですし・・・



    また、日経ソフトウェア2006年1月号ではノベル・ゲームの作成が出来る「NScripter」が紹介されています。
    私が非常にハマっている「ひぐらしのなく頃に」という大ヒットしているノベル・ゲームで使われているソフトです。体験版がありますので年末年始で暇な人は特にオススメです! 作者の竜騎士07さんのインタビューがありますので、ファンはチェック?


    【追記】
    Flashをちょっぴり変更しました」を追加しました。
    不要な処理を削除したり、日付を非表示にしたり、時計のフォントの変更や注意点、曜日の表示などを修正したバージョンをアップしています。
  • posted by 藍旋 at 12:47 | Comment(8) | TrackBack(1) | ソフト・ツール紹介
    この記事へのコメント
    はじめまして
    貴・記事のおかげで、BPのキャプチャーjpg群からswfを作ることができました。ありがとうございます!
    Posted by ロング at 2005年12月06日 21:32
    ロングさん、こんばんわ〜♪
    つい先日まで、Flashがフリーで出来るなんて知りませんでした。。。なんか楽しい背景が増えたら嬉しいですよね〜♪

    ダブルペットは驚きました(*ノノ)
    頑張って下さいね♪
    Posted by 藍旋 at 2005年12月06日 22:21
    ASの初歩で挫折したstickmanです…
    何人か有名なFlash職人さんとお話させて頂いたこともありますが、やはりアートワークは99%の根気・努力と1%の感性で成る、っていう言葉はあながち間違いではないかも!?と思ってしまいます。
    フラッシュでサイトやビューページを作ったりしたら、細かい所などでの調整とか大変ですし…

    と、雪の写真は大阪北部に大雪が降るまでお待ち下さいね(笑)
    Posted by stickman at 2005年12月06日 23:39
    stickmanさん、こんばんわ〜♪
    大丈夫です、同じ大阪北部ですから(笑)
    雪が降ったら毎時間のようにチェックされているかも知れませんよ?(*ノノ)

    CG等の作家さん達は、ホント根気の作業ですよね。。。何時間も掛けてこれぐらいの進捗と言われると、気が遠くなります。
    Posted by 藍旋 at 2005年12月07日 00:06
    藍旋さん、初めまして。
    記事にてご紹介頂きました「ぬこちゅーさん」のnowloです。
    リファラから飛んできたのですが、解説がとても丁寧でわかりやすいですねー。

    それで、お節介かとは思ったのですが、もしご参考になればと
    配布なされてる時計部分のpflをちょこっと弄ってみました。
    お好きなフォントを使ったり、年月日・時間を別々に配置したりもできますので、
    もしよろしかったら、ご覧ください。(アドレスバーにコピペ)
    http://nowlo.b7m.net/temp/clock.zip
    Posted by nowlo at 2005年12月07日 01:17
    nowloさん、こんばんわ〜♪
    勝手に紹介、バレちゃいました(*ノノ)
    まずはParaFlaを試して貰いたいので、書いてみました。

    ソースありがとうございます!
    よくよく見ると・・・loadイベントで定義すればオブジェクトを何回も作る処理が省けるんですよね。。。editTimeなんて取得時にしておけば全然不要ですし!!

    頂いたソースだと、毎フレーム毎に処理されてますよね?
    処理を減らすために4フレーム毎にしておいたのですが、それほど効果はなさそうでしょうか? 本当は毎フレーム毎にオブジェクトを作るのは辛そうと思ったので、4フレームにしたという本音もあるんですけど。。。

    ブログペットの背景がメインなので、修正版のアップの際に上に戻してよろしいですか? その時に、日付と時間の移動方法も一緒にアップ・・・したいです。
    Posted by 藍旋 at 2005年12月07日 02:21
    どもー、nowloです。

    あー、処理軽減の目的があったのですね。
    4フレームごとに処理を行うのは、ブログペットの仕組み上問題がなければ
    単純にFPSを元の1/4に設定した方が効果あるかもです。
    デバイスフォントを使っているのも、処理の軽減を考えての事だったんですね。
    出すぎた事をしてしまいました。
    フォント云々は見なかったことにして下さいー。

    私のソースは、あくまで何かの参考になればと思ってのものですので、
    現在配布されているセットをそのまま、藍旋さんのご判断で修正なされば十分だと思いますよ。

    ちなみに
     × ねこちゅーさん
     ○ ぬこちゅーさん
    だったりします(笑)
    Posted by nowlo at 2005年12月07日 20:27
    nowloさん、こんばんわ〜♪

    ひぃああ!スイマセン!お名前変更しておきました!
    トップのネコマフラーに胸キュンしてて勝手に変換してしまった・・・のかも?(*ノノ)
    (実はPCのデスクトップにでも飾ろうと画像を貰ってたりします)

    なるほどです、FPSを変えるのも手、なんですね。。。FPSは増やしてスムーズにしか頭になかったです(笑)

    フォントも微妙にサイズ増えますよね〜。フォント自体とは思えないので、フォントが存在しない場合のための代替フォントのリストでも組み込んじゃうのでしょうか。

    本当にお世話になって助かります!
    ありがとうございます〜♪
    Posted by 藍旋 at 2005年12月07日 21:56
    コメントを書く
    お名前: [必須入力]

    メールアドレス:

    ホームページアドレス:

    コメント: [必須入力]

    ※半角英数字のみのコメントは投稿できません。

    この記事へのトラックバック

    ペットと遊びすぎ?
    Excerpt: ようやくわたしもPOCの仲間入りです。そんなこんなで、最近PC起動した後は30分近く、ペットと遊ぶ(クリックなんですけど)ことが多くなりました...
    Weblog: 晴れトキドキぶろぐ
    Tracked: 2006-02-25 00:17
    ×

    この広告は1年以上新しい記事の投稿がないブログに表示されております。