Flash and JavaScript cross communication p.4
source: http://www.thegoldenmean.com/
Tying it all together
You have your Flash movie, your JavaScript and your MP3 assets. How do you tie them all together?
The <head>
If you followed my advice and saved the JavaScript code to a separate file, the HTML document needs to link to that. The exact code will depend on what you named your JavaScript file and where on your server it is located but you would want to include something along the lines of this code in the <head> element of your HTML document:
<script type="text/javascript" src="/path/to/scripts/player.js"></script>
(Assumes your JavaScript file is named “player.js”. You will need to replace “/path/to/scripts” with the real path on your file system.)
The links
The Play link
Let’s say you have an MP3 file named “mySong.mp3” on your server in a directory named “tracks”. In your HTML document you might place a hyperlink that invokes the JavaScript “playTrack()” function and passes it the path variable something like this (again noting that the actual path will probably be different on our own site):
<a href="javascript:playTrack('/tracks/mySong.mp3')">listen</a>The link invokes “playTrack” and passes the path to the MP3 file as an argument. The JavaScript function then knows to hand it off to the Flash movie’s “playerPlay()” function which then loads and plays the MP3 media.
The Stop link
Even simpler, the stop link would be:
<a href="javascript:stopTrack()">stop</a>
No parameters to pass or anything. Invoking the JavaScript “stopTrack()” function causes JavaScript to invoke the ActionScript “playerStop()” function.
Embed the swf
We have the JavaScript in place. We have the links in place. All that’s missing now is the Flash movie itself.
Recall that the JavaScript references the Flash movie when the page loads by its ID. In order for this to work we have to declare the Flash movie’s ID when we embed it. One way to do this is to publish the Flash movie in the Flash IDE and copy the nested <object> and <embed> elements Flash generates when you publish the .swf file.
I am going to suggest that a more robust method is to use Geoff Stearns’ SWFObject code (linked to on page 5 of this tutorial).
Yes, SWFObject is JavaScript, and very advanced JavaScript at that. But don’t be alarmed - you don’t need to know how it works to make use of it!
After downloading Stearn’s code and linking to it in the <head> of your HTML document the same way you linked to your player.js code you can now conveniently embed your Flash movie with code similar to this:
<div id="flashcontent" class="alignc">
<p>This web page requires at least version 8 of Macromedia/Adobe's
Flash Player. This software plugin is available for free from the
<a href="http://www.adobe.com/downloads/#players">Adobe Download
page</a>.</p>
</div>
<script language="javascript" type="text/javascript">
// <![CDATA[
var so = new SWFObject("playsound.swf", "playsound", "10", "10", "8", "#e6e6e1");
so.write("flashcontent");
// ]]>
</script>What’s going on here?
Stearns’ script will replace the content in whatever element you specify with the Flash movie. In the above example, I have a div with an ID of “flashcontent”. Any text in that div will be replaced with the Flash movie. This is a very powerful tool to provide users without Flash some alternate content and to provide something for search engine spiders to index.
Following that is the code that invokes the SWFObject script. The parameters are:
- the path to the .swf file
- the ID for the Flash movie (do you remember why that is important?)
- movie width
- movie height
- Flash Player versiion required, and
- background color
That’s all!
I hope you found something useful from this discussion of Flash JavaScript cross communication. Page Five concludes with some links I found useful in learning about ExternalInterface. Good luck!
--top--