Voir la source de STIC:STIC I - exercice 2 (Tetris)

{{stic12}}
<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>

== Objectifs ==

# Créer des dessins avec CS5 (modes de dessin, transformations, couleurs)
# Utilisation de clip art (importation d'images SVG via un autre programme)
# Créer des animations avec CS5: 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 +ActionScript simple)
# Utilisation du composant vidéo pour publier une vidéo
# Savoir créer un "site Flash" (plusieurs images reliés par des boutons)

== Programme ==

=== L'univers Flash et le desktop ===

* Handout: [[Flash]] - ([[:en:Flash|:en:Flash]])
* Handout: [[Univers Flash CS5]] - ([[:en:Flash CS5 desktop tutorial|:en:Flash CS5 desktop tutorial]])
* Handout: [[:en:Flash CS3 keyboard shortcuts|Flash CS3 keyboard shortcuts]]
* Handout: [[Flash - dictionnaire anglais français]]

=== Le dessin ===
* Handout: [[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
* Handout: [[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
* Handout: [[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
* Handout: [[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)
* Handout: [[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
* [[Flash CS4 - Principes de l'animation]]
* [[Flash CS4 - Symboles et clips]]. (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
* Previews: [http://tecfa.unige.ch/guides/flash/ex/frame-by-frame-intro/flash-cs3-shaking-hello.swf Shakin hello], 
* Handout: [[Flash CS4 - Animation image par image]]  - ([[:en:Flash frame-by-frame animation tutorial|Flash frame-by-frame animation tutorial]])

; 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], 
* [[Flash CS4 - Interpolation de mouvement]]

; 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]
* Handout: [[Flash CS4 - Interpolation de mouvement classique]]  - ([[:en:Flash motion tweening tutorial|Flash 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]
* Handout: [[Flash CS4 - Morphing]]  - ([[:en:Flash shape tweening tutorial|Flash shape tweening tutorial]])

; Résumé animation
* [[Flash CS4 - Principes de l'animation]]
* Voir aussi (outils CS3 seulement): [[:en:Flash animation summary|Flash animation summary]]

=== 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)

* Previews: 
** [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/flash-cs3-video-simple-server.html flash-cs3-video-simple-server.html]

* Handout: [[Flash CS4 - Composants videos]] (fr) ([[:en:Flash video component tutorial|Flash video component tutorial]] (en)

* Répertoire avec exemples et qqs. vidéos pour jouer: http://tecfa.unige.ch/guides/flash/ex5/component-video-intro/

=== Son ===

* [[Flash CS4 - Son]] (ébauche)
* [[:en:Flash sound tutorial|Flash sound tutorial]]

=== 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. - [[Utilisateur:Daniel K. Schneider|Daniel K. Schneider]] 30 septembre 2011 à 19:11 (CEST)

* Previews 
** [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-image-map.html flash-cs3-image-map.html] (image maps)
** [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-rocket-launcher-as3.html flash-cs3-rocket-launcher-as3.html]
**  [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-simple-menu-site.html flash-cs3-simple-menu-site.html]
** [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-simple-slide-show-as3.html flash-cs3-simple-slide-show-as3.html]
* Handout: [[Flash CS4 - Boutons]] - ([[:en:Flash button tutorial|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").

=== Les composants ===

(petite sensibilisation)

* Handout: [http://tecfa.unige.ch/guides/flash/ex4/components-intro/flash-cs4-components-overview.swf flash-cs4-components-overview.swf]

=== Le composant bouton et ActionScript ===

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

* Previews
** [http://tecfa.unige.ch/guides/flash/ex4/components-intro/flash-cs4-simple-slide-show-menu.swf flash-cs4-simple-slide-show-menu.swf]
** [http://tecfa.unige.ch/guides/flash/ex4/components-intro/flash-cs4-simple-slide-show-menu-fewcode.swf flash-cs4-simple-slide-show-menu-fewcode.swf]
* Handout: [[Flash CS5 - Composant bouton]] ([[Flash CS4 - Composant bouton|CS4]])

* 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 ===

* Handout: [[Flash CS5 - Editeur ActionScript et 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:STIC I|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'''
# 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

== 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
* [[Tutoriels Flash]] (voir le programme pour les détails)

; Ressources graphiques vectorielles

* [[:en:Clipart|Clipart]] (ressources ClipArt, EduTechwiki Anglais)

; Liens Flash
* [[Flash]] (fr, liens divers)
* [[:en:Flash and AS3 links]]

; Livre recommandé (en Anglais)

* Chris Grover (2010). Flash CS5: The Missing Manual. O'Reilly Media / Pogue Press, ISBN 1-4493-8025-5. Aussi disponible comme [http://oreilly.com/catalog/0636920000631 E-book/PDF]