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

?View Code ACTIONSCRIPTpackage { 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

?View Code ACTIONSCRIPTimport 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, [i4, i4+4, 0.25, 1.0]); var sTracker:FunctionTracker = new FunctionTracker(clip.myFill, "scaleY", soundAnalyzer.getFrequencyRange, [i4, i4+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 Bookmark and Share More »Powered by Bookmarkify™

December 19 2009, 10:12pm | Comments »

I posted to i-create.org

The Internet == ice9 for Business

http://i-create.org/2009/12/19/the-internet-is-equal-tooice9-for-business/

Ice-nine is a fictional material conceived by writer Kurt Vonnegut in his novel Cat’s Cradle. It is supposed to be a more stable polymorph of water than common ice (Ice Ih) which instead of melting at 0° Celsius (32° Fahrenheit), melts at 45.8°C (114.4°F). When ice-nine comes into contact with liquid water below 45.8°C (which is thus effectively supercooled), it acts as a seed crystal, and causes the solidification of the entire body of water which quickly crystallizes as ice-nine. A global catastrophe involving freezing the Earth’s oceans by simple contact with ice-nine is used as a plot device in Vonnegut’s novel. – http://en.wikipedia.org/wiki/Ice-nine As technology progresses we will see more and more people using thin-client systems again. They will store data in the cloud and mobile devices will proliferate and rapidly change the landscape of personal computing small is the new big. Our cell phones will morph into powerful desktop like devices(oh and this is predictable just study

December 19 2009, 8:59pm | Comments »

I posted to delicious.com

Big Spaceship | Labs Blog - Zend AMF Is Easy

http://www.bigspaceship.com/blog/labs/zend-amf-is-easy/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%253A+BigSpaceshipLabs+%2528Big+Spaceship%253A+Labs%2529

December 18 2009, 1:39pm | Comments »

Away3D Flash Engine » Tutorials

#Away3D Tutorials > Flash Magazine

Adobe Flash Platform Game Technology Center

PixelBender Raytracer & Milkyball | UnitZeroOne

Creating Flex Applications with IntelliJ IDEA | JetBrains IntelliJ IDEA Blog

IntelliJ Idea 9 For Flash Dev Overview - InsideRIA

Pixelfumes Blog » Blog Archive » Flash on the iPhone, in demo form

The Flash Blog » Flash Player 10.1 multi-touch FAQ

Flash is good for the Soul

Animated List #Menu in #flash

Getting RED 5 on #Ubuntu 9.04

java

#Flash Runtime in #Javascript

The future of the Flash Player | Peter Elst

Tech Good Read

jwilker's Library

My Data Visualization Presentation from RIAdventure (full video and slides) | Doug McCune

The Flash Blog » Video of Flash multi-touch on Windows and Mac

Iterative Data Storage in AS3 - InsideRIA

Introducing the Adobe Flash Platform Gaming Technology Center | Adobe Developer Connection

404 Errors Hyped With PaperVision3d

The Internet == ice9 for Business

Big Spaceship | Labs Blog - Zend AMF Is Easy

Popular Tags

Search