Please note: The below solution is no longer the ideal way to do this. Please see this reply which demonstrates the workflow for scaling using the new 'zoom contents' feature in Tumult Hype 3.5.
I wrote some javascript people could use as a starting point for scaling your entire Hype Document proportionally. It should be a bit simpler than the old solution because it doesn't require adding additional elements to the HTML or setting values based on the scene width. Just add the following code to the HEAD html:
In its current state it will only work if there is a single Hype document on the page, but it could be adapted to work with multiple or to target a specific document.
Hi @stephen, I have a single hype document uploaded, but I’m afraid the resources folder gets too big if I make a layout for Iphone, 2xIpad, and desktop.
Will this javascript scale the elements to fit whatever device is being used? Or what does it do exactly? I’m not a programmer and don’t understand code language But I do know how to put it in the head of the document.
Update: I just learned how to use the Flexible layout tool - when this is turned on with the pins, do I need to still make a individual layout for iphone, 4, 5, 6, - ipad etc?
I’ve tested the old and the new method and both works fine.
this one is very easy to implement, thanks!
however If I use in my project a draggable object the relative path is bigger or smaller of the original one, depend on the size of the window.
The relative distance is not correct and you can’t drag the object from A to B, in some cases B is in a wrong position
Adding new layouts shouldn't add too much to the final size of your export. In most cases all three layouts can share the same images, videos, etc. If you are seeing your export size increase dramatically when adding a new layout let me know and I can take a look at your project.
This will scale your entire document proportionally. I recommend trying it out to see if it works with your design. Text, buttons, etc might get too small on an iPhone depending on your initial size.
Responsive Layouts and Flexible layout settings work great together.
Flexible layout settings can often allow you to use the same layout on similar devices. For example the iPhone 5, 6, 6+ can usually share the same layout (even iPhone landscape can often be the same).
But sometimes you need an entirely different layout when switching to a different device class like an iPad. It is difficult to define flexible layout settings that will work from 320 px wide to 1200 px wide. At some point things will get too squished or overlap. When you hit one of these points you can add an entirely new Layout and a new set of flexible layout settings.
I recommend using as few of layouts as you can, but the number is usually determined by the specific design of the page. A good target is 3 layouts (iPhone, iPad, and Desktop).
It’s a bit more complicated to do this with only one layout, but we are working on something that should make this much easier. Hopefully it will make it into 3.5, but I can’t promise for sure yet.
The relative distance is not correct and you can't drag the object from A to B, in some cases B is in a wrong position
Thanks for the help @stephen I made a simple project with an element with the "Control element position" applied to the red circle.
if the window size is the same of the hype project ( in my example 1024x768) I can drag the element correctly. if the window is less or bigger than the original size I can't drag the element correctly.
Thanks for the sample project! Unfortunately I don’t have a workaround at the moment, but this is something we will consider as we add scaling natively to Hype.
Thanks @stephen. The thing about size is that i have 4 scenes, each with a video, and this increases the load time since it is one big document to load. The user navigates to every scene trough buttons on a house - and navigates back to this house from each scene.
In order to decrease the loadtime, I’m thinking about splitting the scenes up into documents, so the buttons just points to a new url on the site where the scene loads.
But is there a way to make the same smooth transition from thw function “jump to scene” -“top down”?
I posted a way of getting notified with the layout name.
I am unable to test this at the mo. But I am wondering if this can be used with your code as @wadhi wants. By posting the notification into a global var.
And using it in and if clause that surrounds your code in the head.
@MarkHunte thats a really good idea. I think you could actually use On Layout Load and On Layout Unload to selectively apply/remove the transform on the hype container and set/unset the window.resize function.
There isn’t an easy way to get our animated scene transitions when loading a new url, but if you just want to use an action to jump to a different page you can use the Go to URL… action.
Yep. I had put your code in the javascript that got called by the behaviours in the Layout Load. (The behaviours never got called on document load that I called see)
window.deviceName = event.customBehaviorName;
console.log("JS " + event.type);
hypeDocument.getElementById("device").innerHTML = event.customBehaviorName;
if (isScalePossible()){
if (window.deviceName == "iPhone Landscape" ){
console.log("js " + window.deviceName);
window.myHypeContainerId = hypeDocument.documentId();
$('#' + window.myHypeContainerId).css({
'-moz-transform-origin': '0% 0%',
'-webkit-transform-origin': '0% 0%',
'-ms-transform-origin': '0% 0%',
'-o-transform-origin': '0% 0%',
'transform-origin': '0% 0%',
margin: 0
});
scaleSite();
$(window).resize(scaleSite);
}
return true;
}
function scaleSite()
{
var hypeContainer = $('#' + window.myHypeContainerId);
var containerWidth = hypeContainer.width();
var containerHeight = hypeContainer.height();
var parentWidth = hypeContainer.parent().width();
var parentHeight = hypeContainer.parent().height();
var scaleWidth = parentWidth / containerWidth;
var scaleHeight = parentHeight / containerHeight;
var scale = Math.min(scaleWidth, scaleHeight);
var left = (containerWidth * scale < parentWidth) ? ((parentWidth - (containerWidth * scale)) / 2) + 'px' : '0px';
var top = (containerHeight * scale < parentHeight) ? ((parentHeight - (containerHeight * scale)) / 2) + 'px' : '0px' ;
hypeContainer.css({
"-moz-transform" : "scale("+scale+")",
"-webkit-transform" : "scale("+scale+")",
"-ms-transform" : "scale("+scale+")",
"-o-transform" : "scale("+scale+")",
"transform" : "scale("+scale+")",
"left" : left,
"top" : top
});
}
function isScalePossible()
{
can = 'MozTransform' in document.body.style;
if(!can) can = 'webkitTransform' in document.body.style;
if(!can) can = 'msTransform' in document.body.style;
if(!can) can = 'OTransform' in document.body.style;
if(!can) can = 'transform' in document.body.style;
if(!can) can = 'Transform' in document.body.style;
return can;
}
Works to an extent but I am not sure 100% how well, as my layout set up is very basic. Also I think it needs something else to work with the trigger… Orientation changes on the Mobile did not re trigger it for me, but as I said it may be my basic setup.
You maybe able to set it right and see what I am missing
thanks for your time Stephen
This could be a huge improvement, a final solution for the responsive behaviour.
I've found an interesting discussion about the problem in order to keep the element in that particular position ( in any window size) during the dragging.
But I do know how to put it in the head of the document.