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 gwt/javascript version of this technique.

Flash applications do not support concurrency. All code must be executed within a single thread. This means that any large calculations or processor intensive tasks will cause the flash player to stall very quickly. We have to rely on server side operations or other technologies to perform large calculations.

Fortunately it is possible to simulate threading using the flash platform. The flex example below demonstrates psuedo-threading using actionscript 3. The sample application 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–or even a frame loop–our application would quickly become unresponsive.

Read the rest of this entry »

Click here for a HTML5 tablet/phone friendly version of this game.

Jungle Shoot Out is an interactive platform shooter game based on King Features Syndicate’s The Phantom ©. It makes use of inverse kinematics in Flash.

Shoot the gun out of the roughnecks hand while dodging bullets.

Left (Move Left)
Right (Move Right)
Space (Shoot)

Adobe Flash technology is very useful in the field of variable data publishing. We can embed fonts, dynamically adjust and resize variable elements and apply a large amount of filters and effects to create seamless compositions of both static and dynamic elements.

Below is an interactive demonstration which shows an example of dynamic imaging applied to video footage. Here we dynamically include the following graphic in our video:

Read the rest of this entry »

"Augmented Reality" allows us to super impose our own digital art on top of a live video stream.

In the example below we augment a live web camera feed with a 3D animation .

Read the rest of this entry »

NOTE: Please click here for a HTML DOM version of this technique.

Sometimes it is useful to be able to iterate through our entire display list–or all of the display objects within a specific display object container–and either perform an operation on each object or access a property of each object. We need to use recursion in order to do this because child elements of a display object container may themselves be a display object container. WARNING! It can become quite processor intensive using recursion to iterate through a large number of objects. Below is an Actionscript 3 example which puts this technique into practice. All source files can be downloaded here. Read the rest of this entry »

Papervision 3D is a powerful open source 3D library for Flash. It allows us to create animations and interactive applications in 3D. The current release of Papervision 3D supports Actionscript 3 and can be downloaded here. This post runs through some of the basics of setting up an Actionscript 3 papervision 3D project.

Read the rest of this entry »

Adobe Flash CS4 has made character animation in Flash a lot easier. The following post shows an example of using Inverse Kinematics and the bone tool to animate a skeleton character.

Firstly we need to divide all of the limbs of the character into movie clips. A photoshop document version of the character can be downloaded here and the flash source file here. In the screenshot below we can see several movie clips denoting different parts of the character.

Read the rest of this entry »

There are a variety of methods we can use to communicate between flash and our server side web applications, including XML and HTTP POST/GET. However a much more robust methods exists–Action Message Format (AMF). AMF uses binary encoded messages. Because of this the messages are compressed which makes AMF the fastest way to transfer data. Another advantage to using AMF is that we can share objects and methods between Flash and our server technology. This post shows how we can communicate between Flex builder 3 and PHP using AMF. We will be using the Zend framework to accomplish this.

Read the rest of this entry »