404 Errors Hyped With PaperVision3d pt. 2

Capture URL for search with JavaScript and Pass it to Flash
Search Google from URL parsing
Use of Random Range
Create an Array of Spheres that holds the Google results
Apply the title field to a Text3D and add that as a child to the Sphere
Apply an Event to the Sphere to navigate to the Google result.
How to trace out events from flash to Firebug

This tutorial uses the following libraries of code:
Hype
PaperVision3d
googleas3api

I chose to omit the parallax effect. You can find an excellent example of the parallax effect on gotoandlearn.com, .Net , and web designer magazine. I might modify this swf later to have youtube results and render them as planes. If you go to seacloud9.org and look for a page that you know is not on that web server it will serve up google results and display them in three dimensions randomly. This page is distracting on purpose but It was kind of fun to make. You can go to the page results by clicking on the sphere. You can move the viewport of the search results by moving the sliders.

JavaScript to retrieve the url location and parse it:

    var gResult;
    var gResultL;
    function getQueryString(){
    var qString = window.location;
    myReg  = new RegExp("http://seacloud9.org/");
    var url = qString.href.replace(myReg, "");
    return url;
    }
 
    function googleResultArray(googleResult){
        gResult = googleResult;
    }
 
    function getGoogleTitle(titleNum){
        return gResult[titleNum];
    }

ActionScript 3 Code behind for SWF all Google Search code and Debugging

package {
    import flash.display.*;
    import flash.events.*;
    import flash.events.Event;
    import flash.filters.BitmapFilterQuality;
    import flash.filters.BlurFilter;
    import fl.transitions.*;
    import flash.media.Sound;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.net.URLRequestMethod;
    import flash.net.navigateToURL;
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.objects.primitives.Sphere;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.typography.Font3D;
    import org.papervision3d.typography.Text3D;
    import org.papervision3d.materials.BitmapFileMaterial;
    import org.papervision3d.materials.special.Letter3DMaterial;
    import org.papervision3d.typography.fonts.HelveticaBold;
    import org.papervision3d.materials.MovieMaterial;
    import org.papervision3d.materials.*;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import hype.framework.core.TimeType;
    import hype.framework.rhythm.SimpleRhythm;
    import hype.framework.sound.SoundAnalyzer;
    import org.papervision3d.lights.PointLight3D;
    import org.papervision3d.materials.shadematerials.CellMaterial;
    import flash.external.ExternalInterface;
    import be.boulevart.google.events.*;
    import     be.boulevart.google.ajaxapi.search.web.*;
    import     be.boulevart.google.ajaxapi.search.web.data.*;
    import     be.boulevart.google.ajaxapi.search.*;
 
 
    public class e404 extends MovieClip {
        public var viewport:Viewport3D;
        public var scene:Scene3D;
        public var camera:Camera3D;
        public var viewport2:Viewport3D;
        public var scene2:Scene3D;
        public var camera2:Camera3D;
        public var plane:Plane;
        public var plane2:Plane;
        public var plane3:Plane;
        public var sphere:Sphere;
        public var font3d:Font3D;
        public var text3d:Text3D;
        public var fontMat:Letter3DMaterial;
        private var cell:CellMaterial;
        private var sphereArr:Array;
        public var light:PointLight3D;
        public var renderer:BasicRenderEngine;
        public var renderer2:BasicRenderEngine;
        public var googleTitle:Array = new Array();
        public var googleLink:Array = new Array();
        public var googleWebSearch:GoogleWebSearch=new GoogleWebSearch();
        public var googURL:URLRequest;
 
 
        public function e404():void {
            addEventListener( Event.ENTER_FRAME, e404Go );
 
        }
        private function onWebResults(e:GoogleSearchEvent):void {
            var resultObject:GoogleSearchResult=e.data as GoogleSearchResult;
            ExternalInterface.call( "console.log" ,"Estimated Number of Results: "+resultObject.estimatedNumResults);
            ExternalInterface.call( "console.log" ,"Current page index: "+resultObject.currentPageIndex);
            ExternalInterface.call( "console.log" ,"Number of pages: "+resultObject.numPages);
 
            for each (var result:GoogleWebItem in resultObject.results) {
                googleTitle.push(result.title);
                googURL = new URLRequest (result.url);
                googleLink.push(googURL);
                ExternalInterface.call( "console.log" ,"link:"+result.url+"title:"+result.title );
            }
 
            ExternalInterface.call( "googleResultArray" , googleTitle );
            //build 3d world now that we have our google search!
            init3D();
            createSearch();
            addEventListeners();
        }
 
        private function onAPIError(evt:GoogleAPIErrorEvent):void {
            trace("An API error has occured: " + evt.responseDetails, "responseStatus was: " + evt.responseStatus);
        }
 
        public function e404Go(e:Event):void {
            removeEventListener(Event.ENTER_FRAME,e404Go );
            // Create the container Sprite
            stage.scaleMode=StageScaleMode.NO_SCALE;
            stage.align=StageAlign.TOP_LEFT;
            //this javascript function returns the query string from the window location
            googleWebSearch.search(ExternalInterface.call( "getQueryString" ),0,"english");
            googleWebSearch.addEventListener(GoogleAPIErrorEvent.API_ERROR,onAPIError);
            googleWebSearch.addEventListener(GoogleSearchEvent.WEB_SEARCH_RESULT,onWebResults);
 
        }
 
        private function init3D():void {
            // VIEWPORT
            viewport=new Viewport3D(0,0,true,false);
            viewport2=new Viewport3D(stage.width,stage.height,true,true);
            addChild( viewport );
            addChild( viewport2 );
            //
            // RENDERER
            renderer = new BasicRenderEngine();
            renderer2 = new BasicRenderEngine();
            //
            // SCENE
            scene = new Scene3D();
            scene2 = new Scene3D();
            //
            // CAMERA
            camera = new Camera3D();
            camera.zoom=11;
            camera.focus=100;
 
            camera2 = new Camera3D();
            camera2.zoom=11;
            camera2.focus=100;
        }
 
        private function createSearch():void {
            // Set some colors so we can see if loading is still happening,
            // or if it failed
            BitmapFileMaterial.LOADING_COLOR=0x000000;
            BitmapFileMaterial.ERROR_COLOR=0xFF0000;
            //
            var material:BitmapFileMaterial=new BitmapFileMaterial("404e.png");
            material.doubleSided=true;
            var material2:BitmapFileMaterial=new BitmapFileMaterial("404e2.png");
            material2.doubleSided=true;
            var material3:ColorMaterial=new ColorMaterial(0xFC0606,.3);
            material3.doubleSided=true;
            light=new PointLight3D(true);
            light.z=0;
            light.y=randomRange(-30,280);
            light.x=randomRange(-350,500);
 
 
            //
            plane=new Plane(material,300,100,10,10);
            plane.x=-350;
            plane.y=265;
 
            // Second ViewPort objects sphere and text from google
            sphereArr = new Array();
            for (var i:int = 0; i < googleTitle.length; i++) {
                var myPattern:RegExp = /<b>/g;
                var myPattern2:RegExp = /<\/b>/g;
                var googSearch:String = new String(googleTitle[i].toString());
                googSearch = googSearch.replace(myPattern, "");
                googSearch = googSearch.replace(myPattern2, "");
                sphere=new Sphere(buildCell(),randomRange(10,100),randomRange(5,20),10);
                sphere.x=randomRange(-500,500);
                sphere.y=randomRange(-500,500);
                sphere.z=randomRange(-500,500);
                try{
                var colorPoolCell:Array = new Array(0x9F3F11, 0xFC0606, 0x9FC1BE, 0x787D29, 0xE0D4BA, 0x911F15, 0xBFCDF2, 0xF0EEF1);
                var colorID:int = randomRange(7, 0);   
                fontMat = new Letter3DMaterial(colorPoolCell[colorID]);
                font3d = new HelveticaBold();
                text3d = new Text3D(googSearch, font3d,  fontMat);
                text3d.x = sphere.x + googSearch.length + 10;
                text3d.y = sphere.y + 10;
                //text3d.z = sphere.z + 10;
                sphere.addChild(text3d);
                sphere.id = i;
                scene2.addChild( sphere );
                sphereArr.push(sphere);
                }
                catch(e:Error){
                    // Sometimes the google title font3D will fail but we can catch it so it doesn't
                    // have a nasty flash epic fail warning..
                    ExternalInterface.call( "console.log" , "Error Reached = " + e);
                }
 
 
 
            }
            //create the 3D planes for the first ViewPort
 
            plane2=new Plane(material2,300,100,10,10);
            plane2.x=-350;
            plane2.y=265;
            plane2.z=-60;
            plane3=new Plane(material3,800,150,10,10);
            plane3.x=-350;
            plane3.y=285;
            plane3.z=80;
            //
            scene.addChild( plane );
            scene.addChild( plane2 );
            scene.addChild( plane3 );
            addListner();
        }
        function addListner():void{
            for(var i:int = 0; i < sphereArr.length; i++){
            try{
            sphereArr[i].addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, callLink );
            ExternalInterface.call( "console.log" , "Event Added" + i);
            }catch(e:Error){
                ExternalInterface.call( "console.log" , e);
            }
            }
        }
        function callLink(e:InteractiveScene3DEvent):void {
            try {
                navigateToURL(googleLink[e.target.id], '_blank');
                ExternalInterface.call( "console.log" , "link Clicked --" + e.target.id + "Link Called - " + googleLink[e.target.id]);
            } catch (err:Error) {
                ExternalInterface.call( "console.log" , err + " id: " + e.target.id + "Errored on: " + googleLink[e.target.id].toString() );
            }
        }
 
 
 
        function buildCell():CellMaterial {
            var colorPoolCell:Array = new Array(0x9F3F11, 0xFC0606, 0x9FC1BE, 0x787D29, 0xE0D4BA, 0x911F15, 0xBFCDF2, 0xF0EEF1);
            var colorID:int = randomRange(7, 0);
            var colorID2:int = randomRange(7, 0);
            //random color material generation returns cellMaterial
            //cell=new CellMaterial(light,Math.round(Math.random()*0xFFFFFF),Math.round(Math.random()*0xFFFFFF),100);
            cell=new CellMaterial(light,colorPoolCell[colorID],colorPoolCell[colorID2],100);
            cell.interactive=true;
            return cell;
        }
 
        function randomRange(max:Number, min:Number = 0):Number {
            return Math.random() * (max - min) + min;
        }
 
 
        private function addEventListeners():void {
            addEventListener( Event.ENTER_FRAME, __onEnterFrame );
        }
 
        private function removeEventListeners():void {
            removeEventListener( Event.ENTER_FRAME, __onEnterFrame );
        }
 
        /*===================================================================\\
        ||Listener Functions ||
        \\===================================================================*/
 
        private function __onEnterFrame( e:Event ):void {
            //moves the error planes viewort according to mouse position
            plane.rotationY=viewport.mouseX/4;
            plane.rotationX=viewport.mouseY/4;
            plane2.rotationY=viewport.mouseX/4;
            plane2.rotationX=viewport.mouseY/4;
            plane3.rotationY=viewport.mouseX/4;
            plane3.rotationX=viewport.mouseY/4;
            light.rotationX=viewport2.mouseY/4;
            light.rotationY=viewport2.mouseY/4;
            //
            sldWorld.addEventListener("change", updateWorldAxisValue);
            sldZoomCam.addEventListener("change", updateCamerValue);
            this.setChildIndex(sldWorld, this.numChildren-1);
            this.setChildIndex(sldZoomCam, this.numChildren-1);
            renderer.renderScene( scene, camera, viewport );
            renderer2.renderScene( scene2, camera2, viewport2 );
        }
 
        function updateWorldAxisValue(argument) {
            var sldWorld_value:Number=this.sldWorld.value;
            camera2.rotationY=sldWorld_value;
 
 
        }
        function updateCamerValue(argument) {
            var sldZoomCam_value:Number=this.sldZoomCam.value;
            camera2.zoom=sldZoomCam_value;
 
        }
    }
}

ActionScript3 Timeline Code for Sound Analysis and Image Effects

import hype.extended.behavior.FunctionTracker;
import hype.extended.behavior.Oscillator;
import hype.extended.color.ColorPool;
import hype.extended.layout.GridLayout;
import hype.framework.display.BitmapCanvas;
import hype.framework.sound.SoundAnalyzer;
import hype.extended.behavior.FixedVibration;
var myWidth = stage.stageWidth;
var myHeight = stage.stageHeight;
 
var clipCanvas:BitmapCanvas = new BitmapCanvas(myWidth, myHeight);
addChild(clipCanvas);
 
var clipContainer:Sprite = new Sprite();
 
var soundAnalyzer:SoundAnalyzer = new SoundAnalyzer();
soundAnalyzer.start();
 
var colorPool:ColorPool = new ColorPool(
    0x9F3F11, 0xFC0606, 0x9FC1BE, 0x787D29, 0xE0D4BA, 0x911F15, 0xBFCDF2, 0xF0EEF1
);
 
// xStart, yStart, xSpacing, ySpacing, columns
 
var layout:GridLayout = new GridLayout(0, myHeight / 2, 10, 0, 34);
 
var numItems:int = 64;
var freq:int = 120;
 
for (var i:uint = 0; i < numItems; ++i) {
    var clip:MySquare = new MySquare();
 
    layout.applyLayout(clip);
    colorPool.colorChildren(clip);
 
    // object, property, soundAnalyzer.getFrequencyRange, [startRange, endRange, min, max]
 
    var aTracker:FunctionTracker = new FunctionTracker(clip.myFill, "alpha", soundAnalyzer.getFrequencyRange, [i*4, i*4+4, 0.25, 1.0]);
    var sTracker:FunctionTracker = new FunctionTracker(clip.myFill, "scaleY", soundAnalyzer.getFrequencyRange, [i*4, i*4+4, 0.5, 30.0]);
    aTracker.start();
    sTracker.start();
 
    // target Object, property, waveFunction, frequency, min, max, start value
 
    var yOsc:Oscillator = new Oscillator(clip, "y", Oscillator.sineWave, freq, 60, 600, i/(180/2));   
    yOsc.start();
 
    clipContainer.addChild(clip);
}
 
clipCanvas.startCapture(clipContainer, true);
 
var sound:Sound = new Sound();
sound.load(new URLRequest("http://i-create.org/actionscript/404e/shortCircuitE1.mp3"));
sound.play();
 
var aVibration:FixedVibration = new FixedVibration(cBagHead, "alpha", 0.9, 0.1, 0.0, 1.0, false);
aVibration.start();

You find working examples of this 404 error page working at the following location:
http://seacloud9.org/Processing.org
http://seacloud9.org/Context Free Art
http://seacloud9.org/Generative Art

A few articles that are good reads:
Web development will become much more complicated
The Future of Web Content

404 Errors Hyped With PaperVision3d 404 Error Pages don’t have to be boring. Especially if...
PaperVision3d The Wall This is a simple papervision3d tutorial it is only purpose...
Twitter and Google Maps Google Maps and Twitter example, grab the user location and...
ZendAMF and the Twitter API Have you ever had the urge to roll your own...
Reloaded.. Quick Tip: Utilize Firebug with ActionScript to trace out tough...

Related posts brought to you by Yet Another Related Posts Plugin.

Other Websites

Brendon Smith Social Networks

404 Errors Hyped With PaperVision3d pt. 2

Brendon Smith

Brendon's Photos

Recent Comments

LifeStream