One of the easiest ways to create a great-looking module is to embed a Flash movie into the module view. This workshop will show you how to do just that.
Inserting Flash content is pretty simple. We begin by taking the module we created in Workshop 1 and adding the HTML for the Flash movie at the correct location in the document:
<div class="view superflash">
<div class="head">
<h3>Superflash Module</h3>
</div>
<div class="body">
<!-- Start of Flash HTML Code-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="100">
<param name="movie" value="superflash.swf?slogan=&slogan_white=&title=SUPER!&title_white=SUPER!&url=" />
<param name="quality" value="high" />
<embed src="superflash.swf?slogan=&slogan_white=&title=SUPER!&title_white=SUPER!&url=" width="300" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
<!-- End of Flash HTML Code -->
</div>
</div>One thing to notice about this is that the & in all the URLs has been encoded as & due to XHTML requirements. HTML parsers are a lot less picky about this (among other things), but in order to validate your module as valid XHTML, these need to be encoded properly. Also, now's a good time to bring up the W3C validator: It will break on "embed" tags as not being proper XHTML. Our Module Validator will accept it as it is. If you care deeply about XHTML compliance, output the Flash code with JavaScript, and it will validate at W3C.
That's it – we've completed our Flash module!
We validated it with the Module Validator, and it reports no errors, so we're good to go.
Our module ID is: "superflash," so to package it up for uploading, we create a zip file named "superflash.zip," which contains a directory called "superflash." That directory should contain a file called "index.html," which has the complete HTML of our module. We also include the Flash file itself, though it can be served from another site if you like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://iamalpha.com/.developer/profile">
<title>Superflash Module</title>
<link rel="stylesheet" type="text/css" id="manifest" href="http://imakealpha/.developer/css/manifest.css"/>
</head>
<body class="module" id="superflash">
<h1>Superflash: Version <span class="version">1.0</span></h1>
<div class="view superflash">
<div class="head">
<h3>Superflash Module</h3>
</div>
<div class="body">
<!-- Start of Flash HTML Code-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="100">
<param name="movie" value="superflash.swf?slogan=&slogan_white=&title=SUPER!&title_white=SUPER!&url=" />
<param name="quality" value="high" />
<embed src="superflash.swf?slogan=&slogan_white=&title=SUPER!&title_white=SUPER!&url=" width="300" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
<!-- End of Flash HTML Code -->
</div>
</div>
<h3>Description</h3>
<p class="description">My Superflash Module is a proof of concept to show flash in a module. As you can see, I've proved the concept successfully.</p>
<h3>Detail</h3>
<p class="detail">I could go on and on about how awesome I am, but I'll spare you.</p>
<h3>Author Information</h3>
<ul>
<li class="author vcard"><a href="mailto:you@somedomain.com" class="email fn">Your Name</a> - <a href="http://somedomain.com" class="url">Homepage</a></li>
</ul>
<h3>License</h3>
<p><a href="http://licenseurlgoeshere" rel="license">Licensed under X</a>.</p>
</body>
</html>Time to move on to Workshop Three.