EMBEDDING HYPE FILES IN OTHER DOCUMENTS

Hype exports a document as 3 main files:

  • an HTML file that has a minimal div and calls a loader script

  • the loader script, which also contains all data (elements, timelines, animations, etc.)

  • a runtime script that is in charge of executing the hype document/animations

If you have source elsewhere that you want to have a Hype animation, all you need to do is paste three lines of code that point it towards the loader script. It looks something like:

<!-- copy these lines to your document: -->

<div id="index_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;"> <script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?4417"></script> </div>

<!-- end copy -->

You'd simply need to change the location of the underlined path to wherever you have the file located in your CMS.

Or, of course, you can iFrame the content from wherever it is hosted.

ADOBE EXPERIENCE MANAGER STEP-BY-STEP INSTRUCTIONS

Adobe Experience Manager (AEM) can host HTML content and assets generated by other applications, such as Tumult Hype. You can import the HTML directory, including the index file, images, and JavaScript files, into AEM to manage and deliver this content. Here are the steps to achieve this:

  1. Prepare the HTML Directory: Ensure that the HTML directory exported from Tumult Hype is complete, including the index.html file, images, JavaScript files, and any other necessary assets.

  2. Access AEM: Log in to your AEM instance and navigate to the desired location within the repository where you want to upload the HTML directory.

  3. Upload the HTML Directory:

    • Use the AEM interface to create a new folder in the repository.

    • Upload the entire HTML directory into this folder. You can typically do this by dragging and dropping the files or using the upload feature within AEM's interface.

  4. Configure the HTML Content:

    • Ensure the index.html file is correctly referenced within AEM.

    • Verify that all asset paths (e.g., images, JavaScript files) are relative and correctly point to the uploaded assets within AEM.

  5. Set Up a Page:

    • Create a new page in AEM and configure it to use the uploaded index.html file as its source.

    • You may need to use an AEM component that allows embedding HTML content or configure a client library to include your custom HTML, CSS, and JavaScript files.

  6. Publish the Content:

    • Once everything is set up and verified, publish the content to make it available on your AEM-managed site.

DETAILED STEPS:

  1. Upload Directory:

    • Go to AEM Assets > Files.

    • Create a new folder for your Tumult Hype project.

    • Upload the entire HTML directory into this folder. Ensure that the directory structure remains intact.

  2. Create a New Page:

    • Go to AEM Sites > Your Site.

    • Create a new page where you want to embed the HTML content.

    • Open the page in the page editor.

  3. Embed HTML:

    • Drag and drop the HTML component onto the page (if available).

    • Edit the HTML component and reference the index.html file you uploaded.

    • Alternatively, if your AEM setup allows, you might use an iframe to embed the HTML content.

  4. Adjust References:

    • Ensure that all paths to images and JavaScript files in the index.html file are correct. They should point to the correct locations within the AEM repository.

Example:

If your index.html references an image like this:

html

Copy code

<img src="images/pic.jpg">

Make sure the images/pic.jpg path is correctly pointing to the AEM Assets location.

By following these steps, you can successfully host and manage HTML content created by Tumult Hype within Adobe Experience Manager.