DotNetNuke Skins and Resources by ThinkofDesign

 

Add Flash content to your skins, the right way 

April 07
2007
14 Comments
By Vasilis Terzopoulos
Tags: DotNetNuke, Skinning

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:

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!

AddThis Social Bookmark Button

Comments

Friday, April 20, 2007 at 3:34 AM
gohog says:
What to do when hosting provider doesn't allow .js files to be uploaded using skin upload from admin pages?
Friday, April 20, 2007 at 3:48 AM
Vasilis says:
Hi gohog,

You can change the extension of your js file to txt or anything that is allowed from your host and when the file is up, find it with the DotNetNuke file manager and rename it back to js.
Monday, April 30, 2007 at 9:56 PM
Databyte says:
Hi
Thanks save my day

Could you please suggest while creating flash movies,what url path i will specify like relative or absolute?

Thank Heaps
Sunday, May 06, 2007 at 10:01 AM
Chris W says:
Thanks Vasilis, works great in IE, but now the Menu doesn't appear properly in Firefox ! It's popping up behind the flash image so there is some issue with the Z-order !
Sunday, May 06, 2007 at 10:51 AM
Chris W says:
OK, a bit of Google action found the fix for this - seems to be a very common problem ! You need to add a bit of extra JS code.

so.addParam("wmode", "transparent");

So the whole code block might look something like


Rgds
Chris
www.qpr.co.za
Wednesday, June 13, 2007 at 3:36 AM
MikeT says:
Hi Vasilis

really liked the simplicity of your SWFObject fix for DNN Skins using Flash but have been unable to get it it to work in the website.

Would you be willing to either take a quick look at the page skin source code to see where I've gone wrong (please confirm by email and I'll send it through)
FYI - The skin displays the DIV text Message OK but DOES NOT call the Flash (and the path to the flash file looks correct) - Please see http://www.nunkeri.com.au)

Alternatively are you able to tell me:
1) Exact position for inserting the JS Call on my .ASCX Skin -
- does it go above everything (code behind section) or between that and the HTML HEAD section or as the first item in the HEAD section or last in the HEAD section, etc. ???

2) Where you insert the JS call within the body tags?

I assumed that the Flash JS Call was to be inserted into the table in the same location where the Object & Embed tags had been used to call the Flash previously were located?

Below is my version of your script can you see any glaring mistakes?

<div id="header_flash">This text is replaced by the Flash movie if your browser supports JavaScript.</div>

Many thanks
MikeT

Tuesday, September 11, 2007 at 8:35 PM
Trae says:
I agree with Mike. Could you add in a simple skin ascx file for comparison? I get the same issue as he.
Wednesday, September 12, 2007 at 10:35 PM
DJ says:
I have been looking for some way to put a flash object in DNN that actually works. Can someone post a working version of this tutorial or just email me the source at ejdcd@cox.net. Thanks in advance!!

I just cannot seem to get this to work!
Tuesday, November 20, 2007 at 3:47 AM
Geo says:
Is there a possibility to include swf file from a different server, which does not contain player control ? I would like the swf file to be shown with the player control. Is this possible without modifying the swf or not ???
Friday, December 28, 2007 at 6:50 AM
Mark@LFT says:
This is a really useful peice of code, it worked first time I tried. Good work, thanks.

I have one question though, I am very new to DNN, and just creating my first site and skin.

I have created splash page using your code above to display a flash movie, what I can;t work out is how the user gets to the home page. Ideally I would like to have a button that say Enter... or something like that, but the home page doesn't have a url I can direct to. Also, how can I get it to redirect when the movie finishes playing?

I realise this is probably a very dumb question, but I would really apreciate some help.
Tuesday, February 26, 2008 at 10:50 AM
Don says:
Like Mark, I'm trying to get flash on a splash page to redirect at movie end. I've used getUrl() and the movie redirects just fine on a plain html page, but in the DNN page the redirect dose not work. Any ideas?
Monday, April 07, 2008 at 4:23 PM
Gnarf says:
Is there a difference betweed putting to the skin-file or putting it to the container-file?
Monday, April 07, 2008 at 4:26 PM
Gnarf says:
(sorry last one went wrong.. new try here with some code.) Is there a difference betweed putting [script type="text/javascript" src=" [%= SkinPath %]swfobject.js"][/script] to the skin-file or putting it to the container-file?
Friday, April 11, 2008 at 2:08 PM
Phixate says:
Try this instead:
http://www.teratechnologies.net/stevekamerman/index.php?entry=entry061230-174913

Click here to post a comment