Crear juegos HTML5 con CreateJS en Flash

Hola! En este videotutorial aprenderemos a crear juegos en HTML5 con el componente CreateJS para Adobe Flash Pro, creado por Grant Skinner.
Lo probé en IE, FireFox, Chrome, Safari, iPhone/iPad y funciona perfecto



Archivos y ejemplo

• CreateJS
  
• Descargar Archivos del Tutorial
  
• Un ejemplo de un juego en CreateJS como background de web
  

Juego.js:

Código :

if (!window.lib) { window.lib = {}; }

var p; // shortcut to reference prototypes

// stage content:
(lib.juego = function() {
   this.initialize();

   // puntaje
   this.txtPuntaje = new Text("Puntaje: 0", "20px Tahoma", "#9b0000");
   this.txtPuntaje.textBaseline = "top";
   this.txtPuntaje.lineHeight = 22;
   this.txtPuntaje.lineWidth = 211;
   this.txtPuntaje.setTransform(2,2);

   this.puntaje = 0;

   // globos
   this.instance = new lib.AniHorizontal();
   this.instance.setTransform(935.3,365.5,0.745,0.745,0,0,0,35,60);

   this.instance_1 = new lib.AniHorizontal();
   this.instance_1.setTransform(1226.4,62.2,1,1,0,0,0,35,60);

   this.instance_2 = new lib.AniHorizontal();
   this.instance_2.setTransform(1194.4,246,1,1,0,0,0,35,60);

   this.instance_3 = new lib.AniHorizontal();
   this.instance_3.setTransform(716.5,378.1,0.704,0.704,0,0,0,35,60);

   this.instance_4 = new lib.AniHorizontal();
   this.instance_4.setTransform(1038.4,96,1,1,0,0,0,35,60);

   this.instance_5 = new lib.AniHorizontal();
   this.instance_5.setTransform(1043.3,274,1,1,0,0,0,35,60);

   this.instance_6 = new lib.AniHorizontal();
   this.instance_6.setTransform(926.3,236,1,1,0,0,0,35,60);

   this.instance_7 = new lib.AniHorizontal();
   this.instance_7.setTransform(824.4,160,1,1,0,0,0,35,60);

   this.instance_8 = new lib.AniHorizontal();
   this.instance_8.setTransform(690.3,102,1,1,0,0,0,35,60);

   // fondo
   this.instance_9 = new lib.fondo();

   this.addChild(this.instance_9,this.instance_8,this.instance_7,this.instance_6,this.instance_5,this.instance_4,this.instance_3,this.instance_2,this.instance_1,this.instance,this.txtPuntaje);
}).prototype = p = new Container();
p.nominalBounds = new Rectangle(0,-3.6,1261.7,483.7);


// symbols:
(lib.AniHorizontal = function(mode,startPosition,loop) {
   this.initialize(mode,startPosition,loop,{},true);

   // timeline functions:
   this.frame_0 = function() {
      this.globo.gotoAndPlay('inicio');
   }

   // actions tween:
   this.timeline.addTween(Tween.get(this).wait(0).call(this.frame_0).wait(194));

   // animacion horizontal
   this.globo = new lib.AniVertical();
   this.globo.setTransform(35,60,1,1,0,0,0,35,60);

   this.timeline.addTween(Tween.get(this.globo).to({x:-1265.1},148).wait(46));

}).prototype = p = new MovieClip();
p.nominalBounds = new Rectangle(1.8,-5.8,68.5,173.8);


(lib.AniVertical = function(mode,startPosition,loop) {
   this.initialize(mode,startPosition,loop,{inicio:0,final:60},true);

   // timeline functions:
   this.frame_0 = function() {
      this.instance.onClick = function(e) {
         this.parent.gotoAndPlay('final');
         exportRoot.puntaje += 15;
         exportRoot.txtPuntaje.text = "Score: " + exportRoot.puntaje;
      };
   }
   this.frame_59 = function() {
      this.gotoAndPlay('inicio');
   }
   this.frame_60 = function() {
      playSound("swosh",0);
   }
   this.frame_77 = function() {
      this.stop();
   }

   // actions tween:
   this.timeline.addTween(Tween.get(this).wait(0).call(this.frame_0).wait(59).call(this.frame_59).wait(1).call(this.frame_60).wait(17).call(this.frame_77).wait(1));

   // globo
   this.instance = new lib.ImgGlobo("synched",0);
   this.instance.setTransform(35,60,1,1,0,0,0,35,60);

   this.timeline.addTween(Tween.get(this.instance).to({y:23.1},29).to({y:60},30).to({y:44},1).to({y:-625.9},17).wait(1));

   // comida
   this.instance_1 = new lib.ImgComida("synched",0);
   this.instance_1.setTransform(35.5,140.5,1,1,0,0,0,30,27.5);

   this.timeline.addTween(Tween.get(this.instance_1).to({y:107.5},29).to({y:140.5},30).to({y:126.2},1).to({rotation:-44.8,x:35.6,y:551.2},17).wait(1));

}).prototype = p = new MovieClip();
p.nominalBounds = new Rectangle(1.8,-5.8,68.5,173.8);


(lib.ImgGlobo = function() {
   this.initialize();

   // dibujo globo vectorizado
   this.shape = new Shape();
   this.shape.graphics.rf(["rgba(255,112,112,0.702)","rgba(255,0,0,0.702)"],[0.235,1],0.4,-30.8,0,0.4,-30.8,58.8).p("AD1n6QhmhmiQAAQiRAAhmBmQhmBnAKCIQAJCIBqDHQBiC5BwAFIgNANIABABQALAGAJABQALABALgJIgOgNQB4gJBsi7QBti8AFiLQAEiKhmhn").f().s("#ffffff").ss(1,1,1,3).p("AgHEXIAAFK");
   this.shape.setTransform(36,55);

   this.addChild(this.shape);
}).prototype = p = new Container();
p.nominalBounds = new Rectangle(1.8,-5.8,68.5,121.7);


(lib.ImgComida = function() {
   this.initialize();

   // Capa 1
   this.instance = new lib.comida();

   this.addChild(this.instance);
}).prototype = p = new Container();
p.nominalBounds = new Rectangle(0,0,60,55);


(lib.comida = function() {
   this.initialize(images.comida);
}).prototype = new Bitmap();
p.nominalBounds = new Rectangle(0,0,60,55);


(lib.fondo = function() {
   this.initialize(images.fondo);
}).prototype = new Bitmap();
p.nominalBounds = new Rectangle(0,0,640,480);

Dedicado a Freddie y Mariux, siempre me gustan sus opiniones constructivas