Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

How to proportionally scale exported Flash CS6 canvas animation to fit browser window?

Community Beginner ,
May 18, 2017 May 18, 2017

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;

624
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 18, 2017 May 18, 2017

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.

Translate
Adobe Employee ,
May 18, 2017 May 18, 2017
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 18, 2017 May 18, 2017

Thank you for your help.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 18, 2017 May 18, 2017

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 18, 2017 May 18, 2017
LATEST

Thank you for your help.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines