1 Introduction A Flash

Universit de Technologie de Belfort Montbliard
par S. Lamrous
S. Lamrous
poste 3253 E-Mail : sid.lamrous@utbm.fr Laboratoire SeT Dpartement Gnie Informatique
par S. Lamrous
Calendrier IN42
Le 11/03/2009
par S. Lamrous
Systme dvaluation
40% Partiel 40% Projet
en binme ou monme sujets affichs le 25 Mars
20% Interrogation
Le 11/03/2009
par S. Lamrous
In42 : Introduction au Multimdia (1)

Hors ligne (70%) Les principes fondamentaux seront vus ici Les produits Multimdias peuvent facilement tre mis en ligne En ligne (30%)
Le 11/03/2009
par S. Lamrous

Gestion lectronique de documents
Modles de SRI Moteur de recherche : type google
Compression (avec et sans perte)
5
Quels mdias ? Texte Image Son Vido
Sous quels points de vue ?
Codage des couleurs et formats Numrisation et formats Numrisation et formats
Le 11/03/2009
par S. Lamrous

Ingnierie pdagogique pour la conception dun produit Multimdia IHM base sur des critres qualitatifs Critres logiciels de qualit :
Modularit (sparation des connaissances de la machinerie informatique) Evolutivit (de la connaissance) Flexibilit
Critres pdagogiques de qualit

Adaptabilit ( calibrage des connaissances selon lutilisateur) Suivi dapprentissage (historique du dialogue)
6
Le 11/03/2009
par S. Lamrous

Quels Outils ? Outils macromdia
Flash Director
Langages
ActionScript Lingo
Le 11/03/2009
par S. Lamrous
Pourquoi Flash
Ddi pour le Web (Couleur et mouvement) Images vectorielles (description mathmatique par une
srie de ligne et darcs : agrandissement sans perte possible)
Streaming (tlchargement en flux continu : affichage

ds larrive des premires informations) Intrt : animation interactive et son
Elments de navigation Diffrents formats dexportation

8
Le 11/03/2009
par S. Lamrous
ActionScript
Langage de programmation intgr dans Flash Inspir du langage JavaScript Permet de raliser des animations plus sophistiques Animation ragissant des vnements Permet de contrler ce que voit lutilisateur, de faon monter celui-ci des prsentations non linaires, des applications interactives ou des jeux
9
Le 11/03/2009
par S. Lamrous
Emplacements des scripts

Scripts dimages : peuvent contenir deux types dlments de scriptage
1- liste dinstructions excuter ds que la tte de lecture atteint limage-cl laquelle est attach le script, 2- fonction ; morceau de code rutilisable par des instructions implmentes dans le script, ainsi que par dautres scripts de lanimation
Scripts de boutons
Crer le bouton autant qulment de la bibliothque Indiquer les gestionnaires dvnements : comment ragir aux diffrents vnements de boutons (enfoncement de bouton, survol par le pointeur de la souris)
Scripts de clips
Idem que les scripts boutons avec des vnements diffrents
10
Le 11/03/2009
par S. Lamrous
Utilisation de lassistant de script

Ou utiliser ce bouton
Mode assistant: la fentre Actions permet de slectionner et de personnaliser les instructions
Mode expert : la fentre Actions permet de saisir directement du code dans le listing du programme
Le 11/03/2009
11
par S. Lamrous
Premier programme ActionScript

Premire fonction connatre : la fonction trace() Permet dobtenir laffichage dinformations dans la fentre Sortie (petite fentre de texte qui apparat lors du test des animations) =>elle semploie pour afficher des messages de dboguage lors de lcriture des scripts Chaque instruction Flash doit obligatoirement se terminer par un point virgule
12
Le 11/03/2009
par S. Lamrous
Contrle de la lecture
gotoAndPlay () gotoAndStop() stop()
Exemple : un calque est scind en quatre parties (part1, part2, part3, part4) Sur un bouton on a le script On (press) { gotoAndStop( part1 ); } La fonction gotoAndStop() est apparent la fonction gotoAndPlay(). Elle sen diffrencie par le fait quelle provoque le saut, puis larrt de la tte de lecture sur une nouvelle image, tandis que la fonction gotoAndPlay() provoque le saut sur une nouvelle image, immdiatement suivi de la lecture de limage suivante.
Le 11/03/2009
13
par S. Lamrous
Gestionnaire dvnement
Un gestionnaire dvnement doit commencer par le mot-cl onClipEvent dans le cas o lvnement est attach un clip, suivi du nom de lvnement. Un gestionnaire dvnement doit commencer par le mot-cl on dans le cas o lvnement est attach un bouton, suivi du nom de lvnement.
14
Le 11/03/2009
par S. Lamrous
Script attach au clip

Prenons un exemple o lvnement auquel doit ragir le clip est enterFrame. Cet vnement se produit automatiquement plusieurs fois par seconde. Ainsi, si la cadence dune animation est ajuste sur 12ips, lvnement enterFrame est envoy au gestionnaire 12 fois par seconde onClipEvent (enterframe) { this._x--; }
15
Le 11/03/2009
par S. Lamrous
Analyse de linstruction this._x- Le terme this signifie que le code du clip fait rfrence au clip auquel il est attach Le point aprs lidentifiant dun objet annonce et prcde laccs une proprit de lobjet. Dans ce cas, la proprit est _x qui dcrit la position horizontale du clip this._x fait rfrence la position du clip. -- est un
oprateur de dcrmentation (soustrait 1 la position du clip=>dplacement du clip vers la gauche
this._x++, dplacement vers la droite This._x-=5, dplacement vers la gauche mais avec 5 pixels la fois
Le 11/03/2009
16
par S. Lamrous
Contrle des clips par lutilisateur

Reprenons lexemple prcdent, mais le dplacement du clip se fait suivant la position du curseur de la souris This._xmouse renverrait la position horizontale du clip par rapport clip =>ce nest pas ce quil faut. Il faut la position de la souris par rapport la scne. Il faut utiliser lobjet _root et non this _root._xmouse dcrit la position horizontale de la souris par rapport la scne
17
Le 11/03/2009
par S. Lamrous
exemple
onClipEvent (enterFrame) { this._x = _root._xmouse; this._y = _root._ymouse; } =>rsultat
18
Le 11/03/2009
par S. Lamrous
Utilisation de variables
Pour crer une variable dans flash il suffit de lutiliser une premire fois. Exemple : Mavariable = 5; Mavariable +=2; La ligne suivante ajoute 2 la variable ma variable qui contient alors le nombre 7
19
Le 11/03/2009
par S. Lamrous
Manipulation de chanes de caractres
Tester si une chane est contenue, ou non, au sein dune autre :

La fonction indexOf() renvoie la position dune chane au sein dune autre. Si la chane recherche nest pas trouve, la fonction renvoie la valeur -1 Exemple : mystring = "hello world." ; myPosition = myString.indexOf("world") ; Le premier caractre occupe la valeur 0 La position de "world." est donc de 6
La fonction length() renvoie le nombre de caractres contenus dans une chane.

Exemple : myStringLength = myString.length=length(myString) Le contenu de myStringLength = 11
20
Le 11/03/2009
par S. Lamrous
Manipulation de chanes de caractres (suite)

Extraction dune chane au sein dune autre
La fonction substring() extrait la portion dune chane comprise entre deux positions de caractres spcifies.
Exemple :
mySubstring = myString.substring(3,7) ;
Extraire la chane de la position [3 la position 7[ Rsultat : mysubtring = "lo w
Attention substring(myString,3,7) donne autre chose

Rsultat : mysubtring = "llo wor
La fonction substring = la fonction slice Attention : ne pas confondre slice et splice
Accs au caractre dune position spcifie

myString.charAt(3) renvoie l
21
Le 11/03/2009
par S. Lamrous
Les tableaux (1)

Pour dfinir un tableau :
1 : tableaucouleur =["rouge", "vert"]; Ou 2 : tableaucouleur= new array (); tableaucouleur.push(rouge); tableaucouleur.push(vert); Pour dfinir la longueur dun tableau
Longueur=tableaucouleur.length;
Pour accder un lment dun tableau

Exple : tableaucouleur[1]; renvoie la valeur vert "
22
Le 11/03/2009
par S. Lamrous
Tableaux (2)
La fonction pop() retire et supprime le dernier lment du tableau La fonction sort() trie le tableau par ordre croissant La fonction splice() permet de supprimer un ou plusieurs lments au sein dun tableau
Exples :
tabeau.splice (2,1) supprime 1 lment depuis la position 2 tableau.splice (2) supprime tous les lments du tableau de la position 2 Tableau.splice(2,1, "toto") supprime 1 lment depuis la position 2 et insre "toto cette place
23
Le 11/03/2009
par S. Lamrous
Crations de fonctions
Une fonction est un morceau de code qui peut tre rutilis autant de fois que voulu. Les fonctions sont gnralement dfinies dans les scripts dimages insrs dans le scnario. Exemple :
function somme (a,b) { c=a+b; return c; } Trace(somme(7,12)) renvoie la valeur 19
24
Le 11/03/2009
par S. Lamrous
Implmentation de calculs
++ ou += (idem pour -,/,*)
Exple a=7; b=5; c=a+b;
Utiliser le prfixe math pour les fonctions mathmatiques

Exple a=9 b = Math.sqrt(a) a=hello ; b= world; c=a+b; (rsultat contient helloworld)
25
Le 11/03/2009
par S. Lamrous
Structure de contrle
If condition excuter ce qui est entre accolades Sinon ce qui est entre autres accolades Exemple : If (a==7) { gotoAndPlay(special frame) } else { gotoAndPlay(another frame) }
Le 11/03/2009
26
par S. Lamrous
boucles
Le type de boucle le plus commun est la boucle for exple for (i=0;i<10;i++) { trace (i); } Boucle while : While condition excuter ce qui est entre accolades
27
Le 11/03/2009
par S. Lamrous
Excercice
Supposons que nous disposons de 10 clips, dnomms boule1boule10, et quil soit ncessaire de les dplacer toutes dun pixel vers la droite. Comment implmenter ce dplacement avec la boucle for ?
28
Le 11/03/2009
par S. Lamrous
rsultat
For (i=1;i<=10;i++){ _root [boule+i]._x++; }

29
Le 11/03/2009
par S. Lamrous
Code source de la bale en chute libre
//script du clip balle onClipEvent (load) { // initialisation des variables sommet=50; sol = 150; test = 1; this._y=50; } onClipEvent (enterFrame) { // la balle monte if (test==0) { // quand la balle arrive au sommet // elle doit descendre if (this._y == sommet) {test=1;} this._y = this._y -1; }
30
Le 11/03/2009
par S. Lamrous
// la balle descend if (test==1) { // quand la balle arrive au sol // elle doit monter // et le sommet doit diminuer // pour que le rebond soit plus petit if (this._y == sol) {test=0; sommet=int((sol+sommet)/2);} this._y= this._y +1; } // lorsque la balle est trs proche du sol, // elle finit par s'arrter if (sommet == 149) { this._y = 150; test=2; }
run
Le 11/03/2009
31
par S. Lamrous
Duplication de clips
Constitue une part importante du travail dlaboration :
Danimations De jeux
Cration de clips la vole par scriptage. Deux moyens de crer des clips la vole :
1) Dupliquer un clip existant. 2) Crer un clip partir dun symbole de la bibliothque.
La fonction duplicateMovieClip () cre une copie (carbone) dun clip existant

Taille 14 KO
Le 11/03/2009
Jeu 1 Jeu 2
32
par S. Lamrous
Duplication de clip partir dun clip existant

Exemple :
firstclip.duplicateMovieClip ("newclip", 0)
Nom du nouveau clip Clip dupliquer Niveau du nouveau clip
33
Le 11/03/2009
par S. Lamrous
Script du bouton de duplication

Initialiser level =0 sur un script image, ne pas le faire revient aussi une initialisation par dfaut 0
on (press) { // duplication du premier clip firstclip.duplicateMovieClip("newclip"+level,level); // dfinition dune position altoire _root["newclip"+level]._x = int(Math.random()*550); _root["newclip"+level]._y = int(Math.random()*400); // augmentation du niveau level++; }
Tester lexemple
Le 11/03/2009
34
par S. Lamrous
Duplication de clip partir dun clip de la bibliothque

La fonction attachMovie() offre un autre moyen de crer de nouveaux clips partir de symbole de la bibliothque. Attention : lorsquun clip nest pas utilis sur la scne. Flash lexclut automatiquement du fichier.swf final. Solution : Forcer flash inclure le clip. Slectionner le clip dans la bibliothque et choisir Liaison dans le menu droulant Options.
35
Le 11/03/2009
par S. Lamrous
La bote de dialogue Proprits de liaison
Cocher loption Exporter ce symbole Attribuer un identifiant (un nom) ce symbole, Qui sera utilis pour faire rfrence au symbole
Le 11/03/2009
36
par S. Lamrous
Script du bouton de duplication ( partir dun clip de la bibliothque)

on (press) { // duplication du premier clip attachMovie("myMovieClip","newclip"+level,level); // dfinition dune position alatoire _root["newclip"+level]._x = int(Math.random()*550); _root["newclip"+level]._y = int(Math.random()*400); // augmentation du niveau level++; }
Tester lexemple
Le 11/03/2009
37
par S. Lamrous
Suppression des clips placs

La fonction removemovieClip() permet de supprimer des clips placs sur la scne.
on (press) { // suppression du clip prcdent _root["newclip"+(level-1)].removeMovieClip(); Tester lexemple // duplication du premier clip attachMovie("myMovieClip","newclip"+level,level); // ajustement dune position alatoire _root["newclip"+level]._x = int(Math.random()*550); _root["newclip"+level]._y = int(Math.random()*400); // augmentation du niveau level++; }
Le 11/03/2009
38
par S. Lamrous
Cration dun clip actions

On sait comment contrler un clip en lui attachant un script ActionScript. Mais :
Comment procder lorsque plusieurs clips requirent un contrle simultan ? ->Aprs avoir plac les diffrentes occurrences du clip sur la scne, on peut copier et coller le code dun clip lautre. Inconvnients : - Copier-coller plusieurs fois peut tre fastidieux. - Si ncessit de modification, rpter la modification sur toutes les occurrences du clip.
Solution : crer un clip exclusivement ddi au contrle des autres (clip dactions) Crer ce clip sous forme de zone texte avec le nom actions (pour faciliter lidentification), le placer lextrieur de la scne pour quil ne soit pas visible par lutilisateur.
39
Le 11/03/2009
par S. Lamrous
onClipEvent (load) {
Tester le script du clip actions

Modifier pour obtenir ceci
// cration de 10 clips for(i=0;i<10;i++) { _root.attachMovie("sample","sample"+i,i); // ajustement de la position _root["sample"+i]._x = i*50+50; _root["sample"+i]._y = 100; } } onClipEvent (enterFrame) { // rotation successive de chaque clip for(i=0;i<10;i++) { _root["sample"+i]._rotation += 5; } }
Le 11/03/2009
40
par S. Lamrous
onClipEvent (load) { initialRotation = 0; // creation de 10 clips for(i=0;i<10;i++) {
onClipEvent (enterFrame) { // traitement de chaque autre clip for(i=0;i<10;i+=2) {
// rotation dans le sens des aiguilles // mise en uvre de la fct attachmovie //dune montre _root["sample"+i]._rotation += 5; _root.attachMovie("sample","sample"+i,i); // ajustement de la position _root["sample"+i]._x = i*37; _root["sample"+i]._y = 100; // chaque nouveau clip est dcal de 15 //degrs par rapport au clip prcdent. _root["sample"+i]._rotation = initialRotation; initialRotation += 15; } } // rotation dans le sens inverse des //aiguilles dune montre _root["sample"+(i+1)]._rotation -= 5; } }
41
Le 11/03/2009
par S. Lamrous
Dtection de collisions
La fonction hitTest() fournit le meilleur moyen de dterminer : Si deux objets entrent en collision Si un objet recouvre une certaine partie de lcran Cette fonction prend comme paramtre Soit lemplacement dun point Soit celui dun autre clip
Le 11/03/2009
42
par S. Lamrous
Collision avec un point

Soit un point de la scne (x,y) = (108,215) Pour voir si un clip entre collision avec ce point, on applique ce clip la syntaxe :
This.hitTest (108,215,true)
Les trois paramtres spcifis sont : -Position horizontale du point -Position vertical du point -La valeur true, (pour dire : utiliser la forme exacte de lobjet, sinon false pour dire utiliser le cadre de dlimitation du clip)
Le 11/03/2009
43
par S. Lamrous
Exemple
Soit un clip boule , lorsque le pointeur de la souris vient survoler le clip sur la scne, le clip fait un bond au hasard vers un autre endroit de la scne. Ecrire le script appliqu au clip boule
Tester le rsultat
44
Le 11/03/2009
par S. Lamrous
Rsultat
onClipEvent (enterFrame) { if (this.hitTest(_root._xmouse,_root._ymouse,true)) { this._x = random(550); this._y = random(400); } }
45
Le 11/03/2009
par S. Lamrous
Collision entre deux clips

On peut dterminer si deux clips entrent en collision en fournissant la fonction hitTest() comme seul paramtre un pointeur sur un second clip. Par exemple :
_root[grandeboule ].hitTest(_root[petiteboule ])
Exercice : tester ce lien, comment raliser ce type de jeu ? Le clip grandeboule grossit de 5 % sous leffet de la collision du clip petiteboule . Le clip petiteboule est initialis x=350
46
Le 11/03/2009
par S. Lamrous
onClipEvent (enterFrame) { // la bale touche-t-elle la cible ? if (_root["target"].hitTest(_root["bullet"])) {
Rsultat
// collision, donc la balle grossit _root["target"]._xscale += 5; _root["target"]._yscale += 5; // rinitialisation de la balle _root["bullet"]._x = 350; } else { // pas de collision, la balle continue se dplacer _root["bullet"]._x -= 5; } }
Le 11/03/2009
47
par S. Lamrous
Deux mthodes :
Accepter des entres au clavier
1- Utilisation de boutons 2 -Usage du code onClipEvent(enterFrame) {

on (keyPress "<Right>") { circle._x++; } on (keyPress "<Left>") { circle._x--; } on (keyPress "<Up>") { circle._y--; } on (keyPress "<Down>") { circle._y++; } Tester if (Key.isDown(Key.RIGHT)) { _root.circle._x++; } if (Key.isDown(Key.LEFT)) { _root.circle._x--; } if (Key.isDown(Key.UP)) { _root.circle._y--; } if (Key.isDown(Key.DOWN)) { _root.circle._y++; } }
48
Tester
Le 11/03/2009

1 Introduction A Flash

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

1 Introduction A Flash

Hochgeladen von

Copyright:

Verfügbare Formate

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

In42 : Introduction au Multimdia (1)

Universit de Technologie de Belfort Montbliard

In42 : Introduction au Multimdia (2)

Quels mdias ? Texte Image Son Vido

Sous quels points de vue ?

Codage des couleurs et formats Numrisation et formats Numrisation et formats

Universit de Technologie de Belfort Montbliard

In42 : Introduction au Multimdia (3)

Critres pdagogiques de qualit

Universit de Technologie de Belfort Montbliard

In42 : Introduction au Multimdia (4)

Universit de Technologie de Belfort Montbliard

Streaming (tlchargement en flux continu : affichage

Elments de navigation Diffrents formats dexportation

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Emplacements des scripts

Universit de Technologie de Belfort Montbliard

Utilisation de lassistant de script

Mode assistant: la fentre Actions permet de slectionner et de personnaliser les instructions

Universit de Technologie de Belfort Montbliard

Premier programme ActionScript

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Script attach au clip

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Contrle des clips par lutilisateur

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Manipulation de chanes de caractres

Tester si une chane est contenue, ou non, au sein dune autre :

La fonction length() renvoie le nombre de caractres contenus dans une chane.

Universit de Technologie de Belfort Montbliard

Manipulation de chanes de caractres (suite)

Attention substring(myString,3,7) donne autre chose

La fonction substring = la fonction slice Attention : ne pas confondre slice et splice

Accs au caractre dune position spcifie

Universit de Technologie de Belfort Montbliard

Les tableaux (1)

Pour accder un lment dun tableau

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Utiliser le prfixe math pour les fonctions mathmatiques

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

For (i=1;i<=10;i++){ _root [boule+i]._x++; }

Universit de Technologie de Belfort Montbliard

Code source de la bale en chute libre

Universit de Technologie de Belfort Montbliard

Universit de Technologie de Belfort Montbliard

La fonction duplicateMovieClip () cre une copie (carbone) dun clip existant

Universit de Technologie de Belfort Montbliard

Duplication de clip partir dun clip existant