la liberté de mouvementsans risque de code douloureux.
Sa principale qualité est sa simplicté d'apprentissage quelque soit votre pratique des outils de graphisme. C'est une interface graphique pour créer des éléments javascript au même titre que JQuery.
Il est décliné en deux versions. Une version de base et une version Pro qui offre en plus des outils classiques de Hype, la possibilité de créer des symboles, de gérer les options responsive et un moteur d'événements physiques.
On peut tester ses créations directement sur un navigateur ou sur son téléphone à l'aide d'un utilitaire gratuit, Hype reflect. Il est vendu sur le site de l'éditeur ou sur l'AppStore. Son prix varie entre 45 et 90 € selon les versions.
Hype est totalement intégré à l'ergonomie à laquelle tout utilisateur de Mac est habitué. À l'instar de Pages ou de Numbers, on est dans une interface épurée sans outils inutiles avec les fonctions dans la barre supérieure et les options dans une barre d'inspecteur à onglet placée à la droite de la fenêtre.
La plupart des onglets ne présentent aucun secret même à un utilisateur non habitué aux contraintes du Web. J'aime à penser qu'il préfigure l'avenir des logiciels de production laissant la part belle à la création et non à l'apprentissage fastidieux d'un outil trop compliqué.
Voyons voir un peu de quoi il retourne en décorticant l'apparence de son interface.
La partie (1) représente le canevas de votre document, comme on peut le trouver dans Keynote, After Effects, Illustrator ou Photoshop. On y toruve toutes les aides utiles à la création, par exemple le placement magnétique des objets les uns par rapports aux autres.
La partie (2) est la tour de contrôle du logiciel avec sa palette Inspecteur. On peut définir entres autres fonctions, la taille du document, les options de l'objet créé, taille, comportements repsonssives, couleurs, épaisseur du contour, interactivité avec le visiteur ou les options complexes de l'animation. Toutes les options des inspecteurs sont des fonctions HTML 5 et CSS 3.
La partie (3) est l'équivalent de la palette des calques d'Illustrator, elle sert à gérer les objets de la scène, mettre en premier plan, en arrière plan ou grouper les éléments. On peut gérer de manière numérique dans sa partie basse, les différents attributs animés. On y trouve aussi les actions de la timeline.
La partie (4) est la timeline qui permet de définir les comportements des différents éléments dans le temps. On peut créer des actions pour lancer les animations selon les actions du visiteur avec beaucoup de simplicité, on peut aussi modifier les courbes d'animation pour accélerer ou ralentir les mouvements.
Les parties 1, 3 et 4 n'ont rien de nouveau pour tous ceux qui ont utilisé After Effects ou tout autre logiciel de montage ou d'effets spéciaux.
La partie (5) est réservée à la création de scènes qui peuvent représenter les différentes pages d'un site ou les différents moments d'une animation. C'est aussi à cet endroit qu'on trouve les options Responsive des documents Hype. Vous gardez un contrôle visuel du début à la fin du travail.
La partie 6 regroupe les outils du logiciel, à savoir essentiuelleemnt le rectangle, tout comme la DIV est l'élzment essentiel du Web Design. Simplissime !
La prise en main du logiciel ne demande que quelques heures au maximum. Pour en exploiter toute la richesse il faut avoir des notions d'intégration Web, de vidéo et de design. C'est un outil simple qui met des fonctions avancées à la portée de tous, pas un outil qui promet de faire le travail à votre place. L'intelligence artificielle devra donc être la vôtre, donc vous pourrez créer ce qui vou spassera par la tête sans réellement de restrictions techniques.
Sa fonction première est de produire des animations interactives très performantes, cela d emanière plus simple et légère que ce qui peut être fait dans After Effects par exemple. Il peut égaleùment créer des interactions typique des supports mobiles puisqu'il prend en charge les différentses fonctions des écrans tactiles tels les différents mouvements initiés avec ses doigts.
Le logiciel est également une alternative ludique à la bibliothèque javascript JQuery grâce à son interface simple à comprendre et à utiliser. Pour ceux qui veulent aller plus loin et qui en ont les compétences, le logiciel leur permet d'ajouter des comportements javascript qui enrichissent énormément ses capacités. Il se destine donc à tous ceux qui ne veulent pas programmer en JS, ceux qui ne veulent pas passer du temps à chercher des modules JQuery acaptés à leurs besoins et aux développeurs qui cherchent un outil pour produire rapidement des modules interactifs avancés.
Avec le temps, c'est devenu un logiciel complet capable de créer rapidement des sites originaux ou tester des interfaces d'applications à moindres frais. Il ajoute désormais une couche de HTML qui facilite le référencement auprès de Google et permet de gérer nombres d'options du HTML 5.
L'apparition de l'inspecteur "ressources" dans Hype 2 et son amélioration au fil des différentes versions, permet de faire des mises à jour efficaces et sans risque. La possibilité de créer des symboles depuis la version 3 Pro ajoute à sa productivité.
La version Pro a introduit aussi une façon simple et efficace de gérer les options "responsive" de gestion des différents tailles d'écran. Une fois de plus, le logiciel offre une ergonomie au service de l'utilisateur de base et s'adapte raîdement aux exigences actuelles du Web, comme par exemple, la possibilité de lier les animation à la position de la souris dans l'écran, intégrée sous forme d'une action spécifique très simple à appliquer.
C'est un logiciel à posséder sur son ordinateur.
Création du document dans l'onglet "SCÈNE" puis importation du visuel de la planète réalisé dans Illustrator, création du fond noir, de la lune et des étoiles blanches dans le logiciel à l'aide des outils Rectangle et Ellipse. Utilisation des options d'ombrage sur la lune pour pouvoir les animer par la suite.
On sélectionne l'objet vectoriel importé et dans l'onglet "Éléments" on applique un changement d ecouleur à l'aide des filtres, essentiellement avec l'option "Teinte". Ces options de filtres HTML5 peuvent être entièrement animés.
Dans l'onglet "Scène", "Timeline d'Animation", on crée une nouvelle piste qu'on renomme Rotation. On sélectionne la Lune et avec l'aide magnétique intégrée, on déplace son centre pour qu'il coincide avec celui de la planète. On anime la rotation sur X de 360° sur 2 secondes. On modifie l'interpolation de la courbe d'animation en Linéaire.
La Lune tourne autour de la planète, mais son ombre portée n'a aucune cohérence avec l'éclairage. On va corriger cela en animant l'option de l'ombre portée avec 3 points clefs.
Pour finir on va lier l'animation créée à des actions contrôlées par des boutons. On positonne trois boutons en bas de page et dans l'onglet "Actions" on règle le clic sur le démarrage de l'animation, sa mise en pause ou son arrêt complet. Il reste à tester notre animation finalisée dans un navigateur directement à partir de l'application.