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>

Related Posts Plugin for WordPress, Blogger...