Textpattern Plugin: Kimili Flash Embed

02 Feb 05

Update! 1/26/06
The Kimili Flash Embed is now at version 1.0 1.1. Go to the new permanant home of Kimili Flash Embed and get the latest and greatest.

Update! 3/16/05
Kimili Flash Plugin for Textpattern – v. 0.4 is now available. This update gives you access to TXP environmental variables so you can pass information such as the current section to your flash movie. Get it here.

Update! 2/25/05
The Kimili Flash Plugin has been updated to version 0.3. It’s mainly a cleanup release, but it has the added feature to auto-generate an ID for your flash movie if you don’t supply one. Just re-download the zip below and you’re on your way.

When I was first building this site and decided to deliver the films via flash, I searched for methods to embed the flash while maintaining de rigueur XHTML compliance. After flirting with Satay, Totanus and other Javascript methods, I stumble across Geoff Stearns.

Geoff has come up with a wonderful XHTML compliant javascript for both detecting and embedding flash content that gets around the shortcomings of some of the previous methods. Check out some of its features:

• It dispenses with the need for a small loader movie clip.
• It can detect the necessary player and deliver alternate content if needed.
• You can pass in any variables to your flash movie.
• It can be bypassed if it doesn’t detect the flash player correctly.
• It is fully XHTML compliant

Using Geoff’s script, you embed the flash by adding some simple JavaScript in your (x)html code. In Textpattern though, problems arise if you drop Javascript code in the middle of an article, particularly if you’re using textile. The code is treated as text content, <br /> tags and other unwanted stuff is added and the script just doesn’t work as a result. Of course, you could disable textile for that article and manually format it with HTML, dropping the javascript in the middle, but who really wants that?

Enter the Kimili Flash Embed.

The Goods

Kimili Flash Embed is simply a textpattern/textile friendly interface to Geoff’s script. When you use its custom textpattern tag in your article, it translates that tag into the necessary javascript to access Geoff’s script.

• kml_flashembed.zip (8.93KB)
  Get the latest version, always available at the KFE Home.

In the zip you’ll find the following files:

• flashobject.js – this is Geoff’s script
• kml_flashembed.txt – the textpattern plugin
• readme.txt – usage instructions

Usage

The first thing you should do is make the script available to any page you’d like to place flash content on. Put (code)flashobject.js in a folder called js off of the root of the site. Then add the following line of code in the head of your page templates:

<script language="JavaScript"
        type="text/javascript"
        src="/js/flashobject.js"></script>

After you’ve done that, as well as installed and activated the plugin, you can add Flash content to your pages using a tag like this in your articles or anywhere else in the textpattern environment:

<txp:kml_flashembed movie="filename.swf"
                    height="150"
                    width="300" />

It is important to double quote your attributes in this tag. Single quoting may trip things up a bit.

The available attributes for the <kml_flashembed /> tag are:

movie (_required_)
The path and file name of the flash movie you want to display.

height (_required_)
The height of the flash movie. You can specify in pixels using just a number or percentage.

width (_required_)
The widthof the flash movie. You can specify in pixels using just a number or percentage.

align
(l, t, r, b) – Left, Right, Top, and Bottom align the movie along the corresponding edge of the browser window and crop the remaining three sides as needed. Defaults to centered.

alttext
The text or HTML you want to display if the required flash player is not found. If you want to use HTML inside this attribute, there are some important differences to remember, as we’re inside of another tag. Specifically:

• Use curly brackets: {p} for tags instead of normal braces: <p>
• Use single quotes for HTML tag attributes, as your kml_flashembed attributes should be double quoted.
• Example Syntax: alttext="{img src='noflash.jpg' alt='You need flash' /}"

bgcolor
(#RRGGBB, hexadecimal RGB value) – Specifies the background color of the Flash movie.

fvars
Pass variables (name/value pairs) into your movie with this attribute. You can pass in as few or as many variables as you want, and they can be hard coded or PHP variables. Syntax is as follows and the spaces are optional:

• fvars=" name = value ; name = value "

fversion
You can specify what version of the flash player is required to play your movie. Defaults to 6.

id
You can give your movie a unique id on the page for scripting purposes.

loop
(true, false) – Specifies whether the movie repeats indefinitely or stops when it reaches the last frame. The default value is true if this attribute is omitted.

menu

• (true) displays the full menu, allowing the user a variety of options to enhance or control playback.
• (false) displays a menu that contains only the Settings option and the About Flash option.

noscript
Text or html content you would like to display to users browsing on a non-javascript browser or with javascript disabled.

play
(true, false) – Specifies whether the movie begins playing immediately on loading in the browser. The default is true.

quality
(low, high, autolow, autohigh, best ) – Specifies the playback quality of the Flash movie.

salign
(l, t, r, b, tl, tr, bl, br) – Specifies which edge or corner the movie is aligned to in the browser window while and cropping the remaining sides as needed.

scale
(showall, noborder, exactfit) – Dictates how the movie fills in the specified target area.

target
This is the ID of an element on your page that you want your flash movie to display within.

wmode
(window, opaque, transparent) – Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

You can find out more about Flash player attributes here

©MMVIII Michael Bester