Scaling content together

I amy be misunderstanding your issue but have you looked at responsive-layouts

Hi Mark, Yes I guess using breakpoints rather than trying to get the document to auto scale to browser width is a good workaround, I should have explored that when I trailed pro but at the time I wasn’t creating something that needed to be browser responsive!
Do you think thats going to be the solution to what I’m trying to do?
A question about using responsive layouts in this way… it is going to be a complicated piece, with lots of layers, interactivity and separate animations - therefore what is the workflow? Do I create the largest breakpoint size in entirety and then do I have to manually resize each duplicate scene/animation to the new breakpoint width?

I have not used it yet myself.
The other thing is if you are using this within a wordpress site iframe. Will the scenes pick up the change in layout.
Others will have to answer this I think. But I also would like to know as I have had issues with scaling and iFrames on wordpress.

The breakpoints are not very useful, not without scaling working properly, as someone only needs to change the width of their browser screen to find a spot not covered by a breakpoint. I was working on an app for iOS with Hype. I had to create breakpoints for the iPhone 4, 5, 6 and 6+. Also, there was a breakpoint for the iPad. That doesn't include Android or desktop, which vary even more. Adding breakpoints dramatically increases the size of the project.

It would be easier to set breakpoints to ratios... 3:2, 4:3 and 16:9 ...then it would be more cross-platform compatible. Even though the iPhone 5, 6 and 6+ have the same ratio, it was three separate breakpoints for my project.

That's what I miss about Flash. The whole view would scale and maintain ratio. With Stencyl, there's a camera view, so the excess outside can be cropped - allowing for full-screen views.

"Drifting apart" is a great description of what happens in Hype. Here's an example...

Even though the "Preserve aspect ratio" "Shrink to fix was selected, it basically does nothing, as the other actors go where they feel like going.

I work with SVG files, so scaling is not an issue for image quality. However, when those images don't stay in their relative position, then the project is ruined. I played with the "Flexible layout" settings, but the results were underwhelming.

Proportional scaling was definitely something we hoped to get into Hype 3.0 but unfortunately we ran out of time. Hopefully we can add it in a future update.

In the meantime the javascript solution is likely your best bet. Could you send me a sample document of what you have so far so I can take a look?

As mentioned here... Is there a Physics API? 🤔 - #32 by Photics ...maybe the "view" option in Matter.js can make this an easy feature to add.

Hi Stephen

Did you find a way around this, I have EXACTLY the same problem with cartoon charactors. When they are clicked on I want a greyscale charactor to appear colored and with a speech bubble. I need to could anchor them so they scale and posistion together correctly. It driving me mad!

I’ve sent over a file to Stephen but no response on solutions yet John.

1 Like

Do you have text that you are trying to scale inside of the bubble? Perhaps you could send me a quick example of what you have so far so I can follow along better.

I moved 2 posts to a new topic: Proportionally scaling a Tumult Hype document based on the browser width

Changing this code to work with groups, and or symbols would be great :smile:

Thank you ! I works very well !
Apart from the feeling that the element appear a bit blurry.

Glad it was useful! What browser do you see blurriness in? Can you send me a link?

Here it is
I don’t know if this is real or just a feeling, but it seems a bit blurry (text, strokes and images)
What do you think ?
ScaleDocument - copie.hype.zip (628.7 KB)

This is what’s causing the blur for me in Chrome. Turn off this style in the HYPE_element class and it gets clearer.

-webkit-transform: rotateY(0);

Firefox and Safari on Mac seem clear with that transform in. Chrome eats it.

OK, thanks !
Where do I put it in the code ?

Would need to override that class with something that would fix it. Trying a few things but none of the recommendations make a difference.

To remove the -webkit-transform: rotateY(0); style you can also turn off ‘Use Webkit Graphics Acceleration’ in the Document Inspector prior to export.

Thanks Daniel,
Result is better, indeed