Okay, here’s another tip.
For those of you who’ve struggled with getting Camtasia SWF files into your WordPress pages, stop searching. You’ve found the right page.
Let me just say, I’ve struggled with it and spent several hours trying to figure this out a couple of days ago, so with any luck this will help you save *a lot* of time (as well as hassle with trying to use various plugins like Kimili Flash Embed to do the job!).
Things you will need:
- HeadSpace2 from UrbanGiraffe.com
- Sniplets from UrbanGiraffe.com (although a similar effect can be achieved using Adsense Deluxe or anything else that allows you to put bits of code into your pages. I’d still recommend Sniplets though!).
- Create your swishy Camtasia video presentation and make it nice. I’m using Camtasia 4, not sure if the code for other versions is different or not.
- Produce it as an SWF file and output it.
- Upload it to a directory of your choice on your server.
- Make a note of the path and directory to the files (very important!)
WordPress Admin (assumes you’ve installed the HeadSpace and Sniplet’s plugin):
- Go to Manage / Sniplets (or whatever else you’re using to embed this)
- Add a new sniplet and give it a name.
- In your favourite HTML editor, open up the *.html file that was created when the files were produced.
- Copy and the code from the <body id=”cs_flashBody” > to the closing </body> tag.
Things to look out for here are the first line that says new SWFObject – usually there is no path here to /video/. I’ve added this to the first argument of the function to look like this:
var fo = new SWFObject( "/video/NLPWorld-CaseStudy_controller.swf", "NLPWorld-CaseStudy_controller.swf", "640", "447", "7", "#FFFFFF", false, "best" );
The csConfigFile also need to have the /video/ path added as does the csPreloader.
fo.addVariable( "csConfigFile", "/video/NLPWorld-CaseStudy_config.xml" );
fo.addVariable( "csPreloader" , "/video/NLPWorld-CaseStudy_preload.swf" );
Usually the id=”cs_flashBody” attribute is contained in a <body> tag. You will need to change this to a <div> tag instead so that you don’t mess up your page.
Writing The Page/Post
- Go to Write Page/Post
- Add the Sniplet name (usually something like [sniplet the-name-you-put-in-when-you-added-the-code] ).
- With HeadSpace installed, scroll down and use the “Advanced” features and
- Add the-path-to-your-SWF-files/swfobject.js (this is one of the uploaded files)
- Add the-path-to-your-SWF-files/whatever-the-production-was-called.js (this is one of the uploaded files too!)
- You will need to open the Config XML file and make 1 amend. In this case it is called “NLPWorld-CaseStudy_config.xml” (see above). You can either do this before you upload or using your favourite HTML editor (personally, I use the editor so I actually edit this live on the site).
- In the file, look for a tag with your production file name in it. In this case I had to find <uri>NLPWorld-CaseStudy.swf</uri>
- Add the path to the file in front of the file name so it looks like this:
- Save the file.
Go back to your site and publish the Post/Page and view it. It should now work.
…Unless something went wrong.
And you didn’t do something right like put the right file paths in.
Or made a typo.
Trust me – it’s easy to do. I did it (and I’m not ashamed to admit it), but I forgot to put a forward slash / in front of the Config path – it makes all of the difference between it working and not working!
If you want to see this in action, I finally managed to do it with the Semi-Static WordPress Homepage Case Study video I mentioned in my earlier post. It should now work for Mac’s as it’s a SWF file and not a WMV (which I originally had it as):
Lovely isn’t it? Camtasia in a WP Blog… if only someone would build a plugin that would do this… looks like it might be another job for me and John. It’s going on the to-do list.
I hope this is useful and helps people out a bit.