June 23, 2009
By Nels Johnson
When you're facing a deadline or trying to keep a small project on budget, it's OK to do it your way — assuming you actually have a way. A classic case is the client email blast containing embedded HTML and an image with hot spots to carve up and put in CSS-controlled DIVs so that everything appears seamless in all email clients. After getting your IDE squared away (in CS4, Dreamweaver, etc.) and micro-tuning the in-line style (padding, margins, etc.) for each of the carved images, the client hands you a revised comp.
If you had a personal template for such a projects you could, for example, keep the original image intact, find the dimensions and locations of the desired hot spots with Windows Paint, customize the image maps, then apply USEMAP to the SRC tag of a browser-friendly version of the original image, and onClicks to the appropriate map regions. It works as well as the carve-up approach (that's why they call it HTML e-mail) and you are then free to move on to the next client challenge — as opposed to spending your lunch hour with FireBug. The two other examples in this story share the same philosophy.
Figure 1. A looping FLV file (no product placement intended).
One Loops, the Other Doesn't
A few months ago I got involved with a landing page for an online marketing campaign. The page's URL included variables to be processed by PHP on the server side (to parse and capture incoming traffic) and JavaScript on the client-side to dynamically create links to other sites based on the variables. Oh, and the page also needed to contain an auto-start media clip, which might be required to auto-repeat.
You'd think the back-end work would be the hard part. Turns out the clip was an FLV referenced by an embedded SWF — the type of video which, contrary to Google query results, does not play well with the LOOP=”TRUE” param in an <OBJECT> block (see below).
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="560" height="113" id="video_clip" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="video_clip.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="loop" value="true" />
<embed src="video_clip.swf" quality="high" bgcolor="#ffffff" width="560" height="113" name="video_clip" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" loop="true" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>
The <OBJECT> above works if the video clip is an AVI or MP3 file. If you're dealing with a SWF/FLV package, all bets are off — unless you have a personal template at your disposal which includes some basic ActionScript skills. You can include the code below in an FLA project (in this case, Flash Studio 8), which will compile to a SWF that will loop the referenced FLV. Instantiate the new SWF in your <OBJECT> tag and forget about the LOOP param. The page illustrating this solution is still running at http://www.adobefms3.com.
var listenerObject:Object = new Object();
function playVideo():Void {
vid.play();
}
listenerObject.complete = function(eventObject:Object):Void {
playVideo();
};
vid.addEventListener("complete", listenerObject);
vid is the name of the media controller object you'll create in the IDE (e.g. Flash Studio 8). When playback of the the FLV is complete, vid fires a message—to which the SWF's listenerObject responds by calling vid's play() method. My client has yet to complain about the performance.
Browsers Without Borders
Speaking of URL variables, I recently worked on another site that hosts pages containing ad hoc video clips based soley on ?video=myvideo at the end of the page URL. Once again, the clips are FLVs but there is only one HTML file and one embedded SWF. A primary goal is security (keeping most of the clip's address inside the SWF) but modularity/reusability/simplicity is also important.
Good thing I had an existing ActionScript template I could customize (see the January 2008 issue of DV for the related story). The idea is to parse the URL with JavaScript, grab the clip name expressed as the myvideo variable, then feed that clip name to the embedded, AS-enhanced SWF file through a JS callback routine also implemented on the HTML page (but defined in the SWF's ActionScript). Sounds sketchy until you see the code and put it to work.
Here are the key elements of the HTML/JS code for a test page (note that only the first URL variable — a single name/value pair — is parsed in this example):
<html>
<head>
<title>Dynamic Clip Selection</title>
</head>
<body >
<br><br>
<center>
<h1>DYNAMIC CLIP SELECTION VIA URL VARIABLES</h1>
<br><br><br><br>
// instantiate the SWF object
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="320" height="240" id="videoPlayer" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="my_flash_player.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="my_flash_player.swf" quality="high" bgcolor="#ffffff" width="320" height="240" name="videoPlayer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</center>
<script language = "JavaScript">
// parse the URL variable
var searchString = document.location.search;
searchString = searchString.substring(1);
var nvPair = searchString.split("=");
// execute the AS callback function
// array element nvPair[1] is the name of the clip
flashVideoPlayer.change_vid(nvPair[1]);
</script>
</body>
</html>
Here is the SWF's ActionScript:
import flash.external.ExternalInterface;
// callback routimes callable from JavaScript on the HTML page
ExternalInterface.addCallback("change_vid", null, change_vid);
function change_vid(new_vid):Void {
vid.contentPath = “http://www.myservernew.com/videos/” + new_vid + “.flv”;
}
// make the clip URL blank to start
vid.contentPath = "";
As in the looping example above, the SWF file contains an FLVPlayback component (Media Controller object) named vid, along with the following properties: video window size = 320x240, autoplay = false. You can use defaults for vid's other properties but remember to leave contentPath when you compile the SWF. If you want Play and Pause buttons, you'll need to include them in the FLVPlayback component. If you're feeling more ambitious, you can modify the HTML/JavaScript and SWF/ActionScript to pass in and receive other properties in addition to the media clip name (such as video window size and position).
On the server side, populate your video folder with all the FLV files you expect to access when you push the page(s) live. Based on the dummy names used above, the complete URL string for the page which contains the SWF would be in the form of http://www.myservernew.com?video=myvideo (See Figure 2, below). Because the clips are in a folder named videos (a more obscure name is recommended), the effect is similar to using a virtual directory on a Web server. 
Figure 2. Dynamic clip selection based on URL variables. If you're comfortable with revealing the full server path of your clips, you could pass the whole thing to the SWF from Javascript. In effect you would have a portable Flash Player based on ActionScript — as opposed to products like JWPlayer and FlowPlayer which are based more on .JS libraries and FlashVars. Of course, you'd have to be pretty good at ActionScript.
Since their original deployment, I have modified and reused these personal template techniques frequently. They are not complete solutions but they have saved hours of development on short-term project timelines.
|