Saturday, February 20, 2010

[How To] Make your Flash contents playable on iPhone?

Flash contents have the magic of attracting any sort of visitors to your website (if properly designed). While almost all the desktop based browsers support Flash, many of the mobile browsers and phones still do not support Flash. Apple’s iPhone belongs to that category of phones. One would have expected Apple to support Flash atleast after its upcoming competitor, Android phones, getting support for Flash. However, Steve Jobs termed Flash as a dying technology and confirmed that they don’t have any such plans of supporting Flash - “we don’t spend a lot of energy on old technology”. Here is an alternative way of making your flash contents playable on iPhone / other mobile devices: Use Gordon.What is Gordon?

Gordon is an open source Flash runtime written in pure JavaScript. Gordon lets you run your SWF movie files in a JavaScript based environment, without the need of any plug-ins or additional software. It takes advantage of the latest web technologies like SVG and HTML for rendering the Flash contents. Gordon is written by Tobias Schneider and is hosted on GitHub. It supports the browsers Firefox (3.0+), Chrome (1.0+), Safari (3.1+).

How to use?

1. Download the latest gordon.js from here and include that in your HTML:

<script type="text/javascript" src="/path/to/gordon.js"></script>

2. Create an instance of Gordon.Movie class somewhere in your page and pass the URL to SWF file as the first argument and the set of optional options as the second argument. Check out the list of options here.

<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="/path/to/gordon.js"></script>
  </head>
  <body>
    <div id="your_stage">Replace me</div>
    <script type="text/javascript">
      var movie = new Gordon.Movie("/path/to/your.swf", {id: "your_stage", width: 480, height: 320});
    </script>
  </body>
</html>

3. That is it! You are done! The movie will not load on file:// protocol due to Flash sandbox security limitation. However, hosting the page on your server and accessing the movie from there will load the movie. For demo, point your iPhone Safari browser to this.

-- Varun

No comments:

Post a Comment