Friday, 21 December 2012

Mouse events in EaselJS

I have written some quick code to try out the mouse events in EaselJS. The code creates 50 circle shapes and places them randomly on the stage. The click, mouse over and mouse out events have been added to the circles. When a circle is clicked it will gets removed from the stage using the removeChild(). The mouse over/out events toggles the transparency of the circles.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
 <style> 
    #canvas{border: 1px solid #999999;} 
 </style> 
</head>
<body onload="init()">
 <canvas id="canvas" width="640" height="480"></canvas>
 <script src="easel.js"></script> 
 <script>
  var stage;
  
  function init()
  {
   stage = new createjs.Stage('canvas');
   stage.enableMouseOver();
            
   createjs.Ticker.setFPS(60);
   createjs.Ticker.addEventListener("tick", tick);
   
   for(var i = 0; i < 50; i++){
    var circle = new createjs.Shape();
    circle.graphics.beginFill("#" + Math.floor(Math.random() * 0xFFFFFF).toString(16));
    circle.graphics.drawCircle(0,0, Math.floor(Math.random()*50) + 10);
    circle.graphics.endFill();
    circle.x = Math.random() * stage.canvas.width;
    circle.y = Math.random() * stage.canvas.height;
    circle.addEventListener('click', clickHandler);
    circle.addEventListener('mouseover', overOutHandler);
    circle.addEventListener('mouseout', overOutHandler);
    circle.cursor = 'pointer';
    stage.addChild(circle);
   }
   
  }
  
  function overOutHandler(e)
  {
   if(e.type == "mouseover") e.target.alpha = 0.5;
   if(e.type == "mouseout") e.target.alpha = 1;
  }
  
  
  function clickHandler(e)
  {
   stage.removeChild(e.target);
  }
  
  function tick(e)
  {
   stage.update();
  }

 </script>
</body>
</html>

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP