Flash 5

Transcription

Flash 5

Travaux Dirigés
ActionScript
Flash 5 + MX + MX 2004
Eric Schrafstetter
CUFCo – Université d’Angers
Version 2.1
http://ead.univ-angers.fr/~schraf/tdas
Table des matières
1
OUTILS DE BASE
________________________________________________ 8
1.1
INTRODUCTION A CE DOCUMENT ________________________________________ 8
1.2
INITIALISATION DE VARIABLES __________________________________________ 8
1.3
POSITION DE LA SOURIS _______________________________________________ 8
1.4
FENETRES ET NAVIGATEURS ____________________________________________ 9
1.4.1
Fermer une fenêtre ______________________________________________ 9
1.4.2
Plein écran ____________________________________________________ 9
1.5
LECTEUR AUTONOME _________________________________________________ 9
1.6
CHARGEMENT _____________________________________________________ 10
1.6.1
Version élémentaire_____________________________________________ 10
1.6.2
Version avec % ________________________________________________ 10
1.6.3
Barre de chargement____________________________________________ 11
1.6.4
Chargement d’une bibliothèque ___________________________________ 11
1.6.5
Version 2 _____________________________________________________ 12
1.7
COULEURS ________________________________________________________ 13
1.7.1
Définir _______________________________________________________ 13
1.7.2
Aléatoires ____________________________________________________ 13
1.7.3
Remplissages transparents _______________________________________ 13
1.7.4
Effet de torche _________________________________________________ 13
1.7.5
Jeux de couleurs _______________________________________________ 14
1.8
JOUER UN FICHIER MIDI _____________________________________________ 15
1.9
COOKIES__________________________________________________________ 16
1.10 BOUTONS _________________________________________________________ 18
1.10.1
Bouton On/Off/Clignotant ________________________________________ 18
1.10.2
Bouton transparent _____________________________________________ 19
1.10.3
Déplacement d’objets ___________________________________________ 19
1.11 INFORMATION _____________________________________________________ 20
1.11.1
Scroll sur texte_________________________________________________ 20
2
LA VIDEO
____________________________________________________ 22
2.1
VIDEO DANS UNE FENETRE SEPAREE_____________________________________ 22
2.1.1
Paramètres généraux pour les vidéos _______________________________ 22
2.1.2
Windows Media Player __________________________________________ 23
2.1.3
QuickTime ____________________________________________________ 23
2.1.4
Real Video ____________________________________________________ 23
2.2
QUICKTIME DANS FLASH _____________________________________________ 23
2.3
LE CAS DES FICHIERS AVI ____________________________________________ 24
2.4
MPG ET AUTRES EFFETS SPECIAUX _____________________________________ 24
2.5
CREER UN CD VIDEO ________________________________________________ 25
2.5.1
Outils nécessaires ______________________________________________ 25
2.5.2
Survol des étapes_______________________________________________ 26
2.5.3
Les étapes ____________________________________________________ 26
Eric Schrafstetter
2.5.4
L’animation Flash ______________________________________________ 26
2.5.5
AVI2VCD_____________________________________________________ 27
2.5.6
VCDEasy 1.0.8 ________________________________________________ 27
2.5.7
Chapitrage____________________________________________________ 28
2.5.8
Outils ________________________________________________________ 29
2.6
POSER 3 OU 4 ______________________________________________________ 29
2.7
REAL PLAYER _____________________________________________________ 30
2.7.1
.smil _________________________________________________________ 30
2.7.2
RealEncoder/RealProducer G2____________________________________ 30
2.7.3
Un exemple ___________________________________________________ 31
2.7.4
Créer un vrai .rm_______________________________________________ 31
2.8
STREAMING _______________________________________________________ 32
2.8.1
Avec Real Player _______________________________________________ 32
2.8.2
Le streaming sous Flash _________________________________________ 33
2.9
QUESTIONS/REPONSES _______________________________________________ 33
2.9.1
Son QuickTime ________________________________________________ 33
2.9.2
Convertir un .swf en .avi _________________________________________ 34
2.9.3
Une suite ?____________________________________________________ 34
3
MATHS
________________________________________________________ 35
3.1
NOMBRES ALEATOIRES _______________________________________________ 35
3.1.1
Mélanges _____________________________________________________ 35
3.2
3D ______________________________________________________________ 35
3.2.1
Matrices de rotation ____________________________________________ 35
3.2.2
Boules dans l’espace ____________________________________________ 36
3.3
DEFORMATION D’UN TRIANGLE (PARTIE 1) _______________________________ 38
3.4
ANAGLYPHES GEOMETRIQUES 3D ______________________________________ 42
3.5
PERSPECTIVES FRONTALES ET OBLIQUES _________________________________ 45
3.5.1
Méthode pratique ______________________________________________ 45
3.5.2
Les formules... _________________________________________________ 46
3.5.3
Manipulation d’un cube _________________________________________ 49
3.6
POSER ET AMAPI ___________________________________________________ 51
3.6.1
Introduction___________________________________________________ 51
3.6.2
Amapi v4.1.5 (Freeware) ________________________________________ 51
3.6.3
Flash et Poser _________________________________________________ 53
3.7
FONCTIONS ELEMENTAIRES DE FLASH 4__________________________________ 57
3.7.1
Flash 4_______________________________________________________ 57
3.7.2
Quelques pistes ________________________________________________ 62
3.8
UNE CALCULATRICE SCIENTIFIQUE______________________________________ 63
3.8.1
Le problème___________________________________________________ 63
3.8.2
Utilisation de la fonction_________________________________________ 64
3.8.3
Application ___________________________________________________ 65
4
DESSINS A LA VOLEE SOUS FLASH MX _______________________________ 65
4.1
DES CERCLES PARFAITS ______________________________________________ 66
4.1.1
Construction 1 _________________________________________________ 66
4.1.2
Construction 2 _________________________________________________ 67
4.2
COURBES DE BEZIER ________________________________________________ 69
4.2.1
Questions_____________________________________________________ 69
3
TD ActionScript
4.2.2
Réponses _____________________________________________________ 69
4.3
LES ELLIPSES ______________________________________________________ 70
4.3.1
En utilisant un cercle____________________________________________ 70
4.3.2
Approximation quadratique des fonctions sin et cos ___________________ 71
4.3.3
Arcs d’une ellipse ______________________________________________ 71
4.4
LES PHASES DE LA LUNE ______________________________________________ 74
4.4.1
Quelques rappels_______________________________________________ 74
4.4.2
Application à Flash _____________________________________________ 75
4.4.3
Références ____________________________________________________ 77
5
PHYSIQUE __________________________________________________________ 78
5.1
COLLISION ELASTIQUE DE 2 BOULES ____________________________________ 78
5.1.1
Rappels ______________________________________________________ 78
5.1.2
La théorie ____________________________________________________ 78
5.1.3
Application ___________________________________________________ 80
5.2
VITESSE D’UN OBJET AVEC FREINAGE ___________________________________ 83
5.3
FIL ELASTIQUE _____________________________________________________ 85
5.4
TABLEAU BLANC ___________________________________________________ 85
6
VISUALISATION_____________________________________________________ 87
6.1
POWERPOINT ______________________________________________________ 87
6.2
SONS, COOKIES ET DIAPORAMAS _______________________________________ 87
6.2.1
Partie HTML – javascript ________________________________________ 87
6.2.2
Partie Images _________________________________________________ 89
6.2.3
Partie Flash___________________________________________________ 90
6.3
FSCOMMAND ______________________________________________________ 91
6.3.1
Les sons ______________________________________________________ 91
6.3.2
Partie JavaScript_______________________________________________ 92
6.3.3
Partie HTML __________________________________________________ 92
6.3.4
Quelques FSCommand __________________________________________ 93
6.3.5
EMBED et OBJECT ____________________________________________ 94
6.3.6
Un script complet et gratuit ______________________________________ 94
6.4
VISIONNEUSE ______________________________________________________ 94
6.5
CREER UN QCM____________________________________________________ 97
6.5.1
Les questions __________________________________________________ 97
6.5.2
Le QCM sous Flash_____________________________________________ 97
6.6
CAMEMBERT _____________________________________________________ 100
6.7
PANORAMA 360° __________________________________________________ 103
6.8
ROTATION AUTOUR D’UN OBJET _______________________________________ 104
6.9
EFFET SUR UNE IMAGE ______________________________________________ 105
6.10 FLASH TRANSPARENT _______________________________________________ 106
6.10.1
Le fichier .js joint _____________________________________________ 106
6.10.2
Commentaires sur le script ______________________________________ 107
6.10.3
Aller plus loin ________________________________________________ 107
6.11 FEUX D’ARTIFICE __________________________________________________ 108
6.11.1
Version simplifiée _____________________________________________ 108
6.11.2
Autres idées __________________________________________________ 110
6.12 EFFETS DE TEXTE __________________________________________________ 110
6.12.1
Introduction__________________________________________________ 110
6.12.2
Effet DNA (5Ko) ______________________________________________ 111
4
Eric Schrafstetter
6.12.3
6.12.4
6.12.5
6.12.6
6.12.7
7
Double Zoom (5Ko)____________________________________________ 113
Ouverture (5Ko) ______________________________________________ 114
Twist _______________________________________________________ 115
Flou ________________________________________________________ 115
Accélération _________________________________________________ 116
OUTILS DE CONVERSIONS__________________________________________ 118
7.1
BITMAP VERS VECTORIEL ___________________________________________ 118
7.2
DIAPORAMA EN SWF ________________________________________________ 119
7.2.1
Introduction__________________________________________________ 119
7.2.2
Quelques remarques ___________________________________________ 119
7.2.3
Les indispensables ! ___________________________________________ 120
7.2.4
Exemple d’utilisation___________________________________________ 120
7.3
FILMS VERS SWF ___________________________________________________ 120
7.4
MICROSOFT OFFICE ________________________________________________ 121
7.4.1
La barre de dessin _____________________________________________ 121
7.4.2
Powerpoint vers Flash _________________________________________ 121
7.4.3
Flash vers PowerPoint _________________________________________ 123
7.4.4
Powerpoint-Flash ou PDF ? _____________________________________ 123
8
SMARTCLIPS (FLASH 5)_____________________________________________ 126
8.1
VARIATEUR ______________________________________________________ 126
8.2
FENETRES VOLANTES _______________________________________________ 127
8.3
BIBLIOTHEQUE COMMUNE ___________________________________________ 129
8.3.1
Création de boutons radio_______________________________________ 129
8.4
SMARTCLIP CALENDRIER ____________________________________________ 129
9
JEUX ______________________________________________________________ 132
9.1
LE MORPION ______________________________________________________ 132
9.1.1
Règles du jeu _________________________________________________ 132
9.1.2
Les manipulations _____________________________________________ 132
9.1.3
Création du jeu _______________________________________________ 132
9.2
JEU DE L’HEXAGONE _______________________________________________ 135
9.2.1
Les problèmes ________________________________________________ 135
9.2.2
Le clip pion __________________________________________________ 136
9.2.3
Le clip plateau________________________________________________ 137
9.2.4
Scène principale ______________________________________________ 138
9.3
LE TANGRAM _____________________________________________________ 138
9.4
VOTRE TETRIS ____________________________________________________ 140
9.4.1
La brique de base _____________________________________________ 140
9.4.2
Les pièces ___________________________________________________ 140
9.4.3
Le plateau ___________________________________________________ 141
9.4.4
La pièce suivante______________________________________________ 141
9.4.5
Le bouton commande __________________________________________ 142
9.4.6
Suppression d’une ligne ________________________________________ 144
9.4.7
Le tempo ____________________________________________________ 145
9.4.8
Niveaux et score ______________________________________________ 145
9.4.9
Compléments _________________________________________________ 146
9.4.10
Le programme complet _________________________________________ 146
9.5
SYNTHESE VOCALE ________________________________________________ 150
9.5.1
Les sons _____________________________________________________ 150
5
TD ActionScript
9.5.2
Importation sous Flash _________________________________________ 150
9.5.3
La scène principale ____________________________________________ 151
9.6
LES MACHINES DE TURING ___________________________________________ 154
9.6.1
Alan Turing __________________________________________________ 154
9.6.2
Description de la machine_______________________________________ 154
9.6.3
Exemple de machine ___________________________________________ 154
9.6.4
Simulation sous Flash __________________________________________ 155
9.6.5
Création de programmes________________________________________ 155
9.6.6
Chargements _________________________________________________ 156
9.6.7
Conversions__________________________________________________ 157
9.6.8
La machine __________________________________________________ 158
9.6.9
Version AUTO ________________________________________________ 159
9.6.10
Le fichier Flash fourni__________________________________________ 160
9.6.11
Les fichiers txt ________________________________________________ 160
9.7
SECURITE ________________________________________________________ 161
9.7.1
Jouer Online _________________________________________________ 161
9.7.2
Mot de passe _________________________________________________ 162
9.7.3
ActionScript Viewer____________________________________________ 162
10
XML _____________________________________________________________ 163
10.1 UN DIAPORAMA AVEC LEGENDES + EFFET DE TRANSITION ___________________ 163
10.1.1
Partie XML __________________________________________________ 163
10.1.2
Partie Flash__________________________________________________ 164
11
PHP______________________________________________________________ 167
11.1 MING ___________________________________________________________ 167
11.1.1
Tester un swf _________________________________________________ 167
11.1.2
Notions de base _______________________________________________ 168
11.1.3
Dessiner_____________________________________________________ 168
11.1.4
Camembert 3D online __________________________________________ 173
11.1.5
Déplacement _________________________________________________ 175
11.1.6
Texte _______________________________________________________ 176
11.1.7
Morphing____________________________________________________ 177
11.1.8
Loadmovie ___________________________________________________ 177
11.2 ECHANGE DE VARIABLES ____________________________________________ 178
11.2.1
Exemple du poids idéal _________________________________________ 178
11.2.2
Compteur de visiteurs __________________________________________ 179
12
VISUAL C++ ET FLASH____________________________________________ 181
12.1 INTRODUCTION ____________________________________________________ 181
12.2 C++ VERS FLASH __________________________________________________ 181
12.2.1
Création de l’animation Flash ___________________________________ 181
12.2.2
Création de l’interface C++ _____________________________________ 181
12.2.3
Insérer l’animation ____________________________________________ 182
12.2.4
Le programme ________________________________________________ 182
12.2.5
SetVariable __________________________________________________ 184
12.3 FLASH VERS C++ __________________________________________________ 185
12.3.1
Création de l’animation Flash ___________________________________ 185
12.3.2
Création du programme C++ ____________________________________ 185
13
LIENS____________________________________________________________ 187
6
Eric Schrafstetter
13.1 FORUMS FLASH ___________________________________________________ 187
13.2 FLASH __________________________________________________________ 187
13.2.1
Sites Internet _________________________________________________ 187
13.2.2
Livres_______________________________________________________ 187
13.3 PHP ____________________________________________________________ 188
13.4 MING ___________________________________________________________ 188
7
TD ActionScript
1 Outils de base
1.1 Introduction à ce document
Ces quelques pages sont, à l’origine, un aide-mémoire personnel de trucs et astuces
découverts sur le net ou par moi-même. La présentation des animations se fait sous forme de
travaux dirigés, c’est-à-dire que vous ne pourrez voir le résultat que si vous faites les
manipulations vous-même ! Téléchargez les .fla sur le site de ce document et n’hésitez pas à
m’encourager ou à me donner des idées en envoyant un mail à [email protected].
Je suppose que le lecteur a d’assez bonnes notions d’ActionScript et de mathématiques, dans
le cas contraire certaines explications vous paraîtront certainement obscures. . . Ce document
est une version 2.1 revue, corrigée et augmentée, n’hésitez pas à me communiquer vos
remarques et suggestions pour une version 2.2 !
1.2 Initialisation de variables
Pour n’initialiser des variables qu’une seule fois dans une image clé, créez un clip vide et
placez-en une occurrence sur la scène principale avec l’action :
onClipEvent (load) {
..initialisation des variables ...
}
onClipEvent (enterFrame) {
..suite du programme ...
}
1.3 Position de la souris
Sur la scène principale
− Placez une zone de texte avec les options suivantes : Texte dynamique et Variable = x.
− Faîtes un Copier/Coller de cette zone de texte et remplacez x par y
− Créez un clip vide (CTRL+F8 et nom = drag) que vous placerez n’importe où sur la
scène.
− Associez l’action suivante au clip drag :
startDrag (this,true);
}
_root.x=this._x;
_root.y=this._y;
}
Outils de base
8
Eric Schrafstetter
1.4 Fenêtres et navigateurs
1.4.1 Fermer une fenêtre
Pour quitter un programme Flash visualisé dans une fenêtre en utilisant un bouton, vous
pouvez :
1. Créez l’apparence du bouton qui servira à quitter le programme en fermant la fenêtre.
2. Placez une occurrence de ce bouton sur la scène et lui associer l’action :
on (press) {
getURL ("Javascript: self.close()");
}
La commande fscommand ("quit"); ferme la projection du lecteur autonome.
1.4.2 Plein écran
Pour afficher votre animation Flash en plein écran :
1. Dans les paramètres de publication HTML, choisir 100% pour la hauteur et la largeur.
2. Créez la page HTML ci-dessous, où essai.html est le nom du fichier HTML publié par
Flash.
<HTML>
<head>
<script>
<!-function ouvre(chemin){
taille='resizable=no,directories=no, menubar=no,scrollbars=no,';
taille+='width='+screen.width+',height='+screen.height;
Nouveau=window.open(chemin,"voir",taille);
Nouveau.moveTo(-5,-25);
}
//-->
</script>
</head>
<BODY>
<a href="javascript:ouvre('essai.html');"><B>Lancer l'animation</B></a></p>
</BODY>
</HTML>
Pensez à ajouter un bouton dans votre animation permettant de fermer l’animation ! (voir
paragraphe précédent).
1.5 Lecteur autonome
Pour masquer certaines options du bouton droit lorsqu’un programme Flash est lancé en mode
autonome, faire :
fscommand ("fullscreen", "true");
9
TD ActionScript
fscommand ("allowscale", "false");
fscommand ("showmenu", "false");
–
–
–
La première ligne permet de mettre l’affichage en plein écran
La seconde ligne assure que l’échelle de l’animation ne sera pas modifiée
La dernière ligne efface le menu contextuel (sauf le ”A propos de Flash Player”)
1.6 Chargement
1.6.1 Version élémentaire
Avant de lancer le programme proprement dit, vous voudriez être sûr que tous les éléments
nécessaires ont bien été chargés. Imaginons par exemple que pour lancer la scène go,
l’animation doit avoir chargé les données jusqu’à la scène fin image 20. On pourra utiliser la
méthode suivante :
1. Créez un petit clip qui permettra de faire patienter l’internaute
2. Sur la scène principale, mettre le clip à l’image clé 1
3. A l’image 5, insérez une image clé avec l’action :
ifFrameLoaded ("fin",20) {
gotoAndPlay ("go",1);
}
4. A l’image 6, insérez une image clé avec l’action :
gotoAndPlay (2);
1.6.2 Version avec %
1. Créez un clip nommé charge et placez à l’image 1 une zone de texte dynamique ayant
pour nom chargement
2. Mettre une occurrence de ce clip à l’image 1 de la scène principale (ou sur une scène
spécialement réservée au chargement) et donner l’action suivante au clip :
_root.gotoAndStop(1);
taille = _root.getBytesTotal();
if (taille<1000) {
unite = Math.floor(taille)+"bytes";
} else if (taille>1000000) {
unite = Math.floor(taille/1000000)+"mb";
} else {
unite = Math.floor(taille/1000)+"kb";
}
}
chargement = unite+" || " +
Math.floor(_root.getBytesLoaded()/taille*100)+"%";
if (chargement == unite+" || 100%") {
_root.gotoAndPlay(2);
}
}
Outils de base
10
Eric Schrafstetter
Lorsque le fichier .swf est chargé, l’animation continue à l’image 2 de la scène principale.
Dans le cas d’une scène spécialement réservée au chargement, ne rien mettre après l’image 1
de sorte que l’animation passera directement à la scène 2.
1.6.3 Barre de chargement
1. Créez un clip nommé barre avec un rectangle allongé sur l’image 1. Utilisez la barre
d’outils info pour placer le coin haut gauche du rectangle à la position X=0 et Y=0
2. Placez une occurrence de ce clip sur la scène principale et lui donner le nom ligne
3. Associez l’action suivante à cette occurrence :
}
chargement = Math.floor(_root.getBytesLoaded()/taille*100);
this._xscale = chargement;
if (chargement == 100) {
}
}
4. Placez une action stop(); à la première image de la scène principale.
5. Placez une grosse image (plusieurs Ko) à l’image clé 2 de la scène principale et une
action stop();
6. Lancez l’animation. L’image devrait apparaître rapidement. Faites alors Déboguer 14,4 puis Affichage-Afficher le train de lecture. Vous devriez maintenant voir la barre
grandir.
1.6.4 Chargement d’une bibliothèque
Il ne s’agit pas de charger une bibliothèque pendant la création d’une animation (FichierOuvrir comme une bibliothèque) mais bien d’un téléchargement de symboles à la volée au
cours de la lecture d’une animation. Par exemple, on peut imaginer un joueur ayant la
possibilité de charger en direct les pièces d’un puzzle choisi à l’écran, ceci afin d’éviter
d’avoir un fichier .swf trop volumineux et de pouvoir actualiser la base de données.
1. Ouvrez une nouvelle animation et enregistrez-la sous le nom de piece.fla
2. Créez un clip représentant par exemple un rectangle
3. Ouvrez la bibliothèque de l’animation et faire Bouton droit - Liaison sur le clip.
Choisir : Exporter ce symbole et lui donner le nom p1
4. Reprendre les deux points précédents en dessinant un disque et en l’exportant sous le
nom p2
5. Compilez l’animation (remarquez qu’il n’y a absolument rien sur la scène principale)
pour créer piece.swf
6. Ouvrez une nouvelle animation et enregistrez-la sous plateau.fla
7. Créez un clip vide et mettre une occurrence nommée jeu de ce clip sur la scène
principale
11
TD ActionScript
8. Créez un bouton aillant par exemple la forme d’une boule (peu importe)
9. Placez une occurrence de ce bouton sur la scène principale, écrire 1 dessus et associezlui l’action :
on (release) {
jeu.loadMovie("pieces.swf");
}
L’animation piece.swf va alors se charger dans le clip jeu lorsque l’on pressera le
bouton 1.
10. Placez une autre occurrence du bouton, écrire 2 dessus et lui associer l’action :
on (release) {
jeu.attachMovie("p1", "q1", 2);
jeu.attachMovie("p2", "q2", 3);
jeu.q1._x = 10;
jeu.q1._y = 50;
jeu.q2._x = 100;
jeu.q2._y = 50;
}
En cliquant sur le bouton 2, on récupère les objets p1 et p2 de l’animation
pieces.swf. On crée ensuite des occurrences q1 et q2 que l’on place sur la scène.
Utilisez la fonction removeMovieClip (jeu.q1); pour décharger l’occurrence q1.
1.6.5 Version 2
Au lieu de charger le .swf à l’intérieur d’un clip (voir exemple précédent), vous pouvez le
charger à un certain niveau par la commande loadMovieNum("nom.swf",numero);.
1. Reprendre l’animation pieces.swf précédente.
2. Ouvrir une nouvelle animation et mettre un stop(); à l’instant 1.
3. Créez un bouton quelconque et placez une occurrence sur la scène principale, avec
l’action :
on (release) {
loadMovieNum("pieces.swf",1);
_level0.gotoAndStop(2);
}
L’animation piece.swf va alors se charger au niveau 1 (rappelons que _root est au
niveau 0).
4. Placez une autre occurrence du bouton à l’image clé 2 lui associer l’action :
on (release) {
for (i=1; i<=2; i++) {
_level1.attachMovie("p"+i, "q"+i, i+1);
_level1["q"+i]_x = 100;
_level1["q"+i]._y = 100*i-100;
}
}
Outils de base
12
Eric Schrafstetter
On utilise _level1 pour accéder à l’animation pieces.swf et .attachMovie pour récupérer
les éléments de sa bibliothèque.
1.7 Couleurs
1.7.1 Définir
Considérons un clip d’occurrence r et une variable k contenant le texte k = "0xFF00AA".
Pour mettre le clip r de la couleur k, faîtes :
couleurobj = new Color("r");;
couleurobj.setRGB(parseInt(k));
1.7.2 Aléatoires
Voici une méthode pour attribuer une couleur rgb (Red - Green - Blue) aléatoire à un objet.
r = Math.floor(Math.random()*256);
g = Math.floor(Math.random()*256);
b = Math.floor(Math.random()*256);
couleurobj = new Color("nom_clip");
couleurobj.setRGB(r << 16 | g << 8 | b);
1.7.3 Remplissages transparents
Pour les personnes n’ayant pas lu le manuel de base ”Utilisation de Flash 5” jusqu’à la page
160, voici un moyen de créer un dégradé (linéaire ou radial) d’une couleur quelconque vers
rien (alpha=0). Ceci peut créer des effets très intéressants en plaçant un tel masque sur une
image par exemple.
1. Cliquez sur le pot de peinture
2. Faîtes Fenêtre - Panneaux - Remplir et Mixeur
3. Dans le panneau Remplir, choisir dégradé linéaire et cliquez sur la seconde couleur
(celle qui doit disparaître)
4. Dans le mixeur, mettre alpha à 0 !
1.7.4 Effet de torche
1. Créez un disque et remplissez-le avec un dégradé radial (jaune au milieu et rouge au
bord). Transformez ce disque en clip et en mettre une occurrence sur la scène
principale avec pour nom torche
2. Insérez un calque nommé Mask au dessus du calque de la torche.
3. Dessinez des rectangles, ovales à l’image 1 de cette couche. Si vous écrivez également
du texte, séparez les lettres (CTRL+B)
4. Faîtes Bouton droit sur le calque Mask et choisissez Masque
5. Ajoutez l’action suivante à l’image 1 du calque Mask :
13
TD ActionScript
startDrag (_root.torche, true);
stop();
6. Compilez, lancez et déplacez la souris...
1.7.5 Jeux de couleurs
Nécessite le logiciel Publisher ou PowerPoint . Si vous n’êtes pas graphiste ou avez peur de
ne pas choisir des couleurs harmonieuses entre elles, voici une solution pour récupérer les
jeux de Publisher ou PowerPoint. Avez-vous lu les pages 160 à 164 du manuel ’Utilisation de
Flash 5’ ? Pour ceux qui ont une version d’évaluation de Flash, récupérez les manuels de
référence au format PDF sur http ://www.macromedia.com/support/flash/documentation.html.
Avec Publisher
1. Lancez Publisher et quittez le catalogue pour avoir une feuille blanche
2. Dessinez 5 carrés et choisissez un jeu de couleur (Format - Jeux de couleurs)
3. Cliquez maintenant sur le premier carré puis sur le pot de peinture (ou Format Couleur de remplissage) et choisissez la première couleur de la série de 6 proposées
4. Recommencez avec le second carré et la seconde couleur, etc.
5. Vous avez maintenant 5 carrés de couleurs différentes
6. Sélectionnez les 5 carrés en les entourant avec la souris puis Copier
7. Lancez Flash et Coller
8. Affichez le Nuancier par Fenêtre - Panneau – Nuancier
9. Nous allons effacer toutes les couleurs du nuancier (pas de panique !) et mettre nos
nouvelles couleurs. Remarquez la petite flèche I en haut à droite de la fenêtre du
Nuancier.
10. Cliquez dessus et choisir ’Effacer les couleurs’ ! Oups ! Je vous sens palir !
11. Cliquez maintenant sur l’onglet Mixeur puis sur le rectangle en couleur. Utilisez la
pipette pour récupérer la couleur du premier carré importé de Publisher.
12. Cliquez sur la flèche I en haut à droite de la fenêtre du Mixeur puis ’Ajouter un
nuancier’.
13. Recommencez avec les 4 autres couleurs
14. Affichez l’onglet Nuancier puis I - Enregistrez les couleurs.
15. Choisir le type ’Jeu de Couleurs Flash’ et lui donner le nom du jeu de Publisher.
16. Recommencez depuis le début avec les différents jeux qui vous intéressent.
17. Enfin, faîtes Nuancier - I - Charger les couleurs par défaut pour retrouver toutes vos
couleurs...
18. Si vous voulez charger un jeu de couleurs, faîtes : Nuancier - I – Remplacer des
couleurs.
19. Pour ajouter des dégradés, afficher la fenêtre Remplir par Fenêtre - Panneau- Remplir
20. Créez un dégradé linéraire ou radial puis cliquez sur la petite disquette en bas à droite.
Avec PowerPoint
1. Lancez PowerPoint, choisir une présentation vierge et diapo blanche
2. Avec la barre de dessin, dessinez 6 carrés sur la diapo
3. Faîtes Bouton droit sur la diapo et ’Appliquer un modèle...’ (ou Format - Appliquer un
modèle) et choisir un modèle quelconque
Outils de base
14
Eric Schrafstetter
4. Cliquez sur le premier carré puis sur le pot de peinture et choisir parmi les 6 couleurs
différentes de noir ou blanc
5. Recommencez avec les 5 autres carrés et les 5 autres couleurs
6. Sélectionnez les 6 carrés et copiez-les
7. Lancez Flash. Si vous utilisez PowerPoint 2000 faîtes Edition – Collage Spécial et
choisissez Image (Métafichier) sinon faîtes simplement Coller.
8. Suivre maintenant la procédure comme pour Publisher...
1.8 Jouer un fichier MIDI
Je ne parlerai pas de l’insertion de fichiers MP3 dans une animation Flash, c’est classique. En
revanche, voici un exercice permettant par une animation Flash de lire ou de stopper un
fichier MIDI (invisible à l’écran).
1. Le principe est le suivant : Créer un index.html contenant 2 frames ayant les noms
anim pour l’animation Flash et lecteur pour le cadre qui contiendra le lecteur MIDI.
2. Voici le script de index.html
<HTML>
<HEAD>
<TITLE>Page d'accueil</TITLE>
<FRAMESET COLS="100%,*">
<FRAME SRC="son.html" NAME="anim">
<FRAME SRC="blank.htm" NAME="lecteur">
</FRAMESET>
</HEAD>
<BODY>
Il est grand temps de changer de navigateur !
</BODY>
</HTML>
3. Le fichier blank.htm est ce que l’on imagine :
<HTML>
<HEAD>
<TITLE>Rien</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
4. Téléchargez pour l’exercice un fichier MIDI quelconque (www.musicrobot.com) et
enregistrez-le dans le même dossier que index et blank.
5. Lancez Flash et enregistrez sous le nom son.fla
6. Créez un bouton quelconque et placez 2 occurrences de ce dernier sur la scène
principale.
7. Au premier bouton, ajouter l’action :
on (release) {
fscommand ("joue", "nom.mid");
}
où nom.mid est le nom du fichier à jouer.
15
TD ActionScript
8. Au second bouton, ajouter l’action :
on (release) {
fscommand ("stop");
}
9. Ajouter une action Stop(); à l’image clé 1 de la scène principale.
10. Aller dans les paramètres de publication puis, dans l’onglet HTML, choisir Flash avec
FSCommand.
11. Publiez l’animation et ouvrez le fichier son.html créé dans le bloc-note.
12. Changez la fonction son_DoFSCommand par :
function son_DoFSCommand(command,args) {
if (command=="stop"){
parent.lecteur.location.href="blank.htm";
}
if (command=="joue"){
var z=parent.lecteur.document;
z.open();
if (navigator.appName == "Netscape") {
z.write("<html><body><embed src=" + args +
" hidden=true autostart=true loop=true></body></html>");
} else {
z.write("<html><body><bgsound src=" +
args + " loop='infinite'></body></html>");
}
z.close();
}
}
Ainsi, lorsque l’on presse le bouton joue, la fenêtre lecteur est réécrite grâce à
Javascript, en distinguant le type de navigateur. L’action stop efface la fenêtre lecteur
et le son s’arrête. Attention, si vous compilez à nouveau votre animation Flash, le
programme ci-dessus sera écrasé ! Enfin, une dernière remarque, si vous voulez
convertir un fichier MIDI en WAV, vous pouvez utilisez Winamp (freeware) en
faisant :
1. Lancez Winamp et CTRL+P pour afficher les préférences
2. Plug-ins Output = Nullsoft Disk Writer
3. Lisez votre fichier Midi (ou autre format), il sera alors automatiquement
converti en WAV
4. ATTENTION ! Revenir à Output = Winamp waveOut ensuite…
1.9 Cookies
Nous allons créer une animation qui demande un nom puis l’enregistre dans un cookie lorsque
l’on clique sur un bouton.
1. Créez une animation vide et enregistrez-la sous le nom cookie.fla
2. Créez une zone de texte de saisie et nommez-là nom.
3. Placez l’action suivante à l’image 1 :
getURL ("javascript:getCookie();");
Outils de base
16
Eric Schrafstetter
4. Créez un bouton quelconque et placez-le à côté de la zone de texte. Donnez l’action
suivante au bouton :
on (release) {
getURL("javascript:setCookie();");
}
Les fonctions getCookie() et setCookie() étant définies dans la page HTML (voir
ci-dessous).
5. Publiez votre animation et éditez le fichier source. Placez les fonctions ci-dessous
dans la tête du document HTML.
<html>
<head>
<title>Les cookies avec Flash</title>
</head>
<SCRIPT LANGUAGE=JavaScript>
<!-function setCookie(){
var chaine="nom="+flashObj().GetVariable('nom')+ ";";
var expire = new Date("March 1, 2010");
expire = expire.toGMTString();
chaine = chaine + "expires=" + expire;
document.cookie = chaine;
}
function getCookie() {
if(document.cookie == ''){
return;
}else{
flashObj().SetVariable('nom',unescape(Recherche('nom')));
}
}
function Recherche(name){
var chaine = document.cookie;
var Premier = chaine.indexOf(name);
if(Premier != -1) {
Premier += name.length + 1;
var Dernier= chaine.indexOf(';', Premier);
if(Dernier == -1){
Dernier= chaine.length;
}
return chaine.substring(Premier, Dernier);
} else {
return "";
}
}
function flashObj() {
if(navigator.appName=="Netscape") {
return document.embeds[0]
} else {
return window['animation']
}
}
//-->
</SCRIPT>
17
TD ActionScript
6. Dans le corps du document, donnez un nom à votre animation grâce à la commande
id. Par exemple, ici, nous lui donnons le nom animation.
<body>
<object id="animation"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/..."
width="100%"
height="100%">
<param name=movie value="cookie.swf">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<embed
src="cookie.swf"
swliveconnect=TRUE
width="100%"
height="100%"
quality=high
bgcolor=#FFFFFF
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/...">
</embed>
</object>
</body>
</html>
7. Lancez votre navigateur et ouvrez cookie.html. Il n’y a normalement aucun nom
dans la zone de saisie. Tapez un nom et cliquez sur le bouton.
8. Effacez le nom puis actualisez la page, le nom réapparaît. Pour voir les cookies d’un
document, tapez dans la barre d’adresse :
javascript:alert(document.cookie.split(';').join('\n'))
1.10 Boutons
1.10.1 Bouton On/Off/Clignotant
1. Créez un clip avec 3 images clé nommées on (image 1), off (image 2) et blink
(image 3)
2. A l’image 1, dessinez l’image du bouton off
3. A l’image 2 et 3, celui du bouton on
4. Insérez une image clé vide à l’instant 10 (ou moins pour un clignotement plus rapide)
5. Insérez une nouvelle couche nommée Action et placez à l’image 1 et 2 l’action
stop();
6. Insérez une image clé en 10 avec l’action
gotoAndPlay(3)
Sur la scène principale, placez une occurrence de ce clip et lui donner le nom bouton.
Pour voir par exemple le bouton sur on, utilisez l’action :
_root.bouton.gotoAndPlay("on");
Outils de base
18
Eric Schrafstetter
1.10.2 Bouton transparent
Lorsque vous voulez rendre une partie de l’écran sensible à l’action de la souris, vous placez
un bouton transparent dont la zone du cliqué couvre cette partie.
−
−
−
−
−
Créez un symbole bouton nommé bouton
Ne rien mettre dans les images Haut, Dessus et Abaissée
Dessinez une forme pour l’image Cliquée
Revenez sur la scène principale et placez une occurrence du bouton.
Lancez l’animation. L’écran reste vide mais une zone est devenue sensible au passage
de la souris.
Astuce Pour éviter de voir apparaître la main au dessus de la zone sensible, créez un clip
et placez le bouton dedans !
1. Créez un bouton bouton avec un rectangle sur haut et Cliquée
2. Créez un clip et mettre une occurrence du bouton bouton à la première image
3. Ajouter l’action suivante au bouton :
on (press) {
_root.press = 1;
}
on (release, releaseOutside) {
_root.press = 0;
}
4. Placer une occurrence du clip sur la scène principale et lui affecter l’action :
startDrag (this, true);
}
Ainsi, lorsque l’animation démarre, le clip devient glissable et suit les mouvements de
la souris. La variable press permet de savoir si le bouton est pressé (1) ou non (0).
5. Sur la scène principale, dessinez une zone de texte dynamique et affectez-lui le nom
de variable x
6. Créez un nouveau clip vide nommé controles. Placez une occurrence sur la scène
principale avec l’action :
if (_root.press==1) {
_root.x++;
}
}
7. Lancez l’animation et pressez le bouton gauche de la souris, le compteur augmente.
Relâchez, il s’arrête.
1.10.3 Déplacement d’objets
–
19
Créez un rectangle et transformez-le en clip ayant pour nom rect.
TD ActionScript
–
Placez une occurrence de ce clip sur la scène principale et lui donner le nom rect1
Action sur l’image 1
for (i=2; i<=10; ++i) {
duplicateMovieClip ("rect1", "rect"+i, i);
this["rect"+i]._y += (rect1._height*(i-1));
r = Math.floor(Math.random()*255);
g = Math.floor(Math.random()*255);
b = Math.floor(Math.random()*255);
colourobj = new Color("rect"+i);
colourobj.setRGB(r << 16 | g << 8 | b);
}
stop ();
On duplique 9 fois le clip rect1 en leur donnant les noms ”rect”+i. La méthode
Color.setRGB spécifie la couleur de l’objet.
Action sur le clip rect1
onClipEvent (mouseDown) {
// La souris touche-t-elle le clip en pressant ?
if (this.hitTest(_root._xmouse, _root._ymouse)) {
// Met au 1er plan
this.swapDepths(10);
// Le rectangle suit la souris
startDrag ("");
}
}
onClipEvent (mouseUp) {
stopDrag ();
}
Lorsque vous pressez un rectangle, vous pouvez déplacer startDrag(””) et celui-ci est placé
au premier plan this.swapDepths(10). Dès que vous relâchez la souris, le rectangle se pose
stopDrag.
1.11 Information
1.11.1 Scroll sur texte
Voici un premier moyen de créer un scroll sur un texte :
1. Créez un bouton bouton avec une petite flèche dirigée vers le haut comme apparence
2. Créez une zone de texte dynamique avec pour nom de variable TexteEcran. Mettre en
forme cette zone (choix de la couleur, de la police...).
3. Insérez une occurrence de bouton (qui servira à faire défiler le texte vers le haut)
4. Insérez une seconde occurrence de bouton en utilisant l’outil de transformation pour
faire pivoter l’image de 180° et avoir la flèche dirigée vers le bas.
5. Créez une couche action sur la scène principale et mettre en 1 une image clé avec
l’action :
TexteAide = "BIENVENUE...#MERCI DE ...#SUITE DE L\'AIDE...";
Outils de base
20
Eric Schrafstetter
Texte2 = new Array();
Texte2=String(TexteAide).split("#");
TexteEcran=Texte2.join(chr(13));
stop();
Vous écrivez votre texte d’aide dans la variable TexteAide avec le symbole # lorsque
vous voulez retourner à la ligne. La première fonction convertit le texte en tableau et la
seconde fonction joint tous les éléments avec le séparateur chr(13) qui est le code du
retour chariot.
6. Associez au bouton à la flèche vers le haut l’action :
on (press) {
if (TexteEcran.scroll > 1) {
TexteEcran.scroll--;
}
}
7. Pour le bouton à la flèche vers le bas :
on (press) {
if (TexteEcran.scroll < TexteEcran.maxscroll) {
TexteEcran.scroll++;
}
}
21
TD ActionScript
2 La vidéo
2.1 Vidéo dans une fenêtre séparée
Voici comment lancer des vidéos à partir d’une animation Flash :
1. Téléchargez une vidéo .avi (par exemple sur Fundelire.com)
2. Comme pour le paragraphe sur les fichiers MIDI, créez une page index.html ayant le
code :
<HTML>
<HEAD>
<TITLE>Page d'accueil</TITLE>
<FRAMESET COLS="100,*" border="0">
<FRAME SRC="lanceur.html" NAME="lanceur">
<FRAME SRC="blank.htm" NAME="lecteur">
</FRAMESET>
</HEAD>
<BODY>
Il est grand temps de changer de navigateur !
</BODY>
</HTML>
3. Reprendre le fichier blank.htm du paragraphe sur les fichiers MIDI
4. Lancez Flash et enregistrez sous le nom lanceur.fla
5. Créez un bouton quelconque et associez-lui l’action :
on (release) {
fscommand ("joue", "video.avi");
}
où video.avi est le nom de votre fichier vidéo.
6. Ajoutez l’action Stop(); à l’image clé 1 de la scène principale.
7. Choisir paramètres de publication HTML avec FSCommand
8. Publiez et remplacez lanceur_DoFSCommand par :
function lanceur_DoFSCommand(command,args) {
z.open();
z.write(
"<html><body><embed src="+args+" autostart=true loop=0>
</embed></body></html>");
z.close();
}
}
2.1.1 Paramètres généraux pour les vidéos
Tapez « Windows Media Player controls » dans un moteur de recherche du type
www.google.fr pour de plus amples informations sur les fonctions qui suivent :
La vidéo
22
Eric Schrafstetter
Commande
ALIGN
BORDER
WIDTH
HEIGHT
SRC
LOOP
Description
Aligne la console (RIGHT, LEFT, TOP, BOTTOM)
Largeur de la bordure (en pixels)
Largeur de la vidéo (en pixels)
Hauteur de la vidéo (en pixels)
Adresse de la vidéo
Nombre de fois où la vidéo est jouée (-1 = infini)
2.1.2 Windows Media Player
Commandes propres à Windows Media Player (true par défaut)
AUTOSTART, AUTOLOAD,CONTROLS
2.1.3 QuickTime
Commandes propres à QuickTime (true par défaut) :
AUTOPLAY, PLAYEVERYFRAME (joue vidéo au fur et à mesure)
CONTROLLER, HREF , TARGET
2.1.4 Real Video
Pour Real Video, la commande CONTROLS peut prendre les valeurs suivantes :
All, ControlPanel, InfoVolumePanel
InfoPanel, Statusbar, Playbutton, Stopbutton
Le script se composant de deux parties (une pour la vidéo l’autre pour le contrôle), voici un
exemple de script :
function son_DoFSCommand(command,args) {
z.open();
z.write("<html><body>");
z.write("<EMBED SRC='video.rm' type='audio/x-pn-realaudio-plugin' ");
z.write("CONSOLE='Clip' CONTROLS='ImageWindow'");
z.write(" HEIGHT=240 WIDTH=320 AUTOSTART=false>");
z.write("<br><EMBED type='audio/x-pn-realaudio-plugin' CONSOLE='Clip' ");
z.write("CONTROLS='Playbutton,Stopbutton' HEIGHT=40 WIDTH=100 ");
z.write("AUTOSTART=true></body></html>");
z.close();
}
}
2.2 QuickTime dans Flash
L’exercice suivant va vous permettre de créer des effets spéciaux à partir d’une animation
QuickTime. Il est essentiel de noter que le fichier de sortie ne sera pas un .swf mais un fichier
QuickTime ! Flash n’est là ”que” pour créer des effets et/ou ajouter de l’interactivité.
23
TD ActionScript
1.
2.
3.
4.
5.
6.
7.
8.
Téléchargez ou créez une animation QuickTime .mov.
Lancez Flash et enregistrez sous le nom effets.fla
Fichier - Importer puis choisissez le fichier .mov
Etendre la première image clé jusqu’à la fin de l’animation QuickTime par F5
Ajoutez une nouvelle couche au dessus de celle réservée à la vidéo
Créez une petite animation, utilisez des effets alpha (pour voir la vidéo au travers)
Dans les paramètres de publication, décochez Flash (.swf) et cochez QuickTime .mov)
Dans l’onglet QuickTime, choisir : Alpha = Transparent Alpha ; Calque = Au dessus ;
Controleur = Standard et Fichier = Aplatir
9. Publiez et lancez l’explorateur windows pour retrouver le fichier effets.mov créé.
2.3 Le cas des fichiers AVI
La manipulation est quasi-identique sauf qu’il faudra choisir Type = tous au moment de
l’importation :
1. Lancez Flash, enregistrez l’animation sous le nom video.fla puis faîtes Fichier –
Importer
2. Choisir Type = tous, sélectionnez votre animation .avi puis importez
3. Etendre par F5 jusqu’au nombre de frames du clip (les images apparaissent au fur et à
mesure)
4. Réduire les dimensions de votre animation principale à celle de la vidéo (ce n’est pas
obligatoire).
5. Ajoutez éventuellement une couche pour les effets spéciaux en Flash (voir QuickTime
dans Flash)
6. Dans les paramètres de publication, décochez Flash (.swf) et cochez QuickTime .mov)
7. Choisir éventuellement quelques options dans l’onglet QuickTime (par exemple
Contrôleur Standard pour avoir les boutons Play, Stop et Pause)
8. Publiez l’animation par MAJ+F12
9. Utilisez l’explorateur windows et lancez le .mov créé !
Remarque : C’est donc un moyen très simple de convertir un .avi en .mov !
2.4 MPG et autres effets spéciaux
Voici quelques outils pour créer des effets spéciaux ou convertir des vidéos :
1. Pour convertir des fichiers .mpg ou .avi en .avi avec des effets spéciaux, vous pouvez
utilisez le logiciel gratuit VirtualDub. Voici un exemple de manipulation pour
convertir un fichier .avi en noir et blanc :
(a) Ouvrir un fichier vidéo avec VirtualDub
(b) Menu Video-Filter et Add pour choisir le filtre threshold. Quant au paramètre,
choisissez par exemple 50% (à ajuster ensuite)
(c) Faîtes avancer le curseur pour visualiser les images et modifiez éventuellement
le paramètre
(d) Choisir Video - Full Processing Mode
(e) File - Save AVI et enregistrez la video filtrée sous un nouveau nom
La vidéo
24
Eric Schrafstetter
2. Vous pouvez donc ensuite convertir le fichier AVI en QT4 et le manipuler sous Flash.
Cependant, si votre fichier comporte peu d’images, je vous conseille de télécharger le
logiciel gratuit AVIDecomposer qui permet de décomposer une vidéo AVI en une
multitude d’images .jpg plus un fichier .wav pour le son ! Lancez ensuite Flash et
importez la première image-Flash vous demande alors si vous désirez importer toute la
suite (il voit tout le bougre !), dîtes oui. C’est la technique que j’ai utilisée pour créer
l’animation de la femme sur le site de ce document. Les images JPG ont été converties
une à une en Bitmap par l’outil Modification - Tracer Bitmap.
2.5 Créer un CD Vidéo
Vous ne connaissez pas le VCD ? Pas très étonnant, le ”Video CD” est pratiquement ignoré
chez nous contrairement aux pays asiatiques. C’est quoi le VCD? C’est un CD classique (CDR ou CD-RW) contenant des vidéos ou des films pouvant être lu sur la plupart des lecteurs
DVD du marché. Ceci peut être intéressant si l’on ne désire pas investir dans un graveur de
DVD. La qualité de l’image d’un VCD est comparable à celle d’une cassette VHS et la durée
d’enregistrement est d’environ 1 heure. Il est possible d’effectuer un chapitrage (saut d’une
séquence à une autre, arrêt, boucles...) et de placer sur le CD des fichiers qui ne pourront être
lus que sur un PC. Il faut bien voir qu’un PC même équipé d’un lecteur de DVD ne sait pas
lire un VCD à moins d’installer un logiciel spécifique (voir fin du paragraphe).
Pour résumer, il s’agit de transformer un simple CD en VCD qui pourra être lu sur un lecteur
de salon avec page de titre type DVD et éventuellement contenir des données pour un PC.
Je vous propose une méthode entièrement gratuite pour faire cela. Nous partirons
d’animations Flash sonores (dessins animés, karaokés, présentations...) et de fichiers .avi. J’ai
effectué des tests avec un graveur hp et un lecteur dvd Pionneer, le résulat est excellent (et
toujours impressionnant).
Signalons tout de même que pour lire des CD Vidéo maison, le lecteur DVD doit être
compatible VideoCD 2.0 (ce qui est le cas généralement) et pouvoir lire les CD-R ou CDRW. Le standard VideoCD 2.0 pour un format 4 : 3 est :
− Vidéo : 352x288 25fps, MPEG-1
− Audio : PCM 44.1KHz 16 bits stéréo à 172Ko/s
2.5.1 Outils nécessaires
Pour réellement apprécier cet exercice, il vous faut un graveur, un CD-R (ou mieux CD-RW)
et un lecteur de DVD de salon. A cela s’ajoutent les logiciels gratuits suivant :
1. avi2vcd (325 Ko) : Ce programme transforme un .avi (avec certaines contraintes) en
.mpg VideoCD 2.0 suivant trois formats possibles : NTSC, PAL ou FILM. Nous
utiliserons le format PAL.
2. VCDEasy v1.0.8 (4,3 Mo) : Contient plusieurs utilitaires dont VCDImager et cdrdao.
Il permet de générer les fichiers et de les graver (par l’intermédiaire de cdrdao).
25
TD ActionScript
2.5.2 Survol des étapes
1. Création de l’animation Flash et exportation en .avi
2. AVI2VCD pour créer un fichier .mpg
3. VCDEasy pour générer les fichiers nécessaires à la gravure du VCD et les graver.
Attention, ce n’est pas une gravure habituelle !
4. Lire le VCD sur votre lecteur de salon.
2.5.3 Les étapes
Si vous avez déjà des animations enregistrées au format .avi et que vous voulez les
transformer en un VCD avec des menus du type ”Accès aux différents chapitres”, vous
utiliserez Flash pour créer les pages de lancement (voir chapitrage).
2.5.4 L’animation Flash
Attention ! VCDEasy (en fait cdrdao) demande des fichiers .mpg durant au moins 4 secondes.
1. Mettre les dimensions de l’animation Flash à 352×288 (ou un multiple, par exemple
704×576) et la cadence à 25 frames/s. Pourquoi mettre une cadence alors que nous
aurons une bande son qui imposera son rythme ? Afin qu’il y est une vraie cohérence
entre les numéros des frames et le temps indiqué sous la fenêtre du scénario (voir
figure 2.1). Ces temps ou frames nous seront utiles si nous voulons effectuer un
chapitrage de notre animation.
Fig 2.1 − Frame – Cadence – Temps
2. Enregistrez une bande son au format .wav ou .mp3
3. Créez maintenant une animation quelconque SANS actions ni clips autonomes. Par
exemple une page d’accueil avec des numéros qui serviront à la navigation (voir
figure 2.2), un dessin animé, une présentation...
4. Faire Fichier - Exporter l’animation. Choisir .avi et lui donner le nom film.avi (par
exemple)
5. Donnez à l’exportation les dimensions Largeur = 352 et Hauteur = 288, Couleurs 24
bits, Audio 44kHz 16 bits stereo (ou mono) et Lisser
6. Cliquez sur OK et choisir ”Trames non compressées”. Il est inutile de compresser la
vidéo ici, vous ne feriez que perdre de la qualité d’image.
La vidéo
26
Eric Schrafstetter
Fig 2.2 − Exemple de chapitrage
2.5.5 AVI2VCD
1.
2.
3.
4.
5.
Lancez AVI2VCD
Choisir Target Format = PAL
Source AVI - Browse et allez chercher film.avi
Cliquez sur Encode et attendre la fin de la création du fichier .mpg
Fermez AVI2VCD
2.5.6 VCDEasy 1.0.8
Plantage au démarrage ? Pour fonctionner correctement pour la gravure, votre couche ASPI
sur votre Windows doit être à jour. Pour le savoir, téléchargez aspichk.exe. Vous saurez ainsi
si il vous faut installer cette couche, mettre à jour ou si tout est OK. Si vous avez besoin d’une
installation ou réinstallation, téléchargez et installez aspi32.exe ou le logiciel ForceASPI 1.7.
1. Lancez VCDEasy
2. Cliquez sur Préférences à gauche puis sur l’onglet VCDEasy. Choisir Langue =
Français et cocher ”Activer l’intégration de cdrdao”. C’est ce logiciel qui permettra de
graver notre CD.
27
TD ActionScript
3. Relancez VCDEasy, vous pouvez maintenant choisir votre graveur de CD dans
l’onglet Principal. Cochez ”Graver” à droite sur la même ligne.
4. Choisir en haut VidéoCD = VCD 2.0
5. Cliquez sur le bouton Ajouter et récupérez le film.mpg créé à l’étape précédente.
6. Ajoutez (éventuellement) d’autres fichiers .mpg, vous aurez accès aux différents films
grâce à la télécommande de votre lecteur DVD ( et ) ou à partir de la page
d’accueil.
7. Vous pouvez éventuellement changer l’emplacement du .bin qui va être créé.
8. Insérez un CD-R ou un CD-RW formaté dans votre graveur
9. Cliquez sur GO. Si tout se passe bien, votre CD est maintenant gravé et lisible par
votre lecteur DVD!
2.5.7 Chapitrage
Le chapitrage, c’est créer des liens et des découpages entre les différentes animations (Voir
figure 2.2). Vous pouvez par exemple :
–
–
Définir dans une même animation plusieurs points d’entrée, en utilisant des temps ou
des frames. Par exemple, mettre un point d’entrée à 5 secondes puis 14 secondes ou
aux frames 125 et 350. Tout cela ressemblant fortement aux images clé sous Flash.
Associer à ces images clés des actions (Aller à l’image 1, arrêter...) aux touches de la
télécommande (avant, arrière, numéros...)
L’idée de la programmation
1. Cliquez sur l’onglet Options et cochez ”Utiliser PBC” (Playback Control) qui permet
de créer une navigation dans vos animations
2. Sous l’onglet Chapitres, vous pouvez créer un chapitrage à un temps ou une frame
donnée. Notre animation Flash ayant la cadence de 25 frames/s, vous pouvez
avantageusement utiliser le chapitrage par frame.
3. Une fois les points d’entrée des chapitres placés (images clés du chapitrage), cliquez
sur l’onglet Interactivité
4. Vous pouvez maintenant, pour chaque point d’entrée, définir une action, par exemple :
Attendre 2 secondes puis jouer la scène suivante, jouer 2 fois la même scène...
Exemple de la figure 2.2
Insérez les 3 ou 4 animations (intro, désert, montagne et ski (1 ou 2 fichiers)) puis cliquez sur
l’onglet ”Interactivité”
1. Animation d’introduction faîte en Flash (au moins 4 secondes), choisir par exemple :
– Jouer indéfiniment
– Utilisation des touches numériques. 1 envoie vers désert, 2 vers montagne et 3
vers ski.
– Suivant envoie vers désert.
2. Animation désert :
– Choisir ”Attendre indéfiniment” (permet d’arrêter l’animation)
– Vous pouvez paramètrer les numéros pour qu’ils renvoient tous vers le
sommaire
La vidéo
28
Eric Schrafstetter
– Bouton suivant vers Montagne et précédent vers le sommaire
3. Animation Montagne :
– Choisir ”Attendre 0 seconde” pour que le ”Stage de ski” parte tout de suite
après
– Programmez les boutons numériques
2.5.8 Outils
1. Si vous faîtes plusieurs essais avec un CD-RW, l’outil ”Effacer un CD réinscriptible”
de l’onglet CDRDAO est très pratique ! (Petit problème d’affichage parfois)
2. L’onglet Image MPEG est très prometteur (convertir image en .mpg) mais ne
fonctionne pas encore complètement avec la version 1.0.8
Pour terminer, quelques liens liés à ce chapitre :
−
−
−
−
−
Recherchez un forum sur VCDEasy
Freeware CamStudio : permet d’enregistrer au format .avi des mouvements à l’écran
Freeware VirtualDub pour travailler sur vos .avi (filtres, conversion en images...)
Une liste de lecteurs DVD compatibles avec VCD (www.vcdhelper.com)
Sthsvcd est un lecteur gratuit de DVD/VCD (Avec un nombre impressionnant de
fonctions !) pour PC (à rechercher sur un moteur).
2.6 Poser 3 ou 4
Il existe un plug-in qui permet de convertir une animation Poser 4 en swf (que je ne connais
pas). Voici un autre moyen de conversion. Je vous rappelle que la version Poser 3 est gratuite
et peut se trouver sur le net ou dans d’anciennes revues comme PC Expert.
1. Téléchargez l’excellent logiciel de visualisation http ://www.irfanview.com/.
2. Téléchargez et installez ras2vec (voir paragraphe sur le passage du bitmap au
vectoriel)
3. Installez AVIDecomposer
4. Créez une animation avec Poser
5. Choisir un affichage Silhouette CTRL+1, mettre fond du décors en blanc et personnage
en noir
6. Exportez au format .bmp par Animation – Créer un film avec Qualité = Réglages en
cours. Faîtes OK et choisir un nom.
7. Lancez IrfanView et File-Batch Conversion (ou tapez la lettre B)
8. Sélectionnez tous vos fichiers puis Add et Work As - Batch Conversion
9. Output Format = BMP et Advanced Options - Change Color Depth = 2 colors
(Black/White)
10. Choisir Use this Directory as Output puis Start pour démarrer la conversion des bmp
en bmp noirs et blancs
11. Ouvrez une fenêtre DOS dans le répertoire des fichiers BMP et tapez la commande :
ras2vec -d -m *.bmp
Vous avez maintenant des fichiers .emf
29
TD ActionScript
12. Lancez Flash et importez la première image image1.emf, Flash vous propose
d’importer les autres. Répondre oui.
13. Eventuellement séparez les dessins par CTRL+B et optimisez les lignes par
CTRL+MAJ+ALT+C
Voir également le chapitre suivant pour la création d’objets 3D avec Poser 3.
2.7 Real Player
Nous utilisons RealPlayer 8 Basic, freeware téléchargeable (5Mo) sur real.com ou disponible
sur beaucoup de CD-Rom gratuits de connexion à Internet (Recherchez un fichier ayant pour
nom rp8*). Ce player est en fait beaucoup plus qu’un simple lecteur, c’est plutôt un
navigateur qui n’aurait qu’un défaut... ne pas lire le HTML !
2.7.1 .smil
Le langage SMIL (Synchronized Multimedia Integration Language) permet de synchroniser
des fichiers multimédias sur Internet.
Les fichiers vidéos étant assez volumineux, ils sont encodés de manière à pouvoir être
”streamés”. Le ” stream ” étant le flux de données qui permet à l’internaute de commencer à
visualiser la vidéo avant que celle-ci ne soit complètement chargée.
L’encodage peut se faire suivant au moins 3 technologies différentes :
− Real Audio et Real Video de Real Networks
− Quicktime de Apple
− ASF de Microsoft
Real Player est capable d’utiliser un fichier Flash en tant que ressource au même titre que les
fichiers audios, images ou fichiers textes. La vidéo peut aussi être mise en forme dans un
habillage en cohérence avec les paramètres détectés chez l’internaute spectateur. SMIL
permet donc de synchroniser des flux Audio et Vidéos en fonction des paramètres de chaque
internaute.
La technique Les fichiers SMIL sont des fichiers textes. De simples éditeurs de textes sont
suffisants pour faire du SMIL. En tant qu’extension de XML, elle utilise les mêmes règles
syntaxiques. Une page SMIL est composée de 2 éléments principaux :
1. Une entête qui définira toutes les régions nécessaires à l’affichage des éléments.
2. Un corps qui contiendra toutes les instructions de synchronisation.
2.7.2 RealEncoder/RealProducer G2
Les freewares RealEncoder 5.0 ou RealProducer G2 permettent de convertir facilement des
fichiers .avi, .mov, .wav ou .au en .ra (Audio) ou .rm (Vidéo).
L’adresse sur le site officielle real.com m’échappe mais vous trouverez facilement ce logiciel
en tapant renc51.exe ou RealProducer G2 freeware (3,2 Mo) dans un moteur de recherche
La vidéo
30
Eric Schrafstetter
(par exemple sur www.google.fr). Prenez soin de passer le fichier téléchargé à l’anti-virus !
Ce freeware permet également de capturer et transformer en .rm des images provenant d’une
webcam ou d’une source externe (K7 VHS, TV...).
2.7.3 Un exemple
ATTENTION! N’utilisez que des actions Flash 4, l’exportation au format RealPlayer n’est
pas pour le moment compatible avec ActionScript. Pour ne pas vous tromper, faites Fichier Paramètres de publication puis dans l’onglet Flash, choisissez en bas Flash 4 et OK. Si vous
insérez une action, ne prenez pas les fonctions surlignées en jaunes, ceux sont celles propres à
la version 5. Toujours dans l’onglet Flash, cliquez sur le bouton Définir à côté du Train
Audio. Choisir Compression : Brut (Obligatoire) et Taux : 22kHz par exemple (44kHz étant
de meilleure qualité).
1.
2.
3.
4.
Donnez à l’animation les dimensions 200×200 pixels (Modification - Animation)
Importez un son (wav ou mp3) sous flash par Fichier – Importer
Ouvrez la bibliothèque (CTRL+L) et placez une occurrence du son sur la scène.
Dans l’échelle temporelle contenant le son, étendre par F5 jusqu’au temps 10 (par
exemple).
5. Fenêtre - Panneau - Son (ou bouton droit sur l’échelle temporelle – Panneau - Son) et
choisir Sync : En continu. C’est le seul format accepté pour la publication.
6. Créez une nouvelle couche et placez-y une animation quelconque (interpolation de
forme par exemple).
7. Fenêtre - Paramètres de publication. Choisir Real Player comme format d’exportation.
Un onglet RealPlayer apparaît alors. Cliquez dessus et choisir :
–
–
–
Exportation réglages Flash. Choisir 34Kps pour le taux (valeur classique pour
les modems 56Kps)
Exportation Audio : SureStream = voix ou musique ou... Modem = 56K
Exportation SMIL (Vous pouvez également régler les propriétés du projet qui
seront éventuellement visibles à la publication de la page)
Il faut bien voir que le fichier .smil créé n’est là que pour intégrer l’animation Flash dans Real
Player. Il n’y a donc aucune compression supplémentaire par rapport au .swf. Ouvrez le
fichier .smil créé par Flash avec le bloc-notes pour voir sa structure.
2.7.4 Créer un vrai .rm
Cette fois on perd presque tout (interactivité, images vectorielles, clips...) mais on compresse
fortement la vidéo et le son pour former un unique fichier .rm (Real Movie) beaucoup plus
petit que le .swf correspondant. Voici la manip :
1. Reprenez l’animation de la partie précédente (Une piste son et une interpolation de
forme par exemple).
2. Faites Fichier - Exporter l’animation et choisir Windows AVI. Choisir le Format vidéo
= Couleur 24 bits et le format Audio 44Kz Mono ou Stéréo. Utilisez des trames non
compressées pour avoir la meilleure qualité possible.
31
TD ActionScript
3. Vous récupérez en sortie un fichier .avi généralement assez gros. La manipulation est
identique (choisir type=WAV) si vous désirez créer un unique fichier contenant la
piste sonore de votre animation. Lancez alors Real Encoder ou RealProducer G2 et
choisissez Record From File - OK et Suivant.
4. Browse et retrouvez votre fichier .avi
5. Donnez éventuellement un titre, Auteur et Copyright
6. Choisissez 56K si c’est pour une diffusion sur le web
7. Les formats audios sont assez explicitent
8. Pour la qualité vidéo, la première option (Smoothest Motion) est intéressante s’il y a
peu de mouvements (interview par exemple), la seconde (Sharpest Image) s’il y a
beaucoup de mouvements et la dernière (Slide Show) affiche des images nettes mais
saccadées.
9. Donnez un nom de sortie, par exemple video.rm
10. Options - Advanced Mode puis cliquez sur Settings... en bas à droite. Choisir Total =
34 Kbps, ajustez le son (5 Kps par exemple), la vidéo sera alors basée sur 34−5=29
Kps. Faites des tests en baissant le taux sur la vidéo jusqu’à la limite du supportable !
11. Cliquez sur Start pour lancer la conversion.
12. Le résultat, généralement 10 à 20 fois plus petit que le .swf, se lit avec Real Player.
2.8 Streaming
2.8.1 Avec Real Player
Le streaming vidéo permet de commencer à voir une vidéo dès le début de son chargement, ce
qui évite les temps d’attente. En effet, au lieu de charger l’ensemble de la vidéo pour qu’elle
puisse être regardée, le streaming permet de voir les premières images dès le départ, en même
temps que le film est chargé. Pendant que vous regardez le début de cette vidéo la suite des
informations arrive dans votre ordinateur.
1.
2.
3.
4.
Encoder un fichier avec Real Producer G2 (ex : titre.rm).
Ouvrez le bloc notes
Ecrivez l’adresse o`u se trouvera votre fichier .rm (ex : http ://monsite.com/titre.rm)
Enregistrer votre fichier en .ram (ex : monfichier.ram), pour cela choisir Type = Tous
au lieu de Type = Texte
5. Envoyer les 2 fichiers (titre.rm et monfichier.ram) vers votre site.
6. Le lien pour le streaming pointera vers le fichier .ram (ex :
monsite.com/monfichier.ram) A HREF="lance.ram">Voir la vidéo...</A>
7. Ou encore en tant que vidéo intégrée sur la page web avec le code :
<object classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
data="monfichier.ram" width="200" height="200" NOJAVA="true">
<param name="src" value="monfichier.ram">
<param name="controls" value="ImageWindow,ControlPanel,Statusbar">
<param name="autostart" value="true">
<embed src="monfichier.ram" autostart="true"
controls="ImageWindow,ControlPanel,Statusbar" width="200"
height="200" >
</embed>
</object>
La vidéo
32
Eric Schrafstetter
2.8.2 Le streaming sous Flash
Comment imposer une cadence de 25 frames par seconde (par exemple) à une animation sans
connaître la puissance de la machine du visiteur ? Vous l’aurez deviné, en utilisant la
technique du stream. Certaines images ne seront pas montrées afin que l’animation suive la
cadence imposée. Voici la méthode (voir l’original en anglais ) :
1. Créez un silence d’environ 0,1 seconde sous le nom silence.wav
2. Sous Flash, importez le fichier silence.wav (Fichier - Importer)
3. Insérez une couche nommée silence et placez une occurrence de silence.wav sur la
scène
4. Faites Fenêtre - Panneau - Son ou Bouton droit sur l’échelle temporelle et Panneau –
Son
5. Choisir Sync = En continu et Boucles = 1.
6. Sur d’éventuelles autres couches, placez de vrais sons avec la propriété Sync =
Evénement
7. Dans les paramètres de publication, sous l’onglet Flash, choisir :
– Train audio = ADPCM, 5kHz, 2 bit Mono
– Evénement audio = ADPCM, 11kHz, 4 bit Mono
– Et neutralisez les paramètres audio en cochant la case du dessous.
8. Il ne reste plus qu’à compiler votre animation.
2.9 Questions/Réponses
2.9.1 Son QuickTime
Flash sait importer des vidéos .mov mais pas leurs pistes sonores. Dans une note technique,
Macromedia propose d’utiliser les logiciels payants SoundEdit 16 ou QuickTime Pro afin de
convertir la piste son en .wav ou .aiff. Je vous propose une solution gratuite (vous commencez
à me connaitre non ?) :
1. Téléchargez sur www.radgametools.com le freeware RAD Video Tools
2. Installez le logiciel, lancez-le programme radvideo.exe et choisissez le fichier .mov
qui sera à importer sous flash
3. Cliquez sur Convert a file, décochez Convert Video et choisir un format de sortie pour
le son, par exemple 8-bit/stereo. Le fichier de sortie (en haut) doit être un .wav.
4. Cliquez sur le bouton Convert. Vous avez maintenant un fichier son qui s’importe
facilement sous Flash. Remarquez au passage que ce logiciel permet de convertir un
.mov en .avi.
Une question A part l’excellent logiciel (payant) WinGroove qui permet de lire et convertir
des fichiers .mid en .wav, quelqu’un connaît-il un moyen gratuit d’arriver au même résultat ?
Je pensais avoir un bon début de réponse en utilisant tout simplement le lecteur (gratuit)
QuickTime Player 5.0.1 qui, lorsqu’il ouvre un fichier audio .mid propose de le convertir en
.mov (qui en plus a une taille comparable au .mid d’origine !). Hélas, RAD Video Tools ne
semble pas reconnaître ce format ! L’autre idée était d’utiliser WinAmp et sa fameuse
commande Disk Writer ( CTRL+P - Output) qui permet par exemple de convertir des fichiers
.mp3 en .wav. En ajoutant le plug-in VidAmp qui offre à WinAmp la possibilité de lire des
fichiers vidéos (entre autres les .mov), j’ai cru à tort qu’il pourrait convertir le son d’un .mov
en .wav. Donc pour le moment je ne sais pas convertir gratuitement un .mid (ou .mov audio)
33
TD ActionScript
en .wav ou .mp3 afin de l’importer sous Flash. A défaut, existe-t-il un équivalent gratuit de
Total Recorder qui permet d’enregistrer en .wav ou .mp3 n’importe quel son provenant d’une
application ou de l’extérieur ? ?
2.9.2 Convertir un .swf en .avi
Une fonction ma foi très originale du freeware RAD Video tools est de pouvoir convertir
directement un fichier .swf en .avi ! Bien entendu, cela n’a d’intérêt que si vous partez d’un
.swf dont vous n’avez pas ou plus la source. Si vous avez le .fla, utilisez plutôt la procédure
vue plus haut. De plus, si l’animation comporte de l’ActionScript, il est peu probable que la
conversion se passe bien...
Utilisez ensuite le freeware VirtualDub pour créer des effets spéciaux sur la vidéo. Le fichier
.avi peut alors être converti en :
–
–
–
.mpg par les freewares AVI2MPG2 ou ULEAD MPEG Converter.
.rm par le freeware Real Encoder 5.0 ou RealProducer
.swf ou .mov en l’important sous Flash (Fichier - Importer - Type = Tous) et en le
publiant. Pour que le fichier soit un .mov autonome du .swf, il faut choisir Aplatir
dans l’onglet QuickTime des paramètres de publication.
2.9.3 Une suite ?
Ces quelques pages se veulent une introduction très rapide au passage de Flash à Real Player
et au streaming. N’hésitez pas à me communiquer vos remarques en vue d’améliorer ce
supplément. En attendant, voici quelques liens utiles :
–
–
–
–
–
La vidéo
Utiliser RealProducer
Des guides de real.com http ://service.real.com/help/library/encoders.html
Le streaming http://www.streamingmediaworld.com/smil/tutor/flash5smil_3/
Flash et le streaming http://www.webreference.com/js/tips/
Son sous Flash www.vrprofessionals.com/html/whitepaper/nullsound.htm
34
Eric Schrafstetter
3 Maths
3.1 Nombres aléatoires
3.1.1 Mélanges
Voici une méthode pour mélanger les données d’un tableau :
1. Affectez à l’image 1 de la scène principale l’action :
tableau=new Array();
for (i=0; i<=9; i++) {
tableau[i]="v"+i;
}
trace (tableau);
// Melange par permutations
taille=tableau.length;
for (i=0; i<taille; i++) {
num=Math.floor(taille*Math.random());
temp=tableau[num];
tableau[num]=tableau[i];
tableau[i]=temp;
}
trace ("Tableau melange");
trace (tableau);
stop();
2. Lancez le programme et regardez les valeurs du tableau.
3.2 3D
3.2.1 Matrices de rotation
La rotation d’un angle φ autour de l’axe z (voir figure 3.1) peut être décrite par la matrice
Rφ suivante :
 cos φ 0 − sin φ 


Rφ =  0
1
0 
 − sin φ 0 cos φ 


et la matrice R θ d’un angle θ autour de l’axe y (voir figure 3.1) :
 cos θ

Rθ =  − sin θ
 0

− sin θ
cos θ
0
0

0
1 
Plus généralement, la transformation M(a; b; c) → Rφ R θ (M) s’écrit :
35
TD ActionScript
 a cos θ cos φ − b sin φ − c sin θ cos φ 


Rφ Rθ ( M ) =  a cos θ sin φ + b cos φ − c sin θ sin φ 


− a sin θ + c cos θ


Z
Rφ
Rθ
Y
X
Fig. 3.1 − Rotations élémentaires
Conversion en fonctions Flash :
function rx (a,b,c,theta,phi) {
with (Math) {
return a*cos(theta)*cos(phi)-b*sin(phi)-c*sin(theta)*cos(phi);
}
}
function ry (a,b,c,theta,phi) {
with (Math) {
return a*cos(theta)*sin(phi)+b*cos(phi)-c*sin(theta)*sin(phi);
}
}
function rz (a,b,c,theta,phi) {
with (Math) {
return -a*sin(theta)+c*cos(theta);
}
}
3.2.2 Boules dans l’espace
Voici un exercice sur la rotation de 4 boules dans l’espace. A cela s’ajoute un effet de scale
sur la profondeur.
1. Créez le clip boule représentant une boule. Mettre une occurrence de ce clip à l’image
1 de la scène principale et lui donner le nom boule et étendre par F5 jusqu’à l’image 3.
2. Placez également 3 zones de texte de saisie avec les noms a, b et c.
3. Créez une nouvelle couche pour les actions
4. Ajoutez l’action suivante à l’image 1 de la couche d’action
Maths
36
Eric Schrafstetter
i = 1;
while (i<=4) {
duplicateMovieClip (boule, "b"+i, i);
this["tx"+i] = 200*Math.random()-100;
this["ty"+i] = 200*Math.random()-100;
this["tz"+i] = 200*Math.random()-100;
i++;
}
a=b=c=0.1;
On crée 4 boules d’occurrence b1, b2… à partir de boule et on les place aléatoirement
sur l’écran. Les 3 lignes suivantes attribuent des coordonnées tri-dimensionnelles à ces
4 boules. La dernière ligne permet de donner la valeur 0.1 aux 3 variables.
5. Mettre l’action suivante à l’image 2 de la couche action
with (Math) {
sa = sin(a);
ca = cos(a);
sb = sin(b);
cb = cos(b);
sc = sin(c);
cc = cos(c);
}
i = 1;
while (i<=4) {
rx1 = this["tx"+i];
ry1 = ca*this["ty"+i]-sa*this["tz"+i];
rz1 = sa*this["ty"+i]+ca*this["tz"+i];
rx2 = rx1*cb+rz1*sb;
rz2 = -rx1*sb+rz1*cb;
rx3 = rx2*cc-ry1*sc;
ry3 = rx2*sc+ry1*cc;
this["tx"+i] = rx3;
this["ty"+i] = ry3;
this["tz"+i] = rz2;
scale = 100-rz2/3;
if (scale<0) {
scale = 1;
}
this["b"+i]._alpha = scale;
this["b"+i]._x = 200+rx3;
this["b"+i]._y = 200-ry3;
this["b"+i]._xscale = this["b"+i]._yscale=scale;
this["b"+i].swapDepths((1000-rz2)*500);
i++;
}
On retrouve dans les calculs des rx et ry les matrices de rotation explicitées au
paragraphe précédent. A cela s’ajoute un effet de scale et de transparence alpha
suivant la profondeur z. Les coordonnées (200; 200) sont celles du centre du repère.
6. Mettre l’action gotoAndPlay (2); à l’image clé 3 de la couche action.
7. Lancez l’animation. Mettre b et c à 0 pour voir tourner les 4 boules suivant l’axe 0x.
Augmentez la valeur d’une variable pour accélérer le mouvement.
37
TD ActionScript
3.3 Déformation d’un triangle (Partie 1)
Cet exercice est inspiré d’un tutorial de Pavils Jurjans [email protected]. Quelques
formules, notament sur le calcul de S et h, ont été simplifiées par rapport à l’original. Il s’agit
de transformer par les fonctions _xscale, _yscale et _rotation de Flash, un triangle
équilatéral en un triangle imposé par la donnée de 3 points A,B et C. Contrairement aux
apparences, c’est loin d’être simple ! Heureusement, comme le montre le nombre croissants
d’applications à la 3D, le jeu en vaut la chandelle.
Fig. 3.2 − Relations dans un triangle
Questions :
1. On suppose dans un premier temps que la droite (CB) est horizontale. Montrez que le
rapport m=n est égal à :
m OA 2 + OC 2
−1
=
n
OA × CB
2. Inversement, soit γ un réel positif fixé. Montrez que la valeur α du _xscale dilatant
horizontalement ce triangle dans un rapport m=n égal à γ est :
α=
OC
OA((γ + 1)CB − 1)
3. On suppose le triangle ABC équilatéral (voir figure 3.3). Montrez que le α calculé
précédemment est donné par :
α=
Maths
3
1 + 2γ
38
Eric Schrafstetter
γ=2
A
m
_xscale
n
C
A’
α ≈ 77,46
m=n
B
C’
B’
Fig. 3.3 − Transformation dans le cas γ = 2
4. Soit ABC un triangle quelconque de plus grand côté (AC).
–
Montrez que sa surface est égale à :
S=
–
( x B − x A )( y C − y A ) − ( x C − x A )( y B − y A )
2
En déduire que la hauteur h est :
h=
–
–
2S
AC
Montrez que le signe de (xB − xA)(yC − yA) − (xC − xA)(yB − yA) permet de
déterminer si le point B est au dessus ou en dessous de la droite (AC).
Calculez les coordonnées du barycentre d’un triangle équilatéral. En déduire
que la distance entre le milieu de la hauteur et le barycentre est
AC 3
≈ 0,144 × AC
12
Réponses
1. Cela provient des relations élémentaires suivantes :
n = CB cos β
m = AC − n
OA
AC =
cos β
donc
m
OA
=
−1
n CB cos 2 β
D’autre part
sin β =
h
OC
=
CB
OA2 + OC 2
et
cos 2 β = 1 − sin 2 β
Il suffit de remplacer cos 2 β par son écriture suivant les termes OC, CB et OA.
39
TD ActionScript
2. En substituant OA à αOA, et CB à αCB dans la première équation on obtient :
α 2 OA 2 + OC 2
−1 = γ
α 2 OA × CB
On isole ensuite le α.
3
, d’où :
2
CB 2 3CB 2
+
α2
4
4 −1 = γ
α 2 CB 2
2
3. On a OA = CB / 2 et OC = h = CB
et l’on isole le α.
4. Triangle quelconque :
–
S est la demi somme de la norme du produit vectoriel des vecteurs AB et AC ,
d’où :
S=
1 xB − x A
2 yB − y A
xC − x A
yC − x A
On a bien le résultat annoncé.
– La surface d’un rectangle est la base par la hauteur sur 2.
– On compare les pentes des droites (AB) et (AC), c’est-à-dire les nombres
y − yA
yB − y A
et C
xB − x A
xC − x A
–
AC 3
.
6
AC 3
AC 3
Le centre ayant pour ordonnée
, la différence donne bien
.
4
12
L’ordonnée du barycentre G est égal au tiers de la hauteur, soit yG =
Une fois que l’on a transformé le triangle équilatéral dans un rapport m=n, on place par
rotation le grand côté (AC) horizontalement, on effectue un _xscale puis un _yscale afin
qu’il ait les dimensions voulues puis une nouvelle rotation pour le mettre dans la bonne
direction. Passons à la pratique !
Application fondamentale :
1. Créez un clip nommé equi avec le dessin d’un triangle équilatéral dans le sens ∆.
2. Utilisez la fenêtre info pour lui donner les dimensions L = 100 et H = 86,6 (qui
100 3
correspond à la hauteur
)
2
3. Mettre le barycentre du triangle exactement sur la croix (coordonnées centre X = 0 et
Y = −14,4). Voir figure 3.4
Maths
40
Eric Schrafstetter
Fig 3.4 − Positions des centres des clips
4. Créez un clip nommé tri3 et mettre une occurrence du clip equi sur son image 1
avec pour nom type.
5. Créez un clip nommé tri2 et mettre une occurrence du clip tri3 sur son image 1
avec pour nom base.
6. Sur la scène principale, mettre une occurrence du clip tri2 avec pour nom tri1.
Pourquoi tant de niveaux ? Parce que nous devons effectuer plusieurs scales et
rotations. Essayez d’appliquer une rotation à un clip puis un _xscale, vous verrez que
ce dernier n’est pas appliqué horizontalement mais suivant l’angle de la rotation !
7. Créez un bouton bt représentant un petit disque (L = H = 6 par exemple)
8. Créez un clip nommé ptA avec une occurrence du bouton bt au centre du clip (X = Y
= 0). Ajoutez l’action suivante au bouton :
on (press) {
startDrag ("", true);
}
on (release) {
stopDrag();
}
9. Mettre une occurrence du clip ptA sur la scène principale avec pour nom A
10. De la même façon, créez deux autres clips ptB et ptC avec leurs occurrences
respectives B et C sur la scène principale.
11. Créez un clip vide et placez-en une occurrence sur la scène principale avec l’action :
onClipEvent (mouseMove) {
with (_root) {
Tracer(tri1, A._x, A._y, B._x, B._y, C._x, C._y);;
}
}
with (_root) {
}
}
12. Action sur l’image 1 de la scène principale
41
TD ActionScript
function Tracer (triangle, x1, y1, x2, y2, x3, y3) {
abx = x1-x2;
aby = y1-y2;
cax = x3-x1;
cay = y3-y1;
bcx = x2-x3;
bcy = y2-y3;
S = abx*cay-cax*aby;
dir = (S<0) ? 1 : -1;
ab = abx*abx+aby*aby;
ca = cax*cax+cay*cay;
bc = bcx*bcx+bcy*bcy;
with (Math) {
mx = max(ab, max(ca, bc));
hh = S*S/mx;
with (triangle) {
if (mx == ab) {
r = (bc-hh)/(ca-hh);
_rotation = atan2(-aby, -abx)*180/PI;
base.type._rotation = 0;
_x = x2;
_y = y2;
} else if (mx == bc) {
r = (ca-hh)/(ab-hh);
_rotation = atan2(-bcy, -bcx)*180/PI;
_x = x3;
_y = y3;
} else {
r = (ab-hh)/(bc-hh);
_rotation = atan2(-cay, -cax)*180/PI;
_x = x1;
_y = y1;
}
pp = 1.73205081/sqrt(1+2*sqrt(r));
rr = sqrt(pp*pp+3)/2;
base._xscale = 100*pp;
base._rotation = atan(1.73205081/pp)*180/PI;
_xscale = sqrt(mx)/rr;
_yscale = 1.15470054*sqrt(hh)*rr/pp*dir;
}
}
}
stop ();
13. Compilez, lancez et déplacez les points A, B et C. Si le triangle ne touche pas
exactement les trois points mobiles, assurez-vous du bon positionnement des centres
des clips (voir figure 3).
3.4 Anaglyphes géométriques 3D
Avant de vous lancer dans cet exercice, il faudra vous munir d’une paire de lunette avec des
verres rouge/vert ou rouge/bleu Obtenir des adresses). La conversion d’images bitmap en
anaglyphes 3D est une chose assez simple à faire, soit en utilisant des logiciels (voir freeware
Maths
42
Eric Schrafstetter
sur http ://www.stereoeye.com/) ou directement par manipulation sous Photoshop/Paint Shop
Pro (voir ma page 3D).
Le principe repose sur le Théorème de Thalès (voir figure 3.5) :
Fig. 3.5. − Principe des anaglyphes
OG OD OOG
=
GD
OG
et
OG OD =
OOG × GD
OOG + GOG
Dans la pratique, l’écartement des yeux est GD ≈ 6,3cm et la distance yeux-écran vaut
environ GOG ≈ 70cm. Par exemple, si vous voulez que votre point apparaîsse à 25cm hors de
l’écran, la distance entre les points bleu et rouge devra être de OGOD ≈ 1,66cm.
Manipuler un triangle dans l’espace :
S’il y a de petits enfants qui font ce tutorial (?!), je pense vraiment que l’abus de ces lunettes
devant ton écran n’est pas bon pour tes yeux...
1. Reprendre la manipulation sur la déformation d’un triangle et ajoutez une occurrence
du clip tri2 sur la scène principale avec pour nom trirouge.
2. Pour créez le triangle bleu ciel à partir de tri1, utilisez le panneau effet avec les options
: Avancé – Rouge = (−100%×R) −255, Vert = (10%×V)+255, Bleu = (100%×B)+255,
Alpha = (50%×A)+0. Pour ajuster correctement les coefficients, prendre vos lunettes,
regardez le triangle bleu uniquement à travers le filtre bleu et faîtes varier la valeur de
la composante verte (ne pas toucher au rouge) jusqu’à ce que le triangle disparaisse.
Regardez ensuite le triangle bleu à travers le filtre rouge, vous devez le voir
correctement.
3. Idem avec le triangle rouge trirouge : Avancé – Rouge = (100%×R)+255, Vert = (
−100%×V)+0, Bleu = (−100%×B)+0, Alpha = (50%×A)+0
43
TD ActionScript
4. Faîtes un copier-coller des trois points A;B et C de la scène et renommez-les A2, B2 et
C2. Vous avez maintenant 6 points sur la scène principale, un clip vide et 2 triangles :
un bleu et un rouge.
5. Utilisez le panneau info pour superposer les points A et A2, idem avec les points B et
B2 puis C et C2.
6. Mettre un effet alpha=0 sur les 6 points afin qu’il disparaissent pendant l’animation.
7. Changez la fin de l’action sur l’image 1 de la scène principale en :
function Tracer (triangle, x1, y1, x2, y2, x3, y3) {
...
_yscale = 1.15470054*sqrt(hh)*rr/pp*dir;
}
}
A._y=A2._y;
B._y=B2._y;
C._y=C2._y;
if (A._x>A2._x) {
A._x=A2._x;
}
if (B._x>B2._x) {
B._x=B2._x;
}
if (C._x>C2._x) {
C._x=C2._x;
}
}
Tracer(tri1, A._x, A._y, B._x, B._y, C._x, C._y);
Tracer(trirouge, A2._x, A2._y, B2._x, B2._y, C2._x, C2._y);
stop ();
Ceci permet de mettre d’une part le triangle bleu toujours à gauche du triangle rouge et
d’autre part que les ordonnées des points soient bien alignées horizontalement.
8. Changez l’action du clip vide en :
onClipEvent (keyDown) {
if (key.isDown(Key.DOWN)) {
_root[lettre]._x--;
} else if (key.isDown(Key.UP)) {
_root[lettre]._x++;
} else if (key.isDown(65)) {
lettre = "A";
lettre = "B";
lettre = "C";
}
with (_root) {
}
}
with (_root) {
}
}
Maths
44
Eric Schrafstetter
with (_root) {
}
}
lettre = "B";
}
Ainsi, vous pourrez avec le clavier choisir le point à modifier (A;B ou C) et éloigner ou
rapprocher ce point avec les flèches haut et bas.
9. Compilez et lancez l’animation. Mettez vos lunettes et restez appuyez sur la flèche
vers le bas, un des coins doit sortir de l’écran (c’est le point B). Tapez sur la touche A
et à nouveau sur la flèche vers le bas, un autre coin sort de l’écran.
10. Vous pouvez également modifier la forme du triangle grâce à la souris.
3.5 Perspectives frontales et obliques
Merci au centre IGESA de Biscarrosse avec leurs chalets aux chambres cubiques de m’avoir
donné cette idée d’exercice...
3.5.1 Méthode pratique
La figure 3.6 montre comment tracer un cube en perspective à partir de ses projections en plan
(vue du dessus) et en élévation (vue de côté). Le point V représente le point de vue (l’oeil est
sur la figure un peu au dessus du cube), le plan T est le plan vertical (imaginaire) sur lequel
prend place le dessin, dans notre cas l’écran de l’ordinateur.
La méthode peut se résumer à :
1. Tracez le point V et la droite T (représentant le plan vu de côté). Mettre les même
distances entre V et T sur les 2 coupes.
2. Dessinez les vues de l’objet (pas nécessairement un cube !).
3. Tracez les segments [V A], [V B]... qui coupent la droite T en certains points.
4. Tracez les perpendiculaires à T en ces points.
5. Utilisez les points d’intersections de ces nouvelles droites pour tracer l’objet en
perspective.
45
TD ActionScript
Fig.3.6 − Perspective d’un cube
3.5.2 Les formules...
Exercices
1. Soit V un point de vue dans l’espace, T un plan ne passant pas par V et A un point
dans le demi-espace ne contenant pas V (voir figure 3.7). Déterminez le vecteur VA'
en fonction des vecteurs VA et n = VV ' où n est normale (perpendiculaire) au plan T.
Fig.3.7 − Projection sur le plan T
Maths
46
Eric Schrafstetter
2. Cas particulier de la projection sur le plan Oxy. Déterminez les coordonnées du
vecteur VA' lorsque V (x0; y0; z0) avec z0 < 0, n = (0; 0;−z0) (c’est-à-dire que l’oeil est
à la distance |z0| de l’écran) et A(xA; yA; zA) avec zA > 0.
3. Intérieur d’un cube :
(a) Tracez sur l’écran T= Oxy la perspective d’un cube de rayon R et de centre O
lorsque le point de vue en V (0; 0;R).
(b) On suppose que l’écran de l’ordinateur est carré et de côté L. Trouvez les
formules donnant les coordonnées d’un point (x; y; z) du cube sur l’écran.
(c) Par quel facteur doit-on multiplier ces coordonnées pour que la face arrière du
cube prenne tout l’écran ? (Cas particulier : L = 400 et R = 100)
Corrigé
1. Remarquons que le plan T est l’ensemble des points M vérifiant :
V ' M .n = 0
C’est-à-dire les points tels que le vecteur V ' M soit orthogonal à n . Par la relation de
Chasles, ceux sont donc également les points M vérifiant :
(V 'V + VM ).n = 0
soit :
VM .n = n 2
où n est la norme du vecteur n .
Comme VA' est de la forme λVA et que le point A’ appartient au plan T, le réel λ doit
vérifier :
λVA.n = n 2
d’où
VA' =
n2
VA
VA.n
2. Dans le cas particulier, les coordonnées du vecteur VA' dans le plan Oxy sont donc :
z0

 x0 + ( x A − x0 ) z − z
0
A
VA' = 
z0
 y0 + ( y A − y0 )

z0 − z A
puisque
VA.n = ( x A − x 0 ) × 0 + ( y A − y 0 ) × 0 + ( z A − z 0 ) × (− z 0 )
et n 2 = 0 2 + 0 2 + (− z 0 ) 2 = z 02
3. Intérieur d’un cube
(a) Voir la construction figure 3.8.
47
TD ActionScript
Fig 3.8 − Construction de la perspective
(b) On utilise les questions précédentes pour voir que les coordonnées sont :
R

 x' = x R − z

R
 y' = y
R−z

 R R R
(c) Comme le point C a pour coordonnées C  − , ,−  , on trouve :
 2 2 2
R

 x' = − 3
C' = 
R
 y' =
3

2R
à l’écran L × L en multipliant par le
3
coefficient 3L/2R. Ainsi, pour tracer le cube en perspective au centre de
l’écran, nous avons la formule générale :
(d) On passera du carré CDGH de côté
3L
 ecran L
= +
x
 x
2 2( R − z )

L
3L
 y ecran = −
y

2 2( R − z )
Maths
48
Eric Schrafstetter
Dans le cas particulier L = 400 et R = 100, le cofficient vaut 6 et l’on a donc :
600
 ecran
= 200 +
x
x
100 − z

600
 y ecran = 200 −
y
100 − z

3.5.3 Manipulation d’un cube
Nous avons tous les ingrédients pour tracer un objet 3D et le manipuler !
1. Lancez Flash puis Modification - Animation pour mettre les dimensions de
l’animation à 400 × 400
2. Créez une ligne du centre vers le bas à droite à 45° avec pour fenêtre info : L = 100, H
= 100, X = 0 et Y = 0 (Cf exercice sur le fil élastique)
3. Transformez cette ligne en symbole nommé ligne et en mettre une occurrence sur la
scène principale avec pour nom arete. Ce sera le modèle de l’arête de notre cube.
4. A l’image 1 de la scène principale mettre l’action :
R = 100;
L = 100;
cangle = Math.cos(Math.PI/18);
sangle = Math.sin(Math.PI/18);
var coins = [1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1,
-1, 1, 1, 1, 1, -1, 1, -1, -1, 1, -1, 1, 1];
var faces = [0, 1, 2, 3, -1, 4, 7, 6, 5, -1, 0, 4, 5,
1, -1, 1, 5, 6, 2, -1, 2, 6, 7, 3, -1, 4, 0, 3, 7, -1];
for (i=0; i<=faces.length-1; i++) {
arete.duplicateMovieClip("ar"+i, 1+i);
}
ecran = new Array();
function affiche () {
for (i=0; i<=7; i++) {
coeff = 3*L/(2-coins[3*i+2])/2;
ecran[2*i] = 200+coins[3*i]*coeff;
ecran[2*i+1] = 200+coins[3*i+1]*coeff;
}
for (i=0; i<faces.length-1; i++) {
p = faces[i];
if (p>=0) {
this["ar"+i]._x = ecran[2*p];
this["ar"+i]._y = ecran[2*p+1];
q = faces[i+1];
if (q == -1) {
q = faces[i-3];
}
this["ar"+i]._xscale = ecran[2*q]-ecran[2*p];
this["ar"+i]._yscale = ecran[2*q+1]-ecran[2*p+1];
}
}
}
}
function rotx (d) {
for (i=0; i<=7; i++) {
tz = coins[3*i+2];
ty = coins[3*i+1];
49
TD ActionScript
coins[3*i+2] = tz*cangle-ty*d*sangle;
coins[3*i+1] = ty*cangle+tz*d*sangle;
}
}
function roty (d) {
for (i=0; i<=7; i++) {
tx = coins[3*i];
tz = coins[3*i+2];
coins[3*i] = tx*cangle-tz*d*sangle;
coins[3*i+2] = tz*cangle+tx*d*sangle;
}
}
affiche();
stop ();
Quelques explications sur le script :
Les coordonnées (x; y; z) des coins sont placées dans le tableau coins et les différentes
liens (de 0 à 1, puis de 1 à 2, de 2 à 3 et de 3 à 0. Recommencer de 4 à 7, puis de 7 à
6...). Pourquoi ce format ? Parce que vous pouvez facilement récupérer ces
coordonnées en enregistrant un objet au format VRML. Par exemple avec l’excellent
logiciel 3D gratuit Blender, ou encore avec Corel 3D, 3D Studio Max... La formule
donnant le coefficient coeff s’obtient par :
3L
2
1
xR
3L
=
R 2
R(2 − z )
R−z
2
Les coordonnées des points à l’écran sont mis dans le tableau ecran.
5. Créez un bouton représentant une flèche vers le haut et lui mettre l’action :
on (release) {
rotx(-1);
affiche();
}
6. Créez un bouton représentant une flèche vers le bas et lui mettre l’action :
on (release) {
rotx(1);
affiche();
}
7. Créez un bouton représentant une flèche vers la gauche et lui mettre l’action :
on (release) {
roty(1);
affiche();
}
8. Créez un bouton représentant une flèche vers la droite et lui mettre l’action :
on (release) {
roty(-1);
affiche();
}
Maths
50
Eric Schrafstetter
9. Créez un second bouton représentant une flèche vers le haut et lui mettre l’action :
on (release) {
_root.L-=5;
if (_root.L<5){
_root.L=5;
}
affiche();
}
Ceci aura pour effet d’éloigner le cube.
10. Créez un second bouton représentant une flèche vers le bas et lui mettre l’action :
on (release) {
_root.L+=5;
affiche();
}
Ceci aura pour effet de rapprocher le cube.
11. Compilez et lancez l’animation. Utilisez les flèches pour manipuler le cube. Si vous
trouvez que la perspective est ”sévère”, n’oubliez pas que nous sommes dans le cas
particulier ou l’oeil est situé à la distance R du plan T ! Vous pouvez modifier la
distance en remplaçant :
coeff = 3*L/(2-coins[3*i+2])/2;
par :
coeff = R*L/(L-coins[3*i+2]);
Il faudrait écrire z0 à la place de L pour rester cohérent avec les notations précédentes.
3.6 Poser et Amapi
3.6.1 Introduction
Avouons-le franchement, Flash est loin d’être doué en 3D ! Verra-t-on un jour une petite
palette de 3D vectorielle ? En étant optimiste je dirai… pas sûr ! Si vous voulez de la vraie 3D
dynamique sur le web, voyez par exemple O2C, Shockwave 3D ou ViewPoint…
Il existe des logiciels payants permettant d’exporter des objets ou animations 3D au format
.swf. Citons Swift 3D, Poser ProPack, Vecta 3D, Plug-in pour 3D Studio Max… Nous allons
ici simplement créer quelques objets et animations 3D à l’aide d’excellents logiciels devenus
gratuits, comme Poser 3 ou Amapi 4.15
3.6.2 Amapi v4.1.5 (Freeware)
Vous pouvez télécharger gratuitement la version 4.1.5 d’Amapi 3D sur son site officiel, la
version actuellement commercialisée étant la 6.
Amapi est un modeleur 3D d’excellente facture. Il n’est cependant pas aisé de trouver de la
documentation sur ce logiciel, du moins en français et pour la version 4 !
51
TD ActionScript
Nous verrons 3 utilisations d’Amapi, son exportation au format Illustrator, au format bmp et
3ds (3D Studio Max). Le but étant à chaque fois d’obtenir une image vectorielle sous Flash de
poids relativement faible.
Raccourcis
Touches
0, 1, 2… 9
Flèches
+ ou Espace
Description
Visions de la scène
Tourner autour de l’objet
Efficacité de l’outil
Bascule entre les différents modes d’un outil
Changement d’axes
Différents types d’affichage
−
−
Edition – Préférences – Interface – Atelier
Pour voir les différents menus de droite, tapez sur la touche Espace ou amenez la
baguette sur le bord droit de la fenêtre d’Amapi
− Exportation en Illustrator puis vers Flash Exportation en .bmp puis Tracer Bitmap
_
_
Exportation en Illustrator puis vers Flash
Exportation en .bmp puis Tracer Bitmap
Exemple 1 – Illustrator
− Cliquez sur l’outil Sphère
− Sur la scène, pressez le bouton gauche de la souris puis glisser pou r définir le rayon
− Touche TAB pour définir manuellement le nombre de points ou +/ − Validez par Entrée
_
_
− Cliquez sur le bouton matière en bas à droite
− Choisissez une couleur en modifiez éventuellement les autres paramètres
− Fichier – Exporter – Illustrator
− Côchez Couleurs et Dégradés en bas (vous pouvez garder les dimensions proposées)
− Dessinez alors un rectangle un peu plus grand que la sphère
− Amenez le rectangle sur la sphère puis cliquez
− Enregistrez sous le nom sphere.ai
− Lancez Flash et Fichier – Importer puis récupérez le fichier Illustrator
− Choisir Calques et décocher Inclure les calques invisibles
_
_
_
_
_
_
_
Maths
52
Eric Schrafstetter
Exemple 2 – Tracer Bitmap
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
Créez un cylindre avec Amapi
Utilisez la palette de couleurs pour choisir une teinte
Rendu – Paramètres de rendu
Anti-Aliasing = 3 et côchez Ombre
NE PAS côcher Lissage Automatique puis OK
Rendu – Colorier la scène. Changez éventuellement la vue si elle ne vous plait pas.
Echap et Rendu – Enregistrer une image
Choisir comme type .bmp
Lancez Flash et Importez le .bmp
Cliquez sur l’image et Modification – Tracer le bitmap
Seuil de couleur = 40 (plus la valeur est faible, plus il y aura de couleurs distinctes)
Zone minimum = 100 pixels et Normal pour les 2 derniers paramètres
Cliquez sur la couleur de fond de la forme et supprimez-là
Vous pouvez également ouvrir la bibliothèque et supprimer le bitmap d’origine
Sélectionnez la forme sur la scène par CTRL+A puis Modification – Optimiser
_
_
_
_
_
_
_
_
_
Animation de textes 3D
− Voir plus loin Amapi + Poser + Flash
3.6.3 Flash et Poser
Poser est un logiciel assez unique permettant d’imaginer et d’animer des personnages 3D.
Freeware Poser 3
La version 3 de Poser est désormais gratuite et téléchargeable sur le net. N’oubliez pas de
télécharger le patch pour la version 3 sur le site officiel. Les versions actuelles sont Poser 5 et
Poser Pro Pack, cette dernière version permettant d’exporter directement au format .swf. Avec
un peu de patience, on peut se satisfaire de la version gratuite !
Beaucoup de documentations sur le net, sans parler des 232 pages du PDF en français que
vous trouverez au moment de l’installation.
− http://members.tripod.com/~the_great_site/posertut.shtml renferme un nombre
impressionnant de liens Internet
− http://www.curiouslabs.com/downloads/html/advancedUserGuide.html la suite du
guide Poser 3 en anglais
− http://www.greylight.com/poserfigures.html des caractères à charger
53
TD ActionScript
Tracer Bitmap
− Lancez Poser
− Choisir un personnage en cliquant sur la poignée à
droite (Par exemple ‘Autre Personnages – Femme
bâton’)
− Fenêtre – Outils d’animation et remplacez le numéro de
l’image finale 30 par 20
− Fenêtre – Simulateur de marche
− Je vous laisse jouer avec les différents paramètres !
Appliquer – Dernière image = 20 et Marcher sur place
− OK et Terminer
− Mode Croquis (ALT+CTRL+7)
− Animation – Créer un Film – Anti-Aliasing, Type =
Bitmaps
− Importez la première image sous Flash et répondre Oui
pour importer les autres
− Pour transformer les bitmaps, faire CTRL+A et ALT+M+B
(Modification – Tracer le bitmap). Vous pouvez
également faire Edition – Raccourcis Clavier, choisir
Modification – Tracer le bitmap et lui associer un
raccourci du type CTRL+F9, ce sera beaucoup plus
pratique. Les paramètres du tracé peuvent être Seuil =
40, Zone = 30 pixels.
− Faîtes la manip pour les 20 images !
− Pour optimiser en une seule fois toutes les images,
_
_
_
_
_
_
_
−
_
_
_
cliquez sur Modifier plusieurs images
puis étendez
la pelure d’oignon
− Faîtes ensuite CTRL+A et Modification – Optimiser
_
− Lancez Amapi
− Utilisez l’outil T pour taper un titre
− Faîtes Fichier – Exporter – 3D Studio
− Donnez le nom titre.3ds
− Quitter Amapi
− Lancez Poser et cliquez sur le personnage puis
_
_
_
Suppr
−
−
−
−
Faîtes Fichier – Importer – 3D Studio
Récupérez titre.3ds
Créez une petite animation sous Poser
Exportez sous la forme d’images Bitmaps comme
précédemment
− Quittez Poser
− Lancez Flash et créez un clip nommé titre
_
_
_
_
_
_
Maths
54
Eric Schrafstetter
−
−
_
_
Importez les images .bmp
Séparez les bitmaps
Bibliothèque pour Poser 3
Vous trouverez dans le répertoire d’installation de Poser (Poser 3\Runtime\Bibliothèques)
différents autres répertoires :
− Personnages (.cr2)
− Poses (.pz2)
− Visages (.fc2)
_
_
Vous pouvez télécharger ou acheter ces types de fichiers et les ajouter dans ces répertoires
afin de les retrouver dans votre logiciel Poser. Attention cependant aux compatibilités entre
les versions 3 et 4.
Contours vectoriels
Il s’agit cette fois de n’obtenir que les contours des dessins. Les 2 logiciels gratuits que je
vous présentent permettent de trouver et convertir ces contours en images vectorielles.
Méthode 1 avec Wintopo
On utilisera en plus de Poser, le freeware Wintopo 1.11 qui permet de convertir des images
en vectoriel
−
−
−
−
−
−
−
−
Lancez Poser et créez une pose ou une animation
Choisir Style Personnage = Silhouette (ALT+CTRL+1)
Animation – Créer un film
Type de séquence = Fichiers Bitmap
Qualité = Réglages en cours et OK
Choisir un nom de sortie
Lancez Wintopo et ouvrez le bitmap
Cliquez sur les boutons CN (Détection des contours) puis VE (Conversion en
vecteurs)
− File – Save Vector As puis choisir .dxf comme type et donnez un nom au fichier
− Lancez Flash et Importez le fichier .dxf
− Utilisez éventuellement l’outil Modification – Optimiser pour réduire la taille
_
_
_
_
_
Méthode 2 avec IrfanView et ras2vec
Je ne vous parle plus du freeware IrfanView qu’il faut absolument posséder ! Quant à
ras2vec, voir mon chapitre sur les Outils de conversions.
− Lancez Poser et mettre le personnage et mode silhouette (ALT+CTRL+1)
− Faîtes Vue – Couleur d’arrière plan (ou CTRL+Clic sur l’icône correspondante) et
mettre cette couleur en blanc
− Vue – Couleur premier plan (couleur du personnage) et mettre la couleur à noire
− Placez un personnage sur la scène
_
_
55
TD ActionScript
−
_
Fenêtre – Outils d’animation et mettre 17 images clé en cliquant sur le 30 initial
− Cliquez ensuite sur Pose – Rubrique Animation - Frappé en Arrière et OK
− Animation – Créer un film – Type = Bitmap avec Qualité = Réglages en cours et
AntiAliasing
− Vous obtenez alors 17 images bitmaps qui doivent être transformée en N&B 1
bit/pixel. Pour cela, lancez IrfanView
− Fichier Convertir/Renommer en série
− Retrouvez le répertoire de vos 17 images et cliquez sur Ajouter tous
− Travail = Convertir en série, Type = BMP, Options Avancées = 2 couleurs, Choisir un
répertoire de sortie et cliquez sur Action !
− Vous avez maintenant 17 nouvelles images en 2 couleurs
− Lancez ras2vec (mode DOS) et allez dans le répertoire contenant ces images Tapez
la commande suivante :
_
_
_
_
ras2vec –d –m *.bmp
− 17 nouvelles images .emf
− Lancez Flash et choisir comme dimension de la scène celle que vous aviez pour
l’animation (généralement 640x640).
− Faîtes CTRL+2 pour afficher tout la scène
− Importez la première image et répondre Oui pour que toutes les autres images soient
− importées.
_
_
_
Conclusion
J’espère vous avoir donné l’envie de télécharger les logiciels Amapi et Poser qui, vous l’avez
constaté vous permettent d’entrer de plein pied dans l’univers de la 3D ou du cartoon.
Maths
56
Eric Schrafstetter
3.7 Fonctions élémentaires de Flash 4
Il s’agit d’observer comment Flash 4 calcule en interne les fonctions élémentaires sinus, cos,
racine carrée, logarithme, exponentielle… Nous utiliserons pour cela le décompilateur gratuit
flasm dont j’ai déjà parlé et Flash 4, 5 ou MX. http://flasm.sourceforge.net/
3.7.1 Flash 4
Sinus
1. Lancez Flash et enregistrez sous le nom sin.fla
2. Tapez l’action suivante :
x=2
Math.sin(x);
3. Choisir Flash 4 comme paramètre de publication (Fichier – Paramètre de publication)
4. Compilez par MAJ+F12
5. Décompilez avec flasm dans une fenêtre DOS grâce à la commande :
flasm –d sin.swf>sin.txt
6. Ouvrez le fichier sin.txt ainsi créé :
frame 0
push 'x'
push '2'
setVariable
push '/:$X'
push 'x'
getVariable
setVariable
push '/:$X2'
push '/:$X'
getVariable
push '/:$X'
getVariable
multiply
setVariable
push '/:$X'
getVariable
push '1'
push '/:$X2'
getVariable
push '1'
push '6'
divide
push '/:$X2'
getVariable
push '1'
push '120'
divide
push '/:$X2'
getVariable
push '1'
push '5040'
divide
push '/:$X2'
getVariable
push '1'
push '362880'
divide
push '/:$X2'
getVariable
push '1'
push '39916800'
divide
multiply
subtract
multiply
subtract
multiply
subtract
multiply
subtract
multiply
subtract
multiply
pop
end // of frame 0
La méthode utilisée est une approximation polynomiale de la fonction sinus pour x ∈ [0,π]
sin( x) ≈ x −
57
x 3 x 5 x 7 x 9 x 11
+
−
+
−
3! 5! 7! 9! 11!
TD ActionScript
qui peut s’écrire (algorithme d’Hörner)

1
1
1
1 
1
sin( x) ≈ x1 − x 2  − x 2  − x 2  − x 2  − x 2     
 3!

11!     
 9!
 7!
 5!


L’erreur maximale commise est de 4 x10-4 pour x ∈ [0,π].
L’algorithme utilisé par Flash 4 consiste à créer une pile. Par exemple pour sin(2)
$X
2
1
$X2
4
1/3 !
1/6
$X2
4
1/5 !
1/120
$X2
4
1/7 !
1/5040
$X2 1/9 ! $X2 Haut
4 1/36..0 4 1/39..0
$X2
4
1/7 !
1/5040
$X2 1/9 ! Haut
4 1/36..0 4 x 1/39..0
$X2
4
1/7 !
1/5040
$X2 Haut
4
1/36..0 - 4 x 1/39..0
On multiplie les 2 éléments du haut de la pile :
$X
2
1
$X2
4
1/3 !
1/6
$X2
4
1/5 !
1/120
On soustrait les éléments du haut de la pile :
$X
2
1
$X2
4
1/3 !
1/6
$X2
4
1/5 !
1/120
On recommence à multiplier puis soustraire 5 fois.
Remarque : Si vous tapez l’action
x=500
trace(Math.sin(x))
puis compilez… le résultat est aberrant : -1.22270940585068e+22 !!
Par contre trace(Math.sin(500)) renvoie la bonne valeur.
Maths
58
Eric Schrafstetter
Cosinus
La méthode est la même que pour le sinus en utilisant le développement :
cos( x) ≈ 1 −
x 2 x 4 x 6 x 8 x10 x 12
+
−
+
−
+
2! 4! 6! 8! 10! 12!
et la factorisation de Hörner.
Logarithmes
Utilisez le code :
x=2
Math.log(x);
Rappelons que la fonction logarithme népérien est définie sur les réels strictement positifs.
On montre en mathématique que si |x|<1 alors :
x2 x3
xn
+
− ... + (−1) n +1
+ ...
2
3
n
x2 x3
xn
ln(1 − x) = − x −
−
− ... −
− ...
2
3
n
ln(1 + x) = x −
On en déduit que :


x3 x5
x 2 n +1
ln(1 + x) − ln(1 − x) = 2 x +
+ ... +
+ ... 
3
5
2n + 1


d’où
1 1+ x 
x3 x5
x 2 n +1
ln
=
x
+
+
...
+
+ ...

2 1− x 
3
5
2n + 1
La fonction de gauche s’appelant Argth (Inverse de la fonction tangente hyperbolique…)
Comment, à partir de cette dernière formule trouver la valeur de ln(y) pour un réel y
strictement positif ?
1+ x
y −1
, on en déduit facilement que x =
. Remarquez que l’on a alors |x| < 1
1− x
y +1
et le développement est donc valable. Précisément, pour y>0 on a :
Posons y =
ln( y ) = x +
avec x =
x3 x5
x 2 n +1
+ ... +
+ ...
3
5
2n + 1
y −1
. C’est l’algorithme qu’utilise Flash 4 en cherchant la somme des 128 premiers
y +1
termes.
59
TD ActionScript
frame 0
push 'x'
push '2'
setVariable
push '/:$X'
push 'x'
getVariable
setVariable
push '/:$X1'
push '/:$X'
getVariable
push '1'
subtract
push '/:$X'
getVariable
push '1'
oldAdd
divide
setVariable
push '/:$X'
push '0'
setVariable
push '/:$X2'
push '1'
setVariable
En clair
push '/:$X3'
push '/:$X1'
getVariable
x=2
push '/:$X1'
getVariable
multiply
setVariable
X=x=2
label1:
push '128'
push '/:$X2'
getVariable
oldLessThan
X-1
not
not
branchIfTrue
label2
X+1
push '/:$X'
(X-1) / (X+1) push '/:$X'
X1 =
getVariable
(X-1)/(X+1) push '/:$X1'
getVariable
push '2'
X=0
push '/:$X2'
getVariable
multiply
X2=1
push '1'
subtract
divide
oldAdd
setVariable
push '/:$X1'
push '/:$X1'
X3 = X1 ² getVariable
label1
push '/:$X3'
getVariable
multiply
setVariable
Si
push '/:$X2'
X2 > 128 push '/:$X2'
aller
en getVariable
label2
push '1'
oldAdd
setVariable
branch label1
label2:
push '2'
push '/:$X'
getVariable
multiply
pop
end // of frame
2X2
0
2X2 – 1
X1 / (2X2 – 1)
X+X1/(2X2–1)
mettre dans X
X1 = X1 * X3
X2+1
X2=X2+1
label2
2X
Racine carrée
Flash 4 utilise la méthode de Héron d’Alexandrie (premier siècle de notre ère !). C’est
également un cas particulier de la méthode de Newton. Pour calculer la racine carrée de x
positif, on définit la suite (xn) n suivante :
 x0 = x

 x = 1  x + x 
 n +1 2  n x n 



Cette suite converge vers la racine carrée de x. En effet, il est clair (par récurrence) que les
termes xn sont tous positifs. De plus, en posant :
x − x
un = n
xn + x
On montre facilement que u n +1 = u n2 et comme u n < 1 , la suite un tend vers 0. D’où xn qui
tend vers
x .
Flash s’arrête lorsque x n2+1 − x < 10 −5 . Voici le programme lorsque x = 123
Maths
60
Eric Schrafstetter
frame 0
push 'x'
push '123'
setVariable
push '/:$X1'
push 'x'
getVariable
setVariable
push '/:$X2'
push '/:$X1'
getVariable
push '2'
divide
setVariable
label1:
push '1e − 005'
push '/:$X'
push '/:$X2'
getVariable
push '/:$X2'
getVariable
multiply
push '/:$X1'
getVariable
subtract
setVariable
push '/:$X'
getVariable
push '0'
oldLessThan
branchIfTrue label2
En clair
x = 123
X1 = x
X2 = X1 / 2
label 1
X = X2 ² - X1
push '/:$X'
getVariable
branch label3
label2:
push '0'
push '/:$X'
getVariable
subtract
label3:
oldLessThan
not
branchIfTrue label4
push '/:$X2'
push '0.5'
push '/:$X2'
getVariable
push '/:$X1'
getVariable
push '/:$X2'
getVariable
divide
oldAdd
multiply
setVariable
branch label1
label4:
push 'y', '/:$X2'
getVariable
setVariable
end // of frame 0
X en haut de la pile
label2
- X en haut
label3
si 10-5 ≥ haut pile aller
en label 4
X2 = 0.5(X2+X1/X2)
label4
Y = X2 qui est la racine
de x
Si X<0 aller en
label2
Exponentielle
Encore une série ! Celle-ci est valable pour tout réel x :
exp( x) = 1 + x +
x2 x3
xn
+
+ ... +
+ ...
2! 3!
n!
Flash effectue la somme des 128 premiers termes.
Par exemple, pour exp(3) :
frame 0
push 'x'
push '3'
setVariable
61
En clair
x=3
push '/:$X1'
push '/:$X1'
getVariable
push '/:$X2'
TD ActionScript
push '/:$X'
push 'x'
getVariable
setVariable
push '/:$X1'
push '0'
setVariable
push '/:$X2'
push '1'
setVariable
push '/:$X3'
push '1'
setVariable
push '/:$X4'
push '1'
setVariable
label1:
push '128'
push '/:$X4'
getVariable
oldLessThan
not
not
branchIfTrue label2
X=x=3
X1 = 0
X2 = 1
X3 = 1
X4 = 1
label1
Si X4 > 128 aller
au label2
getVariable
push '/:$X3'
getVariable
divide
oldAdd
setVariable
push '/:$X2'
push '/:$X2'
getVariable
push '/:$X'
getVariable
multiply
setVariable
push '/:$X3'
push '/:$X3'
getVariable
push '/:$X4'
getVariable
multiply
setVariable
push '/:$X4'
push '/:$X4'
getVariable
push '1'
oldAdd
setVariable
branch label1
label2:
push '/:$X1'
getVariable
pop
end // of frame 0
X2 / X3
X1 + X2 / X3
X1 = X1 + X2 / X3
Puissances de X
X2 * X
X2 = X2 * X
Calcul factorielles
X3 = X3 * X4
X4 = X4 + 1
label2
Retourne X1
random
Toujours par la même méthode, nous obtenons :
push '2147483647'
random
push '2147483647'
divide
la fonction native random un entier entre 0 et 214783647 = 231 – 1 et le divise par ce même
nombre.
3.7.2 Quelques pistes
Si quelqu’un sait comment sont calculées ces fonctions élémentaires avec Flash 5 ou MX, je
suis preneur !
Maths
62
Eric Schrafstetter
Nous voyons des variables /:$X, /:$X1… dans les codages. Il est possible de les visualiser sur
la scène principale en plaçant tout simplement des zones de textes dynamiques ayant pour
noms $X, $X1 …
Vous pouvez également incorporer du langage machine directement sous Flash, en voici un
exemple :
Tapez l’action suivante à l’image 1 de la scène principale :
$flasm
" push '/:$X'"
" push '2'"
" setVariable"
$end
/:$X *= 2
$flasm;
" push '/:$X','/:$X'"
"getVariable"
" push '3'"
" multiply"
" setVariable"
$end
Les parties en langage machine sont tapées entre les $flasm et $end. Vous constatez qu’il
peut y avoir plusieurs blocs indépendants.
−
−
−
−
−
−
−
Ajoutez sur la scène une zone de texte dynamique ayant pour nom $X
Enregistrez sous le nom essai.fla
Compilez par MAJ+F12
Ouvrez une fenêtre DOS dans le dossier contenant essai.swf
Tapez la commande : flasm –u essai.swf
Ceci a pour effet de créer le vrai .swf
Ouvrez essai.swf, vous devez voir le nombre 12 correspondant à :
X = 2 // Partie flasm
X*=2 d’où X = 4 // Partie Flash
X = 3*X = 12 // Partie flasm
− Pour voir le code source, tapez : flasm –d essai.swf>essai.txt
− Ouvrez le fichier essai.txt
3.8 Une calculatrice scientifique
Vous trouverez facilement sur le net des calculatrices en Flash… Mais voilà, elles ne
respectent jamais les priorités élémentaires ! Par exemple, 1+2*3 donnera 9 au lieu de 7. La
seule que j’ai vue est une calculatrice utilisant la notation polonaise inverse (notation qui
faisait fureur il y a une dizaine d’années).
3.8.1 Le problème
Flash n’est pas capable d’évaluer directement une expression mathématique tapée dans une
zone de texte (ce que fait par contre très bien la fonction eval en javascript )
63
TD ActionScript
Une idée est d’utiliser FSCommand de Flash et de définir une fonction javascript dans la page
HTML qui renvoie la valeur cherchée dans l’animation.
Nous allons faire la même chose « uniquement » dans Flash et en une seule ligne ! C’est-àdire que nous n’aurons pas à définir de fonction supplémentaire hors de l’animation ellemême.
ATTENTION ! Je suppose par la suite que votre animation est enregistrée sous le nom
anim.fla. Ceci est important car lors de la publication, ce sera le nom utilisé pour identifier
l’animation Flash dans le code HTML. Si vous enregistrez sous un autre nom, il faudra le
changer dans la ligne ci-dessous.
function evalue(nom, valeur) {
getURL("javascript:anim.SetVariable('"+nom+"',
(String(eval("+valeur+")).split(',')).join('.'));");
}
Explications sur le script :
1. Lancez votre navigateur Internet et tapez l’adresse « web » suivante :
javascript:1+2
2. Le résultat est affiché dans la page web ! La fonction Flash getURL permet donc
d’utiliser cette « astuce ».
3. La variable valeur est du type String et eval(valeur) calculé par javascript
renvoie le résultat du calcul.
4. On convertit cette valeur en String afin de changer l’éventuelle virgule en point. Pour
cela, on sépare le String suivant le caractère « , » et on l’assemble à nouveau avec un
point.
5. Enfin, On renvoie le string dans l’animation Flash par la méthode SetVariable
ATTENTION ! Pour utiliser la fonction, elle devra nécessairement être lue par votre
navigateur. Ce qui signifie que tester l’animation par CTRL+Entrée ne servira à rien ! Il faudra
Publier par MAJ+F12.
3.8.2 Utilisation de la fonction
Dans l’exemple ci-dessous, nous cherchons la valeur de l’expression "1+2*3" et nous la
mettons dans la variable ecran. Remarquez bien que la variable est mise entre guillemets ! Si
quelqu’un sait transformer un nom de variable en string, merci de m’écrire.
evalue("ecran","1+2*3")
Si la variable est dans un clip, il suffit d’écrire le chemin complet :
evalue("cible.ecran","1+2*3")
La valeur sera mise dans la variable ecran qui est dans le clip cible.
Maths
64
Eric Schrafstetter
3.8.3 Application
Nous allons créer une calculatrice très perfectionnée en quelques lignes de codes !
L’animation s’appelle toujours anim.fla ici.
1. Créez une zone de texte pour la saisie des formules. Lui donner par CTRL+F3 le nom
de variable ecran
2. Créez en dessous une autre zone de texte pour la réponse. Lui donner le nom
resultat
3. Ajoutez un bouton quelconque qui servira à lancer le calcul
4. Mettre l’action suivante sur le bouton :
on (release) {
operations = ["sin", "cos", "tan", "log", "exp", "sqrt", "PI"];
valeur = ecran;
for (i=0; i<operations.length; i++) {
valeur =
valeur.split(operations[i]).join("Math."+operations[i]);
}
adr = "javascript:anim.SetVariable('resultat',";
adr += "(String(eval("+valeur+")).split(',')).join('.'));";
getURL(adr);
}
Explications :
− On fait la liste des opérations possibles. Le cas des puissances vous est laissé !
− puis on transforme sin en Math.sin, etc… qui est le format « normal »
− Enfin, on évalue l’expression et on l’envoie dans la variable resultat.
Exemples d’utilisation :
sin(PI/4) renvoie 0.7071067811865475
1+2*(3+sqrt(5)) = 1 + 2 × 3 + 5 donne 11.47213595499958
exp(1)+log(2) donne 3.4114290090189905
cos(cos(cos(1))) donne 0.6542897904977791
(
)
Facile non ?
4 Dessins à la volée sous Flash MX
Comme vous le savez certainement, il est désormais possible de créer des clips de toute pièce
grâce à des fonctions de dessins du type MoveTo, curveTo… Cependant, l’utilisation de ces
fonctions est assez compliquée ne serait-ce que pour tracer un cercle parfait ! Je vous propose
dans ce tutorial de calculer les coordonnées des points de contrôle dans le cas des cercles et
des ellipses et d’appliquer ces résultats au calcul et à la représentation des différentes phases
de la lune.
65
TD ActionScript
4.1 Des cercles parfaits
En lisant l’aide sur la fonction MovieClip.curveTo, le script suivant est censé tracer un
cercle :
_root.createEmptyMovieClip( "cercle", 1 );
with ( _root.cercle )
{
lineStyle( 0, 0x0000FF, 100 );
beginFill( 0xFF0000 );
moveTo( 500, 500 );
curveTo( 600, 500, 600, 400 );
curveTo( 600, 300, 500, 300 );
curveTo( 400, 300, 400, 400 );
curveTo( 400, 500, 500, 500 );
endFill();
}
On obtient en réalité l’horrible tracé noir suivant (en rouge, un vrai cercle !)
Comment tracer à la volée des cercles de meilleurs factures ? La partie théorique est abordée
un peu plus loin. On a le premier script suivant :
4.1.1 Construction 1
R = x = y = 100 ;
createEmptyMovieClip("cercle", 1);
cercle.createEmptyMovieClip("arc", 1);
with (cercle.arc) {
lineStyle(0, 0x000000, 100);
var rac2 = Math.sqrt(2);
moveTo(R/rac2, R/rac2);
curveTo(R, R/(1+rac2), R, 0);
_x = x;
_y = y;
}
for (i=1; i<8; i++) {
duplicateMovieClip(cercle.arc, "arc"+i, 1+i);
cercle["arc"+i]._rotation = 45*i;
Maths
66
Eric Schrafstetter
}
stop();
On obtient alors un cercle pratiquement parfait.
4.1.2 Construction 2
R = 100;
createEmptyMovieClip("cercle", 1);
with (cercle) {
lineStyle(0, 0x000000, 100);
moveTo(0, 0);
x1 = (rac2-1)*R;
y1 = 0;
x2 = R/rac2;
y2 = R-x2;
for (i=1; i<9; i++) {
curveTo(x1, y1, x2, y2);
y1 = R-(t=(x1-y1+R)/rac2)+x1*rac2;
x1 = t;
y2 = R-(t=(x2-y2+R)/rac2)+x2*rac2;
x2 = t;
}
}
stop();
La seconde construction est basée sur la figure 1. Les points C1, C2… sont les points de
contrôle à utiliser et les points A1, A2… les ancres. L’explication théorique sera donnée un
peu plus loin…
Question : Quelles sont les coordonnées des points C1, C2… en supposant que le cercle à
pour rayon R ?
Réponse : On voit assez facilement que l’angle entre A1, B et C1 est de π et donc que les
8
()
coordonnées de C1 sont ( R tan π , 0). Un petit calcul de trigonométrie montre de plus que
8
()
tan π = 2 − 1 . Les coordonnées des autres points s’obtiennent à partir de C1 en effectuant
8
des rotations de centre B et d’angles π , 2 × π … Le plus simple est d’écrire un point de
4
4
contrôle C sous la forme d’un nombre complexe z = x + iy , la rotation ci-dessus s’exprime
alors par :
iπ
z′ = Ri + (z − Ri)e 4
L’idée étant de ramener le centre de la rotation en A1 (l’origine) grâce à z - Ri puis
d’effectuer la rotation d’angle π et enfin de remettre le point à sa place. Finalement, on
4
trouve :
67
TD ActionScript
 ′
2
 x = (x − y + R) 2

 y′ = R + (y + x − R) 2
2

On trouve ainsi les coordonnées de C2 :
 ′
2
 x = (( 2 − 1)R + R) 2 = R

 y′ = R + (( 2 − 1)R − R) 2 = (2 − 2)R
2

A1 (0,0) = Origine du repère
C1
C8
A2
C7
C2
B
A3 (R,R)
C6
C3
figure 1
C5
C4
En continuant de la même façon avec C3 et C4 on trouve :
A1 = (0,0)
C1 =
((
) )
2 − 1 R,0


A2 =  R , R − R 
2
 2
(
C2 = R, (2 − 2)R
)
A3 = (R,R)
(
C3 = R, R 2
)



A4 =  R , R 1 + 1  
2 
 2 
C4 =
A5 = (0,2R)
Maths
((
)
2 − 1 R,2R
)
68
Eric Schrafstetter
Voir le paragraphe sur les ellipses pour une méthode utilisant des approximations des
fonctions sin et cos.
4.2 Courbes de Bézier
Soit A0, A1 et A2 trois points du plan.
4.2.1 Questions
1. Construire M 1, M 2 et M 3 tels que :
-
M1 soit le barycentre de A0 avec le poids (1- t) et A1 avec le poids t
M 2 soit le barycentre de A 0 (1- t), A 2 (t)
M 3 soit le barycentre de M 1 (1- t), M 2 (t)
2. Ecrire le vecteur OM en fonction de OA , OA et OA
3
0
1
2
3. En déduire les coordonnées de M 3(t) lorsque t varie entre 0 et 1
4.2.2 Réponses
1. Pour le dessin, prenons par exemple t = 0,75
2. Par définition du barycentre :
OM = (1 − t)OA + tOA
1
0
1
OM = (1 − t)OA + tOA
2
1
2
OM = (1 − t)OM + tOM
3
1
2
On en déduit que :
2
2
OM = (1 − t) OA + 2t(1 − t)OA + t OA
3
0
1
2
3. Nous avons par la question précédente l’équation paramétrique de la trajectoire. On
peut également utiliser les nombres complexes en notant z i l’affixe de A i et z l’affixe
de M3, dans ce cas :
z(t) = (1 - t) z 0 + 2 t (1 - t) z 1 + t 2 z 2
M2
A1
M1
A2
M3
A0
69
TD ActionScript
4.3 Les ellipses
Le but est de tracer une ellipse de grand axe AA’ = 2a et de petit axe BB’ = 2b.
4.3.1 En utilisant un cercle
Questions
1. Montrez que si C est un cercle de rayon a alors son image par un _yscale est une
ellipse dont vous préciserez les caractéristiques
2. Donnez un moyen de tracer une ellipse de grand axe et de petit axe fixés.
Réponses
1. Notons λ le coefficient appliqué au _yscale. Soit M(x,y) un point sur le cercle C,
alors ses coordonnées vérifient l’équation :
2
2
x + y =a
2
qui peut s’écrire :
2
x +
(λy)
2
λ
2
=a
2
soit :
2
x + (λy) = 1
2
a
λ2a 2
ce qui signifie que le point M’ (x, λy) est sur l’ellipse de grand axe égal à a et de petit
axe λa.
2. Il suffit de tracer le cercle de rayon a puis d’appliquer un _yscale = λ = b
a
2
Application Tracez à la volée une ellipse de grand axe 600 pixels et de petit axe 200
a = 300;
b = 100;
createEmptyMovieClip("ellipse", 1);
with (ellipse) {
lineStyle(0, 0x000000, 100);
moveTo(0, 0);
x1 = (rac2-1)*a;
y1 = 0;
x2 = a/rac2;
y2 = a-x2;
for (i=1; i<9; i++) {
curveTo(x1, y1, x2, y2);
y1 = a-(t=(x1-y1+a)/rac2)+x1*rac2;
x1 = t;
y2 = a-(t=(x2-y2+a)/rac2)+x2*rac2;
x2 = t;
}
}
ellipse._yscale = 100*b/a;
stop();
Maths
70
Eric Schrafstetter
4.3.2 Approximation quadratique des fonctions sin et cos
On cherche des polynômes du second degré approchant les fonctions sin et cos sur des
périodes égales à π . Pour cela, on contraint le polynôme à avoir les mêmes valeurs que la
4
sinusoïde aux bornes de l’intervalle et le même nombre dérivée à la borne inférieure. Par
( )
exemple, pour approcher cos π t avec t ∈ [0;1] , on cherche P(t) = a0 + a 1 t + a 2 t 2 vérifiant :
4
P(0) = a0 = cos(0) = 1 (même valeur pour la borne inférieure)
P(1) = a0 + a 1 + a 2 = cos π = 2 (borne supérieure)
4
2
P’(0) = a 1 +2 a 2 × 0 = a 1
()
= − π sin(π × 0 ) = 0 (même dérivée en 0)
4
4

2
d’où a 2 = − 1 + 2 et donc P(t) = 1 + t  − 1 + 2  .
2 
2

Pour t ∈ [0;1] , on trouve après calculs :
( )
( )
)


cos π t ≈ 1 + t 2 − 1 + 2 
4
2 

sin π t ≈ π t + 2 2 − π t 2
4
4
4
cos π (t + 1) ≈ 2 − π 2 t + t 2 2 π − 1
4
2
8
2 4
(
(
)
(
(
)
2
sin π (t + 1) ≈ 2 + π 2 t + t − π − 1 + 2
4
2
8
4
2
)
Je rappelle ici que l’équation paramétrique d’une ellipse de grand axe 2a et de petit axe 2b
est :
 a cos(t )
z(t) = 
 b sin(t ) avec t ∈ [0;2π]
4.3.3 Arcs d’une ellipse
Une courbe de Bézier d’ordre 2 a pour forme : z(t) = (1- t)2 z 0+2 t (t -1) z 1+ t 2 z 2 où t ∈ [0;1]
On connaît le point de départ z 0, l’ancre z 2 et on cherche le point de contrôle z 1.
-
On cherche les coordonnées du point de contrôle permettant de tracer l’arc d’ellipse
entre z 0 = (a,0) et z 2 = ( a , b )
2
2
L’arc a pour équation paramétrique :
71
TD ActionScript
( )
( )
 a cos π t

4 avec t ∈ [0;1]
z(t) = 
π
 b sin 4 t
z2
b
z0
a
En utilisant l’approximation des fonctions sin et cos on cherche donc les coordonnées du
point de contrôle z 1 = (x 1 , y 1) tel que :
( )
( )
2

2
2
a cos π t ≈ a + at  − 1 + 2  = (1 − t) a + 2t(1 − t)x + at
1
4
2 
2

2

2
b sin π t ≈ π bt + bt  2 2 − π  = 2t(1 − t)y + bt
1
4
4
4
2


2
Par identification des coefficients en t ou t , on trouve rapidement que x
y = πb . Nous utiliserons l’approximation suivante :
1
8
1
= a et que
π ≈ 2 −1
8
a = 150;
b = 50;
createEmptyMovieClip("arc", 1);
with (arc) {
lineStyle(0, 0xFF0000, 200);
moveTo(a, 0);
curveTo(a, -Math.PI*b/8,a/rac2, -b/rac2);
}
stop();
Ce script dessine la partie rouge que vous voyez sur l’ellipse.
-
On cherche maintenant les coordonnées du point de contrôle permettant de tracer l’arc
d’ellipse entre z 0 = ( a , b ) et z 2 = (0, b)
2
2
Maths
72
Eric Schrafstetter
Toujours en utilisant l’approximation des fonctions sin et cos on cherche donc le point de
contrôle z 1 = (x 1 , y 1) tel que :
)
(
(
(
)
2 ) = (1 − t)
2
a cos π (t + 1) ≈ a − aπ 2 t + at π − 1 = (1 − t)2 a + 2t(1 − t)x1
4
8
2
2 4
2
)
(
2
b sin π (t + 1) ≈ 2 + π 2 t + t − π − 1 +
4
2
8
4
2
2
b + 2t(1 − t)y + bt 2
1
2
2
Par identification des coefficients en t ou t2, on trouve :
( )
( )
x = a 1 − π ≈ 0,429a ≈ ( 2 − 1)a
1
8
2
y = b 1 + π ≈ 0,98b ≈ b
1
8
2
a = 150;
b = 50;
createEmptyMovieClip("arc", 1);
with (arc) {
moveTo(a/rac2, -b/rac2);
curveTo(0.429*a, -0.98*b,0, -b);
}
stop();
-
Tracer une demi-ellipse
a = 150;
b = 50;
createEmptyMovieClip("demi", 1);
with (demi) {
moveTo(a, 0);
curveTo(a,-0.39*b,a/rac2,-b/rac2);
curveTo(0.429*a, -0.98*b,0, -b);
curveTo(-0.429*a, -0.98*b,-a/rac2,-b/rac2);
curveTo(-a,-0.39*b,-a,0);
}
stop();
73
TD ActionScript
4.4 Les phases de la lune
4.4.1 Quelques rappels
-
-
Les différentes formes de la lune telles que perçues par un observateur sur terre se
nomment les phases de la lune
La durée de révolution de la lune autour de la terre est de 29 j 12 h 44,05 mn
Soleil
-
Voici les principales formes de la lune et leur nom
Nom
Nom
1- Nouvelle lune
2- Premier croissant de lune
3- Premier quartier de lune
4- Lune gibbeuse
5- Pleine lune
6- Lune gibbeuse
7- Dernier quartier de lune
-
Aspect
Aspect
8- dernier croissant de lune
Le 28 janvier 2002 à 20h50 TU est une date de pleine lune.
Questions
1. Calculez la période de révolution de la lune autour de la terre en millisecondes
2. Montrez que si M est un point à la surface de la lune (représentée par une sphère de
rayon r en rouge sur la figure) se promenant sur un grand cercle (en bleu sur la figure)
Maths
74
Eric Schrafstetter
alors sa projection M’ dans le plan (0xy) se promène sur une ellipse (en noire sur la
figure) dont on précisera les caractéristiques.
y
M’
ϕ
M
0
x
θ
Réponses
1. La période est égale à 29 x 24 x 3600 x 1000+12 x 3600 x 1000+44,05 x 60 x 1000
2. Les coordonnées sphériques du point M sont (r.sin ϕ.sin θ, r.cos ϕ, r.sin ϕ.cos θ).
Lorsque l’angle θ est constant et que ϕ varie, M se déplace sur le cercle bleu. Sa
projection M’sur le plan (0xy) a pour coordonnées M’ (r.sin ϕ.sin θ, r.cos ϕ). M’
vérifie :
(r sin ϕ sin θ)2
(sin θ)
2
+ (r cos ϕ)2 = r 2
donc M’ est sur l’ellipse de centre 0 avec a = r sin θ et b = r.
4.4.2 Application à Flash
Nos calculs seront approximatifs mais suffisants pour avoir une idée de la phase !
1. Récupérez sur Internet une image de pleine lune
2. Utilisez un logiciel de dessin quelconque (Le freeware Irfanview par exemple) pour
faire en sorte que le diamètre de la lune soit de 100 pixels. Si vous préférez une autre
dimension, changez la valeur de a dans le programme ci-dessous.
3. Importez cette image sous Flash MX
4. Utilisez la fenêtre Info pour placer le haut gauche de l’image en (0,0). Si vous préférez
un autre endroit, effectuez une translation de _x et _y dans le programme.
5. Placez 2 boutons quelconques sur la scène avec les actions suivantes :
on (release) {
n++;
choix();
}
75
TD ActionScript
et sur l’autre
on (release) {
n--;
choix();
}
Ces boutons permettront de changer les dates jours après jours.
6. Placez une zone de texte dynamique ayant pour nom de variable texte
7. Ajoutez l’action suivante à l’image 1 de la scène principale
function tracer(coeff1, coeff2) {
// Rayon de la lune
a = 50;
// On dessine l’ombre
createEmptyMovieClip("ombre", 1);
with (ombre) {
lineStyle(0, 0x000000, 0);
// On crée un remplissage noir avec alpha = 60%
beginFill(0x000000, 60);
moveTo(0, 0);
// Partie 1
curveTo(coeff1*(rac2-1)*a, 0, coeff1*a/rac2, a-a/rac2);
curveTo(coeff1*a, (2-rac2)*a, coeff1*a, a);
curveTo(coeff1*a, a*rac2, coeff1*a/rac2, (1+1/rac2)*a);
curveTo(coeff1*(rac2-1)*a, 2*a, 0, 2*a);
// Partie 2
curveTo(coeff2*(rac2-1)*a, 2*a, coeff2*a/rac2, (1+1/rac2)*a);
curveTo(coeff2*a, a*rac2, coeff2*a, a);
curveTo(coeff2*a, (2-rac2)*a, coeff2*a/rac2, a-a/rac2);
curveTo(coeff2*(rac2-1)*a, 0, 0, 0);
endFill();
}
ombre._x = 50;
ombre._y = 0;
}
function choix() {
// La date du jour
var now = new Date();
// On ajoute ou retire n jours
now.setTime(now.getTime()+n*24*3600*1000);
// On passé en temps Universel
now.setTime(now.getTime()+now.getTimezoneOffset()*60000);
// Attention : 0 =janvier, 1 = février…
mois = now.getMonth()+1;
// On affiche la date
texte = now.getDate()+" / "+mois+" / "+(now.getFullYear());
// Date de la nouvelle lune le 28/1/2002
var nouvLune = new Date(Date.UTC(2002, 0, 28, 22, 50, 0));
// Période de revolution de la lune
var Periode = 29*(24*3600*1000)+12*(3600*1000)+44.05*(60*1000);
// Nb de milliseconds depuis la date de référence
var Phase = (now.getTime()-nouvLune.getTime())%Periode;
// Si date avant la date de référence on ajoute une période
if (Phase<0) {
Phase += Periode;
}
Maths
76
Eric Schrafstetter
// Calcul du pourcentage d’ombre
var pourcentage = Phase/Periode;
var pour2fois = Math.round(200*pourcentage);
if (pour2fois>=100) {
pour2fois -= 100;
}
// Ombre partant de la gauche ou de la droite ?
var left = (pourcentage>0.5) ? -1 : 1-pour2fois/50;
var right = (pourcentage>0.5) ? 1-pour2fois/50 : 1;
// On trace l’ombre
tracer(left, right);
}
n = 0;
choix();
stop();
4.4.3 Références
Sur la lune
-
Un freeware qui calcule presque tout : www.starlight.demon.co.uk/mooncalc
Recherchez moon calculator sur : http://javascriptsource.com/
Des tables : http://aa.usno.navy.mil/
Formules plus précises : www.fourmilab.ch/earthview/moon_ap_per.html
Sur les courbes de Bézier
-
77
www.xuan.fr/html_version/frames/4-graphisme/illustrator_techniques.htm
Niveau Terminale www.ac-reunion.fr/pedagogie/lyllgp/Maths/dosbez1.htm
TD ActionScript
5 Physique
5.1 Collision élastique de 2 boules
La partie théorique suppose des notions de physique niveau bac .
5.1.1 Rappels
1. Le vecteur quantité de mouvement p d’un point de masse m et de vitesse v est par
définition p = mv .
2. L’énergie cinétique d’un point de masse m et de vitesse v est, toujours par définition :
Ec =
1 2
mv
2
où v est la norme du vecteur v .
3. On considère deux points matériels A1 et A2 de masses m1 et m2. Une loi de la
physique énonce que la quantité de mouvement totale d’un système de 2 masses
ponctuelles en collision se conserve quelque soit le référentiel :
p1 + p 2 = Cte
4. Une autre loi affirme qu’il y a conservation de l’énergie totale, ce qui se traduit, dans
le cas d’une collision élastique, par :
E c1 + E c2 = Cte
où E c1 est l’énergie cinétique du point A1.
5.1.2 La théorie
1. Montrez que dans le cas d’une collision directe, c’est à dire lorsque les vecteurs
vitesses avant et après le choc sont colinéaires (parallèles), alors les vitesses v’1 et v’2
après le choc sont données par :
v'1 =
2m2 v 2 + (m1 − m2 )v1
m1 + m2
v' 2 =
2m1v1 − (m1 − m2 )v 2
m1 + m2
et
Physique
78
Eric Schrafstetter
Réponse
La conservation de la quantité de mouvement avant et après le choc permet d’écrire
que :
m1v1 + m2 v 2 = m1v'1 + m2 v' 2
et celle de l’énergie totale que :
1
1
1
1
m1v12 + m2 v 22 = m1v'12 + m1v' 22
2
2
2
2
On en déduit que :
 m1 (v'1 −v1 ) = m2 (v' 2 −v 2 )

2
2
2
2
m1 (v'1 −v1 ) = m2 (v 2 − v' 2 )
d’où, par division de la ligne 2 par la ligne 1 :
m1 (v'1 −v1 ) = m2 (v' 2 −v 2 )

v'1 + v1 = v' 2 + v 2

Les valeurs de v’1 et v’2 s’obtiennent alors en résolvant ce système de 2 équations à 2
inconnues.
2. Lors d’une collision en un point de contact K de 2 objets arrivant avec des vecteurs
vitesse v1 et v 2 (voir figure 4.1), seules les composantes v1x et v2x interviennent. On
néglige ici les effets de frottements (voir par exemple le cours de Mécanique de
J.Ph.−Perez (Niveau Classes Prépas)).
Fig 4.1 − Contact de 2 boules
3. Nous obtenons la méthode de construction de la figure 4.2. Les quantités v’1x et v’2x
sont obtenues par les formules précédentes. Déterminez les coordonnées à l’écran de
v'1e = (v'1ex , v'1e y ) en fonction de ϕ, v1y et v’1x
79
TD ActionScript
Fig 4.2 − Construction des vecteurs vitesse
Réponse
La composante v'1ex est la somme des projetés de v1y et v’1x sur l’axe horizontal.
L’angle entre v1y et l’axe horizontal est ϕ + π/2 et de ϕ pour v’1x. D’où :
v'1ex = v'1x cos ϕ − v1 y sin ϕ
π

puisque cos ϕ +  = − sin ϕ . De même, on projecte les 2 vecteurs sur l’axe vertical
2

et on en fait la somme :
v'1ey = v'1x sin ϕ + v1 y cos ϕ
5.1.3 Application
1. Lancez Flash et CTRL+M pour donner les dimensions 500 × 400 à la scène et cadence
50.
2. Dessinez une boule (avec son centre sur la croix centrale). Convertissez-là en bouton
nommé boule
3. Créez un clip b1 et mettre une occurrence du bouton boule sur la croix (les 2 croix
sont alors superposées)
4. Ajoutez l’action suivante au bouton :
on (press) {
_root.drag1 = true;
startDrag ("");
}
_root.drag1 = false;
stopDrag ();
}
Physique
80
Eric Schrafstetter
5. Mettre une occurrence du clip b1 avec pour nom boule1 sur la scène principale
6. De même, créez un clip b2 et mettre une occurrence du bouton boule sur la croix
on (press) {
_root.drag2 = true;
startDrag ("");
}
_root.drag2 = false;
stopDrag ();
}
8. Mettre une occurrence du clip b2 avec pour nom boule2 sur la scène principale
9. Ajoutez une couche pour les actions
10. A l’image 1 de la scène principale, sur la couche action, mettre :
gauche = 0;
droite = 500;
haut = 0;
bas = 400;
r1 = boule1._width/2;
r2 = boule2._width/2;
a1a2 = (r1+r2)*(r1+r2);
mass1 = 1;
mass2 = 4;
fric = 0.98;
v1xe = 10;
gravite = 1.5;
cdx = boule2._x-boule1._x;
cdy = boule2._y-boule1._y;
with (Math) {
phi = atan2(cdy, cdx);
v1 = sqrt(((x1-ox1)*(x1-ox1))+((y1-oy1)*(y1-oy1)));
v2 = sqrt(((x2-ox2)*(x2-ox2))+((y2-oy2)*(y2-oy2)));
angle1 = atan2(v1ye, v1xe);
angle2 = atan2(v2ye, v2xe);
v1x = v1*cos(angle1-phi);
v1y = v1*sin(angle1-phi);
v2x = v2*cos(angle2-phi);
v2y = v2*sin(angle2-phi);
v1px = (2*mass2*v2x+(mass1-mass2)*v1x)/(mass1+mass2);
v2px = (2*mass1*v1x-(mass1-mass2)*v2x)/(mass1+mass2);
v1xe = cos(phi)*v1px-sin(phi)*v1y;
v1ye = sin(phi)*v1px+cos(phi)*v1y;
v2xe = cos(phi)*v2px-sin(phi)*v2y;
v2ye = sin(phi)*v2px+cos(phi)*v2y;
x1 = ox1;
y1 = oy1;
x2 = ox2;
y2 = oy2;
}
}
Il n’y a rien à dire sur le script sinon que v1x est v1x, v1px est v’1x et v1xe est v'1ex .
11. A l’image 2 de la couche action, ajouter :
81
TD ActionScript
ox1 = x1;
oy1 = y1;
v1ye += gravite;
x1 = boule1._x;
y1 = boule1._y;
// Calculs des vitesses
if (drag1 == 1) {
v1xe = x1-ox1;
v1ye = y1-oy1;
} else {
x1 += v1xe;
y1 += v1ye;
}
ox2 = x2;
oy2 = y2;
v2ye += gravite;
x2 = boule2._x;
y2 = boule2._y;
if (drag2) {
v2xe = x2-ox2;
v2ye = y2-oy2;
} else {
x2 += v2xe;
y2 += v2ye;
}
// Touche-t-on un bord ?
if ((x1+r1)>=droite) {
x1 = droite-r1;
v1xe *= -1;
}
if (gauche>=(x1-r1)) {
x1 = gauche+r1;
v1xe *= -1;
}
if ((y1+r1)>=bas) {
y1 = bas-r1;
v1ye *= -1;
}
if (haut>=(y1-r1)) {
y1 = haut+r1;
v1ye *= -1;
}
if ((x2+r2)>=droite) {
x2 = droite-r2;
v2xe *= -1;
}
if (gauche>=(x2-r2)) {
x2 = gauche+r2;
v2xe *= -1;
}
if ((y2+r2)>=bas) {
y2 = bas-r2;
v2ye *= -1;
}
if (haut>=(y2-r2)) {
y2 = haut+r2;
v2ye *= -1;
}
dist = (x1-x2)*(x1-x2)+(y1-y2)*(y1-y2);
if ((dist<=a1a2)) {
affiche();
Physique
82
Eric Schrafstetter
}
// Nouvelles positions
boule1._x = x1;
boule1._y = y1;
boule2._x = x2;
boule2._y = y2;
// On ralentit les boules
v1xe *= fric;
v1ye *= fric;
v2xe *= fric;
v2ye *= fric;
if (v1xe*v1xe<0.1) {
v1xe = 0;
}
if (v2xe*v2xe<0.1) {
v2xe = 0;
}
Cette partie semble un peu longue mais les tests de collision sur les bords prennent
beaucoup de lignes... A noter
− La variable a1a2 ne représente pas la distance de A1 à A2 mais le carré de cette
distance. Ceci évite d’utiliser la fonction racine carrée.
− Le calcul de la vitesse est obtenu en effectuant le quotient de la distance entre la
position précédente et courante de la boule sur le temps mis pour parcourir cette
distance. On met ce temps à 1 par convention (il suffit de changer la cadence de
l’animation)
− L’intervention de fric (pour friction) qui permet de ralentir la vitesse des boules.
− La variable gravite (pour gravité), je rappelle ici que la vitesse de la chute d’un corps
est de la forme v(t) = gt + Cte.
− Lors d’un choc sur un côté de l’écran, la composante normale (perpendiculaire) au
bord change de signe. Si vous voulez ajouter des objets (tables, raquettes...) sur la
scène, faîtes les tests de collisions avec les coordonnées des clips (table._y...)
12. A l’image 3 de la couche action, ajoutez :
gotoAndPlay (2);
13. Enfin, étendre par F5 la couche contenant les objets jusqu’à l’image 3.
Chalenge concernant le fichier .fla associé à cet exercice : M’envoyer un .swf avec les ballons
qui tournent !
5.2 Vitesse d’un objet avec freinage
But : 1 Vous lancez un objet à l’aide de la souris, celui-ci rebondit sur les bords de l’écran
puis s’arrête après freinage. Donnez à votre animation les dimensions 400 × 400
1. Créez un bouton rectangulaire
2. Créez un clip rect et placez le bouton rectangulaire dessus. Etendre sur les image 1 à 3
par F5.
3. Mettre l’action stop sur l’image 1 de ce clip
4. L’action sur l’image 2 est la suivante :
83
TD ActionScript
posX = this._x;
vitessex = posX-ancienX;
ancienX = posX;
posY = this._y;
vitessey = posY-ancienY;
ancienY = posY;
5. et l’action gotoAndPlay (2); sur l’image 3
6. Donnez au bouton l’action suivante :
on (press) {
startDrag ("");
gotoAndPlay (2);
pause = true;
}
stopDrag ();
gotoAndStop (1);
pause = false;
}
Ainsi, lorsque vous presserez et déplacerez une occurrence du rectangle rect, son clip
tournera en boucle entre les images 2 et 3 et permettra de calculer sa vitesse. Placez
une occurrence de rect sur la scène principale et lui donner le nom obj. Ecrivez
l’action suivante sur cette occurrence :
friction = 0.95;
obj.ancienX = this._x;
obj.ancieny = this._y;
}
if (not(pause)) {
nouvx = this._x+vitessex;
nouvy = this._y+vitessey;
vitessex *= friction;
vitessey *= friction;
if (vitessex*vitessex+vitessey*vitessey<0.5) {
pause = true;
}
if ((nouvx<0) || (nouvx>400)) {
nouvx=Math.max (nouvx,0);
nouvx=Math.min (nouvx,400);
vitessex *= -friction;
}
if ((nouvy<0) || (nouvy>400)) {
nouvy=Math.max (nouvy,0);
nouvy=Math.min (nouvy,400);
vitessey *= -friction;
}
this._x = nouvx;
this._y = nouvy;
}
}
Lorsque vous pressez et déplacez le rectangle, la variable pause est à true et le clip
rect tourne entre les images 2 et 3, permettant d’obtenir sa vitesse de départ. Une fois
Physique
84
Eric Schrafstetter
le bouton relâché, pause passe à false et les nouvelles positions nouv sont calculées
jusqu’à une vitesse inférieure à 0.5 où l’objet s’arrête.
5.3 Fil élastique
But : Tracer une ligne entre les centres de 2 points mobiles.
1. Créez un clip carré avec un petit carré sur l’image 1
2. Placez 2 occurrences de carré sur la scène principale avec pour noms pt1 et pt2.
3. Créez le clip ligne suivant :
– Tracer une ligne du centre vers le bas à droite à 45° (utilisez la touche MAJ en
traçant)
– Sélectionnez la ligne et allez dans la fenêtre info. Mettre L = 100, H = 100
– Toujours dans la fenêtre info, cliquez sur le carré haut-gauche puis X = 0 et Y
= 0.
Fig 4.3 − Coin en haut à gauche placé en X=0 et Y=0
4. Mettre l’action suivante sur le clip pt1
// La souris touche-t-elle le clip en pressant ?
// suis-moi !
startDrag ("");
}
}
stopDrag ();
}
5. Idem avec le clip pt2. Placer une occurrence de la ligne sur la scène principale et lui
affecter l’action :
this._x = _root.pt1._x;
this._y = _root.pt1._y;
this._xscale = _root.pt2._x-_root.pt1._x;
this._yscale = _root.pt2._y-_root.pt1._y;
}
5.4 Tableau blanc
Voici une application directe de la section précédente sur le fil élastique. Il s’agit de créer un
tableau blanc sur lequel on pourra dessiner librement. Il serait intéressant de voir comment
enregistrer le dessin obtenu et l’exporter vers une autre animation. Une compression des
85
TD ActionScript
données (algorithme LZW ou autre) et un script php devrait suffir mais je ne me suis pas
penché sur le problème sérieusement…
1. Créez un bouton transparent avec un petit carré sur l’image clé cliquée.
2. Créez un clip nommé crayon et placez-y une occurrence du bouton.
on (press) {
_root.souris=1;
_root.x1=0;
}
on (release) {
_root.souris=0;
}
4. Sur la scène principale, placez une occurrence du clip crayon et lui donner le nom mc.
5. Créez maintenant un clip ligne comme dans la rubrique fil élastique (angle de 45°
vers le bas à droite, L = 100, H = 100, haut-gauche en (0; 0)) et en placer une
occurrence sur la scène principale avec pour nom trait.
6. Etendre par F5 l’image clé 1 jusqu’en 3
7. Ajoutez pour les actions et placez à l’image clé 1 l’action :
_root.souris=0;
startDrag (_root.mc, true);
8. A l’image clé 2 de la couche d’action, placez :
if (souris == 1) {
if (x1 == 0) {
x1 = mc._x;
y1 = mc._y;
} else {
x0 = mc._x;
y0 = mc._y;
if ((x1-x0)*(x1-x0)+(y1-y0)*(y1-y0)>2) {
nb++;
duplicateMovieClip (trait, "trait"+nb, nb);
this["trait"+nb]._x = x1;
this["trait"+nb]._y = y1;
this["trait"+nb]._xscale = x0-x1;
this["trait"+nb]._yscale = y0-y1;
x1 = x0;
y1 = y0;
}
}
}
9. Et à l’image clé 3 du calque action :
gotoAndPlay (2);
10. Lancez l’animation et pressez la souris pour dessiner.
Physique
86
Eric Schrafstetter
6 Visualisation
6.1 Powerpoint
Pour insérer un objet flash en format SWF dans PowerPoint, suivez ces différentes étapes :
1.
2.
3.
4.
5.
6.
Se placer dans une diapositive où l’on veut insérer le fichier *.SWF
Cliquez sur le menu : ”Affichage” et ensuite sur le menu ”Barre d’outils”.
Sélectionnez ”Boîte à Outils Contrôles” si cette boîte n’est pas déjà sélectionnée.
Cliquez sur ”Autres contrôles” (bouton avec le marteau et la clé)
Sélectionner ”Shockwave Flash Object”
Dessinez un contrôle dans la diapositive de la taille souhaitée pour intégrer l’objet
Flash
7. Faîtes un clic droit sur l’objet et sélectionner ”Propriétés”
8. Pour la propriété ”Movie” tapez le chemin d’accès du fichier *.SWF (exemple :
C:\Mes documents\Nom.swf) ou son URL
9. S’assurez que la propriété ”Playing” est paramétrée sur ’True’
10. Se mettre en mode d’affichage DIAPORAMA
6.2 Sons, Cookies et Diaporamas
Il s’agit de créer rapidement un diaporama sonore et autonome composé d’images .gif, .jpg ou
.png. Nous ajouterons 3 boutons afin que le spectateur puisse, s’il le veut, retourner à la
première diapo, passer à la diapo suivante ou précédente. L’idée est la suivante : Créez
dynamiquement en javascript des pages qui contiendront le numéro de l’image à afficher
(image1.jpg, image2.jpg...) ainsi que la bande son qui sera dans une animation Flash. La
partie Flash permettra de gérer le passage d’une diapo à une autre et les cookies de mémoriser
le numéro de l’image courante.
6.2.1 Partie HTML – javascript
Créez une page index.html du type :
<html>
<head>
<title>Diaporama sonore</title>
</head>
<frameset rows="0,*">
<frame name="haut" scrolling="no" src="haut.htm">
<frame name="bas" scrolling="auto" marginwidth="0"
marginheight="0" src="ppt.htm">
<noframes>
<body ><p>Cette page utilise des cadres.</p>
</body>
</noframes>
</frameset>
</html>
87
TD ActionScript
Le fichier haut.htm contiendra l’initialisation du cookie et sera invisible (hauteur = 0). Le
fichier principal sera ppt.htm
La page haut.htm a pour code :
<html>
<body>
<script>
<!-var expdate = new Date();
expdate.setTime(expdate.getTime() + (24*60*1000*1));
document.cookie="n=0";
//-->
</script>
</body>
</html>
Ceci permet de placer un cookie ayant pour valeur n=0 sur la machine client.
La page ppt.htm contient le code :
<html>
<head>
<title>Diaporama sonore</title>
<script><!-function home(){
document.cookie='n=0';
location.href=location;
}
function precedent(){
n=eval(document.cookie.substring(2, 10))-2;
if (n<0) {
n=0;
}
document.cookie="n="+n;
};
function suivant(){
n=eval(document.cookie.substring(2, 10));
};
//--></script>
</head>
<body>
<script language="JavaScript"><!-n=eval(document.cookie.substring(2, 10));
var expdate = new Date();
expdate.setTime(expdate.getTime()+(24*60*1000*1));
n++;
//--></script>
<form name="form" method="get">
<table>
<tr>
<td>
<input type="button" name="Home" value="Home"
onclick="javascript:home();"></td>
<td></form>
Visualisation
88
Eric Schrafstetter
<script language="JavaScript">
<!-document.write('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000"');
document.write('WIDTH=200 HEIGHT=5>');
document.write('<PARAM NAME=movie VALUE="image'+n+'.swf">');
document.write('<EMBED src="image'+n+'.swf"');
document.write('WIDTH="200" HEIGHT="5" ');
document.write('TYPE="application/x-shockwave-flash"></EMBED>');
document.write('</OBJECT>');
//-->
</script>
<td>
<input type="button" name="prec" value="<"
onclick="javascript:precedent();">
<input type="button" name="prec" value=">"
onclick="javascript:suivant();">
</td></tr>
<tr><td colspan="3">
<!-document.write("<img src='image"+n+".jpg'>");
//-->
</script>
</td></tr>
</table></div>
<!-document.write(n);
//-->
</script>
</form>
</body></html>
–
–
–
–
–
–
–
Le script de la partie <head> est composé de 3 fonctions permettant d’avancer, de reculer
et de retourner à la première diapo. Le numéro de l’image courante étant dans la variable n
placée dans un cookie.
Le premier script de la partie <body> récupère la variable n, l’augmente de 1 et remplace
le cookie existant.
Le second script place l’animation Flash nommée image1.swf (son associé à l’image 1) ou
image2.swf ...
Le troisième script place l’image elle-même
Le dernier script ajoute le numéro de l’image courante
Les actions onclick permettent de gérer les boutons Home, suivant et précédent
La fonction location.href=location recharge la page
6.2.2 Partie Images
Veillez à ce que vos images aient pour noms image1.jpg ou image1.gif . Si vous utilisez
PowerPoint, faîtes Fichier - Enregistrez sous, choisir GIF, JPG ou PNG comme type
d’exportation et donnez un nom au dossier où seront placées vos images.
89
TD ActionScript
6.2.3 Partie Flash
Il vous faut un fichier son (.wav ou .mp3) par image. Nous allons créer un modèle
d’animation qui permettra de générer rapidement tous les .swf.
1.
2.
3.
4.
5.
6.
7.
8.
9.
Lancez Flash et enregistrez sous sontype.fla
Donnez à votre animation la taille 200×20 (par exemple)
Nommez scene1 par chargement (Fenêtre - Panneaux - Scène)
Créez une barre de chargement comme vu dans un chapitre précédent (voir .fla joint).
Ceci permettra de faire patienter l’internaute pendant le chargement du son (Les plus
forts pourront utiliser un LoadMovie pour commencer à charger le son de la diapo
suivante).
Créez une nouvelle scène par Insertion - Scène et lui donner le nom son
Créez 2 couches, une pour le son et une pour les actions.
Importez le son par Fichier - Importer et placez à partir de la bibliothèque (CTRL+L )
une occurrence du son sur la couche son
Etendre l’image clé par F5 jusqu’à la fin du son
Sur la couche des actions, placez après la fin du son une image clé vide par F7 (voir
figure 5.1)
Fig. 5.1 – Apparence de la couche son et action
Action sur cette image clé
getURL ("ppt.htm", "bas");
qui précise que l’on doit recharger l’animation ppt.htm dans le cadre du bas nommé
bas
10. Insérez une nouvelle image clé juste après avec l’action stop();
11. Faîtes Fichier - Paramètres de publication (CTRL+MAJ+F12), choisir uniquement le
format .swf (nous n’avons pas besoin du fichier .htm) et cliquez sur Publier.
12. Avec l’explorateur Windows, retrouvez le sontype.swf créé et le nommer
image1.swf
13. Retournez sous Flash, ouvrez la bibliothèque, sélectionnez l’objet son et cliquez sur
l’icône Propriétés (le petit ”i” dans un cercle bleu en bas de la fenêtre de la
bibliothèque)
14. Choisir Importer et récupérez le son de la seconde image
15. Ajustez l’emplacement des 2 actions par rapport à ce nouveau son et publiez à
nouveau comme précédemment.
16. Recommencez avec les autres sons.
17. Il ne vous reste plus qu’à ouvrir index.html pour voir le résultat
Visualisation
90
Eric Schrafstetter
6.3 FSCommand
Le but de cet exercice est d’associer des sons à des objets d’un site en HTML ”classique”. Par
exemple, si l’on clique sur un bouton, survole un lien hypertexte, sort d’une image... nous
pourrons entendre un son ou un commentaire. Pour faire cela, l’idée est de créer une
animation Flash invisible (ou presque) contenant les différents sons et d’utiliser des
FSCommand pour piloter l’ensemble.
6.3.1 Les sons
1. Enregistrez le son ”Fin du chargement” avec le magnéto et enregistrez-le sous le nom
fin.wav (ou mp3, aif...)
2. Lancez Flash et enregistrez sous le nom son.fla. Nous allons créer un test de fin de
chargement. Pour cela, à la première image mettre l’action :
taille=getBytesTotal();
A la seconde image, mettre :
if (getBytesLoaded() == taille) {
gotoAndPlay ("fin");
}
A la troisième image clé :
gotoAndPlay (2);
3.
4.
5.
6.
7.
Insérez une nouvelle couche pour les sons
Mettre à l’image 4 (ou plus loin) une nouvelle image clé avec pour nom fin.
Importez le son fin.wav par Fichier - Importer puis ouvrez la bibliothèque par CTRL+L
Cliquez sur le son puis sur le i bleu en bas de la fenêtre.
Choisir une compression MP3, un taux (par exemple 16K/s) puis cliquez sur Tester. Si
le son vous semble trop mauvais, augmentez le taux.
8. Amenez le son de la bibliothèque sur la scène principale et étendre par F5 jusqu’à la
fin du son
9. Au niveau de la fin du son, mettre l’action stop() sur l’autre couche (voir figure 5.2)
Fig 5.2 − Les sons et les stops
10. Enregistrez maintenant les autres sons
11. Importez-les un par un, compressez-les en MP3 et mettez-les sur la scène principale
avec une étiquette de début qui servira de référence (dans notre cas, les étiquettes sont
google, ecrire...)
12. N’oubliez-pas d’ajouter une action stop() sur l’autre couche à chaque fin.
91
TD ActionScript
13. Par Fichier - Paramètres de publication, choisir HTML - Modèle : Flash avec
FSCommand
14. Choisir Largeur = 1 pixel et Hauteur = 2 pixels ! ! L’animation sera donc invisible (ou
presque !). Vous pouvez également faire en sorte que le fond de l’animation soit le
même que le fichier HTML. Attention, le paramètre WMODE (voir ouvrage de référence
de Flash page 381) ne fonctionne que dans des cas très particuliers.
15. Publiez par MAJ+F12
6.3.2 Partie JavaScript
1. Ouvrez le fichier son.html créé par Flash avec le bloc-notes
2. Ajoutez dans la partie tête du document (entre <HEAD> et </HEAD>) le script suivant :
<!-function jouer(son) {
if (son!=""){
son_DoFSCommand("jouer", son);
}
}
//-->
</script>
Ce script nous permettra d’avoir des commandes plus simples à écrire, il remplacera
un jouer(son) simple à comprendre par son_DoFSCommand("jouer", son) qui sera
envoyée à l’animation. La commande ne sera envoyée que si le son n’est pas vide.
3. Dans la partie FSCommand, remplacez :
//
// Place your code here...
//
par :
if (command=="jouer"){
sonObj.TGotoLabel("/",args);
sonObj.Play();
}
sonObj fait référence à l’animation (voir paragraphe EMBED et OBJECT à la fin de
l’exercice). Si la commande envoyée est jouer, on va à l’étiquette args de la scène
principale ( /) de l’animation où est le son correspondant.
6.3.3 Partie HTML
Voici quelques codes HTML compatibles avec Internet Explorer et Netscape.
1. Son lors du survol d’un lien :
<a href="http://www.google.fr"
onMouseover="jouer('google');">www.google.fr</a>
Visualisation
92
Eric Schrafstetter
2. Son lors d’un clic sur un bouton :
<form>
<input type="button" value="Cliquez-moi !!" onClick="jouer('aie')">
</form>
3. Après un choix dans une liste déroulante :
<form name="form">
<select name="select" size="1"
onChange="jouer(document.form.select.options[
document.form.select.options.selectedIndex].value)">
<option selected>-- choix --</option>
<option value="aie">AÄ³e !!</option>
<option value="google">Quitter ?</option>
<option value="bruxelles">A bruxelles</option>
</select>
</form>
4. Clic sur une image (ne pas utiliser onClick qui ne fonctionne pas avec une image sous
Netscape)
<img src="bruxelles.jpg" onMouseDown="jouer('bruxelles')">
6.3.4 Quelques FSCommand
Voir la description détaillée sur le site de Macromedia
GetVariable( varName ), GotoFrame( frameNumber ), IsPlaying(),
LoadMovie( layerNumber, url ) , PercentLoaded(), Play(), Rewind(),
SetVariable(variableName, value ), StopPlay(), TotalFrames(),
TCallFrame(target, frameNumber ), TCallLabel( target, label ),
TCurrentFrame( target), TCurrentLabel(target), TGetProperty( target,
property), TGotoFrame( target, frameNumber ), TGotoLabel( target, label ),
TSetProperty(target, property, value), TStopPlay( target )
Cas particuliers de TGetProperty( target, property) et TSetProperty( target,
property, value) :
Propriété
Numéro
Constante
X POSITION (_x)
0
X_POS
Y POSITION (_y)
1
Y_POS
X SCALE
2
X_SCALE
Y SCALE
3
Y_SCALE
CURRENTFRAME
4
CURRENT_FRAME
TOTALFRAMES
5
TOTAL_FRAMES
ALPHA
6
ALPHA
VISIBILITY
7
VISIBLE
WIDTH
8
WIDTH
HEIGHT
9
HEIGHT
ROTATION
10
ROTATE
93
Get
x
x
x
x
x
x
x
x
x
x
x
Set
x
x
x
x
x
x
x
TD ActionScript
TARGET
FRAMESLOADED
NAME
DROPTARGET
URL(_url)
11
12
13
14
15
TARGET
FRAMES_LOADED
NAME
DROP_TARGET
URL
x
x
x
x
x
x
6.3.5 EMBED et OBJECT
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia..." ID=son WIDTH=1 HEIGHT=1>
<PARAM NAME=movie VALUE="son.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#4B3929>
<EMBED src="son.swf" quality=high
bgcolor=#4B3929 WIDTH=1 HEIGHT=2 swLiveConnect=true NAME=son
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com..."></EMBED>
</OBJECT>
On utilise NAME=son (Netscape) et ID=son (Internet Explorer) pour identifier l’animation
Flash. On met swLiveConnect à vrai pour que Netscape 4+ démarre Java.
Les éléments incorporés (EMBED) dans une page web lue par Netscape sont des membres de
window.document. Ainsi, si anim est le nom de notre animation incorporée dans la page,
après un test sur le navigateur, on utilisera la variable animObj définie par :
var animObj = InternetExplorer ? anim : document.anim;
6.3.6 Un script complet et gratuit
Découvrez le FlashSound Javascript API sur le site www.sonify.org.
6.4 Visionneuse
Nous allons créer une visionneuse d’images avec un effet de transition gauche → droite ou
droite → gauche (Voir le .swf joint).
Figure 5.3 − Vue générale de la Time-Line
1. Créez les 4 calques (boutons, cadre, masque et images) comme sur la figure 5.3
2. Dessiner un rectangle plein ayant les dimensions des images à diffuser sur la première
image clé de la couche masque.
Visualisation
94
Eric Schrafstetter
3. Créez un clip nommé images et placez sur les images clés 1,2,3… les différentes
images à afficher (utilisez le panneau info pour être sûr qu’elles sont bien
superposées)
4. Ajoutez une action stop(); à sa première image clé.
5. Créez un clip nommé diapo et y placer 2 occurrences du clip images, l’une à côté de
l’autre (voir figure 5.4)
Fig 5.4 − Les deux occurrences du clip images côte à côte
6. Nommez le clip de gauche image1 et celui de droite image2 (bouton droit sur l’image
- Panneaux - Occurrence et Nom = image1 )
7. Revenez sur la scène principale et placez une occurrence du clip diapo à l’image 1 de
la couche images . Faîtes bien en sorte que l’image de gauche soit sous le rectangle
dessiné sur la couche masque (voir figure 5.5)
Fig 5.5 − L’image de gauche est sous le rectangle bleu servant de masque
8. Donnez le nom diapo à l’occurrence du clip diapo
9. Créez un clip vide nommé charge et en mettre une occurrence sur la scène principale
avec l’action :
_root.nbtotal = 4;
_root.courant = 1;
}
Ceci permettra d’initialiser les variables lors du premier chargement de l’animation.
La variable nbtotal contient le nombre total d’image et courant le numéro de
l’image courante à afficher.
10. Ajoutez l’action suivante à l’image 1 de la couche boutons
diapo.image1.gotoAndStop(courant);
stop ();
95
TD ActionScript
Le clip image1 du clip diapo s’arrête sur l’image courante (celle que l’on voit)
11. Créez 2 boutons et les placer sur la scène principale (couche boutons). Ils serviront à
avancer ou à reculer dans le diaporama. Au bouton de droite, ajoutez l’action :
on (press) {
vieux = courant;
courant++;
if (courant>nbtotal) {
courant = 1;
}
gotoAndPlay ("avance");
}
On mémorise dans la variable vieux l’ancien numéro et courant augmente de 1. Si
courant dépasse le nombre total de photos, on boucle en remettant courant à 1.
L’effet de transition s’effectuera à l’étiquette avance
12. De même, ajoutez l’action suivante au bouton de gauche :
on (press) {
vieux = courant;
courant--;
if (courant<1) {
courant = nbtotal;
}
gotoAndPlay ("recule");
}
13. Les effets de transition :
– Cliquez sur F6 pour insérer une nouvelle image clé au temps 2 de la couche
images.
– Cliquez à nouveau sur F6 au temps 10 et déplacez le clip diapo de sorte que
l’image de droite se retrouve sur l’ancienne image de gauche, c’est-à-dire juste
sous le rectangle bleu.
– Créez une interpolation de mouvement entre les temps 2 et 10
– Au temps 2 de la couche images, ajoutez l’action :
diapo.image1.gotoAndStop(vieux);
–
–
–
–
–
Au temps 10, ajoutez l’action gotoAndPlay(1);
Donnez le nom avance à l’image clé 2 (bouton droit sur l’image clé 2 Panneaux - Image - Etiquette = avance)
Cliquez sur F6 au temps 11 et au temps 20, remettre le clip diapo comme il
était au temps 2.
Ajoutez une interpolation de mouvement entre 11 et 20, nommez l’image 11
recule et ajoutez l’action gotoAndPlay(1); au temps 20.
Au temps 11, ajoutez l’action :
diapo.image2.gotoAndStop(vieux);
Visualisation
96
Eric Schrafstetter
Remarquez bien que les noms image1 et image2 ont été inversés ! L’idée est toute
simple, l’image actuellement affichée a le numéro vieux (qui est le numéro de
l’ancienne image) et celle qui lui est adjacente le numéro courant (qui est celui de la
future image à afficher). On effectue ensuite un déplacement du clip diapo de gauche
à droite ou de droite à gauche.
14. Etendre par F5 la couche masque jusqu’au temps 20. Créez éventuellement un cadre
sur la couche cadre pour faire joli.
15. Il ne reste plus qu’à rendre actif le masque par bouton droit sur le nom de la couche
masque et Masque.
16. Ajustez la cadence comme bon vous semble (Modification - Animation)
17. Compilez l’animation et utilisez les boutons pour visionner le diaporama.
18. Pour les personnes qui utilisent mon freeware Diaporama, vous pouvez remplacez le
clip images par un LoadMovie.
6.5 Créer un QCM
Nous allons créez un modèle de QCM ayant à chaque fois 3 choix possibles. Les questions
seront créées avec PowerPoint qui est, nous l’avons déjà dit, plus conviviale pour la mise en
page.
6.5.1 Les questions
1. Lancez PowerPoint
2. Créez une page de titre (CTRL+M et 1er choix)
3. Créez quelques diapositives avec, sur chaque diapo, une question et 3 choix numérotés
1,2 et 3.
4. N’hésitez pas à ajouter des organigrammes, des ClipArts, des images jpg, des
formules (insertion objet - Microsoft équation), des calendriers (insertion objet Contrôle calendrier), des tableaux (insertion - tableau), etc.
5. Enregistrez sous le nom qcm.ppt
6. Faîtes Fichier - Enregistrez sous et choisir Métafichier windows comme type
d’enregistrement. Répondre oui pour que toute la série des diapos soit enregistrée.
7. Mettre un fond uni à votre présentation. Si vous désirez néanmoins un fond, créez-le
sous Flash dans une couche séparée.
6.5.2 Le QCM sous Flash
1. Lancez Flash et enregistrez sous le nom qcm.fla
2. Nommez la première couche actions, la seconde ppt et la troisième boutons.
Image clé 1
1. Placez l’action suivante à l’image 1, couche actions :
ntotal=15;
transfo = new Object();
rep = [];
97
TD ActionScript
nq = 1;
corrige = 0;
var bon = [2,2,1,2,3,1,2,2,2,1,2,3,1,2,3];
enonces.gotoAndStop(1);
stop ();
− La variable ntotal représente le nombre total de questions dans l’animation
PowerPoint (le titre n’est pas compté comme une question).
− rep contiendra les futures réponses.
− La variable nq correspond au numéro de la question courante.
− La variable corrige permet de savoir si on est en mode corrigé ou non.
− Le tableau bon contient la suite des bonnes réponses au QCM.
− Le clip enonces contiendra les diapos, il pointe pour le moment sur la première
image (diapo contenant le titre).
2. Créez un bouton de forme rectangulaire et nommez-le bt (voir le fichier .fla pour un
beau bouton à la i-Mac !)
3. Revenir sur la scène principale de l’animation et placez une occurrence du bouton bt à
l’image clé 1. Lui associer l’action suivante :
on (release) {
gotoAndPlay (2);
}
4.
5.
6.
7.
8.
Ce bouton servira simplement à lancer le QCM.
Créez un clip nommé diapos, cliquez sur sa première image clé et Affichage - Zoom Afficher une image pour bien centrer le clip.
Faîtes Fichier - Importer et rechercher la première diapo .wmf qui a été créée avec
PowerPoint.
Répondre oui pour importer toute la série.
Placez une occurrence du clip diapo sur la scène principale couche ppt et lui donner le
nom de enonces.
Sur cette occurrence, faîtes Bouton droit - Modifier en place et avancez dans le clip
pour voir si les questions ne débordent pas de l’animation.
Image clé 2
1. Créez un clip nommé choix et placez une occurrence du bouton bt sur sa première
image clé. Mettre l’action suivante au bouton :
on (release) {
_root.rep[_root.nq-1]=Number(nom);
_root.nq++;
_root.gotoAndPlay("choix");
}
La première ligne permet de récupérer le numéro du bouton (1,2 ou 3) et de le placer
dans le tableau rep des réponses à la position nq-1 (rep[0] correspondant à la
première donnée du tableau). On passe alors directement à la question suivante par
_root.nq++.
2. Ajoutez une couche au dessus de celle contenant le bouton et créez une zone de texte
dynamique ayant pour nom nom. Ce sera le texte correspondant à ce bouton.
Visualisation
98
Eric Schrafstetter
3. Ouvrez la bibliothèque par CTRL+L et bouton droit sur le clip choix puis Définir les
paramètres du clip
4. Ajoutez le paramètre nom et mettre 1 comme valeur par défaut.
5. Revenir sur la scène principale de l’animation et placez sur la couche boutons à
l’image clé 2 trois occurrences du clip choix. Faîtes bouton droit - Panneaux Paramètres du clip sur chacun des clips et mettre la valeur de nom à 1,2 puis 3.
6. Nommez choix1 le clip de paramètre 1, choix2 le clip de paramètre 2 et choix3 le
dernier.
7. Sur la couche actions image clé 2, mettre l’action :
if (nq<=ntotal) {
enonces.gotoAndStop(nq+1);
for (i=1; i<=3; i++) {
couleur = new Color("choix"+i);
if (i == rep[nq-1]) {
transfo = {ra:-100,rb:0,ga:100,gb:0,ba:-100,bb:0,aa:100,ab:0};
} else {
transfo = {ra:100,rb:0,ga:100,gb:0,ba:100,bb:0,aa:100,ab:0};
}
couleur.setTransform(transfo);
}
if (corrige == 1) {
couleur = new Color("choix"+bon[nq-1]);
transfo = {ra:0,rb:255,ga:0,gb:255,ba:0,bb:255,aa:100,ab:0};
couleur.setTransform(transfo);
}
} else {
gotoAndPlay ("fin");
}
On affiche la question nq qui est à la diapo nq+1. Puis on colorie les boutons suivant
les réponses précédemment choisies (test i==rep[nq]). Si le test est en phase de
correction (test corrige == 1), alors on met en blanc la bonne réponse.
8. Donnez le nom choix à l’image clé 2 (Fenêtre - Panneaux - Image)
Image clé 3
1. Sur la couche actions, image clé 3, mettre l’action stop ();.
2. Etendre par F5 les images clés 1 des couches boutons et ppt jusqu’en 3.
Image clé 4
1. Mettre 2 occurences du bouton bt à l’image clé 4 de la couche actions de la scène
principale.
2. A un des boutons associez l’action :
on (release) {
corrige=1;
nq=1;
gotoAndPlay ("choix");
}
Bouton qui permet de lancer le corrigé.
3. A l’autre bouton mettre l’action :
99
TD ActionScript
on (release) {
nq=1;
gotoAndPlay ("choix");
}
qui lui donnera la possibilité de voir et/ou corriger ses réponses.
4. Ajoutez une zone de texte dynamique nommez score sur la scène image 4.
5. Et enfin, sur la couche actions image clé 4, mettre l’action :
if (corrige == 1) {
score = 0;
for (i=1; i<=ntotal; i++) {
if (rep[i-1] == bon[i-1]) {
score++;
}
}
score = Math.floor(score/ntotal*200)/10 +"/20";
} else {
score = "";
}
stop ();
De cette façon, si nous sommes en mode corrigé, le nombre de bonnes réponses est
calculé par la boucle et la note sur 20 est affichée (avec une décimale).
6.6 Camembert
Nous voulons représenter, sous forme de camembert, les données suivantes :
Valeurs
20
5
50
37
10
Catégories
crayons bleus
crayons verts
crayons roses
crayons turquoises
crayons violets
Placez ces valeurs dans un fichier donnees.txt sous la forme :
donneValeurs=20,5,50,37,10&couleurs=0000cc,669999,cc66cc,00cccc,9933cc&cate
gories=crayons bleus,crayons verts,crayons roses,crayons turquoises,crayons
violets
Veillez bien à ce que ce fichier soit dans le même répertoire que le fichier .swf que vous allez
créer.
1. Créez image clé en 1 et placez l’action stop(); sur la couche 1
2. Créez un clip vide nommé controle. Placez une occurrence de ce clip sur la scène
principale à l’image 1 et lui donner comme nom lirevaleurs
3. Action associée au clip lirevaleurs :
Visualisation
100
Eric Schrafstetter
onClipEvent(load) {
this.loadVariables("donnees.txt");
}
onClipEvent(data) {
aVal = donneValeurs.split(",");
aCoul = couleurs.split(",");
aCat = categories.split(",");
for (var i in aVal) {
aVal[i] = Number(aVal[i]);
}
for (var i in aCoul) {
aCoul[i] = parseInt(aCoul[i], 16);
}
for (item in this) {
_root[item] = this[item];
}
_root.gotoAndStop("dessin");
}
− Les différentes variables sont lues grâce à la commande this.loadVariables.
− La commande split permet de convertir les chaînes de caractères en tableau en
utilisant le séparateur ,. Utilisez la fonction trace (aVal[i]); après la ligne
aVal[i] = Number(aVal[i]); pour visualiser ce qui se passe.
− La fonction parseInt convertit une chaîne en entier et l’argument 16 permet de
préciser la base utilisée.
Fig 5.1 − Aspect de la scène principale
4. Créez un clip pie ayant sur sa première image un quartier de 3,6° (Voir figure 5.2).
Bien placer la pointe sur la croix +
Fig 5.2 − Le clip pie est un quartier de disque d’angle 3,6°
5. Créez une image clé en 2 et donnez-lui le nom dessin. Effacer l’occurrence du clip
controle sur cette image.
6. Placez une occurrence de pie à l’image dessin et lui donner le nom quartier
7. Créez un clip label avec en image 1 une zone de texte du type Texte dynamique de
nom nom. Utilisez le panneau info pour placer le centre de la zone de texte sur la croix.
8. Placez une occurrence du clip label à l’image dessin de la scène principale et lui
donner le nom label.
9. Créez un clip symbole avec en image un le dessin d’un petit carré coloré. Utilisez le
panneau info pour placer le centre du carré sur la croix (Ainsi, les carrés et les noms
des labels seront bien alignés)
101
TD ActionScript
10. Placez n’importe où une occurrence du clip symbole à l’image dessin de la scène
principale et lui donner le nom carre et les dimensions L = 10 et H = 10
11. Placez sur le calque 1 à l’image dessin l’action :
nElements = aCoul.length;
aPourc = new Array(nElements);
Prof = 1;
// Calcule le total
for (i=0; i<nElements; i++) {
nTotal += aVal[i];
}
// Calcule les pourcentages
aPourc[i] = math.round((aVal[i]/nTotal)*100);
trace (aPourc[i]);
nPourc += aPourc[i];
if (i<nElements-1) {
Reste += aPourc[i];
}
}
// On ajuste si erreur d'arrondi
if (nPourc != 100) {
aPourc[nElements-1] = 100-Reste;
}
Somme = 0;
// On duplique et colore le petit carr
carre.duplicateMovieClip("carre"+i, Prof++);
// Positions des carres
_root["carre"+i]._x = 130;
_root["carre"+i]._y = i*20+50;
tempColor = new Color(eval("carre"+i));
tempColor.setRGB(aCoul[i]);
// On ajoute la catgorie
label.duplicateMovieClip("label"+i, Prof++);
// Positions des labels
_root["label"+i].nom = aCat[i];
_root["label"+i]._x = 200;
_root["label"+i]._y = i*20+50;
// On duplique la portion de camembert
for (j=0; j<aPourc[i]; j++) {
quartier.duplicateMovieClip("quartier"+i*nElements+j, Prof++);
// Position du centre du camembert
_root["quartier"+i*nElements+j]._x = 50;
_root["quartier"+i*nElements+j]._y = 80;
// Rotation de la portion
_root["quartier"+i*nElements+j]._rotation = Somme-3.6;
Somme -= 3.6;
// La couleur de la portion est dans le tableau aCoul
tempColor = new Color(eval("quartier"+i*nElements+j));
tempColor.setRGB(aCoul[i]);
}
}
stop ();
Visualisation
102
Eric Schrafstetter
Fig 5.3 − Résultat après quelques ajustements
6.7 Panorama 360°
Voici une méthode simple pour créer un Panorama à 360°. Il vous faudra trouver ou
construire une image panoramique (si possible se raccordant aux 2 extrémités). Pour cela,
utilisez le freeware PanoTools (assez fastidieux), PhotoSuite (très facile et pas cher) ou
QuickTime VR (pour les pros).
1.
2.
3.
4.
Importez votre image sous Flash
Convertissez-là en symbole ayant pour nom photo
Ajustez la taille de votre animation pour que sa largeur soit celle de votre image.
Créez un clip nommé panorama et mettre une occurrence de photo avec pour nom but
à l’image 1.
5. Placez l’action suivante sur l’image 1 du clip panorama :
m=0;
largeur=getProperty (but,_width);
while (m<3) {
m++;
duplicateMovieClip (but, "but"+m, m+1);
this["but"+m]._x = getProperty (but,_x)+m*largeur;
}
stop ();
Ceci aura pour effet de dupliquer la photo et de placer les images les unes à côté des
autres.
6. Placez l’action suivante à l’image 1 de la scène principale :
demi=_root._width/2;
w=getProperty (_root.nav,_width);
speed=45;
stop ();
103
TD ActionScript
Vous pouvez modifier la variable speed qui règle la vitesse de défilement.
7. Créez un clip vide nommé dragControl avec l’action suivante sur l’image 1 :
xpos=(getProperty(this,_x)-_root.demi)/_root.speed;
_root.nav._x = getProperty (_root.nav,_x)-xpos;
if (getProperty (_root.nav,_x)<-_root.w) {
_root.nav._x = 0;
} else if (getProperty (_root.nav,_x)>0) {
_root.nav._x = -_root.w;
}
8. Et l’action gotoAndPlay (1); à l’image 2.
9. A l’image 1 de la scène principale, placez une occurrence du clip panorama nommé
nav
10. Cliquez sur nav puis CTRL+K pour afficher la fenêtre d’alignement. Choisir : Vers la
scène et répartir horizontalement et verticalement. Ceci permet de placer l’occurrence
au milieu de la scène.
11. Placez également une occurrence du clip dragControl et lui donner l’action :
startDrag ("", true);
}
6.8 Rotation autour d’un objet
Voici une manière très élémentaire de créer un effet de rotation 3D autour d’un objet.
1. Prendre des photos d’un objet en tournant autour (par exemple 8 photos à 45°
d’intervalle).
2. Créez un clip nommé objet et placez aux différentes images clés les photos (par
exemple 8).
3. Placez une occurrence de ce clip sur la scène principale et lui donner le nom objet
4. Créez un clip vide mettre une occurrence de celui-ci sur la scène principale en X = 0 et
Y=0
5. Ajoutez l’action suivante à ce clip :
nb = _root.nbphotos;
L = _root._width;
_root.objet.gotoAndStop(1);
}
x = _xmouse;
if ((x>0) && (x<L)) {
_root.objet.gotoAndStop(Math.floor(nb*x/L+1));
}
}
6. A l’image clé 1 de la scène principale, mettre l’action :
nbphotos=8;
stop ();
Visualisation
104
Eric Schrafstetter
La valeur 8 correspond aux nombres d’images prises de l’objet.
7. Lancez l’animation et déplacez la souris de gauche à droite pour faire tourner l’objet.
6.9 Effet sur une image
Comment, en déplaçant la souris de gauche à droite, rendre flou ou accentuer une image
Bitmap ? Voici une réponse possible en utilisant une méthode similaire à celle de la rotation
autour d’un objet :
1. Editez votre image avec un logiciel de dessin. Créez un flou ou accentuer l’image
suivant l’effet voulu. Enregistrez l’image sous un nouveau nom.
2. Lancez Flash et importez les 2 images
3. Transformez les images en symboles clip avec un nom quelconque
4. Placez une occurrence de l’image floue à l’image 1 couche 1 de la scène principale et
lui donner le nom flou
5. Placez une occurrence de l’image normale à l’image 1 couche 2 (couche en dessous)
de la scène principale
6. Ajoutez l’action Stop(); à l’image 1
7. Créez un clip vide et placez une occurrence de celui-ci sur la scène principale, toujours
à l’image 1. Ajoutez l’action suivante au clip :
_root.flou._alpha=0;
L=_root._width;
}
x=_root._xmouse;
if ((x>0) && (x<L)) {
_root.flou._alpha=100*x/L;
}
}
Tout comme pour l’exercice sur la rotation autour d’un objet, ici la valeur alpha de
l’image floue varie avec la position de la souris.
105
TD ActionScript
6.10 Flash transparent
Vous avez sûrement déjà vu sur le net des publicités faîtes en Flash venir au milieu de votre
écran et se superposer à la page web en cours. Quoique énervantes, vous vous demandez peutêtre comment elles sont fabriquées.
Sachez dès maintenant que ces animations transparentes ne sont visibles que par Internet
Explorer 4 et + et sous Windows uniquement.
6.10.1 Le fichier .js joint
Voir trouverez dans le .zip le fichier transparent.js qui permet de créer très rapidement une
animation en superposition qui se lance dès l’ouverture de la page web.
1. Prévoir une image gif ou jpg qui sera affichée après l’animation
2. Créez une page web quelconque à partir de laquelle nous verrons le Flash transparent
en superposition. Nous appellerons transpa.htm ce fichier.
3. A l’endroit où l’image finale devra être placée, mettre code HTML suivant :
<script language=JavaScript1.1>
<!-document.write ('<SCR' +'IPT LANGUAGE="JavaScript1.1"
SRC="transparent.js"></SCR' + 'IPT>');
//-->
</script>
Le mot SCRIPT est coupé en 2 pour éviter qu’il soit interprété directement comme un
script ! A cet endroit, on écrit dans le document le résultat de transparent.js qui sera
expliqué plus loin.
4. Créez une animation Flash quelconque en sachant que son fond sera transparent. Voici
quelques idées :
− Créez un fond remplissant toute la surface puis utilisez un masque par dessus
(voir fichier .fla joint) . Seules les parties masquées seront affichées.
− Créez une interpolation de forme
− Vous pouvez ajouter des boutons, des LoadMovie etc.
5. Pour afficher l’image et cacher l’animation (après un clic sur un bouton ou à la fin
d’un clip), ajoutez dans Flash l’action suivante (sur un bouton ou à une image clé) :
getURL("javascript:cacher();");
La fonction cacher est elle-aussi incluse dans le fichier transparent.js.
6. Publiez uniquement le fichier swf par MAJ+F12
7. Ouvrez le fichier transparent.js avec le bloc-note ou votre éditeur HTML.
8. Modifiez les premières lignes du fichier en entrant vos propres données :
Visualisation
106
Eric Schrafstetter
−
−
−
−
−
−
−
anim_src='bandeau.swf' : Nom de l’animation Flash à visualiser
anim_L = 640 : Sa largeur et sa hauteur
anim_H = 300
img_src='pub.jpg' : Nom de l’image finale à afficher
img_lien='transpa.htm' : Lien sur l’image. Ici, on recharge l’animation.
img_L = 180 : Dimensions de l’image
img_H = 260
9. Il ne vous reste plus qu’à ouvrir le fichier transpa.htm. Si tout se passe bien,
l’animation sera immédiatement lancée puis disparaîtra avec un clic de bouton ou
autre (suivant ce que vous avez défini) et l’image finale s’affichera à l’endroit où vous
avez insérez le script.
6.10.2 Commentaires sur le script
1. La première partie du programme teste la version du système d’exploitation et du
navigateur.
2. Vous pouvez dans la partie suivante modifier la position du calque (ici (0,0))
3. La fonction voir_ban rend visible l’image finale.
4. La fonction cacher appelle voir_ban et cache le calque contenant l’animation
5. La partie //image finale place l’image finale dans la page web mais ne la rend pas
visible.
6. On teste par la fonction IsObject si le navigateur a bien le Player Flash
7. Si c’est le cas, on place le calque nommé calque contenant l’animation Flash.
8. Remarquez les paramètres <PARAM NAME=wmode VALUE=transparent> pour Flash et
div id="calque" style="background-color:Transparent pour le calque
permettant d’obtenir la transparence.
6.10.3 Aller plus loin
1. Vous pouvez transformer le script transparent.js en une fonction qui sera appelée
en cliquant sur un lien.
2. Pour ouvrir une fenêtre web en cliquant sur un lien, placez le script suivant dans la
partie HEAD de votre page HTML :
<script>
<!-function ouvre(chemin,w,h){
taille='scrollbars=no,width='+w+',height='+h;
Nouveau=window.open(chemin,"voir",taille);
Nouveau.moveTo(20,20);
}
//-->
</script>
Puis créez un lien vers javascript:ouvre('nom.htm',600,300);
107
TD ActionScript
6.11 Feux d’artifice
Si comme moi vous trouvez qu’un feu d’artifice c’est magnifique mais toujours trop court, je
vous propose d’en créer un vous-même en Flash !
A titre d’info, et avec les précautions d’usage concernant les écrans de veille et leurs virus
potentiels, le freeware FireFlower Screen Saver crée de superbes feux d’artifice…
6.11.1 Version simplifiée
Cette version ne tient pas compte de l’attraction terrestre, les feux s’éteignant suffisamment
rapidement pour que cela ne soit pas gênant visuellement. On considère les trajectoires
comme rectilignes alors qu’elles sont normalement paraboliques. De plus, il n’y aura pas de
projectile de lancement.
L’idée est très simple : créer les trajectoires possibles d’une particule entre son état allumé et
éteint. Dupliquer cette particule dans des directions et déformations aléatoires à partir du
centre de l’explosion.
1. Dessinez une petite particule (une étoile ou un carré), transformez-là en symbole par
F8 et lui donner le nom etoile
La particule
2. Créez par CTRL+F8 un clip nommé Clip_etoile. Placez une occurrence du clip
etoile aux images 1 et 15 par F6. Faîtes une interpolation de mouvement entre ces 2
images. A l’image 15, l’étoile aura un alpha = 0% (mort de l’étoile)
La vie de l’étoile entre 1 et 15
L’interpolation de mouvement entre alpha = 100% et alpha = 0%
3. Mettre une action stop à l’image 15
4. Utilisez le panneau des propriétés pour donner le nom effet0 à la première image clé
de ce clip.
Visualisation
108
Eric Schrafstetter
5. Inventez de nouvelles animations à partir de l’image 16 (label = effet1), puis effet2
etc.
Différents types d’effet sur la ligne temporelle de Clip_etoile
6. Créez un clip vide nommé Dupliquer et y placer une occurrence du clip
Clip_etoile avec pour nom etoile
7. Mettre l’action suivante à l’image 1 du clip Dupliquer :
etoile._visible=false
i = 0;
eff = "effet"+random(3);
while (i<100) {
duplicateMovieClip("etoile", "etoile"+i, i);
with (this["etoile"+i]) {
_rotation = random(360);
_xscale = _yscale=40+random(100);
gotoAndPlay(eff);
}
i++;
}
On choisit l’effet de la trajectoire pour l’explosion. On duplique 100 fois le modèle de
la particule, on choisit une direction aléatoire entre 0 et 360°,on déforme le clip entre
40% et 140% de l’original et on lance l’effet
8. Nous allons maintenant créer le feu d’artifice. Revenir sur la scène principale et placer
3 images clé vides aux temps 1,2 et 7.
3 images clé vides aux temps 1,2 et 7
9. Mettre l’action suivante à l’image clé 1.
nb = 0;
couleurs = ["0xFFFF99", "0xFFCCFF", "0x99CCFF", "0x99CC66"];
La variable nb correspondra à la profondeur du clip et couleurs aux différentes
couleurs possibles pour les feux.
10. Mettre l’action suivante à l’image 2 :
for (i=1; i<5; i++) {
if (random(3)<1) {
attachMovie("part", "p"+nb, nb);
cClip = new Color(this["p"+nb]);
cClip.setRGB(couleurs[random(4)]);
with (this["p"+nb]) {
109
TD ActionScript
_xscale = _yscale=40+random(200);
_x = random(550);
_y = 440-2*_xscale;
}
nb++;
nb %= 10;
}
}
A chaque tour, on essaie 5 fois de dupliquer le feu. On le fera dans 33% des cas (test
random(3)<1, random(3) renvoyant les valeurs 0, 1 ou 2). Ceci donne un effet
aléatoire de l’apparition des feux. Si vous voulez un pourcentage de réussite égal à
x% ou x est une fraction x = a/b, utilisez random(b)<a. Par exemple pour 20% = 1/5,
le test à effectuer sera random(5)<1.
Lorsque le clip est dupliqué, il est mis à la profondeur nb, on lui applique ensuite une
couleur, une position et une dilatation aléatoires. Pour la position en y, on place les
gros feux plus haut. On augmente la profondeur nb et on la fait repasser à 0 si elle
dépasse 10.
11. Mettre l’action gotoAndPlay(2) à l’image 7.
12. Compilez !
6.11.2 Autres idées
1. Vous pouvez créer différents types d’explosions plus réalistes à partir d’une suite
d’images bitmaps.
2. Ajoutez un son lors de l’explosion et/ou la phase de lancement.
6.12 Effets de texte
6.12.1 Introduction
Il est laborieux avec Flash de placer un grand nombre de symboles sur la scène à des positions
(x,y) précises. Il faut en effet, pour chaque symbole, utiliser le panneau des propriétés et
entrer les données une par une… C'est certainement pour cette raison qu'on été inventés des
outils auxiliaires pour créer des effets spéciaux sur du texte. Citons les logiciels payants
suivant qui font du bon travail :
1.
2.
3.
4.
5.
http://www.mix-fx.com (Mix-FX)
http://www.anim-fx.com/ (Amin-FX)
http://www.magicflare.com/magicflare/home.html (Magic Flare)
http://www.swishzone.com/ (Swish)
http://www.flashkit.com (FlashTyper en ligne)
Pour les solutions gratuites, vous pouvez utiliser les librairies Ming pour PHP ou Bukoo pour
Visual Basic, Delphi… Dans ce cas, vous créez de toute pièce votre symbole et le placé par
programmation sur la scène. Nous allons pour notre part recréer quelques effets célèbres
directement avec Flash et ActionScript.
Visualisation
110
Eric Schrafstetter
6.12.2 Effet DNA (5Ko)
Le texte tourne en forme de spirale sur lui-même comme sur des branches d'ADN
1. Créer un clip nommé lettre et y placer une zone de texte dynamique ayant pour nom
de variable txt
2. Dans la fenêtre des propriétés, choisir Caractères puis Uniquement les majuscules
(afin réduire la taille du SWF final)
3. Créez un clip nommé effet, c'est ce clip qui va faire tourner une lettre
4. Nommez le calque 1 Arrière et placez une occurrence du clip lettre sur la scène de
effet avec pour nom lettre
5. Affichez la fenêtre Transformer (CTRL+T)
6. Mettre le clip lettre en (0 , - 40 ) avec pour transformation 100% et 0% (il est possible
qu'il refuse le mettre à 0% !!). Choisir également Incliner = 180° et Alpha = 50%
7. Insérez par F6 une image clé au temps 10 et appliquez la transformation 100% et
100%, Incliner = 180° et Alpha = 100%. Mettre sa position Y à la moitié de la hauteur
du clip lettre, par exemple ici, H = 65, je mets donc le clip à la hauteur Y = - 32,5
111
TD ActionScript
8. Toujours par F6, image clé au temps 20 avec position en (0,40) et transformation
100%, 0% et Incliner = 180° et Alpha = 50%
9. Créez une interpolation de mouvement entre les deux images clés avec une
accélération de –100 entre 1 et 10 et +100 entre 10 et 20
10. Ajoutez en dessous du calque Avant un calque nommé Arrière
11. En partant toujours du clip lettre ayant pour occurrence lettre, refaire les mêmes
manipulations mais sans la rotation de 180°. En pelure d'oignon, l'effet doit ressembler
à cela :
Calque Avant
Calque Arrière
12. Apparence des calques
13. Revenir sur la scène principale (dimension 468x60 pixels pour un bandeau classique)
et placer le clip effet à l'image 1 avec pour nom d'occurrence L0 (pour Lettre 0)
14. Ajoutez le code suivant à l'image 1 :
// Texte et bord en pixels
texte = "TDAS AVEC FLASH";
bord = 10;
// Le programme
n = length(texte);
with (L0) {
lettre.txt = texte.charAt(0);
_width = (468-2*bord)/n;
_x = bord;
}
for (i=1; i<n; i++) {
Visualisation
112
Eric Schrafstetter
duplicateMovieClip("L0", "L"+i, i);
with (this["L"+i]) {
gotoAndPlay(int(20*i/n));
_x = L0._x+i*L0._width;
lettre.txt = texte.charAt(i);
}
}
stop();
Explications
− Le texte a afficher est dans la variable texte
− On place le 1er caractère du texte dans la zone de texte txt du clip lettre qui est
dans le clip L0
− On duplique le clip L0 en autant de lettres qu'il y a dans texte et on place les clips
L1, L2… à droite de L0
− On change les différentes lettres et enfin, on commence à jouer les clips à des
moments différents. Plus précisément, notre animation s'effectue sur 20 images et
il y a 10 lettres dans texte. On distribue donc ici les démarrages en 20*i/10 = 2i,
c'est-à-dire que le clip L1 démarre en 2, le clip L2 en 4 etc…
6.12.3 Double Zoom (5Ko)
On garde tout ce que l'on a fait et l'on change uniquement le clip effet. Il est important de
créer les interpolations sur le ou les clips ayant pour occurrence lettre.
1. On crée deux calques (pour les deux effets du zoom) avec des images clés en 1, 10 et
20 pour le calque Lettre et en 1, 13 et 20 pour le calque Lettre bis
2. Mettre une occurrence du clip lettre sur l'image 1 des 2 calques avec pour nom
d'occurrence lettre (il y a donc 2 occurrences ayant le même nom)
3. Effet sur le calque Lettre :
− Image 1 : Lettre normale sans effet ni transformation
− Image 10 : Transformer = 3% et 3% , Alpha = 0%
− Image 20 : Lettre normale
4. Effet sur le calque Lettre bis
113
TD ActionScript
− Image 1 : Lettre normale avec Alpha = 0%
− Image 20 : Transformer = 500% et 500% avec Alpha = 0%
6.12.4 Ouverture (5Ko)
On garde toujours la même base et on ne changement que le clip effet :
1. Mettre une occurrence du clip lettre sur l'image 1 des 2 calques avec pour nom
d'occurrence lettre
2. Effet sur le calque Lettre :
− Image 1 : Lettre avec Alpha = 0% et Transformer en X = 0%
− Image 10 : Lettre normale
− Etendre jusqu'à l'image 20 par F5 (pour reposer les yeux)
3. Le calque Zone ne sert qu'à définir la taille globale de la lettre.
4. Créer interpolation de mouvement avec Accélération = -100
5. Pour que toutes les lettres s'ouvrent en même temps remplacer :
for (i=1; i<n; i++) {
gotoAndPlay(int(20*i/n));
}
}
par
for (i=1; i<n; i++) {
Visualisation
114
Eric Schrafstetter
gotoAndPlay(1);
}
}
6.12.5 Twist
Clip rotation
1. Effet sur le calque :
− Image 1 : Transformation = 400% et 400%, Alpha = 0%
− Image 10 : Lettre normal avec Alpha = 100%
− Pour l'interpolation, choisir Vers la droite 1 fois avec une accélération de 100
− Etendre jusqu'au temps 35 par F5
2. Démarrons les effets de façons aléatoires
for (i=1; i<n; i++) {
gotoAndPlay(random(25));
_x = L0._x+i*40;
}
}
6.12.6 Flou
1. Créer 3 calques avec une occurrence du clip lettre sur chaque calque à l'image 1
115
TD ActionScript
2. Décalez vers la gauche de 1 ou 2 pixels horizontalement l'abscisse du clip du second
calque
3. Décalez vers la droite de 1 ou 2 pixels celui du troisième calque
4. Faire des interpolations d'un alpha = 0% à 100% entre les images 1 et 10
5. Ajoutez éventuellement d'autres interpolations entre 10 et 20
6.12.7 Accélération
Comment sont calculées sous Flash les différentes positions d'un clip suivant l'accélération
choisie ?
Pour le savoir, cherchons les équations des courbes les plus simples pouvant passer par les
points de coordonnées (0,0) et (1,1), à savoir les paraboles.
Une parabole a pour forme y = ax² + bx + c
Comme le point (0,0) est sur la parabole, on doit donc avoir 0 = a×0² + b×0 + c d'où c = 0
et comme (1,1) y est également : 1 = a×1² + b×1 + c donc b = 1 – a.
d'où y = ax² + (1 – a)x = x(ax + 1 – a)
Représentons cette famille de paraboles lorsque a varie entre –1 et 1 (page suivante)
Le paramètre p de Flash entre – 100 et +100 correspond à – 100a.
Si vous choisissez un effet e1 au temps t1 et un effet e2 au temps t2 avec une accélération p
entre – 100 et +100, l'effet intermédiaire e calculé au temps t sera :
p

a = − 100


e = t − t1  a (t − t1 ) + 1 − a (e2 − e1 ) + e1

 t 2 − t1  t 2 − t1

Visualisation
116
Eric Schrafstetter
1
0,9
0,8
a = – 0,5
0,7
0,6
a=–1
0,5
a=0
0,4
0,3
a = 0,5
0,2
a=1
0,1
0
0
0,1
0,2
0,3
0,4
0,5
0,6
0,7
0,8
0,9
1
y = x(ax + 1 – a)
Exemple :
Pour un effet alpha de 100% à 50% entre les images 1 et 10 avec une accélération +80, on
aura :
t1 = 1, t2 = 10 , alpha1= 100%, alpha2 = 50% et p = +80
D'où
e=
Image
t
1
2
3
4
5
6
7
8
9
10
117
40t 2 − 890t + 8950
81
e
théorique
100
90.49382716
81.97530864
74.44444444
67.90123457
62.34567901
57.77777778
54.19753086
51.60493827
50
Vraie valeur
Flash
100
91
82
75
68
62
58
54
52
50
TD ActionScript
7 Outils de conversions
7.1 Bitmap vers Vectoriel
Il y a des dizaines d’utilitaires pour transformer des images Bitmap en images Vectorielles !
Cherchez les mots-clé Raster to vector pour vous en convaincre. A quoi bon me direz-vous
puisque Flash le fait ma foi fort bien ? Certes. Mais je vous ai trouvé un petit freeware qui va,
je l’espère, vous étonner... En tout cas je le trouve fabuleux ! Il permet de convertir des .bmp
ou .tif 1 bit (càd en 2 couleurs) en .emf (qui est la version 32-bits du .wmf). Cet utilitaire
s’appelle ras2vec. Et alors ? Alors voici un exercice pour vous montrer ce que l’on peut faire :
1. Téléchargez le zip et dézippez
2. Copiez le fichier ras2vec.exe se trouvant normalement dans le répertoire Testing
dans c:\windows\command par exemple (afin qu’il soit accessible de partout)
3. Dessinez avec un logiciel quelconque (Flash par exemple ! !) une image en noir et
blanc et enregistrez-là sous le nom image.bmp (Fichier – Exporter l’image si vous
utilisez Flash)
4. Ouvrez une fenêtre DOS dans le répertoire où est l’image. Tapez la ligne de
commande suivante :
ras2vec -d -m image.bmp
Remarque : Tapez ras2vec pour voir les paramètres possibles. Il est également
possible de faire :
ras2vec -d -m *.bmp
qui convertit toutes les images .bmp en une fois ! ! Supprimez le paramètre -d si vous
voulez une version fil de fer. Le paramètre optionnel -e tf avec tf ∈ [0; 10]
définie le seuil de tolérance (10 pour très peu de lignes)
5. Lancez Flash et importez le fichier image.emf créé.
Fig 6.2 − Exemple avec du texte
Visualisation
118
Eric Schrafstetter
Fig 6.2 − Exemple avec une image
7.2 Diaporama en swf
Ce programme est moins intéressant si vous travaillez avec Flash MX qui est capable
d’importer à la volée des fichiers .jpg. Ce petit programme de mon cru (créé avec Visual
Basic en utilisant la librairie swfobs.dll) qui permet de convertir des fichiers JPG en un
unique fichier SWF. Vous pouvez le télécharger sur le site du document.
7.2.1 Introduction
1. Permet de sélectionner toutes les images d’un répertoire en une fois
2. Possibilité de réarranger les images, de les supprimer...
3. Deux sorties possibles :
– Diaporama autonome avec boutons suivant et précédent
– Format LoadMovie utilisable directement dans une autre animation Flash
5. Choix de la taille de l’animation, de sa fréquence d’affichage (en frames / seconde) et
de sa couleur du fond
6. La taille des images s’adapte au format de sortie, c’est donc un net avantage par
rapport à une manipulation sous Flash
ATTENTION ! Ce programme plantera si vous utilisez des JPG à compression progressive. Il
fonctionne parfaitement avec des JPG à compression standard en 16 millions de couleurs.
7.2.2 Quelques remarques
Pour convertir une vidéo AVI en fichier SWF (avec une bonne compression, on divise
facilement la taille du AVI par 10), la manipulation peut être :
1. Utilisez VirtualDub si vous voulez effectuer des effets spéciaux sur votre AVI
(conversion en noir et blanc, contours, etc...)
2. Puis File-Save Image Sequence pour décomposer votre animation en images. Ou
utilisez AVI2JPEG pour convertir le fichier en JPG
3. Utilisez IrfanView pour convertir vos BMP en JPG (Voir Chapitre Vidéo – Poser 3)
119
TD ActionScript
4. Lancez Diaporama et ajoutez toutes les images, mettre la dimension de l’animation à
celle des images et la fréquence à celle du AVI d’origine.
La taille du fichier SWF est pratiquement égale à la somme des tailles des fichiers JPG.
7.2.3 Les indispensables !
–
–
–
Irfanview (freeware) : Lecteur de fichiers (JPG, AVI, MPG...), il permet de convertir
des images par paquet (touche B), de renommer tous vos fichiers en nomxxx.jpg etc.
VirtualDub (freeware) : Lecteur de fichier AVI et MPG. Nombreux effets spéciaux.
Permet aussi de convertir des MPG en AVI.
AVI2JPEG (freeware ou Shareware) : L’outil idéal ! Transforme vos AVI en images
JPG bien numérotées, visualisation de la compression des images et très simple
d’utilisation.
–
7.2.4 Exemple d’utilisation
1. Utilisez diaporama pour créer une animation anim.swf du type LoadMovie avec un
Stop sur la dernière image.
2. Lancez Flash et créez un clip vide
3. Mettre une occurrence de ce clip sur la scène principale et lui donner le nom film
4. Créez un bouton quelconque et mettre deux occurrences de celui-ci sur la scène
5. Ajoutez l’action suivante au premier bouton :
on (release) {
film.stop();
}
6. Ajoutez l’action suivante au second bouton :
on (release) {
film.play();
}
7. Ajoutez l’action suivante à la première image clé de la scène principale
loadMovie ("anim.swf", film);
stop ();
8. Compilez et lancez l’animation. anim.swf est chargée dans le clip film.
9. Si vous cliquez sur le premier bouton, l’animation s’arrête. Le second permet de
redémarrer. Vous pouvez également utiliser les actions .nextframe() et
.prevframe().
7.3 Films vers swf
Le logiciel vid2swf permet de convertir des images ou des vidéos en .swf.
Visualisation
120
Eric Schrafstetter
7.4 Microsoft Office
7.4.1 La barre de dessin
La barre de dessin des logiciels Word, Excel ou PowerPoint peut vous être d’une grande
utilité si vous ne possédez pas de logiciel de dessin vectoriel (Comme Freehand ou
CorelDraw).Voici un exemple très simple d’animation 3D
1. Lancez Word et affichez la barre de dessin
2. Dessinez un cube en commençant par un rectangle puis effet 3D
3. Copiez l’image et allez sous Flash. Faîtes Edition - Collage Spécial puis choisir Image
(métafichier). Le cube apparaît (en vectoriel) à l’écran. Insérez une image clée vide en
2.
4. Revenir sous Word et afficher la barre de paramètres 3D. Faîtes tourner légèrement
votre cube et retournez à l’étape précédente !
Cette manipulation fonctionne également pour les graphiques générés par Excel, les formules
mathématiques de l’éditeur d’équations et bien sûr les cliparts qui peuvent directement être
importés sous Flash.
7.4.2 Powerpoint vers Flash
Il existe des outils payant permettant la conversion directe d’un diaporama PowerPoint en
Flash. Ceci dit, si vous trouvez que la mise en forme de texte (titres, listes à puces...),
graphiques, organigrammes… est plus rapide à faire sous PowerPoint (Nous sommes
d’accord ?) mais que Flash c’est quand même plus sympa (toujours d’accord ?), alors voici un
exercice qui va vous plaire. Plus sérieusement, le mode Plan sous PowerPoint est assurément
plus maniable que la grille sous Flash et, à titre d’exemple, un petit diaporama (5 diapos sans
animation) prenant 35Ko en format .pps (Diaporama PPT) transformé en .swf (avec quelques
animations et les touches de navigation) passe à 18,3Ko !
1.
2.
3.
4.
5.
6.
7.
8.
Lancez PowerPoint
Fichier - Mise en page et choisir Diapositives dimensionnées pour affichage à l’écran.
Insérez une diapo de titre (CTRL+M et 1er choix)
Tapez un titre, un sous-titre
Insérez une nouvelle diapo avec des listes à puces. Remplir quelques lignes
Nouvelle diapo avec un graphique ou un organigramme
Nouvelle diapo avec une image bitmap (jpg par exemple)
Pour finir, une autre diapo avec un ClipArt de la bibliothèque et/ou une figure à partir
de la barre d’outils de dessin.
9. Faîtes Format-Jeu de couleurs et appliquez un jeu
10. Enregitrez votre animation sous le nom diapo.ppt
11. Faîtes Enregistrez-sous et choisir Type : Métafichier Windows (.wmf). Répondre oui
pour que toutes les images soient enregistrées. Remarquez que je vous ai fait placer
une image bitmap alors que nous enregistrons en un format vectoriel... et bien je ne
sais pas pourquoi mais PowerPoint la laisse miraculeusement en bitmap (et c’est tant
mieux !).
12. Un dossier du nom de votre diaporama est alors créé avec toutes les images.
121
TD ActionScript
13. Lancez Flash et allez dans Modification - Animation (CTRL+M). Si votre écran est par
exemple en 800×600 mettre ces valeurs en largeur et hauteur (Choisir Unités de la
règle = Pixels).
14. Mettre une couleur de fond à votre animation
15. Très important ! Faîtes CTRL+2 ou Affichage - Zoom - Afficher une image pour bien
cadrer votre animation au milieu de l’écran.
16. Placez-vous à l’image 1 de votre animation et Fichier-Importer
17. Recherchez la première diapositive au format .wmf et importez. Flash vous propose
d’importer les autres, répondre oui.
18. Normalement vos diapos PPT doivent être parfaitement centrées dans l’animation
Flash
19. Remarquez aussi que tout est en vectoriel, les organigrammes, les ClipArts, que les
textes peuvent être changés en cliquant 2 fois dessus et que les éléments des
graphiques peuvent également être recoloriés en cliquant 2 fois dessus.
20. Insérez maintenant un nouveau calque sous le calque contenant les diapos (voir figure
6.3).
Fig 6.3 − Les deux calques de la projection
21. Créez un clip vide et mettre une occurrence de celui-ci sur la première image calque 2.
Associez-lui l’action suivante :
onClipEvent (keyDown) {
if (libre) {
if (Key.isDown(Key.SPACE) || Key.isDown(Key.RIGHT) ||
Key.isDown(Key.DOWN) || Key.isDown(Key.PGDN)) {
_root.gotoAndStop(_root._currentframe+1);
} else if (Key.isDown(Key.LEFT) || Key.isDown(Key.UP) ||
Key.isDown(Key.PGUP)) {
_root.gotoAndStop(_root._currentframe-1);
} else if (Key.isDown(Key.HOME)) {
_root.gotoAndStop(1);
}
libre = false;
}
}
onClipEvent (keyUp) {
libre = true;
}
libre = true;
}
L’idée du script est simple : si l’on tape sur la barre d’espace ou flèche de droite ou
bas ou page suivante, on avancera dans le diaporama par l’action gotoAndStop. Idem
avec les flèches gauche, haut et page précédent pour revenir à la diapo précédente. J’ai
rajouté une action sur la touche Home qui revient sur la première diapo. Si vous ne
voyez pas à quoi sert la variable libre, supprimez-là ! Simplement, cela évite que le
Visualisation
122
Eric Schrafstetter
diaporama défile à toute vitesse si vous vous endormez en visionnant votre diaporama
! La variable libre passe à false si la touche est pressée et bloque le défilement. Elle
revient à true lorsque la touche est relâchée ( keyUp).
22. Utilisez la touche F5 pour étendre l’image clé 1 du second calque jusqu’à la dernière
diapo.
23. Enfin, sur la première image clé du second calque, ajoutez l’action :
fscommand ("fullscreen", "true");
stop ();
De sorte que l’animation prendra tout l’écran comme un vrai diaporama PowerPoint.
24. Compilez, lancez et naviguez avec les flèches du clavier et la barre d’espace.
25. Pour les plus forts qui se demandent comment on peut ajouter un peu d’animation à
tout cela, voilà une idée :
− Sélectionnez un ou plusieurs éléments à animer (texte, ClipArt...)
− Faîtes F8 pour le transformer en symbole, par exemple clip_txt
− Puis bouton droit - Modifier en place et à nouveau F8 Donnez un nom, par
exemple txt
− Animez ce symbole sur la ligne temporelle et ajoutez tous les effets que vous
voulez. Mettre une action Stop(); à la fin de cette animation pour éviter de
boucler.
26. Pour des fonds en dégradé, je vous déconseille fortement de l’importer de PowerPoint
(essayez pour comprendre !). Ajoutez plutôt sous Flash un troisième calque avec un
grand rectangle couvrant toute la surface et utilisez le pot de peinture.
7.4.3 Flash vers PowerPoint
Voir le paragraphe PowerPoint du chapitre Visualisation.
7.4.4 Powerpoint-Flash ou PDF ?
Le format PDF de la société Adobe permet certaines options assez difficiles à obtenir en Flash
1.
2.
3.
4.
Pages simples, en continue ou 4 × 4
Bookmarks pour une navigation rapide
Recherche de texte
Boutons de navigation précédent-suivant.
Je signale ici qu’il est possible de créer des fichiers PDF gratuitement de différentes façons :
1. HTMLDoc qui convertit du HTML en PDF de façon remarquable (mon préféré)
2. Installer une imprimante PostScript virtuelle, GhostScript et/ou GhostView (voir
explication sur mon site www.chez.com/revo)
3. Utilisez LATEX2e et dvipdfm (Par exemple avec MikTeX pour windows)
4. Avec PHP, Delphi, C++ et la librairie PDFLib... (Voir ma doc sur le site)
123
TD ActionScript
Revenons à nos moutons ! Le tandem PowerPoint - Flash peut parfois être une alternative au
PDF. Outre évidemment la possibilité d’ajouter des animations, Flash permet de définir
l’impression de pages spécifiques. Voici un exemple :
1. Lancez PowerPoint et Fichier-Mise en Page. Choisir Diapositives dimensionnées pour
format A4.
2. Créez quelques diapos (disons 3), utilisez la barre de dessin pour ajouter des effets
d’ombres aux titres, des bordures, etc.
3. Enregistrez votre diaporama en diapo.ppt puis Fichier-Enregistrez sous et choisir
comme type : Métafichier windows (wmf)
4. Les différents fichiers wmf sont créés. Lancez Flash et Modification-Animation,
choisir Unités en centimètres et taille = 21 × 29,7 cm
5. Faîtes CTRL+2 pour centrer l’image sur la scène.
6. Importez la première diapo et cliquez sur oui pour insérer toute la série.
7. Cliquez sur une image à imprimer et choisissez Fenêtre - Panneaux – Image (CTRL+F).
Mettre Etiquette = #p
8. Faîtes la même chose avec d’autres diapos (pas toutes pour voir l’intérêt de la
manipulation).
9. Créez un nouveau clip nommé commandes. Dans ce clip, placez un bouton
représentant une flèche vers la gauche, un autre bouton avec une flèche vers la droite,
un dernier représentant une imprimante et ajoutez un fond représentant une fenêtre
(voir figure 6.4).
Fig 6.4 − La barre de navigation
10. Au bouton avec la flèche vers la gauche ajoutez l’action :
on (release) {
_root.gotoAndStop(_root._currentframe-1);
}
11. Au bouton avec la flèche vers la droite ajoutez l’action :
on (release) {
_root.gotoAndStop(_root._currentframe+1);
}
12. Au bouton d’impression, ajoutez l’action :
on (release) {
_visible=false;
printNum (0, "bmovie");
}
Ainsi la petite barre de navigation disparaîtra avant que l’impression ne soit lancée.
Remarquez qu’il n’y a pas d’image ayant pour nom #b, le format d’impression sera
donc celui de l’image (ici 21 × 29,7)
Visualisation
124
Eric Schrafstetter
13. Sur la scène principale, ajoutez un calque nommé action au dessus de celui réservé
aux diapos.
14. Sur la première image de ce calque, mettre une occurrence du clip commandes.
Ajoutez-lui l’action :
startDrag ("");
} else if (!_visible) {
_visible=true;
}
}
stopDrag ();
}
Ceci permet de déplacer la barre de navigation qui pourrait gêner la lecture. Lorsque
l’on presse sur l’imprimante la barre disparaît (pour ne pas être imprimée) et
réapparaîtra lorsque l’on pressera le bouton de la souris. Vous pouvez également
ajouter un petit effet alpha sur l’occurrence du clip...
15. Ajoutez l’action stop(); à la première image du calque action.
16. Etendre par F5 la première image du calque action de la commande jusqu’à la dernière
diapositive.
17. Compilez, lancez et testez les boutons de la barre de navigation.
125
TD ActionScript
8 SmartClips (Flash 5)
Les composants sous Flash MX permettent de gagner du temps mais les méthodes ci-dessous
sont moins gourmandes en kilo octets !
8.1 Variateur
Nous cherchons à construire un variateur ressemblant à la figure 7.1.
Fig. 7.1 – Le variateur : un label et un curseur mobile
Le SmartClip aura pour paramètres les variables nom (nom de l’occurrence), min et max.
1. Créez un clip triangle ayant la forme d’un petit triangle qui servira de curseur.
2. Créez un bouton bouge ayant sur ses 4 images clés le clip triangle (vous pouvez
bien sûr créer des variations !)
3. Créez un clip curseur où vous placerez une occurrence du bouton bouge avec la
pointe gauche en X = 0 et Y = − 50 (relativement à la croix centrale).
on (press) {
startDrag ("", false, 0, 100, 0, 0);
_parent.gotoAndPlay(2);
}
stopDrag ();
_parent.gotoAndPlay(1);
}
5. Nous allons maintenant créez un clip compteur contenant une occurrence du clip
curseur. Lorsque l’utilisateur pressera le bouton caché dans le clip curseur, le clip
compteur bouclera entre les images 2 et 3, permettant de récupérer la hauteur actuelle
du triangle.
6. Créez un clip compteur avec 3 couches : une pour les actions, une où vous mettrez
une occurrence du clip curseur (avec son centre en (0,0)) en lui donnant le nom base
et une où vous placerez une zone de texte dynamique ayant pour nom label
7. Ajoutez l’action suivante au clip curseur
_parent.label=(_parent.max+_parent.min)/2;
}
SmartClips
126
Eric Schrafstetter
Qui permettra d’initialiser la variable label.
8. Etendre par F5 l’image du clip et de la zone de texte dynamique jusqu’à l’image 3 du
clip compteur.
9. A la première image clé du clip, mettre l’action stop();
10. Mettre l’action suivante à l’image 2 du même clip :
temp=min+(100-base._y)*(max-min)/100;
label=Math.round (100*temp)/100;
11. Mettre l’action gotoAndPlay (2); à l’image 3.
12. Ouvrez la bibliothèque puis faites Bouton droit - Définir les paramètres du clip sur
compteur.
Nom Valeur Type :
nom
c1
Default
min
-1
Default
max
1
Default
13. Retournez sur la scène principale et mettre une occurrence de compteur. Faire Bouton
droit - Panneaux - Paramètres du clip et saisir :
Nom
nom
min
max
Valeur Type :
x
Default
-4
Default
1
Default
14. Lancez l’animation et déplacez le curseur, la valeur change entre min et max.
8.2 Fenêtres volantes
Fig. 7.2 – Apparence de la fenêtre
1. Créez un bouton ayant la forme d’un rectangle ressemblant à une barre de titre d’une
fenêtre Windows (voir figure 7.2)
2. Créez le bouton OK et celui ayant la forme d’une croix.
3. Créez un clip nommé message et mettre l’action suivante à la première image
nommée off :
_name=nom;
stop ();
4. Mettre l’action stop(); à la seconde image nommée on de ce clip.
127
TD ActionScript
5. Assurez-vous que la scène du clip message est vide à l’image 1. A l’image 2, placez le
dessin d’une fenêtre (voir figure 7.2) avec 2 zones de textes dynamiques nommées
titre pour le titre et contenu pour la zone qui servira à recevoir la phrase principale.
Placez également les boutons créés à l’étape 1 à leurs places.
6. Associez l’action suivante aux boutons OK et à la croix :
on (release) {
gotoAndStop (1);
}
Ceci permettra de faire disparaître la fenêtre (l’image clé 1 du clip étant vide).
7. Associez l’action suivante au bouton servant de barre de titre :
on (press) {
startDrag (_parent.nom);
}
stopDrag ();
}
8. Ouvrez la bibliothèque et faites Bouton droit sur Message puis Définir les paramètres
du clip. Cliquez sur le signe + trois fois de sorte que :
Nom
nom
titre
contenu
Valeur
fenetre
Bienvenue
Tapez votre texte ici
Type :
Default
Default
Default
9. Revenez à la scène principale et placez une occurrence du clip (SmartClip maintenant
!) message. Un petit cercle apparaît (encore une fois, parce que l’image clé 1 du clip
est vide). Sur l’occurrence, faites Bouton droit – Panneaux - Paramètres du clip.
Mettre :
Nom
nom
titre
contenu
Valeur
fenetre
Bienvenue
Je tape mon texte ici
10. Créez un bouton quelconque et placez-en une occurrence sur la scène principale avec
l’action :
on (release) {
_root.fen1.gotoAndPlay("on");
}
11. Lancez l’animation et cliquez sur le bouton. La fenêtre apparaît. Placez-vous sur la
barre des titres et déplacez la souris. Cliquez sur OK ou sur la croix pour fermer.
12. Vous pouvez placer plusieurs occurrences du SmartClip en leur donnant des
paramètres différents.
SmartClips
128
Eric Schrafstetter
8.3 Bibliothèque commune
8.3.1 Création de boutons radio
1. Ouvrir la bibliothèque commune de SmartClips
2. Placez 2 occurrences de RadioButton sur la scène principale.
3. Faire Bouton droit sur le premier SmartClip et Panneaux - Paramètres du clip. Entrez :
_name=homme
checked=true
label=homme
style=Mac
Le premier paramètre permet de définir le nom de l’occurrence, le second précise que
le bouton est enfoncé, le troisième est le nom visible sur la scène et le dernier le style
du bouton.
4. Faîtes de même avec le second SmartClip en mettant :
_name=femme
checked=false
label=femme
style=Mac
5. Mettre l’action stop(); à l’image 1 de la scène principale.
6. Créez sur la scène principale une zone de texte dynamique de nom de variable choix
7. Créez un bouton quelconque et placez-le sur la scène avec l’action :
on (release) {
choix=_root.homme.getState();
}
8. Lancez l’animation et cliquez sur le bouton radio homme puis sur le bouton, la variable
choix doit être égale à true. Cliquez maintenant sur le bouton radio femme puis le
bouton, choix passe à false.
9. Inversement, l’action :
on (release) {
choix=_root.homme.setState(true);
}
permet de sélectionner le bouton homme.
8.4 SmartClip Calendrier
Je vois pas mal d’animations Flash comportant des calendriers et la plupart ont sans doute été
faits ’à la main’. Voici donc un petit exercice qui permet de créer un SmartClip ayant 3
paramètres : une année, un mois et une dimension. Le résultat sera la création du calendrier
correspondant.
129
TD ActionScript
1. Créez un clip nommé jour, y placez une zone de texte dynamique avec pour nom de
variable numero, décochez ’sélectionnable’ et cochez ’Bordure’. Une fois que vous
aurez compris l’exercice, vous reviendrez certainement améliorer cette partie (couleur,
bouton, animations...).
2. Ouvrez la bibliothèque par Fenêtres - Bibliothèque (CTRL+L) et bouton droit sur jour
puis Liaison.
3. Choisissez ’Exporter ce symbole’ et lui donner le nom jour
4. Créez un nouveau clip nommé calend et mettre l’action suivante à l’image 1 de ce
clip
semaine = ["L", "M", "M", "J", "V", "S", "D"];
mois--;
cadre = cote+2;
for (j=0; j<=6; j++) {
n = 50+j;
this.attachMovie("jour", "j"+n, n-1);
with (this["j"+n]) {
_x = cadre*j;
_y = 0;
_width = _height=cote;
}
this["j"+n].numero = semaine[j];
}
calendrier = new Date(annee, mois, 1);
premier = calendrier.getDay();
if (premier == 0) {
premier = 7;
}
aff = false;
for (j=0; j<=5; j++) {
for (i=1; i<=7; i++) {
n = i+7*j;
this.attachMovie("jour", "j"+n, n-1);
with (this["j"+n]) {
_x = cadre*(i-1);
_y = cadre*(j+1);
_width = _height=cote;
}
jour = n-premier+1;
calendrier = new Date(annee, mois, jour);
this["j"+n].numero = calendrier.getDate();
if (jour == 1) {
aff = true;
}
if ((jour != 1) and (this["j"+n].numero == 1)) {
aff = false;
}
if (!aff) {
this["j"+n]._alpha = 50;
}
}
}
stop ();
Quelques explications sur le script :
1. La fonction getDay renvoie 1 pour lundi, 2 pour mardi et 0 pour dimanche.
SmartClips
130
Eric Schrafstetter
2. Le mois de janvier a pour valeur 0 dans Flash, ce qui explique le mois-- permettant
de transformer le paramètre mois du SmartClip au bon format.
3. La fonction attachMovie permet de dupliquer un élément de la bibliothèque
comportant une liaison. Il faut également préciser le niveau de chargement en
troisième paramètre.
4. La première boucle attache les cases comportant les noms des jours de la semaine.
5. On trace ensuite dans la seconde boucle 48 cases avec dans chaque case le numéro du
jour (récupéré par la fonction getDate). Bien sûr, comme le premier d’un mois ne
tombe pas toujours un lundi, on commence pdoncar chercher le jour de la semaine du
1er par la fonction getDay
6. Il faut bien comprendre que Flash accepte très bien des dates du type
Date(2001,7,45) ou Date(2001,7,-5) ! Cela évite de regarder si le mois comporte
28,29,30 ou 31 jours...
7. Si le premier jour du mois est un dimanche (valeur 0), on la met à 7 – Pour corser, on
décide de mettre un effet alpha sur les dates qui ne sont pas dans le mois (fin du mois
précédent et début du mois suivant). Pour cela, la variable aff est à faux au début
(nous ne sommes pas dans le mois), on attend d’entrer dans le mois (test jour == 1),
la variable aff passe alors à vrai et les dates sont attachées normalement. Le mois sera
terminé quand la date repassera à 1 mais que jour sera différent de 1.
5. Ouvrez à nouveau la bibliothèque et bouton droit sur calend puis ’Définir les
paramètres du clip’. Utilisez le bouton + pour définir les paramètres suivants :
Nom
cote
annee
mois
6.
7.
8.
9.
Valeur
20
2001
7
La variable cote correspondra à la largeur en pixels de la zone de texte dynamique
que vous avez placée dans le clip jour. Vous pouvez également placer une bonne fois
pour toutes les cases du calendrier avec les noms j1, j2...
Revenir à la scène principale et y mettre une occurrence du SmartClip calend. C’est
juste un petit cercle à l’écran correspondant au coin haut gauche du futur calendrier.
Faîtes bouton droit sur cette occurrence et Panneaux-Paramètres du clip. Mettez une
longueur pour cote, une année et un mois.
Mettre éventuellement d’autres occurrences du SmartClip avec d’autres mois ou
années...
Compilez et lancez l’animation.
Pour terminer, si vous désirez briller dans une soirée (ou vous faire jeter !), lisez donc ma
page consacrée à la recherche mentale d’un jour de la semaine sur mon site www.univangers.fr/cufco/schraf. Et pour vous entraîner, utilisez ma petite animation Flash jointe.
131
TD ActionScript
9 Jeux
9.1 Le morpion
9.1.1 Règles du jeu
Le jeu se compose d’un plateau à 9 cases. Chaque case peut être allumée (visible) ou éteinte
(invisible). La position de départ est choisie au hasard, par exemple :
Il s’agit par des manipulations d’obtenir la figure :
9.1.2 Les manipulations
–
–
–
Cliquer sur un coin inverse les 4 cases contigües à ce coin. Inverser signifiant que si
une case est allumée, elle s’éteint et inversement.
Cliquer sur le milieu d’un côté inverse les 3 cases de ce côté.
Cliquer sur la case centrale inverse les 5 cases suivant une croix +.
9.1.3 Création du jeu
1. Créez un bouton bt avec le dessin d’une boule sur Haut, Dessus, Abaissé et Cliqué
2. Créez un clip b et placez une occurrence du bouton bt à l’image 1. Associez à cette
occurrence l’action :
on (release) {
choix = Number(this._name.charAt(1));
x = x ^ change[choix];
score = score ^ (1 << choix);
aff(x);
if (x == 495) {
gotoAndPlay("fin");
}
}
C’est la partie centrale du programme. La première ligne va permettre de savoir quelle
case a été choisie. Pour cela, on récupère le nom de l’occurrence (this._name) qui est
de la forme bi avec i entre 1 et 9. Ensuite, la fonction .charAt(1) permet d’atteindre
Jeux
132
Eric Schrafstetter
le second caractère (le premier a pour position 0), soit "1" ou "2" etc. Le numéro (entre
1 et 9) s’obtient par Number.
La seconde ligne utilise la fonction ou exclusif (XOR) notée ^ en ActionScript.
La table de vérité de cette fonction logique est :
a
0
0
1
1
b a^b
0
0
1
1
0
1
1
0
Ainsi, en partant d’une position du jeu x et en lui appliquant un changement
change[choix] (voir plus bas), la nouvelle position est calculée par
x^change[choix]. La ligne 3 permettra de trouver le score final (voir plus bas).
3. Maintenant, ouvrez la bibliothèque et faire Bouton droit - Liaisons sur le symbole b.
Choisir Exporter ce symbole et lui donner comme identifiant bouton.
4. Revenez sur la scène principale et créez une image clé en 1. Nous allons initialiser le
jeu par l’action :
// Creation du plateau
for (i=1; i<=3; i++) {
for (j=1; j<=3; j++) {
rang=3*(i-1)+j;
_root.attachMovie("boule","b"+rang,rang);
this["b"+rang]._x = 50*j;
this["b"+rang]._y = 100+50*i;
}
}
//Choix position de depart
x = Math.floor(512*Math.random());
// Table des changements en decimales
change= new Array();
change[1] = 27;
change[2] = 7;
change[3] = 54;
change[4] = 73;
change[5] = 186;
change[6] = 292;
change[7] = 216;
change[8] = 448;
change[9] = 432;
function aff (k) {
i = 1;
while (i<=9) {
if (!(k & (1 << (i-1)))) {
this["b"+i]._alpha = 10;
} else {
this["b"+i]._alpha = 100;
}
i++;
}
}
_root.aff(x);
133
TD ActionScript
–
–
Nous utilisons attachMovie au lieu de DuplicateMovie puisque nous n’avons pas
placez d’occurrence du clip b sur la scène.
La boucle permet de créer 9 répliques de b en leur attribuant les noms b1,…,b9
suivant la disposition :
b1 o
b4 o
b7 o
–
b2 o
b5 o
b8 o
b3 o
b6 o
b9 o
Explication de la table des changements : une case de du jeu pouvant être visible ou
invisible, une position globale est une suite de 0 (invisible) ou 1 (visible) dont
100110110 est un exemple. Dans ce cas, la case 1 est invisible (0), les cases 2 et 3 sont
visibles, la case 4 invisible. . . Il est donc intéressant d’utiliser sa conversion en base
10 :
1001101102 = 0 + 1 × 10 + 1 × 10 2 + … + 1 × 10 8 = 31010
En utilisant les règles décrites plus tôt, cliquer sur la case 1 revient à inverser les cases
1,2,4 et 5, soit 0000110112 = 2710. C’est la valeur que vous retrouvez dans
change[1].
– La fonction aff va permettre de réactualiser l’affichage à chaque coup du joueur.
5. Insérez maintenant une image clé nommée affiche à l’image 2 de la scène principale
et placer l’action :
stop ();
6. Insérez une image clé nommée fin à l’image 3 de la scène principale et placer l’action
best=0;
for (i=0; i<=8; i++) {
if ((score & 1 <<i)<>0) {
best++;
}
}
score=Math.floor(100*best/coup);
stop ();
L’astuce ici consiste à voir que le nombre maximum de coups nécessaires à résoudre
le problème est 9. Si le joueur appuie sur une case puis, plus tard, appuie à nouveau
sur cette même case, il était en fait inutile de s’en servir (D’un point de vue strictement
mathématiques, les coups sont commutatifs et nilpotent d’ordre 2). Pour connaître le
score du joueur, il suffit de compter le nombre de coups qui étaient effectivement
nécessaires grâce à la boucle.
7. Placez à cette même image clé une zone de texte avec les options Texte dynamique et
variable = score.
8. Lancez le programme et essayez de résoudre le puzzle ! Ajoutez éventuellement un
bouton permettant de réinitialiser le jeu.
Jeux
134
Eric Schrafstetter
9.2 Jeu de l’Hexagone
Comment décoder le jeu de l’hexagone ? Au moyen des chiffres sur les différentes cases.
Chaque chiffre indique le nombre de cases rouges que comporte l’ensemble formé par cette
même case et celles qui lui sont contigües. Un exemple de solution est donné figure 8.2. Le
but de ce travail dirigé est de créer un programme générant aléatoirement ce type d’hexagone
et… de pouvoir y jouer !
Fig 8.2 − La solution
9.2.1 Les problèmes
1. Comment dessiner l’hexagone ? Au moyen d’un unique clip comportant 2 images clé
(une boule bleue et une boule rouge). La taille de l’hexagone dépendra de la variable
nb. Par exemple nb=3 sur la figure 8.2.
2. Et les valeurs des cases ? Une zone de texte dynamique dans le clip de base suffit.
3. Comment générer les cases rouges ? Grâce aux fonctions Math.random et
Math.floor. Pour tirer des chiffres 0 ou 1 avec la même probabilité, la formule
suivante convient :
Math.floor(2*Math.random())
Si vous voulez utiliser des probabilités non uniformes (par exemple, la boule sera
rouge dans 60% des cas), utilisez plutôt la formule :
1*(Math.random()<0.6)
Le test Math.random()<0.6 renvoie Vrai dans 60% des cas qui, multiplié par 1,
donne 0 ou 1.
4. Comment mémoriser les cases ? On utilise un tableau nommé lignes. Remarquez que
l’hexagone a 2nb-1 lignes et que la longueur des lignes augmente de nb à 2nb-1 puis
rediminue jusqu’à nb. Montrez que la longueur de la ligne i ( i entre 0 et 2nb-2) est
nb+i si i<nb et 3nb-2-i sinon. On obtient finalement l’initialisation suivante :
lignes = new Array();
for (i=0; i<2*nb-1; i++) {
longueur = (i<nb) ? nb+i : 3*nb-2-i;
135
TD ActionScript
lignes[i] = new Array();
for (j=0; j<longueur; j++) {
lignes[i][j] = Math.floor(2*Math.random());
}
}
Il faut bien voir que les cases les plus à gauche (formant un <) correspondent à
lignes[i][0] pour i de 0 à 2nb-2
5. Comment calculer les valeurs des cases ? La valeur dépend de 7 cases. Remarquez que
même si lignes[-1][-1] n’a pas de sens, Flash ne plante pas et peut être utilisé dans
les calculs. Le test est inversé entre les cases du haut de l’hexagone et celles du bas.
La ligne centrale (i=nb-1 est à traiter à part). On obtient facilement le code :
change = (i<nb) ? 1 : -1;
n = lignes[i][j-1]+lignes[i][j]+lignes[i][j+1]+
lignes[i-1][j]+lignes[i+1][j];
if (i == nb-1) {
n += lignes[i-1][j-1]+lignes[i+1][j-1];
} else
n += lignes[i-1][j-change]+lignes[i+1][j+change];
}
9.2.2 Le clip pion
1. Créez un clip nommé pion et dessinez une boule bleue de diamètre 50 (Panneau info)
à sa première image clé.
2. A sa seconde image clé, tapez sur F6 pour insérer une nouvelle boule au même endroit
et coloriez-la en rouge
3. Ajoutez une couche pour le texte et une pour un bouton
4. Sur la couche bouton, insérez à l’image 1 un bouton transparent (dessin d’un disque
sur l’image clé Cliquée) au dessus de la boule bleue et lui ajouter l’action :
on (release) {
courant = 3-_currentframe;
gotoAndStop (courant);
if (_parent.lignes[i][j] == 1) {
_parent.trouve += (courant == 2) ? 1 : -1;
} else {
_parent.trouve += (courant == 1) ? 1 : -1;
}
if (_parent.trouve == _parent.total) {
}
}
La formule 3-_currentframe permet de passer de l’image 1 à l’image 2 et
réciproquement. Le test du dessous est moins évident... Si la case cliquée contient
effectivement une case rouge (test de la valeur de lignes[i][j]) et si nous sommes à
l’image courante 2 (A l’affichage, la boule est rouge), alors le joueur a trouvé une
boule, sinon, l’image vient de passer au bleu et le joueur vient d’éliminer une boule
qui était bonne. Inversement, si la case ne contient pas de boule rouge et que l’image
courante passe à 1, le nombre de bonnes boules augmente de 1, sinon il perd 1 point.
Jeux
136
Eric Schrafstetter
5. Ajoutez sur la couche texte, une zone de texte avec pour nom de variable valeur. Ce
sera le nombre affiché sur la boule.
9.2.3 Le clip plateau
Créez un clip nommé plateau. A sa première image clé, ajoutez l’action :
nb = Number(_root.nb);
d = pion._width;
total = 0;
lignes = new Array();
for (i=0; i<2*nb-1; i++) {
lignes[i] = new Array();
lignes[i][j] = Math.floor(2*Math.random());
total += lignes[i][j];
}
}
trouve = 0;
prof = 1;
for (i=0; i<2*nb-1; i++) {
duplicateMovieClip (pion, "pion"+i+"_"+j, prof);
prof++;
this["pion"+i+"_"+j]._x = 150+j*d-(longueur-nb)*d/2;
this["pion"+i+"_"+j]._y = 50+i*d*Math.sqrt(3)/2;
this["pion"+i+"_"+j].i = i;
this["pion"+i+"_"+j].j = j;
change = (i<nb) ? 1 : -1;
n = lignes[i][j-1]+lignes[i][j]+lignes[i][j+1]
+lignes[i-1][j]+lignes[i+1][j];
if (i == nb-1) {
n += lignes[i-1][j-1]+lignes[i+1][j-1];
} else {
n += lignes[i-1][j-change]+lignes[i+1][j+change];
}
this["pion"+i+"_"+j].valeur = n;
}
}
stop ();
Quelques commentaires sur le script :
–
–
–
–
–
La variable total contient le nombre total de boules rouges à trouver
La variable trouve contient le nombre de boules effectivement trouvées par le joueur
3
La hauteur entre 2 lignes de l’hexagone est h = d
où d est le diamètre de la boule.
2
On ajoute 3 propriétés aux clips pioni_j, à savoir leurs coordonnées i, j ainsi que la
valeur valeur
La variable n contient le nombre de boules rouges autour du clip courant pioni_j.
Cette valeur sera mise dans valeur.
Placez sur la scène principale une occurrence du clip pion.
137
TD ActionScript
9.2.4 Scène principale
1. A la première image clé de la scène principale, mettre une action stop().
2. Placez un bouton quelconque avec l’action
on (release) {
play ();
}
Ce bouton permettra de lancer le jeu.
3. Mettre une zone de texte de saisie avec pour nom nb, l’utilisateur pourra ainsi préciser
le niveau de jeu.
4. A l’image 2 de la scène principale, mettre une occurrence du clip plateau avec pour
nom plateau.
5. Toujours à l’image 2, mettre une action stop()
6. A l’image clé 3, mettre un message de fin et l’action :
unloadMovie ("plateau");
stop ();
qui permettra d’effacer le plateau.
7. Ajouter un bouton quelconque qui renverra vers la première image par l’action :
on (release) {
gotoAndPlay (1);
}
9.3 Le tangram
Il s’agit de recréer le jeu classique du tangram .
Fig 8.3 − Les 7 pièces du Tangram
1. Ouvrez tangram.fla et CTRL+L pour visualiser sa bibliothèque
2. Créez une nouvelle animation et enregistrez-la sous mon_tangram.fla
3. Créez un bouton nommé b_carre et mettre à sa première image une occurrence du
graphique carre (à prendre dans la bibliothèque de tangram.fla)
4. Etendre par F5 jusqu’à l’image clée nommée ”Cliqué” (Eventuellement, mettre un
effet de couleur sur l’image ”Dessus” en insérant une autre image clée)
Jeux
138
Eric Schrafstetter
5. Créez un nouveau clip nommé c_carre et placez à sa première image une occurrence
du bouton b_carre. Pourquoi mettre un bouton dans un clip ? Afin d’utiliser la
commande startDrag qui permet de déplacer un clip (mais pas un bouton).
6. Ajoutez l’action suivante à ce bouton :
on (press) {
_root.cible = _target.slice(1);
startDrag ("");
swapDepths(1);
}
stopDrag ();
}
Que se passe-t-il ? Lorsque l’on pressera le carré, la variable cible prendra le nom de
l’occurrence en cours. Celle-ci ayant pour forme ”/instance1” ou ”/instance2” ou...
nous utilisons la fonction slice qui permet d’extraire la chaîne ”instance1”. La fonction
swapDepths permet elle de faire passer le carré au premier plan.
7. Revenez sur la scène principale et placez une occurrence du clip c_carre
8. Recommencez les manipulations précédentes avec les 2 autres types de pièces (Un
grand triangle et un losange). Les noms des clips seront c_triangle et c_losange .
9. Créez un nouveau bouton nommé b_touches avec une image quelconque uniquement
sur l’image clée ”Cliqué” (nous aurons alors un bouton transparent)
10. Mettre une occurrence du bouton b_touches sur la scène principale (si possible en
dehors de l’animation elle-même) avec l’action :
on (keyPress "<space>") {
this[_root.cible]._rotation += 45;
}
on (keyPress "<backspace>") {
this[_root.cible]._rotation -= 45;
}
on (keyPress "<right>") {
this[_root.cible]._x ++;
}
on (keyPress "<left>") {
this[_root.cible]._x --;
}
on (keyPress "<up>") {
this[_root.cible]._y --;
}
on (keyPress "<down>") {
this[_root.cible]._y ++;
}
Explications
Lorsque l’on clique sur une pièce, la variable cible récupère son nom (”instance8” par
exemple). Si maintenant nous appuyons sur la touche <espace> ( <space>), l’objet
cible va tourner de 45° à droite. Idem avec la touche ←. Les flèches du clavier
permettent de déplacer la pièce dans les 4 directions.
11. Mettre sur la scène principale 5 occurrences du clip c_triangle et 1 occurrence du
clip c_losange.
139
TD ActionScript
12. Les 2 petits triangles s’obtiennent par réduction de 50% des grands triangles et le
2
triangle moyen par une réduction de 70,7% (=
)
2
13. A la première image clée de la scène principale, ajoutez l’action :
cible="";
stop ();
Ainsi, la variable cible étant vide, les touches <space> , <up> … seront inopérantes.
14. Attention, la touche <backspace> (rappel arrière) ne fonctionnera pas en mode
”Tester l’animation”. Il faut publier par F12 .
9.4 Votre Tetris
Le but est de vous aider à construire votre propre Tetris. Pour ceux qui ne connaissent pas
encore ce jeu, voici quelques liens :
–
–
www.ms.mff.cuni.cz/ jtom4472/games/tetris/set.html (en javascript)
http://www.gauss2001.com/red.htm (en Flash)
9.4.1 La brique de base
La première astuce va être d’utiliser un unique clip pour à la fois représenter une brique ou
une case vide (ou une couleur quelconque pour les plus forts). Il suffit pour cela de mettre à
ses différentes images clés les images voulues. Le déplacement d’une brique sera alors un
effet d’optique, celui consistant à effacer cette case et à allumer celle juste en dessous.
–
–
–
Créez un clip nommé carre avec sur sa première image clé un petit carré noir (pour
vide) de côté 20×20 (Utilisez la fenêtre info).
Par F6 sur sa seconde image clé, coloriez le nouveau carré en rouge, ce sera
l’apparence de notre brique.
Mettre une occurrence de ce clip sur la scène principale et lui donner le nom base
(fenêtre Occurrence).
9.4.2 Les pièces
Fig. 8.4 – Les 7 pièces de base
L’apparence même des différentes pièces sera sauvegardée dans des variables I, T , L, D, J,
S1 et S2. L’ensemble des pièces sera enregistré dans un tableau pole.
Jeux
140
Eric Schrafstetter
I = new Array(0, 0, 1, 0, 0, 1, 0, 0, 1, 0);
L = new Array(0, 0, 1, 1, 0, 0, 1, 0, 0, 1);
T = new Array(0, 0, 0, 0, 1, 1, 1, 0, 1, 0);
D = new Array(0, 0, 1, 1, 0, 1, 1, 0, 0, 0);
J = new Array(0, 1, 1, 0, 1, 0, 0, 1, 0, 0);
S1 = new Array(0, 1, 0, 0, 1, 1, 0, 0, 1, 0);
S2 = new Array(0, 0, 1, 0, 1, 1, 0, 1, 0, 0);
pole = new Array(I, L, T, D, J,S1,S2);
On accède alors à une case par la commande pole[k][i].
9.4.3 Le plateau
Nous allons bien sûr nous utiliser le clip précédent pour créer le plateau. Sachant que celui-ci
a pour dimension 10×20 cases, le programme est le suivant :
for (i=0; i<20; i++) {
for (j=1; j<11; j++) {
position = 10*i+j;
base.duplicateMovieClip("x"+position, position);
this["x"+position]._x = 20*j;
this["x"+position]._y = 20*i;
}
}
On duplique 200 fois le clip base, on les renomme en x1, x2. . . x200 et on les place sur la
scène. Les coordonnées du plateau seront mises dans un tableau field et initialisé par :
field = new Array();
for (i=1; i<=201; i++) {
field.push(0);
}
La fonction push(0) ajoute la valeur 0 au tableau field. Je rappelle ici que la première
composante d’un tableau est field[0] et non field[1] .
9.4.4 La pièce suivante
Afin d’afficher la pièce suivante, dupliquez 9 fois par copier-coller le clip base présent sur la
scène principale. Placez et renommez les occurrences de sorte d’obtenir un cadre 3x3 avec
pour noms a1,a2. . .,a9 :
a1
a4
a7
a2
a5
a8
a3
a6
a9
0
0
0
1
0
0
1
1
1
=
Nous utiliserons alors une fonction aff_suivant pour afficher la pièce suivante, cette
fonction sera mise dans la partie initialisation du programme principal :
141
TD ActionScript
function aff_suivant () {
for (i=1; i<10; i++) {
if (next[i] != 0) {
this["a"+i].gotoAndStop(2);
} else {
}
}
}
Le tableau next contient l’apparence de la pièce suivante (0 = vide, 1 = brique). Les fonctions
gotoAndStop permettent d’afficher le carré noir (image 1) ou le carré rouge (image 2).
9.4.5 Le bouton commande
Désignons par X le numéro de la ligne et Y celui de la colonne de la case en haut à gauche de
la pièce qui tombe. L’apparence de la pièce courante est enregistrée dans le tableau item.
item[1] item[2] item[3]
Nous ne pourrons pas déplacer cette pièce à gauche si :
–
–
–
Y vaut 1 (première colonne) et la pièce courante n’est pas vide sur sa colonne de
gauche (item[1], [4] et [7]).
Y vaut 0 et la pièce n’est pas vide sur sa seconde colonne ( item[2], [5] et [8] ).
Y est bien plus grand que 2 mais il y a déjà une pièce à gauche qui bloque. On
récupère les valeurs des 9 cases de gauche associées à la pièce courante en effectuant
une boucle for.
Si le test passe avec succès, on supprime la pièce courante par la fonction supp_piece() , on
décrémente Y de 1 et on affiche la nouvelle pièce par aff_piece(). Le raisonnement est
identique avec le bord droit.
Concernant la touche ” flèche vers le haut ” qui permet de faire pivoter la pièce, les problèmes
sont :
–
–
–
Si Y vaut 0 (et donc item[1]=item[4]=item[7]=0), on ne pourra pas tourner la pièce
vers la gauche si item[2] ou item[3] valent 0.
Si Y vaut -1 (les 2 premières colonnes de la table item sont vides), on ne pourra
tourner que si item[3] et item[6] sont vides.
Même chose avec le bord droit.
Dans le cas où on peut tourner, on utilise un tableau auxiliaire rot pour mémoriser la position
de la nouvelle pièce puis on vérifie comme avec les touches gauche et droite que l’on peut
placer cette pièce. Si c’est le cas, item devient rot et on affiche la pièce. Voir compléments à
la fin du document pour la formule contenant Math.floor et %.
Jeux
142
Eric Schrafstetter
on (keyPress "<Down>") {
DOWN = 1;
}
on (keyPress "<Left>") {
if (Y == 1 && (item[1]+item[4]+item[7] != 0)) {
return;
}
return;
}
for (i=0; i<9; i++) {
if (item[i+1] != 0) {
if (field[(X-1+Math.floor(i/3))*10+Y-1+i%3] != 0) {
return;
}
}
}
supp_piece();
Y--;
aff_piece();
}
on (keyPress "<Right>") {
return;
}
return;
}
for (i=0; i<9; i++) {
if (item[i+1] != 0) {
if (field[(X-1+Math.floor(i/3))*10+Y+1+i%3] != 0) {
return;
}
}
}
supp_piece();
Y++;
aff_piece();
}
on (keyPress "<Up>") {
if (Y == 0 && (item[2]+item[3] != 0)) {
return;
}
if (Y == -1 && (item[3]+item[6] != 0)) {
return;
}
if (Y == 9 && (item[1]+item[2] != 0)) {
return;
}
if (Y == 10 && (item[1]+item[4] != 0)) {
return;
}
for (i=1; i<10; i++) {
rot[i] = item[(3*i)%10];
}
for (i=0; i<9; i++) {
if (rot[i+1] != 0) {
if (field[(X-1+Math.floor(i/3))*10+Y+i%3] != 0) {
return;
}
}
143
TD ActionScript
}
supp_piece();
for (i=1; i<10; i++) {
item[i] = rot[i];
}
aff_piece();
}
9.4.6 Suppression d’une ligne
La hauteur des pièces ne dépassant pas 3, il y a 3 tests à effectuer pour savoir si des lignes
seront supprimées.
var k = 1;
for (i=((X-1)*10+1); i<(X*10+1); i++) {
if (field[i] == 0) {
k = 0;
}
}
if (k == 1) {
versbas(X);
}
if (X<20) {
k = 1;
for (i=(10*X+1); i<((X+1)*10+1); i++) {
k = 0;
break;
}
}
if (k == 1) {
versbas(X+1);
}
}
if (X<19) {
k = 1;
for (i=((X+1)*10+1); i<((X+2)*10+1); i++) {
k = 0;
break;
}
}
if (k == 1) {
versbas(X+2);
}
}
Les lignes au dessus de celle supprimée doivent être décalées vers le bas.
function versbas (L) {
for (i=1; i<11; i++) {
field[((L-1)*10+i)] = 0;
this["x"+((L-1)*10+i)].gotoAndStop(1);
}
SCORE += 100;
for (j=L-1; j>0; j--) {
for (i=1; i<11; i++) {
if (field[((j-1)*10+i)] != 0) {
Jeux
144
Eric Schrafstetter
this["x"+((j-1)*10+i)].gotoAndStop(1);
this["x"+(j*10+i)].gotoAndStop(2);
field[(j*10+i)] = field[((j-1)*10+i)];
field[((j-1)*10+i)] = 0;
}
}
}
}
9.4.7 Le tempo
Si le joueur ne touche à rien, la pièce doit tout de même tomber seule. Comment temporiser sa
vitesse ? L’astuce consiste à mémoriser à une certaine image un instant de départ et à
effectuer une boucle avec l’image clé suivante jusqu’à ce qu’un intervalle de temps se soit
écoulé. L’image 2 de notre animation contenant le programme proprement dit, nous ferons
cette boucle entre les images 3 et 4 :
Image 2
... Programme principal ...
time = getTimer();
Image 3
Now = getTimer();
Image 4
if (Now<time+TO) {
gotoAndPlay (3);
} else {
gotoAndPlay (2);
}
La fonction getTimer() renvoie le nombre de millisecondes depuis le début de l’animation.
L’instant de départ est mémorisé dans time et la boucle s’effectue entre les images 3 et 4
jusqu’à ce que la variable Now soit supérieure à time+TO où TO est un temps d’attente en
fonction du niveau de jeu (voir plus bas).
9.4.8 Niveaux et score
La vitesse s’obtient en changeant la valeur de TO, le numéro de la pièce se tire par
Math.random() . Par exemple :
TO = (15-LEVEL)*80;
k = Math.floor(7*Math.random());
On mémorise la forme de la pièce courante et suivante par la boucle :
for (i=1; i<10; i++) {
item[i] = next[i];
next[i] = pole[k][i];
145
TD ActionScript
}
9.4.9 Compléments
Tests logiques
On suppose que X1, X2. . . valent 0 ou 1. Les tests suivants sont équivalents :
X1 ≠ 0 ou X2 ≠ 0 ou ... ⇔ X1 + X2 + …≠ 0
X1 ≠ 0 et X2 ≠ 0 et ... ⇔ X1 × X2 × …≠ 0
Tableau indexé
Considérons un tableau indexé de la façon suivante :
0
3
6
1
4
7
2
5
8
Comment récupérer le numéro de la ligne et de la colonne connaissant l’indice de la case ?
Remarquez que la colonne est égal à 1+reste de la division de l’indice par 3. Par exemple, si
l’indice est 5, le reste de la division de 5 par 3 est 2, l’indice 5 est bien en colonne 1+2=3. La
commande ActionScript % permet de calculer ce reste : i%3
La ligne est donnée par 1+ la division de l’indice par 3. Par exemple, si l’indice est 5, 5 divisé
par 3 donne 1 (sans virgule) qui ajouté de 1 donne bien la 2e ligne. La commande
ActionScript correspondante est 1+Math.floor(i/3).
9.4.10 Le programme complet
Image 1
function versbas (L) {
for (i=1; i<11; i++) {
field[((L-1)*10+i)] = 0;
this["x"+((L-1)*10+i)].gotoAndStop(1);
}
SCORE += 100;
for (j=L-1; j>0; j--) {
for (i=1; i<11; i++) {
if (field[((j-1)*10+i)] != 0) {
this["x"+((j-1)*10+i)].gotoAndStop(1);
this["x"+(j*10+i)].gotoAndStop(2);
field[(j*10+i)] = field[((j-1)*10+i)];
field[((j-1)*10+i)] = 0;
}
}
}
}
function aff_suivant () {
for (i=1; i<10; i++) {
Jeux
146
Eric Schrafstetter
if (next[i] != 0) {
} else {
}
}
}
function aff_piece () {
for (i=0; i<9; i++) {
if (item[i+1] != 0) {
this["x"+((X-1+Math.floor(i/3))*10+Y+i%3)].gotoAndStop(2);
}
}
}
// Delete
function supp_piece () {
for (i=0; i<9; i++) {
if (item[i+1] != 0) {
this["x"+((X-1+Math.floor(i/3))*10+Y+i%3)].gotoAndStop(1);
}
}
}
function start () {
TO = 1000;
for (i=0; i<20; i++) {
for (j=1; j<11; j++) {
position = 10*i+j;
base.duplicateMovieClip("x"+position, position);
this["x"+position]._x = 20*j;
this["x"+position]._y = 20*i;
}
}
LEVEL = 1;
SCORE = 0;
RUNNING = 1;
aff_suivant();
aff_piece();
time = getTimer();
gotoAndPlay (3);
}
I = new Array(0, 0, 1, 0, 0, 1, 0, 0, 1, 0);
L = new Array(0, 0, 1, 1, 0, 0, 1, 0, 0, 1);
T = new Array(0, 0, 0, 0, 1, 1, 1, 0, 1, 0);
D = new Array(0, 0, 1, 1, 0, 1, 1, 0, 0, 0);
J = new Array(0, 1, 1, 0, 1, 0, 0, 1, 0, 0);
pole = new Array(I, L, T, D, J);
X = 1;
Y = 4;
TO = 1000;
RUNNING = 0;
DOWN = 0;
next = new Array();
item = new Array();
k1 = Math.floor(7*Math.random());
k2 = Math.floor(7*Math.random());
for (i=1; i<10; i++) {
item[i] = pole[k2][i];
next[i] = pole[k1][i];
}
rot = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0);
SCORE = 0;
147
TD ActionScript
LEVEL = 1;
field = new Array();
for (i=1; i<=201; i++) {
field.push(0);
}
stop();
Image 2
var cont = 1;
X++;
for (i=0; i<9; i++) {
if (item[i+1] != 0 && field[(X-1+Math.floor(i/3))*10+Y+i%3] != 0) {
X--;
cont = 0;
}
}
if (X == 19 && (item[7]+item[8]+item[9] != 0)) {
X--;
cont = 0;
}
if (X == 20 && (item[4]+item[5]+item[6] != 0)) {
X--;
cont = 0;
}
if (cont == 0) {
DOWN = 0;
for (i=0; i<9; i++) {
if (item[i+1] != 0) {
field[(X-1+Math.floor(i/3))*10+Y+i%3] = item[i+1];
}
}
var k = 1;
for (i=((X-1)*10+1); i<(X*10+1); i++) {
k = 0;
}
}
if (k == 1) {
versbas(X);
}
if (X<20) {
k = 1;
for (i=(10*X+1); i<((X+1)*10+1); i++) {
k = 0;
break;
}
}
if (k == 1) {
versbas(X+1);
}
}
if (X<19) {
k = 1;
for (i=((X+1)*10+1); i<((X+2)*10+1); i++) {
k = 0;
break;
}
}
Jeux
148
Eric Schrafstetter
if (k == 1) {
versbas(X+2);
}
}
TO = (15-LEVEL)*80;
k = Math.floor(7*Math.random());
for (i=1; i<10; i++) {
SCORE += item[i]*10;
LEVEL = Math.ceil(SCORE/5000);
item[i] = next[i];
next[i] = pole[k][i];
}
aff_suivant();
X = 1;
Y = 5;
cont = 1;
for (i=0; i<9; i++) {
if (item[i+1] != 0) {
if (field[(X-1+Math.floor(i/3))*10+Y+i%3] != 0) {
cont = 0;
break;
}
}
}
if (cont == 0) {
RUNNING = 0;
gotoAndStop (6);
}
aff_piece();
} else {
X--;
supp_piece();
X++;
aff_piece();
}
if (DOWN == 1) {
gotoAndPlay (5);
}
Image 3
Now=getTimer();
Image 4
if (Now<time+TO) {
gotoAndPlay (3);
} else {
gotoAndPlay (2);
}
Image 5
gotoAndPlay (2);
Image 6 FIN
149
TD ActionScript
9.5 Synthèse Vocale
Nous allons créer une petite animation Flash capable de lire n’importe quel nombre entier
entre -1000 milliards et 1000 milliards... Pour cela, nous aurons besoin de quelques sons
élémentaires (0,1,2,...). Ils sont disponibles avec le zip joint mais n’ont pas été importés sous
Flash pour des raisons de taille. Remarquez que le final fait moins de 75 Ko ! Nous allons
également pouvoir observer à quel point notre langue française est belle mais compliquée
mais belle mais...
9.5.1 Les sons
Vous pouvez utiliser le magnéto dans les accessoires windows pour enregistrer vos propres
sons. Même si cela n’est absolument pas nécessaire puisque Flash effectue lui-même une
compression mp3, je vous rappelle ici que le freeware BladeEnc le fait très bien et par paquet.
Les sons à enregistrer sont les suivants :
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,20,
30,40,50,60,80,100,1000,1000000 (million), 1000000000 (milliard),
"et", "moins"
9.5.2 Importation sous Flash
Si vous voulez utiliser le .fla joint, inutile de taper F7 comme je l’explique ci-dessous. Il suffit
de se mettre sur la couche sons, de cliquer sur les images clés au dessus des étiquettes,
d’importer les .mp3 et de les mettre au fur et à mesure sur la scène.
1. Créez un clip nommé paroles et ajoutez l’action suivante sur son image clé 1 :
function fin () {
_root.fini = true;
stop ();
}
stop ();
2.
3.
4.
5.
6.
7.
Jeux
La fonction fin avertira le programme principal qu’un son vient de se terminer.
Ajoutez une couche à votre clip pour y placer les futurs sons
Nommez l’image clé 2 par i_0, ce sera le début du son correspondant au ”zéro”
Sur la couche des sons, placez-vous au dessus de l’image clé i_0 et tapez sur F7 pour
insérez une image clé vide. Puis importez le son zero.wav par Fichier-Importer.
Ouvrez la bibliothèque et amenez le son sur la scène.
Revenez sur la couche contenant le nom i_0 et tapez sur F7 à la fin du son. Ajoutez
alors l’action fin() à cette image.
Recommencez avec les autres sons pour obtenir quelque chose ressemblant à la figure
8.5. Veillez bien à ne pas superposer 2 sons !
150
Eric Schrafstetter
Fig. 8.5 – Le clip Paroles
8. Mettre une occurrence du clip paroles sur la scène principale avec pour nom
paroles.
9.5.3 La scène principale
1. Mettre une zone de texte de saisie avec pour nom n. Elle servira à entrer un nombre.
2. Mettre également un bouton quelconque pour lancer la prononciation.
3. Réfléchissez quelques instants aux problèmes que nous allons rencontrer. Il y a ceux
liés à la langue elle-même et ceux liés à Flash. Soit par exemple à prononcer ”321”, il
faut prononcer ”trois” puis ”cent” puis ”vingt” puis ”et” puis ”un”. Comment traduire
en Flash ce ”puis” ? Concernant les problèmes liés à notre langue :
– On prononce ”1 million”, ”1 milliard” mais pas ”1 mille”. Cependant, on peut
prononcer ”cent un mille”.
– De même, on prononce ”deux cents”, ”trois cents”... mais pas ”un cent”
– On dit ”vingt et un”, ”trente et un” jusqu’à”soixante et onze” mais ”quatrevingt un” et ”quatre-vingt onze” sans le ”et” !
– Les nombres de ”0” à”16” ont un son propre, les sons 17,18 et 19 sont
composés.
– Le nombre 70 utilise ”soixante” et ”dix” (idem avec 90). Certes, nous
pourrions entrer ces 2 nombres en wav !
– On ne prononce pas les zéros
4. Nous allons créer un tableau nommé prgm contenant la liste des mots à prononcer.
Nous ferons ensuite une boucle entre les images 2 et 3 de la scène principale jusqu’à
ce que chacun des mots du tableau soit prononcé.
5. Ajoutez l’action suivante à l’image clé 1 de la scène principale (voir les commentaires
à l’intérieur du programme)
function lirecentaine (rang) {
ok = false;
// Centaines - dizaines - unit¶es
c = nb.charAt(l-rang-2);
d = nb.charAt(l-rang-1);
u = nb.charAt(l-rang);
// Il y a une centaine
if ((c != "0") && (c != "")) {
// Ne pas lire "un cent"
if (c != "1") {
lire(c);
}
lire("cent");
// Si c est diff¶erent de 0, on a des centaines
ok = true;
}
// S'il y a des dizaines
if ((d != "0") && (d != "")) {
151
TD ActionScript
// Si la dizaine n'est pas 1
if (d != "1") {
r = "";
// Cas de 70 ou 90
if ((d == "7") || (d == "9")) {
d--;
r = "1";
}
// Pour 70 et 90 on lit "soixante" et "quatre-vingt"
lire(d+"0");
// Cas particuliers de 81 et 91 sans le "et"
if ((Number(d)<8) && (u == "1")) {
lire("et");
}
// Si on a une unit¶e ou cas de 70 et 90
if ((u != "0") && (u != "") || (r == "1")) {
// 77 µa 79 ou 97 µa 99
if ((r == "1") && (Number(u)>6)) {
lire("10");
lire(u);
} else {
// r+u est un nombre entre 10 et 16
lire(r+u);
}
}
// La dizaine est 1
} else {
// cas des nombres plus petits que 16
if (Number(u)<7) {
lire(d+u);
} else {
lire("10");
lire(u);
}
}
// Il n'y a pas de dizaine
// S'il n'y a des unit¶es ou si le nombre de depart est 0
} else if ((u != "0") && (u != "") || (n == "0")) {
// On ne prononce pas le 1 sauf s'il y a des centaines ou
// que le rang est different de 4 (pas de "1 mille" mais
// on peut avoir "1 million"...)
if ((u != "1") || ok || (rang != 4)) {
lire(u);
}
}
}
// On cree le programme en ajoutant le nom de l'etiquette
// a la fin du tableau prgm
function lire (son) {
prgm.push("i_"+son);
}
// Programme principal
stop ();
on (release) {
unites = ["milliard", "million", "mille"];
// Initialisation du tableau prgm
prgm = new Array();
pgrm = [];
Jeux
152
Eric Schrafstetter
nb = Number(n);
nb = nb.toString();
// Si le nombre est negatif, on prononce "moins"
if (Number(nb)<0) {
// On retire le signe moins
nb = nb.slice(1);
lire("moins");
}
// Longueur du nombre
l = length(nb);
// On lit le nombre par centaines
if (l<13) {
for (i=0; i<=2; i++) {
if (l>9-3*i) {
lirecentaine(10-3*i);
// On ¶evite que 1000000 se lise "1 million mille"
if (c+d+u != "000") {
lire(unites[i]);
}
}
}
lirecentaine(1);
i = 0;
// On lance la prononciation
gotoAndPlay (2);
} else {
n = "TROP GRAND !!";
}
}
7. A l’image clé 2 de la scène principale, ajoutez :
fini = false;
if (i<prgm.length) {
paroles.gotoAndPlay(prgm[i]);
}
On lance le son prgm[i].
8. A l’image clé 3, mettre :
if (fini) {
i++;
gotoAndPlay (2);
}
qui permet de tester si le son est terminé
9. Et enfin à l’image clé 4, l’action gotoAndPlay(3); qui renvoie à l’image clé
précédente si le son est en cours.
Idées
–
–
–
153
Ajoutez le cas des nombres à virgules
Créez une calculatrice parlante
Créez une horloge parlante (avec date et heure)
TD ActionScript
9.6 Les machines de Turing
Fig. 8.6 – Alan Turing
9.6.1 Alan Turing
Logicien, spécialiste de cryptologie, professeur à Cambridge. Dès 1937, Turing ”inventa” des
machines abstraites, machines de Turing censées interpréter des instructions logiques
préfigurant la théorie des algorithmes récursifs et la construction des ordinateurs : ce terme fut
proposé en France, en 1955, par Jacques Perret. Turing mit ses compétences aux services de
l’armée britannique lors de la seconde guerre mondiale (1943), en concevant avec Max
Newman le Colossus 1, ordinateur capable de déchiffrer les codes de la célèbre machine
allemande Enigma, d’origine hollandaise et utilisée pour la transmission des messages secrets.
Turing contribuera aussi à la mise en place du premier puissant ordinateur : le Mark 1, qui vit
le jour à Harvard (U.S.A.). Poursuivi en Angleterre (après la guerre) pour homosexualité,
Turing se suicida.
9.6.2 Description de la machine
Une machine est composée d’un ruban pouvant comporter des symboles (lettres, chiffres...),
d’une tête de lecture/écriture et d’une variable d’état. La tête peut avancer ou reculer d’une
case sur le ruban, lire un symbole et agir en conséquent (écriture d’un nouveau symbole,
déplacement à droite ou à gauche).
9.6.3 Exemple de machine
Nous allons voir un exemple de machine comptant en binaire. C’est-à-dire affichant
successivement sur le ruban les nombres :
s00000
s10000
s01000
s11000
s00100
...
Jeux
154
Eric Schrafstetter
Il faut évidement pas mal réfléchir pour créer le programme... Analysons celui que je vous
propose :
Si état et si case est Mettre nouvel état à Et écrire Puis aller à
0
s
1
s
>
0
0
0
0
<
0
1
0
1
<
1
1
1
0
>
1
0
0
1
<
La machine partira avec l’état 0 sur le symbole s.
–
–
–
–
–
La première ligne fait passer l’état de la machine de 0 à 1 lorsqu’elle rencontre le
caractère s sur le ruban. Puis nous allons vers la droite.
La seconde ligne nous dit que si la machine est dans l’état 0 (donc nous n’avons
pas trouvé ou retrouvé le caractère s) et que le caractère sur le ruban est un 0, on
ne fait rien (en fait on réécrit le 0) et l’on retourne vers la gauche.
Idem avec l’état 0 et la valeur 1. Nous sommes donc à la recherche du caractère s
placé à gauche.
Si maintenant nous sommes dans l’état 1 (nous venons donc de voir le caractère s
quelques instants avant) et que le caractère sur le ruban est un 1, nous restons dans
cet état mais nous mettons un 0 à la place puis continuons vers la droite.
Toujours à l’état 1, si le caractère est un 0, nous le faisons passer à 1, remettons
l’état à 0 (ce qui forcera la machine à retrouver le s à gauche) et repartons vers la
gauche !
Vous trouverez sur Internet plusieurs programmes de ce type, par exemple la recherche de
palindromes (voir palind.txt joint), addition binaire, vérification d’un bon parenthèsage
(autant d’ouvrantes que de fermantes)...
Nous utiliserons la notation suivante pour nos programmes :
0,s,1,s,>
0,0,0,0,<
0,1,0,1,<
1,1,1,0,>
1,0,0,1,<
Vous pouvez utiliser la plupart des caractères dans vos programmes mais pas & et +. Utilisez
le caractère _ pour noter une case VIDE.
9.6.4 Simulation sous Flash
Le but de ce tutorial est de créer une machine de Turing capable de lire un programme, un état
ainsi qu’un ruban de départ et de lancer la simulation.
9.6.5 Création de programmes
Les programmes seront tapés dans des fichiers .txt (ou tout autre extension !) et la liste sera
elle-même tapée dans un fichier nommé liste.txt. Par exemple, dans le cas où nous avons
155
TD ActionScript
3 programmes palind.txt, inc.txt et addition.txt, le fichier liste.txt sera de la
forme :
aff=palind.txt,inc.txt,addition.txt&fin=1&
Il est important de voir que nous ajoutons à la fin, une variable fin dont la valeur est mise à 1.
Ceci permettra à Flash de savoir que le chargement des données est terminé et de passer à la
suite.
Voici le contenu du fichier inc.txt (incrémentation)
aff=0,s,1,s,>
0,0,0,0,<
0,1,0,1,<
1,1,1,0,>
1,0,0,1,<
&ruban=s00000&etat=0&fin=1&
Remarquez bien que les lignes du programme sont séparées par des retours chariot pour des
commodités de lecture. Il faudra que Flash repère ces retours à la ligne lorsqu’il enregistrera
le contenu du programme dans une variable prgm. De plus les instructions sont séparées par
des virgules. Le ruban initial est mis dans la variable ruban, l’état initial dans etat et toujours
la variable de fin de chargement.
9.6.6 Chargements
Voici l’idée principale concernant le chargement de la liste des programmes ou des
programmes eux-mêmes :
1. Mettre un bouton sur la scène principale avec pour action :
on (release) {
fin = 0;
loadVariablesNum ("liste.txt", 0);
gotoAndPlay ("charge");
}
On met la variable fin à 0, précisant ainsi que le chargement n’est pas fini. On
commence ensuite à charger les variables au niveau de la scène principale (niveau 0)
et on saute vers l’image de nom "charge".
2. A l’image clé nommée charge, mettre l’action :
if (Number(fin)>0) {
gotoAndPlay ("suite");
}
On regarde si la valeur de la variable fin est passée à 1. Si c’est le cas, on passe à la
suite de l’animation.
3. A l’image clé suivante, mettre l’action :
gotoAndPlay (_currentframe-1);
Jeux
156
Eric Schrafstetter
qui permet de retourner à l’image charge. Ainsi, lorsque nous arrivons à l’image clé
suite, nous sommes sûrs que toutes les variables ont été chargées.
9.6.7 Conversions
Si vous ne connaissez pas les fonctions join et split, vous allez pouvoir observer leur
puissance respective ! Commençons par afficher la liste des différents programmes
disponibles à l’écran.
1. A l’image clé suite de la scène principale, mettre une zone de texte dynamique sur
plusieurs lignes avec pour nom liste.
2. Après le chargement des variables, la variable aff contient tous les programmes sous
la forme :
aff=palind.txt,inc.txt,addition.txt
Nous voulons que les noms soient affichés par ligne dans la zone liste. Il suffit
d’ajouter l’action suivante à l’image clé suite :
affprg = aff.split(",");
liste = affprg.join("\r");
stop ();
La première ligne va permettre de créer un tableau affprg dont chacune des
composantes comportera le nom d’un programme (affprg[0]="palind.txt",
affprg[1]="inc.txt"...). Ce tableau nous servira plus tard. La seconde ligne
regroupe toutes les composantes du tableau affprg en une seule chaîne de caractères
séparée par le caractère "\r" (ou chr(13)) qui est le code du retour chariot.
Chargement du programme :
L’idée est la même, un bouton invisible est placé sur la liste des noms de programmes
disponibles. Lors d’un clic sur le bouton, la position verticale du curseur permet de savoir
quelle ligne a été choisie (regardez le code source du .fla). On peut alors charger les nouvelles
variables comme précédement.
1. La variable aff contient le programme à simuler avec, rappelons-le, des retours
chariot en fin de ligne et des virgules entre chaque codage.
2. Compilez le fichier .fla joint et chargez un programme, par exemple inc.txt
3. Faîtes Déboguer - Liste des variables et regardez la valeur de aff, vous voyez :
Variable _level0.aff = "0,s,1,s,>\r\n0,0,0,0,<\r\n0,1...\r\n"
Il y a donc à la fin de chaque ligne, un retour chariot ( \r) et un saut de ligne ( \n) !
4. Voici maintenant la manipulation fondamentale de ce tutorial, à savoir, effectuer un
Edition - Remplacer sur une chaîne de caractères. Comme premier exemple,
supprimons tous les caractères \r de la variable aff et mettons le résultat dans la
variable liste
liste = aff.split("\r").join("");
157
TD ActionScript
La commande aff.split("\r") décompose la chaîne de caractères aff en un tableau
en se servant du séparateur \r. A l’inverse, la fonction join remet ce tableau en une
unique chaîne avec ici un séparateur égal à un vide.
5. Récupérons maintenant le programme dans un tableau prgm dont chaque composante
sera une instruction. Par exemple, pour le programme inc.txt, la variable prgm sera
égale à:
prgm =
0:"0",
1:"s",
2:"1",
3:"s",
4:">",
5:"0",
6:"0",
7:"0",
8:"0",
9:"<",
10:"0",
...
23:"1",
24:"<",
25:""
L’idée est de commencer par remplacer les sauts de lignes par des virgules et les _ par
des espaces. Ensuite, on crée un tableau en utilisant un split(",").
prgm = liste.split("\n").join(",");
prgm = prgm.split("_").join(" ").split(",");
Il faut lire la première ligne comme cela : Remplacer tous les \n de la variable liste par
des virgules.
Le ruban qui va être créé par la machine sera mis dans un tableau de taille variable. Il
est initialisé grâce à la variable ruban. D’après le guide de référence d’ActionScript, la
commande ruban.split("") DEVRAIT renvoyer un tableau contenant les différents
caractères de ruban. Hélas, il s’agit d’un Bug ! Nous sommes donc obligés, en
attentant Flash 6, d’utiliser une boucle :
ruban = ruban.split("_").join(" ");
trub = new Array();
for (i=0; i<ruban.length; i++) {
trub[i] = ruban.charAt(i);
}
9.6.8 La machine
La programmation de la machine est très simple ! Pour une position donnée, on recherche
l’état courant dans la liste des états proposés dans le programme prgm. On regarde ensuite si
la case visitée est la même que celle du programme. Si oui, une action est effectuée, sinon, on
continue à explorer prgm. La variable indice permet de faire tourner le ruban à l’affichage et
longueur correspond au nombre de lignes de codes du programme.
Jeux
158
Eric Schrafstetter
on (release) {
avance();
}
où avance() est la fonction définie par :
encore = 1;
i = 0;
while (i<longueur && encore) {
if (etat == prgm[5*i] && case2 == prgm[5*i+1]) {
etat = prgm[5*i+2];
trub[indice+2] = prgm[5*i+3];
if (prgm[5*i+4] == ">") {
indice++;
} else {
indice--;
}
encore = 0;
affiche();
}
i++;
}
Les éléments prgm[5*i] contiennent les états à tester, prgm[5*i+1] les valeurs des cases
correspondantes, prgm[5*i+2] le nouvel état à mettre, prgm[5*i+3] la nouvelle valeur à
écrire et prgm[5*i+4] la direction où aller. La fonction affiche() actualise les cases
affichées à l’écran. Elle est définie par :
for (i=0; i<6; i++) {
this["case"+i] = trub[indice+i];
if (this["case"+i]==null) {
this["case"+i] = " ";
}
this["n"+i] = indice+i;
}
}
Il y a 6 cases d’affichées et si la valeur du tableau trub correspondant au ruban n’est pas
définie, on remplace la valeur null par un blanc.
9.6.9 Version AUTO
Pour que la machine puisse fonctionner seule, nous allons créer un bouton avec l’action :
on (release) {
if (encours) {
encours = false;
auto.gotoAndStop(1);
} else {
encours = true;
auto.play();
}
}
159
TD ActionScript
Explications
1. Si la machine était déjà en cours de marche (variable encours est à vrai) alors on
arrête par encours=false et le clip auto (voir plus bas) s’arrête sur l’image clé 1
2. Si encours était à faux (la machine ne fonctionne pas pour le moment), on la lance
par auto.play();
Le clip auto
1. Ce clip comporte 4 images clé et rien sur sa scène principale.
2. Image 1 : Action stop(), ce sera la position de repos lorsque la machine est arrêtée
3. Image 2 :
_root.avance();
temps=getTimer();
On exécute la fonction avance() identique à celle du bouton SUIVANT et on note le
temps actuel.
4. Image 3 :
if (getTimer()>temps+1000) {
gotoAndPlay (2);
}
Si 1 seconde s’est écoulée, on retourne à l’image 2
5. Image 4 : Action gotoAndPlay (3);
Il faut bien sûr que la variable encours soit initialisée à false au premier lancement.
9.6.10 Le fichier Flash fourni
Vous avez tous les éléments pour comprendre le programme joint. Son utilisation est simple :
1. Cliquez sur Charger pour charger la liste des programmes disponibles
2. Sélectionnez le programme
3. Le ruban et l’état initial s’affichent. Vous pouvez modifier l’état manuellement ainsi
que le ruban (cliquez sur MAJ (Mise à Jour))
4. Utilisez les flèches gauche et droite sur le ruban pour préciser la position de départ de
la machine
5. Le bouton SUIVANT permet de faire fonctionner la machine pas à pas
6. Le bouton AUTO lance la machine de façon autonome. L’arrêter en recliquant sur
AUTO.
9.6.11 Les fichiers txt
–
Jeux
Le fichier palind.txt recherche si un mot composé de ”a” et de ”b” est un
palindrome ou non (lisible dans les 2 sens). Un ruban de départ est sous la forme
abbax avec un x terminal. Partir avec un état 0 et le curseur sur la lettre la plus à
160
Eric Schrafstetter
–
–
gauche. Le programme s’arrête sur F si le mot n’est pas un palindrome, sur V
sinon.
Le fichier inc.txt est le fichier permettant de compter en binaire. Exemple de
ruban de départ : s11001. Partir avec état 0 et curseur sur le s
Le fichier multiunaire.txt permet d’effectuer la multiplication de nombres unaires,
par exemple : 111×111 = 111111111 (3 × 3 = 9). Exemple de ruban de départ :
111_111__. Partir avec état q0 et curseur sur le 1 de gauche. Le programme
s’arrête sur F.
Vous pouvez m’envoyer vos réalisations où trouvailles !
9.7 Sécurité
9.7.1 Jouer Online
Voici une méthode (non fiable à 100% mais nécessitant une manipulation non triviale pour la
contourner !) afin d’éviter qu’un joueur télécharge votre fichier .swf et s’en serve sans être
connecté à votre site.
1. A la première image de votre animation mettre l’action :
if ((substring (_url.toLowerCase(), 1, 26)) eq "http://www.nom.fr/") {
gotoAndPlay (3);
}
La propriété _url renvoie l’url du fichier .swf d’où le clip a été téléchargé. On teste
simplement si cet url est celle de notre site.
2. A l’image 2 de l’animation, placez l’action gotoAndPlay(1);. Sinon, il suffit de faire
CTRL+ flèche vers la droite pour éviter le test !
3. Le programme commence à l’image 3.
Et voici la parade pour le pirate !
<HTML>
<HEAD>
<TITLE>Version pirate</TITLE>
</HEAD>
<SCRIPT LANGUAGE=JavaScript>
<!-function whichObj(objName) {
if(navigator.appName=="Netscape") {
return document[objName]
} else {
return window[objName]
}
}
//-->
</SCRIPT>
<BODY>
<OBJECT
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/..."
ID=jeux
161
TD ActionScript
WIDTH=100%
HEIGHT=100%
<PARAM NAME=movie VALUE="jeux.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED
SRC="jeux.swf"
NAME=jeux
swLiveConnect=TRUE
WIDTH=100%
HEIGHT=100%
QUALITY=high
BGCOLOR=#FFFFFF
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/...">
</EMBED>
</OBJECT>
<a href=# onClick="whichObj('jeux').GotoFrame(3);">
Allez directement a l'image 3 !
</a>
</BODY>
</HTML>
Vous pouvez améliorer (?) ce script pour aller directement au numéro d’un frame entré dans
une zone de saisie...
9.7.2 Mot de passe
Ne jamais mettre un mot de passe à l’intérieur d’une animation Flash, il est extrêmenent facile
de le récupérer (voir par exemple le programme ActionScript Viewer qui permet d’extraire les
scripts, symboles etc à partir d’un .swf même protégé). Si vous comprenez à l’instant que tous
vos programmes pourront facilement être lus, j’en suis sincèrement désolé.
9.7.3 ActionScript Viewer
Ce logiciel permet de décompiler les animations Flash et de récupérer les codes.
Actuellement, je ne connais qu’une seule parade (pour combien de temps ?). Il s’agit de
mettre au début de chaque frame où il y a une action à cacher le code :
void 0(!0);
Il existe également Scan SWF File.
Jeux
162
Eric Schrafstetter
10 XML
10.1 Un diaporama avec légendes + effet de transition
10.1.1 Partie XML
Créez un dossier qui contiendra les différents éléments. Placez des photos dans un sousdossier nommé vac04 (pour vacances 2004 !). Les différentes photos se nomment im1.jpg,
im2.jpg mais pourraient avoir des noms quelconques (à changer dans le fichier xml cidessous).
Nous allons créer le fichier diapos.xml suivant dans le dossier racine du site :
<diapos dossier="vac04">
<diapo image="im1.jpg"
</diapos>
legende="La verte campagne..."/>
legende="Les bords du lac Léman"/>
legende="Jeu d'ombres en Haute-Savoie"/>
legende="Promenade dans la neige"/>
legende="Façades à Paris"/>
legende="Un coin de Bretagne"/>
En utilisant XML Notepad (gratuit)
1. Tapez diapos puis bouton droit sur Child_Element – Change To – Attribute
2. Tapez dossier et vac04 comme valeur
3. Revenir sur diapos puis Bouton droit – Insert – Child Element
4. Tapez diapo puis bouton droit – Insert – Attribute sur diapo)
5. Terminez de rentrer les infos sur la première diapo en ajoutant un attribut
legende
6. Faire bouton droit sur diapo puis Duplicate.
7. Recommencez avec les autres diapos pour obtenir :
163
TD ActionScript
10.1.2 Partie Flash
Créez un nouveau document proj.fla (pour projecteur)
Image 1 scène principale
fichier = "diapos.xml";
chargeXML = false;
barre.onEnterFrame = function() {
chargement = Math.floor(_root.getBytesLoaded()/_root.taille*100);
this._xscale = chargement;
if ((chargement == 100) && chargeXML) {
}
};
// Chargement XML
extXML = new XML();
extXML.ignoreWhite = true;
extXML.load(fichier);
extXML.onLoad = function() {
chargeXML = true;
diapo = extXML.childNodes[0].firstChild;
};
stop();
La première ligne fichier
=
"diapos.xml"; peut être retirée si vous utilisez
proj.swf?fichier=diapos.xml directement dans votre page HTML.
Jeux
164
Eric Schrafstetter
Créez un clip barre_mc qui contient un rectangle (par exemple 10x200 pixels). Mettre une
occurrence de ce clip qui servira d’indicateur de chargement sur la scène avec pour nom
barre.
On charge le fichier XML dans extXML, la fonction .onload permettant de savoir quand le
chargement sera terminé. Dans ce cas on regarde le premier élément (firstChild) du
diaporama qui est ici :
<diapo image="im1.jpg" legende="La verte campagne..." />
Image 2 scène principale
// Chargement et apparition des images
chargeur = new MovieClipLoader();
ecouteur = new Object();
chargeur.addListener(ecouteur);
ecouteur.onLoadComplete = function(cible) {
unloadMovie(_root.b_charge);
legende.htmlText = "<p
align='center'>"+diapo.attributes.legende+"</p>";
_root.apparait(eval("image.clip"+niveau));
};
function charge() {
_root.attachMovie("barre", "b_charge", 1);
b_charge._x = 75;
b_charge._y = 25;
image.createEmptyMovieClip("clip"+niveau, niveau);
eval("image.clip"+niveau)._alpha = 0;
chargeur.loadClip(dossier+diapo.attributes.image,
eval("image.clip"+niveau));
}
function apparait(clip) {
createEmptyMovieClip("app", 5);
app.onEnterFrame = function() {
clip._alpha += 5;
if (clip._alpha>=100) {
ancien = niveau-1;
unloadMovie(eval("image.clip"+ancien));
niveau++;
unloadMovie(app);
}
};
}
// Les boutons
suiv.onRelease = function() {
diapo = diapo.nextSibling;
if (diapo == null) {
diapo = extXML.childNodes[0].firstChild;
}
charge();
};
165
TD ActionScript
prec.onRelease = function() {
diapo = diapo.previousSibling;
if (diapo == null) {
diapo = extXML.childNodes[0].lastChild;
}
charge();
};
// programme principal
dossier = extXML.childNodes[0].attributes.dossier+"/";
niveau = 1;
charge();
stop();
Explications :
•
•
•
•
•
•
•
Mettre 2 boutons sur la scène avec pour noms d’occurrences suiv et prec.
On crée un écouteur précisant quand le chargement de l’image sera terminé
(fonction .onLoadComplete)
Une fonction charge() qui affiche l’état de chargement de l’image suivante et place
l’image 1 dans image.clip1, l’image 2 dans image.clip2 etc.
Une fonction apparait qui augmente le alpha de l’image de 0 à 100%
Deux boutons suiv et prec pour avancer ou reculer dans le diaporama.
nextSibling trouve le frère suivant (ici la diapo suivante) ou renvoie null s’il n’y
en a pas. Dans ce cas on repart au premier enfant.
Idem avec previousSibling qui renvoie l’enfant précédent ou null.
Pour finir :
•
Vous pouvez ajouter un masque (voir fichier .fla) sur la partie où les images devront
être visibles, ce qui permet de créer d’autres effets de transitions, par exemple, un
passage de droite à gauche :
app.onEnterFrame = function() {
clip._x = image._width;
clip._alpha = 100;
if (clip._x>5) {
clip._x -= 20;
} else {
clip._x = 0;
ancien = niveau-1;
unloadMovie(eval("image.clip"+ancien));
niveau++;
unloadMovie(app);
}
}
Jeux
166
Eric Schrafstetter
11 PHP
Si vous voulez tester les scripts de ce chapitre, je vous conseille d’installer le pack easyphp
disponible sur http://www.easyphp.org/. Vous aurez ainsi en quelques minutes (à peine) un
serveur Apache, PHP et MySQL sur votre machine. Les scripts .php pourront être placés dans
le répertoire www/flash.
11.1 Ming
Cette librairie de création à la volée de fichiers SWF est disponible pour PHP sur le site http
://www.opaque.net/ming. Le manuel de référence de PHP 4.0 (http ://www.opaque.net/ming)
contient un chapitre de description des fonctions de la librairie ming. Si vous avez installé
easyphp, ouvrez votre page d’accueil et cliquez sur le bouton ’test ming’. Téléchargez
également les utilitaires ming-winutils.zip dont entre autres makefdb (voir rubrique texte plus
loin) et swftophp qui permet de convertir un fichier swf de Flash 4 en script php ! Pour
l’utiliser, voici mes conseils :
1. Ce programme fonctionnant sous DOS, ajoutez à votre bouton droit un menu
contextuel Fenêtre DOS qui vous permettra d’ouvrir une fenêtre DOS dans un dossier
sélectionné. Pour ce faire, ouvrez la base de registre (Démarrer - Exécuter - regedit)
puis allez à la clé : HKEY_CLASSES_ROOT\Folder\shell
2. Créez une clé nommée Fenêtre DOS, une sous-clé command et lui donnez la valeur
command.com. Si vous avez peur de changer la base de registre ou si vous avez un
doute, ne changez rien ! !
3. Placez le programme swftophp dans un dossier accessible par l’autoexec.bat, par
exemple dans C:\windows\command.
4. Ouvrez une fenêtre DOS dans le dossier où est le fichier à convertir. Faire boutondroit et propriétés de la fenêtre DOS, choisir l’onglet Divers et cochez Souris - Edition
rapide.
5. Supposons que le fichier s’appelle essai.swf. Tapez : swftophp essai.swf >
essai.txt
La conversion du fichier .swf en PHP-Ming est alors écrite dans le fichier essai.txt.
11.1.1 Tester un swf
Lorsque vous lancez une page .php, le fichier .swf créé est placé dans le dossier temporaire.
Même si vous fermez la fenêtre de visualisation puis changez votre script php, votre
navigateur affichera encore votre ancienne version ! La première idée est de supprimer à
chaque fois les fichiers temporaires mais cela devient très vite pénible. Une solution est
d’ajouter les lignes suivantes :
header('Content-type: application/x-shockwave-flash');
header('http-equiv="pragma" content="no-cache"');
header('http-equiv="Expires" content="0"');
167
TD ActionScript
La première ligne est toujours nécessaire comme vous le constaterez dans les prochains
programmes. La seconde ligne évite que le navigateur mette le fichier en mémoire cache
(remarquez que Affichage - Source n’est plus disponible) et la dernière donne une durée de
vie nulle à la page. Désormais, la manipulation est de fermer la fenêtre d’affichage, de
changer votre script et de relancer la page !
Une autre solution consiste à utiliser un lien hypertexte du type :
<A HREF="anim.swf?1">Charger l'animation !</A>
la commande ?1 forçant le navigateur a télécharger l’animation sur le site d’origine.
11.1.2 Notions de base
<?
$m = new SWFMovie();
$m->setRate(12.0);
$m->setDimension(11000, 8000);
$m->setFrames(1);
$m->setBackground(0xff, 0xff, 0xff);
/* -------------------------*/
/* Le programme de creation */
/* -------------------------*/
$m->output();
?>
11.1.3 Dessiner
1. Un rectangle vert de longueur longueur, de hauteur hauteur dont le coin haut gauche
est en (x,y)
function rect($x,$y,$longueur,$hauteur){
$s1 = new SWFShape();
$s1->movePenTo($x,$y);
$s1->setRightFill(0x00, 0xff, 0x00);
$s1->drawLine($longueur, 0);
$s1->drawLine(0, $hauteur);
$s1->drawLine(-$longueur, 0);
$s1->drawLine(0,-$hauteur );
return $s1;
}
Exemple :
<?
$m->setRate(12.000000);
$m->setFrames(1);
$m->add(new SWFAction("stop();"));
function rect($x,$y,$longueur,$hauteur){
$s1->movePenTo($x,$y);
PHP
168
Eric Schrafstetter
$s1->setRightFill(0x00, 0x66, 0xcc);
$s1->drawLine($longueur, 0);
$s1->drawLine(0, $hauteur);
$s1->drawLine(-$longueur, 0);
$s1->drawLine(0,-$hauteur );
return $s1;
}
$i1 = $m->add(rect(800,1000,1600,800));;
$m->nextFrame();
$m->output();
?>
2. Cercle de rayon R
Le plus simple est de représenter un cercle comme une suite de lignes droites (voir
l’exemple du camembert 3D online plus loin). Nous allons voir une méthode plus
rapide dans le principe mais certainement moins maniable d’un point de vue
intellectuel ! Il s’agit d’utiliser 8 courbes de Bézier. Rappelons l’algorithme de
Casteljau dans le cas de N +1 points :
Soit zi, i = 0…N des points du plan complexe. La courbe de Bézier d’ordre N est
donnée par :
N
z (t ) = ∑ C Nk t k (1 − t ) N − k z k
k =0
Cas particulier :
 R R 
Si z 0 = 
,
 , z1 = (x1,y1) et z2 = (R; 0), alors la courbe de Bézier d’ordre 2 a
 2 2
pour équation paramétrique :

2 R
2
(1 − t ) 2 + 2t (1 − t ) x1 + Rt
z (t ) = 
R
 (1 − t ) 2
+ 2t (1 − t ) y1

2
Exercice :
Cherchez
l’unique
polynôme
du
second degré
Pc
approchant la
courbe
2
π

π 
t→ cos (1 − t )  pour t ∈ [0; 1] avec Pc(0) = cos  =
, Pc(1) = cos(0) = 1 et
2
4

4
π
2
Pc ' (0) = ×
4 2
Réponse :
 π 2
2 π 2
1  2
π

t
cos (1 − t )  ≈ Pc (t ) =
+
t + 1 −
−

2
8
8
2
4



169
(9.1)
TD ActionScript
π

De même pour l’approximation de t → sin  (1 − t ) 
4

π 2
2 π 2
1  2
π

t
−
−
sin  (1 − t )  ≈ Ps (t ) =
t + 
2
8
2 
4

 8
(9.2)
En particulier, une approximation de l’arc de cercle ayant pour équation t → Re
avec t ∈ [0; 1] sera réalisée lorsque le couple (x1; y1) vérifiera :

π

2 R
+ 2t (1 − t ) x1 + Rt 2
 R cos 4 (1 − t )  = (1 − t )
2



π


 R sin  (1 − t )  = (1 − t ) 2 R + 2t (1 − t ) y1

2
4

π
i (1−t )
4
(9.3)
En remplaçant (9.1) et (9.2) dans (9.3) puis en identifiant les coefficients des
polynômes, on obtient :
π 2 +8 2
x1 =
≈ 0,9848 ≈ 1
16
et
−π 2 +8 2
1
y1 =
≈ 0,4294 ≈
16
1+ 2
Ceci donne un moyen de tracer un arc de cercle de 45° d’un cercle de rayon R et de
R
centre O (voir figure 9.1) en utilisant l’approximation x1 = R et y1 =
. Un petit
1+ 2
R
R
et que la distance de z1 à z2 est
.
calcul montre que ξ =
2 (1 + 2 )
1+ 2
Fig. 9.1 – Arc de cercle par courbe de Bézier
PHP
170
Eric Schrafstetter
<?
$m->setRate(12.0);
$m->setFrames(1);
$R=500;
$s1->movePenTo($R/sqrt(2), -$R/sqrt(2));
$s1->setLine(20, 0x00, 0x00, 0x00);
$s1->drawCurve($R/(2+sqrt(2)),$R/(2+sqrt(2)),0,$R/(1+sqrt(2)));
$i1 = $m->add($s1);
$i1->moveTo(1000, 1000);
$m->nextFrame();
$m->output();
?>
3. Tracer un cercle - Méthode 1 : Boucle for
<?
$m->setRate(12.000000);
$m->setFrames(1);
function cercle($R){
$c = new SWFSprite();
$r1=2.414213562;
$r2=1.414213562;
$s1->movePenTo($R/$r2, -$R/$r2);
$s1->setLine(20, 0x00, 0x00, 0x00);
$s1->drawCurve($R/$r1/$r2,$R/$r1/$r2,0,$R/$r1);
for($i=0;$i<=7;$i++){
$i1 = $c->add($s1);
$i1->moveTo(1000, 800);
$i1->rotateto(45*$i);
}
$c->nextFrame();
return $c;
}
$m->add(cercle(500));
$m->nextFrame();
$m->output();
?>
4. Tracer un cercle - Méthode 2 : Ecriture explicite des 8 courbes de Bézier
<?
$m->setRate(12.000000);
$m->setFrames(1);
function cercle($R){
171
TD ActionScript
$s1->movePenTo(0, 0);
$s1->setLine(20, 0x00, 0x00, 0x00);
$coeff1=$R*(2-sqrt(2))/2;
$coeff2=$coeff1*sqrt(2);
$s1->drawCurve($coeff1, $coeff1, 0, $coeff2);
$s1->drawCurve(0, $coeff2, -$coeff1, $coeff1);
$s1->drawCurve(-$coeff1, $coeff1, -$coeff2, 0);
$s1->drawCurve(-$coeff2, 0, -$coeff1, -$coeff1);
$s1->drawCurve(-$coeff1, -$coeff1, 0, -$coeff2);
$s1->drawCurve(0, -$coeff2, $coeff1, -$coeff1);
$s1->drawCurve($coeff1, -$coeff1, $coeff2, 0);
$s1->drawCurve($coeff2, 0, $coeff1, $coeff1);
return $s1;
}
$i1 = $m->add(cercle(500));
$i1->moveTo(2000, 2000);
$m->nextFrame();
$m->output();
?>
5. De façon plus générale, si l’on veut tracer un arc de cercle d’angle α et de rayon R,
avec 0 ≤ α ≤
π
. On place z0 en (Rcos(α);Rsin(α)), z2 en (R; 0) et on se sert du point
4
z1 de coordonnées :
2 cos α + α sin α
R
2
2 cos α − α sin α
y1 =
R
2
x1 =
Voici un exemple de script traçant des arcs de cercles d’angles α pour α entre 0 et
π
4
<?
$m->setRate(12.000000);
$m->setFrames(1);
function cercle($R,$a,$x,$y){
$ca=cos($a);
$sa=sin($a);
$rca=$R*$ca;
$rsa=$R*$sa;
$s1->movePenTo($rca, -$rsa);
$s1->setLine(20, 0x00, 0x00, 0x00);
$s1->drawCurve($a*$rsa/2,$a*$rca/2,
$R*(1-($sa*$a+2*$ca)/2),$R*(2*$sa-$a*$ca)/2);
$i1 = $c->add($s1);
$i1->moveTo($x, $y);
$c->nextFrame();
return $c;
}
PHP
172
Eric Schrafstetter
for($i=0;$i<=45;$i++){
$m->add(cercle(300,M_PI*$i/180,1000-10*$i,1000));
}
$m->output();
?>
11.1.4 Camembert 3D online
Fig. 9.2 – Aspect final du camembert
Voici un petit script facilement affichable à une base de données qui permet de réaliser à la
volée un camembert 3D. Contrairement à la section précédente où nous utilisions des courbes
de Bézier, nous choisissons ici de tracer l’ellipse à partir de petits segments de droites. Voici
quelques explications sur le programme :
1. Le graphique se compose de 2 parties, les différentes parts et le socle. Le socle n’étant
visible que pour les angles entre 0 et π.
2. La fonction secteur permet de dessiner un secteur entre les angles $depart et $angle
à la position $x,$y avec la couleur $coul
3. Le test ci-dessous permet d’arrêter le socle à π :
if($angle+$depart>M_PI){
$nb=(M_PI-$depart)*180/M_PI;
}
4. Il ne faut pas confondre les fonctions drawline et drawlineto, la première dessinant
une ligne du point courant jusqu’à un déplacement (δx; δy) relativement à ce point et
la seconde dessinant une ligne du point courant jusqu’à un autre point (x; y).
5. Vous pouvez à titre d’exercice transformer les clips $c en boutons de sorte que si l’on
passe la souris dessus, la valeur de la portion de camembert soit affichée !
<?
$m->setRate(12.000000);
$m->setFrames(1);
function secteur($depart,$angle,$x,$y,$coul){
global $depart;
$haut=80;
173
TD ActionScript
$f=$s1->addFill($coul,$coul,$coul);
$s1->setRightFill($f);
$s1->setLine(20, 0x00, 0x00, 0x00);
$nb=$angle*180/M_PI;
if($depart<=M_PI){
$f=$s2->addFill($coul,$coul,$coul);
$s2->setRightFill($f);
$s2->movePenTo($x*(1+cos($depart)),$y*(1+sin($depart)));
$s2->setLine(20, 0x00, 0x00, 0x00);
$s2->drawline(0,$haut);
if($angle+$depart>M_PI){
$nb=(M_PI-$depart)*180/M_PI;
}
for($k=0;$k<=$nb;$k++){
$s2->drawlineto($x*(1+cos($k*M_PI/180+$depart)),$haut+
$y*(1+sin($k*M_PI/180+$depart)));
}
$s2->drawlineto($x*(1+cos($depart+$nb*M_PI/180)),
$haut+$y*(1+sin($depart+$nb*M_PI/180)));
$s2->drawline(0,-$haut);
$s2->drawlineto($x*(1+cos($depart)),$y*(1+sin($depart)));
$i1 = $c->add($s2);
}
$nb=$angle*180/M_PI;
for($k=0;$k<=$nb;$k++){
$s1->drawlineto($x*cos($k*M_PI/180+$depart),
$y*sin($k*M_PI/180+$depart));
}
$depart+=$angle;
$s1->drawlineto($x*cos($depart),$y*sin($depart));
$s1->drawlineto(0,0);
$i1 = $c->add($s1);
$c->nextFrame();
return $c;
}
$a=200;
$b=100;
$couleurs=array(0xff,0xcc,0x50,0xaa);
$valeurs=array(5,10,3,20);
$compte=sizeof($valeurs);
$depart=0;
$somme=0;
for($i=0;$i<=$compte-1;$i++){
$somme+=$valeurs[$i];
}
for($i=0;$i<=$compte-1;$i++){
$part=2*M_PI*$valeurs[$i]/$somme;
$t=$m->add(secteur($depart,$part,$a,$b,$couleurs[$i]));
$t->moveto($a,$b);
}
$m->output();
?>
PHP
174
Eric Schrafstetter
11.1.5 Déplacement
1. Déplacement d’un symbole sur la scène principale :
<?
$m->setRate(12.000000);
$m->setFrames(10);
$s1->movePenTo(5000, 5000);
$s1->drawLine(-2000, 0);
$s1->drawLine(0, -1500);
$s1->drawLine(2000, 0);
$s1->drawLine(0, 1500);
$s2 = new SWFSprite();
$j1 = $s2->add($s1);
$s2->nextFrame();
/* -- On place une occurrence du rectangle sur la scµene */
$i1 = $m->add($s2);
for($i=1;$i<=10;$i++){
$x=5000-200*$i;
$y=5000-500*$i;
$m->nextFrame();
if($i==9) {
}
}
$m->output();
?>
2. La dernière version de MING est compatible avec ActionScript. Si vous utilisez
comme moi la version précédente, vous voilà obligé de nous replonger dans les
actions propres à Flash 4...Voici un exemple tout à fait élémentaire de la fonction
startDrag. Il place un petit rectangle à l’écran ayant le comportement d’un bouton,
lorsque vous pressez dessus, vous pouvez le déplacer et lâchez le bouton de la souris
pour le poser.
<?
$m->setRate(12.0);
$m->setFrames(1);
$s1->drawLine(500, 0);
$s1->drawLine(-500, 0);
$s1->drawLine(0, -500);
$s2 = new SWFButton();
$s2->addShape($s1, SWFBUTTON_HIT |
175
TD ActionScript
SWFBUTTON_DOWN | SWFBUTTON_OVER | SWFBUTTON_UP);
$a = new SWFAction("startDrag('', 0);");
$s2->addAction($a, SWFBUTTON_MOUSEDOWN);
$a = new SWFAction("stopDrag();");
$s2->addAction($a, SWFBUTTON_MOUSEUP);
$i1 = $m->add($s2);
$i1->moveTo(4000, 4000);
$m->nextFrame();
$m->output();
?>
11.1.6 Texte
Soit vous utilisez les polices de base _serif, _sans ou _typewriter, soit vous utilisez ’vos’
propres polices d’extension .fdbVoici comment créer une telle police :
1.
2.
3.
4.
5.
6.
7.
8.
9.
Placez l’utilitaire makefdb (voir intro) dans un répertoire accessible.
Lancez Flash et créez un fichier police.fla
Créez une zone de texte et tapez quelques lettres, par exemple abc.
Choisissez une police, par exemple Wingdings
Dans les paramètres de publication, décochez les formats SWF et HTML et cochez
Modèle Generator SWT.
Si vous voulez exporter d’autres polices, créez autant de zones de texte que nécessaire
!
Publier la page pour créer le fichier police.swt
Ouvrir une fenêtre DOS dans le dossier de publication et tapez makefbd police.swt.
Un ou plusieurs fichiers .fdb sont alors créés.
Placez ces fichiers sur votre serveur (utilisez des chemins relatifs si les polices ne sont
pas dans le même répertoires que les fichiers PHP) et appelez la police par la
commande suivante :
$f=new SWFFont("Wingdings.fdb");
$t=new SWFText();
$t->setFont($f);
10. Voici un petit exemple d’animation de texte :
<?
$f=new SWFFont("Wingdings.fdb");
$t=new SWFText();
$t->setFont($f);
$t->setColor(0xff,0,0);
$t->setHeight(600);
$t->addString("Flash !");
$m= new SWFMovie();
$m->setDimension(5000,4000);
$i=$m->add($t);
$i->moveTo(2000,2000);
for($k=0;$k<=60;$k++){
$i->scaleTo(cos($k*M_PI/30),sin($k*M_PI/30));
$m->nextframe();
}
$m->output();
?>
PHP
176
Eric Schrafstetter
11.1.7 Morphing
Dans cet exercice, on dessine deux rectangles de couleurs et de formes différentes et on crée
l’interpolation entre les deux. La fonction SWFMorph doit avoir 2 paramètres : getShape1()
pour la forme d’origine et getShape2() pour la forme finale.
<?
$m->setRate(12.000000);
$m->setFrames(20);
/* Initialisation des nombres aleatoires */
mt_srand((double)microtime()*10000);
/* Creation du morphing */
$s1 = new SWFMorph();
/* Forme 1 */
$s0 = $s1->getShape1();
$s0->movePenTo(900, 2000);
$s0->setLeftFill(0x00, 0xff, 0x00);
$s0->setLine(0, 0x00, 0x00, 0x00, 0x00);
/* Largeur aleatoire du carre */
$largeur=mt_rand(100,2000);
$s0->drawLine($largeur, 0);
$s0->drawLine(0, $largeur);
$s0->drawLine(-$largeur, 0);
$s0->drawLine(0, -$largeur);
/* Forme 2 */
$s0 = $s1->getShape2();
$s0->movePenTo(2500, 2000);
$s0->setLeftFill(0x00, 0x00, 0xff);
$s0->setLine(0, 0x00, 0x00, 0x00, 0x00);
$largeur=mt_rand(100,2000);
$s0->drawLine($largeur, 0);
$s0->drawLine(0, $largeur);
$s0->drawLine(-$largeur, 0);
$s0->drawLine(0, -$largeur);
$i1 = $m->add($s1);
for($i=0;$i<1;$i+=0.05){
$m->nextFrame();
$i1->setRatio($i);
}
$m->output();
?>
11.1.8 Loadmovie
A partir d’une animation Flash 5, un bouton va permettre de télécharger une animation Flash
créée en php et un second bouton effectue un effet sur l’animation chargée.
1. Tapez le fichier rect.php suivant :
<?
$m->setRate(12.000000);
$m->setFrames(1);
177
TD ActionScript
$s1->drawLine(-20, 0);
$s1->drawLine(0, -20);
$s2 = new SWFSprite();
$j1 = $s2->add($s1);
$s2->nextFrame();
$i1 = $m->add($s2);
$i1->moveTo(40, 40);
$i1->setName('rectangle');
$m->nextFrame();
$m->output();
?>
Remarquez bien la fonction setName qui permet de donner un nom à l’occurrence.
2. Lancez Flash et enregistrez sous le nom lance.fla (même dossier que le fichier
précédent)
3. Créez deux boutons et mettre l’action suivante sur le premier bouton :
on (release) {
ici.loadMovie ("rect.php", "", "POST");
}
4. Sur le second bouton, associez l’action :
on (release) {
ici.rectangle._alpha=50;
}
5. Créez un clip vide et mettre une occurrence de celui-ci sur la scène principale (au
milieu de la scène) avec comme nom ici
6. Compilez et lancez l’animation à partir du navigateur. Cliquez sur le premier bouton,
le rectangle apparaît.
7. Cliquez sur le second bouton, l’effet _alpha=50 est appliqué.
11.2 Echange de variables
11.2.1 Exemple du poids idéal
1. Créez le script calcul.php suivant :
<? # homme ou femme ?
if($choix==1){
$poids=$taille-100-($taille-150)/4;
}
else {
$poids=$taille-100-($taille-150)/2;
}
echo "poids= $poids";
?>
PHP
178
Eric Schrafstetter
2. Créez une animation Flash poids.fla avec sur la scène principale :
– Une action stop(); à l’image clé 1
– Deux zones de textes dynamiques de noms taille et poids. Ecrire à côté les
textes statiques taille et poids correspondant.
– Un bouton rose (pour poids de la femme) avec l’action :
on (release) {
choix = 2;
loadVariablesNum ("calcul.php", 0, "POST");
}
–
Un bouton bleu (pour poids de l’homme) avec l’action :
on (release) {
choix = 1;
loadVariablesNum ("calcul.php", 0, "POST");
}
–
–
–
Enregistrez le fichier dans le même répertoire que calcul.php et compilez
(MAJ+F12).
Lancez votre navigateur et ouvrez le fichier poids.html
Tapez une taille et cliquez sur le bouton rose pour avoir le poids idéal si c’est
une femme ou bleu si c’est un homme.
Les variables taille et choix de l’animation Flash sont envoyées au script PHP par
la méthode POST. Le script PHP calcule le poids idéal en utilisant $choix pour savoir
si c’est un homme ou une femme et renvoi la chaîne poids=$poids qui est récupérée
par Flash dans poids. Rappelons qu’en PHP, lorsqu’une chaîne de caractère est
évaluée comme une valeur numérique, le résultat et le type de la variable sont
déterminés comme suit :
–
–
–
La chaîne de caractères est de type ”double” si elle contient un des caractère
’.’, ’e’ ou ’E’. Sinon, elle est de type entier (”integer”).
La valeur est définie par la première partie de la chaîne. Si la chaîne de
caractères débute par une valeur numérique cette valeur sera celle utilisée.
Sinon, la valeur sera égale à 0 (zéro).
Lorsque la première expression est une chaîne de caractères, le type de la
variable dépend de la seconde expression.
11.2.2 Compteur de visiteurs
Voici un moyen très court d’afficher sous Flash le nombre de visiteurs d’un site en utilisant
PHP :
1. Créez le fichier compteur.php suivant :
<?
$lire=fopen("compteur.txt","r");
$compteur=fread($lire,filesize("compteur.txt"));
fclose($lire);
$compteur+=1;
179
TD ActionScript
$ecrire=fopen("compteur.txt","w");
fwrite($ecrire,$compteur);
fclose($ecrire);
echo "nbvisites=".$compteur;
?>
Le script ouvre le fichier compteur.txt contenant un nombre, met le contenu dans la
variable $compteur, augmente la variable et la remet dans le fichier. Enfin, la variable
nbvisites est envoyée à Flash.
2. Créez et enregistrez dans le même répertoire que compteur.php, un fichier
compteur.txt contenant le seul caractère 0 (zéro).
3. Lancez Flash et créez une zone de texte dynamique de nom nbvisites sur la scène
principale
4. Ajoutez l’action suivante à l’image 1 de la scène principale :
loadVariables ("compteur.php", "", "POST");
5. Compilez et ouvrez à partir de votre navigateur. Le nombre de visites s’affiche.
PHP
180
Eric Schrafstetter
12 Visual C++ et Flash
12.1 Introduction
Si vous n’avez pas Visual C++, dépêchez-vous de commander le Hors-Série n°9 (mai 2001)
de PC team contenant la version complète du logiciel Microsoft Visual C++ ’Introductory
Edition’ pour quelques euros ! L’installation ne pose aucun problème, ajoutez également
l’aide (en Anglais). Nous allons créer une petite application qui va piloter une animation
Flash et en recevoir des commandes.
Vérifiez votre configuration :
1.
2.
3.
4.
5.
Dézippez le fichier commandes.zip dans un dossier quelconque
Un dossier tdas est créé. Ouvrez-le et copiez le fichier ls.swf
Collez ce fichier dans c:\mes documents
Cliquez 2 fois sur le fichier commandes.dsw qui lance Visual C++
Tapez sur la touche F7 (Compiler). Normalement, il ne doit y avoir aucun message
d’erreur !
6. Faîtes CTRL+F5 puis cliquez sur OK. Testez les différents boutons qui vont être
maintenant expliqués...
12.2 C++ vers Flash
12.2.1 Création de l’animation Flash
Pour le premier programme, inutile de se compliquer !
1. Lancez Flash, dessinez un rectangle et transformez-le en symbole
2. A partir de ce symbole, créez un mouvement quelconque entre les images 1 et 10
3. Enregistrez sous le nom rect.fla, compilez et lancez l’animation. L’animation doit
tourner en boucle.
12.2.2 Création de l’interface C++
Je vais supposer que vous ne connaissez rien ou pas grand chose à C++ (nous serons 2).
1. Lancez Visual C++
2. Faîtes File-New et choisir MFC AppWizard qui permet de faire 99% du travail ’ingrat’
à notre place...
3. Donnez un nom au projet en haut à droite, par exemple commandes puis OK
4. Choisir le type Dialog Base (Boîte de dialogue), langue Française et cliquez sur Next
5. Cochez uniquement 3D Controls et ActiveX Controls puis cliquez sur Next
6. Cochez ’Yes, please’ pour avoir des explications sur le code généré (parfaitement
inbuvable !). Cliquez sur Finish puis OK. Vous devez voir à gauche une fenêtre avec 3
onglets : ClassView, Resource-View et FileView. Si ce n’est pas le cas, faire ViewWorkspace.
181
TD ActionScript
7. Cliquez sur l’onglet ResourceView puis sur le + de Dialog
8. Cliquez 2 fois sur IDD_COMMANDES_DIALOG , la future fenêtre de l’application est sous
vos yeux. Faîtes CTRL+T pour tester la boîte de dialogue.
9. Utilisez la barre d’outils Controls pour insérez un nouveau bouton (Button). Si la barre
n’est pas visible, faîtes bouton droit sur la barre d’outils du haut puis Controls.
10. Un bouton ayant pour nom Button1 est affiché. Faire Bouton droit sur le bouton et
Properties. Changez le champ Caption par ’Jouer’.
11. De même, insérez un nouveau bouton et mettre le champ Caption à ’Stop’. Ces
boutons serviront à lire et stopper l’animation Flash
12.2.3 Insérer l’animation
1.
2.
3.
4.
Faîtes Projet - Add to Project - Components and Controls
Allez dans le répertoire ’Registered ActiveX Controls’
Choisir dans la liste ShockWave Flash Object puis OK
Un nouveau bouton ’ShockWave Flash Object’ apparaît dans la barre d’outils
Controls
5. Cliquez sur ce bouton et dessinez un rectangle sur la boîte de dialogue
6. Faîtes Bouton droit sur le rectangle blanc créé puis Properties. Remarquez que son
ID est IDC_SHOCKWAVEFLASH1
7. Il s’agit maintenant d’associer une variable à l’objet IDC_SHOCKWAVEFLASH1. Pour
cela lancer ClassWizard par View-ClassWizard et choisissez en haut l’onglet
Members Variables
8. Cliquez sur IDC_SHOCKWAVEFLASH1 puis sur le bouton Add Variable à droite. Mettre
par exemple m_anim comme nom de variable puis 2 fois OK
12.2.4 Le programme
Il s’agit d’associer différentes actions aux événements (boutons, initialisation...)
1. On voudrait que l’animation rect.swf soit chargée dans la variable m_anim dès le
début. Pour cela, lancez ClassWizard (CTRL+W), cliquez sur l’onglet ’Message
Maps’ et choisir Class Name = CcommandesDlg. La liste des objets est affichée.
2. Choisir l’ID CcommandesDlg et le Message WM_INITDIALOG (WM pour Window
Message) puis cliquez à droite sur le bouton ’Edit Code’
3. Oups ! Je vous avais bien dit que c’était inbuvable ! Recherchez plus bas la partie
// TODO: Add extra initialization here
return TRUE; // return TRUE unless you ...
C’est après la ligne // TODO: que nous allons mettre notre code.
4. Mettre le code suivant :
// TODO: Add extra initialization here
m_anim.SetMovie("C:/Mes Documents/rect.swf");
m_anim.Play();
return TRUE; // return TRUE unless you ...
Quelques remarques : Bien sûr vous devez mettre le chemin correspondant à
l’emplacement de votre fichier rect.swf. D’autre part, avez-vous vu qu’après m_anim
Visual C++
182
Eric Schrafstetter
un menu contextuel s’est affiché ? Tapez les premières lettres puis utilisez la flèche du
bas du clavier et entrée pour choisir directement la fonction. Enfin, si vous ne vous
souvenez plus de la liste des variables, faîtes bouton droit sur le code puis ’List
Members’ et tapez la lettre m.
5. Il est temps de tester notre début d’application en tapant sur la touche F7.
Normalement, le message suivant s’affiche :
commandes.exe - 0 error(s), 0 warning(s)
Si ce n’est pas le cas et si vous débutez en C++… recommencez depuis le début !
6. Lancez le programme par CTRL+F5 ou cliquez sur le point d’exclamation rouge.
7. Une boîte de dialogue s’affiche vous signalant que vous avez la version à usage
personnel, ce qui explique que je ne peux vous fournir que les codes sources de cet
exercice.
8. Voyez-vous votre animation ??? Cliquez sur OK pour fermer.
Passons maintenant aux codes des boutons Jouer et Stop :
1. Revenez sur la boîte de dialogue par Windows - IDD_COMMANDES_DIALOG
2. Double cliquez sur le bouton ’Jouer’ et remplacez OnButton1 par OnJouer qui est
plus explicite.
3. Tapez le code suivant :
void CCommandesDlg::OnJouer()
{
// TODO: Add your control notification ...
m_anim.Play();
}
4. De la même façon, double cliquez sur le bouton ’Stop’ et remplacez OnButton2 par
OnStop. Ajoutez le code :
void CCommandesDlg::OnStop()
{
// TODO: Add your control notification ...
m_anim.Stop();
}
5. Recompilez par F7 et lancez par CTRL+F5
6. Testez les boutons ’Jouer’ et ’Stop’
7. Remplacez le code du bouton ’Stop’ par :
{
// TODO: Add your control notification handler code here
m_anim.GotoFrame (5);
m_anim.Stop();
}
Maintenant, l’animation s’arrêtera toujours au frame n° 5. Pour voir toutes les
fonctions liées à l’objet Flash, utilisez les menus déroulants dans la barre d’outils du
haut :
183
TD ActionScript
–
–
–
WizardBar C++ class = CshockwaveFlash
WizardBar C++ filter = (All class members)
WizardBar C++ Members = La liste cherchée
En particulier :
m_anim.GetTotalFrames() : Nombre de frames
m_anim.CurrentFrame() : Frame courante
m_anim.FrameLoaded(long n) : VRAI si frame n chargée
m_anim.Forward() : Frame suivant
Par exemple, sur la boîte de dialogue IDD_COMMANDES_DIALOG ajoutez un texte
statique Aa et ouvrez ClassWizard (CTRL+W) - Member Variables pour lui associer la
variable m_total. Changez le code du bouton ’Stop’ par :
{
char total[20];
_itoa(m_anim.GetTotalFrames(),total,10);
m_total=total;
UpdateData(FALSE);
m_anim.Stop();
}
Lorsque vous appuierez sur le bouton ’Stop’, le nombre total de frames de l’animation
s’affichera dans la zone de saisie. La fonction _itoa permet de convertir un entier
long en caractères (base 10 ici).
12.2.5 SetVariable
Voici comment envoyer des variables de C++ vers Flash avec la commande SetVariable.
1. Ajoutez dans l’animation Flash une zone de texte dynamique ayant pour nom texte
2. Compilez l’animation.
3. Revenez à C++ et ajoutez un bouton sur la boite de dialogue avec pour nom
’Envoyer’. Double cliquez sur le bouton et donnez le nom OnEnvoyer à la fonction.
4. Mettre l’action suivante :
void CCommandesDlg::OnEnvoyer()
{
UpdateData(TRUE);
m_anim.SetVariable("texte",m_total);
}
Ainsi, lorsque l’on tapera du texte dans la zone de saisie m_total et que l’on cliquera sur le
bouton ’Envoyer’, nous enverrons la variable nommée texte avec le contenu m_total à
l’animation.
Visual C++
184
Eric Schrafstetter
12.3 Flash vers C++
Comment Flash peut-il piloter un programme C++ ? Tout simplement par la fonction
FSCommand.
12.3.1 Création de l’animation Flash
1. Lancez Flash et créez un bouton quelconque
2. Mettre 2 occurrences de ce bouton sur la scène principale
3. Au premier bouton ajoutez l’action :
on (release) {
fscommand ("afficher", getVersion());
}
4. Au second bouton mettre l’action :
on (release) {
fscommand ("change", "J'ai tout compris !");
}
5. Ajoutez l’action stop(); à la première image de la scène principale.
6. Enregistrez sous le nom comm.fla et compilez.
12.3.2 Création du programme C++
Reprenez la boite de dialogue créée précédemment.
1. Lancez ClassWizard (CTRL+W), choisir Class names = CcommandsDlg, Object ID =
IDC_SHOCKWAVEFLASH1 et Messages = FSCommand puis Edit Code
2. Tapez le code suivant :
void
CCommandesDlg::OnFSCommandShockwaveflash1(LPCTSTR
LPCTSTR args)
{
CString aff,ch;
aff = "afficher";
ch="change";
if (command==aff)
{
MessageBox(args);
}
if (command==bt)
{
m_total=args;
UpdateData(FALSE);
}
}
185
command,
TD ActionScript
Flash envoie les variables command et args au programme. Si command est afficher,
une boite de dialogue apparaît avec la version du Flash Player (getVersion()). Si la
commande est change, la variable m_total récupère la variable args envoyée par
Flash.
Visual C++
186
Eric Schrafstetter
13 Liens
13.1 Forums Flash
–
–
–
http://flashmove.com/board/index.php
http://board.flashkit.com/board/forumdisplay.php ?forumid=30
http://www.were-here.com/forums/forumdisplay.php ?forumid=24
13.2 Flash
13.2.1 Sites Internet
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
http://www.macromedia.com
En français : http://www.flash-france.com
Livres : http://www.amazon.fr
http://www.flashkit.com
http://flash5actionscript.com/
http://www.virtual-fx.net/
http://www.flashxpress.net/
Débutants : http://www.yazo.net/sommaire.htm
Tutorial : http://www.flashkit.com/tutorials/Actionscripting/
Tutorial : http://www.flashguru.co.uk
Tutorial : http://flashhouse.online.fr/cours.php3
.fla : http://flash.onego.ru/
http://aideflash5.multimania.com
Jeux http://www.adomania.net/flash/flashplay.htm
3D : http://www.flash-3d.com/
3D : http://www.mode4.net/
Vectoriel hyperréaliste : http://www.vectorkid.com/
13.2.2 Livres
–
–
–
–
–
–
–
–
–
–
–
–
187
Flash 5. Programmation d’animations de David Tardiveau.
Flash 5 Magic avec ActionScript (avec CD-Rom) de J. Scott Hamlin, David J.
Emberton
Flash 5 ActionScript : Le guide du programmeur de Nicolas Sancy
Conception Web avec Flash de Curtis
Le Grand Livre : Macromédia Flash 5 de Michael Gradias
Actionscript la référence de Moock.
ActionScript de Colin Moock. Broché (mai 2001)
Flash ActionScript : Atelier créatif de Bill Sanders.
Actionscript - optimisez vos sites flash de Bhangal.
ActionScript : Programmer sous Flash 5 de Christophe Aubry.
Flash 5 actionscript pour les jeux
12. Solutions ActionScript de Jean Nashe.
TD ActionScript
13.3 PHP
–
–
–
Documentation : http://dev.nexen.net/docs/php/chargement.html
Scripts : http://www.phpinfo.net/
Scripts : http://phpscripts.free.fr/
13.4 Ming
–
–
–
Liens
Fonctions : http://www.dynamic-webpages.de/php/ref.ming.php
Forum : http://f256.com/forum/index.asp ?db=ming
Java : http://www.anotherbigidea.com/javaswf/javaswf.html
188
Eric Schrafstetter
Index
3D, 25, 30, 32, 37, 42, 44, 45, 46, 47, 48,
50, 97, 114, 162, 165, 173, 179
AVI, 19, 20, 22, 26, 112, 113
bibliothèque, 6, 8, 26, 46, 83, 84, 92, 114,
120, 121, 122, 123, 124, 126, 131, 143
collision, 71, 72, 76
Cookies, 11, 80
fenêtre, 4, 9, 11, 17, 21, 24, 35, 42, 45, 51,
56, 77, 83, 84, 97, 100, 111, 117, 120,
121, 133, 160, 161, 168, 173, 174
Flash 4, 26, 50, 51, 53, 54, 160, 168
flasm, 50, 51, 56, 57
fscommand, 4, 5, 10, 11, 17, 116, 177
FSCommand, 11, 17, 57, 84, 85, 86, 177
getBytesLoaded, 5, 6, 84
IrfanView, 24, 49, 50, 112
javascript, 4, 11, 12, 13, 57, 58, 80, 81, 82,
99, 100, 133
join, 13, 16, 57, 58, 150, 151
loadMovie, 7, 113, 170
189
loadMovieNum, 7
MIDI, 10, 11, 17
onClipEvent, 3, 5, 6, 14, 15, 36, 38, 39, 77,
78, 88, 94, 97, 98, 115, 118, 119
Poser 3, 24, 25, 45, 47, 48, 112
PowerPoint, 9, 10, 80, 82, 90, 91, 114,
116, 117
QuickTime, 18, 19, 28, 29, 96
ras2vec, 24, 49, 50, 111
setRGB, 8, 15, 95
split, 13, 16, 57, 58, 94, 150, 151
startDrag, 3, 9, 14, 15, 35, 73, 76, 78, 79,
97, 118, 119, 121, 132, 168
streaming, 27, 28, 29
vidéo, 17, 18, 19, 20, 21, 25, 26, 27, 29,
112
VirtualDub, 19, 24, 29, 112, 113
Winamp, 11
WinAmp Voir Winamp Voir Winamp
TD ActionScript

Flash 5

Transcription

Documents pareils

PDF Formation Flash initiation - créer des animations Lille Nord 59

questions / reponses du credit agricole sud rhone alpes

FLASH : créer des animations Web / Intranet

Comment vÃ©rifier mon code de licence?

animation avec flash

Laura Breuil

Fiche technique DiMAGE Z5

Alban Sapin

Télécharger Et Installer Dreamweaver 8 / Flash 8

FICHE TECHNIQUE DiMAGE A200