art with code


Using Swiffy to create HTML animations in Flash


The above animation was drawn in Flash but runs in pure HTML5, so it works on your mobile as well. Go on, try it out! Magic, no? Keep reading to find out how to make your own HTML animations in Flash.

First off, get Flash. The easiest way is to get a Creative Cloud subscription and download it from there. Done? Ok. Now, draw your animation. Don't know how? No problem.

Creating your animation

Here's a five-line tutorial to creating Flash animations: Create a new ActionScript 2.0 project, go to the timeline pane, click the onion skin button (looks like two squares), hammer F6 to create new keyframes, use comma and period to move back and forward in the animation, use the brush tool to draw each frame. For more details, you could check out this Adobe tutorial for Flash basics, Drawn to Life for animation lessons, or for more advanced workflow, the Foundation Flash Cartoon Animation book.

Installing the Swiffy extension

Go to the Swiffy project page, download the Swiffy Extension and open it. The extension opens in the Adobe Extension Manager, which walks you through the installation process. Now the next time you open Flash, you should have an "Export to HTML5" menu item in the Commands menu.

Exporting your animation

To export your animation, go to the Commands menu and click on "Export to HTML5". You get a small HTML file with your animation in it, ready for use.

Embedding your animation on your website

The easiest way to use your animation is to put it in an IFRAME. The name of the Swiffy animation file is <your animation name>swf.html, so if you had a file MyAnimation.fla, the HTML file would be MyAnimation.swf.html. And to use it on your page you'd make an IFRAME like this <iframe src="MyAnimation.swf.html" width="500" height="400">.
As the animation is now plugin-free, all the usual CSS transforms and animations should work perfectly on it.


Now go forth to make your own HTML animations and wow the world!

The source is available on GitHub.


Rethinking digital cameras a bit

Here's the idea: move the sensor instead of the lens.

Ok. Think about the implications for a bit.

Are you thinking? Alright, let's go!

You can use a moving sensor for autofocusing manual-focus lenses. The Contax AX did it in the 90s. The problem then was that the Contax AX was a SLR, so moving the film plane required moving the heavy mirror assembly with it. It was a bit like moving the garage to change the position of your car. Doable, but... wouldn't moving the car be easier?

With mirrorless cameras, you don't have a heavy mirror assembly to move. You only need to move the sensor chip. An electronic viewfinder works the same no matter where the sensor chip is.

One other effect of moving the film plane on the Contax AX was that it could turn non-macro lenses into macro lenses. Moving the sensor is also useful for in-body image stabilization, like on the Olympus m43 cameras. Suppose you take in-body image stabilization one step further and make the sensor angle manually controllable. Bam, you've got yourself a tiltable lens.

When you use an autofocus lens, the motor in the camera body or inside the lens needs to move heavy pieces of glass back and forth. This operation is usually slow, noisy and uses a good deal of battery.

If you use the sensor for focusing and image stabilization, you can make the lenses much lighter and smaller. By moving the light sensor chip instead of heavy glass, you can focus faster and get longer battery life.

A native lens made for a movable sensor camera can be a fixed focus lens with the aperture control on the lens. Simple, small and light. Compare this to a common DSLR lens with autofocus motors and image stabilization motors.

Wide-angle lenses on DSLRs require some optical gymnastics to work with the 40+ mm flange distance[distance from the back of the lens to the sensor] required by the mirror assembly. This is why DSLR lenses shorter than 40 mm are larger than 50 mm primes. Compare a Canon 24 mm f/1.4 to the 50 mm f/1.4. Due to the retrofocus design needed, the 24 mm is 1.5x as large, 1.5x as heavy and four times as expensive. With a mirrorless design, you could move the sensor right up to the back of the lens and make small wide-angle lenses. Well, as long as the sensor works OK with light coming from obtuse angles. [src]

A moving sensor also makes lens adapters easier to make. As long as the lens can be focused to infinity and has aperture controls on the lens, it turns into an image-stabilized tiltable macro autofocus lens on a moving sensor camera. And the moving sensor makes flange distances less of an issue.

On the negative side, telephoto lenses may require too much movement to focus in-camera. You'd have to focus them to a rough range first, then use the in-camera focus to do the rest.

Does anyone have ideas on how to build a prototype of something like this? Starting with a sensor chip that moves back and forth. You can get a decent manual focus lens from eBay for 20 bucks and Arduinos should work for the microcontroller stuff (dunno about contrast-detection AF, guess you could make it real slowww). Precision motors & rails? I've got a mostly unused medium format body lying around here, but maybe it'd be better to just make a big dark box with the lens attached to it.

Blog Archive

About Me

My photo

Built art installations, web sites, graphics libraries, web browsers, mobile apps, desktop apps, media player themes, many nutty prototypes