Site Takeover animation (Hybrid Site lib and CreateJS)

Site Takeover

Today I'm making a site takeover animation and programming the takeover.
The site is in HTML5 and contains a lot of javascript.



The takeover should be viewable in all browsers, the animation includes sound (and sound transforms) and must fill the whole screen (or as much as possible) while staying transparent.
On a click or touch, the takeover should abort and give back control to the site.

The takeover animation consists of two parts:

• AT STARTUP: A cartoon man walking into the screen, delivering a message and leaving the screen on the other side. Before he leaves, he points at the menu and invites people to look around.

• AT IDLE: When the user does nothing for 5 seconds, a cartoon guy pops up and draws attention to an offer.

Technical setup

I like to keep things simple for the client, so all they have to do is include a javascript and call one function when the page is done loading.
I'd do that normally, but this page has a lot of javascript.

Then the takeover.js file creates a new layer containing an transparent, borderless, seamless iframe and fills it with a page.
This is where the magic happens.

The page Includes the takeOverLib, which checks browser capabilities and screen size and decides if we create a flash object, or a HTML5 animation (It is actually not a flash fallback, but more of a flash fallforward).

To keep production feasible the animation.swf and animation.js (using createJS lib) both load the same assets (images and sounds). The sound assets are done in mp3 and ogg both, to accomodate fireFox browser.

Creating the assets

In this case the cartoon-guy was allready designed, I just animated it in Flash to the voice-files that were also allready recorded. I just added the footsteps. There was very little text, so I exported that as curves, keeping the actual text on a reference layer.

I created a preliminary takeover, using only flash, to present to the client and when I got the go ahead I created all assets as CreateJS assets in Flash CC Pro. The audio output I replaced with the original audio (why re-convert it?) and I created the ogg samples manually in Soundforge.

Then I rerouted the audio in the CreateJS manifest manually to have Flash and CreateJS use the same folder.

Programming the Animation

The animation doesn't know how big the screen is. It was decided to have the cartoon man come in with a perspective effect. This meant I had to calculate the starting point (and size) of the man from the position I want him to end up in. (Center screen).

To do this, I put the guy in center screen and used the movement function I created repeatedly until it was out of the screen. Then I would start the animation and as long as the user doesn't resize the browser in the first bit of the animation all will go fine and he will end up in the middle of the screen.

Then I had to make sure that if the user did resize the browser, the animation was recalculated.

I programmed this in Flash initially, but I knew I had to do it again for createJS. That is something that still bothers me about createJS, but it was the easiest way to do this.

Converting this from the original to CreateJS was a job of a few hours.

This is where the hybrid lib definitely wins from Flash/CreateJS, but it doesn't (yet) support vector-animation natively. CreateJS does and it is the only feasably way I found to get vector animation output in anything other than Flash. (Although there is always Swiffy!)
There is an open standard (Animated SVG) and it would be nicer and more honest of adobe to at least offer export to this or svg-frame for that matter. I could then use Flash as an IDE for whatever output I want.

Programming the takeover

The takeover itself was rather simple. A full screen, seamless iframe. The page inside the iframe starts by finding out all it can about windowsize, capabilites etc. Then it sets up a click listener, that aborts everything on the first click!
It also keeps track of how long the animation is supposed to be, so that if you would fail to stop the animation (or if something went wrong) the user would get back system control after a while, no matter what!

Hybrid site lib (v0.5)

The hybrid wasn't responsible for any graphics this time, but did all the browser sniffing and pageheight getting. It also didn't stick to a preset aspect like the game lib. Well, it's a start.