How to embed Camtasia movies in WordPress with Kimili Flash Embed

Having spent several hours trawling through Google searching for the answer, I eventually worked out how to display Camtasia Studio movies in WordPress blogs, using the excellent Kimili Flash Embed plugin. Since I’ll probably forget how by the next time I need to embed a Camtasia movie, I thought it would be useful to write it all down in the form of this tutorial.

I am a recent convert to Camtasia, and although it’s not cheap, it’s excellent value for money if you need to create screencasts, and video tutorials. However, displaying the resulting movie on a WordPress site is not so straightforward. Essentially, there are two choices:

• Easy option: Upload your finished movie to Youtube, or equivalent.
• Trickier option: Self-host the movie, ie upload the movie to your server, and work out how to embed the movie in a Post or Page. But fear not! This is exactly what we will be covering in this tutorial.

Easy option: use Youtube

Produce your Camtasia Studio video using Camtasia’s built-in Production Wizard, choose the Youtube preset (tweak as necessary), render the movie, then upload your movie to Youtube. All you need to do now is grab the embed code from your movie’s page on Youtube, and paste it directly into your Post in the Post Editor. Easy.

Trickier option: self-host the movie

Use Kimili Flash Embed Plugin for WordPress

Download, install and activate the Kimili Flash Embed plugin for WordPress. This is the tool which will handle the embedding of the movie in your Post or Page.

Produce your Camtasia movie

Open up your Camtasia Project file and use the Production Wizard to select the Flash option. Follow the various dialogue screens, select the various options you need, and render your movie. Once this is done you will have a collection of files which have been created during the rendering process:

• mymovie_controller.swf
• mymovie.mp4
• mymovie.html (if you selected this option)
• expressInstall.swf
• ProductionInfo.xml
• FirstFrame.png
• swfobject.js

In fact, we only need 3 of these:

• mymovie_controller.swf – the Flash player which will display the movie
• mymovie.mp4 – the actual movie
• FirstFrame.png – an image to show when the movie isn’t playing

Upload the movie files to your server

Upload these three files to a new folder in your wp-content/uploads/ directory, or anywhere else on your server, for that matter, making sure that all three files reside in the same folder.

Make a note of the path to this folder. For demonstration purposes, let’s assume that these files now reside in the myvideo folder here:

http://www.mydomain.com/wp-content/uploads/myvideo/

Add the movie to a Post using Kimili Flash Embed

Go back into WordPress and write a Post. You will notice that Kimili has added a button to the Post Editor toolbar. Click this button to launch the Kimili Flash Embed options popup box.

Configuring the Kimili options popup

Click the “More” button in the Kimili options popup so that you see all the options, and enter the information as follows:

• Flash (.swf): Enter the absolute URL to the SWF file, in our example:

  http://www.mydomain.com/wp-content/uploads/myvideo/myvideo_controller.swf

• Dimensions: Enter the width and height of the movie. Watch out! The Camtasia Express flash player adds an extra 18px to the original movie’s height. Therefore, if you recorded the Camtasia capture at 600 x 400, the .swf file is now 600 x 418, which will be the dimensions to enter here. (Tip: If the quality of the movie looks bad after it has been embedded in your site, check this height setting.)
• base: Enter the full URL to the folder which contains the three files mentioned earlier. And don’t forget the slash at the end of the URL! For example:

  http://www.mydomain.com/wp-content/uploads/myvideo/

  This base parameter is very important and ensures that Flash can find the FirstFrame.png and mymovie.mp4 files which are used by mymovie.swf.
• fvars: This is where you enter the flashvars parameters. Depending on your Camtasia Production settings, these flashvars can vary from movie to movie. The easiest way to find these is to open up the mymovie.html file mentioned earlier (which we don’t need to upload – it’s just a useful source of info) and look for a piece of code like this:

  <param name="flashvars" value="autostart=false&thumb=FirstFrame.png&thumbscale=45&color=0x1A1A1A,0x1A1A1A" />

  Rather unhelpfully, because Kimili Flash Embed uses javascript behind the scenes to do the embedding, we need to enter this flashvars information using a syntax understood by javascript. So, this flashvars code in the html, mentioned above:

  <param name="flashvars" value="autostart=false&thumb=FirstFrame.png&thumbscale=45&color=0x1A1A1A,0x1A1A1A" />

  …needs to be entered like this in the Kimili options popup:

  autostart=false;thumb=FirstFrame.png;thumbscale=45;color=0x1A1A1A,0x1A1A1A

  As you can see, the essential difference is that we have only used the code within the value=”…” statement, and replaced the ampersand separator with a semi-colon.
• Other settings: Frankly, you can leave these alone – unless you especially need to set specific parameters – as all of these parameters are given defaults by the Kimili plugin, defined in the plugin’s Settings page.

Generate the Kimili code and Publish the Post

Click the Generate button. The Kimili options popup will disappear and you should now see code, something like this, in the Post Editor (HTML view):

[kml_flashembed publishmethod="static" fversion="8.0.0" movie="http://www.mydomain.com/wp-content/uploads/myvideo/myvideo_controller.swf" width="600" height="418" targetclass="flashmovie" loop="false" quality="best" allowfullscreen="true" fvars="autostart=false;thumb=FirstFrame.png;thumbscale=45;color=0x1A1A1A,0x1A1A1A" base="http://www.mydomain.com/wp-content/uploads/myvideo/"]
<p><a href="http://adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
[/kml_flashembed]

Double check that the URLs in this code are correct. If so, Publish the Post, and your movie should now appear on your site.

Troubleshooting

If, after all this, your movie doesn’t appear in your Post, the most likely culprits are:

• Incorrect URL to the …_controller.swf file (Use absolute URLS, including the http://)
• Incorrect or missing base parameter. If you want the FirstFrame.png to show, you must specify a base parameter in the Kimili options popup, and use an absolute URL including the trailing slash.
• Check that you have actually uploaded, to your server, the three files mentioned earlier.
• Finally, it is possible that Kimili conflicts with another plugin. To eliminate this, deactivate other plugins to find the culprit.

And finally…

Hopefully, this tutorial has been useful.

If and when I get the time, I shall write a follow-up tutorial on displaying Camtasia movies in a lightbox, using the Shadowbox Plugin.

Happy embedding!