Video in PaperVision 3D - PART 2
Aplha Channel 3D Video
This example shows how to display a video that contains and alpha channel on it.
Download Soruce Files
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.text.TextField;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.VideoStreamMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.objects.primitives.Sphere;
public class Video_alpha_channel extends PaperBase {
protected var sceneWidth:Number;
protected var sceneHeight:Number;
// Polygon that video will be textured on
private var videoPlane:Plane;
private var netConnection:NetConnection;
private var netStream:NetStream;
// Material used for video textures
private var videoStreamMaterial:VideoStreamMaterial;
// The video object that gets plug in to the VideoStreamMaterial
private var video:Video;
private var skyBox:Sphere;
public function Video_alpha_channel(){
sceneWidth = stage.stageWidth
sceneHeight = stage.stageHeight;
init(sceneWidth,sceneHeight);
}
override protected function init2d(): void {
var video1:Sprite = makeButton('Restart Video');
video1.addEventListener(MouseEvent.CLICK, playVideo1);
video1.buttonMode = true;
addChild(video1);
// Create button graphics
function makeButton(title:String) : Sprite {
var label:TextField = new TextField();
label.textColor = 0xFFFFFF;
label.text = title;
label.height = 30;
label.selectable = false;
var bg:Sprite = new Sprite();
bg.graphics.beginFill(0x000000);
bg.graphics.drawRect(0,0,label.width,20);
bg.alpha = .8;
bg.addChild(label);
bg.addEventListener(MouseEvent.MOUSE_OVER, onState );
bg.addEventListener(MouseEvent.MOUSE_OUT, offState );
function onState(e:Event) : void {
label.textColor = 0x000000;
bg.graphics.clear();
bg.graphics.beginFill(0xFFFFFF);
bg.graphics.drawRect(0,0,label.width,20);
}
function offState(e:Event) : void {
label.textColor = 0xFFFFFF;
bg.graphics.clear();
bg.graphics.beginFill(0x000000);
bg.graphics.drawRect(0,0,label.width,20);
}
return bg;
}
}
override protected function init3d(): void {
videoMaterial(); // Create video & video texture
// Match aspect ratio of the video 480w , 360h
videoPlane = new Plane( videoStreamMaterial, 480, 360, 10 , 10 );
videoPlane.scale = 1;
default_scene.addChild(videoPlane);
// Wire texture for background Sphare
var wireTexture:WireframeMaterial = new WireframeMaterial(0x0000FF,100,1);
wireTexture.doubleSided = true;
skyBox = new Sphere(wireTexture, 8096,24,24);
default_scene.addChild(skyBox);
}
public function videoMaterial() : void {
var customClient:Object = new Object();
customClient.onMetaData = metaDataHandler;
netConnection = new NetConnection();
netConnection.connect(null);
netStream = new NetStream(netConnection);
netStream.client = customClient;
// Alpha channel needs to be included in video footage
netStream.play( "assets/video_plus_alpha.flv" );
// Match the pixel size of the video
video = new Video(480,360);
video.smoothing = true;
video.attachNetStream(netStream);
video.addEventListener("complete", playVideo1);
/* For transpartent video set the final paramiter 'transparent' to ture
public function VideoStreamMaterial
( video:Video,
stream:NetStream ,
precise:Boolean = false,
transparent:Boolean = false )
NOTE: Older versions of papervision 2.0 do not pass the transparent parameter correctly.
You may need to edit the class or get the latest version of the papervision packages */
videoStreamMaterial = new VideoStreamMaterial(video, netStream, true, true);
videoStreamMaterial.doubleSided = true;
}
private function metaDataHandler(infoObject:Object):void {
trace("metaData");
}
// Restart video
private function playVideo1(e:Event):void{
netStream.play( 'assets/video_plus_alpha.flv' );
}
override protected function processFrame(): void {
// Rotate sphere containing earth texture
skyBox.rotationX += 3;
skyBox.rotationY += 1;
// Move alpha video based on mouseX and mouseY location
videoPlane.z = - ((mouseY / sceneHeight) * 800);
videoPlane.rotationY = - ((mouseX / sceneWidth) * 360);
}
}
}
|