In no particular order, here is a list of tricks/ tips that I can never recall:

Get and Set in JS

var log = [‘test’];

var obj = {

get latest () {

return log;

},

set latest (s) {

log = s;

}

}

obj.latest = ‘appleberry’;

console.log (obj.latest); // Will return "test".

var obj = {

get latest () {

return log;

},

set latest (s) {

log = s;

}

}

obj.latest = ‘appleberry’;

console.log (obj.latest); // Will return "test".

Array, Map and Fat Arrow

//Convert an HTML Collection to an array with [].slice.call()

//.map fires a function for each item

//Use a fat arrow function to create a parameter e and change the style of e

([].slice.call(document.getElementsByTagName("div"))).map(e => e.style.background = "blue");

//.map fires a function for each item

//Use a fat arrow function to create a parameter e and change the style of e

([].slice.call(document.getElementsByTagName("div"))).map(e => e.style.background = "blue");

Rotated Gradient Mesh

Rotating gradient meshes in as3 is deceptively difficult. I often forget to convert from degrees to rads.

import flash.display.MovieClip;

import flash.geom.Matrix;

import flash.geom.Matrix;

var mc:MovieClip = new MovieClip();

addChild(mc);

var _width:Number = 400;

var _height:Number = 300;

var _rotationRad:Number = 90*Math.PI/180;

var gm:Matrix = new Matrix();

gm.createGradientBox(_width,_height,_rotationRad);

mc.graphics.beginGradientFill("linear", [0xFFFFFF, 0xFF0000], [1,1], [0,255], gm);

mc.graphics.drawRect(0,0,_width,_height);

mc.graphics.endFill();

addChild(mc);

var _width:Number = 400;

var _height:Number = 300;

var _rotationRad:Number = 90*Math.PI/180;

var gm:Matrix = new Matrix();

gm.createGradientBox(_width,_height,_rotationRad);

mc.graphics.beginGradientFill("linear", [0xFFFFFF, 0xFF0000], [1,1], [0,255], gm);

mc.graphics.drawRect(0,0,_width,_height);

mc.graphics.endFill();

?: – Conditional Expression

A fun to write alternative to the IF statement is the ternary operator – ?:. I understand the term to describe any type of operator that has three arguments. I have almost literally written this thousands of times and can rarely remember the structure. In the case of the Conditional Expression, the arguments take the form condition ? trueValue : falseValue; as illustrated below.

var n:Number = 5;

var msg:String = (n <5)? "Less than 5": "5 or more!";

trace(msg);

var msg:String = (n <5)? "Less than 5": "5 or more!";

trace(msg);

Math.abs

Get the distance from zero of a number using Math.abs – you always get a positive number. “Doing the math” inline is often faster than calling a method, but I feel the improvement is insignificant for repetitions less than those in the order of millions – I can see where lookup tables become handy.

//This is faster than calling Math.abs(n)

//by my less than scientific tests, I’m getting about 2.4x faster with doing this inline over 5 million repetitions

trace((n < 0)? -n : n) ;

//by my less than scientific tests, I’m getting about 2.4x faster with doing this inline over 5 million repetitions

trace((n < 0)? -n : n) ;

//This is slower, but easier to remember

trace(Math.abs(n));

trace(Math.abs(n));

Draw a Circle – basic Trig

Draw a circle using a radius and starting point. This gives me the ability to place a point at any angle given a starting point.

//starting x and y position for the circle

var xStart:Number=200;

var yStart:Number=200;

var xStart:Number=200;

var yStart:Number=200;

//radius of the circle

var r:Number=50;

var r:Number=50;

graphics.lineStyle (0.5,0xFF9999,1);

graphics.moveTo(xStart,yStart);

graphics.moveTo(xStart,yStart);

//theta is the angle to draw at

for (var theta = 0; theta<=360;theta+=10){

//Convert theta angle to degrees

var rads = (Math.PI)/180 * theta;

for (var theta = 0; theta<=360;theta+=10){

//Convert theta angle to degrees

var rads = (Math.PI)/180 * theta;

//Opposite and Adjacent correspond to two sides of a right angled triangle

//and give us the x and y position for the next point on the circumference of our circle

var opposite = r*(Math.sin(rads));

var adjacent = r*(Math.cos(rads));

//and give us the x and y position for the next point on the circumference of our circle

var opposite = r*(Math.sin(rads));

var adjacent = r*(Math.cos(rads));

var xNext = xStart + opposite;

var yNext = yStart + adjacent;

var yNext = yStart + adjacent;

graphics.lineTo(xNext,yNext);

}

}

graphics.moveTo(xStart,yStart);

Closure and Passing Parameters Through a Handler

As an alternative to declaring global variables you can pass them directly to an event handler without extending it. The variables DON’T GET COLLECTED as long as the aHandler exists – beware of memory leaks!

var aHandler:Function = aFunction(Math.random()*10, Math.random()*10);

mc_btn.addEventListener(MouseEvent.CLICK, aHandler);

function aFunction(aParam, bParam):Function{

var clickHandler:Function = function (e:MouseEvent):void{

trace(aParam, bParam);

}

return clickHandler;

}

var clickHandler:Function = function (e:MouseEvent):void{

trace(aParam, bParam);

}

return clickHandler;

}

Radians and Degrees

Convert from degrees to radians

var rads = degrees *(Math.PI/180);

var degrees = rads /(Math.PI/180);

var degrees = rads /(Math.PI/180);