Show an alternate image for Adobe Flash Animations to iPhones, iPod Touch and iPads using JavaScript

I've loved my iPhone for a long time, but now that I have an iPad, it's my preferred way to browse the internet...but alas, my own site has a nice little Flash animation that follows your mouse I developed years ago. On the homepage, I recently created a simple flash animation promoting my screencasts. Up to now, those areas appeared as black empty boxes on my iPad. So I modified my JavaScript Adobe Flash code to display an alternate image if the site is being viewed from an iPhone, iPod Touch or an iPad. It's pretty easy to do an it also simplifies all of the code you have to use to insert a piece of flash in your documents.

Part 1--The Function

<script type="text/javascript">
function writeFlash(movieLocation,flashwidth,flashheight,noflashsrc,noflashurl,myidname) {
	if (myidname) { document.write('<div id="'+myidname+'">'); }
	if ((noflashsrc) && ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) )) {
		if (noflashurl) { document.write('<a href="'+noflashurl+'" >');}
		if (noflashsrc) { document.write('<img src="'+noflashsrc+'" />');}
		if (noflashurl) { document.write('</a>');}
	} else {
		document.write('<object type="application/x-shockwave-flash" width="'+flashwidth+'" height="'+flashheight+'" data="'+movieLocation+'"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="'+movieLocation+'" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="wmode" value="transparent" /></object>');
	}

	if (myidname) { document.write('</div>'); }
}
</script>

That code just sets things up. Notice the working part of the code above is in bold. I simply check the useragent to see if it matches a pattern of any of the Apple Mobile devices. Now wherever you want to place a Flash document, you need to use Part 2.

Part 2--Inserting the Flash File

<script type="text/javascript">
	writeFlash('SWFSRC',WIDTH,HEIGHT,'IMAGESRC','IMAGEURL','IMAGEID');
</script>

This small piece of code uses the previous function in order to display the flash. Only the first three values are required, the rest are optional. Let's see what they do. Note: The width and the height are not in quotes, all the others are...make sure you include the quotes.

Part 3--What are the different options

SWFSRC

This is the location of your flash .swf file.

Width & Height

This is the width and height of the swf file. You can use this code to place regular swf files without an alternate image file if you leave everything else blank and only use these first three attributes.

IMAGESRC

This is the location of the alternate graphic you want to display if this is an iPod, iPod Touch or iPad.

IMAGEURL

If you want to have the image click to a URL, just insert the URL here. If you don't include a URL, the image will just show up without being clickable, which is fine.

IMAGEID

This is VERY optional. If you include a value here, then the whole thing will be wrapped around a <div> tag with an ID of whatever you specify here. I like to wrap my flash pieces around a DIV so that I can style them.

blog comments powered by Disqus