
Export to canvas using publish settings in the window panel; enable loop in timeline, publish with images, sounds, and libraries, exporting Flash content into createjs code with compact shapes.
Learn to integrate new game code, preload sounds with a manifest, handle loader completion, reset the title, and start the game by clicking the button.
Detect ground clicks to set the hero's target position and update the stage at 30 fps. Flip the hero for direction and animate walking toward the target.
Learn to control enemy's visibility with a control function that toggles visibility in attack and retreat, and add a click handler to hide the enemy when it takes the egg.
Animate collectibles by dropping an egg when you click an enemy, using the eggdrop flag to move it downward, and remove it with a ground splat after scoring.
Explore collision detection in a HTML5 and CreateJS tutorial by calculating distances and radii to detect hero-egg and hero-nest collisions, triggering collection and holding the egg.
In this training video on creating Interactivity with HTML5 and CanvasJS, author and designer Mark Shufflebottom will introduce you to CanvasJS and how to use it with the HTML5 Canvas to create rich, interactive content.
Throughout the course of this tutorial, Mark uses the example of an interactive game to show you how to use CanvasJS. You will build this game using EaselJS and Flash components (provided in the working files), and along the way learn how to create mouse interactions, debugging, create animation and movement, deal with collisions and much more.
By the completion of this training course, you will be familiar with the Canvas tag for HTML5, and using EaselJS to create interactive content for your website. Working files are included to allow you to follow along and use the same files that the author uses throughout the training.