Author Archive for CharliePage 3 of 9

Advanced Interactivity (Without InteractiveScene3DEvent)

Published

on November 26, 2009

in Actionscript 3 Papervision, Examples, Source Code, Tutorials and TweenLite

. 6 Comments

There are multiple ways of accomplishing any task. With papervision that statement holds true. When you want to interact with 3D objects one way we have found works very well is to apply the MouseEvent's to the textureFile and bypass the InteractiveScene3DEvent all together.

Here are a few things to remember when working with anything interactive in Papervision

1) Always set your ViewPort to interactive
2) Always set your Material to interactive
3) Set your Material animation to "true" if you want to see the material update
4) Be sure that your render is running so you can see your material update

Here is some sample code that shows the basic building blocks of an animated / interactive papervision object:

PLAIN TEXT

Actionscript:

//Viewport set to interactive
viewport.interactive = true;
//Create your symbol - can be a class or MovieClip exported in your library
var textureMC:TextureSymbol = new TextureSymbol();
textureMC.id = i;
textureMC.clickButton.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
//Create your movie Material - animated / interactive set to true
var movieMat:MovieMaterial = new MovieMaterial(textureMC, true, true);
movieMat.doubleSided = true;
movieMat.interactive = true;
movieMat.smooth = true;

This approach is nice because you can deal with native Flash events.

Here is the full class:

PLAIN TEXT

Actionscript:

package
{
import flash.events.Event;
import flash.events.MouseEvent;
import gs.easing.Quint;
import gs.TweenLite;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.view.BasicView;
import TextureSymbol;
/**
* ...
* @author Charlie Schulze, charlie[at]woveninteractive[dot]com
*/
public class Main extends BasicView
{
protected var cube:Cube;
protected var interactiveMats:Array;
protected var materialsList:MaterialsList;
public function Main():void
{
super();
init();
}
protected function init():void
{
createChildren();
commitProperties();
startRendering();
}
protected function createChildren():void
{
//Set the viewport to interactive
viewport.interactive = true;
//Create Materials:
materialsList = new MaterialsList();
interactiveMats = ["front", "back", "top", "bottom", "left", "right"];
for (var i:int = 0; i <interactiveMats.length; i++)
{
//Create the texture symbol from the library
var textureMC:TextureSymbol = new TextureSymbol();
textureMC.id = i;
textureMC.clickButton.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
//Create the MovieMat
var movieMat:MovieMaterial = new MovieMaterial(textureMC, true, true);
movieMat.doubleSided = true;
movieMat.interactive = true;
movieMat.smooth = true;
materialsList.addMaterial(movieMat, interactiveMats[i]);
}
//Create Cube
cube = new Cube(materialsList, 100, 100, 100);
//Add cube to the scene
scene.addChild(cube);
}
protected function onMovieMatClicked(evt:MouseEvent):void
{
var randomX:Number = Math.random() * 600 - 300;
var randomY:Number = Math.random() * 200 - 100;
TweenLite.to(cube, 1, { x:randomX, y:randomY, ease:Quint.easeInOut});
}
protected function commitProperties():void
{
//Set the properties of our camera
camera.zoom = 200;
camera.y = 1000;
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
cube.yaw(2);
}
}
}

Delicious Digg This Post Facebook Stumble This Post

Animation Using TweenLite

Published

Charlie

on November 26, 2009

in Actionscript 3.0, Papervision 3D, Source Code, Tutorials and TweenLite

. 1 Comment

In this tutorial we're going to use TweenLite to move a cube around. This will teach you basics of animation, and how to use TweenLite.

In this example our solid red cube is trying to stay inside our green wireframe cube. Every time the red cube gets itself positioned completely inside the green cube, the green cube moves.

TweenLite is the package which is smoothly moving the red cube around. The TweenLite package is also firing the event to move the green cube when the tween is complete.

1: To start off, you'll need TweenLite. You can download it here if you don't already have it (also included in the source download "gs" folder): http://blog.greensock.com/tweenlite/

2: Import tweener - Add this line to your imports:

PLAIN TEXT

Actionscript:

import gs.TweenLite;

3: Add a Tween. You can add tweens to any parameter of any object. The TweenLite package will gradually change any parameter in your code to a new value over time, so only numeric values will work nicely.

To add a tween, we use the code:

PLAIN TEXT

Actionscript:

//TweenLite.to(objectToAnimate, time, { property:newValue, property:newValue, ease:Quint.easeInOut, onComplete:functionToCall} );
//Your code will end up looking something like this
TweenLite.to(cube, 2, { x:xp, z:yp, ease:Quint.easeInOut, onComplete:randomize } );

The line above will add a tween. This tween will change the values "x" and "y" on the object "cube" to 1000 and 500 respectively. It will smoothly change the values over a period of 2 seconds and once the tween is complete and the cube.x is 1000 and cube.y is 500, it will trigger the "randomize" function.

Experiment with more ways to tween your objects. You can apply tweens to anything, including cameras, lights, rotations, sizes and camera zooms. Any numerical value you can think of.

PLAIN TEXT

Actionscript:

package
{
import gs.easing.Quint;
import gs.TweenLite;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
/**
* ...
* @author Charlie Schulze, charlie[at]woveninteractive[dot]com
*/
public class Main extends BasicView
{
protected var cube:Cube;
protected var cube2:Cube;
protected var mat:FlatShadeMaterial;
protected var mat2:WireframeMaterial;
protected var plane:Plane;
public function Main():void
{
super();
init();
}
protected function init():void
{
createChildren();
commitProperties();
randomize();
startRendering();
}
protected function createChildren():void
{
//Create Materials:
mat = new FlatShadeMaterial(new PointLight3D(), 0xFFFFFF, 0xFF0000);
mat2 = new WireframeMaterial(0x00FF00);
//Create 3D Objects
plane = new Plane(null, 2000, 2000, 10, 10);
cube = new Cube(new MaterialsList( { all: mat } ), 100, 100, 100);
cube2 = new Cube(new MaterialsList( { all: mat2 } ), 100, 100, 100);
//Add objects to the scene
scene.addChild(plane);
scene.addChild(cube);
scene.addChild(cube2);
}
protected function commitProperties():void
{
//Set properties of our plane
plane.material.lineColor = 0x777777;
plane.material.doubleSided = true;
plane.pitch(90);
plane.y = -50;
//Set the properties of our camera
camera.x = 0;
camera.z = 1000;
camera.y = 1000;
}
public function randomize():void
{
var xp:Number = (Math.random() * 2000) - 1000;
var yp:Number = (Math.random() * 2000) - 1000;
cube2.x = xp;
cube2.z = yp;
//When complete it calls this method again
TweenLite.to(cube, 2, { x:xp, z:yp, ease:Quint.easeInOut, onComplete:randomize } );
}
}
}

Delicious Digg This Post Facebook Stumble This Post

Basic Mouse Interaction (v2)

Published

Charlie

on November 23, 2009

in Actionscript 3 Papervision, Examples, Papervision 3D, Source Code and Tutorials

. 10 Comments

In the previous tutorial we showed you how to load a 3D model into Papervision. Now we are just going to show you how to rotate that model based off of your mouse movements.

The process is very simple. Since our render function is like the engine of our animations that is where we will add the code for the rotation. Later we'll cover animating objects via TweenLite / TweenMax.

PLAIN TEXT

Actionscript:

override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
cow.rotationY = stage.mouseX / sceneWidth * 360
}

When you first start moving objects in Papervision you may notice that rotationY and rotationX do not act as you might think they would. In flash you would think of something on a Y axis as going up and down and X as left and right. With Papervision RotationY rotates and object on its Y axis (left /right) and RotationX rotates an object on it's X axis (top / bottom).

Here is the full code:

PLAIN TEXT

Actionscript:

package
{
import flash.events.Event;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
import org.papervision3d.view.BasicView;
public class Main extends BasicView
{
protected var cow:DisplayObject3D;
protected var materialList:MaterialsList;
protected var bitmapFileMaterial:BitmapFileMaterial;
protected var sceneWidth:Number;
protected var sceneHeight:Number;
public function Main()
{
super();
init();
createChildren();
startRendering();
}
protected function init():void
{
sceneWidth = stage.stageWidth
}
public function createChildren():void
{
//Setup the materials manually (sometimes the dae handles this without issue)
materialList = new MaterialsList();
bitmapFileMaterial = new BitmapFileMaterial("daeModel/Cow.png");
materialList.addMaterial(bitmapFileMaterial,"all");
//Create the new Collada Object with materialList
cow = new Collada("daeModel/cow.dae",materialList);
///Set some properties
cow.moveDown(150);
cow.scale = 3;
cow.pitch( -10);
//Add to scene
scene.addChild(cow);
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
cow.rotationY = stage.mouseX / sceneWidth * 360
}
}
}

Delicious Digg This Post Facebook Stumble This Post

Loading Complex Models (v2)

Published

Charlie

on November 23, 2009

in Actionscript 3.0, Loading Complex Models, Papervision 3D, Source Code and Tutorials

. 10 Comments

If you work long enough in Papervision you will eventually have to deal with loading complex models into Papervision. This is one of the more difficult things to do but not because of the actionscript or Papervision coding. Whenever we have had problems with models in the past; it has always been an issue model's source.

Hopefully you are one of the few blessed enough to have an resource available to modify and create Papervision ready models for you. If not, just know you're not alone.

Issues with 3D models aside, the code for loading a 3D model into Papervision is extremely easy. It is as simple as loading a plane, cube, or cone.

PLAIN TEXT

Actionscript:

package
{
import flash.events.Event;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
import org.papervision3d.view.BasicView;
public class Main extends BasicView
{
protected var cow:DisplayObject3D;
protected var materialList:MaterialsList;
protected var bitmapFileMaterial:BitmapFileMaterial;
public function Main()
{
super();
createChildren();
startRendering();
}
public function createChildren():void
{
//Setup the materials manually (sometimes the dae handles this without issue)
materialList = new MaterialsList();
bitmapFileMaterial = new BitmapFileMaterial("daeModel/Cow.png");
materialList.addMaterial(bitmapFileMaterial,"all");
//Create the new Collada Object with materialList
cow = new Collada("daeModel/cow.dae",materialList);
//Set some properties
cow.moveDown(150);
cow.scale = 3;
cow.pitch( -10);
//Add to scene
scene.addChild(cow);
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
//Rotate
cow.yaw(1);
}
}
}

Once you have a good model, in papervision all you need for this to work properly is to:
1) Create the model new Collada()
2) Create the model's texture new BitmapFileMaterial()
3) Create and add the bitmap material to a materials list new MaterialsList()
4) Add the model to the scene scene.addChild(cow)
5) Render startRendering()

It's too much to cover all the issues you may run into here but if you're up for it open up the cow.dae file. You'll find it is just a lot of XML. Go through it, see if you can find the texture file.

Delicious Digg This Post Facebook Stumble This Post

Basic Texturing (v2)

Published

Charlie

on November 22, 2009

in Actionscript 3 Papervision, Actionscript 3.0, Papervision, Papervision 3D, Source Code and Tutorials

. 4 Comments

basic-texturing

Even if you had a chance to look at Getting started using BasicView.as this tutorial provides another example of basic texturing in Papervision.

In Papervision for the most part you have objects (planes, cubes, cones, 3D Models, etc) and then you have the textures or materials that you add to these objects. Think of it as getting a brand new iPhone and then buying a case or skin for that iPhone. We are essentially doing the same thing in principle - we have our object a cone (iPhone) and a material a bitmapMaterial (iPhone skin).

PLAIN TEXT

Actionscript:

package
{
import flash.events.Event;
import org.papervision3d.view.BasicView;
import org.papervision3d.objects.primitives.Cone;
import org.papervision3d.materials.BitmapFileMaterial;
public class Main extends BasicView
{
protected var cone:Cone
protected var bitmapMaterial:BitmapFileMaterial;
public function Main()
{
super();
createChildren();
startRendering();
}
public function createChildren():void
{
//Create a new 3D object
bitmapMaterial = new BitmapFileMaterial("images/ourtex.jpg")
cone = new Cone(bitmapMaterial, 20, 200);
//Set some properties
cone.scale = 4;
cone.pitch( -10);
//Add to scene
scene.addChild(cone);
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
//Rotate
cone.yaw(3);
}
}
}

As you can see from the code above we have a cone and a bitmap texture.

Delicious Digg This Post Facebook Stumble This Post

Getting started using BasicView.as

Published

Charlie

on November 22, 2009

in Actionscript 3 Papervision, Actionscript 3.0, Papervision, Papervision 3D, Source Code and Tutorials

. 9 Comments

basicview-image

In a previous tutorial (Creating a Papervision Base Template) we created a base Papervision template that we could re-use. Now however Papervision includes a form of this base template called BasicView.as

With just a few lines of code you're up and running. Here is the very simple / basic use of BasicView.as:

PLAIN TEXT

Actionscript:

package
{
import flash.events.Event;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
/**
* ...
* @author Charlie Schulze, charlie[at]woveninteractive[dot]com
*/
public class Main extends BasicView
{
protected var plane:Plane;
protected var colorMaterial:ColorMaterial;
public function Main():void
{
super();
//Create one material and make it doublesided
colorMaterial = new ColorMaterial(0xFF0000, .5);
colorMaterial.doubleSided = true;
//Create a plane using the colorMaterial
plane = new Plane(colorMaterial, 100, 100);
scene.addChild(plane);
//Start the rendering
startRendering();
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
//Rotate the plane
plane.yaw(2);
}
}
}

This very simple example you will just see a single light red plane rotating.

That is all you need to do to get started in Papervision. Test it out. Don't forget to add your 3D objects to the scene.

PLAIN TEXT

Actionscript:

scene.addChild(plane);

Here is what the BasicView.as class looks like:

PLAIN TEXT

Actionscript:

package org.papervision3d.view
{
import org.papervision3d.cameras.SpringCamera3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.cameras.CameraType;
import org.papervision3d.cameras.DebugCamera3D;
import org.papervision3d.core.view.IView;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
/**
*
* BasicView provides a simple template for quickly setting up
* basic Papervision3D projects by creating a viewport, scene,
* camera, and renderer for you. Because BasicView is a subclass of
* Sprite, it can be added to any DisplayObject.
*
*
*
*
*
* Example:
*
* <pre><code>
* var width:Number = 640;
* var heigth:Number = 480;
* var scaleToStage:Boolean = true;
* var interactive:Boolean = true;
* var cameraType:String = Camera3D.TYPE;
*
* var myBasicView:BasicView = new BasicView(width, height, scaleToStage, interactive, cameraType);
* myDisplayObject.addChild(myBasicView);
* </code></pre>
*
* @author Ralph Hauwert
*/
public class BasicView extends AbstractView implements IView
{
/**
* @param viewportWidth Width of the viewport
* @param viewportHeight Height of the viewport
* @param scaleToStage Whether you viewport should scale with the stage
* @param interactive Whether your scene should be interactive
* @param cameraType A String for the type of camera. @see org.papervision3d.cameras.CameraType
*
*/
public function BasicView(viewportWidth:Number = 640, viewportHeight:Number = 480, scaleToStage:Boolean = true, interactive:Boolean = false, cameraType:String = "Target")
{
super();
scene = new Scene3D();
viewport = new Viewport3D(viewportWidth, viewportHeight, scaleToStage, interactive);
addChild(viewport);
renderer = new BasicRenderEngine();
switch(cameraType)
{
case CameraType.DEBUG:
_camera = new DebugCamera3D(viewport);
break;
case CameraType.TARGET:
_camera = new Camera3D(60);
_camera.target = DisplayObject3D.ZERO;
break;
case CameraType.SPRING:
_camera = new SpringCamera3D();
_camera.target = DisplayObject3D.ZERO;
break;
case CameraType.FREE:
default:
_camera = new Camera3D(60);
break;
}
cameraAsCamera3D.update(viewport.sizeRectangle);
}
/**
* Exposes the camera as a <code>Camera3D</code>
*/
public function get cameraAsCamera3D():Camera3D
{
return _camera as Camera3D;
}
/**
* Exposes the camera as a <code>DebugCamera3D</code>
*/
public function get cameraAsDebugCamera3D():DebugCamera3D
{
return _camera as DebugCamera3D;
}
}
}

Since BasicView.as extends AbstractView.as you can see a few more of the methods available to you just by extending BasicView.as

PLAIN TEXT

Actionscript:

package org.papervision3d.view
{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.core.proto.CameraObject3D;
import org.papervision3d.core.view.IView;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
/**
* @Author Ralph Hauwert
*/
public class AbstractView extends Sprite implements IView
{
protected var _camera:CameraObject3D;
protected var _height:Number;
protected var _width:Number;
public var scene:Scene3D;
public var viewport:Viewport3D;
public var renderer:BasicRenderEngine;
public function AbstractView()
{
super();
}
public function startRendering():void
{
addEventListener(Event.ENTER_FRAME, onRenderTick);
viewport.containerSprite.cacheAsBitmap = false;
}
public function stopRendering(reRender:Boolean = false, cacheAsBitmap:Boolean = false):void
{
removeEventListener(Event.ENTER_FRAME, onRenderTick);
if(reRender){
onRenderTick();
}
if(cacheAsBitmap){
viewport.containerSprite.cacheAsBitmap = true;
}else{
viewport.containerSprite.cacheAsBitmap = false;
}
}
public function singleRender():void
{
onRenderTick();
}
protected function onRenderTick(event:Event = null):void
{
renderer.renderScene(scene, _camera, viewport);
}
public function get camera():CameraObject3D
{
return _camera;
}
public function set viewportWidth(width:Number):void
{
_width = width;
viewport.width = width;
}
public function get viewportWidth():Number
{
return _width;
}
public function set viewportHeight(height:Number):void
{
_height = height;
viewport.height = height;
}
public function get viewportHeight():Number
{
return _height;
}
}
}

Delicious Digg This Post Facebook Stumble This Post

2010 Flash And The City Speaker

RSS Feed

Author Archive for CharliePage 3 of 9