« STIC:STIC I - exercice 4 (Stella) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
mAucun résumé des modifications
 
(21 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{en construction}}
{{stic_archive}}
{{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;">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>
<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>
Ligne 6 : Ligne 5 :
== Objectifs ==
== Objectifs ==


# Comprendre l'architecture des boutons (et savoir en créer)
* 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)
# S'initier à la logique du event-driven programming (event handlers +ActionScript simple)
* Modifier des propriétés d'objets de type clip avec ActionScript
# Utilisation du composant vidéo pour publier une vidéo
* Savoir lire (un peu) les manuels ActionScript chez Adobe, et notamment les sections sur les [http://help.adobe.com/fr_FR/AS3LCR/Flash_10.0/flash/display/MovieClip.html MovieClip] (Angl: [http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/MovieClip.html MovieClip])
# Utilisation du composant bouton pour naviguer dans la timeline
# Savoir créer un "site Flash" (plusieurs images reliés par des boutons)


== Programme ==
== Programme ==


=== Rappel clips ===
'''Rappel période 1 - les clips''':


* [[Flash CS5 - Editeur ActionScript et fragments de code]]
* [[Flash CS4 - Symboles et clips]]
* [[Flash CS4 - Symboles et clips]]


En principe, toute animation sera faite à l'intérieur d'un seul clip et pas sur la timeline (chronologie) principale. Dans un frame (image) vous n'insérez que des boutons de navigation, ensuite vous placerez un seul clip qui lui contient toute la scène pour ce frame.
Le principe est simple: On crée une bibliothèque de clips animés. Ensuite on peut combiner de différentes manières.  


A la limite vous pouvez composer un frame à partir de plusieurs symboles et faire le scripting dans la calque "action". Globalement, je déconseille cette stratégie.
'''Clips interactifs - le principe''':


=== Le composant vidéo (I) ===
Par exemple (a) créer des bouts d'animation, (b) créer des clips qui les utilisent, (c) créer une instance dans la timeline


* Encodage flv et rognage
Exemple:
* Utilisation de vidéos flv avec la composante FLVPlayBack
* Clip A = Dessin hélice
* Videos dans la timeline (pas trop conseillés)
* 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 + interpolation de movement et qu'on met sur la timeline.


* Previews:  
Voir:
** [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/flash-cs3-video-simple-server.html flash-cs3-video-simple-server.html]
* la différence entre [http://tecfa.unige.ch/guides/flash/ex4/embedded-movie-clips/avions.html avions.html] (animation dans la main timeline/chronologie) et [http://tecfa.unige.ch/guides/flash/ex4/embedded-movie-clips/avions-clip.html avions-clip.html]
* Sources: [http://tecfa.unige.ch/guides/flash/ex4/embedded-movie-clips/avions.fla avions.fla] et [http://tecfa.unige.ch/guides/flash/ex4/embedded-movie-clips/avions-clip.fla avions-clip.fla]
* Voir aussi la notation avec les "." pour lancer les hélices (dans les deux)


* Handout: [[Flash CS4 - Composants videos]] (fr) ([[:en:Flash video component tutorial|Flash video component tutorial]] (en)
Cet exercice vous demande de nouveau de créer des clips et d'utiliser les méthodes play()/stop().


=== Son ===
'''Démos modification de propriétés''':
:([http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/ répertoire CS3 pour les exemples ci-dessous])
* [http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/actionscript3-simple-object-manipulation.html actionscript3-simple-object-manipulation.html]
* [http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/actionscript3-simple-object-manipulation-buttons.html actionscript3-simple-object-manipulation-buttons.html]


* [[Flash CS4 - Son]] (ébauche)
'''Exemples d'une simple application avec différentes "pages"'''
* [[:en:Flash sound tutorial|Flash sound tutorial]]
* [http://tecfa.unige.ch/guides/flash/ex/exams2010/final-coap2110-2010-SOLUTION.swf final-coap2110-2010-SOLUTION.swf] - Source: [http://tecfa.unige.ch/guides/flash/ex/exams2010/final-coap2110-2010-SOLUTION.fla final-coap2110-2010-SOLUTION.fla]
* [http://tecfa.unige.ch/guides/flash/ex/exams2007/final-exam-coap2110-solution-2007.swf final-exam-coap2110-solution-2007.swf] - Source: [http://tecfa.unige.ch/guides/flash/ex/exams2007/final-exam-coap2110-solution-2007.fla final-exam-coap2110-solution-2007.fla]


=== Boutons et premier contact avec ActionScript ===
'''Activités en classe''':
* Télécharger [http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/actionscript3-simple-object-manipulation.fla actionscript3-simple-object-manipulation.fla] et faire des modifications


* Previews
'''Tutoriels wiki''':
** [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 ===
* [[Flash AS3 - Objets interactifs]]
* [[AS3 - Survol du langage ActionScript]]


(petite sensibilisation)
'''Autres ressources''':
 
* Français: [http://help.adobe.com/fr_FR/AS3LCR/Flash_10.0/index.html Guide de référence du langage et des composants ActionScript 3.0] et surtout du [http://help.adobe.com/fr_FR/AS3LCR/Flash_10.0/flash/display/MovieClip.html MovieClip] (français)
* Handout: [http://tecfa.unige.ch/guides/flash/ex4/components-intro/flash-cs4-components-overview.swf flash-cs4-components-overview.swf]
* Anglais: [http://help.adobe.com/en_US/as3/learn/index.html Adobe Flash Platform] et surtout [http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/MovieClip.html MovieClip]
 
=== Le composant bouton et ActionScript ===
 
* 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 CS4 - Composant bouton]]
 
=== Les fragments de code ===
 
* Handout: [[Flash CS5 - Editeur ActionScript et fragments de code]]
 
== Exercice à rendre ==
 
'''A rendre''': Dimanche soir avant période 2 (un retard entraîne un pénalité de 1 point)


=== Tâche ===
=== Tâche ===


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


Faites une application Flash de type "site" avec un menu. Elle doit comprendre au moins:
(1) Créez une application Flash qui implémente les éléments suivants:


* Plusieurs "pages" navigables (au moins 4)
* '''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.
* Un menu (au moins sur le premier frame/image) et des boutons de navigation qui permettent d'accéder à chaque image.
* 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.
* une video (simple ou augmentée d'une ou d'une autre façon)
* 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.
* une animation (soit dans la timeline principale, soit dans un clip). Vous pouvez reprendre l'animation de l'exercice 2.
* Utilisation d'une instruction conditionnelle (''if'' ou ''switch'') dans le ActionScript
* un son qq. part dans le dispositif


Le sujet de l'animation doit être en rapport avec une thématique "MALTT"
Le sujet de l'animation doit être en rapport avec une thématique "MALTT"


(2) Documentez '''brièvement''' votre code dans ''File-> File Info'' (CS5) ou ) en y insérant les informations suivantes:
A option:
* Vous pouvez distribuer votre application dans des "plages" avec un menu comme pour l'ex 3, mais attention: Si vous voulez accéder depuis un clip un objet de la main timeline (comme un bouton) il faut utiliser qc. 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
* Auteur
* Date
* Date
Ligne 111 : Ligne 101 :


Le dispositif (code source et swf) est à mettre en ligne avec un petit rapport qui se trouvera ici:
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/______/____/stic-1/ex4
  /etu-maltt/______/____/stic-1/ex3
  /etu-maltt/______/____/stic-1/ex4


Cette page de rapport doit inclure:
Cette page de rapport doit inclure:
Ligne 124 : Ligne 114 :
* 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.
* 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 pour tous les exercices (sauf le 1) !
'''N'oubliez pas la contribution wiki obligatoire'''


== Evaluation ==
== Evaluation ==
Ligne 131 : Ligne 121 :


(1) Dispositif
(1) Dispositif
# But - est-ce l'animation correspond à vos objectis: -/0/+
# But - est-ce l'animation correspond à vos objectifs: -/0/+
# Thématique MALTT -/0/+
# Thématique MALTT -/0/+
# Artwork - qualité esthétique --/0/+/++
# Artwork - qualité esthétique --/0/+/++
Ligne 146 : Ligne 136 :
(3) Rapport
(3) Rapport
# Présence des éléments requis
# Présence des éléments requis
# Réflextions et contributions conceptuelles
# Réflexions et contributions conceptuelles


== Aide ==
== Aide ==

Dernière version du 12 décembre 2013 à 19:13

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

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)

Programme

Rappel période 1 - les clips:

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

Clips interactifs - le principe:

Par exemple (a) créer des bouts d'animation, (b) créer des clips qui les utilisent, (c) créer une instance dans la timeline

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 + interpolation de movement et qu'on met sur la timeline.

Voir:

Cet exercice vous demande de nouveau de créer des clips et d'utiliser les méthodes play()/stop().

Démos modification de propriétés:

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

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

Activités en classe:

Tutoriels wiki:

Autres ressources:

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

Le sujet de l'animation 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 3, mais attention: Si vous voulez accéder depuis un clip un objet de la main timeline (comme un bouton) il faut utiliser qc. 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é)

Si vous avez une ancienne version de Flash, essayez Modify->Document, puis insérez:


=== Auteur et date ===

=== Objectifs ===
 
=== Crédits ===

Ressources externes

  • Vous pouvez utiliser du "artwork" externe (mais pas plus que 66 %)
  • 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/ex4
/etu-maltt/______/____/stic-1/ex4 

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.