Flash to jQuery

G03A0051

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

4 Responses to “Flash to jQuery”

  • [...] Flash to jQuery and JQuery, CuFon, and Dynamic Content (Dave M. Bush) [...]

  • 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?

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear