講座１.[４コマ漫画のFLASHを作る04]

出現消滅ロールバック！！

前回に引き続き、４コマの切り替えをやります。
今回は、「出現　→　停止　→　消滅」の流れを作れるようになるのが目標です。

練習用の画像は、前回と同様200x200の四枚を使用します。
念のために、ここにも再度おいておきます。

　
これらを使って、画像４つを３０フレームずつ表示させるところまで作ってください。
二枚目のテキストは入れなくてもいいです。前回の復習です。

ここまでできたら準備は完了です。

ここから、この４枚を　出現→停止→消滅　の流れで切り替えるのですが。
切り替えのやり方というのもいろいろあります。
今回はその中でも一番使用頻度が高い「スライド方式」と「透過方式」をやりたいと思います。

まず、一枚目のイベントの上に、もう一つ１コマ目の画像をイベント追加しましょう。
このイベントで「スライドイン」の動きを作ります。

イベントに画像を追加したら、プロパティでフレームカウントを１０にします。

このとき、前回で気が付いた人もいるかもしれませんが。
「描写位置」の下に、「移動先」という項目が出てきたと思います。
この「描写位置」と「移動先」というのが、画像を移動させる動きの基礎となります。

説明するよりまずは慣れろです。
ためしに、「描写位置」の数値を「x:-200 y:0」としてみてください。
他の数値はいじらなくて結構です。

ここまでできたら、１コマ目の出現部分と１コマ目を選択し、「選択イベントのみ」でプレビューしてみましょう
ちなみに、二つ以上のイベントを選択したい場合は、選びたいイベントを左クリックを押したままドラッグするか、shiftキーを押したまま２つを左クリックすれば選べます。

１コマ目が１０フレームでスライドしてきた後３０フレーム停止すると思います。

「フレームカウント」が１０で、「描写位置」がx:-200 y:0、「移動先」がx:0 y:0なので
このイベントは「１０フレームで描写位置(x:-200 y:0)から移動先(x:0 y:0)まで移動する」というイベントになりました。

わかりやすく言うと
フレームカウント　　　　＝　　　動作にかける時間
描写位置　　　　　　　　＝　　　スタート地点
移動先　　　　　　　　　＝　　　ゴール地点

というわけです。

では、それをふまえたうえで、今度は「スライドアウト」を作ります。

今度は、１枚目の停止部分の下に来るように、１コマ目の画像をイベント追加します。

先ほどと同じように、フレームカウントを１０にして
今度は「移動先」の数値を「x:200 y:0」としてみてください。
他の数値はいじらなくて結構です。

ここまでできたらどうなるかはもう想像がついていると思いますが。
今作った１コマ目の　出現停止消滅　の部分を選択し。「選択イベントのみ」でプレビューします。

左側からスライド出現（１０フレーム）→　停止（３０フレーム）→　右側にスライド脱出（１０フレーム）
という流れが出来上がったと思います。

「xとyの数値」はそれぞれ「縦と横の位置」をあらわしています。
そして、このFLASHのサイズは200x200、画像のサイズも200x200なので、xかyに「-200か200」と入れると。上下左右のいずれかの画面外に移動します。

ここまでできたら、今度は他のコマも同様にスライドさせてみましょう。
１コマ目と同様に、その上下にそれぞれ出現と消滅の分のイベントを追加して数値を入れていきます。
入れる数値も変えてみましょうか。

ちなみに、入れた値はこの状態でも一応確認ができます。

サイズと角度はまだ触れていないので気にしなくてもいいです。

では、この状態でプレビューしてみます。

こんな感じになりました。
スライドスピードを変えたい場合はフレームカウントを小さくすればいいだけです。
そして、停止の部分は少しずつ動かすようにするのもありです。

これで、「スライド方式」は完成です。

次は、「透過方式」をつくります。
どういったものかというと、薄くなったり濃くなったりして出てきたり消えたりする動きです。
先ほど作ったスライド方式のイベントをそのまま使います。

まずは、一コマ目のスライドインの部分のプロパティを開き、「描写位置」の値をx:0 y:0に戻します。
その後、その左側にある「不透明度」という値を100%から、0%に変えます。

できたら、スライド方式の時と同様、出現と停止の部分を選択し。「選択イベントのみ」でプレビューしてみます。

すると、透明から徐々に濃くなって出現します。

背景が白いのでわかりにくいかもしれませんね。
もう少しわかりやすくなるように工夫してみましょうか。

「アイテムを追加」で「テキスト」を作成します。
確認用なのでなんでもかまいません。

作成したら、イベントの一番上に追加して、フレームカウントを０深度を-1にして好きな場所に配置します。
この状態で先ほどの出現と停止部分にテキストの部分を追加選択して「選択イベントのみ」でプレビューします。

これで、「不透明度」がどのようなものなのかがわかりやすくなったと思います。

では、出現と同じ割合で、今度は消滅を作ります。
１コマ目のスライドアウトの部分のプロパティを開き、「移動先」の値をx:0 y:0に戻し、その左側の「不透明度」を100%から0%に変えます。

この時、変えるほうを間違えないように注意してください。変えるのは「移動先」の「不透明度」です。

できたら、確認用のテキストと一緒に選択して、「選択イベントのみ」でプレビューします。

出現　→　停止　→　消滅　という流れが出来上がっていると思います。

では、先ほどと同様に、他のコマも同様のイベントを組んでみましょう。
出来上がったら、プレビューしてみます。

こんな感じになりました。

これで、「透過方式」は完成です。

ちなみに、この「スライド方式」と「透過方式」は組み合わせることも可能です。

先ほどの「スライド方式」に「透過処理」を組み合わせると、こんな感じになります。

だいぶ動画のそれっぽくなってきましたね。

ここまで来ると、次は何をするか多分予想がついているでしょう。

ええ、その通りです。

２枚目に「承」文字を入れましょうか。

しかも、今回は前までとは違い、「承」の文字自体も動かさなければなりません。

まずは、テキストを追加して「承」の字のテキストファイルを作ります。
フォントは前回同様「MS Pゴシック」でいいです。

これを、イベントに追加するのですが、
追加する場所は二枚目の出現イベント前がいいです。

イベントにいれたら、テキストイベントのプロパティで、深度を１にしてちょうどいい位置に「承」の字を配置します。
この時、あらかじめ二枚目の停止部分を「選択イベントのみ」でプレビューしておいて「下」を使えばやりやすいです。

そして、肝心なテキストのフレームカウントですが。３０にします。
ここで注意しなければいけないのは、「描写位置」と「移動先」の両方を同じ数値にしなければいけません。
キリがいい数値ならば問題はないのですが、時にはめんどくさい数値になってしまう時があります。

そういった場合は、真ん中あたりにある「▼」と「▲」のボタンが約にたちます。
この二つのボタンは、もう片方の値を同じにしてくれる機能があります。

つまり

これが

こうなります。

逆もまた然りです。
「▼」を押せば「描写位置」の数値を「移動先」にコピーし、「▲」を押せば「移動先」の数値を「描写位置」にコピーしてくれます。
なかなか使える機能なのでぜひ覚えておきましょう。

「描写位置」と「移動先」の数値を合わせたら「適用」を押しプロパティを閉じます。

これだけで終わりではありません。
今作ったのは停止の部分です。

次は出現と消滅の分を作らないといけません。

画像と同様に、上下にテキストイベントを追加するのですが。
イベントに追加する際は、全て初期値になってしまうため数値を入れ直すのが面倒です。
なので、違う方法でテキストイベントを追加したいと思います。

先ほど作ったテキストイベントを右クリックし、「コピー」を選びます

その後、「アクションを挿入」と同じ要領で、「貼り付け」で上下にテキストイベントが来るように張り付けてしまいます。

そうすると、同じテキストイベントが３つ出来上がります。
初期値から入れ直すよりはこちらのほうが効率がいいです。

では、まずは、出現のほうから作りましょうか。
上のテキストイベントのプロパティを開き、フレームカウントを１０にします。

「描写位置」の数値を変えて出現の動きを作るのですが、
ここで、少し計算が必要になります。

この場合テキストは画像と同じように動いて貰わなければいけません。
私の場合は画像の動きは[x:0 y:200]→[x:0 y;0]となっています。
これと同じように動いてもらうには、「描写位置」から「移動先」まで行く際に、yを-200すればいいのです。

なのでテキストの「描写位置」は、「移動先（停止位置）」の数値からyを+200した値を入れなければなりません。
つまり

を

とすれば良いはずです。
ややこしかったら計算機を使うのもありです。
※なに言ってるかわからない方は、最後の全体イベントで同じ数値になるように入力してください。

数値を入れたら、画像と同様に「不透明度」の値も調整します。

同じような感じで、消滅のほうも作ります。

フレームカウント１０で今度は「移動先」の調整をします。

消滅のイベントまで作ったら、きちんと直後に「画像を削除」を入れて消しましょう。
消さないとうっすら残ってしまいます。
これは、その１０フレームでの処理が 10-9-8-7-6-5-4-3-2-1 の１０この処理を行うので 0 にはならないからです。

出来上がったらこんな感じでしょうか。
※いまいち理解できなかったかたは、全てをこの画像の数値と同じ値にしてみてください。

ここまでできたらプレビューしてみます。

ええ、失敗ですね。

処理が上から下に真っ直ぐ流れている以上こうなってしまいます。
では、どうすればよいか。

ここで使うのが「アクション」のなかにある「＜ロールバック＞」というアクションです。
この機能を簡単に表すとすれば、タイムマシンです。

ものはためしです。さっそく試してみましょう。

テキストイベントを消した「画像を削除」の真下に来るように「アクションを挿入」で「＜ロールバック＞」を選びます。

すると、「フレームカウント」を入れる項目が出てきました。
ここに、50と入れてみましょう。 -50ではありません。

ここまでできたらプレビューをみてみます。

完成です。

お分かりいただけたでしょうか。
「＜ロールバック＞」のアクションは入れた数値分だけフレームカウントがもどります。
今回の場合、出現10フレーム＋停止30フレーム＋消滅10フレーム　の合計50フレームを戻すことによって、テキストと画像を同時進行させました。

わかりやすく絵で表すとこんな感じです。

つまり、深度が違うイベントを同時動かすことができます。
「＜ロールバック＞」アクションを知っているのと知っていないのとでは、レベルが違いすぎます。
というより、この先必須になるであろうアクションです。
使いこなせるようになると、かなり色々な動きが作れるようになります。

そして、今までやってきた講義の内容を理解できていればこういうものも作れるようになります。

「深度」「移動」「不透明度」「画像の削除」「＜ロールバック＞」
これらを使いこなせれば制作可能な物の範囲がぐっと広がります。
頭に浮かんだ創造をどんどん形にして、慣らしていきましょう。

今回の講義はここまでです。
これで、動きの部分の講義はほぼ完了しました。

次回は、サンプルファイルを使って、再生や停止といった動作の作り方を見たいと思います。

戻る　　　　　 講座TOPに戻る　　　　　次へ