Rescale animation when browser is resized.

EvanF · January 4, 2022, 3:43am

Problem:
Hi,
I am new here. I’ve been trialling the demo before buying, so apologies if this question has already been answered at some other time, or year.

I’ve created a simple animated infographic with absolute pixel sizing and now want to see if I can change the animation to relative % sizing. I’ve figured out how to change the scene to % instead of pixels and gone through the ordeal of converting all the SVG objects to Width/Height %, but it’s not quite right. The timeline animations are not scaling to the correct distances. So the % animation (movie?) is not as exact as the absolute pixel version.

Is there a script I can put into the HTML document to rescale the animation to the browser size? And if not, how do I ensure the timeline animations scale accordingly?

I really appreciate any help you can provide.

Saola Animate version: 3

OS: Win10

Update:

Since my original post, I have figured out that if I changed the left and top/bottom coordinates to % on each scene element, I could achieve the elastic resize I was after. The issue that threw me was the background SVG retained its proportionate X/Y scaling. However, if I edited the SVG in the resources pane and copied the code onto the canvas, then the X/Y axis became independent of each other.
I imagine this workaround will be addressed in a future update:

I would like to be able to have a rescaling animation with a single click of a button as an option (on top of the responsive/adaptive page option).
I would like to import an SVG infographic and edit the separate images contained within. Copy-pasting code from the resource pane to enable editable SVG seems a roundabout way of getting there.

ToanLS · January 4, 2022, 5:08am

Hi Evan,

If you want to scale entire the scene with all elements and animations to fit the browser window, you should use px unit, and select the AutoFit checkbox in Document pane. This method is more convenient than using ‘%’ unit.

Regarding the SVG issue, the SVG element in Canvas should be updated automatically when you finish editing its corresponding resource in Resources pane.
If it’s not the case, please share your project package (File > Save As > Package) to support@atomisystems.com so that we can check.

Regards

EvanF · January 4, 2022, 5:57am

Thank you, thank you, thank you, I did not see the autofit option in the document pane as the Scene pane covered the top part of it. Easy solution, it scales well!

Great program! Saola Animate in some ways reminds me of an excellent program I used to use in the late 90’s early 00’s. Macromedia Director.

As an aside the approach I took allowed the background SVG to elongate and stretch to fit the browser window which might come in useful someday.