Embedding a FLEXIBLE Hype scene into a RapidWeaver HTML stack

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?)

Go to Will Wodegate's Stacks For Stacks and grab the free Embed stack.

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:

  1. 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.

  2. 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.

6 Likes