STIC:STIC II - exercice 15 (Volt)

De EduTech Wiki
Aller à la navigation Aller à la recherche

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, 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):

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

  1. Installez Creative Clouds:
  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

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:

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

Animation

Introduction
Lire la première partie lorsque vous commencez le projet (mais ignorez tout ce qui est code ActionScript)
Motion animation - Interpolation de mouvement
Motion animation (classic) - pour information, ignorez ce chapitre
Morphing / Shape tweening - Interpolation de forme

Tutoriels spécifiques pour Animate CC

Chez Adobe

En français
Page d'accueil Adobe (English)
Programmation avec CreateJS
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_II_-_exercice_15_(Volt)&oldid=59905 »