Michael Jackson Pearl Jam Stevie Ray Vaughan Ozzy Osbourne Finntroll MP3 list A Fine Frenzy Capone Phil Collins Shakira Pink Floyd Keane

Tag Archive for 'BasicView.as'

Adding XML to the Papervision Coverflow

Published
by
Charlie
on December 26, 2009
in Actionscript 3 Papervision, Actionscript 3.0, Examples, Flash, Loading XML, Papervision 3D, Papervision Coverflow, Source Code and Tutorials
. 11 Comments

Papervision Coverflow XML feed

As a simple addition to yesterday's coverflow post, I wanted to show the same example but with loading images via XML. For simplicity sake the XML is loaded and parsed all in the main file.

The structure for our XML is very simple:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <data>
  3.     <image><![CDATA[images/image1.jpg]]></image>
  4.     <image><![CDATA[images/image2.jpg]]></image>
  5.     <image><![CDATA[images/image3.jpg]]></image>
  6.     <image><![CDATA[images/image5.jpg]]></image>
  7.     <image><![CDATA[images/image4.jpg]]></image>
  8.     <image><![CDATA[images/image6.jpg]]></image>
  9.     <image><![CDATA[images/image7.jpg]]></image>
  10. </data>

We simply load our XML file with BulkLoader

PLAIN TEXT
Actionscript:
  1. protected function loadXML():void
  2. {
  3.     bulkInstance = new BulkLoader("bulkInstance");     
  4.     bulkInstance.add(xmlPath);
  5.     bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onXMLReady);
  6.     bulkInstance.start();
  7. }

Parse the results, now adding the images to the BulkLoader:

PLAIN TEXT
Actionscript:
  1. protected function onXMLReady(evt:BulkProgressEvent):void
  2. {
  3.     bulkInstance.removeEventListener(BulkProgressEvent.COMPLETE, onXMLReady);
  4.     bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onImagesReady);
  5.    
  6.     var xml:XML = bulkInstance.getXML(xmlPath);
  7.     var xmlList:XMLList = xml.image;
  8.    
  9.     for (var i:int = 0; i <xmlList.length(); i++)
  10.     {
  11.         var imagePath:String = String(xmlList[i])
  12.         bulkInstance.add(imagePath);
  13.        
  14.         //Add path to array for later access
  15.         images.push(imagePath);
  16.     }
  17.    
  18.     //Set our number of items based on how many images we load
  19.     numItems = images.length;
  20. }

When our images are ready we can continue the process of setting up our coverflow. But now using the images we just loaded for our materials.

PLAIN TEXT
Actionscript:
  1. var mat:BitmapMaterial  = new BitmapMaterial(bulkInstance.getBitmapData(images[i]));

It's that simple. Be sure to let us know if you find this useful and are able to use it in a project.

Here is the full code:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import br.com.stimuli.loading.BulkLoader;
  4.     import br.com.stimuli.loading.BulkProgressEvent;
  5.     import flash.display.Sprite;
  6.     import flash.events.MouseEvent;
  7.     import flash.filters.GlowFilter;
  8.     import gs.easing.Quint;
  9.     import gs.TweenLite;
  10.     import org.papervision3d.events.InteractiveScene3DEvent;
  11.     import org.papervision3d.materials.BitmapMaterial;
  12.     import org.papervision3d.objects.DisplayObject3D;
  13.     import org.papervision3d.objects.primitives.Plane;
  14.     import org.papervision3d.view.BasicView;
  15.    
  16.     /**
  17.      * ...
  18.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  19.      * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
  20.      */
  21.    
  22.     public class Main extends BasicView
  23.     {
  24.         protected var planes:Array = [];
  25.         protected var images:Array = [];
  26.         protected var numItems:Number;
  27.         protected var currentItem:Number = 3;
  28.         protected var angle:Number = 25;       
  29.         protected var rightBtn:Sprite;
  30.         protected var leftBtn:Sprite;
  31.         protected var xmlPath:String = "xml/imageXML.xml";
  32.         protected var bulkInstance:BulkLoader;
  33.        
  34.         public function Main():void
  35.         {
  36.             //Make sure that your scene is set to interactive
  37.             super(640, 480, true, true);
  38.             loadXML();
  39.         }
  40.        
  41.         //First load our XML
  42.         protected function loadXML():void
  43.         {
  44.             bulkInstance = new BulkLoader("bulkInstance");     
  45.             bulkInstance.add(xmlPath);
  46.             bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onXMLReady);
  47.             bulkInstance.start();
  48.         }
  49.        
  50.         //When our xml is ready parse and load our images
  51.         protected function onXMLReady(evt:BulkProgressEvent):void
  52.         {
  53.             bulkInstance.removeEventListener(BulkProgressEvent.COMPLETE, onXMLReady);
  54.             bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onImagesReady);
  55.            
  56.             var xml:XML = bulkInstance.getXML(xmlPath);
  57.             var xmlList:XMLList = xml.image;
  58.            
  59.             for (var i:int = 0; i <xmlList.length(); i++)
  60.             {
  61.                 var imagePath:String = String(xmlList[i])
  62.                 bulkInstance.add(imagePath);
  63.                
  64.                 //Add path to array for later access
  65.                 images.push(imagePath);
  66.             }
  67.            
  68.             //Set our number of items based on how many images we load
  69.             numItems = images.length;
  70.         }
  71.        
  72.         //Images are finished loading we can now create our papervision coverflow
  73.         protected function onImagesReady(evt:BulkProgressEvent):void
  74.         {
  75.             init();
  76.         }
  77.        
  78.         protected function init():void
  79.         {
  80.             createChildren();
  81.             createNavigation();
  82.             animate();
  83.             startRendering();
  84.         }
  85.         protected function createChildren():void
  86.         {
  87.             for (var i:int = 0; i <numItems; i++)
  88.             {
  89.                 //Grab our bitmapData from the bulkLoader using our array of image paths as our key
  90.                 var mat:BitmapMaterial  = new BitmapMaterial(bulkInstance.getBitmapData(images[i]));
  91.                 mat.interactive         = true;
  92.                 mat.smooth     = true;
  93.                 var plane:Plane         = new Plane(mat, 280, 351, 4, 4);
  94.                
  95.                 planes.push(plane);
  96.                
  97.                 //Click straight to any plane
  98.                 plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, onPlaneClick);
  99.                
  100.                 //Set an id to target current item
  101.                 plane.id = i;
  102.                
  103.                 //Add plane to the scene
  104.                 scene.addChild(plane);
  105.             }
  106.            
  107.             camera.zoom = 50;
  108.         }
  109.        
  110.         protected function onPlaneClick(evt:InteractiveScene3DEvent):void
  111.         {
  112.             currentItem = evt.target.id;
  113.             animate();
  114.         }
  115.        
  116.         //Animate the coverflow left / right based off of currentItems
  117.         protected function animate():void
  118.         {
  119.             for (var i:int = 0; i <planes.length; i++)
  120.             {
  121.                 var plane:Plane = planes[i];
  122.                
  123.                 //Each if statement will adjust these numbers as needed
  124.                 var planeX:Number = 0;
  125.                 var planeZ:Number = -50;
  126.                 var planeRotationY:Number = 0
  127.  
  128.                 //Place  & Animate Center Item
  129.                 if (i == currentItem)
  130.                 {
  131.                     planeZ     = -300
  132.                    
  133.                     TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
  134.                 }
  135.                
  136.                 //Place & Animate Right Items
  137.                 if(i> currentItem) 
  138.                 {
  139.                     planeX     = (i - currentItem + 1) * 120;
  140.                     planeRotationY   = angle + 10 * (i - currentItem);
  141.                    
  142.                     TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
  143.                 }
  144.                
  145.                 //Place & Animate Left Items
  146.                 if (i <currentItem)
  147.                 {
  148.                     planeX     = (currentItem - i + 1) * -120;
  149.                     planeRotationY   = -angle - 10 * (currentItem - i);
  150.                    
  151.                     TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
  152.                 }
  153.             }
  154.         }
  155.        
  156.         /*
  157.          * Everything below this point is just for creating the buttons and
  158.          * setting button events for controlling the coverflow.
  159.          */
  160.  
  161.         protected function createNavigation():void
  162.         {
  163.             //Create / Add Buttons
  164.             rightBtn = createButton();
  165.             leftBtn = createButton();
  166.                
  167.             addChild(leftBtn);
  168.             addChild(rightBtn);
  169.            
  170.             //Add button listeners
  171.             rightBtn.buttonMode = true;
  172.             leftBtn.buttonMode = true;
  173.             rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  174.             leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  175.                        
  176.             //Place buttons on stage
  177.             rightBtn.x    = stage.stageWidth - 20;
  178.             leftBtn.x       = 20;
  179.             rightBtn.y    =  stage.stageHeight / 2;
  180.             leftBtn.y       =  (stage.stageHeight / 2) + 20;
  181.             leftBtn.rotation    = 180;
  182.         }
  183.        
  184.         //Button actions
  185.         protected function buttonClick(evt:MouseEvent):void
  186.         {
  187.             switch (evt.target)
  188.             {
  189.                 case rightBtn:
  190.                 currentItem ++
  191.                 break;
  192.                
  193.                 case leftBtn:
  194.                 currentItem --;
  195.                 break;
  196.             }
  197.            
  198.             //Don't allow any number lower than 0 or past max so there
  199.             //is always a center item
  200.            
  201.             if (currentItem <0)
  202.             {
  203.                 currentItem = 0;
  204.             }
  205.             if (currentItem> (planes.length - 1))
  206.             {
  207.                 currentItem = planes.length - 1;
  208.             }
  209.            
  210.             //Call animation
  211.             animate();
  212.         }
  213.        
  214.         //Creates a simple arrow shape / returns the sprite
  215.         protected function createButton():Sprite
  216.         {
  217.             var btn:Sprite = new Sprite();
  218.            
  219.             btn.graphics.beginFill(0x333333);
  220.             btn.graphics.moveTo(0, 0);
  221.             btn.graphics.lineTo(0, 20);
  222.             btn.graphics.lineTo(10, 10);
  223.             btn.graphics.lineTo(0, 0);
  224.             btn.graphics.endFill();
  225.             btn.filters = [new GlowFilter(0xFFFFFF,1,10,10,3)]
  226.             return btn;
  227.         }
  228.     }
  229. }

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

A Simple Papervision Coverflow

Published
by
Charlie
on December 24, 2009
in Actionscript 3 Papervision, Actionscript 3.0, Examples, Papervision 3D, Papervision Coverflow, Tutorials and TweenLite
. 4 Comments

There are several great AS3 / Papervision Coverflows out there but today I set out to create one in it's simplest form. There are no bells and whistles, just a stripped down coverflow with it's core functionality. It's up to you to add an XML feed, Flickr feed, or setup your images in an array and load them the way you want to. This is only meant to be a clean jumping off point.

In the download I have included 2 versions. One with left / right buttons and one without. Both versions you can select the items in the coverflow to navigate.

The heart of this coverflow app is a lot like some of the others. We need to calculate the x and rotation of the center item, left items, and right items are, then animate accordingly. This is the same way that John Dyer animates his coverflow.

PLAIN TEXT
Actionscript:
  1. for (var i:int = 0; i <planes.length; i++)
  2. {
  3.     var plane:Plane = planes[i];
  4.    
  5.     //Each if statement will adjust these numbers as needed
  6.     var planeX:Number = 0;
  7.     var planeZ:Number = 20;
  8.     var planeRotationY:Number = 0
  9.  
  10.     //Place  & Animate Center Item
  11.     if (i == currentItem)
  12.     {
  13.         planeZ     = -300
  14.        
  15.         TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
  16.     }
  17.    
  18.     //Place & Animate Right Items
  19.     if(i> currentItem) 
  20.     {
  21.         planeX     = (i - currentItem + 1) * 120;
  22.         planeRotationY   = angle + 10 * (i - currentItem);
  23.        
  24.         TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
  25.     }
  26.    
  27.     //Place & Animate Left Items
  28.     if (i <currentItem)
  29.     {
  30.         planeX     = (currentItem - i + 1) * -120;
  31.         planeRotationY   = -angle - 10 * (currentItem - i);
  32.        
  33.         TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
  34.     }
  35. }

For this simple version of coverflow you have two ways of navigating to items.

Selecting a plane to jump right to that item

PLAIN TEXT
Actionscript:
  1. plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, onPlaneClick);
  2.  
  3. protected function onPlaneClick(evt:InteractiveScene3DEvent):void
  4. {
  5.     currentItem = evt.target.id;
  6.     animate();
  7. }

Or using left / right buttons to navigate one item at a time:

PLAIN TEXT
Actionscript:
  1. rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  2. leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  3.  
  4. protected function buttonClick(evt:MouseEvent):void
  5. {
  6.     switch (evt.target)
  7.     {
  8.         case rightBtn:
  9.         currentItem ++
  10.         break;
  11.        
  12.         case leftBtn:
  13.         currentItem --;
  14.         break;
  15.     }
  16.    
  17.     //Don't allow any number lower than 0 or past max so there
  18.     //is always a center item
  19.    
  20.     if (currentItem <0)
  21.     {
  22.         currentItem = 0;
  23.     }
  24.     if (currentItem> (planes.length - 1))
  25.     {
  26.         currentItem = planes.length - 1;
  27.     }
  28.    
  29.     //Call animation
  30.     animate();
  31. }

On to the full source code. This version includes the left / right buttons.

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.display.DisplayObject;
  4.     import flash.display.Sprite;
  5.     import flash.events.Event;
  6.     import flash.events.MouseEvent;
  7.     import flash.filters.GlowFilter;
  8.     import gs.easing.Quint;
  9.     import gs.TweenLite;
  10.     import org.papervision3d.events.InteractiveScene3DEvent;
  11.     import org.papervision3d.materials.BitmapFileMaterial;
  12.     import org.papervision3d.objects.DisplayObject3D;
  13.     import org.papervision3d.objects.primitives.Plane;
  14.     import org.papervision3d.view.BasicView;
  15.    
  16.     /**
  17.      * ...
  18.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  19.      * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
  20.      */
  21.    
  22.     public class Main extends BasicView
  23.     {
  24.         protected var planes:Array = [];
  25.         protected var numItems:Number = 7;
  26.         protected var currentItem:Number = 3;
  27.         protected var angle:Number = 25;
  28.        
  29.         protected var mat:BitmapFileMaterial;
  30.         protected var rightBtn:Sprite;
  31.         protected var leftBtn:Sprite;
  32.        
  33.         public function Main():void
  34.         {
  35.             //Make sure that your scene is set to interactive
  36.             super(640, 480, true, true);
  37.            
  38.             init();
  39.         }
  40.         protected function init():void
  41.         {
  42.             createChildren();
  43.             createNavigation();
  44.             animate();
  45.             startRendering();
  46.         }
  47.         protected function createChildren():void
  48.         {
  49.             //Create Material
  50.             mat             = new BitmapFileMaterial("images/iPhone-back2.png");
  51.             mat.smooth   = true;
  52.             mat.interactive = true;
  53.             for (var i:int = 0; i <numItems; i++)
  54.             {
  55.                 var plane:Plane = new Plane(mat, 177, 334, 4, 4);
  56.                 planes.push(plane);
  57.                
  58.                 //Click straight to any plane
  59.                 plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, onPlaneClick);
  60.                
  61.                 //Set an id to target current item
  62.                 plane.id = i;
  63.                
  64.                 //Add plane to the scene
  65.                 scene.addChild(plane);
  66.             }
  67.            
  68.             camera.zoom = 60;
  69.         }
  70.        
  71.         protected function onPlaneClick(evt:InteractiveScene3DEvent):void
  72.         {
  73.             currentItem = evt.target.id;
  74.             animate();
  75.         }
  76.        
  77.         //Animate the coverflow left / right based off of currentItems
  78.         protected function animate():void
  79.         {
  80.             for (var i:int = 0; i <planes.length; i++)
  81.             {
  82.                 var plane:Plane = planes[i];
  83.                
  84.                 //Each if statement will adjust these numbers as needed
  85.                 var planeX:Number = 0;
  86.                 var planeZ:Number = -50;
  87.                 var planeRotationY:Number = 0
  88.  
  89.                 //Place  & Animate Center Item
  90.                 if (i == currentItem)
  91.                 {
  92.                     planeZ     = -300
  93.                    
  94.                     TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
  95.                 }
  96.                
  97.                 //Place & Animate Right Items
  98.                 if(i> currentItem) 
  99.                 {
  100.                     planeX     = (i - currentItem + 1) * 120;
  101.                     planeRotationY   = angle + 10 * (i - currentItem);
  102.                    
  103.                     TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
  104.                 }
  105.                
  106.                 //Place & Animate Left Items
  107.                 if (i <currentItem)
  108.                 {
  109.                     planeX     = (currentItem - i + 1) * -120;
  110.                     planeRotationY   = -angle - 10 * (currentItem - i);
  111.                    
  112.                     TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
  113.                 }
  114.             }
  115.         }
  116.        
  117.         /*
  118.          * Everything below this point is just for creating the buttons and
  119.          * setting button events for controlling the coverflow.
  120.          */
  121.  
  122.         protected function createNavigation():void
  123.         {
  124.             //Create / Add Buttons
  125.             rightBtn = createButton();
  126.             leftBtn = createButton();
  127.                
  128.             addChild(leftBtn);
  129.             addChild(rightBtn);
  130.            
  131.             //Add button listeners
  132.             rightBtn.buttonMode = true;
  133.             leftBtn.buttonMode = true;
  134.             rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  135.             leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  136.                        
  137.             //Place buttons on stage
  138.             rightBtn.x    = stage.stageWidth - 20;
  139.             leftBtn.x       = 20;
  140.             rightBtn.y    =  stage.stageHeight / 2;
  141.             leftBtn.y       =  (stage.stageHeight / 2) + 20;
  142.             leftBtn.rotation    = 180;
  143.         }
  144.        
  145.         //Button actions
  146.         protected function buttonClick(evt:MouseEvent):void
  147.         {
  148.             switch (evt.target)
  149.             {
  150.                 case rightBtn:
  151.                 currentItem ++
  152.                 break;
  153.                
  154.                 case leftBtn:
  155.                 currentItem --;
  156.                 break;
  157.             }
  158.            
  159.             //Don't allow any number lower than 0 or past max so there
  160.             //is always a center item
  161.            
  162.             if (currentItem <0)
  163.             {
  164.                 currentItem = 0;
  165.             }
  166.             if (currentItem> (planes.length - 1))
  167.             {
  168.                 currentItem = planes.length - 1;
  169.             }
  170.            
  171.             //Call animation
  172.             animate();
  173.         }
  174.        
  175.         //Creates a simple arrow shape / returns the sprite
  176.         protected function createButton():Sprite
  177.         {
  178.             var btn:Sprite = new Sprite();
  179.            
  180.             btn.graphics.beginFill(0x333333);
  181.             btn.graphics.moveTo(0, 0);
  182.             btn.graphics.lineTo(0, 20);
  183.             btn.graphics.lineTo(10, 10);
  184.             btn.graphics.lineTo(0, 0);
  185.             btn.graphics.endFill();
  186.             btn.filters = [new GlowFilter(0xFFFFFF,1,10,10,3)]
  187.             return btn;
  188.         }
  189.     }
  190. }

That's it. This should provide a good base for you to build out your own unique coverflow.

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

Papervision Explode Image / Rebuild

Published
by
Charlie
on December 24, 2009
in Actionscript 3 Papervision, Actionscript 3.0, Papervision 3D, Source Code, Tutorials and TweenLite
. 3 Comments

In early 2008 I wrote a blog article on how to explode an image and rebuild it again. Recently this effect has been used in some amazing ways. Site's like Audi have taken this concept much further with the rows of these tiny boxes swimming in formation.

Today I decided to re-create that simple effect using the latest papervision code and provide a much needed update.

Creating this effect is actually fairly simple. You take an image, use some code to break it into smaller bitmaps which then are used as the materials for your planes. Then you just place the planes in a grid to re-create your image.

Here is a sample of the code that get's our image blocks to be used for our materials:

PLAIN TEXT
Actionscript:
  1. //Creates a 30 x 18 bitmapData block
  2. var bitmap_data:BitmapData  = new BitmapData(cellWidth, cellHeight, true, 0x00FFFF);
  3.                
  4. //Create a new Matrix - A matrix is a rectangular array / table
  5. //of numbers with any number of rows / columns.
  6. var matrix:Matrix         = new Matrix();
  7.  
  8. //Get's our desired x / y location information where we will
  9. //pull a block of our image
  10. matrix.translate( -cellWidth * cellX, -cellHeight * cellY);
  11.  
  12. //Write the data to our bitmap data object with our source and
  13. //matrix / block info
  14. bitmap_data.draw(imageMC, matrix);

Once you've created your grid you just need to store the locations of all your x,y,z,rotation etc so that when you break apart the image you can easily piece it back together.

PLAIN TEXT
Actionscript:
  1. planeVO.origX         = pl.x;
  2. planeVO.origY            = pl.y;
  3. planeVO.origZ         = pl.z;
  4. planeVO.origRotationY      = pl.rotationY;
  5. planeVO.origRotationX      = pl.rotationX;
  6. planeVO.origRotationZ      = pl.rotationZ;
  7. planeVO.planeRef          = pl;

PlaneVO is nothing more than a simple value object. A value object gives us a nice strongly typed object to store the variables we want to access later.

PlaneVO.as

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import org.papervision3d.objects.primitives.Plane;
  4.     /**
  5.      * ...
  6.      * @author Charlie Schulze, Woven Interactive, LLC
  7.      */
  8.     public class PlaneVO
  9.     {
  10.         public var origX:Number;
  11.         public var origY:Number
  12.         public var origZ:Number
  13.         public var origRotationY:Number
  14.         public var origRotationX:Number
  15.         public var origRotationZ:Number
  16.         public var planeRef:Plane;
  17.     }
  18.    
  19. }

Now on to the full code. I have left comments throughout to explain what is happening. Try changing some of the math or swapping the image with your own. Once you mess with it for a little while you'll find it's easy to create some amazing effects.

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import br.com.stimuli.loading.BulkLoader;
  4.     import br.com.stimuli.loading.BulkProgressEvent;
  5.     import com.foomonger.utils.Later;
  6.     import flash.display.Bitmap;
  7.     import flash.display.BitmapData;
  8.     import flash.display.DisplayObject;
  9.     import flash.display.MovieClip;
  10.     import flash.geom.Matrix;
  11.     import gs.easing.Quint;
  12.     import gs.TweenMax;
  13.     import org.papervision3d.materials.MovieMaterial;
  14.     import org.papervision3d.objects.DisplayObject3D;
  15.     import org.papervision3d.objects.primitives.Plane;
  16.     import org.papervision3d.view.BasicView;
  17.    
  18.     /**
  19.      * ...
  20.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  21.      */
  22.    
  23.     public class Main extends BasicView
  24.     {
  25.         protected var bulkInstance:BulkLoader;
  26.         protected var imageMC:MovieClip;
  27.         protected var imageString:String
  28.         protected var planeVOs:Array = [];
  29.         protected var planesContainer:DisplayObject3D;
  30.        
  31.         public function Main():void
  32.         {
  33.             super();
  34.            
  35.             //Set the image we want to load
  36.             imageString  = "images/king.gif";
  37.            
  38.             //Load our image
  39.             loadImage();
  40.         }
  41.         protected function loadImage():void
  42.         {
  43.             //BulkLoader is complete overkill for this but thought it would be a
  44.             //nice extra for everyone to see in action. Extremely useful set of classes.
  45.            
  46.             //Create our unique bulkInstance / available anywhere in our app by
  47.             //that name "bulkImageLoader"
  48.             bulkInstance = new BulkLoader("bulkImageLoader");
  49.            
  50.             //Add our image
  51.             bulkInstance.add(imageString);
  52.            
  53.             //Add our listeners
  54.             bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onImageLoaded);
  55.            
  56.             //Start Loading
  57.             bulkInstance.start();
  58.         }
  59.         protected function onImageLoaded(evt:BulkProgressEvent):void
  60.         {
  61.             init();
  62.         }
  63.         protected function init():void
  64.         {
  65.             createChildren();
  66.             explode();
  67.             startRendering();
  68.         }
  69.        
  70.         protected function createChildren():void
  71.         {
  72.             //Create the clip we will be getting our bitmap data from
  73.             imageMC = new MovieClip();
  74.            
  75.             //add our bitmap
  76.             imageMC.addChild(bulkInstance.getBitmap(imageString));
  77.  
  78.             //Optional - Create a container to hold our planes
  79.             planesContainer = new DisplayObject3D();
  80.            
  81.             //Array to store our value objects
  82.             planeVOs = [];
  83.            
  84.             for (var i:int = 0; i <65; i++)
  85.             {
  86.                 /**
  87.                  * Here is how we get our loop / colunm / cellWidth / cellHeight numbers
  88.                  *
  89.                  * 5 columns * 13 rows = 65 (number of loops)
  90.                  * 5 columns divided by the width (150) of our image = 30 pixels
  91.                  * 13 rows  divided by the height (234) of our image = 18 pixels
  92.                  */
  93.  
  94.                 var columns:uint          = 5;
  95.                 var cellWidth:int       = 30;
  96.                 var cellHeight:int    = 18;
  97.                 var cellX:int         = (i % columns)
  98.                 var cellY:int         = Math.floor(i / columns);
  99.  
  100.                 //Creates a 30 x 18 bitmapData block
  101.                 var bitmap_data:BitmapData  = new BitmapData(cellWidth, cellHeight, true, 0x00FFFF);
  102.                
  103.                 //Create a new Matrix - A matrix is a rectangular array / table
  104.                 //of numbers with any number of rows / columns.
  105.                 var matrix:Matrix         = new Matrix();
  106.                
  107.                 //Get's our desired x / y location information where we will
  108.                 //pull a block of our image
  109.                 matrix.translate( -cellWidth * cellX, -cellHeight * cellY);
  110.                
  111.                 //Write the data to our bitmap data object with our source and
  112.                 //matrix / block info
  113.                 bitmap_data.draw(imageMC, matrix);
  114.                
  115.                 //Create a bitmap with our bitmapData and add it to a movieclip
  116.                 var bitmap:Bitmap       = new Bitmap(bitmap_data);
  117.                 var myMovie:MovieClip     = new MovieClip();
  118.                
  119.                 myMovie.addChild(bitmap);
  120.                
  121.                 //Use the movieclip with our bitmap inside as our movieMaterial
  122.                 //needs to be cast as a DisplayObject to work
  123.                 var movieMat:MovieMaterial  = new MovieMaterial(myMovie as DisplayObject, true);
  124.                 movieMat.smooth             = true;
  125.                
  126.                 //Create a plane with our moviemat the size of our cellWidth/Height
  127.                 var pl:Plane             = new Plane(movieMat, cellWidth, cellHeight, 0, 0);
  128.                
  129.                 //Create a value object to store our origianl infomation
  130.                 //for when we animate we can then rebuild easily
  131.                 var planeVO:PlaneVO         = new PlaneVO();
  132.  
  133.                 //We want to place the planes to re-create our original image
  134.                 pl.x                        = ((cellX * cellWidth) + cellWidth) -(imageMC.width / 2);
  135.                 pl.y                   = -((cellY * cellHeight) + cellHeight) +(imageMC.height / 2);
  136.                
  137.                 //Set the original properties of our value object
  138.                 planeVO.origX         = pl.x;
  139.                 planeVO.origY            = pl.y;
  140.                 planeVO.origZ         = pl.z;
  141.                 planeVO.origRotationY      = pl.rotationY;
  142.                 planeVO.origRotationX      = pl.rotationX;
  143.                 planeVO.origRotationZ      = pl.rotationZ;
  144.                 planeVO.planeRef          = pl;
  145.                
  146.                 //Add our planeVO to our array
  147.                 planeVOs.push(planeVO)
  148.                
  149.                 //Add planes to our container
  150.                 planesContainer.addChild(pl);            
  151.             }
  152.            
  153.             //Add our container to our scene
  154.             scene.addChild(planesContainer);
  155.            
  156.             camera.zoom = 100;
  157.            
  158.             //rotate our container for an skewed effect
  159.             planesContainer.rotationY = 30;
  160.             planesContainer.rotationX = 30;
  161.         }
  162.        
  163.         protected function explode():void
  164.         {
  165.             //Create a for loop of our plane objects set random numbers to explode our image
  166.            
  167.             for (var i:int = 0; i <planeVOs.length; i++)
  168.             {
  169.                 var planeVO:PlaneVO     = planeVOs[i];
  170.                 var plane:Plane         = planeVO.planeRef;
  171.                
  172.                 var ranNumber:Number = Math.round(Math.random() * 200 - 200);
  173.                 var delayAmount:Number = i * .05;
  174.                 var shortDelayAmount:Number = delayAmount * .6;
  175.                
  176.                 var randomX:Number = (Math.random() * 4000) - 6000;
  177.                 var randomY:Number = (Math.random() * 8000) - 1000;
  178.                 var randomZ:Number = (Math.random() * 1000) + 5000;
  179.  
  180.                 TweenMax.to(plane, 2, { x:planeVO.origX + randomX, delay:shortDelayAmount,
  181.                                         z:randomZ, y:150 + planeVO.origY + randomY,
  182.                                         rotationY:180,ease:Quint.easeInOut} );
  183.             }
  184.            
  185.             //In 3 seconds rebuild
  186.             Later.call(this, rebuild, 3000, true);
  187.         }
  188.        
  189.         protected function rebuild():void
  190.         {
  191.             //Rebuild our image with the locations we stored in our VO
  192.            
  193.             for (var i:int = 0; i <planeVOs.length; i++)
  194.             {
  195.                 var planeVO:PlaneVO     = planeVOs[i];
  196.                 var plane:Plane         = planeVO.planeRef;
  197.                 var delayAmount:Number  = i * .005;
  198.                 TweenMax.to(plane, 1.8, { x:planeVO.origX, delay:delayAmount,
  199.                                         z:planeVO.origZ, y:planeVO.origY,
  200.                                         rotationY:planeVO.origRotationY,ease:Quint.easeInOut} );
  201.             }
  202.            
  203.             //In 5 seconds explode the image again
  204.             Later.call(this, explode, 5000, true);
  205.         }
  206.     }
  207. }

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

A Simple Papervision Carousel

Published
by
Charlie
on December 24, 2009
in 3D Carousel, AS3, Actionscript 3 Papervision, Actionscript 3.0, Papervision, Papervision 3D, Source Code and Tutorials
. 9 Comments

Papervision 3D Carousel

download-source

This week I set out to create a Papervision Carousel in it's simplest form. At the heart of this carousel is a simple "for" loop / math which places the items in a circle in 3D space

PLAIN TEXT
Actionscript:
  1. for (var i:int = 0; i <planes.length; i++)
  2. {
  3.     var angle:Number    = Math.PI * 2 / numItems * i;
  4.     var plane:Plane     = planes[i];
  5.     plane.x             = Math.cos(angle) * radius;
  6.     plane.z             = Math.sin(angle) * radius;
  7.     plane.rotationY     = -360 / numItems * i - 90;
  8. }

Then to rotate our carousel we apply some similar math

PLAIN TEXT
Actionscript:
  1. var rotateTo:Number = (-360 / numItems) * currentItem + 90;
  2. TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );

This code allows us to just increment currentItem and rotate our carousel. Another easy add-on would be to setup a navigation along the bottom where you could control and change the currentItem to a specific number to rotate right to that section of the carousel.

It's also very easy to customize the number of items and radius of the carousel by adjusting these numbers.

PLAIN TEXT
Actionscript:
  1. protected var numItems:Number = 20;
  2. protected var radius:Number = 500;

Here is the full code.

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.display.DisplayObject;
  4.     import flash.display.MovieClip;
  5.     import flash.display.Sprite;
  6.     import flash.events.Event;
  7.     import flash.events.MouseEvent;
  8.     import gs.easing.Quint;
  9.     import gs.TweenLite;
  10.     import org.papervision3d.materials.BitmapFileMaterial;
  11.     import org.papervision3d.objects.DisplayObject3D;
  12.     import org.papervision3d.objects.primitives.Plane;
  13.     import org.papervision3d.view.BasicView;
  14.    
  15.     /**
  16.      * ...
  17.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  18.      */
  19.    
  20.     public class Main extends BasicView
  21.     {
  22.         protected var planes:Array = [];
  23.         protected var numItems:Number = 20;
  24.         protected var radius:Number = 500;
  25.         protected var currentItem:Number = 0;
  26.        
  27.         protected var mat:BitmapFileMaterial;
  28.         protected var planesHolder:DisplayObject3D;
  29.         protected var rightBtn:Sprite;
  30.         protected var leftBtn:Sprite;
  31.        
  32.         public function Main():void
  33.         {
  34.             super();
  35.             init();
  36.         }
  37.         protected function init():void
  38.         {
  39.             createChildren();
  40.             createButtons();
  41.             commitProperties();
  42.             startRendering();
  43.         }
  44.         protected function createChildren():void
  45.         {
  46.            
  47.             planesHolder = new DisplayObject3D();
  48.            
  49.             //Create Material
  50.             mat             = new BitmapFileMaterial("images/queen.gif");
  51.             mat.smooth   = true;
  52.             mat.doubleSided = true;
  53.            
  54.             for (var i:int = 0; i <numItems; i++)
  55.             {
  56.                 var plane:Plane = new Plane(mat, 150, 234);
  57.                 planes.push(plane);
  58.                
  59.                 //Add plane to the scene
  60.                 planesHolder.addChild(plane);
  61.             }
  62.             scene.addChild(planesHolder);
  63.         }
  64.        
  65.         protected function commitProperties():void
  66.         {
  67.             //Set properties of our planes
  68.             for (var i:int = 0; i <planes.length; i++)
  69.             {
  70.                 var angle:Number    = Math.PI * 2 / numItems * i;
  71.                 var plane:Plane     = planes[i];
  72.                 plane.x             = Math.cos(angle) * radius;
  73.                 plane.z             = Math.sin(angle) * radius;
  74.                 plane.rotationY     = -360 / numItems * i - 90;
  75.             }
  76.            
  77.             //Adjust camera
  78.             camera.y = 200;
  79.            
  80.             //Rotate once
  81.             rotate();
  82.         }
  83.  
  84.         //Rotates the carousel
  85.         protected function rotate():void
  86.         {
  87.             var rotateTo:Number = (-360 / numItems) * currentItem + 90;
  88.             TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );
  89.         }
  90.        
  91.         /*
  92.          * Everything below this point is just for creating the buttons and
  93.          * setting button events for controlling the carousel.
  94.          */
  95.  
  96.         protected function createButtons():void
  97.         {
  98.             //Create Buttons
  99.             rightBtn = createButton();
  100.             leftBtn = createButton();
  101.                
  102.             addChild(leftBtn);
  103.             addChild(rightBtn);
  104.            
  105.             //Add button listeners
  106.             rightBtn.buttonMode = true;
  107.             leftBtn.buttonMode = true;
  108.             rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  109.             leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  110.                        
  111.             //Place buttons on stage
  112.             rightBtn.x    = stage.stageWidth - 120;
  113.             leftBtn.x       = 100;
  114.             rightBtn.y    =  stage.stageHeight / 2;
  115.             leftBtn.y       =  (stage.stageHeight / 2) + 20;
  116.             leftBtn.rotation    = 180;
  117.         }
  118.        
  119.         //Button actions
  120.         protected function buttonClick(evt:MouseEvent):void
  121.         {
  122.             switch (evt.target)
  123.             {
  124.                 case rightBtn:
  125.                 currentItem --;
  126.                 break;
  127.                
  128.                 case leftBtn:
  129.                 currentItem ++;
  130.                 break;
  131.             }
  132.             rotate();
  133.         }
  134.        
  135.         //Creates a simple arrow shape / returns the sprite
  136.         protected function createButton():Sprite
  137.         {
  138.             var btn:Sprite = new Sprite();
  139.            
  140.             btn.graphics.beginFill(0x333333);
  141.             btn.graphics.moveTo(0, 0);
  142.             btn.graphics.lineTo(0, 20);
  143.             btn.graphics.lineTo(10, 10);
  144.             btn.graphics.lineTo(0, 0);
  145.             btn.graphics.endFill();
  146.             return btn;
  147.         }
  148.     }
  149. }

Feel free to post links to ways you expand upon this file.

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

Fix Z-Sorting issues with the QuadrantRenderEngine

Published
by
Charlie
on November 28, 2009
in AS3, Actionscript 3.0, Examples, QuadrantRenderEngine, Tutorials and Z-Sorting Issues
. 1 Comment

quadrantrenderengine

download-source

Another way to solve your z-sorting issues is the use of the Quadrant Render Engine. The QuadrantRenderEngine only takes one parameter (type).

The three "types" of filtering available to you are:
QuadrantRenderEngine.ALL_FILTERS
QuadrantRenderEngine.CORRECT_Z_FILTER
QuadrantRenderEngine.QUAD_SPLIT_FILTER

For a full explanation of each of the 3 types available to you with this renderer take a look at this article.

The QuadrantRenderEngine use a technique of subdividing the screen into smaller and smaller regions to resolve potential conflicts between triangles.
blog.papervision3d.org

As also noted by others, this is a great tool to have around it does come with its performance issues. You may want to test out using ViewportLayers and optimizing in other areas.

Here is the simple code you need to change your renderer when extending BasicView.as:

PLAIN TEXT
Actionscript:
  1. renderer = new QuadrantRenderEngine(QuadrantRenderEngine.ALL_FILTERS);

Here is the full code for this example:

PLAIN TEXT
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.render.QuadrantRenderEngine;
  8.     import org.papervision3d.view.BasicView;
  9.     import org.papervision3d.materials.BitmapFileMaterial;
  10.    
  11.     public class Main extends BasicView
  12.     {
  13.         protected var sphere:Sphere
  14.         protected var plane:Plane;
  15.         protected var bitmapMaterial:BitmapFileMaterial;
  16.         protected var colorMaterial:ColorMaterial;
  17.  
  18.         public function Main()
  19.         {
  20.             super();
  21.            
  22.             //Try commenting out this line to see the issues.
  23.             renderer = new QuadrantRenderEngine(QuadrantRenderEngine.ALL_FILTERS);
  24.            
  25.             createChildren();
  26.             commitProperties();
  27.             startRendering();
  28.         }
  29.         protected function createChildren():void
  30.         {
  31.            
  32.             //Create a new 3D object
  33.             colorMaterial = new ColorMaterial(0x000000);
  34.             bitmapMaterial = new BitmapFileMaterial("images/ourtex.jpg")
  35.  
  36.             //Create 3D Objects
  37.             plane = new Plane(colorMaterial,1000,1000,5,5)
  38.             sphere = new Sphere(bitmapMaterial, 50, 10,10);
  39.  
  40.            
  41.             //Add to scene
  42.             scene.addChild(plane);
  43.             scene.addChild(sphere);
  44.  
  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

Fix Z-Sorting Issues Using Viewport Layers

Published
by
Charlie
on November 27, 2009
in Actionscript 3 Papervision, Papervision 3D, Source Code, Tutorials and Z-Sorting Issues
. 7 Comments

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:

PLAIN TEXT
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:

PLAIN TEXT
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


Follow WovenCharlie on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed