BOUTET Antoine MARICOT Benoit ActionScript Flash Séance 2.

Slides:



Advertisements
Présentations similaires
Interactivé: L'Action Script.
Advertisements

Interactions avec ActionScript
Travail dans Flash Création : de graphiques, de textes, d'effets animés et d'applications destinés aux sites web : Généralement des graphiques vectoriels,
Vocabulaire pour la passage du modèle conceptuel des données au modèle relationnel des données. MCDMRD EntitéTable PropriétésChamps, attribut IdentifiantClé
Cours n°2M2. IST-IE (S. Sidhom) UE 303 Promo. M2 IST-IE 2005/06 Conception dun système d'information multimédia Architecture trois-tiers : PHP/MySQL &
12 novembre 2012 Grégory Petit
Création d’un programme :
Animation 3 COM3562 Communication Multimédia Janvier 2011.
Interaction 1 COM3562 Communication Multimédia Février 2012.
Animation 3 COM3562 Communication Multimédia Janvier 2011.
Illustrator Photosphop Retour sur les animations COM3562 Communication Multimédia Hiver 2012.
Spécificités Techniques Campagne NPI Nov Orange : Flash Transparent + 300x250 ATTENTION : s’il y a une interaction entre les deux créations les.
Éléments de présentation
Adobe Illustrator Création vectorielle.
Dreamweaver Séance 1.
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
FLASH MX : séance 1 Sandrine Rabin Nicolas Mollet SI28.
Environnement Flash MX
FLASH MX 1ère Séance. Introduction Création d’animation pour le Web, pouvant contenir une forte interactivité. Faible poids des fichiers. Compatible avec.
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
FLASH MX : séance 1 Vivien FILIPPINI Jeanne VERRE Exposé SI28.
Séance Flash 2 TD SI28 du 16/04/07 Nadel Ben Ghmiss Bruno Prémartin.
Présentation Dreamweaver – Partie 2 Mickaël PIQUE – Automne 2004.
EXPOSE N° 1 Thomas CLARISSE Yann GUIGUET.
Padmanaathan Gaayathrie
Réalisation d'un jeu de tir aux Canards Florian GAUCHER Alexandre LEVY SI 28 Exposé Flash 3.
Deuxième Exposé Si Nicolas Debeljak Sun Young Park.
SI28 - Écriture multimédia interactive – A2004 Présentation Dreamweaver Partie 2 Pierre Malet GSU05.
FLASH SEANCE 2 Interaction avec Action Script. Action script Langage de programmation utilisé par Flash. Définir des propriétés, des actions des comportements.
** Flash séance 2 Action script. ** Action Script Ajoute de l’interactivité Permet de contrôler les clips  Langage de programmation orienté objet.
Flash 2 ème séance Interaction François Marliac Mickaël Moreira.
Flash MX – Séance 2 Interactions & ActionScript David Rapin Si28 P06.
Dreamweaver le retour Avec Les Formulaires Les Calques
Flash MX er Séance LIU Xinlei GI02.
FLASH MX : séance 1 Adrien Deken Thomas Bergonzini SI28.
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
Télécharger :
Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
Amine Benabdennbi - Omar Berrada Rekhami Flash 2 – Interactivité Avancée Flash 2 Séance de Flash n°2 TD SI28 du 16/04/2007 Amine Benabdennbi Omar Berrada.
 Flash : animations mais aussi interactions  ActionScript : langage de programmation multipliant les possibilités de dynamisme et d’interactivité d’un.
Flash 1 Cariou SandraCoffinot Nicolas. Sommaire : I)Généralités II)Interface de Flash III)Grouper et Dissocier IV)Image clé V)Scénario et calques VI)Symboles.
SI28 Flash séance 1 Dessins et Animations. Présentation de Flash  Création d’animations pour le Web, pouvant contenir une forte interactivité.  Faible.
Télécharger :
Réalisation d’un jeu de tir au canards. Page d’accueil Télécharger les fichiers sources. Importez les images parchemins et fond_shoot Insérer l’image.
Flash : deuxième séance Yannick Bresson Alessandro Camozzato Tien-Quang Tong 22/10/07.
1 Exposé Flash 3 Objectif : Réalisation d’un jeu de tir aux canards Si28 - Paméla GUERIZEC – le 28 novembre 2005.
SI28 Flash 3 Tir’O’Canard 1 Téléchargez le swf : 1.Présentation 5.Fin 4.Jeu 2.Zone de travail 3.Menu.
FLASH SEANCE 1 – SI28 Benjamin MONTICO GI05 Automne 2006 Cyrille BOITEL, Sofiann YOUSFI MONOD Printemps 2007 Écriture interactive & multimédia Présentation.
EXPOSE FLASH 2 SI 28 24/10/2006 Delphine GODREAU Hélène PERRIER.
Sommaire : -A propos des images importées -Les boutons et l’interactivité dans la scène -Textes dynamiques -Les clips (les liaisons) -Les sons -Les composants.
DREAMWEAVER MX2 - Séance 2 Les calques Les comportements Les scénarios Les formulaires Les feuilles de style Les modèles Les cadres Mise en ligne Jérôme.
L’interactivité avec ActionScript. ActionScript Langage de programmation de Flash qui permet de : Gérer des actions et des animations sur la scène Contrôler.
Gaëtan MARANZANA SI28-A04 Flash MX DEUXIEME EXPOSE.
Exposé Flash 3 - Tir aux canards - DIDELOT Guillaume GI02 VAN DER PLAETSEN Virginie GSU04Printemps 06.
Interface Tutorial Flash 2 Par Vincent ² SI28 – P06 Bibliothèque Composant s Panneau actions Barre d'outils Timeline.
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
AKOONE Farouck LI Li SI 28 A2004. Flash permet de : Créer des animations pour le Web, pouvant contenir une forte interactivité Des fichiers de faible.
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
FLASH Séance 2 Xiaoliang Liang Morgane Le Nan SI28 P05.
Flash – séance 2 Interactions avec Action Script.
Présenté par: François-Xavier LECHEVALIER Fateh BOUGOUFFA
Séance 2 Marie Lavogez Justine Leleu Dreamweaver MX.
Gaël DELBARY Benoît DEVEAUX
LAMOUR Mathieu Présentation du logiciel SI28 Automne 2004.
PRESENTATION FLASH 2 MAURIN Marion BERETTI Vincent.
Présentation Courtin maxime – GI05Automne Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 2 / 17 Automne 2004 Plan :
Lundi 20 octobre 2008Séance Flash 21 Séance Flash 2 ActionScript Cheikh DIEDHIOU Germain LEDRUT.
FLASH MX Deuxième exposé. Sommaire  La bibliothèque commune  La bibliothèque projet  Les composants  Le panneau d’actions  Le code  Mise en application.
Transcription de la présentation:

BOUTET Antoine MARICOT Benoit ActionScript Flash Séance 2

Sommaire Introduction. Eléments du langage. La navigation au sein d'une animation. Contrôler une occurrence. Mouvement d'une occurrence. Gestion du son.

Ajouter de l'interactivité aux animations Flash  Contrôler la tête de lecture d’une animation  Contrôler le comportement d’une occurence  Lire des sons et des vidéos  Utiliser le clavier  … A quoi sert l'ActionScript ?

Où mettre le code ActionScript ?  sur l'occurrence d'un bouton,  ou sur l'occurence d'un clip,  sur une image clé,  dans un fichier texte externe. Attention : Pour pouvoir placer du code sur l' occurence d'un bouton ou d'un clip il faut que ce dernière soit nommé. Introduction

Arbre des occurrences Environnement de developpement Notion de gestionnaire d’évènements Introduction (2) Boite à outils ActionsNavigateur de scriptFenêtre de script

Elements du langage : les opérateurs +: Addition -: Soustraction *: Multiplication /: Division %: Reste de la division entière ++: Incrémentation --: Décrémentation =: Affectation && ou &: ET logique ou bit à bit || ou |: OU logique ou bit à bit ==: Egalité !=: Inégalité < ou <=: « inférieur à » ou « inférieur ou égale à » > ou >=: « supérieur à » ou « supérieur ou égale à »

Eléments du langage : les structures conditionnelles Structure If ( ) else Exemple If (toto == 1) afficher (toto); else afficher (titi); If... else

Eléments du langage : les structures conditionnelles Structure switch ( ) { case : ; break; default : ; break; } Exemple switch (toto) { case 1 : afficher (1); break; case 2 : afficher (2); break; case 3 : afficher (3); break; default : afficher (titi); break; } Switch

Eléments du langage : les structures itératives Structure for ( ; ; ) { ; } Exemple for (toto = 0; toto < 10; toto++) { afficher (toto); } For

Eléments du langage : les structures itératives Structure while ( ) { ; } Exemple toto = 0; while (toto < 10) { afficher (toto); toto++; } While

Telecharger le fichier exemple_bateau.fla sur wwwetu.utc.fr/~bmaricot. Créer un calque “commandes” pour acceuillir le code. Créer une image clé dans le calque “commandes”. Exemple 1 : l'animation du bateau

Contrôler la tête de lecture d'une animation  stop () - Arrêter la tête de lecture btArret.onPress = function(){ stop(); }  play () - Lancer la tête de lecture btLecture.onPress = function(){ play(); }  gotoAndStop() - Déplacement vers une image btSommaire.onPress = function(){ gotoAndStop(5); } Navigation au sein d'une animation

 nextFrame() et prevFrame() - Déplacement vers l'image suivante btNavAvancer.onPress = function(){ nextFrame(); } btNavReculer.onPress = function(){ gotoAndStop(_currentframe-1); }  Contrôler la tête de lecture de la timeline d'une occurrence btNavCarte.onPress = function(){ laCarte.gotoAndStop(5); } Navigation au sein d'une animation (2)

Ajouter un bouton pour lancer l'animation et un autre pour la mettre en pause. Le code ActionScript est le suivant : Application Stop (); play.onPress = function () { play (); } pause.onPress = function () { stop (); }

Les propriétés d’un clip MovieClip._alpha : Transparence d'une occurrence de clip. MovieClip._height : La hauteur d'une occurrence de clip, en pixels. MovieClip._rotation : Le degré de rotation d'une occurrence de clip. MovieClip._visible : Une valeur booléenne déterminant si l'occurrence d'un clip est masquée ou visible. MovieClip._width : L a largeur d'une occurrence de clip, en pixels. MovieClip._x : La coordonnée x d'une occurrence de clip. MovieClip._xmouse : La coordonnée x du pointeur de la souris dans une occurrence de clip. MovieClip._xscale :L a valeur spécifiant le pourcentage de redimensionnement horizontal d'un clip.

Ajouter la possibilité de modifier la taille de la baleine. Code ActionScript : Application BoutonTaille.onPress = function () { baleine._xscale = parseInt (taille.text); baleine._yscale = parseInt (taille.text); }

Les yeux du soleil suivent la souris. Code ActionScript : Application (2) oeil1.onEnterFrame = function () { Xmouse = this._parent._xmouse; Ymouse = this._parent._ymouse; Xoeil = this._x; Yoeil = this._y; XmouseLocal = Xmouse - Xoeil; YmouseLocal = Ymouse - Yoeil; rayon = Math.sqrt ((XmouseLocal * XmouseLocal) + (YmouseLocal * YmouseLocal)); angle = Math.asin (YmouseLocal / rayon); if (Xmouse < Xoeil) this._rotation = (angle / ); else this._rotation = angle / ; }

Var = New Color ( ) : Créé un objet associé à la couleur de l'occurrence. Var.setRGB ( ) : Permet de modifier la couleur de l'objet Var. Couleur = Var.getRGB () : Permet d'obtenir la couleur de l'objet Var. Couleur d'une occurrence

Modifier la couleur du ciel grâce à deux boutons. Code ActionScript des boutons : Application bBleu.onPress = function () { paletteBleu = new Color(cCiel); paletteBleu.setRGB(0x0DB0FF); delete paletteBleu; } bOrange.onPress = function () { paletteOrange = new Color(cCiel); paletteOrange.setRGB(0xFF865E); delete paletteOrange; }

Il est possible d'animer un clip grâce à un de ces gestionnaires :.onEnterFrame. Ce gestionnaire est déclanché au chargement de l'animation flash et est rappelé cycliquement à la même vitesse que celle de l'animation. Animation d'un clip

.hitTest ( ) : Méthode qui permet de déterminer si l'occurence 1 est en collision avec l'occurrence 2. Détection des collisions entre deux occurences

Mettre en mouvement la baleine. Ajouter une détection de collision entre la baleine et le bateau. Application

Application (2) go.onPress = function () { baleine.onEnterFrame = function () { baleine._x -= 10; if (baleine.hitTest (bateau)) { son.start(); baleine._rotation = 90; delete baleine.onEnterFrame; baleine.onEnterFrame = function () { if (baleine._y == 550) delete baleine.onEnterFrame; baleine._y += 10; }

Pour charger un son il y a deux méthodes. Si le son est dans la bibliothèque : Gestion du son son = new Sound(); son.attachSound( ); Si le son est un fichier externe : Attention : Le deuxième paramètre de la fonction de chargement d'un fichier externe permet de spécifier quand la lecture du fichier sera lancée (streaming ou non). son = new Sound(); son.loadSound("nom du fichier externe",1);

Ajout d'un son lors de la collision entre le bateau et la baleine. Code ActionScript : Application son = new Sound(); son.attachSound("bing"); son.start();

Drag & Drop Permet de déplacer un clip on (press) { this.startDrag(false); } on (release) { this.stopDrag(); } Limitation du déplacement this.startDrag(false, 65, 80, 105, 140);

Telecharger le fichier animateur.fla sur wwwetu.utc.fr/~bmaricot. Transformer les images en occurrence de clip. Placer les occurences de clip Ajouter le drag & drop dans le gestionnaire d’évènement du ? Limiter le déplacement au dessus du clip photo Mettre la photo transparente quand la souris de bouge pas et que le ? n’est pas sélectionné Ex 2 : Animateur Phantome

Application (version 1) this.pic._alpha=0; this.interrogation.onPress = function() { _root.onMouseMove = function () { if(this.pic._alpha == 100) this.pic._alpha ++; } this.interrogation.onRelease = function() { _root.onEnterFrame = function() { this.pic._alpha-=5; if (this.pic._alpha == 0) delete _root.onEnterFrame; }

Application (version 2) this.pic._alpha=0; var souris = 0; this.interrogation.onPress = function() { souris = 1; _root.onMouseMove = function () { if((this.pic._alpha < 100)&&(souris == 1)) this.pic._alpha ++; } this.interrogation.onRelease = function() { souris = 0; _root.onEnterFrame = function() { this.pic._alpha-=5; if (this.pic._alpha < 0) delete _root.onEnterFrame; }

Placer un symbole sur la scène attachMovie(« nom_liaison","new_nom",1); Dupliquer une occurrence sur la scène mon_clip.duplicateMovieClip("new_nom",1); Supprimer une occurrence de la scène mon_clip.removeMovieClip(); Charger une image sur la scène mon_clip.loadMovie("photo1.jpg"); loadMovieNum("fond.jpg",1); Création dynamique d’interface

Telecharger le fichier barredefil.fla sur wwwetu.utc.fr/~bmaricot. Création d’une occurrence point Création d’une occurrence forme Editer le symbole point Placer l’occurrence forme Création d’une image clé Dupliquer l’occurrence forme Ex 2 : barre navigante

Application (version 1) this.minia._x = 0 this.minia._x = 65 for (i=100; i<1000; i+=100) { this.minia.duplicateMovieClip("miniature"+i, i); eval("miniature"+i)._x = i; eval("miniature"+i)._y = 65; }

Ajouter une zone réactive (zoom) sur les formes Ajouter un oscillement sur les formes Intercaller le positionnement des formes barre navigante (2)

Application (version 2) : Zone réactive this.minia.onRollOver = function () { this._xscale = 120 this._yscale = 120 } this.minia.onRollOut = function () { this._xscale = 100 this._yscale = 100 }

Application (version 2) : Oscillation _global.oscillation = 0; _global.amplitude = 5; this.onEnterFrame = function() { _global.oscillation += 0.3; this.minia._y = 65 + (Math.sin(oscillation)*amplitude); }

Application (version 2) : Intercallage if ((i/100)%2) { eval("miniature"+i).onEnterFrame = function() { this._y = 95 + (Math.cos(oscillation)*amplitude); } else { eval("miniature"+i).onEnterFrame = function() { this._y = 65 + (Math.sin(oscillation)*amplitude); }

Déplacer la barre suivant le positionnement de la souris barre navigante (3)

Application (version 3) _root.onEnterFrame = function() { decal = 225-_root._xmouse; pan = marque._x; if (pan -1000) { marque._x += (decal/20); } if (pan>1000) marque._x=-500 if (pan<-1000) marque._x=500 };

Application (version 3) eval("miniature"+100).onPress = function() { this.loadMovie("jay.jpg",eval("miniature"+100)); }