STIC:STIC II - exercice 15 (Volt)

Cette page fait partie des cours STIC I et STIC II

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, cliquez sur "Creative Cloud", et ensuite Apps.
• Dans la liste Langue de l’app, sélectionnez la langue d’installation.

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

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
• Créer et utiliser des clips
• 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.

Projet

Deadline: Au plus tard lundi 13 juin minuit.

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

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

• Gestion d'événements pour des clips: L'utilisateur doit pouvoir "activer" un objet avec un geste. Donc l'événement doit déclencher une fonction qui démarre/arrete une animation (c-a-d un clip qui possède une animation dans sa propre timeline.)
• 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. Par exemple: en cliquant sur une balle rouge, elle va disparaître.
• Vous n'avez pas le droit d'utiliser la timeline de la scène principale pour faire des animations. Elle peut etre utilisé 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

Matériaux externes

• Vous pouvez utiliser du "artwork" fait par d'autres personne (à condition que leur copyright le permet)
• Vous devez citer ces sources !

A rendre

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

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

Exemple:

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

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.

Tutoriels et documentation

Anciens tutoriels sur le dessing et l'animation

(il faudrait créer des versions Animate CC, mais le principe reste le meme)

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 (vous pouvez ignorer la partie qui montre comment démarrer/arrêter les animations). Dans ce cours on créera des animations à l'intérieur de symboles de type "movie clip".

Frame-by-frame animation

• 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)

Animate CC

• Univers Animate CC
• Flash CC 2014 Canvas - Symboles et clips
• Flash CC 2014 Objets interactifs‎‎

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/