Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Create content for the HTML5 canvas tag

In this tutorial we are going to download and install one of the plug-ins that allows us very simply to set up animation and interactivity in canvas.

Create content for the HTML5 canvas tag

Put your graphics straight into canvas in HTML5 with Illustrator

Following the jaw-dropping demonstration of Adobe Edge Prototype, a Flash style environment for creating interactive canvas content at the Adobe MAX conference (2010), you’ve probably been itching to get your hands on it. Until this is released as beta we’re all stuck with hand coding… well, maybe not. Illustrator has had some plug-ins written for it from Adobe and third parties that give some amazing functionality right now, allowing you to create interactive animations for the canvas tag.

In this tutorial we are going to download and install one of the plug-ins that allows us very simply to set up animation and interactivity in canvas. One of the issues of exporting to canvas is that all the information is stored in the drawing commands, made up of moveTo, lineTo etc. When it comes to moving content this becomes slow as the processor has to continually draw all of this each frame. So for complex shapes, we are going to export those as PNG images, to make the animation smoother. While on the subject of animation, it’s reasonably smooth in WebKit browsers like Chrome and Safari, but very stuttery in Firefox, so as yet it’s not going to see off Flash for some time!

You can download the project files by clicking here.

This tutorial originally appeared in Web Designer issue 179 (13/01/11), authored by Mark Shufflebottom.

1) Get a copy of AI > Canvas

Open the page http://visitmix.com/labs/ai2canvas/ in your web browser and download the plug-in for your operating system. When the ZIP file has downloaded and extracted, you will have an Illustrator plug-in file. Open the Illustrator application folder on your server and drop the plug-in into the plug-ins folder.

2) Start Illustrator

Open Illustrator and create a new document, choose ‘web’ for the profile and change the pixel settings to 1024 x 768. Click OK. From the disc open the file ‘logo.ai’ from the ‘start’ folder. Select all and copy the image. Close the logo and paste the logo in your new document.

3) Export to canvas

Add some text as shown in the screenshot above to complete the logo. Once you’ve done that go to File>Save, saving the file as ‘canvas.ai’. Now choose File>Export and export as ‘<canvas>, (html)’ in the same place as you saved your file. The exported file will open in your web browser, take a look at the source code.

4) Animation path

Two points you’ll notice from the export: the typeface didn’t come across and the source code was long. We will animate this logo, so we’ll change it into a PNG file to let the processor draw less each frame. Create a new layer and add an oval shape. Double-click the layer and name it ‘logoPath(type: animation; direction: forward; duration: 25);’.

5) Change the logo name

Double-click the logo layer and change the name to ‘logo(rasterize:logo; origin: center; animation: logoPath);’. This will turn the image into a png and use the logoPath layer as the motion path for this layer. Export the file again and you will see the animation happening in your browser, but you’ll notice that the logo is being slightly clipped.

6) Add a background

From the project files, open the file ‘background.ai’. Click on the large green box and make sure both the gradient panel and colour panel are open. Drag the green colour from the colour panel to the black part of the gradient panel. Click on the white side of the gradient and in the colour panel change the colour to RGB and a light yellow as shown.

7) Change the gradient direction

In the toolbar select the Gradient tool then click and drag from the bottom of the rectangle all the way to the top. Once this is done grab the sun burst from the bottom of the document and drop it exactly over the rectangle that you have changed the gradient on. Press Ctrl/Cmd+A, then Ctrl/Cmd+C to select all and copy all.

8) Paste the background

Switch documents and lock both layers that you’ve made already. Add a new layer and position it below the others in the layer stack. Press Ctrl/Cmd+V to paste your background. Double-click this layer and rename the layer to ‘bg(rasterize:bg; crop: yes);’. Now export again to see your fully working animation in the canvas tag.

9) Add the cloud

From the project files, open the file ‘cloud.ai’, press Ctrl/Cmd+A, then Ctrl/Cmd+C to select and copy. Close this document down and lock the background layer in your main document. Add a new layer and position this layer above the background layer. Paste in the cloud and position on the screen as shown in the screenshot.

10) Cloud animation path

Double-click the cloud layer and name the layer ‘cloud(rasterize:cloud; origin: center; animation: cloudPath);’. Now lock this layer and create a new layer just below the cloud layer. Use the Pen tool to draw in a wavy path as shown in the screenshot. Notice how the path starts and finishes over the edges of the document, this is important.

11) Test the animation

Double-click the path la
yer and add the name ‘cloudPath(type: animation; direction: forward; duration: 40);’. Save your file and export it to see the cloud move. You’ll see it’s clipped to the background so you can’t see it when it is not over the background. Make sure all layers are locked and add a new layer above the rest.

12) Loading the news

From the project files, open the file ‘man.ai’, press Ctrl/Cmd+A then Ctrl/Cmd+C to copy. Close down the file and paste into your new layer. Position as shown and name this layer ‘man();’. Now lock this layer, add a new layer above this and add an oval shape over the man, giving it no fill and no stroke colour.

13) Change the name

Double-click the layer and rename ‘blastClick();’. This layer is going to be the ‘clickable’ area for the interactivity. You can add the code later when you do the final export. Create a new layer and place it behind the man layer, this layer will contain a large explosion that will be triggered when we click the last layer.

14) Last layer

Use the Oval tool to draw a yellow-orange circle behind the man, as shown. With the circle selected go to Effects>Blur>Gaussian Blur. Give the circle a 4px blur and click OK. Rename the layer ‘blast(rasterize:blast; origin: center; scale-direction: grow; scale-duration: 6; scale-iterations: 1; scale-multiplier: 12; scale-offset: 1; scale-timing-function: expoEaseOut; alpha-direction: fade-out; alpha-duration: 6; alpha-iterations: 1);’.

15) Final export

Export the file for the last time, as you’ve finished constructing. You’ll notice that the explosion happens automatically, you can change this so that it happens when you click the oval shape above the man. Open the HTML file in Dreamweaver so you can amend the code.

16) Comment code out

Open the source code and look at line 99 and 100, you need to stop the blast animation happening automatically so comment out line 99 and 100 by adding two slashes at the front of the line. Add the canvas event listener after the setInterval (line 103). This will add interactivity to the canvas element. There is a full stop before the event listener is added. The full stop denotes the adding of the event listener to the canvas.

001 //blast.scaleClock.start();
002 //blast.alphaClock.start();
003 // Set animation timer
004 setInterval(drawFrame, (1000 / fps));
005 canvas.addEventListener(“click”, myClick,
false);

17) Final code

On line 106 after the closing bracket of the init() function, add the code as shown. This is the function that is called when the man is clicked. This allows the blast to happen and resets it once the blast animation has played so that it can be played again. Once done, save the file and preview the HTML page in your browser to test it out. Once in the browser your animation will automatically start to play. If all is correct the logo should be circling in the left-hand side of the canvas, while the cloud will slowly drift past in the background. Once the cloud reaches the other side of the document it will reset and start again. Clicking on the man in the image will trigger the function we’ve just added and this will cause an explosive blast, demonstrating interactivity within the canvas element.

001 function myClick(e) {
002 blastClick(ctx);
003 var x = e.clientX + document.body.scrollLeft +r
004 document.documentElement.scrollLeft - canvas.offsetLeft;
005 var y = e.clientY + document.body.scrollTop +
006 document.documentElement.scrollTop - canvas.offsetTop;
007 if (ctx.isPointInPath(x, y)) {
008       blast.scaleClock.restart();
009       blast.alphaClock.restart();
010         }
011 }
×