Flashのページ

このページは、Flashについてのページです。
最近、関心があるので…。
でも、まだ公開できるような物は出来ていません。このサイトの残り容量もあまりないですしね。(^^;
なのに、「Flashでカラオケ」の方法を模索中です。
主に、EazyFlash,KoolMovesについて述べています。

注 : 中には勝手な思い込みも含んでいる場合がありますので、その時はどうぞご容赦を…。
何も作った物を置いていないので、偉そうなことは言えません。参考になれば…です。

目次

はじめに

最近広告で良く見かけるようになったFlash。携帯電話にも使われるようになりました。
また、Flashのアニメって本当に見ていて楽しいですね。
私は、音楽に合わせて空耳が表示される空耳Flashに、はまってしまいました。
それで、自分でも作ってみたいなぁと思って今ちょっと勉強中です。
本家のflashは、高額で買えません。
他にFlashが作れるツールは無いかなぁと探していました。
Swishやいろいろなツールがありますが、特に自分は「音楽に合わせて動かしたい」と
いうことに目的をおきました。それで音楽と合わせる(同期させる)為には、
ストリーミングができないと合わせにくいそうで、そのようなものを探したところ、
現在のところは、EazyFlash,Koolmovesの組み合わせが良いということを知りました。
EazyFlashには、音楽と同期させる為のストリーミングの設定がありませんが、
Koolmovesには、ストリーミングの設定があります。
EazyFlashの保存形式funファイルは、Koolmovesで読める為、EazyFlashで作成し
Koolmovesでストリーミング形式のswfを出力することができます。
この組み合わせで、音楽と同期させることのできるswfが作れるのでは…と思ったわけです。

KoolMovesで作ったfunファイルはEazyFlashで読めないことがあります。いいClipArtがあるのに…。残念。EazyFlashからKoolMovesは大丈夫みたい。

まぁ、何はともあれFlashってどうやって作るの？っていうところから
EazyFlashを使って、勉強したいと思います。

このソフトは、act2という会社が出していますので、そこからダウンロード
もしくは購入してインストールします。体験版がHPにあります。
(体験版はswfのバックにロゴが入ります。編集の途中の保存ができません。あとの機能は全部使えます。)
(私は、上書き保存が出来ないのはつらいから購入しました。格安ですし…。)
http://www.act2.co.jp/eazyflash/

どうやって動かすの？

・インストールして、起動したら、上のような画面が出ます。
それで？って感じですが、Flashのアニメは、どんなツールでも
最初の状態と動いた後の状態を指定して動かします。(当たり前か…。)

・例としてとりあえず、上の白いところに●でも書いて平行移動させて見ましょう。

・のボタンを押して適当にドラッグすれば、●が書けます。(不親切な説明…)
色を変えたければプロパティで設定します。
(プロパティの設定は図形がのような選択状態でないとできないので、気をつけてください。)

・次に画面下のに注目します。これは、次の状態に変化させるのに使うフレーム枚数です。トゥイーンフレームといいます。
じゃ何枚にすればいいの？っていうことになりますが、[6]のままだと0.5秒かけて移動します。
最初の設定では、フレームレートが12枚/秒になっていますから、6枚÷12枚/秒=0.5秒です。
フレームレートはあとから変えることもできます。([ムービー]→[再生速度])
例えば、24fps(枚/秒)にすれば、移動時間は6枚÷24枚/秒=0.25秒になります。倍早く動くわけですね。

・それでは、移動後の状態を作ります。
今は、状態を表すフレーム(キーフレーム)が1枚しかないので、キーフレームを追加します。
図形を選択した状態で、スコア/タイムラインのウインドウの中の左側の＋のマーク(次のフレームへ選択しているシェイプをコピー)を押します。

すると

の矢印のように、●のコピーされた同じ状態のキーフレームがコピーされます。
表示されているのは、追加されたキーフレームなので、ここで好きなように状態を変えればいいのです。
それでは、図形の位置を右に少し移動させてみます。

を押して図形をクリックします。
その図形をドラッグし、移動させます。

これで、アニメーション完成です。簡単！

キーフレームとキーフレームの間に自動的に6枚のフレームを追加し、だんだんと状態を変化させてくれます。

実際に再生してみましょう。

画面下の再生ボタンを押して、[Webブラウザで再生]を選ぶとブラウザが立ちあがり、アニメーションが始まります。

大体1秒に2回動いていますよね？

結局、Flashってこれが移動ではなく、大きさの変化だったり、色の変化だったり、線の一部が変形したり消えたりといったことを指定すれば、アニメーションができるわけです。

あとは、どんな変化を指定できるかを各自でヘルプなど参照しながらしていくとよいでしょう。
すべての機能を書くことは到底できませんし、私もわからないところもあるので、ほんの初歩だけを書きました。

本家のFlashは、全部のフレームが表示され細かいことができるようです。詳しいことは分かりませんが…、所詮かなわないでしょうが、状態の変化だけ表すキーフレームだけでも結構いろいろできます。
EazyFlash,KoolMoves結構使えると思います。

EazyFlashTips

○キーフレームでの時間計算。

「サウンド／アクション」ウインドウには、キーフレーム毎の経過秒数が表示されます。
再生速度12fpsでトゥイーンフレーム[6]だったら、計算したら0.5秒だから簡単簡単…。
と思ったら、0.0 0.6 1.2 1.8 2.3 2.9 3.5 ...??? 何故？

トゥイーンフレームのところで
再生速度12fpsでトゥイーンフレーム[6]だったら、6枚÷12枚/秒=0.5秒です。と述べましたが、
実はこれ、キーフレーム1枚を含まない時間なのです。だから実際は時間は、ずれるのです。
EazyFlashでは、キーフレーム+トゥイーン数というフレームの作られ方がされるからです。

それでは実際やってみてください。
分かりやすいように、再生速度は12fps、トゥイーン数は6で、キーフレームを
14個すべておなじで作ってみましょう。
そして、「サウンド／アクション」ウインドウをのぞいてみます。

1から4までは良いですが5からは、どんな規則？って思ってしまいます。
まぁ、めげずに計算してみましょう。
先ほどの、(キーフレーム+トゥイーン数)を頭において計算していくと
KF1 :(1+6)×0 ÷12fps=0.0
KF2 :(1+6)×1 ÷12fps=0.58≒0.6(多分、四捨五入)
KF3 :(1+6)×2 ÷12fps=1.16≒1.2
KF4 :(1+6)×3 ÷12fps=1.75≒1.8
…………………………
KF12:(1+6)×11÷12fps=6.41≒6.4
KF13:(1+6)×12÷12fps=7.0 (ぴったり、(1+6)は7、7の12個目だから)

こんな感じです。
実際のswfでのフレームの数はキーフレーム13の直前までは、7×12=84枚、
84枚÷12fps=7.0秒となります。

シビアに秒数計算したい人こうやってみてください。
(いないか…。こんなのHELPに書いてあったら使う人いないもんね、面倒で…。)

○画像の取り込みについて

EazyFlashでは、BMP,PNG,JPEGなどの画像ファイルが読込めます。
取りこんだ画像は、内部でJpegに変換され使用されます。
そのJpegの画質は、[ムービー]→[画質設定]でします。
しかし、このJpeg、100%にしても画質が気になるときがあります。
色の数が少ない時は顕著で目立ちやすいです。
これは、Jpegの特質で仕方の無いことのようです。
しかし、EazyFlashでは、画像の形式が256色以下(8ビット以下)の画像ファイルを取り込んだ場合
内部ではJpegではない画像として取り込まれます。(LossLessの形式というPNGの原型のようなもので可逆圧縮形式。)
画質が劣化しない形式で、Jpegより小さいこともあります。
この画質は、[画質設定]には左右されないようです。(常に100%ってところでしょうか。)

で、結論は、
画質を良くしたい時は、白黒,16,256色ビットマップ形式のファイルで画像を作り、取り込んでみましょう。
(この色数だったら、EazyFlashの描画ツールで描いたほうが良いかもしれませんが…。)

それから、まわりを透過させたい場合は、PNGじゃないと透過しません。(BMPは透過無しだからね。)
256色以下のPNGにして透過色を指定して取り込みましょう。


フルカラーの画像から、Jpegの特質に左右されない取り込み方は、
Padie(フリーソフト http://www.vector.co.jp/authors/VA013060/software/ )
などのソフトで256色ビットマップに減色(減色してもきれいです。)、
その画像をEazyFlashで取り込む。こういった手順が良いかと思われます。
(しかし、ムービーのサイズは大きくなるようです。)

注:Jpegファイルは、見た感じの色が少なくても、24ビット画像ファイルとして取り込まれ、
内部でJpegに再変換されます。

これも画像にこだわりのある方対象ですね。
(でも、すごいですねEazyFlash。色の数が少ない時に弱いJpegの代わりに、別形式で扱うなんて。ひょっとして本家Flashも同じ？)

○キーフレームの挿入について

偶然見つけました。(ヘルプに書いてありません。)
キーフレームの間にキーフレームを挿入することが出来ます。
[再生]で、コマ送り再生をしてみて下さい。
左上にキーフレーム、トゥイーン数が表示され、コマ送りで再生されます。
トゥイーン毎に再生されますが、
新たにキーフレームにしたいところで、鍵マークのアイコンをクリックすると
前後のトゥイーン数を計算して、キーフレームを挿入してくれます。
しかし、計算した結果が、トゥイーンのコンボボックスの選択肢に無い場合は
未確定になります。適当に近似値を入れてあげましょう。

例えば、キーフレーム1でトゥイーン数=20を設定し、キーフレーム2で図形を適当に動かします。
コマ送り再生で、キーフレーム1、トゥイーン10でキーフレームの挿入をすれば
キーフレーム1はトゥイーン9、キーフレーム2はトゥイーン10、になり、図形の位置も割合で計算され、
キーフレームが挿入されます。

この機能を使うより、フレームをコピーして追加し、動かし直したほうが早い場合がありますね。
まぁ、こういう機能もあるっていうところで…。

○その他

その他、使っているうちにこうしたら良いかなぁというもの。

○図形の塗りのグラデーションを横にしたい時は、作成してグラデーションをして90度回転させる。 だから、横のグラデーション図形はあらかじめ回転して描いていく。

○図形を移動させる時は、普通マウスを使いますね。でもキーボードの方向キーでも移動できます。 図形を選択して方向キーです。[SHIFT]を押しながら方向キーで早く移動できます。 横方向だけ動かして縦方向は動かしたくない時なんかは、この方法がいいですね。

○取り込んだ画像を縮小/拡大した後に回転させると、回転中に縮小/拡大前の 画像が回転することがあります。これを回避するには、縮小/拡大が終わったら 次のフレームに1回コピーし、それのプロパティのシンボルをYESにして、回転させると きれいに回転できます。但しシンボル属性を切替えると「スコア／タイムラン」では別の図形に なります。

Flash用ツール

「Flashでカラオケ」の為のツールを作ってみました。
一応、作りやすくはなります。使えたら使ってください。
サンプルが同梱されています。

●「ClickFrameCounter」について

「ClickFrameCounter」は、フレームレートを指定し、
　音声を聞きながらマウスでクリックしたタイミングでの
　フレーム位置を、記録するツールです。
　要は、FLASH等で音声ファイルと同期を取る為のフレーム位置を
　知りたい、その為に作成しました。

　主な機能
　○音声を再生しながら、マウスでクリックしたタイミングでの
　　フレーム位置を記録する。
　○結果をテキストで表示し、必要に応じてコピーできます。
　　(ファイル保存はありません。各自コピペしてください。)

●動作環境

Microsoft Windows 95 以降　(作成環境がそうだから)
こちらではMicrosoft Windows 95,Meで動作を確認しました。
98,XPも大丈夫だと思います。(確認していないだけです。)

戻る