What's This?
Flynn is an animation format designed for the Web. Flynn animations can be played in any modern Web browser, including mobile browsers like Mobile Safari and Chrome for Android. All Flynn needs is support for the <canvas> element and Javascript.
Why Flynn?
There are a lot of options out there for animation on the Web: animated GIFs, sprite sheet animation, and video, among others. Flynn doesn't try to be all things to all situations, but for a lot of situations Flynn may be just what you've been looking for.
Flynn supports full alpha channel transparency in PNG-based animations, is generally much more compact than sprite-sheet animations, can be controlled via Javascript, and works in any modern browser. For short animations like interface elements, moving screenshots, and overlaid content, you should probably give Flynn a try.
Flynn vs. Brand X
Let's take a look at a real-world example: that little animated Flynn logo at the top of this page. That's the example animation included in the Flynn player distribution (which you can get by clicking "Download Player" above).
| Frame Images: | 5.1MB |
| Sprite Sheet: | 1.8MB |
| Flynn | 1.3MB |
| Flynn (gzip) | 1.1MB |
After gzip, Flynn is 21% of frames and 62% of the sprite sheet.
Getting Started
Download the Flynn Player
The Flynn player is a Javascript library that plays animations encoded in the Flynn format. You can get the Flynn player by clicking "Download Player" above. After you unpack the archive, take a look in the example directory. This is the example animation we're going to be using.
Install the Flynn Encoder Tool
To encode our animation in the Flynn format we're going to use the Flynn encoder command line tool. You can get the Flynn encoder by clicking "Download Encoder" above and running the installer.
If you have Xcode installed and you'd rather build from source, just clone the Flynn repository and build the Flynn Xcode project. (We'll leave this exercise to the experienced.)
Encode the animation
Flynn creates animations from a sequence of individual frame images. You can export frame images pretty easily from most video editing and animation software. Take a look in example/flynn_logo_frames to see the frame image sequence we'll be encoding.
After you've installed the Flynn encoder tool one way or another, you can generate a Flynn animation from the frame image sequence in the example like so:
$ cd example
$ flynn -n flynn_logo -o flynn_logo -b 2 -v flynn_logo_frames
# ... Flynn does some stuff
And Bob's your uncle! You've now got an encoded Flynn animation in the directory flynn_logo.
Setting up an animation
As you can see from the source of the example HTML file, you don't need to do much to get a Flynn animation going. Basically you'll just do the following:
-
Import the Flynn player script and import jQuery (if you haven't already)
<script src="path/to/jquery.js"></script>
<script src="path/to/flynn.js"></script> -
Add a container that the animation will be created in.
<div id="flynn" autoplay="true" delay="0" fps="30" scale="1" name="flynn" base="path/to/flynn" loop></div> -
Add a bit of script to initialize Flynn when the page loads, and
$(document).ready(function(){
$('#flynn').flynn();
});
Play the Animation!
Flynn can play animations in pretty much any modern Web browser, including mobile browsers like Mobile Safari and Chrome for Android. The Flynn player only needs a few basic things: the <canvas> element, some images, and Javascript.
The example project contains a barebones HTML file that is already setup to play the animation you just encoded at Player/example/flynn_logo.html. Open it up in your browser to see it in action.
(Note that Chrome won't let you load images via Javascript in an HTML file loaded from disk for "security" reasons. So you'll need to either use another browser list Safari or load it from a locally-running webserver.)