See the example of this javascript based photo slide show with fade transitions here:
http://www.agapecreative.com
Because some Apple products don’t display Flash content, and since these devises are becoming increasingly popular, it becomes necessary for website designers to create work arounds when creating Flash animations. One simple method is to create 2 pages: one for Flash ready devices, and a second for non-flash browsers. You do this by creating a single page with some javascript – nothing else:
<SCRIPT LANGUAGE=JavaScript1.1>
<!--
var MM_contentVersion = 6;
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if ( plugin ) {
var words = navigator.plugins["Shockwave Flash"].description.split(" ");
for (var i = 0; i < words.length; ++i)
{
if (isNaN(parseInt(words[i])))
continue;
var MM_PluginVersion = words[i];
}
var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;
}
else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
&& (navigator.appVersion.indexOf("Win") != -1)) {
document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag
document.write('on error resume next \n');
document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
document.write('</SCR' + 'IPT\> \n');
}
if ( MM_FlashCanPlay ) {
window.location.replace("index-flash.html");
} else{
window.location.replace("index-no-flash.html");
}
//-->
</SCRIPT>
You can see the if / else conditions at the bottom where the browser will be directed either to the Flash or Non-Flash pages. Pretty simple, just replace the file names with the ones you use and you’re done. Another method we just made use of is getting rid of the flash content entirely and using javascript to manage the fade transitions in a slide show. It looks like Flash, but are just a few independent png files, managed by javascript, that can be replaced as needed with new pngs without having to go into Flash, and it displays well on iphones and ipads.
The below java script should be placed in the head tag:
<script type="text/javascript">
var gblPhotoShufflerDivId = "photodiv";var gblPhotoShufflerImgId = "photoimg";var gblPhotoShufflerAnchorId = "photoanchor";
var gblImg = new Array("http://agapecreative.com/images/buttons/LargeButton1.png?v=0","http://agapecreative.com/images/buttons/LargeButton2.png?v=0","http://agapecreative.com/images/buttons/LargeButton3.png?v=0");
var gblHref = new Array("http://agapecreative.com/web-hosting.html","http://agapecreative.com/web-design.html","http://agapecreative.com/web-editing.html");
var gblPauseSeconds = 5.25;var gblFadeSeconds = .85;
var gblRotations = 1;
// End Customization section
var gblDeckSize = gblImg.length;var gblOpacity = 100;
var gblOnDeck = 0;var gblStartImg;var gblStartHref;
var gblImageRotations = gblDeckSize * (gblRotations+1);
window.onload = photoShufflerLaunch;
function photoShufflerLaunch(){var theimg = document.getElementById(gblPhotoShufflerImgId);gblStartImg = theimg.src; // save away to show as final imagevar theanchor = document.getElementById(gblPhotoShufflerAnchorId);gblStartHref = theimg.href; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';setTimeout("photoShufflerFade()",gblPauseSeconds*1000);}
function photoShufflerFade(){var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds// the slower the fade the more increments neededvar fadeDelta = 100 / (30 * gblFadeSeconds);
// fade top out to reveal bottom imageif (gblOpacity < 2*fadeDelta ) {gblOpacity = 100;// stop the rotation if we're doneif (gblImageRotations < 1) return;photoShufflerShuffle();// pause before next fadesetTimeout("photoShufflerFade()",gblPauseSeconds*1000);}else{gblOpacity -= fadeDelta;setOpacity(theimg,gblOpacity);setTimeout("photoShufflerFade()",30); // 1/30th of a second}}
function photoShufflerShuffle(){var thediv = document.getElementById(gblPhotoShufflerDivId);var theimg = document.getElementById(gblPhotoShufflerImgId);var theanchor = document.getElementById(gblPhotoShufflerAnchorId);
// copy div background-image to img.srctheimg.src = gblImg[gblOnDeck];theanchor.href = gblHref[gblOnDeck];window.status = gblHref[gblOnDeck]; // updates status bar (optional)// set img opacity to 100setOpacity(theimg,100);
// shuffle the deckgblOnDeck = ++gblOnDeck % gblDeckSize;// decrement rotation counterif (--gblImageRotations < 1){// insert start/final image if we're donegblImg[gblOnDeck] = gblStartImg;gblHref[gblOnDeck] = gblStartHref;}
// slide next image underneaththediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';}
function setOpacity(obj, opacity) {opacity = (opacity == 100)?99.999:opacity;
// IE/Winobj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konquerorobj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefoxobj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3obj.style.opacity = opacity/100;}
//–><!]]></script>
For this example I used the full URLs so it works on our blog, but they can be relative.
The last thing is setting the html/css:
<div id="photodiv"><p><a id="photoanchor"
href="http://agapecreative.com/web-editing.html">
<img src="http://www.agapecreative.com/images/buttons/LargeButton3.png?v=0"
alt="Web Editing" border="0" id="photoimg" /></a></p>
The alt text isn’t necissary, but pay attention to the weird ?v=0 at the end of the file names in the html and javascript. If I were smarter I’d explain what that’s for.
