Simon White

Saucer Crash

Animation example from “Animating Banner Ads” — chapter 24 from the book “Fireworks 3 Bible” by Joseph Lowery with Simon White, published by Wiley.

A flying saucer cruises just above the atmosphere, running lights flashing, its shadow caressing the clouds below, cast by the light of the stars that wait for it above.

Story

Saucer Crash was made to introduce the small-scale puppet show of the animated ad banner to Web graphics students in the futuristic year 2000.

The animation was designed to be as simple and approachable as possible but still expose a basic toolkit of animation techniques: moving in a straight line or along an arbitrary path, entering and exiting the canvas, appearing or disappearing in-place, colliding, changing states, and “speaking” dialogue. A surprising number of animated stories can be told with just these basic building blocks.

In order to run on today’s Web, the venerable flying saucer has been upgraded with an entirely new technical foundation that makes for buttery smooth crashing, even on mobiles.


Screens

Saucer Crash supports all screens from iPhone to 4KTV.

Side-by-side portraits of Saucer Crash running on simulated iPhone, iPad, and 4KTV screens show the visual layout adapting to each different screen size so that Saucer Crash can be viewed by everyone, no matter what device they happen to be using.


Bandwidth

Saucer Crash loads in only 185.9 kilobytes 0.00 gigabytes — about 0.5 seconds over real-world 3G wireless.


Standardization

Saucer Crash is internationally standardized for universal compatibility.

W3C

Validate HTML or CSS code.

ISO


Keywords: ad-banner, advertising, tutorial, example, book, print-book, flying-saucer, object-animation, puppet-show, crash-down, crash-left, mountains, mundane-magazine, animation, artwork, code, digital-pen, digital-pencil, digital-ink, hand-drawn, hand-drawn, hand-coded, handmade, interactive, html, svg, animated-svg, html5, css3, es5, unobtrusive-javascript, dom-scripting, responsive-animations, responsive-layouts, w3c, iso, classlist, cssanimations, csstransforms, csstransitions, eventlistener, inlinesvg, json, opacity, preserve3d, queryselector, requestanimationframe, rgba, xhrresponsetypejson.