Tag Archive for 'Add new tag'

Advanced Interactivity

Published

on November 26, 2009

in Actionscript 3.0, Papervision 3D, Tutorials and TweenLite

. 8 Comments

This is just another example of how to do some advanced interactivity in Papervision 3D. This tutorial is just a slightly updated version of the #10 : Advanced Interactivity tutorial from a while back.

Here is what has been updated:
1) Removed InteractiveScene3DEvent and replaced it with standard MouseEvents
2) Updated to use papervision's BasicView.as class

For a full description of what is going on please refer back to this link: #10 : Advanced Interactivity

PLAIN TEXT

Actionscript:

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.view.BasicView;
/**
* ...
* @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;
protected var targetrotationX:Number;
protected var targetrotationY:Number;
protected var targetrotationZ:Number;
protected var tweening:Boolean;
public function Main():void
{
super();
init();
}
protected function init():void
{
createChildren();
startRendering();
}
protected function createChildren():void
{
//Set the viewport to interactive
viewport.interactive = true;
//Create Materials:
materialsList = new MaterialsList();
interactiveMats = ["front", "back", "left", "right", "bottom", "top"];
var colorsArray:Array = [0x76b6f8, 0x4291e1, 0x1f73c8, 0xe77111, 0xe8914c, 0xfad2b2];
for (var i:int = 0; i <interactiveMats.length; i++)
{
//Create a color box so we can use our MouseEvents
var colorBox:Sprite = new Sprite();
colorBox.graphics.beginFill(colorsArray[i]);
colorBox.graphics.drawRect(0, 0, 100, 100);
colorBox.graphics.endFill();
colorBox.name = interactiveMats[i];
//Add a textField for reference
var textField:TextField = new TextField()
colorBox.addChild(textField)
textField.text = interactiveMats[i];
//Add a MouseEvent to the Sprite
colorBox.mouseChildren = false;
colorBox.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
//Create the MovieMat
var movieMat:MovieMaterial = new MovieMaterial(colorBox, true, 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
{
if (tweening)
{
// Let it rotate again
tweening = false;
}
else
{
switch(evt.target.name) {
case "front":
targetrotationX = 0;
targetrotationY = 180;
targetrotationZ = 0;
tweening = true;
break;
case "back":
targetrotationX = 0;
targetrotationY = 0;
targetrotationZ = 0;
tweening = true;
break;
case "left":
targetrotationX = 0;
targetrotationY = -90;
targetrotationZ = 0;
tweening = true;
break;
case "right":
targetrotationX = 0;
targetrotationY = 90;
targetrotationZ = 0;
tweening = true;
break;
case "top":
targetrotationX = -90;
targetrotationY = 0;
targetrotationZ = 0;
tweening = true;
break;
case "bottom":
targetrotationX = 90;
targetrotationY = 0;
targetrotationZ = 180;
tweening = true;
break;
}
}
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
if (tweening) {
// If a face has been clicked
if (camera.zoom <230) {
// If the camera isn't zoomed enough then zoom in a bit more:
camera.zoom += Math.sqrt(230-camera.zoom)/5;
}
// Test each rotation and rotate it towards the target rotation:
// X axis:
if (cube.rotationX <targetrotationX)
{
cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
cube.rotationX = Math.round(cube.rotationX);
}
else if (cube.rotationX> targetrotationX)
{
cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
cube.rotationX = Math.round(cube.rotationX);
}
// Y axis:
if (cube.rotationY <targetrotationY)
{
cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
cube.rotationY = Math.round(cube.rotationY);
}
else if (cube.rotationY> targetrotationY)
{
cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
cube.rotationY = Math.round(cube.rotationY);
}
// Z axis:
if (cube.rotationZ <targetrotationZ)
{
cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
cube.rotationZ = Math.round(cube.rotationZ);
}
else if (cube.rotationZ> targetrotationZ)
{
cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
cube.rotationZ = Math.round(cube.rotationZ);
}
}
else
{
// If the camera is zoomed in, it shouldn't be now
if (camera.zoom> 200)
{
// So zoom out a bit.
camera.zoom -= Math.sqrt(camera.zoom-2)/5;
}
// Rotate the cube a bit:
cube.rotationX += 2;
cube.rotationY += 2;
// Make sure that we dont "wind up" the rotation
if (cube.rotationX>= 360) cube.rotationX = 0;
if (cube.rotationY>= 360) cube.rotationY = 0;
}
}
}
}

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

12. Animation using Tweener

Published

Charlie

on March 10, 2008

in Tutorials

. 31 Comments

**Update
This tutorial has been updated using TweenLite and the most recent papervision BasicView class.

Hi,

In this tutorial we're going to use Tweener to move a cube around. This will teach you basics of animation, and how to use Tweener (which is awesome).

The example that I've produced is this:

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

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

1: To start off, you'll need Tweener. You can download it here if you don't already have it: http://code.google.com/p/tweener/

Once you've got tweener, either add the source directory containing the "caurina" folder to your project's classpaths, or add the caurina folder into your current project.

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

import caurina.transitions.Tweener;

3: Add a Tween. You can add tweens to any parameter of any object. The Tweener package will gradually change any parameter in your code to a new value over time, so only numeric values will work nicely. Anyway, you can read a load more about tweener at the google code page above.

To add a tween, we use the code

Tweener.addTween(object, {parameter1: value, parameter2: value2, time: X, 
transition:"transition", onComplete: functionname});

This may look a little bit confusing at first, but it's really simple. Let's show you a real example..

Tweener.addTween(cube, { x: 1000, z: 500, time: 2, 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.

Here is my source code (Uses latest version of my base class):

PLAIN TEXT

Actionscript:

package
{
import org.papervision3d.lights.PointLight3D;
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 caurina.transitions.Tweener;
public class Main extends PaperBase
{
private var cube:Cube;
private var cube2:Cube;
private var mat:FlatShadeMaterial = new FlatShadeMaterial(new PointLight3D(), 0xFFFFFF, 0xFF0000);
private var mat2:WireframeMaterial = new WireframeMaterial(0x00FF00);
private var plane:Plane = new Plane(null, 2000, 2000, 10, 10);
public function Main()
{
init(600, 300);
}
override protected function init3d():void
{
cube = new Cube(new MaterialsList( { all: mat } ), 100, 100, 100);
cube.y = 0;
cube2 = new Cube(new MaterialsList( { all: mat2 } ), 100, 100, 100);
cube2.y = 0;
cube2.x = 1000;
cube2.z = 1000;
plane.material.lineColor = 0x777777;
plane.material.doubleSided = true;
plane.pitch(90);
plane.y = -50;
default_scene.addChild(plane);
default_scene.addChild(cube);
default_scene.addChild(cube2);
Tweener.addTween(cube, { x:1000, z:1000, time:2, onComplete: randomize } );
default_camera.x = 0;
default_camera.z = 1000;
default_camera.y = 1000;
}
public function randomize():void
{
var xp:Number = (Math.random() * 2000) - 1000;
var yp:Number = (Math.random() * 2000) - 1000;
Tweener.addTween(cube, { x:xp, z:yp, time:2, onComplete: randomize } );
cube2.x = xp;
cube2.z = yp;
}
override protected function processFrame():void
{
default_camera.lookAt(cube);
}
}
}

Delicious Digg This Post Facebook Stumble This Post

2010 Flash And The City Speaker

RSS Feed

Tag Archive for 'Add new tag'

Advanced Interactivity

Basic Texturing (v2)

Getting started using BasicView.as

12. Animation using Tweener

Blogroll

Recent Posts

Pages

Tag Archive for 'Add new tag'

Advanced Interactivity

Basic Texturing (v2)

Getting started using BasicView.as

12. Animation using Tweener

Blogroll

Recent Posts

Tags

Pages