Hype

Hype

Hype

Télécharger l'outil Hype

Tumult Hype

Télécharger
Renseignements

Renseignements

Le logiciel Hype vous permet de créer facilement et rapidement des contenus animés et interactifs compatibles avec La Presse+ et cela, sans connaissance en programmation. Le contenu HTML5 généré par Hype fonctionne sur tous les navigateurs modernes ainsi que sur les tablettes tactiles et téléphones intelligents. Hype est utilisé par les designers pour créer des animations, des infographies, des publicités, du matériel éducatif, des prototypes, des GIF animés, des vidéos, des sites web et bien plus. Avec Hype, tout le monde peut créer du matériel riche en interactivité.
Informations générales

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

Versions

Seule la dernière version disponible sur le site Tumult est compatible avec La Presse+. Vous pouvez télécharger cette version au http://tumult.com/hype. Les précédentes versions et les versions Bêta de Hype ne sont malheureusement pas compatibles. Aucune rétrocompatibilité n'est assurée si vous utilisez une autre version du logiciel.
Viewport

Viewport

Dans les options Mobile (premier onglet Inspector), sélectionnez l'option « Don't set viewport » afin de vous assurer qu’aucun élément n’entre en conflit avec l’affichage de votre publicité dans La Presse+.
Lien externe

Lien externe

Pour ajouter un lien externe vers un site internet :
  1. Utilisez la fonction « GoToURL » du menu « Actions ».
  2. Cochez la case « Ouvrir dans une nouvelle fenêtre ».
Vidéo

Vidéo

Pour ajouter un fichier vidéo dans votre publicité :
  1. Enregistrez votre projet sous le nom index.
  2. Double-cliquez sur l'icône permettant l'activation de la vidéo.
  3. Cliquez sur l'icône crayon.
  4. Ajoutez le code suivant: 
    <a onclick="playVideo('videoUn')"style="width:100%; height:100%; display:block; background:transparent;" ></a>
  5. N’ajoutez pas d'action sous OnMouse Click.
  6. Nommez votre première scène "1".
  7. 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>
  8. 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: 
    <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>
    ATTENTION:
    "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.
  9. Exportez votre publicité en respectant le nom de projet index.
  10. Placez votre vidéo au format mp4 dans le dossier index.hyperesources au nom donné au point 7. (Nomdevotrevideo.mp4)
  11. Testez la publicité.
Audio

Audio

  1. Insérez une boîte transparente (rectangle), double-cliquez dessus, puis sélectionnez le petit crayon.
  2. 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>
  3. Modifiez les dimensions de la boîte selon vos préférences.
  4. N’utilisez pas la fonction native de Hype. Ne passez pas par « Insert » pour insérer votre fichier audio.
  5. Modifiez le titre de votre projet (audio.mp3) par le nom de votre fichier audio.
  6. Nommez votre document index lors de l’exportation de votre projet.
  7. Transférez votre fichier audio dans le dossier du projet dont le nom devrait être « index.hyperesources ».
Plugin Hype&nbsp;3

Plugin Hype 3

La Presse+ vous propose de télécharger le plugin pour Hype 3 gratuitement.
  1. Bouton légal intégré:
    Ajouter un bouton légal directement dans votre publicité à même le logiciel Hype.
  2. Export facile pour La Presse+:
    Le plugin vous permettra également d'exporter votre publicité en HTML5 en passant par le menu 
    Fichier > Exporter en HTML5 > La Presse+
    ... cette action créera votre publicité au format .zip.
Comment l'installer

Comment l'installer

  1. Télécharger le fichier .zip ici.
  2. Décompresser le fichier .zip.
  3. Glisser et déposer le fichier obtenu dans le logiciel Hype 3.
  4. Redémarrer Hype 3 afin que les modifications soient prises en compte.