Hype 4 and Rapidweaver with Foundry

Hello,

I’m new to Hype and this kind of animation, but very familiar with both Rapidweaver and Foundry.

I have just downloaded the TRIAL VERSION of Hyper 4 and have found it very easy to create basic animations and export the HTML 5 folder.

The animation previews perfectly in Safari and Chrome, but I have no idea how to get it into my Rapideweaver/ foundry page.

Using the basic HTML Stack (From Stacks) I can see that Foundry is creating the space for the animation, but not displaying it.

What I have been doing is dropping the Hyperesources folder into the Rapidweaver Resources section and then adding the HTML Stack to my page into which I’m replacing all the code including the div tags.

I’m also adding “resources/” to the source code (if that’s the right terminology?)

If anyone can help I’d be very grateful.

Thank you.

Here’s a great guide from Hype Docks: https://www.hypedocks.com/embedding-hype-animation-in-rapidweaver/

And our documentation for Rapidweaver:

Let us know if you have any issues – it sounds like you’re super close.

Hi,

Thank you very much for this information, though I’m not sure if it’s relevant to Rapidweaver 8.6 and Foundry 2.

I have asked this question on both the Raidweaver and Elixir Graphics forums and have been sent the same links that you’ve kindly sent me.

I get the feeling that a lot has changes between Rapidweaver versions 6, 7 and 8.6 with regard to Snippets and Resources, and this is where my frustrations lies as I cannot find a single reference to Hype 4 and the latest editions of Rapidweaver and Foundry.

Could another problem be that I’m using the Trial Version of Hype 4? Does it prevent me from adding the animation to a project because I’ve not paid for it?

Thanks in advance for any additional help that this graphic designer desperately needs! :slight_smile:

Rich

Nope, it’s a full-featured trial (just with a time limit).

There is built in support for embedding HTML within rapidweaver in regular Rapidweaver (no stack required). ‘Add > HTML Code’ and ‘Add > IFrame’ are both suitable for inserting Hype content.

That’s correct – if you can share what you have that would be great to see an example.

I’ve made a quick update to our Rapidweaver tutorial with new screenshots, but the workflow is pretty similar: Embedding within a Rapidweaver project

Hi Daniel,

You’re a star! Thank you very much indeed.

I can see I was so close, but never would have thought to add both exported docs to the Raidweaver resources folder and then add “resources/”

Just as an additional point for your tutorial, the HTML stack that comes with the basic Stacks plug-in works fine within Elixir’s Foundry and is just a case of double clicking on the HTML stack in edit mode and replacing ALL the code with the three lines, including div the tags.

Now I just need to decide whether to buy Hype or Hype Professional???

Thanks again for your fantastic support.

Stay safe,

Rich

Hype Professional - highly recommended

1 Like

Hi Daniel,

Just when I thought we’d cracked this…HELP.

Firstly, I’m building the full site in Elixir Graphics’ Foundry Stacks for Rapidweaver.

The animation only works on the Home page and not on any other of my Foundry pages. I can even place the HTML Stack into an Overlap Stack and it’ll work on the Home page.

Even if I add a new Stacks/Foundry page and only add the control stack, a container and the HTML stack it won’t work.

As before, the white space where the animation should be visible is there in preview, but nothing else.

I have now purchased Hype 4 so really am stuck if I cannot use it fully.

Here’s hoping you can help me out again please.

Many thanks,

Rich

Instead of loading your .hype JS file with a URL like “/resources”, you may need to load the full server URL to the .js file, so something like

https://site.com/resources/hypedocname.hyperesources/generatedjsfile.js

(this assumes your site is accessible via https, but http would also work). This would likely be the cause of the file loading only on the home page (which is able to locate the /resources folder) but not on any page which is at a different folder / directory level.

Something like:

//site.com/resources/hypedocname.hyperesources/generatedjsfile.js

Would also work, but it won’t allow you to preview on your computer locally.

Hi Daniel,

Thank you very much (again) for you help as this seems to have worked, at least in preview and when viewed locally on Safari.

Here’s what I did, just in case you might see a potential problem when the site is uploaded to my host’s server.

Because I had a PDF working as a resources’ link on the page I had the idea to preview it on Safari and then inspect the element to see if I could see the source code (if that’s the right term).

The attached image is a screen shot of the code.

Basically, I added 'http://127.0.0.1.56069/resources/" to the source path for the Hype animation and it worked. I assume this is because I can see the hype.html file is in the same resources folder as the PDF hence the same path worked?

Thanks again for your superb customer service and backup.

Kind regards,

Rich

The 127.0.0.1 URL definitely won’t work on a live server — if you’re setting the URL for something like the PDF file, I would just get it in your server and use the full URL to it. You could get it on your server now and get the full URL.

Daniel,

Thanks again for the info. All makes sense.

Richard

1 Like

Hi Daniel (and RBGill),

Like R.B.Gill, I'm also struggling to get my Hype project into Rapidweaver with Foundry, but with much less success! (I'm new to both Hype and RW, so really feeling out of my depth.)

I've tried to follow your guide "Embedding within a Rapidweaver project", but I'm getting multiple files appearing in my Resources folder (blank.gif, PIE.htc, HYPE-128.full.min.js etc.). Do you have any idea why this might be happening?

Also, while I've managed to open the html code and can see the section you're referring to, I've no idea how to apply either of the options mentioned in step 7.

Any advice or direction would be appreciated.

Thanks in advance,
Richard

You're referring to step 7 here? Embedding within a Rapidweaver project - Exporting & Previewing - Tumult Forums

These are files generated by Hype which your Hype document loads. HYPE-###-full.min.js is the most important.

Happy to take a look if you want to email me your RW project in a zip file (and your Hype document). If you'd like to send a private message to me, you can click 'Message' on my profile page here: Profile - Daniel - Tumult Forums