Clickable Button Panel Primitive

October 27, 2008

Intro

Custom primitives are unexplored territory in Papervision. And they pack a big punch. To illustrate the point, consider the following custom clickable button panel primitive. From the image below you see 8 planes in two rows. Typically you rez planes on the stage one at a time and keep track of them individually as they rotate.

But with a custom primitive it’s all one primitive, which reduces the number of primitives you have to keep track of to one.

Click the image below to see a demo.

Clickable Custom Button Panel

Clickable Custom Button Panel

In the demo above, when you click on a plane a URL is brought up in the browser. Each plane calls a different URL.

Even cooler – you have total control over the number of rows, columns and spacing. The custom primitive is called

MultMatPlane

You place it in the primitives folder and rez it to the state the same way you would any other primitive and adjust its properties in the same way as well.

The primitive function look like this

MultMatPlane( materials:MaterialsList, myGap:Number=0,horizNum:int=1, vertiNum:int=1, width:Number=0, height:Number=0, segmentsW:Number=0, segmentsH:Number=0, initObject:Object=null )

The adjustable parameters are

  • materials
  • gap
  • column number
  • row number
  • image width
  • image height
  • width segments
  • height segments

Of course the important part in changing row and column parameter is to have the materials labeled correctly in the materials list. If the materials aren’t in the materials list – you won’t see them. That makes sense, but I’ve already made the mistake 100 times. And you should probably know about it. More on how this works below.

Note of Caution

One more thing – late last night this primitive didn’t like my Firefox pop up blocker (well at least not at 2 o’clock in the morning) – so keep an eye on that!

Any primitive as new as this one has to go through a few cycles of work to make sure it is fully functional for web use; this one has not been through those cycles yet!!! But it is being used successfully on a website – which is encouraging. The purpose of this tutorial is to demystify how such primitives are built – not beat all the bugs out. That comes with time and use.

Web Stuff

Demo: http://www.professionalpapervision.com/demos/web/buttonpanel/

Code: http://code.google.com/p/flex3cookbook1/downloads/list

(Download ButtonPanelPrimitive.zip from the list)

Youtube:

How it was made

Building this primitive was really easy. Here are the steps and stuff to look out for:

  1. Make a copy of the plane primitive and rename its class and constructor function to MultMatPlane (or whatever you want to call it)
  2. In the public class MultMatPlane, add the new properties that you need such as row number, column number, materials, … whatever you want.
  3. Then make sure those variables are carried over in your constructor function.
  4. Open up the cube primitive and see how the different sides were made. You will need to follow the same pattern, but generalize it for multisides and different geometries.
  5. After porting the cube code that you need, create and call the buildMultiPlane function – this is the heart of your class. It iterates through your column and row sizes placing them on the screen, shown below:

private function buildMultiPlane(myGap:Number, horizNum:Number, vertiNum:Number, width:Number, height:Number ):void
{

for(var n:int=0; n <vertiNum; n++){

for(var m:int=0; m <horizNum; m++){

var myMaterial:String = “myMat”+””+n+””+m;

trace(“myMat”+””+n+””+m);

buildPlane( myMaterial, myGap, m, n, horizNum, vertiNum, width, height) ;
trace(“makingPlane”+””+n+””+m);
}
}

5. Keep the code very similar to the cube code port, only replace all u variables with x variables and v variables with y variables.

6. And here is the big trick. Replace the plane vertices.push( new Vertex3D( x, y, 0 ) ) with the cube primitive technique for dealing with vertices as shown below. Make sure you put x in for u and y in for v.

var vertex:Vertex3D = new Vertex3D();

vertex[ “x” ] = x;
vertex[ “y” ] = y;
vertex[ “z” ] = 0;

vertices.push( vertex );
planeVerts.push( vertex );

And that is pretty much it! A little bit of work here, but now you are set up to do so much more. Like make single primitive carousels, images balls, and terrains. An all-in-one primitive. How cool is that?

Material List

So how do your get different images on the different planes in your custom primitive?

Use a materials list!

Here is an example of such a list from your main code:

var materialsList:MaterialsList = new MaterialsList();
materialsList.addMaterial(myBitmapFileMaterial00, “myMat00″);
materialsList.addMaterial(myBitmapFileMaterial01, “myMat01″);
materialsList.addMaterial(myBitmapFileMaterial02, “myMat02″);
materialsList.addMaterial(myBitmapFileMaterial03, “myMat03″);
materialsList.addMaterial(myBitmapFileMaterial10, “myMat10″);
materialsList.addMaterial(myBitmapFileMaterial11, “myMat11″);
materialsList.addMaterial(myBitmapFileMaterial12, “myMat12″);
materialsList.addMaterial(myBitmapFileMaterial13, “myMat13″);

The big thing was coming up with a naming conventions. For the cube it is top, right, left, top,…

But in this case I just numbered them by row and column, where myMatt00 is the lower left most button.

Interactivity

Making the plane interactive is not difficult. Give each of your materials a name and use a switch case to call that name when a plane is clicked on:

Name it like this!


myBitmapFileMaterial00.name = “myMat00″;

Call it like this!

switch(param1.face3d.material.name)
{
case “myMat00″:
{
navigateToURL(new URLRequest(“http://www.bible.com/&#8221;), “_blank”);
break;
}// end case …

That’s pretty much it! To check out the rest of the code by downloading it from the link above. And the MultMatPlane code is given below.

MultMatPlane Code

Get the MultMatPlane code under the more tab below. Note: The code is not fully documented. I’ll take care of that before the book comes out.

Read the rest of this entry »


Creating a Spherical Panorama in Papervision

October 25, 2008

Panoramas are both fun and easy to create in Papervision. You rez a cube or sphere on the stage and put an image on it. You then place a spinning camera in the center. That’s all there is to it!

So what’s the secret behind a great panorama?

The secret of making great panoramas is in using great images. In an upcoming series Amanda Verette (one of my graphic designers) will be posting a series of video tutorials on how to create fantastic spherical images using a fish eye lens and various photo editing tools. But until then I’ll explain the Papervision code.

Here’s one of Amanda’s spherical photos. Click on the image to see the Papervision Panorama in action.

Spherical Panorama Image

Spherical Panorama Image

Demo: http://www.professionalpapervision.com/demos/web/sphericalpano/

Source: SphericalPano.zip

YouTube

Coding a Panorama is simple. Download the full source code by clicking the source link above, and click the more button below to see how it works.

Read the rest of this entry »


3D Video Test 2 Results and Tube Primitive

October 22, 2008

I was in the process of designing our next 3D Video experiment when I showed the results of the last experiment to one of my graphic designers. He freaked out – so I’ve decided to post it. I think it’s all the info coming in at once that got to him. This may look confusing to you as well, but it got us to our next design which is the goal of such test. I was happy!

Click on the image below to check it out!

3D Video Test 2 Results on a Tube

3D Video Test 2 Results on a Tube

To see the test click on the image above or this link.

We processed all the videos in Adobe After Effects by lining them all up side-by-side and making a long flv. Then we played that flv on a tube primitive. Scroll your mouse along the screen and the video will move with the mouse.

Our next experiment uses what we call a head primitive and places the videos on cross planes to produce a holographic effect.

The Tube that we used is a primitive that we created by taking off the top and bottom of a cylinder (the lids gave us too many artifacts). I have included the tube primitive code below since it is not found in Papervision.

Read the rest of this entry »


Putting Stars and More into a Skybox (Source)

October 20, 2008

Introduction

A skybox is a simple device. Just a large low polygon cube that you put six panoramic images on-one for each side of the cube. Putting particles in the sky box adds a new dimension of fun and interactivity. But Papervision’s ParticleMaterial class only has two particles-a circle and square. So I added some of my own;

Stars – bursts – wedges – gears – polys

Stars and More!

Stars and More!

Below is a video on how I created this, demo site, source code download, background on its creation and source code swicth case that I added to Papervision’s ParticleMaterial class.

VIdeo Demo Code

YouTube:

Demo:

http://www.professionalpapervision.com/demos/web/skyboxstars/

Source: (SkyBoxandStars)

http://code.google.com/p/flex3cookbook1/downloads/list

Background

Recently, Seb Lee-Delisle did a skybox example in his presentation on Papervision3D Simplified-great presentation!

I downloaded his source code for the skybox and it didn’t work (probably because I was using a newer version of Papervision). So I rewrote it and added a few new features;

1. The planets now return when the cube gets too far out.

2. I added to the particle class. It now includes more than just square and circle particles. It has,

Stars – bursts – wedges – gears – polys

3. I got rid of the else if statements and added a switch case.

4. And I added multiple type planets to the skybox – starts – circles – burst. You can add more if you want.

You can catch Seb’s video and source code from his blog at

http://www.sebleedelisle.com/?p=263

I also encourage you to donate to Seb’s cancer run if you use his (or this post) material. I did!

http://www.sebleedelisle.com/?p=274

In my download, I included all the source code even the Papervision classes needed for the project to run.

Read the rest of this entry »


3D Video Test 2 (First Movie)

October 16, 2008

As part of the book we are creating a 3D video system. And we finally had our first successful test today at NKU. Matt Smith was on hand from UC to offer some video consulting advice. The webcams were set up hexagonally on a circular table. And hooked to six separate computers. We will be simplifying this configuration using the flash media server in the future. See the images below;

Six Webcams and computers.

Six Webcams and computers.

Six Webcams hexagonally.

Six Webcams aligned hexagonally.

The purpose of this test was

  • to get camera field of view (45 degrees)
  • do a simple test for stitching
  • get a feel for what we were going to see
  • discuss video surface playback options
  • flush out issues
  • do a simple scripted story
  • and train staff in recording 3D video

The test went well. The story we filmed was “kill a chicken to spank a monkey”. There were for small characters on the stage – a chicken, a farmer, a monkey, and a pig. They were moved around using a pencil as I talked through the scene. We are stitching the videos together tomorrow and will post the finished product soon.

Papervision has great potential. And as you can see we are having a blast with it!


Follow

Get every new post delivered to your Inbox.