Home » none » Flash to jQuery

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.

Like this Article? Subscribe to get every article sent to your email.

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, […]
  • 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 […]
  • 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 […]
  • AjaxToolKit TabControl Disabled TabAjaxToolKit TabControl Disabled Tab I just finished an interesting project that involved the AjaxToolKit's Tab control.  The first part of my assignment was to make the Tabs start about 160 pixels to the right of the left […]
  • jQuery SplitterjQuery Splitter Hey!  This is pretty cool. I was just mentioning at the last jQuery presentation I did that there were some controls that were definitely missing from the jQuery UI suite of […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

One Pingback/Trackback

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