Resize to fit iframe in various devices

Hi guys,

up until lately, I’ve been drawn to hype for its great expandability. I am a seasoned user of Adobe Animate for interactives. I have a problem with fitting the interactive into the window.
I have no such troubles with Animate because upon export I can choose to fit the job into whatever device size (mobile or otherwise). I work in a unique environment where I have to embed my interactive as part of a story package. The interactives go into an iframe with a max width of 650 pixels. My interactives have a standard size of 650/939 (this is the desktop size). This size scales proportionately when viewed from smaller devices. I cxan’t seem to get a hype export to fit snuggly into the window…and I’ve tried all options in export settings.
Am I doing something wrong?

There’s no reason this wouldn’t be technically possible; it would be useful to see an exact case. Can you share a zip of your .hype document and any of the iframe/container code necessary to reproduce the problem?

hey jon,

Thanks for replying so quickly, while i waited for any response, I had been busy trying to figure this out. And I think I nailed it. The display had centred into the window finally after trying out various settings on flexible layout and readind the documentation on it.

However, I do have a few questions:

  1. One of my solutions for getting everything anchored within the window in a responsive situation is to group smaller symbols/elements on stage with the background. Then applying left right and top pin with the horizontal/vertical arrows active. While it works for this layout and design, I’m wondering if it would cause problems down the road with other more complicated designs?

  2. When i group the elements as described above, do the separate elements in the group retain its flexible layout properties or does the whole group now acting as one, overwrites them with the setting meant for the group? If this is true, isn’t that a tad counter-productive? Is there a more efficient way to anchor objects on stage with relation to the background?

here is a work in progress I’m sending you.

The link shows the completed work created in adobe animate. I’m trying to reproduce the same job in hype as an exercise to determine if i can use hype just as well as I use Animate if not better (and i’m hoping, way better)

Have a look at how I’ve organised the anchoring. It took me so many actual live tests to know its working. I cannot however show you the live link for the hype version cuz I had to take the test down before my editor notices I’m using live stories to test my work.

Here is the animate version:

https://media.news.com.au/DTinteractive/bodyfarm/index.html

It gets pegged into a story package like this:

Screen Shot 2019-02-13 at 11.46.10 am.png

attached is the hype file

index.zip (481 KB)

I don’t see any specific problems with your document, so if there was something not working right that you wanted advice on, let me know.

From a more general standpoint I think perhaps the missing piece to know is that Zoom contents is a very different mode when it comes to flexible layout. Checking this box means that the element will be visually scaled – in the case of a group all sub-elements will therefore be resized along with the group. This is more on a bitmap level as it uses the CSS transform:scale() operation.

Thus if you have zoom contents checked, all child element flexible layout options effectively get ignored, since the actual width/height is not changing. This is happening in your document, as all your top-level elements have zoom contents checked.

However, if zoom contents is not checked, then the width/height of the element or group is adjusted. Child elements will always flex with their settings relative to their parent group.

The pins true nature can be thought of as “preserving margins, even at the cost of scaling proportionately.” Generally if you want an element to scale with a background, and that background is not in the same group, you would actually turn off all the pins. All pins being off mean that it will position proportionately.

Does that help?

2 Likes

yes thank you jon that helps a lot.