Flash 5 - ActionScript · Travaux dirigés d’ActionScript 8. Eric Schrafstetter CHAPITRE 1. OUTILS DE BASE 4. A l’image 6, insérez une image clé avec l’action : gotoAndPlay

Travaux Dirigés

Flash 5 - ActionScript

Version 1.4

17 janvier 2002

Eric Schrafstetter

Table des matières

1 Outils de base 61.1 Initialisation de variables . . . . . . . . . . . . . . . . . . . . . . 61.2 Position souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.3 Fenêtres et navigateurs . . . . . . . . . . . . . . . . . . . . . . . . 7

1.3.1 Fermer une fenêtre . . . . . . . . . . . . . . . . . . . . . . 71.3.2 Plein écran . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.4 Lecteur autonome . . . . . . . . . . . . . . . . . . . . . . . . . . 81.5 Chargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.5.1 Version élémentaire . . . . . . . . . . . . . . . . . . . . . . 81.5.2 Version avec % . . . . . . . . . . . . . . . . . . . . . . . . 91.5.3 Barre de chargement . . . . . . . . . . . . . . . . . . . . . 91.5.4 Chargement d’une bibliothèque . . . . . . . . . . . . . . . 101.5.5 Version 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

1.6 Couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121.6.1 Définir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121.6.2 Aléatoires . . . . . . . . . . . . . . . . . . . . . . . . . . . 121.6.3 Remplissages transparents . . . . . . . . . . . . . . . . . . 121.6.4 Effet de torche . . . . . . . . . . . . . . . . . . . . . . . . 121.6.5 Jeux de couleurs . . . . . . . . . . . . . . . . . . . . . . . 13

1.7 Jouer un fichier MIDI . . . . . . . . . . . . . . . . . . . . . . . . 141.8 Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161.9 Boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.9.1 Bouton On/Off/Clignotant . . . . . . . . . . . . . . . . . 181.9.2 Bouton transparent . . . . . . . . . . . . . . . . . . . . . 191.9.3 Déplacement d’objets . . . . . . . . . . . . . . . . . . . . 20

1.10 Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211.10.1 Scroll sur texte . . . . . . . . . . . . . . . . . . . . . . . . 21

2 La vidéo 222.1 Vidéo dans une fenêtre séparée . . . . . . . . . . . . . . . . . . . 22

2.1.1 Paramètres généraux pour les vidéos . . . . . . . . . . . . 232.1.2 Windows Media Player . . . . . . . . . . . . . . . . . . . 232.1.3 QuickTime . . . . . . . . . . . . . . . . . . . . . . . . . . 232.1.4 Real Video . . . . . . . . . . . . . . . . . . . . . . . . . . 24

1

Eric Schrafstetter TABLE DES MATIÈRES

2.2 QuickTime dans Flash . . . . . . . . . . . . . . . . . . . . . . . . 242.3 Le cas des fichiers AVI . . . . . . . . . . . . . . . . . . . . . . . . 252.4 MPG et autres effets spéciaux . . . . . . . . . . . . . . . . . . . . 252.5 Poser 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262.6 Real Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.6.1 .smil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.6.2 RealEncoder/RealProducer G2 . . . . . . . . . . . . . . . 272.6.3 Un exemple . . . . . . . . . . . . . . . . . . . . . . . . . . 272.6.4 Créer un vrai .rm . . . . . . . . . . . . . . . . . . . . . . . 28

2.7 Streaming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292.7.1 Avec Real Player . . . . . . . . . . . . . . . . . . . . . . . 292.7.2 Le streaming sous Flash . . . . . . . . . . . . . . . . . . . 30

2.8 Questions/Réponses . . . . . . . . . . . . . . . . . . . . . . . . . 302.8.1 Son QuickTime . . . . . . . . . . . . . . . . . . . . . . . . 302.8.2 Convertir un .swf en .avi . . . . . . . . . . . . . . . . . . . 312.8.3 Une suite ? . . . . . . . . . . . . . . . . . . . . . . . . . . 31

3 Maths 333.1 Nombres aléatoires . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3.1.1 Mélanges . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.2 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3.2.1 Matrices de rotation . . . . . . . . . . . . . . . . . . . . . 333.2.2 Boules dans l’espace . . . . . . . . . . . . . . . . . . . . . 34

3.3 Déformation d’un triangle (Partie 1) . . . . . . . . . . . . . . . . 363.4 Anaglyphes géométriques 3D . . . . . . . . . . . . . . . . . . . . 413.5 Perspectives frontales et obliques . . . . . . . . . . . . . . . . . . 44

3.5.1 Méthode pratique . . . . . . . . . . . . . . . . . . . . . . 443.5.2 Les formules... . . . . . . . . . . . . . . . . . . . . . . . . 443.5.3 Manipulation d’un cube . . . . . . . . . . . . . . . . . . . 47

4 Physique 524.1 Collision élastique de 2 boules . . . . . . . . . . . . . . . . . . . . 52

4.1.1 Rappels . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524.1.2 La théorie . . . . . . . . . . . . . . . . . . . . . . . . . . . 524.1.3 Application . . . . . . . . . . . . . . . . . . . . . . . . . . 55

4.2 Vitesse d’un objet avec freinage . . . . . . . . . . . . . . . . . . . 584.3 Fil élastique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604.4 Tableau blanc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

5 Visualisation 635.1 Powerpoint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635.2 Sons, Cookies et Diaporamas . . . . . . . . . . . . . . . . . . . . 63

5.2.1 Partie HTML - javascript . . . . . . . . . . . . . . . . . . 645.2.2 Partie Images . . . . . . . . . . . . . . . . . . . . . . . . . 665.2.3 Partie Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 67

5.3 Visionneuse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Travaux dirigés d’ActionScript2


5.4 Créer un QCM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715.4.1 Les questions . . . . . . . . . . . . . . . . . . . . . . . . . 715.4.2 Le QCM sous Flash . . . . . . . . . . . . . . . . . . . . . 71

5.5 Camembert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745.6 Panorama 360 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775.7 Rotation autour d’un objet . . . . . . . . . . . . . . . . . . . . . 795.8 360◦ autour d’un objet (version 2) . . . . . . . . . . . . . . . . . 80

5.8.1 Changement de curseur . . . . . . . . . . . . . . . . . . . 805.8.2 L’objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

6 Outils de conversions 836.1 Bitmap vers Vectoriel . . . . . . . . . . . . . . . . . . . . . . . . 836.2 Images vers swf . . . . . . . . . . . . . . . . . . . . . . . . . . . . 856.3 Diaporama en swf . . . . . . . . . . . . . . . . . . . . . . . . . . 85

6.3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . 856.3.2 Quelques remarques . . . . . . . . . . . . . . . . . . . . . 856.3.3 Les indispensables ! . . . . . . . . . . . . . . . . . . . . . . 866.3.4 Exemple d’utilisation . . . . . . . . . . . . . . . . . . . . . 86

6.4 Films vers swf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 866.5 Microsoft Office . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

6.5.1 La barre de dessin . . . . . . . . . . . . . . . . . . . . . . 866.5.2 Powerpoint vers Flash . . . . . . . . . . . . . . . . . . . . 876.5.3 Flash vers PowerPoint . . . . . . . . . . . . . . . . . . . . 896.5.4 Powerpoint-Flash ou PDF ? . . . . . . . . . . . . . . . . . 89

7 SmartClips 937.1 Variateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 937.2 Fenêtres volantes . . . . . . . . . . . . . . . . . . . . . . . . . . . 957.3 Bibliothèque commune . . . . . . . . . . . . . . . . . . . . . . . . 967.4 SmartClip Calendrier . . . . . . . . . . . . . . . . . . . . . . . . . 97

8 Jeux 1018.1 Le morpion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1018.2 Jeu de l’Hexagone . . . . . . . . . . . . . . . . . . . . . . . . . . 104

8.2.1 Les problèmes . . . . . . . . . . . . . . . . . . . . . . . . . 1048.2.2 Le clip pion . . . . . . . . . . . . . . . . . . . . . . . . . . 1068.2.3 Le clip plateau . . . . . . . . . . . . . . . . . . . . . . . . 1078.2.4 Scène principale . . . . . . . . . . . . . . . . . . . . . . . 108

8.3 Le tangram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1098.4 Votre Tetris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

8.4.1 La brique de base . . . . . . . . . . . . . . . . . . . . . . . 1118.4.2 Les pièces . . . . . . . . . . . . . . . . . . . . . . . . . . . 1128.4.3 Le plateau . . . . . . . . . . . . . . . . . . . . . . . . . . . 1128.4.4 La pièce suivante . . . . . . . . . . . . . . . . . . . . . . . 1138.4.5 Le bouton commande . . . . . . . . . . . . . . . . . . . . 1138.4.6 Suppression d’une ligne . . . . . . . . . . . . . . . . . . . 116



8.4.7 Le tempo . . . . . . . . . . . . . . . . . . . . . . . . . . . 1178.4.8 Niveaux et score . . . . . . . . . . . . . . . . . . . . . . . 1188.4.9 Compléments . . . . . . . . . . . . . . . . . . . . . . . . . 1188.4.10 Le programme complet . . . . . . . . . . . . . . . . . . . 119

8.5 Les machines de Turing . . . . . . . . . . . . . . . . . . . . . . . 1238.5.1 Alan Turing . . . . . . . . . . . . . . . . . . . . . . . . . . 1238.5.2 Description de la machine . . . . . . . . . . . . . . . . . . 1248.5.3 Exemple de machine . . . . . . . . . . . . . . . . . . . . . 1248.5.4 Simulation sous Flash . . . . . . . . . . . . . . . . . . . . 1258.5.5 Création de programmes . . . . . . . . . . . . . . . . . . . 1258.5.6 Chargements . . . . . . . . . . . . . . . . . . . . . . . . . 1268.5.7 Conversions . . . . . . . . . . . . . . . . . . . . . . . . . . 1268.5.8 La machine . . . . . . . . . . . . . . . . . . . . . . . . . . 1288.5.9 Version AUTO . . . . . . . . . . . . . . . . . . . . . . . . 1298.5.10 Le fichier Flash fourni . . . . . . . . . . . . . . . . . . . . 1308.5.11 Les fichiers txt . . . . . . . . . . . . . . . . . . . . . . . . 131

8.6 Jeux de plateforme . . . . . . . . . . . . . . . . . . . . . . . . . . 1318.6.1 Danger-Sécurité . . . . . . . . . . . . . . . . . . . . . . . . 1318.6.2 L’ennemi . . . . . . . . . . . . . . . . . . . . . . . . . . . 1328.6.3 Actions simultanées : Touche - Souris . . . . . . . . . . . 1348.6.4 Actions simultanées : Touche - Touche . . . . . . . . . . . 135

8.7 Le Top10 (version MySQL) . . . . . . . . . . . . . . . . . . . . . 1368.7.1 Affichage du Top10 . . . . . . . . . . . . . . . . . . . . . . 1368.7.2 Proposer un score . . . . . . . . . . . . . . . . . . . . . . 137

8.8 Sécurité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1388.8.1 Jouer Online . . . . . . . . . . . . . . . . . . . . . . . . . 1388.8.2 Mot de passe . . . . . . . . . . . . . . . . . . . . . . . . . 1408.8.3 ActionScript Viewer . . . . . . . . . . . . . . . . . . . . . 140

9 PHP 1419.1 Ming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

9.1.1 Tester un swf . . . . . . . . . . . . . . . . . . . . . . . . . 1429.1.2 Notions de base . . . . . . . . . . . . . . . . . . . . . . . . 1429.1.3 Dessiner . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1439.1.4 Camembert 3D online . . . . . . . . . . . . . . . . . . . . 1489.1.5 Déplacement . . . . . . . . . . . . . . . . . . . . . . . . . 1509.1.6 Texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1529.1.7 Morphing . . . . . . . . . . . . . . . . . . . . . . . . . . . 1539.1.8 Loadmovie . . . . . . . . . . . . . . . . . . . . . . . . . . 154

9.2 Echange de variables . . . . . . . . . . . . . . . . . . . . . . . . . 1569.2.1 Exemple du poids idéal . . . . . . . . . . . . . . . . . . . 1569.2.2 Compteur de visiteurs . . . . . . . . . . . . . . . . . . . . 157



10 C++ 15810.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15810.2 C++ vers Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

10.2.1 Création de l’animation Flash . . . . . . . . . . . . . . . . 15810.2.2 Création de l’interface C++ . . . . . . . . . . . . . . . . . 15910.2.3 Insérer l’animation . . . . . . . . . . . . . . . . . . . . . . 15910.2.4 Le programme . . . . . . . . . . . . . . . . . . . . . . . . 16010.2.5 SetVariable . . . . . . . . . . . . . . . . . . . . . . . . . . 162

10.3 Flash vers C++ . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16210.3.1 Création de l’animation Flash . . . . . . . . . . . . . . . . 16210.3.2 Création du programme C++ . . . . . . . . . . . . . . . . 163

11 Liens 16411.1 Forums Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16411.2 Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

11.2.1 Sites Internet . . . . . . . . . . . . . . . . . . . . . . . . . 16411.2.2 Livres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

11.3 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16511.4 Ming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165


Chapitre 1

Outils de base

Introduction à ce document

Ces quelques pages sont, à l’origine, un aide-mémoire personnel de trucs etastuces découverts sur le net ou par moi-même. La présentation des animationsse fait sous forme de travaux dirigés, c’est-à-dire que vous ne pourrez voir lerésultat que si vous faites les manipulations vous-même ! Téléchargez les .flasur le site de ce document et n’hésitez pas à m’encourager ou à me donner desidées en envoyant un mail à [email protected].

Je suppose que le lecteur a d’assez bonnes notions d’ActionScript et demathématiques, dans le cas contraire certaines explications vous parâıtront cer-tainement obscures. . . Ce document est une version 1.4 revue, corrigée et aug-mentée, n’hésitez pas à me communiquer vos remarques et suggestions pour uneversion 1.5 !A titre indicatif, ce document a été créé en LATEXet exporté au format PDFgrâce à dvipdfm.

1.1 Initialisation de variables

Pour n’initialiser des variables qu’une seule fois dans une image clé, créez unclip vide et placez-en une occurrence sur la scène principale avec l’action :onClipEvent (load) {

..initialisation des variables ...}onClipEvent (enterFrame) {

..suite du programme ...}

6

http://www.univ-angers.fr/cufco/schraf/tdasmailto:[email protected]?Subject=ActionScript

Eric Schrafstetter CHAPITRE 1. OUTILS DE BASE

1.2 Position souris

Sur la scène principale :– Placez une zone de texte avec les options suivantes : Texte dynamique etVariable = x.

– Fâıtes un copier/Coller de cette zone de texte et remplacez x par y– Créez un clip vide (CTRL+F8 et nom = drag) que vous placerez n’importe

où sur la scène.– Associez l’action suivante au clip drag :onClipEvent (load) {

startDrag ("");}onClipEvent (enterFrame) {

_root.x=this._x;_root.y=this._y;

}

1.3 Fenêtres et navigateurs

1.3.1 Fermer une fenêtre

Pour quitter un programme Flash visualisé dans une fenêtre en utilisant unbouton, vous pouvez :

1. Créez l’apparence du bouton qui servira à quitter le programme en fermantla fenêtre.

2. Placez une occurrence de ce bouton sur la scène et lui associer l’action :

on (press) {getURL ("Javascript: self.close()");

}

La commande fscommand ("quit"); ferme la projection.

1.3.2 Plein écran

Pour afficher votre animation Flash en plein écran :1. Dans les paramètres de publication HTML, choisir 100% pour la hauteur

et la largeur.

2. Créez la page HTML ci-dessous, où essai.html est le nom du fichierHTML publié par Flash.


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 fermerl’animation ! (voir paragraphe précédent).

1.4 Lecteur autonome

Pour masquer certaines options du bouton droit lorsqu’un programme Flashest lancé en mode autonome, faire :

fscommand ("fullscreen", "true");fscommand ("allowscale", "false");fscommand ("showmenu", "false");

– La première ligne permet de mettre l’affichage en plein écran– La seconde ligne assure que l’échelle de l’animation ne sera pas modifiée– La dernière ligne efface le menu contextuel (sauf le ”A propos de Flash

Player”)

1.5 Chargement

1.5.1 Version élémentaire

Avant de lancer le programme proprement dit, vous voudriez être sûr quetous les éléments nécessaires ont bien été chargés. Imaginons par exemple quepour lancer la scène go, l’animation doit avoir chargé les données jusqu’à lascène fin image 20. On pourra utiliser la méthode suivante :

1. Créez un petit clip qui permettra de faire patienter l’internaute2. Sur la scène principale, mettre le clip à l’image clé 13. A l’image 5, insérez une image clé avec l’action :

ifFrameLoaded ("fin",20) {gotoAndPlay ("go",1);

}



4. A l’image 6, insérez une image clé avec l’action :

gotoAndPlay (2);

1.5.2 Version avec %

1. Créez un clip nommé charge et placez à l’image 1 une zone de textedynamique ayant pour nom chargement

2. Mettre une occurrence de ce clip à l’image 1 de la scène principale (ousur une scène spécialement réservée au chargement) et donner l’actionsuivante au clip :

onClipEvent (load) {_root.gotoAndStop(1);taille = _root.getBytesTotal();if (taille1000000) {

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 chargé, l’animation continue à l’image 2 de lascène principale. Dans le cas d’une scène spécialement réservée au char-gement, ne rien mettre après l’image 1 de sorte que l’animation passeradirectement à la scène 2.

1.5.3 Barre de chargement

1. Créez un clip nommé barre avec un rectangle allongé sur l’image 1Utilisezla barre d’outils info pour placer le coin haut gauche du rectangle à laposition X=0 et Y=0

2. Placez une occurrence de ce clip sur la scène principale et lui donner lenom ligne

3. Associez l’action suivante à cette occurrence :



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 première image de la scène principale.5. Placez une grosse image (plusieurs Ko) à l’image clé 2 de la scène principale

et une action stop();6. Lancez l’animation. L’image devrait apparâıtre rapidement. Faites alors

Déboguer - 14,4 puis Affichage- Afficher le train de lecture. Vous devriezmaintenant voir la barre grandir.

1.5.4 Chargement d’une bibliothèque

Il ne s’agit pas de charger une bibliothèque pendant la création d’une ani-mation (Fichier-Ouvrir comme une bibliothèque) mais bien d’un téléchargementde symboles à la volée au cours de la lecture d’une animation. Par exemple, onpeut imaginer un joueur ayant la possibilité de charger en direct les pièces d’unpuzzle choisi à l’écran, ceci afin d’éviter d’avoir un fichier .swf trop volumineuxet de pouvoir actualiser la base de données.

1. Ouvrez une nouvelle animation et enregistrez-la sous le nom de piece.fla2. Créez un clip représentant par exemple un rectangle3. Ouvrez la bibliothèque de l’animation et faire Bouton droit - Liaison sur

le clip. Choisir : Exporter ce symbole et lui donner le nom p14. Reprendre les deux points précédents en dessinant un disque et en l’ex-

portant sous le nom p25. Compilez l’animation (remarquez qu’il n’y a absolument rien sur la scène

principale) pour créer piece.swf6. Ouvrez une nouvelle animation et enregistrez-la sous plateau.fla7. Créez un clip vide et mettre une occurrence nommée jeu de ce clip sur la

scène principale8. Créez un bouton aillant ayant par exemple la forme d’une boule (peu

importe)9. Placez une occurrence de ce bouton sur la scène principale, écrire 1 dessus

et associez-lui l’action :

on (release) {jeu.loadMovie("pieces.swf");

}



L’animation piece.swf va alors se charger dans le clip jeu lorsque l’onpressera le bouton 1.

10. Placez une autre occurrence du bouton, écrire 2 dessus et lui associerl’action :

on (release) {jeu.attachMovie("p1", "q1", 2);jeu.attachMovie("p2", "q2", 3);jeu.q1._x = 10;jeu.q1._y = 50;jeu.q2._x = 100;jeu.q2._y = 50;

}

En cliquant sur le bouton 2, on récupère les objets p1 et p2 de l’animationpieces.swf. On crée ensuite des occurrences q1 et q2 que l’on place surla scène.

Utilisez la fonction removeMovieClip (jeu.q1); pour décharger l’occur-rence q1.

1.5.5 Version 2

Au lieu de charger le .swf à l’intérieur d’un clip (voir exemple précédent),vous pouvez le charger à un certain niveau par la commande

loadMovieNum("nom.swf",numero);.1. Reprendre l’animation pieces.swf précédente.2. Ouvrir une nouvelle animation et mettre un stop(); à l’instant 1.3. Créez un bouton quelconque et placez une occurrence sur la scène princi-

pale, avec l’action :

on (release) {loadMovieNum("pieces.swf",1);

_level0.gotoAndStop(2);}

L’animation piece.swf va alors se charger au niveau 1 (rappelons que_root est au niveau 0).

4. Placez une autre occurrence du bouton à l’image clé 2 lui associer l’action :

on (release) {for (i=1; i


_level1 accède à l’animation pieces.swf et .attachMovie pour récupérerles éléments de sa bibliothèque.

1.6 Couleurs

1.6.1 Définir

Considérons un clip d’occurrence r et une variable k contenant le textek = "0xFF00AA". Pour mettre le clip r de la couleur k, fâıtes :couleurobj = new Color("r");;couleurobj .setRGB(parseInt(k));

1.6.2 Aléatoires

Voici une méthode pour attribuer une couleur rgb (Red - Green - Blue)aléatoire à un objet.

r = Math.floor(Math.random()*256);g = Math.floor(Math.random()*256);b = Math.floor(Math.random()*256);couleurobj = new Color("nom_clip");couleurobj.setRGB(r


5. Ajoutez l’action suivante à l’image 1 du calque Mask :

startDrag (_root.torche, true);stop();

6. Compilez, lancez et déplacez la souris...

1.6.5 Jeux de couleurs

Nécessite le logiciel Publisher ou PowerPoint . Si vous n’êtes pas graphisteou avez peur de ne pas choisir des couleurs harmonieuses entre elles, voici unesolution pour récupérer les jeux de Publisher ou PowerPoint. Avez-vous lu lespages 160 à 164 du manuel ’Utilisation de Flash’ ? Pour ceux qui ont une versiond’évaluation de Flash, récupérez les manuels de référence au format PDF sur

http ://www.macromedia.com/support/flash/documentation.html.

Avec Publisher

1. Lancez Publisher et quittez le catalogue pour avoir une feuille blanche

2. Dessinez 5 carrés et choisissez un jeu de couleur (Format - Jeux de cou-leurs)

3. Cliquez maintenant sur le premier carré puis sur le pot de peinture (ouFormat - Couleur de remplissage) et choisissez la première couleur de lasérie de 6 proposées

4. Recommencez avec le second carré et la seconde couleur, etc.

5. Vous avez maintenant 5 carrés de couleurs différentes

6. Sélectionnez les 5 carrés en les entourant avec la souris puis Copier

7. Lancez Flash et Coller

8. Affichez le Nuancier par Fenêtre - Panneau - Nuancier

9. Nous allons effacer toutes les couleurs du nuancier (pas de panique !) etmettre nos nouvelles couleurs. Remarquez la petite flèche I en haut àdroite de la fenêtre du Nuancier.

10. Cliquez dessus et choisir ’Effacer les couleurs’ ! Oups ! Je vous sens pâlir !

11. Cliquez maintenant sur l’onglet Mixeur puis sur le rectangle en couleur.Utilisez la pipette pour récupérer la couleur du premier carré importé dePublisher.

12. Cliquez sur la flèche I en haut à droite de la fenêtre du Mixeur puis’Ajouter un nuancier’.

13. Recommencez avec les 4 autres couleurs

14. Affichez l’onglet Nuancier puis I - Enregistrez les couleurs.15. Choisir le type ’Jeu de Couleurs Flash’ et lui donner le nom du jeu de

Publisher.


http://www.macromedia.com/support/flash/documentation.html


16. Recommencez depuis le début avec les différents jeux qui vous intéressent.

17. Enfin, faites Nuancier - I - Charger les couleurs par défaut pour retrouvertoutes vos couleurs...

18. Si vous voulez charger un jeu de couleurs, faites : Nuancier - I - Remplacerdes couleurs.

19. Pour ajouter des dégradés, afficher la fenêtre Remplir par Fenêtre - Pan-neau - Remplir

20. Créez un dégradé linéraire ou radial puis cliquez sur la petite disquette enbas à droite.

Avec PowerPoint

1. Lancez PowerPoint, choisir une présentation vierge et diapo blanche

2. Avec la barre de dessin, dessinez 6 carrés sur la diapo

3. Faites Bouton droit sur la diapo et ’Appliquer un modèle...’ (ou Format -Appliquer un modèle) et choisir un modèle quelconque

4. Cliquez sur le premier carré puis sur le pot de peinture et choisir parmiles 6 couleurs différentes de noir ou blanc

5. Recommencez avec les 5 autres carrés et les 5 autres couleurs

6. Sélectionnez les 6 carrés et copiez-les

7. Lancez Flash. Si vous utilisez PowerPoint 2000 faites Edition - CollageSpécial et choisissez Image (Métafichier) sinon faites simplement Coller.

8. Suivre maintenant la procédure comme pour Publisher...

1.7 Jouer un fichier MIDI

Je ne parlerai pas de l’insertion de fichiers MP3 dans une animation Flash,c’est classique. En revanche, voici un exercice permettant par une animationFlash de lire ou de stopper un fichier MIDI (invisible à l’écran).

1. Le principe est le suivant : Créer un index.html contenant 2 frames ayantles noms anim pour l’animation Flash et lecteur pour le cadre qui contien-dra le lecteur MIDI.

2. Voici le script de index.html

Page d’accueil



Il est grand temps de changer de navigateur !

3. Le fichier blank.htm est ce que l’on imagine :

Rien

4. Téléchargez pour l’exercice un fichier MIDI quelconque et enregistrez-ledans le même dossier que index et blank (musicrobot.com).

5. Lancez Flash et enregistrez sous le nom son.fla

6. Créez un bouton quelconque et placez 2 occurrences de ce dernier sur lascène principale.

7. Au premier bouton, ajouter l’action :

on (release) {fscommand ("joue", "nom.mid");

}

où nom.mid est le nom du fichier à jouer.

8. Au second bouton, ajouter l’action :

on (release) {fscommand ("stop");

}

9. Ajouter une action stop(); à l’image clé 1 de la scène principale.

10. Aller dans les paramètres de publication puis, dans l’onglet HTML, choisirFlash avec FSCommand.

11. Publiez l’animation et ouvrez le fichier son.html créé dans le bloc-note.

12. Changez la fonction son_DoFSCommand par :

function son_DoFSCommand(command,args) {if (command=="stop"){parent.lecteur.location.href="blank.htm";

}if (command=="joue"){var z=parent.lecteur.document;z.open();if (navigator.appName == "Netscape") {


http://www.musicrobot.com


z.write("");

} else {z.write("");

}z.close();

}}

Ainsi, lorsque l’on presse le bouton joue, la fenêtre lecteur est réécritegrâce à Javascript, en distinguant le type de navigateur. L’action stopefface la fenêtre lecteur et le son s’arrête. Attention, si vous compilez ànouveau votre animation Flash, le programme ci-dessus sera écrasé ! Enfin,une dernière remarque, si vous voulez convertir un fichier MIDI en MP3,vous pouvez utilisez Wingroove (shareware).

1.8 Cookies

Nous allons créer une animation qui demande un nom puis l’enregistre dansun cookie lorsque l’on clique sur un bouton.

1. Créez une animation vide et enregistrez-la sous le nom cookie.fla2. Créez une zone de texte de saisie et nommez-là nom.3. Placez l’action suivante à l’image 1 :

getURL ("javascript:getCookie();");

4. Créez un bouton quelconque et placez-le à côté de la zone de texte. Donnezl’action suivante au bouton :

on (release) {getURL("javascript:setCookie();");

}

Les fonctions getCookie() et setCookie() étant définies dans la pageHTML (voir ci-dessous).

5. Publiez votre animation et éditez le fichier source. Placez les fonctionsci-dessous dans la tête du document HTML.

Les cookies avec Flash


7. Lancez votre navigateur et ouvrez cookie.html. Il n’y a normalementaucun nom dans la zone de saisie. Tapez un nom et cliquez sur le bouton.

8. Effacez le nom puis actualisez la page, le nom réapparâıt.

Pour voir les cookies d’un document, tapez dans la barre d’adresse :

javascript:alert(document.cookie.split(’;’).join(’\n’))

1.9 Boutons

1.9.1 Bouton On/Off/Clignotant

1. Créez un clip avec 3 images clé nommées on (image 1), off (image 2) etblink (image 3)

2. A l’image 1, dessinez l’image du bouton off

3. A l’image 2 et 3, celui du bouton on

4. Insérez une image clé vide à l’instant 10 (ou moins pour un clignotementplus rapide)

5. Insérez une nouvelle couche nommée Action et placez à l’image 1 et 2l’action stop();

6. Insérez une image clé en 10 avec l’action

gotoAndPlay(3)



Sur la scène principale, placez une occurrence de ce clip et lui donner le nomboutonPour voir par exemple le bouton sur on, utilisez l’action :_root.bouton.gotoAndPlay("on");

1.9.2 Bouton transparent

Lorsque vous voulez rendre une partie de l’écran sensible à l’action de lasouris, vous placez un bouton transparent dont la zone du cliqué couvre cettepartie.

– Créez un symbole bouton nommé bouton– Ne rien mettre dans les images Haut, Dessus et Abaissé– Dessinez une forme pour l’image Cliqué– Revenez sur la scène principale et placez une occurrence du bouton.– Lancez l’animation. L’écran reste vide mais une zone est devenue sensible

au passage de la souris.Astuce Pour éviter de voir apparâıtre la main au dessus de la zone sensible,

créez un clip et placez le bouton dedans !

1. Créez un bouton bouton avec un rectangle sur haut et Cliqué

2. Créez un clip et mettre une occurrence du bouton bouton à la premièreimage

3. Ajouter l’action suivante au bouton :

on (press) {_root.press = 1;

}on (release, releaseOutside) {

_root.press = 0;}

4. Placer une occurrence du clip sur la scène principale et lui affecter l’action :

onClipEvent (load) {startDrag (this, true);

}

Ainsi, lorsque l’animation démarre, le clip devient glissable et suit lesmouvements de la souris. La variable press permet de savoir si le boutonest pressé (1) ou non (0).

5. Sur la scène principale, dessinez une zone de texte dynamique et affectez-lui le nom de variable x

6. Créez un nouveau clip vide nommé controles. Placez une occurrence surla scène principale avec l’action :

onClipEvent (enterFrame) {if (_root.press==1) {

_root.x++;



}}

7. Lancez l’animation et pressez le bouton gauche de la souris, le compteuraugmente. Relâchez, il s’arrête.

1.9.3 Déplacement d’objets

– Créez un rectangle et transformez-le en clip ayant pour nom rect.– Placez une occurrence de ce clip sur la scène principale et lui donner le

nom rect1

Action sur l’image 1

for (i=2; i


1.10 Information

1.10.1 Scroll sur texte

Voici un premier moyen de créer un scroll sur un texte :1. Créez un bouton bouton avec une petite flèche dirigée vers le haut comme

apparence

2. Créez une zone de texte dynamique avec pour nom de variable TexteEcran.Mettre en forme cette zone (choix de la couleur, de la police...).

3. Insérez une occurrence de bouton (qui servira à faire défiler le texte versle haut)

4. Insérez une seconde occurrence de bouton en utilisant l’outil de transfor-mation pour faire pivoter l’image de 180◦ et avoir la flèche dirigée vers lebas.

5. Créez une couche action sur la scène principale et mettre en 1 une imageclé avec l’action :

TexteAide = "BIENVENUE...#MERCI DE ...#SUITE DE L\’AIDE...";Texte2 = new Array();Texte2=String(TexteAide).split("#");TexteEcran=Texte2.join(chr(13));stop();

Vous écrivez votre texte d’aide dans la variable TexteAide avec le symbole# lorsque vous voulez retourner à la ligne. La première fonction convertitle texte en tableau et la seconde fonction joint tous les éléments avec leséparateur chr(13) qui est le code du retour chariot.

6. Associez au bouton à la flèche vers le haut l’action :

on (press) {if (TexteEcran.scroll > 1) {

TexteEcran.scroll--;}

}

7. Pour le bouton à la flèche vers le bas :

on (press) {if (TexteEcran.scroll < TexteEcran.maxscroll) {

TexteEcran.scroll++;}

}


Chapitre 2

La vidéo

2.1 Vidéo dans une fenêtre séparée

Voici comment lancer des vidéos à partir d’une animation Flash :

1. Téléchargez une vidéo .avi (par exemple sur Fundelire.com)

2. Comme pour le paragraphe sur les fichiers MIDI, créez une page nomméeindex.html ayant le code :

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. Créez un bouton quelconque et associez-lui l’action :

on (release) {fscommand ("joue", "video.avi");

}

où video.avi est le nom de votre fichier vidéo.

6. Ajoutez l’action stop(); à l’image clé 1 de la scène principale.

7. Choisir paramètres de publication HTML avec FSCommand

22

http://www.fundelire.com

Eric Schrafstetter CHAPITRE 2. LA VIDÉO

8. Publiez et remplacez lanceur_DoFSCommand par :

function lanceur_DoFSCommand(command,args) {if (command=="joue"){var z=parent.lecteur.document;z.open();z.write("");

z.close();}}

2.1.1 Paramètres généraux pour les vidéos

Commande DescriptionALIGN Aligne la console (RIGHT, LEFT, TOP, BOTTOM)

BORDER Largeur de la bordure (en pixels)WIDTH Largeur de la vidéo (en pixels)HEIGHT Hauteur de la vidéo (en pixels)

SRC Adresse de la vidéoLOOP Nombre de fois où la vidéo est jouée (-1 = infini)

2.1.2 Windows Media Player

Commandes propres à Windows Media Player (true par défaut)

AUTOSTART, AUTOLOAD,CONTROLS

2.1.3 QuickTime

Commandes propres à QuickTime (true par défaut) :

AUTOPLAY, PLAYEVERYFRAME (joue vidéo au fur et à mesure)CONTROLLER, HREF , TARGET



2.1.4 Real Video

Pour Real Video, la commande CONTROLS peut prendre les valeurs sui-vantes :

All, ControlPanel, InfoVolumePanelInfoPanel, Statusbar, Playbutton, Stopbutton

Le script se composant de deux parties (une pour la vidéo l’autre pour lecontrôle), voici un exemple de script :

function son_DoFSCommand(command,args) {if (command=="joue"){var z=parent.lecteur.document;z.open();z.write("");z.write("");z.write("
");z.close();}}

2.2 QuickTime dans Flash

L’exercice suivant va vous permettre de créer des effets spéciaux à partird’une animation QuickTime. Il est essentiel de noter que le fichier de sortie nesera pas un .swf mais un fichier QuickTime ! Flash n’est là ”que” pour créerdes effets et/ou ajouter de l’interactivité.

1. Téléchargez ou créez une animation QuickTime .mov.

2. Lancez Flash et enregistrez sous le nom effets.fla

3. Fichier - Importer puis choisissez le fichier .mov

4. Etendre la première image clé jusqu’à la fin de l’animation QuickTime parF5

5. Ajoutez une nouvelle couche au dessus de celle réservée à la vidéo

6. Créez une petite animation, utilisez des effets alpha (pour voir la vidéoau travers)

7. Dans les paramètres de publication, décochez Flash (.swf) et cochez Quick-Time (.mov)



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 = tousau moment de l’importation :

1. Lancez Flash, enregistrez l’animation sous le nom video.fla puis faitesFichier - Importer

2. Choisir Type = tous, sélectionnez votre animation .avi puis importez

3. Etendre par F5 jusqu’au nombre de frames du clip (les images apparaissentau fur et à mesure)

4. Réduire les dimensions de votre animation principale à celle de la vidéo(ce n’est pas obligatoire).

5. Ajoutez éventuellement une couche pour les effets spéciaux en Flash (voirQuickTime dans Flash)

6. Dans les paramètres de publication, décochez Flash (.swf) et cochez Quick-Time (.mov)

7. Choisir éventuellement quelques options dans l’onglet QuickTime (parexemple Contrôleur Standard pour avoir les boutons Play, Stop et Pause)

8. Publiez l’animation par MAJ+F12

9. Utilisez l’explorateur windows et lancez le .mov créé !

Remarque : C’est donc un moyen très simple de convertir un .avi en .mov !

2.4 MPG et autres effets spéciaux

Voici quelques outils pour créer des effets spéciaux ou convertir des vidéos :1. Pour convertir des fichiers .mpg ou .avi en .avi avec des effets spéciaux,

vous pouvez utilisez le logiciel gratuit VirtualDub. Voici un exemple demanipulation pour convertir un fichier .avi en noir et blanc :

(a) Ouvrir un fichier vidéo avec VirtualDub

(b) Menu Video-Filter et Add pour choisir le filtre threshold. Quant auparamètre, choisissez par exemple 50% (à ajuster ensuite)

(c) Faites avancer le curseur pour visualiser les images et modifiez éventuel/-lement le paramètre

(d) Choisir Video - Full Processing Mode

(e) File - Save AVI et enregistrez la video filtrée sous un nouveau nom


http://www.concentric.net/~psilon/


2. Vous pouvez donc ensuite convertir le fichier AVI en QT4 et le manipulersous Flash. Cependant, si votre fichier comporte peu d’images, je vousconseille de télécharger le logiciel gratuit AVIDecomposer qui permet dedécomposer une vidéo AVI en une multitude d’images .jpg plus un fichier.wav pour le son ! Lancez ensuite Flash et importez la première image-Flash vous demande alors si vous désirez importer toute la suite (il voittout le bougre !), d̂ıtes oui. C’est la technique que j’ai utilisée pour créerl’animation de la femme sur le site de ce documentLes images JPG ont étéconverties une à une en Bitmap par l’outil Modification - Tracer Bitmap.

2.5 Poser 4

Il existe un plug-in qui permet de convertir une animation Poser en swf (queje ne connais pas). Voici un autre moyen de conversion (Tous les outils utiliséssont gratuits (sauf Poser ! !)) :

1. Téléchargez l’excellent logiciel de visualisation www.irfanview.com.2. Téléchargez et installez ras2vec (voir paragraphe sur le passage du bitmap

au vectoriel)3. Installez AVIDecomposer4. Créez une animation avec Poser5. Choisir un affichage Silhouette CTRL+1, mettre fond du décors en blanc et

personnage en noir6. Exportez au format .avi par Animation - Make Movie (Désolez, je n’ai

qu’une version d’évaluation en Anglais) avec Quality = Current DisplaySettings. Faites OK puis choisir Trames non compressées.

7. Lancez AVIDecomposer puis File Name - Browse et choisir le fichier AVIcréé. Décomposez la vidéo.

8. Lancez IrfanView et File-Batch Conversion (ou tapez la lettre B)9. Sélectionnez tous vos fichiers puis Add et Work As - Batch Conversion

10. Output Format = BMP et Advanced Options - Change Color Depth = 2colors (Black/White)

11. Choisir Use this Directory as Output puis Start pour démarrer la conver-sion des jpg en bmp noirs et blancs

12. Ouvrez une fenêtre DOS dans le répertoire des fichiers BMP et tapez lacommande :

ras2vec -d -m *.bmp

Vous avez maintenant des fichiers .emf13. Lancez Flash et importez la première image image1.emf, Flash vous pro-

pose d’importer les autres. Répondre oui.14. Eventuellement séparez les dessins par CTRL+B et optimisez les lignes par

CTRL+MAJ+ALT+C


http://www.chironexsoftware.comhttp://www.univ-angers.fr/cufco/schraf/tdashttp://www.irfanview.com/http://xmailserver.org/davide.htmlhttp://www.chironexsoftware.com


2.6 Real Player

Nous utilisons RealPlayer 8 Basic, freeware téléchargeable (5Mo) sur real.comou disponible sur beaucoup de CD-Rom gratuits de connexion à Internet (Re-cherchez un fichier ayant pour nom rp8*). Ce player est en fait beaucoup plusqu’un simple lecteur, c’est plutôt un navigateur qui n’aurait qu’un défaut... nepas lire le HTML !2.6.1 .smil

Le langage SMIL (Synchronized Multimedia Integration Language) permetde synchroniser des fichiers multimédias sur Internet.

Les fichiers vidéos étant assez volumineux, ils sont encodés de manière à pou-voir être ”streamés”. Le ” stream ” étant le flux de données qui permet à l’inter-naute de commencer à visualiser la vidéo avant que celle-ci ne soit complètementchargée.

L’encodage peut se faire suivant au moins 3 technologies différentes :– Real Audio et Real Video de Real Networks– Quicktime de Apple– ASF de MicrosoftReal Player est capable d’utiliser un fichier Flash en tant que ressource au

même titre que les fichiers audios, images ou fichiers textes.La vidéo peut aussi être mise en forme dans un habillage en cohérence avec

les paramètres détectés chez l’internaute spectateur. SMIL permet donc de syn-chroniser des flux Audio et Vidéos en fonction des paramètres de chaque inter-naute.

La technique Les fichiers SMIL sont des fichiers textes. De simples éditeursde textes sont suffisants pour faire du SMIL. En tant qu’extension de XML, elleutilise les mêmes règles syntaxiques. Une page SMIL est composée de 2 élémentsprincipaux :

1. Une entête qui définira toutes les régions nécessaires a l’affichage deséléments.

2. Un corps qui contiendra toutes les instructions de synchronisation.

2.6.2 RealEncoder/RealProducer G2

Les freewares RealEncoder 5.0 ou RealProducer G2 permettent de convertirfacilement des fichiers .avi, .mov, .wav ou .au en .ra (Audio) ou .rm (Vidéo).L’adresse sur le site officielle real.com m’échappe mais vous trouverez facilementce logiciel en tapant renc51.exe ou RealProducer G2 freeware (3,2 Mo)dans un moteur de recherche (par exemple sur www.google.fr). Prenez soinde passer le fichier téléchargé à l’anti-virus ! Ce freeware permet également decapturer et transformer en .rm des images provenant d’une webcam ou d’unesource externe (K7 VHS, TV...).2.6.3 Un exemple


http://www.real.comhttp://www.real.comhttp://www.google.fr


ATTENTION ! N’utilisez que des actions Flash 4, l’exportation au formatRealPlayer n’est pas compatible avec ActionScript. Pour ne pas vous tromper,faites Fichier - Paramètres de publication puis dans l’onglet Flash, choisissezen bas Flash 4 et OK. Si vous insérez une action, ne prenez pas les fonctionssurlignées en jaunes, ceux sont celles propres à la version 5. Toujours dansl’onglet Flash, cliquez sur le bouton Définir à côté du Train Audio. ChoisirCompression : Brut (Obligatoire) et Taux : 22kHz par exemple (44kHz étant demeilleure qualité).

1. Donnez à l’animation les dimensions 200× 200 pixels (Modification - Ani-mation)

2. Importez un son (wav ou mp3) sous flash par Fichier - Importer3. Ouvrez la bibliothèque ( CTRL+L) et placez une occurrence du son sur la

scène.4. Dans l’échelle temporelle contenant le son, étendre par F5 jusqu’au temps

10 (par exemple).5. Fenêtre - Panneau - Son (ou bouton droit sur l’échelle temporelle - Pan-

neau - Son) et choisir Sync : En continu. C’est le seul format acceptépour la publication.

6. Créez une nouvelle couche et placez-y une animation quelconque (inter-polation de forme par exemple).

7. Fenêtre - Paramètres de publication. Choisir Real Player comme formatd’exportation. Un onglet RealPlayer apparâıt alors. Cliquez dessus et choi-sir :– Exportation réglages Flash. Choisir 34Kps pour le taux (valeur classique

pour les modems 56Kps)– Exportation Audio : SureStream = voix ou musique ou... Modem = 56K– Exportation SMIL (Vous pouvez également régler les propriétés du pro-

jet qui seront éventuellement visibles à la publication de la page)

Il faut bien voir que le fichier .smil créé n’est là que pour intégrer l’animationFlash dans Real Player. Il n’y a donc aucune compression supplémentaire parrapport au .swf. Ouvrez le fichier .smil créé par Flash avec le bloc-notes pourvoir sa structure.

2.6.4 Créer un vrai .rm

Cette fois on perd presque tout (interactivité, images vectorielles, clips...)mais on compresse fortement la vidéo et le son pour former un unique fichier.rm (Real Movie) beaucoup plus petit que le .swf correspondant. Voici la manip :

1. Reprenez l’animation de la partie précédente (Une piste son et une inter-polation de forme par exemple).

2. Faites Fichier - Exporter l’animation et choisir Windows AVI. Choisirle Format vidéo = Couleur 24 bits et le format Audio 44Kz Mono ouStéréo. Utilisez des trames non compressées pour avoir la meilleure qualitépossible.



3. Vous récupérez en sortie un fichier .avi généralement assez gros. La mani-pulation est identique (choisir type=WAV) si vous désirez créer un uniquefichier contenant la piste sonore de votre animation. Lancez alors RealEncoder ou RealProducer G2 et choisissez Record From File - OK etSuivant.

4. Browse et retrouvez votre fichier .avi

5. Donnez éventuellement un titre, Auteur et Copyright

6. Choisissez 56K si c’est pour une diffusion sur le web

7. Les formats audios sont assez explicitent

8. Pour la qualité vidéo, la première option (Smoothest Motion) est intéressantes’il y a peu de mouvements (interview par exemple), la seconde (SharpestImage) s’il y a beaucoup de mouvements et la dernière (Slide Show) affichedes images nettes mais saccadées.

9. Donnez un nom de sortie, par exemple video.rm

10. Options - Advanced Mode puis cliquez sur Settings... en bas à droite.Choisir Total = 34 Kbps, ajustez le son (5 Kps par exemple), la vidéo seraalors basée sur 34-5=29 Kps. Faites des tests en baissant le taux sur lavidéo jusqu’à la limite du supportable !

11. Cliquez sur Start pour lancer la conversion.

12. Le résultat, généralement 10 à 20 fois plus petit que le .swf, se lit avecReal Player.

2.7 Streaming

2.7.1 Avec Real Player

Le streaming vidéo permet de commencer à voir une vidéo dès le début deson chargement, ce qui évite les temps d’attente. En effet, au lieu de chargerl’ensemble de la vidéo pour qu’elle puisse être regardée, le streaming permet devoir les premières images dès le départ, en même temps que le film est chargé.Pendant que vous regardez le début de cette vidéo la suite des informationsarrive dans votre ordinateur.

1. Encoder un fichier avec Real Producer G2 (ex : titre.rm).

2. Ouvrez le bloc notes

3. Ecrivez l’adresse où se trouvera votre fichier .rm (ex : http ://monsite.com/titre.rm)

4. Enregistrer votre fichier en .ram (ex : monfichier.ram), pour cela choisirType = 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 ://mon-site.com/monfichier.ram)

A HREF="lance.ram">Voir la vidéo...



7. Ou encore en tant que vidéo intégrée 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 ? Vousl’aurez deviné, en utilisant la technique du stream. Certaines images ne serontpas montrées afin que l’animation suive la cadence imposée. Voici la méthode(voir l’original en anglais ) :

1. Créez un silence d’environ 0,1 seconde sous le nom silence.wav

2. Sous Flash, importez le fichier silence.wav (Fichier - Importer)

3. Insérez une couche nommée silence et placez une occurrence de silence.wavsur la scène

4. Faites Fenêtre - Panneau - Son ou Bouton droit sur l’échelle temporelle etPanneau - Son

5. Choisir Sync = En continu et Boucles = 1.

6. Sur d’éventuelles autres couches, placez de vrais sons avec la propriétéSync = Evénement

7. Dans les paramètres de publication, sous l’onglet Flash, choisir :– Train audio = ADPCM, 5kHz, 2 bit Mono– Evénement audio = ADPCM, 11kHz, 4 bit Mono– Et neutralisez les paramètres audio en cochant la case du dessous.

8. Il ne reste plus qu’à compiler votre animation.

2.8 Questions/Réponses

2.8.1 Son QuickTime

Flash sait importer des vidéos .mov mais pas leurs pistes sonores. Dans unenote technique , Macromedia propose d’utiliser les logiciels payants SoundEdit16 ou QuickTime Pro afin de convertir la piste son en .wav ou .aiff. Je vouspropose une solution gratuite (vous commencez à me connaitre non ?) :

1. Téléchargez sur www.radgametools.com le freeware RAD Video Tools


http://www.vrprofessionals.com/html/whitepaper/nullsound.htmhttp://www.macromedia.com/support/flash/ts/documents/simulate_video01.htmhttp://www.radgametools.com


2. Installez le logiciel, lancez-le programme radvideo.exe et choisissez le fi-chier .mov qui sera à importer sous flash

3. Cliquez sur Convert a file, décochez Convert Video et choisir un formatde sortie pour le son, par exemple 8-bit/stereo. Le fichier de sortie (enhaut) doit être un .wav.

4. Cliquez sur le bouton Convert. Vous avez maintenant un fichier son quis’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 permetde lire et convertir des fichiers .mid en .wav, quelqu’un connâıt-il un moyengratuit d’arriver au même résultat ? Je pensais avoir un bon début de réponseen 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 enplus a une taille comparable au .mid d’origine !). Hélas, RAD Video Tools nesemble pas reconnâıtre ce format ! L’autre idée était d’utiliser WinAmp et safameuse commande Disk Writer ( CTRL+P - Output) qui permet par exemplede convertir des fichiers .mp3 en .wav. En ajoutant le plug-in VidAmp qui offre àWinAmp la possibilité de lire des fichiers vidéos (entre autres les .mov), j’ai cruà tort qu’il pourrait convertir le son d’un .mov en .wav. Donc pour le momentje ne sais pas convertir gratuitement un .mid (ou .mov audio) en .wav ou .mp3afin de l’importer sous Flash. A défaut, existe-t-il un équivalent gratuit de TotalRecorder qui permet d’enregistrer en .wav ou .mp3 n’importe quel son provenantd’une application ou de l’extérieur ? ?

2.8.2 Convertir un .swf en .avi

Une fonction ma foi très originale du freeware RAD Video tools est de pou-voir convertir directement un fichier .swf en .avi ! Bien entendu, cela n’a d’intérêtque si vous partez d’un .swf dont vous n’avez pas ou plus la source. Si vous avezle .fla, utilisez plutôt la procédure vue plus haut. De plus, si l’animation com-porte de l’ActionScript, il est peu probable que la conversion se passe bien...Utilisez ensuite le freeware VirtualDub pour créer des effets spéciaux sur lavidéo. Le fichier .avi peut alors être converti en :

– .mpg par les freewares AVI2MPG2 ou ULEAD MPEG Converter.– .rm par le freeware Real Encoder 5.0 ou RealProducer– .swf ou .mov en l’important sous Flash (Fichier - Importer - Type = Tous)

et en le publiant. Pour que le fichier soit un .mov autonome du .swf, il fautchoisir Aplatir dans l’onglet QuickTime des paramètres de publication.

2.8.3 Une suite ?

Ces quelques pages se veulent une introduction très rapide au passage deFlash à Real Player et au streaming. N’hésitez pas à me communiquer vos


http://www.cc.rim.or.jp/~hiroki/englishhttp://members.home.net/beyeler/bbmpeg.html


remarques en vue d’améliorer ce supplément. En attendant, voici quelques liensutiles :

– Utiliser RealProducer– Des guides (en PDF) sur le site de real.comù– Flash et le streaming– Un tutorial intéressant sur Flash et le streaming– Optimiser le son sous Flash


http://www.cortland.edu/flteach/mm-course/vid-dig.htmlhttp://service.real.com/help/library/encoders.htmlhttp://www.streamingmediaworld.com/smil/tutor/flash5smil_3/http://www.webreference.com/js/tips/010426.htmlhttp://www.vrprofessionals.com/html/whitepaper/nullsound.htm

Chapitre 3

Maths

3.1 Nombres aléatoires

3.1.1 Mélanges

Voici une méthode pour mélanger les données d’un tableau :1. Affectez à l’image 1 de la scène principale l’action :

tableau=new Array();for (i=0; i

Eric Schrafstetter CHAPITRE 3. MATHS

Rφ =

cos φ 0 − sin φ0 1 0

− sin φ 0 cos φ

et la matrice Rθ d’un angle θ autour de l’axe y (voir figure 3.1) :

Rθ =

cos θ − sin θ 0− sin θ cos θ 0

0 0 1

Plus généralement, la transformation M(a, b, c) → RφRθ(M) s’écrit :

RφRθ(M) =

a cos(θ) cos(φ)− b sin(φ)− c sin(θ) cos(φ)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’ajouteun effet de scale sur la profondeur.

1. Créez le clip boule représentant une. . . boule. Mettre une occurrence dece clip à l’image 1 de la scène principale et lui donner le nom boule etétendre par F5 jusqu’à l’image 3.

2. Placez également 3 zones de texte de saisie avec les noms a, b et c.

3. Créez une nouvelle couche pour les actions

4. Ajoutez l’action suivante à l’image 1 de la couche d’action

i = 1;while (i


duplicateMovieClip (boule, "b"+i, i);this["tx"+i] = 200*Math.random()-100;this["ty"+i] = 200*Math.random()-100;this["tz"+i] = 200*Math.random()-100;i++;

}a=b=c=0.1;

On crée 4 boules d’occurrence b1, b2..à partir de boule et on les placealéatoirement sur l’écran. Les 3 lignes suivantes attribuent des coordonnéestri-dimensionnelles à ces 4 boules.La dernière ligne permet de donner la valeur 0.1 aux 3 variables.

5. Mettre l’action suivante à l’image 2 de la couche action

with (Math) {sa = sin(a);ca = cos(a);sb = sin(b);cb = cos(b);sc = sin(c);cc = cos(c);

}i = 1;while (i


On retrouve dans les calculs des rx et ry les matrices de rotation expli-citées au paragraphe précédent. A cela s’ajoute un effet de scale et detransparence alpha suivant la profondeur z. Les coordonnées (200, 200)sont celles du centre du repère.

6. Mettre l’action gotoAndPlay (2); à l’image clé 3 de la couche action.

7. Lancez l’animation. Mettre b et c à 0 pour voir tourner les 4 boules suivantl’axe 0x. Augmentez la valeur d’une variable pour accélérer le mouvement.

3.3 Déformation d’un triangle (Partie 1)

Cet exercice est inspiré d’un tutorial de Pavils Jurjans. Quelques formules,notament sur le calcul de S et h, ont été simplifiées par rapport à l’original. Ils’agit de transformer par les fonctions _xscale, _yscale et _rotation de Flash,un triangle équilatéral en un triangle imposé par la donnée de 3 points A,B et C.Contrairement aux apparences, c’est loin d’être simple ! Heureusement, commele montre le nombre croissants d’applications à la 3D, le jeu en vaut la chandelle.

Questions :1. On suppose dans un premier temps que la droite (CB) est horizontale.

Montrez que le rapport m/n est égal à :

m

n=

OA2 + OC2

OA× CB − 1

2. Inversement, soit γ un réel positif fixé. Montrez que la valeur α du _xscaledilatant horizontalement ce triangle dans un rapport m/n égal à γ est :

α =OC√

OA((γ + 1)CB − 1)

3. On suppose le triangle ABC équilatéral (voir figure 3.3)Montrez que le αcalculé précédemment est donné par :

α =√

31 + 2γ

4. Soit ABC un triangle quelconque de plus grand côté (AC).– Montrez que sa surface est égale à :

S =| (xB − xA)(yC − yA)− (xC − xA)(yB − yA) |

2

– En déduire que la hauteur h est :

h =2SAC



Rφ

Rθ

Z

Y

X

Fig. 3.1 – Les rotations élémentaires

C B

A

n

m

hβ

O

Fig. 3.2 – Relations dans un triangle

_xscale

γ = 2

m

n

m = nC

A

B C’

A’

B’m = 2n

α = 77,46

Fig. 3.3 – Transformation dans le cas γ = 2



– Montrez que le signe de (xB − xA)(yC − yA) − (xC − xA)(yB − yA)permet de déterminer si le point B est au dessus ou en dessous de ladroite (AC).

– Calculez les coordonnées du barycentre d’un triangle équilatéral. Endéduire que la distance entre le milieu de la hauteur et le barycentre est√

3AC12 ' 0, 144×AC.

Réponses :

1. Cela provient des relations élémentaires suivantes :

n = CB cos β

m = AC − n

AC =OA

cos β

doncm

n=

OA

CB cos2 β− 1

D’autre part

sin β =h

CB=

OC√OA2 + OC2

etcos2 β = 1− sin2 β

Il suffit de remplacer cos2 β par son écriture suivant les termes OC, CBet OA.

2. En substituant OA à αOA, et CB à αCB dans la première équation onobtient :

α2OA2 + OC2

α2OA× CB − 1 = γ

On isole ensuite le α.

3. On a OA = CB2 et OC = h = CB√

32 , d’où :

α2 CB2

4 +3CB2

4α2CB2

2

− 1 = γ

et l’on isole le α.

4. Triangle quelconque :– S est la demi somme de la norme du produit vectoriel des vecteurs

−−→AB

et−→AC, d’où :

S =12

∣∣∣∣xB − xA xC − xAyB − yA yC − yA

∣∣∣∣On a bien le résultat annoncé.

– La surface d’un rectangle est la base par la hauteur sur 2.



– On compare les pentes des droites (AB) et (AC), c’est-à-dire les nombres(yB−yA)(xB−xA) et

(yC−yA)(xC−xA) .

– L’ordonnée du barycentre G est égal au tiers de la hauteur, soit yG =√3AC6 Le centre ayant pour ordonnée

√3AC4 , la différence donne bien√

3AC12 .

Une fois que l’on a transformé le triangle équilatéral dans un rapport m/n, onplace par rotation le grand côté (AC) horizontalement, on effectue un _xscalepuis un _yscale afin qu’il ait les dimensions voulues puis une nouvelle rotationpour le mettre dans la bonne direction. Passons à la pratique !

Application fondamentale :

1. Créez un clip nommé equi avec le dessin d’un triangle équilatéral dans lesens 4.

2. Utilisez la fenêtre info pour lui donner les dimensions L = 100 et H = 86, 6(qui correspond à la hauteur 100

√3

2 )

3. Mettre le barycentre du triangle exactement sur la croix (coordonnéescentre X = 0 et Y = −14, 4)Voir figure 3.

clip equiclips tri3

tri2

Mettre centre enX=0Y= -14.4

Mettre centre enX=0Y= 0

L=100 et H=86,6

centre enX=0Y=0

Départ

Fig. 3.4 – Positions des centres des clips

4. Créez un clip nommé tri3 et mettre une occurrence du clip equi sur sonimage 1 avec pour nom type.

5. Créez un clip nommé tri2 et mettre une occurrence du clip tri3 sur sonimage 1 avec pour nom base.

6. Sur la scène principale, mettre une occurrence du clip tri2 avec pour nomtri1. Pourquoi tant de niveaux ? Parce que nous devons effectuer plusieursscales et rotations. Essayez d’appliquer une rotation à un clip puis un_xscale, vous verrez que ce dernier n’est pas appliqué horizontalementmais suivant l’angle de la rotation !

7. Créez un bouton bt représentant un petit disque (L = H = 6 par exemple)

8. Créez un clip nommé ptA avec une occurrence du bouton bt au centre duclip (X = Y = 0)Ajoutez l’action suivante au bouton :



on (press) {startDrag ("", true);

}on (release) {

stopDrag();}

9. Mettre une occurrence du clip ptA sur la scène principale avec pour nomA

10. De la même façon, créez deux autres clips ptB et ptC avec leurs occurrencesrespectives B et C sur la scène principale.

11. Créez un clip vide et placez-en une occurrence sur la scène principale avecl’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 scène principale

function Tracer (triangle, x1, y1, x2, y2, x3, y3) {abx = x1-x2;aby = y1-y2;cax = x3-x1;cay = y3-y1;bcx = x2-x3;bcy = y2-y3;S = abx*cay-cax*aby;dir = (S


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 déplacez les points A, B et C. Si le triangle ne touchepas exactement les trois points mobiles, assurez-vous du bon positionne-ment des centres des clips (voir figure 3).

3.4 Anaglyphes géométriques 3D

Avant de vous lancer dans cet exercice, il faudra vous munir d’une pairede lunette avec des verres rouge/vert ou rouge/bleu Obtenir des adresses). Laconversion 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/) oudirectement par manipulation sous Photoshop/Paint Shop Pro (voir ma page3D).

Le principe repose sur le Théorème de Thalès (voir figure 3) :

OGODGD

=OOGOG

etOGOD =

OOG ×GDOOG + GOG


http://webhome.infonie.fr/alpes_stereo/lunette.htmhttp://www.stereoeye.com/http://www.univ-angers.fr/cufco/schraf/3d/3d.htmhttp://www.univ-angers.fr/cufco/schraf/3d/3d.htm


ODOG

O

GD

P

oeil

Fig. 3.5 – Principe des anaglyphes

Dans la pratique, l’écartement des yeux est GD ' 6, 3cm et la distance yeux-écran vaut environ GOG ' 70cm. Par exemple, si vous voulez que votre pointapparâısse à 25cm hors de l’écran, la distance entre les points bleu et rougedevra être de OGOD ' 1, 66cm.

Manipuler un triangle dans l’espace : S’il y a de petits enfants qui fontce tutorial ( ? !), je pense vraiment que l’abus de ces lunettes devant ton écrann’est pas bon pour tes yeux...

1. Reprendre la manipulation sur la déformation d’un triangle et ajoutez uneoccurrence du clip tri2 sur la scène principale avec pour nom trirouge.

2. Pour créez le triangle bleu ciel à partir de tri1, utilisez le panneau effetavec les options : Avancé - Rouge=(-100%×R)-255, Vert =( 10%×V)+255,Bleu=(100%×B)+255, Alpha=(50%×A)+0. Pour ajuster correctement lescoefficients, prendre vos lunettes, regardez le triangle bleu uniquement àtravers le filtre bleu et faites varier la valeur de la composante verte (ne pastoucher au rouge) jusqu’à ce que le triangle disparaisse. Regardez ensuitele triangle bleu à travers le filtre rouge, vous devez le voir correctement.

3. Idem avec le triangle rouge trirouge : Avancé - Rouge=(100%×R)+255,Vert =( -100%×V)+0, Bleu=(-100%×B)+0, Alpha=(50%×A)+0

4. Faites un copier-coller des trois points A,B et C de la scène et renommez-les A2, B2 et C2Vous avez maintenant 6 points sur la scène principale, unclip vide et 2 triangles : un bleu et un rouge.

5. Utilisez le panneau info pour superposer les points A et A2, idem avec lespoints B et B2 puis C et C2.

6. Mettre un effet alpha=0 sur les 6 points afin qu’il disparaissent pendantl’animation.

7. Changez la fin de l’action sur l’image 1 de la scène principale en :

function Tracer (triangle, x1, y1, x2, y2, x3, y3) {..._yscale = 1.15470054*sqrt(hh)*rr/pp*dir;



}}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 dutriangle rouge et d’autre part que les ordonnées des points soient bienalignées horizontalement.

8. Changez l’action du clip vide en :

onClipEvent (keyDown) {if (key.isDown(Key.DOWN)) {

_root[lettre]._x--;} else if (key.isDown(Key.UP)) {

_root[lettre]._x++;} else if (key.isDown(65)) {

lettre = "A";} else if (key.isDown(66)) {

lettre = "B";} else if (key.isDown(67)) {

lettre = "C";}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 (mouseMove) {

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 (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 éloigner ou rapprocher ce point avec les flèches haut et bas.

9. Compilez et lancez l’animation. Mettez vos lunettes et restez appuyez surla flèche vers le bas, un des coins doit sortir de l’écran (c’est le pointB)Tapez sur la touche A et à nouveau sur la flèche vers le bas, un autrecoin sort de l’écran.

10. Vous pouvez également modifier la forme du triangle grâce à la souris.

3.5 Perspectives frontales et obliques

Merci au centre IGESA de Biscarrosse avec leurs chalets aux chambres cu-biques de m’avoir donné cette idée d’exercice...3.5.1 Méthode pratique

La figure 3.6 montre comment tracer un cube en perspective à partir de sesprojections en plan (vue du dessus) et en élévation (vue de côté). Le point Vreprésente le point de vue (l’oeil est sur la figure un peu au dessus du cube),le plan T est le plan vertical (imaginaire) sur lequel prend place le dessin, dansnotre cas l’écran de l’ordinateur. La méthode peut se résumer à :

1. Tracez le point V et la droite T (représentant le plan vu de côté). Mettreles même distances entre V et T sur les 2 coupes.

2. Dessinez les vues de l’objet (pas nécessairement un cube !).

3. Tracez les segments [V A], [V B]... qui coupent la droite T en certains points.

4. Tracez les perpendiculaires à T en ces points.

5. Utilisez les points d’intersections de ces nouvelles droites pour tracer l’ob-jet en perspective.

3.5.2 Les formules...

Exercices1. Soit V un point de vue dans l’espace, T un plan ne passant pas par V et A un

point dans le demi-espace ne contenant pas V (voir figure 3.7). Déterminez



le vecteur−−→V A′ en fonction des vecteurs

−→V A et −→n = −−→V V ′ où −→n est normale

(perpendiculaire) au plan T.

2. Cas particulier de la projection sur le plan Oxy. Déterminez les coor-données du vecteur

−−→V A′ lorsque V (x0, y0, z0) avec z0 < 0, −→n = (0, 0,−z0)

(c’est-à-dire que l’oeil est à la distance | z0 | de l’écran) et A(xA, yA, zA)avec zA > 0.

3. Intérieur d’un cube :

(a) Tracez sur l’écran T= Oxy la perspective d’un cube de rayon R et decentre O lorsque le point de vue en V (0, 0, R).

(b) On suppose que l’écran de l’ordinateur est carré et de côté L. Trouvezles formules donnant les coordonnées d’un point (x, y, z) du cube surl’écran.

(c) Par quel facteur doit-on multiplier ces coordonnées pour que la facearrière du cube prenne tout l’écran ? (Cas particulier : L = 400 etR = 100)

Corrigé

1. Remarquons que le plan T est l’ensemble des points M vérifiant :

−−−→V ′M.−→n = 0

C’est-à-dire les points tels que le vecteur−−−→V ′M soit orthogonal à −→n . Par

la relation de Chasles, ceux sont donc également les points M vérifiant :

(−−→V ′V +

−−→V M).−→n = 0

soit : −−→V M.−→n = n2

où n est la norme du vecteur −→n .Comme

−−→V A′ est de la forme λ

−→V A et que le point A′ appartient au plan T,

le réel λ doit vérifier :λ−→V A.−→n = n2

d’où−−→V A′ =

n2

−→V A.−→n

−→V A

2. Dans le cas particulier, les coordonnées du vecteur−−→V A′ dans le plan Oxy

sont donc :

−−→V A′

{x0 + (xA − x0) z0z0−zAy0 + (yA − y0) z0z0−zA

puisque−→V A.−→n = (xA − x0) × 0 + (yA − y0) × 0 + (zA − z0) × (−z0) et

n2 = 02 + 02 + (−z0)2 = z20 .



V

V

E-F G-H

C-G D-H

B-F A-E

A-B C-DAB

EF

C D

G H

T

T

Vue de droite

Vue du dessus

Fig. 3.6 – Perspective d’un cube

V

T

AA’

V’

Fig. 3.7 – Projection sur le plan T



3. Intérieur d’un cube

(a) Voir la construction figure 3.8.

(b) On utilise les questions précédentes pour voir que les coordonnéessont : {

x′ = x RR−zy′ = y RR−z

(c) Comme le point C a pour coordonnées C(−R2 , R2 ,−R2 ), on trouve :

C ′ ={

x′ = −R3y′ = R3

(d) On passera du carré CDGH de côté 2R3 à l’écran L×L en multipliantpar le coefficient 3L2R . Ainsi, pour tracer le cube en perspective aucentre de l’écran, nous avons la formule générale :

{xecran = L2 +

3L2(R−z)x

yecran = L2 − 3L2(R−z)y

Dans le cas particulier L = 400 et R = 100, le coefficient vaut 6 etl’on a donc : {

xecran = 200 + 600100−z xyecran = 200− 600100−z y

3.5.3 Manipulation d’un cube

Nous avons tous les ingrédients pour tracer un objet 3D et le manipuler !1. Lancez Flash puis Modification - Anima/-tion pour mettre les dimensions

de l’animation à 400× 4002. Créez une ligne du centre vers le bas à droite à 45◦ avec pour fenêtre info :

L = 100, H = 100, X = 0 et Y = 0 (Cf exercice sur le fil élastique)

3. Transformez cette ligne en symbole nommé ligne et en mettre une occur-rence sur la scène principale avec pour nom arete. Ce sera le modèle del’arête de notre cube.

4. A l’image 1 de la scène principale mettre l’action :

R = 100;L = 100;cangle = Math.cos(Math.PI/18);sangle = Math.sin(Math.PI/18);var coins = [1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1,

-1, 1, 1, 1, 1, -1, 1, -1, -1, 1, -1, 1, 1];var faces = [0, 1, 2, 3, -1, 4, 7, 6, 5, -1, 0, 4, 5,1, -1, 1, 5, 6, 2, -1, 2, 6, 7, 3, -1, 4, 0, 3, 7, -1];

for (i=0; i


arete.duplicateMovieClip("ar"+i, 1+i);}ecran = new Array();function affiche () {

for (i=0; i


1 à 2, de 2 à 3 et de 3 à 0. Recommencer de 4 à 7, puis de 7 à 6...). Pourquoice format ? Parce que vous pouvez facilement récupérer ces coordonnéesen enregistrant un objet au format VRML. Par exemple avec l’excellentlogiciel 3D gratuit Blender, ou encore avec Corel 3D, 3D Studio Max... Laformule donnant le coefficient coeff s’obtient par :

3L2

1R− z R2

xR

2=

3LR(2− z)

Les coordonnées des points à l’écran sont mis dans le tableau ecran.

5. Créez un bouton représentant une flèche vers le haut et lui mettre l’action :

on (release) {rotx(-1);affiche();}

6. Créez un bouton représentant une flèche vers le bas et lui mettre l’action :

on (release) {rotx(1);affiche();}

7. Créez un bouton représentant une flèche vers la gauche et lui mettre l’ac-tion :

on (release) {roty(1);affiche();}

8. Créez un bouton représentant une flèche vers la droite et lui mettre l’ac-tion :

on (release) {roty(-1);affiche();}

9. Créez un second bouton représentant une flèche vers le haut et lui mettrel’action :

on (release) {_root.L-=5;if (_root.L


Ceci aura pour effet d’éloigner le cube.

10. Créez un second bouton représentant une flèche vers le bas et lui mettrel’action :

on (release) {_root.L+=5;affiche();}

Ceci aura pour effet de rapprocher le cube.

11. Compilez et lancez l’animation. Utilisez les flèches pour manipuler le cube.Si vous trouvez que la perspective est ”sévère”, n’oubliez pas que noussommes dans le cas particulier ou l’oeil est situé à la distance R du planT ! Vous pouvez modifier la distance en remplaçant :

coeff = 3*L/(2-coins[3*i+2])/2;

par :

coeff = R*L/(L-coins[3*i+2]);

Il faudrait écrire z0 à la place de L pour rester cohérent avec les notationsprécédentes.



AB

EF

C D

G H

Vue de droite

Vue du dessusV

V

T

TR

RC-G D-H

B-F A-ER

plan T

Fig. 3.8 – Construction de la perspective


Chapitre 4

Physique

4.1 Collision élastique de 2 boules

La partie théorique suppose des notions de physique niveau bac .

4.1.1 Rappels

1. Le vecteur quantité de mouvement −→p d’un point de masse m et de vitesse−→v est par définition −→p = m−→v .2. L’énergie cinétique d’un point de masse m et de vitesse −→v est, toujours

par définition :

Ec =12mv2

où v est la norme du vecteur −→v .3. On considère deux points matériels A1 et A2 de masses m1 et m2. Une loi

de la physique énonce que la quantité de mouvement totale d’un systèmede 2 masses ponctuelles en collision se conserve quelque soit le référentiel :

−→p1 +−→p2 = −−→Cte

4. Une autre loi affirme qu’il y a conservation de l’énergie totale, ce qui setraduit, dans le cas d’une collision élastique, par :

Ec1 + Ec2 = Cte

où Ec1 est l’énergie cinétique du point A1.

4.1.2 La théorie

52

Eric Schrafstetter CHAPITRE 4. PHYSIQUE

1. Montrez que dans le cas d’une collision directe, c’est à dire lorsque lesvecteurs vitesses avant et après le choc sont colinéaires (parallèles), alorsles vitesses v′1 et v

′2 après le choc sont données par :

v′1 =2m2v2 + (m1 −m2)v1

m1 + m2et

v′2 =2m1v1 − (m1 −m2)v2

m1 + m2Réponse

La conservation de la quantité de mouvement avant et après le choc permetd’écrire que :

m1v1 + m2v2 = m1v′1 + m2v′2

et celle de l’énergie totale que :12m1v

21 +

12m2v

22 =

12m1v

′21 +

12m2v

′22

On en déduit que :{

m1(v′1 − v1) = m2(v2 − v′2)m1(v′21 − v21) = m2(v22 − v′22 )

d’où, par division de la ligne 2 par la ligne 1 :{

m1(v′1 − v1) = m2(v2 − v′2)v′1 + v1 = v2 + v

′2

Les valeurs de v′1 et v′2 s’obtiennent alors en résolvant ce système de 2

équations à 2 inconnues.2. Lors d’une collision en un point de contact K de 2 objets arrivant avec des

vecteurs vitesse −→v1 et −→v2 (voir figure 4.1), seules les composantes v1x et v2xinterviennent. On néglige ici les effets de frottements (voir par exemple lecours de Mécanique de JPhPerez (Niveau Classes Prépas)).

3. Nous obtenons la méthode de construction de la figure 4.2. Les quantitésv′1x et v

′2x sont obtenus par les formules précédentes. Déterminez les coor-

données à l’écran de v′e1 = (v′e1x, v

′e1y) en fonction de ϕ, v1y et v

′1x.

Réponse

La composante v′e1x est la somme des projetés de v1y et v′1x sur l’axe ho-

rizontal. L’angle entre v1y et l’axe horizontal est ϕ + π2 et de ϕ pour v′1x.

D’où :v′e1x = v

′1x cos ϕ− v1y sin ϕ

puisque cos(ϕ + π2 ) = − sin ϕ. De même, on projecte les 2 vecteurs surl’axe vertical et on en fait la somme :

v′e1y = v′1x sin ϕ + v1y cos ϕ



v1

v1y

v1x

v2y

v2x

v2

A2,m2

A1,m1

K

Fig. 4.1 – Contact des 2 boules

v1

v1y

v1x

v2y

v2xA2,m2v2

v ’1x

v ’2x

v ’1

v ’2

ϕθ1

θ2

A1,m1

Fig. 4.2 – Construction des vecteurs vitesse



4.1.3 Application

1. Lancez Flash et CTRL+M pour donner les dimensions 500 × 400 à la scèneet cadence 50.

2. Dessinez une boule (avec son centre sur la croix centrale). Convertissez-làen bouton nommé boule

3. Créez un clip b1 et mettre une occurrence du bouton boule sur la croix(les 2 croix sont alors superposées)

4. Ajoutez l’action suivante au bouton :on (press) {

_root.drag1 = true;startDrag ("");


_root.drag1 = false;stopDrag ();

}

5. Mettre une occurrence du clip b1 avec pour nom boule1 sur la scèneprincipale

6. De même, créez un clip b2 et mettre une occurrence du bouton boule surla croix

7. Ajoutez l’action suivante au bouton :on (press) {

_root.drag2 = true;startDrag ("");


_root.drag2 = false;stopDrag ();

}

8. Mettre une occurrence du clip b2 avec pour nom boule2 sur la scèneprincipale

9. Ajoutez une couche pour les actions10. A l’image 1 de la scène principale, sur la couche action, mettre :

gauche = 0;droite = 500;haut = 0;bas = 400;r1 = boule1._width/2;r2 = boule2._width/2;a1a2 = (r1+r2)*(r1+r2);mass1 = 1;mass2 = 4;



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;

}}

Il n’y a rien à dire sur le script sinon que v1x est v1x, v1px est v′1x et v1xeest v′e1x.

11. A l’image 2 de la couche action, ajouter :

ox1 = x1;oy1 = y1;v1ye += gravite;x1 = boule1._x;y1 = boule1._y;// Calculs des vitessesif (drag1 == 1) {

v1xe = x1-ox1;v1ye = y1-oy1;

} else {x1 += v1xe;y1 += v1ye;

}ox2 = x2;



oy2 = y2;v2ye += gravite;x2 = boule2._x;y2 = boule2._y;if (drag2) {

v2xe = x2-ox2;v2ye = y2-oy2;

} else {x2 += v2xe;y2 += v2ye;

}// Touche-t-on un bord ?if ((x1+r1)>=droite) {

x1 = droite-r1;v1xe *= -1;

}if (gauche>=(x1-r1)) {

x1 = gauche+r1;v1xe *= -1;

}if ((y1+r1)>=bas) {

y1 = bas-r1;v1ye *= -1;

}if (haut>=(y1-r1)) {

y1 = haut+r1;v1ye *= -1;

}if ((x2+r2)>=droite) {

x2 = droite-r2;v2xe *= -1;

}if (gauche>=(x2-r2)) {

x2 = gauche+r2;v2xe *= -1;

}if ((y2+r2)>=bas) {

y2 = bas-r2;v2ye *= -1;

}if (haut>=(y2-r2)) {

y2 = haut+r2;v2ye *= -1;

}dist = (x1-x2)*(x1-x2)+(y1-y2)*(y1-y2);if ((dist


affiche();}// Nouvelles positionsboule1._x = x1;boule1._y = y1;boule2._x = x2;boule2._y = y2;// On ralentit les boulesv1xe *= fric;v1ye *= fric;v2xe *= fric;v2ye *= fric;if (v1xe*v1xe


Vous lancez un objet à l’aide de la souris, celui-ci rebondit sur les bords del’écran puis s’arrête après freinage.

Donnez à votre animation les dimensions 400× 4001. Créez un bouton rectangulaire

2. Créez un clip rect et placez le bouton rectangulaire dessus. Etendre surles image 1 à 3 par F5.

Documents

Flash 5 - ActionScript · Travaux dirigés d’ActionScript 8. Eric Schrafstetter CHAPITRE 1. OUTILS DE BASE 4. A l’image 6, insérez une image clé avec l’action : gotoAndPlay