Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
Publié parSalomé Emmanuelle Bélanger Modifié depuis plus de 8 années
1
Flash : deuxième séance Yannick Bresson Alessandro Camozzato Tien-Quang Tong 22/10/07
2
Flash permet de créer facilement des animations interactives applicables pour la création de pages Web mais également des jeux Il nous donne ainsi l’occasion d’apporter de l’interactivité. Visualisation des images à charger en mode continu : l'application est lancée sans avoir effectué le complet download Les avantage de Flash
3
ActionScript Qu’est-ce que l’ActionScript ? ActionScript est le langage de programmation d'Adobe Flash Player il joue un rôle essentiel pour la dynamique de l’animation mais aussi Il rend possibles l'interactivité, la gestion des données et beaucoup d'autres opérations relatives au contenu et aux applications Flash. A quoi sert l’ActionScript ? Gérer des actions ( la position, le mouvement, la répétitivité de mouvements etc... ), des animations des objets (clips) et de la scène Contrôler la tête de lecture (timeline) Lire des sons ou des vidéos Gérer les événements souris et clavier.
4
Où placer le code ActionScript ?
5
Sur l’occurrence d’un clip : onClipEvent (onEnterFrame) { ligne(s) d'instruction(s); } Sur l’occurrence d’un bouton : on(press) (on(release)) { ligne(s) d'instruction(s); } Sur une image clé : Une méthode fréquemment utilisée consiste à placer le code sur un calque prévu à cet effet. Il faut alors nommer les occurrences afin de pouvoir les appeler dans ce script.
6
Attention : Nommez vos occurrences ! On peut, après cela, appeler nos occurrences dans un script que l’on placera dans un calque à part : gauche.onPress=function(){ ligne(s) d’instruction(s); };
7
Navigation: Les principales Commandes stop(); Avec cette commande, il est possible d’effectuer l’ arrêt d'un mouvement à une certaine étape de la timeline pour indiquer la fin de la scène, d’une action. play(); Cette commande nous permet de décider de faire partir l'action désirée. Se déplacer dans la timeline:
8
gotoAndStop (x) Cette commande est différente du simple ’stop’ parce qu‘elle nous permet d'arrêter l'action dans la timeline à une valeur choisie. gotoAndPlay (x) Cette commande permet d’aller à l’image x et de jouer l’action à partir de celle-ci. Navigation: Les principales Commandes
9
gotoAndPlay(s,x); Cette instruction est utile lorsque l’on travaille avec plusieurs séquences, en effet elle permet dans une séquence "s" de faire un gotoAndPlay à partir de l’image "x". Se déplacer entre les séquences : Navigation: Les principales Commandes
10
getURL (" http://www.utc.fr", " _blank"); Permet de créer une liaison avec une page internet this.loadMovie(“nomfile.swf"); Possibilité de liaison à une autre animation Navigation: Les principales Commandes Se déplacer hors de l’animation :
11
Gestionnaire d’événements Sur l’occurrence d’un clip : onClipEvent (onLoad) { Actions réalisées au simple chargement du clip; } onClipEvent (onEnterFrame) { Actions réalisées à chaque image du clip; } Sur l’occurrence d’un bouton : on (press){ Actions réalisées si le bouton est cliqué; } on (release){ Actions réalisées si le bouton est relâché; } on (rollOver){ Actions réalisées si le pointeur passe sur le bouton; }
12
Exercice 1 : Navigation, mise en oeuvre Présentation des commandes de base à travers de simples exemples Créer un symbole et lui faire suivre un parcours pré- établi (rappel séance 1). Créer des boutons play, stop, pause, et un de départ de séquence imposé sur l’animation à partir des instructions de navigation précédemment citées (stop, play…) Possibilité de liaison à page internet Insérer une touche additionnelle, aussi de librairie, pour donner à ceci je commande getURL ("http://www.utc.fr", "_ blank"); pour la liaison à une page internet
13
Possibilité de liaison à d’autres séquence s Créer une nouvelle séquence ; Aller sur la première séquence créée : on passe à la deuxième séquence grâce à la commande gotoAndPlay (“s”, x) ; Ajouter un bouton auquel donner le commande this.loadMovie(“nomfile.swf"); pour se relier à l'animation flash voulue. Exercice 1 : Navigation, mise en oeuvre
14
Rappel : 3 types de texte ! Texte statique Texte de saisie exemple : champ pour un formulaire Texte dynamique il peut prendre plusieurs valeurs Il peut être déplacé comme un générique par exemple Définir l’occurrence et la variable !
15
Programmer avec ActionScript: Déclaration des variables Variables locales : Déclarées dans une fonction par exemple var age=21; Variables globales : Déclarées pour toute l’application _global.age=21;
16
Programmer avec ActionScript: Structure conditionnelle if (condition à tester) { ligne(s) d’instruction(s); } else {ligne(s) d’instruction(s); } switch (variable) { case "valeur1delacondition " : // instructions; break; case "valeur2delacondition" : // instructions; break; case "valeur3delacondition" : // instructions; break; default : // instructions; break; }
17
Programmer avec ActionScript: Structure itérative (les boucles) for(i=0; i<x; i++){ ligne(s) d’instruction(s); } Effectue x fois les instructions while (i<x){ ligne(s) d’instruction(s); } Effectue les instructions tant que la condition est vraie.
18
Programmer avec ActionScript: Principaux opérateurs a ++ Incrémentation a -- Décrémentation a && bAND logique a || bOR logique 2 * 4Multiplication 6 / 2Division 2 < 3Inférieur à 3 <= 3Inférieur ou égal à a = 4 Affectation (pour une variable ou dans une instruction) a == 4Égalité ( teste l’égalité. On l’utilise pour if par exemple) 3 != AInégalité
19
Exercice 2 : Jeu de fléchettes Créer les symboles de cible, de fléchette et le cadre de jeu. Créer un drag&drop sur la fléchette flechette.onPress = function() { this.startDrag(true);} flechette.onRelease = function() { this.stopDrag(); checkTarget(this);} Gérer la zone et les options du drag&drop
20
Exercice 2 : Jeu de fléchettes Rendre la cible mouvante, gérer le contact entre des symboles ( nom1.hitTest(nom2) ) Déclarer et gérer un son var son:Sound = new Sound(); son.attachSound("ressort.wav"); son.start();
21
Hiérarchie des objets On peut désigner les objets selon leur chemin relatif ou absolu : _root.clip1._x désignera l’abscisse du clip1, peu importe où se trouve le code. Il s’agit d’un chemin absolu. this._x désignera l’abscisse de l’objet dans lequel le code est écrit. C’est donc un chemin relatif. _parent._x désignera l’abscisse de l’objet parent à l’objet dans lequel le code est écrit. C’est donc un chemin relatif. Exemple : dans le schéma suivant, _parent._x écrit dans le code du clip31 désignera l’abscisse du clip3 !
22
Hiérarchie des objets _root clip1clip3clip2 clip21clip31 >scène principale >clips imbriqués dans la scène >clips imbriqués dans d’autres clips
23
Exercice 3 : Texte scrollable http://si28utc.googlepages.com/text_scrollable.fla Créer un nouveau fichier Flash Créer deux boutons haut et bas (mode: button) Créer une zone de texte (outil texte A )et son contenu (texte statique) Créer un clip Controller
24
Exercice 3 : Texte scrollable Créer les 6 calques suivants: Bouton haut Components Bouton bas Actions Masque Texte Ajouter ActionScript pour les boutons Félicitations ;-)
25
Pour aller plus loin Tutoriel drag &drop : http://www.flashvalley.com/fv_tutorials/advanced_drag_and _drop_in_Flash/ Tutoriel texte scrollable : http://www.webwasp.co.uk/tutorials/b42-scrolling-text/01.php Pleins d’information sur Flash : http://wiki.mediabox.fr/tutoriaux/flash En particulier sur les opérateurs: http://wiki.media-box.net/documentation/flash/operateurs
Présentations similaires
© 2024 SlidePlayer.fr Inc.
All rights reserved.