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 III: Video
This is the third and final part in our Share Media on Twitter Using Flex series (read Part I and Part II). In the first article we showed you how to build a Twitter application with the Flex framework in Flash Builder, importing Photoshop artwork into Flash Catalyst to build both the interface and its interactions. The second article took you through the processes and libraries needed to upload images to Flickr and use the bit.ly API to shorten the links to those images. With this final article in the series we’ll extend the application to upload video to Flickr, and use a few built-in Flex features to grab screenshots from the video and upload them as well.
Once you’re done, be sure to test your knowledge in our Article Quiz!
In the previous installment we discussed potential ways of hosting images online to accompany a Tweet. We decided the simplest approach was to upload them to Flickr, create a minimized link to the Flickr page using the bit.ly API, and then include that link in a tweet. That approach worked well, so we’ll do the same for video.
Before we start, you should download the code archive to follow along with. The file we’ll be working with this time around is cheepcheep_video_flashbuilder.fxp, in the Flex projects folder (the previous versions of the application are there as well, so you can see what’s changed). Import that file into Flash Builder, and you’re ready to get started.
Uploading Video to Flickr
Our first task is to modify the filter used by the FileReference element to include the video file extensions supported by Flickr. We’ve added avi, wmv, mov, mpg, mp4, m4v, and 3gp to the FileFilter that we created in the last article. Although these extensions are all officially supported by Flickr, there is still a risk that Flickr will be unable to encode some files; this is because video can be compressed with a variety of different codecs and only the most commonly used (like H.264) are supported. We recommend that you check the Flickr documentation for what’s supported.
Flickr allows you to upload video of up to 90 seconds in duration and 150MB in size for free accounts, or up to 500MB for Pro accounts. Realizing that video files can be larger than images, we’ve tweaked the original interface, adding an extra Label component to display the size of the selected file. We’ve also added a button to view video options if a video file is selected. We’ll look at this button in more detail later; for now just notice that it’s disabled by default.
The fileAccessed function, called once a file has been selected, has been modified to pull in extra information: the size of the file (which we display with our new Label), and its extension. FileReference does have a type property, but it’s unreliable (for example, it’s unable to determine the extension of a GIF file), so we’re using our own variable. To obtain the extension, we split the filename at each period and grab the last element of the resulting array. We’ve also added arrays at the top of the main application to store the acceptable extensions for both photo and video files:
private var photoExtensions:Array = ["gif","jpeg","jpg","png"];
private var videoExtensions:Array = ["avi","wmv","mov","mpg","mp4","m4v","3gp"];
…
private function fileAccessed(evt:Event):void {
photoFileSize.text = (Number(fileReference.size)/100) + "kb";
photoFileName.text = fileReference.name;
var filename:Array = fileReference.name.split(".");
flickrUploadType = filename[filename.length - 1];
photoUploadBtn.enabled = true;
}
A successful upload to Flickr will call the uploadCompleteHandler function. We’ve modified that function to assign the uploaded media’s ID to a new flickrUploadID variable. We also test the extension of the file to see if it’s in the array of accepted video extensions. If it is, we enable the new Video Options button. The rest of this function, which grabs the URL of the upload from Flickr and submits it to our bit.ly service, is unchanged from the last article:
private function uploadCompleteHandler(evt:DataEvent):void {
CursorManager.removeBusyCursor();
var xData:XML = new XML(evt.data);
flickrUploadID = xData.photoid;
if ( videoExtensions.indexOf(flickrUploadType) != -1 ) {
videoOptionsBtn.enabled = true;
}
photoUrl = "http://www.flickr.com/photos/"+flickrNsid+"/"+xData.photoid;
bitlyService.send();
}