« STIC:STIC I - exercice 2 (Tetris) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 52 : Ligne 52 :
; Introduction
; Introduction
* [[Flash CS4 - Principes de l'animation]]
* [[Flash CS4 - Principes de l'animation]]
* [[Flash CS4 - Symboles et clips]] - ([[:Flash embedded movie clip tutorial]] / [[:en:Flash using embedded movie clips tutorial]]. A relire impérativement lorsque vous commencez le projet. Dans ce cours on créera des animations à l'intérieur de symboles de type "movie clip").
* [[Flash CS4 - Symboles et clips]] - ([[:en:Flash embedded movie clip tutorial]] / [[:en:Flash using embedded movie clips tutorial]]). A relire impérativement lorsque vous commencez le projet. Dans ce cours on créera des animations à l'intérieur de symboles de type "movie clip").


; Frame-by-frame animation
; Frame-by-frame animation

Version du 26 septembre 2013 à 15:32

Cette page fait partie des cours STIC I et STIC II

STIC
Tutoriels Flash

Objectifs

Conceptuel:

  • Apprendre à définir des objectifs (ce qu'un public cible doit faire/apprendre), les implémenter et documenter le résultat.
  • Concevoir une simple application Flash qui laisse l'utilisateur explorer des animations
  • Notions de base en animation et programmation de boutons (gestions d'événements)

Technique:

  1. Créer des dessins avec CS5 (modes de dessin, transformations, couleurs)
  2. Utilisation de clip art (importation d'images SVG via un autre programme)
  3. Créer des animations avec CS5: image par image, interpolations de mouvement (motion tweening), morphing (shape tweening).
  4. Utilisation du composant bouton pour naviguer dans la timeline
  5. S'initier à la logique du event-driven programming (event handlers + ActionScript simple)
  6. Utilisation du composant vidéo pour publier une vidéo
  7. Savoir créer un "site Flash" (plusieurs images reliés par des boutons)

Programme

L'univers Flash et le desktop

Le dessin

Animation

Introduction
Frame-by-frame animation
Motion animation - Interpolation de movement
Motion animation (classic) - pour information, ignorez ce chapitre
Morphing / Shape tweening - Interpolation de forme
Résumés animation

Le composant vidéo (I)

  • Encodage flv et rognage
  • Utilisation de vidéos flv avec la composante FLVPlayBack
  • Videos dans la timeline (pas trop conseillés)

Son

Boutons et premier contact avec ActionScript

Attention: On classe, on a montré Le composant bouton et ActionScript (ci-dessous). Autrement dit, pour le moment, vous pouvez ignorer cette section. - Daniel K. Schneider 30 septembre 2011 à 19:11 (CEST)

Les composants

(petite sensibilisation)

Le composant bouton et ActionScript

Pour l'exercice à rendre, je vous conseille d'utiliser ce type de boutons.

  • Exemple pour commencer (à vous de décider si vous voulez travailler par modification):
http://tecfa.unige.ch/guides/flash/ex5/components-intro/flash-cs5-simple-slide-show-menu.fla (joli code)
http://tecfa.unige.ch/guides/flash/ex4/components-intro/flash-cs4-simple-slide-show-menu-fewcode.fla (plus simple)

Les fragments de code

Exercice à rendre

Deadline: Dimanche soir avant la période 2 (un retard entraîne un pénalité de 1 point)

Tâche

(1) Application Flash

Faites une application Flash de type "site" avec un menu. Elle doit comprendre au moins quatre pages navigables:

  • une page d'accueil qui permet à l'utilisateur de comprendre l'objectif du dispositif
  • une video simple. Utilisez un des formats: MP4, M4A, MOV, MP4V, 3GP et 3G2 (autrement, il va falloir transcoder....)
  • une animation de movement. 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 son qq. part dans le dispositif
  • 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 contiennent toute la scène pour ce frame.
  • les boutons de navigation et le script s'etendent (normalement) sur toute la longeur, 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 File-> File Info (CS6) 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 Flash ... c.f. la page STIC I.

Ressources externes

  • Vous pouvez utiliser du "artwork" externe (mais pas plus que 66 %)
  • Vous devez citer les sources dans le fichier Flash et dans votre rapport !

A rendre

Le dispositif (code source *.fla et code compile *.swf) est à mettre en ligne accompagné d'un petit rapport qui se trouvera ici: 

Répertoire: /web/etu-maltt/____/____/stic-1/ex2/
URL: http://tecfaetu.unige.ch/etu-malt/____/____/stic-1/ex2/

Veuillez strictement garder ces noms de répertoires, notamment l'élément 

/stic-1/ex/

Bien: 

/etu-maltt/stella/dupont/stic-1/ex2/welcome.html

Mauvais (2 erreurs): 

/etu-maltt/stella/dupont/stic1/Ex2/welcome.html

Mauvais à pleurer (3 erreurs): 

/etu-maltt/stella/dupont/stic 1/Exercice-2/rapport.html

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

  1. But - est-ce l'animation correspond à vos objectis: -/0/+
  2. Thématique MALTT -/0/+
  3. Artwork - qualité esthétique --/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: -/0
  8. Erreurs - Présence/absence d'erreurs (notamment je veux voir aucun tween objet dans votre library !!: --/-/0
  9. Cohérence globale: +

(2) Contribution Wiki

  1. Utilité/quantité
  2. 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 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
Ressources graphiques vectorielles
  • Clipart (ressources ClipArt, EduTechwiki Anglais)
Liens Flash
Livre recommandé (en Anglais)
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_2_(Tetris)&oldid=29751 »