• warning: Parameter 1 to tac_lite_node_grants() expected to be a reference, value given in /home/rbezemer/softwarebyrichard.com/includes/module.inc on line 483.
  • warning: Parameter 2 to gmap_gmap() expected to be a reference, value given in /home/rbezemer/softwarebyrichard.com/includes/module.inc on line 483.
  • warning: Parameter 1 to tac_lite_node_grants() expected to be a reference, value given in /home/rbezemer/softwarebyrichard.com/includes/module.inc on line 483.
  • warning: Parameter 1 to tac_lite_node_grants() expected to be a reference, value given in /home/rbezemer/softwarebyrichard.com/includes/module.inc on line 483.
  • warning: Parameter 1 to tac_lite_node_grants() expected to be a reference, value given in /home/rbezemer/softwarebyrichard.com/includes/module.inc on line 483.
  • warning: Parameter 1 to tac_lite_node_grants() expected to be a reference, value given in /home/rbezemer/softwarebyrichard.com/includes/module.inc on line 483.
  • warning: Parameter 1 to tac_lite_node_grants() expected to be a reference, value given in /home/rbezemer/softwarebyrichard.com/includes/module.inc on line 483.
  • warning: Parameter 1 to tac_lite_node_grants() expected to be a reference, value given in /home/rbezemer/softwarebyrichard.com/includes/module.inc on line 483.

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 :

 

  1. <mx:VBox createComplete="init()">
  2. <containers:CoverFlowContainer
  3. id="coverflow"
  4. width="100%"
  5. height="100%"
  6. horizontalGap="40"
  7. borderStyle="solid"
  8. backgroundColor="0x000000"
  9. segments="10"
  10. reflectionEnabled="true" />
  11. <mx:HScrollBar
  12. id="scrollbar"
  13. width="100%"
  14. pageSize="1"
  15. scrollPosition="{coverflow.selectedIndex}"
  16. scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />
  17. </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:

 

  1. var cv:Canvas = new Canvas();
  2. cv.width = canvasWidth;
  3. cv.height = canvasHeight;
  4. cv.verticalScrollPolicy="off";
  5. cv.horizontalScrollPolicy="off";
  6. var thisImage:Image = new Image();
  7. thisImage.setStyle("verticalCenter","0");
  8. thisImage.setStyle("horizontalCenter","0");
  9. thisImage.addEventListener(Event.COMPLETE, imageLoaded);
  10. thisImage.load(url);
  11. cv.addChild(thisImage);
  12. coverflow.addChild(cv);
  13. numChildrenAdded++;
  14. scrollbar.setScrollProperties(1,0,numChildrenAdded-1,1);
  15. scrollbar.scrollPosition=coverflow.selectedIndex = Math.round(scrollbar.scrollPosition);
  16. coverflow.selectedIndex = numChildrenAdded-1;
  17. }
  18.  
  19. private function imageLoaded(event:Event):void{
  20. <!--
  21. Image Loader function to center the image
  22. after it has been loaded
  23. -->
  24. var thisImage:Image = event.target as Image;
  25. if(thisImage.contentWidth>(canvasWidth-20) || thisImage.contentHeight>(canvasHeight-10)){
  26. var scaleAmt:Number = 1.0;
  27. if(pbImg.contentWidth>pbImg.contentHeight){
  28. scaleAmt = canvasWidth /(pbImg.contentWidth-10);
  29. }else{
  30. scaleAmt = canvasHeight /(pbImg.contentHeight-10);
  31. }
  32. pbImg.scaleX = scaleAmt;
  33. pbImg.scaleY = scaleAmt;
  34. }
  35. }

 

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:

 

  1. <mx:HTTPService id="httpRSS"
  2. url="http://feed.photobucket.com/recent/images/feed.rss"
  3. resultFormat="object"
  4. result="imagesAvailable(event)" />

 

Next you need to grab the image from the RSS XML:

 

  1. private function imagesAvailable(event:ResultEvent) : void {
  2. <!--
  3. This function simply pulls out the image guid from the
  4. RSS feed and sends the first 10 to the component
  5. -->
  6. for(var i:Number=0; i<10;i++){
  7. addURL(httpRSS.lastResult.rss.channel.item[i].guid);
  8. }
  9. }

 

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:

  1. creationComplete=&quot;{httpRSS.send()}&quot;

 

And that is pretty much it! Hope this helped get you started creating a Photobucket image gallery.

Your rating: None Average: 2.2 (12 votes)

Comments

I am working on photobucket

I am working on photobucket API and follow your code but I am unable to fetched Image from sub_Album ,although

I have fetched Username and all album name ,Please can you send me code of all classes of Flex+photobucket api.

Vinitkar Tripathi

EmailId:   vinitkar007@gmail.com

Sorry this is quite old code

Sorry this is quite old code and not sure if I have it anymore or even if the photobucket api code is even close to the same anymore.

Thanks for writing this.

Thanks for writing this.

hi here

Hi, 

Thanks for posting this informative article. Its really a big help for me, because I'm doing some research now. Glad that i found this. Keep up the Good work.

[...] by popular demand, and

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

Actually I'm doing some work

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.

Hi, I'll definitely look at

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.

Can you please post the code.

Can you please post the code. I am a MFC developer so imagine how much I am scratching my head...