Something Wrong with the System

Alright, here it is flipBoard Ver. 1.0!

This is an animated picture transition engine written in AS3 which uses as3flickrlib to connect to Flickr to pull images in real time.

I realized that the panels in the previous version were far too small and far too fast. Giving the impression that the panels were just kind of shimmering rather than actually flipping. This version has much larger and slower panels.

I’ve also added title and author support!

Another new feature is skipping images: If you click on the image you can force it to go to the next image without waiting for the timer. I’ve added a new transition style (circular) for these forced swaps.

After the break I’ll show off the working swf, I’ll give a link to the source code and I’ll describe how to use the application.

I’ve also included a bare bones example of my as3flickrlib implementation.

Get the source for the flipboard (includes flickrGrabber)

Get the source for the bare bones flickrGrabber

Using the flickrGrabber class.

First: We import the flickrGrabber class and create a new instance.

import ca.organa.flickrGrabber;
var grabber:flickrGrabber = new flickrGrabber(400, 300, "yourAPIKey", "yourSecret", "search", false);

The first two arguments describe the height and width of your target.
This is necessary because Flickr provides images in several sizes.
flickrGrabber will try to return an image that will completely fill your target area. Usually, the returned image will be bigger than your target so you should include code to scale it down.

The next two arguments are your flickr API key and shared secret key. You can get these from here. You'll need both of them to log into the flickr API.

Finally, you specify a search term and set a boolean which tells the class if you're doing a normal search or specifying a user name.

Next the eventListeners

grabber.addEventListener("imageReady", onLoadedImage);
grabber.addEventListener("flickrGrabberError", onErrorImage);
grabber.addEventListener("flickrConnectionReady", onFlickrReady);

When the flickrGrabber class reports it has a connection to Flickr we ask it to load the first image.

function onFlickrReady(evt:Event):void {
grabber.loadNextImage();
}
function onLoadedImage(evt:Event):void{
addChild(grabber.image);
}

Once that image has been loaded show it on screen by pulling 'grabber.image' (a bitmap) and adding it to the display list.

That's it. Kind of easy!

Another working example of the as3FlickrLib class can be found here this is the code that got me started with my own implementation so you'll find a lot of similarities.

The flipBoard class

All you need to know about it are the constants at the top of the code:

private const DISPLAY_WIDTH:int = 450;
private const DISPLAY_HEIGHT:int = 360;
private const SQUARE_WIDTH:int = 30
private const SQUARE_HEIGHT:int = 30;
private const PICK_TIMING:Number = 60;
private const PICK_AMOUNT:Number = 6;
private const IMAGE_TIMING:Number = 5000;
private const DISTANCE_VARIANCE:Number = 100
private const MAX_FLIP_SPEED:Number = 0.1;
private const MIN_FLIP_SPEED:Number = 0.05;
private const SHOW_TITLES:Boolean = true;

Tell the code your stage width/height with the DISPLAY_WIDTH and DISPLAY_HEIGHT
Set the size of the individual panels with SQUARE_WIDTH and SQUARE_HEIGHT
During the transitions you can change how often and how many panels are animated with
PICK_TIMING and PICK_AMOUNT.
Change the speed at which the panels flip with MAX_FLIP_SPEED and MIN_FLIP_SPEED.
Finally, you can turn the titles on and off with the boolean SHOW_TITLES.

If you'd like me to go into more detail about any of the code leave a comment and I'll try to help out.