Embedding .swf .fla

Embedding SWF FLA banner

Anchor tags are a case when there is no link inside the swf

Swf over popups problem

Add the parameter <param name="wmode" value="transparent"> to the OBJECT tag. And if there is present an EMBED tag, wmode="transparent" to the EMBED tag.

How to make a Flash movie with a transparent background. The background of a Flash movie can be set to transparent. This allows the background color or image of the HTML page that contains the Flash movie to show through and allows the layering of Flash content with DHTML content.

Dreamweaver way to embed a swf banner

IE asks confirmation to load the content at every occurrance of flash.

On most cases the simple embedding works just fine. But by some reason, sometimes, when there are more than one flash object on the page, IE asks at every occurrance to confirm loading the content. Then JavaScript helps.

Embedd .swf using javascript.

Embedding swf fla active content javascript.

One flash object on page

Note - banner name is written without any extension in JavaScript code.

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','728','height','90','src','my-banner','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','my-banner' ); //end AC code
</script>
<noscript>
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="728" height="90">
		<param name="movie" value="my-banner.swf" />
		<param name="quality" value="high" />
		<embed src="my-banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="728" height="90"></embed>
	</object>
</noscript>

More than one flash object on page

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','728','height','90','src','/images/my-banner','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','' );
</script>


AC_RunActiveContent.js

//v1.0
//Copyright 2006 Adobe Systems, Inc. All rights reserved.
function AC_AddExtension(src, ext)
{
  if (src.indexOf('?') != -1)
    return src.replace(/\?/, ext+'?');
  else
    return src + ext;
}

function AC_Generateobj(objAttrs, params, embedAttrs)
{
  var str = '<object ';
  for (var i in objAttrs)
    str += i + '="' + objAttrs[i] + '" ';
  str += '>';
  for (var i in params)
    str += '<param name="' + i + '" value="' + params[i] + '" /><param name="wmode" value="transparent" /> ';
  str += '<embed ';
  for (var i in embedAttrs)
    str += i + '="' + embedAttrs[i] + '" wmode="transparent" ';
  str += ' ></embed></object>';

  document.write(str);
}

function AC_FL_RunContent(){
  var ret =
    AC_GetArgs
    (arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
     , "application/x-shockwave-flash"
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_SW_RunContent(){
  var ret =
    AC_GetArgs
    (arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
     , null
    );
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
  var ret = new Object();
  ret.embedAttrs = new Object();
  ret.params = new Object();
  ret.objAttrs = new Object();
  for (var i=0; i < args.length; i=i+2){
    var currArg = args[i].toLowerCase();

    switch (currArg){
      case "classid":
        break;
      case "pluginspage":
        ret.embedAttrs[args[i]] = args[i+1];
        break;
      case "src":
      case "movie":
        args[i+1] = AC_AddExtension(args[i+1], ext);
        ret.embedAttrs["src"] = args[i+1];
        ret.params[srcParamName] = args[i+1];
        break;
      case "onafterupdate":
      case "onbeforeupdate":
      case "onblur":
      case "oncellchange":
      case "onclick":
      case "ondblClick":
      case "ondrag":
      case "ondragend":
      case "ondragenter":
      case "ondragleave":
      case "ondragover":
      case "ondrop":
      case "onfinish":
      case "onfocus":
      case "onhelp":
      case "onmousedown":
      case "onmouseup":
      case "onmouseover":
      case "onmousemove":
      case "onmouseout":
      case "onkeypress":
      case "onkeydown":
      case "onkeyup":
      case "onload":
      case "onlosecapture":
      case "onpropertychange":
      case "onreadystatechange":
      case "onrowsdelete":
      case "onrowenter":
      case "onrowexit":
      case "onrowsinserted":
      case "onstart":
      case "onscroll":
      case "onbeforeeditfocus":
      case "onactivate":
      case "onbeforedeactivate":
      case "ondeactivate":
      case "type":
      case "codebase":
        ret.objAttrs[args[i]] = args[i+1];
        break;
      case "width":
      case "height":
      case "align":
      case "vspace":
      case "hspace":
      case "class":
      case "title":
      case "accesskey":
      case "name":
      case "id":
      case "tabindex":
        ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
        break;
      default:
        ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
    }
  }
  ret.objAttrs["classid"] = classid;
  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;
}

These solutions are taken from Adobe page Active Content Embedding [http://www.adobe.com/devnet/activecontent/articles/devletter.html].

Active Content Embedding

Preparing your website to handle the Microsoft changes to Internet Explorer

[http://www.adobe.com/devnet/activecontent/articles/devletter.html].
Created: 31 March 2006. Modified: 8 November 2007

Note: On November 8, 2007, Microsoft announced that, as a result of recent technology licenses acquisitions, the "click to activate" restrictions are no longer mandatory. Microsoft plans to remove the activation behavior from Internet Explorer in April 2008. Microsoft has indicated that developers will not need to make any modifications to existing websites; controls will function as they did before the activation change was made in April 2006. For the latest information about the update and information about preview releases, please read the Microsoft Developer Network article, Information for developers about Internet Explorer [http://msdn.microsoft.com/ieupdate/]. The article on this page will remain until Microsoft implements the changes to Internet Explorer.

Many of you have heard about the announced changes to Microsoft Internet Explorer. You may have questions about what's going to happen to your websites that use embedded ("active") content and applications—which can include Adobe Flash, Adobe Acrobat, or Shockwave files. This article details the browser changes, active content workarounds, and resources you will need to make your websites compatible with the updated browser.

...

How will the browser changes affect my site?

Users will be able to view embedded content and applications in their present form—until they update their Internet Explorer browsers on Windows. The browser update was first released as an optional update in February 2006. After users update the browser, they have to click embedded or "active" content before they interact with it. Check out the resources [http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/activating_activex.asp] on the Microsoft Developer Network (MSDN), where you can get more information.

Some sites will not be affected by the change. The updated browser prompts users to click before displaying active content coded using <object> , <embed> , or <applet> tags that are inline in an HTML file. However, HTML pages that use tags generated by external script files (like JavaScript)—such as sites that use complex Flash detection scripts—should continue to work normally with no change.

Note: Even though many browsers still support all three tags, the <embed> and <applet> tags are deprecated in favor of the <object> tag.

Many of you will want to fix your sites to work around the mandatory browser changes. The good news is that you can apply one of several workarounds to your site right now.

Requirements

...

AC_RunActiveContent.js: This is the file you use for the workaround for Flash and Shockwave content described in External JavaScript Solution 2: For Multiple Occurrences of Embedded Content [http://www.adobe.com/devnet/activecontent/articles/devletter.html#multipleoccurrences].
AC_ActiveX.js: Use this file for the fix described in the section, Solution for Other Active Content Types [http://www.adobe.com/devnet/activecontent/articles/devletter.html#otheractivecontent].
...

Getting started now: Fix for displaying active content

The HTML code affected by the change is anything that uses the <object> tag directly in the page. You will need to replace this tag with an external JavaScript file that writes the <object> tag from outside the actual HTML page.

Code you need to replace

Here's an example of code (a simple <object> tag) that will not function as it did previously in the updated browser:

</object>

If you replace this tag with a script that calls code outside of your HTML page, as described in the two following methods, it will continue to work in the updated version of Internet Explorer.

...

External JavaScript solution 1: For single (or few) occurrences of embedded content

If your site has only one piece of embedded content, or only a few pieces, you may want to use the following simple solution. To implement this, you need to create a unique external JavaScript (JS) file for each page on your site that contains embedded content.

Note: If you have more than one piece of embedded content on a page, create unique functions (see Step 1) within the external JS file to document.write tags for each separate content piece. Also, please note that this solution is not included in the sample files; simply follow the instructions below to create the new code from code that exists in your current HTML page.

The steps to do this are as follows:

Create and place the external JS file on your site. In this example, call it foo.js. This script needs to document.write the full <object>/<embed> tag that was previously in your HTML file:

2. function RunFoo()

3. {

4. document.write('<object classid="clsid:D27CDB6E..." ... height="200">\n');

5. document.write('<param name="movie" value="foo.swf" />\n');

6. document.write('<param name="quality" value="high" />\n');

7. document.write('<embed src="foo.swf" ... height="200"></embed>\n');

8. document.write('</object>\n');

}

Add a JavaScript include statement that points to the JavaScript file from Step 1 to the <head> section of the web page that embeds the content:

10.<script src="[path]/foo.js" type="text/javascript"></script>

11.

Replace each <object>, <embed>, or <applet> tag with a call to the appropriate external files as follows:

13.<script type="text/javascript">RunFoo();</script>

14.

External JavaScript solution 2: For multiple occurrences of embedded content

If your site has a lot of embedded active content, or if you embed it in multiple ways, this solution gives you some big advantages. You can use a single external JS file for all of your embedded Flash and Shockwave content, instead of creating one for each affected file (as in Solution 1). The JS file contains functions that embed your active content based on parameters it receives from the main page.

There are three steps you need to follow to implement this solution:

Copy the external JS file that contains the workaround functions to a shared location on your website. Call it AC_RunActiveContent.js for this example, or other names that you choose.

The code in the AC_RunActiveContent.js file uses arguments that you pass to it (see Step 3) to construct a complete tag string that it writes to your document.

Add a JavaScript include statement that points to the shared JavaScript files from Step 1 to the <head> section of each web page on your site that includes an <object>/<embed> tag:

Replace each instance of <object> and <embed> tags in your pages with the appropriate function calls. Here are two function calls for you to choose from: one for Flash content and one for Shockwave content.

Flash content

AC_FL_RunContent(

"att1Name","att1Value",

"att2Name","att2Value",

...

"attnName","attnValue"

);

Shockwave content

AC_SW_RunContent(

"att1Name","att1Value",

"att2Name","att2Value",

...

"attnName","attnValue"

);

Note: These functions need JavaScript enabled to function. To let users with JavaScript disabled in their browsers view active content, follow each function with traditional <object>/<embed> tags within <noscript> tags, as described in the section, What About Users Who Have JavaScript Turned Off? [http://www.adobe.com/devnet/activecontent/articles/devletter.html#nojavascript]

As you replace the <object> and <embed> tags with these new function calls, edit the argument pairs (represented by "att1Name", "att1Value") to include appropriate attributes and their values from your original tags, such as movie, id, bgcolor, etc. You can see an example of this code for a specific Flash file in the sample file SampleActiveContent.html, which is included in the sample file download.

When you edit the function call to pass the movie attribute, do not include the file extension with the movie name. Pass the movie name as follows:

AC_FL_RunContent(

"movie","foo",

...

"attnName","attnValue"

);

The external JavaScript code will add the appropriate extension.

If you are passing parameters to your Flash file, you might have an original movie attribute that looks like this:

foo.swf?username=Bob&color=red

To pass the name and color attributes successfully, include them as arguments in your function as follows, remembering to omit the file extension:

"foo?username=Bob&color=red"

Be sure to list your arguments in name/value pairs. You need to pass an even number of items to the AC_RunActiveContent.js code; otherwise it will not work. It also automatically inserts other required settings such as classid and mimeType as result of the player-specific function call. If you need to update the value of one of these required settings, edit these values within the AC_FL_RunContent() or the AC_SW_RunContent() functions, which you can find within the AC_RunActiveContent.js code. Within your HTML page, pass only the arguments for the optional parameters.

Here's an example of how you would replace a standard inline <object> and <embed> tag that plays a Flash file using this method. If you needed to replace the following code:

</object>

you would insert the following function call in its place:

AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','550','height','400','align','middle','src','foo','quality','high','bgcolor','#ffffff','name','foo','allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','foo' );

</script>

What about users who have JavaScript turned off?

Both of the above methods rely on JavaScript. A small percentage of visitors to your site may have disabled JavaScript in their browsers. The techniques suggested above will not work for these few users—they won't see your embedded content at all. One thing to keep in mind is that many or most Internet Explorer users who have disabled JavaScript may have also disabled ActiveX support. However, users who have disabled ActiveX have not been seeing Flash and Shockwave content displayed in the browsers. The migration to JavaScript techniques for embedded content doesn't alter or affect their experience. You need to be concerned only about users who have disabled JavaScript but have ActiveX enabled.

To provide for the small percentage of users who have disabled JavaScript but have enabled ActiveX, insert the <object> and <embed> tags directly into the HTML, but put them within a <noscript> tag. The <noscript> tag is a standard tag that provides fail-safe alternative code for users who have disabled JavaScript. Here's an example of a standard embedded SWF file nested in a <noscript> tag:

</object>

</noscript>

Users who have JavaScript disabled will need to click to activate content in the updated browser when they visit a page with code similar to the above. After that, they can interact with the content as they did before.

Solution for other active content types

In the sample files accompanying this article, we are also including a JavaScript file called AC_ActiveX.js. You don't need this script to display Flash or Shockwave content using the methods described above. However, developers who are working with other types of active content in web pages can use this script to display other types of content without requiring the user to click to activate it. Think of it as a kind of generic script that works with a broad range of content. You can use this script in much the same way you would use AC_RunActiveContent.js, as described in the steps above.

To implement this script, first include the external files in the <head> section of your HTML page using the following code:

Then, just as in the Flash/Shockwave method, replace the <object> and <embed> code, modifying the attribute and value pairs to fit your content:

AC_AX_RunContent( 'classid','clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFB','width','150','height','100','src','fakefile.foo' );

</script>

...

About the author

This content was authored by Adobe Systems, Inc.

Web Development - XHTML CSS JavaScript jQuery.

www.tuljo.com