Gaëtan MARANZANA SI28-A04 Flash MX DEUXIEME EXPOSE.

Slides:



Advertisements
Présentations similaires
PoBot – Club de Robotique de Sophia Antipolis – La vision sur un robot Afin de pouvoir se déplacer correctement et savoir où aller,
Advertisements

Interactivé: L'Action Script.
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,
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
Python Interfaces graphiques
Python Interfaces graphiques
Création d’un programme :
Les structure d’un programme :
FICHIERS : Définition : Algorithme général:
Interaction 1 COM3562 Communication Multimédia Février 2012.
Manipulation de formulaires en Javascript
Animateur : Med HAIJOUBI
1 Deuxième journée La programmation procédurale. 2 Unité de programmation : la procédure ou fonction Très semblable au math Un programme est un ensemble.
Algorithmique et programmation en
Initiation au JavaScript
Philippe Gandy - 8 septembre 2015 Basé sur les notes de cours de Daniel Morin et Roch Leclerc.
Philippe Gandy - 15 septembre 2015 Basé sur les notes de cours de Daniel Morin et Roch Leclerc.
Faire déplacer le personnage à l’aide des flèches du clavier Il y a plusieurs façon de procéder selon nos attentes, mais en voici une qui est très simple:
Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.
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.
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
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.
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.
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.
BOUTET Antoine MARICOT Benoit ActionScript Flash Séance 2.
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.
PRESENTATION FLASH 2 MAURIN Marion BERETTI Vincent.
Lundi 20 octobre 2008Séance Flash 21 Séance Flash 2 ActionScript Cheikh DIEDHIOU Germain LEDRUT.
Algorithmes sur Open Office. 1. Ouvrir Visual Basic de Open Office.
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:

Gaëtan MARANZANA SI28-A04 Flash MX DEUXIEME EXPOSE

Gaëtan MARANZANA SI28-A042 ActionScript Pourquoi du code? ActionScript permet d’ajouter de l’interactivité aux animations. Il est possible d’utiliser Flash sans ActionScript, mais l’interactivité des animations sera très limitée.

Gaëtan MARANZANA SI28-A043 Réalisation d’un exemple

Gaëtan MARANZANA SI28-A044 Ou Placer le code ? Dans les Frames du scénario. –Il est conseillé d’utiliser un calque ‘actions’ dans lequel seront placées toute les actions du scénario. Dans un clip ou dans un bouton –Grâce à un gestionnaire d’événement.

Gaëtan MARANZANA SI28-A045 Écriture du code Panneau Actions Attention à respecter la syntaxe et à ne pas utiliser les mots réservés Exemple : var play=0; // l’initialisation de cette variable est incorrecte : le mot « play » est réservé par flash. Boite à outils ActionsNavigateur de scriptFenêtre de script

Gaëtan MARANZANA SI28-A046 Éléments de syntaxe --(décrémentation) ++ (incrémentation) != (inégalité) && (AND logique) || (OR logique) * (multiplication) / (division) : (type) // (délimiteur de commentaires) /*(délimiteur de commentaires) {} (initialisateur d'objet) < (inférieur à) <= (inférieur ou égal à) = (affectation) == (égalité) Exemple : If((a==0 || b!=1)&& c<=4){ /*Script à exécuter si les conditions sont validées*/ a=1; b++; d=this._parent._parent._x; gotoAndPlay(nextFrame); } else …

Gaëtan MARANZANA SI28-A047 Les Variables Une variable permet de stocker des informations de différents types : –Expressions math = 2 + 2;  math = 4; Flash créé une variable appelée 'math' et lui assigne la valeur 4. –Chaînes math = "2 + 2"; Flash créé une variable appelée 'math' et lui assigne la chaîne de caractères '2+2‘. –Variables Booléennes testA = true; testB = false;

Gaëtan MARANZANA SI28-A048 Variables : suite Il existe deux types de variables, les variables globales qui sont accessibles à tous les niveaux et les variables locales qui ne sont accessibles directement que dans le même niveau. Variables globale : _global.mavariable1= 28; Variables locales : var mavariable2=30; Récupérer une variable locale : insérer le chemin relatif devant la variable à récupérer : mavariable3=this._parent.mavariable2;

Gaëtan MARANZANA SI28-A049 Création des yeux Il s’agit de faire subir un mouvement de rotation à la pupille. –Utilisation d’un gestionnaire d’événement –Position du pointeur –Fonctions Mathématiques Création d’un clip ‘œil’ contenant : –Un clip ‘paupière’ –Un clip ‘pupille’ –Un élément graphique ‘blanc’ Télécharger le fichier de travail

Gaëtan MARANZANA SI28-A0410 Utilisation de gestionnaires d'événement de bouton et de clip Vous pouvez associer des gestionnaires d'événement directement à une occurrence de bouton ou de clip au moyen des gestionnaires onClipEvent() et on(). –onClipEvent() traite les événements de clips –on () traite les événements de boutons

Gaëtan MARANZANA SI28-A0411 onClipEvent() Différentes options : –onClipEvent (Load){ //actions qui seront réalisées au chargement du clip //Par exemple : Initiation des variables } –onClipEvent (enterFrame){ //actions qui seront réalisées à chaque image du clip }

Gaëtan MARANZANA SI28-A0412 on () Différentes options : –on (press){ //actions qui seront réalisées si le bouton est appuyé } –on (release){ // actions qui seront réalisées si le bouton est relâché } –on (rollOver){ // actions qui seront réalisées si le pointeur passe au dessus du bouton }

Gaëtan MARANZANA SI28-A0413 Fonctions Mathématiques Math.abs()Calcule une valeur absolue. Math.asin() Calcule le sinus d'un arc. Math.acos() Math.atan() Math.cosCalcule un cosinus. Math.sin() Math.tan() Math.ceil()Arrondit un nombre à l'entier supérieur le plus proche. Math.floorArrondit un nombre à l'entier inférieur le plus proche. Math.round()Arrondit à l'entier le plus proche Math.log()Calcule un logarithme naturel. Math.expCalcule une valeur exponentielle. Math.sqrt()Calcule une racine carrée. Math.max()Renvoie le plus grand des deux entiers. Math.min() Math.pow()Calcule de puissance. Math.random()Renvoie un nombre pseudo-aléatoire entre 0,0 et 1,0.

Gaëtan MARANZANA SI28-A0414 Script à ajouter à la pupille onClipEvent(enterFrame){ Xpos = this._parent._xmouse; Ypos = this._parent._ymouse; cercleXpos = this._x; cercleYpos = this._y; x = Xpos-cercleXpos; y = Ypos-cercleYpos; r = Math.sqrt((x*x)+(y*y)); sinTheta = y/r; theta = Math.asin(sinTheta); Rotation = this._rotation; if (Xpos<cercleXpos) { this._rotation = 180-(theta/0.0175); } else if (Xpos>cercleXpos) { this._rotation = theta/0.0175; }

Gaëtan MARANZANA SI28-A0415 La paupière Le mouvement de la paupière est réalisé par une animation image par image if (_global.battement == 1) { gotoAndPlay(nextFrame); } else { gotoAndPlay(1); }

Gaëtan MARANZANA SI28-A0416 Le donut La programmation de ce clip est situé sur un script externe Drag and Drop Modification interactive des propriétés d’un clip Déplacement de clip à l’aide du clavier Détection des collisions

Gaëtan MARANZANA SI28-A0417 Programmation externe Le fichier externe contenant le code ActionScript a une extension ".as" Insertion du script : #include "chemin/monfichier.as" Chemin : le chemin doit être écrit par rapport à l'endroit où se trouve le ".fla"

Gaëtan MARANZANA SI28-A0418 Drag and Drop La fonction permet le glisser déposer d’un clip à l’aide de la souris: startDrag(cible,[verrouiller,gauche, haut, droite, bas]) Code du fichier ‘.as’ on(press){ startDrag(this,true); } on(release){ stopDrag(); }

Gaëtan MARANZANA SI28-A0419 Différents types de texte Texte statique : Écrit à la programmation Texte dynamique : Affiche le contenu d’une variable Texte de saisie : Affiche le contenu d’une variable et modification

Gaëtan MARANZANA SI28-A0420 getProperty() renvoie la valeur de la propriété spécifiée pour le clip cible. –getProperty ( cible, _x );La position X (en pixels) du clip cible –getProperty ( cible, _y );La position Y (en pixels) du clip cible –getProperty ( cible, _width );La largeur (en pixels) du clip cible –getProperty ( cible, _height );La hauteur (en pixels) du clip cible –getProperty ( cible, _rotation ); L'angle de rotation (en degrés) du clip cible –getProperty ( cible, _target);Le chemin complet (à partir de _root) vers le clip cible –getProperty ( cible,_xscale );La mise à l'échelle de X par rapport à la taille originale du clip, (%) du clip cible. –getProperty ( cible, _yscale );Idem ci-dessus –getProperty ( cible,_alpha );le niveau alpha (en %) du clip cible. –getProperty ( cible, _currentframe );L'image où se trouve actuellement la tête de lecture du clip cible.

Gaëtan MARANZANA SI28-A0421 Déplacement d’un clip à l’aide du clavier La classe Key La classe Key est une classe de premier niveau dont les méthodes et les propriétés sont utilisables sans instructeur. Exemples : if( Key.isDown(Key.LEFT) ){ //script; } //Si la touche gauche est appuyée la condition est validée

Gaëtan MARANZANA SI28-A0422 Détection des collisions Fonction HitTest(). La méthode hitTest() de la classe MovieClip détecte les collisions. Elle vérifie si un objet est entré en collision avec un clip et renvoie une valeur booléenne ( true ou false ) if(this._parent.donut.hitTest(this._parent.oeil)){ gotoAndPlay(2); }

Gaëtan MARANZANA SI28-A0423 Programmation du Donut Code : onClipEvent(load){ //Taille du donut au démarrage echelle=50;} onClipEvent(enterFrame){ if(this._parent.donut.hitTest(this._parent.oeil)){gotoAndPlay(2);} //taille donut this._parent.donut._xscale=echelle; this._parent.donut._yscale=echelle; //fréquence battement paupière _global.battement=random(30); //déplacement clavier if(Key.isDown(Key.LEFT)){this._parent.donut._x=this._parent.donut._x-10;} if(Key.isDown(Key.RIGHT)){this._parent.donut._x=this._parent.donut._x+10;} if(Key.isDown(Key.UP)){this._parent.donut._y=this._parent.donut._y-10;} if(Key.isDown(Key.DOWN)){this._parent.donut._y=this._parent.donut._y+10;} }

Gaëtan MARANZANA SI28-A0424 Contrôle de sons Ajout de musique Contrôle à l’aide de boutons –Lecture et Arrêt –Pause et Reprise

Gaëtan MARANZANA SI28-A0425 La classe Sound La classe Sound permet de contrôler le son dans une animation. Vous pouvez ajouter des sons à un clip à partir de la bibliothèque pendant la lecture de l'animation et contrôler ces sons. Si vous ne spécifiez pas de cible (cible) lorsque vous créez un nouvel objet Sound, vous pouvez utiliser les méthodes pour contrôler le son de toute l'animation. Vous devez utiliser le constructeur new Sound pour créer un objet Sound avant d'appeler les méthodes de la classe Sound.

Gaëtan MARANZANA SI28-A0426 La classe Sound : Les méthodes monSon.start([décalageSecondes, boucle]) monSon.stop(["nomIdentifiant"]) stopAllSounds(); monSon.attachSound("nomIdentifiant ") nomIdentifiant L'identifiant d'un son exporté dans la bibliothèque. L'identifiant est situé dans la boîte de dialogue Propriétés de liaison.(Clic droit sur le son dans la bibliothèque) monSon.position renvoie le nombre de millisecondes écoulées depuis le début de la lecture d'un son. Si le son est lu en boucle, la position est remise à 0 au début de chaque boucle.

Gaëtan MARANZANA SI28-A0427 Programmation des boutons Code Bouton Play/Stop on (release) { if(a!=1){ a=1; this.Playstop="Stop";} else {if(a==1){ a=0; this.Playstop="Play";} } if(a==1){ mySound = new Sound(); mySound.attachSound("son1.mp3"); mySound.setVolume(100); mySound.start(0,1000); } if(a==0){stopAllSounds();} } Code Bouton Pause on (release) { if(a!=1){a=1;} else {if(a==1){a=0;} } if(a==1){ mySound = new Sound(); mySound.attachSound("son1.mp3"); mySound.setVolume(100); mySound.start(possound,1000); } if(a==0){ possound=mySound.position/1000; trace(possound); stopAllSounds();} }

Gaëtan MARANZANA SI28-A0428 Modification de la couleur Le bouton Play est le même que le bouton Stop. Cependant la couleur de celui-ci est différente lorsqu’il démarre ou arrête le son. On utilise la Classe Color La classe Color permet de définir la valeur de la couleur RVB et de récupérer les valeurs une fois qu'elles ont été définies. La méthode setTransform() définit les informations de transformation de couleur pour un objet Color.

Gaëtan MARANZANA SI28-A0429 Changement de la couleur d’un bouton Code : changementCouleur = new Color(this.colorcircle); TransformationDeCouleur = { ra: '0', rb: '0', ga: '100', gb: '255', ba: '0',bb: '0', aa: '0', ab: '255'}; changementCouleur.setTransform(TransformationDeCouleur);

Gaëtan MARANZANA SI28-A0430 Modification de la couleur Les paramètres pour un objet de transformation de couleur correspondent aux paramètres définis dans la boîte de dialogue Effet avancé et sont définis comme suit : –ra est le pourcentage de la composante rouge (-100 à 100). –rb est le décalage de la composante rouge (-255 à 255). –ga est le pourcentage de la composante verte (-100 à 100). –gb est le décalage de la composante verte (-255 à 255). –ba est le pourcentage de la composante bleue (-100 à 100). –bb est le décalage de la composante bleue (-255 à 255). –aa est le pourcentage pour alpha (-100 à 100). –ab est le décalage pour alpha (-255 à 255).

Gaëtan MARANZANA SI28-A0431 Telechargement Télécharger le résultat final