Support de TD HTML5 - mamede.net 01 14 Sujet TD HTML5.pdf · Et on déplace le personnage sur la droite de la feuille. Testez l’animation du personnage qui se déplace (ça tient

Support de TD HTML5

MASTER MAPI, parcours Jeu vidéo MAJE1

Version 11/01/15

Gestion projet d’un jeu HTML5 Raphaël Borne Mamède janvier-mars 2015

MASTER MAPI, parcours Jeu vidéo MAJE1 2/33

Contents

1. Créer un déplacement ..................................................................................................................... 3

2. Pour changer la couleur d’un élément (à finir) ............................................................................. 11

3. Faire une action sur un clic (changer la taille d’un objet) ............................................................. 13

4. Afficher une boite de dialogue ...................................................................................................... 18

5. Pour créer un bouton interagissant avec une animation .............................................................. 20

6. Comment animer un personnage ................................................................................................. 23

7. Télécommande du Bonhomme animé .......................................................................................... 29

L’installation de Google Web Designer (GWD) est ici : http://www.google.fr/webdesigner/

http://www.google.fr/webdesigner/



1. Créer un déplacement

Créer un nouveau projet

Pour faire un cercle



Pour information, l’outil de sélection est ici :

Pour changer de couleur il suffit de sélectionner la forme et à droite dans propriété de cliquer sur la

couleur choisie (ou de directement cliquer sur une couleur une fois la forme créée)

Donner un nom à l’objet que l’on va manipuler



Bouton droit et créer un groupe

Ceci fait apparaître le groupe du cercle dans l’échelle de temps



Possibilité de nommer le groupe en double cliquant (attention il doit avoir un nom/ID différent des

autres éléments

Dans l’échelle de temps du groupe fraichement créé (quelques secondes plus loin) on fait bouton

droit « Insérer une image clé »

Le résultat

Maintenant pour créer une animation de déplacement, il faut préciser où est l’image au début (à

00 :00 :00) et où elle est à la fin (à la nouvelle image clé).

En gros au triangle de gauche le cercle est à une position.



Cercle au début

Ensuite sélectionner le triangle de droite, puis déplacer le cercle ailleurs sur la feuille

Cercle à présent déplacé



Pour jouer l’animation, cliquer sur le bouton lecture, possibilité de jouer en boucle avec l’icône

circulaire à côté

Il est possible de faire boucler l’animation en cliquant sur la flèche courbée (boucle : aucune, X fois,

ou à l’infini)



En sélectionnant 2 fois (choix de 2 répétitions ci-dessus), l’échelle de temps est dupliquée.

Il est aussi possible d’avoir l’aperçu dans le navigateur web, ceci permet en cliquant sur le bouton ci-

dessous, ceci à l’avantage de lancer tout ce qui est à exécuter, car le bouton lecture ne lance pas tout

ce qui est script. Donc si le bouton lecture ne fait pas marcher votre essai, essayez avant de lancer

avec le bouton « Aperçu ».

Le bouton publier permet de créer un HTML utilisable seul, possibilité de créer un zip aussi :

Fenêtre de génération du fichier (les puristes diraient exportation)



Message surtout à ceux qui sont allergiques au code : Saviez-vous que toutes les actions que vous

avez faites ont généré du code HTML5 ? Et oui, vous avez codé en HTML

La preuve en image :

Voilà votre œuvre. Simple et rapide de coder, non ?



2. Pour changer la couleur d’un élément (à finir)

Idem que pour déplacer un élément lors d’une ani

mation, mais ici il suffit de changer la couleur

Attention il faut faire cela avec un objet de type « div ».

On lui donne une couleur au début

Ensuite insérer une image clé

Ici c’est le pays du bleu

Ensuite sélectionner le triangle de droite, puis placer le cercle où l’on veut sur la feuille



Et nous mettons le pays du corail

Pour jouer l’animation, cliquer sur le bouton lecture, possibilité de jouer en boucle avec l’icône à côté



3. Faire une action sur un clic (changer la taille d’un objet)

Créer un élément Div (et lui donner une couleur car il sera plus lisible)

Lui donner un nom

Clic droit sur le div pour créer un évènement



Puis paramétrer l’évènement

D’où part l’action

Sur quel évènement on régit



Sur quoi est ce que l’on agit (des propriétés CSS d’éléments existants, c’est une figure de style)

Sur quel élément on agit (lui-même)



On change ses propriétés

Ici la largeur, taille et on donne un temps d’exécution pour faire une transition en douceur

Attention : marquer le nom des propriétés en anglais, marquer les unités (quand il y en a) et les

majuscules et minuscules n’ont pas l’air d’avoir d’importance

Les évènements se retrouvent à droite



Pour tester faire l’aperçu qui va exécuter dans un navigateur web :

Avant clic

Après clic

Well done.



4. Afficher une boite de dialogue

Et maintenant on va modifier le fichier précédent (faire une sauvegarde intermédiaire si vous voulez

conserver le travail précédent et enregistrer sous un autre nom) pour mettre une boite de dialogue à

la place.

On retourne dans les évènements pour modifier

Et on change le type d’action



Pour afficher une boite de dialogue

Bravo, vous avez fait du code HTML5.

Vous avez noté comment despécifier les caractères spéciaux ?

Traduction : rendre utilisable les caractères (dans une chaîne de caractère pour afficher un message à

l’utilisateur par exemple) qui sont normalement dans la syntaxe du code. Sans cela vous auriez eu

une erreur car le ‘ marque le début et la fin de la chaîne de caractère.



5. Pour créer un bouton interagissant avec une animation

Créer un bouton comme dans la partie « Faire une action sur un clic (changer la taille d’un objet) »

Faire un élément qui bouge dans l’espace de travail.

Dans l’échelle de temps, créer un « évènement » et un « libellé » au tout début de l’échelle de temps

en (avant de demander quoi est où, la capture d’écran est là pour aider ) :

Mettre l’échelle de temps au début (vous obtenez un trait bleu vertical sur toute la hauteur)

En cliquant sur le losange (pour l’évènement) et sur le triangle orienté en bas (pour le libellé)

Possibilité de renommer le libellé en faisant bouton droit sur le libellé (ici nommé « Debut »)

La mission est accomplie quand un losange apparait dans la zone chronométrée de l’échelle

de temps (ou demi losange si en tout début) et que le libellé correspondant à l’évènement

apparait sur la même zone

Il ne reste plus qu’à mettre le code relatif à l’action :

On ajoute un évènement au bouton (dont l’id est déjà définit, n’est-ce pas ?) :

Qui va déclencher un évènement ? Le bouton.



De quelle manière on va se dire, « On me demande quelque chose » ? En cliquant.

Sur quoi je vais agir ? L’échelle de temps, où l’on repositionne à une zone donnée et on lance

l’animation.



Qu’est-ce que j’anime ? Ici la page entière.

A quel repère temporel vais-je ? Celui que j’ai créé, en gros ce bouton va à chaque fois relancer

l’animation à partir du début. Car nous avons mis le losange « Début » au début. Si vous me suivez.

Et maintenant action ! On teste dans le navigateur.



6. Comment animer un personnage

L’idée est de dessiner un personnage et de lui ajouter deux animations en même temps, la

première une translation de gauche à droite, qui va simuler un déplacement de la gauche vers la

droite. En plus nous allons ajouter en simultané une oscillation qui va simuler un pas, c’est-à-dire un

mouvement allant de l’état à l’état en boucle : .. .. .. .. ..

. Les deux mouvements cumulés donnent l’impression d’avoir un mouvement de marche de

gauche à droite. Il faut juste bien gérer la durée d’une animation par rapport à l’autre pour que le

rendu soit réaliste et que le bonhomme ne traîne pas trop la jambe. Sinon dessinez aussi une canne

ou l’appeler House.

Créer sur le calque courant, un bonhomme à gauche en position verticale , on groupera tous ses éléments (ronds, traits de jambe, de bras, etc. car il est livré en kit) et que l’on appellera « Bonhomme » (aïe, aïe, attention aux majuscules).

Faire comme précédemment et créer le déplacement de gauche à droite.

Dans l’échelle de temps (quelques secondes plus loin) on fait bouton droit « Insérer une image clé »



On se positionne sur la dernière image et on déplace le bonhomme à droite de l’image.

Et on déplace le personnage sur la droite de la feuille.

Testez l’animation du personnage qui se déplace (ça tient plus de la télékinésie pour l’instant),

cliquer sur le bouton lecture, possibilité de jouer en boucle avec l’icône à côté.

A présent on va simuler la marche.

Avec l’outil de sélection on double clic sur le bonhomme.



Ceci a changé dans la fenêtre de travail (car le Bonhomme est un groupe d’éléments), nous sommes

rentré à un niveau de profondeur supplémentaire (dans le groupe), pour ressortir il suffira de cliquer

sur le « DIV » (toujours ci-dessous). Avez-vous remarqué un changement dans l’échelle de temps ?

Il n’y a plus aucune animation. Et oui nous sommes allés plus en profondeur, au niveau supérieur (le

précèdent hors groupe) nous déplacions le personnage de gauche à droite. A présent nous sommes

rentrés dans le groupe, nous pouvons ajouter une nouvelle animation, qui va être l’oscillation (ou

inclinaison si vous préférez).

Avant cela sélectionné les éléments et fait un nouveau groupe que l’on appellera « Bonhomme2 »

(aïe, aïe, toujours attention aux majuscules). Le fait d’avoir un groupe permet à GWD de considérer

l’ensemble comme un seul élément, et non un ensemble de pièces détacher. Donc plus simple à

animer.

Faisons l’animation en mode simplifié pour commencer (ceci va changer et va vous plaire).

Cliquez sur

La première case est l’écran actuel. Il suffit de cliquer sur le « + » et de faire pivoter le personnage

pour créer le deuxième écran de l’animation.



Pour le faire pivoter, prendre le bon outil, l’outil de rotation

Cliquer sur le personnage et déplacer le centre de rotation du coin, vers le centre du personnage.

De l’angle

Au centre (aimanté sur le centre quand on passe à proximité)



Avec cet outil on peut faire pivoter suivant 3 axes, comme pour faire de la 3D. Ici nous allons utiliser

seulement la roue bleue pour incliner le personnage.

On reclique sur le « + » de l’échelle de temps et on redresse le personnage

Et voilà c’est fait. Appuyez sur lecture.

Il est possible de changer la durée de chaque phase en retournant dans le mode avancé d’animation



Pour allonger la durée de l’animation, il suffit de déplacer vers la droite (pour allonger la durée) les

losanges et demis losanges de la ligne d’animation.

Autre détail qui a son importance, il vaut mieux mettre cette animation (l’inclinaison au sein du

groupe) en infini, sinon le personnage ne va s’incliner qu’une seule fois, ce qui est un peu léger.



7. Télécommande du Bonhomme animé

Maintenant que ceci est fait, nous allons créer une télécommande

Comme vous l’avez déjà fait, nous allons ajouter des évènements et des libellés « Debut » et « Fin ».

Faire 4 boutons « Lecture », « Stop », « Arriere » et « Avant » :

Simples

Ou plus travaillés, aucune importance le tout est de s’y retrouver (pour info j’ai utilisé la plume)

Ajouter des évènements sur les boutons. Chaque évènement nous déplace la position de la timeline

(en gros les boutons permettent de voyager dans le temps) :



Vous êtes grands, vous devriez y arriver tout seul comme vous avez déjà fait un travail similaire

avant.

Pour Arriere et Avant, vous aurez une question, à laquelle vous saurez répondre seul en réfléchissant

5 secondes question incluse

Une fois ceci fait, vous remarquez que tout va bien, ou presque. La télécommande n’interagit que sur

le déplacement de gauche à droite, et pas sur l’oscillation. Quand vous arrêtez le bonhomme il est en

pleine crise de schizophrénie et se tape la tête contre le mur.

Dommage, nous y étions presque.

A présent pour aider le personnage il faut aller dans le code. Courage vous allez vous en remettre

Pour les actions à présent il faut aller pour chaque bouton ici :



Il suffit d’entrer les éléments suivants :

Pour le bouton lecture, la première ligne était celle générée automatiquement, la deuxième celle qui

manquait :

Pour pause :



Pour retour au début :

Pour aller à la fin (vous saurez deviner le début des lignes) :

Bon ok, il manque un ingrédient et ça ne marche pas. Je vous laisse réfléchir quelques instants

pourquoi.

Tic, tac, tic, tac, tic, tac.






Dans le code que vous venez de coller, vous faîtes référence au mot clé « Bonhomme », mais ceci

n’est pas le nom du groupe, mais le nom de l’ID associé au groupe (dans propriétés). Et comme je ne

vous ai pas dit de mettre une valeur dans l’ID, vous ne l’avez pas fait, j’en suis sûr

Si à présent ça ne marche pas, c’est qu’il faut faire « Aperçu » et pas juste le bouton lecture.

Bravo, ce devrait fonctionner.

Pour information, lorsque je faisais faire le TP en flash, les étudiants devaient vraiment aller bien plus

dans le code en flash pour faire fonctionner. Là je perdais les deux tiers de la classe, alors que là

j’espère n’en avoir perdu qu’un quart. On va compter combien de personnes ont fini le TD.

Documents

Support de TD HTML5 - mamede.net 01 14 Sujet TD HTML5.pdf · Et on déplace le personnage sur la droite de la feuille. Testez l’animation du personnage qui se déplace (ça tient