Kimili Flash Embed

The Kimili Flash Embed is a plugin for popular open source blogging systems that allows you to easily place Flash movies on your site. Built upon Geoff Stearn’s SWFObject javascript code, it is standards compliant, search engine friendly, highly flexible and full featured, as well as easy to use.

What Systems Does It Work With?

Kimili Flash Embed comes in 2 flavors:

What’s New

Current Version: 1.4.3
Release Date: September 12, 2008

Version 1.4.3 is a bug fix release to 1.4.x which includes the following:

Corrects a bug with how fvars values are rendered in RSS feeds
Improved clean url support for feeds – a Textpattern specific change.

Previous Version Changes

Version 1.4

Added full screen support for full Flash Player 9 compatibility – Finally!
Fixes a bug when applying percentage based widths and heights – Now the widths and heights get passed correctly to the SWFObject script.

Version 1.3.x

Updated SWFObject Javascript to latest codebase – SWFObject 1.5 is included
Super Simple Express Install – Getting a user to upgrade their flash player almost couldn’t get any easier.
Cleaned Up Code – Declared some undeclared variables.

Textpattern Specific Changes in 1.3.x:

Fixed issue with IE7 – required the following:
- Embedded SWFObject.js reverted back to 1.3d in order to kill a bizzare JS bug in IE7 (grrrrrr….)
- Implemented workaround for IE7 Javascript bug by adding src attribute to <txp:kml_flashembed_js />
- SWFObject version 1.5 included as external JS.
Added xisrc attribute – Allows you to take advantage of the simplified Express Install functionality in SWFObject 1.5
KFE works in debug mode – Now the plugin should throw no errors if you have your production status set for debug

Version 1.2

Added Flash movies to XML feeds. – Now your SWFs are properly embedded in your RSS and Atom feeds, which should validate.
Added a “targetclass” attribute – This allows you to define a class name for the element which the SWF will be rendered within.
Improved FVARS functionality – Now you can pass in URLs with query strings and JSON objects as parameter values.
Updated JS to latest codebase. – Geoff keeps refining his code, so the latest is included here – SWFObject 1.4.4.

Version 1.2 – Wordpress specific

Improved compatibility with other plugins. – There were a few clashes with other plugins – this release should take care of them all.
Removed the need to turn off GZIP compression.- finally, this annoyance is gone.
KFE creates valid HTML – No more nesting of a <div> within a <p>.
New Toolbar button – Added Rich Text Editor Toolbar button to quickly insert KFE tags in a post. Works in WP 2.1, too!

Version 1.1

Easy embedding of multiple instances of the same SWF – A number of people asked about this. Say you have a FLV player – a single .SWF file that you feed your FLVs into. Now say you have 3 different posts on a page that use that FLV player to play 3 different movies. With previous versions of KFE, only one of them would show up unless you wrote some extra code into your posts to prevent that from happening. The workaround for that isn’t well documented and is more trouble than it needs to be. Now KFE does it for you. Just put your kml_flashembed tags in, and KFE does the rest for you.
Removed FlashObject code from RSS and Atom feeds. – Older versions of KFE broke RSS feed validation by including unnecessary javascript into your feeds. No longer – the Javascript and any references to your flash movies are now removed from your feeds.
Added base attribute – You can now define a base URL for any relative paths in your SWFs to use as a point of reference.
Updated JS to latest codebase. – Includes FlashObject 1.3d.

Version 1.0

Express Install Functionality – Detect which version of the Flash player a visitor to your site has and give them the option to seamlessly upgrade their player if it doesn’t meet the minimum requirements of your Flash content.
More Flexible Flash Variables – Pass arbitrary Javascript or PHP to pass values into your SWF.
Wider Browser Support – Your Flash content should now display in nearly any Javascript capable browser, back to IE4 and NS4. In the event that your Flash content doesn’t display, your visitors will be presented with any alternate content that you provide.
Improved Compatibility – Updated compatibility with newer versions of Textpattern and Wordpress.

Basic Usage

For installation and basic usage instructions, refer to either the KFE for Wordpress or KFE for Textpattern pages, whichever is applicable to you.

Available Attributes

All tag attributes should be lowercase and double quoted.

Attributes for `<txp:kml_flashembed_js />`—Textpattern Only

The only available attribute for the <txp:kml_flashembed_js /> tag is:

SRC
The path to an external swfobject.js Javascript file. Including this attribute puts the KFE plugin into Current SWFObject Mode

Attributes for `[kml_flashembed /]`

The available attributes for the kml_flashembed tag for both Wordpress and Textpattern (except where noted otherwise) are:

There only 3 attributes required in a KFE tag: movie, width and height. All of the available attributes for the KFE tag should be lowercase and double quoted. They 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 width of the flash movie. You can specify in pixels using just a number or percentage.

ALLOWFULLSCREEN
(true|false) Grants access for a Flash movie to enter full screen mode when using Flash Player 9. Defaults to false.

ALLOWSCRIPTACCESS
(always or never) Controls the ability to perform outbound scripting through use of FSCommand actions or getURL actions from within your SWF. If unspecified, the Flash Player defaults to “always”.

ALTTEXT (deprecated)
The text or html you want to display if the required flash player is not found. This attribute is ignored if target is used.

BASE (As of KFE 1.1)
( . or base directory or URL) – Specifies the base directory or URL used to resolve all relative path statements in the Flash Player movie. This attribute is helpful when your Flash Player movies are kept in a different directory from your other files.

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

DETECTKEY
This is the url variable name the script will look for when bypassing the detection. Defaults to ‘detectflash’. For example: To bypass the Flash detection and simply write the Flash movie to the page, you could add ?detectflash=false to the url of the document containing the Flash movie.

FID (As of v. 0.4. Was ID in previous versions of KFE)
Use this attribute to give your movie a unique id on the page for scripting purposes.

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, separating name/value pairs with a semicolon. Syntax is as follows:

fvars=" name = value ; name = value "

In addition to hard coded values, you can also pass in arbitrary Javascript or PHP code, like such:

Javascript – href = ${document.location.href;}
PHP – date = ?{date('F j, Y');}

If you’re using Textpattern, you also have access to many TXP environmental variables, as well (the full list is in the the plugin help section).

Textpattern – section = $s

These can be strung together in any order inside the fvars attribute:

fvars=" href = ${document.location.href;} ; date = ?{date('F j, Y');} ; name = Johnny Bravo "

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

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.

REDIRECTURL
If you wish to redirect users who don’t have the correct Flash Player version, use this parameter and they will be redirected. Ignored if using useexpressinstall.

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.

TARGETCLASS
This is the class name of the element on your page that you want your flash movie to display within – helpful for CSS Styling. Defaults to “flashmovie”.

USEEXPRESSINSTALL
(true, false) – Use this if you want to invoke the Flash Player Express Install functionality. This gives users the option to easily update their Flash Player if it doesn’t meet the required version without leaving your site. Also see xiredirecturl and xiswf.

Textpattern Users – useexpressinstall is only available in Legacy SWFObject Mode. In order to use this functionality, you have to include the bundled actionscript file in the first frame of your SWF. See below for more information.

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

XIREDIRECTURL
When using the Express Install functionality, use this attribute to specify an alternate URL to redirect users who complete the Express Install upgrade. Default behavior returns a user to the page that invoked the Express Install. Note – The URL you define here must be a complete URL, including http://www.yourdomain.com/

XISWF – Texpattern Only
Only available in Current SWFObject Mode. When using the Express Install functionality, use this attribute to specify the location of the expressinstall.swf that will get called should a user not have a current enough Flash Player installed.

You can find out more about Flash player attributes at here

Using Flash Player Express Install

If you want to give visitors to your site the option to upgrade their Flash Player to the latest version as quickly and seamlessly as possible, you can now use the Flash Player’s Express Install functionality. Since the implementation of Express Install differs whether you’re using Wordpress or Textpattern, please see the specific usage instructions pertinent to your setup:

FAQs

My Flash movie uses an XML file to populate its content and it’s not working. What’s going on?

If you’re using the fvars attribute to pass your Flash movie a path to an external file, be it XML or something else, make sure the path you’re feeding it is absolute, not relative. This has to do with how Flash handles relative pathing. Flash movies will see a relative path from the HTML page that the movie is embedded on, not from the SWF file itself, so in most cases it is best just to use absolute paths.

There’s also a new option as of KFE version 1.1. You can keep your paths relative, but use the base attribute to define a base URL that the relative paths will use as their point of reference.

How do I center or add some space around Flash movies on my page?

This is easy to do using a bit of CSS. By default, KFE renders Flash movies within a <div> element that has a class name of “flashmovie”. Utilizing that, you can add a CSS definition like this:

div.flashmovie {
margin: 1em auto;
}

That will add a 1 em margin on the top and bottom as well as center of all the flash movies on your site that you’ve inserted using KFE. Also, remember that if you can apply a different class name to a certain Flash movies using the targetclass attribute. This is useful if you want to, for example, use a Flash movie in the header on your site and don’t want the default margins you’ve specified in your CSS to be applied to it.

How do I make my Flash movie clickable?

If you want somebody to be able to click on your Flash movie and have it work as a link, then you actually have to build that link, or clickable area into your SWF. KFE cannot “wrap” your SWF with a link.

How do I open a new window when someone clicks on my Flash movie?

First, re-read the previous question.

Now, if you still want to open a new window from your Flash movie, be aware that it’s a bad idea because it probably won’t work. You’d have to embed a window.open() javascript call in your movie, but the problem is that when you do that and someone clicks on it, any decent browser with a popup blocker (most, these days) will not allow it. Fact is, because the Flash player is a plugin, browsers don’t know whether a javascript call which originates from within a flash movie was triggered by user interaction or programatically. Since the latter can easily be used with malicious intent (if you’ve ever see a Windows machine infected with spyware, you know what I’m talking about), browsers simply don’t allow it. Don’t do it.

Does this thing work with FLV files?

Sure it does. Just be sure to to set the movie attribute to point to the SWF file that Flash’s FLV components generate as the playback controls, and pass the reference to your FLV or the configuration XML file (with ABSOLUTE paths, of course) in the fvars attribute.

I’d like to use KFE to put a Flash header in my Wordpress site. How do I do it?

~~Unfortunately, the way Wordpress processes the plugin doesn’t allow you to use a kml_flashembed tag in your page templates. It only works in article posts.~~ Not any more. Starting with KFE version 1.1, you can put a kml_flashembed tag anywhere on your site. Posts, page templates, in headers, on sidebars—anywhere.

How about for my Textpattern site?

Sure! Just use a kml_flashembed tag in your page template and you’re good to go.

Help! I installed KFE on my Wordpress site and everything blew up! What do I do?

The first step is to check for incompatibilities with another plugin. Leaving KFE active, disable other plugins you have active one at a time, each time checking to see if your site is still blowing up. The moment you see that it doesn’t, the last plugin you disabled is the culprit – let me know about it.

Of course, this assumes that you are using a stock installation of Wordpress, which is the only type of installation I’ve tested this plugin on. If you’ve modified or hacked the core PHP files in any way, I cannot guarantee any functionality, nor offer you support on how to fix things when they go awry. Sorry.

I’m seeing the code spit out on the pages of my Wordpress site. What’s going on?

You surely have GZIP article compression turned on in your Wordpress admin (under Options -> Reading). This incompatibility only exists with KFE 1.1 and came to light after the plugin was released. It has been fixed as of KFE v. 1.2, so if you’re still having this problem, upgrade your KFE.

I’m still having trouble getting KFE to work in my Wordpress site. Can you show me what to do?

Brooks Andrus has put together a helpful screencast that walks through process of installing an using the plugin.

License

To keep things on good terms with both the Textpattern and Wordpress GNU General Public Licenses, as well as Textpattern’s upcoming shift back to BSD, Kimili Flash Embed is now distributed under the terms and conditions of the BSD License. This basically means that you can do almost whatever you please with the code, so long as you retain the copyright notice. The only stipulation to that is if you want to use this code to endorse or promote another product, contact me first.

Support

Support for KFE is neither expressed nor implied. This is, after all, a free product. Ninety percent of support questions I receive are answered in the FAQs above, so if you’re having problems, please refer to them.

If you do find any genuine bugs or have any suggestions that could improve future versions of KFE, by all means, contact me.