Rather than a huge introduction, lets get right into the meat of this blog. Flash Crap.
I am going to start off with a simple dynamic Flash Video player that you can add to a web page, MySpace, blogger, or just about anywhere you have access to the HTML and the Object Tag. One of the great things about XML driven Flash is that the user does not need Flash or any Flash knowledge to make the thing work. Reuse is the key in programming, and Flash is no exception.
Here's the player:
Pretty simple. All I have here (in Flash layers) are, at the bottom, a silly text animation where I read the title of the player from the XML file, display it, and do some simple time-line animation to it. Above that I have the default FLVPlayback component, and above that is a dropdown component which is populated by data from the XML.
The Object Tag:
The Object tag is where we get things started. First, if you are not using "A List Apart's Flash Satay" code, you need to take a look at it and start using it. In addition to validating, it also makes for much cleaner code. There is a link on the right to the article.
Ok, Here is the code for the object tag:
So, lets tear that apart. Take a look at the first line of the Object tag and notice the "data" attribute. This is pointing to the absolute URL of the player.swf file. (our video player) We are also sending a query string parameter everywhere we find player.swf
player.swf?XMLListList=http://www.yourURL.com/someFile.xml
This is how we tell player.swf where the XML configuration file is located. Player.swf will read the query string parameter and then open the XML file it is pointed to. Doing it like this allows you to create one player and easily point it to several different configuration files. So everyone used the same player.swf, but we are all pointing to different configuration XML files that populate the title of the player, the list of items on the drop-down, and the URL's of the videos.
The Player XML:
The XML has 2 tags. playertitle which is title of the player (duh), and list_item, which is each item we find in the drop-down list. list_item has 2 attributes. title which is what the user will see in the drop down, and location which is the absolute URL to the Flash video (FLV) file.
And just where do I get the movies?
So you add the Object tag, create your XML file, but now you need the Flash Video. Ok, you can make it yourself by using one of the encoders out there. I usually use the one that comes with Adobe Premier. But Not everyone owns that. So what can you do?
Easy, make your movie, then upload it to www.youtube.com. Then after it appears you can with get the absolute address to the video or just download the video and put it on your own server. The tool I use to do this is an extension called Download Helper for The FireFox Browser. There are other ways to get the video too. Did you know it was in your cache after you watch it? You can just get it from there.
You can also use Google to search for other FLV options. Anyway, not you have a server, your videos, you have modified the Object tag, and the XML file what else is there to do? Nothing. You are done.
For you Actionscripters out there:
Ok, lets take a look at the actionscript that controls everything. But first, on the right is a link to this project. If you have Flash CS3 you can download the entire project and take a look at it, play with it, modify it, do what ever you like.
Lets take a look at the Actionscript:
Ok, this is pretty easy, but we do a lot of things here. What I feel is the most important, especially for our first tutorial, ist the XML code. When ever you can you need to make your Flash objects dynamic. That is make a shell that can easily be adapted for other content. Much like separating presentation from content is important on web pages (hence CSS) it is eaually as important that you separate your presentation in Flash from the content.
This video player has three pieces of content we need to present to the user. The title, the list text, and the url to the video. No matter what website this playuer goes onto, all we have to do is change these three items and the player might as well have been created for that specific site. Since the player is transparent, it will fit on any background image. this means you can skin it any way you like by using a background image. Slick eh?
Ok, back to the actionscript...
The first two lines create the XML object and the variable to hole the querystring.
var ListXML:XML = new XML();
var flashVars=this.loaderInfo.parameters;
The next line loads the XML file. It is important to note that I have been saying use an absolute URL. Well it is not really necessary you can use a relitive URL, but sometimes, especially when dealing with content management systems, that gets a little funky. This is why I suggest absolute URLs.
var ListLoader:URLLoader = new URLLoader(new URLRequest(flashVars.XMLFile));
Now we need to set an event for when it is done loading the XML file
ListLoader.addEventListener("complete",ListLoaded);
And lets create the function
function ListLoaded(Evt:Event):void
Load the data into the XML we created at the top
ListXML = XML(ListLoader.data);
Now set a counter varialbe, and add an item to th elist that says "Select a video to play"
var x = 0;
MyList.addItem({label:"Select a video to play",SongURL:"none"})
MyPlaceOVision.MyPlaceHolder.PlaceHolderText.text = ListXML.playertitle;
Now loop through all the list item tags we find in the XML
while(ListXML.list_item[x] !=undefined){
And add this item to the List. Note that the drop-down class is dynamic so we can add properties and methods to it. In our case we are going to add a SongURL property that will hold the URL
MyList.addItem({label:ListXML.list_item[x].attribute("title"),SongURL:ListXML.list_item[x].attribute("location")})
Now we need to add an event to the drop-down that will do something when we change the selected item.
MyList.addEventListener(Event.CHANGE,NewSong);
And the function:
function NewSong(evt:Event){
If the songURL from the List is not "None" then set the source of the
FLVPlayback to the item's SongURL property (which we created) then play
the video.
if(MyList.selectedItem.SongURL!="none"){
MyPlayer.source = MyList.selectedItem.SongURL;
MyPlayer.play();
Otherwise, stop the player
else
MyPlayer.stop();
And the last thing is setting the location of the SWF file that are the FLVPlayback controls
MyPlayer.skin = "http://www.yoururl.com/SkinUnderAll.swf";MyList.addEventListener(Event.CHANGE,NewSong);
That's it. Yea, this was quick, and I really did not get into any detail about how the code works. But this was a good place to start. My next blog is going to be on using the new XML object in Actionscript 3. Until then, enjoy the player, download the code and modify to your heart's content.
Have a great day!
I am going to start off with a simple dynamic Flash Video player that you can add to a web page, MySpace, blogger, or just about anywhere you have access to the HTML and the Object Tag. One of the great things about XML driven Flash is that the user does not need Flash or any Flash knowledge to make the thing work. Reuse is the key in programming, and Flash is no exception.
Here's the player:
Pretty simple. All I have here (in Flash layers) are, at the bottom, a silly text animation where I read the title of the player from the XML file, display it, and do some simple time-line animation to it. Above that I have the default FLVPlayback component, and above that is a dropdown component which is populated by data from the XML.
The Object Tag:
The Object tag is where we get things started. First, if you are not using "A List Apart's Flash Satay" code, you need to take a look at it and start using it. In addition to validating, it also makes for much cleaner code. There is a link on the right to the article.
Ok, Here is the code for the object tag:
So, lets tear that apart. Take a look at the first line of the Object tag and notice the "data" attribute. This is pointing to the absolute URL of the player.swf file. (our video player) We are also sending a query string parameter everywhere we find player.swf
player.swf?XMLListList=http://www.yourURL.com/someFile.xml
This is how we tell player.swf where the XML configuration file is located. Player.swf will read the query string parameter and then open the XML file it is pointed to. Doing it like this allows you to create one player and easily point it to several different configuration files. So everyone used the same player.swf, but we are all pointing to different configuration XML files that populate the title of the player, the list of items on the drop-down, and the URL's of the videos.
The Player XML:
The XML has 2 tags. playertitle which is title of the player (duh), and list_item, which is each item we find in the drop-down list. list_item has 2 attributes. title which is what the user will see in the drop down, and location which is the absolute URL to the Flash video (FLV) file.
And just where do I get the movies?
So you add the Object tag, create your XML file, but now you need the Flash Video. Ok, you can make it yourself by using one of the encoders out there. I usually use the one that comes with Adobe Premier. But Not everyone owns that. So what can you do?
Easy, make your movie, then upload it to www.youtube.com. Then after it appears you can with get the absolute address to the video or just download the video and put it on your own server. The tool I use to do this is an extension called Download Helper for The FireFox Browser. There are other ways to get the video too. Did you know it was in your cache after you watch it? You can just get it from there.
You can also use Google to search for other FLV options. Anyway, not you have a server, your videos, you have modified the Object tag, and the XML file what else is there to do? Nothing. You are done.
For you Actionscripters out there:
Ok, lets take a look at the actionscript that controls everything. But first, on the right is a link to this project. If you have Flash CS3 you can download the entire project and take a look at it, play with it, modify it, do what ever you like.
Lets take a look at the Actionscript:
Ok, this is pretty easy, but we do a lot of things here. What I feel is the most important, especially for our first tutorial, ist the XML code. When ever you can you need to make your Flash objects dynamic. That is make a shell that can easily be adapted for other content. Much like separating presentation from content is important on web pages (hence CSS) it is eaually as important that you separate your presentation in Flash from the content.
This video player has three pieces of content we need to present to the user. The title, the list text, and the url to the video. No matter what website this playuer goes onto, all we have to do is change these three items and the player might as well have been created for that specific site. Since the player is transparent, it will fit on any background image. this means you can skin it any way you like by using a background image. Slick eh?
Ok, back to the actionscript...
The first two lines create the XML object and the variable to hole the querystring.
var ListXML:XML = new XML();
var flashVars=this.loaderInfo.parameters;
The next line loads the XML file. It is important to note that I have been saying use an absolute URL. Well it is not really necessary you can use a relitive URL, but sometimes, especially when dealing with content management systems, that gets a little funky. This is why I suggest absolute URLs.
var ListLoader:URLLoader = new URLLoader(new URLRequest(flashVars.XMLFile));
Now we need to set an event for when it is done loading the XML file
ListLoader.addEventListener("complete",ListLoaded);
And lets create the function
function ListLoaded(Evt:Event):void
Load the data into the XML we created at the top
ListXML = XML(ListLoader.data);
Now set a counter varialbe, and add an item to th elist that says "Select a video to play"
var x = 0;
MyList.addItem({label:"Select a video to play",SongURL:"none"})
MyPlaceOVision.MyPlaceHolder.PlaceHolderText.text = ListXML.playertitle;
Now loop through all the list item tags we find in the XML
while(ListXML.list_item[x] !=undefined){
And add this item to the List. Note that the drop-down class is dynamic so we can add properties and methods to it. In our case we are going to add a SongURL property that will hold the URL
MyList.addItem({label:ListXML.list_item[x].attribute("title"),SongURL:ListXML.list_item[x].attribute("location")})
Now we need to add an event to the drop-down that will do something when we change the selected item.
MyList.addEventListener(Event.CHANGE,NewSong);
And the function:
function NewSong(evt:Event){
If the songURL from the List is not "None" then set the source of the
FLVPlayback to the item's SongURL property (which we created) then play
the video.
if(MyList.selectedItem.SongURL!="none"){
MyPlayer.source = MyList.selectedItem.SongURL;
MyPlayer.play();
Otherwise, stop the player
else
MyPlayer.stop();
And the last thing is setting the location of the SWF file that are the FLVPlayback controls
MyPlayer.skin = "http://www.yoururl.com/SkinUnderAll.swf";MyList.addEventListener(Event.CHANGE,NewSong);
That's it. Yea, this was quick, and I really did not get into any detail about how the code works. But this was a good place to start. My next blog is going to be on using the new XML object in Actionscript 3. Until then, enjoy the player, download the code and modify to your heart's content.
Have a great day!
