Google Scuka Jjot


Archive for the 'Papervision Coverflow' Category

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
. 5 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
. 1 Comment

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


Follow papervision2 on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed