05.03.08
Create a Photobucket Image Gallery
Photobucket has a tonne of images that you can use to create some interesting content. I’m going to show you how to create a simple photobucket image gallery using Flex.
I love to reuse existing code where possible, probably one of my biggest sticky points as a software developer. In this case Doug Mccune has an awesome image dispaly component written using papervision and I’m just going to reuse his code. You can download his cover flow component here and link it into his code. I’m not going to go into a bunch of details on how to use his component, he has many links on his site on how to get it up and running.
After the coverflow component is linked in we’re going to create a light wrapper around it. Within your flex application go to new->Flex Component and create a component based on a Vbox.
The code looks something like this :
<mx:VBox createComplete="init()">
<containers:CoverFlowContainer
id="coverflow"
width="100%"
height="100%"
horizontalGap="40"
borderStyle="solid"
backgroundColor="0x000000"
segments="10"
reflectionEnabled="true" />
<mx:HScrollBar
id="scrollbar"
width="100%"
pageSize="1"
scrollPosition="{coverflow.selectedIndex}"
scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />
</mx:VBox>
Now the next thing we need is some script to dynamically add images to this component. Usually you can just add the objects you want to display in the coverflow component as child objects, but if we’re going to load them from Photobucket we need to be able to dynamically change them. Here is the code I use to dynamically add images:
<!--[CDATA[
public function addURL(url:String) : void {
<!--
Creates a canvas to display the image on
and adds the canvas with the image as a
Child of the coverflow component
-->
var cv:Canvas = new Canvas();
cv.width = canvasWidth;
cv.height = canvasHeight;
cv.verticalScrollPolicy="off";
cv.horizontalScrollPolicy="off";
var thisImage:Image = new Image();
thisImage.setStyle("verticalCenter","0");
thisImage.setStyle("horizontalCenter","0");
thisImage.addEventListener(Event.COMPLETE, imageLoaded);
thisImage.load(url);
cv.addChild(thisImage);
coverflow.addChild(cv);
numChildrenAdded++;
scrollbar.setScrollProperties(1,0,numChildrenAdded-1,1);
scrollbar.scrollPosition=coverflow.selectedIndex = Math.round(scrollbar.scrollPosition);
coverflow.selectedIndex = numChildrenAdded-1;
}
private function imageLoaded(event:Event):void{
<!--
Image Loader function to center the image
after it has been loaded
-->
var thisImage:Image = event.target as Image;
if(thisImage.contentWidth>(canvasWidth-20) || thisImage.contentHeight>(canvasHeight-10)){
var scaleAmt:Number = 1.0;
if(pbImg.contentWidth>pbImg.contentHeight){
scaleAmt = canvasWidth /(pbImg.contentWidth-10);
}else{
scaleAmt = canvasHeight /(pbImg.contentHeight-10);
}
pbImg.scaleX = scaleAmt;
pbImg.scaleY = scaleAmt;
}
}
]]-->
Now the next thing we need to do is to add the Photobucket content. For this example we are just going to display the 10 newest images on Photobucket using their RSS feeds. They have a API that allows you to really get detailed Photobucket information but that is a whole other article in itself. Any way the simplest way to do this is with a HTTPService Flex object:
<mx:HTTPService id="httpRSS" url="http://feed.photobucket.com/recent/images/feed.rss" resultFormat="object" result="imagesAvailable(event)" />
Next you need to grab the image from the RSS XML:
private function imagesAvailable(event:ResultEvent) : void {
<!--
This function simply pulls out the image guid from the
RSS feed and sends the first 10 to the component
-->
for(var i:Number=0; i<10;i++){
addURL(httpRSS.lastResult.rss.channel.item[i].guid);
}
}
One final piece is to fill out the creationComplete function and tell it to load the rss feed at startup. Add the following to your components VBox tag:
creationComplete="{httpRSS.send()}"
And that is pretty much it! Hope this helped get you started creating a Photobucket image gallery.
code said,
September 14, 2008 at 7:30 pm
Can you please post the code. I am a MFC developer so imagine how much I am scratching my head…
rbezemer said,
September 14, 2008 at 9:38 pm
Hi, I’ll definitely look at posting the code, Watch for it sometime this week. The sample project I created for it was a real hack job and thought it would just confuse people more that help, I’ll see if I can find some time to clean it up to be a bit more presentable.
rbezemer said,
September 17, 2008 at 9:39 pm
Actually I’m doing some work using photobucket’s flex api, I’ll probably update the sample to use that api in a newer blog post in the next day or so.
Software By Richard » ActionScript 3 Photoshop API Basics said,
October 10, 2008 at 8:28 pm
[...] by popular demand, and just because it’s fresh on my mind, I’ve revisited the Photobucket photoflow example. This version of the app goes a step further and uses the full blown ActionScript 3 Photobucket [...]
Kefira said,
October 27, 2008 at 9:10 am
Thanks for writing this.