3D Ribbon class for Flash Player 10

Standard

Following on from my previous post about the new 3D features of Flash Player 10, I decided to take a look at a more advanced way of drawing 3D graphics in AS3, using the new drawTriangles method of the updated Graphics class.

This demo was my attempt at creating a version of Soulwire’s Papervision3D Ribbon class using native Flash Player 10 code, and while the demo doesn’t support the more advanced features of the Papervision version, the final result does look quite similar. In fact, if you take a look at the code you’ll see just how simple 3D can be when using Flash 10.

Using drawTriangles to render 3D graphics is fairly straight forward, requiring you to pass in a number of different Vectors to describe the geometry of a 3D mesh. A Vector is Flash 10’s new typed array class, and is very useful for making sure that an array contains only one type of data. The drawTriangles method accepts four parameters, three of them Vectors, but I won’t go into this in detail here as there are many good articles that explain it far better than I can, such as this excellent introduction to drawTriangles by Ryan Taylor.

What I will note is that from my tests and what what I have read, it seems that drawTriangles (while very useful) is best suited to quick and simple 3D effects. If you’re looking to render light sourced materials with proper z-sorting, or more than one texture map per object, then you will probably need to write your own classes to do just that, much as this post by Neuro Productions explains.

In fact, what really makes 3D in Flash 10 shine are the new utility classes such as Matrix3D, Vector3D and Utils3D. If you look at the code for the demo below you will see that there is really not much complex maths being used, instead it is mostly taken care of with these new classes.ย  And it is these classes which new engines like PapervisionX or Away3DLite will most likely be using to boost speed and improve visual quality in Flash Player 10.

demo6-ribbons3d

Click here to view the demo and source code

Advertisements

3 thoughts on “3D Ribbon class for Flash Player 10

  1. Hey Matt, Can you post a simple example of using your ribbon3D class in CS5? Should this do something? I just get a white screen with no errors…

    var _container=new MovieClip()
    addChild(_container)
    var ribbon:Ribbon3D = new Ribbon3D(_container);
    var _transform = new Matrix3D();
    ribbon.update(_transform);

    • Matt

      Hi cronoklee, sorry for the late reply, but here’s a bit more info on the Ribbon3D class…

      From the looks of it, the code you’ve written is correct, but you just need a few more lines to update the ribbons x,y and z properties every frame. The transform matrix that you pass to ribbon.update() is just used to describe how and where the ribbon should be drawn in 3D space, the actual lines are drawn by setting the x, y and z properties of the ribbon and then calling ribbon.update().

      Hope that makes sense, try pasting the following code on the first frame of a new Flash CS5 project, I haven’t tried it in CS5, but hopefully it should work ๐Ÿ™‚

      //imports
      import flash.display.Sprite;
      import flash.events.Event;
      import flash.geom.Matrix3D;
      import flash.geom.Vector3D;

      //create container for ribbon
      var _container:Sprite = new Sprite()
      _container.x = stage.stageWidth / 2;
      _container.y = stage.stageHeight / 2;
      addChild(_container)

      //create ribbon and transorm matrix
      var _ribbon:Ribbon3D = new Ribbon3D(_container);
      var _transform:Matrix3D = new Matrix3D();

      //start enter frame loop
      addEventListener(Event.ENTER_FRAME, doEnterFrame);

      //enterframe loop
      function doEnterFrame(e:Event):void
      {
      //clear the graphics
      _container.graphics.clear();

      //update ribbon x,y and z properties
      _ribbon.x = _container.x – mouseX;
      _ribbon.y = _container.y – mouseY;
      _ribbon.z = _container.y – mouseX;

      //rotate the transform matrix
      _transform.appendRotation(1, Vector3D.Y_AXIS);
      _transform.appendRotation(1, Vector3D.X_AXIS);
      _transform.appendRotation(1, Vector3D.Z_AXIS);

      //pass new transform matrix to ribbon
      _ribbon.update(_transform);
      }

      • Ah yes – makes sense. I thought the x y z points were just for animating but obviously they default to 0,0,0 so the ribbon is invisible! Thanks a lot for the reply ๐Ÿ™‚

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s