AS3 Dynamic Grid to HTML5 via CreateJS? - html

Question

Basically, I've built a grid in AS3. Now, I would like to turn it into html5/JS with the new CreateJS ToolKit.
My problem - when I 'publish' to html, I get an empty canvas.
Here is my AS3 code:
var boxNum:int = 2151;
// we need to know how many columns our
// grid is going to have
var cols:int = 72;
// calculate how many rows we need based on
// boxNum and cols
var rows:int = Math.ceil(boxNum / cols);
// the number of boxes attached to the stage
var boxCount:int = 0;
for (var py:int = 0; py<rows; py++) {
for (var px:int = 0; px<cols; px++) {
// make sure we haven't exceeded boxNum
if (boxCount < boxNum) {
var box:Box = new Box();
box.x = 10 + (box.width + 2) * px;
box.y = 10 + (box.height + 2) * py;
addChild(box);
boxCount++;
}
}
}

Answer 1

AS3 code is not converted by the Toolkit. Currently, you have to write JavaScript, and wrap it in /*js */ tags on the timeline, or do all the coding outside of Flash.
Note that JavaScript doesn't support typed variables, you need to use "this" when referencing the current scope, and the "Box" will likely be available as a property of the generated "libs" object.
The Toolkit exported content should already set up a Ticker for you, and add your main Flash root (called "exportRoot" in the default exported code) to the Stage.
/* js
var boxNum = 2151;
var cols = 72;
var rows = Math.ceil(boxNum / cols);
var boxCount = 0;
for (var py = 0; py<rows; py++) {
for (var px = 0; px<cols; px++) {
if (boxCount < boxNum) {
var box = new libs.Box();
box.x = 10 + (box.width + 2) * px;
box.y = 10 + (box.height + 2) * py;
this.addChild(box);
boxCount++;
}
}
}
*/
Future versions of Flash will hopefully allow you to code this right on the timeline, instead of in a code comment block.