I have successfully embedded Hype scenes into RapidWeaver stacks in the past without much issue. However, those scenes did not have scene scaling turned on (i.e. the 2 scale checkboxes found in the Scene inspector are not checked) and were therefore fixed in size.
Now, I would like to activate those 2 Scale checkboxes so that when the HTML stack containing the Hype scene resizes itself, the scene will fill up the space and size right along with it. Unfortunately, after checking those boxes, the scene no longer draws itself at all in the RapidWeaver generated page. What I think it happening is that the scene doesn't know what the size of its container is and thus ends up with a 0 height canvas to draw on.
I've tried placing the HTML stack into a Joe Workman Static Height stack, as well as other Foundry container-type stacks, without any success. The HTML stack always renders as flat as proven by its border, if I were to turn that on.
Note that if I were to embed my Hype scene into a plain RapidWeaver HTML page (not a Stacks page) or if I were to embed the scene in the Head and Body of the HTML Code inspector in RW, the scene draws fine complete with scaling functionality as I resize the browser window. It is only when placing the scene into an HTML Stack that the scene doesn't draw.
Can anyone suggest an alternative solution or workaround to get this working? Thanks in advance.
Specifics:
Hype 4 Pro v 4.1.2 (712)
RW v 8.7
Stacks v 4.1.2
Foundry v2.3.2.0
The test scene size is 144x71 px.
The Scale options for both width and height are turned on.
The scene consists of a 1 Group with all of it's Pins and Sizing activated, with Scale behavior set to "Shrink to Fit" and the "Zoom contents" checkbox turned on.
Hi Nelson, when your animation is finished ensure everything is grouped in to one Group Folder in Hype and scaling for the Group Folder is 100% and horizontal/vertical is activated in the pinning box and Zoom Contents in the pull down menu set with Shrink to Fit ticked.
This stage I think from what you are saying is done correctly.
Now export as HTML with enclosing folder. (Again you may be used to this?)
Copy the enclosing folder of Hype assets to RW Resources.
Now open the orginal HTML file in a browser to preview the Hype animation, view source and copy only the line for the Div start and finish for the resource assets, the second line you will have copied for the script is not needed, you will link to this instead in Embed next.
Select in Embed stack 'Hype animation' (default is preset to iFrame in the menu) then paste the Div start/close line in the box under the pull down menu.
Still in Embed stack selct the link button to Javascript, this will open a URL or Resources option, choose Resources and navugate to the unique Javascript required to launch your hype.
Now the fiddly bit, you will need to adjust the VH (vertical height) value in Embed to make it fit your stack how you want it. You may find it goes a bit squiffy on scale with VH, you have two options here:
Don't use Hype layouts for responsive, they are a bit brutal in a RW page and just switching size, instead create two duplicate animations one with a size for tablet/desktop and one for mobile and just have the Embed stack in twice with one showing for small and the other for tablet/desktop, not sure how this is done in Foundry, in Foundation it is simply two columns with display for each of these.
The other option is to use Joe Workmans Jack stack where you can fix the ratio regardless of size such as 16x9, 4x3 etc, to get the ratio you want and maintain it when scaling just put the pixel dimensions of your animation in as the V/H ratio. You may find that Stack 4 Stacks free Useful Stack might do this also, not sure but I think it might.
Now if this doesnlt work, I'm a bit stumped.
Note: I've typed this from memory, I don't think I've missed anything.
Thank you @Tophat and @h_classen. Both suggestions work flawlessly so far in my tests! It's too bad that I can't mark both of your responses as solutions, so I've decided to mark Tophat's response as the solution for me.
As awesome as h_classen's magic script is, I was hoping to find a RapidWeaver stack that innately solves the problem, and that's exactly what Will Woodgate's Embed stack does. It has built-in support for Hype animations and everything can be configured using RW's drag and drop design paradigm. However, I will definitely add both of these solutions to my toolbox.
but the principles should be the same ... for proportional scaling: