An attempt to answer some (not all!) common, reocurring questions about the usage of Flash (SWF files) in Joomla templates and or content items.
Topics delt with (unordered, even tough the list is numbered..):
- need of a plugin to display SWFs, thus the recommendation to use a detection script!
- web standards compliance (validation)
- using the MOSMedia component
- inserting Flash via various mambots
- integration of complete Flash applications (RIA)
- replacing a header image by an SWF file in your template
- using Flash for headers (sIFR)
- some existing extensions using Flash (as of publication date)
- importance of path to swf
- SWF not playing: "play" and or "autostart" params
Usefull links:
- Ambience
- Hixie
- Blatek
- Gilluminate
- Accessible Flash
- Deconcept
Compliant Flash insertion code
<object type="application/x-shockwave-flash" data="path/folder/file.swf" width="WIDTH" height="HEIGHT"> <param name="movie" value="file.SWF" /> <p>You need flash player</p> </object>
Let's get going.
-
Flash is not natively supported by browsers!
Nowadays, most modern browsers, due to collaboration between Microsoft and Mozilla and Macromedia (developpers of the Flash technology), include the needed plugin to display Flash content by default. This plugin requires updates from time to time as new versions with added features (better video support, streaming, enhanced scripting etc) are released; these updates prompt the user to get the latest version from Macromedia. Installation, thanks to the small size of the plugin, is very quick and does not require a reboot or even browser restart.
These were the good sides.
Downsides: if an IE user disables ActiveX, then Flash display will be blocked to! Some users on intranets for example might not have permissions to install browser extensions, so won't be able to access that content. Others might not want to install anything coming from a website as they don't know what is is and don't trust anything.
Conclusion:
* use a detection script to check if the user has the requiered plugin installed, and it is of the right version number. Note that some of the available detection scripts rely on javascript, so will not work if the user has this disabled also. Talk about paranoïa..
* if the plugin is not installed, provide alternate content!
-
Flash, web standards, and validation
One of the good things about SWF files is that they are displayed the same cross-browser and on all Operating Systems. The problem is that detection scripts need to check first on the users browser, then the plugin presence, then if found, the plugin version etc etc..
Not only that,, but the code to display the SWF files is not the same on IE and Mozilla based browsers!
<object> is part of the XHTML specification, it is used by IE style browsers to start an instance of the Flash Player and load in the specified movie.
<embed> is not part of the XHTML specification and will prevent your page from validating. It is used by Netscape and similar browsers (read: Firefox!) for displaying Flash movies.
For a complete run-down on this topic, please read Drew McLellans "Flash Satay" article .
The HOW-TO for XHTML valid Flash usage can be found on Webmonkey . Use extensively!
-
Why use Flash?
Flash has some advantages other techniques such as DHTML and AJAX can come close to, but not always match. You can integrate full Flash RIAs (Rich Internet Applications) into your pages with interactive elements such as streaming video with clickable elements, dynamically loaded assets, crystal clear rendering of any font you want to use no matter if the user has it installed on his computer or not, communication with data servers through various channels; and all this without any page refreshing! Exactly what all the AJAX buzz is about, but without any cross-browser problems! And with sound, video etc.. yeah baby!
A few existing integrated examples would be:
- The integtation of the Expose Gallery
- Ths Flash Image rotator on display here
- Streaming video
- MP3 players
- Nice titles using any font you want: sIFR bot
-
How to use Flash in Joomla
Different usage areas requiere different means to achieve your goals: content, module, component, template?! As pointed out, using an SWF is not as simple as using an image, because you need the whoe object code in order for the plugin to load. For your content, there are some options to ease the pain of manually pasting that code in "code mode" into your items: MOSMedia for example, and a few mambots.
MOSMedia
This is (you decide) either a replacement for the existing Image tab on the content creation/editing screen, or an added new "Media" tab. It has many more media handling options than the default one, and allows you to select an SWF (can even be previewed), set various options for it, and insert it as easily as placing a simple mosmedia tag into your content! Please check the compared features and screenshots of the free Lite and the commercial ($60 currently for a site license) full versions at Avant Garde website.
Mambots
There's a few solutions available I'm aware of (maybe more..):
- Active6 Flash bot
- [other bots will be added here ...]
These are used quite simply: insert the tag into your content with the needed parameters (check the readme or other documentation for the bot) and when displayed on the site, the tag will be replaced by the SWF (supposing you didn't forget to publish the bot.. )
Flash in Templates
Important: once again: an SWF file is not a Flash image! It can not be used as a replacement, for example changing simply "header.jpg" by "header.swf"! Also, you can not use SWFs in CSS styles, for example as a background! Remember this!
Anywhere you want to place an SWF element into your page, you have two choices:
* either insert the object code directly into the templates "index.php"; or
* create a new module, paste the object code into the module, and load it where you want (more flexibility for temporary media elements!).
-
What to look out for
Paths !
If your SWF file does not load into the page, or loaded content (such as images, video, or XML data etc) is not displayed in the SWF, this is usually related to wrong paths to either the SWF or the additional media elements. Remember the SWF file is relative to the page that displays it! If you use an SWF in your template, which is available in the templates "images" folder, the relative path "images/file.swf" will work. If this same file is uploaded via the Media Manager to Joomlas root "images" folder, this path will NOT work! Best way to check: do a "view source" on the faulty page.
Parameters !
In the code used to insert the SWF objects, there are many, most unused, parameters you can set.
If your file does not seem to play once loaded, check the "play" and "autostart" parameters:
if their values are "false" or "0", replace by "true" or "1".
WYSIWYG Editors!
When pasting the Flash object tags into your content editor, there's two things you need to watch out for:
- use the editors "code" mode (often a button labeled "< >" or "HTML"; do not paste the code directly into the content field!
- most editors mess up that code! be very carefull, and if possible, disable the editor while creating or editing a content item with Flash in it. Really!
-
Browsers
Remember IE and Firefox do nto use the same code the display SWFs. If you simply use the code generated automatically when you publish your fla to HTML + SWF, then make sure both the object AND the embed tag use the same full URL to the SWF file!
If display is fine in one browser, but not in the other, verify these tags!
And remember to always check sites in both browsers anyway! 
-
Bonus: avoid replaying of your SWF on page reload.
Probably one of the most asked questions on the forums:
I have a Flash animation on my frontpage, but I don't want the whole animation to replay on all other pages, how do I do it?
Answer:
You need to use SO, that is Shared Objects, that is "Flash cookies".
This solution is originally from Mambosolutions , used to be included in their Templating tutorial, but doesn't seem to be in there anymore.
You will need to place the following code on the first frame of your Flash movie:
function checkSO()
{
// If a shared object called siteSO already exists this will retrieve it otherwise it
// creates a new shared object called siteSO
var SO = SharedObject.getLocal("siteSO");
if(SO.data.visitedAlready)
{
gotoAndPlay("end");
}
else
{
SO.data.visitedAlready = true;
SO.flush();
}
}
// Put that and this in the first keyframe of your movie, before the intro
checkSO();
and on the frame where you want the movie to stop on on the other pages, add the label "end" in the property inspector.
What this does is check initially if the variable "visitedAlready" in the Flash "cookie" called "siteSO" exists, if so, the animation goes the the keyframe labeled "end" (where you'd insert a "stop" action usually..); if the value is not yet set, it is assigned a value of true, and the SO is saved vai the flush command. Shared Objects act just like browser cookies, except that there are set and read by SWFs.
|