Tumult Staff Note: This referred to techniques that were outside of the scope of Hype’s features. Please see this section of our documentation for how to scale content proportionally.
Hi there, I’ve got a hype creation with a lot of separate image layers that are animated. I’m then putting them within an iframe on a wordpress site. How can I make these all scale together when in smaller browsers, rather than drifting apart from each other when they scale and scaling at different rates so the image as a whole becomes out of visually sync? I would have thought grouping everything then setting the scale behaviour of the group would work but it doesn’t.
The only solution I can get to work is ‘testanimated’ - having each layer in hype the same size png, then set each layer to scale, and no JS used. However, its not really an ideal solution for the content I am making as it will really push up the file size (this is just a demo animation, there are many more layers and interactivity to go in)
I know that really the solution I am trying to use is not directly related to hype, being solved with JS and CSS but could someone take a look at what I have done to shed a bit of light on it as to why it might not be working.
The content is 1000px width and 700px height.
Setting the CSS to width: 500px; (half the width of the doc as instructed) just seems to cut the content in half. Tried numerous variations of setting it to percentages and max-widths but nothing I do seems to get the document to scale.
Presently got it set to:
#scalecontainer {
-moz-transform-origin: left top;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
(to avoid any confusion - there isnt supposed to be an owl in ‘testanimated’, the owl is a png with trimmed edge so was using it to test scaling in the other examples)
If anyone can assist in getting this working it would be very much appreciated.
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?
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!
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.
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)
