3 Doors Down MP3 songs Music download Edge Of Sanity Gipsy Kings Coil Download MP3 Verve She and Him Billy Talent Thraw Elton John MP3 site

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 Tags: , , , , , , , .

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

11 Responses to “Adding XML to the Papervision Coverflow”

Feed for this Entry Trackback Address
  • 1 Nate
    December 29, 2009 at 8:00 am

    Why do you use “InteractiveScene3DEvent” for a plane instead of a MouseEvent?

    Nate

  • 2 Charlie
    December 29, 2009 at 1:10 pm

    When you’re applying these types of events to a Plane object you need to use InteractiveScene3DEvent. You can apply MouseEvents to MovieClips and Sprites which are sometimes used with materials of Planes.

  • 3 chuck
    January 4, 2010 at 8:20 am

    Cool Component! Thanks. I tried to add it into a Flex project and it almost worked. It hung up sometime after loading the iphone picture. Thanks for any tips!

    <![CDATA[
    import mx.core.UIComponent;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.filters.GlowFilter;
    import gs.easing.Quint;
    import gs.TweenLite;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.materials.BitmapFileMaterial;
    import org.papervision3d.objects.DisplayObject3D;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.view.BasicView;
    import org.papervision3d.cameras.CameraType;
    import org.papervision3d.render.BasicRenderEngine;

    /**
    * ...
    * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
    * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
    */
    protected var planes:Array = [];
    protected var numItems:Number = 7;
    protected var currentItem:Number = 3;
    protected var angle:Number = 25;
    protected var mat:BitmapFileMaterial;
    protected var view:BasicView;

    public function init():void
    {
    //Make sure that your scene is set to interactive
    view = new BasicView(640, 480, true, true, CameraType.TARGET);
    view.renderer = new BasicRenderEngine();

    // these 3 lines are key to putting Papervision in Flex
    var uicomp:UIComponent = new UIComponent();
    GallerycanvasPv3D.addChild( uicomp );
    uicomp.addChild( view );

    Main();
    }
    protected function Main():void
    {
    makeChildren();
    //createNavigation();
    animate();
    view.singleRender();
    }
    protected function makeChildren():void
    {
    //Create Material
    mat = new BitmapFileMaterial("images/iPhone-back2.png");
    mat.smooth = true;
    mat.interactive = true;
    for (var i:int = 0; i < numItems; i++)
    {
    var plane:Plane = new Plane(mat, 177, 334, 4, 4);
    planes.push(plane);

    //Click straight to any plane
    plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, onPlaneClick);

    //Set an id to target current item
    plane.id = i;

    //Add plane to the scene
    view.scene.addChild(plane);
    }

    //cam.zoom = 60;
    }

    protected function onPlaneClick(evt:InteractiveScene3DEvent):void
    {
    currentItem = evt.target.id;
    animate();
    }

    //Animate the coverflow left / right based off of currentItems
    protected function animate():void
    {
    for (var i:int = 0; i currentItem)
    {
    planeX = (i – currentItem + 1) * 120;
    planeRotationY = angle + 10 * (i – currentItem);

    TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
    }

    //Place & Animate Left Items
    if (i < currentItem)
    {
    planeX = (currentItem – i + 1) * -120;
    planeRotationY = -angle – 10 * (currentItem – i);

    TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
    }
    }
    }

    /*
    * Everything below this point is just for creating the buttons and
    * setting button events for controlling the coverflow.
    */

    //Button actions
    protected function buttonClick(evt:MouseEvent):void
    {
    switch (evt.target)
    {
    case rightBtn:
    currentItem ++
    break;

    case leftBtn:
    currentItem –;
    break;
    }

    //Don't allow any number lower than 0 or past max so there
    //is always a center item

    if (currentItem (planes.length – 1))
    {
    currentItem = planes.length – 1;
    }

    //Call animation
    animate();
    }
    ]]>

  • 4 Charlie
    January 9, 2010 at 5:46 am

    Hey Chuck,

    Sorry for the late reply. I am not sure if you got this coverflow fully working in Flex yet. Here is an example of this class working with Flex.
    http://pastebin.com/f6566f277

    Charlie

  • 5 Andy
    January 25, 2010 at 6:18 pm

    I’m pretty new to this, so I was wondering if its possible to add a link from each photo inside of the XML?

  • 6 Johan
    April 13, 2010 at 11:52 am

    Hey Charlie. First off. I absolutely love your work. Quick and esay to get an overview of, even for a relative newb as me. I’m having a bit of a problem though. It’s most likely a straight forward fix, but if I wanted to add a textfield to the Coverflow somewhere on the stage, and then have the titles for the individual pictures show up in said textfield, how would I go about doing that? Both how the content of the .xml file should look, and how I should retrive it using bulkLoader. I’m not at all familiar with bulkloader, and I don’t know if that’s the thing that has got me stumped.
    I really hope you can help me.

  • 7 Johan
    April 13, 2010 at 1:05 pm

    Hey Charlie. First off. I absolutely love your work. Quick and easy to get an overview of, even for a relative newb as me. I’m having a bit of a problem though. It’s most likely a straight forward fix, but if I wanted to add a textfield to the Coverflow somewhere on the stage, and then have the titles for the individual pictures show up in said textfield, how would I go about doing that? Both how the content of the .xml file should look, and how I should retrieve it using bulkLoader. I’m not at all familiar with bulkloader, and I don’t know if that’s the thing that has got me stumped.
    I really hope you can help me.

  • 8 Elisha
    April 21, 2010 at 1:53 am

    could you teach me how to create a buttton(such as”BACK TO INDEX”or “NEXT PAGE”) in the pv3D scene?

  • 9 Steven
    May 13, 2010 at 3:21 pm

    @Johan

    Ive not used bulkloader myself but it should be pretty straight forward to get it working.

    Your XML image nodes should look like this :-

    “IMAGE URL HERE”
    “Title Here”

    Then you make a dynamic textfield on the stage and give it an instance name for example “title_txt”

    Then in buttonClick function just after the first switch and case add a line something like this :- title_txt.text = xmlList[currentItem].imageTitle;

    Im not the best at AS3, still pretty new to it myself so it might not be the best way, might not even work for you. but i hope that gets you on the right tracks

  • 10 Steven
    May 13, 2010 at 3:24 pm

    **EDIT

    Oops it cut out the nodes for the xml.. within each image just add a new child of imageTitle and then add the title inside of that :)

  • 11 Leonardo Lima
    August 5, 2010 at 1:00 pm

    Hi,

    Let me ask you… is possible add reflection effect to the images ?
    How hard is?

    It would be a nice idea a tutorial rsrs

    Thanks, nice work!

Leave a Reply


Follow WovenCharlie on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed