Copy link to clipboard
Copied
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;
If you can, you should upgrade to Animate CC, which handles this sort of thing natively.
Otherwise...
Re: How can I make the size of Animate CC's 'Canvas' output be responsive within an HTML page?
Note that the example there doesn't adjust the canvas resolution along with the scaling, so things will get pixelated as they're scaled up.
Copy link to clipboard
Copied
I am not sure about Flash Pro CS6, but found an article for Flash Pro CC
Edge Animate to Animate CC: Responsive Scaling and Positioning – In Flagrante Delicto!
Creating HTML5 Ads with Animate CC: Responsive Canvas Scaling | Creative Cloud blog by Adobe
Thanks,
Preran
Copy link to clipboard
Copied
Thank you for your help.
Copy link to clipboard
Copied
If you can, you should upgrade to Animate CC, which handles this sort of thing natively.
Otherwise...
Re: How can I make the size of Animate CC's 'Canvas' output be responsive within an HTML page?
Note that the example there doesn't adjust the canvas resolution along with the scaling, so things will get pixelated as they're scaled up.
Copy link to clipboard
Copied
Thank you for your help.