Create a Fisheye Flickr Image Viewer with Adobe Flex

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

The "fisheye" effect is the same effect that you'll see on the Mac OS Dockbar. It is where the item under the mouse is enlarged, and the others to the sides scale down the further they are from the pointer.

This effect has been replicated in Flex by Ely Greenfield, and we will make use of this Fisheye Component to display some images from Flickr.

The process of retrieving photos from Flickr has been documented in detail in this article here. It shows you what libraries you will need, and where to get the Flickr API keys.

We will use the same Flickr search code in this demo here, so if you are not familiar with integrating Flickr and Flex, read the article before continuing.

The Fisheye Component has a two main display components: Fisheye and FisheyeTile. We will use the FisheyeTile to display a grid of images (by contrast, Fisheye will display a single row).

Here we add the FisheyeTile element, set it's data source to an Array called images, and add an item renderer that will display a bitmap image. This is the minimum code required to display images in the FisheyeTile: the FisheyeTile would display text by default without the item renderer.

<qs:FisheyeTile id="fisheye" dataProvider="{images}" width="100%" height="100%">

<qs:itemRenderer>

<mx:Component>

<qs:BitmapTile/>

</mx:Component>

</qs:itemRenderer>

</qs:FisheyeTile>

Add a Script element, which will hold the ActionScript code.

<mx:Script>

<![CDATA[

// code goes here

]]>

</mx:Script>

Then import the following packages:

import com.adobe.webapis.flickr.*;

import com.adobe.webapis.flickr.events.*;

import mx.collections.*;

Add the following variables.

private static const SEARCH_STRING:String = "landscape";

private static const MAX_RESULTS:int = 64;

private static const API_KEY:String = "YourFlickrAPIKey";

private static const HORIZONTAL_ALIGN_LEFT:String = "left";

private static const HORIZONTAL_ALIGN_CENTER:String = "center";

private static const HORIZONTAL_ALIGN_RIGHT:String = "right";

private static const HORIZONTAL_ALIGN_JUSTIFIED:String = "justified";

private static const VERTICAL_ALIGN_TOP:String = "top";

private static const VERTICAL_ALIGN_CENTER:String = "center";

private static const VERTICAL_ALIGN_BOTTOM:String = "bottom";

private static const VERTICAL_ALIGN_JUSTIFIED:String = "justified";

[Bindable]

private var images:Array = new Array();

The constant strings define the options that can be assigned to the FisheyeTile setStyle function, which is used to define the appearance of the FisheyeTile element.

The images array is the data source for the FisheyeTile element. It is bindable so changes made to the object will be displayed automatically.

Add the following attribute to the Application element.

applicationComplete="appComplete()"

The appComplete function will now be called when the application has loaded. In the Script element add the appComplete function.

public function appComplete():void

{

fisheye.setStyle("horizontalAlign", HORIZONTAL_ALIGN_CENTER);

fisheye.setStyle("verticalAlign", VERTICAL_ALIGN_CENTER);

fisheye.setStyle("defaultSpacing", 5);

fisheye.setStyle("defaultScale", 0.25);

fisheye.setStyle("hilightMaxScale", 0.4);

fisheye.setStyle("hilightScaleRadius", 3);

fisheye.setStyle("hilightScaleSlope", 1);

fisheye.setStyle("animationSpeed", 0.2);

flickrSearch(SEARCH_STRING);

}

Here we initialise the FisheyeTile element. The style settings are self-explanatory.

We then call the flickrSearch function to get some Flickr images.

The flickrSearch and onPhotosSearch functions were taken from the external article mentioned at the begining of this tutorial. They contact the Flickr service and then save the Flickr image URLs into a temporary Array object. Once all the URLs have been built, the images Array (which is set as the data provider for the FisheyeTile element) is then set to referenc the temporary array. At this point the FisheyeTile element will start loading and displaying the images.

public function flickrSearch(search:String):void

{

var service:FlickrService = new FlickrService(API_KEY);

service.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, onPhotosSearch);

service.photos.search("", search, "any", "", null, null, null, null, -1, "", MAX_RESULTS, 1);

}

protected function onPhotosSearch(event:FlickrResultEvent):void

{

var tempArray:Array = new Array();

for each (var photo:Photo in event.data.photos.photos)

{

var imageURL:String = 'http://static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg';

tempArray.push(imageURL);

}

images = tempArray;

}

The FisheyeTile component can be used to create a very eye catching image display, and is fairly easy to use (especially to other fisheye libraries I have seen that require you to manually calculate and update the position and size of the individual items being displayed).

Return to the Tutorial Index

Reflections in Adobe Flex

This tutorial shows you how to add a reflection pane to an Adobe Flex application.