Flash to jQuery


I have long argued that 99% if the things people think they need to use Adobe’s Flash for could be done just as well using JavaScript.

Now that jQuery is available, I am even more convinced that this is the case.

There are, however, a few hurdles that need to be jumped to make this happen.  For example, one thing Flash has been good at is embedding fonts and while you can embed fonts using CSS, the little bit of research I’ve done on the subject has demonstrated that it wouldn’t necessarily be easy.

Recently, someone took me up on the challenge, and I am actually converting a Flash script to jQuery.  And it is working quite nicely, thank you very much.

Here are some tools I’ve discovered along the way.

I was told that this conversion had to end up with the jQuery version looking just like the Flash version.  This means I need to grab information from the flash file such as position and color. 

One tool I’m using to grab position information is the MeasureIt Firefox plugin.  This handy little tool sits in the lower left corner of my Firefox browser.  Click the tool and then click and drag on the screen to measure pixels between elements.

As I mentioned above, Flash has been great at allowing us to embed fonts and doing the same in CSS is a bit of a pain.  But I found another great plug-in that solves the problem.  Cufon. Use the rendering engine to render your font to JavaScript and then use the Cufon.Replace() command to render the tag using the font.  It figures out everything else for you.  Very cool!

I’m not quite done with the conversion.  But I expect to finish it by the end of the day today.

There is another Flash project I’d love to convert that has text “floating in mid-air.”  That should be an interesting effect to try to replicate, but I don’t see any reason why it couldn’t be done.  It’s just a simple matter of mathematics.

Related Post

  • JQuery, Cufon, and Dynamic ContentJQuery, Cufon, and Dynamic Content Yesterday I mentioned a new tool called Cufon that allows you to easily embed fonts in your web site. One quirk about this tool is that your HTML has to be rendered prior to applying, or refres...
  • Native Client: Been There, Done ThatNative Client: Been There, Done That Google Code Blog: Native Client: A Technology for Running Native Code on the Web At Google we're always trying to make the web a better platform. That's why we're working on Native Client, a tech...
  • JavaScript vs Silverlight vs …JavaScript vs Silverlight vs … I've thought about writing this post several times but just never got around to it.  But, recently I've seen other posts or heard comments from other professionals that have led me to think that n...
  • jQuery – Using Slider as a ScrollbarjQuery – Using Slider as a Scrollbar Last week I introduced the jQuery UI element known as a slider and indicated that this control could easily be used as a custom scrollbar. Today I'm going to show you exactly how that's done. ...
  • jQuery Expand/Collapse Using Head TagsjQuery Expand/Collapse Using Head Tags I’ve spent a good chunk of the last two days working on an interesting project for one of my clients that I think the rest of the jQuery community could benefit from. The task started when my c...
  • Pingback: Dew Drop – December 1, 2009 | Alvin Ashcraft's Morning Dew

  • Greg

    I have always found using Flash (or Cufon) to embed fonts as particularly cumbersome. Since IE has always supported embedded fonts using the proprietary EOT font format, the only browsers that don’t support embedding now are Opera 9.5, Chrome (not sure why with all its CSS3 and HTML5 goodness) and Firefox 2.

    The biggest problem with using CSS for font embedding is licensing and converting to EOT files.fontsquirrel.com offers bulletproof kits for embedding fonts that handles both these problems.

    • Dave

      Is that your product?

      I don’t know, from my casual look it seemed like everyone had their own way of doing font embedding which was an equal hassle. At least this way I only have to learn one technology and it works with a greater number of browsers.

      Personally, I’d stick with standard fonts. Special fonts don’t sell products and are (therefore) a waste of time and money when designing a site. But, the client wanted special fonts, so he gets special fonts.

      • Greg

        Not mine, but a tool I use. The selection is limited and I only use them for H tags and navigation depending on what the site calls for. The big problem with embedded fonts is you need to limit the number otherwise you are pushing a lot of files to the user, so I max out at two when working on a site.

        I deal with translation of websites and accessibility a lot, so using non-Flash/image methods saves me time in the long run.

        The embedding process now is standardized. The problem is the formats. “Modern” browser (cough, cough…not Microsoft) all use TTF or OTF, but because of IE’s EOT support you are only supporting two formats…and well we do that anyway with all our IE fixes, so what is one more CSS call?