正６面体を一定の角度で回転させたい

質問

私は今、FlashMX Professional 2004 ver7.2を使っている者なのですが、ワイヤーフレームでできた正６面体（キューブ）を一定の角度で回転させるアニメーションがActionScriptで作りたいと思っています。

それで、Flash製作に関するHPを色々探して見たのですが、私の調べた限りでは、どのHPも、マウスカーソルに反応して回転の角度が変わるアニメーションのスクリプトしか公開されておりませんでした。

私としては、マウスに反応しないアニメーションを作りたいのですが、いかんせんActionScript初心者なので、上記で見つかったアニメーションのどのスクリプトを修正すればいいか、分からないでいます。

マウスの動きに反応せずに正６面体を回転させるアニメーションの作成方法をご存知の方がいらっしゃいましたら、よろしければそのスクリプトを、もしご面倒なようでしたら、参考になるHPをお教えくだされば幸いに思います。

また、こちらは余裕があればお答え頂くと言う形でよいのですが、こうしたアニメーションを表現するもう一つの手段として、ActionScriptを使わずに、思い切ってフレームアニメーションで回転しているように見せる、と言う方法もあるのですが、こちらの方法では動作が遅くなるほどサイズが重くなってしまうでしょうか？

よろしければアドバイス頂けると幸いに思います。

回答No.3

DPE

＃２です。

「 //正６面体のポリゴンデータ・・・」から 「 WireFrame( 0 , 0 , 0 ); 」までのスクリプト（ポリゴンの頂点の定義から計算・描画用の関数と、サンプルとして真正面から見た立方体を表示する処理まで）を、メインのタイムラインのフレーム１に書いていませんでしょうか？
このスクリプトは、新規に作った空のムービークリップが持っているタイムラインの、フレーム１に設定します。
最初に四角形が表示された時、この四角形はどこに表示されましたでしょうか。
ステージの左上の方に表示されたのなら、これらのスクリプトをメインのタイムラインに書いたことが原因と思われます。

タイムラインの上の方を見てください。
ここに「シーン 1 」としか表示されていないのであれば、編集中のタイムラインはメイン（ムービーそのもの）のタイムラインです。
シンボルを編集している時は、「シーン 1 」「（編集中のシンボルの名前）」と表示されます。
ムービークリップのシンボルの編集画面は特に、ムービーそのものの編集画面とレイアウトが全く同じで紛らわしいです。どのタイムラインを編集しているか分からなくなったら、この表示を見て確認してください。
スクリプトを設定したタイムラインが違っているようでしたら、「シンボル１」の編集画面を開いて、スクリプトを移動してみてください。

ActionScript では、参照したいインスタンスや変数・関数を持っている階層がどこなのかを、はっきりと指定して操作しなければなりません。この指定のことを、ターゲットパスといいます。
メインのタイムラインに座標の計算や描画関数の定義等を書いた場合、WireFrame 関数は _root という階層の持ち物になります。
メインのタイムラインで WireFrame 関数が定義されていたとすると、この関数は「シンボル１」のインスタンスのものではないので、

　_root.WireFrame( ・・・ );

または

　_parent.WireFrame( ・・・ );

このように、ターゲットパスを付けた書き方でないと呼び出せません。
最初の WireFrame( 0 , 0 , 0 ); は、関数の持ち主と同じタイムラインで呼び出しています。
ActionScript では、自分が持っている関数や変数・インスタンスを利用するなら、ターゲットパスを省略できる決まりになっています。
関数がメインのタイムラインで定義されていたとしても、WireFrame( 0 , 0 , 0 ); は同じタイムライン上で呼び出しているので最初の四角形は表示されます。
ところが、このスクリプトを消してムービークリップから呼び出すようにすると、ターゲットパスがないために関数が呼び出しに失敗して、何も表示されなくなるというわけです。

＃２のスクリプトでは、ムービークリップシンボルのタイムラインで各関数を定義しています。
onClipEvent を設定したムービークリップ（のインスタンス）はこのシンボルの分身ですから、シンボルと同じ関数を内部に持っています。
WireFrame 関数は自分のものですので、ターゲットパスを付けなくても呼び出せます。

他のムービークリップから呼び出したい時は、立方体を描画するインスタンスまでのターゲットパスが必要です。
例えば、このインスタンスに” cube ”とインスタンス名を付けたとすると、

　_root.cube.WireFrame( 0 , 0 , 0 );

このようなターゲットパスを付けて呼び出します。
ターゲットパスを自動で入力してくれる機能があります。
「アクション」パネルの上部に７つほどアイコンが並んでいますが、この中の中央のアイコンをクリックしてください。リストから対象を選ぶだけで、そこまでのターゲットパスが自動で入力されます。
ターゲットパスがよく分からない時に利用してみてください。

３Ｄの計算と描画関数をムービークリップシンボルのタイムラインで定義すると、立方体はムービークリップ自身の座標系を中心に描画されます。
つまり、ステージではムービークリップを置いた地点を中心にして立方体が描画されますので、どこでも好きな位置に立方体を配置できます。
しかし、メインのタイムラインにスクリプトを書いた時は、ステージの中心点（左上）を基点に立方体が描画されてしまい、融通が利かなくなります。

----------------------------------------------

スクリプトの書き方やレイアウトは人によって様々です。
私は {　} で１行ずつ使って段落のようにする書き方が気に入っていますが、自動フォーマットでは、これがシンタックスエラーとして扱われることがあります。
しかし、この書き方は文法上は間違いではないので、シンタックスチェックをすると誤りはないと出てきます。
本当にシンタックスエラーがある時は、「ムービープレビュー」や「パブリッシュ」の際にエラーが報告されます。
何の報告もないのに上手く動かないようなら、エラーではなく、バグ（文法に間違いはないが、スクリプトの組み方に不具合がある）があるということです。

----------------------------------------------

ところで、アニメのサンプルスクリプトですが。
５フレームに１度だと、動きがちょっとカクカクしてしまいますね。
onClipEvent(enterFrame) の中の

　if( wait >= 5 )

を

　if( wait >= 3 )

くらいにしてみてください。３フレームに１度、回転の計算が行われます。
それから回転する角度ですが、これはいろいろ変えてみて、面白い角度やお好みの角度を見つけていただきたいのですが、

　//Ｘ軸回りに回転
　WireFrame( angle , -20 , 50 );

こんな角度もちょっと面白かったので、よろしければお試しください。
（白状しますと、＃２の角度は適当に作った試験用のデータでした　^^ゞ）
変数を２つ作って

　//Ｘ・Ｙ軸を同時に回転
　WireFrame( angle_x , angle_y , 50 );

このように２つの軸回りに同時に動かしても、面白い回り方になります。
同様にして３軸回りに同時に回転させることもできますけれど、やりすぎると妙な動きになって３Ｄ酔いしてしまうので、ほどほどにしましょう。

----------------------------------------------

今回は立方体だったのですが、配列変数 poly に入れたポリゴンの頂点データを変えると、他の立体もワイヤフレームで描画できます。
ただし、Draw_Polygon 関数はポリゴンが四角形であるものとして作ってあります。例えばピラミッドや角錐のように、三角形のポリゴンが入る立体は正常に描画できません。
三角形を描画できるようにするには、

　//四角形の左上の頂点から右回りに線を引く
　for( j = 1 ; j <= 3 ; j++ )

この部分を

　for( j = 1 ; j <= 2 ; j++ )

とします。頂点が減った分、線を引くループの回数を減らすということです。

ピラミッドは、底面が四角形、側面が三角形です。
四角形と三角形の描画関数を別々に作ると面倒ですから、底面を四角形のポリゴンではなく、対角線で分割した三角形２枚と考えます。これなら、三角形を描画する関数だけで済みます。
三角形は最も基本的な多角形で、全ての多角形はいくつかの三角形に分割できる点を利用した考え方です。
頂点が増えるため計算時間が増えるところが難点ですが、四角形と三角形が混在すると頂点データの持ち方も複雑になることから、全て三角形のポリゴンとして描画する３ＤＣＧソフトもあります。
複雑な立体を描画するなら、共有する頂点は計算しないといった、高速化を図る工夫も必要になってきます。
まあ、あまり複雑なものは Flash ではなく、３ＤＣＧソフトで作った方が早いですね。

余談ですが。
ファイルサイズが軽ければ処理も軽いとは限りません。
今回の作例はスクリプトだけなのでファイルサイズは小さいですが、三角関数や乗算といった複雑な計算を何回もやらせたり、巨大な配列を使ってメモリを消費していますので、処理はそれなりに重いです。
（更に複雑な３ＤＣＧもホイホイと描画できる今時のパソコンなら、大した負担ではありませんが・・・）
また、外部から画像を多数読み込むようなムービーは、ムービー本体の容量は軽いですが、読み込まれた画像がメモリを占有してしまい、読み込む画像が多すぎると、システムが遅くなるなどの深刻な症状が発生するほどの重いムービーになりかねません。
もっとも、ファイルが大きければ、それだけ最初からメモリやシステムリソースを大量に占有するということですので、一般的には処理は重いです。

ワイヤフレームのアニメや、計算で描画するＣＧの考え方は昔からあります。
ただ、お粗末な演算能力のＣＰＵと、何キロバイトという程度の少ないメモリしか積んでいなかったパソコンでは計算に時間がかかりすぎて、実用的ではなかっただけです。

今回はさしあたって、”立方体を回転して、ワイヤフレームで描画する”という、これ１つで完結したムービークリップをご紹介しました。
もう少し構造を整理すると、任意のポリゴンデータをワイヤフレームで表示するといった、汎用性の高いシンボルにもできますが、これはまたの機会にでも考えてみてください。
とりあえず、無事に表示して、いろいろ回転してみてください。
本来は２Ｄの絵しか扱えないできない Flash で３Ｄっぽい絵が表示できるというのは、ちょっと感動ですよ。

またまた長くなってすみませんでした。

お礼

お返事が遅くなってしまい申し訳ありませんでした。

2度のアドバイスありがとうございます。
やはりメインのタイムラインにかいていた事が原因でした＾＾；
今度はちゃんと真ん中に表示されるようになったので安心しました。
回転角度の設定も簡単にできるという事で、自分なりにいろいろ研究してみたいと思います。