Google Scuka Jjot


Monthly Archive for January, 2009

RSS Visualization with PV3D and Minimalcomps

Published
by
Mike Britton
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

server upgrades

Published
by
Admin
on January 13, 2009
in Tutorials
. 0 Comments

rubberbandball
Hey Everyone,

Just a quick note and apology for some recent server / upgrade issues. The transition of servers, code and WordPress updates have created a little bit of a mess.

Please feel free to air your grievances here. Especially if things appear broken or look out of place. We will do our best to fix and resolve asap. Thanks for understanding while we are in this transition period. We hope to continue supplying the best Flash / Papervision tutorials for years to come.

Charlie

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

Code / Programs it’s hard to live without

Published
by
Admin
on January 2, 2009
in Papervision and Tutorials
. 6 Comments

p_package_custom_built

Here is a quick list of Classes / Packages and programs that seem to make life just that much easier. This is a list based off of things we use daily for quick development of agency type Flash sites. This is in no way a complete list but anyone just wanting to increase their productivity can start here.

Programs:

1) FlashDevelop (PC only - or via VMWare) :/

Use this and easily literally shave days off your coding time. If you don't use this go with FlexBuilder.

2) Charles (Mac or PC)

Find the root of the real issues when you load dynamic content.

3) Smart FTP (PC only) :/

Quick uploads

Code:

1) Foomonger (Later)

Call a method / function a second later or a frame later. Also has a LoadWatcher for loadProgress

2) Tweener

Some use TweenLite I like Tweener. It always seems to yield the best results. I could be wrong but that's my opinion.

2) I was wrong - TweenLite/Max

The results speak for themselves - TweenLite/Max vs other Tween Engines

3) BulkLoader (unless you're using Gaia - see below)

The hotness for loading multiple files and having access to them across your whole project.

4) Papervision

Of course. :-D

* Added from Comments *

5)SWFObject

Frameworks:

1) Gaia

Steven Sacks has created one of the best frameworks that is to be used on agency style Flash sites. You can have an entire simple flash site up in about 5 minutes or less. (not joking). Site scaffolding, asset loading, browser navigation, page loading, SEO, a place for your transitions (code or timeline) and much more. AS2 and AS3 supported. Check it out!

Are there any programs or code bases you can't live without?

Let us know.

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