OO JS for AS3 Devs
Upcoming SlideShare
Loading in...5
×
 

OO JS for AS3 Devs

on

  • 1,673 views

 

Statistics

Views

Total Views
1,673
Views on SlideShare
1,673
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • function myClass() {      this.add = function(a, b)          {          return a + b;      }; } var c = new 

OO JS for AS3 Devs OO JS for AS3 Devs Presentation Transcript

  • OO JS for AS3 Devs Object-Oriented JavaScript for ActionScript 3 Developers
  • Pirates vs Ninjas
    • Pirate
    • Ninja
  • JS vs AS3
      • Object
      • Number
      • String
      • Boolean
      • Object
      • Object
      • Array (Object) 
      • Date
      • Function
      • Function
      • Prototype
      • <Script src=&quot;&quot;/>
      • Function
      • Object
      • Number | int | unit
      • String
      • Boolean
      • Array
      • Dictionary
      • Array
      • Date
      • Function
      • Class
      • Prototype
      • Import
      • Getter / Setter
  • No Strong Types in JS
    • var myVar1;
    • var myVar1 = 10;
    • var myVar1, myVar2, myVar3;
    • var myVar = [];
    • myVar.push(&quot;foo&quot;);
    • const EVENT_NAME = &quot;name&quot;
    var myVar:Object public myVar public function myFunct():String function myFunct():String package {}, class {}  extends, implements, final, internal, public, private GOOD PUPPY  BAD PUPPY 
  • 'Classes' in JS    
      • Everything is an Object or Function
      • Functions are pushed to the limits
      • A JS Class is just a Function
      • Function 'scope' rules are used for to create public, private spaces
      • Inheritance is wacky ( will get to this later )
      • Prototype is wacky ( will get to this later )
    •  
    • function myClass()
    • {
    •      this.add = function(a, b)    
    •      {
    •          return a + b;
    •      };
    • }
    • var c = new myClass();
    • c.add(1, 1);
    • TEST IN FIREBUG
  • Getters / Setters
    • function Puppy()
    • {
    •      var _evil = 1000;
    •      this. getEvil = function()
    •      {
    •          return _evil;
    •      };
    •      this. setEvil = function(value)
    •      {
    •          _evil  = value;
    •      }
    • }
    • var evilPuppy = new Puppy();
    • evilPuppy. getEvil() ;
  • Self Executing Functions
    • function Puppy()
    • {
    •      var _evil = 999;
    •      this.getEvil = function()
    •      {
    •          return _evil;
    •      };
    •      (function init(value)
    •      {
    •          _evil = v;
    •      })(45)
    • }
    • var evilPuppy = new Puppy();
    • evilPuppy.getEvil();
  • Scope is a Pain!
    • function level_1()
    • {
    •      var good = 20;
    •      this.evil = 99;
    •      var timeout = setTimeout(function()
    •          {
    •              console.log(good);
    •              console.log(evil);
    •              console.log(this.evil);
    •          }, 500);
    • }
    • var x = new level_1();
  • Scope is a Pain - Part 2
    • function level_1()
    • {
    •      var good = 20;
    •      this.evil = 99;
    •      var scope = this;
    •      var timeout = setTimeout(function()
    •          {
    •              console.log(good);
    •              console.log(scope.evil);
    •          }, 500);
    • }
    • var x = new level_1();
  • Inheritance
    • Tons of ways to do Inheritance 
    • I will only cover one way
    • No &quot;extends&quot; in JS
    • Completely different way of thinking about it
    • Special property on Object named Prototype
    • function Animal()
    • {
    •      Animal.prototype.evil = 1000;
    •      Animal.prototype.getColor = function()
    •      {
    •          return &quot;Blood Red&quot;;
    •      }
    • }
    • function Puppy() 
    • {
    • }
    • Puppy.prototype = Animal.prototype;
    • var p = new Puppy();
    • p.getColor();
    • function Animal()
    • {
    •      Animal.prototype.evil = 1000;
    •      Animal.prototype.getColor = function()
    •      {
    •          return &quot;Blood Red&quot;;
    •      }
    • }
    • function Puppy() 
    • {
    • }
    • new Animal(); //(GOTCHA!)
    • Puppy.prototype = Animal.prototype;
    • var p = new Puppy();
    • p.getColor();
    • function Animal(){
    •      Animal.prototype.color = &quot;Blood Red&quot;;
    •      Animal.prototype.getColor = function()
    •      {
    •          return &quot;Evil &quot; + this.color;
    •      }
    • };
    • var a = new Animal();
    • console.log(&quot;Animal Color: &quot; + a.getColor());
    • function Puppy() {
    •      this.color = &quot;Blue&quot;;
    • }
    • Puppy.prototype = Animal.prototype;
    • var p = new Puppy();
    • console.log(&quot;Puppy Color: &quot; + p.getColor());
  • HTML5 <canvas> tag 
    • <body>
    • <canvas id=&quot;gameCanvas&quot; width=&quot;600&quot; height=&quot;600&quot;></canvas>
    • </body>
  • Get Pointer to <canvas> from JS
    • // javaScript
    • var canvas = document.getElementById('gameCanvas');
    • var context = canvas.getContext('2d');
  • Draw on <canvas> with JS
    • // javaScript
    • context.beginPath();
    • context.moveTo(0,0);
    • context.lineTo(0,100);
    • context.lineTo(100,100);
    • context.lineTo(100,0);
    • context.closePath();
    • context.strokeStyle = &quot;#000000&quot;;
    • context.fill();
    • context.fillStyle = &quot;#CCCCCC&quot;;
    • context.fill();
  • &quot;Animation&quot; (in quotes)
    • var intervalId = setInterval(drawCanvas, 1000 / 30);
    • function drawCanvas(){
    •      // clear everything
    •      context.clearRect(0,0, myWidth, myHeight);
    •      // redraw everything
    •      // Yes, you better know exactly 
    •      // where every pixel is at all times so 
    •      // you can redraw it at 30 FPS
    •      // :(
    • }
  • &quot;Animation&quot; (in quotes)
    • var intervalId = setInterval(smartDrawCanvas, 1000 / 30);
    • function smartDrawCanvas()
    • {
    •      // Clear only part of the canvas
    •      context.clearRect(25, 25, 50, 50);
    •      // redraw SOME of the canvas
    •      // TODO ....
    • }
  • Mouse Events on <canvas>
      • Cannot listen to events on any children on the <canvas>
      • Think of <canvas> as AS3 Bitmap
      • You can only listen on the main <canvas> object
      • You need to know where every 'interactive' object is the <canvas> at all times.
      • For clicks you need to calculate what was under the pixel that was clicked on
      • Observer pattern helps with this work
  • Gotchas
    • **JS** (for each works in FF, but not Chrome)
    • for (var x in myArray)
    • {
    •      var obj = myArray[x];
    •      obj.selected = false;
    • }
    • **AS3**
    • for each (var x:Object in myArray)
    • {
    •      x.selected = false;
    • }
  • Gotchas
    • var timeout = setTimeout(function()
    •      {        
    •          var x = passThruVar1;
    •          // x is undefined!!!
    •      }, 500, passThruVar1 , passThruVar2 );