Create an XML Video Player Using ActionScript 3.0By Blue_Chi | Flash CS3 | ActionScript 3.0 | Intermediate | Page 1, 2, 3, 4, 5, 6
This tutorial will teach you how to create a dynamic XML video player in Flash using AS3. This sort of player could be used in portfolio websites, product display websites, or any project that allows the user to select a video to play from a certain playlist. The player will of course be configured using XML - meaning that you can update the contents of the player without having to update your actual FLA.
This is an intermediate level tutorial that uses the FLVPlayback Component, the Loader Class, and various AS3 basic concepts such as Variables, the Display List, and Event Handling. Make sure you review all these other tutorials in order to fully understand how this tutorial works.
Video Credits: Change.gov - Used through a Creative Commons License.
The backend concept of our player is simple: All the data of the player will be stored in an XML file that is loaded when the Flash movie starts. The thumbs are loaded instantly while the videos will only be loaded when a thumb is clicked. The description of the video, its URL, and its thumb URL are all stored in the XML file, the videos and thumbs are stored externally as separate files, so there is nothing left in the SWF other than ActionScript code and some component assets.
Our Video Player project is divided into the following sections:
- Preparing External Assets (XML, Videos, and Thumbs) and the FLA.
- Loading and processing the XML file.
- Creating the playlist container and loading all the thumbs.
- Positioning the thumbs and video description.
- Creating the FLVPlayback component and playing a video.
- Polishing the player and fixing bugs.
Preparing External Assets and the FLA
This tutorial requires you to have three videos in FLV format and three thumbnails of these videos. We are not going explain the basics on how to create an FLV video, if you would like to learn more about this please review our previous video on using the AS3 FLVPlayback Component. You can use your own videos for this tutorial, or alternatively you can download the videos we used in the example above to follow this tutorial from here.
Once you have your videos and thumbs ready I suggest that you start off by creating a folder for this project somewhere on your computer. In side this project folder we are going to have two folders, one will be used to host our videos while the other will be used to host our thumbnails. Start by creating the first folder, name it video.
Inside the video folder we will place our three FLV files. To make things easier and to minimize the risk of typos, I suggest that you rename your video files to video1, video2, and video3.
Our videos are now ready, we will create another folder for our thumbnails. Go up to the project folder and create a folder named thumbs for your thumbnails right next to your videos folder:
Inside the thumbs folder we will place our three thumbnails. Again, I suggest that you rename your thumbs to thumb1, thumb2 and thumb3 to correspond with the videos.
Our videos and thumbs are now ready, we will create our XML file next. The XML file will play the role of a playlist - it will have the details of the videos that we want to play.
An XML file is essentially a text file with user-defined structured coding. You can use any simple text editor to create your XML file, open the Notepad and save a blank file as playlist.xml in your project folder along with your video and thumbs folders:
Preparing the XML File
We are going to add to our XML file the information we need to run our video player. The XML file will have two types of information:
- General player details such as the position of the main video player, the position of the thumbnails list and the size of thumbs used.
- Video Specific details such as the title of the video, the URL of the video, and the URL of the thumbnail.
The general structure of our XML code is as shown in the code below, one <playlist> element will enclose several <video /> elements within it. The general player details will be set in parameters held within the <playlist> element while the video specific details will be set in parameters held within each of the <video /> elements.
<playlist para1="value" para2="value" ... >
<video para1="value" ... />
<video para1="value" ... />
<video para1="value" ... />
Our actual code will have the following parameters specified in the <playlist> element:
- The horizontal position of the thumb container.
- The vertical position of the thumb container.
- The width of thumbs used.
- The height of the thumbs used.
- The horizontal position of the video player.
- The vertical position of the video player.
Each of our <video /> elements will have the following parameters:
- Video title.
- Video URL.
- Thumb URL.
The values of all these parameters will be retrieved in Flash using the .attribute property of the XML element. The value of these parameters is specified in the code below, it is pretty self-explanatory, you can copy and paste it into your XML file. You may change any of these values as you please later on to configure your own video player:
<PLAYLIST THUMBS_X="10" THUMBS_Y="10" THUMB_WIDTH="125" THUMB_HEIGHT="70" VIDEO_X="300" VIDEO_Y="10" >
<VIDEO TITLE="Whistle Stop Train Tour" THUMB="thumbs/thumb1.jpg" URL="video/video1.flv"/>
<VIDEO TITLE="Obama Weekly Address" THUMB="thumbs/thumb2.jpg" URL="video/video2.flv"/>
<VIDEO TITLE="Lincoln Memorial Concert" THUMB="thumbs/thumb3.jpg" URL="video/video3.flv"/>
You might have noticed that we did not specify the number of videos in our playlist, that is because the ActionScript XML Class can detect the number of child nodes within an element, and that in our case is the number of <video /> elements with the <playlist> element, i.e. the number of videos in our playlist.
Preparing the FLA
Our external assets are now ready, it is time to create the FLA. Create new Flash file in AS3 format, save it as My Video Player in the same folder as your XML file and your other two folders. Make sure the ActionScript version is set to 3.0 and the dimensions to 800x300px.
Our FLA is now set, our videos and thumbnails are in their appropriate folders, and we have our XML file ready as well. The rest of our video player project will be coded in ActionScript. In Flash, Right-Click the only frame you have on your timeline and select Action to open up the Action Panel.
Summary of this Page
- Put the videos and images in their specified folders.
- Created the XML playlist file.
- Create the FLA file.
In the next page or our tutorial we will load and process the XML playlist in order to retrieve the required data to play our videos.