第4回　Papervision3Dとtweensyを利用してアニメーションをつくっていく

さて最終回となる第4回は、Flashの定番、アニメーションを使ったサンプルをご紹介します。

Flashにおけるアニメーションの方法

Flashでオブジェクトを動かすには、大きく2種類の方法があります。

FlashIDEを使って、動く前のオブジェクトと動く後のオブジェクトを異なるフレームに置いてぱらぱら漫画のように見せる方法
Actionscriptを使用して、オブジェクトのプロパティ（位置や色等）をフレーム毎に変更する方法

前者はキャラクターの手足を動かすなど細やかな動き、後者は多くのオブジェクトを同時に動かすことが得意などそれぞれ特徴があり、必要に応じて使い分けます。

オープンソースのActionscriptのアニメーションライブラリは、非常に多く公開されており、開発も活発に行われています。各ライブラリのパフォーマンスチェックもさかんで、良い競争状態にあるようです。例えば、Jack Doyle氏のブログの記事では、多くのオブジェクトを同時に動かす場合のパフォーマンス比較を取り上げています。

wonderflでは、以下のアニメーションライブラリを使用可能です。

tweener, version: 1.31.74
TweenLite, ver10.09
TweenMax, ver10.09
tweensy, ver0.2.2

wonderflでtweensy入門

tweensyはその中でも最も新参のライブラリで、高速＆省メモリを特徴としています。

gihyo.jpの過去の特集「プログラマのためのFlash遊び方：第6回　動きのある Flashを作る（後編）」では、Tweenerを使ったサンプルが解説されています。

このサンプルと同じものを、tweensyを使用してサンプル「tweensy demo」をつくってみました。クリックする度に、色のついた円が「もわっ」と表示されます。

このコードは以下のとおりです。確認してみましょう。

 1. // tweensy version of this
 2. // http://gihyo.jp/dev/feature/01/flash-sdk/0006
 3. package{
 4.   import flash.display.Sprite;
 5.   import flash.events.MouseEvent;
 6.   import com.flashdynamix.motion.Tweensy;
 7.
 8.   public class Anime2 extends Sprite{
 9.     public function Anime2():void{
10.       // クリックイベントを監視する
11.       stage.addEventListener("click", clickHandler);
12.     }
13.
14.     private function clickHandler(event:MouseEvent):void {
15.       // 円を作成
16.       var s:Sprite = new Sprite();
17.       s.graphics.beginFill(Math.random() * 0x1000000);
18.       s.graphics.drawCircle(0, 0, 10);
19.       s.graphics.endFill();
20.       addChild(s);
21.
22.       // 円をクリックされた位置に移動
23.       s.x = event.stageX;
24.       s.y = event.stageY;
25.       s.scaleX = s.scaleY = 0;
26.
27.       Tweensy.to(s, {
28.         scaleX: 5,  // s の scaleX を 5 まで遷移
29.         scaleY: 5   // s の scaleY を 5 まで遷移
30.       }, 1 ); // 第３引数がduration
31.     }
32.   }
33. }

Tweenerのサンプルとの差分は、ライブラリのimport宣言をしている6行目と、27～30行目のみです。1秒間かけて、sというSpriteのscaleX,scaleYプロパティを5にしています（デフォルト値は1⁠）⁠。

なお、tweensyのドキュメントによれば、tweensy.toは以下の仕様となっています。

public static function to(instance:Object, to:Object, 
duration:Number = 0.5, ease:Function = null, delayStart:Number = 0,
update:Object = null, onComplete:Function = null,
onCompleteParams:Array = null):TweensyTimeline

つまり、Tweenerとは引数の与え方が異なり、durationやeaseは第二引数のオブジェクトに入れるのではなく、別の引数として与えます。

今回のサンプルでは使用している引数の数は3つですが、wonderflのfork機能を使用して、以下のような変更を加えながら理解を深めてみましょう。

トランジションを変更してみる（第4引数）
Tweenerの特集にあるようにアニメーション完了後に呼ばれるコールバック関数を設定してみる（tweensyではto関数の第7引数）

また、wonderflでtweensyを使っているコードも参考になります。確認してみてください。

Papervision3D x tweensy

それでは、tweensyと前回扱ったPapervision3Dをつかって、3DCGアニメーションをつくってみましょう。

以下に、前回のPapervision3Dのサンプル「papervision3d light and a flatshadedcube」をforkして、tweensyを使用しクリックした時に一時的にカメラを移動させる（視点を近づける）機能を追加した簡単なサンプル「papervision3d light and a flatshadedcube with tweensy」を作成しました。

コードは以下のとおりです。

 1. // forked from mash's papervision3d light and a flatshadedcube
 2. // forked from mash's papervision3d simple example (cube)
 3. package {
 4.   import flash.display.*;
 5.   import flash.events.*;
 6.
 7.   import org.papervision3d.cameras.Camera3D;
 8.   import org.papervision3d.events.InteractiveScene3DEvent;
 9.   import org.papervision3d.materials.*;
10.   import org.papervision3d.objects.*;
11.   import org.papervision3d.objects.primitives.Cube;
12.   import org.papervision3d.render.BasicRenderEngine;
13.   import org.papervision3d.scenes.Scene3D;
14.   import org.papervision3d.materials.utils.MaterialsList;
15.   import org.papervision3d.view.Viewport3D;
16.   import org.papervision3d.lights.PointLight3D;
17.   import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
18.
19.   import com.flashdynamix.motion.Tweensy;
20.
21.   public class PV3D_01 extends Sprite {
22.     private var camera    :Camera3D;
23.     private var scene     :Scene3D;
24.     private var viewport  :Viewport3D;
25.     private var renderer  :BasicRenderEngine;
26.
27.     private var cube      :Cube;
28.
29.     public function PV3D_01() {
30.       camera   = new Camera3D();
31.       camera.x = 0;
32.       camera.y = 0;
33.       camera.z = -1000;
34.
35.       scene    = new Scene3D();
36.       viewport = new Viewport3D( stage.stageWidth, stage.stageHeight, false, true );
37.       renderer = new BasicRenderEngine();
38.       addChild( viewport );
39.
40.       var light:PointLight3D = new PointLight3D(false);
41.       light.x = 0;
42.       light.y = 0;
43.       light.z = -1000;
44.
45.       var material :FlatShadeMaterial = new FlatShadeMaterial(light, 0xD7261C );
46.       material.interactive = true;
47.
48.       var materials :MaterialsList = new MaterialsList( { all : material } );
49.       cube = new Cube( materials );
50.       cube.x = 0;
51.       cube.y = 0;
52.       cube.z = 0;
53.       cube.addEventListener( InteractiveScene3DEvent.OBJECT_CLICK, function(e :InteractiveScene3DEvent) :void {
54.         Tweensy.to( camera, { z :camera.z+100 }, 0.3, null, 0, null, function() :void {
55.           Tweensy.to( camera, { z: -1000 }, 0.3 );
56.         });
57.       });
58.       scene.addChild( cube );
59.
60.       addEventListener( Event.ENTER_FRAME, onEnterFrame );
61.     }
62.
63.     public function onEnterFrame(e:Event): void {
64.       cube.rotationX += ( mouseX - stage.stageWidth /2 ) / 200;
65.       cube.rotationY += ( mouseY - stage.stageHeight/2 ) / 200;
66.
67.       renderer.renderScene( scene, camera, viewport );
68.     }
69.   }
70. }

Papervision3Dの3Dの世界で、クリックイベントを受け取るためのお約束は、以下の部分になります。

36行目：Viewport3Dの第四引数interactiveをtrueに
45～48行目：materialのinteractiveをtrueに

これらを設定して、cubeに対して以下のコードを記述すれば、クリックイベントを受け取れるようになります。

cube.addEventListener( InteractiveScene3DEvent.OBJECT_CLICK, Function )

クリックイベントのハンドラでは、Tweensyでカメラのz位置を移動し、その完了後にカメラ位置を元に戻しています（Tweensy.toの第7引数onCompleteに、cameraのzを元の位置:-1000に動かす処理を追加⁠）⁠。

まとめ

さて4回を通して、wonderflで可能なこと、オープンになっているActionscriptコードを閲覧＆forkしながらFlashを学習する方法についてご紹介しました。

今回ご紹介できなかったFlashの機能も、たくさんあります。FlashPlayer10から採用されているVector型、リアルタイム音声生成、ゲーム！などなど。これらは、実際にwonderflでチェックしてみてください。

wonderflのFlash開発者達が生み出すコードは、ユーザーページからfollowすることで自分のユーザーページにも表示されるほか、コードランキングやユーザーページのRSS等を使って追いかけることができます。

以上、4回にわたってwonderfl build onlineの世界をご紹介させていただきましたが、今後も、Flashに関するQ&Aなど機能強化を行いながら、フラッシュデベロッパーの採用コンテンツや、教育、出版など、他社とのコラボレーションも進めて行きたいと考えています。

wonderflをつかって試してみたいことがありましたら、お気軽にご連絡ください。

最後までお読みいただき、ありがとうございました。