Flash Showing Underneath Dropdowns

Ever want to use dropdowns, but you can’t because a Flash animation underneath the dropdowns shows through? We had this problem on multiple occasions. There is a simple solution. Make the Flash transparent by setting wmode=transparent in the code. Works every time.

I’m not sure if this will work with sIFR or not, or if sIFR even causes this problem, but I would recommend trying that first if you are stuck. You can set wmode to transparent in sIFR by adding wmode:"transparent" to the sIFR parameters.

Turning Off Underlying Headlines in sIFR

I highly recommend adding sIFR to your web site, if it is appropriate. I have to admit for a long time I didn’t like it. But, sometimes adding nice looking typography to your site can really make it pop in a way that you can only do with Flash or images. So, the more I use sIFR, the more I like it, and the more I use it, the more I understand how it works. If you don’t know what sIFR is or what it does, please check out Mike Davidson’s sIFR site.

sIFR works by using Javascript and the Flash player to replace headlines in your web page with nicely styled fonts in Flash. If you are a novice to sIFR, there are certain tricks to using it that can greatly enhance your implementation. I won’t go into all of them here, but I will talk about turning off your underlying headlines in sIFR.

When you have sIFR installed on your site, sometimes you tend to notice the unstyled underlying text show up briefly before being replaced by Flash. If you have this problem, you will want to eliminate it to get the best user experience possible. It has a kind of jarring effect when you see the font change suddenly like that, so it is best to avoid it.

The creators have provided a way to turn this off so that you will only see the Flash fonts load when the page loads. You can do this by adding a stylesheet to your header called “sIFR-screen.css.” If you do this, then your headlines should not show by default. This works by creating default styles for your headlines with the class “.sIFR-hasFlash.” All headlines are then set to “hidden” so they will not be displayed if you have javascript and Flash 7 installed. The genius is that is you don’t have javascript or Flash 7 running, the normal unstyled headlines will still be visible.

However, you may want to modify the code if you are only replacing a certain group of headlines, and not all of them at once. You can do this by adding an id to your headers and then adding the id to the header style in your sIFR stylesheet.

I need to warn you here, not to remove the “hasFlash” class from your header styles. If you do this, the headlines will not show up when javascript is not running or you have a version lower than Flash 7. This may be rare, but you can modify the sIFR script to work only with Flash 8, like I did here. I made this mistake, which is how I know you need it.

So in closing, make sure you turn off the underlying headlines when using sIFR. Also, be sure to test your work with Javascript turned off, to make sure those users who have javascript turned off or don’t have the right Flash player can still see your headlines.

Testing Flash Player Compatibility Across Browsers

Today, we were informed by a client that one of the sites we had been working on was not working properly. When the client went to the site, they could see the site, but it was behind a transparent white screen. We had no information on what platform or browser the client was using, but I assumed it was a compatibility issue with the Flash player.

On this particular site, it was using SlideShowPro, UFO and sIFR, all on the home page. Chris noticed that one of the slideshows was only compatible with Flash version 8. He thought if we downgraded it to 7, that would solve the issue. I agreed, but I wanted to test it first to see if we could reproduce the problem. I thought that this would help us deal with Flash player compatibility issues in the future.

I decided to look for a way to test different versions of the Flash plugin. I found the archived Flash player download page on Adobe’s web site. I recommend bookmarking this page. You will need to download these plugins if you want to test different Flash player versions in your browsers. I had a problem though. I could only get the players to install in Firefox. I couldn’t install any of those plugins in Internet Explorer.

So I installed Flash player version 7 in Firefox. When I viewed the site, it was obvious that was causing the problem. Don’t ask me how the client had Flash player version 7 still on their browser. That seems to be about par for the course around here. Anyway, downgrading the slideshow to version 7 fixed the problem, and the site is now compatible with Flash 7. Voila!

In researching this problem though, I came across another neat little tool, called Plugin Switcher, that I recommend you try out. Right now, it is only compatible with Windows. But, it allowed me to install as many versions of the Flash plugin as I wanted and switch between them on the fly.

Plugin Switcher claims to let you switch between Active X plugins also but I could not activate that feature. As a result, it only worked in Firefox for me, however it did that perfectly. There is a free version and a paid version. I only tried the free version. I contacted the developer to find out how much the full version is since most of the site is in German. If I ever try out the full version, I will post again, and let you know what I think.

Control Letter Spacing Using sIFR

I am using sIFR on a project I am currently working on. The design of the site I am building required the letters being rendered in sIFR to be spaced out. I tried to change letter spacing in the default version of sIFR 2.0, but I could not get it to work.

So, I did a search on Google for “spacing letters in sIFR” and found an excellent hack that allows you to change the default spacing of the letters. This hack can be found here, http://forum.textdrive.com/viewtopic.php?pid=102296.

The current version of sIFR (version 2) doesn’t allow for spacing of the letters because it is only requires Flash version 6. However, Flash version 8 does allow for the spacing of letters. So the fix for this basically consists of 4 steps.

  1. First add a line of code to the dont_customize_me.as actionscript file.
  2. Edit the sifr.js file to check for version 8 instead of 6.
  3. Add the letter spacing code to the sFlashVars parameter in the replacement calls.
  4. Save the swf file to be compatible with Flash 8 and actionscript 2.

That is it. It worked perfectly. See the example linked to above for the full instructions.