Monday, January 31, 2011

Adding alternative content for SWF files

Flex Builder 4

All devices and platforms do not support flash. You need to supply alternate HTML for users to view additional content like phones and tablets.

Method 1: Add alt text and images inside the <object> tag

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mySWF" width="300" height="300">
<param name="movie" value="mySWF.swf">

<object type="application/x-shockwave-flash" data="mySWF.swf" width="300" height="300">
<img src="myAltPic.png" height="300" width="300" alt="Image version of the SWF" />
<br>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
</a>
<!-- For mobile sites, Remove flash link and add the image only -->
</object>

</object>

Method 2: Using SWFObject 2 & XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Alternative Content using SWFObject</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("about.swf", "mySWF", "100%", "100%", "9.0.0", false, {},{},{scale:"noscale"});
</script>
<style type="text/css">
<!--
html,body,div#mySWF {
width:100%;
height:100%;
}
body {
margin:0px;
padding:0px;
}
-->
</style>
</head>
<body>
<div id="mySWF">
<img src="myAltPic.png" height="300" width="300" alt"Image version of the SWF" />
<p>Alternate Text here.</p>
</div>

</body>
</html>

Get SWFObject 2

Method 3: Using SWFObject 2, PHP & XML

Use this method as a back up if your SWF file has a datagrid connected to a database (Flex). You can use PHP and SQL/XML to populate the area. There are many different ways to do this, and this code just shows how you can incorporate simplexml into the alternate area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Alternative Content using SWFObject</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("about.swf", "mySWF", "100%", "100%", "9.0.0", false, {},{},{scale:"noscale"});
</script>
<style type="text/css">
<!--
html,body,div#mySWF {
width:100%;
height:100%;
}
body {
margin:0px;
padding:0px;
}
-->
</style>
</head>
<body>
<div id="mySWF">
<p>

<?php
if (file_exists('myList.xml')) {
$xml = simplexml_load_file('myList.xml');
print_r($xml);
} else {
exit('Failed to open test.xml.');
}
?>
</p>
</div>
</body>
</html>

3 comments:

  1. This is such a great resource that you are providing and you give it away free.I love seeing website that understands the value of providing a quality resource for free.
    Regards
    DigiNext

    ReplyDelete
  2. I second what Victoria said. Open source philosophy is that you can make money off code if you want, but the information should be free. That way it benefits all. Thank you very much!

    ReplyDelete
  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...