Depuis 2020, les animations Flash ne sont plus reconnues par les navigateurs, Flash a été remplacé par Adobe Animate qui permet de publier sur le Web en HTML5 des animations programmées non plus en ActionScript mais en JavaScript.

Cet ouvrage complet et pratique permet d’acquérir toutes les notions indispen­sables pour publier des animations en HTML5 à l’aide d’Adobe Animate. Tout particulièrement destiné aux étudiants et aux débutants en programmation web, il s’adresse également aux graphistes, à toute personne sachant réaliser des anima­tions avec Flash et aux programmeurs en ActionScript qui désirent convertir leurs travaux en HTLM5. Il n’aborde pas en profondeur les outils de dessin ni les bases de l’animation dans Animate.

Les deux premiers chapitres sont destinés plus particulièrement aux débutants qui ne maitrisent pas l’interface graphique d’Adobe Animate. Les chapitres suivants sont consacrés à la programmation et à la publication en HTML5 : utilisation de conditions, de boutons et de clips, de glisser-déposer, exploitation de clips imbri­qués, d’occurrences dynamiques, gestion du temps, du son et de la vidéo, exploi­tation de composants…

Pour permettre au lecteur de mettre en pratique ses connaissances, chaque cha­pitre est constitué d’une série d’exercices progressifs, dont les fichiers source et les corrigés sont disponibles en téléchargement. Le lecteur pourra égale­ment construire au fil des chapitres un mini site internet : conception de rubriques animées, mise en place d’une navigation ergonomique, intégration dynamique de textes, photos et vidéos.

Ce livre est avant tout un ouvrage de vulgarisation, le vocabulaire est adapté pour ne pas effrayer les « réfractaires au code ». Vous pourrez ainsi apprendre à utiliser Adobe Animate tout en pratiquant et en vous amusant !

Consultez les exemples proposés par l'auteur

Téléchargements

• Des fichiers complémentaires (46 696 Ko)

Avant-propos

1. Pourquoi cet ouvrage ?
2. À qui s’adresse ce livre ?
3. Aide à la lecture
4. Un peu d'histoire : de Flash à Animate

L'environnement de programmation

1. Introduction
2. L'interface graphique
   1. Bibliothèque, scène, scénario
   2. Créer une interpolation de mouvement
3. Publier l'animation dans le navigateur
   1. Publier l’animation
   2. Gérer les paramètres de publicationen HTML5
4. Premiers pas en JavaScript
   1. La fenêtre Actions
   2. S’aider des fragments de code
   3. L’importance du terme « this »
   4. Attention à la syntaxe

La gestion des occurrences

1. Introduction
2. Gérer les symboles et les occurrences
   1. Symbole et occurrence
   2. Placer des occurrences sur la scène
3. Les différents types de symboles
   1. Créer un bouton
   2. Actions sur un bouton
   3. Comprendre la syntaxe du code saisi
   4. Naviguer dans l’animation à l’aide de boutons
4. Clips imbriqués : clip parent & clip enfant
   1. Clips imbriqués
   2. Actions dans les clips imbriqués

Gestion du texte

1. Introduction
2. Ajouter du texte sur la scène
   1. Texte statique ou dynamique
   2. Explications
3. Modifier le texte au cours de l'animation
   1. Variables de type String
   2. Variables globales

Interroger et déboguer

1. Introduction
2. Deux méthodes pour interroger ou alerter
   1. La méthode alert() - exemple 1
   2. La méthode alert() - exemple 2
   3. La méthode console.log()
3. Déboguer une animation
   1. Des commentaires parfois bien utiles
4. Poser des questions
   1. Connaître le nombre d’occurrences
   2. Connaître le nom d’une occurrence
   3. Connaître le numéro d’une occurrence

Les actions en continu

1. Introduction
2. Exécuter une action en continu
   1. Faire tourner une roue en cliquant
   2. Faire tourner une roue en continu
   3. Interrompre l’exécution en continu

Fixer des conditions

1. Introduction
2. Les tests conditionnels
   1. Le test simple
   2. Si... sinon...
   3. Si... ou si... ou sinon...
   4. Affectation et comparaison
3. Les tests multiples
   1. Switch

Utiliser des boutons

1. Introduction
2. Répéter plusieurs fois la même ligne de code
   1. La boucle for()
3. Un bouton bascule
   1. Créer un clip animé
   2. Utiliser un clip enfant
   3. Rendre un texte ou un clip inactif

Des boutons ou des clips

1. Introduction
2. Clip ou bouton, lequel choisir ?
   1. Lancer une animation avec un bouton
   2. Clip ou bouton, lequel choisir ?
   3. Lancer une animation avec un clip
3. Une barre de navigation
   1. Créer une barre de navigation
   2. Application dans une animation

Le glisser-déposer (drag & drop)

1. Introduction
2. Les coordonnées du curseur
   1. Abscisse et ordonnée du curseur
   2. Arrondir une variable
3. Le drag & drop tout simplement
   1. Glisser-déposer un disque dans un carré
   2. Utiliser les propriétés offsetXet offsetY
   3. Rôle du centre de position dans le glisser-déplacer
4. Déterminer une zone de drag-drop
   1. Glisser-déposer dans une zone rectangulaire
   2. Faire glisser un clip horizontalement

Collisions

1. Introduction
2. Une course de coccinelles
   1. Math.random()
   2. Tester si deux occurences se touchent
3. Les résultats de la course
   1. Glisser-déposer par rapport aux positions
   2. Glisser-déposer et hitTest
4. Amélioration du glisser-déposer couplé au hitTest
   1. Une animation de chimie

Gérer les plans entre occurrences

1. Plans entre occurrences
   1. Connaître le nombre et le numérodes occurrences
   2. Mettre une occurrence au premier plan
   3. Intervertir deux occurrences ou réinitialiserl’ensemble
2. Glisser-déposer et appel d'une fonction
   1. Appel d’une fonction et gestion de plans entre occurrences
   2. Initialisation d’une page web

Actions dans les clips imbriqués

1. Introduction
2. Actions par étapes
   1. Procéder par étapes à partirdu scénario de la scène
   2. Procéder par étapes à partirdu scénario d’un clip imbriqué
3. Contrôler l'apparence d'une occurrence à partir d'une autre occurrence
   1. Action d’un clip enfant vers le scénarioprincipal : une situation d’optique
   2. Glisser-déplacer vertical : un variateurde luminosité
   3. Action d’un clip enfant vers un clip frère :associer le variateur à la situation d’optique
4. Clips imbriqués particuliers
   1. Clips enfant différents
   2. Application : une expérience dechimie

Ajouter des occurrences

1. Introduction
2. addChild() et removeChild()
   1. Ajouter et supprimer une occurrence sur la scène
   2. Ajouter plusieurs occurrences de la scène
   3. Ajouter des occurrences dans une autre occurrence
   4. Ajouter un grand nombre d’occurrences sur la scène
3. Ajouter des clips enfant dans un clip parent
   1. Créer un conteneur pour animer la pluie
   2. Créer un conteneur pour représenterla composition moléculaire de l’air

Rotation d'un clip à l'aide de la souris

1. Introduction
2. L'objet Math
   1. Convertir une variable de type String en variablede type Number
   2. Calculer des valeurs trigonométriques
3. Déplacer un clip plus ou moins vite
   1. Faire tourner un clip avec la souris
   2. Calculer une vitesse de déplacement (drag& drop)

Gestion du temps

1. Introduction
2. Date et heure
   1. Une horloge calendrier
3. Exécuter une action à intervalles réguliers
   1. Un chronomètre
   2. Un compte à rebours
4. Exécuter une action dans un certain temps
   1. SetTimeout et clearTimeout
      1. Méthode setTimeout
      2. Méthode clearTimeout
   2. Exécuter une action quand la lecture d’unclip se termine

Texte et tableaux

1. Introduction
2. Gestion du texte
   1. Réalisation d’un quiz
   2. Rôle des étiquettes dans le scénario
   3. Ajuster un cadre texte à son contenu
3. Tableaux
   1. Gérer les entrées des tableaux
   2. Une série de cinq exercices dans un ordrealéatoire

Dessiner sur une page web

1. Introduction
   1. Couleur d’un clip
   2. Modifier la couleur d’un clip
   3. Couleur du fond de page du navigateur
2. Création d'un tracé vectoriel
   1. Dessiner une ligne
   2. Dessiner une ligne dans un clip
   3. Courbes et figures
   4. Un triangle déformable

Gérer le format XML

1. Introduction
2. Les fichiers XML
   1. A quoi ressemble un fichier XML ?
   2. Créer une source XML avec XML Notepad
   3. Modifier un fichier XML avec Microsoft Excel
   4. Modifier un fichier XML avec un éditeur detexte
3. Charger des données dans un fichier XML
   1. Extraire des données du carnet d’adresses
      1. Afficher le contenu du fichier XML
      2. Lire un attribut ou un élément
      3. Choisir les données à afficher
   2. Navigation dans un fichier XML

Le son et la vidéo

1. Introduction
2. Les fichiers son
   1. Insérer un son court dans une image clé
   2. Parcourir un scénario contenant plusieurssons courts
   3. Fichiers son indépendants du scénario
3. La vidéo
   1. Composant vidéo

Les composants

1. Introduction
2. Composants ou pas ?
   1. Interactivité par un bouton
   2. Ajouter de l’interactivité à l’aidede cases à cocher (checkBox)
      1. Case à cocher de type clip
      2. Composants de type checkBox
   3. Ajouter de l’interactivité à l’aidede boutons d’option (RadioButton)
      1. Boutons d’option de type clip
      2. Composants de type RadioButton
3. Des composants bien pratiques
   1. ComboBox
   2. Apostrophe et ComboBox
   3. Composant TextInput
   4. Composant CSS

Un mini site web

1. Introduction
2. Navigation entre les pages web
3. Stockage de données dans le navigateur
4. Notation des pages du site web
   1. Fichier index.fla
   2. Fichier page1.fla
   3. Fichier page2.fla
   4. Fichiers page3.fla, page4.fla et page5.fla
   5. Fichiers resultat.fla
   6. Le moment de vérité !
5. Quelques améliorations
   1. Ajouter une barre de progression
   2. Ajouter un bouton Terminer

Mise en ligne d'un site

1. Introduction
2. Serveur local ou serveur web ?
   1. Serveur local
   2. Serveur web ou site distant
3. Transfert des fichiers vers un serveur distant
   1. Créer un compte chez un hébergeur
   2. Utilisation d’un logiciel FTP
   3. Tester sur le site de l’hébergeur
   4. Supprimer les fichiers .fla

Conclusion

1. Conclusion