Hype
Renseignements
Informations générales
Les publicités créées avec Hype sont acceptées dans tous les formats proposés et sont soumises aux mêmes spécifications techniques générales que les autres types d’annonces.
Les animations et les médias ne doivent pas se déclencher seuls. Les lecteurs doivent avoir le choix de les activer ou non lors de la consultation de leur édition.
En format plein écran, une zone équivalente à 20 % du format publicitaire doit présenter un visuel statique et libre de toute interaction.
Nous recommandons fortement d’intégrer le texte de votre publicité au moyen d'une image (jpg, png, etc.).
Les filtres (Flou, Sépia, Saturation, Teinte, Luminosité, Contraste, etc.) ne sont pas fonctionnels sur iOS. Si vous les utilisez, ils seront ignorés par le système.
Si vous décidez d’utiliser une police personnalisée (CSS) ou provenant de Google Fonts, celle-ci sera remplacée par une police « équivalente » au sein de la tablette du lecteur. Compte tenu du nombre de modèles de tablette compatibles avec La Presse+, nous ne pouvons malheureusement pas vous informer de la police qui sera présentée sur chaque type de tablette.
Il est nécessaire de nous fournir le fichier source de votre projet. Ce dernier porte l'extension .hype. Les fichiers PIE.htc et HYPE.ie.js ne sont pas pris en compte dans le poids de la publicité.
Lors de l'exportation de votre projet en HTML5, il est important de décocher les cases « Create enclosing folder » et « Show Built with Hype ».
Vous devez également décocher l'option « Optimiser automatiquement à l'exportation » pour chacune des images présente dans votre publicité et disponible dans le panneau « Bibliothèques de ressources ».
Versions
Viewport
Lien externe
- Utilisez la fonction « GoToURL » du menu « Actions ».
- Cochez la case « Ouvrir dans une nouvelle fenêtre ».
Vidéo
- Enregistrez votre projet sous le nom index.
- Double-cliquez sur l'icône permettant l'activation de la vidéo.
- Cliquez sur l'icône crayon.
- Ajoutez le code suivant:
<a onclick="playVideo('videoUn')"style="width:100%; height:100%; display:block; background:transparent;" ></a>
- N’ajoutez pas d'action sous OnMouse Click.
- Nommez votre première scène "1".
- Ajoutez à la boîte vidéo (dans la scène MOVIE):
<video width="100%" height="100%" controls="" id="videoUn"onended="closeVideo('videoUn')">
<source src="index.hyperesources/Nomdevotrevideo.mp4">
Votre navigateur ne supporte pas la vidéo.
</video> - Appuyez sur le bouton "Éditer la balise HTML <head>" qui se trouve dans l’inspecteur de document. Entre les balises <head> et </head>, ajoutez ce code:
ATTENTION:<script>
// Fonction qui permet de démarrer la vidéo
function playVideo(id)
{
// Instruction pour aller vers la scène où se trouve la vidéo
HYPE.documents['index'].showSceneNamed('MOVIE');
// Instruction pour démarrer la vidéo
document.getElementById(id).play();
}
// Fonction qui permet de fermer la vidéo
function closeVideo(id)
{
// Instruction pour arrêter la vidéo
document.getElementById(id).pause();
// Instruction pour retourner vers la scène initiale
HYPE.documents['index'].showSceneNamed('1');
}
</script>
"index" est le nom sous lequel vous avez créé votre projet.
"MOVIE" est le nom de la scène où se trouve votre vidéo.
Il est important de respecter les noms attribués et la casse pour que l'intégration fonctionne. - Exportez votre publicité en respectant le nom de projet index.
- Placez votre vidéo au format mp4 dans le dossier index.hyperesources au nom donné au point 7. (Nomdevotrevideo.mp4)
- Testez la publicité.
Audio
- Insérez une boîte transparente (rectangle), double-cliquez dessus, puis sélectionnez le petit crayon.
- Ajoutez le HTML suivant dans la boîte :
<audio controls>
<source src="index.hyperesources/audio.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la balise audio
</audio> - Modifiez les dimensions de la boîte selon vos préférences.
- N’utilisez pas la fonction native de Hype. Ne passez pas par « Insert » pour insérer votre fichier audio.
- Modifiez le titre de votre projet (audio.mp3) par le nom de votre fichier audio.
- Nommez votre document index lors de l’exportation de votre projet.
- Transférez votre fichier audio dans le dossier du projet dont le nom devrait être « index.hyperesources ».
Plugin Hype 3

- Bouton légal intégré:
Ajouter un bouton légal directement dans votre publicité à même le logiciel Hype. - Export facile pour La Presse+:
Le plugin vous permettra également d'exporter votre publicité en HTML5 en passant par le menu
... cette action créera votre publicité au format .zip.Fichier > Exporter en HTML5 > La Presse+
Comment l'installer
- Télécharger le fichier .zip ici.
- Décompresser le fichier .zip.
- Glisser et déposer le fichier obtenu dans le logiciel Hype 3.
- Redémarrer Hype 3 afin que les modifications soient prises en compte.