topical media & game development
actionscript-extra-flickr-cube-cs.mx
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.
