Skip to content

Home

Jump to bottom Edit New page
mathiasbynens edited this page Oct 15, 2011 · 32 revisions

Gordon

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 plugins or additional software. It takes advantage of the latest web technologies like SVG to render vector based graphics or Web Workers for enhanced performance and to parse even large SWF’s in the background, without blocking the user interface. Furthermore, it gives you full access and control of the resources, characters and timeline behaviours in your movie via JavaScript or DOM scripting.

Gordon was created and is maintained by me, Tobias Schneider, a web developer based in Munich, Germany.

Comments are appreciated, please contact me on Twitter (http://twitter.com/tobeytailor/)

Supported SWF versions

In this build, Gordon can read and parse all valid SWF’s, even if they are compressed with ZLIB, but plays only SWF1 files completely, as well as most of the SWF2 features. For a deeper overview of Gordon’s current compatibility status, take a look at the SWF Tag Support Table (http://wiki.github.com/tobeytailor/gordon/swf-tag-support-table/).

To create Gordon compatible SWF movies with, for instance, the Flash™ IDE, open the Publish Settings dialog, click the Flash tab and select Flash Player 1 or 2 from the Version pop-up menu. Incompatibility errors during the following publish process of your movie points to used features which are not supported by the selected Flash Player version and therefore not by Gordon at this time.

Targeted platforms

Gordon currently targets the following platforms:

  • Mozilla Firefox >= 3.0
  • Apple Safari >= 3.1
  • Google Chrome >= 1.0
  • Opera >= 10.50 Beta

There are known compatibility issues with:

  • Microsoft Internet Explorer >= 1.0

See the Browser Support Table (http://wiki.github.com/tobeytailor/gordon/browser-support-table/) for more details.

Using Gordon

To use Gordon in your application, download the latest gordon.js file from the Gordon downloads section (https://github.com/tobeytailor/gordon/downloads/) and copy it to your public javascripts directory. Include it in your HTML like this:

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

Then create a new instance of the Gordon.Movie class somewhere in your page or included scripts and pass an URL of a valid SWF movie file as the first argument and an optional key-value object of attributes as the second argument.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Gordon example</title>
  </head>
  <body>
    <div id="your_stage">Replace me</div>
    <script src="/path/to/gordon.js"></script>
    <script>
      var movie = new Gordon.Movie("/path/to/your.swf", {id: "your_stage", width: 480, height: 320});
    </script>
  </body>
</html>

Optional attributes and possible values:

  • id (string) specifies the id of the HTML element containing your alternative markup which will be replaced by your movie content.
  • width (number or string) and height (number or string) specifies the dimensions of your movie in either pixels or percentage of browser window (defaults are given by the SWF settings).
  • autoplay (boolean) specifies whether your movie begins playing immediately on loading (default is true).
  • loop (boolean) specifies whether your movie repeats indefinitely or stops when it reaches the last frame (default is true).
  • quality (string) specifies the level of anti-aliasing to be used. Possible values are low, autolow, autohigh, medium, high and best (default is high).
  • scale (string) specifies how your movie is placed in the viewport. Possible values are showall, noorder and exactfit (default is showall).
  • bgcolor (string) specifies the background color of your movie in the format #RRGGBB. Use this attribute to override the background color setting specified in the SWF file.
  • renderer specifies the rendering class to be used (default is Gordon.SvgRenderer). You can create a custom renderer by defining your own class (see src/svg_renderer.js as a reference) and use this attribute to register it.
  • onprogress (function) …
  • onreadystatechange (function) …
  • onenterframe (function) …

Demos

Several demos can be found under http://wiki.github.com/tobeytailor/gordon/demos/.

Building Gordon from source

gordon.js is a composite and compressed file generated from many source files in the src/ directory. To build Gordon, you will need:

In the main directory, type the following to make all versions of Gordon:

rake

OR

  • rake gordon to process the Gordon source and generate the composite dist/gordon.js
  • rake min to build the above file and the compressed dist/gordon.min.js (using Closure Compiler)

You can remove all the built files using the command:

rake clean

License

Gordon is licensed under the terms of the MIT License, see the included MIT-LICENSE file.

Add a custom footer
Add a custom sidebar
Clone this wiki locally