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

第3回 ライブラリ(Papervision3D)を利用してFlashをつくっていく

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

第3回では,wonderfl build online(以下,wonderfl)上でライブラリを使いながら,さらに高機能なFlashをつくっていきます。

高機能なFlashを効率よく作るには,ライブラリの使用は不可欠です。Actionscript3を使用したオープンソースのライブラリは豊富にありますので,先人の知恵を活かしていきましょう※1)。

※1
wonderflでは,ご要望に応じて対応ライブラリを増やしております。詳細はwonderflのサイトを参照ください。なお,ライブラリを利用する際には,ライブラリのライセンスにご注意ください。

wonderflでPapervision3D入門

車メーカーのキャンペーンサイトなどで,3DCGを使って商品のデザインを演出しているサイトを見かけたことはありませんか?

実は,高速な演算処理を可能したActionscript3の登場により,Flashを使うことで3DCGを操作できるようになっています。

Flashで3Dを扱うための代表的なライブラリとして,Papervision3Dがあります。現在も活発に開発を続けられており,パフォーマンス向上や機能追加が行われています。

wonderflでPapervision3Dを利用する

wonderflでは,現時点(3月4日)最新版のバージョン2.0.869を使用可能です。

以下のページに,シンプルなサンプルを用意いたしました。前回と同じようにFORK(開き,コードの下にある「FORK」ボタンをクリック)してください。

今回利用するサンプル:

自分のページに,FORKされたサンプルが表示されます。Flashの中央でマウスの位置に応じて回転する赤い立方体が見えましたか?

図1 赤い立体が表示される。マウスの位置に応じて回転する

図1 赤い立体が表示される

では早速,コードを見てみましょう。

リスト1 papervision3d simple example(cube)

01: package {
02:   import flash.display.*;
03:   import flash.events.*;
04: 
05:   import org.papervision3d.cameras.Camera3D;
06:   import org.papervision3d.materials.*;
07:   import org.papervision3d.objects.*;
08:   import org.papervision3d.objects.primitives.Cube;
09:   import org.papervision3d.render.BasicRenderEngine;
10:   import org.papervision3d.scenes.Scene3D;
11:   import org.papervision3d.materials.utils.MaterialsList;
12:   import org.papervision3d.view.Viewport3D;
13: 
14:   public class PV3D_01 extends Sprite {
15:     private var camera    :Camera3D;
16:     private var scene     :Scene3D;
17:     private var viewport  :Viewport3D;
18:     private var renderer  :BasicRenderEngine;
19: 
20:     private var cube      :Cube;
21: 
22:     public function PV3D_01() {
23:       camera   = new Camera3D();
24:       scene    = new Scene3D();
25:       viewport = new Viewport3D( stage.stageWidth, stage.stageHeight );
26:       renderer = new BasicRenderEngine();
27:       addChild( viewport );
28: 
29:       var materials :MaterialsList = new MaterialsList( { all : new ColorMaterial(0xD7261C) } );
30:         cube = new Cube( materials );
31:         scene.addChild( cube );
32: 
33:         addEventListener( Event.ENTER_FRAME, onEnterFrame );
34:       }
35: 
36:       public function onEnterFrame(e:Event): void {
37:         cube.rotationX += ( mouseX - stage.stageWidth /2 ) / 200;
38:         cube.rotationY += ( mouseY - stage.stageHeight/2 ) / 200;
39: 
40:         renderer.renderScene( scene, camera, viewport );
41:      }
42:   }
43: }

前回同様,コードを編集し,コンパイル後に生成されるFlashがどう変化するか,見ながら理解を始めてみます。

なお,最新のPapervision3Dのドキュメントは下記にあります。

見たことの無いクラス名等出てきたら,都度,参照しながら理解を深めましょう。

29行目に,16進数:0xD7261Cがあります。これを好みの色に変更してみましょう。リコンパイル後に表示されるFlashを見ると,立方体の色が変わっていますね。

この16進数はCubeの色を表していますが,コードを見ると,ColorMaterialというクラスに第一引数として色を渡し,ColorMaterialはその後MaterialsListとしてCubeをインスタンス化する時に引数として渡しています。つじつまが合いますね。

33~38行目辺りは前回も近いコードがあります。37,38行目の数字を変えると,立方体の回転速度が変わると思います。

コードを見ると,33行目で,Event.ENTER_FRAMEというイベントにaddEventListenerしてonEnterFrameという関数を結びつけています。

Event.ENTER_FRAMEは毎フレームの初めに起こるイベントですので,onEnterFrame関数は毎フレーム呼ばれ,cube(立方体)のrotationX,rotationY(変数名の英語の意味のとおり,X,Y軸の周りの角度をあらわす)を変更しています。

著者プロフィール

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

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

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

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

コメント

コメントの記入