Responsive OAM Widgets in Muse


(Steven M.) #1

I’ve built an interactive hype document with multiple layouts for different screen sizes with the idea of bringing it into my responsive (fluid width) muse site. I’ve exported it as an OAM widget and placed it in my muse document but I cannot control the size and when I export the site I lose the responsiveness of the widget and it just stays the same size. What am I missing?


(Jonathan Deutsch) #2

Last I tried you typically needed to place the Hype OAM widget to be margin-to-margin in the Muse page, otherwise Muse wouldn’t even try resizing it.


#3

Hi

I have been doing a fair bit of work with Adobe Muse and Hype, specifically doing separate layouts for iPhone. iPad and Desktop. Regarding your query once you drag the OAM widget into Muse - you need to manually drag the edges of the widget to the left and right margins until you see the red lines appear. This will then trigger the correct layouts to appear.


(Steven M.) #4

Muse isn’t giving me the transform controls (the boxes are x and when I hover or drag my mouse doesn’t change like it should) to be able to drag the widget to full width. Is there something in the file setup, export from hype, or import into muse that I am missing?


(Jonathan Deutsch) #5

You should be able to drag to resize like any other element; I don’t know what would cause that to stop working… I’d just try reimporting if you can.


(Steven M.) #6

I updated all my software yesterday and I tried again this morning, I made a basic thing in muse as a test subject with multiple widths and made a muse file with the same breakpoints. When I drag the exported OAM widget into Muse from finder I don’t see any transform controls to let me drag the edges to adjust the width of the widget to meet the breakpoints in muse. I’ve attached the files if you want to take a look at them.
Widget Muse Test.zip (2.8 MB)


(Steven M.) #7

Worst case scenario I can make several widgets in different widths, bring them into muse individually, and hide/show them in the correct breakpoints but it would be a lot easier down the road to have all the widths in the same widget.


#8

I don’t know if this will help or not (because I don’t know what you are trying to achieve) but in my example I have an animated Welcome Screen which consists of a Hype animation with various layouts. The actual Muse page is just a fluid width page with no breakpoints. The Hype OAM widget is dragged on and the left and right edges are pulled to the margins. In this sense it’s Hype that’s controlling the breakpoints. When viewed the correct layouts appear according to the screen size. The remainder of the website is fluid with breakpoints. I just link through to it from the Hype animation using the ‘go to url’ on mouse click command. May not be appropriate for you - but it works in my case.


(Mattias Lindberg) #9

It seems that if you only have Width of the Hype document to Scale 100%, but not the Height. That’s when Muse gives you X’s in the corners and doesn’t let you position it properly. :slight_smile:


#10

Hi all,
yes, those widgets are scalable. but in muse i only can choose responsive with and not the responsive with and height in the scaling options.
the result in the browser is responsive scaling with an hight loosing the proportion an getting squeezed.

:unamused:


(Frans Hanekom) #11

Hey, I have the exact same problem. I’ve built a custom menu that slides out from the side of the browser and it works good and all. Problem is it is not scaling with the height of the document when placed in Adobe Muse… I am struggling to get this to work, I read that you have to call the Parent window within the document the Hype document, in which it is contained. It will then recognise the browsers dimensions and allow the animation to respond to the browsers height. I haven’t figured it out yet and would also like some help / advice on this.


(Neil) #12

Did anyone get this to work? I’m placing an OAM file into Muse 2018 and can only set responsive width, even though the OAM is set to both responsive width and height?


#13

You may need to set a minimum height of your widget – are you able to share your Muse project and Hype document?


(Neil) #14

Hi Daniel. Thanks for responding. Yes, I can share my Hype and Muse doc but I’ll send it as a private message if thats ok as I’m not ready to share the Muse build with the public. Its fine to share the site link tho as an example:

The site (wok in prog) is here: https://www.coffeeshop.direct. The OAM file is the three the grey boxes on the homepage under the yellow banner. The first one is covered by a black Muse box set to responsive width + height - this is how I’d need the grey boxes to work, although responsive height is greyed out in Muse for an OAM.


#15

Hi all,

I stumbled on this thread while trying to get a Hype OAM to get the ‘Responsive Width & Height’ option in Muse. While I still haven’t been able to get that to work I managed to find a work around and thought it might be useful for someone else who ends up here.

In Muse I inserted an iFrame that is responsive in width & height (took a while to find iFrame responsive code that worked properly in Muse):

<iframe src="enter page link here" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
  Your browser doesn't support iFrames
</iframe>

I exported the Hype files as HTML 5, hosted the files on the server and just inserted the link of the page into the iFrame. Worked for me.

Hope this saves someone some time.