Adobe are sponsoring a set of javascript libraries and tools called CreateJS. CreateJS includes a javascript library called Easel JS which allows developers to manipulate the HTML5 canvas element using familiar concepts and coding techniques found in Actionscript 3. For example nested display lists and frame based events. Lee Brimelow has a great tutorial on EaselJS here. CreateJS also includes libraries for tweening, preloading assets and playing sounds as well a tool called Zoe which converts swf movieclips into spritesheets ready for use in Easel JS.

The interactive application below was created using Easel JS and Zoe. The animations were extracted from an original flash swf using Zoe and reassembeled in Easel JS. The fantastic Illustrations were drawn by Lindsay Walker.

Tested on ios (ipad & iphone), android as well as the latest versions of internet explorer, firefox, chrome and safari.

Rendered using the HTML5 Canvas:

Original Flash swf:

Get Adobe Flash player

NOTE: Please click here for a flash/actionscript version of this technique.

Javascript does not support concurrency. All code must be executed within a single thread. This means that processor intensive tasks could cause a web page to stall very quickly. This forces us to rely on server side operations for any large calculations.

Fortunately it is possible to simulate threading using javascript. The example below demonstrates psuedo-threading using the google web toolkit. The sample increments an integer from zero to one hundred million, displaying the count on the screen as it increments. If this code was executed in a for loop the web page would quickly become unresponsive.
Read the rest of this entry »

This post builds on the previous post ‘GWT: Order in Chaos’ and shows an example of the GWT-FX library. GWT-FX is a third party library for the Google Web Toolkit and allows us to apply effects such as fades, movement, transitions, animation and easing to GWT objects (Both widgets and elements).

Read the rest of this entry »

Most of Google’s technlogies run in a we browser. For example Gmail, Google Reader etc. Google’s client side web services are Ajax based and rely on javascript. Javascript is a single threaded light weight scriptiing laguage, it’s implementation, speed and efficiency vary acrross web browsers. Yet Google’s web applications are fast and work in all of the modern web browsers.

Read the rest of this entry »

NOTE: Please click here for a flash/actionscript version of this technique.

Sometimes it is useful to be able to iterate through every element in a HTML document–or all of the children of a specific HTML node–and either perform an operation on each element or access a property of each element. We need to use recursion in order to do this because child elements of a html node may themselves contain more child nodes. WARNING! It can become quite processor intensive using recursion to iterate through a large number of elements. Below is a javascript example which puts this technique into practice. All source files can be downloaded here. Read the rest of this entry »

Sometimes a website doesn’t function correctly. Even if a website works fine we may want it to display or perform differently. With a few web development and javascript skills we can change a website for ourselves using the Greasemonkey Firefox extension.

Read the rest of this entry »