STIC:STIC I - exercice 3 (Tetris)

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

STIC

Tutoriels Flash

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)
• Modifier des propriétés d'objets de type clip avec ActionScript
• Savoir lire (un peu) les manuels ActionScript chez Adobe, et notamment les sections sur les MovieClip (Angl: MovieClip)
• Utiliser vos Movie Clips comme des classes dans un script, apprendre à "export for ActionScript"
• Utiliser des bibliothèques Flash (configurer CS5/CS6)
• Faire des animations avec la GreenSocks tweening platform
• Utiliser le debug tool (outil de débogage) ... s'il reste du temps

Programme

Débogage/Rappel période 1 - les clips:

• Flash CS5 - Editeur ActionScript et fragments de code
• Flash CS4 - Symboles et clips

Le principe est simple: On crée une bibliothèque de clips animés. Ensuite on peut les combiner de différentes manières dans une application.

Clips interactifs - le principe

Utilisation de clips (rappel)

On peut utiliser un clip par exemple pour (a) créer des bouts d'animation, (b) créer des éléments utilisés par une autre clip, (c) créer une "application", c-a-d-. une instance placée dans la timeline principale

Exemple:

• Clip A = Dessin hélice
• Clip B = Dessin avion
• Clip C = Clip hélice qui tourne
• Clip D = Avion qui contient B et 2 fois C
• Clip E = Animation avion qui bouge et qui contient C + une interpolation de mouvement. Ce clip est inséré dans la scène/timeline principale.

Voir:

• la différence entre avions.html (animation dans la main timeline/chronologie) et avions-clip.html
• Sources: avions.fla et avions-clip.fla
• Voir aussi la notation avec les "." pour lancer les hélices (dans les deux cas)

Démos modification de propriétés (important!):

(répertoire CS3 pour les exemples ci-dessous)

• actionscript3-simple-object-manipulation.html
• actionscript3-simple-object-manipulation-buttons.html

Exemples d'une simple application avec différentes "pages"

• final-coap2110-2010-SOLUTION.swf - Source: final-coap2110-2010-SOLUTION.fla
• final-exam-coap2110-solution-2007.swf - Source: final-exam-coap2110-solution-2007.fla

Activités en classe:

• Télécharger actionscript3-simple-object-manipulation.fla et faire des modifications

Animation avec ActionScript

Demos

• flash-as3-trees-generated.html
• canon2.html
• canon3.html
• Les fromages de Claire

Répertoires avec des exemples

• http://tecfa.unige.ch/guides/flash/ex5/as3-timeline/ (trees)
• http://tecfa.unige.ch/guides/flash/ex5/greensock (exemples avec le canon)
• http://tecfa.unige.ch/guides/flash/ex4/tween-lite/ (CS4)
• http://tecfa.unige.ch/guides/flash/ex/greensock/ (CS3)

Activités en classe

• Jouez avec flash-as3-trees-generated.fla. Montre comment créer des multiples instances à partir d'un symbole.
• Téléchargez TweenMax de GreenSock et installez selon les instructions. En gros, il suffit d'extraire le fichier greensock.swc du zip et de le poser dans le même répertoire que votre *.fla. Ensuite vous devez configurer CS6 pour qu'il cherche les librairies dans le répertoire courant.
• Téléchargez flash-cs5-greensock-tweenmax1.fla et essayez de le faire marcher. Il faut avoir téléchargé la bibliothèque Greensocks, puis déclarer les chemins comme décrit dans Flash CS4 - Utilisation de librairies
• Fabriquez une machine à Coca ou similaire. Voir les exemples du canon2 dans http://tecfa.unige.ch/guides/flash/ex5/greensock

Tutoriels wiki

• Flash AS3 - Objets interactifs
• AS3 - Survol du langage ActionScript
• Flash CS4 - Symboles et clips (Créer des instances avec ActionScript)
• Flash CS5 - Editeur ActionScript et fragments de code (section débogage)
• Flash CS4 - Utilisation de librairies (chemin) - Flash using ActionScript libraries tutorial
• Tutoriel GreenSock GSAP pour AS3 - en:AS3 tweening platform

Autres ressources:

• Français: Guide de référence du langage et des composants ActionScript 3.0 et surtout du MovieClip (français)
• Anglais: Adobe Flash Platform et surtout MovieClip

Tâche

Deadline: Dimanche minuit avant la 3ème semaine présentielle.

(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 pour que cet événement déclenche une fonction. C'est le même principe que pour les boutons. Il faudra aussi penser à changer la forme du curseur.
• 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 ActionScript
• Utilisation d'une animation faite avec Greensocks

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 2, mais attention: Si vous voulez depuis un clip accéder un objet de la main timeline (comme par ex. un bouton) il faut utiliser du code comme:

MovieClip(root).yourbutton.visible=true;
MovieClip(root).gotoAndPlay("activity_1");

• Utilisation d'autres types d'objets (boutons Flash, composants divers)

(2) Documentez brièvement votre code dans File-> File Info (CS5) 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é)

Ressources externes

• Vous pouvez utiliser du "artwork" externe
• Vous devez citer les sources !

A rendre

Le dispositif (code source et swf) est à mettre en ligne avec un petit rapport qui se trouvera ici:

/etu-maltt/______/____/stic-1/ex3
/etu-maltt/PROMOTION/LOGIN/stic-1/ex3 

Exemple:

/etu-maltt/stella/dupond/stic-1/ex3 

Cette page de rapport doit inclure:

• Auteur et date
• Objectifs, ce que le dispositif est censé faire.
• 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
• Un lien vers vos contributions wiki ou alternativement 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

1. But - est-ce l'animation correspond à vos objectifs: -/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: --/-/0
9. Cohérence globale: +

(2) Contribution Wiki

1. Utilité/quantité et 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.

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.