Advanced gestures

The idea of gestures comes from touch screens, but it's actually quite usefull for mouse too.
I've been toying with these gestures here:
http://www.snoep.at/labs/html5/demo_gestures/

Should work with both touch and mouse.
Working on the multitouch, can't predict what will happen there yet.

DEMO:

http://www.snoep.at/labs/html5/demo_gestures/

Hybrid can do webapps!

 Hybrid v1.2.0

I'm proud to announce that the hybrid is now capable of delivering first class web-apps.
I can set stage-scale-mode to 'lineair' (which is like flash used to behave) and 'responsive', which is more what you'd expect from HTML5 webapps.

I've just been creating all interface elements that anyone could need in my opinion like scrolling panes, canvases, buttons, lists, menubuttons etc. It's efficient because it uses spritesheets to define the look of all elements, which makes it possible to make it look real fresh and modern and actually add a splash of color here and there..
(I left out some things I don't like, like user-dockable toolbars, I don't get the concept, I think it's just bad design. You should know better than your user where to put stuff..)

If there turns out I need more, I'll make more. But for now, it's party time!
I'll be using this library to make the apps AND the games for Making Games.

This is the first taste of a brand new version of the Hybrid.
So without further ado:

http://www.snoep.at/labs/html5/puppet_editor/

The webapp I've been working on. It looks great on an i-pad (now that I've fixed the menu-button-bug)
I've only tested it in Chrome, Firefox, Safari, IE and on an I-pad.
The interface works great (like I expected) on all.

I actually need this puppet-editor for a game I'm creating right now, so I'm as happy as a fish in a pond.
I'll be focussing on making this thing do stuff, instead of just looking pretty, so I'm writing down my wishlist, to get back to later.

Wishlist

There is always something, isn't there..?

• I'm still in the process of making multi-touch support.
  For web-apps that is a cool feature that makes everybody's life a little easier.
• Also I have a wish to make popups/windowing a little more general and easier, but I haven't figured out an easy syntax yet.
• Flash support is at this stage theoretical.. At this point I still have more experience with Flash interfaces than with HTML5, so I'm sure I will do it soon without a single re-design of the Hybrid's syntax. 
• The popup on the right-mouse still states it's a game engine. While that is true, it has just become something a little more. I just don't have a word for it yet. Any suggestions..?
• Text in the popup is still selectable on drag.. Hmmmmm. A little rethinking of the popup might be in order.
• It doesn't handle the iPad orientation change event without trouble yet. It works if you reload the page in the new orientation, but apple doesn't think of reorientation as resizing. Oh dear, I hate it when people just shout: "This is a special case, normal rules don't apply, because WE call apples: 'oranges' "
  On Orange-iOs that seems to happen quite a lot. (I'm one of those people who started programming when you had to negotiate everything with the bar-tender if you were programming on a Mac. I might be slightly biassed, but I never understood this urge to make life hard on developers.)

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.

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.