Scale a movie clip dynamically using JS (canvas document)

[Beardmancer]

Hello all,

I am coming back to Animate CC after using Flash many years ago. Currently, I'm playing with a fullscreen page based on Joseph Labrecque's excellent demo.

Original from Joseph: http://inflagrantedelicto.memoryspiral.com/2016/02/responsive-scaling-in-animate-cc/

My example: http://iantompkins.com/animate/responsive3.html

So far, I have managed to modify the published html so that the canvas size is changed the width and height of the window when the page loads. Joseph's code does a good job pinning the movie clips to certain places in the window.

What I need now is to be able to change the width and height of a movie clip at different window sizes, much like breakpoints on a responsive site. You can see in my example that I have added a translucent white box. Ideally, I would like this box to be the size of the window, and I would load content into it when a button is clicked. Is there a way to alter a movie clip's dimensions with javascript?

I have tried something like this on frame 1, where "win1" is the instance name of the white box, but this was honestly just a shot in the dark:

var r = this;
var objw = stage.canvas.width;
var objh = stage.canvas.height;
r.win1.width = objw;
r.win1.height = objh;

Any ideas on what I could try next?

[kglad]

what's not working when using the default responsive setting?

[Beardmancer]

When I include those settings, publish, and change the html file to make the canvas fill the window, it behaves the same as without the settings checked. The translucent white box still does not scale, but rather bleeds off the edge of the window. Here is an example: http://iantompkins.com/animate/responsive4.html

[Beardmancer]

Oh, and if I include the default responsive settings with no custom code on frame 1 or after publishing, then the entire composition and all of it's content scales proportionally as expected. This is not the behavior I am after due to the way it looks on a screen in portrait orientation. Here is an example: http://iantompkins.com/animate/responsive5.html

[kglad]

i'm not sure what you don't like about that link, but if you want your stage to stretch to fit the browser window, select that option.

if you want the stage to stay the same size but be centered, just add centering css.

[Beardmancer]

Ummm, okay... maybe this will clarify. The example on the right expands to the edges of the window and fills the space it is given nicely, while the example on the left conforms to a certain aspect ratio and leaves undesirable white space. I could make the canvas square, center it, and fill the background of the html document with red, but it would still create unmanaged white space on many screens.

I much prefer the right example, but I wish to make the white box (currently a movie clip) change size along with the canvas.

Does that make more sense?

[kglad]

did you select stretch to fit?

if so, show your publish settings that verify that.

[Beardmancer]

No, I did not select stretch to fit on that example. I did on this one, though: http://iantompkins.com/animate/responsive6.html

In this case, the canvas stays in the same aspect ratio and continues beyond the edge of the window, creating scroll bars that are undesired.

Here is a screen grab of the publish settings for responsive6 if it helps clarify anything.

[ClayUUID · Accepted solution]

There's no such instance properties as .width and .height in Canvas mode. You set .scaleX and .scaleY to resize objects. For your use case I'd recommend making the clip's native dimensions 100x100 so the math is as straightforward as possible. When that isn't possible you can use a clip's .nominalBounds.width and .nominalBounds.height to determine the scale factor.

EaselJS v0.8.2 API Documentation : DisplayObject

[Beardmancer]

Aha, I think this is what I'm looking for. I'm going to give it a shot and report back. Thanks!

ClayUUID wrote:

There's no such instance properties as .width and .height in Canvas mode. You set .scaleX and .scaleY to resize objects. For your use case I'd recommend making the clip's native dimensions 100x100 so the math is as straightforward as possible. When that isn't possible you can use a clip's .nominalBounds.width and .nominalBounds.height to determine the scale factor.

EaselJS v0.8.2 API Documentation : DisplayObject

[avid_body16B8]

Just curious.

What is more costly:

• using the scaleX, scaleY property to resize a button for example on click event
• using a symbol inside the button with visible = false and make it visible on click event

Do we have a way to measure these?

[ClayUUID]

Changing scale costs nothing, since scaling is calculated every frame no matter what.

Adding objects to the display list obviously has a cost, because it has to draw more things.

[avid_body16B8]

Makes sense. Just wanted to be sure I was using the better method.