FlickrStreamScreenShot

Flickr Stream

  • Role: Lead Designer & Engineer
  • Team size: 1
  • Date: November 20th, created in 24 hours for the Vermont Hack-a-thon
  • Engine: Flash
  • Available: Click Here

FlickrStreamScreenShotThe Vermont Hack-a-thon, hosted by the 7 days was an event that brought together a host of Vermont developers to create applications that in someway helped Vermont. The only other stipulation was that the application must take advantage of some source of open data.

Working on my own I created a flash application which could search through Flickr and provide a stream of images based on whatever the user input into the search field.

How it Works

Utilizing REST api I take the users searched term and ask Flickr for any pictures that use that term as a tag. From those results the application grabs a random series of 10 images from a random page, anywhere between the 1st page and the 100th. From those 10 images the application grabs 1 randomly, loads the image, and sets to to scroll its assigned row. Each row makes an independent api call to Flickr based on how large the current image is.Images are pressed together to create an organic collage of moving images.

Why?

So why create a searchable flickr application? I am interested in real time, persistently changing data. The scrolling college create a unique snapshot of whatever the user is currently searching for. For example, When Vermont is input into the search term the user gains an idea of what the state is like, and the really interesting part is that depending on when a user searches the resulting images will be different because Flickr is a constantly updating source of data. In the Fall, they will see the colors of the leaves, pumpkins, blue skies, covered barns, etc. However, when searched in winter the result will be very different. Skiers, snow, frozen lakes, etc. If a festival happens to be going on the resulting images will reflect that.

Far from being complete, the Flickr Stream was a great exercise in software development outside of the realm of game development. In addition I was able to add calling REST api to a my skill set as a flash programmer.

Code

Almost the entirety of the code resides within a single class called Row. Three rows are created in the main gameplay class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
public function Row(stage:Stage, DestinationPoint:Point, StartingPosition:Point)
{
myStage = stage;
destination = DestinationPoint;
startingPos = StartingPosition;
imageHolder = new MovieClip()
addChild(imageHolder)
 
//trace("Hello World");
loadData()
 
addEventListener(Event.ENTER_FRAME, imageUpdate)
}
public function loadData()
{
var randomImage_01:int = Math.round(Math.random() * (numberOfStoredImages - 1))
 
var imageName_01:String = "Images/" + randomImage_01 + ".jpg";
 
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadWordComplete)
 
var fileRequest:URLRequest = new URLRequest(imageName_01);
 
myLoader.load(fileRequest)
}
 
public function onLoadWordComplete($e:Event)
{
var newImage:DisplayObject = myLoader.content
var originalAspectRatio:Number = newImage.width/newImage.height
 
newImage.height = 125;
newImage.width = newImage.height * originalAspectRatio;
loaderArray.push(newImage)
 
createImages(newImage)
 
}
public function createImages(randomImage:DisplayObject)
{
if (!starting)
{
startingPos.x = currentImage.imageRightBounds + 50;
}
 
starting = false;
var newImage:Image = new Image(destination, startingPos, randomImage)
imageHolder.addChild(randomImage)
imageArray.push(newImage)
imageCreated = true;
 
//Clean Loader Array;
loaderArray = [];
}
public function imageUpdate($e:Event)
{
if (imageArray.length > 0)
{
if (imageCreated)
{
//trace(imageArray.length)
 
currentImage = imageArray[imageArray.length - 1];
 
if (currentImage.imageRightBounds < myStage.stageWidth)
{
//trace("Happened")
imageCreated = false;
loadData()
}
}
}
 
//Garbage Collection
for (var i:int = imageArray.length - 1; i >= 0; i--)
{
var currentSelectedImage:Image = imageArray[i];
 
if (currentSelectedImage.remove)
{
//trace("Splice Image");
imageArray.splice(i, 1)
imageHolder.removeChildAt(i)
}
}
}

 

Categories:

Code Examples, Experimental, Flash