« STIC:STIC II - exercice 15 (Utopia) » : différence entre les versions
m (→Objectifs) |
|||
Ligne 7 : | Ligne 7 : | ||
Conceptuel: | Conceptuel: | ||
* Concevoir une simple application avec Flash Pro CC pour HTML5 Canevas qui laisse l'utilisateur explorer des animations | |||
* Apprendre à définir des objectifs (ce qu'un public cible doit faire/apprendre), les implémenter et documenter le résultat. | * Apprendre à définir des objectifs (ce qu'un public cible doit faire/apprendre), les implémenter et documenter le résultat. | ||
* Notions de base en animation et programmation de boutons (gestions d’évènements) | * Notions de base en animation et programmation de boutons (gestions d’évènements) | ||
Ligne 21 : | Ligne 21 : | ||
Dossiers exemples pour l'animation (seulement!): | Dossiers exemples pour l'animation (seulement!): | ||
* [http://tecfa.unige.ch/guides/flash/ex/ CS3], [http://tecfa.unige.ch/guides/flash/ex4/ CS4],[http://tecfa.unige.ch/guides/flash/ex5/ CS5], [http://tecfa.unige.ch/guides/flash/ex6/ CS6]. Voir les dossier "exams" pour un peu d'inspiration (menus avec animation) | * [http://tecfa.unige.ch/guides/flash/ex/ CS3], [http://tecfa.unige.ch/guides/flash/ex4/ CS4],[http://tecfa.unige.ch/guides/flash/ex5/ CS5], [http://tecfa.unige.ch/guides/flash/ex6/ CS6]. Voir les dossier "exams" pour un peu d'inspiration (menus avec animation). Regardez aussi les travaux Tetris. | ||
Dossiers exemples pour la programmation JavaScript: | Dossiers exemples pour la programmation JavaScript: | ||
* http://tecfa.unige.ch/guides/flash/cc-html5 | * http://tecfa.unige.ch/guides/flash/cc-html5 |
Version du 7 mai 2015 à 22:41
Objectifs
Conceptuel:
- Concevoir une simple application avec Flash Pro CC pour HTML5 Canevas qui laisse l'utilisateur explorer des animations
- Apprendre à définir des objectifs (ce qu'un public cible doit faire/apprendre), les implémenter et documenter le résultat.
- Notions de base en animation et programmation de boutons (gestions d’évènements)
Technique:
- Créer des dessins avec Flash Professional CC (modes de dessin, transformations, couleurs)
- Utilisation de clip art (importation d'images SVG via un autre programme)
- Créer des animations avec Flash CC: image par image, interpolations de mouvement (motion tweening), morphing (shape tweening).
- Utilisation du composant bouton pour naviguer dans la timeline
- S'initier à la logique du event-driven programming (event handlers + JavaScript)
- Utilisation du composant vidéo pour publier une vidéo
- Savoir créer un "site Flash" (plusieurs images reliés par des boutons)
Dossiers exemples pour l'animation (seulement!):
- CS3, CS4,CS5, CS6. Voir les dossier "exams" pour un peu d'inspiration (menus avec animation). Regardez aussi les travaux Tetris.
Dossiers exemples pour la programmation JavaScript:
Programme
L'univers Flash et le desktop
- Tutoriel: Flash - (:en:Flash)
- Tutoriel: Univers Flash CC - Voir aussi Univers Flash CS5 (plus de détails)
- Tutoriel: Flash CS3 keyboard shortcuts
- Tutoriel: Flash - dictionnaire anglais français
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)
- Résumés animation
Boutons et premier contact avec JavaScript (à option)
- Previews
- Tutoriel: Flash CC 2014 Canvas - Boutons (Vour pouvez aussi consulter Flash CS4 - Boutons pour avoir quelques idées en plus)
- Faire soi-même des boutons (y compris à partir de bitmaps)
- Définir un event-handler simple et enregistrer avec le bouton
- Flash CC 2014 Canvas - Symboles et clips (pour la définition de "symbol" et "clip").
Les fragments de code
- Tutoriel: Flash CS5 - Editeur ActionScript et fragments de code (fait pour ActionScript, à réviser)
- ? Chez Adobe ?
Exercice à rendre
Deadline: Mardi 9 juin minuit (dernier délai)
Tâche
(1) Application Flash
Faites une application Flash de type "site" avec un menu. Elle doit comprendre au moins quatre pages navigables qui ont un intérêt pédagogique (au sens large du terme).
- une page d'accueil qui permet à l'utilisateur de comprendre l'objectif du dispositif
- une animation de forme. L'animation sera embarquée dans un clip et le clip sera inséré dans une "page"
- une animation de mouvement. L'animation sera embarquée dans un clip et le clip sera inséré dans une "page"
- une animation image par image. L'animation sera embarquée dans un clip et le clip sera inséré dans une autre "page"
Autre contraintes:
- Un menu avec des boutons de navigation qui permettent d'accéder à chaque image.
Dans un frame (image):
- il faut placer au moins un clip qui contient la scène pour ce frame.
- les boutons de navigation et le script s’étendent (normalement) sur toute la longueur, il faut les mettre dans un calque étendu.
--------------------------------------- frame 1 | frame 2 | frame 3 | frame 4 | ======================================= layer 1 boutons --------------------------------------- layer 2 clip1 | clip 2 | clip 3 | ..... --------------------------------------- action script
Rappel:
- Pour étendre un frame: F5
- Pour naviguer: gotoAndStop('nom_frame'); ou gotoAndStop(N);
Le sujet de l'animation doit être en rapport avec une thématique "MALTT"
(2) Documentez brièvement votre code 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) Participation rédaction Wiki
- Comme pour chaque exercice
- Idéalement, vous devriez contribuer aux pages qui sont utiles pour réussir ce projet. Si vous désirez obtenir une bonne note, vous devez contribuer au niveau du contenu, pas juste de la forme !
Ressources externes
- Vous pouvez utiliser du "artwork" externe, mais il faut le citer et il faut qu'il soit libre de droit ou "creative commons" ou équivalent)
- Vous devez citer les sources dans le fichier Flash et dans votre rapport !
A rendre
Le dispositif (code source *.fla et code *.html et ".js) est à mettre en ligne accompagné d'un petit rapport qui se trouvera ici:
Répertoire: /web/etu-maltt/____/____/stic-2/ex15/ URL: http://tecfaetu.unige.ch/etu-malt/____/____/stic-2/ex15/
Cette page de rapport doit inclure:
- Auteur et date
- Objectifs du disposif. Il sert à quoi,à qui, etc. Evitez de parler de vos objectifs d'apprentissage. Pensez aux utilisateurs potentiels !
- Pas de longue explication de la production, mais un petit (!) résumé
- Difficultés rencontrées
- Auto-évaluation, pistes de dévelopements futurs
- Références
- Un lien vers le dispositif Flash
- Un lien vers vos contributions wiki. Commencez à contribuer pendant le travail et pas après. Apprendre à évoluer dans environnement collectif est un objectif important de ce cours !
Evaluation
Un résult qui correspond à peu près aux attentes vaut 5.
Voici en gros les critères d'évaluation pour les exercices.
(1) Dispositif
- But - est-ce l'animation correspond à vos objectis: -/0/+
- Thématique MALTT -/0/+
- Artwork - qualité esthétique --/0/+/++
- Complexité: -/0/+/++
- Respect des contraintes: --/-/0/+
- Documentation - Qualité de la documentation: --/0/+
- Documentation dans Flash - layer et symbol names par exemple: -/0
- Erreurs - Présence/absence d'erreurs (notamment je veux voir aucun tween objet dans votre library !!: --/-/0
- Cohérence globale: +
(2) Contribution Wiki
- Utilité/quantité
- Qualité
(3) Rapport
- Présence des éléments requis
- Réflexions et contributions conceptuelles
Projets alternatifs pour experts
Créez ou améliorez un tutoriel sur edutechwiki français (à discuter avec l'enseignant)
Aide
Utilisez la page discussion de cette page pour poser des questions concernant l'exercice. Je ne répondrais pas au e-mail.
Pour insérer un nouveau titre, utilisez le "+" ou cliquez sur "Ajouter un sujet".
Important: Dans le menu déroulant en haut (à côté de auteurs), vous pouvez suivre une page ("Ajouter cette page à votre liste de suivi"). Dans ce cas, le wiki vous enverra un mail après chaque modification de la page en question. Je vous conseille de faire cela pour les pages discussion.
Liens et Bibliographie
- Tutoriels Flash (la plupart de l'information nécessaire y est)
- Tutoriels Flash. Attention, ne confondez pas ActionScript (bien documenté) avec JavaScript utilisé ici !!
- en:Flash tutorials (for English speakers)
- Ressources graphiques vectorielles
- Clipart (ressources ClipArt, EduTechwiki Anglais)
- Liens Flash
- Flash (fr, liens divers)
- en:Flash and AS3 links
- Livre recommandé (en Anglais)
- Aucun pour le moment.
- Pour Flash CS6 (ancienne version): Chris Grover (2012). Flash CS6: The Missing Manual. O'Reilly Media, ISBN 978-1-449-31625-9. Aussi disponible comme E-book/PDF. http://shop.oreilly.com/product/0636920022787.do