くるっとまわって大きく小さく

前回までの講義でここで教えるFLASH作りのノウハウはつかめましたので。
今回は、画像を動かす際に使えるテクニックの一つを教えたいと思います。

テクニックといっても、「動かす」動きをやるうえでは重要な要素なので上達を目指す人は覚えておいてください。





では、講義で教える内容の効果がわかりやすいよう
今回は練習用画像を用意しました。



150x150の画像です。透過色は[R255 G0 B0 ]の赤色です。
丸い図形の中に絵を入れたシンプルな画像です。
似たようなものを自分で描いて試すのもありです。





保存ができたら、パラフラ内に素材として追加します。
透過色の設定もしておきましょう。

素材として追加できたら、その画像をイベントに追加したあと、
その画像イベントを「大体真ん中あたり」に持ってきてください。









ここまでできたら、この画像イベントを
「３０フレームでその場で一回転」させたいと思います。


まずイベントのプロパティを開いたあと、フレームカウントを「30」に増やします。
増やしたら、「▼」をおして、移動先をコピーします。


そして、ここから、画像を一回転させて元の状態と同じにするのですが。
そうするためには、「角度」の数値を変更させ、「３６０°回転」させる必要があります。

なので、「移動先」の「角度」の項目に「360」という数値をいれます。







数値を入れ終えたら、適用し。プレビューで見てみましょう。







「３６０」という数値を入れているときにうすうす気が付いていた人がいるかもしれませんが、失敗です。

確かに、一回転して元の位置に戻っているのですが、「その場」ではありません。
これは、イベントを回転させる際の「軸」となる部分が、初期の状態だとそのイベントの一番左上（x0:y0）になっているのが原因です。




画像イベントをその場で一回転させるためにはもう一工夫必要なのです。

そのためには、まず画像イベントのプロパティの真ん中あたりにある「中心位置」という項目を設定しなければいけません。
この「中心位置」というのは、そのイベントを変化させる際の「軸」となる部分の座標の事を指します。

言葉で説明すると余計に難しくなってしまうので、実際にやって感覚で理解してください。


まず、この項目内の下にある「画像の中央に設定」というボタンを押します。




すると、数値に[x:75 y:75]という数値が自動で入力され。右側の画像の位置がずれました。
ずれてしまったので、再度右の画像を「大体真ん中あたり」に配置し、「描写位置」と「移動先」をコピーさせ、移動先の角度を「360」にします。






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





今度は「その場で一回転」ができています。



ようはそういうことです！！


簡単な解説をすると、「中心位置」で指定した座標がその画像の「中心」となり。
そこを「軸」に「３６０°回転した」というだけです。

ちなみに先ほど使った「画像の中央に設定」のボタンは、その画像のサイズを自動的に計算して、半分の値（真ん中）を入れてくれます。
押したあとは「画像の左上に設定」のボタンに変わり。それを押すとx0:y0にもどります。





そして、この「中心位置」は、画像のサイズを変える際にも重要になってきます。

画像のサイズを変える場合も、この「中心位置」を中心に変化します。
機能の詳細は角度の部分と大体同じなので、一目でわかるように表すとこうなります。



左が中心位置が左上（初期状態）でサイズを変更させた場合。右が中心位置が中央でサイズを変更させた場合です。





この「中心位置」の機能を覚えておけば、画像を動かす場合にサイズを変えたり回転させたりするのがやりやすくなります。
さらには、移動させながらサイズを変えたり回転させたりという動きも作れるようになります。
特に、回転させる場合は、この「中心位置」をしっかり設定しておかないと、うまく回転してくれないのでしっかり設定するようにしましょう。






ちなみに、この「中心位置」とセットで覚えておきたいテクニック（機能）を紹介しておきます。

イベントのプロパティで、「描写位置」と「移動先」のxとyの部分をクリックすると。
全体サイズの左上（x0:y0）もしくは中央の座標の数値が自動的に入ってくれます。



ここを押すと



こうなる


画像を真ん中に持ってきたい場合、「中心位置」の「画像の中央に設定」を押した後、位置座標のxとyの部分をクリックすれば
すぐにその画像を真ん中に持てくることができます。








今回の講義はここまでです
「中心位置」は４コマのような絵をそのまま動かす場合はあまり使わなくてもどうにかなる場合がありますが。
図形やキャラなどを動かす動画を作る際には覚えておいて損はない機能です。
音楽系FLASHの他にもMG系FLASHを作る際はお世話になることも多いと思うので、動きを作る際はしっかり設定をするようにしましょう。

本来のベクタ絵を使えば、画像の角度やサイズを変えた際の粗がないきれいな線で作ることができるのですが。
ここではベクタ絵を使わないことを前提に制作方法を教えているので。やるならベクタ絵は自分で勉強してください。


次回は、「永久ループし続ける素材」や「動いている素材」を作れる「スプライト」の事について講義したいとおもいます。
これは、親しみの深い表現を使えば「こいつ・・・止めても動くぞ！？」の正体です。

多分少し難しいと思います（講義をつくるのも）。しかし、今までの講義内容を生かせればそこまで難しいことではないはずなので、がんばりましょう。

戻る　　　　　講座TOPに戻る　　　　　次へ