The big change is the addition of all the ActionScript code at the top of the file. This code manages the interface. It first reads in the XML from the movies.php page using the HTTPService mechanism in the onGetMovies() function. The HTTPService class is smart enough to recognize XML when it sees it and immediately gives back an XML Document Object Model (DOM) that you then use to get the first movie and start it playing. The onGetMovies() method also sets up the local movies variable for the list box to display. The other methods in the ActionScript handle the different events from the interface, the user clicking the list of movies, using the Next or Previous buttons, and so on.

On the bottom of the file are the Flex objects that comprise the user interface. There are a few more buttons—the left and right arrows—that move to the next and previous movies. A list of movies appears on the right side of the video display; in this case, the list just shows the title of the movie.

When I use Flex Builder to compile and run the application, I see what appears in Figure 4 in my browser.

Figure 4. The first version of the Flex user interface

I can use the list on the right to select a movie, or press the left and right buttons to navigate from movie to movie. Now that's pretty nice, but what about the thumbnails you have?

The Flex Interface, Part 2—Now with Thumbnails

To use the thumbnails in the list, you need to change the list so that it displays both the thumbnail and the title of the image. Thankfully, Flex makes this so simple it's almost sinful. Start by altering the <List> tag to add an itemRenderer. This is shown in Listing 8.

Listing 8. mytube2.mxml

...
  <mx:List width="100%" height="340" id="movieList"
    dataProvider="{movies}"
    change="onChange()"
    itemRenderer="MovieItem"></mx:List>
...

That item renderer is an MXML component that you must create called MovieItem. You create that by first selecting the New > MXML Component, then putting the component into the code from Listing 9.

Listing 9. MovieItem.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="80">
  <mx:Image source="{data.thumb}" width="{data.width/3}"
     height="{data.height/3}" rotation="5" left="10" top="0" />
   <mx:Label text="{data.title}" fontWeight="bold" top="10" left="100" fontSize="18" />
</mx:Canvas>

I used a Canvas container so that I can position the elements around myself. You can use whatever container makes the most sense for your layout. Then, use an <mx:Image> tag for the image and an <mx:label> tag for the title. To make it a bit more interesting, rotate the image slightly. The end effect is shown in Figure 5.

Figure 5. The upgraded list box with the thumbnails

Okay, it's not the most amazing thing in the world, but it's cooler than just a text list. And you can make the component as complex as you like by adding descriptions, running times, links, rating buttons, or whatever else you like.

Storage and Bandwidth

While putting together the database and the frontend is relatively easy, it's not the only problem that you face when setting up a video sharing site. The primary, ongoing problem is bandwidth. Movies, even with the tight encoding of Flash video, are still rather large files. Figuring out how to serve up video without breaking the bank on bandwidth charges can be interesting.

Certainly, one bandwidth solution is to buy a bigger connection or get into a hosted data center with a fat pipe to the Internet. Another option is to have your sharing site hold references to the data but store and host the video files somewhere else. Along that line, Amazon's S3 service provides an easy way to store and share large files in a redundant and scalable way while paying fairly little money for the service. Using S3 to host the video in the early phases of the site can keep you from paying a lot of infrastructure costs early on, holding off on those expenses until the site is popular enough to pay for its own infrastructure.

Conclusion

With the introduction of Flash video and the ubiquity of broadband access, it's now conceivable to run a video sharing site on a budget. Hopefully, this example shows you how easy it is to get a Flex/PHP video sharing solution together and will motivate you to take it even further.

This article was produced with funding provided by Adobe Corporation

Jack Herrington is a senior software engineer with more than 20 years of experience. He is the author of three books: Code Generation in Action, Podcasting Hacks, and PHP Hacks. Jack is also the author of more than 30 articles covering a wide range of technologies.

If anybody is interested, i re-created this tutorial using python and turbogears and flex instead of php.
You can find the tutorial at http://codedemigod.com/tutorials




1 2 3 4