« STIC:STIC II - exercice 15 (Volt) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
 
(34 versions intermédiaires par 3 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic archive}}
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">Tutoriels Flash</categorytree>
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">Tutoriels Flash</categorytree>
Ligne 5 : Ligne 5 :
== Objectifs ==
== Objectifs ==


* 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)
* 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
* Démarrer / arrêter un clip
* Modifier des propriétés d'objets de type clip avec JavaScript
* Modifier des propriétés d'objets de type clip avec JavaScript
Ligne 11 : Ligne 19 :
* Utiliser la console JavaScript
* Utiliser la console JavaScript


== Programme ==
== Programme en classe ==
 
=== Installer Animate CC ===


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


'''Installer Animate CC'''
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.)


Pour essai:
'''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
* http://www.adobe.com/ch_fr/downloads.edu.html
* https://creative.adobe.com/products/download/animate?promoid=VY36K4SD&mv=other  
* https://creative.adobe.com/products/download/animate?promoid=VY36K4SD&mv=other  


Si vous voulez acheter la série "Créative Clouds" (20 CHF/mois):
Si vous voulez acheter la série "Créative Clouds" (20 CHF/mois):
# Installez Creative Clouds:
#* Allez sur https://creative.adobe.com/fr/plans?store_code=ch&locale=ch, choisir "Etudiants/Enseignants"
# 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).
# Finalement, toujours dans Creative Clouds, téléchargez Animate CC


# Installer Creative Clouds
=== Activités ===
# Dans creative clouds, télécharger Flash Pro et (si possible) Illustrator: https://creative.adobe.com/fr/plans?store_code=ch&locale=ch


'''Demos'''
'''Démos de sensibilisation'''


* http://tecfa.unige.ch/guides/flash/cc-html5/embedded-movie-clips/
* http://tecfa.unige.ch/guides/flash/cc-html5/embedded-movie-clips/
Ligne 34 : Ligne 52 :
'''Activités'''
'''Activités'''


* Modifier un exemple (selon instructions en classe)
* 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.
* Commencer le projet.


== Tutoriels et documentation ==
=== Conseils de survie ===
 
'''Dans le wiki'''


* [[Flash CC 2014 Canvas - Symboles et clips]]
* Shortcuts: F5 pour étendre un frame (image), F7 pour créer un keyframe vide, F6 pour copier le contenu du keyframe précédant.
* [[Flash CC 2014 Objets interactifs‎‎]]
* 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‎‎]]


'''Autres ressources''':
== Projet ==
 
; Chez Adobe (Français)
 
* [https://helpx.adobe.com/fr/flash/topics.html Formation et support / Aide de Flash Professional]
* [http://helpx.adobe.com/fr/pdf/flash_reference.pdf Flash Professional CC (version 2014)] (Manuel de référence, pas très utile pour la partie JavaScript)
* [https://helpx.adobe.com/fr/flash/using/creating-publishing-html5-canvas-document.html Aide de Flash Professional / Création et publication d’un document HTML5 Canvas]
 
; Page d'accueil Adobe (English)
* [https://helpx.adobe.com/flash/topics.html Learn & Support / Flash Professional Help]
 
; Programmation avec CreateJS
* [http://www.createjs.com/EaselJS 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/


== Tâche ==
'''Deadline''': Au plus tard lundi 13 juin minuit.


'''Deadline''': Une semaine avant la fin des examens, au plus tard mardi 9 juin.
(1) Créez une application Web qui implémente un dispositif qui contient des animations interactives.


(1) Créez une application Flash qui implémente les éléments suivants:
Il doit contenir/respecter les éléments et contraintes 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.
#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.
* 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.
#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.
* 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.
#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 [[Flash_CC_2014_Canvas_-_Boutons#Sites_Flash_.C3.A0_base_de_menus|Sites Flash à base de menus]] le menu de l'ex 15 de la promotion UTOPIA.
* Utilisation d'une instruction conditionnelle (''if'' ou ''switch'') dans le JavaScript


Le sujet de cette application Flash doit être en rapport avec une thématique "MALTT"
Le sujet de cette application Flash doit être en rapport avec une thématique "MALTT"
A option:
* Vous pouvez distribuer votre application dans des "plages" avec un menu comme pour l'ex 15.


(2) Documentez '''brièvement''' votre projet dans le code JavaScript en y insérant les informations suivantes:
(2) Documentez '''brièvement''' votre projet dans le code JavaScript en y insérant les informations suivantes:
Ligne 82 : Ligne 91 :
* Date
* Date
* Objectifs (soyez très courts)
* Objectifs (soyez très courts)
* Crédits (si nécessaire, par exemple pour images et clip art réutilisé)
* 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 ...)
(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'''
* [http://www.google.ch/webdesigner/ 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 ===
=== Matériaux externes ===


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


=== A rendre ===
=== A rendre ===


Le dispositif (code source et swf) est à mettre en ligne avec un petit rapport qui se trouvera ici:
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/______/____/stic-2/ex15
  /etu-maltt/PROMOTION/LOGIN/stic-2/ex16
  /etu-maltt/PROMOTION/LOGIN/stic-2/ex15


Exemple:
Exemple:
  /etu-maltt/stella/dupond/stic-2/ex16
  /etu-maltt/stella/dupond/stic-2/ex15


Cette page de rapport doit inclure:
Cette page de rapport doit inclure:
Ligne 107 : Ligne 127 :
* Auto-évaluation
* Auto-évaluation
* Références
* Références
* Un lien vers le dispositif Flash
* 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.
* 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.


Ligne 141 : Ligne 162 :


'''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.
'''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). {{goblock|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]]  - ([[:en:Flash drawing tutorial|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]]  - ([[:en:Flash layers tutorial|Flash layers tutorial]])
** Savoir s'organiser: layers, layer folders, la librairie, les scènes
* '''Tutoriel''': [[Flash CS4 - Arranger des dessins]]  - ([[:en:Flash arranging objects tutorial|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]]  - ([[:en:Flash object transform tutorial|Flash object transform tutorial]])
** Select tool
** Free Transform Tool (y compris ses différents modes)
* '''Tutoriel''': [[Flash CS4 - Couleurs et gradients]]  - ([[:en:Flash colors tutorial|Flash colors tutorial]])
** Types de couleurs
** Color Gradient Transform Tool
* Resource: [[:en:Clipart|Clipart]] and [[:en:texture|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: [http://tecfa.unige.ch/guides/flash/ex/frame-by-frame-intro/flash-cs3-shaking-hello.swf Shakin hello],
* '''Tutoriel''': [[Flash CS4 - Animation image par image]]  - ([[:en:Flash frame-by-frame animation tutorial|Flash frame-by-frame animation tutorial]])
; Motion animation - Interpolation de mouvement
* Preview: [http://tecfa.unige.ch/guides/flash/ex4/motion-tweening-intro/flash-cs-4-motion-tweening.html flash-cs-4-motion-tweening.html], [http://tecfa.unige.ch/guides/flash/ex4/embedded-movie-clips/ Clip penguin],
* [[Flash CS4 - Interpolation de mouvement]] - ([[:en:Flash CS6 motion tweening tutorial]])
; Motion animation (classic) - pour information, ''ignorez ce chapitre''
* Previews: [http://tecfa.unige.ch/guides/flash/ex/animation-summary/flash-cs3-cloud-animation-solution.html Animation nuages etc.], [http://tecfa.unige.ch/guides/flash/ex/animation-summary/flash-cs3-tux-manga-solution.html Animation et Pinguin], [http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/flash-cs3-motion-tweening.swf Moving cat], [http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/flash-cs3-motion-shape-tweening.swf Moving, changing cat], [http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/flash-cs3-motion-guide-tweening2.swf Flying Rocket]
* '''Tutoriel''': [[Flash CS4 - Interpolation de mouvement classique]]  - ([[:en:Flash classic motion tweening tutorial]])
; Morphing / Shape tweening - Interpolation de forme
* Previews: [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-intro.swf Simple shape morph], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-tear.swf Simple shape and motion morph], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-picture-morphing.swf traced bitmaps morph], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-in-motion.html Shape tweening in motion]
* '''Tutoriel''': [[Flash CS4 - Morphing]]  - ([[:en:Flash shape tweening tutorial|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
* [https://helpx.adobe.com/fr/animate/topics.html Formation et support / Aide de Animate CC]
* [https://helpx.adobe.com/fr/animate/using/creating-publishing-html5-canvas-document.html Aide de Animate / Création et publication d’un document HTML5 Canvas]
; Page d'accueil Adobe (English)
* [https://helpx.adobe.com/flash/topics.html Learn & Support / Flash Professional Help]
; Programmation avec CreateJS
* [http://www.createjs.com/EaselJS 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/

Dernière version du 2 mai 2017 à 13:14

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

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