Embedding Flash swf files in the WordPress is something which all designers and developers have to do to showcase their work. And since WordPress is now being used extensively not just for blogging but also as a CMS, there are more and more people showing their Flash portfolio in WordPress pages.
Also, usually Flash files canvas is wider than normal content area width available in most WordPress themes. There’s another problem in embedding flash swf files directly in posts and that is the background music. Because you might want to embed more than one swf with music in one page and they would all create a fine mess playing at once, besides not every one likes if music starts playing on opening any web page (at least I don’t, despite being flash developer myself). So due to number of reasons, embedding flash content into posts has been a thorn in designers’ and developers’ side.
Ideally, designers would want to show the flash swf file in a popup window a la Lightbox plugin on a link or image click. This will make quite bigger canvas size flash movies view-able even with a background music. Since user would have launched it himself, he would not mind some background music.
Being a designer and Flash developer myself, I needed to add flash content routinely in my posts and portfolio pages. I tried many ways to resolve this issue and finally prettyPhoto came to my rescue. prettyPhoto is a jQuery lightbox clone and not only just does it support images, it also support videos, YouTube, iframes and ajax and most importantly Flash. It’s a full blown media lightbox.
Flash Lightbox Popup Sample
Click on the flash icon or the text link to launch flash swf in prettyPhoto’s Lightbox like popup window.
And here’s the code:
<a title="Flash 10 demo" href="path-to-your/flash.swf?width=792&height=294" rel="prettyPhoto[flash]"><img src="images/flash-icon.jpg" alt="" width="128" height="128" /> Launch Lightbox Flash</a> or <a title="Flash 10 demo" href="path-to-your/flash.swf?width=792&height=294" rel="lightbox[flash]"><img src="images/flash-icon.jpg" alt="" width="128" height="128" /> Launch Lightbox Flash</a>
Hope that helps.