This example shows an image moving to the mouse position inside a canvas tag compared to Flash. The HTML5 version uses the EaselJS javascript library and comes from gotoAndLearn() and Activetuts+ tutorials. Both versions are set at 60fps. View a demo here.
HTML5:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas EaselJS Flash Move Image</title>
<script src="easel.js"></script>
<script>
var stage;
var cookieImage = new Image();
var cookie;
function init() {
stage = new Stage(document.getElementById("canvas"));
cookieImage.src = 'cookie.png';
cookieImage.name = 'cookie';
cookieImage.onload = loadGraphics;
}
function loadGraphics() {
cookie = new Bitmap(cookieImage);
buildInterface();
}
function buildInterface() {
cookie.regX = cookie.image.width*0.5;
cookie.regY = cookie.image.height*0.5;
stage.addChild(cookie);
Ticker.setFPS(60);
Ticker.addListener(window);
}
function tick() {
cookie.x += (stage.mouseX-cookie.x)*0.1;
cookie.y += (stage.mouseY-cookie.y)*0.1;
stage.update();
}
</script>
<style>
body {
font-family: Verdana, Geneva, sans-serif;
color: #333;
}
canvas {
background-color: #CCC;
}
</style>
</head>
<body onLoad="init()">
<div>
<h1>Canvas EaselJS</h1>
<canvas id="canvas" width="600" height="400"></canvas>
</div>
</body>
</html>
AS3:
import flash.events.Event;
import flash.events.MouseEvent;
function easeCookie(e:Event):void {
cookie_mc.x += (stage.mouseX-cookie_mc.x-cookie_mc.width*0.5)*0.1;
cookie_mc.y += (stage.mouseY-cookie_mc.y-cookie_mc.height*0.5)*0.1;
}
stage.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
function manageMouseOver(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
stage.addEventListener(Event.MOUSE_LEAVE, manageMouseOut);
stage.addEventListener(Event.ENTER_FRAME,easeCookie);
stage.frameRate = 60;
}
function manageMouseOut(event:Event):void{
stage.removeEventListener(Event.MOUSE_LEAVE, manageMouseOut);
stage.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
stage.removeEventListener(Event.ENTER_FRAME,easeCookie);
stage.frameRate = 0;
}