Créer un livre interactif

//www.youtube.com/embed/2Ej9nN2Pj0E

Introduction :

Ceci est un tutoriel pour vous apprendre à créer un livre interactif de base en utilisant hyperPad. En suivant ce tutoriel, vous comprendrez les concepts nécessaires pour assembler un livre.

Structure du projet :

Un projet hyperPad est décomposé en Scènes, Objets et Comportements.

Scènes :

Les scènes contiennent tous les objets de votre application et sont un excellent moyen d'organiser les différentes parties qui composent votre application. Par exemple, vous pouvez utiliser une nouvelle scène pour chaque page d'un livre.

Objets :

Les objets sont des éléments individuels au sein de la scène. Cela inclut tout texte ou illustration. Chaque objet peut avoir ses propres comportements.

Comportements :

Les comportements sont ce qui rend votre scène et vos objets interactifs et leur donne vie.

Importation d'images :

Vous pouvez importer des images et illustrations depuis le rouleau de la caméra, le flux photo et Dropbox. hyperPad créera automatiquement des images non-rétina pour vous, alors lorsque vous créez des illustrations, assurez-vous de travailler avec une taille d'image de 2048×1536 en tête. La taille d'image maximale que Tapapbl peut importer est de 2048×2048 pixels.

De plus, comme hyperPad ne prend actuellement pas en charge les polices ou les textes enrichis, vous devez également importer votre texte sous forme de PNG avec des arrière-plans transparents.

Une fois que vous avez importé toutes vos images, vous pouvez ouvrir le tiroir d'objets pour commencer à les ajouter à votre scène.

Ajout de comportements :

Rendre vos objets interactifs est facile dans hyperPad.

Tout d'abord, appuyez sur l'objet que vous souhaitez rendre interactif. Ensuite, dans les propriétés de l'objet, appuyez sur le bouton "Comportements" pour lancer l'éditeur de comportements.

Pour ce tutoriel, l'interaction que nous voulons créer est lorsque le lecteur touche l'objet, celui-ci se déplace à une position spécifique.

Dans la catégorie "Entrée", faites glisser le comportement "Démarrer le toucher" sur le canevas.

Par défaut, le comportement Démarrer le toucher sélectionne automatiquement l'objet actuel. Mais vous pouvez le changer en tapant sur le graphique de l'objet dans les propriétés du comportement.

Ensuite, faites glisser un comportement "Déplacer vers un point" et connectez-le au "Démarrer le toucher" que vous avez ajouté à l'étape précédente. Le comportement "Déplacer vers un point" déplacera l'objet vers un point sélectionné sur le canevas.

Vous pouvez entrer l'emplacement spécifique en remplissant les champs X/Y situés dans les "Propriétés du comportement". Vous pouvez également choisir visuellement l'emplacement pour lequel vous souhaitez déplacer.

Pour faire cela visuellement, appuyez sur le graphique de l'objet dans les propriétés du comportement. Sélectionnez l'objet que vous souhaitez déplacer, puis déplacez la cible bleue à l'emplacement souhaité.

Une fois que vous êtes satisfait de la position, appuyez sur l'icône de coche pour accepter la nouvelle position. Remarquez que les champs X et Y dans les propriétés du comportement sont remplis automatiquement.

Si vous appuyez sur "Jouer" maintenant, vous verrez que cela fonctionne exactement comme les comportements sont configurés. L'objet se déplacera après que vous l'ayez touché.

Changement de page & Scènes :

Maintenant que vous avez votre première page avec des interactions configurées, vous souhaiterez peut-être ajouter des pages supplémentaires et la possibilité de glisser entre elles.

Il y a plusieurs façons d'ajouter le geste de glissement. Vous pouvez ajouter le comportement à un objet spécifique dans votre scène, ou l'ajouter aux Comportements Globaux afin qu'il affecte toutes les scènes de votre livre.

Pour ce tutoriel, ajoutons le geste de glissement aux Comportements Globaux afin de ne pas avoir à l'ajouter pour chaque nouvelle scène.

Pour commencer, ouvrez le "Menu de création" en appuyant sur l'icône dans le coin supérieur gauche.

Ensuite, appuyez sur le bouton "Comportements Globaux" en bas pour lancer l'éditeur de comportements. Les comportements que vous ajoutez ici affecteront l'ensemble de votre projet et s'exécuteront lorsque vous chargez chaque scène.

Ensuite, faites glisser un comportement "Glisser vers la gauche" et appuyez dessus une fois qu'il est ajouté au canevas pour ouvrir les propriétés du comportement.

Remarquez le commutateur "Glisser sur n'importe quoi". Si ce commutateur est désactivé, alors vous devez glisser sur un objet spécifique pour déclencher l'événement. Mettez le commutateur en position "Activé", afin que vous puissiez glisser sur n'importe quoi et ne pas être restreint à glisser sur un objet spécifique.

Remarque : Si vous ajoutez un comportement "Glisser" aux comportements globaux, il n'aura pas d'objet spécifique sélectionné. L'objet sur lequel vous êtes restreint est l'"Arrière-plan". Si vous ne mettez pas le commutateur en position "Activé", cela peut sembler fonctionner. Mais si vous ajoutez d'autres objets couvrant l'arrière-plan, ils peuvent interférer avec le glissement, surtout s'ils ont d'autres comportements d'entrée tactile ajoutés.

Ajoutez ensuite un comportement "Charger la scène suivante" et connectez-le au comportement de glissement. Cela chargera automatiquement la scène suivante une fois que vous aurez glissé votre doigt vers le côté gauche de l'écran.

Si vous n'avez pas d'autres scènes dans votre projet, la scène actuelle se rechargera. De plus, si vous êtes sur la dernière scène de votre projet, la scène suivante sera la première dans la liste des scènes.

Maintenant, vous pouvez ajouter une nouvelle scène à votre projet. Si vous appuyez sur "Jouer", vous verrez que votre geste de glissement fonctionne dans les deux scènes sans avoir à ajouter d'autres comportements.

Conclusion :

C'est essentiellement tout ce que vous devez savoir pour créer un livre interactif sur hyperPad. Vous pouvez expérimenter avec les différents comportements pour créer un large éventail d'interactions pour vos livres.