Adding Flash to your WordPress Theme

Exclusive offer: get 50% off this eBook here
WordPress 2.8 Theme Design

WordPress 2.8 Theme Design — Save 50%

Create flexible, powerful, and professional themes for your WordPress blogs and web sites

£14.99    £7.50
by Tessa Blakeley Silver | December 2009 | MySQL Content Management Open Source PHP WordPress

In this article by Tessa Blakeley Silver, we will take a look at various ways to embed flash as part of your WordPress theme, and into your content.

Adobe Flash—it's come quite a long way since my first experience with it as a Macromedia product (version 2 in 1997). Yet still, it does not adhere to W3C standards, requires a plugin to view, and above all, is a pretty pricey proprietary product. So why is everyone so hot on using it? Love it or hate it, Flash is here to stay. It does have a few advantages that we'll take a quick look at.

The Flash player plugin does boast the highest saturation rate around (way above other media player plugins) and it now readily accommodates audio and video, as video sites such as You Tube take advantage of it. It's pretty easy to add and upgrade for all major browsers. The price may seem prohibitive at first, but after the initial purchase, additional upgrades are reasonably priced. Plus, many third-party software companies offer very cheap authoring tools that allow you to create animations and author content using the Flash player format. (In most cases, no one needs to know you're using the $50 version of Swish and not the $800 Flash CS3 to create your content.)

Above all, it can do so much more than just playing video and audio (like most plugins). You can create seriously rich and interactive content, even entire applications with it, and the best part is, no matter what you create with it, it is going to look and work exactly the same on all browsers and platforms. These are just a few of the reasons why so many developers chose to build content and applications for the Flash player.

Oh, and did I mention you can easily make awesome, visually slick, audio-filled stuff with it? Yeah, that's why your client wants you to put it in their site.

Flash in your theme

A commonly requested use of Flash is usually in the form of a snazzy header within the theme of the site, the idea being that various relevant and/or random photographs or designs load into the header with some supercool animation (and possibly audio) every time a page loads or a section changes.

I'm going to assume if you're using anything that requires the Flash player, you're pretty comfortable with generating content for it. So, we're not going to focus on any Flash timeline tricks or ActionScripting. We'll simply cover getting your Flash content into your WordPress theme.

For the most part, you can simply take the HTML object embed code that Flash (or other third-party tools) will generate for you and paste it into the header area of your WordPress index.php or header.php template file.

Handling users without Flash, older versions of Flash, and IE6 users

While the previous method is extremely clean and simple, it doesn't help all of your site's users in dealing with Flash. What about users who don't have Flash installed or have an older version that won't support your content? What about IE users who have the Active X restrain? You'll want your site and theme to gracefully handle users who do not have Flash (if you've used the overlay method, they'll simply see the CSS background image and probably not know anything is wrong!) or an older version of Flash that doesn't support the content you wish to display. This method lets you add in a line of text or a static image as an alternative, so people who don't have the plugin/correct version installed are either served up alternative content and they're none-the-wiser, or served up content that nicely explains that they need the plugin and directs them towards getting it. Most importantly, this method also nicely handles IE's ActiveX restrictions.

Is the ActiveX restriction still around?

In 2006, the IE browser upped its security, so users had to validate content that shows up in the Flash player (or any player) via Microsoft's ActiveX controls). Your Flash content starts to play, but there's a "grey outline" around the player area which may or may not mess up your design. If your content is interactive, then people will need to click to activate it. This is annoying, but the main workaround involved "injecting" controls and players via JavaScript. Essentially, you need to include your Flash content via a JavaScript include file. As of April 2008, this restriction was reverted, but only if your user has updated their browser; chances are, if they intent on still using IE6 or 7, they haven't done this update.

Regardless of whether you are concerned about ActiveX restrictions, using JavaScript to help you instantiate your Flash will greatly add to the ease of embedding content. It will also make sure that users of all versions or who need to install Flash are handled either by directing them to the proper Flash installation and/or letting them see an alternative version of the content.

swfObject

For a while, I used this standard swfObject method that was detailed in this great SitePoint article: http://www.sitepoint.com/article/activex-activationissue-ie.

A similar, robust version of this JavaScript is located on Google Code's AJAX API http://code.google.com/p/swfobject/wiki/hosted_library. You can download the script (it's very small) or you can link directly to the swfObject AJAX API URL:

<script type="text/javascript"
src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.
js"></script>

Downloaded or linked to the Google Code CDN, be sure to place this below your wp_head or any wp_enqueue_script calls in your < head > tags in your header.php template file or other head template file.

Adding a SWF to the template using swfObject

If you'd like to use the swfObject.js file and method, you can read the full documentation here: http://code.google.com/p/swfobject/wiki/documentation. But essentially, we're going to use the dynamic publishing option to include our SWF file.

  1. Using the SWF file included in this book's code packet, create a new directory in your theme called flash and place the SWF file in it. Then, create a div with alternative content and a script tag that includes the following JavaScript:
    <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120",
    "9.0.0");
    </script>
    ...
    <div id="myContent">
    <p>Alternative content</p>
    </div>
    ...
  2. Add this ID rule to your stylesheet (I placed it just below my other header and intHeader ID rules):
    #flashHold{
    float: right;
    margin-top: 12px;
    margin-right: 47px;
    }

As long as you take care to make sure the div is positioned correctly, the object embed code has the correct height and width of your Flash file, and you're not accidentally overwriting any parts of the theme that contain WordPress template tags or other valuable PHP code, you're good to go.

What's the Satay method?
It's a cleaner way to embed your Flash movies while still supporting web standards. Drew McLellan discusses its development in detail in this article: http://www.alistapart.com/articles/flashsatay. This method was fine on its own until IE6 decided to include its ActiveX security restriction. Nowadays, a modified embed method called the "nested-objects method": http://www.alistapart.com/articles/flashembedcagematch/ is used with the swfObject JavaScript we just covered.

Good developer's tip:
Even if you loathe IE (as lots of us as developers tend to), it is an "industry standard" browser and you have to work with it. I've found the Microsoft's IE blog ( http://blogs.msdn.com/ie/) extremely useful in keeping tabs on IE so that I can better develop CSS-based templates for it. While you're at it, go ahead and subscribe to the RSS feeds for Firefox ( http://developer.mozilla.org/devnews/), Safari ( http://developer.apple.com/internet/safari/), and your other favorite browsers. You'll be surprised at the insight you can glean, which can be extremely handy if you ever need to debug CSS or JavaScripts for one of those browsers.

jQuery Flash plugin

In the past year, as I've found myself making more and more use of jQuery, I've discovered and really liked Luke Lutman's jQuery Flash plugin. There is no CDN for this and it's not bundled with WordPress, so you'll need to download it and add it to your theme's js directory: ( http://jquery.lukelutman.com/plugins/flash/).

Embedding Flash files using the jQuery Flash plugin

As we're leveraging jQuery already, I find Luke's Flash plugin a little easier to deal with.

  1. Load the script under the wp_head.
  2. Place a div of alternative content; just the div of alternative content and nothing else!
  3. Write the jQuery script that will replace that content or show your alternative content for old/no Flash players.
  4. Code goes here.
  5. I think you see why I liked this so much more.

Passing Flash a WordPress variable

So now you've popped a nice Flash header into your theme. Here's a quick trick to make it all the more impressive. If you'd like to keep track of what page, post, or category your WordPress user has clicked on and display a relevant image or animation in the header, you can pass your Flash SWF file a variable from WordPress using PHP.

I've made a small and simple Flash movie that will fit right over the top-right of my internal page's header. I'd like my Flash header to display some extra text when the viewer selects a different "column" (a.k.a. category). In this case, the animation will play and display OpenSource Magazine: On The New Web underneath the open source logo when the user selects the On The New Web category.

More fun with CSS
If you look at the final theme package available from this title's URL on the Packt Publishing site, I've included the original ooflash-sample. FLA file. You'll notice the FLA has a standard white background. If you look at my header.php file, you'll notice that I've set my wmode parameter to transparent. This way, my animation is working with my CSS background. Rather than beef up my SWF's file size with another open source logo, I simply animate over it! Even if my animation "hangs" or never loads, the user's perception and experience of the page is not hampered. You can also use this trick as a "cheater's preloader". In your stylesheet, assign the div that holds your Flash object embed tags, a background image of an animated preloading GIF or some other image that indicates the user should expect something to load. The user will see this background image until your Flash file starts to play and covers it up. My favorite site to get and create custom loading GIFs is http://www.ajaxload.info/.

 

In your Flash authoring program, set up a series of animations or images that will load or play based on a variable set in the root timeline called catName. You'll pass this variable to your ActionScript. In my FLA example, if the catName variable does not equal On The New Web, then the main animation will play, but if the variable returns On The New Web, then the visibility of the movie clip containing the words OpenSource Magazine: On The New Web will be set to "true".

Now, let's get our PHP variable into our SWF file. In your object embed code where your swfs are called, be sure to add the following code:

If you plan on using the Satay embed method, your object embed will look like this:

...
<script type="text/javascript">
var flashvars = {
catName: "<?echo single_cat_title('');?>"
};
swfobject.embedSWF("<?php bloginfo('template_directory');?>/
flash/ooflash-sample.swf", "flashHold", "338", "150",
"8.0.0","expressInstall.swf", flashvars);
</script>
...

If you'd like to use jQuery Flash, your jQuery will look like this:

...
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#flashHold').flash(
{
src: '<?php bloginfo('template_directory');?>/flash/
ooflash-sample.swf',
width: 338,
height: 150,
flashvars: { catName: '<?echo single_cat_title('');?>' }
},
{ version: 8 }
);
});
</script>
...

Be sure to place the full path to your SWF file in the src and value parameters for the embed tags or jQuery src. Store your Flash file inside your themes directory and link to it directly, that is, src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="/mythemename/flas'); template tag. This will ensure that your SWF file loads properly.

Using this method every time someone loads a page or clicks on a link on your site that is within the On The New Web category, PHP will render the template tag as myswfname.swf?catName=On The New Web, or whatever the $single_cat_title(""); for that page is. So your Flash file's ActionScript is going to look for a variable called catName in the_root or _level0, and based on that value, do whatever you told it to do—call a function, go to a frame and animate; you can even name it.

For extra credit, you can play around with the other template tag variables such as the_author_meta or the_date(), for example, and load up special animations, images, or call functions based on them.

WordPress 2.8 Theme Design Create flexible, powerful, and professional themes for your WordPress blogs and web sites
Published: November 2009
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

Adding sIFR text with the jQuery Flash plugin

You can use a method called sIFR to control font layouts. You can find out all about directly implementing the core method here: http://www.mikeindustries.com/blog/sifr/.

If you looked at Matt's page, you'll notice that, getting sIFR into your site, can take quite a few steps. However, as we've already taken the time to include Luke's jQuery Flash Plugin, it's even easier!

  1. Download Luke's font file. If you have Flash 8 or higher, you can open the file and select the Dynamic Text field on the stage, then using the Properties setting in Flash, assign any font in your system and make sure that the font is "embedded" in the dynamic text field.

  2. Save and compile a SWF out to any name you'd like (I recommend placing the font's name in the file).
  3. Place this SWF in your flash directory in your theme's directory.
  4. Add the following jQuery Flash plugin code inside your header.php file's head tags (again, below your wp_head() tag). Remember, we're in No Conflict mode with jQuery, so be sure to change all variable instances of $ into jQuery.
    ...
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('h2').flash(
    {
    src: '<?php bloginfo('template_directory'); ?>/flash/
    jfr-Futura.swf',
    flashvars: {
    css: [
    '* { color: #FFFFFF; }',
    'a { color: #315a6c; text-decoration: none;
    }',
    'a:hover { text-decoration: underline; }'
    ].join(' ')
    }
    },
    { version: 7 },
    function(htmlOptions) {
    htmlOptions.flashvars.txt = this.innerHTML;
    this.innerHTML = '<div>'+this.innerHTML+'</div>';
    var $alt = jQuery(this.firstChild);
    htmlOptions.height = $alt.height();
    htmlOptions.width = $alt.width();
    $alt.addClass('alt');
    jQuery(this)
    .addClass('flash-replaced')
    .prepend(jQuery.fn.flash.transform(htmlOptions));
    }
    );
    });
    </script>
  5. Make sure to add this CSS rule to your stylesheet as it hides the original text:
    .flash-replaced .alt {
    display: block;
    height: 0;
    position: absolute;
    overflow: hidden;
    width: 0;
    }
  6. The resulting shot shows the Futura font in our site, replacing h2 headers. The headers are fully selectable and gracefully degrade back to whatever is in the stylesheet if Flash player 5 or newer is not available.

    The Flash file sizes the fonts based on your CSS size. You may need to adjust your font-size properties in your CSS sheet.

Flash in a WordPress post or page

For Flash content that's going to go into a specific WordPress post or page, you'll need to be sure to switch over to the HTML view (or Code view in 2.3.x) and enter your object embed tag and swfobject register code or jQuery Flash plugin code into the post or page where you'd like it to appear within your content. In the next screenshot, I've added the direct embed object's embed tags for a You Tube video. (You Tube uses the Flash player for all their video content.)

Adding You Tube video to a WordPress post

You r first option is pretty straightforward. Even if you've linked to the jQuery Flash plugin or swfObject.js, you can use the embed code that You Tube provides by selecting it from the right-hand side of the You Tube site.

The markup looks something like this in the HTML view of your post:

As of version 2.5: The Code view became the HTML view. As of WordPress 2.5 it is even easier to add media—images, video, and audio. Just select the appropriate media type from the left-hand side of the editor window.

If you're using an older version of WordPress, just be careful. The first time you enter custom HTML code into a post or page and hit Save, the post will be saved and will render your new code just fine. However, if you then edit that post, the custom code will look OK, as you edit it, but then, for some reason, it will be changed a little and might not display properly once you hit Save. (I believe it is because the WordPress editor attempts to "fix" any code it doesn't recognize.) WordPress 2.5 seems to fix this issue and I have no problems editing and re-editing posts with custom HTML code tags. (The editor works a lot better with the Safari browser too.)

 

Yes, of course there's a plugin
This won't help you too much if you're planning on using Flash in your theme, but for Flash in your WordPress posts and pages, Jim Penaloza has written a great little plugin using the swfObject method. You can find out more about it here: http://wordpress.org/extend/plugins/wp-swfobject/.

Want more Flash?
If you want to add more interesting Flash to your site, there's a host of Flash-based WordPress plugins that allow you to easily embed Flash content and features into your WordPress posts and pages. Check out the plugins directory at http://wordpress.org/extend/plugins/search.php?q=Flash.

Summary

In this article, we've learned how to place flash content into your theme as part of your theme's design, as well as getting it quickly and painlessly into your WordPress content using a variety of embed methods, most notably the jQuery Flash plugin.

If you have read this article you may be interested to view :

WordPress 2.8 Theme Design Create flexible, powerful, and professional themes for your WordPress blogs and web sites
Published: November 2009
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

About the Author :


Tessa Blakeley Silver

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

Books From Packt


Books from Packt

MediaWiki 1.1 Beginner's Guide
MediaWiki 1.1 Beginner's Guide

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

WordPress MU 2.8: Beginner's Guide
WordPress MU 2.8: Beginner's Guide

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

WordPress 2.8 E-Commerce
WordPress 2.8 E-Commerce

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

Drupal 6 Content Administration
Drupal 6 Content Administration

 


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software