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

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

Community Beginner ,
May 18, 2017 May 18, 2017

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;

Views

503

Translate

Translate

Report

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.

Votes

Translate

Translate
Adobe Employee ,
May 18, 2017 May 18, 2017

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

Thank you for your help.

Votes

Translate

Translate

Report

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

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.

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

LATEST

Thank you for your help.

Votes

Translate

Translate

Report

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