Hype | Creation kit

Information

Hype is software that enables you to quickly and easily create animated and interactive content compatible with La Presse+, without needing any programming knowledge. With Hype, you generate HTML 5 code that will work on all modern Web browsers as well as on touchscreen-based tablets and smartphones. Hype is used by designers to create animated sequences, infographics, ads, educational material, prototypes, animated GIFs, videos, websites and much more. Hype lets anyone create richly interactive content.

General information

Ads made using Hype are accepted in all formats available and are subject to the same basic technical specifications as other types of ad.

Animations and media clips must not start automatically. The reader must be given the choice of activating them while reading.

In full-screen mode, there must be an area equivalent to 20% of the ad unit with static visual content, free of all interactions.

We strongly recommend incorporating the text in your ad as an image file (e.g., .jpg, .png).

Filter effects (e.g., Blur, Sepia, Saturate, Hue, Brightness, Contrast) are not functional in iOS. If you use them, they will be ignored by the system.

If you decide to use a customized font (CSS) or one from Google Fonts, it will be replaced by an equivalent font on the reader’s tablet. Given the variety of tablet models compatible with La Presse+, we unfortunately cannot guarantee what font will be substituted on a given tablet.

Always provide us the source file of your project. That file has the extension “.hype.”

The PIE.htc and HYPE.ie.js files are not taken into account in the ad file size.

When exporting your project in HTML5, uncheck the Create enclosing folder and Show “Built with Hype” options.

You must also uncheck the Automatically optimize when exporting option for each image in your ad that is in the Resource Library panel.

Compatible versions and backward compatibility

Only the latest version of Hype available for download on the Tumult website is supported.

Please download this version at http://tumult.com/hype if you have not already done so.

Previous versions and Beta versions are unfortunately not accepted.

No backward compatibility is ensured if you use another version of the software.

Viewport

In the Mobile options (first Inspector tab), make sure to select Don't set viewport. Otherwise, there could be a display conflict in La Presse+.

External links

To add an external link to your ad:

Use the native GoToURL function in the Actions menu.
Be sure to check the box Open in new window.

Video

To embed a video file into your ad:

Save your project under the name index.
Double-click the icon to activate your video.
Click the pencil icon.

Add the following code:

<a onclick="playVideo('videoUn')" style="width:100%; height:100%; display:block; background:transparent;" ></a>

Do not add any action under OnMouse Click.
Name your first scene "1".

Add the following code to the video box (in the scene MOVIE):

<video width="100%" height="100%" controls="" id="videoUn" onended="closeVideo('videoUn')">
 <source src="index.hyperesources/Nomdevotrevideo.mp4">
 Your browser does not support video.
</video>

Select the button "Edit Head HTML" in the Document Inspector. Between the tags <head> and </head>, add the following code:

<script>
// Function enabling video playback
function playVideo(id)
{
 // Instructions to go to the scene where the video is 
 HYPE.documents['index'].showSceneNamed('MOVIE');
 // Instructions to start video playback
 document.getElementById(id).play();
}
// Function enabling closing of video
function closeVideo(id)
{
// Instructions to stop video playback
 document.getElementById(id).pause();
 // Instructions to return to the initial scene
 HYPE.documents['index'].showSceneNamed('1');
}
</script>

ATTENTION:
"index" is the name under which you created your project.
"MOVIE" is the name of the scene where your video is found.
It is important to respect the assigned names and the case (lower/upper case) for the video embedding to function properly.

Export your ad, making sure to comply with the project name index.
Insert your video in mp4 format in the folder index.hyperesources, using the name given in point 7. (Nomdevotrevideo.mp4)
Test your ad.

Audio

To add an audio file to your ad:

Add a transparent box (rectangle), double-click in it, and then select the pencil tool.

Add the following HTML code to the box:

<audio controls>
 <source src="index.hyperesources/audio.mp3" type="audio/mpeg">
 Your browser does not support the audio tag.
</audio>

Resize the box per your preferences.
Do not use the native Hype function; do not use Insert > Audio....
Change the title of the project (“audio.mp3”) to the name of your audio file.
Export your project, naming your document index.
Transfer your audio file to the project folder (it should be named “index.hyperesources”).

Hype 3 plugin

Hype 3 plugin

La Presse+ offers you to download the HYPE 3 plugin for free.

Integrated Legal button:
dd a legal button directly in your ad in HYPE 3.
Easy Export for La Presse+:
The plugin will also allow you to export your HTML5 ad via
```
 File> Export HTML5 > La Presse+
```
... This action will create your ad in .zip format.

How to install

Download the .zip file here.
Unzip the .zip file.
Drag and drop the file into the HYPE 3 software.
Restart HYPE 3 to reflect the changes.

Download Hype tool