FLash in Joomla content

This post is certainly not giving the overall solution. It is simply my way of describing what I have tried, what worked and how I did it, for future reference.

Uploading the files

When you receive a flash movie from somebody, it usually contains a whole set of files. Now, I have several flashes and they are not all the same, but it looks something like this:

• folder - your flash
• - index.html
• - subfolder js with the necessary scripts like swfobject.swf and more
• - subfolder css with styling
• - subfolder xml with xml data if used
• - subfolder images
• - subfolder flash for assets and more

Like I said I am not a flash developer, so what do I know.

Well, the first thing is, where are you going to put your files. Using your FTP program, you can either place them in a folder called "flash" in your root (create that) and put all your flash movies there nicely together, or create a subfolder for the same purpose in Joomla's media manager, within the folder stories, or even one level higher. I don't think it really makes a difference, as long as you know where they are.

So for now we are going to assume they are in the media manager, in the folder stories, and within a subfolder flash.

So the first thing to do would be to test the movie.Type the complete path in your browser and it should start. The URL will be:

http://www.yoursite.com/images/stories/flash/moviefolder

It should load the index.html and your movie should show.

Using an Iframe

So. We have a working index.html, the movie plays. Seems to me the quick-and-dirty way to go is to put the URL in an Iframe in your content article, set the width, the height and whatever you want.

Iframes are considered dangerous, apparently there are some cons and not every editor allows you to add an Iframe to your Joomla content. That, and IE9 really, really doesn't like iFrames. Try google and see what I mean.

Anyway, JCE does (through a plugin), although it also has ways to restrict usage for certain user-levels. I have found that sometimes I have to tweak a little in the flash index.html 'cause the developer uses some styling that messes up when displayed within a joomla-template, but overall, it is what it is, a quick-and-dirty way to display the flash.

Using the editor

In this case, JCE editor. It comes with a plugin called Mediabox. It lets you insert media files and flash is one of the possibilities. Under the option tab, you can specify parms and flashvars. I've been playing around with this thing for a while and haven't succeeded in getting it to work. My guess is it all falls apart with more complex flash-movies and I'm guessing, the ones I am trying are.

Using AVReloaded

Also, a great possibility, maybe for less complex flash movies. I've managed to insert single swf files with no problem, but as soon as you want to pass parameters along, I'm lost with this one as well.

Insert the code in the article yourself

This is always a possibility. Open the html-editor and insert the proper code in your article. This is however less easy as it sounds, as first, you have to copy and paste the proper code and second, you've got to remember to switch off the editor, as it tends to strip your code and leaves you with nothing. I kinda hate that.

How to get the proper code? Look in the index.html, delivered with your flash. That should give you some directions. But even then, do you insert the whole html-file, or just parts? And how to get the proper stuff in the header of your template, instead of inside the body? If you've got a static call of your flash, this might work, but with a dynamic call it gets a bit more complicated...

Again, sometimes, this solution works, but my experience is it mostly is more a pain-in-the-youknowwhere than doing a proof-dance.

Use NoNumber! Sourcerer

NoNumber! to the rescue again. This plugin lets you insert pieces of code within your articles in a way your editor will leave them well alone.

So that sounds promising.

Getting it to work was another hassle, but I got this working with both static and dynamic calls.

The good thing about using this, is that you can include scripts and css into the header of your current page, without having to put the whole thing into your template. So it will only appear in the header on this particular page.

You put your code between tags {source} and { /source} and it won't get stripped. So... you can load your stuff within the header and place the object code (static publishing) or div (dynamic publishing) in the article itself.

Examples of how I did it will be posted in separate blog-posts.