Making an MP3/FLV Player with Flash MX 2004 and JavaScript - Writing the JavaScripts
(Page 4 of 4 )
Open your favorite text editor (mine is Dreamweaver MX 2004, but notepad will also work). In this part we will make two Web pages. One will hold our flash movie, and the other one will be used for selecting the MP3/FLV songs. So let’s create them.
Write the following codes in your text editor and save the file as “Player.html” in the same folder where you saved your flash movie (MyMP3/FLVPlayer.swf):
<html>
<head>
<title>Welcome To My MP3/FLV Player</title>
</head>
<body>
<script language="JavaScript" >
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
-->
</script>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=7,0,0,0" name="movie" width="300" height="400" align="left" id="movie">
<param name="allowScriptAccess" value="sameDomain" >
<param name="movie" value="MyMP3Player.swf" >
<param name="menu" value="false" >
<param name="quality" value="high" >
<param name="scale" value="noborder" >
<param name="salign" value="lt" >
<param name="wmode" value="transparent" >
<param name="bgcolor" value="#000000" >
<embed src="MyMP3Player.swf" menu="false" quality="high" scale="noborder" salign="lt" wmode="transparent" bgcolor="#000000" width="300" height="400" swliveconnect=true id="movie" name="movie" align="left" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" >
</object>
<br>
</body>
</html>
Save this file as Player.html.
This is just a simple html page that contains some conventional HTML tags like <html>, <head>, and <body>. There is another tag in these codes called the <object> tag. This code holds your flash movie. The information which is written in the <object> tag is also written in another tag nested in the <object> tag, called the <embed> tag. Why are we using both <object> and <embed> tags, since both of them have the same properties? Actually, we are using them because of the clash between Microsoft Internet Explorer and Netscape Navigator. The <object> tag is supported in Internet Explorer and the <embed> tag is supported in Netscape Navigator--but not in Internet Explorer. In this way, our player would be accessible from both Internet Explorer and Netscape Navigator (now Mozilla).
Along with the conventional HTML tags, there is a code block of java script present that is:
<script language="JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
-->
</script>
This block is here because, working on the Flash side, we dragged a button instance on stage and added some codes to that which were something like getURL(bla blab );la ... That code was added to trigger this JavaScript. This JavaScript launches another page called “url.html”, an HTML file that we will use to browse our directories in search of MP3/FLV files. When you have saved the first file as Player.html, create a new file in your text editor and type following codes in it:
<html>
<head>
<title>Select MP3/FLV Files Only Please</title>
<script language="javascript">
function fill(file){
window.opener.movie.SetVariable("fName", file);
window.close();
}
</script>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data" name="form1">
Select an MP3/FLV & Add to playlist. <br>
<input name="file" type="file" accept="audio/basic">
<br>
<input type="submit" onClick="fill(file.value)" value="Add to list...">
</form>
</body>
</html>
Save this file as “url.html” where you saved the Player.html and MyMP3/FLVPlayer.swf.
Now I will describe how this page works. Let’s start from the <body> tag. The <body> tag contains a simple form in which we have placed a file browsing field named “file” and a Submit button. By clicking on the “browse” button of the file field we will select our desired MP3/FLV File(we can select other files as well, but don’t select any file other then MP3/FLV Audios). When someone clicks on the Submit button, it will execute a JavaScript function called “fill()” that is written in the head area of our URL.HTML file. While executing that function, we are also sending some information to that function. See the “onClick” event in the Submit button’s coding where we are executing the function as:
onClick=”fill(file.value)”
where onClick is the event. When some one clicks on the button (submits the form), a function called fill(file.value) is triggered where “file.value” is the text (path to selected file) written in the file browsing field and fill is the name of the function which we are triggering.
Now I will explain how the “fill” function works. It receives the value from the file field and sets the value of the “fName” variable of the flash movie which is present in our main page (i.e. Player.html). Here in the line window.opener.movie.SetVariable("fName", file);, window.opener means our main page, which was the responsible for opening this new window.
Here you have noticed that we are setting the value of a variable which is present in our Flash movie by using JavaScript. For this we are using the movie.SetVariable method. The actual syntax of this method is:
Name_of_Movie.SetVariable(“name of variable in flash movie”);
Where "name of variable in Flash movie" is the value we want to set using the JavaScript script.
NOTE: Here you should remember that name of movie means the name that we given to our movie in <object> or <embed> tag, for example id=”movie” or name=”movie” not src=”MyMP3Player.swf”
Now preview Player.html in your browser and check it. If everything is going fine then you have followed the tutorial perfectly. If not, you have missed something or done something wrong, so check your codes in both the pages and in your Flash movie; also check that you have given the same name as we mentioned in this tutorial because both Action script and JavaScript are case sensitive, so in both scripts “FNAME”, “fNAME”, “Fname” and “fName” are four different things.
Conclusion:
In this tutorial, we learned a little bit about how to talk with JavaScript using Flash MX 2004 and vice versa. There is another method called “fscommand” in flash by which we can talk to JavaScript or VB. There are some limitations in this tutorial, such as that the user can select any file other then MP3/FLV file, which will cause flash movie to stop working. This can be solved by using advanced validations of JavaScript or Flash’s Action Script.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 150 
