How to proportionally scale exported Flash CS6 canvas animation to fit browser window?
Hello,
I have HTML5 canvas animation movie sitting on a HTML page, created by using Flash CS6 'Toolkit for CreateJS'
I would like to know how to tweak the HTML javascript code or .js file that are automatically created by the Flash CS6 CreateJS toolkit in order to make the HTML5 canvas animation movie to fit on the browser window proportionately when the browser windows are resized.
If it is possible, please show me how to accomplish.
HTML code:
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="TestingA.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.TestingA();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
//createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1200" height="800" style="background-color:#ffffff"></canvas>
</body>
.js code:
(function (lib, img, cjs) {
var p; // shortcut to reference prototypes
// stage content:
(lib.TestingA = function() {
this.initialize();
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#0000FF").ss(1,1,1).p("EBaLA7QMi0VAAAMAAAh2gMC0VAAAg");
this.shape.setTransform(600,400,0.953,0.923);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#00FFFF").s().p("EhaKA7RMAAAh2gMC0VAAAMAAAB2gg");
this.shape_1.setTransform(600,400,0.953,0.923);
// Layer 2
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f().s("#0000FF").ss(1,1,1).p("EBd5A+cMi7xAAAMAAAh83MC7xAAAg");
this.shape_2.setTransform(600,400,0.999,1.001);
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.f("#99FF33").s().p("Ehd3A+cMAAAh83MC7vAAAMAAAB83g");
this.shape_3.setTransform(600,400,0.999,1.001);
this.addChild(this.shape_3,this.shape_2,this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,1200,800);
})(lib = lib||{}, images = images||{}, createjs = createjs||{});
var lib, images, createjs;
AdChoices