Téléchargez - Sciences.ch

Transcription

Flash 5 - ActionScript
Travaux Dirigés
Version 1.4
17 janvier 2002
Eric Schrafstetter
Table des matières
1 Outils de base
1.1 Initialisation de variables . . . . . . .
1.2 Position souris . . . . . . . . . . . . .
1.3 Fenêtres et navigateurs . . . . . . . . .
1.3.1 Fermer une fenêtre . . . . . . .
1.3.2 Plein écran . . . . . . . . . . .
1.4 Lecteur autonome . . . . . . . . . . .
1.5 Chargement . . . . . . . . . . . . . . .
1.5.1 Version élémentaire . . . . . . .
1.5.2 Version avec % . . . . . . . . .
1.5.3 Barre de chargement . . . . . .
1.5.4 Chargement d’une bibliothèque
1.5.5 Version 2 . . . . . . . . . . . .
1.6 Couleurs . . . . . . . . . . . . . . . . .
1.6.1 Définir . . . . . . . . . . . . . .
1.6.2 Aléatoires . . . . . . . . . . . .
1.6.3 Remplissages transparents . . .
1.6.4 Effet de torche . . . . . . . . .
1.6.5 Jeux de couleurs . . . . . . . .
1.7 Jouer un fichier MIDI . . . . . . . . .
1.8 Cookies . . . . . . . . . . . . . . . . .
1.9 Boutons . . . . . . . . . . . . . . . . .
1.9.1 Bouton On/Off/Clignotant . .
1.9.2 Bouton transparent . . . . . .
1.9.3 Déplacement d’objets . . . . .
1.10 Information . . . . . . . . . . . . . . .
1.10.1 Scroll sur texte . . . . . . . . .
2 La vidéo
2.1 Vidéo dans une fenêtre séparée .
2.1.1 Paramètres généraux pour
2.1.2 Windows Media Player .
2.1.3 QuickTime . . . . . . . .
2.1.4 Real Video . . . . . . . .
1
. .
les
. .
. .
. .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
6
6
7
7
7
7
8
8
8
9
9
10
11
12
12
12
12
12
13
14
16
18
18
19
20
21
21
. . . .
vidéos
. . . .
. . . .
. . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
22
22
23
23
23
24
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Eric Schrafstetter
2.2
2.3
2.4
2.5
2.6
2.7
2.8
TABLE DES MATIÈRES
QuickTime dans Flash . . . . . . . . .
Le cas des fichiers AVI . . . . . . . . .
MPG et autres effets spéciaux . . . . .
Poser 4 . . . . . . . . . . . . . . . . .
Real Player . . . . . . . . . . . . . . .
2.6.1 .smil . . . . . . . . . . . . . . .
2.6.2 RealEncoder/RealProducer G2
2.6.3 Un exemple . . . . . . . . . . .
2.6.4 Créer un vrai .rm . . . . . . . .
Streaming . . . . . . . . . . . . . . . .
2.7.1 Avec Real Player . . . . . . . .
2.7.2 Le streaming sous Flash . . . .
Questions/Réponses . . . . . . . . . .
2.8.1 Son QuickTime . . . . . . . . .
2.8.2 Convertir un .swf en .avi . . . .
2.8.3 Une suite ? . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
24
25
25
26
27
27
27
27
28
29
29
30
30
30
31
31
3 Maths
3.1 Nombres aléatoires . . . . . . . .
3.1.1 Mélanges . . . . . . . . .
3.2 3D . . . . . . . . . . . . . . . . .
3.2.1 Matrices de rotation . . .
3.2.2 Boules dans l’espace . . .
3.3 Déformation d’un triangle (Partie
3.4 Anaglyphes géométriques 3D . .
3.5 Perspectives frontales et obliques
3.5.1 Méthode pratique . . . .
3.5.2 Les formules... . . . . . .
3.5.3 Manipulation d’un cube .
. .
. .
. .
. .
. .
1)
. .
. .
. .
. .
. .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
33
33
33
33
33
34
36
41
44
44
44
47
4 Physique
4.1 Collision élastique de 2 boules .
4.1.1 Rappels . . . . . . . . .
4.1.2 La théorie . . . . . . . .
4.1.3 Application . . . . . . .
4.2 Vitesse d’un objet avec freinage
4.3 Fil élastique . . . . . . . . . . .
4.4 Tableau blanc . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
52
52
52
52
55
58
60
61
5 Visualisation
5.1 Powerpoint . . . . . . . . . . . .
5.2 Sons, Cookies et Diaporamas . .
5.2.1 Partie HTML - javascript
5.2.2 Partie Images . . . . . . .
5.2.3 Partie Flash . . . . . . . .
5.3 Visionneuse . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
63
63
63
64
66
67
68
Travaux dirigés d’ActionScript
2
Eric Schrafstetter
5.4
. .
. .
. .
. .
. .
. .
2)
. .
. .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
71
71
71
74
77
79
80
80
82
6 Outils de conversions
6.1 Bitmap vers Vectoriel . . . . . . .
6.2 Images vers swf . . . . . . . . . . .
6.3 Diaporama en swf . . . . . . . . .
6.3.1 Introduction . . . . . . . .
6.3.2 Quelques remarques . . . .
6.3.3 Les indispensables ! . . . . .
6.3.4 Exemple d’utilisation . . . .
6.4 Films vers swf . . . . . . . . . . . .
6.5 Microsoft Office . . . . . . . . . . .
6.5.1 La barre de dessin . . . . .
6.5.2 Powerpoint vers Flash . . .
6.5.3 Flash vers PowerPoint . . .
6.5.4 Powerpoint-Flash ou PDF ?
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
83
83
85
85
85
85
86
86
86
86
86
87
89
89
7 SmartClips
7.1 Variateur . . . . . . .
7.2 Fenêtres volantes . . .
7.3 Bibliothèque commune
7.4 SmartClip Calendrier .
5.5
5.6
5.7
5.8
Créer un QCM . . . . . . . . .
5.4.1 Les questions . . . . . .
5.4.2 Le QCM sous Flash . .
Camembert . . . . . . . . . . .
Panorama 360 . . . . . . . . . .
Rotation autour d’un objet . .
360◦ autour d’un objet (version
5.8.1 Changement de curseur
5.8.2 L’objet . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
93
93
95
96
97
8 Jeux
8.1 Le morpion . . . . . . . . . . .
8.2 Jeu de l’Hexagone . . . . . . .
8.2.1 Les problèmes . . . . . .
8.2.2 Le clip pion . . . . . . .
8.2.3 Le clip plateau . . . . .
8.2.4 Scène principale . . . .
8.3 Le tangram . . . . . . . . . . .
8.4 Votre Tetris . . . . . . . . . . .
8.4.1 La brique de base . . . .
8.4.2 Les pièces . . . . . . . .
8.4.3 Le plateau . . . . . . . .
8.4.4 La pièce suivante . . . .
8.4.5 Le bouton commande .
8.4.6 Suppression d’une ligne
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
101
101
104
104
106
107
108
109
111
111
112
112
113
113
116
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3
Eric Schrafstetter
8.5
8.6
8.7
8.8
8.4.7 Le tempo . . . . . . . . . . . . . . . .
8.4.8 Niveaux et score . . . . . . . . . . . .
8.4.9 Compléments . . . . . . . . . . . . . .
8.4.10 Le programme complet . . . . . . . .
Les machines de Turing . . . . . . . . . . . .
8.5.1 Alan Turing . . . . . . . . . . . . . . .
8.5.2 Description de la machine . . . . . . .
8.5.3 Exemple de machine . . . . . . . . . .
8.5.4 Simulation sous Flash . . . . . . . . .
8.5.5 Création de programmes . . . . . . . .
8.5.6 Chargements . . . . . . . . . . . . . .
8.5.7 Conversions . . . . . . . . . . . . . . .
8.5.8 La machine . . . . . . . . . . . . . . .
8.5.9 Version AUTO . . . . . . . . . . . . .
8.5.10 Le fichier Flash fourni . . . . . . . . .
8.5.11 Les fichiers txt . . . . . . . . . . . . .
Jeux de plateforme . . . . . . . . . . . . . . .
8.6.1 Danger-Sécurité . . . . . . . . . . . . .
8.6.2 L’ennemi . . . . . . . . . . . . . . . .
8.6.3 Actions simultanées : Touche - Souris
8.6.4 Actions simultanées : Touche - Touche
Le Top10 (version MySQL) . . . . . . . . . .
8.7.1 Affichage du Top10 . . . . . . . . . . .
8.7.2 Proposer un score . . . . . . . . . . .
Sécurité . . . . . . . . . . . . . . . . . . . . .
8.8.1 Jouer Online . . . . . . . . . . . . . .
8.8.2 Mot de passe . . . . . . . . . . . . . .
8.8.3 ActionScript Viewer . . . . . . . . . .
9 PHP
9.1 Ming . . . . . . . . . . . . . . .
9.1.1 Tester un swf . . . . . .
9.1.2 Notions de base . . . . .
9.1.3 Dessiner . . . . . . . . .
9.1.4 Camembert 3D online .
9.1.5 Déplacement . . . . . .
9.1.6 Texte . . . . . . . . . .
9.1.7 Morphing . . . . . . . .
9.1.8 Loadmovie . . . . . . .
9.2 Echange de variables . . . . . .
9.2.1 Exemple du poids idéal
9.2.2 Compteur de visiteurs .
4
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
117
118
118
119
123
123
124
124
125
125
126
126
128
129
130
131
131
131
132
134
135
136
136
137
138
138
140
140
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
141
141
142
142
143
148
150
152
153
154
156
156
157
Eric Schrafstetter
10 C++
10.1 Introduction . . . . . . . . . . . . . .
10.2 C++ vers Flash . . . . . . . . . . . .
10.2.1 Création de l’animation Flash
10.2.2 Création de l’interface C++ .
10.2.3 Insérer l’animation . . . . . .
10.2.4 Le programme . . . . . . . .
10.2.5 SetVariable . . . . . . . . . .
10.3 Flash vers C++ . . . . . . . . . . . .
10.3.1 Création de l’animation Flash
10.3.2 Création du programme C++
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
158
158
158
158
159
159
160
162
162
162
163
11 Liens
11.1 Forums Flash . . . .
11.2 Flash . . . . . . . . .
11.2.1 Sites Internet
11.2.2 Livres . . . .
11.3 PHP . . . . . . . . .
11.4 Ming . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
164
164
164
164
165
165
165
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
5
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Chapitre 1
Outils de base
Introduction à ce document
Ces quelques pages sont, à l’origine, un aide-mémoire personnel de trucs et
astuces découverts sur le net ou par moi-même. La présentation des animations
se fait sous forme de travaux dirigés, c’est-à-dire que vous ne pourrez voir le
résultat que si vous faites les manipulations vous-même ! Téléchargez les .fla
sur le site de ce document et n’hésitez pas à m’encourager ou à me donner des
idées en envoyant un mail à [email protected].
Je suppose que le lecteur a d’assez bonnes notions d’ActionScript et de
mathématiques, dans le cas contraire certaines explications vous paraı̂tront certainement obscures. . . Ce document est une version 1.4 revue, corrigée et augmentée, n’hésitez pas à me communiquer vos remarques et suggestions pour une
version 1.5 !
A titre indicatif, ce document a été créé en LATEXet exporté au format PDF
grâce à dvipdfm.
1.1
Initialisation de variables
Pour n’initialiser des variables qu’une seule fois dans une image clé, créez un
clip vide et placez-en une occurrence sur la scène principale avec l’action :
onClipEvent (load) {
..initialisation des variables ...
}
onClipEvent (enterFrame) {
..suite du programme ...
}
6
Eric Schrafstetter
1.2
CHAPITRE 1. OUTILS DE BASE
Position souris
Sur la scè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
– Créez un clip vide (CTRL+F8 et nom = drag) que vous placerez n’importe
où sur la scène.
– Associez l’action suivante au clip drag :
startDrag ("");
}
_root.x=this._x;
_root.y=this._y;
}
1.3
Fenêtres et navigateurs
1.3.1
Fermer une fenêtre
Pour quitter un programme Flash visualisé dans une fenêtre en utilisant un
bouton, vous pouvez :
1. Créez l’apparence du bouton qui servira à quitter le programme en fermant
la fenêtre.
2. Placez une occurrence de ce bouton sur la scène et lui associer l’action :
on (press) {
getURL ("Javascript: self.close()");
}
La commande fscommand ("quit"); ferme la projection.
1.3.2
Plein écran
Pour afficher votre animation Flash en plein écran :
1. Dans les paramètres de publication HTML, choisir 100% pour la hauteur
et la largeur.
2. Créez la page HTML ci-dessous, où essai.html est le nom du fichier
HTML publié par Flash.
<HTML>
<head>
<script>
<!-function ouvre(chemin){
7
Eric Schrafstetter
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>
</BODY>
</HTML>
Pensez à ajouter un bouton dans votre animation permettant de fermer
l’animation ! (voir paragraphe précédent).
1.4
Lecteur autonome
Pour masquer certaines options du bouton droit lorsqu’un programme Flash
est lancé en mode autonome, faire :
fscommand ("fullscreen", "true");
fscommand ("allowscale", "false");
fscommand ("showmenu", "false");
– La première ligne permet de mettre l’affichage en plein écran
– La seconde ligne assure que l’échelle de l’animation ne sera pas modifiée
– La dernière ligne efface le menu contextuel (sauf le ”A propos de Flash
Player”)
1.5
1.5.1
Chargement
Version élémentaire
Avant de lancer le programme proprement dit, vous voudriez être sûr que
tous les éléments nécessaires ont bien été chargés. Imaginons par exemple que
pour lancer la scène go, l’animation doit avoir chargé les données jusqu’à la
scène fin image 20. On pourra utiliser la méthode suivante :
1. Créez un petit clip qui permettra de faire patienter l’internaute
2. Sur la scène principale, mettre le clip à l’image clé 1
3. A l’image 5, insérez une image clé avec l’action :
ifFrameLoaded ("fin",20) {
gotoAndPlay ("go",1);
}
8
Eric Schrafstetter
4. A l’image 6, insérez une image clé avec l’action :
gotoAndPlay (2);
1.5.2
Version avec %
1. Créez un clip nommé charge et placez à l’image 1 une zone de texte
dynamique ayant pour nom chargement
2. Mettre une occurrence de ce clip à l’image 1 de la scène principale (ou
sur une scène spécialement réservé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);
}
}
Lorsque le fichier .swf est chargé, l’animation continue à l’image 2 de la
scène principale. Dans le cas d’une scène spécialement réservée au chargement, ne rien mettre après l’image 1 de sorte que l’animation passera
directement à la scène 2.
1.5.3
Barre de chargement
1. Créez un clip nommé barre avec un rectangle allongé sur l’image 1Utilisez
la barre d’outils info pour placer le coin haut gauche du rectangle à la
position X=0 et Y=0
2. Placez une occurrence de ce clip sur la scène principale et lui donner le
nom ligne
3. Associez l’action suivante à cette occurrence :
9
Eric Schrafstetter
taille = _root.getBytesTotal();
}
chargement = Math.floor(_root.getBytesLoaded()/taille*100);
this._xscale = chargement;
if (chargement == 100) {
}
}
4. Placez une action stop(); à la première image de la scène principale.
5. Placez une grosse image (plusieurs Ko) à l’image clé 2 de la scène principale
et une action stop();
6. Lancez l’animation. L’image devrait apparaı̂tre rapidement. Faites alors
Déboguer - 14,4 puis Affichage- Afficher le train de lecture. Vous devriez
maintenant voir la barre grandir.
1.5.4
Chargement d’une bibliothèque
Il ne s’agit pas de charger une bibliothèque pendant la création d’une animation (Fichier-Ouvrir comme une bibliothèque) mais bien d’un téléchargement
de symboles à la volée au cours de la lecture d’une animation. Par exemple, on
peut imaginer un joueur ayant la possibilité de charger en direct les pièces d’un
puzzle choisi à l’écran, ceci afin d’éviter d’avoir un fichier .swf trop volumineux
et de pouvoir actualiser la base de données.
1. Ouvrez une nouvelle animation et enregistrez-la sous le nom de piece.fla
2. Créez un clip représentant par exemple un rectangle
3. Ouvrez la bibliothè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 précé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 scène
principale) pour créer piece.swf
6. Ouvrez une nouvelle animation et enregistrez-la sous plateau.fla
7. Créez un clip vide et mettre une occurrence nommée jeu de ce clip sur la
scène principale
8. Créez un bouton aillant ayant par exemple la forme d’une boule (peu
importe)
9. Placez une occurrence de ce bouton sur la scène principale, écrire 1 dessus
et associez-lui l’action :
on (release) {
jeu.loadMovie("pieces.swf");
}
10
Eric Schrafstetter
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, é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 récupère les objets p1 et p2 de l’animation
pieces.swf. On crée ensuite des occurrences q1 et q2 que l’on place sur
la scène.
Utilisez la fonction removeMovieClip (jeu.q1); pour décharger l’occurrence q1.
1.5.5
Version 2
Au lieu de charger le .swf à l’intérieur d’un clip (voir exemple précédent),
vous pouvez le charger à un certain niveau par la commande
loadMovieNum("nom.swf",numero);.
1. Reprendre l’animation pieces.swf précédente.
2. Ouvrir une nouvelle animation et mettre un stop(); à l’instant 1.
3. Créez un bouton quelconque et placez une occurrence sur la scè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 à l’image clé 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;
}
}
11
Eric Schrafstetter
_level1 accède à l’animation pieces.swf et .attachMovie pour récupérer
les éléments de sa bibliothèque.
1.6
1.6.1
Couleurs
Définir
Considé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.6.2
Aléatoires
Voici une méthode pour attribuer une couleur rgb (Red - Green - Blue)
aléatoire à 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.6.3
Remplissages transparents
Pour les personnes n’ayant pas lu le manuel de base ”Utilisation de Flash”
jusqu’à la page 160, voici un moyen de créer un dégradé (linéaire ou radial)
d’une couleur quelconque vers rien (alpha=0). Ceci peut créer des effets très
intéressants en plaçant un tel masque sur une image par exemple.
1. Cliquez sur le pot de peinture
2. Faites Fenêtre - Panneaux - Remplir et Mixeur
3. Dans le panneau Remplir, choisir dégradé linéaire et cliquez sur la seconde
couleur (celle qui doit disparaı̂tre)
4. Dans le mixeur, mettre alpha à 0 !
1.6.4
Effet de torche
1. Créez un disque et remplissez-le avec un dégradé radial (jaune au milieu et
rouge au bord). Transformez ce disque en clip et en mettre une occurrence
sur la scène principale avec pour nom torche
2. Insérez un calque nommé Mask au dessus du calque de la torche.
3. Dessinez des rectangles, ovales à l’image 1 de cette couche. Si vous écrivez
également du texte, séparez les lettres ( CTRL+B)
4. Faites Bouton droit sur le calque Mask et choisissez Masque
12
Eric Schrafstetter
5. Ajoutez l’action suivante à l’image 1 du calque Mask :
startDrag (_root.torche, true);
stop();
6. Compilez, lancez et déplacez la souris...
1.6.5
Jeux de couleurs
Nécessite le logiciel Publisher ou PowerPoint . Si vous n’êtes pas graphiste
ou avez peur de ne pas choisir des couleurs harmonieuses entre elles, voici une
solution pour récupérer les jeux de Publisher ou PowerPoint. Avez-vous lu les
pages 160 à 164 du manuel ’Utilisation de Flash’ ? Pour ceux qui ont une version
d’évaluation de Flash, récupérez les manuels de réfé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 carrés et choisissez un jeu de couleur (Format - Jeux de couleurs)
3. Cliquez maintenant sur le premier carré puis sur le pot de peinture (ou
Format - Couleur de remplissage) et choisissez la première couleur de la
série de 6 proposées
4. Recommencez avec le second carré et la seconde couleur, etc.
5. Vous avez maintenant 5 carrés de couleurs différentes
6. Sélectionnez les 5 carrés en les entourant avec la souris puis Copier
7. Lancez Flash et Coller
8. Affichez le Nuancier par Fenêtre - Panneau - Nuancier
9. Nous allons effacer toutes les couleurs du nuancier (pas de panique !) et
mettre nos nouvelles couleurs. Remarquez la petite flèche I en haut à
droite de la fenêtre du Nuancier.
10. Cliquez dessus et choisir ’Effacer les couleurs’ ! Oups ! Je vous sens pâlir !
11. Cliquez maintenant sur l’onglet Mixeur puis sur le rectangle en couleur.
Utilisez la pipette pour récupérer la couleur du premier carré importé de
Publisher.
12. Cliquez sur la flèche I en haut à droite de la fenê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.
13
Eric Schrafstetter
16. Recommencez depuis le début avec les différents jeux qui vous intéressent.
17. Enfin, faites Nuancier - I - Charger les couleurs par défaut pour retrouver
toutes vos couleurs...
18. Si vous voulez charger un jeu de couleurs, faites : Nuancier - I - Remplacer
des couleurs.
19. Pour ajouter des dégradés, afficher la fenêtre Remplir par Fenêtre - Panneau - Remplir
20. Créez un dégradé linéraire ou radial puis cliquez sur la petite disquette en
bas à droite.
Avec PowerPoint
1. Lancez PowerPoint, choisir une présentation vierge et diapo blanche
2. Avec la barre de dessin, dessinez 6 carrés sur la diapo
3. Faites Bouton droit sur la diapo et ’Appliquer un modèle...’ (ou Format Appliquer un modèle) et choisir un modèle quelconque
4. Cliquez sur le premier carré puis sur le pot de peinture et choisir parmi
les 6 couleurs différentes de noir ou blanc
5. Recommencez avec les 5 autres carrés et les 5 autres couleurs
6. Sélectionnez les 6 carrés et copiez-les
7. Lancez Flash. Si vous utilisez PowerPoint 2000 faites Edition - Collage
Spécial et choisissez Image (Métafichier) sinon faites simplement Coller.
8. Suivre maintenant la procédure comme pour Publisher...
1.7
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 à l’écran).
1. Le principe est le suivant : Cré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>
14
Eric Schrafstetter
<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. Téléchargez pour l’exercice un fichier MIDI quelconque et enregistrez-le
dans le même dossier que index et blank (musicrobot.com).
5. Lancez Flash et enregistrez sous le nom son.fla
6. Créez un bouton quelconque et placez 2 occurrences de ce dernier sur la
scène principale.
7. Au premier bouton, ajouter l’action :
on (release) {
fscommand ("joue", "nom.mid");
}
où nom.mid est le nom du fichier à jouer.
8. Au second bouton, ajouter l’action :
on (release) {
fscommand ("stop");
}
9. Ajouter une action stop(); à l’image clé 1 de la scène principale.
10. Aller dans les paramètres de publication puis, dans l’onglet HTML, choisir
Flash avec FSCommand.
11. Publiez l’animation et ouvrez le fichier son.html créé 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") {
15
Eric Schrafstetter
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 fenêtre lecteur est réécrite
grâce à Javascript, en distinguant le type de navigateur. L’action stop
efface la fenêtre lecteur et le son s’arrête. Attention, si vous compilez à
nouveau votre animation Flash, le programme ci-dessus sera écrasé ! Enfin,
une dernière remarque, si vous voulez convertir un fichier MIDI en MP3,
vous pouvez utilisez Wingroove (shareware).
1.8
Cookies
Nous allons créer une animation qui demande un nom puis l’enregistre dans
un cookie lorsque l’on clique sur un bouton.
1. Créez une animation vide et enregistrez-la sous le nom cookie.fla
2. Créez une zone de texte de saisie et nommez-là nom.
3. Placez l’action suivante à l’image 1 :
getURL ("javascript:getCookie();");
4. Créez un bouton quelconque et placez-le à côté de la zone de texte. Donnez
l’action suivante au bouton :
on (release) {
getURL("javascript:setCookie();");
}
Les fonctions getCookie() et setCookie() étant définies dans la page
HTML (voir ci-dessous).
5. Publiez votre animation et éditez le fichier source. Placez les fonctions
ci-dessous dans la tête du document HTML.
<html>
<head>
<title>Les cookies avec Flash</title>
</head>
<SCRIPT LANGUAGE=JavaScript>
<!-function setCookie(){
16
Eric Schrafstetter
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>
6. Dans le corps du document, donnez un nom à votre animation grâce à la
commande id. Par exemple, ici, nous lui donnons le nom animation.
<body>
17
Eric Schrafstetter
<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 réapparaı̂t.
Pour voir les cookies d’un document, tapez dans la barre d’adresse :
javascript:alert(document.cookie.split(’;’).join(’\n’))
1.9
1.9.1
Boutons
Bouton On/Off/Clignotant
1. Créez un clip avec 3 images clé nommé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. Insérez une image clé vide à l’instant 10 (ou moins pour un clignotement
plus rapide)
5. Insérez une nouvelle couche nommée Action et placez à l’image 1 et 2
l’action stop();
6. Insérez une image clé en 10 avec l’action
gotoAndPlay(3)
18
Eric Schrafstetter
Sur la scène principale, placez une occurrence de ce clip et lui donner le nom
boutonPour voir par exemple le bouton sur on, utilisez l’action :
_root.bouton.gotoAndPlay("on");
1.9.2
Bouton transparent
Lorsque vous voulez rendre une partie de l’écran sensible à l’action de la
souris, vous placez un bouton transparent dont la zone du cliqué couvre cette
partie.
– Créez un symbole bouton nommé bouton
– Ne rien mettre dans les images Haut, Dessus et Abaissé
– Dessinez une forme pour l’image Cliqué
– Revenez sur la scène principale et placez une occurrence du bouton.
– Lancez l’animation. L’écran reste vide mais une zone est devenue sensible
au passage de la souris.
Astuce Pour éviter de voir apparaı̂tre la main au dessus de la zone sensible,
créez un clip et placez le bouton dedans !
1. Créez un bouton bouton avec un rectangle sur haut et Cliqué
2. Créez un clip et mettre une occurrence du bouton bouton à la premiè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 scène principale et lui affecter l’action :
startDrag (this, true);
}
Ainsi, lorsque l’animation démarre, le clip devient glissable et suit les
mouvements de la souris. La variable press permet de savoir si le bouton
est pressé (1) ou non (0).
5. Sur la scène principale, dessinez une zone de texte dynamique et affectezlui le nom de variable x
6. Créez un nouveau clip vide nommé controles. Placez une occurrence sur
la scène principale avec l’action :
if (_root.press==1) {
_root.x++;
19
Eric Schrafstetter
}
}
7. Lancez l’animation et pressez le bouton gauche de la souris, le compteur
augmente. Relâchez, il s’arrête.
1.9.3
Déplacement d’objets
– Créez un rectangle et transformez-le en clip ayant pour nom rect.
– Placez une occurrence de ce clip sur la scè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
méthode Color.setRGB spé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 déplacer —startDrag(””)—
et celui-ci est placé au premier plan —this.swapDepths(10)—Dès que vous
relâchez la souris, le rectangle se pose —stopDrag—.
20
Eric Schrafstetter
1.10
Information
1.10.1
Scroll sur texte
Voici un premier moyen de créer un scroll sur un texte :
1. Créez un bouton bouton avec une petite flèche dirigée vers le haut comme
apparence
2. Cré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. Insérez une occurrence de bouton (qui servira à faire défiler le texte vers
le haut)
4. Insérez une seconde occurrence de bouton en utilisant l’outil de transformation pour faire pivoter l’image de 180◦ et avoir la flèche dirigée vers le
bas.
5. Créez une couche action sur la scène principale et mettre en 1 une image
clé avec l’action :
TexteAide = "BIENVENUE...#MERCI DE ...#SUITE DE L\’AIDE...";
Texte2 = new Array();
Texte2=String(TexteAide).split("#");
TexteEcran=Texte2.join(chr(13));
stop();
Vous écrivez votre texte d’aide dans la variable TexteAide avec le symbole
# lorsque vous voulez retourner à la ligne. La première fonction convertit
le texte en tableau et la seconde fonction joint tous les éléments avec le
séparateur chr(13) qui est le code du retour chariot.
6. Associez au bouton à la flèche vers le haut l’action :
on (press) {
if (TexteEcran.scroll > 1) {
TexteEcran.scroll--;
}
}
7. Pour le bouton à la flèche vers le bas :
on (press) {
if (TexteEcran.scroll < TexteEcran.maxscroll) {
TexteEcran.scroll++;
}
}
21
Chapitre 2
La vidéo
2.1
Vidéo dans une fenêtre séparée
Voici comment lancer des vidéos à partir d’une animation Flash :
1. Téléchargez une vidéo .avi (par exemple sur Fundelire.com)
2. Comme pour le paragraphe sur les fichiers MIDI, créez une page nommée
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. Créez un bouton quelconque et associez-lui l’action :
on (release) {
fscommand ("joue", "video.avi");
}
où video.avi est le nom de votre fichier vidéo.
6. Ajoutez l’action stop(); à l’image clé 1 de la scène principale.
7. Choisir paramètres de publication HTML avec FSCommand
22
Eric Schrafstetter
CHAPITRE 2. LA VIDÉO
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
Paramètres généraux pour les vidéos
Commande
ALIGN
BORDER
WIDTH
HEIGHT
SRC
LOOP
2.1.2
Description
Aligne la console (RIGHT, LEFT, TOP, BOTTOM)
Largeur de la bordure (en pixels)
Largeur de la vidéo (en pixels)
Hauteur de la vidéo (en pixels)
Adresse de la vidéo
Nombre de fois où la vidéo est jouée (-1 = infini)
Windows Media Player
Commandes propres à Windows Media Player (true par défaut)
AUTOSTART, AUTOLOAD,CONTROLS
2.1.3
QuickTime
Commandes propres à QuickTime (true par défaut) :
AUTOPLAY, PLAYEVERYFRAME (joue vidéo au fur et à mesure)
CONTROLLER, HREF , TARGET
23
Eric Schrafstetter
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 vidéo l’autre pour le
contrô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 créer des effets spéciaux à 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 là ”que” pour créer
des effets et/ou ajouter de l’interactivité.
1. Téléchargez ou créez une animation QuickTime .mov.
2. Lancez Flash et enregistrez sous le nom effets.fla
3. Fichier - Importer puis choisissez le fichier .mov
4. Etendre la première image clé jusqu’à la fin de l’animation QuickTime par
F5
5. Ajoutez une nouvelle couche au dessus de celle réservée à la vidéo
6. Créez une petite animation, utilisez des effets alpha (pour voir la vidéo
au travers)
7. Dans les paramètres de publication, décochez Flash (.swf) et cochez QuickTime (.mov)
24
Eric Schrafstetter
8. Dans l’onglet QuickTime, choisir : Alpha = Transparent Alpha ; Calque
= Au dessus ; Controleur = Standard et Fichier = Aplatir
9. Publiez et ouvrez l’explorateur windows pour lancer effets.mov.
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 faites
Fichier - Importer
2. Choisir Type = tous, sélectionnez votre animation .avi puis importez
3. Etendre par F5 jusqu’au nombre de frames du clip (les images apparaissent
au fur et à mesure)
4. Réduire les dimensions de votre animation principale à celle de la vidéo
(ce n’est pas obligatoire).
5. Ajoutez éventuellement une couche pour les effets spéciaux en Flash (voir
QuickTime dans Flash)
6. Dans les paramètres de publication, décochez Flash (.swf) et cochez QuickTime (.mov)
7. Choisir éventuellement quelques options dans l’onglet QuickTime (par
exemple Contrô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 créé !
Remarque : C’est donc un moyen très simple de convertir un .avi en .mov !
2.4
MPG et autres effets spéciaux
Voici quelques outils pour créer des effets spéciaux ou convertir des vidéos :
1. Pour convertir des fichiers .mpg ou .avi en .avi avec des effets spé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 vidéo avec VirtualDub
(b) Menu Video-Filter et Add pour choisir le filtre threshold. Quant au
paramètre, choisissez par exemple 50% (à ajuster ensuite)
(c) Faites avancer le curseur pour visualiser les images et modifiez éventuel/lement le paramètre
(d) Choisir Video - Full Processing Mode
(e) File - Save AVI et enregistrez la video filtrée sous un nouveau nom
25
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 télécharger le logiciel gratuit AVIDecomposer qui permet de
décomposer une vidéo AVI en une multitude d’images .jpg plus un fichier
.wav pour le son ! Lancez ensuite Flash et importez la première imageFlash vous demande alors si vous désirez importer toute la suite (il voit
tout le bougre !), dı̂tes oui. C’est la technique que j’ai utilisée pour créer
l’animation de la femme sur le site de ce documentLes images JPG ont été
converties une à une en Bitmap par l’outil Modification - Tracer Bitmap.
2.5
Poser 4
Il existe un plug-in qui permet de convertir une animation Poser en swf (que
je ne connais pas). Voici un autre moyen de conversion (Tous les outils utilisés
sont gratuits (sauf Poser ! !)) :
1. Téléchargez l’excellent logiciel de visualisation www.irfanview.com.
2. Téléchargez et installez ras2vec (voir paragraphe sur le passage du bitmap
au vectoriel)
3. Installez AVIDecomposer
4. Créez une animation avec Poser
5. Choisir un affichage Silhouette CTRL+1, mettre fond du décors en blanc et
personnage en noir
6. Exportez au format .avi par Animation - Make Movie (Désolez, je n’ai
qu’une version d’évaluation en Anglais) avec Quality = Current Display
Settings. Faites OK puis choisir Trames non compressées.
7. Lancez AVIDecomposer puis File Name - Browse et choisir le fichier AVI
créé. Décomposez la vidéo.
8. Lancez IrfanView et File-Batch Conversion (ou tapez la lettre B)
9. Sélectionnez tous vos fichiers puis Add et Work As - Batch Conversion
10. Output Format = BMP et Advanced Options - Change Color Depth = 2
colors (Black/White)
11. Choisir Use this Directory as Output puis Start pour démarrer la conversion des jpg en bmp noirs et blancs
12. Ouvrez une fenêtre DOS dans le répertoire des fichiers BMP et tapez la
commande :
ras2vec -d -m *.bmp
Vous avez maintenant des fichiers .emf
13. Lancez Flash et importez la première image image1.emf, Flash vous propose d’importer les autres. Répondre oui.
14. Eventuellement séparez les dessins par CTRL+B et optimisez les lignes par
CTRL+MAJ+ALT+C
26
Eric Schrafstetter
2.6
Real Player
Nous utilisons RealPlayer 8 Basic, freeware téléchargeable (5Mo) sur real.com
ou disponible sur beaucoup de CD-Rom gratuits de connexion à Internet (Recherchez un fichier ayant pour nom rp8*). Ce player est en fait beaucoup plus
qu’un simple lecteur, c’est plutôt un navigateur qui n’aurait qu’un défaut... ne
pas lire le HTML !
2.6.1
.smil
Le langage SMIL (Synchronized Multimedia Integration Language) permet
de synchroniser des fichiers multimédias sur Internet.
Les fichiers vidéos étant assez volumineux, ils sont encodés de manière à pouvoir être ”streamés”. Le ” stream ” étant le flux de données qui permet à l’internaute de commencer à visualiser la vidéo avant que celle-ci ne soit complètement
chargée.
L’encodage peut se faire suivant au moins 3 technologies diffé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
même titre que les fichiers audios, images ou fichiers textes.
La vidéo peut aussi être mise en forme dans un habillage en cohérence avec
les paramètres détectés chez l’internaute spectateur. SMIL permet donc de synchroniser des flux Audio et Vidéos en fonction des paramètres de chaque internaute.
La technique Les fichiers SMIL sont des fichiers textes. De simples éditeurs
de textes sont suffisants pour faire du SMIL. En tant qu’extension de XML, elle
utilise les mêmes règles syntaxiques. Une page SMIL est composée de 2 éléments
principaux :
1. Une entête qui définira toutes les régions nécessaires a l’affichage des
éléments.
2. Un corps qui contiendra toutes les instructions de synchronisation.
2.6.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 (Vidéo).
L’adresse sur le site officielle real.com m’échappe mais vous trouverez facilement
ce logiciel en tapant renc51.exe ou RealProducer G2 freeware (3,2 Mo)
dans un moteur de recherche (par exemple sur www.google.fr). Prenez soin
de passer le fichier téléchargé à l’anti-virus ! Ce freeware permet également de
capturer et transformer en .rm des images provenant d’une webcam ou d’une
source externe (K7 VHS, TV...).
2.6.3
Un exemple
27
Eric Schrafstetter
ATTENTION ! N’utilisez que des actions Flash 4, l’exportation au format
RealPlayer n’est pas compatible avec ActionScript. Pour ne pas vous tromper,
faites Fichier - Paramètres de publication puis dans l’onglet Flash, choisissez
en bas Flash 4 et OK. Si vous insérez une action, ne prenez pas les fonctions
surlignées en jaunes, ceux sont celles propres à la version 5. Toujours dans
l’onglet Flash, cliquez sur le bouton Définir à côté du Train Audio. Choisir
Compression : Brut (Obligatoire) et Taux : 22kHz par exemple (44kHz étant de
meilleure qualité).
1. Donnez à l’animation les dimensions 200 × 200 pixels (Modification - Animation)
2. Importez un son (wav ou mp3) sous flash par Fichier - Importer
3. Ouvrez la bibliothèque ( CTRL+L) et placez une occurrence du son sur la
scène.
4. Dans l’échelle temporelle contenant le son, étendre par F5 jusqu’au temps
10 (par exemple).
5. Fenêtre - Panneau - Son (ou bouton droit sur l’échelle temporelle - Panneau - Son) et choisir Sync : En continu. C’est le seul format accepté
pour la publication.
6. Créez une nouvelle couche et placez-y une animation quelconque (interpolation de forme par exemple).
7. Fenêtre - Paramètres de publication. Choisir Real Player comme format
d’exportation. Un onglet RealPlayer apparaı̂t alors. Cliquez dessus et choisir :
– Exportation ré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 également régler les propriétés du projet qui seront éventuellement visibles à la publication de la page)
Il faut bien voir que le fichier .smil créé n’est là que pour intégrer l’animation
Flash dans Real Player. Il n’y a donc aucune compression supplémentaire par
rapport au .swf. Ouvrez le fichier .smil créé par Flash avec le bloc-notes pour
voir sa structure.
2.6.4
Créer un vrai .rm
Cette fois on perd presque tout (interactivité, images vectorielles, clips...)
mais on compresse fortement la vidé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 précédente (Une piste son et une interpolation de forme par exemple).
2. Faites Fichier - Exporter l’animation et choisir Windows AVI. Choisir
le Format vidéo = Couleur 24 bits et le format Audio 44Kz Mono ou
Stéréo. Utilisez des trames non compressées pour avoir la meilleure qualité
possible.
28
Eric Schrafstetter
3. Vous récupérez en sortie un fichier .avi généralement assez gros. La manipulation est identique (choisir type=WAV) si vous désirez cré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 é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 qualité vidéo, la première option (Smoothest Motion) est intéressante
s’il y a peu de mouvements (interview par exemple), la seconde (Sharpest
Image) s’il y a beaucoup de mouvements et la dernière (Slide Show) affiche
des images nettes mais saccadées.
9. Donnez un nom de sortie, par exemple video.rm
10. Options - Advanced Mode puis cliquez sur Settings... en bas à droite.
Choisir Total = 34 Kbps, ajustez le son (5 Kps par exemple), la vidéo sera
alors basée sur 34-5=29 Kps. Faites des tests en baissant le taux sur la
vidéo jusqu’à la limite du supportable !
11. Cliquez sur Start pour lancer la conversion.
12. Le résultat, généralement 10 à 20 fois plus petit que le .swf, se lit avec
Real Player.
2.7
Streaming
2.7.1
Avec Real Player
Le streaming vidéo permet de commencer à voir une vidéo dès le début de
son chargement, ce qui évite les temps d’attente. En effet, au lieu de charger
l’ensemble de la vidéo pour qu’elle puisse être regardée, le streaming permet de
voir les premières images dès le départ, en même temps que le film est chargé.
Pendant que vous regardez le début de cette vidéo la suite des informations
arrive dans votre ordinateur.
1. Encoder un fichier avec Real Producer G2 (ex : titre.rm).
2. Ouvrez le bloc notes
3. Ecrivez l’adresse où se trouvera votre fichier .rm (ex : http ://monsite.com/titre.rm)
4. 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 : http ://monsite.com/monfichier.ram)
A HREF="lance.ram">Voir la vidéo...</A>
29
Eric Schrafstetter
7. Ou encore en tant que vidéo intégré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>
2.7.2
Le streaming sous Flash
Comment imposer une cadence de 25 frames par seconde (par exemple) à
une animation sans connaı̂tre la puissance de la machine du visiteur ? Vous
l’aurez deviné, en utilisant la technique du stream. Certaines images ne seront
pas montrées afin que l’animation suive la cadence imposée. Voici la méthode
(voir l’original en anglais ) :
1. Créez un silence d’environ 0,1 seconde sous le nom silence.wav
2. Sous Flash, importez le fichier silence.wav (Fichier - Importer)
3. Insérez une couche nommée silence et placez une occurrence de silence.wav
sur la scène
4. Faites Fenêtre - Panneau - Son ou Bouton droit sur l’échelle temporelle et
Panneau - Son
5. Choisir Sync = En continu et Boucles = 1.
6. Sur d’éventuelles autres couches, placez de vrais sons avec la propriété
Sync = Evénement
7. Dans les paramètres de publication, sous l’onglet Flash, choisir :
– Train audio = ADPCM, 5kHz, 2 bit Mono
– Evénement audio = ADPCM, 11kHz, 4 bit Mono
– Et neutralisez les paramètres audio en cochant la case du dessous.
8. Il ne reste plus qu’à compiler votre animation.
2.8
2.8.1
Questions/Réponses
Son QuickTime
Flash sait importer des vidé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 à me connaitre non ?) :
1. Téléchargez sur www.radgametools.com le freeware RAD Video Tools
30
Eric Schrafstetter
2. Installez le logiciel, lancez-le programme radvideo.exe et choisissez le fichier .mov qui sera à importer sous flash
3. Cliquez sur Convert a file, décochez Convert Video et choisir un format
de sortie pour le son, par exemple 8-bit/stereo. Le fichier de sortie (en
haut) doit ê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 même résultat ? Je pensais avoir un bon début de ré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 !). Hélas, RAD Video Tools ne
semble pas reconnaı̂tre ce format ! L’autre idée 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 à
WinAmp la possibilité de lire des fichiers vidéos (entre autres les .mov), j’ai cru
à 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) en .wav ou .mp3
afin de l’importer sous Flash. A défaut, existe-t-il un équivalent gratuit de Total
Recorder qui permet d’enregistrer en .wav ou .mp3 n’importe quel son provenant
d’une application ou de l’extérieur ? ?
2.8.2
Convertir un .swf en .avi
Une fonction ma foi très originale du freeware RAD Video tools est de pouvoir convertir directement un fichier .swf en .avi ! Bien entendu, cela n’a d’intérêt
que si vous partez d’un .swf dont vous n’avez pas ou plus la source. Si vous avez
le .fla, utilisez plutôt la procé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 créer des effets spéciaux sur la
vidéo. Le fichier .avi peut alors ê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 paramètres de publication.
2.8.3
Une suite ?
Ces quelques pages se veulent une introduction très rapide au passage de
Flash à Real Player et au streaming. N’hésitez pas à me communiquer vos
31
Eric Schrafstetter
remarques en vue d’améliorer ce supplément. En attendant, voici quelques liens
utiles :
– Utiliser RealProducer
– Des guides (en PDF) sur le site de real.comù
– Flash et le streaming
– Un tutorial intéressant sur Flash et le streaming
– Optimiser le son sous Flash
32
Chapitre 3
Maths
3.1
Nombres aléatoires
3.1.1
Mélanges
Voici une méthode pour mélanger les données d’un tableau :
1. Affectez à l’image 1 de la scène principale l’action :
tableau=new Array();
for (i=0; i<=9; i++) {
tableau[i]="v"+i;
}
trace (tableau);
// Mélange 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 mélangé");
trace (tableau);
stop();
2. Lancez le programme et regardez les valeurs du tableau.
3.2
3.2.1
3D
Matrices de rotation
La rotation d’un angle φ autour de l’axe z (voir figure 3.1) peut être décrite
par la matrice Rφ suivante :
33
Eric Schrafstetter
CHAPITRE 3. MATHS


cos φ 0 − sin φ

0
1
0
Rφ = 
− sin φ 0 cos φ
et la matrice Rθ d’un angle θ autour de l’axe

cos θ − sin θ
Rθ =  − sin θ cos θ
0
0
y (voir figure 3.1) :

0
0 
1
Plus généralement, la transformation M (a, b, c) → Rφ Rθ (M ) s’écrit :


a cos(θ) cos(φ) − b sin(φ) − c sin(θ) cos(φ)
Rφ Rθ (M ) =  a cos(θ) sin(φ) + b cos(φ) − c sin(θ) sin(φ) 
−a sin(θ) + c cos(θ)
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. Créez le clip boule représentant une. . . boule. Mettre une occurrence de
ce clip à l’image 1 de la scène principale et lui donner le nom boule et
étendre par F5 jusqu’à l’image 3.
2. Placez également 3 zones de texte de saisie avec les noms a, b et c.
3. Créez une nouvelle couche pour les actions
4. Ajoutez l’action suivante à l’image 1 de la couche d’action
i = 1;
while (i<=4) {
34
Eric Schrafstetter
CHAPITRE 3. MATHS
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 crée 4 boules d’occurrence b1, b2..à partir de boule et on les place
aléatoirement sur l’écran. Les 3 lignes suivantes attribuent des coordonnées
tri-dimensionnelles à ces 4 boules.
La dernière ligne permet de donner la valeur 0.1 aux 3 variables.
5. Mettre l’action suivante à 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++;
}
35
Eric Schrafstetter
CHAPITRE 3. MATHS
On retrouve dans les calculs des rx et ry les matrices de rotation explicitées au paragraphe précédent. A cela s’ajoute un effet de scale et de
transparence alpha suivant la profondeur z. Les coordonnées (200, 200)
sont celles du centre du repère.
6. Mettre l’action gotoAndPlay (2); à l’image clé 3 de la couche action.
7. Lancez l’animation. Mettre b et c à 0 pour voir tourner les 4 boules suivant
l’axe 0x. Augmentez la valeur d’une variable pour accélérer le mouvement.
3.3
Déformation d’un triangle (Partie 1)
Cet exercice est inspiré d’un tutorial de Pavils Jurjans. Quelques formules,
notament sur le calcul de S et h, ont été simplifiées par rapport à l’original. Il
s’agit de transformer par les fonctions _xscale, _yscale et _rotation de Flash,
un triangle équilatéral en un triangle imposé par la donnée de 3 points A,B et C.
Contrairement aux apparences, c’est loin d’être simple ! Heureusement, comme
le montre le nombre croissants d’applications à la 3D, le jeu en vaut la chandelle.
Questions :
1. On suppose dans un premier temps que la droite (CB) est horizontale.
Montrez que le rapport m/n est égal à :
m
OA2 + OC 2
=
−1
n
OA × CB
2. Inversement, soit γ un réel positif fixé. Montrez que la valeur α du _xscale
dilatant horizontalement ce triangle dans un rapport m/n égal à γ est :
OC
α= p
OA((γ + 1)CB − 1)
3. On suppose le triangle ABC équilatéral (voir figure 3.3)Montrez que le α
calculé précédemment est donné par :
r
3
α=
1 + 2γ
4. Soit ABC un triangle quelconque de plus grand côté (AC).
– Montrez que sa surface est égale à :
S=
| (xB − xA )(yC − yA ) − (xC − xA )(yB − yA ) |
2
– En déduire que la hauteur h est :
h=
36
2S
AC
Eric Schrafstetter
CHAPITRE 3. MATHS
Z
R
φ
R
θ
Y
X
Fig. 3.1 – Les rotations élémentaires
O
A
m
n
h
β
C
B
Fig. 3.2 – Relations dans un triangle
γ=2
A
m
_xscale
n
C
A’
α = 77,46
m=n
B
C’
m = 2n
Fig. 3.3 – Transformation dans le cas γ = 2
37
B’
Eric Schrafstetter
CHAPITRE 3. MATHS
– Montrez que le signe de (xB − xA )(yC − yA ) − (xC − xA )(yB − yA )
permet de déterminer si le point B est au dessus ou en dessous de la
droite (AC).
– Calculez les coordonnées du barycentre d’un triangle équilatéral. En
déduire
que la distance entre le milieu de la hauteur et le barycentre est
√
3AC
' 0, 144 × AC.
12
Réponses :
1. Cela provient des relations élémentaires suivantes :
n = CB cos β
m = AC − n
OA
AC =
cos β
donc
OA
m
=
−1
n
CB cos2 β
D’autre part
sin β =
et
h
OC
=√
CB
OA2 + OC 2
cos2 β = 1 − sin2 β
Il suffit de remplacer cos2 β par son écriture suivant les termes OC, CB
et OA.
2. En substituant OA à αOA, et CB à αCB dans la première équation on
obtient :
α2 OA2 + OC 2
−1=γ
α2 OA × CB
On isole ensuite le α.
3. On a OA =
CB
2
et OC = h = CB
√
3
2 ,
2
α2 CB
4 +
d’où :
3CB 2
4
α2 CB 2
2
−1=γ
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’où :
¯
¯
1 ¯¯ xB − xA xC − xA ¯¯
S= ¯
2 yB − yA yC − yA ¯
On a bien le résultat annoncé.
– La surface d’un rectangle est la base par la hauteur sur 2.
38
Eric Schrafstetter
CHAPITRE 3. MATHS
– On compare les pentes des droites (AB) et (AC), c’est-à-dire les nombres
(yB −yA )
(yC −yA )
(xB −xA ) et (xC −xA ) .
– L’ordonnée
du barycentre G est égal au
tiers de la hauteur, soit yG =
√
√
3AC
3AC
Le
centre
ayant
pour
ordonnée
, la différence donne bien
4
√ 6
3AC
12 .
Une fois que l’on a transformé le triangle équilatéral dans un rapport m/n, on
place par rotation le grand côté (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 à la pratique !
Application fondamentale :
1. Créez un clip nommé equi avec le dessin d’un triangle équilatéral dans le
sens 4.
2. Utilisez la fenêtre info pour lui donner
les dimensions L = 100 et H = 86, 6
√
(qui correspond à la hauteur 1002 3 )
3. Mettre le barycentre du triangle exactement sur la croix (coordonnées
centre X = 0 et Y = −14, 4)Voir figure 3.
L=100 et H=86,6
Départ
centre en
X=0
Y=0
clip equi
Mettre centre en
X=0
Y= -14.4
clips tri3
tri2
Mettre centre en
X=0
Y= 0
Fig. 3.4 – Positions des centres des clips
4. Créez un clip nommé tri3 et mettre une occurrence du clip equi sur son
image 1 avec pour nom type.
5. Créez un clip nommé tri2 et mettre une occurrence du clip tri3 sur son
image 1 avec pour nom base.
6. Sur la scè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 à un clip puis un
_xscale, vous verrez que ce dernier n’est pas appliqué horizontalement
mais suivant l’angle de la rotation !
7. Créez un bouton bt représentant un petit disque (L = H = 6 par exemple)
8. Créez un clip nommé ptA avec une occurrence du bouton bt au centre du
clip (X = Y = 0)Ajoutez l’action suivante au bouton :
39
Eric Schrafstetter
CHAPITRE 3. MATHS
on (press) {
startDrag ("", true);
}
on (release) {
stopDrag();
}
9. Mettre une occurrence du clip ptA sur la scène principale avec pour nom
A
10. De la même façon, créez deux autres clips ptB et ptC avec leurs occurrences
respectives B et C sur la scène principale.
11. Créez un clip vide et placez-en une occurrence sur la scè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 scène principale
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;
40
Eric Schrafstetter
CHAPITRE 3. MATHS
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 dé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 géomé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 à faire,
soit en utilisant des logiciels (voir freeware sur http ://www.stereoeye.com/) ou
directement par manipulation sous Photoshop/Paint Shop Pro (voir ma page
3D).
Le principe repose sur le Théorème de Thalès (voir figure 3) :
OG OD
OOG
=
GD
OG
et
OG OD =
OOG × GD
OOG + GOG
41
Eric Schrafstetter
CHAPITRE 3. MATHS
P
OD
OG
O
D
G oeil
Fig. 3.5 – Principe des anaglyphes
Dans la pratique, l’écartement des yeux est GD ' 6, 3cm et la distance yeuxécran vaut environ GOG ' 70cm. Par exemple, si vous voulez que votre point
apparaı̂sse à 25cm hors de l’écran, la distance entre les points bleu et rouge
devra être de OG OD ' 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 écran
n’est pas bon pour tes yeux...
1. Reprendre la manipulation sur la déformation d’un triangle et ajoutez une
occurrence du clip tri2 sur la scène principale avec pour nom trirouge.
2. Pour créez le triangle bleu ciel à partir de tri1, utilisez le panneau effet
avec les options : Avancé - 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 à
travers le filtre bleu et faites varier la valeur de la composante verte (ne pas
toucher au rouge) jusqu’à ce que le triangle disparaisse. Regardez ensuite
le triangle bleu à travers le filtre rouge, vous devez le voir correctement.
3. Idem avec le triangle rouge trirouge : Avancé - Rouge=(100%×R)+255,
Vert =( -100%×V)+0, Bleu=(-100%×B)+0, Alpha=(50%×A)+0
4. Faites un copier-coller des trois points A, B et C de la scène et renommezles A2, B2 et C2Vous avez maintenant 6 points sur la scè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 scène principale en :
function Tracer (triangle, x1, y1, x2, y2, x3, y3) {
...
_yscale = 1.15470054*sqrt(hh)*rr/pp*dir;
42
Eric Schrafstetter
CHAPITRE 3. MATHS
}
}
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 à gauche du
triangle rouge et d’autre part que les ordonnées des points soient bien
aligné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) {
Tracer(tri1, A._x, A._y, B._x,
Tracer(trirouge, A2._x, A2._y,
}
}
with (_root) {
Tracer(tri1, A._x, A._y, B._x,
Tracer(trirouge, A2._x, A2._y,
}
43
B._y, C._x, C._y);
B2._x, B2._y, C2._x, C2._y);
B._y, C._x, C._y);
B2._x, B2._y, C2._x, C2._y);
Eric Schrafstetter
CHAPITRE 3. MATHS
}
with (_root) {
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);
}
}
lettre = "B";
}
Ainsi, vous pourrez avec le clavier choisir le point à modifier (A, B ou C)
et éloigner ou rapprocher ce point avec les flèches haut et bas.
9. Compilez et lancez l’animation. Mettez vos lunettes et restez appuyez sur
la flèche vers le bas, un des coins doit sortir de l’écran (c’est le point
B)Tapez sur la touche A et à nouveau sur la flèche vers le bas, un autre
coin sort de l’écran.
10. Vous pouvez également modifier la forme du triangle grâce à la souris.
3.5
Perspectives frontales et obliques
Merci au centre IGESA de Biscarrosse avec leurs chalets aux chambres cubiques de m’avoir donné cette idée d’exercice...
3.5.1
Méthode pratique
La figure 3.6 montre comment tracer un cube en perspective à partir de ses
projections en plan (vue du dessus) et en élévation (vue de côté). Le point V
repré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’écran de l’ordinateur. La méthode peut se résumer à :
1. Tracez le point V et la droite T (représentant le plan vu de côté). Mettre
les même distances entre V et T sur les 2 coupes.
2. Dessinez les vues de l’objet (pas nécessairement un cube !).
3. Tracez les segments [V A], [V B]... qui coupent la droite T en certains points.
4. Tracez les perpendiculaires à T en ces points.
5. Utilisez les points d’intersections de ces nouvelles droites pour tracer l’objet en perspective.
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). Déterminez
44
Eric Schrafstetter
CHAPITRE 3. MATHS
−−→
−→ → −−→0
→
le vecteur V A0 en fonction des vecteurs V A et −
n = V V où −
n est normale
(perpendiculaire) au plan T.
2. Cas particulier de la projection sur le plan Oxy. Déterminez les coor−−→
→
données du vecteur V A0 lorsque V (x0 , y0 , z0 ) avec z0 < 0, −
n = (0, 0, −z0 )
(c’est-à-dire que l’oeil est à la distance | z0 | de l’écran) et A(xA , yA , zA )
avec zA > 0.
3. Intérieur d’un cube :
(a) Tracez sur l’é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’écran de l’ordinateur est carré et de côté L. Trouvez
les formules donnant les coordonnées d’un point (x, y, z) du cube sur
l’écran.
(c) Par quel facteur doit-on multiplier ces coordonnées pour que la face
arrière du cube prenne tout l’écran ? (Cas particulier : L = 400 et
R = 100)
Corrigé
1. Remarquons que le plan T est l’ensemble des points M vérifiant :
−−0−→ →
V M .−
n =0
−−−→
−
C’est-à-dire les points tels que le vecteur V 0 M soit orthogonal à →
n . Par
la relation de Chasles, ceux sont donc également les points M vérifiant :
−−→ −−→ →
(V 0 V + V M ).−
n =0
soit :
−−→ →
V M .−
n = n2
→
où n est la norme du vecteur −
n.
−−→0
−→
Comme V A est de la forme λV A et que le point A0 appartient au plan T,
le réel λ doit vérifier :
−→ →
λV A.−
n = n2
d’où
−−→0
n2 −→
V A = −→ V A
−
V A.→
n
−−→
2. Dans le cas particulier, les coordonnées du vecteur V A0 dans le plan Oxy
sont donc :
−−→0
VA
½
z0
x0 + (xA − x0 ) z0 −z
A
z0
y0 + (yA − y0 ) z0 −z
A
−→ −
puisque V A.→
n = (xA − x0 ) × 0 + (yA − y0 ) × 0 + (zA − z0 ) × (−z0 ) et
n2 = 02 + 02 + (−z0 )2 = z02 .
45
Eric Schrafstetter
CHAPITRE 3. MATHS
T
C D
V
B
A-B
C-D
A
GH
F
E-F
E
G-H
C-G
D-H
B-F
A-E
Vue de droite
T
Vue du dessus
V
Fig. 3.6 – Perspective d’un cube
A
A’
V
V’
T
Fig. 3.7 – Projection sur le plan T
46
Eric Schrafstetter
CHAPITRE 3. MATHS
3. Intérieur d’un cube
(a) Voir la construction figure 3.8.
(b) On utilise les questions précédentes pour voir que les coordonnées
sont :
½ 0
R
x = x R−z
R
0
y = y R−z
(c) Comme le point C a pour coordonnées C(− R2 , R2 , − R2 ), on trouve :
½ 0
x = − R3
C0 =
y 0 = R3
(d) On passera du carré CDGH de côté 2R
3 à l’écran L×L en multipliant
3L
par le coefficient 2R
. Ainsi, pour tracer le cube en perspective au
centre de l’écran, nous avons la formule générale :
(
3L
xecran = L2 + 2(R−z)
x
L
3L
ecran
y
= 2 − 2(R−z)
y
Dans le cas particulier L = 400 et R = 100, le coefficient vaut 6 et
l’on a donc :
½ ecran
600
x
x
= 200 + 100−z
600
ecran
y
= 200 − 100−z
y
3.5.3
Manipulation d’un cube
Nous avons tous les ingrédients pour tracer un objet 3D et le manipuler !
1. Lancez Flash puis Modification - Anima/-tion pour mettre les dimensions
de l’animation à 400 × 400
2. Créez une ligne du centre vers le bas à droite à 45◦ avec pour fenêtre info :
L = 100, H = 100, X = 0 et Y = 0 (Cf exercice sur le fil élastique)
3. Transformez cette ligne en symbole nommé ligne et en mettre une occurrence sur la scène principale avec pour nom arete. Ce sera le modèle de
l’arête de notre cube.
4. A l’image 1 de la scè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++) {
47
Eric Schrafstetter
CHAPITRE 3. MATHS
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];
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 coordonnées (x, y, z) des coins
sont placées dans le tableau coins et les différentes liens (de 0 à 1, puis de
48
Eric Schrafstetter
CHAPITRE 3. MATHS
1 à 2, de 2 à 3 et de 3 à 0. Recommencer de 4 à 7, puis de 7 à 6...). Pourquoi
ce format ? Parce que vous pouvez facilement récupérer ces coordonné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
1
xR
3L
=
R
2 R−z2 2
R(2 − z)
Les coordonnées des points à l’écran sont mis dans le tableau ecran.
5. Créez un bouton représentant une flèche vers le haut et lui mettre l’action :
on (release) {
rotx(-1);
affiche();
}
6. Créez un bouton représentant une flèche vers le bas et lui mettre l’action :
on (release) {
rotx(1);
affiche();
}
7. Créez un bouton représentant une flèche vers la gauche et lui mettre l’action :
on (release) {
roty(1);
affiche();
}
8. Créez un bouton représentant une flèche vers la droite et lui mettre l’action :
on (release) {
roty(-1);
affiche();
}
9. Créez un second bouton représentant une flèche vers le haut et lui mettre
l’action :
on (release) {
_root.L-=5;
if (_root.L<5){
_root.L=5;
}
affiche();
}
49
Eric Schrafstetter
CHAPITRE 3. MATHS
Ceci aura pour effet d’éloigner le cube.
10. Créez un second bouton représentant une flè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 flèches pour manipuler le cube.
Si vous trouvez que la perspective est ”sévère”, n’oubliez pas que nous
sommes dans le cas particulier ou l’oeil est situé à la distance R du plan
T ! Vous pouvez modifier la distance en remplaçant :
coeff = 3*L/(2-coins[3*i+2])/2;
par :
coeff = R*L/(L-coins[3*i+2]);
Il faudrait écrire z0 à la place de L pour rester cohérent avec les notations
précédentes.
50
Eric Schrafstetter
CHAPITRE 3. MATHS
plan T
B
A
T
C
D
G
H
V
F
R
Vue de droite
E
C-G
D-H
R
T
B-F
Vue du dessus
A-E
R
V
Fig. 3.8 – Construction de la perspective
51
Chapitre 4
Physique
4.1
Collision élastique de 2 boules
La partie théorique suppose des notions de physique niveau bac .
4.1.1
Rappels
−
1. Le vecteur quantité de mouvement →
p d’un point de masse m et de vitesse
−
→
−
→
−
→
v est par définition p = m v .
−
2. L’énergie cinétique d’un point de masse m et de vitesse →
v est, toujours
par définition :
Ec =
1
mv 2
2
→
où v est la norme du vecteur −
v.
3. On considère deux points matériels A1 et A2 de masses m1 et m2 . Une loi
de la physique énonce que la quantité de mouvement totale d’un système
de 2 masses ponctuelles en collision se conserve quelque soit le référentiel :
−−→
−
→
→
p1 + −
p2 = Cte
4. Une autre loi affirme qu’il y a conservation de l’énergie totale, ce qui se
traduit, dans le cas d’une collision élastique, par :
Ec1 + Ec2 = Cte
où Ec1 est l’énergie cinétique du point A1 .
4.1.2
La théorie
52
Eric Schrafstetter
CHAPITRE 4. PHYSIQUE
1. Montrez que dans le cas d’une collision directe, c’est à dire lorsque les
vecteurs vitesses avant et après le choc sont colinéaires (parallèles), alors
les vitesses v10 et v20 après le choc sont données par :
v10 =
2m2 v2 + (m1 − m2 )v1
m1 + m2
v20 =
2m1 v1 − (m1 − m2 )v2
m1 + m2
et
Réponse
La conservation de la quantité de mouvement avant et après le choc permet
d’écrire que :
m1 v1 + m2 v2 = m1 v10 + m2 v20
et celle de l’énergie totale que :
1
1
1
1
m1 v12 + m2 v22 = m1 v102 + m2 v202
2
2
2
2
On en déduit que :
½
m1 (v10 − v1 ) = m2 (v2 − v20 )
m1 (v102 − v12 ) = m2 (v22 − v202 )
d’où, par division de la ligne 2 par la ligne 1 :
½
m1 (v10 − v1 ) = m2 (v2 − v20 )
v10 + v1 = v2 + v20
Les valeurs de v10 et v20 s’obtiennent alors en résolvant ce système de 2
équations à 2 inconnues.
2. Lors d’une collision en un point de contact K de 2 objets arrivant avec des
→
−
vecteurs vitesse −
v1 et →
v2 (voir figure 4.1), seules les composantes v1x et v2x
interviennent. On néglige ici les effets de frottements (voir par exemple le
cours de Mécanique de JPhPerez (Niveau Classes Prépas)).
3. Nous obtenons la méthode de construction de la figure 4.2. Les quantités
0
0
v1x
et v2x
sont obtenus par les formules précédentes. Déterminez les coor0e
0
0e
, v1y
) en fonction de ϕ, v1y et v1x
.
données à l’écran de v10e = (v1x
Réponse
0e
0
La composante v1x
est la somme des projetés de v1y et v1x
sur l’axe ho0
rizontal. L’angle entre v1y et l’axe horizontal est ϕ + π2 et de ϕ pour v1x
.
D’où :
0e
0
v1x
= v1x
cos ϕ − v1y sin ϕ
puisque cos(ϕ + π2 ) = − sin ϕ. De même, on projecte les 2 vecteurs sur
l’axe vertical et on en fait la somme :
0e
0
v1y
= v1x
sin ϕ + v1y cos ϕ
53
Eric Schrafstetter
v
1x
A ,m2
2
v
1
v
v
1y
K
v
2y
2
v2x
A1,m1
Fig. 4.1 – Contact des 2 boules
v1x
v’
1x
v1
v1y
θ
θ
2
v2y
v
1 v2 2x
ϕ
v’
2
v’
2x
A2,m2
v’
1
A1,m1
Fig. 4.2 – Construction des vecteurs vitesse
54
Eric Schrafstetter
4.1.3
Application
1. Lancez Flash et CTRL+M pour donner les dimensions 500 × 400 à la scène
et cadence 50.
2. Dessinez une boule (avec son centre sur la croix centrale). Convertissez-là
en bouton nommé boule
3. Créez un clip b1 et mettre une occurrence du bouton boule sur la croix
(les 2 croix sont alors superposées)
4. Ajoutez l’action suivante au bouton :
on (press) {
_root.drag1 = true;
startDrag ("");
}
_root.drag1 = false;
stopDrag ();
}
5. Mettre une occurrence du clip b1 avec pour nom boule1 sur la scène
principale
6. De même, cré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 scène
principale
9. Ajoutez une couche pour les actions
10. A l’image 1 de la scè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;
55
Eric Schrafstetter
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;
}
}
0
et v1xe
Il n’y a rien à dire sur le script sinon que v1x est v1x , v1px est v1x
0e
est v1x .
11. A l’image 2 de la couche action, ajouter :
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;
56
Eric Schrafstetter
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)) {
57
Eric Schrafstetter
affiche();
}
// 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 représente pas la distance de A1 à A2 mais le carré
de cette distance. Ceci évite d’utiliser la fonction racine carrée.
– Le calcul de la vitesse est obtenu en effectuant le quotient de la distance
entre la position précédente et courante de la boule sur le temps mis
pour parcourir cette distance. On met ce temps à 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 gravité), 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 côté de l’écran, la composante normale (perpendiculaire) au bord change de signe. Si vous voulez ajouter des objets
(tables, raquettes...) sur la scène, faites les tests de collisions avec les
coordonnées des clips ( table._y...)
12. A l’image 3 de la couche action, ajoutez :
gotoAndPlay (2);
13. Enfin, étendre par F5 la couche contenant les objets jusqu’à l’image 3.
Chalenge concernant le fichier .fla associé à cet exercice : M’envoyer un .swf
avec les ballons qui tournent !
4.2
Vitesse d’un objet avec freinage
58
Eric Schrafstetter
Vous lancez un objet à l’aide de la souris, celui-ci rebondit sur les bords de
l’écran puis s’arrête après freinage.
Donnez à votre animation les dimensions 400 × 400
1. Créez un bouton rectangulaire
2. Créez un clip rect et placez le bouton rectangulaire dessus. Etendre sur
les image 1 à 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 :
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 dé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 scè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;
59
Eric Schrafstetter
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 déplacez le rectangle, la variable pause est à true
et le clip rect tourne entre les images 2 et 3, permettant d’obtenir sa vitesse de
départ. Une fois le bouton relâché, pause passe à false et les nouvelles positions
nouv sont calculées jusqu’à une vitesse inférieure à 0.5 où l’objet s’arrête.
4.3
Fil élastique
Tracer une ligne entre les centres de 2 points mobiles.
1. Créez un clip carré avec un petit carré sur l’image 1
2. Placez 2 occurrences de carré sur la scène principale avec pour noms pt1
et pt2.
3. Créez le clip ligne suivant :
– Tracer une ligne du centre vers le bas à droite à 45◦ (utilisez la touche
MAJ en traçant)
– Sélectionnez la ligne et allez dans la fenêtre info. Mettre L = 100, H =
100
– Toujours dans la fenêtre info, cliquez sur le carré haut-gauche puis X = 0
et Y = 0.
Fig. 4.3 – Coin en haut à gauche placé en X=0 et Y=0
Mettre l’action suivante sur le clip pt1
60
Eric Schrafstetter
// La souris touche-t-elle le clip en pressant ?
// suis-moi !
startDrag ("");
}
}
stopDrag ();
}
Idem avec le clip pt2Placer une occurrence de la ligne sur la scè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;
}
4.4
Tableau blanc
Voici une application directe de la section précédente sur le fil élastique. Il
s’agit de créer un tableau blanc sur lequel on pourra dessiner librement.
1. Créez un bouton transparent avec un petit carré sur l’image clé cliqué.
2. Créez un clip nommé crayon et placez-y une occurrence du bouton.
on (press) {
_root.souris=1;
_root.x1=0;
}
on (release) {
_root.souris=0;
}
4. Sur la scène principale, placez une occurrence du clip crayon et lui donner
le nom mc.
5. Créez maintenant un clip ligne comme dans la rubrique fil élastique (angle
de 45◦ vers le bas à droite, L = 100, H = 100, haut-gauche en (0, 0)) et
en placer une occurrence sur la scène principale avec pour nom trait.
6. Etendre par F5 l’image clé 1 jusqu’en 3
7. Ajoutez pour les actions et placez à l’image clé 1 l’action :
61
Eric Schrafstetter
_root.souris=0;
startDrag (_root.mc, true);
8. A l’image clé 2 de la couche d’action, placez :
if (souris
if (x1
x1
y1
} else
x0
y0
if
== 1) {
== 0) {
= mc._x;
= mc._y;
{
= mc._x;
= mc._y;
((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 à l’image clé 3 du calque action :
gotoAndPlay (2);
10. Lancez l’animation et pressez la souris pour dessiner.
62
Chapitre 5
Visualisation
5.1
Powerpoint
Pour insérer un objet flash en format SWF dans PowerPoint, suivez ces
différentes étapes :
1. Se placer dans une diapositive où l’on veut insérer le fichier *.SWF
2. Cliquez sur le menu : ”Affichage” et ensuite sur le menu ”Barre d’outils”.
3. Sélectionnez ”Boı̂te à Outils Contrôles” si cette boı̂te n’est pas déjà sélectionnée.
4. Cliquez sur ”Autres contrôles” (bouton avec le marteau et la clé)
5. Sélectionner ”Shockwave Flash Object”
6. Dessinez un contrôle dans la diapositive de la taille souhaitée pour intégrer
l’objet Flash
7. Faites un clic droit sur l’objet et sélectionner ”Propriétés”
8. Pour la propriété ”Movie” tapez le chemin d’accès du fichier *.SWF (exemple :
C:\Mes documents\Nom.swf) ou son URL
9. S’assurez que la propriété ”Playing” est paramétrée sur ’True’
10. Se mettre en mode d’affichage DIAPORAMA
5.2
Sons, Cookies et Diaporamas
Il s’agit de créer rapidement un diaporama sonore et autonome composé
d’images .gif, .jpg ou .png. Nous ajouterons 3 boutons afin que le spectateur
puisse, s’il le veut, retourner à la première diapo, passer à la diapo suivante ou
précédente. L’idée est la suivante : Créez dynamiquement en javascript des pages
qui contiendront le numéro de l’image à afficher (image1.jpg, image2.jpg...) ainsi
que la bande son qui sera dans une animation Flash. La partie Flash permettra de gérer le passage d’une diapo à une autre et les cookies de mémoriser le
63
Eric Schrafstetter
CHAPITRE 5. VISUALISATION
numéro de l’image courante.
5.2.1
Partie HTML - javascript
Cré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>
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(){
64
Eric Schrafstetter
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>
<script language="JavaScript">
<!-document.write(’<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"’);
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>’);
65
Eric Schrafstetter
//-->
</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 composé de 3 fonctions permettant
d’avancer, de reculer et de retourner à la première diapo. Le numéro de
l’image courante étant dans la variable n placée dans un cookie.
– Le premier script de la partie <body>
récupère la variable n, l’augmente de 1 et remplace le cookie existant.
– Le second script place l’animation Flash nommée image1.swf (son associé
à l’image 1) ou image2.swf ...
– Le troisième script place l’image elle-même
– Le dernier script ajoute le numéro de l’image courante
– Les actions onclick permettent de gérer les boutons Home, suivant et
précédent
– La fonction location.href=location recharge la page
5.2.2
Partie Images
Veillez à 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 où seront placées
vos images.
66
Eric Schrafstetter
5.2.3
Partie Flash
Il vous faut un fichier son (.wav ou .mp3) par image. Nous allons créer un
modèle d’animation qui permettra de générer rapidement tous les .swf.
1. Lancez Flash et enregistrez sous sontype.fla
2. Donnez à votre animation la taille 200x20 (par exemple)
3. Nommez scène1 par chargement (Fenêtre - Panneaux - Scène)
4. Créez une barre de chargement comme vu dans un chapitre précé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 à charger le son de la diapo suivante).
5. Créez une nouvelle scène par Insertion - Scène et lui donner le nom son
6. Créez 2 couches, une pour le son et une pour les actions.
7. Importez le son par Fichier - Importer et placez à partir de la bibliothèque
( CTRL+L ) une occurrence du son sur la couche son
8. Etendre l’image clé par F5 jusqu’à la fin du son
9. Sur la couche des actions, placez après la fin du son une image clé vide
par F7 (voir figure 5.1)
Fig. 5.1 – Apparence de la couche son et action
Action sur cette image clé
getURL ("ppt.htm", "bas");
qui précise que l’on doit recharger l’animation ppt.htm dans le cadre du
bas nommé bas
10. Insérez une nouvelle image clé juste après avec l’action stop();
11. Faı̂tes Fichier - Paramè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 créé et le nommer
image1.swf
13. Retournez sous Flash, ouvrez la bibliothèque, sélectionnez l’objet son et
cliquez sur l’icône Propriétés (le petit ”i” dans un cercle bleu en bas de la
fenêtre de la bibliothèque)
67
Eric Schrafstetter
14. Choisir Importer et récupérez le son de la seconde image
15. Ajustez l’emplacement des 2 actions par rapport à ce nouveau son et
publiez à nouveau comme précédemment.
16. Recommencez avec les autres sons.
17. Il ne vous reste plus qu’à ouvrir index.html pour voir le résultat
5.3
Visionneuse
Nous allons créer une visionneuse d’images avec un effet de transition gauche
→ droite ou droite → gauche (Voir le .swf joint).
Fig. 5.2 – Vue générale de la Time-Line
1. Créez les 4 calques (boutons, cadre, masque et images) comme sur la
figure 5.2
2. Dessiner un rectangle plein ayant les dimensions des images à diffuser sur
la première image clé de la couche masque.
3. Créez un clip nommé images et placez sur les images clés 1,2,3. . . les
différentes images à afficher (utilisez le panneau info pour être sûr qu’elles
sont bien superposées)
4. Ajoutez une action stop(); à sa première image clé.
5. Créez un clip nommé diapo et y placer 2 occurrences du clip images, l’une
à côté de l’autre (voir figure 5.3)
Fig. 5.3 – Les deux occurrences du clip images côte à côte
68
Eric Schrafstetter
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 scène principale et placez une occurrence du clip diapo à
l’image 1 de la couche images . Faı̂tes bien en sorte que l’image de gauche
soit sous le rectangle dessiné sur la couche masque (voir figure 5.4)
Fig. 5.4 – L’image de gauche est sous le rectangle bleu servant de masque
8. Donnez le nom diapo à l’occurrence du clip diapo
9. Créez un clip vide nommé charge et en mettre une occurrence sur la
scè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 numéro de l’image courante à afficher.
10. Ajoutez l’action suivante à l’image 1 de la couche boutons
diapo.image1.gotoAndStop(courant);
stop ();
Le clip image1 du clip diapo s’arrête sur l’image courante (celle que l’on
voit)
11. Créez 2 boutons et les placer sur la scène principale (couche boutons). Ils
serviront à avancer ou à reculer dans le diaporama. Au bouton de droite,
ajoutez l’action :
on (press) {
vieux = courant;
courant++;
if (courant>nbtotal) {
courant = 1;
}
69
Eric Schrafstetter
gotoAndPlay ("avance");
}
On mémorise dans la variable vieux l’ancien numéro et courant augmente
de 1. Si courant dépasse le nombre total de photos, on boucle en remettant
courant à 1. L’effet de transition s’effectuera à l’étiquette avance
12. De mê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 insérer une nouvelle image clé au temps 2 de la
couche images.
– Cliquez à nouveau sur F6 au temps 10 et déplacez le clip diapo de sorte
que l’image de droite se retrouve sur l’ancienne image de gauche, c’est
à dire juste sous le rectangle bleu.
– Cré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 à l’image clé 2 (bouton droit sur l’image clé 2 Panneaux - Image - Etiquette = avance)
– Cliquez sur F6 au temps 11 et au temps 20, remettre le clip diapo
comme il é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);
Remarquez bien que les noms image1 et image2 ont été inversés ! L’idée
est toute simple, l’image actuellement affichée a le numéro vieux (qui
est le numéro de l’ancienne image) et celle qui lui est adjacente le numéro
courant (qui est celui de la future image à afficher). On effectue ensuite
un déplacement du clip diapo de gauche à droite ou de droite à gauche.
14. Etendre par F5 la couche masque jusqu’au temps 20. Créez éventuellement
un cadre sur la couche cadre pour faire joli.
15. Il ne reste plus qu’à rendre actif le masque par bouton droit sur le nom
de la couche masque et Masque.
70
Eric Schrafstetter
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.
5.4
Créer un QCM
Nous allons créez un modèle de QCM ayant à chaque fois 3 choix possibles.
Les questions seront créées avec PowerPoint qui est, nous l’avons déjà dit, plus
conviviale pour la mise en page.
5.4.1
Les questions
1. Lancez PowerPoint
2. Créez une page de titre ( CTRL+M et 1er choix)
3. Créez quelques diapositives avec, sur chaque diapo, une question et 3 choix
numérotés 1,2 et 3.
4. N’hésitez pas à ajouter des organigrammes, des ClipArts, des images jpg,
des formules (insertion objet - Microsoft équation), des calendriers (insertion objet - Contrôle calendrier), des tableaux (insertion - tableau), etc.
5. Enregistrez sous le nom qcm.ppt
6. Faites Fichier - Enregistrez sous et choisir Métafichier windows comme
type d’enregistrement. Répondre oui pour que toute la série des diapos
soit enregistrée.
7. Mettre un fond uni à votre présentation. Si vous désirez néanmoins un
fond, créez-le sous Flash dans une couche séparée.
5.4.2
Le QCM sous Flash
1. Lancez Flash et enregistrez sous le nom qcm.fla
2. Nommez la première couche actions, la seconde ppt et la troisième boutons.
Image clé 1
1. Placez l’action suivante à l’image 1, couche actions :
ntotal=15;
transfo = new Object();
rep = [];
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();
71
Eric Schrafstetter
– La variable ntotal représente le nombre total de questions dans l’animation PowerPoint (le titre n’est pas compté comme une question).
– rep contiendra les futures réponses.
– La variable nq correspond au numéro de la question courante.
– La variable corrige permet de savoir si on est en mode corrigé ou non.
– Le tableau bon contient la suite des bonnes réponses au QCM.
– Le clip enonces contiendra les diapos, il pointe pour le moment sur la
première image (diapo contenant le titre).
2. Créez un bouton de forme rectangulaire et nommez-le bt (voir le fichier
.fla pour un beau bouton à la i-Mac !)
3. Revenir sur la scène principale de l’animation et placez une occurrence du
bouton bt à l’image clé 1. Lui associer l’action suivante :
on (release) {
gotoAndPlay (2);
}
Ce bouton servira simplement à lancer le QCM.
4. Créez un clip nommé diapos, cliquez sur sa première image clé et Affichage
- Zoom - Afficher une image pour bien centrer le clip.
5. Faites Fichier - Importer et rechercher la première diapo .wmf qui a été
créée avec PowerPoint.
6. Répondre oui pour importer toute la série.
7. Placez une occurrence du clip diapo sur la scène principale couche ppt et
lui donner le nom de enonces.
8. Sur cette occurrence, faites Bouton droit - Modifier en place et avancez
dans le clip pour voir si les questions ne débordent pas de l’animation.
Image clé 2
1. Créez un clip nommé choix et placez une occurrence du bouton bt sur sa
première image clé. Mettre l’action suivante au bouton :
on (release) {
_root.rep[_root.nq-1]=Number(nom);
_root.nq++;
_root.gotoAndPlay("choix");
}
La première ligne permet de récupérer le numéro du bouton (1,2 ou 3)
et de le placer dans le tableau rep des réponses à la position nq-1 (
rep[0] correspondant à la première donnée du tableau). On passe alors
directement à la question suivante par _root.nq++.
2. Ajoutez une couche au dessus de celle contenant le bouton et créez une
zone de texte dynamique ayant pour nom nom. Ce sera le texte correspondant à ce bouton.
72
Eric Schrafstetter
3. Ouvrez la bibliothèque par CTRL+L et bouton droit sur le clip choix puis
Définir les paramètres du clip
4. Ajoutez le paramètre nom et mettre 1 comme valeur par défaut.
5. Revenir sur la scène principale de l’animation et placez sur la couche
boutons à l’image clé 2 trois occurrences du clip choix. Faites bouton
droit - Panneaux - Paramètres du clip sur chacun des clips et mettre la
valeur de nom à 1,2 puis 3.
6. Nommez choix1 le clip de paramètre 1, choix2 le clip de paramètre 2 et
choix3 le dernier.
7. Sur la couche actions image clé 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 à la diapo nq+1. Puis on colorie les
boutons suivant les réponses précédemment choisies (test i==rep[nq]). Si
le test est en phase de correction (test corrige == 1), alors on met en
blanc la bonne réponse.
8. Donnez le nom choix à l’image clé 2 (Fenêtre - Panneaux - Image)
Image clé 3
1. Sur la couche actions, image clé 3, mettre l’action stop();.
2. Etendre par F5 les images clés 1 des couches boutons et ppt jusqu’en 3.
Image clé 4
1. Mettre 2 occurrences du bouton bt à l’image clé 4 de la couche actions
de la scène principale.
73
Eric Schrafstetter
2. A un des boutons associez l’action :
on (release) {
corrige=1;
nq=1;
gotoAndPlay ("choix");
}
Bouton qui permet de lancer le corrigé.
3. A l’autre bouton mettre l’action :
on (release) {
nq=1;
gotoAndPlay ("choix");
}
qui lui donnera la possibilité de voir et/ou corriger ses réponses.
4. Ajoutez une zone de texte dynamique nommez score sur la scène image
4.
5. Et enfin, sur la couche actions image clé 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 façon, si nous sommes en mode corrigé, le nombre de bonnes
réponses est calculé par la boucle et la note sur 20 est affichée (avec une
décimale).
5.5
Camembert
Nous voulons représenter, sous forme de camembert, les données suivantes :
Valeurs
20
5
50
37
10
Catégories
crayons bleus
crayons verts
crayons roses
crayons turquoises
crayons violets
74
Eric Schrafstetter
Placez ces valeurs dans un fichier donnees.txt sous la forme :
donneValeurs=20,5,50,37,10&couleurs=0000cc,669999,cc66cc,00cccc,9933cc
&categories=crayons bleus,crayons verts,crayons roses,crayons
turquoises,crayons violets
Veillez bien à ce que ce fichier soit dans le même répertoire que le fichier
.swf que vous allez créer.
1. Créez image clé en 1 et placez l’action stop(); sur la couche 1
2. Créez un clip vide nommé controle. Placez une occurrence de ce clip sur
la scène principale à l’image 1 et lui donner comme nom lirevaleurs
3. Action associée au clip lirevaleurs :
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 variables sont lues grâce à la commande this.loadVariables.
– La commande split permet de convertir les chaı̂nes de caractères en tableau en utilisant le séparateur ,. Utilisez la fonction trace (aVal[i]);
aprè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 préciser la base utilisée.
4. Créez un clip pie ayant sur sa première image un quartier de 3, 6◦ (Voir
figure 5.6)Bien placer la pointe sur la croix +
5. Créez une image clé en 2 et donnez-lui le nom dessin. Effacer l’occurrence
du clip controle sur cette image.
6. Placez une occurrence de pie à l’image dessin et lui donner le nom
quartier
75
Eric Schrafstetter
7. Créez un clip label avec en image 1 une zone de 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 à l’image dessin de la scène principale et lui donner le nom label.
9. Créez un clip symbole avec en image un le dessin d’un petit carré coloré.
Utilisez le panneau info pour placer le centre du carré sur la croix (Ainsi,
les carrés et les noms des labels seront bien alignés)
10. Placez n’importe où une occurrence du clip symbole à l’image dessinde
la scène principale et lui donner le nom carre et les dimensions L = 10
et H = 10
11. Placez sur le calque 1 à 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
76
Eric Schrafstetter
_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();
5.6
Panorama 360
Pour créer assez facilement et gratuitement de vrais panoramas 360◦ (cylindriques ou sphériques), je vous conseille Panotools de Helmut Dersch. Une
petite doc sera bientôt à disposition sur mon site. Ce que nous voulons faire
ici, c’est juste naviguer horizontalement dans un Panorama 360◦ . Il vous faudra
pour cela trouver ou créer une image se raccordant aux 2 extrémités.
1. Importez votre image sous Flash
2. Convertissez-là en symbole ayant pour nom photo
3. Ajustez la taille de votre animation pour que sa largeur soit celle de votre
image.
4. Créez un clip nommé panorama et mettre une occurrence de photo avec
pour nom but à 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
à côté des autres.
77
Eric Schrafstetter
Fig. 5.5 – Aspect de la scène principale
Fig. 5.6 – Le clip pie est un quartier de disque d’angle 3, 6◦
Fig. 5.7 – Résultat après quelques ajustages
78
Eric Schrafstetter
6. Placez l’action suivante à l’image 1 de la scène principale :
demi=_root._width/2;
w=getProperty (_root.nav,_width);
speed=45;
stop();
Vous pouvez modifier la variable speed qui règle la vitesse de défilement.
7. Créez un clip vide nommé 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); à l’image 2.
9. A l’image 1 de la scène principale, placez une occurrence du clip panorama
nommé nav
10. Cliquez sur nav puis CTRL+K pour afficher la fenêtre d’alignement. Choisir :
Vers la scène et répartir horizontalement et verticalement. Ceci permet de
placer l’occurrence au milieu de la scène.
11. Placez également une occurrence du clip dragControl et lui donner l’action :
}
5.7
Rotation autour d’un objet
Voici une manière très élémentaire de créer un effet de rotation 3D autour
d’un objet.
1. Prendre des photos d’un objet en tournant autour (par exemple 8 photos
à 45◦ d’intervalle).
2. Créez un clip nommé objet et placez aux différentes images clés les photos
(par exemple 8).
3. Placez une occurrence de ce clip sur la scène principale et lui donner le
nom objet
4. Créez un clip vide mettre une occurrence de celui-ci sur la scène principale
en X = 0 et Y = 0
79
Eric Schrafstetter
5. Ajoutez l’action suivante à 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 clé 1 de la scène principale, mettre l’action :
nbphotos=8;
stop();
La valeur 8 correspond aux nombres d’images prises de l’objet.
7. Lancez l’animation et déplacez la souris de gauche à droite pour faire
tourner l’objet.
360◦ autour d’un objet (version 2)
5.8
Il s’agit d’une version améliorée du travail dirigé sur la rotation autour d’un
objet précédent. Le curseur prend maintenant la forme d’une main du type Acrobat Reader (fermée ou ouverte) et la rotation s’effectue à partir de n’importe
quel endroit cliqué à l’écran.
5.8.1
Changement de curseur
L’idée est vraiment très simple, on cache le curseur existant et on crée un
clip qui le remplacera !
1. Créez un clip nommé main et dessinez une petite main ouverte sur la croix
sur la première image clée (Utilisez le .fla joint si vous avez des difficultés
pour la dessiner !)
2. Dessinez une main fermée à l’image clée n◦ 2
3. Ajoutez l’action stop(); à la première image clée
4. Revenez sur la scène principale et mettez une occurrence du clip main
n’importe où. Donnez-lui le nom main par Bouton droit - Panneaux Occurrence.
5. Mettre l’action suivante à l’image 1 de la scène principale :
Mouse.hide();
nbimages=20;
courant=1;
stop ();
80
Eric Schrafstetter
La première ligne permet de cacher le curseur de la souris, la variable
nbimages contient le nombre total d’images de l’objet, courant est le
numéro de l’image courante affichée.
6. Associez au clip main l’action suivante :
enfonce = false;
largeur=_root._width/10;
}
_root.main.gotoAndStop(2);
position = _x;
enfonce = true;
}
_root.main.gotoAndStop(1);
enfonce = false;
}
if ((position>_x+largeur) && enfonce) {
_root.courant++;
if (_root.courant>_root.nbimages-2) {
_root.courant = 1;
}
_root.objet.gotoAndStop(_root.courant);
position = _x;
}
if ((position<_x-largeur) && enfonce) {
_root.courant--;
if (_root.courant<1) {
_root.courant = _root.nbimages-2;
}
position = _x;
}
}
Quelques explications sur le script :
– Lors du chargement du script (load), le clip main suivra les mouvements
de la souris et l’on précise ici que la souris n’a pas encore été enfoncée.
– Si l’on presse le bouton de la souris (mouseDown), l’aspect du curseur
change (image 2 comportant la main fermée) et l’on met enfonce à vrai.
De plus, la position actuelle de la souris est mise en mémoire.
– Quand on relâche la souris (mouseUp), la variable enfonce repasse à
faux et l’image redevient la main ouverte.
– Si maintenant on bouge la souris (mouseMove) et que le bouton n’est
81
Eric Schrafstetter
pas enfoncé, il ne doit rien se passer. Si le bouton est enfoncé, on regarde
si la personne a déplacé la souris suffisamment loin de l’origine du clic.
Si c’est le cas, on augmente ou diminue la valeur de courant donnant
ainsi le numéro de l’image à afficher (toujours avec les problèmes aux
bords). On mémorise alors la nouvelle position de la souris.
5.8.2
L’objet
Prenez par exemple 18 photos en tournant autour de l’objet par angles de
20◦ . Ajoutez 2 photos, une de dessus et une de dessous. Dans ce cas, la variable
nbimages sera égale à 18+2=20.
1. Créez un nouveau clip ayant pour nom objet
2. Importez la première image par Fichier - Importer. Faites de même avec les
autres images en vous plaçant aux images clées 2,3... Le plus simple est de
nommer vos photos im1.jpg, im2.jpg... dans ce cas Flash vous proposera
d’importer directement toute la série ! Veillez à ce que les images 19 et 20
soient celles du dessus et du dessous.
3. Ajoutez l’action stop(); à la première image du clip objet
4. Revenez sur la scène principale et insérez une nouvelle couche SOUS celle
contenant la main (sinon la souris sera cachée par l’image). Placez sur
cette nouvelle couche une occurrence du clip objet avec pour nom objet.
5. Ajoutez 3 boutons quelconques sur la scène principale. Au premier bouton
associez l’action :
on (release) {
_root.objet.gotoAndStop(_root.nbimages);
}
Ceci permettra de voir l’image du dessus (ou dessous).
6. De même, au second bouton ajoutez l’action :
on (release) {
_root.objet.gotoAndStop(_root.nbimages-1);
}
7. Et au dernier bouton, qui permet de revenir à la vision de côté :
on (release) {
}
Il ne reste plus qu’à compiler, à appuyer n’importe où sur la scène et à
déplacer la main fermée vers la gauche ou la droite. Pour ressembler encore
plus à QuickTime VR, ajoutez 2 boutons avec des loupes + et - (c’est un petit
exercice facile utilisant les fonctions objet._xscale et objet._yscale)
82
Chapitre 6
Outils de conversions
6.1
Bitmap vers Vectoriel
Il y a des dizaines d’utilitaires pour transformer des images Bitmap en images
Vectorielles ! Cherchez les mots-clé 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 trouvé un petit freeware qui va, je l’espère, vous étonner... En tout
cas je le trouve fabuleux ! Il permet de convertir des .bmp ou .tif 1 bit (cà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. Téléchargez le zip et dézippez
2. Copiez le fichier ras2vec.exe se trouvant normalement dans le ré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-là sous le nom image.bmp (Fichier - Exporter
l’image si vous utilisez Flash)
4. Ouvrez une fenêtre DOS dans le répertoire où est l’image. Tapez la ligne
de commande suivante :
ras2vec -d -m image.bmp
Remarque : Tapez ras2vec pour voir les paramètres possibles. Il est
également possible de faire :
ras2vec -d -m *.bmp
qui convertit toutes les images .bmp en une fois ! ! Supprimez le paramètre
-d si vous voulez une version fil de ferLe paramètre optionnel -e tf avec
tf ∈ [0, 10] définie le seuil de tolérance (10 pour très peu de lignes)
5. Lancez Flash et importez le fichier image.emf créé.
83
Eric Schrafstetter
CHAPITRE 6. OUTILS DE CONVERSIONS
TD - ActionScript
nom.bmp
ras2vec -d -m nom.bmp
ras2vec -m nom.bmp
Fig. 6.1 – Exemple avec un texte
femme.bmp
ras2vec -d -m femme.bmp
ras2vec -m femme.bmp
Fig. 6.2 – Exemple avec une image
84
Eric Schrafstetter
6.2
Images vers swf
Le petit utilitaire gratuit jpeg2swf permet de convertir facilement des images
jpg en swf aux formats Flash 3,4 ou 5. N’apporte pas grand chose par rapport
à l’importation direct de l’image sous flash... Quant à gif2swf, il convertit des
fichiers gif en swf. Attention, il ne transforme pas votre gif en image vectorielle !
Ce logiciel gratuit n’est, à mon humble avis, utile qu’aux personnes ne possédant
pas Flash 5 et voulant convertir des gifs animés en animation Flash.
6.3
Diaporama en swf
Voici un petit programme de mon cru (créé avec Visual Basic en utilisant
la librairie swfobs.dll) qui permet de convertir des fichiers JPG en un unique
fichier SWF. Vous pouvez le télécharger ici : diapo.zip.
6.3.1
Introduction
1. Permet de sélectionner toutes les images d’un répertoire en une fois
2. Possibilité de réarranger les images, de les supprimer...
3. Deux sorties possibles :
– Diaporama autonome avec boutons suivant et précédent
– Format LoadMovie utilisable directement dans une autre animation
Flash
4. Choix de la taille de l’animation, de sa fréquence d’affichage (en frames /
seconde) et de sa couleur du fond
5. La taille des images s’adapte au format de sortie, c’est donc un net avantage par rapport à une manipulation sous Flash
ATTENTION ! Ce programme plantera si vous utilisez des JPG à compression progressive. Il fonctionne parfaitement avec des JPG à compression
standard en 16 millions de couleurs.
6.3.2
Quelques remarques
Pour convertir une vidéo AVI en fichier SWF (avec une bonne compression,
on divise facilement la taille du AVI par 10), la manipulation peut être :
1. Utilisez VirtualDub si vous voulez effectuer des effets spéciaux sur votre
AVI (conversion en noir et blanc, contours, etc...)
2. Utilisez ensuite AVI2JPEG pour décomposer votre animation en images
JPEG à compression standard
3. Lancez Diaporama et ajoutez toutes les images, mettre la dimension de
l’animation à celle des images et la fréquence à celle du AVI d’origine.
La taille du fichier SWF est pratiquement égale à la somme des tailles des
fichiers JPG.
85
Eric Schrafstetter
6.3.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
spéciaux. Permet aussi de convertir des MPG en AVI.
– AVI2JPEG (freeware ou Shareware) : L’outil idéal ! Transforme vos AVI en
images JPG bien numérotées, visualisation de la compression des images
et très simple d’utilisation.
6.3.4
Exemple d’utilisation
1. Utilisez diaporama pour créer une animation anim.swf du type LoadMovie avec un Stop sur la dernière image.
2. Lancez Flash et créez un clip vide
3. Mettre une occurrence de ce clip sur la scène principale et lui donner le
nom film
4. Créez un bouton quelconque et mettre deux occurrences de celui-ci sur la
scène
5. Ajoutez l’action suivante au premier bouton :
on (release) {
_root.film.stop();
}
6. Ajoutez l’action suivante au second bouton :
on (release) {
_root.film.play();
}
7. Ajoutez l’action suivante à la première image clé de la scène principale
loadMovie ("anim.swf", _root.film);
stop();
8. Compilez et lancez l’animation. anim.swf est chargée dans le clip film.
9. Si vous cliquez sur le premier bouton, l’animation s’arrête. Le second permet de redémarrer. Vous pouvez aussi utiliser les actions .nextframe()
et .prevframe().
6.4
Films vers swf
Le logiciel vid2swf permet de convertir des images ou des vidéos en .swf.
6.5
Microsoft Office
6.5.1
La barre de dessin
86
Eric Schrafstetter
La barre de dessin des logiciels Word, Excel ou PowerPoint peut vous être
d’une grande utilité si vous ne possédez pas de logiciel de dessin vectoriel
(Comme Freehand ou CorelDraw)Voici un exemple très simple d’animation 3D
1. Lancez Word et affichez la barre de dessin
2. Dessinez un cube en commençant par un rectangle puis effet 3D
3. Copiez l’image et allez sous Flash. Faites Edition - Collage Spécial puis
choisir Image (métafichier)Le cube apparaı̂t (en vectoriel) à l’écran. Insérez
une image clée vide en 2.
4. Revenir sous Word et afficher la barre de paramètres 3D. Faites tourner
légèrement votre cube et retournez à l’étape précédente !
Cette manipulation fonctionne également pour les graphiques générés par
Excel, les formules mathématiques de l’éditeur d’équations et bien sûr les cliparts
qui peuvent directement être importés sous Flash.
6.5.2
Powerpoint vers Flash
Il n’y a (à ma connaissance) aucun outil permettant la conversion directe
d’un diaporama PowerPoint en Flash. L’idée est pourtant séduisante ! La voie
Powerpoint → XML → Flash semble interesser quelques personnes mais je ne
vois pas comment les animations PPT pourront être conservées de cette manière.
Ceci dit, si vous trouvez que la mise en forme de texte (titres, listes à puces...),
graphiques, organigrammes. . . est plus rapide à faire sous PowerPoint (Nous
sommes d’accord ?) mais que Flash c’est quand même plus sympa (toujours
d’accord ?), alors voici un exercice qui va vous plaire. Plus sérieusement, le mode
Plan sous PowerPoint est assurément plus maniable que la grille sous Flash et, à
titre d’exemple, un petit diaporama (5 diapos sans animation) prenant 35Ko en
format .pps (Diaporama PPT) transformé en .swf (avec quelques animations
et les touches de navigation) passe à 18,3Ko !
1. Lancez PowerPoint
2. Fichier - Mise en page et choisir Diapositives dimensionnées pour affichage
à l’écran.
3. Insérez une diapo de titre ( CTRL+M et 1er choix)
4. Tapez un titre, un sous-titre
5. Insérez une nouvelle diapo avec des listes à puces. Remplir quelques lignes
6. Nouvelle diapo avec un graphique ou un organigramme
7. Nouvelle diapo avec une image bitmap (jpg par exemple)
8. Pour finir, une autre diapo avec un ClipArt de la bibliothèque et/ou une
figure à partir de la barre d’outils de dessin.
9. Faites Format-Jeu de couleurs et appliquez un jeu
10. Enregitrez votre animation sous le nom diapo.ppt
11. Faites Enregistrez-sous et choisir Type : Métafichier Windows (.wmf).
Répondre oui pour que toutes les images soient enregistrées. Remarquez
87
Eric Schrafstetter
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 créé avec toutes les images.
13. Lancez Flash et allez dans Modification - Animation ( CTRL+M)Si votre
écran est par exemple en 800×600 mettre ces valeurs en largeur et hauteur
(Choisir Unités de la règle = Pixels).
14. Mettre une couleur de fond à votre animation
15. Très important ! Faites CTRL+2 ou Affichage - Zoom - Afficher une image
pour bien cadrer votre animation au milieu de l’écran.
16. Placez-vous à l’image 1 de votre animation et Fichier-Importer
17. Recherchez la première diapositive au format .wmf et importez. Flash vous
propose d’importer les autres, répondre oui.
18. Normalement vos diapos PPT doivent être parfaitement centrées dans
l’animation Flash
19. Remarquez aussi que tout est en vectoriel, les organigrammes, les ClipArts,
que les textes peuvent être changés en cliquant 2 fois dessus et que les
éléments des graphiques peuvent également être recoloriés en cliquant 2
fois dessus.
20. Insérez maintenant un nouveau calque sous le calque contenant les diapos
(voir figure 6.3).
21. Créez un clip vide et mettre une occurrence de celui-ci sur la première
image calque 2Associez-lui l’action suivante :
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;
}
88
Eric Schrafstetter
L’idée du script est simple : si l’on tape sur la barre d’espace ou flèche
de droite ou bas ou page suivante, on avancera dans le diaporama par
l’action gotoAndStop. Idem avec les flèches gauche, haut et page précédent
pour revenir à la diapo précédente. J’ai rajouté une action sur la touche
Home qui revient sur la première diapo. Si vous ne voyez pas à quoi sert
la variable libre, supprimez-là ! Simplement, cela évite que le diaporama
défile à toute vitesse si vous vous endormez en visionnant votre diaporama !
La variable libre passe à false si la touche est pressée et bloque le
défilement. Elle revient à true lorsque la touche est relâchée ( keyUp).
22. Utilisez la touche F5 pour étendre l’image clé 1 du second calque jusqu’à
la dernière diapo.
23. Enfin, sur la première image clé du second calque, ajoutez l’action :
fscommand ("fullscreen", "true");
stop();
De sorte que l’animation prendra tout l’écran comme un vrai diaporama
PowerPoint.
24. Compilez, lancez et naviguez avec les flèches du clavier et la barre d’espace.
25. Pour les plus forts qui se demandent comment on peut ajouter un peu
d’animation à tout cela, voilà une idée :
(a) Sélectionnez un ou plusieurs éléments à animer (texte, ClipArt...)
(b) Faites F8 pour le transformer en symbole, par exemple clip_txt
(c) Puis bouton droit - Modifier en place et à nouveau F8 Donnez un
nom, par exemple txt
(d) Animez ce symbole sur la ligne temporelle et ajoutez tous les effets
que vous voulez. Mettre une action stop(); à la fin de cette animation pour éviter de boucler.
26. Pour des fonds en dégradé, je vous déconseille fortement de l’importer
de PowerPoint (essayez pour comprendre !)Ajoutez plutôt sous Flash un
troisième calque avec un grand rectangle couvrant toute la surface et utilisez le pot de peinture.
6.5.3
Flash vers PowerPoint
Voir le paragraphe PowerPoint du chapitre Visualisation.
6.5.4
Powerpoint-Flash ou PDF ?
Le format PDF de la société Adobe permet certaines options assez difficiles
à obtenir en Flash :
1. Pages simples, en continue ou 4 × 4
2. Bookmarks pour une navigation rapide
89
Eric Schrafstetter
3. Recherche de texte
4. Boutons de navigation précédent-suivant.
Je signale ici qu’il est possible de créer des fichiers PDF gratuitement de diffé/rentes façons :
1. HTMLDoc qui convertit du HTML en PDF de façon remarquable (mon
préféré)
2. Installer une imprimante PostScript virtuelle et GhostView (voir explication sur mon site www.chez.com/revo)
3. Utilisez LATEX2e et dvipdfm (Par exemple avec MikTeX pour windows)
4. Avec PHP et la librairie PDFLib...
Revenons à nos moutons ! Le tandem PowerPoint - Flash peut parfois être une
alternative au PDF. Outre évidemment la possibilité d’ajouter des animations,
Flash permet de définir l’impression de pages spécifiques. Voici un exemple :
1. Lancez PowerPoint et Fichier-Mise en Page. Choisir Diapositives dimensionnées pour format A4.
2. Cré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 : Métafichier windows (wmf)
4. Les différents fichiers wmf sont créés. Lancez Flash et Modification-Animation,
choisir Unités en centimètres et taille = 21 × 29, 7 cm
5. Faites CTRL+2 pour centrer l’image sur la scène.
6. Importez la première diapo et cliquez sur oui pour insérer toute la série.
7. Cliquez sur une image à imprimer et choisissez Fenêtre - Panneaux - Image
( CTRL+F)Mettre Etiquette = #p
8. Faites la même chose avec d’autres diapos (pas toutes pour voir l’intérêt
de la manipulation).
9. Créez un nouveau clip nommé commandes. Dans ce clip, placez un bouton
représentant une flèche vers la gauche, un autre bouton avec une flèche
vers la droite, un dernier représentant une imprimante et ajoutez un fond
représentant une fenêtre (voir figure 9).
10. Au bouton avec la flèche vers la gauche ajoutez l’action :
on (release) {
_root.gotoAndStop(_root._currentframe-1);
}
11. Au bouton avec la flèche vers la droite ajoutez l’action :
on (release) {
_root.gotoAndStop(_root._currentframe+1);
}
90
Eric Schrafstetter
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 lancé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)
13. Sur la scène principale, ajoutez un calque nommé action au dessus de
celui réservé aux diapos.
14. Sur la première image de ce calque, mettre une occurrence du clip commandesAjoutezlui l’action :
startDrag ("");
} else if (!_visible) {
_visible=true;
}
}
stopDrag ();
}
Ceci permet de déplacer la barre de navigation qui pourrait gêner la lecture. Lorsque l’on presse sur l’imprimante la barre disparaı̂t (pour ne pas
être imprimée) et réapparaı̂tra lorsque l’on pressera le bouton de la souris.
Vous pouvez également ajouter un petit effet alpha sur l’occurrence du
clip...
15. Ajoutez l’action stop(); à la première image du calque action.
16. Etendre par F5 la première image du calque action de la commande
jusqu’à la dernière diapositive.
17. Compilez, lancez et testez les boutons de la barre de navigation.
91
Eric Schrafstetter
Fig. 6.3 – Les deux calques de la projection
Barre de navigation
Fig. 6.4 – La barre de navigation.
92
Chapitre 7
SmartClips
7.1
Variateur
Nous cherchons à construire un variateur ressemblant à la figure 7.1.
label
10
-50
0
50
Fig. 7.1 – Le variateur : un label et un curseur mobile
Le SmartClip aura pour paramètres les variables nom (nom de l’occurrence),
min et max.
1. Créez un clip triangle ayant la forme d’un petit triangle C qui servira
de curseur.
2. Créez un bouton bouge ayant sur ses 4 images clés le clip triangle (vous
pouvez bien sûr créer des variations !)
3. Créez un clip curseur où vous placerez une occurrence du bouton bouge
avec la pointe gauche en X = 0 et Y = −50 (relativement à la croix
centrale).
93
Eric Schrafstetter
CHAPITRE 7. SMARTCLIPS
on (press) {
startDrag ("", false, 0, 100, 0, 0);
_parent.gotoAndPlay(2);
}
stopDrag ();
_parent.gotoAndPlay(1);
}
5. Nous allons maintenant créez un clip compteur contenant une occurrence
du clip curseurLorsque l’utilisateur pressera le bouton caché dans le clip
curseur, le clip compteur bouclera entre les images 2 et 3, permettant de
récupérer la hauteur actuelle du triangle.
6. Créez un clip compteur avec 3 couches : une pour les actions, une où vous
mettrez une occurrence du clip curseur (avec son centre en (0,0)) en lui
donnant le nom base et une où 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;
}
Qui permettra d’initialiser la variable label.
8. Etendre par F5 l’image du clip et de la zone de texte dynamique jusqu’à
l’image 3 du clip compteur.
9. A la première image clé du clip, mettre l’action stop();
10. Mettre l’action suivante à l’image 2 du même clip :
temp=min+(100-base._y)*(max-min)/100;
label=Math.round (100*temp)/100;
11. Mettre l’action gotoAndPlay (2); à l’image 3.
12. Ouvrez la bibliothèque puis faites Bouton droit - Définir les paramètres
du clip sur compteur.
Nom
nom
min
max
Valeur
c1
-1
1
Type :
Default
Default
Default
13. Retournez sur la scène principale et mettre une occurrence de compteurFaire
Bouton droit - Panneaux - Paramètres du clip et saisir :
Nom
nom
min
max
Valeur
x
-4
1
Type :
Default
Default
Default
14. Lancez l’animation et déplacez le curseur, la valeur change entre min et
max.
94
Eric Schrafstetter
7.2
Fenêtres volantes
Titre
Le contenu de la fenêtre
sera ici !
OK
Fig. 7.2 – Apparence de la fenêtre
1. Créez un bouton ayant la forme d’un rectangle ressemblant à une barre
de titre d’une fenêtre Windows (voir figure 7.2)
2. Créez le bouton OK et celui ayant la forme d’une croix.
3. Créez un clip nommé message et mettre l’action suivante à la première
image nommée off :
_name=nom;
stop();
4. Mettre l’action stop(); à la seconde image nommée on de ce clip.
5. Assurez-vous que la scène du clip message est vide à l’image 1A l’image
2, placez le dessin d’une fenêtre (voir figure 7.2) avec 2 zones de textes
dynamiques nommées titre pour le titre et contenu pour la zone qui
servira à recevoir la phrase principale. Placez également les boutons créés
à l’étape 1 à leurs places.
6. Associez l’action suivante aux boutons OK et à la croix :
on (release) {
gotoAndStop (1);
}
Ceci permettra de faire disparaı̂tre la fenêtre (l’image clé 1 du clip étant
vide).
7. Associez l’action suivante au bouton servant de barre de titre :
on (press) {
startDrag (_parent.nom);
}
95
Eric Schrafstetter
stopDrag ();
}
8. Ouvrez la bibliothèque et faites Bouton droit sur Message puis Définir les
paramè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 à la scène principale et placez une occurrence du clip (SmartClip
maintenant !) messageUn petit cercle apparaı̂t (encore une fois, parce que
l’image clé 1 du clip est vide)Sur l’occurrence, faites Bouton droit - Panneaux - Paramètres du clip. Mettre :
Nom
nom
titre
contenu
Valeur
fen1
Mon titre
Je tape mon texte ici
10. Créez un bouton quelconque et placez-en une occurrence sur la scène principale avec l’action :
on (release) {
_root.fen1.gotoAndPlay("on");
}
11. Lancez l’animation et cliquez sur le bouton. La fenêtre apparaı̂t. Placezvous sur la barre des titres et déplacez la souris. Cliquez sur OK ou sur la
croix pour fermer.
12. Vous pouvez placer plusieurs occurrences du SmartClip en leur donnant
des paramètres différents.
7.3
Bibliothèque commune
Création de boutons radio :
1. Ouvrir la bibliothèque commune de SmartClips
2. Placez 2 occurrences de RadioButton sur la scène principale.
3. Faire Bouton droit sur le premier SmartClip et Panneaux - Paramètres du
clip. Entrez :
_name=homme
checked=true
label=homme
style=Mac
96
Eric Schrafstetter
Le premier paramètre permet de définir le nom de l’occurrence, le second
précise que le bouton est enfoncé, le troisième est le nom visible sur la
scène et le dernier le style du bouton.
4. Faı̂tes de même avec le second SmartClip en mettant :
_name=femme
checked=false
label=femme
style=Mac
5. Mettre l’action stop(); à l’image 1 de la scène principale.
6. Créez sur la scène principale une zone de texte dynamique de nom de
variable choix
7. Créez un bouton quelconque et placez-le sur la scè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 être égale à true. Cliquez maintenant sur le
bouton radio femme puis le bouton, choix passe à false.
9. Inversement, l’action :
on (release) {
choix=_root.homme.setState(true);
}
permet de sélectionner le bouton homme.
7.4
SmartClip Calendrier
Je vois pas mal d’animations Flash comportant des calendriers et la plupart
ont sans doute été faits ’à la main’. Voici donc un petit exercice qui permet de
créer un SmartClip ayant 3 paramètres : une année, un mois et une dimension.
Le résultat sera la création du calendrier correspondant.
1. Créez un clip nommé jour, y placez une zone de texte dynamique avec
pour nom de variable numero, décochez ’sélectionnable’ et cochez ’Bordure’. Une fois que vous aurez compris l’exercice, vous reviendrez certainement améliorer cette partie (couleur, bouton, animations...).
2. Ouvrez la bibliothèque par Fenêtres - Bibliothèque ( CTRL+L) et bouton
droit sur jour puis Liaison.
3. Choisissez ’Exporter ce symbole’ et lui donner le nom jour
4. Créez un nouveau clip nommé calend et mettre l’action suivante à l’image
1 de ce clip :
97
Eric Schrafstetter
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 :
– La fonction getDay renvoie 1 pour lundi, 2 pour mardi et 0 pour di-
98
Eric Schrafstetter
manche.
– Le mois de janvier a pour valeur 0 dans Flash, ce qui explique le mois-permettant de transformer le paramètre mois du SmartClip au bon
format.
– La fonction attachMovie permet de dupliquer un élément de la bibliothèque comportant une liaison. Il faut également préciser le niveau
de chargement en troisième paramètre.
– La première boucle affiche les cases comportant les noms des jours de
la semaine.
– On trace ensuite dans la seconde boucle 48 cases avec dans chaque case
le numéro du jour (récupéré par la fonction getDate). Bien sû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
– Il faut bien comprendre que Flash accepte très bien des dates du type
Date(2001,7,45) ou Date(2001,7,-5) ! Cela évite de regarder si le
mois comporte 28,29,30 ou 31 jours...
– Si le premier jour du mois est un dimanche (valeur 0), on la met à 7
– Pour corser, on décide de mettre un effet alpha sur les dates qui ne sont
pas dans le mois (fin du mois précédent et début du mois suivant). Pour
cela, la variable aff est à faux au début (nous ne sommes pas dans le
mois), on attend d’entrer dans le mois (test jour == 1), la variable aff
passe alors à vrai et les dates sont affichées normalement. Le mois sera
terminé quand la date repassera à 1 mais que jour sera différent de 1.
5. Ouvrez à nouveau la bibliothèque et bouton droit sur calend puis ’Définir
les paramètres du clip’. Utilisez le bouton + pour définir les paramètres
suivants :
Nom
cote
annee
mois
Valeur
20
2001
7
La variable cote correspondra à la largeur en pixels de la zone de texte
dynamique que vous avez placée dans le clip jour. Vous pouvez également
placer une bonne fois pour toutes les cases du calendrier avec les noms j1,
j2...
6. Revenir à la scène principale et y mettre une occurrence du SmartClip
calend. C’est juste un petit cercle à l’écran correspondant au coin haut
gauche du futur calendrier.
7. Faites bouton droit sur cette occurrence et Panneaux-Paramètres du clip.
Mettez une longueur pour cote, une année et un mois.
8. Mettre éventuellement d’autres occurrences du SmartClip avec d’autres
mois ou années...
9. Compilez et lancez l’animation.
99
Eric Schrafstetter
Pour terminer, si vous désirez briller dans une soirée (ou vous faire jeter !),
lisez donc ma page consacrée à la recherche mentale d’un jour de la semaine sur
www.univ-angers.fr/cufco/schraf/semaine.htm. Et pour vous entraı̂ner, utilisez
ma petite animation Flash jointe.
100
Chapitre 8
Jeux
8.1
Le morpion
Règles du jeu
Le jeu se compose d’un plateau à 9 cases. Chaque case peut être allumée
(visible) ou éteinte (invisible)La position de départ est choisie au hasard, par
exemple :
◦
◦
◦
◦
◦
Il s’agit par des manipulations d’obtenir la figure :
◦
◦
◦
◦
◦
◦
◦
◦
Les manipulations
– Cliquer sur un coin inverse les 4 cases contiguës à ce coin. Inverser signifiant que si une case est allumée, elle s’éteint et inversement.
– Cliquer sur le milieu d’un côté inverse les 3 cases de ce côté.
– Cliquer sur la case centrale inverse les 5 cases suivant une croix +.
Création du jeu
1. Créez un bouton bt avec le dessin d’une boule sur Haut, Dessus, Abaissé
et Cliqué
2. Créez un clip b et placez une occurrence du bouton bt à l’image 1Associez
à cette occurrence l’action :
101
Eric Schrafstetter
CHAPITRE 8. JEUX
on (release) {
choix = Number(this._name.charAt(1));
_root.x = _root.x ^ _root.change[choix];
_root.score = _root.score ^ (1 << choix);
_root.aff(_root.x);
if (_root.x == 495) {
_root.gotoAndPlay("fin");
}
}
C’est la partie centrale du programme. La première ligne va permettre de
savoir quelle case a été choisie. Pour cela, on récupère le nom de l’occurrence (this._name) qui est de la forme bi avec i entre 1 et 9Ensuite, la
fonction .charAt(1) permet d’atteindre le second caractère (le premier a
pour position 0), soit "1" ou "2" etc. Le numéro (entre 1 et 9) s’obtient
par Number.
La seconde ligne utilise la fonction ou exclusif (XOR) notée ^ en ActionScript. La table de vérité de cette fonction logique est :
a
0
0
1
1
b
0
1
0
1
a∧b
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 calculée par
x^change[choix].
La ligne 3 permettra de trouver le score final (voir plus bas).
3. Maintenant, ouvrez la bibliothèque et faire Bouton droit - Liaisons sur le
symbole bChoisir Exporter ce symbole et lui donner comme identifiant
bouton.
4. Revenez sur la scène principale et créez une image clé 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 départ
x = Math.floor(512*Math.random());
102
Eric Schrafstetter
CHAPITRE 8. JEUX
// Table des changements en décimales
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);
– Nous utilisons attachMovie au lieu de DuplicateMovie puisque nous
n’avons pas placez d’occurrence du clip b sur la scène.
– La boucle permet de créer 9 répliques de b en leur attribuant les noms
b1,. . .,b9 suivant la disposition :
b1 ◦
b4 ◦
b7 ◦
b2 ◦
b5 ◦
b8 ◦
b3 ◦
b6 ◦
b9 ◦
– Explication de la table des changements : une case de du jeu pouvant
ê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 intéressant d’utiliser sa conversion en base 10 :
1001101102 = 0 + 1 × 10 + 1 × 102 + . . . + 1 × 108 = 31010
En utilisant les règles décrites plus tôt, cliquer sur la case 1 revient à
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 réactualiser l’affichage à chaque coup
du joueur.
103
Eric Schrafstetter
CHAPITRE 8. JEUX
5. Insérez maintenant une image clé nommée affiche à l’image 2 de la scène
principale et placer l’action :
stop();
6. Insérez une image clé nommée fin à l’image 3 de la scè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 à voir que le nombre maximum de coups nécessaires
à résoudre le problème est 9Si le joueur appuie sur une case puis, plus
tard, appuie à nouveau sur cette même case, il était en fait inutile de
s’en servir (D’un point de vue strictement mathé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 étaient effectivement nécessaires
grâce à la boucle.
7. Placez à cette même image clé une zone de texte dynamique de nom score.
8. Lancez le programme et essayez de résoudre le puzzle ! Ajoutez éventuellement
un bouton permettant de réinitialiser le jeu.
8.2
Jeu de l’Hexagone
Comment décoder le jeu de l’hexagone ? Au moyen des chiffres sur les différentes
cases. Chaque chiffre indique le nombre de cases rouges que comporte l’ensemble
formé par cette même case et celles qui lui sont contigües. Un exemple de solution est donné figure 8.2. Le but de ce travail dirigé est de créer un programme
générant aléatoirement ce type d’hexagone et.. de pouvoir y jouer !
8.2.1
Les problèmes
1. Comment dessiner l’hexagone ? Au moyen d’un unique clip comportant 2
images clé (une boule bleue et une boule rouge). La taille de l’hexagone
dé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 générer les cases rouges ? Grâce aux fonctions Math.random et
Math.floor. Pour tirer des chiffres 0 ou 1 avec la même probabilité, la
formule suivante convient :
104
Eric Schrafstetter
CHAPITRE 8. JEUX
Fig. 8.1 – Aspect du bouton bouton
Fig. 8.2 – La solution de l’Hexagone
105
Eric Schrafstetter
CHAPITRE 8. JEUX
Math.floor(2*Math.random())
Si vous voulez utiliser des probabilités non uniformes (par exemple, la
boule sera rouge dans 60% des cas), utilisez plutôt la formule :
1*(Math.random()<0.6)
Le test Math.random()<0.6 renvoie Vrai dans 60% des cas qui, multiplié
par 1, donne 0 ou 1.
4. Comment mémoriser les cases ? On utilise un tableau nommé lignes.
Remarquez que l’hexagone a 2nb-1 lignes et que la longueur des lignes
augmente de nb à 2nb-1 puis rediminue jusqu’à 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;
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 à gauche (formant un <) correspondent à lignes[i][0] pour i de 0 à 2nb-2
5. Comment calculer les valeurs des cases ? La valeur dépend de 7 cases.
Remarquez que même si lignes[-1][-1] n’a pas de sens, Flash ne plante
pas et peut être utilisé dans les calculs. Le test est inversé entre les cases
du haut de l’hexagone et celles du bas. La ligne centrale ( i=nb-1 est à
traiter à 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];
}
8.2.2
Le clip pion
1. Créez un clip nommé pion et dessinez une boule bleue de diamètre 50
(Panneau info) à sa première image clé.
2. A sa seconde image clé, tapez sur F6 pour insérer une nouvelle boule au
même endroit et coloriez-la en rouge
106
Eric Schrafstetter
CHAPITRE 8. JEUX
3. Ajoutez une couche pour le texte et une pour un bouton
4. Sur la couche bouton, insérez à l’image 1 un bouton transparent (dessin
d’un disque sur l’image clé Cliqué) 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 à l’image 2 et
réciproquement. Le test du dessous est moins évident... Si la case cliquée
contient effectivement une case rouge (test de la valeur de lignes[i][j])
et si nous sommes à l’image courante 2 (A l’affichage, la boule est rouge),
alors le joueur a trouvé une boule, sinon, l’image vient de passer au bleu
et le joueur vient d’éliminer une boule qui était bonne. Inversement, si la
case ne contient pas de boule rouge et que l’image courante passe à 1, le
nombre de bonnes boules augmente de 1, sinon il perd 1 point.
5. Ajoutez sur la couche texte, une zone de texte avec pour nom de variable
valeur. Ce sera le nombre affiché sur la boule.
8.2.3
Le clip plateau
Créez un clip nommé plateau. A sa première image clé, 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];
}
}
107
Eric Schrafstetter
CHAPITRE 8. JEUX
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 à trouver
– La variable trouve contient le nombre de boules effectivement trouvées
par le joueur
√
– La hauteur entre 2 lignes de l’hexagone est h = d 23 où d est le diamètre
de la boule.
– On ajoute 3 propriétés aux clips pioni_j, à savoir leurs coordonné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 scène principale une occurrence du clip pion.
8.2.4
Scène principale
1. A la première image clé de la scène principale, mettre une action stop().
2. Placez un bouton quelconque avec l’action
on (release) {
play ();
}
Ce bouton permettra de lancer le jeu.
108
Eric Schrafstetter
CHAPITRE 8. JEUX
3. Mettre une zone de texte de saisie avec pour nom nb, l’utilisateur pourra
ainsi préciser le niveau de jeu.
4. A l’image 2 de la scène principale, mettre une occurrence du clip plateau
avec pour nom plateau.
5. Toujours à l’image 2, mettre une action stop()
6. A l’image clé 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 première image par
l’action :
on (release) {
gotoAndPlay (1);
}
8.3
Le tangram
Il s’agit de recréer le jeu classique du tangram .
Fig. 8.3 – Les 7 pièces du Tangram
1. Ouvrez tangram.fla et CTRL+L pour visualiser sa bibliothèque
2. Créez une nouvelle animation et enregistrez-la sous mon_tangram.fla
3. Créez un bouton nommé b_carre et mettre à sa première image une occurrence du graphique carre (à prendre dans la bibliothèque de tangram.fla
)
4. Etendre par F5 jusqu’ a l’image clée nommée ”Cliqué” (Eventuellement,
mettre un effet de couleur sur l’image ”Dessus” en insérant une autre
image clée)
109
Eric Schrafstetter
CHAPITRE 8. JEUX
5. Créez un nouveau clip nommé c_carre et placez à sa première image
une occurrence du bouton b_carre . Pourquoi mettre un bouton dans un
clip ? Afin d’utiliser la commande startDrag qui permet de déplacer un
clip (mais pas un bouton).
6. Ajoutez l’action suivante à ce bouton :
on (press) {
_root.cible = _target.slice(1);
startDrag ("");
swapDepths(1);
}
stopDrag ();
}
Que se passe-t-il ? Lorsque l’on pressera le carré, 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 carré au premier plan.
7. Revenez sur la scène principale et placez une occurrence du clip c_carre
8. Recommencez les manipulations précédentes avec les 2 autres types de
pièces (Un grand triangle et un losange). Les noms des clips seront c_triangle
et c_losange .
9. Créez un nouveau bouton nommé b_touches
avec une image quelconque uniquement sur l’image clée ”Cliqué” (nous
aurons alors un bouton transparent)
10. Mettre une occurrence du bouton b_touches
sur la scène principale (si possible en dehors de l’animation elle-mê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 --;
110
Eric Schrafstetter
CHAPITRE 8. JEUX
}
on (keyPress "<down>") {
this[_root.cible]._y ++;
}
Explication Lorsque l’on clique sur une pièce, la variable cible récupère
son nom (”instance8” par exemple). Si maintenant nous appuyons sur la
touche <espace> ( <space> ), l’objet cible va tourner de 45◦ à droite. Idem
avec la touche . Les flèches du clavier permettent de déplacer la pièce dans
les 4 directions.
11. Mettre sur la scène principale 5 occurrences du clip c_triangle et 1 occurrence du clip c_losange .
12. Les 2 petits triangles s’obtiennent par réduction de 50% des
grands tri√
2
angles et le triangle moyen par une réduction de 70,7% (= 2 )
13. A la première image clée de la scène principale, ajoutez l’action :
cible="";
stop ();
Ainsi, la variable cible étant vide, les touches <space> , <up> .. seront
inopérantes.
14. Attention, la touche <backspace> (rappel arrière) ne fonctionnera pas en
mode ”Tester l’animation”. Il faut publier par F12 .
8.4
Votre Tetris
Le but est de vous aider à 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)
– www.gauss2001.com/red.htm (en Flash)
8.4.1
La brique de base
La première astuce va être d’utiliser un unique clip pour à la fois représenter
une brique ou une case vide (ou une couleur quelconque pour les plus forts). Il
suffit pour cela de mettre à ses différentes images clés les images voulues. Le
déplacement d’une brique sera alors un effet d’optique, celui consistant à effacer
cette case et à allumer celle juste en dessous.
– Créez un clip nommé carre avec sur sa première image clé un petit carré
noir (pour vide) de côté 20x20 (Utilisez la fenêtre info).
– Par F6 sur sa seconde image clé, coloriez le nouveau carré en rouge, ce
sera l’apparence de notre brique.
– Mettre une occurrence de ce clip sur la scène principale et lui donner le
nom base (fenêtre Occurrence).
111
Eric Schrafstetter
8.4.2
CHAPITRE 8. JEUX
Les pièces
Fig. 8.4 – Les 7 pièces de base
L’apparence même des différentes pièces sera sauvegardée dans des variables
I, T , L, D, J, S1 et S2. L’ensemble des pièces sera enregistré dans un tableau
pole.
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 accède alors à une case par la commande pole[k][i].
8.4.3
Le plateau
Nous allons bien sûr nous utiliser le clip précédent pour créer le plateau.
Sachant que celui-ci a pour dimension 10x20 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 scène. Les coordonnées du plateau seront mises dans un tableau
nommé field et initialisé par :
field = new Array();
112
Eric Schrafstetter
CHAPITRE 8. JEUX
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 première composante d’un tableau est field[0] et non field[1] .
8.4.4
La pièce suivante
Afin d’afficher la pièce suivante, dupliquez 9 fois par copier-coller le clip
base présent sur la scè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
Exemple
Nous utiliserons alors une fonction aff_suivant pour afficher la pièce suivante, cette fonction sera mise dans la partie initialisation du programme principal :
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 pièce suivante (0 = vide, 1 =
brique). Les fonctions gotoAndStop permettent d’afficher le carré noir (image
1) ou le carré rouge (image 2).
8.4.5
Le bouton commande
Désignons par X le numéro de la ligne et Y celui de la colonne de la case
en haut à gauche de la pièce qui tombe. L’apparence de la pièce courante est
enregistrée dans le tableau item.
113
Eric Schrafstetter
CHAPITRE 8. JEUX
item[1]
item[4]
item[7]
item[2]
item[5]
item[8]
item[3]
item[6]
item[9]
Nous ne pourrons pas déplacer cette pièce à gauche si :
– Y vaut 1 (première colonne) et la pièce courante n’est pas vide sur sa
colonne de gauche (item[1], [4] et [7]).
– Y vaut 0 et la piè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 déjà une pièce à gauche qui bloque.
On récupère les valeurs des 9 cases de gauche associées à la pièce courante
en effectuant une boucle for.
Si le test passe avec succès, on supprime la pièce courante par la fonction supp_piece() , on décrémente Y de 1 et on affiche la nouvelle pièce par
aff_piece(). Le raisonnement est identique avec le bord droit.
Concernant la touche ” flèche vers le haut ” qui permet de faire pivoter la
pièce, les problèmes sont :
– Si Y vaut 0 (et donc item[1]=item[4]=item[7]=0), on ne pourra pas tourner
la pièce vers la gauche si item[2] ou item[3] valent 0.
– Si Y vaut -1 (les 2 premières colonnes de la table item sont vides), on ne
pourra tourner que si item[3] et item[6] sont vides.
Même chose avec le bord droit.
Dans le cas où on peut tourner, on utilise un tableau auxiliaire rot pour
mémoriser la position de la nouvelle pièce puis on vérifie comme avec les touches
gauche et droite que l’on peut placer cette pièce. Si c’est le cas, item devient rot
et on affiche la pièce. Voir compléments à la fin du document pour la formule
contenant Math.floor et %.
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;
114
Eric Schrafstetter
CHAPITRE 8. JEUX
}
}
}
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;
}
115
Eric Schrafstetter
CHAPITRE 8. JEUX
}
}
supp_piece();
for (i=1; i<10; i++) {
item[i] = rot[i];
}
aff_piece();
}
8.4.6
Suppression d’une ligne
La hauteur des pièces ne dépassant pas 3, il y a 3 tests à effectuer pour savoir
si des lignes seront supprimé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);
116
Eric Schrafstetter
CHAPITRE 8. JEUX
}
}
Les lignes au dessus de celle supprimée doivent être décalé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) {
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;
}
}
}
}
8.4.7
Le tempo
Si le joueur ne touche à rien, la pièce doit tout de même tomber seule. Comment temporiser sa vitesse ? L’astuce consiste à mémoriser à une certaine image
un instant de départ et à effectuer une boucle avec l’image clé suivante jusqu’à
ce qu’un intervalle de temps se soit écoulé. 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);
}
117
Eric Schrafstetter
CHAPITRE 8. JEUX
La fonction getTimer() renvoie le nombre de millisecondes depuis le début
de l’animation. L’instant de départ est mémorisé dans time et la boucle s’effectue entre les images 3 et 4 jusqu’à ce que la variable Now soit supérieure à
time+TO où TO est un temps d’attente en fonction du niveau de jeu (voir plus
bas).
8.4.8
Niveaux et score
La vitesse s’obtient en changeant la valeur de TO , le numéro de la pièce se
tire par Math.random() . Par exemple :
TO = (15-LEVEL)*80;
k = Math.floor(7*Math.random());
On mémorise la forme de la pièce courante et suivante par la boucle :
for (i=1; i<10; i++) {
item[i] = next[i];
next[i] = pole[k][i];
}
8.4.9
Compléments
Tests logiques
On suppose que X1, X2. . . valent 0 ou 1. Les tests suivants sont équivalents :
X1 6= 0 ou X2 6= 0 ou ...
X1 6= 0 et X2 =
6 0 et ...
⇔
⇔
X1 + X2 + ... 6= 0
X1 × X2 × ... 6= 0
Tableau indexé
Considérons un tableau indexé de la façon suivante :
0
3
6
1
4
7
2
5
8
Comment récupérer le numéro de la ligne et de la colonne connaissant l’indice
de la case ?
Remarquez que la colonne est le 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 2. La commande ActionScript
La ligne est donnée par 1+ la division de l’indice par 3. Par exemple, si
l’indice est 5, 5 divisé par 3 donne 1 (sans virgule) qui ajouté de 1 donne bien
la 2e ligne. La commande ActionScript correspondante est 1+Math.floor(i/3).
118
Eric Schrafstetter
8.4.10
CHAPITRE 8. JEUX
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++) {
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 () {
119
Eric Schrafstetter
CHAPITRE 8. JEUX
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;
LEVEL = 1;
field = new Array();
for (i=1; i<=201; i++) {
field.push(0);
}
stop();
Image 2
120
Eric Schrafstetter
CHAPITRE 8. JEUX
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);
}
}
121
Eric Schrafstetter
CHAPITRE 8. JEUX
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);
}
}
TO = (15-LEVEL)*80;
k = Math.floor(5*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);
122
Eric Schrafstetter
CHAPITRE 8. JEUX
}
Image 3
Now=getTimer();
Image 4
if (Now<time+TO) {
gotoAndPlay (3);
} else {
gotoAndPlay (2);
}
Image 5
gotoAndPlay (2);
Image 6
FIN
8.5
Les machines de Turing
Fig. 8.5 – Alan Turing
8.5.1
Alan Turing
Logicien, spécialiste de cryptologie, professeur à Cambridge. Dès 1937, Turing ”inventa” des machines abstraites, machines de Turing censées interpréter
des instructions logiques préfigurant la théorie des algorithmes récursifs et la
123
Eric Schrafstetter
CHAPITRE 8. JEUX
construction des ordinateurs : ce terme fut proposé en France, en 1955, par
Jacques Perret.
Turing mit ses compétences aux services de l’armée britannique lors de la
seconde guerre mondiale (1943), en concevant avec Max Newman le Colossus
1, ordinateur capable de déchiffrer les codes de la célèbre machine allemande
Enigma, d’origine hollandaise et utilisée pour la transmission des messages secrets. Turing contribuera aussi à la mise en place du premier puissant ordinateur : le Mark 1, qui vit le jour à Harvard (U.S.A.). P oursuivi en Angleterre
(après la guerre) pour homosexualité, Turing se suicida.
8.5.2
Description de la machine
Une machine est composée d’un ruban pouvant comporter des symboles
(lettres, chiffres...), d’une tête de lecture/écriture et d’une variable d’état. La
tête peut avancer ou reculer d’une case sur le ruban, lire un symbole et agir en
conséquent (écriture d’un nouveau symbole, déplacement à droite ou à gauche).
8.5.3
Exemple de machine
Nous allons voir un exemple de machine comptant en binaire. C’est-à-dire
affichant successivement sur le ruban les nombres :
s00000
s10000
s01000
s11000
s00100
...
Il faut évidement pas mal réfléchir pour créer le programme... Analysons
celui que je vous propose :
Si état
0
0
0
1
1
et si case est
s
0
1
1
0
Mettre nouvel état à
1
0
0
1
0
et écrire
s
0
1
0
1
Puis aller à
>
<
<
>
<
La machine partira avec l’état 0 sur le symbole s.
– La première ligne fait passer l’état de la machine de 0 à 1 lorsqu’elle
rencontre le caractère s sur le ruban. Puis nous allons vers la droite.
– La seconde ligne nous dit que si la machine est dans l’état 0 (donc nous
n’avons pas trouvé ou retrouvé le caractère s) et que le caractère sur le
ruban est un 0, on ne fait rien (en fait on réécrit le 0) et l’on retourne vers
la gauche.
– Idem avec l’état 0 et la valeur 1. Nous sommes donc à la recherche du
caractère s placé à gauche.
124
Eric Schrafstetter
CHAPITRE 8. JEUX
– Si maintenant nous sommes dans l’état 1 (nous venons donc de voir le
caractère s quelques instants avant) et que le caractère sur le ruban est
un 1, nous restons dans cet état mais nous mettons un 0 à la place puis
continuons vers la droite.
– Toujours à l’état 1, si le caractère est un 0, nous le faisons passer à 1,
remettons l’état à 0 (ce qui forcera la machine à retrouver le s à 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, vérification
d’un bon parenthè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 caractères dans vos programmes mais
pas & et +. Utilisez le caractère _ pour noter une case VIDE.
8.5.4
Simulation sous Flash
Le but de ce tutorial est de créer une machine de Turing capable de lire un
programme, un état ainsi qu’un ruban de départ et de lancer la simulation.
8.5.5
Création de programmes
Les programmes seront tapés dans des fichiers .txt (ou tout autre extension !) et la liste sera elle-même tapée dans un fichier nommé liste.txt. Par
exemple, dans le cas où nous avons 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 à la fin, une variable fin dont
la valeur est mise à 1. Ceci permettra à Flash de savoir que le chargement des
données est terminé et de passer à la suite.
Voici le contenu du fichier inc.txt (incré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&
125
Eric Schrafstetter
CHAPITRE 8. JEUX
Remarquez bien que les lignes du programme sont séparées par des retours
chariot pour des commodités de lecture. Il faudra que Flash repère ces retours à
la ligne lorsqu’il enregistrera le contenu du programme dans une variable prgm.
De plus les instructions sont séparées par des virgules.
Le ruban initial est mis dans la variable ruban, l’état initial dans etat et
toujours la variable de fin de chargement.
8.5.6
Chargements
Voici l’idée principale concernant le chargement de la liste des programmes
ou des programmes eux-mêmes :
1. Mettre un bouton sur la scène principale avec pour action :
on (release) {
fin = 0;
loadVariablesNum ("liste.txt", 0);
gotoAndPlay ("charge");
}
On met la variable fin à 0, précisant ainsi que le chargement n’est pas
fini. On commence ensuite à charger les variables au niveau de la scène
principale (niveau 0) et on saute vers l’image de nom "charge".
2. A l’image clé nommée "charge", mettre l’action :
if (Number(fin)>0) {
gotoAndPlay ("suite");
}
On regarde si la valeur de la variable fin est passée à 1. Si c’est le cas, on
passe à la suite de l’animation.
3. A l’image clé suivante, mettre l’action :
gotoAndPlay (_currentframe-1);
qui permet de retourner à l’image "charge".
Ainsi, lorsque nous arrivons à l’image clé "suite", nous sommes sûrs que
toutes les variables ont été chargées.
8.5.7
Conversions
Si vous ne connaissez pas les fonctions join et split, vous allez pouvoir observer leur puissance respective ! Commençons par afficher la liste des différents
programmes disponibles à l’écran.
1. A l’image clé "suite" de la scène principale, mettre une zone de texte
dynamique sur plusieurs lignes avec pour nom liste.
2. Après le chargement des variables, la variable aff contient tous les programmes sous la forme :
126
Eric Schrafstetter
CHAPITRE 8. JEUX
aff=palind.txt,inc.txt,addition.txt
Nous voulons que les noms soient affichés par ligne dans la zone liste. Il
suffit d’ajouter l’action suivante à l’image clé "suite" :
affprg = aff.split(",");
liste = affprg.join("\r");
stop ();
La première ligne va permettre de cré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 caractères séparée par le caractère "\r" (ou chr(13)) qui est le
code du retour chariot.
Chargement du programme :
L’idée est la même, un bouton invisible est placé 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 été choisie (regardez le code source du
.fla). On peut alors charger les nouvelles variables comme précédement.
1. La variable aff contient le programme à 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 Dé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 à la fin de chaque ligne, un retour chariot ( \r) et un saut de
ligne ( \n) !
4. Voici maintenant la manipulation fondamentale de ce tutorial, à savoir,
effectuer un Edition - Remplacer sur une chaı̂ne de caractères. Comme
premier exemple, supprimons tous les caractères "\r" de la variable aff
et mettons le résultat dans la variable liste
liste = aff.split("\r").join("");
La commande aff.split("\r") décompose la chaı̂ne de caractères aff
en un tableau en se servant du séparateur "\r". A l’inverse, la fonction
join remet ce tableau en une unique chaı̂ne avec ici un séparateur égal à
un vide.
5. Récupé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 égale à :
127
Eric Schrafstetter
CHAPITRE 8. JEUX
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’idée est de commencer par remplacer les sauts de lignes par des virgules et les _ par des espaces. Ensuite, on crée un tableau en utilisant un
split(",").
prgm = liste.split("\n").join(",");
prgm = prgm.split("_").join(" ").split(",");
Il faut lire la première ligne comme cela : Remplacer tous les \n de la variable
liste par des virgules.
Le ruban qui va être créé par la machine sera mis dans un tableau de taille
variable. Il est initialisé grâce à la variable ruban. D’après le guide de référence
d’ActionScript, la commande ruban.split("") DEVRAIT renvoyer un tableau
contenant les différents caractères de ruban. Hélas, il s’agit d’un Bug ! Nous
sommes donc obligé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);
}
8.5.8
La machine
La programmation de la machine est très simple ! Pour une position donnée,
on recherche l’état courant dans la liste des états proposés dans le programme
prgm. On regarde ensuite si la case visitée est la même que celle du programme.
Si oui, une action est effectuée, sinon, on continue à explorer prgm. La variable
indice permet de faire tourner le ruban à l’affichage et longueur correspond
on nombre de lignes de codes du programme.
on (release) {
128
Eric Schrafstetter
CHAPITRE 8. JEUX
avance();
}
où avance() est la fonction dé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 éléments prgm[5*i] contiennent les états à tester, prgm[5*i+1] les valeurs des cases correspondantes, prgm[5*i+2] le nouvel état à mettre, prgm[5*i+3]
la nouvelle valeur à écrire et prgm[5*i+4] la direction où aller.
La fonction affiche() actualise les cases affichées à l’écran. Elle est dé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’affichées et si la valeur du tableau trub correspondant au
ruban n’est pas définie, on remplace la valeur null par un blanc.
8.5.9
Version AUTO
Pour que la machine puisse fonctionner seule, nous allons créer un bouton
avec l’action :
on (release) {
if (encours) {
encours = false;
auto.gotoAndStop(1);
129
Eric Schrafstetter
CHAPITRE 8. JEUX
} else {
encours = true;
auto.play();
}
}
Explications
1. Si la machine était déjà en cours de marche (variable encours est à vrai)
alors on arrête par encours=false et le clip auto (voir plus bas) s’arrête
sur l’image clé 1
2. Si encours était à faux (la machine ne fonctionne pas pour le moment),
on la lance par auto.play();
Le clip auto
1. Ce clip comporte 4 images clé et rien sur sa scène principale.
2. Image 1 : Action stop(), ce sera la position de repos lorsque la machine
est arrêtée
3. Image 2 :
_root.avance();
temps=getTimer();
On exécute la fonction avance() identique à celle du bouton SUIVANT
et on note le temps actuel.
4. Image 3 :
if (getTimer()>temps+1000) {
gotoAndPlay (2);
}
Si 1 seconde s’est écoulée, on retourne à l’image 2
5. Image 4 : Action gotoAndPlay (3);
Il faut bien sûr que la variable encours soit initialisée à false au premier
lancement.
8.5.10
Le fichier Flash fourni
Vous avez tous les éléments pour comprendre le programme joint. Son utilisation est simple :
1. Cliquez sur Charger pour charger la liste des programmes disponibles
2. Sélectionnez le programe
3. Le ruban et l’état initial s’affichent. Vous pouvez modifier l’état manuellement ainsi que le ruban (cliquez sur MAJ (Mise à Jour))
4. Utilisez les flèches gauche et droite sur le ruban pour préciser la position
de départ de la machine
5. Le bouton SUIVANT permet de faire fonctionner la machine pas par pas
6. Le bouton AUTO lance la machine de façon autonome. L’arrêter en recliquant sur AUTO.
130
Eric Schrafstetter
8.5.11
CHAPITRE 8. JEUX
Les fichiers txt
– Le fichier palind.txt recherche si un mot composé de ”a” et de ”b” est
un palindrome ou non (lisible dans les 2 sens). Un ruban de départ est
sous la forme abbax avec un x terminal. Partir avec un état 0 et le curseur
sur la lettre la plus à gauche. Le programme s’arrê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 départ : s11001. Partir avec é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 départ : 111_111__. Partir avec état q0 et curseur sur le 1 de
gauche. Le programme s’arrête sur F.
Vous pouvez m’envoyer vos réalisations où trouvailles !
[email protected]
8.6
8.6.1
Jeux de plateforme
Danger-Sécurité
Très souvent, lorsqu’un joueur agit sur un élément d’un jeu, ce dernier a un
certain comportement composé de 3 phases. Une phase de danger (en rouge sur
la figure 8.6) puis de sécurité (en vert) et à nouveau de danger (en rouge).L’idée
est donc de placer sur une couche Action des drapeaux précisant l’état de
l’élément (en danger ou en sécurité) et sur une autre couche son apparence.
Fig. 8.6 – Zones danger-sécurité
Construction
1. Créez un nouveau symbole graphique nommé boule
2. Créez un bouton bouton ayant le symbole boule sur Haut, Dessus, Abaissé
et Cliqué.
3. Créez un clip nommé mobile avec une couche pour les actions et une autre
pour les animations.
– A l’image 1 du calque des animations de ce clip, placez une occurrence
du bouton bouton avec l’action :
on (press) {
gotoAndPlay (2);
}
131
Eric Schrafstetter
CHAPITRE 8. JEUX
– A l’image 1 du calque action du clip mobile, mettre l’action :
_root.endanger=1;
stop();
En clair, le joueur est potentiellement en danger tant qu’il ne cliquera
pas sur le bouton bouton.
– A l’image 2 du calque des animations du clip mobile, placez une occurrence du symbole graphique bouleVeillez bien à ce qu’il n’y ait plus
l’occurrence du bouton de l’image 1, en effet, c’est là le plus important,
lorsque le joueur a cliqué, il ne devient plus maı̂tre de la situation !
– Créez une interpolation comme sur la figure 8.6. Par exemple l’objet qui
se soulève en utilisant un scale.
– Sur la couche des actions, placez par exemple une image clé en 5 avec
l’action _root.endanger=0; qui met hors de danger le joueur (donc il
est en danger de 1 à 5 !)
– Toujours sur la couche des actions, placez en 15 (par exemple) l’action
_root.endanger=1; qui remet le joueur en danger.
8.6.2
L’ennemi
L’ennemi peut être considéré comme un clip (voir figure 8.7) qui apparaı̂t
aléatoirement à l’écran, ayant une couche Action comportant son état de danger
et une couche pour sa trajectoire.
Fig. 8.7 – Le clip de l’ennemi
Création du clip ennemi
1. Créez un clip nommé apparence avec un dessin quelconque sur l’image 1
(ou plusieurs images !)
2. Créez un clip nommé mcenn (pour Movie Clip de l’ennemi) comportant 2
couches comme sur la figure 8.7.
3. A l’image 1 de la couche Action, mettre l’action :
_root.danger=0;
stop();
signifiant qu’au repos, ce clip est sans danger.
4. A l’image 5 (par exemple) de cette même couche, placez l’action :
132
Eric Schrafstetter
CHAPITRE 8. JEUX
_root.danger=1;
5. Et à l’image 15, l’action :
_root.danger=0;
L’ennemi sera donc actif entre les images 5 et 14.
6. Sur l’autre couche, dessiner une trajectoire quelconque en utilisant une
occurrence du clip apparence.
Utilisation de l’ennemi
1. Créez 2 couches sur la scène principale, une pour les actions et l’autre
pour les objets.
2. Placez une occurrence du clip mcenn à l’image 1 de la couche objet et lui
donner le nom ennemiTapez F5 au temps 2 pour étendre l’image fixe.
3. A l’image 1 de la couche action de la scène principale, placez l’action :
h = Math.floor(10*Math.random ());
if (h == 0) {
_root.ennemi.play();
};
4. insérez une image clé à l’instant 2 de la couche action avec l’action :
gotoAndPlay (1);
5. Si vous lancez le clip, vous verrez le clip ennemi se mettre en action à
des moments aléatoires (Placez une zone de texte dynamique nommée
danger sur la scène principale pour observer les instants où l’ennemi peut
provoquer un danger)
Lien Ennemi-Joueur
1. Sur la scène principale précédente (Voir Création du clip ennemi), créez
une nouvelle couche et placez une occurrence de mobile qui représente le
joueur.
2. A l’image 5 de la scène principale, mettre une image clé avec pour nom
finPlacez un texte quelconque signifiant que le jeu est terminé.
3. Modifiez l’action de l’image 1 par :
h = Math.floor(10*Math.random ());
if (h == 0) {
_root.ennemi.play();
};
if (((danger == 1)) && (endanger == 1)) {
_root.gotoAndStop("fin");
};
Ainsi, le jeu s’arrête lorsque le joueur était en danger et que le danger est
effectivement apparu.
133
Eric Schrafstetter
8.6.3
CHAPITRE 8. JEUX
Actions simultanées : Touche - Souris
Voici une version élémentaire pour qu’un joueur puisse tourner tout en tirant
1. Créez un clip trait représentant un petit trait.
2. Créez un clip tir avec une occurrence de trait à l’image clé 1.
3. Créez une nouvelle image clé en 10 et déplacez l’occurrence (ce sera la
trajectoire du missile), ajoutez une interpolation de mouvement entre 1 et
10.
4. Mettre l’action stop(); à l’image clé 10 du clip tir.
5. Placez sur la scène principale une occurrence nommée missile du clip
tir et la positionner en x = 200 et y = 200 (voir fenêtre info).
6. Ajoutez l’action stop(); à l’image clé 1 de la scène principale.
7. Créez un clip vide, le placer à l’image 1 de la scène principale et lui donner
l’action suivante :
_root.param = new Object();
_root.param.feu = 0;
_root.param.angle = 0;
_root.nb = 0;
}
_root.param.angle = Math.atan2(_root._ymouse-200, _root._xmouse-200);
}
if (Key.getCode() == Key.SPACE) {
}
}
onClipEvent (keyUp) {
if (Key.getCode() == Key.SPACE) {
}
}
if ((_root.nb<10) && (_root.feu == 1)) {
_root.nb++;
duplicateMovieClip (_root.boule, "b"+_root.nb, _root.nb);
_root["b"+_root.nb]._rotation = _root.param.angle*180/Math.PI;
} else if (_root.feu == 1) {
_root.nb = 0;
}
}
Dans le programme, nb représente le nombre de missile envoyés. Lorsque
nb dépasse 10, on remplace les anciens missiles par les nouveaux. Si un
134
Eric Schrafstetter
CHAPITRE 8. JEUX
joueur presse la barre d’espace, un missile est envoyé. S’il déplace la souris,
l’angle de tir change. Les 2 mouvements peuvent être faits simultanément.
8.6.4
Actions simultanées : Touche - Touche
Voici un exercice où l’utilisateur pourra presser 2 touches à la fois afin de
diriger un petit bolide.
1. Créez un clip avec le dessin d’un petit véhicule (un rectangle suffira ! !)
2. Mettre une occurrence de ce clip sur la scène principale
3. Associez l’action suivante au clip :
function position (y,rot) {
_x + = 3*Math.cos(rot*Math.PI/180+y*Math.PI);
_y + = 3*Math.sin(rot*Math.PI/180+y*Math.PI);
}
rot=0;
y=0;
}
if (Key.isDown(Key.LEFT)) {
rot-=5;
_rotation=rot;
} else if (Key.isDown(Key.RIGHT)) {
rot+=25
_rotation=rot;
}
if (Key.isDown(Key.UP)) {
position(0,rot);
} else if (Key.isDown(Key.DOWN)) {
position(1,rot);
}
}
La variable y dans la fonction position permet de choisir l’orientation
du bolide (on rajoute pi à l’angle en cas de marche arrière). La valeur 3
correspond à la vitesse (ici constante) du véhicule et la valeur 5 à 5◦ dans
la rotation.
4. Si vous voulez donner un effet d’accélération, vous pouvez changer l’action
en :
135
Eric Schrafstetter
CHAPITRE 8. JEUX
if (Key.isDown(Key.LEFT)) {
rot-=5;
_rotation=rot;
} else if (Key.isDown(Key.RIGHT)) {
rot+=5;
_rotation=rot;
}
if (Key.isDown(Key.UP)) {
coeff++;
vit=(0.3+coeff/2)*(0.3+coeff/2);
} else if (Key.isDown(Key.DOWN)) {
vit/=1.5;
coeff=Math.sqrt(vit);
if (vit<0.2) {
vit=0;
}
}
_x = _x+vit*Math.cos(rot*Math.PI/180+y*Math.PI)/10;
_y = _y+vit*Math.sin(rot*Math.PI/180+y*Math.PI)/10;
}
rot=0;
vit=0;
coeff=2;
}
Lorsque l’on presse la flèche vers le haut, la vitesse augmente globalement
suivant le carré de coeffLorsque l’on presse
la √
touche vers le bas, la vitesse est divisée par 1,5 et le coefficient passe
à vitIl faut bien entendu ajuster les différents coefficients pour obtenir
l’effet voulu.
8.7
8.7.1
Le Top10 (version MySQL)
Affichage du Top10
Il s’agit simplement d’afficher la liste des 10 premiers joueurs avec leurs
scores.
1. Créez une base de donnée nommée topten et une table nommée resultats
avec deux champs nom et —score—.
2. Mettre 10 noms et 10 scores.
3. Créez le script scores.php suivant :
136
Eric Schrafstetter
CHAPITRE 8. JEUX
<?php
$link = mysql_connect() or die("Impossible de se connecter");
$bdd = "topten";
mysql_select_db($bdd);
$result = mysql_query("select * from resultats order by score DESC");
$i=0;
while($ligr=mysql_fetch_array($result)){
$i++;
$n="nom".$i;
$s="score".$i;
echo $n.’=’.$ligr["nom"]."&";
echo $s.’=’.$ligr["score"]."&";
};
mysql_close();
?>
La requête signifiant que l’on sélectionne les 2 champs (*) et que l’on classe
les enregistrements par ordre décroissant (DESC) du score.
4. Créez une animation Flash score.fla et enregistrée là dans le même
dossier que le script avec une action stop(); à l’image clé 1
5. Insérez 10 zones de textes dynamiques nommées nom1,nom2..sur la scène
6. Insérez en face 10 autres zones de textes dynamiques nommées score1,
score2...
7. Créez un bouton quelconque et en mettre une occurrence sur la scène
principale avec l’action :
on (release) {
loadVariablesNum ("scores.php", 0, "POST");
}
8. Compilez l’animation, lancez score.html et cliquez sur le bouton. Les
scores s’affichent.
8.7.2
Proposer un score
Voici une première version non sécurisée dans le sens où une personne mal
intentionnée utilisant ActionScript Viewer pourra voir l’adresse du script PHP
utilisé et également le nom des variables probablement utilisées par le script
(type nom et score)Il faudrait crypter le nom et le score avant de les envoyer.
1. Créez le script change.php suivant :
<?php
$link = mysql_connect() or die("Impossible de se connecter");
$bdd = "topten";
mysql_select_db($bdd);
$result = mysql_query("select * from resultats order by score DESC ");
137
Eric Schrafstetter
CHAPITRE 8. JEUX
$i=0;
$i++;
$n="nom".$i;
$s="score".$i;
${$n}=$ligr["nom"];
${$s}=$ligr["score"];
};
if ($score>$score10){
$qry="update resultats set score=".$score.",nom=’";
$qry.=$name."’ where score=";
$qry.=$score10." and nom=’";
$qry.=$nom10."’";
$result = mysql_query($qry);
$result = mysql_query("select * from resultats order by score DESC ");
$i=0;
$i++;
$n="nom".$i;
$s="score".$i;
echo $n.’=’.$ligr["nom"]."&";
echo $s.’=’.$ligr["score"]."&";
}
echo "perdu=0";
}
else
{
echo "perdu=1";
}
mysql_close();
?>
Ce script récupère les meilleurs scores, les classes par ordre décroissant du
score et regarde si le score du joueur est supérieur au plus petit score10Si
c’est le cas, on met à jour la base de données en remplaçant nom10 et
score10 par les nouveaux. On reclasse le tableau et on envoie le résultat
à Flash. Dans le cas où le score n’est pas assez élevé, on renvoie perdu=1.
8.8
8.8.1
Sécurité
Jouer Online
Voici une méthode (non fiable à 100% mais nécessitant une manipulation non
triviale pour la contourner !) afin d’éviter qu’un joueur télécharge votre fichier
.swf et s’en serve sans être connecté à votre site.
138
Eric Schrafstetter
CHAPITRE 8. JEUX
1. A la première image de votre animation mettre l’action :
if ((substring (_url.toLowerCase(), 1, 26)) eq "http://www.univ-angers.fr/") {
gotoAndPlay (3);
}
La propriété _url renvoie l’url du fichier .swf d’où le clip a été téléchargé.
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+ flèche vers la droite pour éviter le test !
3. Le programme commence à 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
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
139
Eric Schrafstetter
CHAPITRE 8. JEUX
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 améliorer ( ?) ce script pour aller directement au numéro d’un
frame entré dans une zone de saisie...
8.8.2
Mot de passe
Ne jamais mettre un mot de passe à l’intérieur d’une animation Flash, il
est extrêmenent facile de le récupérer (voir par exemple le programme ActionScript Viewer qui permet d’extraire les scripts, symboles etc à partir d’un .swf
même protégé)Si vous comprenez à l’instant que tous vos programmes pourront
facilement être lus, j’en suis sincèrement désolé. Espérons que Macromedia, certainement pressé de sortir la version 5 alors qu’Adobe annonçait LiveMotion,
saura remédier à cette très grâve ”lacune”.
8.8.3
ActionScript Viewer
Ce logiciel permet de décompiler les animations Flash et de récupérer les
codes. Actuellement, je ne connais qu’une seule parade (pour combien de temps ?).
Il s’agit de mettre au début de chaque frame où il y a une action à cacher le
code :
void 0(!0);
Il existe également Scan SWF File.
140
Chapitre 9
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 (à peine) un serveur Apache, PHP et MySQL sur votre
machine. Les scripts .php pourront être placés dans le répertoire www/flash.
9.1
Ming
Cette librairie de création à la volée de fichiers SWF est disponible pour
PHP sur le site http ://www.opaque.net/mingLe manuel de référence de PHP
4.0 (http ://snaps.php.net/manual/) contient un chapitre de description des
fonctions de la librairie ming. Si vous avez installé easyphp, ouvrez votre page
d’accueil et cliquez sur le bouton ’test ming’. Téléchargez é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 à votre bouton droit un
menu contextuel Fen^
etre DOS qui vous permettra d’ouvrir une fenêtre
DOS dans un dossier sélectionné. Pour ce faire, ouvrez la base de registre
(Démarrer - Exécuter - regedit) puis allez à la clé :
HKEY_CLASSES_ROOT\Folder\shell
Créez une clé nommée Fen^
etre DOS, une sous-clé 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 ! !
2. Placez le programme swftophp dans un dossier accessible par l’autoexec.bat,
par exemple dans C:\windows\command.
3. Ouvrez une fenêtre DOS dans le dossier où est le fichier à convertir. Faire
bouton-droit et propriétés de la fenêtre DOS, choisir l’onglet Divers et
cochez Souris - Edition rapide.
141
Eric Schrafstetter
CHAPITRE 9. PHP
4. Supposons que le fichier s’appelle essai.swf. Tapez :
swftophp essai.swf > essai.txt
La conversion du fichier .swf en PHP-Ming est alors écrite dans le fichier
essai.txt.
9.1.1
Tester un swf
Lorsque vous lancez une page .php, le fichier .swf créé est placé dans le
dossier temporaire. Même si vous fermez la fenêtre de visualisation puis changez
votre script php, votre navigateur affichera encore votre ancienne version ! La
première idée est de supprimer à chaque fois les fichiers temporaires mais cela
devient très vite pé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"’);
La première ligne est toujours nécessaire comme vous le constaterez dans les
prochains programmes. La seconde ligne évite que le navigateur mette le fichier
en mémoire cache (remarquez que Affichage - Source n’est plus disponible) et la
dernière donne une durée de vie nulle à la page. Désormais, la manipulation est
de fermer la fenêtre d’affichage, de changer votre script et de relancer la page !
Une autre solution consiste à utiliser un lien hypertexte du type :
<A HREF="anim.swf?1">Charger l’animation !</A>
la commande ?1 forçant le navigateur a télécharger l’animation sur le site
d’origine.
9.1.2
Notions de base
Il y a un rapport de 20 entre la taille de l’animation Flash et celle utilisée
par ming. Par exemple, une animation de 550px par 400px, à un taux de 12
images/s et avec un fond blanc se définit par :
<?
$m = new SWFMovie();
$m->setRate(12.0);
$m->setDimension(11000, 8000);
$m->setFrames(1);
$m->setBackground(0xff, 0xff, 0xff);
/* -------------------------*/
/* Le programme de création */
/* -------------------------*/
142
Eric Schrafstetter
CHAPITRE 9. PHP
$m->output();
?>
9.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);
$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();
143
Eric Schrafstetter
CHAPITRE 9. PHP
?>
2. Cercle de rayon R
Le plus simple est de représenter un cercle comme une suite de lignes
droites (voir l’exemple du camembert 3D online plus loin)Nous allons voir
une méthode plus rapide dans le principe mais certainement moins maniable d’un point de vue intellectuel ! Il s’agit d’utiliser 8 courbes de Bé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 Bézier d’ordre N
est donnée par :
z(t) =
N
X
Cnk tk (1 − t)n−k zk
k=0
³
´
Cas particulier : Si z0 = √R2 , √R2 , z1 = (x1 , y1 ) et z2 = (R, 0), alors la
courbe de Bézier d’ordre 2 a pour équation paramétrique :
(
z(t) =
(1 − t)2 √R2 + 2t(1 − t)x1 + Rt2
(1 − t)2 √R2 + 2t(1 − t)y1
Exercice : Cherchez l’unique polynôme du second degré Pc approchant
√
¡
¢
¡ ¢
la courbe t → cos π4 (1 − t) pour t ∈ [0, 1] avec Pc (0) = cos π4 = 22 ,
√
Pc (1) = cos(0) = 1 et Pc0 (0) = π4 × 22 . Réponse :
Ã
!
√
√
π 2
2 π 2
1
cos
t2
(1 − t) ' Pc (t) =
+
t+ 1−
−√
4
2
8
8
2
³π
√
´
De même pour l’approximation de t → sin
¡π
4 (1
(9.1)
¢
− t) :
Ã √
!
√
√
´
2 π 2
π 2
1
sin
(1 − t) ' Ps (t) =
−
t+
−√
t2
4
2
8
8
2
³π
(9.2)
En particulier, une approximation de l’arc de cercle ayant pour équation
π
t → Rei 4 (1−t) avec t ∈ [0, 1] sera réalisée lorsque le couple (x1 , y1 ) vérifiera :
(
¡
¢
R cos π4 (1 − t) = (1 − t)2 √R2 + 2t(1 − t)x1 + Rt2
¡π
¢
R sin 4 (1 − t) = (1 − t)2 √R2 + 2t(1 − t)y1
(9.3)
En remplaçant (9.1) et (9.2) dans (9.3) puis en identifiant les coefficients
des polynômes, on obtient :
√
√
π 2+8 2
' 0, 9848 ' 1
x1 =
16
144
Eric Schrafstetter
et
CHAPITRE 9. PHP
√
√
−π 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 centre O (voir figure 9.1) en utilisant l’approximation x1 = R et
R√
y1 = 1+R√2 . Un petit calcul montre que ξ = √2(1+
et que la distance
2)
de z1 à z2 est
R√
.
1+ 2
z0
ξ
45°
ξ
z1
45°
0
z2
Fig. 9.1 – Arc de cercle par courbe de Bézier
<?
$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();
?>
145
Eric Schrafstetter
CHAPITRE 9. PHP
3. Tracer un cercle - Mé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 - Méthode 2 : Ecriture explicite des 8 courbes de Bézier
<?
$m->setRate(12.000000);
$m->setFrames(1);
function cercle($R){
$s1->movePenTo(0, 0);
$s1->setLine(20, 0x00, 0x00, 0x00);
$coeff1=$R*(2-sqrt(2))/2;
$coeff2=$coeff1*sqrt(2);
146
Eric Schrafstetter
CHAPITRE 9. PHP
$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 façon plus générale, si l’on veut tracer un arc de cercle d’angle α et de
rayon R, avec 0 ≤ α ≤ π4 , On place z0 en (R cos(α), R sin(α)), z2 en (R, 0)
et on se sert du point z1 de coordonnées :
2 cos(α) + α sin(α)
R
2
2 sin(α) − α cos(α)
y1 =
R
2
x1 =
Voici un exemple de script traç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,
147
Eric Schrafstetter
CHAPITRE 9. PHP
$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;
}
for($i=0;$i<=45;$i++){
$m->add(cercle(300,M_PI*$i/180,1000-10*$i,1000));
}
$m->output();
?>
9.1.4
Camembert 3D online
Fig. 9.2 – Aspect final du camembert
Voici un petit script facilement attachable à une base de données qui permet
de réaliser à la volée un camembert 3DContrairement à la section précédente
où nous utilisions des courbes de Bézier, nous choisissons ici de tracer l’ellipse
à partir de petits segments de droites. Voici quelques explications sur le programme :
1. Le graphique se compose de 2 parties, les différentes parts et le socle. Le
socle n’étant visible que pour les angles entre 0 et π.
2. La fonction secteur permet de dessiner un secteur entre les angles $depart
et $angle à la position $x,$y avec la couleur $coul
3. Le test ci-dessous permet d’arrêter le socle à π :
if($angle+$depart>M_PI){
148
Eric Schrafstetter
CHAPITRE 9. PHP
$nb=(M_PI-$depart)*180/M_PI;
}
4. Il ne faut pas confondre les fonctions drawline et drawlineto, la première
dessinant une ligne du point courant jusqu’à un déplacement (δx, δy) relativement à ce point et la seconde dessinant une ligne du point courant
jusqu’à un autre point (x, y).
5. Vous pouvez à 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 affichée !
<?
$m->setRate(12.000000);
$m->setFrames(1);
function secteur($depart,$angle,$x,$y,$coul){
global $depart;
$haut=80;
$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)));
149
Eric Schrafstetter
CHAPITRE 9. PHP
$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();
?>
9.1.5
Déplacement
1. Déplacement d’un symbole sur la scène principale :
<?
$m->setRate(12.000000);
150
Eric Schrafstetter
CHAPITRE 9. PHP
$m->setFrames(10);
/* -- Dessin rectangle -- */
$s1->movePenTo(5000, 5000);
$s1->drawLine(-2000, 0);
$s1->drawLine(0, -1500);
$s1->drawLine(2000, 0);
$s1->drawLine(0, 1500);
/* -- Symbole rectangle -- */
$s2 = new SWFSprite();
$j1 = $s2->add($s1);
$s2->nextFrame();
/* -- On place une occurrence du rectangle sur la scène */
$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. En attendant une version de MING compatible avec ActionScript, nous
voilà obligé de nous replonger dans les actions propres à Flash 4..Voici
un exemple tout à fait élémentaire de la fonction startDrag. Il place un
petit rectangle à l’écran ayant le comportement d’un bouton, lorsque vous
pressez dessus, vous pouvez le déplacer et lâchez le bouton de la souris
pour le poser.
<?
$m->setRate(12.0);
$m->setFrames(1);
151
Eric Schrafstetter
CHAPITRE 9. PHP
$s1->drawLine(500, 0);
$s1->drawLine(-500, 0);
$s1->drawLine(0, -500);
$s2 = new SWFButton();
$s2->addShape($s1, SWFBUTTON_HIT |
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();
?>
9.1.6
Texte
Soit vous utilisez les polices de base _serif, _sans ou _typewriter, soit
vous utilisez ’vos’ propres polices d’extension .fdbVoici comment créer une telle
police :
1. Placez l’utilitaire makefdb (voir intro) dans un répertoire accessible.
2. Lancez Flash et créez un fichier police.fla
3. Créez une zone de texte et tapez quelques lettres, par exemple abc.
4. Choisissez une police, par exemple Wingdings
5. Dans les paramètres de publication, décochez les formats SWF et HTML
et cochez Modèle Generator SWT.
6. Si vous voulez exporter d’autres polices, créez autant de zones de texte
que nécessaire !
7. Publier la page pour créer le fichier police.swt
8. Ouvrir une fenêtre DOS dans le dossier de publication et tapez
makefbd police.swt
Un ou plusieurs fichiers .fdb sont alors créés.
152
Eric Schrafstetter
CHAPITRE 9. PHP
9. Placez ces fichiers sur votre serveur (utilisez des chemins relatifs si les
polices ne sont pas dans le même ré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();
?>
9.1.7
Morphing
Dans cet exercice, on dessine deux rectangles de couleurs et de formes diffé/rentes et on crée l’interpolation entre les deux. La fonction SWFMorph doit avoir
2 paramètres : getShape1() pour la forme d’origine et getShape2() pour la
forme finale.
<?
$m->setRate(12.000000);
$m->setFrames(20);
/* Initialisation des nombres aléatoires */
mt_srand((double)microtime()*10000);
/* Création du morphing */
$s1 = new SWFMorph();
153
Eric Schrafstetter
CHAPITRE 9. PHP
/* Forme 1 */
$s0 = $s1->getShape1();
$s0->movePenTo(900, 2000);
$s0->setLeftFill(0x00, 0xff, 0x00);
$s0->setLine(0, 0x00, 0x00, 0x00, 0x00);
/* Largeur aléatoire 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();
?>
9.1.8
Loadmovie
A partir d’une animation Flash 5, un bouton va permettre de télécharger
une animation Flash créée en php et un second bouton effectue un effet sur
l’animation chargée.
1. Tapez le fichier rect.php suivant :
<?
$m->setRate(12.000000);
154
Eric Schrafstetter
CHAPITRE 9. PHP
$m->setFrames(1);
$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 à
l’occurrence.
2. Lancez Flash et enregistrez sous le nom lance.fla (même dossier que le
fichier précédent)
3. Cré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. Créez un clip vide et mettre une occurrence de celui-ci sur la scène principale (au milieu de la scène) avec comme nom ici
6. Compilez et lancez l’animation à partir du navigateur. Cliquez sur le premier bouton, le rectangle apparaı̂t.
7. Cliquez sur le second bouton, l’effet _alpha=50 est appliqué.
155
Eric Schrafstetter
CHAPITRE 9. PHP
9.2
Echange de variables
9.2.1
Exemple du poids idéal
1. Cré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";
?>
2. Créez une animation Flash poids.fla avec sur la scène principale :
– Une action stop(); à l’image clé 1
– Deux zones de textes dynamiques de noms taille et poids. Ecrire à
côté les textes statiques taille et poids correspondant.
– Un bouton rose (pour poids de la femme) avec l’action :
on (release) {
_root.choix = 2;
loadVariablesNum ("calcul.php", 0, "POST");
}
– Un bouton bleu (pour poids de l’homme) avec l’action :
on (release) {
_root.choix = 1;
loadVariablesNum ("calcul.php", 0, "POST");
}
– Enregistrez le fichier dans le même ré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 idéal
si c’est une femme ou bleu si c’est un homme.
Les variables taille et choix de l’animation Flash sont envoyées au script
PHP par la méthode POST. Le script PHP calcule le poids idéal en utilisant $choix pour savoir si c’est un homme ou une femme et renvoi la
chaı̂ne poids=$poids qui est récupérée par Flash dans poids.
Rappelons qu’en PHP, lorsqu’une chaı̂ne de caractère est évaluée comme
une valeur numérique, le résultat et le type de la variable sont déterminés
comme suit :
– La chaı̂ne de caractères est de type ”double” si elle contient un des
caractère ’.’, ’e’ ou ’E’. Sinon, elle est de type entier (”integer”).
– La valeur est définie par la première partie de la chaı̂ne. Si la chaı̂ne
de caractères débute par une valeur numérique cette valeur sera celle
utilisée. Sinon, la valeur sera égale à 0 (zéro).
156
Eric Schrafstetter
CHAPITRE 9. PHP
– Lorsque la première expression est une chaı̂ne de caractères, le type de
la variable dépend de la seconde expression.
9.2.2
Compteur de visiteurs
Voici un moyen très court d’afficher sous Flash le nombre de visiteurs d’un
site en utilisant PHP :
1. Créez le fichier compteur.php suivant :
<?
$lire=fopen("compteur.txt","r");
$compteur=fread($lire,filesize("compteur.txt"));
fclose($lire);
$compteur+=1;
$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 envoyée à Flash.
2. Créez et enregistrez dans le même répertoire que compteur.php, un fichier
compteur.txt contenant le seul caractère 0 (zéro).
3. Lancez Flash et créez une zone de texte dynamique de nom nbvisites
sur la scène principale
4. Ajoutez l’action suivante à l’image 1 de la scène principale :
loadVariables ("compteur.php", "", "POST");
5. Compilez et ouvrez à partir de votre navigateurLe nombre de visites s’affiche.
157
Chapitre 10
C++
10.1
Introduction
Si vous n’avez pas Visual C++, dépêchez-vous de commander le Hors-Série
n◦ 9 (mai 2001) de PC team contenant la version complète du logiciel Microsoft Visual C++ ’Introductory Edition’ pour 42F ! L’installation ne pose aucun
problème, ajoutez également l’aide (en Anglais). Nous allons créer une petite
application qui va piloter une animation Flash et en recevoir des commandes.
Vérifiez votre configuration :
1. Dézippez le fichier commandes.zip dans un dossier quelconque
2. Un dossier tdas est créé. Ouvrez-le et copiez le fichier ls.swf
3. Collez ce fichier dans c:\mes documents
4. Cliquez 2 fois sur le fichier commandes.dsw qui lance Visual C++
5. Tapez sur la touche F7 (Compiler)Normalement, il ne doit y avoir aucun
message d’erreur !
6. Faites CTRL+F5 puis cliquez sur OK. Testez les différents boutons qui vont
être maintenant expliqués...
10.2
C++ vers Flash
10.2.1
Cré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, cré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.
158
Eric Schrafstetter
10.2.2
CHAPITRE 10. C++
Création de l’interface C++
Je vais supposer que vous ne connaissez rien ou pas grand chose à C++
(nous serons 2).
1. Lancez Visual C++
2. Faites File-New et choisir MFC AppWizard qui permet de faire 99% du
travail ’ingrat’ à notre place...
3. Donnez un nom au projet en haut à droite, par exemple commandes puis
OK
4. Choisir le type Dialog Box (Boı̂te de dialogue), langue Franç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 généré (parfaitement inbuvable !)Cliquez sur Finish puis OK
Vous devez voir à gauche une fenêtre avec 3 onglets : ClassView, ResourceView et FileView. Si ce n’est pas le cas, faire View-Workspace.
1. Cliquez sur l’onglet ResourceView puis sur le + de Dialog
2. Cliquez 2 fois sur IDD_COMMANDES_DIALOG , la future fenêtre de l’application est sous vos yeux. Faites CTRL+T pour tester la boı̂te de dialogue.
3. Utilisez la barre d’outils Controls pour insérez un nouveau bouton (Button). Si la barre n’est pas visible, faites bouton droit sur la barre d’outils
du haut puis Controls.
4. Un bouton ayant pour nom Button1 est affiché. Faire Bouton droit sur le
bouton et Properties. Changez le champ Caption par ’Jouer’.
5. De même, insérez un nouveau bouton et mettre le champ Caption à ’Stop’.
Ces boutons serviront à lire et stopper l’animation Flash
10.2.3
1.
2.
3.
4.
5.
6.
7.
8.
Insérer l’animation
Faites Projet - Add to Project - Components and Controls
Allez dans le ré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
Cliquez sur ce bouton et dessinez un rectangle sur la boı̂te de dialogue
Faites Bouton droit sur le rectangle blanc créé puis Properties. Remarquez
que son ID est IDC_SHOCKWAVEFLASH1
Il s’agit maintenant d’associer une variable à l’objet IDC_SHOCKWAVEFLASH1
Pour cela lancer ClassWizard par View-ClassWizard et choisissez en haut
l’onglet Members Variables
Cliquez sur IDC_SHOCKWAVEFLASH1 puis sur le bouton Add Variable à
droite. Mettre par exemple m_anim comme nom de variable puis 2 fois
OK
159
Eric Schrafstetter
10.2.4
CHAPITRE 10. C++
Le programme
Il s’agit d’associer différentes actions aux événements (boutons, initialisation...)
1. On voudrait que l’animation rect.swf soit chargée dans la variable m_anim
dès le début. Pour cela, lancez ClassWizard ( CTRL+W), cliquez sur l’onglet ’Message Maps’ et choisir Class Name = CcommandesDlgLa liste des
objets est affichée.
2. Choisir l’ID CcommandesDlg et le Message WM_INITDIALOG (WM pour
Window Message) puis cliquez à droite sur le bouton ’Edit Code’
3. Oups ! Je vous avais bien dit que c’était inbuvable ! Recherchez plus bas
la partie
// TODO: Add extra initialization here
return TRUE;
// return TRUE
unless you ...
C’est aprè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 sûr vous devez mettre le chemin correspondant à l’emplacement de votre fichier rect.swfD’autre part, avez-vous vu
qu’après m_anim. un menu contextuel s’est affiché ? Tapez les premières
lettres puis utilisez la flèche du bas du clavier et entrée pour choisir directement la fonction. Enfin, si vous ne vous souvenez plus de la liste des
variables, faites bouton droit sur le code puis ’List Members’ et tapez la
lettre m.
5. Il est temps de tester notre début d’application en tapant sur la touche
F7Normalement, le message suivant s’affiche :
commandes.exe - 0 error(s), 0 warning(s)
Si ce n’est pas le cas et si vous débutez en C++... recommencez depuis le
dé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 à
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.
160
Eric Schrafstetter
CHAPITRE 10. C++
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 même faç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’arrêtera toujours au frame n◦ 5.
Pour voir toutes les fonctions liées à l’objet Flash, utilisez les menus déroulants
dans la barre d’outils du haut :
– WizardBar C++ class = CShockwaveFlash
– WizardBar C++ filter = (All class members)
– WizardBar C++ Members = La liste cherchée
En particulier :
m_anim.GetTotalFrames() : Nombre de frames
m_anim.CurrentFrame() : Frame courante
m_anim.FrameLoaded(long n) : VRAI si frame n chargé
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 :
161
Eric Schrafstetter
CHAPITRE 10. C++
{
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 caractères (base 10 ici).
10.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 à C++ et ajoutez un bouton sur la boite de dialogue avec pour
nom ’Envoyer’. Double cliquez sur le bouton et donnez le nom OnEnvoyer
à 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 nommée
texte avec le contenu m_total à l’animation.
10.3
Flash vers C++
Comment Flash peut-il piloter un programme C++ ? Tout simplement par
la fonction FSCommand.
10.3.1
Création de l’animation Flash
1. Lancez Flash et créez un bouton quelconque
162
Eric Schrafstetter
CHAPITRE 10. C++
2. Mettre 2 occurrences de ce bouton sur la scè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(); à la première image de la scène principale.
6. Enregistrez sous le nom comm.fla et compilez.
10.3.2
Création du programme C++
Reprenez la boite de dialogue créée précé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 command, LPCTSTR args)
{
CString aff,ch;
aff = "afficher";
ch="change";
if (command==aff)
{
MessageBox(args);
}
if (command==bt)
{
m_total=args;
UpdateData(FALSE);
}
}
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 récupère
la variable args envoyée par Flash.
163
Chapitre 11
Liens
11.1
–
–
–
–
http
http
http
http
Forums Flash
://www.flash-france.com
://flashmove.com/board/index.php
://board.flashkit.com/board/forumdisplay.php ?forumid=30
://www.were-here.com/forums/forumdisplay.php ?forumid=24
11.2
Flash
11.2.1
Sites Internet
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
http ://www.macromedia.com
En franç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/
Dé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 hyperréaliste : http ://www.vectorkid.com/
164
Eric Schrafstetter
11.2.2
CHAPITRE 11. LIENS
Livres
1. Flash 5. Programmation d’animations de David Tardiveau. 157 FF
2. Flash 5 Magic avec ActionScript (avec CD-Rom) de J. Scott Hamlin, David J. Emberton 250 FF
3. Flash 5 ActionScript : Le guide du programmeur de Nicolas Sancy 245 FF
4. Conception Web avec Flash de Curtis 249 FF
5. Le Grand Livre : Macromédia Flash 5 de Michael Gradias 210 FF
6. Actionscript la référence de Moock. 300 FF
7. ActionScript de Colin Moock. Broché (mai 2001) Notre prix : 310 FF
8. Flash ActionScript : Atelier créatif de Bill Sanders. 220 FF
9. Actionscript - optimisez vos sites flash de Bhangal. 250 FF
10. ActionScript : Programmer sous Flash 5 de Christophe Aubry. 130 FF
11. Flash 5 actionscript pour les jeux 120 FF
12. Solutions ActionScript de Jean Nashe. 190 FF
11.3
PHP
– Documentation : http ://dev.nexen.net/docs/php/chargement.html
– Scripts : http ://www.phpinfo.net/
– Scripts : http ://phpscripts.free.fr/
11.4
Ming
– 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
165

Téléchargez - Sciences.ch

Transcription

Documents pareils

Comment vÃ©rifier mon code de licence?

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

Circuit Grand Régional CSO 2016 - Comité Régional d`Equitation

Alban Sapin

animation avec flash

VanBasco`s Karaoké Player – Mode d`emploi

Natasha St Pier : Un ange frappe à ma porte

clips / pads - Rack Outfitters