Jing + FTP + Flash = One Killer Blogging Tool

Jing is absolutely brilliant when it comes to recording and sharing media hosted on Screencast.com, but its ftp output enables some incredibly powerful, customized experiences. Unfortunately, ftp support is extremely rough around the edges making it not all that accessible for the layman. This post aims to change all that by providing a complete example implementation of customized ftp output.

First we need to take care of the basics and configure Jing’s ftp server preferences and ftp code templates (Jing–>More–>Preferences–>FTP).

You can think of the code templates as providing a blueprint of where files will exist on the server. Jing uses these blueprints to create the urls and embed code it returns to your clipboard when you push the ’share’ or ‘embed’ buttons after recording. The blueprints use several tokens which allow Jing to insert the correct file name and dimensions in each url or embed phrase.

Now you might be looking at the embed code in the image above and thinking it looks a bit strange — that’s because it is. I happen to use the Kimili plugin for WordPress to embed Flash content within my blog and it uses a special syntax. Notice that Jing doesn’t care, you can create pretty much any specialized syntax you want . No worries though, here’s some ‘actual’ embed code like you might get from YouTube or Screencast.com.

Whew, we’re finally through the basic configuration, but there are a few pieces missing. You see, in the embed code template example above an additional file not provided by Jing is referenced which is an absolute must when embedding videos in your blogs. I call this additional file a “click to play” loader. Its a small swf file (8 KB) which is embedded in your blog (any web page really) that serves as a placeholder for your Jing video.

Why is this important? Well, embedding Jing videos directly in your blog means that every time someone visits your page that video (often MB’s of data) will be loaded up, regardless of whether the visitor actually watches the video. That’s not very nice for visitors or for your bandwidth, so instead we’ll embed a small placeholder with a ‘play’ button which, when clicked, will load the video. The placeholder takes up the same space and position as the actual video so your page layout will still look fine and the play button clues people in to the fact there’s a video sitting there waiting for them.

Here’s a link to a zip file containing the ‘click to play’ swf file. You’ll need to download it, unzip it, and then use an ftp client to upload the swf to the directory where your Jing videos are being uploaded. Now you just need to configure your embed code template (see examples above) and you’re all set. Blogging Jing videos is now just a matter of recording your video, hitting the ‘embed’ button and pasting the returned embed code into your blog’s rich text editor.

Here’s an example of the results.

Aren’t happy with the provided ‘click to play’ swf and have moderate Flash skills? You’re in luck–I’m making the source code available so you have complete control over the embed experience within your blog / site.

Hope this helps. Let me know you’re taking advantage or this or another custom Jing FTP solution.