« Animate CC 2015 HTML5 Canvas - Boutons » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
m (Remplacement de texte — « <pageby nominor="false" comments="false"/> » par « <!-- <pageby nominor="false" comments="false"/> --> »)
 
(13 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{Ebauche}}
{{Ebauche}}
{{Tutoriels Flash|CC 2014 Canvas|débutant}}
{{Tutoriels Flash|Flash CC 2014 (HTML5 Canvas), Animate CC 2015 (HTML5 Canvas)|débutant}}
<pageby nominor="false" comments="false"/>
<!-- <pageby nominor="false" comments="false"/> -->


== Introduction ==
== Introduction ==
Animate CC permet de produire plusieurs types d'applications: Flash, Flash pour desktop ou mobile (AIR), HTML5 avec Canvas ou WebGL. Ce tutorial concerne l'utilisation de Animate CC (ou de Flash CC 2014) pour créer des applications en HTML.


<div class="tut_goals">
<div class="tut_goals">
; Objectifs d'apprentissage:
; Objectifs d'apprentissage
: Apprendre à créer des boutons en Flash CS4 ou CS3
: Apprendre à créer des boutons en Flash Professional CC 2014 Canvas ou Animate CC 2015 HTML5 Canevas
: Quelques notions de ActionScript
: Quelques notions de JavaScript
; Prérequis:
; Prérequis
* [[Flash CS4 - Créer des dessins avec les outils de dessin ]]
* [[Flash CS4 - Créer des dessins avec les outils de dessin ]]
* [[Flash CS4 - Arranger des dessins]]
* [[Flash CS4 - Arranger des dessins]]
* [[Flash CS4 - Transformer des dessins]]
* [[Flash CS4 - Transformer des dessins]]
 
; Suite
* [[Animate CC 2015 HTML5 Canvas - Symboles et clips]]


; Matériaux
; Matériaux
: [http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/ buttons-intro]
: [http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/ buttons-intro]
</div>
</div>
Les boutons sont des composants d'interface qui permettent d'ajouter une interactivité, comme par exemple l'affichage d'informations supplémentaires, lancement d'un clip vidéo, des "sites web" faits en Flash, etc.
Les boutons sont des composants d'interface qui permettent d'ajouter une interactivité, comme par exemple l'affichage d'informations supplémentaires, le lancement d'un clip vidéo, des "sites web" faits avec Animate CC, etc.


Il existe trois types de boutons:
Il existe trois types de boutons:
* Les boutons "Flash" discutés dans ce module
* Les boutons "Flash" discutés dans ce module
* Les [[Flash CS4 - Composant bouton|Composants de type bouton]] qui font partie de la bibliothèque de composants intégrés fournissant divers composants de l'interface faciles à utiliser. Ne marchent pas avec HTML5 / Canvas
* Les [[Flash CS4 - Composant bouton|Composants de type bouton]] qui font partie de la bibliothèque de composants intégrés fournissant divers composants de l'interface faciles à utiliser. Ce type de bouton ne marche pas avec l'option HTML5 / Canvas
* Tout objet peut servir de bouton. A vous de programmer son animation (si nécessaire).
* Tout objet peut servir de bouton. A vous de programmer son animation (si nécessaire).


Ligne 30 : Ligne 33 :


(2) Pour '''utiliser''' un bouton:
(2) Pour '''utiliser''' un bouton:
* Il faut ajouter du code ActionScript, qui réagira aux gestes de l'utilisateur comme les clics de souris.
* Il faut ajouter du code JavaScript, qui réagira aux gestes de l'utilisateur comme les clics de souris.


; Un mot d'avertissement
; Un mot d'avertissement
ActionScript 2.0 et ActionScript 3.0 (Flash CS3 / 9 et versions ultérieures) ne fonctionnent pas de la même façon!
ActionScript 2.0, ActionScript 3.0 et JavaScript ne fonctionnent pas de la même façon!
* ActionScript 2.0: oubliez !
* ActionScript 2.0: oubliez !
* ActionScript 3.0: Il faut assigner un "gestionnaire d'événement" au bouton, c'est-à-dire une fonction qui sera déclenchée lorsque qqun appuie sur le bouton. Dans ce tutoriel, nous couvrirons les trois éléments de programmation nécessaires pour ce type de tâche.
* ActionScript 3.0: Il faut assigner un "gestionnaire d'événement" au bouton, c'est-à-dire une fonction qui sera déclenchée lorsque quelqu'un appuie sur le bouton. Dans ce tutoriel, nous couvrirons les trois éléments de programmation nécessaires pour ce type de tâche.
* JavaScript est similaire à ActionScript 3.0, mais tous les détails sont différents ....
* JavaScript / CreateJS est similaire à ActionScript 3.0, mais tous les détails sont différents.


; Astuce
; Astuce
Si vous n'avez aucune expérience en programmation, on vous conseille de télécharger les fichiers sources (liens ci-dessous) et de jouer avec eux, par exemple ajouter un bouton supplémentaire et adapter le code. Vous pouvez également vous referez au "code snippets" pour donner une fonction à vos boutons. En cliquant sur code snippets, vous aurez une liste de fonctions avec un code deja écris.
Si vous n'avez aucune expérience en programmation, on vous conseille de télécharger les fichiers sources (liens ci-dessous) et de jouer avec eux, par exemple ajouter un bouton supplémentaire et adapter le code. Vous pouvez également vous referez au "code snippets" pour donner une fonction à vos boutons. En cliquant sur code snippets, vous aurez une liste de fonctions avec un code déjà écris.


== Les boutons intégrés de Flash ==
== Les boutons intégrés de Flash ==
Ligne 45 : Ligne 48 :
Flash contenait une variété de boutons pré-construits jusqu'à la version CS6.  Pour les utiliser, il fallait fixer le panneau ''Library-Buttons.fla'' panneau à côté de votre panneau ''library'': Menu''Window-> Common libraries-> Library - Buttons.fla''.
Flash contenait une variété de boutons pré-construits jusqu'à la version CS6.  Pour les utiliser, il fallait fixer le panneau ''Library-Buttons.fla'' panneau à côté de votre panneau ''library'': Menu''Window-> Common libraries-> Library - Buttons.fla''.


Si vous avez un ancien Flash, vous pouvez copier/coller ces boutons et les adapter à vos besoins (lire [[Flash CS4 - Boutons]]). Toutes les "common libraries" ont été enlevés dans Flash CC, mais on peut les récuperer de Flash CS6:
Si vous avez un ancien Flash, vous pouvez copier/coller ces boutons et les adapter à vos besoins (lire [[Flash CS4 - Boutons]]). Toutes les "common libraries" ont été enlevés dans Flash CC, mais on peut les récupérer de Flash CS6 :
** Dans Flash CC: File -> Import -> Open External library
*Dans Flash CC: File -> Import -> Open External library
** Ensuite indiquer l'emplacement du fichier *.fla qui contient les objets de la bibliothèque, par exemple:
* Ensuite indiquer l'emplacement du fichier *.fla qui contient les objets de la bibliothèque, par exemple:
: C:\Program Files (x86)\Adobe\Adobe Flash CS6\Common\Configuration\Libraries\Buttons.fla
: C:\Program Files (x86)\Adobe\Adobe Flash CS6\Common\Configuration\Libraries\Buttons.fla
: etc.
: etc.
'''Boutons CS6'''
* [http://tecfa.unige.ch/guides/flash/cs6/Buttons.fla Buttons.fla]


== Architecture des boutons ==
== Architecture des boutons ==
Ligne 69 : Ligne 74 :
: Défini la zone sensible à la souris. Son contenu ne sera pas affiché. Permet par exemple de définir une zone sensible plus réduite.
: Défini la zone sensible à la souris. Son contenu ne sera pas affiché. Permet par exemple de définir une zone sensible plus réduite.


Les différentes sortes de boutons ont des différentes calques (habituellement entre trois et cinq selon la complexité des dessins).
Les différentes sortes de boutons ont des calques différents (habituellement entre trois et cinq selon la complexité des dessins).
Ces couches contiennent ''juste'' des dessins pour trois états (up, down et over) du bouton. Le moteur de Flash, va sélectionner le frame approprié en fonction de l'action de l'utilisateur (souris ailleurs, souris dessus, la souris appuyé, etc.)
Ces couches contiennent ''juste'' des dessins pour trois états (up, down et over) du bouton. Le moteur de Flash va sélectionner le frame approprié en fonction de l'action de l'utilisateur (souris ailleurs, souris dessus, la souris appuyé, etc.)


Les débutants sont conseillés d'utiliser ces boutons "tel quel". Il n'est pas nécessaire de changer autre chose que l'étiquette....
Les débutants sont conseillés d'utiliser ces boutons "tel quel". Il n'est pas nécessaire de changer autre chose que l'étiquette....
Ligne 76 : Ligne 81 :
; Différence entre les boutons livrés avec Flash et les vôtres (voir ci-dessous)
; Différence entre les boutons livrés avec Flash et les vôtres (voir ci-dessous)


Il n'y a aucun différence entre les boutons intégrés et celles que vous pouvez créer vous-même.
Il n'y a aucune différence entre les boutons intégrés et ceux que vous pouvez créer vous-même.


Dans la section suivante, nous allons d'abord voir comment utiliser un bouton pour lancer une fusée.
Dans la section suivante, nous allons d'abord voir comment utiliser un bouton pour lancer une fusée.


== Créer des boutons pour naviguer dans le scénario ==
== Créer des boutons pour naviguer dans le scénario ==
On déconseille d'utiliser la timeline principale (scénario) pour créer des animations interactives. L'exemple ci-dessous le fait, mais vous pouvez très bien faire la même chose à l'intérieur d'un clip. Dans ce cas:
* Créez un nouveau symbol de type movie-clip
* Ouvrez pour édition (double-clic)
* etc ...


=== Exemple lance-missiles ===
=== Exemple lance-missiles ===
Ligne 92 : Ligne 102 :
* Plus tard vous pouvez ajouter une animation par exemple. (Voir [[Flash CS4 - Interpolation de mouvement]]). Pour l'instant, mettez juste un petit dessin.
* Plus tard vous pouvez ajouter une animation par exemple. (Voir [[Flash CS4 - Interpolation de mouvement]]). Pour l'instant, mettez juste un petit dessin.


; Ajoutez bouton sur la scène
; Ajoutez un bouton sur la scène
* Créez un nouveau layer et donnez-lui un nom, par exemple ''Button''
* Créez un nouveau layer et donnez-lui un nom, par exemple ''Button''
* Ajoutez le bouton dans ce layer.
* Ajoutez le bouton dans ce layer.
* Vous pouvez régler sa taille avec le ''Free Transform Tool''(mais assurez-vous que vous n'êtes pas en train d'éditer le bouton (c.f. ci-dessus)
* Vous pouvez régler sa taille avec le ''Free Transform Tool ''(mais assurez-vous que vous n'êtes pas en train d'éditer le bouton (c.f. ci-dessus)
* Modifiez le champ de texte (double-cliquer deux fois) sur le texte, par exemple appeler l'étiquette "Go!".
* Modifiez le champ de texte (double-cliquer deux fois) sur le texte, par exemple appeler l'étiquette "Go!".


; Nom d'occurrence du bouton
; Nom d'occurrence du bouton
Vous devez donner un nom à ce bouton de lancement sur la scène, sinon JavaScript ne va pas le trouver. C'est comme dans la magie: vous nommer un objets - vous le contrôlez... Appelons cette instance:
Vous devez donner un nom à ce bouton de lancement sur la scène, sinon JavaScript ne va pas le trouver. C'est comme dans la magie : vous nommez un objet - vous le contrôlez... Appelons cette instance:
<source lang="actionscript">
<source lang="actionscript">
   my_button
   my_button
</source>
</source>


Dans le panneau de propriétés et remplissez le champ (voir ci-dessus si vous avez oublié). Assurez-vous que le nom est n'a pas de blancs ou des symboles spéciaux à l'intérieur (en fait, Flash va se plaindre si vous définissez un nom illégal).
Allez dans le panneau de propriétés et remplissez le champ (voir ci-dessus si vous avez oublié). Assurez-vous que le nom n'a pas de blancs ou de symboles spéciaux à l'intérieur (en fait, Flash va se plaindre si vous définissez un nom illégal).


; Ajout de code JavaScript
; Ajout de code JavaScript


Afin d'utiliser ce boutons, nous allons devoir écrire du code, c'est à dire un petit ''script'' avec le langage ActionScript. Ce code doit être défini dans le même frame que le bouton, mais nous utilisons généralement un ''layer'' différent. Les layers qui incluent un script est généralement appelée "Script" ou "action" ou "AS3".
Afin d'utiliser ce bouton, nous allons devoir écrire du code, c'est à dire un petit ''script'' avec le langage JavaScript. Ce code doit être défini dans le même frame que le bouton, mais nous utilisons généralement un ''layer'' différent. Le layer qui inclut un script est généralement appelée "Actions".


Pour ouvrir l'éditeur JavaScript, appuyez sur F9:
Pour ouvrir l'éditeur JavaScript,
* Appuyez sur F9:
* Ensuite, à gauche, sélectionner le script que vous voulez éditer.


[[image: flash-cs3-button-actionscript3-code.png | thumb | 700px | none | Code ActionScript 3 code pour associer une action à un événement utilisateur]]
Normalement, pour nos exemples simples, le script se trouve dans le calque "Actions" dans la première image.


Donc, voici étape par étape la procédure pour ajouter le code:
Donc, voici étape par étape la procédure pour ajouter le code:
Ligne 129 : Ligne 141 :
Maintenant, nous allons ajouter un peu plus de code au-dessous la ligne <code>this.stop ();</code>  Cliquez encore dans le frame 1 de la couche d'action appuyez sur F9 (si le panneau n'est plus visible)
Maintenant, nous allons ajouter un peu plus de code au-dessous la ligne <code>this.stop ();</code>  Cliquez encore dans le frame 1 de la couche d'action appuyez sur F9 (si le panneau n'est plus visible)


Ajouter ces lignes dessous du "stop ();":
Ajouter ces lignes en-dessous du "stop ();":
<source lang="actionscript">
<source lang="actionscript">
this.stop();
this.stop();
Ligne 144 : Ligne 156 :
</source>
</source>


Nous ne pouvons pas vraiment expliquer tous les détails du "Event Driven programming" ici, mais le principe est le suivant: Pour chaque objet qui doit réagir aux actions de l'utilisateur, vous devez définir ce qui se passera lorsque l'utilisateur fait quelque chose comme cliquer sur l'objet avec la souris.
Nous ne pouvons pas vraiment expliquer tous les détails du "Event Driven programming" ici, mais le principe est le suivant : pour chaque objet qui doit réagir aux actions de l'utilisateur, vous devez définir ce qui se passera lorsque l'utilisateur fera quelque chose comme cliquer sur l'objet avec la souris.


* Tout d'abord, il faut définir une fonction (c-a-d. un petit programme) qui "fait quelque chose", par exemple déplacer la tête de lecture dans le scénario. Dans notre cas nous avons appelé la fonction ''go_doit''.
* Tout d'abord, il faut définir une fonction (c-a-d. un petit programme) qui "fait quelque chose", par exemple déplacer la tête de lecture dans le scénario. Dans notre cas nous avons appelé la fonction ''go_doit''.
* Deuxièmement, il faut associer cette fonction à l'événement "cliquer sur le bouton". La méthode ''addEventListener'' vous permet de définir que la fonction ''launchRocket'' sera appelée quand un utilisateur clique sur un bouton (appelé "my_button" dans notre cas). En d'autres termes, vous ajoutez ce qu'on appelle un "gestionnaire d'événements" au bouton.
* Deuxièmement, il faut associer cette fonction à l'événement "cliquer sur le bouton". La méthode ''<code>addEventListener</code>'' vous permet de définir que la fonction <code>go_doit</code> sera appelée quand un utilisateur clique sur un bouton (appelé "<code>my_button</code>" dans notre cas). En d'autres termes, vous ajoutez ce qu'on appelle un "gestionnaire d'événements" au bouton.


; Réutilisation du code
; Réutilisation du code


Bien sûr vous pouvez réutiliser ce code pour un problème similaire, à savoir, passer l'animation à un autre endroit de la timeline lorsque l'utilisateur appuie sur un bouton. Tout ce que vous avez à faire est la chose suivante:
Bien sûr, vous pouvez réutiliser ce code pour un problème similaire, à savoir, passer l'animation à un autre endroit de la timeline lorsque l'utilisateur appuie sur un bouton. Tout ce que vous avez à faire est la chose suivante:
* Mettez un bouton sur votre scène
* Mettez un bouton sur votre scène
* Donnez-lui un nom à l'instance sur la scène
* Donnez-lui un nom à l'instance sur la scène
* Puis changez le nombre dans le code <code>gotoAndPlay (2);</code>. Par exemple, changez-le en 5 si vous le souhaitez sauter à l'image 5.
* Puis changez le nombre dans le code <code>gotoAndPlay(2);</code>. Par exemple, changez-le en 5 si vous le souhaitez sauter à l'image 5.
 
Astuce: Si votre code devient plus grand, détachez le panneau Actions Frame. Appuyez sur F9 pour le cacher/afficher.


; Résultats
; Résultats
Évidemment, il manque encore la fusée. Il faudrait maintenant l'ajouter dans le frame 2.
Évidemment, il manque encore la fusée. Il faudrait maintenant l'ajouter dans le frame 2 et ensuite ajouter un motion tween (une interpolation de mouvement).


* Vous pouvez regarder mon résultat publié: [http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/cc-html-rocket-launcher.html cc-html-rocket-launcher.html]  
* Vous pouvez regarder mon résultat publié: [http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/cc-html-rocket-launcher.html cc-html-rocket-launcher.html]  
Ligne 168 : Ligne 178 :
=== Exercice - Ajouter un bouton start à une de vos animations ===
=== Exercice - Ajouter un bouton start à une de vos animations ===


* Faites un copie du fichier.fla d'une de vos animations de mouvement
* Faites une copie du fichier.fla d'une de vos animations de mouvement
* Ouvrez-le dans Flash Pro
* Ouvrez-le dans Animate CC
* Déplacez votre animation. Elle doit commence dans l'image 2. Faites glisser au moins la première image clé (''keyframe''). Cliquez dessus et glissez lorsque vous voyez le rectangle blanc attaché au curseur de la souris.
* Déplacez votre animation. Elle doit commencer dans l'image 2. Faites glisser au moins la première image clé (''keyframe''). Cliquez dessus et glissez lorsque vous voyez le rectangle blanc attaché au curseur de la souris.
* Ajout d'un nouveau calque
* Ajoutez un nouveau calque
* Insérez quelques graphiques / texte sur l'image 1 (sinon votre animation flash sera vide)
* Insérez quelques graphiques / textes sur l'image 1 (sinon votre animation flash sera vide)
* Puis, ajoutez dans un nouveau calque un bouton qui permettra à un utilisateur de sauter à l'image 2, quand il clique sur le bouton
* Puis, ajoutez dans un nouveau calque un bouton qui permettra à un utilisateur de sauter à l'image 2 quand il clique sur le bouton,
* Ajoutez le code JavaScript (n'oubliez pas d'ajouter également un "this.stop();".
* Ajoutez le code JavaScript (n'oubliez pas d'ajouter également un "this.stop();")


== Sites Flash à base de menus ==
== Sites Flash à base de menus ==


Vous pouvez construire des petits sites "web" avec des boutons de navigation avec la même technologie. Le principe est simple:
Vous pouvez construire des petits sites "web" avec des boutons de navigation avec la même technologie. Le principe est simple:
# Mettez des contenu dans des frames différents (vous pouvez utiliser de multiples couches si vous avez envie).
# Mettez des contenus dans des frames différents (vous pouvez utiliser de multiples couches si vous avez envie).
# On commencera par ajouter une instruction <code>stop();</code> dans le frame 1.
# On commencera par ajouter une instruction <code>this.stop();</code> dans le frame 1.
# On va ensuite créer des bouton, c.a.d. un bouton pour chaque frame X.
# On va ensuite créer des boutons, c.a.d. un bouton pour chaque frame X.
# Ensuite on va écrire le code pour chaque bouton et qui transportera l'utilisateur vers le frame "X".
# Ensuite on va écrire le code pour chaque bouton qui transportera l'utilisateur vers le frame "X".


Voici les étapes
Voici les étapes
Ligne 188 : Ligne 198 :
; Étape 1 - créer des "pages"
; Étape 1 - créer des "pages"
* Création d'un layer "Pages"
* Création d'un layer "Pages"
* Ajoutez des frames et remplissez chaque frame avec du texte, images, vidéos, etc. Pour ajouter un frame vide: appuyez sur F7.
* Ajoutez des frames et remplissez chaque frame avec du texte, images, vidéos, etc. Pour ajouter un frame vide à la timeline: appuyez sur F7.
* Imaginez déjà où vous voulez placer les boutons (en dehors du contenu ou dans un "coin" ..)
* Imaginez déjà où vous voulez placer les boutons de navigation


; Étape 1b - variante avec des animations
; Étape 1b - variante avec des animations
* Vous pouvez également ajouter des animations si vous le souhaitez. Dans ce cas créez un objet movie clip et mettez l'animation '''dans''' le clip. Autrement dit, n'utilisez pas le scénario principal (timeline) pour faire des animations. Donc: double-clic sur l'objet "movie clip" et éditer sa propre timeline ....
* Vous pouvez également ajouter des animations si vous le souhaitez. Dans ce cas créez un objet movie clip et mettez l'animation '''dans''' le clip. Autrement dit, n'utilisez pas le scénario principal (timeline) pour faire des animations. Donc: Créez d'abord un clip (Menu Insert->New Symbol, dessiner quelque chose et ajouter une animation. Ensuite revenir à la timeline principale. Voir [[Flash CC 2014 Canvas - Symboles et clips‎]] pour plus de détails.


; Étape 2 - Création du menu (c.a.d. des boutons)
; Étape 2 - Création du menu (c.a.d. des boutons)
* Créez un nouveau calque et nommez le "Menu" par exemple
* Créez un nouveau calque et nommez le "Menu" par exemple
* Insérer dans l'image no 1 du layer "Menu" une série de boutons qui mèneront à chacune des "pages". Attention: Chaque bouton doit être une instance d'un symbole différent.
* Insérez dans l'image no 1 du layer "Menu" une série de boutons qui mèneront à chacune des "pages". Attention: Chaque bouton doit être l'instance d'un symbole différent.
* Pour que les boutons soient visibles partout, il faut élargir cette couche jusqu'à la dernière image de vos "pages" (appuyez sur F5).  
* Pour que les boutons soient visibles partout, il faut '''élargir ce frame jusqu'à la dernière image de vos "pages"''' (appuyez sur F5).  


Pour '''chaque bouton''':
Pour '''chaque bouton''' que vous réutilisez depuis cet exemple:
* Faites glisser un bouton de la bibliothèque de boutons sur la scène
* Il faut créer un symbole différent pour chaque bouton, vous pouvez dupliquer dans la bibliothèque
* Changer l'étiquette: Double-cliquez sur le bouton, puis déverrouiller le calque de texte, changez-le.
* Pour changer l'étiquette: Double-cliquez sur le bouton, puis déverrouillez le calque de texte, changez-le.
* Donnez un nom d'instance dans le panneau des paramètres, par exemple sunrise_btn pour un des boutons.
* Donnez un nom d'instance dans le panneau des paramètres, par exemple sunrise_btn pour un des boutons.
* Une fois que vous avez terminé, utilisez l'outil d'alignement de distribuer et de les aligner correctement.
* Une fois que vous avez terminé, utilisez l'outil d'alignement pour les distribuer et les aligner correctement.


; Étape 4 - Nom de vos frames (fr.: images)
; Étape 4 - Nom de vos frames (fr. images)


Ici nous allons utiliser des ''named frames'' (images nommés). Si vous donnez des noms aux frames vous pouvez ensuite les déplacer sans changer le code.
Ici nous allons utiliser des ''named frames'' (images nommées). Si vous donnez des noms aux frames vous pouvez ensuite les déplacer sans changer le code.


Pour nommer un frame:
Pour nommer un frame:
* Cliquez sur chaque frame qui marque le début d'une "page" dans votre site flash et insérez un nom dans les properties
* Cliquez sur chaque frame qui marque le début d'une "page" dans votre site flash et insérez un nom dans le panneau properties


[[Image: flash-cc-named-frames.png | frame | none | Nom de frames (CC) ]]
[[Image: flash-cc-named-frames.png | frame | none | Nom de frames (CC) ]]
Ligne 216 : Ligne 226 :
; Étape 5 - Vérification du boulot
; Étape 5 - Vérification du boulot
* Chaque ''button instance'' doit porter un nom différent
* Chaque ''button instance'' doit porter un nom différent
* Chaque frame cible (où l'utilisateur doit pouvoir atterrir doit avoir un nom différent
* Chaque frame cible (où l'utilisateur doit pouvoir atterrir) doit avoir un nom différent


; Étape 6 - Créer le script
; Étape 6 - Créer le script
Ligne 231 : Ligne 241 :


<source lang="actionscript">
<source lang="actionscript">
/* This will stop Flash from playing all the frames
  User must stay in Frame 1 */
this.stop();


this.home_btn.addEventListener("click", clickHandler1.bind(this));
this.lake_btn.addEventListener("click", clickHandler2.bind(this));
this.palmtree_btn.addEventListener("click", clickHandler3.bind(this));
this.sunrise_btn.addEventListener("click", clickHandler4.bind(this));
/* Each function defines where to move the playhead in the animation.
  E.g. clickHandler2 will go to frame 3 and then stop
  */
function clickHandler1(e) {
this.gotoAndStop("home");
}
function clickHandler2(e) {
this.gotoAndStop("lake");
}
function clickHandler3(e) {
this.gotoAndStop("palmtree");
}
function clickHandler4(e) {
this.gotoAndStop("sunrise");
}
</source>
</source>


; Si cela ne fonctionne pas
; Si cela ne fonctionne pas
* Il existe peut-être des erreurs de syntaxe et Flash vous le dira dans le panneau de sortie qui apparaît. Regardez les numéros de ligne et n'ignorez pas ces messages
* Il existe peut-être des erreurs de syntaxe et Flash vous le dira dans le panneau de sortie qui apparaît. Regardez les numéros de ligne et n'ignorez pas ces messages
* Vous avez mal orthographié un bouton ou un noms de frame dans le script. ActionScript est sensible à la casse!
* Vous avez mal orthographié un bouton ou un nom de frame dans le script. ActionScript est sensible à la casse!


; Résultats  
; Résultats  
* http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/cc-html-simple-menu-site.html
* http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/cc-html-simple-menu-site.html
* * http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/cc-html-simple-menu-site.fla
* http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/cc-html-simple-menu-site.fla
 
== Créer des boutons de type "liens internet" ==
 
Vous venez de voir ci-dessus comment créer des boutons à partir d'images. Sachez qu'il est aussi possible de créer des boutons sous forme de texte cliquable, à la manière de liens internet.
 
'''Voici un exemple:'''
* Créez un nouveau symbole "bouton"
* Avec l'outil "Texte", ajoutez le texte du lien
* Dans le calque du bouton, ajoutez des images-clefs à "survol" et à "abaissé"
* Dans l'image-clefs "survol", modifiez le texte et soulignez-le
* Dans l'image-clefs "abaissé", modifiez la couleur du texte
 
Lorsque l'utilisateur survole le texte, celui-ci se souligne. Lorsqu'il clique sur le lien, le texte change de couleur.


'''Remarque''': Le nom de l'occurrence de chaque texte doit être différent (par exemple: bouton_accueil_normal, bouton_accueil_survol et bouton_accueil_abaissé).
== Créer vos propres boutons ==
 
== Créer des image maps avec des photos ==
 
Vous pouvez créer des "image maps" à partir d'un bitmap, c.a.d. insérer des ''hot spots'' sensibles à la souris. Autrement dit, transformer des bouts d'images en ''button symbol''.
 
Résumé des étapes:
 
; Préparer une image
* Mettre une image sur la scène
* Break apart
 
; Sculpter un fragment
 
* Désélectionner l'image!
* Prenez une région avec l'outil Lasso (si nécessaire choisir l'option ''polygone'')
* Faites un clic droit -> Convertir en ''button symbol'' (c.f. ci-dessus). Vous devriez avoir maintenant avoir un bouton qui représente un fragment d'image dans la library.
* Cassez toute-de-suite l'instance. Clic droit et ''break apart''. L'image est comme avant maintenant. Alternativement (et mieux) tuez tout sur la scène et remettez la photo.
 
; Modifier le nouveau bouton
 
* Double-cliquez sur ce bouton dans la bibliothèque.
* Deux fois F6 pour avoir des copies dans les frames "Over" et "Down".
* Modify -> Union de ces copies pour obtenir des graphiques
* Remplacez la couleur "bitmap" avec une couleur qui a un alpha faible
Voilà un joli bouton.
 
* Maintenant vous pouvez le glisser sur l'image dans la scène. On vous conseille de faire cela dans un nouveau layer...
 
; Résultats
* Vous pouvez regarder un résultat "vite fait bien fait" publié ici [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-image-map.html ici]
* Le fichier source Flash: [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-image-map.fla flash-cs3-image-map.fla]
* Répertoire
: http://tecfa.unige.ch/guides/flash/ex/buttons-intro/
 
== Boutons animés ==
 
Si vous aimez l'idée de boutons fous, vous pouvez vraiment utiliser toutes vos compétences en graphisme et en animation. Les boutons peuvent inclure toute forme de graphiques, y compris des clips vidéo intégrés.
 
Afin d'utiliser des animations dans un ''button symbol'', il faut simpler créer des movie clips internes. Voir le [[Flash CS4 - Interpolation de mouvement]]). Placez ces clips dans l'un des frames du ''button symbol''.
 
; Résultats
* Vous pouvez regarder mon résultat publié  [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-button-animation.html ici]
* Le fichier source:
: [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-button-animation.fla flash-cs3-button-animation.fla]
* Répertoire
: http://tecfa.unige.ch/guides/flash/ex/buttons-intro/
 
== Résumé ActionScript ==
 
Dans la timeline, il faut toujours créer un layer appelée "Script" ou "Action". Utilisez uniquement ce layer pour scripter (sinon votre code devient désorganisé ...). Souvent, il faut  étendre la portée d'un script en appuyant sur F5 dans la timeline principe. Rien ne vous empêche d'avoir plusieurs layers de scripting si vous voulez avoir un script valable pour tout le scénario et certains scripts qui ne marchent que dans certains frames.
 
Pour associer un comportement à un clic de souris, utilisez du code comme celui-ci:
 
<source lang="actionscript">
button_instance_name.addEventListener(MouseEvent.CLICK,function_name);
function function_name (event:MouseEvent):void {
  gotoAndPlay(2);
}
</source>
 
Remplacer '''button_instance_name''' et '''function_name''' avec des noms appropriés.
* '''Button_instance_name''' fait référence au nom de l'instance du bouton (dans le panneau des propriétés!
* '''Function_name''' peut être ce que vous souhaitez (mais ne '''pas''' utilisez des espaces ou des caractères spéciaux dans les noms de fonction, sauf le trait de soulignement "_".
 
Voici un bon exemple:
<source lang="actionscript">
go_button.addEventListener(MouseEvent.CLICK,goFrameA);
function goFrameA (event:MouseEvent) { gotoAndPlay(2); }
</source>
Voici un mauvais exemple ( "go-button" a un tiret, et "go Frame" est en deux mots)
<source lang="actionscript">
go_button.addEventListener(MouseEvent.CLICK,goFrameA);
function goFrameA (event:MouseEvent) { gotoAndPlay(2); }
</source>


; Instructions ActionScript utiles:
C'est simple. Créez un nouveau symbol de type "button" et remplissez les 4 frames. Vous pouvez regarder l'exemple de la fusée discuté ci-dessus.
: <code> stop();</code>
:: va arrêter l'animation. Vous pouvez insérer des ''stop();'' partout où vous le souhaitez dans votre scénario.
: <code> gotoAndStop (4) </code>
:: va sauter à l'image n °4 et s'arrêter. Utilisez ceci pour les images fixes (diaporamas)
: <code> gotoAndPlay ("my_frame");</code>
::va sauter au frame appelé "my_name" et jouer ce frame et les suivants.
:: Utilisez ceci pour des animations qui s'étendent sur plusieurs frames. Mais considérez ensuite l'insertion d'un "stop();" dans la dernière image de cette animation.
: <code> gotoAndPlay (4) </code>
:: va sauter à l'image n° 4 et jouer les autres (comme ci-dessus).

Dernière version du 22 août 2016 à 19:01

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

Animate CC permet de produire plusieurs types d'applications: Flash, Flash pour desktop ou mobile (AIR), HTML5 avec Canvas ou WebGL. Ce tutorial concerne l'utilisation de Animate CC (ou de Flash CC 2014) pour créer des applications en HTML.

Objectifs d'apprentissage
Apprendre à créer des boutons en Flash Professional CC 2014 Canvas ou Animate CC 2015 HTML5 Canevas
Quelques notions de JavaScript
Prérequis
Suite
Matériaux
buttons-intro

Les boutons sont des composants d'interface qui permettent d'ajouter une interactivité, comme par exemple l'affichage d'informations supplémentaires, le lancement d'un clip vidéo, des "sites web" faits avec Animate CC, etc.

Il existe trois types de boutons:

  • Les boutons "Flash" discutés dans ce module
  • Les Composants de type bouton qui font partie de la bibliothèque de composants intégrés fournissant divers composants de l'interface faciles à utiliser. Ce type de bouton ne marche pas avec l'option HTML5 / Canvas
  • Tout objet peut servir de bouton. A vous de programmer son animation (si nécessaire).

Le résumé - Boutons Flash

(1) Dessinez quelque chose et transformez le dessin en bouton (ça peut également être une image que vous transformez en bouton). Pour ce faire, il faut tout sélectionner, clic droit, puis Convert to symbol (ou F8). Ensuite, dans la fenêtre des propriétés, sous type, sélectionnez Button;

(2) Pour utiliser un bouton:

  • Il faut ajouter du code JavaScript, qui réagira aux gestes de l'utilisateur comme les clics de souris.
Un mot d'avertissement

ActionScript 2.0, ActionScript 3.0 et JavaScript ne fonctionnent pas de la même façon!

  • ActionScript 2.0: oubliez !
  • ActionScript 3.0: Il faut assigner un "gestionnaire d'événement" au bouton, c'est-à-dire une fonction qui sera déclenchée lorsque quelqu'un appuie sur le bouton. Dans ce tutoriel, nous couvrirons les trois éléments de programmation nécessaires pour ce type de tâche.
  • JavaScript / CreateJS est similaire à ActionScript 3.0, mais tous les détails sont différents.
Astuce

Si vous n'avez aucune expérience en programmation, on vous conseille de télécharger les fichiers sources (liens ci-dessous) et de jouer avec eux, par exemple ajouter un bouton supplémentaire et adapter le code. Vous pouvez également vous referez au "code snippets" pour donner une fonction à vos boutons. En cliquant sur code snippets, vous aurez une liste de fonctions avec un code déjà écris.

Les boutons intégrés de Flash

Flash contenait une variété de boutons pré-construits jusqu'à la version CS6. Pour les utiliser, il fallait fixer le panneau Library-Buttons.fla panneau à côté de votre panneau library: MenuWindow-> Common libraries-> Library - Buttons.fla.

Si vous avez un ancien Flash, vous pouvez copier/coller ces boutons et les adapter à vos besoins (lire Flash CS4 - Boutons). Toutes les "common libraries" ont été enlevés dans Flash CC, mais on peut les récupérer de Flash CS6 :

  • Dans Flash CC: File -> Import -> Open External library
  • Ensuite indiquer l'emplacement du fichier *.fla qui contient les objets de la bibliothèque, par exemple:
C:\Program Files (x86)\Adobe\Adobe Flash CS6\Common\Configuration\Libraries\Buttons.fla
etc.

Boutons CS6

Architecture des boutons

Les boutons Flash (button symbols) contiennent tous quatre frames et un nombre variable de layers. Vous pouvez tout changer, à part le nombre et le nom des frames.

Les quatre frames obligatoires pour les button symbols sont:

Up
Le dessin qui apparaît lorsque le bouton est affiché sur la scène sans être "touché" par l'utilisateur
Over
Dessin lorsque l'utilisateur déplace la souris dessus. Par exemple un effet de "highlighting" (surbrillance).
Down
Dessin lorsque l'utilisateur clic dessus
Hit
Défini la zone sensible à la souris. Son contenu ne sera pas affiché. Permet par exemple de définir une zone sensible plus réduite.

Les différentes sortes de boutons ont des calques différents (habituellement entre trois et cinq selon la complexité des dessins). Ces couches contiennent juste des dessins pour trois états (up, down et over) du bouton. Le moteur de Flash va sélectionner le frame approprié en fonction de l'action de l'utilisateur (souris ailleurs, souris dessus, la souris appuyé, etc.)

Les débutants sont conseillés d'utiliser ces boutons "tel quel". Il n'est pas nécessaire de changer autre chose que l'étiquette....

Différence entre les boutons livrés avec Flash et les vôtres (voir ci-dessous)

Il n'y a aucune différence entre les boutons intégrés et ceux que vous pouvez créer vous-même.

Dans la section suivante, nous allons d'abord voir comment utiliser un bouton pour lancer une fusée.

Créer des boutons pour naviguer dans le scénario

On déconseille d'utiliser la timeline principale (scénario) pour créer des animations interactives. L'exemple ci-dessous le fait, mais vous pouvez très bien faire la même chose à l'intérieur d'un clip. Dans ce cas:

  • Créez un nouveau symbol de type movie-clip
  • Ouvrez pour édition (double-clic)
  • etc ...

Exemple lance-missiles

Flying Flash rocket

Le but c'est de faire une animation flash qui s'arrête d'abord au premier frame lors du chargement du fichier. L'utilisateur verra alors un bouton sur lequel il peut cliquer. L'animation devrait redémarrer au frame 2 une fois que l'utilisateur a cliqué.

Créez un nouveau keyframe
  • Faites un petit dessin
  • F7 (insert empty keyframe)
  • Plus tard vous pouvez ajouter une animation par exemple. (Voir Flash CS4 - Interpolation de mouvement). Pour l'instant, mettez juste un petit dessin.
Ajoutez un bouton sur la scène
  • Créez un nouveau layer et donnez-lui un nom, par exemple Button
  • Ajoutez le bouton dans ce layer.
  • Vous pouvez régler sa taille avec le Free Transform Tool (mais assurez-vous que vous n'êtes pas en train d'éditer le bouton (c.f. ci-dessus)
  • Modifiez le champ de texte (double-cliquer deux fois) sur le texte, par exemple appeler l'étiquette "Go!".
Nom d'occurrence du bouton

Vous devez donner un nom à ce bouton de lancement sur la scène, sinon JavaScript ne va pas le trouver. C'est comme dans la magie : vous nommez un objet - vous le contrôlez... Appelons cette instance:

  my_button

Allez dans le panneau de propriétés et remplissez le champ (voir ci-dessus si vous avez oublié). Assurez-vous que le nom n'a pas de blancs ou de symboles spéciaux à l'intérieur (en fait, Flash va se plaindre si vous définissez un nom illégal).

Ajout de code JavaScript

Afin d'utiliser ce bouton, nous allons devoir écrire du code, c'est à dire un petit script avec le langage JavaScript. Ce code doit être défini dans le même frame que le bouton, mais nous utilisons généralement un layer différent. Le layer qui inclut un script est généralement appelée "Actions".

Pour ouvrir l'éditeur JavaScript,

  • Appuyez sur F9:
  • Ensuite, à gauche, sélectionner le script que vous voulez éditer.

Normalement, pour nos exemples simples, le script se trouve dans le calque "Actions" dans la première image.

Donc, voici étape par étape la procédure pour ajouter le code:

Ajouter le code pour stopper le scénario (timeline)
  • Cliquez dans le premier frame
  • Ajoutez un nouveau layer et appelez-le "Actions"
  • Cliquez sur le frame 1 dans ce nouveau calque, puis appuyez sur F9 et insérez dans le panneau Actions-Frame:
this.stop ();

Ce code va simplement arrêter l'exécution du scénario principal. Flash n'affichera que le contenu de la première image (toutes les couches) et attendra...

Ajout du code pour la navigation

Maintenant, nous allons ajouter un peu plus de code au-dessous la ligne this.stop (); Cliquez encore dans le frame 1 de la couche d'action appuyez sur F9 (si le panneau n'est plus visible)

Ajouter ces lignes en-dessous du "stop ();":

this.stop();

// Adds an event listener to a symbol. Very much like ActionScript

this.my_button.addEventListener("click", go_doit.bind(this));

function go_doit()
{
	this.gotoAndPlay(2);
}

Nous ne pouvons pas vraiment expliquer tous les détails du "Event Driven programming" ici, mais le principe est le suivant : pour chaque objet qui doit réagir aux actions de l'utilisateur, vous devez définir ce qui se passera lorsque l'utilisateur fera quelque chose comme cliquer sur l'objet avec la souris.

  • Tout d'abord, il faut définir une fonction (c-a-d. un petit programme) qui "fait quelque chose", par exemple déplacer la tête de lecture dans le scénario. Dans notre cas nous avons appelé la fonction go_doit.
  • Deuxièmement, il faut associer cette fonction à l'événement "cliquer sur le bouton". La méthode addEventListener vous permet de définir que la fonction go_doit sera appelée quand un utilisateur clique sur un bouton (appelé "my_button" dans notre cas). En d'autres termes, vous ajoutez ce qu'on appelle un "gestionnaire d'événements" au bouton.
Réutilisation du code

Bien sûr, vous pouvez réutiliser ce code pour un problème similaire, à savoir, passer l'animation à un autre endroit de la timeline lorsque l'utilisateur appuie sur un bouton. Tout ce que vous avez à faire est la chose suivante:

  • Mettez un bouton sur votre scène
  • Donnez-lui un nom à l'instance sur la scène
  • Puis changez le nombre dans le code gotoAndPlay(2);. Par exemple, changez-le en 5 si vous le souhaitez sauter à l'image 5.
Résultats

Évidemment, il manque encore la fusée. Il faudrait maintenant l'ajouter dans le frame 2 et ensuite ajouter un motion tween (une interpolation de mouvement).

http://tecfa.unige.ch/guides/flash/cc-html5/buttons-intro/

Exercice - Ajouter un bouton start à une de vos animations

  • Faites une copie du fichier.fla d'une de vos animations de mouvement
  • Ouvrez-le dans Animate CC
  • Déplacez votre animation. Elle doit commencer dans l'image 2. Faites glisser au moins la première image clé (keyframe). Cliquez dessus et glissez lorsque vous voyez le rectangle blanc attaché au curseur de la souris.
  • Ajoutez un nouveau calque
  • Insérez quelques graphiques / textes sur l'image 1 (sinon votre animation flash sera vide)
  • Puis, ajoutez dans un nouveau calque un bouton qui permettra à un utilisateur de sauter à l'image 2 quand il clique sur le bouton,
  • Ajoutez le code JavaScript (n'oubliez pas d'ajouter également un "this.stop();")

Sites Flash à base de menus

Vous pouvez construire des petits sites "web" avec des boutons de navigation avec la même technologie. Le principe est simple:

  1. Mettez des contenus dans des frames différents (vous pouvez utiliser de multiples couches si vous avez envie).
  2. On commencera par ajouter une instruction this.stop(); dans le frame 1.
  3. On va ensuite créer des boutons, c.a.d. un bouton pour chaque frame X.
  4. Ensuite on va écrire le code pour chaque bouton qui transportera l'utilisateur vers le frame "X".

Voici les étapes

Étape 1 - créer des "pages"
  • Création d'un layer "Pages"
  • Ajoutez des frames et remplissez chaque frame avec du texte, images, vidéos, etc. Pour ajouter un frame vide à la timeline: appuyez sur F7.
  • Imaginez déjà où vous voulez placer les boutons de navigation
Étape 1b - variante avec des animations
  • Vous pouvez également ajouter des animations si vous le souhaitez. Dans ce cas créez un objet movie clip et mettez l'animation dans le clip. Autrement dit, n'utilisez pas le scénario principal (timeline) pour faire des animations. Donc: Créez d'abord un clip (Menu Insert->New Symbol, dessiner quelque chose et ajouter une animation. Ensuite revenir à la timeline principale. Voir Flash CC 2014 Canvas - Symboles et clips‎ pour plus de détails.
Étape 2 - Création du menu (c.a.d. des boutons)
  • Créez un nouveau calque et nommez le "Menu" par exemple
  • Insérez dans l'image no 1 du layer "Menu" une série de boutons qui mèneront à chacune des "pages". Attention: Chaque bouton doit être l'instance d'un symbole différent.
  • Pour que les boutons soient visibles partout, il faut élargir ce frame jusqu'à la dernière image de vos "pages" (appuyez sur F5).

Pour chaque bouton que vous réutilisez depuis cet exemple:

  • Il faut créer un symbole différent pour chaque bouton, vous pouvez dupliquer dans la bibliothèque
  • Pour changer l'étiquette: Double-cliquez sur le bouton, puis déverrouillez le calque de texte, changez-le.
  • Donnez un nom d'instance dans le panneau des paramètres, par exemple sunrise_btn pour un des boutons.
  • Une fois que vous avez terminé, utilisez l'outil d'alignement pour les distribuer et les aligner correctement.
Étape 4 - Nom de vos frames (fr. images)

Ici nous allons utiliser des named frames (images nommées). Si vous donnez des noms aux frames vous pouvez ensuite les déplacer sans changer le code.

Pour nommer un frame:

  • Cliquez sur chaque frame qui marque le début d'une "page" dans votre site flash et insérez un nom dans le panneau properties
Nom de frames (CC)
Étape 5 - Vérification du boulot
  • Chaque button instance doit porter un nom différent
  • Chaque frame cible (où l'utilisateur doit pouvoir atterrir) doit avoir un nom différent
Étape 6 - Créer le script
  • Créez un nouveau calque et nommez le "scripts" par exemple
  • Editer le frame 1 de cette couche ("scripts): F9
  • Rappel: Il faut étendre cette couche si nécessaire (par exemple aller dans le frame 8 et F5), sinon vous ne verrez pas vos boutons....
  • Insérez du code action script pour chaque bouton comme ci-dessous.

Nous utilisons essentiellement une action:

this.GotoAndStop ("your_frame_name"); pour passer à un frame et s'arrêter

Le script devrait alors ressembler à quelque chose comme ça. Je pense que j'ai fait aussi simple que possible pour les non-programmeurs. Le code inséré entre / * .... * / est un commentaire juste, à savoir une information que Flash ignorera mais qui est utile pour vous en tant que développeur.

/* This will stop Flash from playing all the frames
   User must stay in Frame 1 */
this.stop();

this.home_btn.addEventListener("click", clickHandler1.bind(this));
this.lake_btn.addEventListener("click", clickHandler2.bind(this));
this.palmtree_btn.addEventListener("click", clickHandler3.bind(this));
this.sunrise_btn.addEventListener("click", clickHandler4.bind(this));

/* Each function defines where to move the playhead in the animation.
   E.g. clickHandler2 will go to frame 3 and then stop
   */

function clickHandler1(e) {
	this.gotoAndStop("home");
}
function clickHandler2(e) {
	this.gotoAndStop("lake");
}
function clickHandler3(e) {
	this.gotoAndStop("palmtree");
}
function clickHandler4(e) {
	this.gotoAndStop("sunrise");
}
Si cela ne fonctionne pas
  • Il existe peut-être des erreurs de syntaxe et Flash vous le dira dans le panneau de sortie qui apparaît. Regardez les numéros de ligne et n'ignorez pas ces messages
  • Vous avez mal orthographié un bouton ou un nom de frame dans le script. ActionScript est sensible à la casse!
Résultats

Créer vos propres boutons

C'est simple. Créez un nouveau symbol de type "button" et remplissez les 4 frames. Vous pouvez regarder l'exemple de la fusée discuté ci-dessus.