Something Wrong with the System

A Flash/Actionscript blog

flipBoard Version 1.0 (swf and Source)

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 {
function onLoadedImage(evt:Event):void{

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
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.

June 2nd, 2008 by Peter Organa

9 Responses to “flipBoard Version 1.0 (swf and Source)”

  1. Anya Says:

    With slight switch, I see an electronic billboard with “old-school” panel flipping…

  2. Zoubin Says:

    ha! what a neat surprise!.. 🙂

    actually thanks for turning me on the the as3flickr api..

  3. Anya Says:

    Ooooh, you changed to an Istoica flickr pool… So when do you start putting up your own flickr pool? ;o)

  4. Peter Organa Says:

    It’s actually running randomly through 5 different Flickr Streams.

    private var searchTerms:Array = [[“Cardigan Welsh Corgi”, false], [“Piotr M”, true], [“Zoubin Zarin”, true], [“Isto-ica”, true], [“Robocop”, false]];

  5. Sean Says:

    Very nice indeed. I may try creating an AIR app out of this and running it on my XO laptop. Instant digital picture frame 🙂

  6. Peter Organa Says:


    You mean to say the XO laptop can run Flash at an OK speed now?
    I played with one briefly about a year ago (pre-release) and the Flash performance was kind of awful.

    If you give it a shot I’d love to hear about it.

  7. Anya Says:

    Pssst… if you run “Organa” as a search word through the search engine you wouldn’t believe the amount of scantily clad woman that appear… “Help me Obi Wan Kenobi, you’re my only hope!”

  8. LightBox Says:

    Hi, not sure if you can help me with this. I guess I’m missing something really obvious but when I try to compile the flickerGrabber.fla I get the following compiler error:, Line 46
    1017: The definition of base class ServiceEvent was not found
    public class FlickrResultEvent extends ServiceEvent

    Thanks for any assistance.

  9. ShirleyStewart30 Says:

    People deserve good life and personal loans or just bank loan will make it much better. Because freedom depends on money state.