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

RSS Visualization with PV3D and Minimalcomps

Published
by
Charlie
on January 18, 2009
in Actionscript 3 Papervision and Tutorials
. 3 Comments

mike-britton2

This pure AS3 tutorial will show you how to make a simple RSS item title visualization using Papervision3D and a couple MinimalComps, HSlider and Knob.

Needed:
RSS Tutorial Source Code
PaperVision3D
MinimalComps
Adobe XML Syndication Library (as3syndicationlib)

First we'll create an RSSConsumer class for retrieving and parsing an RSS feed. This class is a bare-bones utility on which you can add functionality for other projects. For now it'll be used to retrieve an RSS 2.0 feed, but Adobe's syndication library contains a lot more functionality.

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import com.adobe.xml.syndication.rss.RSS20;
  4.     import com.adobe.xml.syndication.rss.Channel20;
  5.     import com.adobe.xml.syndication.rss.Image20;
  6.     import com.adobe.xml.syndication.rss.Item20;
  7.     import com.adobe.xml.syndication.rss.Cloud;
  8.    
  9.     import flash.display.Sprite;
  10.     import flash.events.Event;
  11.     import flash.events.IOErrorEvent;
  12.     import flash.events.SecurityErrorEvent;
  13.    
  14.     import flash.net.*;
  15.    
  16.     public class RSSConsumer extends Sprite
  17.     {
  18.         public static const ITEMS_RETURNED:String = "items_returned";
  19.         public static const ERROR:String = "error";
  20.        
  21.         private var myRSS20:RSS20;
  22.        
  23.         private var __items:Array = new Array();
  24.        
  25.         public function RSSConsumer() {}
  26.        
  27.         public function loadRSS(xmlLink:String=null):void
  28.         {
  29.             var xmlLoader:URLLoader = new URLLoader();
  30.             xmlLoader.addEventListener(Event.COMPLETE, onResult);
  31.             var urlReq:URLRequest = new URLRequest(xmlLink);
  32.             xmlLoader.load(urlReq);
  33.         }
  34.        
  35.         private function onResult(event:Event):void
  36.         {
  37.             var loader:URLLoader = URLLoader(event.target);
  38.            
  39.             myRSS20 = new RSS20();
  40.            
  41.             var xmlData:XML = XML(loader.data);
  42.             myRSS20.populate(xmlData);
  43.             items = myRSS20.items;
  44.            
  45.             dispatchEvent(new Event(ITEMS_RETURNED));
  46.         }
  47.        
  48.         private function onIOError(event:IOErrorEvent):void
  49.         {
  50.             dispatchEvent(new Event(ERROR));
  51.         }
  52.        
  53.         private function onSecurityError(event:SecurityErrorEvent):void
  54.         {
  55.             dispatchEvent(new Event(ERROR));
  56.         }
  57.        
  58.         public function get items():Array { return __items; }
  59.         public function set items(value:Array):void
  60.         {
  61.             __items = value;
  62.         }
  63.     }
  64. }

Now that we have out items, we can break out Papervision3D and make them scrollable.

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import gs.TweenMax;
  4.     import gs.easing.*;
  5.    
  6.     import com.adobe.xml.syndication.rss.Item20;
  7.    
  8.     import org.papervision3d.materials.special.Letter3DMaterial;
  9.     import org.papervision3d.typography.fonts.HelveticaBold;
  10.         import org.papervision3d.typography.Text3D;
  11.     import org.papervision3d.events.InteractiveScene3DEvent;
  12.  
  13.     import com.bit101.components.*;
  14.    
  15.     import flash.display.Sprite;
  16.     import flash.events.Event;
  17.     import flash.events.MouseEvent;
  18.     import flash.events.KeyboardEvent;
  19.    
  20.     import org.papervision3d.cameras.Camera3D;
  21.     import org.papervision3d.materials.*;
  22.     import org.papervision3d.objects.DisplayObject3D;
  23.     import org.papervision3d.render.BasicRenderEngine;
  24.     import org.papervision3d.scenes.*;
  25.     import org.papervision3d.view.Viewport3D;   
  26.     import org.papervision3d.view.BasicView;   
  27.    
  28.     [SWF(backgroundColor="#000000",frameRate="40")]
  29.     public class RSSNav extends Sprite
  30.     {
  31.         private var cameraTarget:DisplayObject3D = DisplayObject3D.ZERO;
  32.         private var myCamera:Camera3D;
  33.         private var myScene:Scene3D;
  34.         private var render:BasicRenderEngine;    
  35.         private var view:Viewport3D;           
  36.         private var pivot:DisplayObject3D;   
  37.         private var pv3dStage:Sprite = new Sprite();;
  38.         private var totalDistance:Number;
  39.         private var currentItem:Number;
  40.         private var newZ:Number = 0;
  41.         private var oldZ:Number;
  42.         private var increment:Number = 2000;
  43.        
  44.         // Here's our RSS Consumer
  45.         private var consumer:RSSConsumer;
  46.        
  47.         // These are Minimal Comps
  48.         private var knob:Knob;
  49.         private var hslider:HSlider;
  50.        
  51.         private var itemColl:Array;
  52.         private var rssItemColl:Array;
  53.        
  54.         public function RSSNav()
  55.         {
  56.             createScene();
  57.             loadRSS();
  58.         }
  59.        
  60.         private function createScene():void
  61.         {
  62.             myCamera        = new Camera3D();   
  63.             myCamera.fov    = 35;
  64.             myCamera.y    = 200;
  65.            
  66.           addChild(pv3dStage);
  67.            
  68.             view             = new Viewport3D(3000, 3000, true, true);
  69.             view.interactive = true;
  70.             pv3dStage.addChild(view);
  71.            
  72.             myScene = new Scene3D();
  73.             render  = new BasicRenderEngine();
  74.             pivot   = new DisplayObject3D();   
  75.            
  76.             stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyboard);
  77.         }
  78.  
  79.         private function loadRSS():void
  80.         {
  81.             consumer = new RSSConsumer();
  82.             consumer.addEventListener(RSSConsumer.ITEMS_RETURNED, onData);
  83.             consumer.loadRSS("http://www.mikebritton.com/index.xml");         
  84.         }      
  85.        
  86.         private function createNavigation():void
  87.         {
  88.             hslider = new HSlider(this);
  89.             hslider.name = "hslider";
  90.             hslider.addEventListener(Event.CHANGE, onUpdate);
  91.             hslider.addEventListener(MouseEvent.CLICK, deselect);
  92.             hslider.x = (stage.stageWidth/2)-hslider.width/2;
  93.             hslider.y = stage.stageHeight / 3;
  94.             hslider.backClick = true;
  95.             addChild(hslider);
  96.            
  97.             knob = new Knob(this);
  98.             knob.name = "knob";
  99.             knob.setSize(100, 100);
  100.             knob.addEventListener(Event.CHANGE, onUpdate);
  101.             knob.addEventListener(MouseEvent.CLICK, deselect);
  102.             knob.x = (stage.stageWidth/2)-knob.width/2;
  103.             knob.y = 120;
  104.             knob.visible = true;
  105.             addChild(knob);
  106.         }
  107.        
  108.         private function deselect(event:MouseEvent):void
  109.         {
  110.             for (var i:int = 0; i <itemColl.length; i++) {
  111.                 if (i != currentItem) {
  112.                     InteractiveText3D(itemColl[i]).reveal();
  113.                 }
  114.             }         
  115.         }      
  116.        
  117.         private function distinguish():void
  118.         {
  119.             InteractiveText3D(itemColl[currentItem]).reveal();
  120.            
  121.             for (var i:int = 0; i 0) {
  122.                 rssItemColl   = event.target.items;
  123.                 itemColl      = new Array();
  124.                 currentItem   = 0;
  125.                 totalDistance = (rssItemColl.length * increment)+1000;
  126.                
  127.                 for (var i:int = 0; i 0) {
  128.                 newZ = (event.target.value * .01) * totalDistance;
  129.             } else {
  130.                 newZ = 0;
  131.             }
  132.            
  133.             var cameraTweenObject:Object = { ease:Quad.easeOut,z:newZ };
  134.             TweenMax.to(myCamera, 2, cameraTweenObject);
  135.            
  136.             distinguish();
  137.         }      
  138.        
  139.        
  140.         private function onKeyboard(event:KeyboardEvent):void
  141.         {
  142.             switch (event.keyCode) {
  143.                 case 39: // Right arrow
  144.                     if (currentItem<rssItemColl.length-1)
  145.                         currentItem++;
  146.                 break;
  147.                 case 38: // Up arrow
  148.                     if (currentItem0)
  149.                         currentItem--;
  150.                 break;
  151.                 case 40: // Down arrow
  152.                     if (currentItem>0)
  153.                         currentItem--;
  154.                 break;       
  155.             }
  156.             hslider.value = ((currentItem * increment) / totalDistance) * 100;
  157.         }
  158.     }
  159. }

Set RSSNav to compile and give it a shot. As you can see when you preview, you can scroll through the RSS items with Knob, HSlider or the keyboard.

Next time, we'll expand on this idea and have even more fun with Papervision 3D.

View Example

Mike

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

3 Responses to “RSS Visualization with PV3D and Minimalcomps”

Feed for this Entry Trackback Address

Leave a Reply


Follow WovenCharlie on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed