Integrating Flex/Flash with HTML5 APIs

Beyond the media hype about Flash versus HTML5 exists the reality of coexistence and cooperation. This coexistence and cooperation makes the web a better place. When developers combine the strengths of Flash with the strengths of HTML, users get the best possible experiences on the web.

Both HTML and Flash are important foundations that Adobe builds its products on. Here’s a little secret about Adobe’s business model… When new versions of those platforms come out, so do new versions of the tools for building on them. And guess what Adobe makes money on… Tools. So it is true that Adobe loves Flash AND HTML5. :)

In the world of coexistence and cooperation (that is the technical reality) we find some really exciting things. One such thing is Jangaroo an open source project that cross-compiles ActionScript to JavaScript. This means that you can build applications in ActionScript (and eventually MXML) and cross-compile those applications to run in places where Flash doesn’t exist. And you can even use Adobe tools to help you write that ActionScript. :)

Another quick example I whipped up is a proof-of-concept of how you can integrate Flex applications with the new HTML5 session history and navigation APIs (pushState, replaceState, and so on). In a sufficiently modern browser (such as Chrome, Firefox 4, or Safari) open the following demo in a new tab / window:
http://www.jamesward.com/demos/FlexReplaceState/app

As you click on tabs notice that the URL changes without page refresh and without resorting to the use of named anchors / hashes. Also notice that page refresh, back, and forward all work. Check out the source for the demo on github. That is the kind of cooperation and integration we will continue to see more of as HTML5 matures. I’m excited to see the web become a better place as HTML and Flash both mature!

This entry was posted in Flex, HTML5 and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • http://www.tjdownes.com TJ Downes

    Thanks James! Great example. Simple note that the example doesn’t work in Firefox (and a big reason I prefer Flash development)

    • http://www.jamesward.com James Ward

      Yeah, the HTML5 API that I’m using wasn’t implement in Firefox until version 4 – I believe.

  • Adi Shaswot

    It was awesome demo. Did u used javascript for the bridge? I had heard abt that.. Actually all your blogs carry new taste. I had been a Flash As3 Amature Developer for quite a time. i Want to start FLEX ..but dont know how to take the first step.. cant figure out the additional knowledge and applications i need… can you please help me through it??

    • http://www.jamesward.com James Ward

      I used ExternalInterface to talk to communicate to/from JavaScript.

      What else do you need help learning?

      • Adi Shaswot

        Thank u James for the response,
        I am going through all your Open Source Sources form github. I am really thankful for your contributions in open community.. this really helps people like us..
        ..Starting today, i hav started going through your screen-casts.. i am really confused.. what is the differance between actionScript in flash and Actionscript in Flex?? what feature does Flex provide?? is AIR application a flex application?? Do i need another IDE for Flex?? .. i tried finding my answers through web but cud not get anything on my mind.. can u please help me out through it??
        ..once again thank you for all those sources and great jobs done by you..

        • http://www.jamesward.com James Ward

          Check out:
          http://flex.org/get-started

          Does that information help?

          • Adi Shaswot

            Thanku very much james, i am going through that..

        • http://ebaggg.blogspot.com/ ebaggg

          what is the differance between ActionScript in flash and Actionscript in Flex??

          There is no difference. Flex is simply pre-generated Actionscript. Create a new project and type in a new . Then “Ctrl” + click that ‘Button’ text. It will take you to the Actionscript behind that class. Similarly, if you create a plain Actionscript class called “MyFoo.as”…you could access it in Flex like

          what feature does Flex provide??

          As I said above, the Flex SDK is a collection of classes & components. Browse through this link to see what UI components it gives you. (Go into ‘Flex 4 > Components > Controls’ and click around)
          http://www.adobe.com/devnet-archive/flex/tourdeflex/web/#

          Is AIR application a flex application??

          AIR is a wrapper for you Flash/Flex/HTML apps that run on the desktop. Anything you create in Flex, can be run in AIR. Since AIR is run on your computer (and not a browser) and you users have to install the app, AIR has additional APIs that Flex does not (access to the file system, etc).

          Do i need another IDE for Flex??

          No. When you create a new project in Flash Builder, you select whether it’s AIR (Desktop) or Flex (Web).

          • Adi Shaswot

            Thank you, This was pretty what i was searching… but i still have a question..
            Can i make Flex Application inside Flash? I have been using Flash CS5 Professional because I havent used Flash Builder yet..

          • http://www.jamesward.com James Ward

            No. You have to use the Flex SDK to create Flex applications. You can use an IDE which wraps the Flex SDK (like Flash Builder). But you can’t use Flash Pro.

  • http://www.jangaroo.net Frank Wienberg

    Hi James, thanks for another Jangaroo “cameo appearance”! I perfectly agree that Flash/ActionScript and HTML5/JavaScript can and should converge, so that it only depends on your personal preference and choice which language / API to use for making stuff run in the browser.

  • sartre

    this is great! Is there a plan to support mxml in future?
    I really hope Adobe helps this project with code and resources. It will be great for the entire web community.

    • http://www.jamesward.com James Ward

      I’d like to see it happen. It’s possible. Jangaroo is open source so feel free to pitch in!

  • http://www.flex-blog.com Roelof

    Really nice that the integration will be made with HTML5 as well :)! Nice post!

  • http://blog.everythingflex.com Rich Tretola

    This is very interesting. Perhaps it will lead to better SEO results. My experiments with the old hash tag methods have failed to get any SEO traction.

    http://blog.everythingflex.com/2010/11/15/improved-google-swf-indexing-experiment/

    • http://www.jamesward.com James Ward

      Search engines do ignore hash tags in URLs. So this method would certainly help your SEO. :)

  • JLM

    The HTML5 aspect does not seem to work on current firefox and opera, not to create a molehill out of a mountain but HTML 5 is still at the bottom of the hill, whereas I suspect we will reach molehills summit sooner.

    In regard to flex… can’t you flex guys put the generic code in a separate class so as3 users can use it without rewriting, I mean the flex ui could easily be openpyro and also easier to move the relevant part to haXe, I know it’s another class but it just makes the code more flexible and more accessible to all flash users and not just flex devs.

  • Pingback: Flex Vs AJAX

  • Pingback: Give it a Second, It’s Going to Space! « drogg.g : darryl roggeveen graphics

  • http://graphicalinsight.com/wordpress/ Rob

    Hi,

    I love the topic. I think WebGl, Css3, HTML5, Flash, Java. They all could fall so deeply into Sweetness. I hope no one tries to lie about them.

    Flash is ok for SEO. You have to make sure that you are using it modularly for graphics, and other visual stuff. The read/write part of the web can be xml, HTML, and yes.. Flash. You just have to make sure you code it correctly.

    SWFAddress, XML, and other technologies have come far enough to provide us with a nice toolset. Its nice to read your post about the finer things(Java and Flash). They have been making it(the web) ‘cool’ since the 90′s. Thanks Adam.

  • fox

    The example is not working with IE9 :)

    • http://www.jamesward.com James Ward

      I guess that IE9 doesn’t support the HTML5 history API. :(

  • fox

    I have tried the example on my local machine. Updating the url is working but it seems that the mod_rewrite is not working. Do you like to help me to get started with that rewrite, please.
    If you like mail me please.

    Regards

  • fox

    Ok I understood now the Mod_Rewrite and it seem to rewrite (i dont get errors)
    But the flex app do not load (if i view in the html code anything is fine)

  • fox

    Ok Its working now !
    How would I have to modify the htaccess file to be able to use a path like this:
    http://www.jamesward.com/demos/FlexReplaceState/Tab1
    ?
    I tried : ^/ or ^/.+ or ^/.* but those arent working.

    Any idea ?

    • http://www.jamesward.com James Ward

      The reason why I used the app/whatever rewrite handler was because I wasn’t sure of another way to get it to load the app no matter what the path was.

  • fox

    Ok,
    fair enough :) at least I have now a super convenient way to deeplink beautiful flex RIAs.
    I am going to post an SEO test soon on : http://flex-seo.de/ based on your tutorial here .
    Thank you very much !!!

  • fox

    Ok done :)
    I have created a example page which contains alternative dynamic created content:
    http://flex-seo.de/

    I have added it to googles webmaster tools and uploaded a sitemap, but when i try under google site:flex-seo.de nothing is shown?

    Any idea whats wrong ?

    Do you think its due to the redirect which i have placed in the index.php ?

    • http://www.jamesward.com James Ward

      Hmm… I’m getting an error on that page.

  • fox

    try again, I am still trying things on that page while its live :)
    I still dream to get rid of the /welcome

    • http://www.jamesward.com James Ward

      Nice! Looks great! I’m not sure why Google is having issues with it though.

  • fox

    probably it takes some time to get indexed, lets see I keep you posted !
    If you stumble across a trick how to get rid of the initial folder, let me know please :)
    Thanks

  • fox

    Hello James, it is working !!!
    Quite good actually:
    http://www.google.de/#sclient=psy&hl=de&site=&source=hp&q=flex-seo+datenbank&aq=f&aqi=&aql=&oq=&pbx=1&bav=on.2,or.r_gc.r_pw.&fp=fff6532b2611fdf7&biw=1399&bih=722

    I am going to put remark to your article in the example.

    Best Regards

    • http://www.jamesward.com James Ward

      Nice! That’s awesome!

  • http://flex-seo.de Fox

    anyone else maybe knows how to rewrite the url so that we get rid of the folder ?

  • fox

    Whn using the IE9 URLS are not updateable using the html5 api :/

  • Kiran

    Hi James,

    I need your help. I’m a technical writer currently working on web application which is developed on java flex. I need to develop online and context sensitive help for the application. The TOC of the application is automatically generated (Tree Structure). Is robohelp output files are compatible with the application. Please help me out URGENT Request.

    Thanks

    Kiran

  • jimi

    hi James, first of all i must say that i truly respect you as one of the leaders in innovation.

    That being said, i have a question that, as a flex developer, keeps me from sleep at night.

    ¿Do you know if adobe plans to support FLEX to HTML5 compilation with flash builder?

    I mean, will it be possible to expect in the short term to create simple flex apps (I know that not all the flex framework features would be supported), that can compile to HTML5 and FLASH?

    I am deeply concerned as my customers begin to take HTML5 into account. For desktop air apps is not important, but for small web apps, like a small web shop, this really matters now. There’s no future for flex here if HTML5/js compilation is unavailable…

  • Mr.X

    FLEX to HTML5 would be awesome.
    Anyone tried Jangaroo with Flash Builder ? Which features are all supported yet ? How about visual layout ?



  • View James Ward's profile on LinkedIn