Logiciel HYPE
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 lets anyone create richly interactive content.
User guide
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. Avoid using them.
Avoid using customized font (CSS) or one from Google Fonts. 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. ThePIE.htcandHYPE.ie.jsfiles 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.
In the full-screen format, this area, consisting of a 135 px band at the bottom and another 75 px band on the right, must be free of interactivity.
This surface, which facilitates screen switching, must be static and therefore free of interaction. In addition, the elements used in the footer, such as the logo, +WEB and/or call to action, must remain fixed.
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.
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+.
To add an external link to your ad, be sure to check the box Open in new window.
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('video')" data-prevent-touch="" style="width:100%; height:100%; display:block; background:transparent"></a>
Do not add any action under OnMouse Click.
Name your first scene "
1".Double-Click on the icon that send back to the inital scene (the
xicon).Click the pencil icon.
Add the following code:
<a onclick="closeVideo('video')" data-prevent-touch="" style="width:100%; height:100%; display:block; background:transparent"></a>
Do not add any action under OnMouse Click.
Add to the video box (in the
MOVIEscene):
<video ontimeupdate="trackVideo()" width="100%" height="100%" controls="" preload="metadata" id="video" onended="closeVideo('video')">
<source src="index.hyperesources/Nomdevotrevideo.mp4">
Votre navigateur ne supporte pas la vidéo.
</video>Select the button "Edit
<head>HTML" in the Document Inspector. Between the tags<head>and</head>, add the following code:
<script>
function playVideo(id) {
HYPE.documents['index'].showSceneNamed('MOVIE');
setTimeout(function () {
document.getElementById(id).play()
}, 0);
resetTrackingVariables();
}
function closeVideo(id) {
document.getElementById(id).pause();
document.getElementById(id).webkitExitFullscreen();
HYPE.documents['index'].showSceneNamed('1');
}
var vidElm;
var tracked_1;
var tracked_25;
var tracked_50;
var tracked_75;
var tracked_100;
var videoCursor;
var videoDuration;
var firstSecond;
var firstQurt;
var secondQurt;
var thirdQurt;
var trackPerc;
var trackPercentage;
function myCallback(hypeDocument, element, event) {
// run code here
vidElm = document.getElementById('video');
tracked_1 = false;
tracked_25 = false;
tracked_50 = false;
tracked_75 = false;
tracked_100 = false;
videoCursor;
videoDuration = 6;
firstSecond = videoDuration / videoDuration
firstQurt = videoDuration / 4;
secondQurt = firstQurt * 2;
thirdQurt = firstQurt * 3;
trackPerc = vidElm.currentTime * 100 / videoDuration;
trackPercentage = Math.trunc(trackPerc);
}
if ("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
"type": "HypeSceneLoad",
"callback": myCallback
});
function resetTrackingVariables() {
tracked_1 = false;
tracked_25 = false;
tracked_50 = false;
tracked_75 = false;
tracked_100 = false;
}
function trackVideo() {
videoCursor = Math.trunc(vidElm.currentTime);
videoDuration = vidElm.duration;
firstSecond = videoDuration / videoDuration;
firstQurt = videoDuration / 4;
secondQurt = firstQurt * 2;
thirdQurt = firstQurt * 3;
trackPerc = vidElm.currentTime * 100 / videoDuration;
trackPercentage = Math.trunc(trackPerc);
if (videoCursor >= firstSecond && videoCursor < firstQurt) {
if (!tracked_1) {
tracked_1 = true;
console.log("%c Custom_video_0.1sec", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_0.1sec');
}
}
if (videoCursor >= firstQurt && videoCursor < secondQurt) {
if (!tracked_25) {
tracked_25 = true;
console.log("%c Custom_video_25pc", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_25pc');
}
}
if (videoCursor >= secondQurt && videoCursor < thirdQurt) {
if (!tracked_50) {
tracked_50 = true;
console.log("%c Custom_video_50pc ", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_50pc');
}
}
if (videoCursor > thirdQurt) {
if (!tracked_75) {
tracked_75 = true;
console.log("%c Custom_video_75pc", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_75pc');
}
}
if (trackPercentage >= 98) {
if (!tracked_100) {
tracked_100 = true;
console.log("%c Custom_video_100pc", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_100pc');
}
}
}
</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
.mp4format in the folder index.hyperesources, using the name given. ex:Nomdevotrevideo.mp4)Test your ad.
Accordion interaction is not compatible with Hype software.
The Audio feature of the Hype software is not compatible with the La Presse+ application.
La Presse+ offers you to download the HYPE 3 plugin for free.
Integrated Legal button:
Add a legal button directly in your ad in HYPE.Easy Export for La Presse+:
The plugin will also allow you to export your HTML5 ad viaFile>Export HTML5>La Presse+... This action will create your ad in.zipformat.
How to install
Contact us
