吹き出しに文字
swfへの変換がわかったところで、今度は画像にテキストを入れるのをやってみましょう。



練習用です。先ほどと同じく保存しましょう。
さっきの画像の吹き出しの中身を消しただけです。

新規で前の段階と同じ状態までやります。




そこまでできたら、左下で右クリックを押します。
出てきたものの中から「アイテム追加」→「テキスト」を選びます






すると、テキストファイルのプロパティが出てきます。
では、前回と同じく、今回使う部分をピンポイントで説明します。



①テキスト文入力部分
②テキストの色設定
③テキストの簡易プレビュー
④フォント設定

①に出したい文字を入れ、②でそのテキストの色を決めます。
④でその文字のフォントを決めるんですが、ここであらかじめ③にチェックを入れておくと、①の部分で確認できます。

では、さっそく文字を入れてみましょう。
まずは③のプレビューにチェックを入れておきます。
次に、①に吹き出しに入れる文字を入れましょう。
最後に、④でフォントを決めましょう。プレビューを見てちゃんと表示されている物を選びます。




とりあえず、こんなところでしょうか。
出来上がったら「OK」を押しましょう

出来上がったテキストを、画像と同じように「イベントで追加」で右側に入れます。



ちなみに、「イベントに追加」をする場合は、右側で選択したもの（青色になっているもの）の上に入ることを覚えておくといいです。
一般的には右側に追加したファイルの状態をイベントといいます。

これで完了ではありません。
このままプレビューしても思い通りにはなっていません。

右側でプロパティをいじらなければいけません。
ここからが、FLASH制作の核の部分になります。


それではやっていきましょうか。

まずは右側の画像のイベントを右クリックします。
出てきたものから、「プロパティ」を選びます。





すると、上のようなプロパティ画面が出てくるかと思います。

・・・正直これだとわけわからないと思います。
なので少しわかりやすくしましょうか。

右上のほうにある、「＞」のボタンを押します。すると・・・





これで少しわかりやすくなったと思います。
必要なものの説明に移ろうと思うのですが、こちらはまだ触れないでおきましょう。

「閉じる」を押してプロパティを閉じましょう。


次に、右側のテキストのファイルを右クリックして、先ほどと同様にプロパティを選びます。



左側に、入れた文字と、四角い選択範囲のようなものが映っているかとおもいます。
そうです、基本はペイントなどで使う選択範囲の操作とあまり変わりません。
四隅とその間にある小さな四角でサイズが変わり、ドラッグで位置を変えることができます。

では、この文字を、さっきの吹き出しのところに来るように
位置とサイズを変えてみましょう



こんな具合でしょうか、
そして、位置とサイズを変えると、左側の数値も変わりましたね。
変わった数値の説明をします。



①画像の位置の座標。ｘが横　ｙが縦
②画像のサイズ　「:」で区切られた左側が縦の倍率　右側が横の倍率

つまり、いまの状態は　「右に９と左に９の位置で、縦5.24倍 横3.14倍のサイズ」ということです。




さて、吹き出しの位置にテキストを合わせることができたので
いざプレビュー









失敗しました。
これだと、テキストと画像がずっと入れ替わるような感じのFLASHになってしまいます。

原因は二つあります。

あわてずにその原因を直していきましょう。




まず、一つ目は、「深度」という値です。

パラフラでは、一つの深度につき、一つのイベントしか存在することができないのです。
そして、深度の数値が大きいほど、前面にそのイベントが位置することになります。

簡単な絵にあらわすと。こういうことです。



深度０より大きい深度１は前面　深度０より小さい深度-１は後面に表示されます。
絵を描く方は「レイアー」を思い浮かべていただくとわかると思います。

そして、パラフラは、上から下に順々に処理を行っていきます。
もし、前の処理と同じ深度に後からイベントが来ると、前のイベントが消えて、後のイベントが表示されることになります。

先ほどの失敗したプレビューで画像とテキストが入れ替わるのはこれが原因です。


ならば、解決方法は簡単です

ようはテキストを画像の上、画像より前面に来るようにすればいいだけです。
右側のテキストファイルのプレビューを再度開きます。
上の少し左側にある、深度の値を増やせばよいのです。



深度の問題はこれで解決です。




そして、もう一つの原因は表示時間である「フレームカウント」です。

先ほど申し上げた通り、パラフラは上から下に処理が流れていきます。
今のままだと「１フレームテキストを表示→１フレーム画像を表示」という流れなのです。

もっとわかりやすくあらわすと

１フレーム目│テキストを表示
２フレーム目│画像を表示

つまり、最初の１フレームでテキストを表示している間は、画像がまだ表示されていません。
これを解決するためには、「二つを同時に表示させる」必要があります。

ではどうするか。




こちらも答えは簡単です。

ようは、「上のフレームカウントを０にしてしまえばいい」のです
上のイベントの表示時間を０にすることで、次のフレームで両方同時に表示させることができます。

今回の場合、テキストのイベントが上にあるので、そちらのフレームカウントを０にします。



ちなみに、１枚絵FLASHを作るのならば、両方０フレームでも構いません。




ここまでできたら、プレビューを見てみましょう。




おや？どうやらテキストがずれていたようですね。
位置をとサイズを修正しなければいけません。

・・・ですが、テキストのイベントプロパティで場所を決める際、どうにも吹き出しの場所がわかりにくいです。


そういった場合に役に立つ機能があります。

イベントのプロパティの一番右下に、「下」と描かれたボタンがあります。
これを押すと



先ほど表示したプレビューがでます。
これは、「一回前にプレビューで表示したイベント」を再現してくれます。
後になってもとても役に立つ機能なので、覚えておきましょう。

しかし、前回のプレビューで一緒に映ったずれてしまったテキストも一緒に出てきて少し邪魔ですね。
そういった場合は「プレビュー」のところにある「選択イベントのみ」が役に立ちます。
選択イベントというのは、クリックして青くなったイベントの事をいいます。

画像を左クリックして、「選択イベントのみ」を使い、画像だけをプレビューで表示させるといいです。





画像のイベントを選択した状態で、「選択イベントのみ」をプレビューした後
再度テキストのイベントプロパティで「下」を押すと、画像だけが表示されます。

あとは、テキストの位置とサイズを調整すれば出来上がりです。




出来上がったのを、プレビューしましょう



こんな感じに出来上がりました。


深度は、同じ深度ではないなら、-256～256の512個まで入れることができます。
これから先も、深度の違いは大変重要になります。しっかり使いこなせるようになりましょう。

そして、この深度は、テキストと同様に画像でも使用できます。
たとえば



こういった画像を用意して
先ほどのテキスト同様、深度を２に増やし、横に追加してみたいと思います。

しかし、画像の場合は注意しなければいけないことがあります。

それは、透過色というものです。



では、まずは、透過色を設定しない場合がどうなるか見てみましょう。





こうなります。　黒い部分が邪魔ですね。

では、透過色を設定すると・・・





完璧ですね。

透過色を設定すると、その色が透明になってくれます。
FLASHや絵などでもよくあるように、背景とキャラを別々に描いて、合体させることもできます。

では、肝心の透過色設定のやりかたを教えましょう。

まずは、左側の透過色設定が必要な画像（保存した吹き出しの画像）を右クリックし、
「プロパティ」を開きます。



開いたら、「透過色を使用する」の項目にチェックを入れます。



すると、色を指定する項目が出てきます。
他にもいろいろありますが。今回必要なのは、色指定だけなので他は省きます。

ここで指定した色がその画像の透過色となります。
この吹き出しの画像の場合は[R0 G0 B0]の黒色が透過させたい色となるので、RGBの右に数値を入れます。
ちなみに、透過させる色は、RGBの数値さえわかれば何色でも構いません。



できたら「OK」を押します。

後は、先ほどのテキストと同様の方法で吹き出しの画像をイベントに追加します。
深度とフレームカウントに注意してプロパティを設定しましょう。



これで透過色の設定は完了です。
透過された色はイベントプロパティをやる際にも適用されます。




透過色を使った画像と深度をうまく使いこなせば
貼り絵のような感覚で一枚絵FLASHを作ることが可能となります。

ここまでの流れを自分の好きな画像なんかを使って何か自作したりして。慣らすとより理解できると思います。






そして、フレームカウントは、今回はまだ１枚絵なので、０フレームの固定画面しか使っていません。
次回は、このフレームカウントを使って、絵を切り替える動きをやりたいと思います。
戻る　　　　　講座TOPに戻る　　　　　次へ