News

Create animated Canvas elements with Create JS

Create simple HTML5 animations using the CreateJS toolkit

Create JS

inspiration: spektrummedia.com/en

Producing a website with a unique look is becoming ever harder to achieve with the constant expansion of creative sites on offer. Often a really simple idea is enough to give a unique look. Spectrum Media has accomplished this by using a full-width slider, which in itself is nothing new, but it’s slightly different to the average example.

Inside each slide is a small HTML5 canvas animation that, without question, is a real attention seeker! Not only is the canvas animation a fresh and exciting addition to the site, but it’s styling is particularly inspiring. The animation is a simple monochrome look but placed over a lush, vivid, lime-green background makes it really stand out.

Create JS toolkit

Spektrum Media use the Create JS toolkit for Flash to create HTML5 Canvas animations. You will need to download the toolkit from adobe.ly/NnA38I and install it. There was a new version released at the end of March 2013 so even if you have it, it might be worth ensuring you have the latest version.

Create your vector graphics

In Flash or Illustrator, create the vector graphics that you intend to use. If you are using Illustrator you can cut and paste directly into Flash. Spektrum Media use a bright background image and dark silhouette styles for their graphics, which creates a bold and striking style.

Add your animation

Use the various tweening tools available in Flash to create your animation, this will probably take the longest of any steps in order to fine tune the animation to be really eye catching. Try to incorporate easing into your animation as this allows the content to look more natural.

Test the animation

You can generate a quick SWF animation to test that the animation is playing correctly. To do this on a Mac use Cmd+Rtn, while it’s Ctrl+Rtn if you’re working on a PC. As the animating process takes a while to fine tune, you will probably want to test a number of times to make sure that it feels right.

Export to HTML5

Open the CreateJS Toolkit from the Commands menu and choose Publish for CreateJS. Hit the publish button and this generates the library items and includes copies of the CreateJS framework. This consists of several smaller frameworks that aid in tweening and sound.

Incorporate into your project

As the content generated is linked JavaScript libraries and a canvas HTML element, incorporating it into a project is easy. Simply link to the same JavaScript libraries and drop the canvas element into the area where you want to display your animation within your HTML5 page.

< TIP>

Resizing images on rollover
To give your site a little extra touch you could try increasing the size of an image as the user rolls over it, like Spektrum Media have done. In the past doing something like this involved some kind of JavaScript trickery but thanks to CSS we can now achieve pretty much the same thing without having to rely on extra scripts to do the job for you. In CSS we can add something like:

001.selector { -webkit-transition: all .2s ease-in-out; }
 002.selector:hover { -webkit-transform:scale(1.1); }    

We’ve only shown the webkit transform here, but it’s the same with other browser prefixes.

×