« STIC:STIC II - exercice 16 (Utopia) » : différence entre les versions
Aller à la navigation
Aller à la recherche
m (→Tâche) |
mAucun résumé des modifications |
||
| (6 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
{{ | {{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 23 : | Ligne 23 : | ||
* http://tecfa.unige.ch/guides/flash/cc-html5/embedded-movie-clips/ | * http://tecfa.unige.ch/guides/flash/cc-html5/embedded-movie-clips/ | ||
* http://tecfa.unige.ch/guides/flash/cc-html5/interactivity/ | |||
'''Activités''' | '''Activités''' | ||
| Ligne 34 : | Ligne 35 : | ||
* [[Flash CC 2014 Canvas - Symboles et clips]] | * [[Flash CC 2014 Canvas - Symboles et clips]] | ||
* [[Flash CC 2014 Objets interactifs]] | |||
'''Autres ressources''': | '''Autres ressources''': | ||
| Ligne 48 : | Ligne 50 : | ||
; Programmation avec CreateJS | ; Programmation avec CreateJS | ||
* [http://www.createjs.com/EaselJS EaselJS] (pour programmeurs) | * [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 == | == Tâche == | ||
| Ligne 58 : | Ligne 64 : | ||
* 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 '''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. | * 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. | ||
* Utilisation d'une instruction conditionnelle (''if'' ou ''switch'') dans le | * 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" | ||
| Ligne 65 : | Ligne 71 : | ||
* Vous pouvez distribuer votre application dans des "plages" avec un menu comme pour l'ex 15. | * 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 | (2) Documentez '''brièvement''' votre projet dans le code JavaScript en y insérant les informations suivantes: | ||
* Auteur | * Auteur | ||
* Date | * Date | ||
| Ligne 73 : | Ligne 79 : | ||
(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 ...) | ||
=== | === Matériaux externes === | ||
* Vous pouvez utiliser du "artwork" | * Vous pouvez utiliser du "artwork" fait par d'autres personne (à condition que leur copyright le permet) | ||
* Vous devez citer | * Vous devez citer ces sources ! | ||
=== A rendre === | === A rendre === | ||
Dernière version du 11 mai 2016 à 15:27
Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)
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)
- 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 Flash
- Soit installer Flash Pro: http://www.adobe.com/ch_fr/products/flash.html
- Soit installer Creative Clouds et télécharger juste Flash Pro et Illustrator: https://creative.adobe.com/fr/plans?store_code=ch&locale=ch
Demos
- http://tecfa.unige.ch/guides/flash/cc-html5/embedded-movie-clips/
- http://tecfa.unige.ch/guides/flash/cc-html5/interactivity/
Activités
- Modifier un exemple (selon instructions en classe)
- Commencer le projet.
Tutoriels et documentation
Dans le wiki
Autres ressources:
- Chez Adobe (Français)
- Formation et support / Aide de Flash Professional
- Flash Professional CC (version 2014) (Manuel de référence, pas très utile pour la partie JavaScript)
- Aide de Flash Professional / Création et publication d’un document HTML5 Canvas
- Page d'accueil Adobe (English)
- Programmation avec CreateJS
- EaselJS (pour programmeurs)
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.
- 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"
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:
- 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
- But - est-ce l'animation correspond à vos objectifs: -/0/+
- Thématique MALTT -/0/+
- User experience - qualité esthétique et ergonomique--/0/+/++
- Complexité: -/0/+/++
- Respect des contraintes: --/-/0/+
- Documentation - Qualité de la documentation: --/0/+
- Documentation dans Flash - layer et symbol names par exemple, Code JavaScript: -/0
- Erreurs - Présence/absence d'erreurs: --/-/0
- Cohérence globale: +
(2) Contribution Wiki
- Utilité/quantité et qualité
(3) Rapport
- Présence des éléments requis
- 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.