DotNetNuke Skins and Resources by ThinkofDesign

Add Flash content to your skins, the right way 

I'll show you how to put Flash content in your DotNetNuke skins using the SWFObject. In case you're wondering, here is why this method is much better than the default Adobe's embed method:

• You get rid of the "Click to activate and use this control" message in IE
• Can be used in valid HTML and XHTML documents
• It's search engine friendly
• The script also includes Flash plug-in detection and
• Support for the Adobe Flash Player Express Install feature

Before you try to use the SWFObject in your skins, it is recommended to read all details about it at the official page as I'm not going to explain how it works or describe its features further. What we are going to accomplish is to import the SWFObject in our skins so we can then use its methods to embed Flash content either in our skin's code or in our DNN pages that use this skin.

Here is the simple process:

1. Download the SWFObject which comes in a zip file with examples of usage in static pages
2. Extract the zip to find the swfobject.js and put it in your skin's folder
3. Put the following line of code at the top of your skin's code:

If you're using ascx files:

<script type="text/javascript" src="<%= SkinPath %>swfobject.js"></script>

If you're using html files:

<script type="text/javascript" src="swfobject.js"></script>

That's it! Now every time you want to put Flash content either in your skin's code or directly in your pages (using a Text/Html module) you can use the following code:

<div id="myFlash1">This text is replaced by the Flash movie.</div>

<script type="text/javascript">

	var so = new SWFObject("myFlash1.swf", "myFlashTitle", "400", "200", "8", "#336699");

	so.write("myFlash1");

</script>

You need to put a second one?

<div id="myFlash2">This text is replaced by the Flash movie.</div>

<script type="text/javascript">

	var so = new SWFObject("myFlash2.swf", "myFlashTitle", "400", "200", "8", "#336699");

	so.write("myFlash2");

</script>

Easy eh?

Here is a quick explanation of the above code:

First we create a DIV with a unique ID that will be used by the script to put in it our Flash content. If our guest's browser doesn't support JavaScript or Flash, the text we put in this DIV will be visible.

<div id="UniqueID">This text is replaced by the Flash movie.</div>

Then we create a new instance of the SWFObject using JavaScript.

var so = new SWFObject("myFlashFileName.swf", "myFlashTitle", "Width", "Height", "RequiredFlashPlayer", "BackgroundColorHEX");

And then we replace the text in the DIV with our Flash content.

so.write("UniqueID");

Of course there are much more you can do with the SWFObject. You can add more parameters, you can pass variables to your SWF, either directly or from the URL string... but I won't say more. Further details on the usage of the SWFObject you can find on the official page.

Pay attention on using the right path!

When you use the SWFObject to embed Flash content in your skin's code and your Flash file is in your skin's folder then your path should look like the following:

<%= SkinPath %>myFlashFileName.swf

so when you're creating a new instance of the SWFObject the code should look like this:

var so = new SWFObject("<%= SkinPath %>myFlash1.swf", "myFlashTitle", "400", "200", "8", "#336699");

The above applies to both HTML and ASCX skins! DotNetNuke won't fix the path in HTML skins when it's part of JavaScript code.

But when you want to put Flash content directly in your pages using a Text/Html module, then you should use absolute path. So if your Flash file is in the root of your portal, the code should look like this (considering that your portal's ID is 0):

var so = new SWFObject("http://www.yoursite.com/portals/0/myFlash1.swf", "myFlashTitle", "400", "200", "8", "#336699");

That's all you need to know to use the SWFObject with your DNN skins. I think it's painless but still if you know other solutions, I'd love to hear about them so let me know in the comments!

Comments

Name (required)

Email (required)

Website

Enter the code shown above:

Notify me of followup comments via e-mail