「回転」「アルファ」「色の変化」を設定しよう

「回転」「アルファ」「色の変化」について

前回の章では、オブジェクトの位置・大きさ・角度が変化し、さらに動く速度に強弱をつける「イージング」の設定をしましたが、他にもモーショントゥイーンとの組み合わせにより、簡単な設定をするだけで色々な動きのアニメーションを作ることが出来ます。

この章では、モーショントゥイーンを使用してオブジェクトが「回転」したり、「透明度が変化」したり、「色が変化」するアニメーションの設定方法を説明したいと思います。

下のFlash アニメーションを見てみましょう。
このアニメーションは、モーショントゥイーンの基本的な機能のすべてを詰め込んで作った、わけのわからないところが特徴のアニメーションです。

まず、自動車が右側からパンパカパーンと登場する際のホイール部分に、オブジェクトの「回転」機能を使用しています。
そして自動車のイラストが徐々にズームアップしてきて内装のイラストと入れ替わる瞬間、自動車のイラストが徐々に透明になり消えていきます。
それとは逆に、内装のイラストが透明の状態から徐々に現れてきます。これら「透明度」の変化を「アルファ」で設定しています。
最後に、現れた内装のイラストのシルエットから徐々に色味が現れ、猫のボスの姿が確認できるようになります。この部分に「色の変化」を設定しています。
それでは、これら「回転」「アルファ」「色の変化」のそれぞれの設定のやり方についての説明をしていきたいと思います。

「回転」の設定

まずは回転させたいオブジェクトを選択し、「グラフィックシンボル」に変換します。
次に、モーショントゥイーンでオブジェクトを移動させる時と同じように、タイムライン上で回転の始まる地点と終わる地点にキーフレームを作り、その区間に「モーショントゥイーン」を作成します。
この状態で、モーショントゥイーンが設定された区間の適当なフレームを選択し、「プロパティインスペクタ」を開きます。
「プロパティインスペクタ」内の「回転」項目で回転方向を「時計回り」か「反時計回り」から選択し、隣の回転数の入力欄に好きな回転数を入力します。
これでオブジェクトが回転するアニメーションの完成です。回転数を変更したり、フレーム数を変更する事で、回転速度や回転時間を調節する事が出来ます。
また、他の動きとの組み合わせも可能で、モーショントゥイーンの最終フレームのオブジェクトの位置を移動させてアニメーションを再生させると、オブジェクトが移動しながら回転するアニメーションを作る事が出来ます。
上のFLASHアニメーションのホイール部分の動きでは、「回転」に「イージング」を組み合わせ、徐々に回転速度が遅くなり、最後には停止するようにしてあります。

「アルファ」の設定

オブジェクトの「透明度」のことを「アルファ」といいます。この「アルファ」の設定も、他のモーショントゥイーンアニメーションと同じようなやり方で設定する事が出来ます。
「こちらが2時間オーブンで焼いた状態です。」みたいなノリで申し訳ないのですが、途中経過は省略させてもらい、2つのキーフレームの間にモーショントゥイーンが設定してある状態が既にあるとします。
徐々に透明になっていくアニメーションにしたい場合は、モーショントゥイーンの最終フレームへ、透明な状態から徐々に現れてくるアニメーションにしたい場合はモーショントゥイーンの最初のフレームへ「再生ヘッド」を移動させます。
「選択ツール」で透明にしたいオブジェクトを選択した状態にし、「プロパティインスペクタ」を開いて「カラー」項目の「アルファ」を選択します。
隣りに数値を入力する欄が現れるので、数値を減らしてみましょう。オブジェクトが透き通っていくのがわかります。
数値を0％にすると、完全に透明になります。
これで「アルファ」の設定は完了です。アニメーションを再生させてみると、オブジェクトの透明度が変化するアニメーションが出来ているはずです。

「色の変化」の設定

これは、「アルファ」の設定と全く同じやり方です。ただし「プロパティインスペクタ」を開き、「カラー」項目から「アルファ」を選択するのではなく、「明度」か「着色」を選択します。
「明度」を選択すると、オブジェクトを徐々に明るく（白っぽく）したり暗く（黒っぽく）する事が出来ます。
設定方法も「アルファ」と同じように、数値を入力するだけです。「100％」に近くなるにつれて明るくなり、「-100％」に近くなるにつれて暗くなっていきます。
「着色」を選択すると、好きな色でオブジェクトを徐々に塗り潰していくことが出来ます。
設定方法は、カラーボックスをクリックしてカラーを選択するか、RGBの各欄に数値を入力してカラーを指定します。着色の濃淡は数値入力欄に度合いを％で入力し調節します。

色味や透明度の変化に関しては、他にも便利な機能があります。
「プロパティインスペクタ」を開いて「カラー」項目から「詳細」を選択すると、「アルファ」「明度」「着色」のそれぞれを組み合わせた複雑なカラースタイルを設定する事が出来ます。
設定方法は、「設定」ボタンをクリックすると「拡張効果」ダイアログボックスが表示されるので、現在の色の明るさや、加える色味をそれぞれRGBごとに調節したり、そこに透明度を加えたりすることが可能です。
数値を変更すると、ステージ上のオブジェクトにはリアルタイムで変化が反映されるので、お気に入りのカラーリングになるまで何度も確認しながら設定しましょう。
上の Flash アニメーションでは、猫のボスが登場する瞬間に、「アルファ」と「明度」の2つを同時に変化させています。設定方法がわかりにくい場合には、上の fla ファイルをダウンロードして設定方法を確認してみましょう。

これらの機能を組み合わせて、イラストが右や左に回転しながら青っぽくなった後、暗くなりながら消えながら大きくなりながら移動する、わけのわからないアニメーションを作って遊んでみましょう。
きっとすばらしい作品が出来上がる？のではないかと思いますよ。