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

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

Démos

Activités

  • Modifier un exemple (selon instructions en classe)
  • Commencer le projet.

Tutoriels et documentation

Dans le wiki

Autres ressources:

Chez Adobe (Français)
Page d'accueil Adobe (English)
Programmation avec CreateJS

Tâche

Deadline: Une semaine avant la fin des examens, au plus tard mardi 9 juin.

(1) Créez une application Flash qui implémente les éléments suivants:

  • Gestion d'événements pour des clips. Autrement dit, l'utilisateur doit pouvoir cliquer ou autrement activer un objet. Cet événement doit déclencher une fonction qui fait quelque chose.
  • 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.
  • Implémentation d'une ou de plusieurs fonctions qui vont démarrer/arrêter un clip qui possède une animation dans sa propre timeline.

Contrainte: Vous n'avez pas le droit d'utiliser la timeline de la scène principale autrement que 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 images et clip art réutilisé)

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

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 Flash
  • 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.

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_II_-_exercice_15_(Volt)&oldid=58421 »