« STIC:STIC IV (2010) » : différence entre les versions
mAucun résumé des modifications |
m (→Animation) |
||
Ligne 87 : | Ligne 87 : | ||
; Motion animation - Interpolation de movement | ; Motion animation - Interpolation de movement | ||
* 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] | * 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]] | * [[Flash CS4 - Interpolation de mouvement]] | ||
; Motion animation (classic) | ; Motion animation (classic) | ||
* 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], | * 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] | ||
[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] | |||
* Handout: [[Flash CS4 - Interpolation de mouvement classique]] - ([[:en:Flash motion tweening tutorial|Flash motion tweening tutorial]]) | * Handout: [[Flash CS4 - Interpolation de mouvement classique]] - ([[:en:Flash motion tweening tutorial|Flash motion tweening tutorial]]) | ||
Version du 23 février 2010 à 11:39
Cet article est incomplet.
Il est jugé trop incomplet dans son développement ou dans l'expression des concepts et des idées. Son contenu est donc à considérer avec précaution.
Le programme du cours sera prêt lors de la première séance, le mardi matrin, 23 février 2010. En attendant, voir aussi Atelier WebMaster 2009: Animation et interaction avec Flash
- Daniel K. Schneider 4 janvier 2010 à 15:41 (CET).
STIC IV - Pixel/Oda
Le domaine STIC (Sciences et Technologies de l'information et de la communication) comprend deux cours obligatoires (STIC-1 et STIC-2) documentés ici et deux UF libres: STIC III et STIC IV. Les deux cours obligatoires traitent des bases techniques des systèmes d'information et de communication médiatisés par ordinateur. Elles permettent d'abord de concevoir des documents pour réaliser un système d'information partagé (XHTML, XML, XSLT, SVG), de s'initier aux applications interactives sur Internet (PhP, JavaScript) et de se familiariser avec les logiciels et les environnements qui supportent une interaction personne-personne à travers un réseau de communication (portails, groupewares et mondes virtuels). STIC III et STIC IV seront offerts en alternance chaque année et peuvent changer de thème chaque année.
Thème STIC IV semestre de printemps 2010: Flash et la programmation Actionscript 3. Ce cours n'a pas de prérequis et il est ouvert à tous les étudiant(e)s MALTT
- Prérequis
- Connaissances passive de l'Anglais (une partie du matériel d'enseignement est en Anglais).
- Sinon, aucun
- Lieu et Dates
- Semestre de printemps 2010
- TECFA, tous les Mardis matin 9h-12:30h. En plus (à confirmer lors de la première séance) les jeudis de la semaine présentielle pour la la deuxième année (Oda).
- Ce cours peut également être pris à distance (donc sans assister aux séances présentielles).
- Crédits
- 6
- Le volume de travail correspond à peu près au cours STIC-I et STIC-II
- Forum
- Utilisez les pages discussion attachés à chaque exercice. Réglez "liste de suivi" dans les Préférences (en haut de l'écran): Cochez "ajouter les pages que je crée / que je modifie".
- Si vous voyez une erreur ou un autre problème dans une page des Tutoriels Flash, vous pouvez soit réparer, soit faire une remarque dans leurs pages de discussion.
- Evaluation
- Sur travaux (2x3 mini-projets plus un projet)
- Les mini-projects sont à rendre dimanche soir avant la période suivante, le projet une semaine avant la date où on doit rendre les notes (calendrier FPSE).
- Logiciels
- Adobe Flash CS4 Professional, soit vous travaillez sur une machine de TECFA, soit il faut l'acheter.
- Adobe Flex (on a une version gratuite) et/ou Flex SDK plus un text editor avec support ActionScript.
- Matériel de cours
- Tutoriels Flash
- en:Flash tutorials (Pas mis à jour pour CS4, mais plus détaillé)
- Voir les plans pour les périodes (ci-dessous) et les exercices pour les détails
Plan période 1
- Objectifs
- Maîtriser le dessin avec Flash CS4 (modes de dessin, transformations, couleurs)
- Faire des animations avec CS4
- Comprendre l'architecture des boutons (et savoir en créer)
- Comprendre la logique du event-driven programming (event handlers +ActionScript simple)
L'univers Flash et le desktop
- Handout: Flash - (Flash)
- Handout: Univers Flash CS4 - (Flash CS4 desktop tutorial)
- Handout: Flash CS3 keyboard shortcuts
- Handout: Flash - dictionnaire anglais français
Le dessin
- Handout: Flash CS4 - Créer des dessins avec les outils de dessin - (Flash drawing tutorial)
- Modes de dessin (object vs. merge)
- Palette des outils de dessin
- Couleurs et textures
- Handout: 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
- Handout: 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
- Handout: Flash CS4 - Transformer des dessins - (Flash object transform tutorial)
- Select tool
- Free Transform Tool (y compris ses différents modes)
- Handout: 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
- Flash CS4 - Principes de l'animation
- Flash CS4 - Symboles et clips. (Première partie. Dans ce cours on créera des animations à l'intérieur de symboles de type "movie clip").
- Frame-by-frame animation
- Previews: Shakin hello,
- Handout: Flash CS4 - Animation image par image - (Flash frame-by-frame animation tutorial)
- Motion animation - Interpolation de movement
- Motion animation (classic)
- Previews: Animation nuages etc., Animation et Pinguin, Moving cat, Moving, changing cat, Flying Rocket
- Handout: Flash CS4 - Interpolation de mouvement classique - (Flash 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
- Handout: Flash CS4 - Morphing - (Flash shape tweening tutorial)
- Résumé
- Flash CS4 - Principes de l'animation
- Voir aussi (outils CS3 seulement): Flash animation summary
Son
Les boutons
- Previews
- Handout: Flash CS4 - Boutons - (Flash button tutorial)
- Boutons de la librarie
- Faire soi-même des boutons (y compris à partir de bitmaps)
- Définir un event-handler simple et enregistrer avec le bouton
- Flash CS4 - Symboles et clips (pour la définition de "symbol" et "clip").
Exercices période 1
A rendre: Dimanche soir avant période 2 (un retard entraîne un pénalité de 1 point)
Voici en gros les critères d'évaluation pour les exercices.
- But - est-ce l'animation correspond à vos objectis: -/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: +
Plan période 2
(programme à refaire)
- Objectifs
- Savoir travailler avec qqs. composantes (butons et vidéo)
- Animations embarqués again (movie clips)
- ActionScript dans CS3/CS4 (suite)
- Cinématique inversé
- Animation 3D
- Introduction à ActionScript/Flex
Le desktop (suite)
- Handout: Flash - being organized
Les composants
- Preview: flash-cs3-simple-slide-show-menu.html
- Handout: Flash components tutorial (survol)
- Handout: Flash component button tutorial
- Handout: Flash datagrid component tutorial
- Survol des composantes
- Utilisation des boutons
- Faire un "site web" avec Flash
- Remplir un data drid.
La composante video
- Encodage flv et rognage
- Captions
- Utilisation de vidéos flv avec la composante FLVPlayBack
- Videos dans la timeline (pas trop conseillés)
- Insertion et utilisation de cue points
- Previews:
- Handout: Flash video component tutorial
Animation avancée
Interactivité
- Jeux drag & drop
- Objets drag & drop
- Un peu de AS en plus
- Gérer les animations imbriquées (video clips)
- Objets interactifs et movie clips imbriqués
- Previews:
- Drag and drop
- Preview: flash-cs3-drag-and-drop-matching-3.html
- Handout: Flash drag and drop tutorial
- Résumé event handling
- Handout: ActionScript 3 event handling tutorial (complément)
- Handout: Flash games tutorial (complément, voir l'exemple)
Exercices période 2
A rendre: Dimanche soir avant période 3 (un retard entraîne un pénalité de 1 point)
Plan période 3
(programme à refaire)
Objectifs
- Apprendre un peu plus d'ActionScript
- Apprendre à naviguer dans le manuel de Adobe
- Utiliser une classe "pro"
- Flash CS4 (Inverse kinematics)
Utilisation de libraries ActionScript
- Flash using ActionScript libraries tutorial (comprend 2-3 exemples de Flint particle engine)
- AS3 TweenLite tweening engine
- Flash Papervision3D tutorial
Flex
- Intros
- Adobe Flex Builder, alternativement Flashdevelop
- MXML
- AS3 Compiling a program
- Adobe Flex Builder
- Exemple
ActionScript - le langage
Dans ce wiki, on a surtout des "novice" tutoriels, donc voir Flash and AS3 links - tutorials.
- Flash ActionScript 3 overview
- Actionscript 3 (liste de tutoriels)
- Flash ActionScript 3 overview
- AS3 Tutorials Novice
- AS3 Compiling a program
- AS3 example Drawing graphics
- AS3 example Message Box
- AS3 example Button
- AS3 example Positioning
- AS3 example Drag and Drop
- AS3 example Keyboard control
- AS3 Variable Types
- AS3 Control Flow
- Manuel
Surtout:
- ActionScript 3.0 Language and Components Reference @ Adobe livedocs
- Programming ActionScript 3.0 @ Flex LiveDocs. Describes specific usage of the ActionScript 3.0 language and core Flash Player API
- Previews
- Quelques exemples ont été compilés ici: http://tecfa.unige.ch/guides/flash (répertoires as3...)
Exercices période 3
- Un projet (compte pour 3 exercices)
- Ce projet doit contenir un minimum d'action script et correspondre à un objectif que vous définissez
- Accompagné d'un petit rapport qui explicite les objectifs et qui contient une auto-évaluation à mettre à l'endroit habituel plus un lien depuis votre home page wiki.
Evaluation:
- Qualité "professionnelle", c'est à dire appropriée par rapport à l'objectif.
- A rendre: Une semaine avant la data où on doit rendre les notes (calendrier de la FPSE).
Participants
Insérez votre home page wiki ci-dessus (avec ~~~) et remplissez votre home page wiki + la page travail (pour les étudiants réguliers STIC)!. Indiquez si vous êtes juste auditeur et faites des liens depuis votre wiki home page sur les exercices que vous avez terminé.
Cours 2009/2010
- Daniel K. Schneider (enseignant)
Cours 2008/2009
- David Coll|User:Davidc|David Coll (Nestor)
Cours 2007/2008
- Cyril Rebetez|User:CyrilRebetez | Cyril Rebetez (auditeur)
- Louiselle Morand|User:Morand3 | Louiselle Morand (volée Nestor)
- Rolf Wipfli|User:Vogon | Rolf Wipfli (volée Maya)
- Baptiste Ossipow|User:Baptiste| Baptiste Ossipow (volée Maya)
- Yves Dethurens|User:Dethurens | Yves Dethurens (volée Nestor)
Liens
- En français
- Tutoriels Flash (liens vers les tutos en français)
- (Catégorie)
- Flash
- En Anglais
Si vous voulez acheter un livre, on conseille:
- Pour CS 4
???
- Pour CS3
- Veer, E.A. Vander and Chris Grover (2007). Flash CS3: The Missing Manual. ISBN 0596510446 - 527 pages. - O'Reilly page - Missing CD-ROM page.
- Moock, Colin, Essential ActionScript 3.0. ISBN 0-596-52694-6. (Pour gens qui aimeraient apprendre à programmer)
Faites attentions: On travaillera avec Flash 10 (CS4). Flash MX ou 8 n'est pas très différent en ce qui concerne le dessin et l'animation, mais ActionScript a complètement changé. Flash 9 (CS3) est compatible, mais contient moins de fonctionalités.