This post may be considered as a short tutorial on how to embed flash in html. It does not present the only way to do it. It does not cover every aspect. But, it is focused on embeding flash files in various visual modes (percentage based width and height, transparent mode – wmode). It just starts the topic of passing parameters to flash from javascript and/or php. More articles should be expected in nearby future, I’m going to present some of my thoughts about communicating with and from flash via parameters, variables and methods.

We can find many ways to embed flash in html. When we want it to be done exactly as we want it, we need to have our way. I would like to share some pieces of knowledge I gathered. For past few years my way to do it has been evolving. Surely, it will be evolving too. For that cause, this post may be considered as to be changed in the future. That’s all for the begin. Let us now focus on the

question(thisPost.title).getAnswer();

Seeking the answer

The answer may be simple. Some html editors may embed flash for us. All we need to do is choose a file and application:

generates some code into our html (probably in <HEAD> and <BODY> sections)
places some .js files into the project

The result may look like the following (it has been modified by me but originally generated by Adobe Dreamweaver):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flash embed thru Dreamweaver</title>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0',
'width','550','height','400','title','flash','src','_blank','quality','high',
'pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash',
'movie','_blank' ); //end AC code
</script><noscript><object classid="clsid:C13DAFG3-AX6D-12cf-96B8-222553540011" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="550" height="400" title="flash">
  <param name="movie" value="_blank.swf" />
  <param name="quality" value="high" />
  <embed src="_blank.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object></noscript>
</body>
</html>

The code looks fine… but sometimes, I need to use computers without Dreamweaver, I only may install Notepad2 and that’s it. And how can I change the flash file name fast? <- I can see it stands in 4 places... that's not useful.

When you want to update flash file on a ‘working’ website, you should change the path in html source rather than overwriting file on server. It ensures new visitors will see the newest version of your SWF.

All right folks! But what if I want to… That’s right, it was not the essential thought of this post. Some questions just render to memory. To name a few: How to embed flash with 100% width and height? How to communicate with the embedded swf? How to pass initial parameters/variables to SWF? Frankly speaking, the answer to all of those questions is very simple: http://blog.deconcept.com/swfobject/. SWFObject is a javascript library, which provides us with a complete functionality at the highest level. Just download the library and html generator.

After SWF Object download

As you can probably see, swfobject library contains few files:

swfobject.js – swf object library main file
expressInstall.swf – adobe express install file for Express Install feature
2 html example pages
and more

Studying example page sources may clear everything out. First, we embed javascript library file and decide whether we want static or dynamic publishing. Don’t know what it means? Here’s some description and examples…

STATIC PUBLISHING

Description:
Embed Flash content and alternative content using standards compliant markup, and use unobtrusive JavaScript to resolve the issues that markup alone cannot solve.

Pros:
The embedding of Flash content does not rely on JavaScript and the actual authoring of standards compliant markup is promoted.

Cons:
Does not solve ‘click-to-activate’ mechanisms in Internet Explorer 6+ and Opera 9+ and is harder to author (without using this generator*).

*) this is a copy & paste from html generator

In static publishing, the first step is to link to library and possibly register swf object – usually in <HEAD> section, note register may occur anywhere in html source

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>

then we place some strange code (static flash embed):

<div>
	<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
		<param name="movie" value="test.swf" />
        <object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
        <div>
			<h1>Alternative content</h1>
			<!-- (...) -->
		</div>
		</object>
	</object>
</div>

Below you can find the working example. Note that in some browsers, you must click the static-published flash object in order to activate it. Only after being activated flash object can intercept mouse events.

DYNAMIC PUBLISHING

Description:
Create alternative content using standards compliant markup and embed Flash content with unobtrusive JavaScript.

Pros:
Avoids ‘click-to-activate’ mechanisms in Internet Explorer 6+ and Opera 9+ and is easy to author (even without using this generator*).

Cons:
The embedding of Flash content relies on JavaScript, so if you have the Flash plug-in installed, but have JavaScript disabled or use a browser that doesn’t support JavaScript, you will not be able to see your Flash content, however you will see alternative content instead. Flash content will also not be shown on a device like Sony PSP, which has very poor JavaScript support, and automated tools like RSS readers are not able to pick up Flash content.

*) this is a copy & paste from html generator

Again we link to swf object library in <HEAD> section, we also may invoke embedSWF method in here, which is recommended for faster init – prevents from alternative content flashing

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("test.swf","myContent",
	"300","120","9.0.0","expressInstall.swf");
</script>

Now, all we have to do is to place alternative content <DIV>:

<div id="myContent">
	<h1>Alternative content</h1>
</div>

Again, working example – note this time flash object doesn’t need activating, but it requires javascript engine turned on

Alternative content 2

When it comes to percentage

Formerly, I mentioned percentage-based flash embed. SWFObject allows flash embeding with e.g. 100% width and height or 100% width and 500px height. All we have to do is to prepare the div with alternative content exactly as we want flash to be. Oh, and we must use dynamic publishing. Next step is to pass appropriate parameters to embedSWF function. That’s all, let’s look at the sources.

<div id="myContent" style=" width: 50%; height: 120px;">
<h1>Alternative content</h1>
</div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("test2.swf","myContent",
	"50%","120","9.0.0","expressInstall.swf");
</script>

And now the same as an example:

Alternative content

Transparency & others

There are few things to know about embedded flash transparency. Only static publishing fully support transparent mode, so we pass variables and parameters via inconvinient
<param name=”…” value=”…” /> elements
and
flashvars=”name1=value1&name2=value2″ attributes.
Transparent mode is one of 3 possible, others are: window (default) and opaque. Window mode causes flash stays always above all <DIV> elements. Transparent mode, unfortunately, causes flash stays always beneath any div, but it blends with background. Opaque mode works exactly like the “transparent” one except flash is opaque and has its own background.

Here’s the example containing 2 div elements: one is color-filled rectangle with text – is above the flash (which is in “transparent” mode), second one is the flash container with a background-image style set. Background image blends with flash (color and gray gradients + text + corners):

DIV above flash

And here are the sources:

    <div id="dispositionedDiv" style=" position:relative; top: 40px; left: 50px;
        background-color: #3388ff; width: 200px; height: 30px;">
      DIV above flash
    </div>
    <div style=" background-image:url('test3bg.jpg')">
      <object id="example4o" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="670" height="100">
        <param name="movie" value="test3.swf" />
        <param name="wmode" value="transparent" />
        <param name="text_part1" value="Hello" />
        <param name="text_part2" value="transparency" />
        <param name="text_part3" value="!" />
        <object wmode="transparent"
            flashvars="text_part1=Hello&text_part2=transparency&text_part3=!"
            type="application/x-shockwave-flash" data="test3.swf"
            width="670" height="100">
                <div>
                    <h1>Alternative content example 4</h1>
                    <!-- (...) -->
                </div>
        </object>
      </object>
    </div>
	<script type="text/javascript">
		swfobject.registerObject("example4o", "9.0.0", "expressInstall.swf");
	</script>

When we want forget about transparency. We may use much more convinient way of variables passing. The following example uses dynamic publishing and the same swf with default wmode (opaque background but always above everything)

Alternative content example 4b

And now html source:

<div id="example4b" style=" width: 680px; height: 100px; z-index:26;" >
Alternative content example 4b
</div>
<script type="text/javascript">
	swfobject.embedSWF("test3.swf", "example4b",
    	"680", "100", "9.0.0","expressInstall.swf",
		{text_part1:"hello",
         text_part2:"dynamic",
         text_part3:"publishing!"}, // flashvars
        {menu:"false"},  // params
        {id:"example4b",name:"example4b"} // attributes
	);
</script>

I don’t need to say, but I will, if we want to pass variables from php to flash it is very easy, we just insert appriopriate code between appriopriate quotes:

<script type="text/javascript">
	swfobject.embedSWF("test3.swf", "example4b",
    	"680", "100", "9.0.0","expressInstall.swf",
		{text_part1:"<?php echo $someValue; ?>",
         text_part2:"dynamic",
         text_part3:"publishing!"}, // flashvars
        {menu:"false"},  // params
        {id:"example4b",name:"example4b"} // attributes
	);
</script>

What’s next? Now go and see my next article about communication with embedded swf object. More script pieces and working examples are there just to be found out!

Finally, I strongly recommend visiting SWFObject documentation page where you can find more examples than I would want to prepare for you. You may also want to visit us later for more tips & tricks about flash and viz at VizToolkit.Com.

GHTime Code(s): 4976e nc

HowTo: embed flash in html

Seeking the answer

After SWF Object download

Alternative content

Alternative content 2

When it comes to percentage

Alternative content

Transparency & others

Alternative content example 4