Flickr in Flash
created, it is position 80 pixels after the previous ThumbItem. This will space them 5 pixels apart as each ThumbItem is 75 pixels wide. Then we add an eventListener to the ThumbItem to allow the user to click on it, and finally we add the ThumbItem to the thumbs MovieClip. At the moment a PhotoItem instance is only created once a ThumbItem is clicked so to make sure an image loads immediately, we simply create a new PhotoItem instance and pass it the first item in the array. The only other function in the ThumbList class is the loadPhoto function, which is called as a result of the user clicking on a ThumbItem, see (Listing 18). This simply clears out the img MovieClip's DisplayList, creates a new PhotoItem instance (using the public PHOTO variable we created in the PhotoItem class). Then all we do is add it to the now empty img MovieClip. The Document Class So that's all the functionality built – now all we need to do is connect to Flickr and grab our Photosets. We will do all of this from the Document class. Create a new Actionscript file, save it in the Portfolio folder and call it Portfolio.as. Now jump over to your FLA and set the Document Class to Portfolio . While you're in your FLA, drag an instance of the BlankMC MovieClip to the stage and give it the instance name photosetHolder . As the name suggests, this will hold all of your PhotosetItems. Back in your Portfolio class file, create the class (making sure it extends MovieClip) and import the necessary classes, see (Listing 19). Note that we import all of the classes from the items package, as well as the classes from the AS3 Flickr Library. Next we'll set up our variables and constants, see (Listing 20). First up is the public static FlickrService (FS) variable that we talked about earlier. Next is the ThumbList instance. A couple of constants follow and you will need to populate the first of these with your own Flickr API Key (see previous issue's tutorial, or head over to http:/ /www.flickr.com/services/api/ to find out more about your API Key. The first of the constants is your api key, and the next is simply your Flickr username. We will use this name later to populate the next variable, your NSID. Finally we need to set to String variables – these are used to allow communication to work back and forth between your server, and Flickr's servers. The actual public Portfolio function is relatively short, see (Listing 21). All we do here is use the Security class to allow flickr to communicate with our server. This is done by allowing the flickr_url domain, and loading the crossdomain_url policy file. Then we set up our FlickrService by creating an instance
Listing 19. The Portfolio Document Class
package {
import flash.display.MovieClip; import flash.text.TextField; import flash.events.MouseEvent;
import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; import flash.system.Security; import com.adobe.webapis.flickr.*; import com.adobe.webapis.flickr.events.*; import items.*; public class Portfolio extends MovieClip { public function Portfolio():void {
}
}
} Listing 20. The Portfolio variables
public static var FS:FlickrService; private var albumList:ThumbList;
private const _key:String = "PASTE YOUR FLICKR API KEY HERE"; private const _username:String = "PASTE YOUR FLICKR USERNAME HERE"; private var _nsid:String; private const flickr_url:String="http://www.flickr.com"; private const crossdomain_url:String="http://api.flickr.com/crossdomain.xml"; Listing 21. Creating the FilckrService
public function Portfolio():void {
Security.allowDomain(flickr_url); Security.loadPolicyFile(crossdomain_url); FS = new FlickrService(_key); getUser();
} Listing 22. Finding a user
private function getUser():void { FS.addEventListener(FlickrResultEvent.PEOPLE_FIND_BY_USERNAME, getSets); FS.people.findByUsername(_username); } Listing 23. Setting the NSID private function getSets(e:FlickrResultEvent):void { FS.removeEventListener(FlickrResultEvent.PEOPLE_FIND_BY_USERNAME, getSets); _nsid = e.data.user.nsid; getAlbums(); }
03/2009 (5)
43
Made with FlippingBook HTML5