actionscript-extra-flickr-cube-cs.mx [swf] flex
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:distortion="view.distortion.*" applicationComplete="init()" xmlns:mxeffects="com.adobe.ac.mxeffects.*" backgroundColor="#00000" xmlns:ae="*" frameRate="30" > <ae:component_screen id="display"/> <mx:Script> <![CDATA[ import mx.containers.VBox; import mx.controls.*; import mx.effects.*; import mx.events.EffectEvent; import com.adobe.webapis.flickr.*; import com.adobe.webapis.flickr.events.FlickrResultEvent; import com.adobe.ac.mxeffects.*; private const API:String = "[your flickr api key]"; // your flickr api key private const NSID:String = "51213739@N00"; // user to fetch images from private const PAUSE:uint = 2000; // pause between images private const EFFECT_DURATION:uint = 1000; // Cube Effect duration private const BLUR_FILTER:BlurFilter = new BlurFilter(3, 3, 1) // Cube effect blur private const TOTAL_IMAGES:uint = 100; // how many images to display [Bindable] private var URL:String = "http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=" + API; [Bindable] private var tags:String = "computer science"; [Bindable] private var title:String = ""; [Bindable] private var description:String = ""; private const directions:Array = [DistortionConstants.LEFT, DistortionConstants.RIGHT, DistortionConstants.TOP, DistortionConstants.BOTTOM]; private var _flickr:FlickrService; [Bindable] private var _current:Photo; private var _next_photo:Photo; private var _timer:Timer; private var order:Number = 1; private var direction:uint = 0; private var currentIndex:int = 1;
Create the container for the next image to load
private function loadNext():void { var canv:VBox = new VBox(); var loader:SWFLoader = new SWFLoader(); loader.load(getPhotoURI(current)); loader.name = "loader"; loader.scaleContent = false; loader.maintainAspectRatio = true; loader.width = 150; //150; loader.height = 150; //150; loader.addEventListener(Event.COMPLETE, onImageLoaded); canv.addChild(loader); canv.clipContent = false; }
Image has been loaded Create the appropriate effect to display it
private function onImageLoaded(e:Event):void { var f:Effect; if(container.getChildren().length < 1) { // ok, first image loaded, use a Fade effect f = new Fade(SWFLoader(e.target).parent); Fade(f).alphaFrom = 0; Fade(f).alphaTo = 1; container.addChild(SWFLoader(e.target).parent); } else { // from this point we will use always the CubeEffect f = new CubeRotate(container.getChildAt(container.getChildren().length-1)); CubeRotate(f).siblings = [SWFLoader(e.target).parent] direction++; if(direction >= directions.length) direction = 0; CubeRotate(f).direction = directions[direction] CubeRotate(f).blur = BLUR_FILTER; } f.duration = EFFECT_DURATION; f.play(); f.addEventListener(EffectEvent.EFFECT_END, onEffectEnd); }
Image effect display finished go to the next image
private function onEffectEnd(e:EffectEvent):void { if(e.target is CubeRotate) { container.removeChild(DisplayObject(CubeRotate(e.target).target)) container.addChild(DisplayObject(CubeRotate(e.target).siblings[0])) } next(); }
Initialize application
private function init():void { _flickr = new FlickrService(API); //_flickr.addEventListener(FlickrResultEvent.PEOPLE_GET_PUBLIC_PHOTOS, handleEvent); _flickr.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, handleEvent); _flickr.addEventListener(FlickrResultEvent.PHOTOS_GET_CONTEXT, handleEvent); _flickr.addEventListener(FlickrResultEvent.PHOTOS_GET_INFO, handleEvent); _timer = new Timer(PAUSE, 1); _timer.addEventListener(TimerEvent.TIMER, onTimerStep); _timer.stop(); //var h:Number = systemManager.stage.stageHeight; //var w:Number = systemManager.stage.stageWidth; //container.scaleX = 0.8 * w/150; //container.scaleY = 0.8 * w/150; first(); } private var count:Number = 0; private function onTimerStep(e:TimerEvent):void { count++; current = _next_photo; title = _current.title; description = _current.description; //_tags.text = "[" + count + "] " + tags; _title.text = _current.title; //_desc.text = _current.description; status.text ="[" + count + "]"; // + tags; var h:Number = systemManager.stage.stageHeight; var w:Number = systemManager.stage.stageWidth; var x:Number = 0.8 * h/150; var y:Number = 0.8 * w/150; var s:Number = Math.min(x,y); container.scaleX = s; container.scaleY = s; } private var plist:PagedPhotoList; private function handleEvent(e:Event):void { var tmp_photo:Photo; if(e.type == FlickrResultEvent.PEOPLE_GET_PUBLIC_PHOTOS) { plist = PagedPhotoList(FlickrResultEvent(e).data.photos); if(plist.photos.length > 0) { current = plist.photos[0]; } } else if(e.type == FlickrResultEvent.PHOTOS_SEARCH) { plist = PagedPhotoList(FlickrResultEvent(e).data.photos); if(plist.photos.length > 0) { current = plist.photos[0]; } } else if(e.type == FlickrResultEvent.PHOTOS_GET_CONTEXT) { var context:Array = FlickrResultEvent(e).data.context; if(order == 0) { currentIndex++; if(Photo(context[0]).id == '0' || currentIndex >= TOTAL_IMAGES) { order = 1 } } if(order == 1) { if(Photo(context[1]).id == '0') { order = 0 currentIndex = 1; } } tmp_photo = Photo(context[order]); if(tmp_photo.id != "0") { _flickr.photos.getInfo(tmp_photo.id, tmp_photo.secret); } } else if(e.type == FlickrResultEvent.PHOTOS_GET_INFO) { _next_photo = Photo(FlickrResultEvent(e).data.photo); if(_timer.running) _timer.stop(); _timer.start(); } }
Load the First Image
private function first():void { //var tags:String = "creative technology"; //_flickr.people.getPublicPhotos(NSID, "", 1, 1); _flickr.photos.search( "", tags ); }
Load the next image
private function next():void { _flickr.photos.getContext(current.id); }
Get the photo source path
private function getPhotoURI(p:Photo):String { // Wee need a php wrapper page for reading the image contents, otherwise every bitmapdata // based effect will fail on images loaded from external domains //return "http://localhost/media/actionscript-extra-flickr-read.php?file=http://static.flickr.com/" + p.server + "/" + p.id +"_" + p.secret + "_m.jpg"; //return "http://static.flickr.com/" + p.server + "/" + p.id +"_" + p.secret + "_m.jpg"; //return "actionscript-extra-flickr-read.php?file=http://static.flickr.com/" + p.server + "/" + p.id +"_" + p.secret + "_m.jpg"; //title = p.title; description = p.description; return "actionscript-extra-flickr-read.php?file=http://static.flickr.com/" + p.server + "/" + p.id +"_" + p.secret + "_m.jpg"; } private function set current(p:Photo):void { _current = p; loadNext(); } private function get current():Photo { return _current; } private function select( e:Event ) : void { tags = e.target.text; _timer.stop(); init(); //first(); } ]]> </mx:Script> <mx:VBox> <mx:Label color="gray" id="_tags" text="{tags}" /> <mx:Box borderColor="gray" horizontalAlign="center" verticalAlign="middle" id="container"> </mx:Box> <mx:HBox> <mx:Label color="silver" id="_title" text="" /> </mx:HBox> <mx:HBox> <mx:Label color="gray" id="status" text="" /> <mx:TextInput borderColor="gray" color="gray" backgroundAlpha="0" width="250" id="input" text="{tags}" enter="select(event);"/> <mx:Label color="gray" text="#" click="display.toggle();"/> </mx:HBox> </mx:VBox> </mx:Application>
(C) Æliens 27/08/2009
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.