Article
About the Author
Andrew Muller
Trainer, mentor, developer, blogger, and presenter, Andrew Muller has
been involved with Rich Internet Applications in Australia since 2002. He's also a certified Adobe instructor for Flex, AIR, ColdFusion, Flash, and Connect, and an Ambassador and Community Expert for Adobe.
Share Media on Twitter Using Flex, Part II: Images
In the first part of this series on sharing media on Twitter with Flex, we discussed how to create the interface for a Flex application with the beta of Flash Catalyst. Then we used the beta of Flash Builder 4 to create a Twitter application for the browser that used PHP to proxy calls to the Twitter API. In this article we’re going to enhance that Flex application by adding the ability to upload photographs to the popular Flickr image hosting service, and then integrate a shortened link to the photo into a post to Twitter.
When you’re done with the tutorial, test your knowledge by taking our article quiz!
The Upload Process
Uploading a photograph and shortening its link can be done a number of ways in the application we’re building. We have to first upload the image, retrieve a link to it, and then submit that link to a URL shortening service. If we automate the whole process so that it works as soon as the user posts their tweet, we risk a long time delay; that’s because it requires three calls to different servers. Instead we’ve chosen the following process:
- user uploads the photo
- link to the photo is inserted at the end of the tweet in the posting form
- message is then sent by the user
All code for this article is contained within the new file cheepcheep_image_flashbuilder.fxp, and you can download it together with all the resources from the previous article.
Browsing for Files
The ActionScript FileReference class gives us the ability to upload and download files from a Flash application. Its browse method uses an operating system dialog box to locate a file; each instance of FileReference will refer to a single file on the user’s system. Make sure that a namespace is added for net to the Application tag:
<s:Application …
xmlns:net="flash.net.*"/>
Create an instance of FileReference between the <fx:Declarations></fx:Declarations> tags already in the application:
<net:FileReference id="fileReference" select="fileSelected(event)" complete="fileAccessed(event)" />
We’ve set function calls for its select and complete events that we’ll add later. Under the TextInput field for the tweet at the bottom of the application we’ve added a button; this enables us to browse for a file to upload and we’ll have that call the function browsePhoto, listed below:
private function browsePhoto(evt:MouseEvent):void {
var arr:Array = [];
arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
fileReference.browse(arr);
}
This function creates an array and populates it with a FileFilter object to limit the file extensions the user can choose. It then calls the browse method of the FileReference instance, passing the array as an argument. This will launch an operating system dialog box that will open to the most recently browsed directory. The function for the select event will then fire once the user has selected a file. It loads the file, which in turn will fire the complete event that displays the name of the file to the user in our application. It’s in a new Label component that we added next to the browse button. You could use this function to display a preview of the image if required:
private function fileSelected(evt:Event):void {
fileReference.load();
}
private function fileAccessed(evt:Event):void {
fileName.text = "File selected: " + fileReference.name;
}