ParaFla! 機能 3-2　〜機能を使ったFlashを作ってみる〜

---

イベントの動かし方を覚えたところで、実際にサンプルを作ってみましょう！
今回作成するのは、水色のバックに雲が描かれている「空」の絵と、白のバックに緑色で描かれた「山」の絵と、
オレンジ色のイガイガ「とげボール」の3つの絵を使用したムービーです。

はじめに、 ParaFla! に「空」（sky.png）、「山」（mt.png）、「とげボール」（splinter.png）の3つの画像をドロップします。

まずは、「とげボール」を動かします。
「とげボール」を「イベントに追加」して、イベントを右クリックしてプロパティを出します。

フレームカウントは 30 ぐらいに設定し、
とりあえず、左から右へ回転しながら大きくなるように設定します。
「描画位置」は、X=0 、Y=50 に、「移動先」は X=250 、Y=250 、サイズを 3 、角度を 360 に設定します。
また、「中心位置」ボタンを押して、画像の中心位置を取ります。回転する時に、画像の中心を軸にして回転させるためです。

「固定画面」ボタンの上にある「プレビュー」ボタンを押すと、このイベントだけのプレビューを見ることが出来ます。
そのボタンを押してプレビューし、ちゃんとトゲが動いていたら成功です。

では次に、背景となる「空」と前景になる「山」の画像を、イベントリストの順番で「とげボール」の上に来るように追加します。

ここで、問題がひとつ起こります。
動いている「とげボール」の後ろに背景として「空」を、手前に前景として「山」の画像を表示したいのですが、
このままだとこれらの絵が順番に表示されるだけで、複数の画像を同時に表示する事ができません。
どうやったら3つの画像を同時に表示できるのでしょうか。

そこで登場するのが「通常画面」と「固定画面」です。
通常画面は、アニメーションさせる（動きをつける）イベント、
固定画面は、アニメーションさせない（動かさない）イベントのことです。

「とげボール」はアニメーションさせるので通常画面ですが、「空」と「山」は背景で、動きをつける必要がないので固定画面に設定します。

「固定画面」と「通常画面」を使用すれば、複数のイベントを同時に表示する事ができるのですが、
Flashには「深度」というものがあり、同じ高さに複数のイベントを表示することができないので、
イベントが重なる場合にどれを手前側に表示し、どれを奥側に表示するのかを指定しなければいけません。
「イベントのプロパティ」に、「深度」という項目があるので、そこに深度の値を入力します。
深度は -256 〜 256 の間で設定でき、数値が小さければ奥側、大きければ手前側に表示されます。
深度の値が同じイベントが複数存在している場合、実際にはそのうちのひとつしか表示されないので、深度が重ならないように注意する必要があります。

それでは、「とげボール」の背景をつけてみます。
まず、「固定画面」はイベントリストの順番で「通常画面」の上にくるように配置しないと表示されない事があるので、
「空」と「山」の画像のイベントが「トゲボール」のイベントの上に来るようにしてください。

そうしたら、イベントリストから「空」のイベントを右クリックしてプロパティを開き、「固定画面にする」ボタンをクリックして、「固定画面」に設定します。
ちなみに、「固定画面」は動かさないイベントなので、フレームカウントは 0 になります。

次に、深度を設定します。
先ほどの「とげボール」深度は 0 になっていたので、背景にするイベントは 0 よりも小さい値の深度を設定すればいいわけです。
「空」は、一番奥の背景になるイベントなので「-10」に設定します。
「-1」でも良いのですが、もしも「とげボール」と「空」の深度の間に追加で画像を表示したくなったときに深度の数値をずらさなくてはいけなくなってしまい面倒です。
深度の値に間の余裕を持って設定するようにすると、こういったときでも楽に対応することができます。

「適用」を押してプロパティを閉じると、「空」のイベントに『（固定）』のマークが付いています。

このマークがついているものは「固定画面」であると一目でわかります。

続いて、「とげボール」よりも手前に表示する「山」の設定をします。
「山」も「空」と同じように「固定画面」にするのですが、また問題が発生します。

上記の画像が実際に使用する「山」の画像なのですが、緑の山の上の白い部分は透明ではなく、白色で塗られています。
このままだと、山の後ろに表示するはずの画像が山の白い部分で見えなくなってしまいます。
そこで登場するのが「透過機能」です。
この機能を使うと、設定したひとつの色を透明にして画像を表示する事ができます。
ファイルリストの「山」の画像を右クリックして、プロパティを選択します。

すると、「ファイルのプロパティ」というウィンドウが表示されます。

ここで、「透過色を使用する」にチェックを入れます。
するとRGBのスライドバーが現れるので、透過したい色を選びます。
「左上のドット」ボタンを押すと、画像の左上の色が自動的に設定されます。
左上のドット以外の色を指定したいときは、色の成分を指定しなければいけないので、画像の透過したい色の成分を Windows 付属のペイント等で調べる必要があります。
そこで、あらかじめ透過用の色を自分で決めておき、画像を作成する段階でその色を背景に画像を作成すれば、どの色が透過色か迷うこともなくなります。
ちなみに、透過は1色しか指定することができません。
また、画像ファイルが jpg の場合、その特性上、透過がうまくできません（輪郭がギザギザになります）。
どうしても透過をしたい場合は、「エッジをぼかす」にチェックをして設定を行ってください。詳しくはこちらを参照してください。

「山」の画像で透過したい色は白なので、
3 つのスライドバーを全て右に寄せて、横の 3 つのボックスすべてに「255」と表示されたことを確認して「OK」を押します。

これで、「山」の透過の設定は完了です。
この透過設定を、「とげボール」にも行ってください。透過する色は山と同じ白ですよ。

透過を設定出来たら、イベントリストから「山」の画像イベントを右クリックしてプロパティを開き、
「固定画面」に設定して、深度を「10」に設定します。

これで、-10 の空が一番奥に、次に 0 のとげボール、そして 10 の山が一番手前に表示されるようになります。

最後に、「プレビュー(P)」から、「プレビューウィンドウ(P)」でプレビューして確認してみましょう。
⇒ 完成したFlash
お疲れさまでした。

今回使用した画像ファイルとプロジェクトファイル
サンプルFlashソースのダウンロード

ここで、少し画像ファイルの画質についてまとめておきましょう。
ParaFla! で使用できる画像ファイルは bmp 、 jpg 、 png の3種類で、それぞれ画質は異なりますが、
ParaFla! で何も設定しないままだと、どの画像ファイルを使用してもFlash内で表示される画像の画質は jpg 相当の少し荒い画質になります。
bmp や png などきれいな画質の画像を使用したときに画質を落とさないようにするためには、画像ファイルの「ファイルのプロパティ」で「JPEG 圧縮しない」という項目にチェックを入れてください。
これで、その画像は圧縮されず、元のままの画質で表示されます。

---