google ebanulso na otlichnenko


Off Topic: Spore Islands AS3 Facebook Game

sporeislandsimage

We just wanted to share the great news about the release of Spore Islands on Facebook.

Woven Interactive had the privilege to assist Area/Code with the client programming on Electronic Arts new Spore Islands Facebook game. Spore Islands is EA’s first Facebook and social media game.

Try it out on Facebook:
http://apps.facebook.com/sporeislands/

Learn more about Woven Interactive or read more about this project on our interactive blog.

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

Fix Z-Sorting Issues Using Viewport Layers

viewport-layer

download-source

Take a look at the sphere on the left. Ever had this happen to you and wondered if there was a good way to get rid of it? One of the ways we use is by adding a viewport layer. This works much the same as adding a new layer in flash or adding movieclip over another in AS3.

The best thing about this approach is that it's very simple and quick to implement:

Actionscript:
  1. viewportLayer = viewport.getChildLayer(sphere, true);
  2. viewportLayer.addDisplayObject3D(sphere);

For even more in depth discussion on viewport layers take a look at:
http://blog.zupko.info/?p=129

Here is the full class:

Actionscript:
  1. package 
  2. {
  3.     import flash.events.Event;
  4.     import org.papervision3d.materials.ColorMaterial;
  5.     import org.papervision3d.objects.primitives.Plane;
  6.     import org.papervision3d.objects.primitives.Sphere;
  7.     import org.papervision3d.view.BasicView;
  8.     import org.papervision3d.objects.primitives.Cone;
  9.     import org.papervision3d.materials.BitmapFileMaterial;
  10.     import org.papervision3d.view.layer.ViewportLayer;
  11.    
  12.     public class Main extends BasicView
  13.     {
  14.         protected var sphere:Sphere
  15.         protected var plane:Plane;
  16.         protected var bitmapMaterial:BitmapFileMaterial;
  17.         protected var colorMaterial:ColorMaterial;
  18.         protected var viewportLayer:ViewportLayer;
  19.         public function Main()
  20.         {
  21.             super();
  22.             createChildren();
  23.             commitProperties();
  24.             startRendering();
  25.         }
  26.         protected function createChildren():void
  27.         {
  28.            
  29.             //Create a new 3D object
  30.             colorMaterial = new ColorMaterial(0x000000);
  31.             bitmapMaterial = new BitmapFileMaterial("images/ourtex.jpg")
  32.  
  33.             //Create 3D Objects
  34.             plane = new Plane(colorMaterial,1000,1000,5,5)
  35.             sphere = new Sphere(bitmapMaterial, 50, 10,10);
  36.  
  37.            
  38.             //Add to scene
  39.             scene.addChild(plane);
  40.             scene.addChild(sphere);
  41.            
  42.             //To see the z-sorting issue comment out these two lines
  43.             viewportLayer = viewport.getChildLayer(sphere, true);
  44.             viewportLayer.addDisplayObject3D(sphere);
  45.         }
  46.        
  47.         protected function commitProperties():void
  48.         {
  49.             //Set some properties
  50.             sphere.scale = 4;
  51.             sphere.pitch( -10);
  52.             plane.rotationX = 60;
  53.         }
  54.         override protected function onRenderTick(event:Event = null):void
  55.         {
  56.             super.onRenderTick(event);
  57.  
  58.             //Rotate
  59.             sphere.yaw(1);
  60.         }
  61.     }
  62. }

download-source

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

Advanced Interactivity

advancedinteractivity1

download-source

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

Actionscript:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.events.Event;
  5.     import flash.events.MouseEvent;
  6.     import flash.text.TextField;
  7.     import org.papervision3d.materials.ColorMaterial;
  8.     import org.papervision3d.materials.MovieMaterial;
  9.     import org.papervision3d.materials.utils.MaterialsList;
  10.     import org.papervision3d.objects.primitives.Cube;
  11.     import org.papervision3d.view.BasicView;
  12.    
  13.     /**
  14.      * ...
  15.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  16.      */
  17.    
  18.     public class Main extends BasicView
  19.     {
  20.         protected var cube:Cube;
  21.         protected var interactiveMats:Array;
  22.         protected var materialsList:MaterialsList;
  23.         protected var targetrotationX:Number;
  24.         protected var targetrotationY:Number;
  25.         protected var targetrotationZ:Number;
  26.         protected var tweening:Boolean;
  27.        
  28.         public function Main():void
  29.         {
  30.             super();
  31.             init();
  32.         }
  33.         protected function init():void
  34.         {
  35.             createChildren();
  36.             startRendering();
  37.         }
  38.         protected function createChildren():void
  39.         {
  40.             //Set the viewport to interactive
  41.             viewport.interactive = true;
  42.            
  43.             //Create Materials:
  44.             materialsList       = new MaterialsList();
  45.             interactiveMats         = ["front", "back", "left", "right", "bottom", "top"];
  46.             var colorsArray:Array   = [0x76b6f8, 0x4291e1, 0x1f73c8, 0xe77111, 0xe8914c, 0xfad2b2];
  47.            
  48.             for (var i:int = 0; i <interactiveMats.length; i++)
  49.             {
  50.                 //Create a color box so we can use our MouseEvents
  51.                 var colorBox:Sprite = new Sprite();
  52.                 colorBox.graphics.beginFill(colorsArray[i]);
  53.                 colorBox.graphics.drawRect(0, 0, 100, 100);
  54.                 colorBox.graphics.endFill();
  55.                 colorBox.name = interactiveMats[i];
  56.                
  57.                 //Add a textField for reference
  58.                 var textField:TextField = new TextField()
  59.                 colorBox.addChild(textField)
  60.                 textField.text = interactiveMats[i];
  61.                
  62.                 //Add a MouseEvent to the Sprite
  63.                 colorBox.mouseChildren = false;
  64.                 colorBox.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
  65.                
  66.                 //Create the MovieMat
  67.                 var movieMat:MovieMaterial   = new MovieMaterial(colorBox, true, true);
  68.                 movieMat.interactive          = true;
  69.                 movieMat.smooth                 = true;
  70.                 materialsList.addMaterial(movieMat, interactiveMats[i]);
  71.             }
  72.            
  73.             //Create Cube
  74.             cube    = new Cube(materialsList, 100, 100, 100);
  75.            
  76.             //Add cube to the scene
  77.             scene.addChild(cube);
  78.         }
  79.        
  80.         protected function onMovieMatClicked(evt:MouseEvent):void
  81.         {
  82.             if (tweening)
  83.             {
  84.                 // Let it rotate again
  85.                 tweening = false;
  86.             }
  87.             else
  88.             {
  89.                 switch(evt.target.name) {
  90.                     case "front":
  91.                         targetrotationX = 0;
  92.                         targetrotationY = 180;
  93.                         targetrotationZ = 0;
  94.                         tweening = true;
  95.                     break;
  96.                     case "back":
  97.                         targetrotationX = 0;
  98.                         targetrotationY = 0;
  99.                         targetrotationZ = 0;
  100.                         tweening = true;
  101.                     break;
  102.                     case "left":
  103.                         targetrotationX = 0;
  104.                         targetrotationY = -90;
  105.                         targetrotationZ = 0;
  106.                         tweening = true;
  107.                     break;
  108.                     case "right":
  109.                         targetrotationX = 0;
  110.                         targetrotationY = 90;
  111.                         targetrotationZ = 0;
  112.                         tweening = true;
  113.                     break;
  114.                     case "top":
  115.                         targetrotationX = -90;
  116.                         targetrotationY = 0;
  117.                         targetrotationZ = 0;
  118.                         tweening = true;
  119.                     break;
  120.                     case "bottom":
  121.                         targetrotationX = 90;
  122.                         targetrotationY = 0;
  123.                         targetrotationZ = 180;
  124.                         tweening = true;
  125.                     break;
  126.                 }
  127.             }
  128.         }
  129.        
  130.         override protected function onRenderTick(event:Event = null):void
  131.         {
  132.             super.onRenderTick(event);
  133.            
  134.             if (tweening) {
  135.                 // If a face has been clicked
  136.                 if (camera.zoom <230) {
  137.                     // If the camera isn't zoomed enough then zoom in a bit more:
  138.                     camera.zoom += Math.sqrt(230-camera.zoom)/5;
  139.                 }
  140.                 // Test each rotation and rotate it towards the target rotation:
  141.                 // X axis:
  142.                 if (cube.rotationX <targetrotationX)
  143.                 {
  144.                     cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
  145.                     cube.rotationX = Math.round(cube.rotationX);
  146.                 }
  147.                 else if (cube.rotationX> targetrotationX)
  148.                 {
  149.                     cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
  150.                     cube.rotationX = Math.round(cube.rotationX);
  151.                 }
  152.                
  153.                 // Y axis:
  154.                 if (cube.rotationY <targetrotationY)
  155.                 {
  156.                     cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
  157.                     cube.rotationY = Math.round(cube.rotationY);
  158.                 }
  159.                 else if (cube.rotationY> targetrotationY)
  160.                 {
  161.                     cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
  162.                     cube.rotationY = Math.round(cube.rotationY);
  163.                 }
  164.                
  165.                 // Z axis:
  166.                 if (cube.rotationZ <targetrotationZ)
  167.                 {
  168.                     cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
  169.                     cube.rotationZ = Math.round(cube.rotationZ);
  170.                 }
  171.                 else if (cube.rotationZ> targetrotationZ)
  172.                 {
  173.                     cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
  174.                     cube.rotationZ = Math.round(cube.rotationZ);
  175.                 }
  176.             }
  177.             else
  178.             {
  179.                 // If the camera is zoomed in, it shouldn't be now
  180.                 if (camera.zoom> 200)
  181.                 {
  182.                     // So zoom out a bit.
  183.                     camera.zoom -= Math.sqrt(camera.zoom-2)/5;
  184.                 }
  185.                 // Rotate the cube a bit:
  186.                 cube.rotationX += 2;
  187.                 cube.rotationY += 2;
  188.                 // Make sure that we dont "wind up" the rotation
  189.                 if (cube.rotationX>= 360) cube.rotationX = 0;
  190.                 if (cube.rotationY>= 360) cube.rotationY = 0;
  191.             }
  192.         }      
  193.     }
  194. }

download-source

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

Advanced Interactivity (Without InteractiveScene3DEvent)

advancedinteractivity3

download-source

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:

Actionscript:
  1. //Viewport set to interactive
  2. viewport.interactive                      = true;
  3.  
  4. //Create your symbol - can be a class or MovieClip exported in your library
  5. var textureMC:TextureSymbol     = new TextureSymbol();
  6. textureMC.id                = i;
  7. textureMC.clickButton.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
  8.  
  9. //Create your movie Material - animated / interactive set to true
  10. var movieMat:MovieMaterial   = new MovieMaterial(textureMC, true, true);
  11. movieMat.doubleSided            = true;
  12. movieMat.interactive          = true;
  13. movieMat.smooth             = true;

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

Here is the full class:

Actionscript:
  1. package
  2. {
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.     import gs.easing.Quint;
  6.     import gs.TweenLite;
  7.     import org.papervision3d.materials.MovieMaterial;
  8.     import org.papervision3d.materials.utils.MaterialsList;
  9.     import org.papervision3d.objects.primitives.Cube;
  10.  
  11.     import org.papervision3d.view.BasicView;
  12.     import TextureSymbol;
  13.    
  14.     /**
  15.      * ...
  16.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  17.      */
  18.    
  19.     public class Main extends BasicView
  20.     {
  21.         protected var cube:Cube;
  22.         protected var interactiveMats:Array;
  23.         protected var materialsList:MaterialsList;
  24.        
  25.         public function Main():void
  26.         {
  27.             super();
  28.             init();
  29.         }
  30.         protected function init():void
  31.         {
  32.             createChildren();
  33.             commitProperties();
  34.             startRendering();
  35.         }
  36.         protected function createChildren():void
  37.         {
  38.             //Set the viewport to interactive
  39.             viewport.interactive = true;
  40.            
  41.             //Create Materials:
  42.             materialsList = new MaterialsList();
  43.             interactiveMats = ["front", "back", "top", "bottom", "left", "right"];
  44.            
  45.             for (var i:int = 0; i <interactiveMats.length; i++)
  46.             {
  47.                 //Create the texture symbol from the library
  48.                 var textureMC:TextureSymbol     = new TextureSymbol();
  49.                 textureMC.id                    = i;
  50.                 textureMC.clickButton.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
  51.                
  52.                 //Create the MovieMat
  53.                 var movieMat:MovieMaterial   = new MovieMaterial(textureMC, true, true);
  54.                 movieMat.doubleSided            = true;
  55.                 movieMat.interactive          = true;
  56.                 movieMat.smooth                 = true;
  57.                
  58.                 materialsList.addMaterial(movieMat, interactiveMats[i]);
  59.             }
  60.            
  61.             //Create Cube
  62.             cube    = new Cube(materialsList, 100, 100, 100);
  63.            
  64.             //Add cube to the scene
  65.             scene.addChild(cube);
  66.         }
  67.        
  68.         protected function onMovieMatClicked(evt:MouseEvent):void
  69.         {
  70.             var randomX:Number = Math.random() * 600 - 300;
  71.             var randomY:Number = Math.random() * 200 - 100;
  72.             TweenLite.to(cube, 1, { x:randomX, y:randomY, ease:Quint.easeInOut});
  73.         }
  74.        
  75.         protected function commitProperties():void
  76.         {
  77.             //Set the properties of our camera
  78.             camera.zoom = 200;
  79.             camera.y    = 1000;
  80.         }
  81.         override protected function onRenderTick(event:Event = null):void
  82.         {
  83.             super.onRenderTick(event);
  84.             cube.yaw(2);
  85.         }
  86.     }
  87. }

download-source

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

Animation Using TweenLite

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.

download-source

animating-using-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:

Actionscript:
  1. 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:

Actionscript:
  1. //TweenLite.to(objectToAnimate, time, { property:newValue, property:newValue, ease:Quint.easeInOut, onComplete:functionToCall} );
  2.  
  3. //Your code will end up looking something like this
  4. 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.

Actionscript:
  1. package
  2. {
  3.     import gs.easing.Quint;
  4.     import gs.TweenLite;
  5.     import org.papervision3d.lights.PointLight3D;
  6.     import org.papervision3d.materials.ColorMaterial;
  7.     import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  8.     import org.papervision3d.materials.utils.MaterialsList;
  9.     import org.papervision3d.materials.WireframeMaterial;
  10.     import org.papervision3d.objects.primitives.Cube;
  11.     import org.papervision3d.objects.primitives.Plane;
  12.     import org.papervision3d.view.BasicView;
  13.    
  14.     /**
  15.      * ...
  16.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  17.      */
  18.    
  19.     public class Main extends BasicView
  20.     {
  21.         protected var cube:Cube;
  22.         protected var cube2:Cube;
  23.         protected var mat:FlatShadeMaterial;
  24.         protected var mat2:WireframeMaterial;
  25.         protected var plane:Plane;
  26.        
  27.         public function Main():void
  28.         {
  29.             super();
  30.             init();
  31.         }
  32.         protected function init():void
  33.         {
  34.             createChildren();
  35.             commitProperties();
  36.             randomize();
  37.             startRendering();
  38.         }
  39.         protected function createChildren():void
  40.         {
  41.             //Create Materials:
  42.             mat     = new FlatShadeMaterial(new PointLight3D(), 0xFFFFFF, 0xFF0000);
  43.             mat2    = new WireframeMaterial(0x00FF00);
  44.            
  45.             //Create 3D Objects
  46.             plane   = new Plane(null, 2000, 2000, 10, 10);
  47.             cube    = new Cube(new MaterialsList( { all: mat } ), 100, 100, 100);
  48.             cube2   = new Cube(new MaterialsList( { all: mat2 } ), 100, 100, 100);
  49.            
  50.             //Add objects to the scene
  51.             scene.addChild(plane);
  52.             scene.addChild(cube);
  53.             scene.addChild(cube2);
  54.         }
  55.         protected function commitProperties():void
  56.         {
  57.             //Set properties of our plane
  58.             plane.material.lineColor = 0x777777;
  59.             plane.material.doubleSided = true;
  60.             plane.pitch(90);
  61.             plane.y     = -50;
  62.            
  63.             //Set the properties of our camera
  64.             camera.x    = 0;
  65.             camera.z    = 1000;
  66.             camera.y    = 1000;
  67.         }
  68.        
  69.         public function randomize():void
  70.         {
  71.             var xp:Number   = (Math.random() * 2000) - 1000;
  72.             var yp:Number   = (Math.random() * 2000) - 1000;
  73.             cube2.x         = xp;
  74.             cube2.z         = yp;
  75.            
  76.             //When complete it calls this method again
  77.             TweenLite.to(cube, 2, { x:xp, z:yp, ease:Quint.easeInOut, onComplete:randomize } );
  78.         }
  79.     }
  80. }

download-source

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

Basic Mouse Interaction (v2)

basic-mouse-interaction

download-source

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.

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

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:

Actionscript:
  1. package 
  2. {
  3.     import flash.events.Event;
  4.     import org.papervision3d.materials.BitmapFileMaterial;
  5.     import org.papervision3d.materials.utils.MaterialsList;
  6.     import org.papervision3d.objects.DisplayObject3D;
  7.     import org.papervision3d.objects.parsers.Collada;
  8.     import org.papervision3d.view.BasicView;
  9.  
  10.     public class Main extends BasicView
  11.     {
  12.         protected var cow:DisplayObject3D;
  13.         protected var materialList:MaterialsList;
  14.         protected var bitmapFileMaterial:BitmapFileMaterial;
  15.        
  16.         protected var sceneWidth:Number;
  17.         protected var sceneHeight:Number;
  18.        
  19.         public function Main()
  20.         {
  21.             super();
  22.             init();
  23.             createChildren();
  24.             startRendering();
  25.         }
  26.         protected function init():void
  27.         {
  28.             sceneWidth = stage.stageWidth
  29.         }
  30.         public function createChildren():void
  31.         {
  32.             //Setup the materials manually (sometimes the dae handles this without issue)
  33.             materialList       = new MaterialsList();
  34.             bitmapFileMaterial  = new BitmapFileMaterial("daeModel/Cow.png");
  35.             materialList.addMaterial(bitmapFileMaterial,"all");
  36.            
  37.             //Create the new Collada Object with materialList
  38.             cow = new Collada("daeModel/cow.dae",materialList);
  39.  
  40.             ///Set some properties
  41.             cow.moveDown(150);
  42.             cow.scale = 3;
  43.             cow.pitch( -10);
  44.  
  45.             //Add to scene
  46.             scene.addChild(cow);
  47.         }
  48.        
  49.         override protected function onRenderTick(event:Event = null):void
  50.         {
  51.             super.onRenderTick(event);
  52.             cow.rotationY = stage.mouseX / sceneWidth * 360
  53.         }
  54.     }
  55. }

download-source

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post


Follow papervision2 on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed