Responsive object in Adobe Animate Canvas.

[Rob_NZ]

I have an object that acts as a background image with nested animations that I'd like to be responsive to fit the total width of the viewport if the user resizes the browser window while keeping the width and height aspect ratio.

I presume this would be done with scaleX and scaleY but I'm not sure how to convert to pixel values and how to scale the width and height while keeping the aspect ratio. 

[kglad]

click file>publish settings and select the options you want

[Rob_NZ]

Thanks, but that scales everything on the stage. I should have mentioned that I'd like to scale only the background while preserving the dimensions of other objects on the stage. 

[kglad]

you want to scale the background and then unscale the children of the background?

[Rob_NZ]

Effectively yes. The catch is the background is an object that has nested animations. I want that backgound image with nested animations to scale and fill the viewport. I have other objects on the stage that preserve their dimensions and are responsive in layout. That part I have sorted.

I guess I'm looking for a formular that converts scaleX, scaleY to pixel values so I can use it with something like window.innerWidth, window.innerWidth. For example, how do you determine scaleX to know the inner width of a browser and fill it. Not sure if that's a practical way of doing this though!

[kglad]

you don't need to convert.   just scale:

obj.scaleX = window.innerWidth/obj.nominalBounds.width

[Rob_NZ]

That worked for perfectly for width, thanks! How do I now maintain the width and height aspect ratio?

[kglad]

function scaleObj(obj){

var w = obj.nominalBounds.width;

var h = obj.nominalBounds.height;

if(w/h>=window.innerWidth/window.innerHeight){

obj.scaleX = window.innerWidth/w;

obj.scaleY = window.innerWidth/w;

} else {

obj.scaleX = window.innerHeight/h;

obj.scaleY = window.innerHeight/h;

}

}

p.s. scaling the stage, you'll want to edit that code.

[Rob_NZ]

Thanks so much! That almost works perfectly. The background object scales perfectly within the background dimensions, however stops scaling when exceeding the object dimensions.

I really appreciate your advice and help.

[kglad]

obj stops scaling when?

[Rob_NZ]

Hopefully the screenshots give clarification.

[kglad]

is the stage size changing in screen1? (eg, in your publish settings you enabled scale to fit)

[Rob_NZ]

The background stops scaling up in screen1 and the objects I have set to responsively sit on the right-hand side of the stage are clipped off. I presume the canvas or stage size has to be scaled as well? 

When I use 'scale to fit' in publish settings, it scales all objects on the stage (which I don't want) and messes with the responsive layout of the other objects as well. I just need the background only to scale to fit the entire browser window. 

[kglad]

i can't explain (actually, i still don't understand) what you're seeing without spending more than a few minutes working on this.  even 10 or 15 minutes, i don't mind expending without charge to help others via the adobe forums.

but if it looks likes it's going to require much more time, i ask to be paid.  perhaps someone else will be able to help you via the forums without charging anything.  (or, if you want to hire me to continue helping, send me a private message.)

[Rob_NZ]

Hey, I totally understand. I really appraciate what you've helped out with so far, you've solved most of what I was trying to achieve. 

I'll start a new topic and be clearer as to what I'm trying to achieve. Hopefully someone can help out there. 

[kglad]

you're welcome, and good luck!