SOLVED: How to insert Flash modules with minimal overhead

This forum is for general questions about extensions for Joomla! version 1.5.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
emeyer
Joomla! Explorer
Joomla! Explorer
Posts: 352
Joined: Thu Sep 29, 2005 2:37 am

SOLVED: How to insert Flash modules with minimal overhead

Post by emeyer » Sat Apr 18, 2009 7:28 pm

It took me a while to accomplish this, so I am sharing it. I just wanted a minimal module to contain a .swf flash object, without any unnecessary code overhead.

A number of helper scripts exist for embedding Flash, notably Google's swfobject.js and Adobe's AC_RunActiveContent.js. These each add 6k-9K of script overhead which is not necessary unless the scripts are specifically required by the Flash object itself. Originally, swfobject.js and AC_RunActiveContent.js were created because Microsoft announced a policy that it would not allow active components to initialize themselves, so it was necessary for external code to start autoplay. Perhaps because of the popularity of [youtube], Microsoft later rescinded that policy, so helper applications are no longer needed for the reason they were originally required. Note nonetheless, some Flash applets have evolved to rely on external code and do still require it (such as many versions of the popular jwplayer, which is at least twice as large as it need be for such legacy reasons).

To embed flash without the above library extensions in Joomla 1.5 is relatively straightforward, although the Flash object itself still needs to be created in a script outside the main page content for W3C compliance.

For this, there are two steps. First, in the administrator backend, add a custom HTML module where you want the flash to appear. Open the module in the Joomla administration interface, set the editor for raw HTML entry, and put in the following code:

Code: Select all

<div style="display:block;height:66px;width:162px">
  <div id="MyFlashCode">Loading Flash Player...
  </div>
</div>
The outer div sets the flash block size for faster layout, change the dimensions as you need.

If you want different flash modules on different pages, simply create more Joomla modules that appear on the separate pages, and put a different value for the inner DIV "id" attribute in each.

The following script then inserts the flash object into the module's inner div, after the main page finishes loading. For W3C compliance, this code needs to be in the HTML HEAD section, or in an externally linked script. This example is for a custom MP3 player called mp3d.swf in the media subdirectory, but it could be anything and anywhere else:

Code: Select all

function addFlash(fId){ 

if (document.getElementById(fId)){
  var loc=window.location.href + 'media/mp3d.swf';
  txt = '<object name="mp3d" id="'+fId+'">'
    +'<classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '
    +'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" '                   
    +'width="160" height="64" id="'+fId+'"><param name=bgcolor value="#333333">'
    +'<param name="movie" value="' + loc + '">'
    +'<param name="allowfullscreen" value="true">'
    +'<param name="allowscriptaccess" value="always">'
    +'<embed name="'+fId+'" id="'+fId+'" type="application/x-shockwave-flash" '
       +'pluginspage="http://www.macromedia.com/go/getflashplayer" '
       +'width="160" height="64" bgcolor="#333333" '
       +'src="' + loc + '" '
       +'allowfullscreen="true" allowscriptaccess="always" '
    +' </embed>'
  +' </object>';
  }
  document.getElementById(fId).innerHTML=txt;
}	
window.addEventListener('load', addFlash(MyFlashCode), FALSE);

Of course you will probably wish to modify the parameters for your own application, but this does provide a framework for Flash support without additional external libraries. If you have multiple flash modules on different pages, then include a separate JavaScript function with a different id for each.

Because the Flash object is inserted into the page after load, the technique is fully compliant with the XHMTL 1.0 transitional DTD.

Tests functioned correctly on Internet Explorer 7, Safari 3.2.1, Firefox 3.0.7, Konqueror 4.2.1, Opera 9.6.4, Avant 11.7, and Google Chrome 1.0.154.

JoeJoomla
Joomla! Explorer
Joomla! Explorer
Posts: 363
Joined: Fri Jan 20, 2006 4:37 pm
Location: Canada
Contact:

Re: SOLVED: How to insert Flash modules with minimal overhead

Post by JoeJoomla » Thu Apr 30, 2009 12:49 pm

I haven't tried the above yet but I wanted to thank you for taking the time to share such nicely detailed information on this topic. Not everyone takes the time to do what you did here. I'm surprised more people haven't commented on your efforts.
Joe Sonne
JoeJoomla.com | Joe Sonne Marketing | Former Board Member of Open Source Matters, Inc. | Capital Committee Chair


Locked

Return to “Extensions for Joomla! 1.5”