404 Errors Hyped With PaperVision3d

404 Error Pages don’t have to be boring. Especially if you develop rich internet applications and have access to awesome tools like PaperVision3d and Hype! This is a two part example. This example just shows you simple code to create a planes in PaperVision3d make them follow your mouse. I also used SoundSnap to snag some short-circuit static for background noise. I also used Hype to analyze the sound this is literally an out of the box example of Hype. What is hype? Hype is a new framework for quickly putting together highly interactive eye-candy. Hype was created by Joshua Davis and Brendan Hall. It has special methods like Color Pool, Grids, Vibrations Effects, Sound Analysis, just to name a few in short its wicked cool. I am looking forward to playing around with it more it’s just a matter of finding the time. This was just something I was thinking about placing on my new interactive portfolio. I am going to create a 404 page that utilizes these libraries. This part only shows you the audio analysis(please note the analysis will fail if you are playing youtube or something else in another window), papervision3d plane code, and vibration effect applied to a movie. In part two I will add a parallax effect to give this error page more depth. Mash it with a search that pulls results from i-create (I will pull the URL from the browser with JavaScript) and also has hidden gems in it. I will hope to really dig into hype more. Sometimes it can be fun to make websites that are distracting on purpose read like a choose your own adventure album. I can show an example like this and now show you one of my favorite sites. You have to go out and check out ABC (Abnormal Behavior Child) I think he originally made this style and his site is setup more like a personal odyssey.

Code for the Class Code Behind:

package {
	import flash.display.*;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.*;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.BlurFilter;
	import fl.transitions.*;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.media.Sound;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.*;
	import hype.framework.core.TimeType;
	import hype.framework.rhythm.SimpleRhythm;
	import hype.framework.sound.SoundAnalyzer;
 
 
	public class e404 extends MovieClip {
		public var viewport:Viewport3D;
		public var scene:Scene3D;
		public var camera:Camera3D;
		public var plane :Plane;
		public var plane2 :Plane;
		public var plane3 :Plane;
		public var renderer:BasicRenderEngine;
 
		public function e404():void {
			addEventListener( Event.ENTER_FRAME, e404Go );
 
		}
		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;
			//
			init3D();
			createPlane();
			addEventListeners();
 
 
		private function init3D():void {
			// VIEWPORT
			viewport=new Viewport3D(0,0,true,false);
			addChild( viewport );
			//
			// RENDERER
			renderer = new BasicRenderEngine();
			//
			// SCENE
			scene = new Scene3D();
			//
			// CAMERA
			camera = new Camera3D();
			camera.zoom=11;
			camera.focus=100;
		}
 
		private function createPlane():void {
			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,.6);
			material3.doubleSided=true;
 
			//
			plane=new Plane(material,300,100,10,10);
			plane.x=-350;
			plane.y=265;
 
			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 );
		}
 
		private function addEventListeners():void {
			addEventListener( Event.ENTER_FRAME, __onEnterFrame );
		}
 
		private function removeEventListeners():void {
			removeEventListener( Event.ENTER_FRAME, __onEnterFrame );
		}
 
		private function __onEnterFrame( e:Event ):void {
			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;
			//
			renderer.renderScene( scene, camera, viewport );
		}
	}
}

Below are the actions that are applied to the time-line with in the Movie

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("shortCircuitE1.mp3"));
sound.play();
 
var aVibration:FixedVibration = new FixedVibration(cBagHead, "alpha", 0.9, 0.1, 0.0, 1.0, false);
aVibration.start();

Sometimes it can be fun to make something that is distracting. Kind of reminds me of my college days. Life drawing for about 3 hours(which beats the hell out of Biology and Business lectures) in the morning and then off to do some display work at the Hitchin Post a clothing store I worked at for years. I always had opportunities to use my creative skills with display work their. You know you’ve created great display work when people ask for things out of the window. Display work also used to make retail work easy people see something like it and want to buy hence you don’t need to talk to them. It can be fun to make things interactive! People like eye-candy. Anyway exercises like these help make you a little bit more creative. At least that was the case for these well known display artists Jasper Johns and Andy Warhol. Anyway enough ranting it is Saturday night. I can’t wait until my Media Temple migration is complete and my new interactive portfolio is done. Than I can work on new projects. Ya thanks Josh and Brendan the Hype Framework is like an awesome set of paints!

Cool Sites to Check Out:
ABC
Choose Your Own Adventure and Informatics

Cool Frameworks to Check Out:
PaperVision3D
Hype

404 Errors Hyped With PaperVision3d pt. 2 Capture URL for search with JavaScript and Pass it...
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...
Yahoo Pipes RSS & JSON ActionScript Revisited A while ago I gave a quick example that showed...
myUniveRSS now on Facebook! myUniveRSS is social RSS feed reader. It takes user...

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

Other Websites

Brendon Smith Social Networks

404 Errors Hyped With PaperVision3d

Brendon Smith

Brendon's Photos

Recent Comments

LifeStream