topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

mobile-graphic-easel-examples-Transform-simple.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
      <title>EaselJS: Simple Transform Example</title>
  
          <link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
  
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Shape.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Graphics.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-Ticker.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Bitmap.js"></script>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
      <script type="text/javascript">
          var img;
          var stage;
          var angle;
  
          function init() {
                  if (window.top != window) {
                          document.getElementById("header").style.display = "none";
                  }
  
              angle = 0;
              img = new Image();
              img.onload = handleImageLoad;
              img.src = "mobile-graphic-easel-examples-assets-rotateDemoBot.png";
          }
  
          function stop() {
                          createjs.Ticker.removeEventListener("tick", tick);
          }
  
          function handleImageLoad() {
              var canvas = document.getElementById("testCanvas");
              stage = new createjs.Stage(canvas);
              stage.autoClear = true;
              bmp = new createjs.Bitmap(img);
              bmp.regX = img.width >> 1;
              bmp.regY = img.height >> 1;
              bmp.x = canvas.width - (img.width/2)>>1;
              bmp.y = 140+canvas.height - (img.height/2)>>1;
              bmp.scaleX = bmp.scaleY = 0.1;
              stage.addChild(bmp);
              stage.update();
  
                          createjs.Ticker.addEventListener("tick", tick);
          }
  
          function tick(event) {
              angle += 0.025;
              var value = (Math.sin(angle) * 360);
  
              bmp.setTransform (bmp.x , bmp.y , bmp.scaleX , bmp.scaleY , value/2 , bmp.skewX , bmp.skewY , bmp.regX , bmp.regY );
              bmp.scaleX = bmp.scaleY = ((value)/360) + 0.25;
              stage.update(event);
          }
  
      </script>
  </head>
  <body onload="init()">
  
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> Simple Transform Example</h1>
              <p>A simple example of EaselJS transformations.</p>
          </header>
  
      <canvas id="testCanvas" width="960" height="400"></canvas>
  
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.