|
タイトルのアニメーション(2)  アニメーション表示が終了したときにＵＲＬの文字をクリックするとアニメーションが再起動されます。 まずは回転しながら動くボールについて説明します。 文字を書いたボールをシンボル登録をしておき、表示フレームの外側からフレーム内の所定の位置までトゥイーン設定しています。一つずつのボールには３つのシンボル登録しています。 １番目は静止しているボール（１フレーム長）です。 ２番目はカラー効果を与えたボールです。真っ白（明度１００％）からスタートして標準色彩までのトゥイーン設定を３３フレーム長（回転効果を考慮したフレーム数）で指定しています。カラー効果を使用するためには効果を与える対象がシンボル登録されている必要があるので、１番目で登録したシンボルを使用します。 ３番目は回転効果を与えたボールです。FLASH2Jでは一回のトゥイーン指定では１７９度まで回転しか指定することは出来ません。上のアニメーションではボールを４８０度（１回転と１／３）させていますが、これは１２０度ずつに分割してトゥイーン設定したものを連続的に再生しています。(-120゜〜0゜)→(0゜〜+120゜)→(+120゜〜+240゜)→(+240゜〜0゜)のように４分割しています。右回転、左回転で角度指定が逆になります。 各分割ブロックは８フレームで構成していますので、１フレーム１５度ずつ回転する計算になります。８フレーム × ４ブロック ＋ １フレーム(最後に正位置となるフレーム) ＝ ３３フレーム になります。 回転効果を指定する対象は２番目でシンボル登録したものを使います。これにより、回転しながら薄い色から徐々に濃い色に変化するアニメーションが出来上がります。 以上のシンボルを作成した後、表示フレームには、まず、３番目のシンボルを使って表示フレーム外に拡大したものから表示フレーム内の所定の位置へトゥイーン指定します。フレーム数としては３３フレームを設定します。 「趣」「味」「の」「電」「子」「工」「作」の各ボールをレイヤ（表示画面に対して表示する面を重ねるような概念。フイルムを重ねるような感じ）に分け、タイムラインという時間軸をずらしながら配置します。 一つのレイヤでは一つのシンボルのトゥイーンしか扱えないので、各ボール毎にレイヤを分ける必要があります。 上のものでは各ボールの動きが重ならないようにタイムライン上に配置しましたが、レイヤが分かれているので同時に複数のボールが動くようにタイムラインに配置することもできます。ただ、複数のシンボルを同時に動かすとパソコンの能力にもよりますが、動きがギクシャクしてしまうので、重ならないようにしました。 アニメーションの終了したレイヤにはその後のフレームとして１番目に登録した静止しているボールのシンボルを最後のフレームまで指定します。そうしないとアニメーション終了後、ボールが消えてしまいます。 ３番目のシンボルにカラー効果がかかっていなければアニメーションの最後のフレーム（３３フレーム目）を一番最後まで連続指定しても良いのですが、カラー効果をかけているために３３フレーム周期で真っ白から標準色彩までが繰り返されてしまいます。そのために静止しているシンボルに設定し直しているわけです。（２番目のシンボルは３番目のシンボルで使うだけで表示フレームには配置しません） ボールが所定の位置になった時にサウンドを指定しています。（ポイと言うサウンド） 次に枠のアニメーションについて説明します。 やり方は枠の絵の上に背景色と同じ色のマスク用の絵を配置してマスクを時間と共に動かす方法で行っています。この方法よりもっとうまいやり方があるのかも知れません。 まず、枠の絵を作成してシンボル登録します。 枠の絵は機能指定はしないのでシンボル登録しなくても良いと思うのですが、Internet Explorer 3.02J ではシンボル登録しないと表示されませんでした。Netscape Navigator 3.0J ではシンボル登録しなくても表示することができました。 私のＰＣのInternet Explorer 3.02Jは調子が悪いみたいでなので、そのせいかも知れません。 次に枠の目隠し用のマスクをシンボル登録します。マスクは背景と同じ色（今回の場合白）の四角形で、一つの辺を斜めにしています。（まっすぐでも良いのですが、表示の形が良いかなと思って斜めにしました。） マスクは左右上下用の４つ作り、それぞれシンボル登録します。４つ登録しますが、右と左、上と下は同じシンボルを上下、または、左右反転させて使いましたので、シンボルとしてのメモリーは２つ分（左右用と上下用）しか使いません。（下に示したムービレポート／シンボル登録欄の「枠マスク」の部分を見ていただければ分かると思います。） マスクは枠を表示するレイヤより上のレイヤにそれぞれ配置します。（マスクで枠が隠れるように） 枠のシンボルを表示フレームに配置して、左辺のマスクを枠が隠る位置から徐々に上にずらして枠が見えるようにトゥイーン指定をします。 上辺、右辺、下辺と順番に指定をしていきます。 次にＵＲＬのアニメーションについて説明します。 ＵＲＬの文字は２種類シンボル登録しています。 １つはカラー効果のための登録と、もう一つはボタン機能のシンボル登録です。 カラー効果用のシンボルは明度１００％の白い色から標準色へのトゥイーン指定をします。これによりフェードインのアニメーションができます。 ボタン機能のシンボル（シンボル登録時にボタンビヘイビアをＯＮにする）は以下のように指定しています。 アップ（マウスポインタが文字以外のところにある） ・・・ 黒い文字 オーバ（マウスポインタが文字の上にある） ・・・ 赤い文字 ダウン（オーバの状態でマウスをクリック） ・・・ 赤い文字 アクションで「Goto and Play」を指定し、最初のフレームから再生 サウンドを設定（ポンと言うサウンド） ヒット（オーバ状態とする領域） ・・・ ＵＲＬの文字を囲む四角 このボタンシンボルはＵＲＬ文字のアニメーションが終了した次のフレームに配置します。 以上でタイトルのアニメーションが出来上がりました。 今回作成したタイトルアニメーションのファイル容量は３１．１ＫＢになりました。 参考にムービーのレポートを以下に示します。 全部で２９７フレームになりました。表示速度は１２ＦＰＳ（１秒当たり１２フレーム）としていますので高性能なパソコンでは２５秒位でアニメーションの表示が終わることになります。 このページを作っているときの私のＰＣは Pentium90MHz(買った時には速い方だった)なのでアニメーション表示が終了するまでに４０秒かかりました。
|