PHP DevCenter
oreilly.comSafari Books Online.Conferences.


Creating MyTube with Flex and PHP
Pages: 1, 2, 3, 4

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
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"

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="" 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" />

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


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 an engineer, author and presenter who lives and works in the Bay Area. His mission is to expose his fellow engineers to new technologies. That covers a broad spectrum, from demonstrating programs that write other programs in the book Code Generation in Action. Providing techniques for building customer centered web sites in PHP Hacks. All the way writing a how-to on audio blogging called Podcasting Hacks.

Return to

Valuable Online Certification Training

Online Certification for Your Career
Earn a Certificate for Professional Development from the University of Illinois Office of Continuing Education upon completion of each online certificate program.

PHP/SQL Programming Certificate — The PHP/SQL Programming Certificate series is comprised of four courses covering beginning to advanced PHP programming, beginning to advanced database programming using the SQL language, database theory, and integrated Web 2.0 programming using PHP and SQL on the Unix/Linux mySQL platform.

Enroll today!

Sponsored by: