ブラウザだけでできる!wonderflではじめるFlash制作

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

この記事を読むのに必要な時間:およそ 4 分

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をつかって試してみたいことがありましたら,お気軽にご連絡ください。

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

著者プロフィール

大塚雅和(おおつかまさかず)

面白法人カヤックのWebプログラマー。数々のマッシュアップサービスで受賞するうちに,ついには「マッシュくん」と呼ばれるように。今回取り上げたwonderfl build onlineをはじめ,日本最大の音声コミュニティサイト「こえ部」をゼロから作ったスマッシュコンテンツ仕掛け人。

面白法人カヤックの「技術部」,「BM11」(研究開発ラボ)のメンバーとして在籍中。

URLhttp://www.kayac.com/member/ohtsuka
URLhttp://maaash.jp/