Action Script

Flash 5 - ActionScript Travaux Dirigés

Version 1.4 17 janvier 2002

Eric Schrafstetter

Table des mati` eres 1 Outils de base 1.1 Initialisation de variables . . . . . . . 1.2 Position souris . . . . . . . . . . . . . 1.3 Fenˆetres et navigateurs . . . . . . . . . 1.3.1 Fermer une fenˆetre . . . . . . . 1.3.2 Plein ´ecran . . . . . . . . . . . 1.4 Lecteur autonome . . . . . . . . . . . 1.5 Chargement . . . . . . . . . . . . . . . 1.5.1 Version ´el´ementaire . . . . . . . 1.5.2 Version avec % . . . . . . . . . 1.5.3 Barre de chargement . . . . . . 1.5.4 Chargement d’une biblioth`eque 1.5.5 Version 2 . . . . . . . . . . . . 1.6 Couleurs . . . . . . . . . . . . . . . . . 1.6.1 D´efinir . . . . . . . . . . . . . . 1.6.2 Al´eatoires . . . . . . . . . . . . 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 D´eplacement d’objets . . . . . 1.10 Information . . . . . . . . . . . . . . . 1.10.1 Scroll sur texte . . . . . . . . . 2 La vid´ eo 2.1 Vid´eo 2.1.1 2.1.2 2.1.3 2.1.4

dans une fenˆetre s´epar´ee . Param`etres g´en´eraux pour Windows Media Player . QuickTime . . . . . . . . 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

. . . . vid´eos . . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

22 22 23 23 23 24

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

` TABLE DES MATIERES

Eric Schrafstetter

2.2 2.3 2.4 2.5 2.6

2.7

2.8

QuickTime dans Flash . . . . . . . . . Le cas des fichiers AVI . . . . . . . . . MPG et autres effets sp´eciaux . . . . . Poser 4 . . . . . . . . . . . . . . . . . Real Player . . . . . . . . . . . . . . . 2.6.1 .smil . . . . . . . . . . . . . . . 2.6.2 RealEncoder/RealProducer G2 2.6.3 Un exemple . . . . . . . . . . . 2.6.4 Cr´eer un vrai .rm . . . . . . . . Streaming . . . . . . . . . . . . . . . . 2.7.1 Avec Real Player . . . . . . . . 2.7.2 Le streaming sous Flash . . . . Questions/R´eponses . . . . . . . . . . 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 al´eatoires . . . . . . . . 3.1.1 M´elanges . . . . . . . . . 3.2 3D . . . . . . . . . . . . . . . . . 3.2.1 Matrices de rotation . . . 3.2.2 Boules dans l’espace . . . 3.3 D´eformation d’un triangle (Partie 3.4 Anaglyphes g´eom´etriques 3D . . 3.5 Perspectives frontales et obliques 3.5.1 M´ethode 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 ´elastique de 2 boules . 4.1.1 Rappels . . . . . . . . . 4.1.2 La th´eorie . . . . . . . . 4.1.3 Application . . . . . . . 4.2 Vitesse d’un objet avec freinage 4.3 Fil ´elastique . . . . . . . . . . . 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 dirig´es d’ActionScript

2

` TABLE DES MATIERES

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 Fenˆetres volantes . . . 7.3 Biblioth`eque commune 7.4 SmartClip Calendrier .

5.5 5.6 5.7 5.8

Cr´eer 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 probl`emes . . . . . . 8.2.2 Le clip pion . . . . . . . 8.2.3 Le clip plateau . . . . . 8.2.4 Sc`ene principale . . . . 8.3 Le tangram . . . . . . . . . . . 8.4 Votre Tetris . . . . . . . . . . . 8.4.1 La brique de base . . . . 8.4.2 Les pi`eces . . . . . . . . 8.4.3 Le plateau . . . . . . . . 8.4.4 La pi`ece 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

Travaux dirig´es d’ActionScript

. . . .

. . . .

. . . .

. . . .

3

` TABLE DES MATIERES

Eric Schrafstetter

8.5

8.6

8.7

8.8

8.4.7 Le tempo . . . . . . . . . . . . . . . . 8.4.8 Niveaux et score . . . . . . . . . . . . 8.4.9 Compl´ements . . . . . . . . . . . . . . 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 Cr´eation 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-S´ecurit´e . . . . . . . . . . . . . 8.6.2 L’ennemi . . . . . . . . . . . . . . . . 8.6.3 Actions simultan´ees : Touche - Souris 8.6.4 Actions simultan´ees : Touche - Touche Le Top10 (version MySQL) . . . . . . . . . . 8.7.1 Affichage du Top10 . . . . . . . . . . . 8.7.2 Proposer un score . . . . . . . . . . . S´ecurit´e . . . . . . . . . . . . . . . . . . . . . 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 D´eplacement . . . . . . 9.1.6 Texte . . . . . . . . . . 9.1.7 Morphing . . . . . . . . 9.1.8 Loadmovie . . . . . . . 9.2 Echange de variables . . . . . . 9.2.1 Exemple du poids id´eal 9.2.2 Compteur de visiteurs .

Travaux dirig´es d’ActionScript

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

` TABLE DES MATIERES

Eric Schrafstetter

10 C++ 10.1 Introduction . . . . . . . . . . . . . . 10.2 C++ vers Flash . . . . . . . . . . . . 10.2.1 Cr´eation de l’animation Flash 10.2.2 Cr´eation de l’interface C++ . 10.2.3 Ins´erer l’animation . . . . . . 10.2.4 Le programme . . . . . . . . 10.2.5 SetVariable . . . . . . . . . . 10.3 Flash vers C++ . . . . . . . . . . . . 10.3.1 Cr´eation de l’animation Flash 10.3.2 Cr´eation 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

Travaux dirig´es d’ActionScript

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

5

. . . . . .

. . . . . .

. . . . . .

Chapitre 1

Outils de base Introduction ` a ce document Ces quelques pages sont, `a l’origine, un aide-m´emoire personnel de trucs et astuces d´ecouverts sur le net ou par moi-mˆeme. La pr´esentation des animations se fait sous forme de travaux dirig´es, c’est-`a-dire que vous ne pourrez voir le r´esultat que si vous faites les manipulations vous-mˆeme ! T´el´echargez les .fla sur le site de ce document et n’h´esitez pas `a m’encourager ou `a me donner des id´ees en envoyant un mail `a [email protected]. Je suppose que le lecteur a d’assez bonnes notions d’ActionScript et de math´ematiques, dans le cas contraire certaines explications vous paraˆıtront certainement obscures. . . Ce document est une version 1.4 revue, corrig´ee et augment´ee, n’h´esitez pas `a me communiquer vos remarques et suggestions pour une version 1.5 ! A titre indicatif, ce document a ´et´e cr´e´e en LATEXet export´e au format PDF grˆace `a dvipdfm.

1.1

Initialisation de variables

Pour n’initialiser des variables qu’une seule fois dans une image cl´e, cr´eez un clip vide et placez-en une occurrence sur la sc`ene 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 sc`ene principale : – Placez une zone de texte avec les options suivantes : Texte dynamique et Variable = x. – Faˆıtes un copier/Coller de cette zone de texte et remplacez x par y – Cr´eez un clip vide (CTRL+F8 et nom = drag) que vous placerez n’importe o` u sur la sc`ene. – Associez l’action suivante au clip drag : onClipEvent (load) { startDrag (""); } onClipEvent (enterFrame) { _root.x=this._x; _root.y=this._y; }

1.3

Fenˆ etres et navigateurs

1.3.1

Fermer une fenˆ etre

Pour quitter un programme Flash visualis´e dans une fenˆetre en utilisant un bouton, vous pouvez : 1. Cr´eez l’apparence du bouton qui servira `a quitter le programme en fermant la fenˆetre. 2. Placez une occurrence de ce bouton sur la sc`ene et lui associer l’action : on (press) { getURL ("Javascript: self.close()"); } La commande fscommand ("quit"); ferme la projection.

1.3.2

Plein ´ ecran

Pour afficher votre animation Flash en plein ´ecran : 1. Dans les param`etres de publication HTML, choisir 100% pour la hauteur et la largeur. 2. Cr´eez la page HTML ci-dessous, o` u essai.html est le nom du fichier HTML publi´e par Flash. <script>
Travaux dirig´es d’ActionScript

7

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

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); } //--> Lancer l’animation Pensez `a ajouter un bouton dans votre animation permettant de fermer l’animation ! (voir paragraphe pr´ec´edent).

1.4

Lecteur autonome

Pour masquer certaines options du bouton droit lorsqu’un programme Flash est lanc´e en mode autonome, faire : fscommand ("fullscreen", "true"); fscommand ("allowscale", "false"); fscommand ("showmenu", "false"); – La premi`ere ligne permet de mettre l’affichage en plein ´ecran – La seconde ligne assure que l’´echelle de l’animation ne sera pas modifi´ee – La derni`ere ligne efface le menu contextuel (sauf le ”A propos de Flash Player”)

1.5 1.5.1

Chargement Version ´ el´ ementaire

Avant de lancer le programme proprement dit, vous voudriez ˆetre sˆ ur que tous les ´el´ements n´ecessaires ont bien ´et´e charg´es. Imaginons par exemple que pour lancer la sc`ene go, l’animation doit avoir charg´e les donn´ees jusqu’`a la sc`ene fin image 20. On pourra utiliser la m´ethode suivante : 1. Cr´eez un petit clip qui permettra de faire patienter l’internaute 2. Sur la sc`ene principale, mettre le clip `a l’image cl´e 1 3. A l’image 5, ins´erez une image cl´e avec l’action : ifFrameLoaded ("fin",20) { gotoAndPlay ("go",1); }

Travaux dirig´es d’ActionScript

8

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

4. A l’image 6, ins´erez une image cl´e avec l’action : gotoAndPlay (2);

1.5.2

Version avec %

1. Cr´eez un clip nomm´e 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 sc`ene principale (ou sur une sc`ene sp´ecialement r´eserv´ee au chargement) et donner l’action suivante au clip : onClipEvent (load) { _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"; } } onClipEvent (enterFrame) { chargement = unite+" || " + Math.floor(_root.getBytesLoaded()/taille*100)+"%"; if (chargement == unite+" || 100%") { _root.gotoAndPlay(2); } } Lorsque le fichier .swf est charg´e, l’animation continue `a l’image 2 de la sc`ene principale. Dans le cas d’une sc`ene sp´ecialement r´eserv´ee au chargement, ne rien mettre apr`es l’image 1 de sorte que l’animation passera directement `a la sc`ene 2.

1.5.3

Barre de chargement

1. Cr´eez un clip nomm´e barre avec un rectangle allong´e 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 sc`ene principale et lui donner le nom ligne 3. Associez l’action suivante `a cette occurrence :

Travaux dirig´es d’ActionScript

9

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

onClipEvent (load) { taille = _root.getBytesTotal(); } onClipEvent (enterFrame) { chargement = Math.floor(_root.getBytesLoaded()/taille*100); this._xscale = chargement; if (chargement == 100) { _root.gotoAndPlay(2); } } 4. Placez une action stop(); `a la premi`ere image de la sc`ene principale. 5. Placez une grosse image (plusieurs Ko) `a l’image cl´e 2 de la sc`ene principale et une action stop(); 6. Lancez l’animation. L’image devrait apparaˆıtre rapidement. Faites alors D´eboguer - 14,4 puis Affichage- Afficher le train de lecture. Vous devriez maintenant voir la barre grandir.

1.5.4

Chargement d’une biblioth` eque

Il ne s’agit pas de charger une biblioth`eque pendant la cr´eation d’une animation (Fichier-Ouvrir comme une biblioth`eque) mais bien d’un t´el´echargement de symboles `a la vol´ee au cours de la lecture d’une animation. Par exemple, on peut imaginer un joueur ayant la possibilit´e de charger en direct les pi`eces d’un puzzle choisi `a l’´ecran, ceci afin d’´eviter d’avoir un fichier .swf trop volumineux et de pouvoir actualiser la base de donn´ees. 1. Ouvrez une nouvelle animation et enregistrez-la sous le nom de piece.fla 2. Cr´eez un clip repr´esentant par exemple un rectangle 3. Ouvrez la biblioth`eque de l’animation et faire Bouton droit - Liaison sur le clip. Choisir : Exporter ce symbole et lui donner le nom p1 4. Reprendre les deux points pr´ec´edents en dessinant un disque et en l’exportant sous le nom p2 5. Compilez l’animation (remarquez qu’il n’y a absolument rien sur la sc`ene principale) pour cr´eer piece.swf 6. Ouvrez une nouvelle animation et enregistrez-la sous plateau.fla 7. Cr´eez un clip vide et mettre une occurrence nomm´ee jeu de ce clip sur la sc`ene principale 8. Cr´eez un bouton aillant ayant par exemple la forme d’une boule (peu importe) 9. Placez une occurrence de ce bouton sur la sc`ene principale, ´ecrire 1 dessus et associez-lui l’action : on (release) { jeu.loadMovie("pieces.swf"); }

Travaux dirig´es d’ActionScript

10

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

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, ´ecrire 2 dessus et lui associer l’action : on (release) { jeu.attachMovie("p1", "q1", 2); jeu.attachMovie("p2", "q2", 3); jeu.q1._x = 10; jeu.q1._y = 50; jeu.q2._x = 100; jeu.q2._y = 50; } En cliquant sur le bouton 2, on r´ecup`ere les objets p1 et p2 de l’animation pieces.swf. On cr´ee ensuite des occurrences q1 et q2 que l’on place sur la sc`ene. Utilisez la fonction removeMovieClip (jeu.q1); pour d´echarger l’occurrence q1.

1.5.5

Version 2

Au lieu de charger le .swf `a l’int´erieur d’un clip (voir exemple pr´ec´edent), vous pouvez le charger `a un certain niveau par la commande loadMovieNum("nom.swf",numero);. 1. Reprendre l’animation pieces.swf pr´ec´edente. 2. Ouvrir une nouvelle animation et mettre un stop(); `a l’instant 1. 3. Cr´eez un bouton quelconque et placez une occurrence sur la sc`ene 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 cl´e 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; } }

Travaux dirig´es d’ActionScript

11

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

_level1 acc`ede `a l’animation pieces.swf et .attachMovie pour r´ecup´erer les ´el´ements de sa biblioth`eque.

1.6 1.6.1

Couleurs D´ efinir

Consid´erons 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

Al´ eatoires

Voici une m´ethode pour attribuer une couleur rgb (Red - Green - Blue) al´eatoire `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 cr´eer un d´egrad´e (lin´eaire ou radial) d’une couleur quelconque vers rien (alpha=0). Ceci peut cr´eer des effets tr`es int´eressants en pla¸cant un tel masque sur une image par exemple. 1. Cliquez sur le pot de peinture 2. Faites Fenˆetre - Panneaux - Remplir et Mixeur 3. Dans le panneau Remplir, choisir d´egrad´e lin´eaire 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. Cr´eez un disque et remplissez-le avec un d´egrad´e radial (jaune au milieu et rouge au bord). Transformez ce disque en clip et en mettre une occurrence sur la sc`ene principale avec pour nom torche 2. Ins´erez un calque nomm´e Mask au dessus du calque de la torche. 3. Dessinez des rectangles, ovales `a l’image 1 de cette couche. Si vous ´ecrivez ´egalement du texte, s´eparez les lettres ( CTRL+B) 4. Faites Bouton droit sur le calque Mask et choisissez Masque

Travaux dirig´es d’ActionScript

12

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

5. Ajoutez l’action suivante `a l’image 1 du calque Mask : startDrag (_root.torche, true); stop(); 6. Compilez, lancez et d´eplacez la souris...

1.6.5

Jeux de couleurs

N´ecessite le logiciel Publisher ou PowerPoint . Si vous n’ˆetes pas graphiste ou avez peur de ne pas choisir des couleurs harmonieuses entre elles, voici une solution pour r´ecup´erer 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’´evaluation de Flash, r´ecup´erez les manuels de r´ef´erence au format PDF sur http ://www.macromedia.com/support/flash/documentation.html. Avec Publisher 1. Lancez Publisher et quittez le catalogue pour avoir une feuille blanche 2. Dessinez 5 carr´es et choisissez un jeu de couleur (Format - Jeux de couleurs) 3. Cliquez maintenant sur le premier carr´e puis sur le pot de peinture (ou Format - Couleur de remplissage) et choisissez la premi`ere couleur de la s´erie de 6 propos´ees 4. Recommencez avec le second carr´e et la seconde couleur, etc. 5. Vous avez maintenant 5 carr´es de couleurs diff´erentes 6. S´electionnez les 5 carr´es en les entourant avec la souris puis Copier 7. Lancez Flash et Coller 8. Affichez le Nuancier par Fenˆetre - Panneau - Nuancier 9. Nous allons effacer toutes les couleurs du nuancier (pas de panique !) et mettre nos nouvelles couleurs. Remarquez la petite fl`eche I en haut `a droite de la fenˆetre du Nuancier. 10. Cliquez dessus et choisir ’Effacer les couleurs’ ! Oups ! Je vous sens pˆalir ! 11. Cliquez maintenant sur l’onglet Mixeur puis sur le rectangle en couleur. Utilisez la pipette pour r´ecup´erer la couleur du premier carr´e import´e de Publisher. 12. Cliquez sur la fl`eche I en haut `a droite de la fenˆetre 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.

Travaux dirig´es d’ActionScript

13

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

16. Recommencez depuis le d´ebut avec les diff´erents jeux qui vous int´eressent. 17. Enfin, faites Nuancier - I - Charger les couleurs par d´efaut pour retrouver toutes vos couleurs... 18. Si vous voulez charger un jeu de couleurs, faites : Nuancier - I - Remplacer des couleurs. 19. Pour ajouter des d´egrad´es, afficher la fenˆetre Remplir par Fenˆetre - Panneau - Remplir 20. Cr´eez un d´egrad´e lin´eraire ou radial puis cliquez sur la petite disquette en bas `a droite. Avec PowerPoint 1. Lancez PowerPoint, choisir une pr´esentation vierge et diapo blanche 2. Avec la barre de dessin, dessinez 6 carr´es sur la diapo 3. Faites Bouton droit sur la diapo et ’Appliquer un mod`ele...’ (ou Format Appliquer un mod`ele) et choisir un mod`ele quelconque 4. Cliquez sur le premier carr´e puis sur le pot de peinture et choisir parmi les 6 couleurs diff´erentes de noir ou blanc 5. Recommencez avec les 5 autres carr´es et les 5 autres couleurs 6. S´electionnez les 6 carr´es et copiez-les 7. Lancez Flash. Si vous utilisez PowerPoint 2000 faites Edition - Collage Sp´ecial et choisissez Image (M´etafichier) sinon faites simplement Coller. 8. Suivre maintenant la proc´edure 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’´ecran). 1. Le principe est le suivant : Cr´eer 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 <TITLE>Page d’accueil

Travaux dirig´es d’ActionScript

14

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

Il est grand temps de changer de navigateur ! 3. Le fichier blank.htm est ce que l’on imagine : <TITLE>Rien 4. T´el´echargez pour l’exercice un fichier MIDI quelconque et enregistrez-le dans le mˆeme dossier que index et blank (musicrobot.com). 5. Lancez Flash et enregistrez sous le nom son.fla 6. Cr´eez un bouton quelconque et placez 2 occurrences de ce dernier sur la sc`ene principale. 7. Au premier bouton, ajouter l’action : on (release) { fscommand ("joue", "nom.mid"); } o` u 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 cl´e 1 de la sc`ene principale. 10. Aller dans les param`etres de publication puis, dans l’onglet HTML, choisir Flash avec FSCommand. 11. Publiez l’animation et ouvrez le fichier son.html cr´e´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") {

Travaux dirig´es d’ActionScript

15

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

z.write( "<embed src=" + args + " hidden=true autostart=true loop=true>"); } else { z.write(""); } z.close(); } } Ainsi, lorsque l’on presse le bouton joue, la fenˆetre lecteur est r´e´ecrite grˆace `a Javascript, en distinguant le type de navigateur. L’action stop efface la fenˆetre lecteur et le son s’arrˆete. Attention, si vous compilez `a nouveau votre animation Flash, le programme ci-dessus sera ´ecras´e ! Enfin, une derni`ere remarque, si vous voulez convertir un fichier MIDI en MP3, vous pouvez utilisez Wingroove (shareware).

1.8

Cookies

Nous allons cr´eer une animation qui demande un nom puis l’enregistre dans un cookie lorsque l’on clique sur un bouton. 1. Cr´eez une animation vide et enregistrez-la sous le nom cookie.fla 2. Cr´eez une zone de texte de saisie et nommez-l`a nom. 3. Placez l’action suivante `a l’image 1 : getURL ("javascript:getCookie();"); 4. Cr´eez un bouton quelconque et placez-le `a cˆot´e de la zone de texte. Donnez l’action suivante au bouton : on (release) { getURL("javascript:setCookie();"); } Les fonctions getCookie() et setCookie() ´etant d´efinies dans la page HTML (voir ci-dessous). 5. Publiez votre animation et ´editez le fichier source. Placez les fonctions ci-dessous dans la tˆete du document HTML. <SCRIPT LANGUAGE=JavaScript>
Travaux dirig´es d’ActionScript

16

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

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’] } } //--> 6. Dans le corps du document, donnez un nom `a votre animation grˆace `a la commande id. Par exemple, ici, nous lui donnons le nom animation.

Travaux dirig´es d’ActionScript

17

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

7. Lancez votre navigateur et ouvrez cookie.html. Il n’y a normalement aucun nom dans la zone de saisie. Tapez un nom et cliquez sur le bouton. 8. Effacez le nom puis actualisez la page, le nom r´eapparaˆı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. Cr´eez un clip avec 3 images cl´e nomm´ees on (image 1), off (image 2) et blink (image 3) 2. A l’image 1, dessinez l’image du bouton off 3. A l’image 2 et 3, celui du bouton on 4. Ins´erez une image cl´e vide `a l’instant 10 (ou moins pour un clignotement plus rapide) 5. Ins´erez une nouvelle couche nomm´ee Action et placez `a l’image 1 et 2 l’action stop(); 6. Ins´erez une image cl´e en 10 avec l’action gotoAndPlay(3)

Travaux dirig´es d’ActionScript

18

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

Sur la sc`ene 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’´ecran sensible `a l’action de la souris, vous placez un bouton transparent dont la zone du cliqu´e couvre cette partie. – Cr´eez un symbole bouton nomm´e bouton – Ne rien mettre dans les images Haut, Dessus et Abaiss´ e – Dessinez une forme pour l’image Cliqu´ e – Revenez sur la sc`ene principale et placez une occurrence du bouton. – Lancez l’animation. L’´ecran reste vide mais une zone est devenue sensible au passage de la souris. Astuce Pour ´eviter de voir apparaˆıtre la main au dessus de la zone sensible, cr´eez un clip et placez le bouton dedans ! 1. Cr´eez un bouton bouton avec un rectangle sur haut et Cliqu´ e 2. Cr´eez un clip et mettre une occurrence du bouton bouton `a la premi`ere image 3. Ajouter l’action suivante au bouton : on (press) { _root.press = 1; } on (release, releaseOutside) { _root.press = 0; } 4. Placer une occurrence du clip sur la sc`ene principale et lui affecter l’action : onClipEvent (load) { startDrag (this, true); } Ainsi, lorsque l’animation d´emarre, le clip devient glissable et suit les mouvements de la souris. La variable press permet de savoir si le bouton est press´e (1) ou non (0). 5. Sur la sc`ene principale, dessinez une zone de texte dynamique et affectezlui le nom de variable x 6. Cr´eez un nouveau clip vide nomm´e controles. Placez une occurrence sur la sc`ene principale avec l’action : onClipEvent (enterFrame) { if (_root.press==1) { _root.x++;

Travaux dirig´es d’ActionScript

19

Eric Schrafstetter

CHAPITRE 1. OUTILS DE BASE

} } 7. Lancez l’animation et pressez le bouton gauche de la souris, le compteur augmente. Relˆachez, il s’arrˆete.

1.9.3

D´ eplacement d’objets

– Cr´eez un rectangle et transformez-le en clip ayant pour nom rect. – Placez une occurrence de ce clip sur la sc`ene principale et lui donner le nom rect1

Action sur l’image 1 for (i=2; i<=10; ++i) { duplicateMovieClip ("rect1", "rect"+i, i); this["rect"+i]._y += (rect1._height*(i-1)); r = Math.floor(Math.random()*255); g = Math.floor(Math.random()*255); b = Math.floor(Math.random()*255); colourobj = new Color("rect"+i); colourobj.setRGB(r << 16 | g << 8 | b); } stop(); On duplique 9 fois le clip rect1 en leur donnant les noms ”rect”+i. La m´ethode Color.setRGB sp´ecifie la couleur de l’objet.

Action sur le clip rect1 onClipEvent (mouseDown) { // La souris touche-t-elle le clip en pressant ? if (this.hitTest(_root._xmouse, _root._ymouse)) { // Met au 1er plan this.swapDepths(10); // Le rectangle suit la souris startDrag (""); } } onClipEvent (mouseUp) { stopDrag (); } Lorsque vous pressez un rectangle, vous pouvez d´eplacer —startDrag(””)— et celui-ci est plac´e au premier plan —this.swapDepths(10)—D`es que vous relˆachez la souris, le rectangle se pose —stopDrag—.

Travaux dirig´es d’ActionScript

20

Eric Schrafstetter

1.10

Information

1.10.1

Scroll sur texte

CHAPITRE 1. OUTILS DE BASE

Voici un premier moyen de cr´eer un scroll sur un texte : 1. Cr´eez un bouton bouton avec une petite fl`eche dirig´ee vers le haut comme apparence 2. Cr´eez une zone de texte dynamique avec pour nom de variable TexteEcran. Mettre en forme cette zone (choix de la couleur, de la police...). 3. Ins´erez une occurrence de bouton (qui servira `a faire d´efiler le texte vers le haut) 4. Ins´erez une seconde occurrence de bouton en utilisant l’outil de transformation pour faire pivoter l’image de 180◦ et avoir la fl`eche dirig´ee vers le bas. 5. Cr´eez une couche action sur la sc`ene principale et mettre en 1 une image cl´e 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 ´ecrivez votre texte d’aide dans la variable TexteAide avec le symbole # lorsque vous voulez retourner `a la ligne. La premi`ere fonction convertit le texte en tableau et la seconde fonction joint tous les ´el´ements avec le s´eparateur chr(13) qui est le code du retour chariot. 6. Associez au bouton `a la fl`eche vers le haut l’action : on (press) { if (TexteEcran.scroll > 1) { TexteEcran.scroll--; } } 7. Pour le bouton `a la fl`eche vers le bas : on (press) { if (TexteEcran.scroll < TexteEcran.maxscroll) { TexteEcran.scroll++; } }

Travaux dirig´es d’ActionScript

21

Chapitre 2

La vid´ eo 2.1

Vid´ eo dans une fenˆ etre s´ epar´ ee

Voici comment lancer des vid´eos `a partir d’une animation Flash : 1. T´el´echargez une vid´eo .avi (par exemple sur Fundelire.com) 2. Comme pour le paragraphe sur les fichiers MIDI, cr´eez une page nomm´ee index.html ayant le code : <TITLE>Page d’accueil Il est grand temps de changer de navigateur ! 3. Reprendre le fichier blank.htm du paragraphe sur les fichiers MIDI 4. Lancez Flash et enregistrez sous le nom lanceur.fla 5. Cr´eez un bouton quelconque et associez-lui l’action : on (release) { fscommand ("joue", "video.avi"); } o` u video.avi est le nom de votre fichier vid´eo. 6. Ajoutez l’action stop(); `a l’image cl´e 1 de la sc`ene principale. 7. Choisir param`etres de publication HTML avec FSCommand 22

´ CHAPITRE 2. LA VIDEO

Eric Schrafstetter

8. Publiez et remplacez lanceur_DoFSCommand par : function lanceur_DoFSCommand(command,args) { if (command=="joue"){ var z=parent.lecteur.document; z.open(); z.write( "<embed src="+args+" autostart=true loop=0> "); z.close(); } }

2.1.1

Param` etres g´ en´ eraux pour les vid´ eos

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 vid´eo (en pixels) Hauteur de la vid´eo (en pixels) Adresse de la vid´eo Nombre de fois o` u la vid´eo est jou´ee (-1 = infini)

Windows Media Player

Commandes propres `a Windows Media Player (true par d´efaut) AUTOSTART, AUTOLOAD,CONTROLS

2.1.3

QuickTime

Commandes propres `a QuickTime (true par d´efaut) : AUTOPLAY, PLAYEVERYFRAME (joue vid´eo au fur et `a mesure) CONTROLLER, HREF , TARGET

Travaux dirig´es d’ActionScript

23

´ CHAPITRE 2. LA VIDEO

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 vid´eo l’autre pour le contrˆole), voici un exemple de script : function son_DoFSCommand(command,args) { if (command=="joue"){ var z=parent.lecteur.document; z.open(); z.write(""); 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("
<EMBED type=’audio/x-pn-realaudio-plugin’ CONSOLE=’Clip’ "); z.write("CONTROLS=’Playbutton,Stopbutton’ HEIGHT=40 WIDTH=100 "); z.write("AUTOSTART=true>"); z.close(); } }

2.2

QuickTime dans Flash

L’exercice suivant va vous permettre de cr´eer des effets sp´eciaux `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 l`a ”que” pour cr´eer des effets et/ou ajouter de l’interactivit´e. 1. T´el´echargez ou cr´eez 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 premi`ere image cl´e jusqu’`a la fin de l’animation QuickTime par F5 5. Ajoutez une nouvelle couche au dessus de celle r´eserv´ee `a la vid´eo 6. Cr´eez une petite animation, utilisez des effets alpha (pour voir la vid´eo au travers) 7. Dans les param`etres de publication, d´ecochez Flash (.swf) et cochez QuickTime (.mov)

Travaux dirig´es d’ActionScript

24

´ CHAPITRE 2. LA VIDEO

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, s´electionnez 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. R´eduire les dimensions de votre animation principale `a celle de la vid´eo (ce n’est pas obligatoire). 5. Ajoutez ´eventuellement une couche pour les effets sp´eciaux en Flash (voir QuickTime dans Flash) 6. Dans les param`etres de publication, d´ecochez Flash (.swf) et cochez QuickTime (.mov) 7. Choisir ´eventuellement quelques options dans l’onglet QuickTime (par exemple Contrˆoleur Standard pour avoir les boutons Play, Stop et Pause) 8. Publiez l’animation par MAJ+F12 9. Utilisez l’explorateur windows et lancez le .mov cr´e´e ! Remarque : C’est donc un moyen tr`es simple de convertir un .avi en .mov !

2.4

MPG et autres effets sp´ eciaux

Voici quelques outils pour cr´eer des effets sp´eciaux ou convertir des vid´eos : 1. Pour convertir des fichiers .mpg ou .avi en .avi avec des effets sp´eciaux, vous pouvez utilisez le logiciel gratuit VirtualDub. Voici un exemple de manipulation pour convertir un fichier .avi en noir et blanc : (a) Ouvrir un fichier vid´eo avec VirtualDub (b) Menu Video-Filter et Add pour choisir le filtre threshold. Quant au param`etre, choisissez par exemple 50% (`a ajuster ensuite) (c) Faites avancer le curseur pour visualiser les images et modifiez ´eventuel/lement le param`etre (d) Choisir Video - Full Processing Mode (e) File - Save AVI et enregistrez la video filtr´ee sous un nouveau nom

Travaux dirig´es d’ActionScript

25

´ CHAPITRE 2. LA VIDEO

Eric Schrafstetter

2. Vous pouvez donc ensuite convertir le fichier AVI en QT4 et le manipuler sous Flash. Cependant, si votre fichier comporte peu d’images, je vous conseille de t´el´echarger le logiciel gratuit AVIDecomposer qui permet de d´ecomposer une vid´eo AVI en une multitude d’images .jpg plus un fichier .wav pour le son ! Lancez ensuite Flash et importez la premi`ere imageFlash vous demande alors si vous d´esirez importer toute la suite (il voit tout le bougre !), dˆıtes oui. C’est la technique que j’ai utilis´ee pour cr´eer l’animation de la femme sur le site de ce documentLes images JPG ont ´et´e 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 utilis´es sont gratuits (sauf Poser ! !)) : 1. T´el´echargez l’excellent logiciel de visualisation www.irfanview.com. 2. T´el´echargez et installez ras2vec (voir paragraphe sur le passage du bitmap au vectoriel) 3. Installez AVIDecomposer 4. Cr´eez une animation avec Poser 5. Choisir un affichage Silhouette CTRL+1, mettre fond du d´ecors en blanc et personnage en noir 6. Exportez au format .avi par Animation - Make Movie (D´esolez, je n’ai qu’une version d’´evaluation en Anglais) avec Quality = Current Display Settings. Faites OK puis choisir Trames non compress´ees. 7. Lancez AVIDecomposer puis File Name - Browse et choisir le fichier AVI cr´e´e. D´ecomposez la vid´eo. 8. Lancez IrfanView et File-Batch Conversion (ou tapez la lettre B) 9. S´electionnez 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 d´emarrer la conversion des jpg en bmp noirs et blancs 12. Ouvrez une fenˆetre DOS dans le r´epertoire des fichiers BMP et tapez la commande : ras2vec -d -m *.bmp Vous avez maintenant des fichiers .emf 13. Lancez Flash et importez la premi`ere image image1.emf, Flash vous propose d’importer les autres. R´epondre oui. 14. Eventuellement s´eparez les dessins par CTRL+B et optimisez les lignes par CTRL+MAJ+ALT+C

Travaux dirig´es d’ActionScript

26

´ CHAPITRE 2. LA VIDEO

Eric Schrafstetter

2.6

Real Player

Nous utilisons RealPlayer 8 Basic, freeware t´el´echargeable (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 plutˆot un navigateur qui n’aurait qu’un d´efaut... ne pas lire le HTML !

2.6.1

.smil

Le langage SMIL (Synchronized Multimedia Integration Language) permet de synchroniser des fichiers multim´edias sur Internet. Les fichiers vid´eos ´etant assez volumineux, ils sont encod´es de mani`ere `a pouvoir ˆetre ”stream´es”. Le ” stream ” ´etant le flux de donn´ees qui permet `a l’internaute de commencer `a visualiser la vid´eo avant que celle-ci ne soit compl`etement charg´ee. L’encodage peut se faire suivant au moins 3 technologies diff´erentes : – Real Audio et Real Video de Real Networks – Quicktime de Apple – ASF de Microsoft Real Player est capable d’utiliser un fichier Flash en tant que ressource au mˆeme titre que les fichiers audios, images ou fichiers textes. La vid´eo peut aussi ˆetre mise en forme dans un habillage en coh´erence avec les param`etres d´etect´es chez l’internaute spectateur. SMIL permet donc de synchroniser des flux Audio et Vid´eos en fonction des param`etres de chaque internaute. La technique Les fichiers SMIL sont des fichiers textes. De simples ´editeurs de textes sont suffisants pour faire du SMIL. En tant qu’extension de XML, elle utilise les mˆemes r`egles syntaxiques. Une page SMIL est compos´ee de 2 ´el´ements principaux : 1. Une entˆete qui d´efinira toutes les r´egions n´ecessaires a l’affichage des ´el´ements. 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 (Vid´eo). L’adresse sur le site officielle real.com m’´echappe 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 t´el´echarg´e `a l’anti-virus ! Ce freeware permet ´egalement 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

Travaux dirig´es d’ActionScript

27

´ CHAPITRE 2. LA VIDEO

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 - Param`etres de publication puis dans l’onglet Flash, choisissez en bas Flash 4 et OK. Si vous ins´erez une action, ne prenez pas les fonctions surlign´ees en jaunes, ceux sont celles propres `a la version 5. Toujours dans l’onglet Flash, cliquez sur le bouton D´ efinir `a cˆot´e du Train Audio. Choisir Compression : Brut (Obligatoire) et Taux : 22kHz par exemple (44kHz ´etant de meilleure qualit´e). 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 biblioth`eque ( CTRL+L) et placez une occurrence du son sur la sc`ene. 4. Dans l’´echelle temporelle contenant le son, ´etendre par F5 jusqu’au temps 10 (par exemple). 5. Fenˆetre - Panneau - Son (ou bouton droit sur l’´echelle temporelle - Panneau - Son) et choisir Sync : En continu. C’est le seul format accept´e pour la publication. 6. Cr´eez une nouvelle couche et placez-y une animation quelconque (interpolation de forme par exemple). 7. Fenˆetre - Param`etres de publication. Choisir Real Player comme format d’exportation. Un onglet RealPlayer apparaˆıt alors. Cliquez dessus et choisir : – Exportation r´eglages 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 ´egalement r´egler les propri´et´es du projet qui seront ´eventuellement visibles `a la publication de la page) Il faut bien voir que le fichier .smil cr´e´e n’est l`a que pour int´egrer l’animation Flash dans Real Player. Il n’y a donc aucune compression suppl´ementaire par rapport au .swf. Ouvrez le fichier .smil cr´e´e par Flash avec le bloc-notes pour voir sa structure.

2.6.4

Cr´ eer un vrai .rm

Cette fois on perd presque tout (interactivit´e, images vectorielles, clips...) mais on compresse fortement la vid´eo et le son pour former un unique fichier .rm (Real Movie) beaucoup plus petit que le .swf correspondant. Voici la manip : 1. Reprenez l’animation de la partie pr´ec´edente (Une piste son et une interpolation de forme par exemple). 2. Faites Fichier - Exporter l’animation et choisir Windows AVI. Choisir le Format vid´eo = Couleur 24 bits et le format Audio 44Kz Mono ou St´er´eo. Utilisez des trames non compress´ees pour avoir la meilleure qualit´e possible.

Travaux dirig´es d’ActionScript

28

´ CHAPITRE 2. LA VIDEO

Eric Schrafstetter

3. Vous r´ecup´erez en sortie un fichier .avi g´en´eralement assez gros. La manipulation est identique (choisir type=WAV) si vous d´esirez cr´eer 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 ´eventuellement un titre, Auteur et Copyright 6. Choisissez 56K si c’est pour une diffusion sur le web 7. Les formats audios sont assez explicitent 8. Pour la qualit´e vid´eo, la premi`ere option (Smoothest Motion) est int´eressante s’il y a peu de mouvements (interview par exemple), la seconde (Sharpest Image) s’il y a beaucoup de mouvements et la derni`ere (Slide Show) affiche des images nettes mais saccad´ees. 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 vid´eo sera alors bas´ee sur 34-5=29 Kps. Faites des tests en baissant le taux sur la vid´eo jusqu’`a la limite du supportable ! 11. Cliquez sur Start pour lancer la conversion. 12. Le r´esultat, g´en´eralement 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 vid´eo permet de commencer `a voir une vid´eo d`es le d´ebut de son chargement, ce qui ´evite les temps d’attente. En effet, au lieu de charger l’ensemble de la vid´eo pour qu’elle puisse ˆetre regard´ee, le streaming permet de voir les premi`eres images d`es le d´epart, en mˆeme temps que le film est charg´e. Pendant que vous regardez le d´ebut de cette vid´eo 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 o` u 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 vid´ eo...

Travaux dirig´es d’ActionScript

29

´ CHAPITRE 2. LA VIDEO

Eric Schrafstetter

7. Ou encore en tant que vid´eo int´egr´ee sur la page web avec le code :

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 devin´e, en utilisant la technique du stream. Certaines images ne seront pas montr´ees afin que l’animation suive la cadence impos´ee. Voici la m´ethode (voir l’original en anglais ) : 1. Cr´eez un silence d’environ 0,1 seconde sous le nom silence.wav 2. Sous Flash, importez le fichier silence.wav (Fichier - Importer) 3. Ins´erez une couche nomm´ee silence et placez une occurrence de silence.wav sur la sc`ene 4. Faites Fenˆetre - Panneau - Son ou Bouton droit sur l’´echelle temporelle et Panneau - Son 5. Choisir Sync = En continu et Boucles = 1. 6. Sur d’´eventuelles autres couches, placez de vrais sons avec la propri´et´e Sync = Ev´enement 7. Dans les param`etres de publication, sous l’onglet Flash, choisir : – Train audio = ADPCM, 5kHz, 2 bit Mono – Ev´enement audio = ADPCM, 11kHz, 4 bit Mono – Et neutralisez les param`etres audio en cochant la case du dessous. 8. Il ne reste plus qu’`a compiler votre animation.

2.8 2.8.1

Questions/R´ eponses Son QuickTime

Flash sait importer des vid´eos .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. T´el´echargez sur www.radgametools.com le freeware RAD Video Tools

Travaux dirig´es d’ActionScript

30

´ CHAPITRE 2. LA VIDEO

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, d´ecochez Convert Video et choisir un format de sortie pour le son, par exemple 8-bit/stereo. Le fichier de sortie (en haut) doit ˆetre un .wav. 4. Cliquez sur le bouton Convert. Vous avez maintenant un fichier son qui s’importe facilement sous Flash. Remarquez au passage que ce logiciel permet de convertir un .mov en .avi. Une question A part l’excellent logiciel (payant) WinGroove qui permet de lire et convertir des fichiers .mid en .wav, quelqu’un connaˆıt-il un moyen gratuit d’arriver au mˆeme r´esultat ? Je pensais avoir un bon d´ebut de r´eponse en utilisant tout simplement le lecteur (gratuit) QuickTime Player 5.0.1 qui, lorsqu’il ouvre un fichier audio .mid propose de le convertir en .mov (qui en plus a une taille comparable au .mid d’origine !). H´elas, RAD Video Tools ne semble pas reconnaˆıtre ce format ! L’autre id´ee ´etait 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 possibilit´e de lire des fichiers vid´eos (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 d´efaut, existe-t-il un ´equivalent gratuit de Total Recorder qui permet d’enregistrer en .wav ou .mp3 n’importe quel son provenant d’une application ou de l’ext´erieur ? ?

2.8.2

Convertir un .swf en .avi

Une fonction ma foi tr`es originale du freeware RAD Video tools est de pouvoir convertir directement un fichier .swf en .avi ! Bien entendu, cela n’a d’int´erˆet que si vous partez d’un .swf dont vous n’avez pas ou plus la source. Si vous avez le .fla, utilisez plutˆot la proc´edure vue plus haut. De plus, si l’animation comporte de l’ActionScript, il est peu probable que la conversion se passe bien... Utilisez ensuite le freeware VirtualDub pour cr´eer des effets sp´eciaux sur la vid´eo. Le fichier .avi peut alors ˆetre converti en : – .mpg par les freewares AVI2MPG2 ou ULEAD MPEG Converter. – .rm par le freeware Real Encoder 5.0 ou RealProducer – .swf ou .mov en l’important sous Flash (Fichier - Importer - Type = Tous) et en le publiant. Pour que le fichier soit un .mov autonome du .swf, il faut choisir Aplatir dans l’onglet QuickTime des param`etres de publication.

2.8.3

Une suite ?

Ces quelques pages se veulent une introduction tr`es rapide au passage de Flash `a Real Player et au streaming. N’h´esitez pas `a me communiquer vos

Travaux dirig´es d’ActionScript

31

´ CHAPITRE 2. LA VIDEO

Eric Schrafstetter

remarques en vue d’am´eliorer ce suppl´ement. En attendant, voici quelques liens utiles : – Utiliser RealProducer – Des guides (en PDF) sur le site de real.com` u – Flash et le streaming – Un tutorial int´eressant sur Flash et le streaming – Optimiser le son sous Flash

Travaux dirig´es d’ActionScript

32

Chapitre 3

Maths 3.1

Nombres al´ eatoires

3.1.1

M´ elanges

Voici une m´ethode pour m´elanger les donn´ees d’un tableau : 1. Affectez `a l’image 1 de la sc`ene principale l’action : tableau=new Array(); for (i=0; i<=9; i++) { tableau[i]="v"+i; } trace (tableau); // M´ elange par permutations taille=tableau.length; for (i=0; i
3.2 3.2.1

3D Matrices de rotation

La rotation d’un angle φ autour de l’axe z (voir figure 3.1) peut ˆetre d´ecrite 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 g´en´eralement, la transformation M (a, b, c) → Rφ Rθ (M ) s’´ecrit :   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. Cr´eez le clip boule repr´esentant une. . . boule. Mettre une occurrence de ce clip `a l’image 1 de la sc`ene principale et lui donner le nom boule et ´etendre par F5 jusqu’`a l’image 3. 2. Placez ´egalement 3 zones de texte de saisie avec les noms a, b et c. 3. Cr´eez 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) {

Travaux dirig´es d’ActionScript

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 cr´ee 4 boules d’occurrence b1, b2..`a partir de boule et on les place al´eatoirement sur l’´ecran. Les 3 lignes suivantes attribuent des coordonn´ees tri-dimensionnelles `a ces 4 boules. La derni`ere 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++; }

Travaux dirig´es d’ActionScript

35

Eric Schrafstetter

CHAPITRE 3. MATHS

On retrouve dans les calculs des rx et ry les matrices de rotation explicit´ees au paragraphe pr´ec´edent. A cela s’ajoute un effet de scale et de transparence alpha suivant la profondeur z. Les coordonn´ees (200, 200) sont celles du centre du rep`ere. 6. Mettre l’action gotoAndPlay (2); `a l’image cl´e 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 acc´el´erer le mouvement.

3.3

D´ eformation d’un triangle (Partie 1)

Cet exercice est inspir´e d’un tutorial de Pavils Jurjans. Quelques formules, notament sur le calcul de S et h, ont ´et´e simplifi´ees par rapport `a l’original. Il s’agit de transformer par les fonctions _xscale, _yscale et _rotation de Flash, un triangle ´equilat´eral en un triangle impos´e par la donn´ee de 3 points A,B et C. Contrairement aux apparences, c’est loin d’ˆetre 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 ´egal `a : m OA2 + OC 2 = −1 n OA × CB 2. Inversement, soit γ un r´eel positif fix´e. Montrez que la valeur α du _xscale dilatant horizontalement ce triangle dans un rapport m/n ´egal `a γ est : OC

α= p

OA((γ + 1)CB − 1)

3. On suppose le triangle ABC ´equilat´eral (voir figure 3.3)Montrez que le α calcul´e pr´ec´edemment est donn´e par : r 3 α= 1 + 2γ 4. Soit ABC un triangle quelconque de plus grand cˆot´e (AC). – Montrez que sa surface est ´egale `a : S=

| (xB − xA )(yC − yA ) − (xC − xA )(yB − yA ) | 2

– En d´eduire que la hauteur h est : h=

Travaux dirig´es d’ActionScript

36

2S AC

Eric Schrafstetter

CHAPITRE 3. MATHS

Z R

φ

R θ Y X

Fig. 3.1 – Les rotations ´el´ementaires

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

Travaux dirig´es d’ActionScript

37

B’

Eric Schrafstetter

CHAPITRE 3. MATHS

– Montrez que le signe de (xB − xA )(yC − yA ) − (xC − xA )(yB − yA ) permet de d´eterminer si le point B est au dessus ou en dessous de la droite (AC). – Calculez les coordonn´ees du barycentre d’un triangle ´equilat´eral. En d´ eduire que la distance entre le milieu de la hauteur et le barycentre est √ 3AC ' 0, 144 × AC. 12 R´ eponses : 1. Cela provient des relations ´el´ementaires 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 ´ecriture suivant les termes OC, CB et OA. 2. En substituant OA `a αOA, et CB `a αCB dans la premi`ere ´equation 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’o` u:

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’o` u: ¯ ¯ 1 ¯¯ xB − xA xC − xA ¯¯ S= ¯ 2 yB − yA yC − yA ¯ On a bien le r´esultat annonc´e. – La surface d’un rectangle est la base par la hauteur sur 2.

Travaux dirig´es d’ActionScript

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’ordonn´ ee du barycentre G est ´egal au tiers de la hauteur, soit yG = √ √ 3AC 3AC Le centre ayant pour ordonn´ e e , la diff´erence donne bien 4 √ 6 3AC 12 . Une fois que l’on a transform´e le triangle ´equilat´eral dans un rapport m/n, on place par rotation le grand cˆot´e (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. Cr´eez un clip nomm´e equi avec le dessin d’un triangle ´equilat´eral dans le sens 4. 2. Utilisez la fenˆetre 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 (coordonn´ees 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. Cr´eez un clip nomm´e tri3 et mettre une occurrence du clip equi sur son image 1 avec pour nom type. 5. Cr´eez un clip nomm´e tri2 et mettre une occurrence du clip tri3 sur son image 1 avec pour nom base. 6. Sur la sc`ene 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 appliqu´e horizontalement mais suivant l’angle de la rotation ! 7. Cr´eez un bouton bt repr´esentant un petit disque (L = H = 6 par exemple) 8. Cr´eez un clip nomm´e ptA avec une occurrence du bouton bt au centre du clip (X = Y = 0)Ajoutez l’action suivante au bouton :

Travaux dirig´es d’ActionScript

39

Eric Schrafstetter

CHAPITRE 3. MATHS

on (press) { startDrag ("", true); } on (release) { stopDrag(); } 9. Mettre une occurrence du clip ptA sur la sc`ene principale avec pour nom A 10. De la mˆeme fa¸con, cr´eez deux autres clips ptB et ptC avec leurs occurrences respectives B et C sur la sc`ene principale. 11. Cr´eez un clip vide et placez-en une occurrence sur la sc`ene principale avec l’action : onClipEvent (mouseMove) { with (_root) { Tracer(tri1, A._x, A._y, B._x, B._y, C._x, C._y);; } } onClipEvent (mouseUp) { with (_root) { Tracer(tri1, A._x, A._y, B._x, B._y, C._x, C._y);; } } 12. Action sur l’image 1 de la sc`ene 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;

Travaux dirig´es d’ActionScript

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; base.type._rotation = 240; _x = x3; _y = y3; } else { r = (ab-hh)/(bc-hh); _rotation = atan2(-cay, -cax)*180/PI; base.type._rotation = 120; _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; } } } Tracer(tri1, A._x, A._y, B._x, B._y, C._x, C._y);; stop(); 13. Compilez, lancez et d´eplacez les points A, B et C. Si le triangle ne touche pas exactement les trois points mobiles, assurez-vous du bon positionnement des centres des clips (voir figure 3).

3.4

Anaglyphes g´ eom´ etriques 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 Th´eor`eme de Thal`es (voir figure 3) : OG OD OOG = GD OG

et

OG OD =

Travaux dirig´es d’ActionScript

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’´ecartement des yeux est GD ' 6, 3cm et la distance yeux´ecran vaut environ GOG ' 70cm. Par exemple, si vous voulez que votre point apparaˆısse `a 25cm hors de l’´ecran, la distance entre les points bleu et rouge devra ˆetre 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 ´ecran n’est pas bon pour tes yeux... 1. Reprendre la manipulation sur la d´eformation d’un triangle et ajoutez une occurrence du clip tri2 sur la sc`ene principale avec pour nom trirouge. 2. Pour cr´eez le triangle bleu ciel `a partir de tri1, utilisez le panneau effet avec les options : Avanc´e - 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 : Avanc´e - 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 sc`ene et renommezles A2, B2 et C2Vous avez maintenant 6 points sur la sc`ene principale, un clip vide et 2 triangles : un bleu et un rouge. 5. Utilisez le panneau info pour superposer les points A et A2, idem avec les points B et B2 puis C et C2. 6. Mettre un effet alpha=0 sur les 6 points afin qu’il disparaissent pendant l’animation. 7. Changez la fin de l’action sur l’image 1 de la sc`ene principale en : function Tracer (triangle, x1, y1, x2, y2, x3, y3) { ... _yscale = 1.15470054*sqrt(hh)*rr/pp*dir;

Travaux dirig´es d’ActionScript

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 ordonn´ees des points soient bien align´ees 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"; } else if (key.isDown(66)) { lettre = "B"; } else if (key.isDown(67)) { lettre = "C"; } with (_root) { Tracer(tri1, A._x, A._y, B._x, Tracer(trirouge, A2._x, A2._y, } } onClipEvent (mouseMove) { with (_root) { Tracer(tri1, A._x, A._y, B._x, Tracer(trirouge, A2._x, A2._y, }

Travaux dirig´es d’ActionScript

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

} onClipEvent (mouseUp) { 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); } } onClipEvent (load) { lettre = "B"; } Ainsi, vous pourrez avec le clavier choisir le point `a modifier (A, B ou C) et ´eloigner ou rapprocher ce point avec les fl`eches haut et bas. 9. Compilez et lancez l’animation. Mettez vos lunettes et restez appuyez sur la fl`eche vers le bas, un des coins doit sortir de l’´ecran (c’est le point B)Tapez sur la touche A et `a nouveau sur la fl`eche vers le bas, un autre coin sort de l’´ecran. 10. Vous pouvez ´egalement modifier la forme du triangle grˆace `a la souris.

3.5

Perspectives frontales et obliques

Merci au centre IGESA de Biscarrosse avec leurs chalets aux chambres cubiques de m’avoir donn´e cette id´ee d’exercice...

3.5.1

M´ ethode pratique

La figure 3.6 montre comment tracer un cube en perspective `a partir de ses projections en plan (vue du dessus) et en ´el´evation (vue de cˆot´e). Le point V repr´esente 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’´ecran de l’ordinateur. La m´ethode peut se r´esumer `a : 1. Tracez le point V et la droite T (repr´esentant le plan vu de cˆot´e). Mettre les mˆeme distances entre V et T sur les 2 coupes. 2. Dessinez les vues de l’objet (pas n´ecessairement 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). D´eterminez

Travaux dirig´es d’ActionScript

44

Eric Schrafstetter

CHAPITRE 3. MATHS

−−→ −→ → −−→0 → le vecteur V A0 en fonction des vecteurs V A et − n = V V o` u− n est normale (perpendiculaire) au plan T. 2. Cas particulier de la projection sur le plan Oxy. D´eterminez les coor−−→ → donn´ees 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’´ecran) et A(xA , yA , zA ) avec zA > 0. 3. Int´erieur d’un cube : (a) Tracez sur l’´ecran 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’´ecran de l’ordinateur est carr´e et de cˆot´e L. Trouvez les formules donnant les coordonn´ees d’un point (x, y, z) du cube sur l’´ecran. (c) Par quel facteur doit-on multiplier ces coordonn´ees pour que la face arri`ere du cube prenne tout l’´ecran ? (Cas particulier : L = 400 et R = 100) Corrig´ e 1. Remarquons que le plan T est l’ensemble des points M v´erifiant : −−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 ´egalement les points M v´erifiant : −−→ −−→ → (V 0 V + V M ).− n =0 soit :

−−→ → V M .− n = n2 → o` u 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 r´eel λ doit v´erifier : −→ → λV A.− n = n2 d’o` u −−→0 n2 −→ V A = −→ V A − V A.→ n −−→ 2. Dans le cas particulier, les coordonn´ees 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 .

Travaux dirig´es d’ActionScript

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

Travaux dirig´es d’ActionScript

46

Eric Schrafstetter

CHAPITRE 3. MATHS

3. Int´erieur d’un cube (a) Voir la construction figure 3.8. (b) On utilise les questions pr´ec´edentes pour voir que les coordonn´ees sont : ½ 0 R x = x R−z R 0 y = y R−z (c) Comme le point C a pour coordonn´ees C(− R2 , R2 , − R2 ), on trouve : ½ 0 x = − R3 C0 = y 0 = R3 (d) On passera du carr´e CDGH de cˆot´e 2R a l’´ecran L×L en multipliant 3 ` 3L par le coefficient 2R . Ainsi, pour tracer le cube en perspective au centre de l’´ecran, nous avons la formule g´en´erale : ( 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 ingr´edients 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. Cr´eez une ligne du centre vers le bas `a droite `a 45◦ avec pour fenˆetre info : L = 100, H = 100, X = 0 et Y = 0 (Cf exercice sur le fil ´elastique) 3. Transformez cette ligne en symbole nomm´e ligne et en mettre une occurrence sur la sc`ene principale avec pour nom arete. Ce sera le mod`ele de l’arˆete de notre cube. 4. A l’image 1 de la sc`ene 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++) {

Travaux dirig´es d’ActionScript

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=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 coordonn´ees (x, y, z) des coins sont plac´ees dans le tableau coins et les diff´erentes liens (de 0 `a 1, puis de

Travaux dirig´es d’ActionScript

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 r´ecup´erer ces coordonn´ees 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 coordonn´ees des points `a l’´ecran sont mis dans le tableau ecran. 5. Cr´eez un bouton repr´esentant une fl`eche vers le haut et lui mettre l’action : on (release) { rotx(-1); affiche(); } 6. Cr´eez un bouton repr´esentant une fl`eche vers le bas et lui mettre l’action : on (release) { rotx(1); affiche(); } 7. Cr´eez un bouton repr´esentant une fl`eche vers la gauche et lui mettre l’action : on (release) { roty(1); affiche(); } 8. Cr´eez un bouton repr´esentant une fl`eche vers la droite et lui mettre l’action : on (release) { roty(-1); affiche(); } 9. Cr´eez un second bouton repr´esentant une fl`eche vers le haut et lui mettre l’action : on (release) { _root.L-=5; if (_root.L<5){ _root.L=5; } affiche(); }

Travaux dirig´es d’ActionScript

49

Eric Schrafstetter

CHAPITRE 3. MATHS

Ceci aura pour effet d’´eloigner le cube. 10. Cr´eez un second bouton repr´esentant une fl`eche vers le bas et lui mettre l’action : on (release) { _root.L+=5; affiche(); } Ceci aura pour effet de rapprocher le cube. 11. Compilez et lancez l’animation. Utilisez les fl`eches pour manipuler le cube. Si vous trouvez que la perspective est ”s´ev`ere”, n’oubliez pas que nous sommes dans le cas particulier ou l’oeil est situ´e `a la distance R du plan T ! Vous pouvez modifier la distance en rempla¸cant : coeff = 3*L/(2-coins[3*i+2])/2; par : coeff = R*L/(L-coins[3*i+2]); Il faudrait ´ecrire z0 `a la place de L pour rester coh´erent avec les notations pr´ec´edentes.

Travaux dirig´es d’ActionScript

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

Travaux dirig´es d’ActionScript

51

Chapitre 4

Physique 4.1

Collision ´ elastique de 2 boules

La partie th´eorique suppose des notions de physique niveau bac .

4.1.1

Rappels

− 1. Le vecteur quantit´e de mouvement → p d’un point de masse m et de vitesse − → − → − → v est par d´efinition p = m v . − 2. L’´energie cin´etique d’un point de masse m et de vitesse → v est, toujours par d´efinition : Ec =

1 mv 2 2

→ o` u v est la norme du vecteur − v. 3. On consid`ere deux points mat´eriels A1 et A2 de masses m1 et m2 . Une loi de la physique ´enonce que la quantit´e de mouvement totale d’un syst`eme de 2 masses ponctuelles en collision se conserve quelque soit le r´ef´erentiel : −−→ − → → p1 + − p2 = Cte 4. Une autre loi affirme qu’il y a conservation de l’´energie totale, ce qui se traduit, dans le cas d’une collision ´elastique, par : Ec1 + Ec2 = Cte o` u Ec1 est l’´energie cin´etique du point A1 .

4.1.2

La th´ eorie

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 apr`es le choc sont colin´eaires (parall`eles), alors les vitesses v10 et v20 apr`es le choc sont donn´ees par : v10 =

2m2 v2 + (m1 − m2 )v1 m1 + m2

v20 =

2m1 v1 − (m1 − m2 )v2 m1 + m2

et R´ eponse

La conservation de la quantit´e de mouvement avant et apr`es le choc permet d’´ecrire que : m1 v1 + m2 v2 = m1 v10 + m2 v20 et celle de l’´energie totale que : 1 1 1 1 m1 v12 + m2 v22 = m1 v102 + m2 v202 2 2 2 2 On en d´eduit que : ½ m1 (v10 − v1 ) = m2 (v2 − v20 ) m1 (v102 − v12 ) = m2 (v22 − v202 ) d’o` u, 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 r´esolvant ce syst`eme de 2 ´equations `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 n´eglige ici les effets de frottements (voir par exemple le cours de M´ecanique de JPhPerez (Niveau Classes Pr´epas)). 3. Nous obtenons la m´ethode de construction de la figure 4.2. Les quantit´es 0 0 v1x et v2x sont obtenus par les formules pr´ec´edentes. D´eterminez les coor0e 0 0e , v1y ) en fonction de ϕ, v1y et v1x . donn´ees `a l’´ecran de v10e = (v1x R´ eponse 0e 0 La composante v1x est la somme des projet´es de v1y et v1x sur l’axe ho0 rizontal. L’angle entre v1y et l’axe horizontal est ϕ + π2 et de ϕ pour v1x . D’o` u: 0e 0 v1x = v1x cos ϕ − v1y sin ϕ

puisque cos(ϕ + π2 ) = − sin ϕ. De mˆeme, on projecte les 2 vecteurs sur l’axe vertical et on en fait la somme : 0e 0 v1y = v1x sin ϕ + v1y cos ϕ

Travaux dirig´es d’ActionScript

53

Eric Schrafstetter

CHAPITRE 4. PHYSIQUE

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

Travaux dirig´es d’ActionScript

54

Eric Schrafstetter

4.1.3

CHAPITRE 4. PHYSIQUE

Application

1. Lancez Flash et CTRL+M pour donner les dimensions 500 × 400 `a la sc`ene et cadence 50. 2. Dessinez une boule (avec son centre sur la croix centrale). Convertissez-l`a en bouton nomm´e boule 3. Cr´eez un clip b1 et mettre une occurrence du bouton boule sur la croix (les 2 croix sont alors superpos´ees) 4. Ajoutez l’action suivante au bouton : on (press) { _root.drag1 = true; startDrag (""); } on (release, releaseOutside) { _root.drag1 = false; stopDrag (); } 5. Mettre une occurrence du clip b1 avec pour nom boule1 sur la sc`ene principale 6. De mˆeme, cr´eez un clip b2 et mettre une occurrence du bouton boule sur la croix 7. Ajoutez l’action suivante au bouton : on (press) { _root.drag2 = true; startDrag (""); } on (release, releaseOutside) { _root.drag2 = false; stopDrag (); } 8. Mettre une occurrence du clip b2 avec pour nom boule2 sur la sc`ene principale 9. Ajoutez une couche pour les actions 10. A l’image 1 de la sc`ene 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;

Travaux dirig´es d’ActionScript

55

Eric Schrafstetter

CHAPITRE 4. PHYSIQUE

fric = 0.98; v1xe = 10; gravite = 1.5; function affiche () { 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;

Travaux dirig´es d’ActionScript

56

Eric Schrafstetter

CHAPITRE 4. PHYSIQUE

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)) {

Travaux dirig´es d’ActionScript

57

Eric Schrafstetter

CHAPITRE 4. PHYSIQUE

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 repr´esente pas la distance de A1 `a A2 mais le carr´e de cette distance. Ceci ´evite d’utiliser la fonction racine carr´ee. – Le calcul de la vitesse est obtenu en effectuant le quotient de la distance entre la position pr´ec´edente 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 gravit´e), je rappelle ici que la vitesse de la chute d’un corps est de la forme v(t) = gt + Cte. – Lors d’un choc sur un cˆot´e de l’´ecran, la composante normale (perpendiculaire) au bord change de signe. Si vous voulez ajouter des objets (tables, raquettes...) sur la sc`ene, faites les tests de collisions avec les coordonn´ees des clips ( table._y...) 12. A l’image 3 de la couche action, ajoutez : gotoAndPlay (2); 13. Enfin, ´etendre par F5 la couche contenant les objets jusqu’`a l’image 3. Chalenge concernant le fichier .fla associ´e `a cet exercice : M’envoyer un .swf avec les ballons qui tournent !

4.2

Vitesse d’un objet avec freinage

Travaux dirig´es d’ActionScript

58

Eric Schrafstetter

CHAPITRE 4. PHYSIQUE

Vous lancez un objet `a l’aide de la souris, celui-ci rebondit sur les bords de l’´ecran puis s’arrˆete apr`es freinage. Donnez `a votre animation les dimensions 400 × 400 1. Cr´eez un bouton rectangulaire 2. Cr´eez 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; } on (release, releaseOutside) { stopDrag (); gotoAndStop (1); pause = false; } Ainsi, lorsque vous presserez et d´eplacerez une occurrence du rectangle rect, son clip tournera en boucle entre les images 2 et 3 et permettra de calculer sa vitesse. Placez une occurrence de rect sur la sc`ene principale et lui donner le nom obj. Ecrivez l’action suivante sur cette occurrence : onClipEvent (load) { friction = 0.95; obj.ancienX = this._x; obj.ancieny = this._y; } onClipEvent (enterFrame) { if (not(pause)) { nouvx = this._x+vitessex; nouvy = this._y+vitessey; vitessex *= friction; vitessey *= friction;

Travaux dirig´es d’ActionScript

59

Eric Schrafstetter

CHAPITRE 4. PHYSIQUE

if (vitessex*vitessex+vitessey*vitessey<0.5) { pause = true; } if ((nouvx<0) || (nouvx>400)) { nouvx=Math.max (nouvx,0); nouvx=Math.min (nouvx,400); vitessex *= -friction; } if ((nouvy<0) || (nouvy>400)) { nouvy=Math.max (nouvy,0); nouvy=Math.min (nouvy,400); vitessey *= -friction; } this._x = nouvx; this._y = nouvy; } } Lorsque vous pressez et d´eplacez 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 d´epart. Une fois le bouton relˆach´e, pause passe `a false et les nouvelles positions nouv sont calcul´ees jusqu’`a une vitesse inf´erieure `a 0.5 o` u l’objet s’arrˆete.

4.3

Fil ´ elastique

Tracer une ligne entre les centres de 2 points mobiles. 1. Cr´eez un clip carr´ e avec un petit carr´e sur l’image 1 2. Placez 2 occurrences de carr´ e sur la sc`ene principale avec pour noms pt1 et pt2. 3. Cr´eez le clip ligne suivant : – Tracer une ligne du centre vers le bas `a droite `a 45◦ (utilisez la touche MAJ en tra¸cant) – S´electionnez la ligne et allez dans la fenˆetre info. Mettre L = 100, H = 100 – Toujours dans la fenˆetre info, cliquez sur le carr´e haut-gauche puis X = 0 et Y = 0.

Fig. 4.3 – Coin en haut `a gauche plac´e en X=0 et Y=0 Mettre l’action suivante sur le clip pt1

Travaux dirig´es d’ActionScript

60

Eric Schrafstetter

CHAPITRE 4. PHYSIQUE

onClipEvent (mouseDown) { // La souris touche-t-elle le clip en pressant ? if (this.hitTest(_root._xmouse, _root._ymouse)) { // suis-moi ! startDrag (""); } } onClipEvent (mouseUp) { stopDrag (); } Idem avec le clip pt2Placer une occurrence de la ligne sur la sc`ene principale et lui affecter l’action : onClipEvent (enterFrame) { 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 pr´ec´edente sur le fil ´elastique. Il s’agit de cr´eer un tableau blanc sur lequel on pourra dessiner librement. 1. Cr´eez un bouton transparent avec un petit carr´e sur l’image cl´e cliqu´ e. 2. Cr´eez un clip nomm´e crayon et placez-y une occurrence du bouton. 3. Ajoutez l’action suivante au bouton : on (press) { _root.souris=1; _root.x1=0; } on (release) { _root.souris=0; } 4. Sur la sc`ene principale, placez une occurrence du clip crayon et lui donner le nom mc. 5. Cr´eez maintenant un clip ligne comme dans la rubrique fil ´elastique (angle de 45◦ vers le bas `a droite, L = 100, H = 100, haut-gauche en (0, 0)) et en placer une occurrence sur la sc`ene principale avec pour nom trait. 6. Etendre par F5 l’image cl´e 1 jusqu’en 3 7. Ajoutez pour les actions et placez `a l’image cl´e 1 l’action :

Travaux dirig´es d’ActionScript

61

Eric Schrafstetter

CHAPITRE 4. PHYSIQUE

_root.souris=0; startDrag (_root.mc, true); 8. A l’image cl´e 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 cl´e 3 du calque action : gotoAndPlay (2); 10. Lancez l’animation et pressez la souris pour dessiner.

Travaux dirig´es d’ActionScript

62

Chapitre 5

Visualisation 5.1

Powerpoint

Pour ins´erer un objet flash en format SWF dans PowerPoint, suivez ces diff´erentes ´etapes : 1. Se placer dans une diapositive o` u l’on veut ins´erer le fichier *.SWF 2. Cliquez sur le menu : ”Affichage” et ensuite sur le menu ”Barre d’outils”. 3. S´electionnez ”Boˆıte `a Outils Contrˆoles” si cette boˆıte n’est pas d´ej`a s´electionn´ee. 4. Cliquez sur ”Autres contrˆoles” (bouton avec le marteau et la cl´e) 5. S´electionner ”Shockwave Flash Object” 6. Dessinez un contrˆole dans la diapositive de la taille souhait´ee pour int´egrer l’objet Flash 7. Faites un clic droit sur l’objet et s´electionner ”Propri´et´es” 8. Pour la propri´et´e ”Movie” tapez le chemin d’acc`es du fichier *.SWF (exemple : C:\Mes documents\Nom.swf) ou son URL 9. S’assurez que la propri´et´e ”Playing” est param´etr´ee sur ’True’ 10. Se mettre en mode d’affichage DIAPORAMA

5.2

Sons, Cookies et Diaporamas

Il s’agit de cr´eer rapidement un diaporama sonore et autonome compos´e d’images .gif, .jpg ou .png. Nous ajouterons 3 boutons afin que le spectateur puisse, s’il le veut, retourner `a la premi`ere diapo, passer `a la diapo suivante ou pr´ec´edente. L’id´ee est la suivante : Cr´eez dynamiquement en javascript des pages qui contiendront le num´ero 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 g´erer le passage d’une diapo `a une autre et les cookies de m´emoriser le

63

Eric Schrafstetter

CHAPITRE 5. VISUALISATION

num´ero de l’image courante.

5.2.1

Partie HTML - javascript

Cr´eez une page index.html du type : <noframes>

Cette page utilise des cadres.

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 : <script> Ceci permet de placer un cookie ayant pour valeur n=0 sur la machine client. La page ppt.htm contient le code : <script>
Travaux dirig´es d’ActionScript

64

Eric Schrafstetter

CHAPITRE 5. VISUALISATION

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; location.href=location; }; function suivant(){ n=eval(document.cookie.substring(2, 10)); document.cookie="n="+n; location.href=location; }; //--> <script language="JavaScript">

	<script language="JavaScript"> ’); document.write(’’); document.write(’<EMBED src="image’+n+’.swf"’); document.write(’WIDTH="200" HEIGHT="5" ’); document.write(’TYPE="application/x-shockwave-flash">’); document.write(’’); Travaux dirig´es d’ActionScript 65 Eric Schrafstetter CHAPITRE 5. VISUALISATION //-->
<script language="JavaScript"> "); //-->