Flex 4 (Gumbo) Fire Video on the Supper Club

March 13, 2009

Intro

Our group just finished the first part of the Beverly Hills Supper Club project. I realize that this is a sensitive area and lives were lost. The completed site will be a memorial to those loved ones that were lost in this tragic fire.

Here I demonstrated playing the Supper Club fire video on the Blender building skin. To see the demo just click the image below (drag the building with the mouse to rotate it and click the play video button to get the video to play):

Supper Club Video on a Blender Model

Supper Club Video on a Blender Model

Demo

Code (Only MXML File – Video too large for Google Code)

UTube

Discussion

It’s pretty easy. Just follow the posts below which explain everything in detail:

1. Learn about netStream and netConnection

Adding Video to a Papervision3D Curved Plan

2. Learn about using video in CS4

Putting Video on a CS4 (Flash 10) Primitive

3. Learn how to build a CS4 shaded model using drawTriangles

CS4 Flat Shaded Tie Fighter with drawTriangles

4. Learn about Light in Papervision3D

Adding Brightness to PV3D Light Source

5. Learn how to model in Blender

3D Modeling

6. Learn how to export your Blender models to Papervision3D and CS4

New Blender XML Exporter/PV3D XML Primitive

The big trick to this is to create a simple parameter that allows you to switch between the shaded model and video within the triangle creation loop.

playMyVideo = false or true;

Run Shade Code if false

….

Run Video Code if true

}else{

var vertices2:Vector.<Number>=new Vector.<Number>();
vertices2.push(dispVec[facesVec[curFace][0]].x, dispVec[facesVec[curFace][0]].y);
vertices2.push(dispVec[facesVec[curFace][1]].x, dispVec[facesVec[curFace][1]].y);
vertices2.push(dispVec[facesVec[curFace][2]].x, dispVec[facesVec[curFace][2]].y);

//Draw Video into Bitmap
bitmapData.draw( this.myVideo);
this.myVideo.attachNetStream ( this.myStream );

spObjImage.graphics.beginBitmapFill(bitmapData,null, false, false);
spObjImage.graphics.drawTriangles(vertices2);
spObjImage.graphics.drawTriangles(vertices2)

}

Another trick is handling rotations correctly. To do this you need to use subtraction of your previous position from you present position (since you are appending rotation in this example). So if you are rotating forward the difference is positive and if backwards the difference is negative.

private function boardMove(e:MouseEvent):void {

var locX:Number=prevX;
var locY:Number=prevY;
if(doRotate){
prevX=spBoard.mouseX;
prevY=spBoard.mouseY;
rotateObj(prevY-locY,-(prevX-locX),0);
e.updateAfterEvent();

}

Once you “get this in your head” you’ll undertstand “append” rotation in CS4 – otherwise it’s uncontrollably wild.

Now there’s on more “Super trick”. This application was originally created for an Adobe Air and was run on the desktop. So when you put it on the web the video will not work since it uses

spObjImage.graphics.drawTriangles(vertices2)

looks like a terrible sandbox issue, but wait a second didn’t we get video on a prim in the previous post on Putting Video on a CS4 (Flash 10) Primitive…

Yes we did???

But this time we don’t have indices and uv data … shouldn’t we just give up or get some expert to tell us what to do…nah, just replace indices and uv data with null and it works…please don’t ask me why. Remember, I said this was a trick.

spObjImage.graphics.drawTriangles(vertices2, null, null,TriangleCulling.NEGATIVE);

And Tada, video on the Supper Club.

Remarks

The full project will allow site visitors to leave messages in supper club rooms…building a flexpress flat-file data base to handle these messages is part of the TEI project… The advantage of the flat-file data base is that you can drop the program onto any server – hassle free and it works – no fancy install!

To see the entire code click the more button below:

Read the rest of this entry »


Putting Video on a CS4 (Flash 10) Primitive

March 10, 2009

Intro

Get ready to eliminate 1000′s of lines of Papervision3D code. That’s right! By using CS4 you no longer need the Movie Material class, the DisplayObject3D class, the Video Stream Material class, and a plethora of Triangle/UV parsing and math classes. It’s just amazing…in CS4 it’s so simple!

Video on a CS4 Primitive

Video on a CS4 Primitive

Demo

Source

YouTube


Discussion

Note: This discussion uses the code and results of two previous posts:

Adding Video to a Papervision3D Curved Plane

CS4 Super Primitive using Matrix3D

Placing video on the CS4 Super Prim developed in Chapter 3 of the book is very easy and only requires four steps.

  • Step 1: Import the net and media classes in to the Super Prim Class (see the post on CS4 Super Primitive using Matrix3D – this is your starter code)
  • Step 2: Declare the video, net Connection, and net Stream variables.

//net stream assets
private var myConnection : NetConnection;
private var myStream : NetStream;
private var myVideo : Video;

  • Step 3: Incorporate the loadMyVideo() method discussed in the previous post on Adding Video to a Papervision3D Curved Plane
  • Step 4: Create a bitmapData object and in the animation loop draw your video to that bitmapData object and attach the net stream to your video, as shown below:

//Draw Video into Bitmap
bitmapData.draw( this.myVideo);
this.myVideo.attachNetStream ( this.myStream );

The results yield a video being played among the various prims contained in the super prim. At this point you change the video by changing the file name inside your net Stream method (myStream.play(“assets/eternity.flv”)), but the constructor function could be easily changed to receive a video string locater.

A Little Extra

Also in Chapter 4 of the book, we show you how to put your webcam video on a prim. Below is a shot of my Guinea Pig Don Pedro who jumped into the screen to get his web cam video on a sphere.

Pig on a WebCam

Pig on a Web Cam

The code for this is included in the download above. But the explanation is in the book. To see the entire code download the source from the link above, or click the more button below:

Read the rest of this entry »


Adding Video to a Papervision3D Curved Plane

March 9, 2009

Intro

Note: This post lays the foundation for my next post which shows how to put video on a CS4 Primitive at

Putting Video on a CS4 Primitive

(here we do it for Papervision3D).

The real power of Papervision3D is its strong OOP (object oriented) structure. It lets you to do some very robust things, such as put video on any primitive. And in this post, you place a simple video on a curved Plane (developed in Chapter 3 of the book).

Video on a Curved Primitive

Video on a Curved Primitive

Demo

Source

Discussion

Here the basics on how it’s created.

At the heart of the program is the NetStream class that allows you to bring a video into Flash. This class will be discussed in greater detail in Chapter 11, which is on the Flash Media Server. The two important import classes are media and net classes, which contain Sound, Video, and net Connection methods. Armed with these you can instantiate your video net Connection and net Stream.

//net stream assets
private var myConnection : NetConnection;
private var myStream : NetStream;
private var myVideo : Video;

In addition to setting up Papervision3D and bringing in your curved video prim (which was covered in Chapter 3), you must load your video into your net Stream and then attach that net Stream to your instantiated video (myVideo) so you can play it on your curved prim.

private function loadMyVideo():void
{
//Set up Net Connection
myConnection = new NetConnection();
//Not on the media server
myConnection.connect(null);
myStream = new NetStream(myConnection);
//Set buffer time
myStream.bufferTime = 2;
//Set up My Stream for client
myStream.client = new Object();
//Instantiate the video
myVideo = new Video(320, 240);
myStream.play(“assets/eternity.flv”);
//Attach to local client side video
myVideo.attachNetStream(myStream);
}

One of the important tricks, shown in the code above, it to set your net Connection “connect” to null.

myConnection.connect(null);

This lets you stream from a local server (as opposed to a Flash Media Server). And as usual you run into the Flash security sandbox issue for streams coming from a server without a cross-domain policy. If you’ve been developing in Flash for a while you are familiar with this issue. And later in the book, you’ll learn how to use a little PHP to get around such problems.

After attaching your net Stream to your instantiated video object you can now place it on your curved prim.

videoMaterial = new VideoStreamMaterial(myVideo, myStream);
//videoMaterial.interactive = true;
videoMaterial.doubleSided = true;

//plane = new Plane(material applied to object, width, height, wSegments, hSegments);
planeCurve = new CurvedPlane(videoMaterial,32,24,8,8,10);
scene.addChild(planeCurve);

You’ll finally ready to use your Video Stream Material.

Place your video and stream in the Video Stream Material. Declare it double sided so when you spin your curved plane you see the video on the other side. Place that videoMaterial on your curved plane. And add that plane to your scene. Ta-da, video on a prim!


Google Map Wormhole in Gumbo Air (Flex 4)

January 26, 2009

Intro

I’m working on a huge Google map project for a seminar I’m doing next Tuesday, (and given that I have much time on my hands – right!), I could not resist creating this Google Map wormhole. The animation is created by iterating the map coordinates (longitude and latitude forward), and uses the Tunnel class developed by Petri Leskinen on Pixelero http://pixelero.wordpress.com/.

I don’t iterate uvtData as is done on Pixelero, but longitude and latitude coordinates of the Google map. The change is picked up by drawing the iterated movie into a bitmapdata object and throwing that on to the Tunnel class.

It’s actually map data coming at you (not just a jpeg being recycled).

googlewormhole

Google Wormhole in Gumbo

YouTube

Air Source Files Click Here

Discussion

Bringing Google map data into CS4 or Papervision3D is really easy, as discussed in an earlier post (Google Map on a Papervision Primitive) . In this case, I use Gumbo (Flex 4) not Papervision3D. Gumbo performs better than Papervision3D and does not distort button positions on standard Google control buttons (as Papervision3D does) – hurray!!!

Here are the steps required to get your Google map Wormhole working!

Step 1: Create a movie clip to add your Google map to

movie.graphics.beginFill(0xFFFFFF);
movie.graphics.drawRect(0,0,300,300);

Step 2: Add the Google map to your movie

movie.addChild(Application.application.map);
movie.graphics.endFill();

Step 3: Create a bitmapdata and draw your movie into it

_bmpd=new BitmapData(300,300, false);
_bmpd.draw(movie);

Step 4: Instantiate the Tunnel class (adding in the bitmapdata material) and add the tunnel to a canvas container on your Flex stage.

tunnel = new Tunnel(_bmpd, 800.0, 600.0, 32, 32);
mapHolder.rawChildren.addChild(tunnel);

Step 5: Redraw the movie and iterate Latitude and Longitude coordinates in the onEnterFrame animation loop.

_bmpd.draw(movie);

myLat=myLat-.0002*sin;
myLng=myLng-.0002;

To see the complete code click the more button below

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 »


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.