ClickToFlash: Visible edition

2009-01-27 23:03:05 UTC

The WebKit plug-in ClickToFlash has been an instant hit over the past 24 hours. The original version was on a Google Code project, but that project is now closed to the public. Before the Google Code project went 0600, Jonathan Rentzsch set up a fork on GitHub to gather changes submitted by Gus Mueller and Jean-Fran├žois Roy.

Unfortunately, both the original and Rentzsch’s current version have one immediately-noticeable deficiency: In place of the Flash movie, the plug-in displays only a blank gray gradient background. It’s easy to think that there’s simply nothing there, or that the page is not done loading.

I decided to solve the problem myself. I forked the fork and posted my own version (along with a binary installer).

My interpretation of the plug-in adds three features:

  1. Swap in the Flash movie on mouse-up, not mouse-down. This gives you a chance to back out by moving the mouse out of the view.
  2. Invert the gradient when the mouse is down. This makes the view look (as well as act) more like a button.
  3. Fixes the blank-background problem. A number of people have done this in other forks, but I think my solution is best:

My click-to-play symbol is a play symbol (right-pointing triangle) with a florin (ƒ), emulating the Flash logo, cut out of it.

The symbol's gradient inverts along with the background gradient.

My solution has two advantages:

  • Its drawing is fully vector-based, which means that that it will scale to fit the would-be movie’s area and will look good no matter how big the would-be movie is.
  • I designed the implementation so that you can replace it with different drawing code if you’d prefer a different click-to-play symbol.

The original, Jonathan Rentzsch’s fork, and my fork are all under the MIT license. And, of course, he is welcome to pull my changes upstream.

5 Responses to “ClickToFlash: Visible edition”

  1. Evan Schoenberg Says:

    Excellent – thanks. I’ve been liking clicktoflash and hating that gray gradient; this is a solid improvment.

  2. Jordan Says:

    Great changes.

  3. rentzsch Says:

    Sorry, but I’m in lust with the iPod-style Flash icon, so I went with that. Tory Gaul has a vector version that’s supposedly similar, so I’m going to see what that’s like. Maybe we can have our vector goodness and sexy icon at the same time.

  4. Ted Says:

    Great additions. Any chance of getting a pref to toggle it on/off?

  5. Peter Hosey Says:

    Ted: From me, none.

    I believe the whitelist feature will work for just about any use-case for a pref. It exists in Rentzsch’s version as well as mine. Option-click on a movie to get a prompt to add the site it’s on to your whitelist.

    Rentzsch released version 1.1 yesterday. It adds a contextual menu that includes commands to edit the whitelist.

Leave a Reply

Do not delete the second sentence.