STIC:STIC II - exercice 15 (Volt)

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

STIC

Tutoriels Flash

Objectifs

• Concevoir une simple application avec Adobe CC pour HTML5 Canevas qui laisse l'utilisateur interagir avec des animations
• Apprendre à définir des objectifs (ce qu'un public cible doit faire/apprendre), les implémenter et documenter le résultat.

Technique:

• Dessiner avec Animate CC (modes de dessin, transformations, couleurs)
• Utilisation de clipart
• La notion de "symbol" ("clip")
• Créer différents types d'animation (image par image, interpolations de mouvement (motion tweening), morphing (shape tweening).
• Consolider les notions en programmation de boutons (gestions d’évènements). Définition de gestionnaires d’évènements (comprendre que tout clip peut faire office de bouton et qu'il existe une variété de types d’évènements)
• Démarrer / arrêter un clip
• Modifier des propriétés d'objets de type clip avec JavaScript
• Utiliser des Clips comme des classes dans un script
• Utiliser la console JavaScript

Programme en classe

Installer Animate CC

(si ce n'est pas déjà fait)

Animate CC s'installe en 2 étapes. Il faut d'abord installer Creative Clouds et ensuite télécharger depuis cette application une application "Creative Clouds" (Animate, PhotoShop, Illustrator, etc.)

Avant de télécharger Flash, il faut règler les "Apps" dans l'outil Adobe Creative Cloud:

• Dans l’application Creative Cloud pour le bureau, cliquez sur l’icône en forme de roue dentée, puis sélectionnez Préférences.
• Dans la boîte de dialogue Préférences, sélectionner la langue anglais (north USA)
• Dans la liste Langue de l’app, sélectionnez l'installation : "Animation CC et mobile device (2015.1)" (version de 30 jours d'essai)

Remarque : Pour modifier la langue de l’interface utilisateur des applications actuellement installées, désinstallez celles-ci, puis réinstallez-les à l’aide d’Adobe Application Manager

Pour installer une version essai (création de login Adobe exigée), il est probablement prudent de passer par ici (à vérifier):

• http://www.adobe.com/ch_fr/downloads.edu.html
• https://creative.adobe.com/products/download/animate?promoid=VY36K4SD&mv=other

Si vous voulez acheter la série "Créative Clouds" (20 CHF/mois):

1. Installez Creative Clouds:
   • Allez sur https://creative.adobe.com/fr/plans?store_code=ch&locale=ch, choisir "Etudiants/Enseignants"
2. Réglez la langue (voir ci-dessus). On conseille vivement de télécharger la version Anglaise (car la documentation en français traine et les termes sont parfois confus).
3. Finalement, toujours dans Creative Clouds, téléchargez Animate CC

Activités

Démos de sensibilisation

• http://tecfa.unige.ch/guides/flash/cc-html5/embedded-movie-clips/
• http://tecfa.unige.ch/guides/flash/cc-html5/interactivity/

Activités

• Configurer le desktop
• Créer des dessins en mode objet
• Transformations
• Les calques
• Créer et utiliser des clips
• Les timelines (scénarios) et les images, raccourcis F5, F6, F7
• Créer des animations à l'intérieur de clips
• Créer des boutons et du code JavaScript pour piloter des animations
• Transformer des propriétés
• Commencer le projet.

Conseils de survie

• Shortcuts: F5 pour étendre un frame (image), F7 pour créer un keyframe vide, F6 pour copier le contenu du keyframe précédant.
• Toujours dessiner en mode "Object Drawing" (sauf pour "peinture")
• Clic-droit sur un objet pour voir ce qu'on peut faire avec (enfin un partie).
• Clic sur un objet, puis regarder le panneau properties pour faire des ajustements.
• Pour créer des animations: Créer d'abord un nouveau clip (CTRL-F8), ensuite rentrer dedans (double clic sur la scène ou la bibliothèque). Pas d'animations sur la timeline principale !
• Chaque objet graphique devrait se trouver dans la library (Convert to symbol)
• Ne pas faire du ActionScript et lire Animate CC - Outils de développement JavaScript‎‎

Projet

Deadline: Au plus tard lundi 13 juin minuit.

(1) Créez une application Web qui implémente un dispositif qui contient des animations interactives.

Il doit contenir/respecter les éléments et contraintes suivants:

1. 1 Interactivité: L'utilisateur doit pouvoir "activer" un objet avec un geste. Donc l’évènement doit déclencher une fonction qui démarre/arrête une animation insérée dans la propre timeline (scénario du clip). Exemple: Un engin qui se met a vibrer.
2. 2 Implémentation d'une ou de plusieurs fonctions qui modifient des propriétés d'un objet ou qui invoquent des méthodes d'un objet autres que "play/stop". Par exemple: en cliquant sur une balle rouge, elle va disparaitre.
3. 3 Vous n'avez pas le droit d'utiliser la timeline de la scène principale pour faire des animations. Elle peut être utilisée pour implémenter des "plages", "niveaux", etc. Voir Sites Flash à base de menus le menu de l'ex 15 de la promotion UTOPIA.

Le sujet de cette application Flash doit être en rapport avec une thématique "MALTT"

(2) Documentez brièvement votre projet dans le code JavaScript en y insérant les informations suivantes:

• Auteur
• Date
• Objectifs (soyez très courts)
• Crédits (si nécessaire, par exemple pour les images et clip art réutilisé)

(3) Contribution wiki habituelle (de préférence en rapport avec le sujet ...)

(4) Faites un rapport

Alternatives pour ceux qui ne peuvent pas installer Animate CC

• Google Web Designer Animation CCS, peu de documentation. (La contrainte #3 ne s'applique pas)
• Flash CS6 (ne peut pas produire du HTML5, donc il faut utiliser ActionScript).

Les étudiant(e)s qui utilisent Google Web Designer, doivent participer à l'élaboration d'une documentation (dans le contexte de l'activité wiki)

Matériaux externes

• Vous pouvez utiliser du "artwork" fait par d'autres personnes (à condition que leur copyright le permet)
• Vous devez citer ces sources !
• Je vous conseille notamment http://openclipart.org

A rendre

Le dispositif (code source et swf) est à mettre en ligne avec un petit rapport qui se trouvera ici:

/etu-maltt/______/____/stic-2/ex15
/etu-maltt/PROMOTION/LOGIN/stic-2/ex15 

Exemple:

/etu-maltt/stella/dupond/stic-2/ex15 

Cette page de rapport doit inclure:

• Auteur et date
• Objectifs détaillés (ce que le dispositif est censé faire) plus une petite discussion du design
• Pas de longue explication de la production, mais un petit (!) résumé des étapes.
• Difficultés
• Auto-évaluation
• Références
• Un lien vers le dispositif Animate CC
• Un lien vers le fichier *.fla (code source)
• Des liens vers vos contributions wiki ou alternativement (si votre contribution est minimaliste) un résumé en une phrase plus un lien vers votre home page wiki. Il faut que l'on sache ce qu'il faut compter pour chaque exercice sans jouer aux détectives.

N'oubliez pas la contribution wiki obligatoire

Evaluation

Voici en gros les critères d'évaluation pour les exercices.

(1) Dispositif

1. But - est-ce l'animation correspond à vos objectifs: -/0/+
2. Thématique MALTT -/0/+
3. User experience - qualité esthétique et ergonomique--/0/+/++
4. Complexité: -/0/+/++
5. Respect des contraintes: --/-/0/+
6. Documentation - Qualité de la documentation: --/0/+
7. Documentation dans Flash - layer et symbol names par exemple, Code JavaScript: -/0
8. Erreurs - Présence/absence d'erreurs: --/-/0
9. Cohérence globale: +

(2) Contribution Wiki

1. Utilité/quantité et qualité

(3) Rapport

1. Présence des éléments requis
2. Réflexions et contributions conceptuelles

Aide

Utilisez la page discussion de cette page pour poser des questions.

Pour insérer un nouveau titre, utilisez simplement le "+".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page.

Exemples

Pour s'inspirer vous pouvez (entres autres) regarder:

• STIC:STIC II - exercice 16 (Utopia)
• STIC:STIC I - exercice 6 (Tetris)
• STIC:STIC I - exercice 4 (Stella)

Tutoriels et documentation

Anciens tutoriels sur le dessin et l'animation (Flash CS3 à CS6): il faudrait créer des versions Animate CC pour tenir compte de l'évolution du logiciel, mais le principe reste le même.

Anciens tutoriels qui comprennent des éléments interactives (Flash CS3 à CS6).

Attention danger ! Dans ce projet vous devez travailler avec JavaScript et non pas ActionScript !!

Voir aussi les conseils de survie ci-dessus.

Le dessin

• Tutoriel: Flash CS4 - Créer des dessins avec les outils de dessin - (Flash drawing tutorial)
  • Modes de dessin (object vs. merge). Sans raisons contraires, dessinez toujours en mode objet
  • Palette des outils de dessin
  • Couleurs et textures
• Tutoriel: Flash CS3 - Créer et modifier les calques et les images - (Flash layers tutorial)
  • Savoir s'organiser: layers, layer folders, la librairie, les scènes
• Tutoriel: Flash CS4 - Arranger des dessins - (Flash arranging objects tutorial)
  • Différence entre shapes, simple graphics, composite graphics, symbols, etc.
  • Transformations vers différents types de "display elements"
  • Alignement et snapping
• Tutoriel: Flash CS4 - Transformer des dessins - (Flash object transform tutorial)
  • Select tool
  • Free Transform Tool (y compris ses différents modes)
• Tutoriel: Flash CS4 - Couleurs et gradients - (Flash colors tutorial)
  • Types de couleurs
  • Color Gradient Transform Tool
• Resource: Clipart and texture
  • Importation de graphismes vectoriels (Note: SVG via Illustrator or WMF).

Animation

Introduction

• Tutoriel: Flash CS4 - Principes de l'animation
• Tutoriel: Flash CS4 - Symboles et clips - (en:Flash embedded movie clip tutorial / en:Flash using embedded movie clips tutorial).

Lire la première partie lorsque vous commencez le projet (mais ignorez tout ce qui est code ActionScript)

• Previews: Shakin hello,
• Tutoriel: Flash CS4 - Animation image par image - (Flash frame-by-frame animation tutorial)

Motion animation - Interpolation de mouvement

• Preview: flash-cs-4-motion-tweening.html, Clip penguin,
• Flash CS4 - Interpolation de mouvement - (en:Flash CS6 motion tweening tutorial)

Motion animation (classic) - pour information, ignorez ce chapitre

• Previews: Animation nuages etc., Animation et Pinguin, Moving cat, Moving, changing cat, Flying Rocket
• Tutoriel: Flash CS4 - Interpolation de mouvement classique - (en:Flash classic motion tweening tutorial)

Morphing / Shape tweening - Interpolation de forme

• Previews: Simple shape morph, Simple shape and motion morph, traced bitmaps morph, Shape tweening in motion
• Tutoriel: Flash CS4 - Morphing - (Flash shape tweening tutorial)

Tutoriels spécifiques pour Animate CC

• Univers Animate CC
• Animate CC 2015 Tutoriel débutant
• Animate CC 2015 HTML5 Canvas - Boutons
• Animate CC 2015 HTML5 Canvas - Symboles et clips
• Animate CC 2015 HTML5 Canvas - Objets interactifs‎‎
• Animate CC - Outils de développement JavaScript‎‎

Chez Adobe

En français

• Formation et support / Aide de Animate CC
• Aide de Animate / Création et publication d’un document HTML5 Canvas

Page d'accueil Adobe (English)

• Learn & Support / Flash Professional Help

Programmation avec CreateJS

• EaselJS (pour programmeurs)
  • http://www.createjs.com/Docs/EaselJS/classes/DisplayObject.html
  • http://www.createjs.com/Docs/EaselJS/classes/MovieClip.html
  • http://www.createjs.com/Docs/EaselJS/classes/EventDispatcher.html
  • http://createjs.com/tutorials/Mouse%20Interaction/