Alright so I know everyone associates Twitter with birds well all the bird models in the google 3d Warehouse suck. So I decided to make a fish tank because fish are cool. I used away3dlite, hype, and twitter to create this simple 3d / hype experiment. I will give you fare warning it is kind of processor intensive and I think if I re-export my models from prefab as a compile .awd this will alleviate some of the performance issues. The memory management isn’t so bad but I would like to improve the FPS. I will say this though in comparison to the html5 / webGL TweetTank I believe this one performs better. It also doesn’t heat up my Mac book like it is going to take off for space (I have noticed that in Firefox it does heat up when using webGL although it is a pre-alpha). I was also able to add sound to this version and use away3dlite a really solid 3d library for flash. This project was pretty easy didn’t take long to create and PreFab really speed up the process.
PreFab is an Air application that allows Awary3d scene designers to easily import and export models for use with away3d. It is also important to note that away3d has spent a significant amount of time to optimize 3d away3d support Binary Space Partitioning. Hopefully in future versions of PreFab we can import .bsp maps that would truly be the cats meow! I was able to use PreFab to import my .dae files with ease and export them to actionscript with minor changes. It is nice to create the models as actionscirpt class files you can easily make changes to the class file directly and it didn’t take long to get them into flash!
In the next version of this fish tank I will make it so you can search twitter and the fish will be populated with your results. Right now if you click on a fish it will take you to a new window with a twitter search for “Flash”. I will also look at ways to further incorporate Hype and animate the fish more smoothly. I will also implement more camera support. In the third version I would like to demonstrate google maps integration and use the map to zoom in on the specific fish.
For those of you interested learning more about Away3d I suggest this Amazon book I haven’t read it yet but I look forward to it I just received it today in the mail. Away3d is easy to use and I also highly recommend looking at Hype this is a really cool framework that really opens up lots of possibilities for your creative output!
The Source Code:
package { import flash.display.Sprite; import flash.events.Event; public class TweetTank extends Sprite { public var twitterFish:tweetFish=new tweetFish; public function TweetTank() { addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler, false, 0, true); } private function addedToStageHandler(e:Event):void { addChild(twitterFish); twitterFish.init(); twitterFish.visible = true; } } } package { import away3dlite.containers.ObjectContainer3D; import away3dlite.materials.*; import away3dlite.materials.WireColorMaterial; import away3dlite.primitives.Cube6; import away3dlite.templates.BasicTemplate; import away3dlite.core.base.*; import away3dlite.core.utils.*; import away3dlite.events.*; import twFish.*; import twTank.*; import RSSJSONW; import com.theflashblog.utils.Math2; import com.adobe.utils.XMLUtil; import com.adobe.serialization.json.JSON; import com.adobe.xml.syndication.rss.Item20; import com.adobe.xml.syndication.rss.RSS20; import flash.events.IOErrorEvent; import flash.events.EventDispatcher; import flash.events.SecurityErrorEvent; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.navigateToURL; import flash.net.URLRequestMethod; import flash.system.Security; import flash.events.KeyboardEvent; import flash.ui.Keyboard; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Vector3D; import flash.media.Sound; import flash.display.*; import flash.net.URLRequest; import flash.display.Bitmap; import flash.display.BlendMode; import flash.filters.BlurFilter; import flash.filters.GlowFilter; import flash.media.SoundChannel; import flash.utils.Timer; import flash.events.TimerEvent; import gs.TweenLite; import hype.extended.behavior.FunctionTracker; import hype.extended.layout.GridLayout; import hype.framework.sound.SoundAnalyzer; import hype.framework.display.BitmapCanvas; import hype.extended.rhythm.FilterCanvasRhythm; import hype.extended.rhythm.FilterRhythm; public class tweetFish extends BasicTemplate { private var bitmapCanvas:BitmapCanvas; private var musicChannel; private var origin:Vector3D=new Vector3D(0,40,900); private var twFishOne:TwFish1; private var bitmapCanvasBlur:BitmapCanvas; private var twTankC:TwTank1; public var soundAnalyzer:SoundAnalyzer; public var sound:Sound; private var myX:Number=0; public var layout:GridLayout; public var Tank:ObjectContainer3D; [Bindable]public var myRSS:RSSJSONW; Security.loadPolicyFile("http://twitter.com/crossdomain.xml"); Security.allowInsecureDomain("*"); Security.allowDomain("*"); public var myTimer:Timer = new Timer(1000); public var colourScheme:Array=[0x18b849,0x1858b8,0x18b81c,0x18b89c,0xb818b2,0xfd02f4,0x3102fd,0x02b3fd,0x1afd02,0xf4fd02,0xfd02f4,0x3102fd,0x02b3fd,0x1afd02,0xf4fd02]; public function tweetFish() { super(); } public function init():void { stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent); var filterA:Array=new Array ; filterA.push(new GlowFilter(0xFFFFFF, 1, 19, 19, 1, 1, false, false)); var blur:BlurFilter = new BlurFilter(); blur.blurX=900; blur.blurY=900; filterA.push(blur); playMusic(); soundAnalyzer = new SoundAnalyzer(); soundAnalyzer.start(); layout=new GridLayout(-900,-175,30,30,60); Tank = new ObjectContainer3D(); view.scene.addChild(Tank); Tank.addEventListener(MouseEvent3D.MOUSE_MOVE, goFish,false, 0, true); twTankC=new TwTank1(view); view.scene.addChild(twTankC); view.mouseEnabled=true; jsonInit("http://search.twitter.com/search.json?q=flash"); camera.z=-2000; camera.x=-1600; camera.y=400; camera.lookAt( origin ); stage.addEventListener(MouseEvent.CLICK,_checkMouseEventTrail,false,0,true); stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown, false, 0, true); } public function jsonInit(siteFeed:String):void { myRSS = new RSSJSONW();; myRSS._data = ""; myRSS._txtURL = siteFeed; myRSS.onJSON(myRSS._txtURL); myTimer.start(); myTimer.addEventListener("timer", timedFunction); } public function timedFunction(eventArgs:TimerEvent):void { if (myRSS._IsReady == "true") { myTimer.stop(); addFish(myRSS); } } //Really Helpful for tracing events! public function _checkMouseEventTrail($e:MouseEvent):void { var p:* =$e.target; while (p) { trace(">>", p.name,": ",p); p=p.parent; } } public function addFish(myRSS:RSSJSONW):void{ for (var i:uint = 0; i<myRSS._twdata.length; i++) { trace(view); twFishOne=new TwFish1(view); if (i!=0) { twFishOne.x=i*randRange(-200,400); twFishOne.y=i*randRange(-200,400); twFishOne.z=i*randRange(-200,400); } var baseFrequency:uint = (90 % 64)*4; var xMove:FunctionTracker=new FunctionTracker(twFishOne,"scale",dancingFish,[i,twFishOne]); xMove.start(); trace(twFishOne.x); var fishy:Object3D=twFishOne; //twFishOne.clipContainer.addChild(twFishOne); //twFishOne.addChild(twFishOne); view.scene.addChild(twFishOne); twFishOne.name=i.toString(); //fishy.layer.blendMode = BlendMode.ADD; fishy.addEventListener(MouseEvent3D.MOUSE_DOWN, goFish,false, 0, true); } } public function playMusic():void { sound = new Sound(); sound.load( new URLRequest( "test.mp3" ) ); musicChannel=sound.play(0, int.MAX_VALUE); try{ }catch(e:Error){ musicChannel.removeEventListener(Event.SOUND_COMPLETE, loopMusic); } musicChannel.addEventListener(Event.SOUND_COMPLETE, loopMusic); } public function loopMusic(e:Event):void { if (musicChannel!=null) { playMusic(); } } protected function goFish(event:MouseEvent3D):void { trace(myRSS._twdata[int(event.currentTarget.name)]); var myURL:URLRequest = new URLRequest(myRSS._twdata[int(event.currentTarget.name)]); navigateToURL(myURL); } public function onMouseWheelEvent(event:MouseEvent):void { trace(event.delta); TweenLite.to(camera,1,{z: event.delta * 500 + camera.z,onUpdate: onCameraMove}); } private function keyDown(e:KeyboardEvent):void { trace(e); switch (e.keyCode) { case 32 : moveCamera(); break; } } public function randRange(min:Number, max:Number):Number { // Generate a number between and including min - max var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min; return randomNum; } private function dancingFish(i:uint, twFishOne:TwFish1):void { var baseFrequency:uint = (i % 64)*4; //trace(baseFrequency + "-Beat"); var xScaleTracker:FunctionTracker=new FunctionTracker(twFishOne,"scaleX",soundAnalyzer.getFrequencyRange,[baseFrequency,baseFrequency+4,1,2]); var yScaleTracker:FunctionTracker=new FunctionTracker(twFishOne,"scaleY",soundAnalyzer.getFrequencyRange,[baseFrequency,baseFrequency+4,1,2]); var zScaleTracker:FunctionTracker=new FunctionTracker(twFishOne,"scaleZ",soundAnalyzer.getFrequencyRange,[baseFrequency,baseFrequency+4,1,2]); TweenLite.to(twFishOne, 5, {x:twFishOne.x + 50, y:twFishOne.y + 50, z:twFishOne.z + 50}); xScaleTracker.start(); yScaleTracker.start(); zScaleTracker.start(); } private function moveCamera():void { trace("In Move Camera"); TweenLite.to( camera, 4, { x: Math2.rand(-9000, 9000), y: Math2.rand(-9000, 9000), z: 1400 + Math2.rand(-9800, 9000), delay: 2, onUpdate: onCameraMove } ); } private function onCameraMove():void { camera.lookAt( origin ); } override protected function onPreRender():void { Tank.rotationY++; } } }
Download Code / Launch Experiment
Cool Links:
Hype
Hype Blog
Prefab
Prefab – blog
Relly Cool Hype Away3d Example
Away3D
Context Free Art with JavaScript
Related posts:
