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.

Facebook developer worden om insights te gebruiken

Stel, ik  heb een spel voor u gemaakt op facebook en u wilt gebruik maken van facebook insights om te zien hoe vaak het spel gespeeld wordt en boodschappen gedeeld worden.
Dan zult u zich eerst moeten registreren als developer op Facebook.
Dit stelt niks voor, feitelijk wil Facebook alleen uw telefoonnummer registreren en verifieren.

Het proces gaat als volgt:

• Wordt vrienden met SnoepGames (dan is het makkelijker u uit te nodigen voor de gezamelijke app en kan ik me ook niet vergissen als u  een algemene naam hebt.) Dit is mijn bedrijfsaccount, ik heb ook een familie en vrienden account.

• Er komt een developer request om insights te gebruiken.

• U wordt doorgestuurd naar developers.facebook.com
  Daar volgt u een zeer eenvoudig vier stappen plan. Als u twijfelt ziet u hier voorbeelden van hoe ik het zou invullen, als ik u was.
  
  Klik op de groene knop en de wizard gaat van start.

• Accepteer de voorwaarden door op het vinkje te klikken, klik dan op doorgaan.

• Vul een telefoon nummer (06) in en wacht op het smsje, vul dan de bevestigingscode in. Facebook vraagt met wie de nieuwe informatie mag worden gedeeld: kies: alleen ik!

• Vul het grote formulier als volgt in: Negeer de bovenste twee, Kies web, overig en Games. Vergeet niet de twee vinkjes onderaan UIT TE ZETTEN! Facebook negeert hier de Nederlandse wetgeving over OPTING -in! Het is mogelijk om deze later uit te zetten, maar dat is lastiger.

• De laatste stap is op klaar klikken.
  u wordt gefeliciteerd met uw developer-schap.

• Als u nu in facebook komt, staat er een kopje ontwikkelaar aan de linkerkant. Klik daar op de app, waarvoor ik u heb toegevoegd en u hebt toegang tot de insights-statistieken

• Klik op alles weergeven om bij de grafiekjes te komen. Voor de duidelijkheid, dit is voor de campagne begon, we zien hier de insights van het test-traject. Dit vind u ook op: https://www.facebook.com/insights/

Social Gaming

As of today we to are a social gaming company.
My first (solo) facebook game has been launched.

Ofcourse I used to do social games for Ludatic, but this is the first time I did everything myself and had to dive into the backend. The facebook API is remarkably simple. So simple in fact, that I am going to implement it for Making Games as well.

Hybrid Platform. HTML5 and Flash Games.

2013 saw the birth of the “Hybrid Game Platform”. This platform is basically a compatibility layer written simultaneously in Flash and Javascript.

This means, you can write game code once and export as Flash and HTML5. Now this may seem unimpressive, as adobe claims the same thing with createJS. But the fact is, that there needs to be a lot of conversion, before your game works again.

With the Hybrid platform we are talking the same language in both cases. The main advantage of this is, your choice of platform is now a lot wider.

Mobile platforms have a very limited support for Flash, but older browsers don't support HTML5.

The Hybrid platform analyses the browsers capabilities and chooses the right techniques to display.

This is best practice anyway, but used to mean, you had two versions of the software that had to be written.

And if you change anything (like texts, logo's etc) you have to change it twice. This lead to more cost.

With the deployment of the hybrid platform, this cost is literally cut in half, because you only have to do everything once.

Also, by keeping Flash as an option, you can then convert the Flash-apps to Mobile Apps quite easily.

All round flexibility for a very low price.

The Hybride Platform has been succesfully deployed for three different clients in 2013.

(Sinterklaasjournaal (just HTML5, no flash fallback), AanZee vakantiehuizen, VillaXL).

I will add links when these go live 15th of  januari 2014!

Hybrid Site Platform

I'm now working on a similar platform for sites.

As2 to As3 conversion

Since Adobe doesn't support as2 anymore, (some) developers and usually designers are struggling with converting old as2 projects to as3. There are a number of online converters, none of which work well.

So what's the solution?

I'm sorry to say there is no ready solution...
This is mostly because as2 and as3 are built on different principles, that do not mix well.

So I decided to start a service for as2 to as3 conversion. Or if you want to update your site, why not go HTML5 as well, see the post about the hybrid platform!
I would like to say something about prices here, but that is quite impossible.
I do it at 75,- Euro's an hour, but that price may be a bit misleading, because I usually work quite fast.  Contact me through the contact form.