ActionScript 3 Et Le Motion Design

Le Campus
ActionScript 3
et le motion design
Codes sources
C
sur
su
ur w
www.pearson.fr
w
Arzhur Caouissin
LivreActionScript.book Page I Vendredi, 15. janvier 2010 12:34 12
ActionScript 3
et le motion design
LivreActionScript.book Page II Vendredi, 15. janvier 2010 12:34 12
Pearson Education France a apport le plus grand soin la ralisation de ce livre afin de vous fournir une
information complte et fiable. Cependant, Pearson Education France nassume de responsabilits, ni pour
son utilisation, ni pour les contrefaons de brevets ou atteintes aux droits de tierces personnes qui pourraient
rsulter de cette utilisation.
Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour illustrer les descriptions tho-
riques. Ils ne sont en aucun cas destins une utilisation commerciale ou professionnelle.
Pearson Education France ne pourra en aucun cas tre tenu pour responsable des prjudices ou dommages
de quelque nature que ce soit pouvant rsulter de lutilisation de ces exemples ou programmes.
Tous les noms de produits ou autres marques cits dans ce livre sont des marques dposes par leurs
propritaires respectifs.
Publi par Pearson Education France

47 bis, rue des Vinaigriers
75010 PARIS
Tl. : 01 72 74 90 00
www.pearson.fr
Avec la collaboration de Bruno Sbarbe

ditrice : Dominique Buraud. Digit Books
Mise en pages : TyPAO
ISBN : 978-2-7440-4128-0
Copyright 2010 Pearson Education France
Tous droits rservs
Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues larticle L. 122-5 2 et 3 a) du code
de la proprit intellectuelle ne peut tre faite sans lautorisation expresse de Pearson Education France ou, le cas
chant, sans le respect des modalits prvues larticle L. 122-10 dudit code.
No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including
photocopying, recording or by any information storage retrieval system, without permission from Pearson Education,
Inc.
LivreActionScript.book Page III Vendredi, 15. janvier 2010 12:34 12
ActionScript 3
et le motion design
Arzhur Caouissin
LivreActionScript.book Page IV Vendredi, 15. janvier 2010 12:34 12
LivreActionScript.book Page V Vendredi, 15. janvier 2010 12:34 12
Table des matires
Prface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
qui sadresse ce livre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Les intentions de lauteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Structure du livre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Les exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Prsentation de lauteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1 Les animations en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Animer les proprits : position, dimension, rotation,

opacit et chelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Grer les proprits avec des conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Grer les acclrations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Grer le dfilement de panoramiques en boucle . . . . . . . . . . . . . . . . . . . . 23
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2 Interpolations et interactivit avec les classes Tween

et TweenMax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Animer une galerie avec la classe Tween intgre . . . . . . . . . . . . . . . . . . . 29
Animer une carte interactive avec la classe TweenMax . . . . . . . . . . . . . . 38
Dfilant TweenMax avec un pointeur et un masque . . . . . . . . . . . . . . . . . 48
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
LivreActionScript.book Page VI Vendredi, 15. janvier 2010 12:34 12
VI ACTIONSCRIPT 3 ET MOTION DESIGN
3 Les transitions deffets et de filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Galerie photo avec transition deffets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Effet de fondu avec un Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Dfinition de la classe transitionManager . . . . . . . . . . . . . . . . . . . . . . . 62
Galerie photo avec transition de filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Filtre flou . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Filtre ombre porte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Filtre halo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Filtre biseau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Dclinaison des filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
4 La programmation de squelettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Programmer un mouvement mcanique . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Dfinition du squelette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Animer le squelette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Programmer un mouvement organique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Basculer du mode animation programme au mode excution . . . . . . . 92
Activer un squelette charg dans un SWF . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
5 Les galeries dimages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Afficher des images externalises et alatoires . . . . . . . . . . . . . . . . . . . . . . 99
Raliser une jauge de chargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Raliser une galerie dimages externalises . . . . . . . . . . . . . . . . . . . . . . . . 107
Raliser une galerie dimages avec XML . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Interactivit sur les objets dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Rsoudre les erreurs ventuelles au chargement et lexcution . . . . . 131
Gestion de site dynamique avec XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
LivreActionScript.book Page VII Vendredi, 15. janvier 2010 12:34 12
TABLE DES MATIRES VII

6 La vido standard et composite en FLV . . . . . . . . . . . . . . . . . . . . . . . 137
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Concevoir la vido pour le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Composition simple avec Apple Motion . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Composition simple avec Adobe After Effects . . . . . . . . . . . . . . . . . . . . . . 147
chantillonner la vido pour Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Encoder en FLV avec After Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Encoder en FLV avec Premiere Pro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Encoder en FLV avec Final Cut Pro . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Encoder en AVI-DV avec Window Movie Maker. . . . . . . . . . . . . . . . . . 154
Encoder en MOV ou DV avec iMovie . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Encoder en FLV avec Adobe Media Encoder . . . . . . . . . . . . . . . . . . . . . 155
Intgrer de la vido composite dans Flash . . . . . . . . . . . . . . . . . . . . . . . . . 169

Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
7 La vido HD en F4V . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Encoder en F4V avec Adobe Media Encoder . . . . . . . . . . . . . . . . . . . . . . . 177
Onglet Vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Onglet Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Encodage F4V avec Quick Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Crer un lecteur vido personnalis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Crer un lecteur vido H-264 pour Flash 6 et plus . . . . . . . . . . . . . . . . . . 191
Agrandir une vido sans perte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
8 La vido interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Contrles de base de la vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Lecture automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
LivreActionScript.book Page VIII Vendredi, 15. janvier 2010 12:34 12
VIII ACTIONSCRIPT 3 ET MOTION DESIGN
Mise en cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Lire la vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Arrt de la vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Acclrer la vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Rembobiner la vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Modifier le volume audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Augmenter et diminuer progressivement le son . . . . . . . . . . . . . . . . . . . 206
Chapitrage vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Sous-titrage vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Boucle vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Synchroniser des actions avec les points de repre . . . . . . . . . . . . . . . . . . 217
Repres de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Repres dvnements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Lire une vido en arrire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Arrter une vido dans un SWF imbriqu . . . . . . . . . . . . . . . . . . . . . . . . . 232
Arrt et fermeture depuis le document racine . . . . . . . . . . . . . . . . . . . . . 234
Arrt et fermeture depuis le contenu charg . . . . . . . . . . . . . . . . . . . . . . 236
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
9 La 3D native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Animer un livre 3D en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Carrousel dimages 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Version simplifie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Version dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Mur dimages 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Galerie vido 3D circulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
La galerie simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
La galerie optimise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Navigation spatiale 3D faon TimeMachine ou Aero . . . . . . . . . . . . . . . . 279

Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
LivreActionScript.book Page IX Vendredi, 15. janvier 2010 12:34 12
TABLE DES MATIRES IX

10 La 3D et PaperVision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Installer PaperVision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Tlchargement avec Tortoise SVN pour Windows . . . . . . . . . . . . . . . . 290
Tlchargement avec SVNX pour Mac OS X . . . . . . . . . . . . . . . . . . . . 292
Intgrer la classe PaperVision Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Modliser en 3D pour Flash et PaperVision . . . . . . . . . . . . . . . . . . . . . . . . 299
Programmer les mouvements de camra 3D . . . . . . . . . . . . . . . . . . . . . . . 304
Programmer les mouvements dobjets 3D . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Interactivit avec les touches du clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
11 API daffichage et de colorimtrie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Lissage des images bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Lissage des graphismes vectoriels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Effet loupe avec optique dformante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Filtres de correction colorimtrique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Appliquer et restaurer un filtre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Correction colorimtrique par lot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Correction colorimtrique par interpolation . . . . . . . . . . . . . . . . . . . . . . 351
Imprimer un document SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Appliquer une teinte alatoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Crer un puits de couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
12 Le Web en vrai relief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Prise de vues pour le relief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
LivreActionScript.book Page X Vendredi, 15. janvier 2010 12:34 12
X ACTIONSCRIPT 3 ET MOTION DESIGN
Raliser un anaglyphe avec Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

Le principe de limage jaillissante ou fentre . . . . . . . . . . . . . . . . . . . . . 363
Crer lanaglyphe partir de deux images . . . . . . . . . . . . . . . . . . . . . . . 370
Grer un anaglyphe en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

Interface SWF en relief dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
13 Les systmes de navigation avancs . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Boutons MovieClip fixes avec tat activ et visit . . . . . . . . . . . . . . . . . . . 389
Les boutons visits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
La structure Switch case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Les boutons activs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Boutons MovieClip anims et interfaables . . . . . . . . . . . . . . . . . . . . . . . . 395

Mthode avec les actions dans le scnario du lien . . . . . . . . . . . . . . . . . 397
Mthode avec les actions sur la scne principale . . . . . . . . . . . . . . . . . . 401
Console de navigation en miniature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

Menu droulant repositionnement automatique . . . . . . . . . . . . . . . . . . 407
Activer et dsactiver les boutons et les MovieClip . . . . . . . . . . . . . . . . . . . 414
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
14 La communication Flash/HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Menu contextuel du lecteur Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Navigation Flash vers le HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Navigation HTML vers Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Historique de lanimation Flash dans le navigateur . . . . . . . . . . . . . . . . . 428
Importer du HTML dans un SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430
Grer le Flash transparent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
LivreActionScript.book Page XI Vendredi, 15. janvier 2010 12:34 12
TABLE DES MATIRES XI

15 La gestion de sites Full Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Basculer en mode plein cran et restaurer laffichage standard . . . . . . 437
Interface lastique flottante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Grer le PDF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Grer la typographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Les textes statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Les textes dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Les bibliothques partages de symboles et de typographies . . . . . . . . 454
Importer Flash AS1/AS2 dans Flash AS3 . . . . . . . . . . . . . . . . . . . . . . . . . . 458

Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
16 Les solutions de rfrencement du Flash . . . . . . . . . . . . . . . . . . . . . 463

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Intgration XHTML stricte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Structurer un document pour lAPI de Google . . . . . . . . . . . . . . . . . . . . . 464
Les mtadonnes des fichiers SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Grer le contenu alternatif pour les robots et les appareils nomades . . 469
Installer le kit SWFObject2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
Personnaliser le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
17 Laccessibilit dans Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
La fentre Accessibilit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Concevoir un document Flash pour les non-voyants et malentendants 481
Synthse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
18 Ressources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Livres ................................................... 483
LivreActionScript.book Page XII Vendredi, 15. janvier 2010 12:34 12
XII ACTIONSCRIPT 3 ET MOTION DESIGN
Tutoriels vidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483

Sites web et forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Dictionnaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485
Index des notes et encadrs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485

LivreActionScript.book Page 1 Vendredi, 15. janvier 2010 12:34 12
Prface
Le motion design se dfinit par lensemble des signes fixes et anims qui caractrisent
lidentit dun site et au service de son contenu. Ces signes et ces formes vhiculent une
identit par des animations distribues dans un scnario sur une chelle de temps linaire.
Par cette organisation plastique et smantique, ils en appuient le sens dgag.
Pour offrir une identit qui puisse voluer selon la configuration et le comportement de
lutilisateur, une identit volutive, ractive et applicative, il est incontournable de la rali-
ser en ActionScript. Nous parlons alors de motion design en ActionScript. Nous pourrions
parler aussi de script design, mais le terme nest pas vraiment usuel.
Pour cela, nous disposons de plusieurs versions du langage ActionScript. Il convient natu-
rellement daborder la version qui offre la rponse la plus approprie au besoin dfini par le
concepteur du site. Trois versions de ce langage sont apparues successivement depuis la fin
des annes 90 et continuent dexister chacune indpendamment des autres :
ActionScript 1.0 est utilis pour le Web mobile et les sites de premire gnration. Il nest
presque plus employ pour la cration de sites Internet classiques car il est trop restreint
en fonctionnalits. Son lecteur est lger do lintrt conserv pour sa portabilit.
ActionScript 2.0 offre une palette de comportements bien plus toffe et demeure
encore largement employ pour bon nombre des crations de sites dits vitrines, nexpri-
mant pas un grand besoin de ractivit ni de fonctionnalits. Son apprentissage est
encore relativement accessible et son lecteur est dj dploy sur de nombreux appareils
mobiles.
ActionScript 3.0, apparu depuis Flash CS3 (Flash 9), permet de raliser des applica-
tions complexes avec une grande ractivit. Concernant la partie graphique, elle
autorise principalement la 3D et la gestion de la vido en haute dfinition, ainsi que le
dveloppement dapplicatifs lourds comme le traitement des images, gourmands en
calculs. Si le langage semble plus complexe au premier abord, il nen est rien dans la prati-
que, car en ralit, la multiplication des lignes de code requise en AS3 vient de la nces-
sit de dtailler le contexte dutilisation de chaque action. Ceci afin de rserver lespace
mmoire uniquement requis pour les animations, et donc, den amliorer les performances
laffichage. Mais les actions elles-mmes restent souvent quivalentes celles dj
utilises en AS2. Dautres modifications dordre structurel ont, cela dit, t apportes en
AS3, quil est ncessaire dapprivoiser, surtout lorsque lon a acquis des habitudes de
dveloppement tranquilles, encore possibles en AS2.
Ce livre a pour objectif de vous permettre dacqurir facilement les notions dAction-
Script 3 ncessaires pour vous rendre indpendant dans le dveloppement dinterfaces
riches et graphiques, partir de symboles placs dans le scnario. Il vous permettra aussi de
contourner les problmes ventuellement rencontrs suite aux modifications structurelles
induites par ce nouveau langage, notamment si vous utilisiez dj AS2 et aviez pris
2 ACTIONSCRIPT 3 ET MOTION DESIGN
lhabitude de dialoguer facilement dun document SWF un autre. Ainsi, en plus des prin-
cipales fonctionnalits dj voques comme la 3D et la vido en haute dfinition, vous
apprendrez imbriquer des animations SWF entre elles, mais en sachant rellement les
faire interagir lune envers lautre. Vous apprendrez galement afficher et masquer des
informations, mais en connaissant comment dsactiver les contenus supprims alors quils
demeurent intrinsquement encore actifs. Vous verrez autant dautres principes inhrents
AS3 quun ouvrage plus scolaire ne vous aurait pas permis de contrler et quun livre trop
technique vous aurait dcourag de dcouvrir.
Cet ouvrage, o nous abordons les spcificits graphiques dAS3 et quelques principes dj
prsents avec AS2, peut tre apprhend ponctuellement, au cas par cas, pour rsoudre des
besoins cibls, ou bien dans son intgralit, pour mieux englober lensemble de la valeur
ajoute que constitue dsormais, pour tout concepteur graphique, ce nouveau langage. Avec
ce livre, vous serez en mesure, je le souhaite, de raliser vous-mme et facilement les
sites les plus aboutis graphiquement et aux fonctionnalits avances.
qui sadresse ce livre

Nous dtaillons dans cet ouvrage les techniques utilises en production par les webdesi-
gners. Ce livre est destin aux flasheurs dbutants qui souhaitent contrler les contenus
depuis le scnario, en codant le plus simplement possible de vraies fonctionnalits.
Tout graphiste flasheur dbutant, en poste, en freelance, ou en tude, peut trouver dans cet
ouvrage les rponses aux questions quil se pose afin de matriser ActionScript 3, directement
dans le scnario de Flash CS4.
Toute personne intresse par le dploiement de contenus enrichis avec Flash, matrisant
dj cette technique, mais inspire par des notions indites, comme le rfrencement,
laccessibilit, le relief, limportation dobjets 3D, entre autres, trouvera galement des
rponses sur ces sujets.
Pour aborder ce livre, vous devez seulement matriser quelques rudiments du langage
ActionScript 3 : le placement du code dans le scnario, la gestion des fonctions et des couteurs,
ainsi que la navigation dans le scnario.
Les nombreux exemples comments de ce livre en font un guide pratique incontournable pour
toute personne nophyte dans la programmation en ActionScript 3 et le motion design.
Les intentions de lauteur

Pour avoir t longtemps graphiste indpendant sur les nouvelles technologies, ds leur
apparition dans les annes 90, je comprends le besoin de mes amis designers et de mes
lves graphistes de mettre en forme les contenus efficacement et facilement.
Pour la communaut de concepteurs, de designers, de cratifs, laquelle jappartiens, la
problmatique est de ne pas consacrer son prcieux temps seulement coder. Lnergie
dploye en production doit privilgier avant tout la conception et la crativit.
Si Flash est dsormais un brillant outil pour lanimation et si ActionScript 3 est dsormais
un puissant langage pour linteractivit, quen est-il de la programmation au service de la
PRFACE 3
cration ? la question peut-on programmer de linteractivit avance sur des contenus
graphiques placs mme le scnario, ma rponse est oui ! Et comment !
Depuis que ce langage est arriv, aucun ouvrage na jusquici su apporter ce qui tait rellement
utile pour un designer. Aucun ouvrage na su prsenter de manire accessible et avance, les
techniques pour organiser dans le scnario tous les mdias et tous les types dinteractions
possibles entre ces diffrents mdias, et ceci avec des exemples concrets et efficacement. Une
ide pourtant simple, mais devant laquelle un dsert pdagogique ma laiss pantois.
Oui, le ciblage est autoris et possible entre SWF imbriqus. Oui, la 3D est facilement
contrlable depuis le scnario. Oui, une ligne de code suffit pour crer des animations
poustouflantes. Oui, la vido en F4V et les points de repre sont compatibles, y compris
avec danciens lecteurs Flash. Oui, nous pouvons mme, avec Flash, exprimenter des choses
incroyables comme le relief, le rfrencement et laccessibilit.
Face aux innombrables questions que mes lves se sont poses lors de leur dcouverte
dActionScript 3, celles auxquelles se sont heurts mes collgues en production, astreints
depuis quelques annes la cration dinterfaces Flash sans la moindre interactivit, ainsi
que mes amis designers ulcrs (oui, oui, ulcrs) par linvraisemblable mcanique de ce
langage, jai souhait apporter mes rponses.
Il existe deux approches, souvent mises en opposition, pour apprhender lActionScript 3.
La premire consiste tout coder de manire stricte dans des classes externes et ne rien
introduire dans linterface auteur ni sur le scnario. Cette mthode permet doptimiser la
vitesse dexcution dune animation de quelques micro-secondes. Mais lorsque nous consi-
drons que la valeur ajoute doit davantage tre focalise sur lorganisation du contenu et sa
forme, plutt que sur ce temps dexcution, nous ne pouvons accepter de devoir program-
mer des pages entires de code, et y consacrer bien trop de temps, au dtriment de la crati-
vit et de sa sant.
dfaut de pouvoir dlguer une partie de la programmation un tiers, lautre choix consiste
donc placer, directement dans le scnario, les seules instructions utiles, pour mettre en
forme les contenus, sans compromettre cette noble crativit et sans corrompre non plus les
avances du langage ni les performances de lapplication.
Devant cette ncessit de devoir livrer toutes mes astuces, jai donc choisi de proposer un
ouvrage qui rassemble de manire claire, accessible et vidente, ce que jaurais moi-mme
jubil de trouver si je dbutais : un livre synthtique sur ce que lon pourrait nommer
ActionScript 3 et le motion design.
Structure du livre
Cet ouvrage prsente les instructions ActionScript 3 ncessaires pour dvelopper des concepts
inhrents la cration interactive avec Flash CS4. Dans ce livre, nous dtaillons les points
suivants :
Lanimation ralise partir dinstructions simples en ActionScript : les acclrations et
les boucles.
La cration danimations partir de classes importes afin de permettre la cration

dinterfaces animes entirement dynamiques et modifiables selon le comportement de
lutilisateur.
Lanimation de filtres et deffets appliqus des contenus graphiques.
La gestion des squelettes avec ActionScript afin de permettre le contrle dynamique de
lanimation de personnages ou de structures mcaniques ainsi que le mouvement de for-
mes organiques composes partir de graphismes vectoriels.
La cration de galeries dimages simples et plus avances, avec et sans XML, ainsi que
linteraction avec des objets placs dynamiquement dans la scne.
La gestion de la vido au sein de Flash, partir du format FLV, et la gestion de vidos
composites avec la transparence pour limplmentation deffets spciaux.
La gestion de vidos en haute dfinition, avec le format F4V et le codec H-264, partir de
squences ralises par la socit gKaster, et compatibles avec danciens lecteurs Flash.
Linteractivit en vido avec les contrles de lecture, le chapitrage, les points de repre,
mais surtout toute la complexit lie une gestion fluide et optimale du signal vido,
avec lecture en arrire et arrt complet de la vido dans un document embarqu.
La 3D native disponible dans Flash, avec la cration dinterfaces graphiques (murs
dimages, galeries vido, navigations spatiales).
La modlisation et lanimation dobjets 3D rels, avec le logiciel gratuit Google Sketchup
et la classe libre PaperVision.
LAPI de traitement de limage avec la gestion dynamique de filtres colorimtriques afin de
permettre la retouche des images et le lissage des contenus dforms, pivots ou zooms.
Le relief avec la cration dun contenu en relief depuis Photoshop, et son intgration
dans Flash. Nous abordons aussi dans ce chapitre la ralisation indite dune interface
dynamique qui affiche, automatiquement en relief, tout contenu distribu sur un index Z
de profondeur 3D.
La cration de systmes de navigation avancs avec la rsolution de problmes et de
contraintes souvent observes en production, comme la cration de boutons tats visits
et les boutons interfaables imbriqus.
La communication entre un document HTML et un document Flash, afin damliorer la
relation entre les contenus dans une interface de site hybride.
La gestion de sites tout en Flash avec la rorganisation des contenus de manire crer
des interfaces lastiques, mais non dformantes, et disponibles pour un affichage en
plein cran.
Les connaissances requises pour la cration dun site en Flash, accessible pour les
moteurs de recherche, et laffichage de contenu alternatif pour les utilisateurs qui ne
disposent pas du lecteur Flash.
En annexe, vous trouverez les outils de dveloppement qui permettent de rendre un
document Flash accessible aux personnes mobilit rduite sur le Web, ainsi que des
rfrences et aides pour complter votre apprentissage. Enfin, un index classique ainsi
quun index des notes et remarques compltent cet ouvrage.
PRFACE 5
Les exemples
Chaque tape du livre est prsente avec une logique pdagogique progressive. Chacun des
chapitres aborde un thme spcifique et fait rfrence des exemples disponibles en Flash
au format natif (.fla). Vous pouvez utiliser ces fichiers et leur code, librement, lexception
des vidos et des images qui y sont places uniquement pour illustrer louvrage.
Lensemble des exemples du livre est disponible en tlchargement ladresse suivante :
http://www.pearson.fr/livre/?GCOI=27440100685160.
Pour suivre confortablement les exemples comments du livre, veuillez tlcharger distinc-
tement les diffrents dossiers compresss mis votre disposition, puis rassembler leurs
contenus respectifs dans le mme rpertoire que vous crerez et nommerez "Exemples".
Tout au long du livre, nous faisons rfrence aux fichiers placs dans ce dossier "Exemples".
Aussi, en organisant vos tlchargements de la sorte, vous en faciliterez la lecture.
Dans les exemples, de nombreux fichiers font galement rfrence des contenus placs
dans des rpertoires ou des classes ActionScript et JavaScript. Pour votre confort, il convient
donc de tlcharger lensemble des dossiers compresss et de tous les rassembler dans ce
nouveau dossier "Exemples" que vous aurez cr. Vous pourrez alors exploiter librement les
fichiers appels tout au long de la lecture de louvrage.
Conventions
Ce livre contient quelques morceaux de code, reprsents avec cette convention :
//------------------ actions
this.addEventListener(Event.ENTER_FRAME,defilementPanoramique);
Dans le corps du texte, les lments relatifs ActionScript sont nots avec cette typographie.
Ce pictogramme signale que vous pouvez tlcharger les fichiers dexemple sur le site de Pearson.
Nous disposons dautre part de deux types dencadrs :
Ces encadrs sont des remarques : il peut sagir dun point auquel
faire attention, dune rfrence externe, dune dfinition, dune
astuce, dun renvoi
Encadrs
Conventions
Ces encadrs sont des encadrs de rfrence. Ils maillent le texte et prcisent certains points de
manire formelle. Ils sont recenss dans la Table des encadrs en fin douvrage.
Remerciements
Naturellement, je tiens remercier mon diteur pour mavoir accompagn avec un rel
dvouement et un grand enthousiasme dans ce projet (Dominique Buraud principalement et
Patricia Moncorg). Je remercie bien sr Bruno Sbarte pour son implication, ses comp-
tences techniques et ses recommandations toujours constructives. Prends bien soin !
Je remercie galement toute lquipe des Gobelins et Pyramyd pour leur accompagnement
et leur soutien sans cesse renouvel depuis mes dbuts (Marie-France, Didier, Sylvie,
Sandrine, Anne Tord, Jean-Marie) ; Olivier Coach pour ses conseils aviss sur le relief ; la
socit GKaster pour leur gnreuse mise disposition de ressources vido graphiques ;
Thibaut Imbert, Anne Tasso et David Tardiveau pour leurs attentions respectives ; mes
lves et ma clientle pour lexprience que nous avons tisse ensemble ; et lensemble des
graphistes flasheurs dveloppeurs pour qui jai conu ce livre et pour qui la cration impli-
que ncessairement un dpassement de soi, dpassement que jespre enfin possible mon
humble niveau grce ce manuel. Je remercie enfin mes proches pour leur patience car
llaboration dun tel ouvrage prend du temps et de lnergie.
Prsentation de lauteur
Arzhur CAOUISSIN est auteur et ralisateur multimdia indpendant, affili AGESSA.
Dj auteur de trois livres et de nombreux supports pdagogiques au format numrique, il
est aussi formateur depuis plus de dix ans en rgion parisienne, lcole des Gobelins et
chez Pyramyd. Il a galement t formateur occasionnel pour lINA, le GRETA Rseau gra-
phique de lcole Estienne, luniversit de Marne La Valle, la CNAM, lILOI et lcole
suprieure de design Olivier de Serres.
Spcialis dans la technologie Flash, il est aussi consult pour sa vision transversale et artis-
tique sur les diffrents mdias, dans la mode, les cosmtiques, la finance, mais aussi par des
agences, pour son expertise en cration de contenus web enrichis. Proche du milieu de lani-
mation, il est intervenu enfin en tant quassistant la mise en scne et lcriture, pour des
projets filmiques courts, impliquant, entre autres, des captations en studio sur fond vert et le
traitement vido y compris de scne animes, avant leur intgration dans des univers multi-
mdia.
Les animations en ActionScript

1
Introduction
Les animations ralises en ActionScript, quelles constituent des dfilements panoramiques
ou des lments de dcor simplement mobiles, permettent de mettre en scne des contenus
sans recourir lutilisation du scnario. Lavantage de ce procd, par rapport au scnario,
est que lon peut facilement modifier des valeurs (positions, chelles, angles de rotation) en
fonction dune variable sans avoir recrer toute lanimation. Ce procd ntant pas exclu-
sif, vous pouvez parfaitement cumuler lavantage dune animation labore, ralise dans le
scnario, la souplesse dune animation code en ActionScript.
Dans les exemples qui suivent, vous allez apprendre animer des mises en forme avec
ActionScript, redfinir les proprits des objets de la scne avec un amortissement, et
grer des dfilements en boucle dans un environnement en perptuel mouvement. lissue
de ce chapitre, vous serez en mesure de vous abstraire du scnario pour raliser une partie de
vos animations en code, et vous permettre, en plus de la souplesse obtenue dans la conception
des animations, dallger dj la structure du document.
Animer les proprits : position, dimension, rotation,

opacit et chelle
Lexemple que nous proposons ici est un dcor multi-plans compos de clips distincts. Chaque
clip est dplac en incrmentant ses proprits dans un gestionnaire de type ENTER_FRAME.
Ce dcor, une fois anim, reprsente une animation de type panoramique qui disparat progres-
sivement pour laisser place larrire-plan du document principal (voir Figure 1.1).
Figure 1.1
Aperu de
lexercice.
m
Exemples > ch1_animationEnActionScript_1.fla
Le document que nous utilisons prsente la structure suivante : dans le scnario de la scne
principale, au-dessus du calque fond_mc, clairement rpartis vers des calques distincts et
masqus, nous pouvons accder diffrents symboles de type MovieClip ayant tous un cen-
tre plac en haut et gauche. Chacun de ces symboles dispose, en outre, dun nom doccur-
rence qui le distingue bien des autres et lui permet dtre contrl par ActionScript. Pour
faciliter lidentification de lobjet depuis la fentre Actions, le nom doccurrence a t
rpt sur le calque qui contient chaque occurrence de symbole (voir Figure 1.2).
Figure 1.2
Structure du
document.
Nommer les calques automatiquement. Pour renommer automatiquement chacun des calques
qui contient une occurrence de symbole, plutt que de nommer chaque calque manuellement, pensez
rpartir la ou les occurrences de symboles vers les calques par un clic droit ou Ctrl+clic > Rpartir vers les
calques, directement sur la ou les occurrences de symboles disponibles sur la scne. Attention toutefois,
si une occurrence de symbole ne possde pas didentifiant, cest le nom du symbole, disponible dans
la bibliothque, qui sera utilis par Flash pour nommer chacun des nouveaux calques crs.
En haut du scnario, un calque nomm actions contient le code suivant :

//------------------ initialisation
var vitesseDefilement:Number=5;
//------------------ actions
function defilementPanoramique (evt:Event) {

////////////// x
ciel_mc.x-=vitesseDefilement;
dune_mc.x-=vitesseDefilement*0.2;
arbre1_mc.x-=vitesseDefilement*0.3;
arbre2_mc.x+=vitesseDefilement*0.5;
////////////// y
ciel_mc.y-=1;
////////////// width et height

ciel_mc.width+=10;
ciel_mc.height+=10;
LES ANIMATIONS EN ACTIONSCRIPT 9

////////////// rotation
ciel_mc.rotation-=0.1;
////////////// alpha
ciel_mc.alpha-=0.01;
dune_mc.alpha-=0.01;
arbre1_mc.alpha-=0.025;
////////////// scaleX et scaleY

dune_mc.scaleX+=0.001;
dune_mc.scaleY+=0.001;
// trace
trace(ciel_mc.x);
if (ciel_mc.x<-600) {
this.removeEventListener(Event.ENTER_FRAME,defilementPanoramique);
}
}
Ce code est structur en deux parties. Une partie numre les valeurs configurer avant de
lancer les actions. Lautre partie affiche les programmes excuter partir de ces valeurs
pralablement initialises. Le programme utilis pour le dfilement du panoramique utilise la
variable vitesseDefilement pour dterminer le positionnement de chaque objet. Mais, cest
selon la position de lobjet ciel_mc que nous interrompons ou non lexcution de lanimation.
Le positionnement des objets est donc indirectement arbitr selon la position de ciel_mc.
Philosophie dAS3
Le langage
Nous entrons ici dans le cur de la philosophie dActionScript 3 o tout doit tre clairement dfini et
identifi par le lecteur Flash avant de pouvoir excuter les programmes dvelopps. Lobjectif de la
dclaration pralable des lments utiliss est que, ce faisant, nous prvenons le lecteur Flash de
lespace mmoire quil doit rserver pour chaque objet dclar avant de les utiliser.
Ainsi, lorsquils sont manipuls au moment des actions du programme, lexcution des scripts est acc-
lre car seul lespace requis par ces objets est dploy par le lecteur. Cest la raison pour laquelle les
lignes de commande en AS3 sont plus nombreuses quen AS2, mais concourent un meilleur rsultat
lors de lexcution du document par le lecteur Flash car lanimation est alors optimise.
Tout dabord, nous dclarons les valeurs utiliser :

Dans la partie initialisation, une valeur de type nombre, vitesseDefilement, repr-

sente le coefficient dacclration du dfilement panoramique. Plus cette valeur est leve,
plus le dfilement sera acclr.
Puis, nous dveloppons le programme :
//------------------ actions
Tout dabord, nous attachons un couteur sur limage courante avec un gestionnaire de type
Event.ENTER_FRAME qui permet dexcuter une fonction au rythme exact de la cadence de
la scne. raison dune cadence de 25 ips, la fonction sera excute 25 fois chaque seconde.
Cette frquence est suffisante pour simuler une progression continue et homogne de
valeurs, telle que la modification de la position dlments dans notre dcor, par exemple.
La fonction appele en deuxime paramtre est identifie par le terme defilementPano-
ramique et dveloppe plus loin dans le code.
Nommer une fonction

Le langage
Le nom attribu une fonction est libre, mais ne doit pas comporter despace, ni de caractres
accentus ou spciaux. Pour faciliter lidentification de ce que contient la fonction, il est souhaitable
de la nommer de manire intelligible. Par exemple, pour une fonction destine restaurer la posi-
tion dun menu droulant, nous pouvons la nommer restaurationMenuDeroulant. La syntaxe ici
employe pour nommer la fonction est la syntaxe dite chameau (Camel, en anglais).
Syntaxe chameau et sparateurs

La syntaxe chameau (ou Camel) consiste nommer un objet, une variable ou une fonction, en collant
les mots que vous avez choisis arbitrairement et qui composent son nom, en les sparant laide dune
majuscule. Par exemple, la dsignation lancerLeMenuDeroulant qui peut identifier une fonction
destine dployer un menu droulant, utilise la syntaxe chameau. Cette syntaxe permet dviter duti-
liser le sparateur tiret (-) considr en ActionScript comme un oprateur de soustraction. Lexpression
lancer-le-menu-deroulant aurait en effet indiqu au lecteur Flash de soustraire la valeur droulant la
valeur menu, elle-mme soustraite la valeur le, elle-mme soustraite la valeur lancer.
Nommer les occurrences

La syntaxe chameau est galement utilise pour nommer les occurrences de symbole. On y ajoute,
en revanche, pour faciliter lidentification du type de lobjet lors de son apparition dans le code, une
pseudo extension. Une pseudo extension permet de signaler la nature de lobjet (MovieClip, bouton,
etc.) lorsque celui-ci est mentionn dans le code ActionScript sans avoir revenir sur lobjet qui figure
dans la bibliothque ou dans la scne. Pour crer une pseudo extension, qui ne soit pas perue
comme un oprateur par le lecteur Flash, nous utilisons le caractre underscore (_) suivi de caract-
res qui dfinissent lobjet cr. Par exemple : menu_mc, lien_btn, legende_txt et ecran_video
utilisent les extensions les plus couramment employes et dsignent respectivement un MovieClip,
un bouton, un champ de texte dynamique et un composant vido. Vous pouvez crer vos propres
extensions, mais celles qui sont prsentes ici sont reconnues pour tre utilises par un grand nom-
bre de flasheurs et elles vous aideront dans le cadre de dveloppements collaboratifs. Une occur-
rence de symbole ne peut en outre pas tre compose de sparateur tiret (-) toujours considr
comme un oprateur de soustraction, ni commencer par un chiffre.
Plus loin, dans notre programme, nous crons la fonction defilementPanoramique appele
par le gestionnaire dvnements. Cette fonction reprend le nom de la classe Event, en para-
mtre, utilise dans le gestionnaire et ne peut ainsi tre excute que par ce type de gestionnaire.
La syntaxe du terme evt qui prcde le rappel de la classe employe reste votre appr-
ciation. Vous pourriez aussi bien le nommer titi ou Balthazar, cela naffecte en rien le code.

Il sagit simplement dutiliser un nom qui permette de faire rfrence, plus tard dans la
fonction, la classe utilise, comme le ferait une variable dans un autre contexte :
}
Usuellement, nous rencontrons aussi les termes e, event, evenement ou EventObject,

pour dsigner la classe vhicule dans la fonction. Une fonction doit toujours vhiculer la
classe invoque par le gestionnaire dvnements qui sy rfre (par exemple : MouseEvent),
car un gestionnaire dvnements nest autre quune mthode qui renvoie, la fonction appe-
le, le paramtre vnement auquel justement il se rattache. La fonction appele par le gestion-
naire doit donc tre type pour recevoir ce paramtre et pouvoir tre excute normalement.
Cest la raison pour laquelle vous ne pouvez pas utiliser de fonction autonome (cest--dire,
sans typage dvnement), si celle-ci est appele directement par un gestionnaire dvne-
ments. Nous verrons, plus loin dans cet ouvrage, quil est en revanche possible dappeler
une fonction autonome partir dune fonction, qui, elle, sera belle et bien type.
Les classes
Le langage
Chaque objet que vous manipulez dans le scnario ou par le code est rgit par une classe. Une
classe regroupe un ensemble de lignes de code, dinstructions, de fonctions, qui permettent de dfi-
nir le comportement dun objet lorsquil est dploy. Ces classes sont, soit intgres dans le moteur
de lapplication Flash, soit inexistantes et cest vous de les ajouter. Certaines classes, intgres
lapplication Flash, sont transparentes et compiles par Flash la publication sans mme que lon
sen aperoive. Cest le cas des symboles de type bouton, MovieClip, des symboles graphiques, des
champs de texte ou des composants vido. Dautres classes doivent tre importes manuellement
pour tre utilises, en les mentionnant en amorce du code par une commande du type : import
flash.events.Event;. Normalement, toutes les classes utilises doivent tre importes ainsi avant de
sy rfrer travers, par exemple, un gestionnaire dvnements tel que celui-ci : this.addEvent-
Listener(Event.ENTER_FRAME,defilementPanoramique);. Mais, pour faciliter le codage, si
nous dveloppons directement dans linterface auteur de Flash, la plupart des classes ne sont pas
requises car elles sont automatiquement intgres par lAPI du logiciel. Ainsi, Il nest pas ncessaire
de mentionner limportation de la classe Event pour lutiliser dans notre gestionnaire dvnements.
Les sept lignes de code suivantes, places lintrieur du bloc dinstruction de la fonction,
font rfrence aux objets placs sur la scne principale.
////////////// x
ciel_mc.x-=vitesseDefilement;
dune_mc.x-=vitesseDefilement*0.2;
arbre1_mc.x-=vitesseDefilement*0.3;
Dans le contexte dune fonction excute perptuellement, ces actions redfinissent la posi-
tion en x de chacun des objets, un un et en continu, de sorte que leur position sincrmente
automatiquement dune certaine valeur. Cette valeur est dfinie en fonction de la variable
LivreActionScript.book Page 12 Mardi, 19. janvier 2010 12:52 12
dacclration vitesseDefilement initialise plus haut. Certains objets observent une

incrmentation positive (+=) et dautres, une incrmentation ngative (-=). Cette diffren-
ciation permet dinverser le sens de dfilement et daccentuer leffet de panoramique sur des
objets distribus au premier plan, au regard de ceux placs larrire-plan.
Nous dterminons ainsi, de faon arbitraire, le point de vue dorigine du spectateur. Selon
la position de lobjet dans la scne et selon son loignement par rapport larrire-plan,
nous indiquons galement un coefficient (*0.2 par exemple) qui permet de rduire
son acclration de sorte que chaque objet se dplace une vitesse diffrente. Cet effet
de rduction du pas dacclration permet daccentuer plus encore leffet de volume dans
le dcor, un peu la manire dune animation japonaise de type Manga o les plans
qui se superposent sont souvent marqus. Pour renforcer encore leffet volumtrique, un
filtre flou est appliqu sur chaque objet, directement dans le scnario, avec des valeurs
distinctes.
Les proprits en ActionScript 3

Le langage
x. nomDuClip_mc.x dsigne labscisse x, soit la position horizontale, dune occurrence de sym-

bole clip ou MovieClip nomme nomDuClip_mc.
y. nomDuClip_mc.y dsigne lordonne y, soit la position verticale, dune occurrence de sym-
bole clip nomme nomDuClip_mc.
width et height. nomDuClip_mc.width et nomDuClip_mc.height dsignent respectivement
la largeur et la hauteur du mme MovieClip.
rotation. nomDuClip_mc.rotation dsigne le degr de rotation de lobjet, dfini sur une
valeur comprise entre 0 et 360.
alpha. nomDuClip_mc.alpha dsigne lopacit de lobjet. Cette valeur est comprise entre 0
et 1. 0 quivaut 0 % dopacit, donc, de la transparence. 1 quivaut 100 % dopacit. Les
valeurs intermdiaires sont exprimes en dcimales. Ainsi, nomDuClip_mc.alpha=0.4 dsigne
une valeur dopacit de 40 %.
visible. nomDuClip.visible permet de modifier la visibilit dun objet dans la scne. Cette
proprit se dfinie avec une valeur boolenne de type true ou false. Il nexiste pas de valeur
intermdiaire. Cette proprit est moins gourmande en ressources graphiques que la proprit
alpha et est recommande pour masquer intgralement un objet, y compris la zone ractive
quil possde ventuellement. La proprit alpha, effectivement, rend un objet invisible, mais
conserve linteractivit qui y est ventuellement attache avec ActionScript. Par exemple, nomDu-
Clip.visible=false rend lobjet nomDuClip invisible et non cliquable.
scaleX et scaleY. nomDuClip_mc.scaleX et nomDuClip_mc.scaleY dsignent respectivement
lchelle horizontale et verticale du mme MovieClip. Cette valeur sexprime galement de 0 1,
mais peut dpasser 1 si lchelle doit tre suprieure 100 %. La valeur peut galement tre inf-
rieure 0 si lon souhaite obtenir un effet miroir ou une symtrie sur un axe vertical (scaleX) ou
horizontal (scaleY).
Ensuite, nous intervenons sur une autre proprit, la proprit y. Elle est utilise ici pour
redfinir la position verticale du ciel pendant la progression du panoramique. En incrmentant

la valeur dun entier positif, le ciel monte au dbut du panoramique et redescend ds que
celui-ci atteint la limite du document :
////////////// y
ciel_mc.y-=1;
De la mme manire, la largeur et la hauteur du ciel sont modifies avec les proprits
width et height afin que celui-ci donne lillusion de se mouvoir. Les largeur et hauteur
dun symbole tant dfinies en pixels, la valeur est ici multiplie par 10 afin de la rendre
perceptible, car un pas dincrmentation de 1 pixel ne serait pas suffisamment visible :
ciel_mc.width+=10;
ciel_mc.height+=10;
Comme pour les autres proprits, rotation permet de faire pivoter lobjet avec un pas
dincrmentation dfini en degrs. Pour attnuer leffet et viter que le ciel tourne compl-
tement sur lui-mme, la valeur est divise par 10 :
////////////// rotation
ciel_mc.rotation-=0.1;
Lanimation dune transparence se fait avec la proprit alpha dfinie sur une chelle de 0
1. Pour amortir leffet, nous utilisons une valeur dcimale faible. Cela quivaut aussi
diviser la valeur par un chiffre lev :
////////////// alpha
ciel_mc.alpha-=0.01;
dune_mc.alpha-=0.01;
Enfin, la dformation en x et en y se dfinit avec les proprits scaleX et scaleY. Comme

pour lalpha, nous utilisons des valeurs comprises entre 0 et 1 pour dterminer une chelle
de 0 % 100 % par rapport la taille originale du symbole. Pour viter une dformation
trop importante de la dune, nous divisons la valeur par 1 000 :
dune_mc.scaleX+=0.001;
dune_mc.scaleY+=0.001;
Dans notre script, une action trace ponctue la fonction. Elle permet simplement de vrifier
la position x du ciel que nous modifions et sert de rfrence pour lensemble de lanimation
qui sinterrompt prcisment par rapport la position de cet objet :
// trace
trace(ciel_mc.x);
Enfin, la fonction sachve avec une structure conditionnelle qui indique de stopper lexcution
de lanimation ds que la position x du ciel atteint une certaine valeur :
if (ciel_mc.x<-600) {
this.removeEventListener(Event.ENTER_FRAME,defilementPanoramique);
}
Pour arrter un gestionnaire dvnements, nous reprenons simplement le gestionnaire pra-

lablement activ pour lequel nous substituons lexpression addEventListener remove-
EventListener qui dsigne clairement dinterrompre le gestionnaire. Sans cette action, en
effet, lanimation continuerait, mme si nous ne la percevons plus, jusqu des valeurs infi-
nies, et risquerait dalourdir considrablement lexcution du programme. En interrompant
les couteurs lorsquils ne sont plus ncessaires, vous optimisez vos animations.
retenir
Pour crer une animation perptuelle, rythme sur la cadence de la scne, nous utilisons un ges-
tionnaire de type Event.ENTER_FRAME.
Pour incrmenter ou diminuer une valeur, nous prcdons le signe gal du signe plus (+) ou moins
(-), selon que lon souhaite augmenter la valeur ou la diminuer.
Pour optimiser lespace mmoire, en programmation, nous typons les valeurs et les objets avant de
les utiliser dans les actions.
La syntaxe chameau (en anglais : Camel) permet didentifier rapidement le nom des fonctions et des
occurrences dobjets crs, sur la scne ou dynamiquement.
Les extensions _mc, _btn, _txt et _video permettent de vhiculer, dans le nom doccurrence des
objets, leur type et ainsi facilite leur identification dans le code.
Les proprits les plus couramment utilises sont x, y, width, height, rotation, alpha, visible
et scaleX, scaleY.
Pour optimiser une animation, nous interrompons les couteurs lorsquils ne sont plus ncessaires,
avec removeEventListener.
Grer les proprits avec des conditions

Lexemple utilis dans cette section tend celui dvelopp dans la section prcdente. Il uti-
lise en plus une structure conditionnelle et des variables dajustement qui permettent de
dterminer automatiquement le sens de dfilement dun panoramique et sa vitesse, selon les
valeurs attribues quelques variables. Dans cette section, nous allons voir comment cen-
traliser le calcul de lanimation de lensemble des proprits sur ces variables, dfinies en
amont du programme.
Le document que nous utilisons prsente la structure suivante : dans le scnario de la scne
principale, au-dessus du calque fond_mc, clairement rpartis vers des calques distincts et
masqus, nous pouvons accder, de mme, diffrents symboles de type MovieClip ayant
tous un centre plac en haut et gauche. Chacun de ces symboles dispose dun nom
doccurrence qui le distingue des autres et lui permet dtre contrl par ActionScript. Pour
faciliter lidentification de lobjet depuis la fentre Actions, le nom doccurrence a t
rpt sur le calque qui contient chaque occurrence de symbole (voir Figure 1.3).

Figure 1.3
Structure du
document.
En haut du scnario, un calque nomm actions contient le code suivant :

var sens:Number=1;
var limiteGauche:Number=(stage.stageWidth-vitesseDefilement)*-sens;
var limiteDroite:Number=vitesseDefilement*-sens;
//------------------ actions

////////////// x
ciel_mc.x-=(vitesseDefilement*1)*sens;
dune_mc.x-=(vitesseDefilement*0.2)*sens;
arbre1_mc.x-=(vitesseDefilement*0.3)*sens;
arbre2_mc.x+=(vitesseDefilement*0.5)*sens;
if (ciel_mc.x>limiteDroite) {
sens=1;
}
if (ciel_mc.x<limiteGauche) {
sens=-1;
}
////////////// y
ciel_mc.y-=sens;

ciel_mc.width+=sens*10;
ciel_mc.height+=sens*10;
////////////// rotation
ciel_mc.rotation-=sens/10;
////////////// alpha
arbre1_mc.alpha-=sens*0.025;

dune_mc.scaleX+=sens/1000;
dune_mc.scaleY+=sens/1000;
// trace
trace(ciel_mc.x);
}
Ce code est structur en deux parties. Une partie numre les valeurs configurer avant de
lancer les actions. Lautre partie affiche les programmes excuter partir de ces valeurs
pralablement initialises. Comme dans la section prcdente, le programme cr pour le
dfilement du panoramique utilise dabord la variable vitesseDefilement pour dtermi-
ner la position des objets de la scne, puis modifie leur direction selon la position courante
de lobjet ciel_mc.
Tout dabord, nous dclarons les valeurs utiliser :
var sens:Number=1;
var limiteGauche:Number=(stage.stageWidth-vitesseDefilement)*-sens;
var limiteDroite:Number=(vitesseDefilement*-sens;
Avant de dtailler le mode de calcul qui dtermine ces valeurs, nous devons comprendre ce
qui succde la dfinition de ces variables. Dans la partie actions, situe plus loin, vous
relevez que les proprits des objets du dcor sont modifies partir des valeurs que nous
dfinissons ici.
Revenons dans la partie initialisation. La variable sens (var sens:Number=1) dclare
un nombre qui donne le sens de dfilement du panoramique. Une valeur positive fait dfiler
le contenu de la scne dabord vers la gauche, puis vers la droite et reprend ce mouvement
perptuellement. linverse, une valeur ngative le fait dfiler dabord vers la droite, puis
vers la gauche, et ritre le mouvement perptuellement.
Dans la ligne suivante, vitesseDefilement reprsente le coefficient dacclration du
dfilement panoramique. Plus cette valeur est leve, plus le dfilement sera acclr.
La variable limiteGauche dclare, elle, une autre valeur de type nombre. Cette variable
dfinit la limite de dfilement du dcor atteindre avant que la condition ninverse le sens
du dfilement. Cette valeur rsulte du calcul suivant : largeur de la scne (stage.stage-
Width) moins le pas dacclration (vitesseDefilement). Cette combinaison permet en
ralit dviter de percevoir une rupture dans le dcor lorsque celui-ci apparat intgrale-
ment hors champ. En effet, considrons par exemple que le script excute le dfilement
jusqu 800. Nous devrons alors crire ceci :
var limiteGauche:Number=stage.stageWidth*-sens
Comme ce script est excut aprs la vrification indique dans la structure conditionnelle,
il aurait alors le temps de sexcuter encore une dernire fois avant dtre rinitialis seule-
ment la lecture suivante du script. Cela porterait le ciel une position x de 805 et laisserait
apparatre un blanc de 5 pixels de large, au-del des dimensions limites du visuel. La
valeur 5 correspondant la valeur du pas dincrmentation, nous la retranchons donc la
largeur limite du dfilement pour prvenir du dcalage induit par le fait que le calcul du
repositionnement seffectue seulement aprs la vrification de la condition. La scne qui
mesure 800 pixels dans notre document, rapporte donc une largeur limite de 795 pixels.
cela, la limite gauche du dfilement panoramique, calcule partir du positionnement du
ciel, correspond en ralit au positionnement du ciel lorsquil atteint une valeur ngative de
800. Il reste donc inverser la valeur 795 obtenue par lquation stage.stageWidth-
vitesse-Defilement, en la multipliant par le sens du dfilement afin dobtenir une valeur
ngative, ou qui sinon corresponde la valeur impose par le sens voulu pour le dfilement

de notre animation. Nous utilisons ainsi la valeur 1 pour un dfilement vers la droite, ou 1
pour un dfilement vers la gauche.
La variable limiteDroite dclare, elle, une valeur de type nombre galement, mais qui
dtermine la limite du dfilement droite. Cette valeur est calcule sur le mme principe
que pour la limite gauche, except que nous nous basions sur le point dorigine de la scne
qui vaut zro, et non plus sur sa largeur. Le rsultat obtenu est 5 ici, contre 795 pour la
limite gauche. Le dfilement oscille donc entre ces deux valeurs limites.
Puis, nous dveloppons le programme :
//------------------ actions
}
Les 7 lignes de code suivantes, places lintrieur du bloc dinstruction de la fonction,

font de nouveau rfrence aux objets placs sur la scne principale.
////////////// x
ciel_mc.x-=(vitesseDefilement*1)*sens;
dune_mc.x-=(vitesseDefilement*0.2)*sens;
arbre1_mc.x-=(vitesseDefilement*0.3)*sens;
Les actions, ici, redfinissent la position en x de chacun des objets, de sorte que leur posi-
tion sincrmente automatiquement dune certaine valeur. Mais, cette valeur est dsormais
dfinie en fonction de deux coefficients : la variable dacclration vitesseDefilement et
la variable sens, initialises plus haut.
Deux conditions dterminent ensuite quel moment le lecteur Flash doit inverser la polarit
du sens de dfilement. La premire condition indique de linverser lorsque le ciel atteint la
limite droite du document, dfinie par la valeur limiteDroite. La seconde indique dinver-
ser galement la valeur lorsque le ciel atteint la limite gauche avec la valeur limiteGauche.
Ainsi, pour la premire condition, nous pouvons : si la position x du ciel est suprieure la
valeur limite de droite qui vaut 5, alors, nous inversons le sens du pas dincrmentation 1
en 1. Cette valeur affecte le calcul du positionnement des objets, en amont dans le code, de
sorte que le dfilement est galement invers, et inversement pour le dfilement gauche :
if (ciel_mc.x>limiteDroite) {
sens=1;
}
if (ciel_mc.x<limiteGauche) {
sens=-1;
}
Ensuite, nous intervenons sur les autres proprits, en y associant les variables dajus-
tement :
////////////// y
ciel_mc.y-=sens;
ciel_mc.width+=sens*10;
ciel_mc.height+=sens*10;
////////////// rotation
ciel_mc.rotation-=sens/10;
////////////// alpha
dune_mc.scaleX+=sens/1000;
dune_mc.scaleY+=sens/1000;
// trace
trace(ciel_mc.x);
retenir
Pour simplifier un programme, il est souhaitable de centraliser, sous la forme dun dnominateur
commun, ce qui est susceptible dallger le code, travers une ou plusieurs variables par exemple.
Les conditions permettent de modifier lorientation dune animation ds quelle atteint une certaine
limite.
Grer les acclrations

Dans cette section, des symboles sont disposs arbitrairement dans la scne. Lorsque le
pointeur de la souris bouge, les symboles bougent aussi, mais avec une inertie (voir
Figure 1.4). Nous allons apprendre ici dfinir le mouvement dun symbole en fonction de
la position du pointeur, en lui affectant un effet de retard qui donne une illusion damortis-
sement.
Figure 1.4
Aperu
de lexercice.
Exemples > chap1_animationEnActionScript_3.fla
Le document que nous utilisons prsente la structure suivante : le dcor masqu et situ au-
dessus du calque fond_mc, est compos dun dgrad et de trois symboles de type Movie-
Clip, repartis chacun vers les calques de la scne principale. Chaque symbole est, en outre,
plac par rapport son centre, au milieu de la scne. Mais, lintrieur de chacun des sym-
boles, les lments sont repositionns de sorte quils ne se superposent pas compltement
afin de permettre lutilisateur dinteragir avec ces objets, malgr leur position commune
(voir Figure 1.5).
Figure 1.5
Structure du
document.
Dans la partie suprieure, un calque actions prsente le code utilis pour lanimation.
Lastuce, ici, pour crer un effet de flottement des symboles sans toutefois redfinir leur
position relative les uns par rapport aux autres, est que nous utilisons un positionnement
identique de tous les symboles. Mais chaque objet, dont le code contrle le positionnement,
se dplace avec un retardement. Si bien que nous avons lillusion que les objets oscillent de
part et dautre en fonction de la position du pointeur, et reviennent toujours leur position
relative, prdfinie dans la composition. Cette organisation structurelle permet de simplifier
la gestion du dplacement du groupe que constitue lensemble des symboles sans avoir
multiplier inutilement les conteneurs et les lignes de code.
Du ct du code, toujours dans notre document, chaque clip est par ailleurs dplac en
incrmentant ses proprits travers un gestionnaire de type ENTER_FRAME, comme dans
lexemple prcdent, mais des variables nous permettent de dfinir, en plus, des coefficients
dacclration pour gnrer leffet de retardement.
En haut du scnario, le calque actions affiche le code suivant.
var retard:Number=20;
//------------------ actions
this.addEventListener(Event.ENTER_FRAME,navigation);
function navigation(evt:Event) {
// x
photo1_mc.x+=(mouseX-photo1_mc.x)/retard;
photo2_mc.x+=(mouseX-photo2_mc.x)/(retard*2);
// y
photo1_mc.y+=(mouseY-photo1_mc.y)/retard;
photo2_mc.y+=(mouseY-photo2_mc.y)/(retard*2);
}
Dans un premier temps, nous dclarons les variables utiliser :

La variable retard que nous crons permet de dfinir lintensit de lamortissement pour tous
les symboles. Une valeur gale 1 synchronise le mouvement de tous les symboles sur le poin-
teur. Une valeur leve augmente le temps ncessaire chaque symbole pour atteindre la posi-
tion du pointeur et accentue, de ce fait, leffet damortissement. La valeur 0 ne peut tre
applique car nous utilisons plus loin des divisions et lon ne peut pas diviser par zro.
Puis, nous dveloppons le programme.
Dans la partie actions du codage, nous crons le gestionnaire qui appelle la fonction ex-
cuter. Le gestionnaire utilise la classe Event et lvnement ENTER_FRAME afin de permettre
que le calcul du positionnement des symboles se fasse au rythme de la cadence de la scne.
Pour une animation plus fluide, il suffit, par consquent, daugmenter la cadence de la scne qui
est dfinie ici 25 ips :
//------------------ actions
Plus loin, nous inscrivons la fonction qui rassemble les actions excuter :
}
Typage des nombres

Le langage
Il est possible doptimiser lanimation Flash de quelques fragments de millimes de secondes en privi-
lgiant un typage plus restrictif un typage large. Par exemple, le typage Number, large, rserve
lespace mmoire requis pour stocker un chiffre entier ou dcimal, positif ou ngatif, cod
sur 64 bits. Le typage int, lui, le restreint aux nombres entiers positifs et ngatifs, 32 bits. Le
typage int est donc plus optimis que le typage Number et est recommand, dans la mesure o
notre variable ne requiert pas une valeur dcimale ou ngative. Plus optimis encore, le typage uint
mentionne les nombres entiers et strictement positifs. Ainsi, nous pourrions tout aussi bien crire :
var retard:int=20; ou var retard:uint=20;. Cette recommandation est naturellement plus
probante dans le cadre danimations complexes et lourdes et se justifie un peu moins dans le cadre
de cet exemple.
lintrieur du bloc dinstruction de la fonction, entre les deux accolades, nous plaons les
actions.
Le calcul que nous voulons effectuer repose sur un principe simple : il indique, pour chaque
symbole, de le positionner en x et en y, une valeur proportionnelle la position du pointeur.
Pour bien comprendre le procd, imaginons que lon souhaite que chaque symbole soit
positionn en suivant le pointeur en x et en y. Ce faisant, le groupe de symboles suivrait

strictement la position du pointeur si bien quil ne serait pas possible dinteragir avec les
objets. Pour cela, nous indiquerions, pour chaque occurrence de symbole, ceci :
photo1_mc.x=mouseX;
photo1_mc.y=mouseY;
Afin que le dplacement dispose dun retardement, la position de loccurrence doit tendre pro-
gressivement vers la position du pointeur et non pas le suivre instantanment. Pour ce faire,
nous incrmentons donc la position de loccurrence dune valeur qui diminue avec le temps.
Pour obtenir une valeur qui diminue avec le temps, nous faisons en sorte que loccurrence
conserve dabord sa position initiale. Nous utilisons donc, dans notre calcul, photo1_mc.x qui
dtermine la position courante, en x, de lobjet que nous voulons rendre mobile : photo1_mc.
Nous veillons ensuite ce que loccurrence finisse par atteindre la position du pointeur.
Nous utilisons aussi pour cela mouseX. Comme le calcul est rpt indfiniment, grce
lvnement ENTER_FRAME, il est possible sans trop de complication de dfinir une valeur
qui diminue progressivement avec le temps, comme suit.
Pour que la valeur diminue, nous incrmentons ici la position de loccurrence, dabord en x,
de la diffrence comprise entre sa position dorigine et celle du pointeur. Puis, cette valeur
est divise par le coefficient de retardement pour obtenir une valeur de plus en plus faible.
Comme laction est rexcute perptuellement, chaque rduction de la distance entre le
point dorigine et la position du pointeur, il reste une distance de plus en plus faible par-
courir dans un mme laps de temps. On obtient donc un effet de ralenti. Dclin en x et en
y, pour les trois symboles prsents sur la scne, nous obtenons :
Dans ce contexte, les occurrences se dplacent bien avec un amortissement par rapport la
position du pointeur, mais elles voluent tous la mme vitesse, ce qui donne une impres-
sion dimmobilisme relatif. Pour que chaque occurrence avance dsormais un rythme dif-
frenci, il suffit de modifier limpact du coefficient de retard en le divisant ou en le
multipliant par un nombre indtermin, ou en le substituant compltement une valeur
arbitraire tout simplement. Ce qui donne prsent :
//------------------ actions
// x
// y
}
Calculer avec la classe Math

Le langage
Vous pouvez aussi dterminer des valeurs progressives en utilisant la classe Math, notamment pour
obtenir une progression sinusodale. La classe Math offre diffrentes quations. Pour dterminer, par
exemple, la valeur de position en abscisse dun symbole photo_mc, inscrivez :
Photo_mc.x=Math.ceil(75.5); arrondit 75.5 lentier positif suprieur le plus proche, soit 75.
Photo_mc.x=Math.floor(75.5); arrondit 75.5 lentier positif infrieur le plus proche, soit 76.
Photo_mc.x=Math.pow(75.5,3); lve la valeur passe en premier paramtre avec la
seconde. On obtient ici 3 375.
Photo_mc.x=Math.random(); dtermine une valeur alatoire comprise entre 0 et 1, sous
forme dcimale au centime prs. Pour obtenir un nombre entier compris entre 0 et 99, multi-
pliez la valeur dcimale obtenue par 100, voire arrondissez au nombre entier le plus proche,
comme suit : Photo_mc.x=Math.ceil(Math.random())*100;.
Photo_mc.x=Math.sin(75.5); renvoie le sinus de la valeur en paramtre. La valeur rsultante
est une valeur dcimale comprise entre 1 et 1 exprime en radians. Lorsque la valeur en para-
mtre progresse (comme i, dans le cadre dune boucle avec i++ par exemple), la valeur oscille
de 1 1 de manire cyclique et permet de crer un mouvement doscillation (plante qui
tourne, yoyo, pistons, etc). Le sinus de 0 vaut 1 et le cosinus de 0 vaut 0.
Photo_mc.x=Math.cos(75.5); renvoie le cosinus de la valeur en paramtre. La valeur rsul-
tante est une valeur dcimale comprise entre 1 et 1 selon le mme principe que le sinus, mais la
valeur est inverse. Le cosinus commence par 1.
Photo_mc.x=Math.sqrt(75.5); renvoie la racine carre de la valeur en paramtre. Ici, on
obtient 8,65.
Conversion de degrs en radians et inversement

Les valeurs qui rsultent de la classe Math.sinus ou Math.cosinus sont exprimes en radians. Un
cercle compte 360 degrs ou 2 Pi radians. En ActionScript, on exprime la valeur de PI avec la classe
Math.PI. Ainsi, il est possible de convertir des degrs en radians, comme suit :
AngleEnRadians = AngleEnDegres Math.PI/180
Ou des radians en degrs, comme suit :
AngleEnDegres = AngleEnRadians C180/Math.PI
retenir
Pour apporter un effet damortissement une animation gre en ActionScript, on incrmente, la
position courante dun objet, la position du pointeur moins la position de lobjet en question, que
lon divise par un coefficient. Plus le coefficient est lev, plus lacclration est amortie.

Grer le dfilement de panoramiques en boucle
Cet exemple propose un dfilement panoramique ininterrompu. Il est programm avec un
gestionnaire de type ENTER_FRAME et contient des conditions. Ces conditions restaurent la
position des lments du panoramique lorsquil atteint une certaine limite. Les lments
composant le dcor panoramique sont dupliqus de part et dautre afin de permettre, lorsque
le dfilement atteint sa limite, deffectuer son repositionnement de manire imperceptible
(voir Figure 1.6).
Figure 1.6
Aperu
de lexercice.
Le document que nous utilisons prsente la structure suivante : au-dessus du calque

fond_mc et sous le masque, le dcor se compose de deux symboles, le ciel et une colline.
Chacun de ces symboles contient une image pralablement travaille dans Photoshop de
sorte quelle peut tre duplique plusieurs fois de suite horizontalement sans que lon ne
peroive de rupture dans le graphisme. Nous obtenons une texture de type motif, qui rac-
corde aussi bien droite qu gauche limage rfrente situe, elle, au centre de la composi-
tion. Ainsi, dans Flash, lintrieur de chaque symbole, limage est rpte trois fois. Elles
sont effectivement dupliques de part et dautre afin de permettre au symbole de sortir du
champ visuel que constitue la largeur de la scne, sans pour autant laisser un vide dans le
dcor pendant le dfilement. Ainsi, si le dfilement seffectue de gauche droite, limage
place gauche comblera, en raccord, le trou que nous aurions pu percevoir si limage
navait pas t duplique de ce ct-ci. Inversement, si le dfilement se fait de droite gau-
che, limage situe droite, avec raccord, permet de ne pas voir le trou qui rsulte du dpla-
cement du symbole, lorsque celui-ci est anim vers la gauche.
Chaque image est donc place dabord une fois lorigine du symbole (x = 0 et y = 0). Puis,
elle est duplique une fois gauche et une fois droite, toujours lintrieur du symbole qui
contient limage, de part et dautre de lemplacement initial de la premire image. Les ima-
ges rptes forment un ensemble continu et parfaitement homogne. La rupture entre cha-
que image est imperceptible. Les deux symboles, ainsi mis en forme, sont placs galement
une abscisse de 0 sur la scne principale, en tmoigne la position du centre de chacun de
ces symboles (voir Figure 1.7).
Figure 1.7
Position du centre
dans chaque
symbole.
Raliser une image de type motif, raccord, pour panoramiques. Pour raliser une image
que vous pourrez rpter de manire indtermine de part et dautre sans que lon nen peroive la
rupture, procdez comme suit :
1. Dans Photoshop, ouvrez une image qui reprsente un dcor ou une texture.
2. Dverrouillez le calque principal et dplacez cette image hors champ, de sorte que lun des cts se
retrouve au centre de la fentre de document. Le reste du document est prsent occup par de la
transparence.
3. Dupliquez limage et placez la copie vers la zone vide en faisant se chevaucher lgrement les deux
extrmits de chaque image au centre du document.
4. Puis, gommez (directement ou avec les masques de fusion) le bord de limage duplique, pour rvler
limage originale situe en arrire-plan. Fusionnez au besoin les deux calques. Vous devez liminer
toute rupture encore perceptible entre les deux images. Utilisez ventuellement loutil Tampon pour
retravailler plus prcisment les zones de transition.
5. Enfin, recadrez limage de sorte que chaque extrmit concide avec lautre.
6. Exportez pour le Web au format JPEG ou PNG-24.
Figure 1.8
Structure du
document.

En haut de la fentre de scnario (voir Figure 1.8), le calque actions affiche le code suivant :
//-------------- initialisation
var sensDefilement:Number=1;
//-------------- actions
this.addEventListener(Event.ENTER_FRAME,panoramiqueEnBoucle);
function panoramiqueEnBoucle (evt:Event) {

// dfilement
ciel_mc.x+=3*sensDefilement;
colline_mc.x+=6*sensDefilement;
// boucle
if (sensDefilement==-1) {
if (ciel_mc.x<=sensDefilement*(ciel_mc.width/3)) {
ciel_mc.x=0;
}
if (colline_mc.x<=sensDefilement*(colline_mc.width/3)) {
colline_mc.x=0;
}
} else {
if (ciel_mc.x>=sensDefilement*(ciel_mc.width/3)) {
ciel_mc.x=0;
}
if (colline_mc.x>=sensDefilement*(colline_mc.width/3)) {
colline_mc.x=0;
}
}
}
Dans un premier temps, nous dclarons la variable utiliser :

La variable sensDefilement indique ici le sens de dfilement du panoramique. Une valeur

de 1 induit un dplacement des symboles vers la droite. Une valeur de 1 indique un dpla-
cement des symboles vers la gauche. Notez bien que le sens du dplacement agit sur le posi-
tionnement des objets dans la scne, et non sur la perception que lon a de lanimation.
Ainsi, si nous programmons le dplacement des symboles vers la droite, la lecture de
lanimation, nous percevons un mouvement panoramique qui soriente lui vers la gauche.
Et, inversement, si les symboles se dplacent vers la gauche, nous percevons un panoramique
qui volue vers la droite.
Nous crons ensuite le gestionnaire dvnements qui permet dexcuter le calcul du repo-
sitionnement en continu grce la classe Event et lvnement ENTER_FRAME. Ce gestion-
naire appelle la fonction que nous avons nomme panoramiqueEnBoucle :
//-------------- actions
Nous plaons alors, la suite, la fonction en y introduisant, en paramtre, le rappel de la

classe Event sans lequel notre fonction ne saurait sexcuter :
}
lintrieur du bloc dinstruction de notre fonction, nous programmons dabord le dfilement

des objets par incrmentation :
// dfilement
Nous pourrions utiliser une valeur arbitrairement positive ou ngative directement ici, pour
dfinir le sens du dfilement et le pas, mais en la couplant avec notre variable, nous permet-
tons dautomatiser linversion du dfilement lorsque cela sera ncessaire. Il suffira alors de
changer cette valeur une seule et unique fois, linitialisation, plus haut dans le code.
Le sens du dfilement, dclar en amont, sera alors effectif pour lensemble de la fonction.
Le pas dincrmentation nayant besoin dtre mentionn quune fois, nous le spcifions en
revanche directement ici plutt que de le stocker dans une autre variable. Nous utilisons un
pas de 3 pixels pour le ciel afin quil progresse plus lentement que la colline pour laquelle
nous avons un pas de 6 pixels. Cela permet daccentuer ici aussi leffet volumtrique ; effet
que nous pouvons de nouveau combiner avec un lger filtre flou.
Une fois le dfilement activ, nous pouvons dfinir les conditions vrifier pour restaurer la
position dorigine des symboles de sorte que leffet boucle soit continu. Aussi, une premire
structure conditionnelle de type if doit tre cre :
// action
}
Cette condition vrifie que la position du ciel en x (ciel_mc.x) est infrieure ou gale la
position limite de limage (sensDefilement*(ciel_mc.width/3)), juste avant quelle
bascule hors champ, soit ici 800 pixels, car 800 pixels correspondent la largeur effec-
tive de limage et, en ngatif, le dplacement se fait vers la gauche de la scne, donc,
avant 0.
Plus prcisment, pour obtenir cette valeur, nous utilisons la variable sensDefilement qui
indique le sens de dfilement. Si le sens de dfilement doit tre positif (donc, dfiler de gau-
che droite), sensDefilement vaut 1. Si le sens de dfilement doit tre ngatif (donc,
diler de droite gauche), sensDefilement vaut 1.
Au sens de dfilement, nous ajoutons la largeur du symbole qui contient trois fois limage
de rfrence (ciel_mc.width), divise par le nombre dimages quil contient, en loccur-
rence 3 (parce que nous avons dupliqu limage trois fois dans le symbole). Nous obtenons
ainsi la largeur effective dune et une seule image.
Une fois cette condition vrifie partir de lensemble de ces valeurs, nous replaons lobjet
sa position dorigine qui est 0. Nous obtenons ceci :
ciel_mc.x=0;
}
Calculer un pas dincrmentation. Lorsque vous animez les proprits et les dplacements par
incrmentation de valeur, et que vous souhaitez modifier le cours de lanimation ds quune certaine
valeur est atteinte, pensez que la valeur du pas dincrmentation est dterminante pour que la condi-
tion soit vrifiable. Par exemple, si je dplace un objet en x, sur un pas de 7 pixels, et que sa position

de dpart est 0, je ne pourrai vrifier quune limite est atteinte que si je vrifie que sa nouvelle posi-
tion est une valeur multiple de 7. Ainsi, lorsque je vrifie que lobjet atteint strictement 800 pixels
avec : if (monObjet_mc.x==800) , avec un pas de 7, la condition ne sera jamais remplie, car 800
nest pas un multiple de 7. Alors que la condition (monObjet_mc.x>=800) , elle, sera excute,
car 805, qui est un multiple de 7, est bien suprieur ou gal 800. Afin datteindre une valeur multi-
ple de 800, nous privilgions donc un pas de 5 pixels. Mais, mme avec cette prcaution, un trou
de 5 pixels (805 800 =5) peut faire apparatre encore une rupture dans le dfilement. Il convient
donc de bien calculer le rapport entre le pas dincrmentation (5), la largeur du document (800) et la
condition remplir (800-5), pour que lensemble soit homogne et empche le dernier pas dincr-
mentation dafficher un trou.
viter les images tremblantes. Vous obtenez toujours de meilleurs rsultats laffichage lorsque
les objets sont placs des valeurs qui correspondent des chiffres entiers. La position des objets est
en effet dtermine en pixels et un pixel est par nature indivisible. Lorsquun objet atteint un position-
nement exprim en valeur dcimale, vous risquez dobtenir un scintillement lger, voire un flou, sur
les images ou les textes que vous positionnez. Vrifiez donc toujours que vos symboles, dans une
composition graphique, sont placs initialement des valeurs entires. Pour cela, slectionnez les
objets individuellement et depuis lInspecteur de proprits, ajustez si besoin les valeurs correspon-
dant aux proprits x et y.
La condition de bouclage est maintenant vrifie pour le ciel. Nous dclinons cette vrification
pour la colline. Nous obtenons :
ciel_mc.x=0;
}
colline_mc.x=0;
}
Lanimation fonctionne, ce stade, pour un dfilement gauche. Mais si nous voulons

dcliner la fonction pour un dfilement droite, nous devons inverser aussi le signe inf-
rieur (<) prsent dans la condition. Pour ce faire, nous doublons les actions en utilisant une
nouvelle structure conditionnelle de type if, dans laquelle nous vrifions simplement la
valeur du sens du dfilement. Si la valeur est ngative, alors, le signe est infrieur. Sinon, le
signe devient suprieur. Nous obtenons :
//-------------- actions
// dfilement
// boucle
if (sensDefilement==-1) {
ciel_mc.x=0;
}
colline_mc.x=0;
}
} else {
if (ciel_mc.x>=sensDefilement*(ciel_mc.width/3)) {
ciel_mc.x=0;
}
if (colline_mc.x>=sensDefilement*(colline_mc.width/3)) {
colline_mc.x=0;
}
}
}
retenir
Pour crer une animation en boucle, il faut vrifier, avec une structure conditionnelle, les limites
dincrmentation des valeurs affectes aux proprits des objets anims, et restaurer ensuite ces
proprits leurs valeurs initiales, une fois les limites atteintes.
Pour crer plus spcifiquement un panoramique en boucle, nous utilisons des images dont les extr-
mits se confondent afin de rendre imperceptible leur duplication dans lenvironnement auteur de
Flash.
Pour que lanimation en boucle soit homogne, nous devons vrifier que le pas dincrmentation
est compatible avec les valeurs vrifies dans les conditions et avec les mesures du document.
Une animation est plus fluide si les objets quelle contient sont positionns sur des valeurs entires.
Le typage uint ou int est plus optimis que le typage Number, mais nautorise que des nombres
entiers, voire entiers positifs.
Lutilisation de variables permet dviter de redfinir manuellement une srie de valeurs lorsquune
seule information doit tre modifie, comme le sens de dfilement dun panoramique, par exemple.
Synthse
Dans ce premier chapitre, vous avez vu comment raliser des animations entirement
conues en ActionScript, sans utiliser les options dinterpolation du scnario. Vous avez
appris les adapter vos crations quelles quen soient les dimensions, automatiser, grce
la classe Event, certains processus en exploitant des variables, gnrer des effets
damortissement et des effets de boucle avec lutilisation de structures conditionnelles.
Vous tes en mesure, prsent, danimer vos mises en forme en gardant les objets distribus
sur la scne, sur une seule image du scnario, et simplifier ainsi vos futurs dveloppements.
Interpolations et interactivit avec

2 les classes Tween et TweenMax
Introduction
Nous avons vu, au chapitre prcdent, comment animer des objets directement avec
ActionScript. Pour raliser des animations plus complexes que celles ralises manuelle-
ment en ActionScript, et y ajouter une acclration, un effet de rebond, lenchanement de
plusieurs interpolations successives ou y ajouter linterpolation de proprits, nous utilisons
des classes ActionScript prprogrammes, plus simples manipuler.
Le principe dune classe est de rassembler sous la forme dun fichier texte, un ensemble
dinstructions excuter, pour un ou plusieurs paramtres donns. Les classes danimation
que nous prsentons dans ce chapitre permettent de spcifier en une seule instruction le nom
dun objet, les proprits animer, la dure de lanimation et le type deffet dacclration
voulu ou non. Cest le compilateur Flash qui, laide de la classe importe pendant la publi-
cation, convertit la ligne dinstruction en animation la publication. Il devient donc enfan-
tin, partir de quelques lignes de code, de raliser des interfaces riches, animes et
dynamiques, Ces animations peuvent naturellement tre ajustes selon la valeur des para-
mtres passs lexcution.
Ces classes se nomment Tween, TweenLite, TweenMax, Caurina, AS3AnimationSystem
ou Twease. Si la classe Tween est native dans lAPI de Flash, les classes TweenLite et
TweenMax sont elles disponibles gratuitement sur le site http://blog.greensock.com. Les
classes Caurina, AS3AnimationSystem et Twease, moins usites, sont disponibles toute-
fois sur http://code.google.com/p/tweener sous la dnomination Tweener pour les deux
premires, et sur http://code.google.com/p/twease pour la troisime. TweenMax permet de
raliser ce que propose TweenLite et reprsente la classe la plus fiable et aboutie de tou-
tes. Nous abordons donc, dans ce chapitre, avec la classe Tween native dj disponible
dans votre application, et TweenMax, qui offre plus de possibilits et une plus grande
stabilit.
Animer une galerie avec la classe Tween intgre

Dans cet exemple, un dcor multi-plans, compos de clips distincts, est anim ds
lexcution du document. Lorsque lutilisateur survole lune ou lautre des flches
signaltiques situes de part et dautre du dcor panoramique, celui-ci se dplace dans
un sens ou dans lautre des vitesses diffrentes. Des animations se succdent les unes
aux autres.
La spcificit de cet exemple est que chaque animation repose sur la classe Tween, native de
Flash, simple dutilisation (voir Figure 2.1).
Figure 2.1
Aperu
de lexercice.
Exemples > ch2_interpolationEtInteractiviteAvecClassesTweenEtTweenMax_1.fla
Le document que nous utilisons prsente la structure suivante : dans la scne, au-dessus du
calque fond_mc, un ensemble de MovieClip et Bouton se rpartissent sur divers calques.
Chaque calque porte le nom de loccurrence de lobjet quil contient (voir Figure 2.2). Le
symbole pano_mc contient dautres symboles dont certains sont cachs derrire un rideau.
Ces symboles cachs sont galement des MovieClip. Ils possdent, dans leurs propres scna-
rios, des animations qui seront actives lors de leur survol par la souris (voir Figures 2.3 et 2.4).
Figure 2.2
Scnario
principal.
Figure 2.3
Aperu des
symboles cachs
derrire le rideau.
INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 31

Figure 2.4
Aperu du scna-
rio dun des
symboles cachs.
Dans la partie suprieure du scnario de la scne principale, le calque actions affiche le

code suivant :
//---------------------- initialisation
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var tweenMurX:Tween;
var tweenBusteX:Tween;
var tweenLustreX:Tween;
var tweenLampeX:Tween;
var tweenRideauX:Tween;
//---------------------- actions
// animation dintroduction
tweenMurX= new Tween(pano_mc, "x", Strong.easeOut,715,400,4, true);
tweenBusteX= new Tween(buste_btn, "x", Strong.easeOut,260, -260,4, true);
tweenLustreX= new Tween(lustre_mc, "x", Strong.easeOut,880,400,4, true);
tweenLampeX= new Tween(lampe_mc, "x", Strong.easeOut,1400,180,4, true);
// flche gauche
flecheGauche_btn.addEventListener(MouseEvent.MOUSE_OVER,defilementGauche);
function defilementGauche (evt:MouseEvent) {
flecheGauche_btn.useHandCursor = false;
tweenMurX= new Tween(pano_mc, "x", Strong.easeOut, pano_mc.x,690,3, true);
tweenBusteX= new Tween(buste_btn, "x", Strong.easeOut, buste_btn.x,40,3, true);
tweenLustreX= new Tween(lustre_mc, "x", Strong.easeOut, lustre_mc.x,700,3, true);
tweenLampeX= new Tween(lampe_mc, "x", Strong.easeOut, lampe_mc.x,430,3, true);
tweenMurX.addEventListener(TweenEvent.MOTION_FINISH, apresTween1);
}
function apresTween1 (evt:TweenEvent) {
flecheGauche_btn.visible=false;
flecheDroite_btn.visible=true;
tweenRideauX= new Tween(pano_mc.rideau_mc, "scaleX", Back.easeOut,
pano_mc.rideau_mc.scaleX,0.2,2, true);
}
// flche droite
flecheDroite_btn.addEventListener(MouseEvent.MOUSE_OVER,defilementDroite);
function defilementDroite (evt:MouseEvent) {
flecheDroite_btn.useHandCursor = false;
flecheGauche_btn.visible=true;
flecheDroite_btn.visible=false;
tweenBusteX= new Tween(buste_btn, "x", Strong.easeOut, buste_btn.x, -560,4, true);
}
//-----------actions boutons cachs derrire le rideau, dans le clip pano_mc

// poupe
pano_mc.poupee_btn.addEventListener(MouseEvent.MOUSE_OVER,roll);
pano_mc.poupee_btn.addEventListener(MouseEvent.MOUSE_OUT,out);
// sac
pano_mc.sac_btn.addEventListener(MouseEvent.MOUSE_OVER,roll);
pano_mc.sac_btn.addEventListener(MouseEvent.MOUSE_OUT,out);
// robe
pano_mc.robe_btn.addEventListener(MouseEvent.MOUSE_OVER,roll);
pano_mc.robe_btn.addEventListener(MouseEvent.MOUSE_OUT,out);
// fonctions
function roll (evt:MouseEvent) {
evt.currentTarget.gotoAndPlay(2);
}
function out (evt:MouseEvent) {

}
La programmation de notre animation se dcompose en plusieurs tapes. Nous commen-

ons par programmer le dplacement des symboles de la scne principale. Puis, nous ajou-
tons de linteractivit sur les flches droite et gauche places aux bords du document. Enfin,
nous ajoutons des actions pour contrler linteractivit avec les boutons cachs derrire le
rideau de sorte quils ragissent au passage du pointeur.
Le code se dcompose comme suit. Dabord, nous importons les classes requises :
//---------------------- initialisation
import fl.transitions.TweenEvent;
Pour crer des animations partir de la classe Tween, nous devons dabord importer la
classe Tween et ses classes drives. Nous pouvons alors dclarer de nouvelles animations
et les associer des vnements souris.
Dans le code, le terme import indique de charger une classe externe non incluse dans lAPI
de Flash. En loccurrence, la classe Tween native figure, non pas dans lAPI du logiciel,
mais dans un dossier plac ct de lapplication Flash sur le systme. Il nest donc pas
ncessaire de placer physiquement ces classes prs de notre document .fla pour les impor-
ter ni de les tlcharger pour en disposer. Il suffit de les appeler directement l o elles se
trouvent prs de votre application sans les dplacer.
Localiser les classes natives de Flash. Sur Macintosh, les classes natives sont disponibles dans le
dossier nomm fl qui se trouve dans le rpertoire de lapplication : Applications > Adobe Flash CS4 >
Common > Configuration > ActionScript 3.0 > Projects > Flash > src > fl
Sous Windows, elles sont localises dans le rpertroire de lapplication Flash, de la mme manire,
depuis Program files > Adobe > Flash CS4.
Le terme fl, lorsquil est indiqu la suite de import, indique lAPI de Flash de localiser
ce rpertoire quil sait identifier dans le dossier de lapplication Flash, et partir duquel il va
chercher la classe cible dans le reste du chemin indique dans nos lignes de code. Dans
notre exemple, Flash va donc importer les classes Tween et TweenEvent, qui se trouvent la

racine du rpertoire transitions, lintrieur de fl, puis, lensemble des classes dispo-
nibles contenues dans le dossier easing, lui-mme situ la racine du mme dossier tran-
sitions.
Nous aurions pu simplifier en supprimant la dernire ligne et en remplaant le terme Tween
par un astrisque comme nous lavons fait pour easing. Nous aurions alors obtenu :
import fl.transitions.*;
Toutes les classes alors contenues dans le rpertoire mentionn avant lastrisque sont sys-
tmatiquement importes, lexception des classes qui figurent dans des sous-rpertoires.
Cest la raison pour laquelle nous garderions nanmoins la deuxime ligne. Mais en gardant
perceptible le nom des classes principales que nous allons utiliser, nous conservons une
visibilit sur le nom des classes qui spcifiquement nous intressent ici et nous aident
mieux apprhender les instructions.
Nous abordons aussi, la section suivante, le moyen de centraliser les classes ajoutes en
redfinissant les chemins de classe (classPath) partir des prfrences du systme.
Que risque-t-on abuser de lastrisque limportation des classes ? Rien. Mme si vous
citez toutes les classes dun rpertoire avec un astrisque, seules celles qui sont vraiment utilises dans
le code de votre document Flash seront compiles la publication. Cela nalourdit donc nullement
votre document.
Une fois que ces classes sont importes, les animations Tween peuvent tre cres :
var tweenMurX:Tween;
var tweenBusteX:Tween;
var tweenLustreX:Tween;
var tweenLampeX:Tween;
var tweenRideauX:Tween;
Dabord, il faut rserver de nouveaux espaces mmoire pour contenir ces animations. Nous
crons donc autant de variables que nous souhaitons crer dinterpolations (tween signifie
interpolation en anglais). Chaque nouvelle variable doit tre type pour un espace de type
Tween. Tween est la classe que nous avons importe et qui permet Flash de comprendre de
quoi il retourne lorsque nous lemployons.
Pour faciliter lidentification des interpolations, dans le nom des variables, nous introduisons
arbitrairement le nom de lobjet animer ainsi que la proprit concerne.
Maintenant que le typage est ralis, nous pouvons animer :
//---------------------- actions
// animation dintroduction
tweenMurX= new Tween(pano_mc, "x", Strong.easeOut,715,400,4, true);
tweenBusteX= new Tween(buste_btn, "x", Strong.easeOut,260, -260,4, true);
tweenLustreX= new Tween(lustre_mc, "x", Strong.easeOut,880,400,4, true);
tweenLampeX= new Tween(lampe_mc, "x", Strong.easeOut,1400,180,4, true);
Les lignes de code qui suivent linitialisation reprennent les noms des interpolations que
nous avons types et y dfinissent un nouvel objet interpolation. Ces interpolations sont
caractrises par lobjet new Tween() et une srie de paramtres qui autorisent le contrle
de lanimation. Ces paramtres sont :
new Tween( objet, "proprit", acclration, valeur de dpart,
valeur darrive, dure, type de dure).
Objet. Nom de lobjet interpoler. Par exemple : pano_mc.

Proprit. Entre guillemets, indique le nom de la proprit animer. Par exemple : x, y,
scaleX, scaleY, rotation, alpha, width ou height.
Acclration. La mthode dacclration de transition utilise, en rapport la classe
easing. Par exemple : Back, Bounce, Elastic, None, Regular ou Strong (voir
Tableau 2.1). Ces valeurs sont associes un comportement qui dtermine si leffet doit
tre appliqu au dbut de lanimation, la fin ou les deux simultanment, avec les para-
mtres respectifs : easeIn, easeOut ou easeInOut.
Valeur de dpart. La valeur appliquer la proprit de lobjet anim au dbut de
linterpolation. Cette valeur doit correspondre la valeur attendue par la proprit ani-
me. Ainsi, pour une transition sur laxe des x, on utilisera un nombre entier positif, nul
ou ngatif ou une expression qui nous permet de la dterminer. Lexpression pano_mc.x
dsigne par exemple la position courante de lobjet pano_mc en x, ou toute autre expres-
sion, pourvu que le rsultat soit un nombre de prfrence entier et positif, nul ou ngatif.
Une rotation appellera une valeur exprime en degrs positifs ou ngatifs (de 0 360
par exemple). Un alpha appellera une valeur dcimale comprise entre 0 et 1.
Valeur darrive. La valeur de la proprit anime en fin dinterpolation, sur le mme
principe que la valeur de dpart.
Dure. La dure de linterpolation. Un nombre entier positif est demand.
Type de dure. Requiert une valeur boolenne qui indique si la valeur indique pour la
dure doit tre exprime en nombre dimages ou en secondes. Inscrire false pour une
valeur exprimer en images. Inscrire true pour une valeur exprime en secondes.
Tableau 2.1 : Dfinition des mthodes de transition easing.

Back Back permet de crer un effet de rebond unique avec une acclration. Lobjet part dans une direction
donne, dpasse lgrement le point darrive et revient au point darrive dfini par la valeur darrive.
Bounce Bounce gnre un effet de rebond multiple qui, la diffrence de Elastic, ne dpasse pas la
valeur dfinie au point darrive de linterpolation. Leffet diminue progressivement et est galement
proportionnel la distance entre la valeur de dpart et la valeur darrive de linterpolation.
Elastic Elastic gnre un effet de rebond multiple qui dpasse la valeur dfinie au point darrive de
linterpolation. Leffet diminue progressivement et est proportionnel la distance entre la valeur de
dpart et la valeur darrive de linterpolation.
None None neutralise les effets.

Strong Strong ajoute une acclration prdfinie simple linterpolation.
Regular Regular permet de crer une interpolation linaire sans effet, trs lgrement plus amortie que
None. Mais ceci est presque imperceptible.
easeIn, Ces paramtres, ajouts aux prcdents, dterminent, en plus, si leffet dacclration spcifi par
easeOut et Back, Bounce, Elastic, None, Regular ou Strong, doit tre appliqu au dbut de lanimation
(on ajoute alors .easeIn), la fin de lanimation (on ajoute alors .easeOut) ou les deux (on
easeInOut
ajoute dans ce cas .easeInOut).

ce stade de la programmation, lanimation dintroduction fonctionne de manire auto-
nome. Nous poursuivons avec linteractivit associe aux flches gauche et droite :
// flche gauche
flecheGauche_btn.addEventListener(MouseEvent.MOUSE_OVER,defilementGauche);
// actions
}
Dabord, un couteur est attach la flche gauche. Cet couteur appelle la classe Mouse-
Event pour dsigner un vnement de type souris. Nous prcisons, derrire la classe
MouseEvent, quil sagit plus spcifiquement du survol de la souris sur lobjet auquel est
rattach lcouteur, donc, la flche gauche. Au survol, nous appelons lexcution de la fonction
nomme roll dveloppe ci-dessous.
Dans cette fonction, qui reprend le nom de la classe appele avec evt:MouseEvent, nous
commenons par rendre invisible la main qui apparat au survol du bouton flche afin de
rendre leffet plus lgant :
flecheGauche_btn.useHandCursor = false;
la suite, nous activons de nouvelles interpolations, comme nous lavons fait pour lanimation
dintroduction :
// flche droite
}
tant donn que nous avons dj typ les interpolations pour lintroduction et que les
proprits et les objets anims ne changent pas, nous pouvons directement crer de nou-
velles interpolations sans avoir redfinir de nouvelles variables. Ce sont les mmes
interpolations. Elles sont simplement mises jour avec de nouvelles valeurs places en
paramtre.
Dans la premire interpolation, comme dans les suivantes, nous relevons cependant une nuance :
La valeur utilise pour dsigner le point de dpart de linterpolation est une expression :
pano_mc.x.
Plus loin, la fin de la fonction appele pour la flche gauche, un couteur est attach lun
des objets interpolation que nous venons dutiliser. Il permet, grce la classe TweenEvent
que nous avons importe plus haut, dexcuter une nouvelle fonction lorsque linterpolation
est termine. Nous associons alors, la classe TweenEvent, lvnement MOTION_FINISH
pour appeler la nouvelle fonction (consultez le Tableau 2.2 pour connatre les diffrents
vnements disponibles avec cette classe) :
}
}
Stabiliser une interpolation Tween. Si vous appliquez une nouvelle interpolation Tween sur un
objet dj en cours dinterpolation Tween, si la dure de la nouvelle interpolation est infrieure ou
gale linterpolation en cours, elle perd le contrle de lobjet anim. En revanche, si cette interpola-
tion est plus longue, elle devient prioritaire. Pour stabiliser une interpolation Tween qui ne sachve
pas correctement, il convient donc de modifier la dure de chaque interpolation de sorte que la der-
nire excute soit toujours plus longue que celle ventuellement en cours ou dinterrompre les
autres interpolations (voir Tableau 2.2).
Tableau 2.2 : Dfinition des enchanements de la classe TweenEvent.

MOTION_CHANGE Indique que linterpolation se joue.
MOTION_FINISH Indique que linterpolation est termine.
MOTION_LOOP Indique que la lecture de linterpolation a repris depuis le dbut, en mode boucle.
MOTION_RESUME Indique que la lecture de linterpolation a repris, aprs une pause.
MOTION_START Indique que la lecture du mouvement a commenc.
MOTION_STOP Indique que lobjet Tween a t interrompu par un .stop(). Cet vnement peut tre dploy
pour prvenir, par exemple, de toute intervention de lutilisateur qui souhaite interrompre une
interpolation en cours dexcution afin dviter que linterpolation ne bogue. Notez cependant
que la classe Tween supporte mal linterruption dinterpolations en cours et de ce fait, oblige
raliser des animations rapides et de courte dure. Lorsquune interpolation se joue et quun
utilisateur souhaite cliquer, par exemple, sur un objet en mouvement pour appeler un contenu, il
est souhaitable dinterrompre avec leNomDeMonTween.stop() lanimation en cours. Le cas
chant, le document excut peut devenir trs instable. Pour des animations plus stables et
plus longues, la classe TweenMax, qui supporte mieux cette contrainte, sera privilgie.
Dans cette nouvelle fonction, nous demandons de modifier la visibilit des flches puis de
lancer une nouvelle interpolation qui va, elle, dformer le rideau de manire rvler les
boutons cachs larrire-plan de celui-ci. Nous utilisons ici la proprit scaleX et des valeurs
dcimales car lchelle est dfinie 0 pour 0 %, et 1 pour 100 % :
}
tweenRideauX= new Tween(pano_mc.rideau_mc, "scaleX", Back.easeOut,
pano_mc.rideau_mc.scaleX,0.2,2, true);
}
Avant linterpolation, ou aprs, peu importe, nous rendons galement invisible le bouton
flche gauche pour viter que lutilisateur ne lance plusieurs reprises lanimation. Comme
lanimation dplace le dcor latralement, si nous lexcutions indfiniment, le dcor fini-
rait par sortir compltement de la scne. Comme nous utilisons ici un bouton pour amorcer

lanimation, il nest pas ncessaire de recourir des structures conditionnelles comme nous
laurions fait au chapitre prcdent. Il suffit, en effet, aprs linterpolation de masquer int-
gralement ce qui permet de lancer lanimation, le bouton flche gauche :
Inversement, si nous masquons la flche gauche pour viter de sortir vers la gauche, nous
devons permettre lutilisateur de revenir vers la droite, de lautre ct du dcor, lorsque
nous sommes lautre extrmit de celui-ci. Nous forons donc la visibilit de la flche
droite au moment o la flche gauche disparat, afin de prvenir le cas o la fonction asso-
cie la flche droite (qui rend invisible la flche droite) aura t excute pralablement
par dautres fonctions :
la suite, de la mme manire que nous avons cr laction pour la flche gauche, figurent
celles utilises pour la flche droite, mais sans enchanement danimation car le rideau nest
prsent que dun ct de la scne :
// flche droite
}
Enfin, nous terminons avec des actions places sur les boutons cachs, qui permettent de
signaler une possible interaction, au passage de la souris. Les actions appeles travers les
couteurs lancent lanimation contenue dans le scnario de chaque bouton.
Chaque couteur dont nous disposons utilise la classe MouseEvent laquelle chacune des
deux fonctions roll et out se rfre via le terme evt. En reprenant, dans chaque fonction,
le terme evt, nous pouvons alors invoquer la classe MouseEvent. En y associant en plus la
proprit currentTarget, nous ciblons, plus spcifiquement, chacun des objets couts
vhicul par la classe MouseEvent. Ainsi, il nest pas ncessaire de rpter maintes fois la
mme fonction et la dcliner pour chaque bouton si les actions sont communes. Il suffit de
remplacer le nom de loccurrence cible (pano_mc.poupee_btn, pano_mc.sac_btn et
pano_mc.robe_btn) par lexpression evt.currentTarget et les fonctions roll et out
seront actives pour chacun des couteurs sy rfrant (voir Figure 2.4).
Cette animation sarrte au premier stop rencontr. La fonction nomme out prolonge ces
animations lorsque le pointeur quitte la surface des mmes boutons.
// poupe
pano_mc.poupee_btn.addEventListener(MouseEvent.MOUSE_OVER,roll);
pano_mc.poupee_btn.addEventListener(MouseEvent.MOUSE_OUT,out);
// sac
pano_mc.sac_btn.addEventListener(MouseEvent.MOUSE_OVER,roll);
pano_mc.sac_btn.addEventListener(MouseEvent.MOUSE_OUT,out);
// robe
pano_mc.robe_btn.addEventListener(MouseEvent.MOUSE_OVER,roll);
pano_mc.robe_btn.addEventListener(MouseEvent.MOUSE_OUT,out);
// fonctions
function roll (evt:MouseEvent) {
}

}
retenir
La classe Tween est simple dutilisation car elle ne ncessite pas de disposer des classes correspon-
dantes ct du document Flash pour les utiliser. Il suffit de les importer en ciblant les rpertoires
situs dans le dossier Applications du systme.
Il est possible denchaner plusieurs animations en utilisant la classe TweenEvent, suivie de lvnement
MOTION_FINISH.
Les interpolations de la classe Tween permettent danimer les proprits x, y, scaleX, scaleY,
rotation, alpha, width et height dobjets affichs par le lecteur Flash.
Les valeurs utilises en paramtre pour dfinir les caractristiques dune interpolation Tween peuvent
rsulter dexpressions.
Les classes Tween doivent cependant tre utilises avec parcimonie pour prserver la stabilit de vos
crations. Pour des animations plus labores, prfrez la classe TweenMax.
La classe Tween supporte mal les interventions utilisateur qui interrompent son processus. Privilgiez
des interpolations de courte dure pour palier cette contrainte ou utilisez la classe TweenMax.
La proprit currentTarget permet de cibler directement plusieurs occurrences travers une seule
fonction et vite de crer des fonctions similaires contenant les mmes instructions.
Animer une carte interactive avec la classe TweenMax

La classe Tween native de Flash est simple, mais trs vite limite en possibilits ds lors que
lon souhaite vritablement raliser des animations plus labores. Il est difficile en effet de
multiplier les proprits sur un mme objet sans accrotre galement le nombre de lignes
de code. La multiplication des lignes de code avec des interpolations de type Tween rend
dautant plus instable le fichier qui les excute et de fait, limite rellement lutilisabilit de
la classe native.
Pour disposer de classes dinterpolation plus souples et plus stables, nous prfrons utiliser
la classe TweenMax disponible gratuitement sur le site http://blog.greensock.com/
tweenmaxas3. Cette classe est galement disponible en AS2 ladresse http://blog.green-
sock.com/tweenmaxas2. Elle permet, outre linterpolation partir de proprits, de grer
lacclration bien sr, mais aussi de placer sur linterpolation en cours une trajectoire de
type Bzier pour dfinir prcisment un mouvement. Elle permet galement de grer des
effets de transition de couleur sur des objets.

Dans cette section, nous allons tudier le fonctionnement dune carte gographique interactive
en combinant, au sein de mmes transitions, lanimation de plusieurs proprits, de trajectoires
dfinies avec une courbe de Bzier et lenchanement de ces transitions (voir Figure 2.5).
Figure 2.5
Aperu
de lexercice.
calque fond_mc, figure dabord la carte du monde en partie masque de sorte quen lagran-
dissant, elle ne dborde pas sur le pied de page du document. Au-dessus, clairement iden-
tifis et rpartis vers les calques, se trouvent les boutons plus et moins affects la
manipulation des proprits et leurs lgendes respectives (voir Figure 2.6).
Figure 2.6
Aperu
de la fentre
scnario.
Dans le calque actions, nous pouvons lire le code suivant :

//-------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
restaurer_btn.visible=false;
var tweenMonde:TweenMax;
//-------------------- actions
//// anim intro

TweenMax.from(monde_mc,5, {scaleX:10, scaleY:10, rotation:90, x:700, y:1200,
bezier:[{x:290, y:143}, {x:300, y:345}], delay:0.2, ease:Strong.easeInOut});
//// actions boutons
// Abscisse x
plusX_btn.addEventListener(MouseEvent.CLICK,plus1);
function plus1 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {x:monde_mc.x-100, delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}
moinsX_btn.addEventListener(MouseEvent.CLICK,moins1);
function moins1 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {x:monde_mc.x+100, delay:0, ease:Strong.easeOut});
}
// Ordonne y
plusY_btn.addEventListener(MouseEvent.CLICK,plus2);
TweenMax.to(monde_mc,2, {y:monde_mc.y-100, delay:0, ease:Strong.easeOut});
}
moinsY_btn.addEventListener(MouseEvent.CLICK,moins2);
TweenMax.to(monde_mc,2, {y:monde_mc.y+100, delay:0, ease:Strong.easeOut});
}
// Rotation
plusRotation_btn.addEventListener(MouseEvent.CLICK,plus3);
TweenMax.to(monde_mc,2, {rotation:monde_mc.rotation-15, delay:0,
ease:Strong.easeOut});
}
moinsRotation_btn.addEventListener(MouseEvent.CLICK,moins3);
TweenMax.to(monde_mc,2, {rotation:monde_mc.rotation+15, delay:0,
}
// Alpha
plusAlpha_btn.addEventListener(MouseEvent.CLICK,plus4);

if (monde_mc.alpha<1) {
TweenMax.to(monde_mc,1, {alpha:monde_mc.alpha+0.1, delay:0, ease:Strong.easeOut});
}
}
moinsAlpha_btn.addEventListener(MouseEvent.CLICK,moins4);
if (monde_mc.alpha>0) {
TweenMax.to(monde_mc,1, {alpha:monde_mc.alpha-0.1, delay:0, ease:Strong.easeOut});
}
}
// Echelle
plusEchelle_btn.addEventListener(MouseEvent.CLICK,plus5);
TweenMax.to(monde_mc,2, {scaleX:monde_mc.scaleX+0.5, scaleY:monde_mc.scaleY+0.5,
delay:0, ease:Strong.easeOut});
}
moinsEchelle_btn.addEventListener(MouseEvent.CLICK,moins5);
TweenMax.to(monde_mc,2, {scaleX:monde_mc.scaleX-0.5, scaleY:monde_mc.scaleY-0.5,
delay:0, ease:Strong.easeOut});
}
// Restaurer
restaurer_btn.addEventListener(MouseEvent.CLICK,restaurerCarte);
function restaurerCarte (evt:MouseEvent) {
tweenMonde= TweenMax.to(monde_mc,5, {scaleX:1, scaleY:1, x:400, y:270, rotation:1,
alpha:1, delay:0, ease:Strong.easeInOut});
tweenMonde.addEventListener(TweenEvent.COMPLETE, tweenFini1);
}
function tweenFini1 (evt:TweenEvent) {
}
La classe TweenMax, la diffrence de la classe native Tween, nest pas prsente dans le
rpertoire fl situ dans le rpertoire de lapplication Flash. Vous devez donc avoir tl-
charg cette classe.
Une fois la classe tlcharge et dzippe, le dossier obtenu contient un dossier nomm gs
qui rassemble lensemble des classes et sous-classes utiles pour grer les interpolations de
la classe TweenMax. Vous devez placer ce dossier ct de votre document Flash, lintrieur
de votre projet jusqu la publication des fichiers SWF.
Mise jour de la classe GreenSock TweenMax. Les classes Greensock TweenLight et TweenMax
tant rgulirement mises jour, la structure et le nom des lments qui les composent sont sujets
modification. Vous adapterez naturellement nos commentaires prsents tout au long de louvrage en
fonction de ces ventuelles mises jour. Le dossier de classes gs que nous utilisons dans cet ouvrage
tant appos aux exemples du livre, vous disposez dj dune structure valide pour lensemble des
fichiers et ne ncessitez pas de la tlcharger nouveau, y compris pour tout dveloppement dinter-
polation de type TweenMax que vous seriez amen produire vous-mme par la suite.
Que faire des classes aprs compilation des SWF ?

Le langage
Le code contenu dans les classes appeles avec la commande import en ActionScript, lintrieur
de votre document, sera compil directement dans le SWF. Il nest donc pas ncessaire de placer les
classes sur le serveur qui hberge votre site avec les fichiers SWF. Nanmoins, il est souhaitable de les
conserver prs de votre document source Flash (.fla) afin de permettre les ventuelles mises jour
et la recompilation de vos animations au format SWF.
Centraliser les classes ajoutes avec les chemins de classe (classPath)

Il est possible de centraliser les classes que vous utilisez dans un autre rpertoire et de sy rfrer pour
chaque nouveau document pour lequel vous souhaitez les utiliser, ponctuellement pour le document
ouvert ou dfinitivement pour lensemble des nouveaux documents Flash. La premire mthode
consiste dfinir un chemin daccs automatique pour les classes natives (classPath), chemin invoqu
la publication du document actif en redfinissant ses paramtres de publication. La seconde
mthode consiste redfinir ce mme chemin de classes natives, directement dans les prfrences
de lapplication Flash, de sorte que chaque nouveau document dispose des nouvelles classes.
Dans les deux cas, il devient alors possible dappeler la classe ajoute uniquement par son nom, et sans
la recopier physiquement dans votre projet, comme nous le faisons dj avec la classe Tween native.
Pour importer une classe pour le document actif uniquement, il faut redfinir les paramtres de publica-
tion du document ouvert. Faites Fichier > Paramtres de publication (ou depuis lInspecteur de proprits,
cliquez sur le bouton du haut intitul Modifer). Au sommet de la bote de dialogue, dans longlet Flash,
droite de la liste de version du langage ActionScript, cliquez sur le bouton Paramtres. Dans la nouvelle
bote de dialogue, en bas, ajoutez un chemin en cliquant sur le bouton plus. Puis, slectionnez la classe
ajouter en cliquant sur le bouton de slection matrialis par un petit dossier, droite du bouton
moins. Confirmez limportation et validez toutes les fentres. La classe est intgre au document.
Pour importer une classe pour lensemble des nouveaux documents, vous devrez redfinir les prf-
rences de Flash. Dans les prfrences de lapplication (Fichier > Prfrences), cliquez dabord sur la
catgorie ActionScript, puis sur le bouton Paramtres dActionScript 3.0, situ en bas de la fentre.
Dans la bote de dialogue qui apparat, dans la deuxime liste daffichage nomme Dossiers, conte-
nant des fichiers de classes ActionScript, cliquez sur le bouton de slection de rpertoire pour slec-
tionner le rpertoire de classes et lintgrer dsormais vos futurs documents.
ct du dossier gs que vous avez tlcharg, figurent des documents au format SWF, res-
pectivement nomms PluginExplorer.swf et TweenLiteBasics.swf. Ces fichiers vous
assisteront sur ldition des lignes de code pour gnrer une interpolation de type TweenMax.
Ces assistants sont trs utiles, notamment pour le calcul dune trajectoire de mouvement de
type Bzier que nous utilisons pour dplacer des objets (voir Figure 2.7).
Lassistant TweenMax. Pour utiliser lassistant TweenMax, ouvrez, avec le lecteur Flash install sur
votre systme, le fichier nomm PluginExplorer.swf . Puis, cliquez sur le bouton Example situ
prs du type dinterpolation de votre choix. Une nouvelle fentre apparat et affiche les lignes de code
relatives la proprit choisie. Vous pouvez alors modifier les rglages dans la partie droite de la fen-
tre pour ajuster le script ou dplacer directement les options de contrle dans la zone daperu situe
gauche de la fentre (voir Figure 2.8). Pour contrler une courbe de Bzier, par exemple, cliquez
successivement sur le trac qui figure dans laperu gauche, puis dplacez les points crs afin

dajuster instantanment le trac. droite, activez ventuellement loption Tween through bezier
points pour que le trac passe par les points crs au lieu dy tre simplement aimant. Cliquez
ensuite sur le bouton TWEEN pour lancer un aperu de lanimation obtenue. Appuyez sur Reset pour
rinitialiser les paramtres.
Figure 2.7
Aperu de
lassistant
TweenMax.
Figure 2.8
Dtail de la
configuration
dune proprit.
Pour rcuprer le code gnr par lapplication, dans la zone de code situe en bas de la fentre,
copiez-le directement en appuyant sur Cmd+A, puis Cmd+C (Mac) ou Ctrl+A, puis Ctrl+C (Windows).
Puis collez le code directement dans la fentre Actions de votre document Flash en faisant Cmd+V
(Mac) ou Ctrl+V (Windows).
Dans le code, nous dmarrons avec limportation des classes requises.

//-------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
Les classes importes sont respectivement celles contenues dans le rpertoire gs pour les
interpolations, dans le rpertoire easing pour permettre les effets de transition et daccl-
ration, et dans le rpertoire events pour autoriser lenchanement danimations ou lexcution
de fonctions aprs les animations (vnements).
Puis, nous masquons le bouton restaurer_btn qui sert restaurer la position initiale de la carte,
car elle nest pas encore modifie. Cest uniquement, lors dune modification, que nous rendons
ce bouton visible afin de permettre la rinitialisation de la carte ses paramtres dorigine :
Les occurrences danimation issues de la classe TweenMax ne requirent pas dtre types.
Mais nous dclarons nanmoins ici une nouvelle occurrence danimation afin de permettre
dy attacher, plus loin dans le code, un couteur. Cela va permettre dexcuter dautres fonc-
tions lorsque celle-ci sera termine et introduire, si vous le souhaitez, dautres interpolations,
comme nous lavons vu avec la classe Tween native dans la section prcdente :
var tweenMonde:TweenMax;
Puis, viennent les actions :

//-------------------- actions
//// anim intro

TweenMax.from(monde_mc,5, {scaleX:10, scaleY:10, rotation:90, x:700, y:1200,
bezier:[{x:290, y:143}, {x:300, y:345}], delay:0.2, ease:Strong.easeInOut});
Dabord, nous crons une premire interpolation TweenMax. Celle-ci interpole les proprits
de lobjet monde_mc partir des valeurs indiques en paramtre, vers les valeurs courantes
de lobjet sur la scne (grce linstruction from). Lanimation dure 5 secondes (5) et
dmarre un cinquime de seconde aprs lexcution du Flash (delay:0.2). Sa transition est
de type progressive (Strong) et la progression est marque la fois en entre et en sortie
(easeInOut). Les proprits animes sont respectivement lchelle (scaleX et scaleY), la
rotation (rotation) et la position (x et y). Cette animation enfin suit une trajectoire de type
Bzier matrialise par deux points dancrage dont les coordonnes sont stockes dans un
tableau (bezier:[{x:290, y:143}, {x:300, y:345}]).
Dfinir les coordonnes dune courbe de Bzier pour la classe TweenMax. Pour utiliser le
paramtre bezier dans une transition TweenMax, vous devez connatre au pralable les coordon-
nes des points dinflexion de la courbe (sauf utiliser lassistant TweenMax prsent plus haut). Pour
connatre les coordonnes des points dinflexion, utilisez les repres de composition de votre docu-
ment Flash. Dans le menu principal de Flash, choisissez Affichage > Rgles. Puis, glisser-dposez des
repres depuis la rgle situe gauche, vers un point dinflexion, pour en connatre labscisse x. De
mme, glisser-dposez un guide de la rgle du haut, vers un point dinflexion, pour en connatre
lordonne y.

Viennent ensuite les actions relatives chaque bouton plus et moins, pour chaque proprit :
// Abscisse x
}
Par exemple, le premier bouton, qui permet de modifier la position de la carte en x, attache
sur lobjet bouton plusX_btn un couteur. Cet couteur associe un vnement souris de
type clic une fonction nomme plus1.
Dans cette fonction, une autre interpolation non identifie et non type apparat et permet de
modifier la proprit x de lobjet monde_mc en incrmentant sa position courante avec
monde_mc.x, dune valeur ngative de 100 pixels. chaque clic sur le bouton, la carte est
donc dplace de 100 pixels en animation vers la gauche. Cette animation contient, en
outre, une acclration dfinie par le paramtre ease.
Dfinition dune interpolation TweenMax
Le langage
La structure dune interpolation TweenMax est la suivante :
TweenMax.direction(symbole, dure, {proprit, proprit, proprit, delay, ease})
TweenMax. Rappelle le nom de la classe importe pour gnrer une interpolation.
Direction. Indique si linterpolation doit utiliser les paramtres qui suivent pour dmarrer lani-
mation et terminer sur les proprits courantes de lobjet dans la scne (dans ce cas, nous inscri-
vons from), ou partir de la position courante de lobjet dans la scne et terminer linterpolation
sur les valeurs passes en paramtre (dans ce cas nous crivons le terme to).
Symbole. Indique le nom de lobjet animer. Par exemple monde_mc.
Dure. Indique la dure de lanimation en secondes. Pour une dure plus courte, utilisez des
valeurs dcimales. La valeur 0.5 mentionne une demie seconde.
Proprit. Entre les deux accolades, vous pouvez ajouter autant de proprits que vous le sou-
haitez. Leur ordre na pas dincidence. Chaque proprit doit tre spare par une virgule. Notez
que certaines proprits adoptent une syntaxe particulire comme le trac Bzier qui place une
srie de valeur dans une structure tabulaire compose de crochets et o chaque paire de valeurs
place entre accolades est spare nouveau par une virgule.
Delay. Permet dindiquer un temps avant dexcuter lanimation. Par exemple, une valeur de 2
retarde le lancement de linterpolation de deux secondes. Lordre dapparition du dlai par rapport
aux autres proprits na pas dincidence.
Ease. Dfinit le type de transition comme vu dans la section consacre la classe Tween. Lordre
dapparition du paramtre ease par rapport aux autres proprits na pas dincidence.
Ce principe est galement appliqu, sur chaque bouton disponible dans la scne, pour les
proprits y et rotation. Nous obtenons :
// Abscisse x

}
moinsX_btn.addEventListener(MouseEvent.CLICK,moins1);
TweenMax.to(monde_mc,2, {x:monde_mc.x+100, delay:0, ease:Strong.easeOut});
}
// Ordonne y
plusY_btn.addEventListener(MouseEvent.CLICK,plus2);
TweenMax.to(monde_mc,2, {y:monde_mc.y-100, delay:0, ease:Strong.easeOut});
}
moinsY_btn.addEventListener(MouseEvent.CLICK,moins2);
TweenMax.to(monde_mc,2, {y:monde_mc.y+100, delay:0, ease:Strong.easeOut});
}
// Rotation
plusRotation_btn.addEventListener(MouseEvent.CLICK,plus3);
TweenMax.to(monde_mc,2, {rotation:monde_mc.rotation-15, delay:0,
}
moinsRotation_btn.addEventListener(MouseEvent.CLICK,moins3);
TweenMax.to(monde_mc,2, {rotation:monde_mc.rotation+15, delay:0,
}
Les proprits alpha, scaleX et scaleY sont gres un peu diffremment :

// Alpha
plusAlpha_btn.addEventListener(MouseEvent.CLICK,plus4);
if (monde_mc.alpha<1) {
TweenMax.to(monde_mc,1, {alpha:monde_mc.alpha+0.1, delay:0,
}
}
moinsAlpha_btn.addEventListener(MouseEvent.CLICK,moins4);
if (monde_mc.alpha>0) {
TweenMax.to(monde_mc,1, {alpha:monde_mc.alpha-0.1, delay:0,
}
}
// Echelle
plusEchelle_btn.addEventListener(MouseEvent.CLICK,plus5);
TweenMax.to(monde_mc,2, {scaleX:monde_mc.scaleX+0.5,
scaleY:monde_mc.scaleY+0.5, delay:0, ease:Strong.easeOut});

}
moinsEchelle_btn.addEventListener(MouseEvent.CLICK,moins5);
TweenMax.to(monde_mc,2, {scaleX:monde_mc.scaleX-0.5,
scaleY:monde_mc.scaleY-0.5, delay:0, ease:Strong.easeOut});
}
La gestion de lalpha est astreinte ses limites qui sont 0 et 1 afin dviter que lutilisateur
nincrmente trop la valeur dans un sens ou dans lautre, au-del de ces limites. Cela vite,
lorsquil active le bouton oppos, quil ne peroive linversion de leffet avec un retard d
au rythme impos du pas dincrmentation.
La gestion de lchelle adopte quant elle une interpolation o les proprits scaleX et
scaleY sont associes et animes simultanment ce que ne nous permettait pas la classe
Tween native, du moins en une seule ligne de code.
Pour terminer, enfin, un bouton de restauration (restaurer_btn) initialise tous les paramtres
en reprenant les valeurs courantes de lobjet sur la scne, travers une nouvelle interpolation :
// Restaurer
restaurer_btn.addEventListener(MouseEvent.CLICK,restaurerCarte);
function restaurerCarte (evt:MouseEvent) {
tweenMonde= TweenMax.to(monde_mc,5, {scaleX:1, scaleY:1, x:400, y:270,
rotation:1, alpha:1, delay:0, ease:Strong.easeInOut});
}
function tweenFini1 (evt:TweenEvent) {
}
Cette interpolation, la diffrence des autres, utilise le nom doccurrence que nous avons
type dans linitialisation au dbut du code. Cela permet de rutiliser cet identifiant pour y
attacher, la suite, un couteur et lancer lexcution dune nouvelle fonction une fois lani-
mation termine. En loccurrence, la fonction invoque lissue de linterpolation tween-
Monde restaure la visibilit du bouton.
Enchaner des actions une interpolation TweenMax

Le langage
Pour ajouter des actions suite une interpolation TweenMax, il est possible dinvoquer une autre
fonction via un gestionnaire dvnements, comme dans cet exemple :
Vous pouvez aussi invoquer directement une fonction, en paramtre de linterpolation, comme suit :
tweenMonde= TweenMax.to(monde_mc,5, {scaleX:1, scaleY:1,
x:400, y:270, rotation:1, alpha:1, delay:0, ease:Strong.easeInOut,
onStartListener:fonctionDemarrage, onCompleteListener:fonctionFin });
Le paramtre onStartListener appelle une nouvelle fonction au dmarrage de linterpolation. Le
paramtre onCompleteListener appelle une fonction une fois linterpolation acheve.
retenir
La classe TweenMax est plus puissante que la classe Tween native car elle permet dintgrer plusieurs ani-
mations de proprit dans une mme instruction et rend ainsi le document plus stable lexcution.
Il est possible, avec TweenMax, denchaner plusieurs animations en y associant la classe Tween-
Event, suivie de lvnement MOTION_FINISH ou en passant le nom de la fonction directement en
paramtre de linterpolation laide de la proprit onStartListener ou onCompleteListener.
Les interpolations de la classe TweenMax permettent danimer les proprits dobjets, mais aussi dutiliser
des trajectoires de type Bzier et de dterminer un dlai pour retarder lexcution de lanimation.
Il est possible de dfinir une transition depuis la position courante vers une nouvelle position ou
inversement, en utilisant to ou from en amorce de la cration dune interpolation TweenMax.
Un assistant est disponible avec la classe TweenMax. Il permet de saffranchir de la saisie du code
pour raliser des interpolations plus complexes et explorer dautres proprits.
Dfilant TweenMax avec un pointeur et un masque

Les classes TweenMax contribuent largement amliorer lergonomie dun projet en lui
offrant des solutions graphiques efficaces pour accompagner le dploiement des contenus
dans linterface dun site. Elles facilitent lorganisation spatiale des donnes en offrant la
possibilit de scnariser leur mise en forme et servir des fonctionnalits applicatives. Une
des applications les plus courantes en ce sens est le contrle de laffichage dun contenu
hauteur variable par une barre dascenseur personnalise.
Dans cette section, nous abordons lutilisation des classes TweenMax dans le contexte
du dploiement dune barre dascenseur personnalise et adaptable tout type de
contenu. Un ascenseur permet ici de faire dfiler un texte avec un gestionnaire de type
Event.ENTER_FRAME, mais des boutons plus et moins disposs de part et dautre de la barre
dascenseur contrlent le repositionnement de celui-ci laide des classes TweenMax. Dans
cet exemple, nous abordons aussi le dplacement de la barre qui sert temporiser le dfilement
du texte, avec la mthode startDrag (voir Figure 2.10).
Le document que nous utilisons prsente la structure suivante : dans la scne principale du
document, nous distinguons, au-dessus du calque fond_mc, un symbole ascenseur_mc et
un texte masqu (voir Figure 2.11). Le symbole ascenseur_mc est compos de plusieurs
autres symboles de type MovieClip. Deux symboles : plus_btn et moins_btn, permettent
de dplacer le texte verticalement par -coups successifs dans un sens ou dans lautre. Un
symbole barre_btn permet de le positionner directement lendroit souhait en dplaant
simplement cet objet verticalement. Chacun des symboles utiliss pour le contrle du dfi-
lement du texte contient, son tour, en plus de la forme graphique qui le caractrise, un
symbole de type MovieClip rectangulaire et transparent, plus large que la forme graphique
visible rectangle_mc. Cette astuce permet dtendre les fonctionnalits du symbole au-
del de la surface visible, ce qui est particulirement intressant dans ce contexte o les l-
ments graphiques demeurent trs troits et o linteraction avec lobjet est la base de laccs
au contenu que nous affichons. Dans chacun des symboles, nous pouvons enfin relever la
position de leurs centres respectifs, dterminante pour le calcul du positionnement des
objets avec la barre de dfilement (voir Figure 2.12).

Figure 2.10
Aperu
du rsultat.
Figure 2.11
Aperu
de la fentre
scnario.
Figure 2.12
Le positionne-
ment du centre
est situ au
sommet de
chaque symbole.

//-------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
var positionInitialTexteY:Number=texte_txt.y;
var hauteurScroll:Number=ascenseur_mc.filetMC_mc.height;
var hauteurBarre:Number=ascenseur_mc.barre_btn.height;
var pas:Number=40;
//-------------------- actions
//// calcul de la position du texte

stage.addEventListenerfunction placerTexte (evt:Event) {
texte_txt.y=((ascenseur_mc.barre_btn.y*-1)*(texte_txt.height/
(hauteurScroll-hauteurBarre))+positionInitialTexteY);
}

// +
ascenseur_mc.plus_btn.addEventListener(MouseEvent.MOUSE_DOWN,scrollPlus);
function scrollPlus (evt:MouseEvent) {
addEventListener(Event.ENTER_FRAME,placerTexte);
if (ascenseur_mc.barre_btn.y>=pas) {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:ascenseur_mc.barre_btn.y-pas,
} else {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:0, ease:Strong.easeOut});
}
}
// -
ascenseur_mc.moins_btn.addEventListener(MouseEvent.MOUSE_DOWN,scrollMoins);
function scrollMoins (evt:MouseEvent) {
if (ascenseur_mc.barre_btn.y<hauteurScroll-hauteurBarre-pas) {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:ascenseur_mc.barre_btn.y+pas,
} else {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:hauteurScroll-hauteurBarre,
}
}
// scroll
var zoneDeDeplacement:Rectangle = new Rectangle(0,0,0,hauteurScroll-hauteurBarre);
ascenseur_mc.barre_btn.addEventListener(MouseEvent.MOUSE_DOWN, activer-Deplacement);
function activerDeplacement(evt:MouseEvent){
evt.currentTarget.startDrag(false,zoneDeDeplacement);
}

addEventListener(MouseEvent.MOUSE_UP, stopperDeplacement);
function stopperDeplacement(evt:MouseEvent){
evt.currentTarget.stopDrag();
}
Tout dabord, nous importons les classes requises pour la gestion des interpolations Tween-
Max :
//-------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
Puis, nous dclarons certaines variables afin de stocker des valeurs et surtout, simplifier le
programme en les centralisant ici :
var positionInitialTexteY:Number=texte_txt.y;
var hauteurScroll:Number=ascenseur_mc.filetMC_mc.height;
var hauteurBarre:Number=ascenseur_mc.barre_btn.height;
var pas:Number=40;
La premire variable positionInitailTexteY rcupre la position courante en y de lobjet

texte amen dfiler. Nous obtenons une valeur de 30. En ralit, il sagit ici de stocker en
mmoire le dcalage obtenu entre le haut du document et la position limite suprieure que
le texte doit atteindre. Nous utilisons cette valeur plus loin pour recaler le positionnement
du texte dont la position se dtermine selon la barre de dfilement qui dmarre, elle,
0 pixel.
La deuxime variable hauteurScroll enregistre la hauteur effective du filet contenu dans
lascenseur. Nous ne prenons que la hauteur du filet, car celle de lascenseur est fausse. Lascen-
seur est effectivement plus haut quil ny parat cause de la prsence occulte des symboles
rectangles masqus, qui dbordent de part et dautre lintrieur des boutons plus et moins.
La troisime variable hauteurBarre enregistre la hauteur de lobjet barre_mc qui figure
dans lascenseur.
Enfin, la dernire variable, pas, dtermine un pas dincrmentation utilis dans les animations
TweenMax, gres par les boutons plus et moins.
Pour la plupart des variables, nous avons choisi de dfinir des valeurs par rapport des
expressions plutt que par des chiffres, car cela rend le dveloppement naturellement plus
adaptable tout type de configuration. Vous pouvez ainsi rcuprer le document et redessi-
ner les formes des boutons ou de la barre, et modifier la hauteur du texte ou le remplacer par
un autre objet, le dispositif continuera de fonctionner.
Ensuite, apparaissent les actions :
//-------------------- actions
//// calcul de la position du texte

function placerTexte (evt:Event) {
texte_txt.y=((ascenseur_mc.barre_btn.y*-1)*(texte_txt.height/
(hauteurScroll-hauteurBarre))+positionInitialTexteY);
}
Dans les actions, nous commenons par crer la fonction qui sera appele par chacun des
boutons plus ou moins, lorsque lutilisateur cliquera dessus, et uniquement ce moment-l.
Dans cette fonction, nous dterminons la position de lobjet texte_txt en y. Par soucis
dergonomie, nous devons faire descendre le texte lorsque le curseur barre_mc monte et
inversement. Pour cela, nous devons au pralable considrer que seule la zone utile de
lascenseur doit tre prise en compte dans le calcul, cest--dire la zone situe entre lextr-
mit du symbole barre_mc en mouvement et lextrmit de la zone de dplacement mat-
rialise par le filet (voir Figures 2.13 et 2.14).
Nous indiquons donc que la position y du texte (texte_txt.y) est linverse (multiplie par
1) de la position courante de la barre de dfilement (ascenseur_mc.barre_mc.y). Mais,
comme le texte est bien plus grand que ne lest la zone de dfilement, nous devons ajouter
un coefficient pour dmultiplier la position courante de la barre de dplacement par une
valeur qui rende la hauteur de la zone de dfilement de lascenseur proportionnelle la hau-
teur du texte lui-mme. Nous multiplions donc la position inverse de la barre par : la hauteur
du texte, divise par la diffrence entre la hauteur de la zone de dfilement et celle de la
barre elle-mme (texte_txt.height/(hauteurScroll-hauteurBarre).
Pour viter enfin que le dfilement ne replace le texte 0 lorsque la barre est situe tout en
bas, nous ajoutons en plus la valeur positionInitialTexteY, stocke initialement, qui
dtermine le dcalage entre le sommet et la position courante du bloc de texte.
Formule de manire gnrique, nous obtenons lquation suivante :
positionObjetY=positionBarreAscenseurY*CoefficienInvers*
coefficientProprotionHauteurTexte/
(HauteurZoneVisiblePlusHauteurBarreDefilement)
Figure 2.13
Positionnement
du texte lorsque
la barre dascen-
seur est en haut.
Figure 2.14
Positionnement
du texte lorsque
la barre dascen-
seur est en bas.

Grer un ascenseur avec une acclration. Dans le cadre du dveloppement de la barre de
dfilement, comme vu Chapitre 1, vous pouvez aussi dfinir un dplacement du contenu avec un
coefficient dacclration au lieu de le dplacer en temps rel par rapport la position du curseur.
Pour cela, vous devez incrmenter, la position courante de lobjet rendre mobile (ici, texte_txt),
la valeur obtenue par notre calcul (expression actuellement utilise) moins la position courante du
contenu (texte_txt.y) ; le tout, divis par une valeur comprise entre 1 et 10 grand maximum.
Reste alors jauger le coefficient de repositionnement de lobjet texte_txt de sorte quil ne parte
pas dans le dcor lorsque le curseur barre_mc atteint les extrmits de la zone de dfilement.
Ensuite, apparat laction du bouton plus_btn:

// +
ascenseur_mc.plus_btn.addEventListener(MouseEvent.MOUSE_DOWN,scrollPlus);
function scrollPlus (evt:MouseEvent) {
if (ascenseur_mc.barre_btn.y>=pas) {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:ascenseur_mc.barre_btn.y-pas,
} else {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:0, ease:Strong.easeOut});
}
}
Lorsque lutilisateur presse le bouton de la souris sur lobjet plus_btn, la fonction scroll-
Plus sexcute. Dans cette fonction, nous crons deux interpolations TweenMax. La pre-
mire qui incrmente la position de la barre dun pas de 40 pixels est lance si et seulement
si cette barre dascenseur atteint une position suprieure ou gale 40 pixels. Au-dessous, si
nous continuions dincrmenter sa position de 40 pixels, la barre dpasserait la limite de
lascenseur dfinie par le sommet du filet.
Lorsque la barre se trouve une distance infrieure un pas dincrmentation, en revanche,
nous crons une animation TweenMax qui replace directement la barre la position 0 qui
correspond au sommet du filet avec else.
Pour le bouton moins_btn, nous dclinons les valeurs en les inversant et nous obtenons le
code suivant :
// -
ascenseur_mc.moins_btn.addEventListener(MouseEvent.MOUSE_DOWN,scrollMoins);
function scrollMoins (evt:MouseEvent) {
if (ascenseur_mc.barre_btn.y<hauteurScroll-hauteurBarre-pas) {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:ascenseur_mc.barre_btn.y+pas,
} else {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:hauteurScroll-hauteurBarre,
}
}
Le bouton moin_btn adopte le mme calcul que pour le bouton plus_btn, la diffrence
que le point limite de repre est dfini par la hauteur de lascenseur moins la hauteur de la
barre, moins le pas dincrmentation. Cela correspond, compte tenu de la hauteur effective
de la barre de dfilement (voir Figure 2.12), la limite infrieure du filet moins le pas
dincrmentation. Si cette limite est dpasse, alors (avec else), lanimation TweenMax
dplace la barre jusqu lextrmit infrieure du filet.
La gestion du dplacement de la barre de dfilement, enfin, se dfinit par le code suivant :
// scroll
ascenseur_mc.barre_btn.addEventListener(MouseEvent.MOUSE_DOWN,
activerDeplacement);
}
function stopperDeplacement(evt:MouseEvent){
}
Dabord, nous dfinissons les limites de la zone de dfilement pour le symbole barre_btn.
Cette limite est dfinie travers la cration dune variable qui stocke les coordonnes go-
mtriques dun nouvel objet Rectangle. Le typage :Rectangle gre la mmoire requise
pour stocker les coordonnes. Sen suit la cration physique de lobjet avec ses coordonnes :
Une zone de dplacement se dfinit travers une forme gomtrique. Lquation qui permet
de dfinir les coordonnes dun rectangle en AS3 est : Rectangle (x1, y1, largeur, hau-
teur). En choisissant une largeur ou une hauteur nulle, nous limitons le dfilement un axe
vertical ou horizontal. Dans notre exemple, la hauteur correspond celle du filet moins celle
de la barre, car le centre de la barre est situ au sommet de cette dernire (voir Figure 2.12).
Il faut donc soustraire le diffrentiel qui reste entre la position de son centre et sa hauteur.
Ensuite, lorsque lutilisateur presse le bouton de la souris sur la barre, un couteur excute
la fonction zoneDeDeplacement qui active le dplacement du texte. Ce dplacement est
amorc la fois avec avec la fonction startDrag qui permet de rendre mobile le curseur
barre_mc et en appelant la fonction dj identifie (placerTexte), qui recalcule la position du
texte en fonction de la position du curseur :
ascenseur_mc.barre_btn.addEventListener(MouseEvent.MOUSE_DOWN, activerDeplacement);
}
Nous appelons, seulement maintenant, la fonction placerTexte car elle calcule de manire
perptuelle la position courante du texte et de ce fait, sollicite de manire continue les res-
sources de lordinateur. Pour optimiser ces ressources, nous nactivons la fonction que
lorsquelle est ncessaire, et non en plaant lcouteur lexcution de lanimation, comme
en lisolant hors de la fonction par exemple. De mme, nous pourrions stopper la fonction
lorsque le pointeur relche le curseur, mais ce faisant, nous perdrions leffet damortisse-
ment dans le mouvement du texte si lutilisateur activait plusieurs fois de suite lun des
deux boutons plus ou moins, avant que lanimation ne se termine, mme avec une fonction

retarde suite un vnement de type TweenEvent.COMPLETE. Nous prfrons donc garder
cette fonction active.
Arrter un couteur. Pour arrter un couteur actif, nous utilisons la mthode removeEvent-
Listener, suivie du mme gestionnaire dvnements que celui utilis pour activer la fonction neu-
traliser. Ainsi, pour stopper lcouteur :
addEventListener(Event.ENTER_FRAME,nomDeLaFonction)
nous inscrivons :
removeEventListener(Event.ENTER_FRAME,nomDeLaFonction).
galement dans notre fonction, nous activons le dplacement avec la mthode startDrag().
En paramtre, nous dterminons dabord si lobjet dplac reste coll au pointeur en son
centre (true) ou non (false). Puis, nous rappellons les coordonnes de lobjet rectangle cr
en amont, afin de restreindre le dplacement aux limites gomtriques du rectangle.
Le programme sachve avec un gestionnaire associ lvnement MOUSE_UP pour arrter
le dplacement du curseur barre_btn, et donc, le dfilement du texte, en excutant la fonction
stopperDeplacement :
function stopperDeplacement(evt:MouseEvent) {
}
La fonction indique darrter le dplacement avec la mthode stopDrag, lorsque la souris

est relche, en ciblant lobjet courant actif avec evt.currentTarget (pour en savoir plus
sur la diffrence entre target et currentTarget, consultez le Chapitre 5 o un exemple
illustre le contexte dutilisation de la proprit target).
retenir
Utiliser des expressions plutt que des valeurs permet de rendre le dveloppement adaptable tout
type de mise en forme.
La classe TweenMax peut tre combine des animations gres avec la classe Event.ENTER_FRAME si
les objets contrls par linterpolation ne sont pas grs directement par la classe Event.
Il est possible dtendre la zone ractive dun objet en utilisant des symboles cachs auxquels nous
appliquons un alpha nul ou en crant un bouton pour lequel seule la zone clique possde une
forme pleine.
Pour grer un dplacement dobjet, nous utilisons les mthodes startDrag et stopDrag, que lon
associe aux limites dune forme gomtrique comme un rectangle pour contraindre le dplacement.
Pour dfinir un dplacement rectiligne, il suffit de rendre nulle soit la largeur, soit la hauteur du rectangle
utilis comme zone limite de dplacement.
Pour calculer les rapports de valeurs entre les proprits de diffrents objets, il faut bien prendre en
compte la structure de lobjet rfrent (la position de son centre, sa hauteur, les lments visibles ou
invisibles qui le composent, son dcalage par rapport la scne courante, etc).
Synthse
Dans ce chapitre, vous avez appris raliser des interpolations avec des classes extrme-
ment puissantes. Elles offrent la possibilit, en une ligne de code, de grer de nombreuses
proprits, une trajectoire et un dlai dexcution notamment. Vous tes prsent en mesure
dexplorer galement dautres classes disponibles dans lassistant TweenMax et vous savez
dsormais les intgrer par dfaut toutes vos applications, sans avoir les ajouter manuel-
lement dans chacun de vos nouveaux projets.
Les transitions deffets

3 et de filtres
Introduction
Les transitions permettent dajouter aux animations des effets sur les contenus (fondus
enchans, Flash dappareil photo, halo lumineux, flou directionnel, volets ou stores
ouvrants, etc.). Pour permettre la gestion de ces effets dans le temps, nous utilisons des clas-
ses spcifiques, qui sont transitionManager pour les effets et filters pour les filtres, et
les associons ventuellement un chronomtre de type Timer. En typant ces transitions, il
est en outre possible de les faire suivre dautres effets anims et dorganiser une mise en
scne graphique des contenus sur la dure avec des variations deffets.
Dans ce chapitre, nous prsentons deux galeries photos qui exploitent respectivement les
effets et les filtres en les combinant des chronomtres.
Galerie photo avec transition deffets

Dans cette section, nous abordons les diffrents types deffets programmables en Action-
Script 3. Pour cela, nous appliquons dans un premier exemple un effet de fondu sur une
galerie dimages, puis nous dtaillons les proprits des autres effets disponibles partir de
la classe TransitionManager.
Effet de fondu avec un Timer

Dans cet exemple, une galerie fait apparatre, en fondu, une srie de photographies intgres
physiquement dans la scne du document Flash. Vous pouvez modifier les images et leur
nombre ainsi que la dure et le style des transitions, pour personnaliser ce script selon votre
convenance et lintgrer nos projets (voir Figure 3.1).
Figure 3.1
Aperu
du document.
Exemples > ch3_transitionsEffetsEtFiltres_1.fla
calque fond_mc, apparat un symbole nomm galerie_mc (voir Figure 3.2). Ce symbole
contient une suite dimages toutes diffrentes. Une action stop() empche la tte de lecture
de jouer lanimation ds lexcution du document Flash (voir Figure 3.3).
Figure 3.2
Aperu du scnario
de la scne
principale.
Figure 3.3
Aperu du scnario
du symbole
galerie_mc.
Sur la premire image du calque nomm actions, figure le code suivant :

var i:Number=1;
var nombreDePhotos:Number=6;
var dureeBoucle:Number=8000;
var boucle:Timer=new Timer(dureeBoucle,nombreDePhotos);
var transitionPhoto:TransitionManager=new TransitionManager(galerie_mc);
galerie_mc.visible=false;
//-------------- actions
boucle.addEventListener(TimerEvent.TIMER,lancerBoucle);
boucle.start();
function lancerBoucle(evt:TimerEvent) {
lancerGalerie();
}
function lancerGalerie () {
galerie_mc.visible=true;
if (i<=nombreDePhotos) {
galerie_mc.gotoAndStop(i);
transitionPhoto.startTransition({type:Fade, direction:Transition.IN,
duration:dureeBoucle/2000, easing:Strong.easeInOut});
transitionPhoto.addEventListener("allTransitionsInDone", suite);
function suite(evt:Event) {
transitionPhoto.startTransition({type:Fade, direction:Transition.OUT,
}
i++;
} else {
LES TRANSITIONS DEFFETS ET DE FILTRES 59

}
}
lancerGalerie();
transitionPhoto.addEventListener("allTransitionsOutDone", suite2);
function suite2(evt:Event) {
MovieClip(evt.target.content).visible=false;
}
Tout dabord, nous importons les classes ncessaires pour lanimation :

Ensuite, nous dfinissons les variables :

var i:Number=1;
La variable i sert ici dfinir la position de la tte de lecture sur limage du scnario du
symbole galerie_mc pour chaque nouvelle image afficher.
La variable nombreDePhotos permet de dterminer le nombre de photos jouer. Cette
valeur correspond a priori au nombre dimages qui figurent dans le scnario du clip
galerie_mc, mais elle peut tre infrieure.
La variable dureeBoucle indique la dure dune animation pour chaque photo, effets de
transition inclus. Cette dure, comme nous le prcisons plus loin, est intgre dans le calcul
de la dure de chaque effet. Ainsi, plus la dure de lanimation dune image est longue, plus
les transitions seront longues galement. La dure est exprime en millisecondes. Une
valeur de 8 000 correspond donc un changement dimage toutes les 8 secondes.
Ensuite, une variable boucle dclare la cration dun chronomtre. Ce chronomtre enclenche
la rptition dune action autant de fois quil y a dimages dclares (nombreDePhotos),
donc toutes les 8 secondes (dureeBoucle). Nous pourrions dfinir le chronomtre selon
lexpression suivante : Timer(dure, nombre de rptition).
Puis, nous dclarons une nouvelle transition :

var transitionPhoto:TransitionManager=new TransitionManager(galerie_mc);
Calcul de la dure dun chronomtre. Lorsque vous spcifiez une dure sur un Timer, comme
suit : Timer(8000,5), notez que la fonction appele par lcouteur, attach au Timer, est active
dans cet exemple toutes les 8 secondes et 5 fois de suite. Les interpolations excutes au sein de la
fonction appele, par consquent, ne doivent pas durer ici plus de 8 secondes. Elles doivent mme
durer lgrement moins que 8 secondes, environ 7 990 milli-secondes. Car le lecteur Flash requiert
quelques millimes de secondes pour lancer une action. En prvoyant une dure trop juste, vous
risquez de dpasser la dure prvue et de rendre lexcution de lanimation instable.
Le symbole galerie_mc qui contient les images est pass en paramtre et cest lui qui sera
affect par les effets de la classe transitionManager. Enfin, la galerie est masque par dfaut :
Cest seulement lorsque la fonction lancerGalerie sera active que la galerie sera raffiche.
Viennent ensuite les actions :
//-------------- actions
boucle.start();
lancerGalerie();
}
Dabord, un couteur est attach au chronomtre afin de capter les itrations et de program-
mer une action chacune dentre elles. Pour cela, nous utilisons la classe Timer-
Event.TIMER quil nest pas ncessaire dimporter au pralable car, comme la classe Event
ou MouseEvent, elle est incluse nativement dans lAPI du logiciel. Cet couteur excute
alors une fonction nomme lancerBoucle.
son tour, la fonction lancerBoucle appelle une autre fonction nomme lancerGalerie.
Pourquoi ne pas directement appeler les instructions de la fonction lancerGalerie, lors de
la premire fonction lancerBoucle? Cette premire fonction est un couteur de type
chronomtre et de ce fait elle ne sera excute quaprs un certain laps de temps. Si nous
appelions directement les instructions depuis la fonction lancerBoucle, la galerie ne serait
lance quau bout de 8 secondes. Il faudrait alors attendre que les 8 premires secondes
soient coules avant que la premire transition ne soit excute. Pour permettre de jouer la
galerie ds linstant 0, nous devons pouvoir excuter cette fonction initialement, indpen-
damment du chronomtre. Pour cela, nous devons isoler les instructions dans une nouvelle
fonction, autonome et distincte, qui nattend pas de paramtre dobjet, comme lancer-
Galerie(). Nous pouvons alors appeler cette fonction, la fois depuis notre chronomtre
avec la fonction lancerBoucle(evt:TimerEvent) et directement linitialisation de
limage du scnario, avec linstruction lancerGalerie(). Le premier appel gre lexcu-
tion de la galerie partir de 8 secondes jusqu la fin de lanimation. Le second appel lex-
cute ds la publication du document. Comme la fonction est termine avant 8 secondes, les
deux appels senchanent parfaitement et lincrmentation active ds la premire excution
continue de crotre avec le chronomtre dans les suivantes.
Puis, nous crons la fonction qui excute la galerie anime :
transitionPhoto.addEventListener("allTransitionsInDone", suite);
}

i++;
} else {
}
}
Dans cette fonction autonome, dans un premier temps, nous rendons visible la galerie :
Puis, nous ajoutons une structure conditionnelle avec incrmentation de la valeur i :

}
i++
} else {
}
Cette structure indique dexcuter une action tant que la valeur de i est infrieure au nombre
dimages dfini travers nombreDePhotos, dont nous avons dtermin la valeur plus haut
6. Lorsque i atteint le nombre dimages, le chronomtre est termin et la galerie nappa-
rat plus, car cet instant, nous la rendons invisible.
cette structure, nous intgrons les instructions pour afficher les images :
}
i++;
} else {
}
}
Dans un premier temps, nous spcifions datteindre limage du scnario du symbole

galerie_mc qui correspond la valeur de i. Par dfaut, sa valeur est 1. Cest donc la pre-
mire photo qui est joue au lancement de lanimation. Cette valeur est incrmente plus
loin, en dehors du bloc dinstructions avec i++, afin de sassurer que lincrmentation fonc-
tionne indpendamment de lanimation. Toutes les 8 secondes donc, y compris ds lexcution
de la fonction avant le chronomtre Timer, une nouvelle photo est affiche jusqu la dernire
o la galerie disparat compltement.
Nous spcifions alors les transitions joindre notre fonction :
i++;
} else {
}
}
Nous utilisons une occurrence de la classe transitionManager type plus haut sous le
nom transitionPhoto. Cette transition dmarre avec un fondu (type:Fade), en entre
(direction:Transition.IN), dune dure de 4 secondes (dureeBoucle/2000=4), et avec
une acclration en entre et en sortie (easing:Strong.easeInOut).
la suite, dans le mme bloc dinstruction, nous ajoutons une nouvelle transition qui sexcute
une fois la premire transition acheve, grce un couteur associ la sous-classe allTran-
sitionsInDone (voir encadr). Cette nouvelle transition gnre un effet de fondu en sortie :
transitionPhoto.addEventListener(allTransitionsInDone, suite);
}
i++;
} else {
}
}
La mise en place de la fonction est maintenant termine. Nous pouvons lexcuter au

dmarrage :
lancerGalerie();
Dfinition de la classe transitionManager

Une transition de la classe transitionManager, appartenant la famille de la classe transi-
tions, peut tre lance de deux manires. Soit nous activons directement une interpolation
sans la typer :
TransitionManager.start(monClip_mc,{type:Fade, direction:Transition.IN,
duration:4, easing:Strong.easeInOut})
Soit nous la typons dabord afin de permettre son identification par la suite et y associer ven-
tuellement plus tard un couteur, pour enchaner avec dautres animations par exemple :
var nomDeLaTransition:TransitionManager = new TransitionManager (galerie_mc);
nomDeLaTrasition.startTransition({type:Fade, direction:Transition.IN,
duration:4, easing:Strong.easeInOut});
Dans les deux cas, les paramtres de la transition sont les suivants :
{type, direction, duration, easing}
type dsigne le type deffet appliquer. Nous distinguons les effets suivants : Blinds,
Fade, Fly, Iris, Rotate, Photo, PixelDissolve, Squeeze, Wipe et Zoom.
Blinds correspond un effet de stores horizontaux.
Fade correspond un effet de fondu.
Fly correspond un effet de translation.

Chacun de ces effets peut tre ajust en fonction des paramtres suivants :
Iris correspond un effet douverture en cercle similaire un diaphragme dappareil
photo.
Rotate effectue une rotation.
Photo lance un flash blanc pour simuler un appareil photo. Cet effet peut, par exemple,
tre associ la programmation dun son de dclenchement dobturateur.
PixelDissolve joue une mosaque de formes carres pour simuler un effet de dcom-
position de limage.
Squeeze crase limage.
Wipe joue un volet sur limage comme un masque qui se dplace latralement.
Zoom rduit limage jusqu sa disparition.
direction correspond au point de dpart de leffet. La valeur Transition.IN active
leffet en ouverture. Transition.OUT, lactive en fermeture.
duration correspond la dure de leffet, en secondes.
easing, enfin, indique le mode dacclration attacher leffet (voir Chapitre 2 sur la
dfinition du paramtre easing pour la classe Tween).
Pour dtecter la fin de linterpolation avec transitionManager, attachez un couteur sur le
nom doccurrence de la transition et spcifiez lvnement allTransitionInDone si la
transition prcdemment excute est transition.IN. Spcifiez linverse allTransi-
tion-OutDone si la transition prcdemment excute est transition.OUT. Par exemple :
nomDeLaTrasition.addEventListener("allTransitionsInDone", suite);
function suite(evt:Event):void {
nomDeLaTrasition.startTransition({type:Fade,
direction:Transition.OUT,
duration:4,
easing:Strong.easeInOut});
}
O placer lcouteur et la fonction ? Lemplacement de la fonction et de son appel indiffre.

Vous pouvez appeler une fonction avant ou aprs lavoir rdige, le lecteur excutera les deux simul-
tanment. Les designers prfrent gnralement placer la fonction aprs lcouteur ou aprs lappel
de la fonction, car cela reprend une progression logique de lobjet plac dans la scne vers le pro-
gramme. Tandis que les programmeurs puristes prfrent souvent placer les fonctions avant les cou-
teurs, car ils pensent dabord aux instructions avant leur mise en forme dans la scne qui bien
souvent nexiste pas.
Enfin, nous terminons en attachant nouveau un couteur la transition qui suit la

deuxime interpolation :
transitionPhoto.addEventListener("allTransitionsOutDone", suite2);
function suite2(evt:Event) {
MovieClip(evt.target.content).visible=false;
}
Cette dernire fonction rend la galerie invisible une fois le fondu sortant achev. Nous
ciblons, pour ce faire, la transition courante, avec evt.target, en la convertissant dabord
en MovieClip, avec MovieClip(evt.target.content), afin de permettre de lui appliquer
ensuite une proprit de MovieClip avec visible=false.
Le transtypage.
Le langage
La mthode qui consiste convertir le typage dun objet en un autre type dobjet se nomme le trans-
typage. Elle est utilise pour permettre laffectation de certaines proprits et mthodes des objets
que leur type nautorise initialement pas. Nous parlons aussi dtendre les proprits dun objet, mais
cette dernire notion est plutt rserve la cration de sous-classes personnalises ajoutes des
objets existants.
Dtecter la fin dune boucle ditration Timer. Pour dtecter la fin dune boucle Timer, attachez
au Timer un couteur associ la classe Timer.Event.TIMER_COMPLETE:
boucle.addEventListener(TimerEvent.TIMER_COMPLETE,boucleFinie);
function boucleFinie() {
trace("fin du timer");
}
Arrter un Timer. Pour arrter le droulement dun Timer en cours dexcution, utilisez un simple
stop :
boucle.stop();
Pour exprimenter la galerie de photos avec dautres types de transitions, vous pouvez rem-
placer le type dfini dans chaque transition par celui de votre choix, parmi ceux dfinis dans
lencadr (Blinds, Fade, Fly, Iris, Rotate, Photo, PixelDissolve, Squeeze, Wipe,
Zoom), et cumuler dautres transitions celles-ci pour les agrmenter, par exemple, deffets
supplmentaires.
retenir
La classe transitionManager est native et permet dajouter des effets de transition directement
sur des objets de la scne.
La classe transitionManager peut tre suivie dautres animations avec la sous-classe allTransition-
OutDone ou allTransitionOutDone ou avec la sous-classe TimerEvent.TIMER_COMPLETE du
Timer.
Pour contrler lexcution dune fonction intervalles rguliers, nous utilisons un Timer.
Un Timer excute chaque itration la fin de la dure et non au dbut. Et requiert, en cons-
quence, dappeler une premire fois la fonction attache lcouteur du Timer avant de lexcuter
par le Timer.

Galerie photo avec transition de filtres
Dans cette section, nous utilisons la classe filters qui permet, selon le mme principe que
pour la classe transitionManager, dappliquer dynamiquement des filtres des objets
(flou, ombre porte, halo ou biseau).
Pour cela, nous utilisons une galerie de photos qui affiche des vues macroscopiques de pla-
ntes travers une lunette. Chaque transition, dune image lautre, applique simultan-
ment des filtres flou, ombre porte, halo et biseau (voir Figure 3.3). Nous obtenons une
galerie dimages o chaque transition est globalement floue mais redevient nette une fois
quune nouvelle image a t affiche.
Figure 3.3
Aperu
de lexercice.
Exemples > ch3_transitionsEffetsEtFiltres_2.fla
calque fond_mc (voir Figure 3.4), un symbole nomm galerie_mc contient une suite
dimages toutes diffrentes et masques. lintrieur du symbole galerie_mc, une action
stop() empche la tte de lecture de jouer lanimation (voir Figure 3.5).
Figure 3.4
Aperu du scnario
de la scne
principale.
Figure 3.5
Aperu du scnario
du symbole
galerie_mc.
Sur la premire image du calque nomm actions, apparat le code suivant :

import flash.filters.*;
import gs.*;
import gs.easing.*;
import gs.events.*;
var flou:BlurFilter=new BlurFilter(0,0,3);

var ombrePortee:DropShadowFilter=new DropShadowFilter(50,45,1,0x000000,
20,10,1,3, false, false, false);
var halo:GlowFilter=new GlowFilter(0xffffff,1,20,20,3,255, false, false);
var biseau:BevelFilter=new BevelFilter(50,45,0xFFFFFF,1,0x000000,1,120,120,
1,3,"inner",false);
var i:Number=1;
//-------------- actions
boucle.start();
lancerGalerie();
}
function lancerGalerie() {
// INITIALISATION
galerie_mc.filters=[flou];
galerie_mc.filters=[ombrePortee];
galerie_mc.filters=[halo];
galerie_mc.filters=[biseau];
//ANIMATION INTRO
TweenMax.from(galerie_mc,4, {blurFilter:{blurX:100, blurY:100,
quality:3}, delay:0, ease:Strong.easeInOut});
TweenMax.from(galerie_mc,4, {dropShadowFilter:{distance:5, angle:45,
alpha:1, color:0x000000, blurX:10, blurY:10, strength:1,
quality:3, type:"inner", knockout:false, hideObject:false},
delay:0, ease:Strong.easeInOut});

TweenMax.from(galerie_mc,4, {glowFilter:{color:0xffffff, alpha:1,
blurX:0, blurY:0, strength:1, quality:3, type:"inner",
knockout:false}, delay:0, ease:Strong.easeInOut});
TweenMax.from(galerie_mc,4, {bevelFilter:{distance:5, angle:45,
highlightColor:0xffffff, highlightAlpha:1,
shadowColor:0x000000, shadowAlpha:1, blurX:0, blurY:0,
strength:1, quality:3, type:"inner", knockout:false},
//ANIMATION SORTIE
TweenMax.to(galerie_mc,4, {blurFilter:{blurX:100, blurY:100, quality:3},
TweenMax.to(galerie_mc,4, {dropShadowFilter:{distance:5, angle:45,
alpha:1, color:0x000000, blurX:10, blurY:10}, delay:5,
ease:Strong.easeInOut});
TweenMax.to(galerie_mc,4, {glowFilter:{color:0xffffff, alpha:1, blurX:0,
blurY:0}, delay:5, ease:Strong.easeInOut});
TweenMax.to(galerie_mc,4, {bevelFilter:{distance:5, angle:45,
color:0x000000, blurX:0, blurY:0}, delay:5, ease:Strong.easeInOut});
i++;
} else {
}
}
lancerGalerie();
Nous importons en premier lieu les classes requises :

import gs.*;
import gs.easing.*;
import gs.events.*;
Les premires classes importes permettent de raliser les interpolations (transitions et

easing). La classe filters, elle, permet lexploitation des filtres. Les classes et sous-
classes Greensockgs permettent lutilisation de TweenMax pour rendre possible lanimation
de ces filtres. Attention, cette classe requiert le dossier gs pour importer les classes qui ne
sont pas disponibles par dfaut dans lAPI de Flash (voir Chapitre 2).
Ensuite, nous prdfinissons quatre filtres que nous exploitons plus loin dans le code :
var biseau:BevelFilter=new BevelFilter(50,45,0xFFFFFF,1,0x000000,
1,50,50,100,3,"inner",false);
Tous les paramtres renseigns dans chacun des filtres ne sont pas obligatoires, mais leur
ordre daffichage est important si leur dsignation nest pas renseigne. Par exemple, vous
pouvez crire :
Mais vous pouvez aussi crire :

blurFilter:{blurX:100, blurY:100, quality:3}
ou bien :
var flou:BlurFilter = new BlurFilter();
flou.quality = BitmpaFilterQuality.MEDIUM;
flou.blurX =0;
flou.blurY =0;
Dans le premier cas, la dsignation nest pas renseigne. Lordre de listage des valeurs est
inchangeable. Dans le second cas (deuxime et troisime exemple), la dsignation est ren-
seigne. Vous pouvez modifier lordre de listage des proprits et indiquer en premier la
qualit par exemple sans affecter le bon rendu de leffet.
Filtre flou
Le premier filtre, nomm flou, type et cre un nouvel objet filtre flou BlurFilter(0,0,3)
dont les valeurs indiquent un flou de 0 pixel de diamtre et de qualit optimale sur une
chelle de 1 3. La valeur du flou est ici porte zro car en ralit nous initialisons le filtre
flou avant de lanimer.
Il est appliqu, dans la fonction, grce la commande suivante :
Dfinition des paramtres du filtre flou BlurFilter. Le filtre flou se dfinit selon lexpression
suivante :
blurFilter:{blurX:100, blurY:100, quality:3}
La dfinition des paramtres du filtre flou sont :
blurFilter, le nom du filtre appliquer reconnu comme tel par la classe filters.
blurX, indique ltalement du flou en pixels sur laxe des X. Une valeur de 50 tale le flou sur une
distance de 50 pixels en largeur.
blurY, indique ltalement du flou en pixels sur laxe des Y. Une valeur de 50 tale le flou sur une
distance de 50 pixels en hauteur.
quality, indique la qualit du flou. Cette valeur sexprime sur une chelle de 1 3. 1 correspond
un flou grossier mais moins gourmand en ressources graphiques. 2, un flou moyen et 3, un
flou fin ou gaussien, plus gourmand en ressources graphiques.
Filtre ombre porte

Le deuxime filtre, nomm ombrePortee, type et cre un nouvel objet filtre dombre porte
DropShadow(50, 45, 1, 0x000000, 20, 10, 1, 3, false, false, false) dont les valeurs
indiquent respectivement une ombre de 50 pixels de distance par rapport lobjet,
de 45 dangle, dun alpha 1 (soit 100 %), de couleur noire, dun flou en X et Y respecti-
vement de 20 et 10 pixels, dune force de 1 sur une chelle de 1 255, de qualit 3, avec
une option ombre intrieure inactive, un masque inactif, et un cache sur lobjet inactif).

Le filtre est appliqu, plus tard dans la fonction, grce la commande suivante :
Dfinitions des paramtres du filtre ombre porte DropShadowFilter. Le filtre ombre porte se
dfinit selon lexpression suivante :
dropShadowFilter:{distance:5, angle:45, alpha:1, color:0x000000,
blurX:10, blurY:10, strength:50, quality:3, type:"inner", knockout:false,
hideObject:false}
Les dfinitions des paramtres du filtre ombre porte sont :

dropShadowFilter, le nom du filtre appliquer reconnu comme tel par la classe filters.
distance, indique le dcalage en pixels de lombre par rapport lobjet
angle, dsigne lorientation de lombre par rapport la source lumineuse. Une valeur de 45
gnre une ombre porte lgrement dcale vers la droite. Tandis quune valeur ngative
loriente vers la gauche.
alpha, indique lopacit de lombre. La valeur sexprime sur une chelle de 0 1, en valeur
dcimale. 0.5 indique une ombre semi-transparente.
color, indique la couleur de lombre en hexadcimal. Cette valeur doit tre prcde de 0x (zro x).
Par exemple, la valeur 0x000000 rfrence un noir. 0x dsigne en ActionScript une valeur
hexadcimale.
blurX, indique ltalement de lombre en pixels sur laxe des X. Une valeur de 50 tale lombre sur
une distance de 50 pixels en largeur.
blurY, indique ltalement de lombre en pixels sur laxe des Y. Une valeur de 50 tale lombre sur
une distance de 50 pixels en hauteur.
strength, indique la force du filtre sur une chelle de 1 255. Ce paramtre diffuse leffet.
quality , indique la qualit de lombre. Cette valeur sexprime sur une chelle de 1 3.
1 correspond une ombre grossire mais moins gourmande en ressources graphiques. 2, une
ombre moyenne et 3, une ombre fine, plus gourmande en ressources graphiques.
type, dsigne la manire dont lombre est applique lobjet. Choisissez la valeur inner pour
une ombre interne, la valeur outer pour une ombre externe et enfin, la valeur full pour une
ombre mixte.
knockout, valeur boolenne qui gnre un masque partir de leffet et retire lobjet (forme un
trou, un creux) en laissant visible larrire-plan.
Filtre halo
Le troisime filtre nomm halo cre et type un nouvel objet filtre halo Glow-
Filter(0xffffff,1,20,20,3,255, false, false) dont les valeurs dsignent
respectivement la couleur du halo, son alpha, son rayonnement flou en X et Y, sa force, sa
qualit, son action sur lintrieur ou non, et si lobjet halo masque le symbole ou non).
Dfinitions des paramtres du filtre halo GlowFilter. Le filtre halo se dfinit selon lexpression
suivante :
glowFilter:{color:0xffffff, alpha:1, blurX:0, blurY:0, strength:1, quality:3,
type:"inner", knockout:false}
Les dfinitions des paramtres du filtre halo sont :
glowFilter, le nom du filtre appliquer reconnu comme tel par la classe filters.
color, indique la couleur du halo en hexadcimal. Cette valeur doit tre prcde de 0x (zro x).
Par exemple, 0xffffff gnre un halo blanc.
alpha, indique lopacit du halo. La valeur sexprime sur une chelle de 0 1, en valeur dcimale.
La valeur 0.5 indique un halo semi transparent.
blurX, indique ltalement du halo en pixels sur laxe des X. Une valeur de 50 tale le halo sur
blurY, indique ltalement du halo en pixels sur laxe des Y. Une valeur de 50 tale le halo sur une
distance de 50 pixels en hauteur.
strength, indique la force du filtre sur une chelle de 1 255. Ce paramtre diffuse leffet.
quality, indique la qualit du halo. Cette valeur sexprime sur une chelle de 1 3. 1 correspond
un halo grossier mais moins gourmand en ressources graphiques. 2, un halo moyen et 3, un
halo fin, plus gourmand en ressources graphiques.
type, dsigne la manire dont le halo est appliqu lobjet. Choisissez la valeur inner pour un
halo interne, la valeur outer pour un halo externe et enfin, la valeur full pour un halo mixte.
knockout, valeur boolenne qui gnre un masque partir de leffet et masque ou retire lobjet
en laissant visible larrire-plan.
Filtre biseau
Enfin, un quatrime filtre nomm biseau cre et type un nouvel objet filtre biseau Bevel-
Filter(50,45,0xFFFFFF,1,0x000000,1,50,50,100,3,"inner",false) dont les para-
mtres dsignent respectivement la distance, langle, la couleur du biseau expose la
lumire, son alpha, la couleur de lombre du biseau, lalpha de lombre, son flou en X et Y,
sa force, sa qualit, si leffet est intrieur (inner), extrieur (outer), ou mixte (full), et si
le masque est activ ou non.
var biseau:BevelFilter=new BevelFiter(50,45,0xFFFFFF,1,0x000000,1,50,
50,100,3,inner,false);
Dfinitions des paramtres du filtre biseau BevelFilter. Le filtre biseau se dfinit selon
lexpression suivante :
bevelFilter:{distance:5, angle:45, highlightColor:0xffffff, highlightAlpha:1,
shadowColor:0x000000, shadowAlpha:1, blurX:0, blurY:0, strength:1, quality:3,
type:"inner", knockout:false}

Les dfinitions des paramtres du filtre biseau sont :
bevelFilter, le nom du filtre appliquer reconnu comme tel par la classe filters.
distance, indique le dcalage en pixels du biseau par rapport lobjet.
angle, dsigne lorientation du biseau par rapport la source lumineuse. Une valeur de 45
gnre un biseau lgrement dcal vers la droite. Tandis quune valeur ngative loriente vers la
gauche.
highlightColor, indique la valeur de couleur du biseau qui reoit la lumire. Gnralement
situ en haut et gauche, il peut tre invers selon la valeur dfinie pour langle.
highlightAlpha, indique lopacit de la couleur du biseau expos la lumire. Agit sur le
paramtre prcdent highlightColor.
shadowColor, indique la valeur de couleur du biseau qui reoit lombre. Gnralement situ en
bas et droite, il peut tre invers selon la valeur dfinie pour langle.
shadowAlpha, indique lopacit de la couleur du biseau ombr. Agit sur le paramtre prcdent
shadowColor.
blurX, indique ltirement du biseau en pixels sur laxe des X. Une valeur de 50 tire le biseau sur
blurY, indique ltirement du biseau en pixels sur laxe des Y. Une valeur de 50 tire le biseau sur
une distance de 50 pixels en hauteur.
strength, indique la force du biseau sur une chelle de 1 255. Ce paramtre diffuse leffet et
adoucit le biseau.
quality, indique la qualit du biseau. Cette valeur sexprime sur une chelle de 1 3. 1
correspond un biseau grossier mais moins gourmand en ressources graphiques. 2, un biseau
moyen et 3, un biseau fin, plus gourmand en ressources graphiques.
type, dsigne la manire dont le biseau est appliqu lobjet. Choisissez la valeur inner pour un
biseau interne, la valeur outer pour un biseau externe et enfin, la valeur full pour un biseau
mixte ou estamp.
knockout, valeur boolenne qui gnre un masque partir de leffet et masque ou retire lobjet
en laissant visible larrire-plan.
Dclinaison des filtres

Dans notre exemple, une fois les filtres dfinis nous initialisons certaines variables :
var i:Number=1;
Nous utilisons les mmes variables que dans lexemple de la section prcdente pour dfinir
les valeurs attendues par le chronomtre Timer. Reportez-vous la section prcdente pour
plus de dtails sur ces valeurs. Puis, nous masquons la galerie par dfaut :
Plus loin, comme dans lexemple prcdent, une fonction gnre le dfilement des images au
rythme des itrations imposes par le chronomtre. Cette fonction est galement excute :
une fois ds la lecture du document Flash avec lancerGalerie(); et chaque itration par
le chronomtre, avec la fonction jouerBoucle(evt:TimerEvent).
//-------------- actions
boucle.start();
lancerGalerie();
}
//INITIALISATION
//(/)
//ANIMATION INTRO
//(/)
//ANIMATION SORTIE
//(/)
i++;
} else {
}
}
lancerGalerie();
Dans la fonction, nous observons trois parties. Linitialisation, lanimation de dpart et

lanimation en sortie. Lanimation dun filtre est distribue dans chacune de ces tapes.
Prenons pour commencer lexemple du filtre flou, comme suit :
// INITIALISATION
//ANIMATION INTRO
TweenMax.from(galerie_mc,4, {blurFilter:{blurX:100, blurY:100, quality:3},
//ANIMATION SORTIE
Lanimation que nous programmons fonctionne de la manire suivante : dabord, la galerie

est nette une fraction de seconde, mais cela est imperceptible : nous initialisons le filtre flou
(partie initialisation du code). Ensuite, et instantanment, la galerie apparat floue, puis, pro-
gressivement, limage devient nette et lgrement bombe avec un biseau trs diffus (partie
animation intro du code). Puis, aprs une pause dune seconde, progressivement limage
redevient entirement floue (partie animation sortie du code). Cest seulement, une fois
cette seconde boucle termine que limage suivante est affiche, le filtre initialis, et que
lanimation reprend et ainsi de suite, de boucle en boucle, jusqu la dernire image de la
galerie.
En publiant le document, nous observons que plusieurs filtres sont appliqus simultan-
ment. Vous pouvez supprimer les lignes de commande de chaque filtre individuellement
pour mieux en apprcier les effets distinctifs si vous le souhaitez.

Dans le cheminement de notre animation, il est indispensable dinitialiser dabord les
valeurs du filtre que nous animons ensuite, pour la simple raison que notre animation se ter-
mine par un flou gnral. Si nous ninitialisons pas les valeurs, lanimation suivante partira
dune image dj floue pour y ajouter du flou de mme intensit. Nous aurions donc
limpression que lanimation nagit pas et que limage reste floue tout le temps. En initiali-
sant les valeurs par lapplication du filtre ds lexcution de la fonction, nous assurons le
contrle du rendu de notre effet en gardant actives ses valeurs.
Pour animer chaque filtre, dans notre exemple, nous commenons par initialiser les valeurs
en appliquant directement chaque filtre que nous avons prdfini en amont, sur lobjet
galerie_mc, puis, nous utilisons la classe Greensock TweenMax pour animer le filtre en
entre et en sortie :
// INITIALISATION
//ANIMATION INTRO
TweenMax.from(galerie_mc,4, {blurFilter:{blurX:100, blurY:100, quality:3},
//ANIMATION SORTIE
Observons que le filtre est introduit dans une interpolation TweenMax comme nimporte
quelle autre proprit, entre deux virgules. Le filtre est contenu entre deux parenthses et
lensemble des paramtres du filtre est contenu entre deux accolades. Chaque proprit du
filtre est spare par une virgule.
Faut-il renseigner toutes les proprits pour les filtres ? Lorsquun filtre est plac en param-
tre dune interpolation de type TweenMax, il nest pas ncessaire de spcifier toutes les proprits dis-
ponibles pour le filtre si celles-ci ne requirent pas dtre modifies. Leur ordre dapparition, de mme,
na pas dincidence, pourvu que leur dnomination soit prcise. Si aucune dnomination nest sp-
cifie, lordre alors est important et correspond, pour chaque filtre individuellement, celui que avons
prsent dans les notes de cette section. Dans notre exemple, nous spcifions volontairement toutes
les proprits possibles pour lanimation dintroduction, afin de vous permettre den prendre connais-
sance, mais nous ne les rptons pas pour lanimation de sortie, car les valeurs de ces proprits ne
changent pas et les valeurs par dfaut, si elles nont pas t modifie entre temps, sappliquent auto-
matiquement.
Lorsquun filtre est appliqu directement, indpendamment de la classe TweenMax, linitialisation
par exemple, le typage nest pas indiqu, et tous les paramtres ne sont pas requis, mais leur ordre est
important et reprend celui galement renseign dans les notes de ce chapitre, dans chaque dfinition
de filtre que nous avons dveloppe.
Nous savons prsent que la classe TweenMax permet de temporiser lanimation grce au
paramtre delay (voir Chapitre 2). Nous navons donc pas besoin de dtecter la fin de lani-
mation avec la classe TweenEvent.MOTION_FINISH comme nous laurions fait dans un
autre contexte, pour enchaner les animations. Il suffit ici de dcaler les animations dans le
temps avec le paramtre delay et nous les verrons se succder les unes la suite des autres.
Veillons toutefois ne pas croiser les animations dans le temps. Si la premire animation
dure 4 secondes, la deuxime srie danimations dmarrera videmment plus de 4 secondes,

par scurit (delay:5).
Les paramtres from et to indiquent respectivement de dmarrer les interpolations soit en
partant (from) soit en terminant (to) sur les valeurs indiques en paramtre de linterpola-
tion TweenMax, depuis les valeurs courantes des proprits appliques lobjet (from), ou
vers ces proprits (to). Les proprits courantes de lobjet galerie_mc correspondent
celles appliques par linitialisation du filtre ltape qui prcde la premire animation
dintroduction.
Nous dclinons le principe sur les quatre filtres et obtenons :
// INITIALISATION
//ANIMATION INTRO
TweenMax.from(galerie_mc,4, {blurFilter:{blurX:100, blurY:100,
quality:3}, delay:0, ease:Strong.easeInOut});
TweenMax.from(galerie_mc,4, {dropShadowFilter:{distance:5, angle:45,
alpha:1, color:0x000000, blurX:10, blurY:10, strength:1,
quality:3, type:"inner", knockout:false, hideObject:false},
TweenMax.from(galerie_mc,4, {glowFilter:{color:0xffffff, alpha:1,
blurX:0, blurY:0, strength:1, quality:3, type:"inner",
knockout:false}, delay:0, ease:Strong.easeInOut});
TweenMax.from(galerie_mc,4, {bevelFilter:{distance:5, angle:45,
highlightColor:0xffffff, highlightAlpha:1,
shadowColor:0x000000, shadowAlpha:1, blurX:0, blurY:0,
strength:1, quality:3, type:"inner", knockout:false},
//ANIMATION SORTIE
TweenMax.to(galerie_mc,4, {dropShadowFilter:{distance:5, angle:45,
alpha:1, color:0x000000, blurX:10, blurY:10}, delay:5,
TweenMax.to(galerie_mc,4, {glowFilter:{color:0xffffff, alpha:1, blurX:0,
blurY:0}, delay:5, ease:Strong.easeInOut});
TweenMax.to(galerie_mc,4, {bevelFilter:{distance:5, angle:45,
color:0x000000, blurX:0, blurY:0}, delay:5, ease:Strong.
easeInOut});
i++;
} else {
}
}

retenir
La classe filters est native et permet dajouter des filtres directement sur des objets de la scne.
La classe filters peut tre enchane avec dautres animations grce lutilisation du paramtre
delay de la classe Greensock TweenMax, voire grce la cration dun chronomtre Timer.
Il est important dinitialiser les paramtres au dbut de chaque animation si lon veut garantir leffet
boucle dune animation dont les effets affectent les contenus la fois en entre et en sortie.
Lordre daffichage des proprits dans un filtre na pas dincidence si leur dsignation est spcifie.
Toutes les proprits dun filtre ne requirent pas dtre renseignes si leurs valeurs ne changent pas.
Synthse
Vous avez appris appliquer des effets et des filtres des objets de la scne et programmer
des interpolations deffets et de filtres travers des animations gnres dynamiquement
dans le temps. En plus de la classe TweenEvent.MOTION_FINISH, vous avez galement
appris enchaner des animations sur lchelle du temps grce lutilisation du chronom-
tre Timer, de sa sous-classe TIMER_EVENT.TIMER_COMPLETE, des sous-classes allTransi-
tionsInDone, allTransitionsOutDone de la classe transition, et du paramtre delay
de la classe Greensock TweenMax. Vous tes prsent en mesure de planifier des actions
dans le temps en les couplant des effets graphiques anims et avancs.
La programmation de squelettes
4
Introduction
Un squelette est une structure hirarchique qui relie, avec un lien de parent, diffrents sym-
boles de la scne ou diffrentes parties dune mme forme graphique continue. En
dployant lossature du squelette, les symboles ou les parties de la forme graphique suivent
la progression du mouvement de la structure qui le compose.
Pour en programmer lanimation, nous utilisons la classe ik (inverse kinematic en anglais,
pour cinmatique inverse). Cette classe, ce jour, ne permet pas de raliser directement un
squelette en programmation, mais uniquement, de lanimer. Les exemples proposs poss-
dent donc dj un squelette, mais nous aborderons galement la manire de construire cet
objet manuellement pour la programmation.
Une structure articule autour dun squelette permet, entre autre, de reconstituer lossature
dun personnage et de lanimer. Elle permet aussi de distribuer les contenus dun site sous
la forme de dispositifs hirarchiss, comme un menu ou une arborescence. Mais, si cette
armature est associe une forme graphique, cela nous donne aussi accs des interpolations
de forme accessibles en programmation.
Dans ce chapitre, nous ralisons dans un premier temps une animation mcanique dun
drode dont les mouvements ragissent la position du pointeur. Nous abordons ensuite
lanimation de squelettes de formes organiques avec des formes graphiques vectorielles,
pour animer, par exemple, le mouvement dun vgtal selon la position dun objet anim
(une abeille). Nous prsentons ensuite comment grer une animation programme en mode
interactif, afin que lutilisateur puisse lui-mme modifier le positionnement du squelette en
dplaant chaque segment de la structure manuellement.
Les squelettes, lorsquils sont dploys dans des SWF imbriqus, ne sexcutent plus. Nous
prsentons donc aussi une solution pour limportation de squelettes en mode Excution,
lintrieur de documents Flash imbriqus.
Programmer un mouvement mcanique

Lanimation de squelettes partir de symboles permet de mettre en mouvement des structu-
res mcaniques qui font sarticuler des objets entre eux, et o aucun objet ne se mlange
jamais aux autres. Ce type de structure base de symboles convient lanimation de robots,
de cycles de marche mcaniques, de grues ou de systmes de navigation, entre autres.
Dans cet exemple, un squelette est dj en place dans le scnario. Il reprsente le corps dun
drode et se compose de 15 symboles chacun reli lautre par un segment, IKBone (voir
Figure 4.1). Chaque segment possde deux extrmits de jointure ou liaisons (IKJoint)
places respectivement en tte (headJoint) et en queue (tailJoint). Cest partir de ces
axes de rotation et de placement que nous dterminons les mouvements travers des inter-
polations cinmatiques (IKMover). La spcificit de ces interpolations est de rpercuter sur
chaque symbole faisant partie de la hirarchie, de nouvelles valeurs de positionnement,
selon les contraintes de mouvement dfinies dans lossature lors de sa construction.
Lensemble du squelette est, quant lui, inclus dans une armature gnrale (IKArmature)
dont on peut dterminer le mode daffichage avec une mthode (IKManager) et lafficher,
soit pour lanimation, soit pour lexcution.
Heure de cration et excution. La terminologie des modes daffichage des squelettes peut sur-
prendre. Nous observons en effet, dans lInspecteur de proprits, les deux options Heure de cra-
tion et Excution littralement traduites des termes anglais AuthorTime et RunTime. Comprenez,
en ces termes, Gestion de lanimation dans linterface auteur (AuthorTime, ou Heure de cration)
dune part et Gestion de lanimation la publication (RunTime, ou Excution) dautre part. Nous
devrions ainsi plutt parler de loption "Animation" pour le premier et d"Excution" pour le second.
Figure 4.1
Aperu
du document.
Exemples > ch4_ProgrammationDeSquelettes_1.fla
calque fond_mc, apparat un calque nomm squelette_Droide (voir Figure 4.2). Chaque
symbole possde un nom doccurrence qui dfinit clairement la partie du corps laquelle il
se rattache et le dsigne en tant quobjet structurel dun squelette (ikNode_bassin,
ikNode_torax, ikNode_cou, ikNode_brasD, ikNode_avantBrasD, ikNode_mainD, etc.).
De mme, chaque segment qui relie ces symboles entre eux possde son propre nom
doccurrence qui identifie la partie de lossature laquelle il est rattach et le dsigne en tant
quobjet structurel de liaison (ikBone_colonneBas, ikBone_colonneHaut, ikBone_epauleD,
LA PROGRAMMATION DE SQUELETTES 79
ikBone_humerusD, ikBone_cubitusD, etc.). travers ces identifiants, nous distinguons
bien les symboles (Nodes) de leurs jonctions (Bones). Le squelette, lui, possde galement
son propre nom doccurrence Squelette_Droide.
Figure 4.2
Aperu du
scnario de la
scne principale.
Dans le calque nomm actions, nous pouvons lire le code suivant :

//--------------------------- initialisation
import fl.ik.*;
//--------------------------- actions
// dfinition du squelette
IKManager.setStage(stage);
var squelette:IKArmature=IKManager.getArmatureByName("Squelette_Droide");
squelette.registerElements(stage);
var segment_colonneBas:IKJoint=squelette.rootJoint.getChildAt(0);
var segment_colonneHaut:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0);
var segment_epauleD:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
getChildAt(0);
var segment_humerusD:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
getChildAt(0).getChildAt(0);
var segment_cubitusD:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
getChildAt(0).getChildAt(0).getChildAt(0);
var segment_epauleG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
getChildAt(1);
var segment_humerusG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
var segment_cubitusG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
var segment_illiaqueG:IKJoint=squelette.rootJoint.getChildAt(1);
var segment_femurG:IKJoint=squelette.rootJoint.getChildAt(1).getChildAt(0);
var segment_tibiaG:IKJoint=squelette.rootJoint.getChildAt(1).getChildAt(0).
getChildAt(0);
var segment_illiaqueD:IKJoint=squelette.rootJoint.getChildAt(2);
var segment_femurD:IKJoint=squelette.rootJoint.getChildAt(2).getChildAt(0);
var segment_tibiaD:IKJoint=squelette.rootJoint.getChildAt(2).getChildAt(0).
getChildAt(0);
trace(squelette.rootJoint.getChildAt(0).getChildAt(0).name)
// animation du squelette
var mouvement1:IKMover= new

IKMover(segment_humerusD,segment_humerusD.position);
stage.addEventListener(Event.ENTER_FRAME, activerMouvement1);
function activerMouvement1(evt:Event) {
var arrivee:Point=new Point(mouseX,mouseY);
mouvement1.moveTo(arrivee);
}
Construire un squelette pour la programmation

Le langage
Avant de programmer lanimation dun squelette, il convient de sassurer quil est pralablement bien
structur. Tout dabord, nous utilisons la classe ik qui permet de dplacer les ttes de chaque seg-
ment. Il faut donc bien comprendre o se positionnent ces ttes et comment les placer judicieuse-
ment pour garantir la cohrence de lanimation. Pour construire une armature pour la
programmation, procdez comme suit :
1. Placez un certain nombre de symboles de type MovieClip sur un mme calque.
2. Repositionnez ventuellement les centres de transformation de chaque symbole (grce au petit
rond blanc que lon peut dplacer avec loutil de transformation libre). Cest en effet sur ces cen-
tres que les segments seront magntiss et cest leur emplacement qui dtermine la cohrence de
lanimation. Pour visualiser et dplacer un centre de transformation, utilisez loutil de transforma-
tion ou activez le raccourci Q, puis glisser-dposez le petit cercle blanc lemplacement souhait.
Puis, ractivez loutil de slection en appuyant sur la touche V. Pour faciliter le positionnement des
centres, pensez dsactiver au besoin les options daccrochage du menu Affichage.
3. Si les symboles qui composent votre sujet animer reposent sur des images bitmap (PSD, PNG,
JPEG, Gif), activez le lissage des bitmaps pour viter lapparition du crnelage lorsque les symboles
pivoteront (voir Chapitre 11).
4. Placez les segments sur les symboles. Dans la barre doutils, utilisez loutil Segment, en forme dos,
ou le raccourci X. Puis, cliquez sur le centre de transformation du symbole pre, glissez et relchez
le bouton de la souris sur le centre de transformation du symbole enfant.
5. Reproduisez la manipulation autant de fois que vous possdez de symboles relier entre eux, en
partant toujours de lextrmit situe en queue dun segment, puis poursuivez la hirarchie vers
les autres symboles.
6. Ajoutez un nom doccurrence pour chaque objet cr. Pour cela, cliquez sur les segments un
un, sur les ttes de segments une une, et sur le calque du squelette lui-mme, pour leur attri-
buer tous des noms doccurrence distinctifs. Flash en propose par dfaut (IkNode_1 pour les
ttes de segment, IkBoneName1 pour les segments et Squelette_1 pour le calque du sque-
lette). Vous pouvez conserver ces noms ou les adapter votre perception.
7. Activez ou non les contraintes de mouvement et de rotation. Pour ce faire, slectionnez chaque
segment avec loutil de slection (flche noire ou raccourci V), et depuis lInspecteur de proprits,
activez les diffrentes options de liaison (rotation, translationX et translationY). Atten-
tion, les valeurs indiquent une rotation relative. Pour faciliter les manipulations, orientez chaque
symbole sur laxe mdian de lespace de rotation que vous souhaitez lui rserver. En activant
loption de rotation, Flash distribue automatiquement une zone de 45 (paramtrable) de part et
dautre de la position courante de lobjet.
8. Le squelette doit tre activ pour le mode Excution. Pour cela, cliquez sur le calque du squelette.
Puis, dans lInspecteur de proprits, dans le menu Type de la catgorie Options, slectionnez
Excution.
Dfinition du squelette
Pour comprendre la manire dont nous interagissons en ActionScript avec les lments du
squelette, nous devons au pralable bien saisir la manire dont celui-ci a t construit. Dans
notre exemple, nous disposons dune armature compose de 15 segments. Certains dentre
eux sont rattachs au mme nud de liaison. Chaque branche qui se divise, dans la hirar-
chie descendante de larmature, nest pas considre comme un ensemble indpen-
dant, mais bien comme faisant partie dun mme ensemble. Ce qui distingue une division
par rapport une autre est son ordre dapparition dans la liste daffichage du squelette (ce qui
quivaut par dfaut lordre de cration des nuds), ou son nom doccurrence. Pour contr-
ler une branche plutt quune autre, nous ciblerons donc celle-ci par son ordre daffichage
(getChildAt(0)) ou par son nom doccurrence (getNodeByName("nomDuNoeud")).
Ainsi, avant de programmer des actions, il est souhaitable didentifier clairement la hirar-
chie dont nous disposons. Pour notre exemple, nous avons ralis un schma qui reprend
lordre de chaque segment de liaison tel quidentifi depuis la liste daffichage (voir
Figure 4.3) (nous prsentons la manire dobtenir lordre daffichage de chaque segment
dans la lecture du code qui suit).
Figure 4.3
Aperu
de la structure
du squelette.
Dans notre exemple nouveau, relevons que nous avons commenc la construction du
squelette partir du bassin, en progressant dabord vers le cou, puis la jambe gauche et enfin
vers la jambe droite. Le bassin se divise donc, ds le dpart, en trois branches distinctes que
nous pouvons identifier par la branche 0 (cou), la branche 1 (jambe gauche) et la branche 2
(jambe droite). Le cou, son tour, se divise en deux parties, une pour chaque bras.
Nous obtenons donc les subdivisions suivantes : avec la branche 0 qui correspond au bras droit,
et 1 qui correspond au bras gauche. Mais, dans le contexte hirarchique qui part du bassin, et se
prolonge par le thorax avant datteindre les paules, nous pouvons identifier la branche du bras
droit comme liaison 0.0.0 et celle du bras gauche comme liaison 0.0.1. Et ainsi de suite. En
somme, chaque progression vers un sous-niveau de larmature, nous ajoutons une valeur.
Cration de squelettes humains. Le livre Lart du bluff avec Flash CS4, de Chris Georgennes, aux
ditions Pearson, propose dajouter un segment laplomb du bassin afin de le relier au sol. Pour de
plus amples renseignements sur la construction de squelettes danimation, notamment humains,
reportez-vous cet ouvrage.
Le code affich est compos de trois parties. Dabord, nous dfinissons les classes et les
variables utiliser (initialisation). Ensuite, nous structurons les lments destins tre ani-
ms (identification des lments animables). Enfin, nous ralisons lanimation. Celle-ci se
caractrise dabord par le contrle du mouvement des liaisons du squelette (animation du
squelette), puis par la mise en relation de ces mouvements avec le pointeur travers la fonction.
Nous commenons par importer les classes requises pour lanimation du squelette :
//--------------------------- initialisation
import fl.ik.*;
La classe ik est utilise pour la gestion des mouvements de liaison du squelette. Lastris-
que sous-entend limportation des sous-classes IKArmature (dfinition du squelette),
IKBone (dfinition des segments qui contiennent les liaisons), IKEvent (dfinition des v-
nements pour les fonctions), IKJoint (dfinition des liaisons animer), IKManager
(dfinition du statut du squelette) et IKMover (dfinition des animations en tant que telles).
Puis, nous activons le squelette pour pouvoir, ensuite, en animer la composante :
//--------------------------- actions
var squelette:IKArmature=IKManager.getArmatureByName("Squelette_Droide");
Dans ces premires lignes, grce la sous-classe IKManager qui permet de statuer sur le
comportement du squelette, nous affectons le contrle du squelette la scne courante.
Mais cette instruction est optionnelle car lAPI de Flash le gre automatiquement :
Puis, nous convertissons le squelette de la scne en objet IKArmature programmable. Pour

cela, nous instancions un nouvel objet IKArmature en reprenant, en paramtre de la
mthode getArmatureByName(), le nom doccurrence du squelette que nous avons pu
identifier depuis lInspecteur de proprits directement sur la scne principale :
var squelette:IKArmature= IKManager.getArmatureByName("Squelette_Droide");
Pour cibler le squelette, nous utilisons ici getArmatureByName puisque nous en connais-
sons le nom. Mais nous aurions aussi bien pu le cibler par son ordre daffichage, dans la liste
daffichage des squelettes indpendante de la liste daffichage de la scne, avec la mthode
getArmatureAt().
Nous mmorisons ensuite toute lossature du squelette prsente sur la scne de sorte en
autoriser le contrle avec la mthode registerElements() :
Une fois que nous avons instanci la structure globale, nous pouvons prsent entrer dans
les maillons du squelette et dclarer chacune des liaisons dont nous souhaitons pouvoir
contrler la position :
Pour dclarer la premire liaison, nous crons un nouvel objet IKJoint. Nous ciblons le
premier nud de liaison en reprenant dabord le nom du squelette vhicul par la variable
squelette, puis, ciblons le nud racine avec rootJoint, cest--dire le centre de transforma-
tion du bassin bas, puis, la premire branche qui remonte la colonne vertbrale avec get-
ChildAt(0) (voir Figure 4.4).
Pour vrifier que lordre dapparition choisi en paramtre correspond bien lobjet que
nous souhaitons rendre disponible sur la scne, nous utilisons une action trace en reprenant
le ciblage auquel nous associons la proprit .name pour connatre le nom doccurrence de
lobjet :
trace(squelette.rootJoint.getChildAt(0).getChildAt(0).name)
Nous obtenons, dans la fentre de sortie, la rponse suivante :

Segment_cou
Nous reproduisons ensuite le principe pour tous les segments, afin den permettre lanimation :
var segment_colonneHaut:IKJoint=squelette.rootJoint.getChildAt(0).
getChildAt(0);
var segment_epauleD:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
getChildAt(0);
var segment_humerusD:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
var segment_cubitusD:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
var segment_epauleG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
getChildAt(1);
var segment_humerusG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
var segment_cubitusG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
var segment_illiaqueG:IKJoint=squelette.rootJoint.getChildAt(1);
var segment_femurG:IKJoint=squelette.rootJoint.getChildAt(1).getChildAt(0);
var segment_tibiaG:IKJoint=squelette.rootJoint.getChildAt(1).getChildAt(0).
getChildAt(0);
var segment_illiaqueD:IKJoint=squelette.rootJoint.getChildAt(2);
var segment_femurD:IKJoint=squelette.rootJoint.getChildAt(2).getChildAt(0);
var segment_tibiaD:IKJoint=squelette.rootJoint.getChildAt(2).getChildAt(0)
.getChildAt(0);
Observons que pour atteindre un maillon enfant, nous utilisons la technique de ciblage
point en ajoutant, pour chaque nouveau segment enfant, la mthode getChildAt() avec le
numro qui correspond lordre daffichage de lenfant cibl, conformment au schma

observ plus haut.
Il est possible de cibler uniquement un segment partir de son identifiant, comme suit :
var segment1:IKBone=squelette.getBoneByName("ikBoneName1");
Ou partir de son ordre daffichage :
var segment1:IKBone=squelette.getBoneByName("ikBoneName1");
Une fois les liaisons dfinies, il ne reste plus qu animer.
Animer le squelette
La proprit rotation ntant pas autorise en criture par la classe IK, pour animer une liaison,
nous dfinissons donc un nouvel objet de transition qui dplace une liaison dun point donn en
X et Y un autre point en X et Y. Pour mieux comprendre le procd, simplifions notre
exemple en nous concentrant dabord sur le fonctionnement dune animation de liaison :
var arrivee:Point=new Point(0,0);
Nous dclarons ici, en premier, lobjet IKMover qui constitue le moteur de lanimation et
redistribue, pour chaque segment li la chane courante, les valeurs ncessaires leur
ventuel repositionnement :
var mouvement1:IKMover= new IKMover(segment_humerusD,segment_humerusD.position);
Lanimation appelle deux paramtres qui sont respectivement lobjet animer (en loccur-
rence, la liaison segment_humerusD dfinie prcdemment), et les coordonnes du point de
dpart de lanimation de cet objet, partir dune valeur de type Point(X,Y).
Dfinition du constructeur Point(). Une valeur de type Point(X,Y) vhicule, dans une seule
variable, les proprits x et y de lobjet auquel elle est rattache. Ce constructeur peut, pour informa-
tion, tre appel par les classes suivantes : BitmapData, DisplayObject, DisplayObjectContainer,
DisplacementMapFilter, NativeWindow, Matrix ou Rectangle.
Ainsi, nous pouvons dterminer la valeur de position de dpart travers une nouvelle variable
ou en reprenant la position courante de lobjet animer. Avec une variable, nous obtenons :
var depart:Point=new Point(100,50);
var mouvement1:IKMover= new IKMover(segment_humerusD,depart);
En reprenant directement la proprit position de lobjet courant, nous obtenons :

Nous rcuprons directement la position courante de lobjet animer. Puis, nous dfinissons le
point darrive :
var arrivee:Point=new Point(0,0);
Et enfin, nous activons lanimation :
Lanimation reprend lobjet IKMover initi plus haut et utilise la mthode moveTo afin de
crer une interpolation entre le point de dpart dfini dans lobjet IKMover et le point darrive
pass ici en paramtre.
Dans le fichier exemple de cette section, linterpolation que nous venons de dcrire, est
place dans une fonction associe un gestionnaire dvnements de type
Event.ENTER_FRAME afin que le calcul de la position puisse tre redfini perptuellement.
Nous plaons, en paramtre du point darrive, les valeurs qui correspondent la position
courante du pointeur avec mouseX et mouseY. Nous obtenons :
var arrivee:Point=new Point(mouseX,mouseY);
}
Pour optimiser encore plus lanimation, vous pouvez ventuellement typer la variable arrivee
en dehors de la fonction, et la mettre jour seulement dans la fonction, comme suit :
var arrivee:Point;
arrivee=new Point(mouseX,mouseY);
}
En modifiant le paramtre qui appelle le nom de lobjet animer, dans lobjet IKMover, vous
pouvez animer le squelette partir de chacun des axes de rotation (voir Figures 4.4 et 4.5).
retenir
La classe ik permet danimer la position des liaisons tablies entre plusieurs segments dun mme
squelette.
Pour programmer lanimation dun squelette, vous devez au pralable construire le squelette dans
linterface auteur de Flash en activant laffichage pour lexcution depuis lInspecteur de proprits.
Pour faciliter la gestion de larticulation des segments, vous devez placer judicieusement les centres
de transformation de chaque symbole avant la cration du squelette.
Pour faciliter la dfinition des liaisons animer, vous devez clairement identifier lordre daffichage
de ces lments.
Il est possible dassocier le mouvement dune liaison la position courante du pointeur.
Figure 4.4
Aperu de
lanimation
avec lobjet
segment_tibiaD.
Figure 4.5
Aperu de
lanimation
avec lobjet
segment_avant-
BrasG.
Programmer un mouvement organique

De la mme manire que nous animons des squelettes de symboles, nous pouvons aussi
programmer lanimation de squelettes pour des formes graphiques vectorielles.
Lutilisation des squelettes avec les formes vectorielles permet de raliser, par exemple, des
animations de "lipsync" (mouvement de bouche), des animations vgtales, organiques, liquides
ou htres (radiosit, vapeurs, nuages), entre autres, mais pas de formes transparentes.
Dans cette section, nous utilisons lanimation dune plante qui se courbe au passage dune
abeille. Nous utilisons ici les paramtres de la mthode moveTo pour magntiser la dernire
liaison de la plante sur labscisse du symbole abeille (voir Figure 4.6). Labeille, elle, est
anime laide de la classe Greensock TweenMax.
Figure 4.6
Aperu
du document.
Exemples > ch4_programmationDeSquelettes_2.fla
Dans la scne de notre document, nous pouvons voir, au-dessus du calque fond_mc, un
squelette attach une forme graphique nomm Squelette_Herbe. Au premier plan de
cette armature, apparaissent quelques feuilles et un pot pour la dcoration, puis un symbole
de type MovieClip nomm abeille_mc (voir Figure 4.7).
Figure 4.7
Aperu du
scnario de la
scne principale.
Dans le calque des actions, nous pouvons lire le code suivant :

//--------------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
//
import fl.ik.*;
//--------------------------- actions
var squelette:IKArmature=IKManager.getArmatureByName("Squelette_Herbe");
var segment_colonneBas:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0)
.getChildAt(0).getChildAt(0).getChildAt(0).getChildAt(0).getChildAt(0).

IKMover(segment_colonneBas,segment_colonneBas.position);
var arrivee:Point=new Point(abeille_mc.x,abeille_mc.y);
}
var tweenAbeille:TweenMax;
tweenAbeille=TweenMax.to(abeille_mc,5,{x:900,delay:2,ease:Strong.easeInOut});
tweenAbeille.addEventListener(TweenEvent.COMPLETE,suiteAnimation);
function suiteAnimation(evt:TweenEvent) {
tweenAbeille=TweenMax.to(abeille_mc,8,{x:300,delay:0,ease:Back.easeInOut});
}
Comme dans lexemple prcdent, nous devons commencer par identifier lordre daffi-
chage des segments du squelette. Nous procdons, de mme, en reprant le nom des occur-
rences depuis lInspecteur de proprits et en dterminant le nombre de liaisons disponibles
ainsi que la prsence ventuelle de subdivisions multiples (voir Figure 4.8).
Figure 4.8
Aperu de la
structure du
squelette nomm
Squelette_Herbe.
Notre squelette ne comporte pas de subdivision. Il compte dix liaisons. Son nom doccur-
rence est Squelette_Herbe. Les contraintes de rotation des liaisons ont t actives depuis
lInspecteur de proprits.
Ces contraintes ont plus particulirement t marques sur la base de lossature afin de ren-
forcer leffet denracinement et dinertie pour la partie proche du pot, et donner un effet de
pousse lgre au sommet de la tige. Des contraintes identiques sur toute la longueur
auraient donn une impression de structure entirement molle ou totalement rigide, selon
les valeurs dangle enregistres.
Dans les actions, nous importons dabord les classes requises :
//--------------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
//
import fl.ik.*;
En plus de la classe ik utilise pour la cinmatique inverse, nous importons la classe

TweenMax (gs) pour animer le dplacement de labeille.
Plus loin, nous dfinissons le squelette avec IKManager et IKAmrature, comme vu dans la
section prcdente.
//--------------------------- actions
Puis, comme nous lavons vu prcdemment , nous dfinissons le segment animer:

Ici, le segment que nous ciblons est le dernier de la chane. Elle en compte dix. Nous rptons
donc dix fois le ciblage progressif jusqu atteindre notre cible.
Puis, nous animons lobjet en liant, cette fois-ci, ses coordonnes celles de labeille, par
lintermdiaire dune transition TweenMax :

}
Lorsque labeille se dplacera partir de sa position x actuelle (infrieure 0) vers la posi-

tion dfinie dans la transition, soit 900 px, la fonction associe la classe Event et lv-
nement ENTER_FRAME va permettre de repositionner le dernier segment selon la position x
de labeille en mouvement. Les segments tant relis, et la mthode MoveTo rpercutant les
valeurs de positionnement vers les autres liaisons en fonction de leurs contraintes respectives,
lherbe haute va se courber pour suivre labeille dans son dplacement.
Nous terminons avec un enchanement de transition :
}
Ici, une seconde interpolation succde la premire, grce lvnement COMPLETE associ
la classe TweenEvent. Cette transition fait revenir, en marche arrire, labeille, de sorte
quelle se place juste au-dessus de la plante. La fonction activerMouvement1 qui demeure
toujours active permet la plante anime de continuer de suivre labeille jusqu son point
arrt. Tout nouveau mouvement que fera labeille par la suite provoquera un nouveau
mouvement de lherbe (voir Figure 4.9 4.12).
Figure 4.9
Aperu
de lanimation
organique (1/4).
Figure 4.10
Aperu
de lanimation
organique (2/4).
Figure 4.11
Aperu
de lanimation
organique (3/4).
Figure 4.12
Aperu
de lanimation
organique (4/4).
retenir
Il est possible de programmer lanimation de formes vectorielles avec la classe ik.
Une liaison dun squelette de forme vectorielle peut suivre un objet en mouvement.
Il est possible de combiner des animations de type TweenMax avec des transitions de la classe IKMover.
Basculer du mode animation programme au mode

excution
La programmation dune animation de squelette requiert, pour le squelette actif de la scne
courante, que le menu Type de la catgorie Options soit dfini sur Excution. Mais, une fois
que lanimation est programme, il est possible de rendre la main lutilisateur pour lui
autoriser de dplacer lui-mme les segments des objets anims.
Dans cette section, nous prsentons comment basculer du mode danimation programme
au mode 100 % interactif de laffichage de larmature, avec la classe IKManager (voir
Figure 4.13).
Figure 4.13
Lutilisateur prend
le contrle du
positionnement
des liaisons.
Le document que nous utilisons prsente la structure suivante : dans la scne, nous retrouvons
les mmes lments que dans la section prcdente.
Dans le calque des actions, nous pouvons lire le code suivant, bas sur lexemple prcdent,
mais nous y avons ajout les commandes ncessaires au basculement de la proprit :
//--------------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
//
import fl.ik.*;
//--------------------------- actions

}
tweenAbeille.addEventListener(TweenEvent.COMPLETE,suiteAnimation2);
}
// interrompre lanimation et basculer en mode interactif
var nombreDeBoucle:Number=1;
var boucle:Timer=new Timer(dureeBoucle,nombreDeBoucle);
function suiteAnimation2(evt:TweenEvent) {
IKManager.trackAllArmatures(true);
boucle.start();
}
stage.removeEventListener(Event.ENTER_FRAME, activerMouvement1);
}
Pour dtecter la fin de lanimation, nous utilisons un nouvel couteur attach lobjet
anim, en loccurrence, il sagit de la seconde animation de labeille dfinie dans la fonction
suiteAnimation1. Lorsque cette animation est acheve, nous programmons lexcution
dune nouvelle fonction suiteAnimation2. Dans cette fonction, trois instructions sont
ajoutes :
function suiteAnimation2(evt:TweenEvent) {
boucle.start();
}
La premire reprend la classe IKManager employe au dbut du code pour spcifier, tra-
vers la proprit trackAllArmatures, que le dplacement de toute larmature par lutilisa-
teur est dsormais actif (true), selon les mmes contraintes de rotation, dfinies
initialement depuis lInspecteur de proprits, que pour lanimation programme.
Les deux suivantes activent dabord un chronomtre de type Timer dfini plus haut. Ces ins-
tructions associent, ce mme chronomtre, une nouvelle fonction qui interrompt lanima-
tion de la liaison activerMouvement1 dont la position est rattache celle de labeille,
grce la mthode removeEventListener :
stage.removeEventListener(Event.ENTER_FRAME, activerMouvement1);
}
Notez que nous aurions pu interrompre la fonction directement dans la fonction

suiteAnimation2, avec la mme mthode removeEventListener. Mais, en procdant
de la sorte, lanimation peut rendre un peu brutal larrt du positionnement des lments
de liaison. En effet, lanimation est gre par la classe IKMover et le moteur utilise un
repositionnement qui comporte un algorithme dacclration. Lanimation aurait alors t
interrompue au moment o le TweenMax sachve, mme si linterpolation IKMover
ntait pas termine (du fait de lamortissement). Afin que lanimation sarrte de manire
plus naturelle, nous avons recours un Timer. Ceci laissera le temps lanimation de
labeille de terminer leffet damortissement de son arrt. Ensuite lutilisateur pourra
prendre la main.
retenir
Vous pouvez, lissue dune animation programme, rendre la main lutilisateur, pour lui permettre
de dplacer lui-mme les liaisons du squelette de lobjet anim.
Les transitions IKMover utilisent un repositionnement qui comporte un algorithme dacclration et
obligent, pour les interrompre, dutiliser un chronomtre de type Timer afin dviter que la rupture
ne soit trop sche.
Pour basculer dun mode dexcution un autre, nous utilisons la classe IKManager.
Activer un squelette charg dans un SWF

Lorsquun document SWF qui comporte un squelette en mode Excution est import dans
un nouveau document SWF, le squelette nest pas actif dans linterface de ce nouveau docu-
ment. Cela sexplique par le fait que seul le document qui contient le squelette est compil
avec les objets daffichages qui grent ce squelette. Mme, en construisant un nouveau
squelette dans le fichier appelant, le squelette import ne ragit toujours pas. Il en rsulte
que tout document, dpourvu dune action spcifique sur limportation des squelettes, ne
peut excuter le squelette contenu dans tout document import. Il est donc ncessaire de
reconfigurer le document appelant, de sorte quil puisse excuter correctement le fichier
appel.
Les noms du fichier appelant. Suite un bogue du moteur Flash, il est possible que vous ne
parveniez pas importer un document si vous placez des caractres non ascii dans le nom du
fichier. Utilisez de prfrence des lettres colles, sans sparateur tiret -). Pour sparer les mots, pr-
frez le underscore ou tiret du bas (_). Les tirets peuvent ne pas tre admis dans certaines configu-
rations.
Dans cette section, nous importons un document SWF contenant un squelette de forme,
publi en mode Excution et le ractivons pour lexcuter dans ce premier document.

Exemples > ch4_programmationDeSquelettes_4a.fla
Le document que nous utilisons se nomme "ch4ProgrammationDeSquelettes4.fla". Dans la

scne, rien ne figure sinon le calque fond_mc (voir Figure 4.14).
Figure 4.14
Aperu du
scnario de la
scne principale.
Dans le calque des actions, nous pouvons lire le code suivant :

//---------------------- initialisation
import fl.ik.*;
//---------------------- chargement
var chemin:URLRequest = new URLRequest("ch4-programmationDeSquelettes-4a.swf");
var chargeur:Loader = new Loader();
chargeur.load(chemin);
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, afficher);
var squelette:IKArmature;
function afficher(Evt:Event){
addChild(chargeur);
//
squelette = IKManager.getArmatureByName("Squelette_Herbe");
}
Dabord, nous importons la classe ik pour reconstituer le squelette :

//---------------------- initialisation
import fl.ik.*;
Puis, nous dfinissons un nouveau chargeur afin dimporter le fichier SWF contenant le
squelette :
//---------------------- chargement
var chemin:URLRequest = new URLRequest("ch4-programmationDeSquelettes-4a.swf");
Lorsque le chargement du document est termin, nous commenons par dfinir un espace
mmoire pour la cration dune armature :
var squelette:IKArmature;
Puis, nous excutons la fonction qui affiche le contenu et ractive larmature du document
import :
addChild(chargeur);
//
squelette = IKManager.getArmatureByName("Squelette_Herbe");
}
la suite de linstruction addChild, la fonction place laffectation du moteur de squelette

sur la scne courante avec setStage(). Linstruction getArmatureByName() permet de
pointer sur le squelette en utilisant le nom doccurrence utilis dans le SWF import.
Puis, elle mmorise les proprits du squelette sur la scne globale avec register-
Elements(stage) et lactive avec trackAllArmatures pass sur true. Cest la dernire
instruction qui permet de ractiver le mode daffichage Excution.
Cette fois, en publiant le document SWF, nous pouvons constater que le document import
est activ. Il est donc possible de dplacer les liaisons avec le pointeur et la plante prserve
les contraintes dfinies dans le document import (voir Figure 4.15).
Figure 4.15
Aperu du SWF
import et
excut.
retenir
Il est possible de ractiver un squelette dsactiv automatiquement, aprs lavoir import dans un
nouveau document SWF. Pour cela, vous devez ractiver le squelette par programmation dans le
document appelant, afin de rimplanter le moteur dexcution du squelette exclusif lAPI de Flash,
lors de la publication du nouveau document.
Synthse
Dans ce chapitre, vous avez appris programmer des animations partir de squelettes crs
manuellement dans linterface auteur de Flash. Vous avez appris crer des animations
mcaniques et organiques en exploitant des structures base de symboles ou de formes.
Vous avez galement appris programmer les animations de squelette en utilisant des objets
et/ou le pointeur de la souris comme guide de mouvement. Vous savez enfin activer le mode
dexcution une fois lanimation acheve, et permettre lutilisateur de reprendre la main
sur larmature la fin dune interpolation. Vous tes en mesure prsent de raliser des ani-
mations de structure complexes et encore une fois dynamiques.
Les galeries dimages

5
Introduction
Pour grer une galerie dimages, vous pouvez naturellement la travailler dans le scnario et
jouer lanimation, mais il est prfrable dexternaliser les contenus. Dabord, vous optimi-
sez confortablement le poids de lapplication. Ensuite, vous en simplifiez la maintenance.
Dans ce contexte de galerie dimages externalises, il suffit alors de remplacer les visuels
imports par dautres du mme nom, pour automatiquement mettre jour les images de
lanimation, sans avoir rditer le Flash.
Pour construire une galerie dimages, nous devons dabord apprendre charger ces images
progressivement, puis, organiser leur affichage en les appelant directement un rpertoire
externe, et en y associant des informations textuelles, telles que des titres ou des lgendes.
Pour amliorer la gestion des contenus, nous verrons quil peut tre intressant de centrali-
ser ces informations dans un fichier XML de sorte simplifier la maintenance du projet une
fois celui-ci publi.
Nous aborderons aussi la manire de rendre ces dveloppements plus pertinents, dautoriser
linteraction sur chaque objet gnr dynamiquement et dassocier chaque image, un lien,
une fonctionnalit de zoom ou toute autre action.
La dtection de bogues ventuels pouvant survenir suite une erreur de chargement ou
dexcution du programme, nous traiterons la manire de placer des contrles afin dra-
diquer les risques de plantage du programme. Enfin, nous voquerons lintgration dyna-
mique des donnes que vous pourriez extraire dune base de type MySQL ou de tout
autre systme dinformations, grce vos connaissances acquises sur la gestion dun
flux XML.
Afficher des images externalises et alatoires

Dans cette premire section, nous abordons le chargement dimages externalises. Cela
nous permet dallger grandement le poids des documents SWF que nous crons. Nous
abordons aussi la gestion de laffichage dune image avec le paramtre random de sorte que
lanimation publie affiche un visuel ou un autre et ce, de manire entirement alatoire
(voir Figure 5.1).
Figure 5.1
Un des aperus
du document la
publication.
Exemples > ch5_galeriesImages_1.fla
Dans la scne du document "ch5_galerieImages_1.fla", au-dessus du calque fond_mc, appa-

rat un calque masqu nomm cible_mc (voir Figure 5.2). Ce calque affiche un symbole de
type MovieClip du mme nom. Ce symbole est vide et sert de conteneur pour importer les
images appeles dynamiquement par ActionScript.
Figure 5.2
Aperu du
scnario de la
scne principale.

// CHARGEMENT
var chargeurFond:Loader = new Loader();
var valeurAleatoire:Number=Math.round(Math.random()*2);
var urlFond:URLRequest=new URLRequest("images/coteBretonne/photo"+valeur
Aleatoire+".jpg");
chargeurFond.load(urlFond);
// COMPLETE
chargeurFond.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET);
function chargementCOMPLET(evt:Event) {
cible_mc.addChild(chargeurFond);
}
Dabord, une srie de variables initialise le chargement :

La variable chargeurFond rserve lemplacement mmoire pour la dfinition dun char-

geur (:Loader). Le signe gal (=) affecte une valeur qui dsigne, ici, linstanciation dun
nouvel objet Loader (= new Loader()).
LES GALERIES DIMAGES 101

Plus loin, une variable de type nombre (valeurAleatoire) dfinit une valeur alatoire
comprise entre 0 et 2 inclus. Celle-ci est obtenue grce la classe Math.random(). La
classe Math.round() utilise galement permet darrondir la valeur obtenue un chif-
fre entier. Pour combiner les deux mthodes, nous imbriquons la premire dans la
seconde :
Cest cette valeur que nous rcuprons plus tard et qui dterminera limage charger.
Gnrer une valeur alatoire
Le langage
Pour gnrer une valeur alatoire, nous utilisons la classe Math.random() multiplie par une valeur.
Cette valeur correspond au seuil limite (suprieur) du nombre que lon souhaite obtenir. Par exem-
ple, Math.random()*5 renvoie une valeur comprise entre 0 et 5.
Mais attention, la valeur obtenue, mme multiplie, reste dcimale, car en ralit, Math.random()
gnre une valeur comprise entre 0,00... et 0,9999... En la multipliant, nous agrandissons donc uni-
quement les valeurs dcimales en dautres valeurs dcimales, mais une chelle plus grande. Par
exemple, si lon considre :
Math.random()*5;
et que la mthode Math.random() renvoie 0.7. Alors, nous obtenons :
0,7 x5 =3,5
Arrondir une valeur

Pour obtenir un chiffre entier, nous utilisons lune des mthodes suivantes :
Pour arrondir lentier le plus proche, on utilise Math.round() : Math.round(Math.random()*5).
Pour arrondir lentier suprieur le plus proche, on utilise Math.ceil() : Math.ceil(Math.ran-
dom()*5).
Pour arrondir lentier infrieur le plus proche, on utilise Math.floor() : Math.floor(Math.ran-
dom()*5).
Ainsi, la mthode Math.round, en dessous de 0.5, arrondit 0, au dessus de 0.5, arrondit 1. La
mthode Math.ceil, de 0.01 0.9, arrondit 1, et la mthode Math.floor, de 0.01 0.999,
arrondit 0 Testez par exemple ceci pour identifier clairement le rsultat obtenu par chacune des
trois mthodes :
trace("floor")
for (var i:Number=0;i<20;i++){
trace(Math.floor(Math.random()*2));
}
trace("round")
trace(Math.round(Math.random()*2));
}
trace("ceil")
trace(Math.ceil(Math.random()*2));
}
Une fois la valeur alatoire dfinie, une autre variable, urlFond, stocke le chemin daccs
limage. Limage est localise dans un dossier nomm "coteBretonne" situ dans le rper-
toire "images" qui accompagne les documents Flash des exemples du livre :
var urlFond:URLRequest=new URLRequest("images/coteBretonne/
photo"+valeurAleatoire+".jpg");
Le nom de la photo appele est construit de manire dynamique. Nous concatnons la
vole notre valeur alatoire entre la racine du nom et son extension (racine + valeur-
Aleatoire + extension). Selon la valeur obtenue par la variable, le chemin enregistr pour le
chargement de limage sera "images/coteBretonne/photo0.jpg", "images/coteBretonne/
photo1.jpg" ou "images/coteBretonne/photo2.jpg".
Dfinir les chemins pour les requtes externes. Lorsque vous appelez un contenu situ
lextrieur dun document Flash (une image, un autre fichier SWF, un flux XML, un son, une vido,
etc., sauf pour les classes .as qui sont compiles la publication), il est important de dterminer
lemplacement du contenu appel par rapport lemplacement de la page HTML qui excute le
fichier Flash, et non par rapport au fichier Flash lui-mme. En effet, si le fichier Flash est enregistr
dans un emplacement diffrent de la page qui le contient, le chemin se rfrant ce document
Flash risque dtre invalide. Considrez toujours que la page HTML qui excute le Flash modifie de
ce fait la position relative de lanimation Flash, en la dfinissant par rapport la page HTML elle-
mme.
Une fois le chemin dfini pour le chargement de limage, nous indiquons au chargeur
(chargeurFond), laide de la mthode load, de charger cette image (urlFond).
Plus loin, un couteur est attach au chargeur chargeurFond et appelle une fonction :
// COMPLETE
}
Lcouteur est attach lobjet LoaderInfo du chargeur et non directement au chargeur lui-
mme. La proprit contentLoaderInfo appartient en effet lobjet Loader et permet dy
lire des informations relatives la progression du chargement. Pour ajouter des instructions
daffichage suite au chargement, nous devons donc introduire cet objet dans le gestionnaire
dvnements, ce qui donne :
chargeurFond.contentLoaderInfo.addEventListener
(Event.COMPLETE,chargementCOMPLET);
Lorsque le chargement est complet (Event.COMPLETE), cest--dire lorsque limage appele

avec la mthode load est entirement charge sur le poste client, lcouteur excute une
fonction que nous avons ici nomme chargementCOMPLET :
}

Cette fonction affiche lobjet charg directement dans le MovieClip nomm cible_mc qui
sert de conteneur (ou lajoute comme enfant la liste daffichage), laide de la mthode
addChild() :
Cible_mc.addChild(chargeurFond);
En affichant llment charg dans un symbole de type MovieClip, nous lui faisons bnfi-
cier des proprits affrentes aux MovieClip. Lobjet import peut donc, par ce conteneur,
tre anim et contrl par ActionScript (position, effets de couleur, affichage, filtres, animations,
etc.).
Doit-on toujours placer un couteur sur un chargeur pour activer laffichage dun
contenu charg dynamiquement ? Il est possible, lorsque vous ralisez le document localement,
de vous passer de lcouteur attach au chargeur et dinvoquer directement laffichage (addChild)
suite au chargement avec la mthode load. Le fichier plac localement est dj prsent sur votre
poste et ne requiert pas, dans ce cas, dtre pralablement tlcharg avant dtre affich. Il est affi-
ch directement, car il est dj disponible. Mais, pour tout contenu destin une publication en
ligne, pour un site donc, il convient de passer par lcouteur qui assurera laffichage seulement une
fois le contenu entirement charg. Le cas chant, les contenus appels dynamiquement seraient
considrs par le lecteur Flash comme inexistants au moment de lexcution des scripts attachs ces
objets, ce qui pourrait nuire la bonne excution de votre programme. Pour placer une action alter-
native en cas de problme li au chargement, consultez aussi la section consacre la gestion des
erreurs au chargement, en fin de chapitre.
retenir
Pour optimiser le poids dun document qui affiche des images de grande taille, il est souhaitable
dexternaliser ces images laide dun chargeur.
Les paramtres du chargeur permettent de dfinir de manire dynamique les contenus charger.
Nous pouvons de ce fait avoir recours une variable alatoire pour construire le chemin de char-
gement.
Pour appliquer une valeur alatoire, nous utilisons la classe Math.random et nous arrondissons un
entier la valeur dcimale obtenue avec les classes Math.round, Math.ceil ou Math.floor.
Les chemins des lments chargs dynamiquement sont relatifs aux pages qui contiennent lanimation
Flash.
Il convient dutiliser un couteur pour attendre la fin du chargement dun contenu avant de lafficher,
dfaut de quoi, lapplication dveloppe pourrait ne pas fonctionner normalement.
Raliser une jauge de chargement

Lorsque le contenu charg dynamiquement est lourd (plus de 100 Ko), il est souhaitable de
signaler la progression du chargement. Pour ce faire, nous utilisons une jauge signaltique
afin davertir lutilisateur que labsence daffichage ne dsigne pas un bogue ou une erreur
de sa part, mais quil faut attendre la fin du chargement pour en visualiser le contenu.
Dans cette section, nous ajoutons donc une jauge de progression au chargement mis en
uvre la section prcdente (voir Figure 5.3).
Figure 5.3
Aperu
de la jauge de
chargement.
Dans la scne du document "ch5_galeriesImages_2.fla", au-dessus du calque fond_mc,

apparat un calque masqu nomm cible_mc. Ce calque affiche le mme symbole
cible_mc vide, observ prcdemment. Au-dessus du masque figure un autre calque,
chargement_mc, qui affiche une jauge de progression (voir Figure 5.4). lintrieur de ce
nouveau symbole, nous distinguons, clairement rpartis vers les calques (voir Figure 5.5),
un autre symbole, barre_mc, qui contient une forme graphique rectangulaire et dont le cen-
tre gomtrique est positionn gauche (pour que lobjet se dforme vers la droite, dans le
sens de la lecture de la progression) (voir Figure 5.6), ainsi quun texte dynamique nomm
pourcentage_txt. Les autres lments sont purement figuratifs.
Figure 5.4
Aperu du
scnario de la
scne principale.

Figure 5.5
Aperu du scnario
du symbole
chargement_mc.
Figure 5.6
Aperu du symbole
barre_mc dont le
centre gomtrique
est situ gauche.

// CHARGEMENT
var urlFond:URLRequest=new URLRequest("images/coteBretonne/photo"+valeur
Aleatoire+".jpg");
// PROGRESSION
chargeurFond.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
chargementENCOURS);
function chargementENCOURS(evt:ProgressEvent) {
var valeurPourcentage:Number = (evt.currentTarget.bytesLoaded / evt.current
Target.bytesTotal);
chargement_mc.barre_mc.scaleX=valeurPourcentage;
chargement_mc.pourcentage_txt.text=(Math.ceil(valeurPourcentage*100))+"%";
}
// COMPLETE
chargement_mc.visible=false;
}
Comme la section prcdente, nous retrouvons dabord les variables qui activent le char-
gement. Ensuite, deux couteurs sont attachs la mme proprit contentLoaderInfo.
Le premier couteur excute une fonction durant la progression du chargement (PROGRESS),
alors que le second en excute une autre une fois ce chargement termin (COMPLETE). Revenons
sur le premier couteur :
chargeurFond.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
chargementENCOURS);
Dans le gestionnaire dvnements, nous pouvons lire ProgressEvent et non simplement

Event. Seule la classe ProgressEvent permet de disposer de lvnement PROGRESS qui
dsigne la priode durant laquelle le chargement seffectue et autorise, seul, lexcution
dune fonction pendant ce chargement.
La fonction appele pendant le chargement est chargementENCOURS :

Target.bytesTotal);
}
Dans cette fonction, nous commenons par dfinir une variable de type nombre qui enregis-
tre une valeur correspondant la progression du chargement. Cette valeur dcimale est
comprise entre 0 (0 % de progression) et 1 (100 % de progression). Elle est dtermine en
calculant, pour lobjet en cours de chargement (evt.currentTarget), le nombre de bytes
dj chargs divis par le nombre de bytes total charger.
Par exemple, si le fichier pse 60 Ko (61 440 bytes) et que 15 Ko sont actuellement chargs
(15 360 bytes), le pourcentage du chargement effectu est de 15 630/61 440, soit 0,25
(ou 25 %). Lorsque le chargement sera termin, la valeur sera de 61 440/61 440, soit 1.
Suite cela, la variable valeurPourcentage est utilise pour dfinir lchelle de dformation en
X sur lobjet barre_mc qui reprsente la jauge de progression du symbole chargement_mc :
Plus loin, dans la mme fonction, une autre instruction utilise cette valeur pour dfinir le
texte afficher dans le champ dynamique nomm pourcentage_txt, situ lintrieur du
symbole chargement_mc:
Le texte rsulte de la variable valeurPourcentage augmente et arrondie. Nous concat-

nons, avec le signe plus (+), le caractre pourcentage (%) pour que le chiffre obtenu soit
accompagn lcran de cette unit de valeur.
Lorsque le chargement atteint la valeur de 100, le texte affiche donc 100 %, le symbole
barre_mc retrouve son chelle initiale et la fonction chargementCOMPLET est alors excute :
// COMPLETE
}
Dans cette fonction, en plus dafficher le contenu charg avec addChild, nous rendons invi-
sible le symbole chargement_mc.
En publiant le document localement sur votre ordinateur, vous ne visualisez probablement
pas la progression du chargement, car le fichier appel est dj prsent sur votre poste et ne
requiert donc aucune attente pour tre affich. Pour mieux vous rendre compte de leffica-
cit de la jauge de chargement, dans le menu Affichage situ en haut de votre cran et dis-
ponible lors de la publication du document (Cmd+Entre pour Mac ou Ctrl+Entre pour
Windows), activez loption Simuler le tlchargement. Si le rglage de la bande passante est

correctement configur, vous pourrez alors visualiser la progression du chargement comme
si le fichier tait en ligne.
retenir
Pour crer une jauge de chargement, nous utilisons contentLoaderInfo, une proprit spcifique
associe la classe ProgressEvent.
La valeur obtenue pour dterminer la progression du chargement peut tre distribue travers dif-
frentes proprits pour redimensionner un symbole (jauge) ou modifier la valeur dun texte (pour-
centage), par exemple.
Lorsque le chargement est termin, nous affichons le contenu charg et nous masquons la jauge de
chargement.
Pour animer lchelle du symbole qui sert de jauge, il faut bien dfinir lemplacement de son centre
gomtrique de manire ltirer correctement.
Raliser une galerie dimages externalises

Pour raliser une galerie dimages laide dActionScript, nous utilisons un chargeur.
chaque itration appele en activant un bouton suivant ou retour, nous remplaons limage
charge par une nouvelle. Pour que la gestion de ce dispositif reste simple, nous organisons
les fichiers et leurs noms de sorte que le processus puisse tre facilement automatis. Ainsi,
si nous rassemblons les images de la galerie dans un mme rpertoire, et que nous nommons
ces images avec des numros correspondant respectivement leur ordre dapparition, et en
commenant par zro, il nous suffit alors dappeler chaque image en incrmentant ou en dimi-
nuant une valeur passe en paramtre de lURL dun chargeur de contenu. Nous pouvons aussi
utiliser cette valeur pour renseigner linternaute sur le numro dimage en cours daffichage,
par exemple. Cest ce que nous prsentons dans cette section (voir Figure 5.7).
Figure 5.7
Aperu
de la galerie la
publication.
Dans la scne principale du document "ch5_galeriesImages_3.fla", au-dessus du calque

fond_mc, apparat le symbole cible_mc. Il est vide et sert de conteneur pour les images de
la galerie (voir Figure 5.8). Ce symbole possde dj des proprits, telles que lapplication
dun filtre dombre porte. Nous retrouvons la jauge de chargement prsente la section
prcdente, puis deux boutons (retour_btn et suivant_btn) qui servent appeler les nou-
velles images. Au-dessus, deux champs de texte dynamiques permettent dinscrire pour
chaque photo, un titre et une lgende en fonction des itrations. Enfin, deux filets soulignent
la composition, mais ne sont pas impliqus dans les actions.
Figure 5.8
Aperu
du scnario de la
scne principale.
lintrieur de notre dossier de travail, le rpertoire "images" contient un sous-rpertoire

nomm "galerie". Celui-ci contient 7 images respectivement nommes photo0.jpg,
photo1.jpg, photo2.jpg, etc., de largeurs diffrentes (voir Figure 5.9).
Figure 5.9
Aperu
des images
externalises
de la galerie.

//-------------------- Chargement initial
// CHARGEMENT
var chargeurPhoto:Loader= new Loader();
var cheminPhoto:URLRequest=new URLRequest("images/galerie/photo0.jpg");
chargeurPhoto.load(cheminPhoto);
// PROGRESSION
chargeurPhoto.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
chargementENCOURS);
chargement_mc.visible=true;
var valeurPourcentage:Number = (evt.currentTarget.bytesLoaded /
evt.currentTarget.bytesTotal);

}
// COMPLETE
chargeurPhoto.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET1);
function chargementCOMPLET1(evt:Event) {
cible_mc.addChild(chargeurPhoto);
cible_mc.x=(stage.stageWidth/2)-(cible_mc.width/2);
cible_mc.y=(stage.stageHeight/2)-(cible_mc.height/2)-25;
}
//-------------------- Boutons de navigation
var i:Number=0;
titre_txt.text="Galerie Photo";
index_txt.text="Les marais salants de Gurande";
// Bouton SUIVANT
suivant_btn.addEventListener(MouseEvent.CLICK,afficherPhotoSuivante);
function afficherPhotoSuivante(Event:MouseEvent){
i++;
if (i>=nombreDePhotos) {
i=0;
}
chargerPhoto();
}
// Bouton RETOUR
retour_btn.addEventListener(MouseEvent.CLICK,afficherPhotoRetour);
function afficherPhotoRetour(Event:MouseEvent){
i--;
if (i<0) {
i=nombreDePhotos-1;
}
chargerPhoto();
}
function chargerPhoto () {
var cheminPhoto:URLRequest=new URLRequest("images/galerie/photo"+i+".jpg");
index_txt.text="Photo N "+i;
}
La premire partie de ce code reprend essentiellement le chargement initial dune image,

que nous avons abord prcdemment. LURL cible simplement un nouveau dossier et affiche la
premire image de la srie, nomme "photo0.jpg" :
Dans le gestionnaire PROGRESS, nous ractivons laffichage de la jauge de sorte quelle

puisse rapparatre aussi pour les images suivantes :
Enfin, une fois le chargement complet, nous redfinissons le positionnement du symbole

conteneur cible_mc en X et Y. Dans notre contexte, cela permet de recentrer limage dans
la page quelle que soit sa largeur. Pour ce faire, nous spcifions, dans le premier groupe de
parenthses, que la position du conteneur correspond la largeur de la fentre du document
Flash, divise par 2. Puis, nous retranchons, dans le deuxime groupe de parenthses, la lar-
geur du conteneur lui-mme, divise aussi par 2. Si nous ne divisions pas par 2, la cible
serait colle droite de la limite du document, car la valeur alors prise en compte pour caler
lobjet serait la largeur de la scne moins celle de lobjet. En divisant par 2 chacune dentre
elles, puisque la moiti dune largeur quivaut son centre, nous centrons ce conteneur dans
le document (voir Figure 5.10) :
cible_mc.x=(stage.stageWidth/2)-(cible_mc.width/2);
Figure 5.10
Schma du posi-
tionnement du
conteneur.
cible_mc.width/2
stage.stageWidth/2
Notez que ce calcul ne peut se faire qu partir du moment o les dimensions de cible_mc
sont connues, cest--dire, uniquement lorsquune photo y est charge. dfaut, cest sa
dimension initiale qui sera lue, soit 0 pixel de large. La position dun conteneur est dtermi-
ne par rapport son centre gomtrique, toujours cal en haut et gauche dans le cas dun
chargement dynamique. Elle serait effectivement dcale de la moiti de la largeur de
limage importe, si nous lappliquions avant le chargement de limage.
Le principe est dclin pour le positionnement vertical, en Y, avec toutefois un dcalage de
25 pixels, pour rehausser le conteneur vers le sommet du document :
cible_mc.y=(stage.stageHeight/2)-(cible_mc.height/2)-25;
Centrer les images avec le composant UILoader. Il est possible de centrer les images charges
dynamiquement sans avoir calculer leur position. Remplacez simplement le conteneur MovieClip
cible_mc que nous utilisons dans cet exemple par un composant UILoader. Ce composant est dis-
ponible depuis la fentre des composants (Fentre > Composants), dans le groupe de composants

nomm "User Interface". Pour plus dinformations sur ce composant, reportez-vous laide de Flash
(F1) et saisissez dans le moteur de recherche de laide, le terme UILoader ou bien consultez directe-
ment lURL de la notice de ce composant cette adresse : http://help.adobe.com/fr_FR/Action-
Script/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7f9d.html.
Plus loin dans le code, au niveau du commentaire Boutons de navigation, nous initialisons
quelques valeurs :
//-------------------- Boutons de navigation
var i:Number=0;
titre_txt.text="Galerie Photo";
index_txt.text="Les marais salants de Gurande";
En premier lieu, i dsigne un nombre de valeur 0. chaque clic sur le bouton suivant ou
retour, nous incrmentons ou diminuons cette valeur de sorte quelle dsigne, dans la liste
des images, limage correspondant la valeur appele. Pour dmarrer, cette valeur est initia-
lise 0 et dsigne limage "photo0.jpg". chaque clic, cette valeur est donc modifie.
Lorsque la valeur atteint le seuil correspondant la dernire image de la srie, nous linitia-
lisons 0, pour redmarrer la boucle. Inversement, lorsque le bouton retour appelle limage
qui prcde la premire image de la srie, la boucle renvoie la valeur qui correspond la der-
nire image (i=nombreDephotos-1). Nous retranchons 1 la valeur nombreDePhotos : la
boucle dmarrant 0, si nous conservions la valeur initiale, nous obtiendrions une itration de
trop en regard du nombre dimages disponibles, ce qui provoquerait une erreur daffichage.
La deuxime variable nombreDePhotos indique le nombre de photos disponibles dans la
galerie. Vous devez renseigner cette valeur manuellement. Nous verrons, en abordant le XML,
que cette valeur peut tre renseigne automatiquement. Actuellement, nous comptons 7
photos.
Enfin, nous initialisons les textes des champs dynamiques titre_txt et index_txt distri-
bus sur la scne. Pour chaque bouton, nous ajoutons prsent un couteur et une fonction :
// Bouton SUIVANT
suivant_btn.addEventListener(MouseEvent.CLICK,afficherPhotoSuivante);
Le bouton suivant_btn appelle la fonction afficherPhotoSuivant :

function afficherPhotoSuivante(Event:MouseEvent){
i++;
if (i>=nombreDePhotos) {
i=0;
}
chargerPhoto();
}
La fonction commence par incrmenter la valeur i (i++) pralablement initialise 0. La

valeur i devient donc 1, au premier clic, puis 2 au second clic et ainsi de suite.
Ensuite, nous indiquons que si la valeur de i dpasse le nombre de photos disponibles
(i>nombreDePhotos), nous la rinitialisons 0. Ainsi, lorsque la boucle est termine, cest
la premire image qui est nouveau affiche et la boucle peut continuer dtre incrmente
jusqu ce que la condition linitialise de nouveau, et ainsi de suite.
la fin du bloc dinstruction du premier bouton, nous faisons rfrence une fonction
dveloppe plus loin (chargerPhoto). Nous y revenons.
Nous identifions ensuite une nouvelle fonction (afficherPhotoRetour) dclinaison de
cette mme fonction pour le bouton de retour :
// Bouton RETOUR
retour_btn.addEventListener(MouseEvent.CLICK,afficherPhotoRetour);
function afficherPhotoRetour(Event:MouseEvent){
i--;
if (i<0) {
i=nombreDePhotos-1;
}
chargerPhoto();
}
Dans la fonction afficherPhotoRetour, nous inversons le sens de lincrmentation en

remplaant les signes plus par moins (i--). La valeur ainsi diminue de 1 chaque itration.
Puis, si cette valeur atteint le seuil limite qui correspond la premire image (0), alors, nous
linitialisons la valeur de la variable nombreDePhotos de sorte que lanimation boucle
nouveau sur elle-mme.
la fin du programme, nous plaons une fonction autonome qui rassemble les instructions
communes appeles par les deux boutons. Cela permet de simplifier le codage du projet en
vitant les actions redondantes. De plus, cela facilitera la maintenance :
function chargerPhoto () {
var cheminPhoto:URLRequest=new URLRequest("images/galerie/photo"+i+".jpg");
index_txt.text="Photo N "+i;
}
La fonction chargerPhoto() lance le chargement de limage et modifie la valeur du champ

de texte dynamique en fonction de la valeur de limage charge, dfinie par i.
Plus prcisment, nous redfinissons lURL cheminPhoto appele par le chargeur du
dpart, nomm chargeurPhoto. Nous utilisons la valeur de i pour dterminer le numro de
limage afficher, en intgrant cette valeur au sein de la chane de caractres de lURL. Il
est ncessaire, pour le bon fonctionnement du programme, que les images stockes dans le
rpertoire possdent la mme racine de nom (photo), et que la premire dentre elle se termine
par le numro 0 qui correspond la premire valeur de i.
Lordre numrique en ActionScript

Le langage
En ActionScript, la valeur du premier niveau de toute chane dmarre toujours 0. Un objet affich
sur la scne sera accessible avec getChildAt(0). Le premier nud dun fichier XML sera appel
avec documentXML.childNodes[0]. Le premier lment dun tableau sera accessible avec nomDu-
Tableau[0], et ainsi de suite. Pour homogniser les actions et simplifier la gestion dactions rpti-
tives, nous grons aussi les images en associant au nom, de la premire dentre elles, la valeur 0. Il
est alors plus simple de grer les images en associant leur nom une variable dincrmentation,
comme i, qui peut en mme temps affecter dautres mthodes ou conteneurs.

Nous rappelons alors le chargeur (chargementphoto.load(cheminPhoto)) afin quil
relance le chargement partir de lURL nouvellement dsigne.
Il nest pas ncessaire de rappeler la mthode addChild car lobjet chargeurPhoto est dj
prsent dans la liste daffichage (donc sur la scne), grce au premier addChild invoqu
lors du chargement de la premire image. De mme, il est inutile de relancer les couteurs
pour les vnements PROGRESS et COMPLETE qui demeurent toujours actifs tant que nous ne
les avons pas neutraliss laide de la mthode removeEventListener.
En publiant la galerie sur un serveur distant, vous remarquerez que la jauge rapparat pour
chaque nouveau chargement parce que nous avons ractiv la proprit visible sur true
lexcution du chargement. De mme, la jauge disparat lorsque vous affichez une deuxime
fois chaque image, car celles-ci sont maintenant charges dans le cache de votre navigateur.
Leur chargement devient donc instantan.
Enfin, toujours dans cette fonction, nous modifions le contenu du champ de texte dynami-
que index_txt en y inscrivant le numro de la photo charge, selon le mme principe que
pour la dfinition de lURL.
retenir
Il est possible de raliser une galerie dynamique dimages en jouant sur la manire de nommer les
fichiers appels. Par exemple, en mixant une racine commune avec un nombre qui reflte lordre
dapparition.
Pour appeler diffrents contenus externaliss ou modifier des valeurs, nous pouvons utiliser une
variable de type nombre quil suffit dincrmenter chaque itration pour gnrer de nouvelles
valeurs.
Un gestionnaire dvnements est toujours actif tant que celui-ci na pas t neutralis par la
mthode removeEventListener.
Il est possible de centrer une image charge dynamiquement en calculant sa position par rapport
aux dimensions de la fentre du document Flash (stage) ou en utilisant le composant UILLoader.
Raliser une galerie dimages avec XML

Le recours un fichier XML, pour le dveloppement dune galerie photo comme nous le
proposons ici, permet de centraliser les informations rattaches chaque visuel dans un seul
document, ditable au format texte, et de ne plus avoir publier nouveau le document
Flash lorsquune donne est modifie.
La gestion dune animation Flash avec un flux XML vous permet aussi de travailler plus
facilement en quipe avec un dveloppeur back-office par exemple (qui gre des systmes
de gestion de contenu ct serveur, avec les langages PHP/MySQL par exemple, et peut
rendre facilement disponibles ses requtes sous la forme de flux XML).
La structure dun document XML autorise enfin dassocier, pour chacun des lments, un
nombre indtermin de donnes, sans avoir les traiter toutes systmatiquement.
Dans cette section, nous prsentons une galerie photo associe un fichier XML contenant
les rfrences aux images, les titres ainsi quune lgende pour chacune dentre elles. En cli-
quant sur les boutons suivant et retour, nous voluons directement au cur de larbores-
cence du fichier XML alors import (voir Figure 5.11).
Figure 5.11
Aperu de la
galerie la publi-
cation.

fond_mc, apparat le mme symbole cible_mc vide, qui sert de conteneur pour les images
de la galerie. Les autres lments sont similaires. Deux champs de texte dynamiques
titre_txt et legende_txt sont distribus de part et dautre de la zone daffichage
cible_mc. Deux boutons suivant_btn et retour_btn permettent de contrler la naviga-
tion. Enfin, le chargeur dvelopp en dbut de chapitre demeure prsent et reste galement
actif pour chaque nouvelle entre appele (voir Figure 5.12).
Figure 5.12
Aperu du
scnario de la
scne principale.

//-------------------- Chargement initial PHOTO AGRANDIE
// CHARGEMENT
// PROGRESSION
chargementENCOURS);
Target.bytesTotal);
}
// COMPLETE
cible_mc.x=stage.stageWidth/2-cible_mc.width/2;
cible_mc.y=stage.stageHeight/2-cible_mc.height/2-25;
}
//-------------------- Chargement du XML
var i:Number=0;
var chargeurXML:URLLoader = new URLLoader();

chargeurXML.load(new URLRequest("xml/galerie.xml"));
chargeurXML.addEventListener(Event.COMPLETE, XMLComplet);
function XMLComplet(evt:Event){
var donneesXML:XML=new XML(evt.target.data);
var NombreDeNoeudsDansLeXML:Number=donneesXML.photo.length();
// RETOUR
retour_btn.addEventListener(MouseEvent.MOUSE_DOWN, retourDOWN);
function retourDOWN(evt:MouseEvent) {
i--;
if (i<0) {
i=NombreDeNoeudsDansLeXML-1;
}
distribuerValeurs();
}
// SUIVANT
suivant_btn.addEventListener(MouseEvent.CLICK, suivant);
function suivant(evt:MouseEvent) {
i++;
if (i==NombreDeNoeudsDansLeXML) {
i=0;
}
}
function distribuerValeurs () {
titre_txt.htmlText=donneesXML.photo[i].titre.toString();// titre
legende_txt.htmlText=donneesXML.photo[i].legende.toString();// lgende
cheminPhoto=new URLRequest(donneesXML.photo[i].image.toString());
// image agrandie
}
}
Pour comprendre le principe de la gestion dun flux XML, nous devons retenir lide que les
donnes centralises dans le fichier XML ne peuvent tre distribues dans le Flash quune
fois le XML entirement charg. Cest pourquoi nous mettons les contenus en forme suite
lvnement COMPLETE.
Pour traiter les donnes issues dun fichier XML, nous disposons alors de deux mthodes.
Soit nous utilisons directement les valeurs charges par le XML au sein de la fonction lie
au chargement du XML. Soit nous crons des variables globales, cest--dire que nous les
typons en dehors de toute fonction, pour en modifier ensuite les valeurs avec les donnes du
XML import. Dans ce cas, nous pouvons exploiter les valeurs modifies par le XML
depuis toute autre fonction prsente dans notre programme.
Dans cet ouvrage, nous abordons la premire mthode. Pour la seconde, nous vous invitons
consulter des publications plus spcialises sur linterfaage dynamique, comme le livre
trs pointu de Thibault Imbert (d. Pearson) ou louvrage plus accessible dAnne Tasso (d.
Eyrolles). Nous fournissons les rfrences compltes de ces deux livres en fin douvrage.
Dans ce document, nous chargeons le fichier XML relatif la galerie, qui comporte la struc-
ture suivante :
<?xml version = 1.0 encoding="utf-8"?>
<galerie>
<photo>
<titre>GUERANDE</titre>
<legende>Sol craquel</legende>
<image>images/galerie/photo0.jpg</image>
<vignette>images/galerie/vignettes/photo0-vignette.jpg</vignette>
</photo>
<photo>
<legende>Gorgue, canal amenant leau charge en sel dans les tables salantes
</legende>
</photo>
<photo>
<legende>Amas de sel</legende>
</photo>

<photo>
<legende>Cristallisoir</legende>
</photo>
<photo>
<legende>Saliculture</legende>
</photo>
<photo>
<legende>Rammasage du sel</legende>
</photo>
<photo>
<legende>Outils du paludier</legende>
</photo>
</galerie>
Ce document comporte une structure classique compose dun nud principal appel ici
galerie. Cette structure affiche autant de nuds nomms photo quil y a dimages intgrer
dans notre galerie. Chaque nud photo, son tour, dispose dentres respectivement nom-
mes titre, legende, image et vignette, vhiculant chacune une valeur que nous distri-
buons, avec ActionScript, dans les objets mis en scne dans le document Flash. Dans cette
section, nous utilisons uniquement les trois premiers lments de chaque nud. Le qua-
trime, vignette, est dploye dans la section suivante.
Crer un fichier XML. Pour crer un fichier XML, utilisez nimporte quel diteur de texte et enregis-
trez le code au format texte avec lextension xml. Puis, dans la premire ligne, spcifiez un encodage
de type UTF-8 pour viter les problmes daccents mal interprts si vous ditez depuis un Macin-
tosh : sur Mac, les fichiers texte sont nativement cods en ISO Mac. Vous devez donc enregistrer le
texte avec une option qui permette dexporter en UTF-8. Linstruction ajoute dans le code affiche
donc :
<?xml version = 1.0 encoding="utf-8"?>
Dans la suite Adobe, Dreamweaver permet de raliser facilement des documents XML clairement
indents et propose des assistants la saisie. Pour plus dinformations sur la structure dun fichier
XML, consultez les ouvrages de Howard Goldberg ou Florent Nolot aux ditions Pearson.
Dans le Flash, depuis la fentre Actions, nous activons le chargement dune premire image
dans la zone cible, comme vu prcdemment :
// CHARGEMENT

// PROGRESSION
chargementENCOURS);
var valeurPourcentage:Number = (evt.currentTarget.bytesLoaded /
evt.currentTarget.bytesTotal);
}
// COMPLETE
cible_mc.x=stage.stageWidth/2-cible_mc.width/2;
cible_mc.y=stage.stageHeight/2-cible_mc.height/2-25;
}
Ensuite, nous activons la gestion du flux XML partir duquel nous allons dfinir les contr-
les de navigation sur les boutons suivant et retour :
var i:Number=0;
var ecartEntreVignettes:Number=90;

hargeurXML.load(new URLRequest("xml/galerie.xml"));
function XMLComplet(evt:Event) {
// gestion des donnes XML
}
Avant de charger le fichier XML, nous initialisons un nombre i, qui permet de mmoriser
lordre daffichage de limage courante. Cette valeur est initialise 0, ce qui correspond de
nouveau limage charge par dfaut, "photo0.jpg".
Puis, nous importons le fichier XML. Pour ce faire, nous dclarons dabord un nouveau
chargeur (chargeurXML), en utilisant cette fois une instance de la classe URLLoader, comme
nous le ferions pour importer une image. Ce chargeur active le chargement dun fichier
dfini travers lobjet URLRequest, pass directement en paramtre de la mthode load().
Cela quivaut dfinir lURL sparment avec var monChemin:URLRequest=new URL-
Request("monURL"). Les deux mthodes conviennent.

Diffrence entre Loader et URLLoader . La classe Loader est utilise pour charger un fichier
image ou SWF. Tandis que la classe URLLoader est employe pour charger un fichier au format
texte. La classe URLLoader est donc la mthode quil faut utiliser pour la gestion de donnes
dynamiques.
Le chargeur chargeurXML est associ un couteur (avec laction addEventListener) qui,

travers la classe Event et lvnement COMPLETE, appelle la fonction nomme XMLComplet
une fois le chargement effectu.
lintrieur de cette fonction, nous crons une variable donneesXML qui enregistre
lensemble de larbre XML import. Cela permettra, par la suite, de sy rfrer aisment en
invoquant cet objet pour distribuer chaque donne quil vhicule, plus loin dans le code.
Lobjet cr est un objet de type XML. Il se rfre la classe Event active, via lidentifiant
evt, et y cible les donnes courantes (target.data), donnes alors aspires par lcouteur
auquel cette classe se rattache.
var donneesXML:XML=new XML(evt.target.data);
}
Enfin, nous dclarons une premire valeur partir de lobjet XML que nous venons de
crer, pour identifier le nombre de nuds disponibles dans ce fichier. Pour cela, nous nous
rfrons lobjet XML avec donnesXML. Puis, nous spcifions le nom du nud de premier
niveau (photo) et dtectons la longueur (la quantit de nuds) prsente dans le document,
grce la mthode length().
Lire le XML. Pour lire les donnes contenues dans un fichier XML, selon le type de donnes releves,
procdez comme suit :
Pour atteindre un nud prcis, dont vous connaissez lordre dapparition, passez son numro entre
crochets, comme ceci : donneesXML.photo[numeroDuNoeud].toString() . Lordre daffichage des
nuds dans larborescence du fichier XML dmarre toujours la valeur 0. Pour atteindre le premier
nud, nous inscrivons nomDuXML.nomDuNoeuds[0].
Si la structure comporte plusieurs nuds imbriqus, ciblez chaque niveau individuellement, comme
ceci :
donneesXML.photo[numeroDuNoeud].image[numeroDuNoeudDeSecondNiveau]toString() ;
Si le nud porte la structure suivante : <photo largeur="600" hauteur="450">
<image>images/photo0.jpg</image> </photo> , pour cibler la valeur contenue dans lattribut
largeur, utilisez la syntaxe donneesXML.photo[numeroDuNoeud].@largeur.toString() .
Si le nud porte cette structure-ci : <photo largeur="600" hauteur="450"> <image>images/
photo0.jpg</image> </photo> , pour cibler la valeur contenue entre les balises <image> et
</image>, utilisez la syntaxe donneesXML.photo[numeroDuNoeud].image.toString() .
Attention toutefois, toute XMLListe se comporte comme un XML si elle ne contient quun seul
lment. Dans le cas contraire, il faudrait crire donneesXML.photo[numero-
DuNoeud].image[0].toString() .
Si le nud doit comporter des balises HTML, enveloppez le HTML dans une description de
type CDATA : <photo> <legende> <![CDATA[Marais salants de <b>GUERANDE</
b>]]> </legende> </photo>, et ciblez la valeur contenue entre les balises <legende> et </
legende>, avec la syntaxe donneesXML.photo[numeroDuNoeud].legende.toString() .
Pour cibler enfin plus spcifiquement un nud dont vous connaissez la valeur dun attribut : <photo
largeur="600" hauteur="450"> <image>images/photo0.jpg</image> </photo> , utilisez la
syntaxe suivante : donneesXML.photo[numeroDuNoeud].(@largeur=="600").toString() .
Pour enfin convertir le contenu dune balise en chane de caractres, spcifiez .toString(), qui
demeure facultatif.
Une fois ces informations dfinies, nous pouvons distribuer les donnes travers les objets
du document Flash :
// RETOUR
i--;
if (i<0) {
i=NombreDeNoeudsDansLeXML-1;
}
}
Dans la fonction XMLComplet, nous dfinissons successivement les couteurs et les fonc-
tions rattaches aux boutons suivant et retour de linterface, ceci afin de directement pouvoir
y exploiter les valeurs du XML.
Dans la fonction retourDOWN, active lorsque lutilisateur clique sur le bouton
retour_btn, nous commenons par rduire la valeur de i, initialement porte 0 (i--).
Si cette valeur est infrieure 0 (i<0), une fois diminue, elle est aussitt ramene
la valeur correspondant au seuil limite de la galerie, cest--dire au nombre de nuds
prsent dans le fichier XML, en loccurrence 7 moins un (i=nombreDeNoeudDans-
LeXML-1).
la fin de la fonction, nous appelons une autre fonction (distribuerValeurs) qui rassemble
les instructions communes aux deux boutons, comme vu prcdemment.
Nous dclinons ensuite lcouteur et la fonction pour le bouton suivant_btn, avant de
refermer la fonction principale associe au flux XML :
// SUIVANT
i++;
if (i==NombreDeNoeudsDansLeXML) {
i=0;
}
}
Pour le bouton suivant_btn, nous inversons les valeurs dfinies pour la condition if, en
spcifiant que la valeur de i doit revenir 0 si celle-ci atteint la valeur correspondant au
nombre de nuds dans le XML (donc, lorsque i vaut 7). Ainsi, nous passons directement de
la valeur 6 0, ce qui nous permet de crer un effet de boucle sur le droulement des images
pour notre galerie.

Enfin, la fonction distribuerValeurs qui termine le programme rassemble les instruc-
tions communes pour les deux boutons :
function distribuerValeurs () {
titre_txt.htmlText=donneesXML.photo[i].titre.toString();// titre
legende_txt.htmlText=donneesXML.photo[i].legende.toString();// lgende
cheminPhoto=new URLRequest(donneesXML.photo[i].image.toString());// image agrandie
}
Une fois la gestion du nombre i assure, il reste passer les valeurs contenues dans les l-
ments du XML vers les objets de linterface Flash. Pour chacune des trois instructions qui
ponctuent la fonction, nous faisons rfrence des nuds de lobjet donneesXML, en y
ciblant plus spcifiquement les balises titre, legende et image. Pour convertir toutefois
les valeurs en chane de caractres, et viter dimporter les balises qui enveloppent notre
slection dans le fichier XML, nous utilisons la mthode toString().
Vous remarquez que le chemin qui appelle les images est enregistr dans le document XML.
Nous aurions trs bien pu utiliser aussi une rfrence au fichier image en passant la valeur
de i directement dans lURL de limage importer, comme suit :
cheminPhoto=new URLRequest("images/galerie/photo"+i+".jpg");
Mais en appelant lentre contenue dans le XML, nous vitons de devoir publier nouveau
le document Flash si une modification devait tre apporte dans lorganisation des fichiers.
Nous permettons en outre de centraliser la gestion des donnes dans un seul document, le
XML.
retenir
Pour optimiser la gestion des donnes dans un document Flash, il est plus confortable de les isoler
dans un fichier XML. Cela vite de publier le document Flash chaque modification des donnes.
Les donnes isoles dans un fichier XML ne peuvent tre distribues que lorsque le XML est entire-
ment charg. Il faut donc, soit les distribuer dans la fonction excute lissue du chargement du
XML, soit les stocker dans des variables globales.
Pour viter que lincrmentation dune variable nombre (i) ne risque de faire rfrence un nud
inexistant, nous pouvons interrompre ou rinitialiser lincrmentation laide dune simple instruc-
tion if conditionnelle.
Nous ciblons le nud dun document XML en nous rfrant larbre racine pralablement identifi,
puis en ciblant chacun des nuds descendant de larborescence du fichier XML avec la mthode
pointe. Il est galement possible de cibler ponctuellement un attribut et de vrifier sa valeur. Vous
pouvez enfin atteindre un nud en fonction de son ordre dapparition dans larborescence XML
avec une valeur passe en paramtre du nud cibl, entre crochets comme [i].
Interactivit sur les objets dynamiques

Nous savons comment associer des actions sur un objet plac sur la scne, mais lorsque
lobjet ou les instructions traitent des lments grs dynamiquement, il faut savoir identifier
ces objets et ces donnes afin de permettre toute interaction avec eux.
Dans cette section, nous prsentons une dclinaison de notre galerie en plaant dynami-
quement des vignettes dans une zone daffichage constitue par un symbole de type
MovieClip. En cliquant sur les vignettes gnres dynamiquement, une action effectue un
zoom sur un autre symbole et y charge limage agrandie, correspondant la vignette acti-
ve. Les champs de texte dynamiques sont mis jour galement chaque action (voir
Figure 5.13).
Figure 5.13
Aperu de la
galerie la publi-
cation.

fond_mc, le symbole cible_mc sert de conteneur pour les images agrandies que nous allons
charger en cliquant sur les vignettes du bas. Ce conteneur contient aussi un autre symbole,
carreBlanc_mc. Ce symbole est masqu par dfaut avec la proprit visible passe sur
false via ActionScript. Ce carr blanc, lorsquil est visible, sert de signaltique pour per-
mettre lutilisateur didentifier lobjet cliqu. chaque clic, nous prvoyons de le redi-
mensionner et de le repositionner sous lobjet cliqu pour le souligner et reconstituer
dynamiquement un effet cliqu.
Les autres lments sont similaires ceux des sections prcdentes. Nous retrouvons la
jauge de chargement, les boutons suivant et retour, les champs de texte dynamiques, ainsi
quun calque qui affiche des lments graphiques de linterface nomm interface. Nous

avons ajout ici, au-dessus des autres calques, un symbole cibleVignettes_mc, vide, et un
masque, pour y placer les vignettes qui sont gres dynamiquement. Le masque sert res-
treindre la zone daffichage de ce calque pendant son dplacement, lorsque nous cliquons
sur les boutons suivant et retour (voir Figures 5.14 et 5.15).
Figure 5.14
Aperu de la
scne principale.
Figure 5.15
Aperu du
scnario de la
scne principale.

//-------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
var i:int=0;
var positionCibleVignettesInit:Number=cibleVignettes_mc.x;
cibleVignettes_mc.carreBlanc_mc.x=-2;
cibleVignettes_mc.carreBlanc_mc.y=-2;
cibleVignettes_mc.carreBlanc_mc.visible=false;

// CHARGEMENT
var cheminPhoto:URLRequest;
// PROGRESSION
chargementENCOURS);
var valeurPourcentage:Number = (evt.currentTarget.bytesLoaded / evt.current-
Target.bytesTotal);
}
// COMPLETE
chargeurPhoto.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET);
}

var donneesXML:XML=XML(evt.target.data);
for (i; i<NombreDeNoeudsDansLeXML; i++) {

// chargement des vignettes
var chargeurVignette:Loader= new Loader();
var vignette:String=donneesXML.photo[i].vignette.toString();
var cheminVignette:URLRequest=new URLRequest(vignette);
chargeurVignette.load(cheminVignette);
chargeurVignette.x=ecartEntreVignettes*i;
chargeurVignette.name=String(i);
cibleVignettes_mc.addChild(chargeurVignette);
// actions sur vignettes

cibleVignettes_mc.addEventListener(MouseEvent.CLICK,clickVignettes);
function clickVignettes(evt:MouseEvent) {
cibleVignettes_mc.carreBlanc_mc.visible=true;
titre_txt.htmlText=donneesXML.photo[evt.target.name].titre.toString();
legende_txt.htmlText=donneesXML.photo[evt.target.name].legende.toString();
cheminPhoto=new URLRequest("images/galerie/photo"+evt.target.name+".jpg");
TweenMax.to(cibleVignettes_mc.carreBlanc_mc,1,
{x:(ecratEntreVignettes*(evt.target.name-1))-2, ease:Strong.easeOut});
// transition carreBlanc
cible_mc.scaleX=0.1;
cible_mc.scaleY=0.1;
cible_mc.x=mouseX;
cible_mc.y=mouseY;

TweenMax.to(cible_mc,3, {x:100, y:50, scaleX:1, scaleY:1, ease:Strong.easeOut});
}
}
}
//--------------------- Boutons NAVIGATION
if (cibleVignettes_mc.x<=positionCibleVignettesInit*2) {
TweenMax.to(cibleVignettes_mc,1,
{x:cibleVignettes_mc.x+ecratEntreVignettes, ease:Elastic.easeOut});
}
}
if (cibleVignettes_mc.x>=0) {
TweenMax.to(cibleVignettes_mc,1, {x:cibleVignettes_mc.x-ecratEntre-
Vignettes, ease:Elastic.easeOut});
}
}
Le code est structur en quatre tapes. Il fonctionne de la manire suivante : nous commen-
ons par importer les classes ncessaires et nous instancions le module de chargement
dimages, sans activer de chargement. Ainsi, nous plaons les fonctions lies au chargement
et la jauge de progression indpendamment de la gestion des donnes XML. Dans un
deuxime temps, nous traitons les donnes importes par le XML, travers la fonction XML-
Complet. Nous permettons ainsi de charger les vignettes dynamiquement et les distribuer
dans notre interface avec un positionnement prcis. Dans un troisime temps, dans la fonc-
tion XMLComplet, nous dfinissons les actions au clic sur les vignettes. Nous terminons
notre dveloppement en spcifiant quelques actions, indpendantes des donnes XML, pour
contrler le dplacement du conteneur de vignettes dans notre dispositif global de naviga-
tion. Il ny a pas de relation entre les donnes XML importes et ce dispositif de navigation
si ce nest que la rpercussion indirecte de la quantit de vignettes charges dans le conteneur,
qui aidera dfinir les limites de son positionnement.
Tout dabord, nous commenons par appeler les classes requises pour les animations
TweenMax :
//-------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
Puis, nous initialisons un certain nombre de variables :

var i:Number=0;
var positionCibleVignettesInit:Number=cibleVignettes_mc.x;
La premire, le nombre i, permet de dfinir lindex (la position courante) de limage active,
charge dans la zone dagrandissement cible_mc.
La variable ecartEntreVignettes sert dterminer en une seule fois la valeur qui spare
chaque point dorigine de chaque vignette que le script va placer dans cibleVignettes_mc.
Cette valeur (90) est utilise plusieurs reprises. Pour simplifier la gestion du code, nous la
vhiculons travers une variable.
La variable positionCibleVignetteInit sert mmoriser la position de dpart du conte-
neur de vignettes pour tre exploite plus tard dans le calcul des limites du dfilement du
conteneur de vignettes cibleVignettes_mc.
Puis, les trois instructions suivantes affectent le symbole carreBlanc_mc, plac dans le
symbole cibleVignettes_mc :
Nous dterminons la position de dpart du carr blanc en le calant en X et en Y 2 pixels

plus haut et gauche de lorigine du clip qui le contient (celle du symbole
cibleVignettes_mc), car le carr blanc mesure 4 pixels de large de plus que les vignettes.
En le dcalant de 2 pixels en haut et gauche, nous centrons ce carr blanc. Nous formali-
sons ainsi un contour signaltique de 2 pixels qui souligne chaque vignette clique. cha-
que clic de souris sur lune dentre elles, lobjet est repositionn sous la vignette. Par dfaut,
le carr blanc est rendu invisible (visible=false), car aucune image nest encore affiche
dans la zone dagrandissement. Mais il est de nouveau visible en cliquant sur lune ou
lautre des vignettes.
Puis, nous mettons en place le chargement dimages et la jauge de progression, sans activer
toutefois de chargement sur une premire image ni lajouter sur la scne :
// CHARGEMENT
var cheminPhoto:URLRequest;
// PROGRESSION
chargementENCOURS);
var valeurPourcentage:Number = (evt.currentTarget.bytesLoaded / evt.current-
Target.bytesTotal);
}
// COMPLETE
chargeurPhoto.contentLoaderInfo.addEventListener(Event.COMPLETE,
chargementCOMPLET);
}

Une fois les fonctions de gestion du chargement dfinies, nous importons le document
XML, avec le chargeur chargeurXML, la mthode load qui active le chargement du contenu, et
lcouteur qui appelle la fonction une fois le chargement effectu. Dans cette fonction, nous
retrouvons la dfinition de larbre XML vhicul par la variable donneesXML et la longueur
de larbre, dsigne par nombreDeNoeudsDansLeXML :

var donneesXML:XML=XML(evt.target.data);
}
la suite de la dfinition des premires variables, nous pouvons identifier lutilisation

dune boucle for :
for (i; i<NombreDeNoeudsDansLeXML; i++) {
// actions rpter autant de fois que ditrations induites par la boucle.
}
Une boucle for permet de rassembler, dans un seul constructeur, un ensemble dinstruc-
tions rptitives, dont seul un ou quelques paramtres changent. En loccurrence, seule la
valeur vhicule par le nombre i change pour charger, positionner et dfinir des actions et
interactions avec les vignettes.
Dans cette boucle, nous indiquons de considrer la valeur de i telle que dfinie initialement
(i vaut 0 tel que nous lavons dfini en amont), puis, si i reste infrieur au nombre de nuds
prsents dans le XML (i<nombreDeNoeudsDansLeXML), alors, nous lincrmentons (i++).
Mcanisme dune boucle for. Une boucle for prsente la structure suivante :
for(valeur de rfrence; condition respecter; modification de la valeur de
rfrence){
// instructions rpter autant de fois que ditrations dans la boucle.
}
lintrieur de la boucle for, nous plaons les instructions reproduire :

// actions sur vignettes

cheminPhoto=new URLRequest("images/galerie/photo"+evt.target.name+".jpg");
TweenMax.to(cibleVignettes_mc.carreBlanc_mc,1, {x:(ecratEntreVignettes*
(evt.target.name-1))-2, ease:Strong.easeOut});
// transition carreBlanc
cible_mc.x=mouseX;
cible_mc.y=mouseY;
TweenMax.to(cible_mc,3, {x:100, y:50, scaleX:1, scaleY:1, ease:Strong.easeOut});
}
La premire srie dinstructions reproduire dfinit le chargement des vignettes et utilise,

en paramtre de lURL, la valeur incrmente de i. Ainsi, chaque itration, chaque image
dfinie dans le XML sera charge successivement jusqu la dernire, stoppe par la condi-
tion de la boucle for (i<nombreDeNoeudsDansLeXML) :
Pour permettre, par la suite, dattacher un couteur chaque objet plac dynamiquement,
nous devons pouvoir identifier chaque objet individuellement. Pour ce faire, nous utilisons
la proprit name, que nous attachons chaque objet charg (chargeur-
Vignette.name=String(i)) en affectant, pour valeur de nom, la valeur correspondant
lordre daffichage de chacune de ces vignettes. Ainsi, la vignette 0 se nomme 0, la
vignette 1 se nomme 1, et ainsi de suite. Pour cibler chaque objet plus tard, il suffira dinvoquer
son nom en utilisant de nouveau la proprit name.
Dans ces instructions de chargement des vignettes, nous relevons aussi le positionnement dyna-
mique est galement orchestr par la proprit x. Nous dterminons cette valeur en multipliant
lcart dfini plus haut entre les vignettes (90 pixels) par la valeur de i avec chargeur-
Vignette.x=ecartEntreVignettes*i. Donc, chaque vignette ajoute toute nouvelle itra-
tion est place 90 pixels de plus que la prcdente. Comme chacune dentre elles
mesure prcisment 80 pixels de large. Nous obtenons une marge de 10 pixels entre chaque
vignette.
Une fois les vignettes affiches, nous ajoutons un couteur sur lobjet conteneur global
cibleVignettes_mc. Pour connatre lobjet sur lequel lutilisateur a cliqu, nous le ciblons
grce la proprit nameassocie lexpression evt.target. Cette proprit permet
didentifier un objet lorsquil est cliqu au sein du conteneur auquel est rattach lcouteur :
// actions excuter
trace (evt.target.name)
}

Diffrence entre target et currentTarget
Le langage
Dans lexpression evt.target.name, nous dsignons la proprit name (le nom) de llment activ
contenu dans lobjet (target) auquel est rattach la classe invoque par lcouteur, et donc, lvne-
ment qui lui est associ (evt). Cette expression (target), est employe lorsque plusieurs objets
isols dans un mme et unique conteneur excutent la mme fonction.
Dans lexpression evt.currentTarget.name, nous dsignons la proprit name (le nom) de lobjet
attach lcouteur lui-mme (evt.currentTarget). Cette expression (currentTarget) est utilise
lorsque plusieurs objets isols et sans relation excutent la mme fonction.
Considrons lexemple suivant : prenons deux ensembles, un ensemble de lettres et un ensemble de
chiffres. Plaons un couteur sur chacun deux. Les deux ensembles invoquant la fonction alors
(evt:Event), la proprit target renverra la lettre ou le chiffre qui aura intercept le clic, tandis
que currentTarget renverra le groupe auquel lcouteur est appliqu et dont lvnement a t
intercept.
Ainsi, il nest pas ncessaire de connatre lavance lobjet qui va tre activ et qui va excuter la
fonction pour lui affecter un comportement.
Dans cette fonction, nous remplaons laction trace, cite en exemple, par les instructions
suivantes :
cheminPhoto=new
URLRequest(donneesXML.photo[evt.target.name].image.toString());
TweenMax.to(cibleVignettes_mc.carreBlanc_mc,1,
{x:(ecartEntreVignettes*(evt.target.name-1))-2, ease:Strong.easeOut});
cible_mc.x=mouseX;
cible_mc.y=mouseY;
TweenMax.to(cible_mc,3, {x:100, y:50, scaleX:1, scaleY:1,
ease:Strong.easeOut}); // transition Zoom
chaque clic sur une vignette, nous ractivons laffichage du carr blanc, masqu par
dfaut, avec la proprit visible passe sur true :
Puis, nous modifions le texte contenu dans les champs de texte dynamiques titre_txt et
legende_txt:
Pour dterminer le nud actif, nous utilisons un nud de larbre XML donnneesXML
(donneesXML.photo) et spcifions le nom de lobjet cliqu avec evt.target.name, entre
crochets.
Nous procdons de mme pour dsigner le nud correspondant lURL de limage

agrandie :
Le chargeur relance ensuite laffichage de limage agrandie :

Enfin, nous appliquons une transition TweenMax sur la position horizontale du carr blanc
pour crer ainsi leffet de dplacement. Seul le paramtre x doit tre calcul et dfini. Il suf-
fit de rcuprer au travers de son nom lindex de position de la vignette et de le multiplier
par lespacement existant entre chaque vignette (90 pixels) puis de retrancher le dcalage
de 2 pixels ncessaire pour assurer la marge du carr blanc.
Attention, comme lors du chargement la premire vignette est dj en place, il nous faut en
tenir compte et dmarrer lincrmentation 1, donc retrancher 1 la valeur dindex de la
vignette. dfaut de cette correction, nous observerions un dcalage de 90 pixels vers la
droite.
Nous terminons enfin le code par la dfinition dactions sur les boutons suivant et retour,
pour modifier la position du conteneur cibleVignettes_mc, chaque clic sur les flches
correspondantes :
//--------------------- Boutons NAVIGATION
if (cibleVignettes_mc.x<=positionCibleVignettesInit*2) {
TweenMax.to(cibleVignettes_mc,1,
{x:cibleVignettes_mc.x+ecratEntreVignettes, ease:Elastic.easeOut});
}
}
if (cibleVignettes_mc.x>=0) {
TweenMax.to(cibleVignettes_mc,1, {x:cibleVignettes_mc.x-ecratEntreVignettes,
ease:Elastic.easeOut});
}
}
Dans chacune de ces deux fonctions, lanimation TweenMax est active uniquement si la
position de la cible des vignettes ly autorise. Plus exactement, lanimation est lance si,
pour le dplacement du menu dans le sens du retour, sa position courante reste infrieure
sa position initiale (voir Figure 5.16). Nous multiplions cependant la valeur par deux afin de
recentrer arbitrairement lobjet dans la scne. Mais ce nest pas une obligation.
Figure 5.16
Schma du repo-
sitionnement du
conteneur de
vignettes.
TweenMax var positionCibleVignettesInit:Number=cibleVignettes_mc.x;


Nous procdons au mme type de calcul dans lautre sens, avec la deuxime fonction. Nous
spcifions alors que lanimation TweenMax peut se produire tant que la position de lobjet ne
passe pas par la limite de gauche qui vaut 0.
retenir
Pour grer une construction dynamique dinterface dont les mcanismes de mise en forme se rptent,
nous pouvons utiliser une boucle for.
Pour associer une action un objet gnr dynamiquement, il est possible de cibler lobjet en utilisant
sa proprit name.
La proprit target se distingue de la proprit currentTarget en cela quelle cible lobjet activ,
contenu dans lobjet attach lcouteur, alors que currentTarget cible uniquement lobjet atta-
ch lcouteur. La proprit currentTarget est donc employe pour distinguer plusieurs objets
isols qui excutent la mme fonction. La proprit target est utilise pour dsigner plusieurs
objets dun mme conteneur qui excutent la mme fonction.
Rsoudre les erreurs ventuelles au chargement

et lexcution
Des erreurs de chargement ou dexcution peuvent apparatre lorsque vous produisez avec
des fichiers externaliss (pour le chargement) ou lorsque vos dveloppements sont lourds ou
excuts sur des systmes instables ou bout de souffle (pour lexcution). Une erreur, fut-
elle bnigne, peut, dans certains cas, neutraliser lensemble de votre application si celle-ci
nest pas oriente vers une action alternative.
Dans cette section, nous prsentons les instructions qui permettent didentifier les erreurs et
celles qui permettent de les rsoudre, travers des actions trace.

fond_mc, figure un unique calque actions (voir Figure 5.17).
Figure 5.17
Aperu de la
fentre de
scnario de la
scne principale.

//chargeurXML.load(new URLRequest("xml/galerie.xml"));
chargeurXML.load(new URLRequest("xml/g.xml"));
chargeurXML.addEventListener(IOErrorEvent.IO_ERROR, siErreur);
function siErreur(evt:IOErrorEvent) {
trace("Erreur de chargement");
}
trace("Document XML charg");
//
try {
trace("Document correctement excut");
}
catch (monErreur:Error) {
trace("Document mal excut. Voici lerreur = "+monErreur);
}
finally {
trace("Instruction post analyse. Excute avec ou sans erreur, aprs lanalyse.");
}
}
Dans notre document, nous chargeons le fichier XML utilis pour la ralisation de la galerie
photo. Mais aucune action nest distribue pour traiter les donnes. Nous avons simplement
plac dans le code les instructions qui permettent, chaque tape, de localiser tout ventuel
problme de chargement ou dexcution. Les actions trace qui apparaissent permettent alors
didentifier lapparition de tel ou tel problme et, si besoin, de substituer ces actions trace
par des instructions qui proposent un contenu alternatif ce qui devait apparatre en
labsence derreur.
Ainsi, dans le code de ce document, nous avons mis en commentaire la ligne qui fait rf-
rence lURL du document XML valide. Puis, nous lavons duplique en remplaant le
nom du fichier valide par un nom invalide. Ainsi, le fichier qui nexiste pas gnrera une
erreur de chargement.
Pour traiter une erreur lie au chargement, nous plaons un couteur qui utilise lvnement
IO_ERROR, disponible via la classe IOErrorEvent. Cela donne :
chargeurXML.addEventListener(IOErrorEvent.IO_ERROR, siErreur);
function siErreur(evt:IOErrorEvent) {
trace("Erreur de chargement gnre volontairement dans le cadre de cet exemple");
}
Lorsque le document est publi, le fichier inexistant nest pas trouv. Le message, inscrit
dans laction trace ("erreur de chargement gnre volontairement dans le cadre de cet
exemple"), apparat aussitt dans la fentre de sortie. En ractivant linstruction URLRequest
valide et en neutralisant la commande errone, le message li lerreur de chargement napparat
plus lorsque le document est nouveau publi.
Plus loin, une fois le document XML charg correctement, si linstruction valide a t rac-
tive, nous pouvons tester les autres formes derreurs lies lexcution. Les commandes

qui grent ce type derreurs sont places lintrieur de la fonction appele lissue du
chargement du document XML.
Dans un premier temps, nous vrifions que le document a effectivement bien t charg.
Pour cela, nous introduisons une simple action trace au dbut de la fonction. Cette action ne
vrifie rien sinon quelle ne peut tre excute que si le document a effectivement bien t
charg et elle nous informe donc sur le succs du chargement :
trace("Document XML charg");
Ensuite, pour contrler la validit des instructions qui seront excutes aprs le chargement,
toutes les lignes de code de cette fonction doivent tre introduites dans le bloc dinstructions
try{}. dfaut, les actions non incluses entre les deux accolades qui suivent la mthode
try ne seront pas vrifies. Pour tester la validit des actions contenues dans le bloc dins-
tructions try{}, nous y plaons une action trace qui confirme la bonne excution de
lensemble du programme :
try {
trace("Document correctement excut");
}
Un bloc try doit toujours tre suivi, soit dun bloc catch{}, soit dun bloc finally{}, soit
des deux.
Le bloc catch{} propose lexcution dune instruction alternative dans le cas o une erreur
aurait t dtecte. Par exemple, vous pouvez afficher travers le bloc dinstruction
catch{} un message. Ce message peut signaler, lutilisateur, une erreur dexcution ind-
pendante du site et lui suggrer de recharger le document ou de se reconnecter ultrieure-
ment. Vous pouvez aussi excuter une version allge de votre programme propos
initialement dans le bloc try{}, mais cela augmente naturellement la charge de votre dve-
loppement. Dans notre exemple, le bloc catch{} excute une action trace qui affiche le type
derreur rencontr, en invoquant la classe Error relative cette commande :
catch (monErreur:Error) {
trace("Document mal excut. Voici lerreur = "+monErreur);
}
Le bloc finally{} sexcute, lui, quel que soit le rsultat obtenu par les blocs try{} et
catch{}. Il sert ponctuer lexcution dun programme par une action complmentaire.
Ce bloc est moins usit que les deux prcdents, mais comme son nom lindique, il per-
met de finaliser un programme et orienter ventuellement lutilisateur sur les actions
conduire. Il peut aussi servir rinitialiser les valeurs initialises lors de la tentative de
la premire mthode try{}. Dans notre exemple, une action trace termine le pro-
gramme :
finally {
trace("Instruction post analyse. Excute si erreur ou sans erreur, aprs
lanalyse.");
}
Mais, tant excute mme lorsquil ny a pas derreur, il convient demployer le bloc
finally{}, avec une structure conditionnelle qui initialise les valeurs, seulement si
ncessaire.
retenir
Il est possible de grer les erreurs de chargement grce la classe IOErrorEvent.
Il est possible de grer les erreurs dexcution grce la mthode try et dintroduire une action
alternative avec la mthode catch.
Une mthode finally permet de ponctuer, travers une structure conditionnelle, la dtection
dune erreur par une instruction complmentaire, si ncessaire.
Gestion de site dynamique avec XML

Il se distingue deux types de dveloppement : le dveloppement front-office et le dvelop-
pement back-office.
Le dveloppement front-office dsigne la programmation effectue sur un ordinateur local
et excute dans le navigateur ct client. Mme si ActionScript permet aussi de raliser des
dveloppements ct serveur, ActionScript, JavaScript, HTML, sont des langages de dve-
loppement utiliss gnralement en front-office.
Le dveloppement back-office consiste programmer des applications qui sont excutes
ct serveur, et non plus localement. Si vous les ralisez localement, vous devez installer sur
votre poste de travail un serveur dmulation pour tester lexcution de vos programmes.
PHP, par exemple, est un langage de scripts trs largement utilis et excut ct serveur. Ce
langage est en mesure de traiter des donnes depuis une base MySQL place sur un serveur
distant, et donc, de centraliser des donnes en vue dtre redistribues dans un site. PHP
peut galement convertir assez simplement, les donnes stockes dans une base MySQL, en
flux XML, comme si vous disposiez finalement dun fichier XML localis et stock ct
client.
Ds lors que vous savez exploiter XML dans la construction dinterfaces dynamiques en
Flash, vous savez donc aussi appeler un mme flux XML gnr depuis un serveur distant,
avec une application ralise dans un langage dynamique tel que PHP, par un prestataire
dveloppeur back-office tiers, par exemple. Vous pouvez alors accder, indirectement, et
grce aux instructions PHP, des donnes centralises dans une base MySQL, sous la forme
dune simple requte XML ou dun simple lien vers un fichier PHP, que vous passez alors
en paramtre de la mthode URLrequest() lintrieur de votre Flash (par exemple : var
chemin:URLRequest= new URLRequest("http://www.monsite.com/scriptQui-
RenvoieUnFluxXML.php");). Il devient donc relativement simple de confier la gestion des
donnes un dveloppeur back-office et de vous concentrer sur votre propre dveloppement
en local en ActionScript, sans avoir coder une seule ligne en PHP, sans jamais avoir
changer le moindre fichier avec votre prestataire, ni installer quelque serveur que ce soit
sur votre poste de travail, ni mme placer vos documents Flash sur un serveur dexcution
pour les publier.

Il existe une autre alternative la relation client/serveur, base de Flash. Cest AMFPHP,
qui permet Flash de directement communiquer avec un serveur et inversement.
Cette mthode de rpartition des tches entre dveloppeur front-office et back-office, grce
au XML, savre particulirement efficace en production, car elle permet au graphiste
codeur, de lui pargner la gestion dun serveur ou dun mulateur de serveur et au dve-
loppeur back-office, de sabstraire dun document Flash parfois complexe dpecer. Cette
mthode permet, aussi, de bien sparer les tches en programmation et de garantir que cha-
que partie concerne puisse se concentrer sur sa spcialit, sans jamais avoir soumettre
quelque partie que ce soit de son travail un autre, tout en reliant pourtant dynamiquement
les fichiers entre eux.
Synthse
Dans ce chapitre, vous avez appris optimiser considrablement le poids de vos documents
lorsquils affichent des images en grand format, en externalisant les contenus dans des
rpertoires placs au sein de votre site. Vous avez vu comment raliser des galeries dimages
et interagir avec des objets placs dynamiquement. Vous avez appris centraliser des infor-
mations dans un document XML pour simplifier la maintenance de votre site. Enfin, vous
savez maintenant contourner les erreurs ventuelles, observes au chargement ou lexcu-
tion des programmes. Vous tes prsent en mesure de crer des interfaces dynamiques
simples, et dexternaliser vos donnes dans un fichier XML. Vous tes galement au fait de
la manire de traiter des donnes gnres dynamiquement depuis une base place sur un
serveur distant si celles-ci sont distribues sous la forme dun lien ou dune requte XML.
La vido standard et composite

6 en FLV
Introduction
La gestion de la vido au sein de Flash est assez proche de celle de tout autre type de contenu.
De cette manire, nous pouvons envisager son intgration indpendamment de son cadre
habituel de diffusion, avec des dimensions libres et de linteractivit, comme si nous trai-
tions une image en somme.
Flash intgre la gestion de contenus vidos depuis la version 6 (MX). Mais il compte
aujourdhui trois formats que nous regroupons dans deux grandes familles : le format FLV,
flexible et universel, et le format F4V, plus "classieux" et rcent. Le premier intgre deux
codecs, le Sorenson Spark et le One2 VP6 tandis que le second propose uniquement le
H-264. Nous abordons les spcificit du H-264 travers le format F4V dans le chapitre sui-
vant. Dans ce chapitre, nous dtaillons lencodage de la vido au format FLV avec ces deux
premiers codecs, plus anciens.
Dans sa version 6, le lecteur Flash utilisait le codec Sorenson Spark, trs compact, et a ainsi
largement contribu la diffusion grande chelle de la vido sur le Web.
Avec Flash 8, lapparition du codec On2 VP6 a permis damliorer la qualit des vidos
mouvementes dans Flash et de grer la couche alpha ventuellement intgre au flux
vido.
Par vido standard, nous entendons donc lensemble des vidos publies au format FLV,
encode en SorenSon Spark, sans couche transparente, destin un affichage simple et
compatible avec les plus anciennes versions du lecteur Flash (version 6).
Par vido composite, nous entendons la composition dinterfaces partir de sources vidos
qui possdent une couche transparente (couche alpha), encode en on2VP6 avec la couche
alpha. La transparence, lorsquelle est active, permet de raliser des interfaces graphique-
ment labores telles que lincrustation dun personnage film sur fond vert et dtour, des
animations de particules, la superposition dlments de dcor anims, des espaces publici-
taires en premier plan dune mise en page, etc.
Dans ce chapitre, nous dtaillons dabord les contraintes gnrales lies la gestion dune
vido pour le Web. Nous abordons ensuite les techniques lmentaires de publication dune
vido depuis un logiciel tel que Apple Motion, disponible dans la suite Apple Final Cut Stu-
dio, ou Adobe After Effects de la suite vido Adobe, avec de la transparence. Nous voyons
aussi lencodage de vidos standard vers Flash pour un export au format FLV, depuis tout
type de logiciel. Enfin, nous traitons lintgration simple de ces vidos dans Flash, laide
du composant FLVPlayBack.
lissue de ce chapitre sur la vido standard et composite au format FLV, vous serez en
mesure de raliser des interfaces contenant des vidos simples, sophistiques et optimises
pour toutes les versions de Flash qui acceptent la vido.
Concevoir la vido pour le Web

Lorsque vous prparez un contenu vido destination du Web, vous devez considrer que sa
diffusion doit obir quelques caractristiques lies la nature mme du support de diffu-
sion. Voici quelques questions/rponses qui vous guideront sur la cration de contenus
vidos destination du Web, et plus particulirement, vers Flash.
Quel ratio de pixels ? Une vido chantillonne pour le Web doit tre dfinie en pixels car-
rs, de ratio 1,00. Les crans dordinateur (qui excutent la page web) possdent une trame
de pixels carrs, ce qui les distinguent des crans de tlvision dont le ratio de pixels est res-
pectivement 1,09 en PAL 4/3, 1,46 en PAL grand cran, 0,9 en NTSC 4/3 et 1,21 en NTSC
grand cran.
Il est possible de convertir le ratio du format des vidos partir des logiciels Motion et After
Effects. Pour connatre le ratio de vos vidos, ouvrez-les dans lune de ces applications et
observez leurs proprits. Pour adapter le document au format pixels carrs, dfinissez,
dans les botes de dialogue qui apparaissent lors de la cration dune nouvelle squence
vido, un format de pixel carr et redimensionnez au besoin votre vido.
Avec ou sans trame ? La vido analogique est compose de deux images (trame paire et
trame impaire). Dans une diffusion pour la tlvision, il faut toujours synchroniser ces deux
images afin de ne pas donner limpression dun tremblement. Limage numrique nest
compose, elle, que dune seule trame par image, mais intgrale. Si vos images proviennent
de sources analogiques (camscopes, VHS et/ou autre support Hi8), vous devez convertir
ces images en images dites progressives, cest--dire sans trame. Si, linverse, vos images
proviennent de sources numriques, cest inutile : elles sont dj progressives.
Notez que les logiciels de montage et de trucage, ainsi que lencodeur Adobe livr avec
Flash, permettent de convertir dun format vers lautre.
Une capture progressive vous permettra aussi dextraire plus facilement une image nette,
non trame, pour la traiter dans Photoshop, en vue ventuellement de lintgrer dans une
composition Flash ou vers un document imprim.
Quelle cadence pour le Web ? La cadence (ou frquence) dimages est le nombre dima-
ges fixes affiches en une seconde de film (elle est 25 images par seconde pour une vido
standard en PAL). Si la cadence pour la tlvision ou le cinma est importante, elle peut tre
rduite pour le Web. Mais ceci na pas rellement dimpact sur le poids des fichiers, contrai-
rement aux ides reues. En effet, les algorithmes traitent essentiellement des images-cls
par nature insensibles une variation lgre de la cadence des images, sauf pour des mou-
vements rellement trs marqus. Dans ce cas, le nombre dimages-cls devient plus impor-
tant et leur itration plus serre sur lchelle du temps. Une modification importante de la
cadence peut sans doute, dans ce cas, allger un peu le poids dune vido.
Mais indpendamment du poids des vidos, la cadence agit surtout sur les performances
daffichage de la carte graphique. Plus il y a de variations grer dans un mme temps
donn, plus le processeur vido est sollicit.
Si la vido est importe physiquement dans le scnario de Flash, sa cadence doit tre iden-
tique celle de la vido. En revanche, si la vido est stocke en dehors de lanimation Flash,
et que celle-ci est affiche dynamiquement dans Flash laide du composant FLVPlayBack
LA VIDO STANDARD ET COMPOSITE EN FLV 139

ou avec les commandes de la classe NetStream, sa cadence peut tre diffrencie.
Lorsquune vido est importe dans Flash, si la cadence est diffrente de celle du scnario,
le son, les animations et les actions risquent en effet dtre dsynchroniss par rapport
limage.
Combien de vidos en simultan ? Il est possible de multiplier les couches de fichiers
vido au sein dune mme animation Flash, mais prfrez les rassembler autant que possible
dans un seul fichier vido. Vous gagnerez en fluidit.
Quelles dimensions pour une bonne image ? dbit quivalent, plus la vido occupe de
la surface lcran, plus la compression devra tre forte. Pour compenser le poids induit par
les dimensions de la vido et stabiliser le dbit, prfrez rduire les dimensions des vidos,
vous obtiendrez un meilleur rendu. Dans Flash, les vidos ne requirent pas dtre impor-
tes dans un format standard de ratio 4/3 ou 16/9 par exemple. Les vidos peuvent tre reca-
dres avant lencodage, de sorte que seule la surface utile coder soit traite sous la forme
dun signal vido utile. Par exemple, pour afficher un personnage qui marche en direction
de lutilisateur, une vido de forme rectangulaire verticale peut largement suffir. Le reste du
dcor sera trait en image fixe, rparti sur dautres calques, dans Flash. Pour laisser voir le
dcor derrire le sujet film, il suffira de lexporter avec une couche transparente (alpha) et
de lenregistrer au format FLV avec les options ON2 VP6 et canal alpha actives.
Images fixes ou en mouvement ? Plus la vido est riche dun point de vue graphique (nous
disons quelle possde du bruit), plus son poids sera consquent, car cest ce qui bouge qui
est cod dans les algorithmes de compression. Ne rendez mobile que ce qui est utile ou
alors, privilgiez les animations courtes.
Il est possible, dans certains logiciels de montage vido, de rduire le bruit sans trop altrer
limage. tudiez cette option qui peut rduire considrablement la perte de qualit lenco-
dage, ou, qualit gale, rduire grandement le poids de la vido.
Capturer en standard ou en HD ? Pour raliser des montages vido simples, sans dtou-
rage ni incrustation, une capture standard suffit (PAL 4/3 758 576). Mais si vous souhai-
tez raliser des trucages avancs, tels que le dtourage dun sujet captur sur fond vert,
prfrez une image haute dfinition (1 080 lignes), dont le nombre de points et la qualit de
compression aideront affiner le dtourage, avant de rduire limage ensuite lexportation
vers Flash.
Quel que soit le format de capture, songez que la vido doit tre contenue, au final, dans une
fentre de navigateur de surface utile de 980 pixels par 550 pixels.
La lecture est-elle instantane ? Il faut compter une mise en cache de quelques secondes
avant que la vido ne puisse tre joue lorsquelle est diffuse sur le Web. Prvoyez cela
dans la scnarisation de votre document Flash. Cette proprit peut toutefois tre contrle
par ActionScript
Intgrer ou non les vidos dans le Flash ? La vido pour le Web est de prfrence exter-
nalise par rapport au document Flash qui sy rfre. Cest le Flash qui fait rfrence au
fichier vido via une instruction ActionScript. Cela permet dallger considrablement le
poids du document Flash et en simplifie la maintenance. En outre, la vido peut tre lue
mesure de son chargement, ce qui nest pas le cas dun document qui intgre physiquement
la vido.
Lorsque la vido est incluse physiquement dans le Flash, il faut en effet attendre le charge-
ment complet du Flash avant de pouvoir lire le dbut de la vido. quelques exceptions
prs (que nous abordons au Chapitre 8, section "Lire une vido en arrire"), la vido est
toujours externalise.
Une vido charge dans le scnario implique galement la recompilation du film chaque
publication, ce qui prend en outre beaucoup de temps.
Le format vido de Flash peut-il tre lu sans Flash ? Le Flash gre les formats vido FLV
(version 6 et ultrieur) et F4V (version 10 et ultrieur), voire certains formats QuickTime.
Mais les vidos Flash ne sauraient tre lues indpendamment du document Flash qui les
accompagne, car cest lui qui contient le lecteur en mesure de grer ce format. Quelques
applications toutefois savent lire les formats vido Flash, comme le lecteur VLC, Real,
Bridge et certaines versions de Quick Time. Le format F4V, que nous dtaillons au Chapi-
tre 7, est plus permissif cela dit que le FLV, du fait de son type de compression, bas sur le
H-264.
Source compresse ou non compresse ? Prfrez toujours exporter au format vido de
Flash partir dune source non compresse. Les vidos dj compresses utilisent des algo-
rithmes qui peuvent gnrer des parasites dans la vido de sortie. Une vido non compresse
demeurera toujours de meilleure qualit au premier encodage.
Quelle configuration pour lire une vido sur le Web ? Pour lire une vido gre via
Flash, sur le Web, lutilisateur requiert au moins lADSL ou une connexion Cble, un lec-
teur Flash de version 6 pour les vidos FLV basiques, de version 8 pour les vidos FLV
composites avec alpha, et de version thoriquement suprieure 10 pour la vido haute
dfinition avec le format F4V. Dans tous les cas, une bonne carte vido est souhaitable,
suprieure ou gale 64 Mo. En dessous de 64 Mo, les flux vidos paratront parfois sacca-
ds pour des tailles mme raisonnables. En dessous de 32 Mo, elles paratront saccades
quelle que soit leurs dimensions, mme en rduisant la cadence 12 ou 15 images par
secondes.
Quelle diffrence entre un flux continu et un chargement progressif ? Laffichage dune
vido chargement continu est trait partir dun serveur de streaming (littralement,
denvoi de flux) qui fait varier la quantit et la qualit des donnes en fonction de la bande
passante disponible, dynamiquement. Les paquets de donnes vidos tant traits dynami-
quement, ce systme permet de modifier la nature du contenu selon la configuration et les
interactions de lutilisateur. Cette technique permet ainsi la diffusion dmissions en direct
et lenvoi dun signal plus ou moins compress selon la configuration matrielle du poste
utilisateur. Le traitement dun signal continu via Flash implique une solution serveur telle
que Flash Media Server.
Une vido chargement progressif est un fichier dj enregistr au format FLV ou F4V. Le
lecteur Flash la copie dans le cache du navigateur et lit la vido, mesure de son charge-
ment. Le traitement dun flux en chargement progressif ne permet pas le direct, mais reste
trs simple dployer, car aucun serveur spcifique nest requis pour lire la vido. Cest
cette dernire technique que nous utilisons dans cet ouvrage.

Quelle diffrence entre un fichier FLV et un fichier F4V ? Le FLV propose une compres-
sion forte au dtriment de la qualit, mais il autorise une implmentation souple lintrieur
dune mise en forme graphique compose de multiples calques. Cela en favorise linteracti-
vit. Le FLV encod en On2VP6 autorise par ailleurs la transparence. tant disponible
depuis Flash 6, il apporte galement une grande compatibilit.
Le format F4V utilise une compression HD (codec H-264). Il est utilis pour laffichage de
prsentations vido linaires et qualitatives (bandes-annonces, teasers, produits de luxe, ani-
mations 3D avec de la radiosit). Une vido F4V est thoriquement seulement compatible
avec Flash 10 et ultrieur, mais nous dmontrons quelle peut tre lue depuis une version
plus ancienne au chapitre suivant. Ce format est privilgi pour les prsentations haut de
gamme et pour une cible bien identifie qui sera quipe pour accder ce type de contenu
(qui dispose dun lecteur Flash rcent et dune bonne carte vido).
Composition simple avec Apple Motion

Apple Motion est un logiciel de trucage vido et deffets spciaux inclus dans la suite Final
Cut Studio dApple. Cet outil permet de raliser, entre autres, des habillages graphiques et
anims partir de formes vectorielles, dimages bitmaps, de particules gnres dynami-
quement et de squences vido. Il est utilis en tlvision pour les habillages dmissions,
pour linterfaage de DVD et depuis peu pour le Web o il apporte une vraie touche graphique
grce notamment son puissant moteur de gnration de particules et dacclration.
Dans cette section, nous allons voir comment exporter, depuis Motion, une animation de
particules dj prdfinie, dans un format compatible avec lencodage pour Flash (voir
Figure 6.1). Dans cet exemple, lanimation de particules illustre lclat dun feu dartifice.
Nous lencoderons plus tard, avec sa transparence, pour Flash, et la placerons au-dessus
dune interface.
Figure 6.1
Aperu de la
vido Apple
Motion aprs
publication.
Exemples > videoMotion > particules.motn
Lanimation de particules que nous prsentons ici est intgre au logiciel Apple Motion.
Pour les lecteurs qui ne disposeraient pas de lapplication, une version exporte au format
Quick Time est accessible dans le rpertoire "videoMotion" des exercices du livre et se
nomme "particules.mov". Vous pouvez directement passer la section sur lencodage si
vous souhaitez intgrer des contenus vidos FLV dans Flash.
Pour crer une animation vido de particules avec de la transparence, pour Flash et avec
Motion, procdez comme suit :
1. Lancez lapplication Apple Motion.
2. louverture, une bote de dialogue de cration de nouveau projet apparat (voir
Figure 6.2). Dans le menu Prrglages, slectionnez loption Personnaliser
Figure 6.2
Fentre de
nouveau projet
dans Motion.
3. La fentre de Proprits du projet apparat (voir Figure 6.3).
Figure 6.3
Fentre de
Proprits du
projet dans
Motion.
4. Configurez un projet de rsolution de 800 pixels de haut sur 530 pixels de large (ce qui
correspond notre surface de travail dans le document Flash), cod sur 8 bits ( savoir

la profondeur disponible sur les crans informatiques tout public), de proportions de
pixels Carr (soit un ratio de 1,00), sans trame. Lexemple que nous utilisons dure envi-
ron 110 images (dure de lanimation prdfinie) et nous le cadenons 25 images par
secondes (25 ips, cadence standard pour la vido PAL en Europe). Nous slectionnons
enfin un arrire-plan de type Transparent, pour permettre plus tard la superposition de la
vido avec dautres lments graphiques, au sein de lapplication Flash.
Dans le nouveau projet, gauche, figure la fentre Navigateur (voir Figure 6.4). Au centre,
nous pouvons voir lespace de travail, la scne. En haut, diffrents menus donnent accs
des effets qui peuvent tre appliqus au contenu.
Figure 6.4
Fentre Navigateur.
Dans la fentre Navigateur, vous pouvez identifier trois onglets : Navigateur, Bibliothque
et Inspecteur. Le Navigateur donne accs aux fichiers et dossiers de votre systme. La
Bibliothque met disposition un certain nombre dobjets prdfinis et prts lemploi.
LInspecteur, lui, affiche toutes les options de contrle disponibles pour lobjet activ dans
la scne (comme lInspecteur de proprits de Flash).
Cliquez sur longlet Bibliothque. Puis, dans la partie infrieure, slectionnez le rpertoire
metteur de particules. Dans la colonne de droite, slectionnez maintenant le dossier tin-
celles. Puis, dans la partie infrieure de la fentre, cliquez sur lanimation prdfinie nomme
"Surprise Shimmer" (voir Figure 6.5).
Un aperu de lanimation est disponible au sommet de la fentre Navigateur. En bas de
lcran, vrifiez que la tte de lecture du scnario est bien situe au dbut de lanimation
(voir Figure 6.7).
Figure 6.5
Slection dune
animation
prdfinie.
Figure 6.7
Fentre
de scnario.

Glisser-dposez lanimation slectionne de la fentre Navigateur vers le centre de la scne
(voir Figure 6.7). Puis, appuyez sur la barre despace pour tester lanimation.
Figure 6.7
Animation
dpose.
Un scintillement dtoiles sanime dans la scne courante. Lanimation fonctionne. Vous

pouvez enregistrer le document de travail et lexporter vers un format compatible pour
lencodage Flash.
Faites Fichier > Enregistrer. Puis, confirmez lenregistrement du document Motion au for-
mat natif (.mtn) dans le dossier de votre choix. Par exemple, dans le rpertoire Sources ou
dans le dossier videoMotion des exercices du livre. Ce fichier natif ne sera pas mis en ligne.
Il servira uniquement modifier ventuellement votre cration avant de lexporter nouveau
dans un format aplati et compatible.
Vous pouvez maintenant exporter la vido pour le Web.
Dans Motion, il ny a pas dexportation directe au format Flash FLV ou F4V. Pour encoder
la vido au format Flash, nous utilisons lapplication Adobe Media Encoder. Mais, pour ce
faire, nous devons dabord exporter la vido dans un format standard, aplati et qui prserve
la transparence. Nous choisissons de lexporter au format usuel Animation de Quick Time :
1. Faites Fichier > Exporter. Puis, dans la bote de dialogue, nommez la vido Particules.
Plus bas, dans le menu Exporter, choisissez Quick Time. droite, cliquez sur le bouton
Options (voir Figure 6.8).
2. Dans les options dexportation, choisissez une compression de type Animation en pr-
servant au maximum la qualit de lanimation (voir Figure 6.9). Vous remarquez, dans
le dtail des paramtres de compression droite, que la couche alpha est automatiquement
intgre dans ce format. Validez toutes les fentres. Puis, quittez lapplication.
Figure 6.8
Fentre Exporter.
Figure 6.9
Options
de compression.
La vido est maintenant exporte au format Quick Time et peut tre encode pour Flash
avec Adobe Media Encoder. Reportez-vous, plus loin dans ce chapitre, la section consacre
lenregistrement avec lencodeur Adobe pour publier la vido au format Flash FLV.
Un autre exemple est disponible dans le dossier des exemples du livre et se nomme
"galaxie.mov". Le fichier Motion associ se nomme "galaxie.mtn".

Encoder en FLV avec Apple Compressor
Vido
Compressor est livr en standard dans la suite Final Cut Studio de Apple. Pour les utilisateurs de
Compressor, vous pouvez encoder au format Flash vido directement depuis le logiciel Compressor.
Vous devez, depuis Compressor, exporter la vido au format Quick Time, et dans les options denco-
dage du format Quick Time, slectionner le format FLV.
retenir
Apple Motion permet dexporter au format Flash vido FLV avec de la transparence, condition de
le publier dabord au format Quick Time Animation, puis de lencoder ensuite avec lencodeur
Adobe au format FLV.
Apple Motion complte Adobe After Effects en cela quil intgre un puissant moteur dinterpolation
des images et un bon gnrateur de particules.
Les vidos Apple peuvent galement tre exportes via Compressor pour Flash, avec le mme para-
mtre dexportation Quick Time pour lanimation, mais loption FLV est ici disponible.
Composition simple avec Adobe After Effects

Comme nous lavons vu avec Motion, nous allons voir comment exporter une animation
simple ralise ici avec After Effects, pour Flash.
After Effects est un logiciel de composition et deffets spciaux, disponible dans la suite
vido Adobe. Ce logiciel, similaire Motion, permet de raliser des animations spatiales
en 3D de manire plus avance que Motion puisquil peut intgrer des objets modliss en
3D, mais il ne dispose pas dun moteur de particules aussi gratifiant. Les deux applications
se compltent donc assez bien dans la production deffets visuels. Il est ce titre possible
dimporter une vido ralise par Motion dans After Effects et inversement, pour lenrichir
des fonctionnalits de lautre application.
Dans cette section, nous allons voir comment crer une animation et la publier directement
au format FLV ou F4V pour Flash, depuis After Effects.
Exemples > videoAfterEffects > flocons.aep
Pour les lecteurs qui ne disposeraient pas de lapplication After Effects, une version expor-
te de la vido est disponible dans le rpertoire videoAfterEffects et se nomme flocons.mov.
Lanimation que nous allons tudier reprsente une pluie de flocons de neige dj mise en
forme. Mais avant douvrir ce document, nous allons voir comment configurer un projet
After Effects pour Flash :
1. Pour crer un document After Effects pour le Web, lancez lapplication After Effects.
2. Au dmarrage de lapplication, une fentre daccueil apparat (voir Figure 6.10).
Figure 6.10
Fentre daccueil
dAfter Effects.
3. Cliquez sur Nouvelle composition pour crer une nouvelle squence de vido composite.
4. Une bote de dialogue apparat (voir Figure 6.11).
Figure 6.11
Paramtres de
composition.
5. Dans la bote de dialogue des paramtres de la nouvelle composition, spcifiez une

configuration personnalise de largeur 800 pixels et de hauteur 530 pixels (dimensions
disponibles dans notre document Flash). Puis, choisissez un format de pixels carrs et
une cadence 25 ips, comme vu prcdemment avec Motion. Spcifiez enfin une dure

souhaite en secondes. Par exemple, pour une squence dune dure de 20 secondes,
inscrivez 0:00:20:00 dans le champ correspondant. Validez.
After Effects affiche une nouvelle composition (voir Figure 6.12) base sur des pixels car-
rs. Vous pouvez raliser vos effets, importer des mdias, multiplier les calques et animer
les proprits.
Figure 6.12
Nouvelle
composition.
Dans le dossier des exemples du livre, une animation de flocons est dj ralise. Nous
allons louvrir pour lexporter directement au format vido de Flash. Ouvrez le projet After
Effects intitul "flocons.ape", enregistr au format natif dans le dossier "videoAfterEffects".
Dans ce document (voir Figure 6.13), un solide est plac sur la scne et utilise un effet de
particules (Effets > Simulation > CC Particles Systems II). Leffet neutralise le solide, mais
lutilise pour exister en tant quobjet dans le scnario. Les options des effets sont accessi-
bles dans le scnario et dans la fentre Effets (Fentre > Effets) et lanimation de fondu en
sortie (fondu au noir) est matrialise dans le scnario avec des images-cls appliques la
proprit Opacit.
Pour exporter la composition directement au format vido de Flash, activez dabord la
squence exporter en cliquant sur la scne (o lon aperoit la vido). Faites Fichier >
Exporter > Flash Vido FLV Un message vous avertit que vous disposerez de plus
doptions de contrle en exportant depuis la fentre de rendu de After Effects. Lexport via
le menu Fichier utilise en effet une ancienne version de lencodeur Flash vido, mais tout
fait conforme aux besoins dune vido composite de base, avec alpha, et compatible
Flash 8. Nous reviendrons sur les autres options dans la section "chantillonner la vido
pour Flash".
Figure 6.13
Composition
flocons.aep.
Validez pour confirmer lenregistrement.

Dans la bote de dialogue, vous pouvez accder diffrentes options dchantillonnage
(voir Figure 6.14), mais limites.
Dans la liste des compressions prdfinies situe dans la partie infrieure de la fentre, vous
accdez diffrents formats dencodage plus ou moins compatibles avec danciennes ver-
sions du lecteur Flash. Seuls les formats compatibles Flash 8 autorisent lencodage de la
couche alpha qui prserve la transparence de la vido dans Flash.
Figure 6.14
Paramtres
dencodage des
vidos Flash.

Pour un encodage qui autorise la transparence, slectionnez Flash 8, dans la liste drou-
lante. Puis, adaptez votre choix selon loption qui correspond le mieux la bande passante
dfinie pour votre cible. Reportez-vous au Tableau 6.1 pour connatre les valeurs slec-
tionner en fonction de votre cible.
Tableau 6.1 : Compression et dbit.

Dbit Compression
Utilisateurs Modem 56k Pas de signal vido fluide.
Utilisateurs ADSL 1 400 kbps.
Utilisateurs ADSL 2 (majorit des utilisateurs) 700 kbps.
Utilisateurs Super ADSL, Cble, fibre optique 2 048 kbps 4 096 kbps.
Utilisateurs locaux (non connects, lecture en locale sur le poste utilisateur, > 4 096 kbps.
CD, DVD)
Dans la catgorie Vido (voir Figure 6.15), cochez loption Coder le canal Alpha, puis
validez.
Figure 6.15
Coder le canal
Alpha.
La fentre denregistrement apparat. Nommez la vido flocons.flv, par exemple, puis validez
(voir Figure 6.16).
Figure 6.16
Enregistrer la
vido au format
FLV.
La vido est enregistre au format FLV. Vous pouvez lintgrer dans Flash.
Pour le descriptif dtaill des options de compression du format FLV, reportez-vous la sec-
tion suivante. Pour savoir comment enregistrer pour Flash depuis dautres logiciels vido
(Final Cut Pro, Premiere Pro, mais aussi iMovie ou Window Movie Maker), reportez-vous
au Chapitre 7.
Trucage avec captation sur fond vert

Vido
Si vous savez exporter une vido avec la couche alpha, vous savez aussi intgrer un sujet captur sur
fond vert. Pour raliser une incrustation avec fond vert, relevez ce qui suit :
Lors de la captation, veillez obtenir un fond dont la couleur nest pas spcifiquement verte, mais
dont la teinte soppose en toutes circonstances celle du sujet captur.
Utilisez un fond sans asprit et rgulier, qui rflchisse bien la lumire en direction de la camra
et sans crer dombre ni laisser apparatre de plis.
Rendez le fond homogne en lclairant sous plusieurs angles avec des lumires diffuses. Il ne
doit pas y avoir de halo ou de zone moins expose quune autre. Attention, une lumire trop
forte gnre un halo jaune (image brle).
clairez le sujet pour compenser le contre-jour que vous obtenez avec un fond expos. Prfrez un
clairage indirect du sujet, pour viter lapparition au sol ou sur le fond vert, dombres portes.
Effectuez ensuite, si possible, un enregistrement en haute dfinition, avec de bonnes optiques,
en image progressive et avec la compression la moins forte possible (donc, surtout pas en DV ni
en HDV qui sont des formats trs compresss), de sorte restituer un piqu dimage le plus fin
possible. Cela facilitera le dtourage dans le logiciel de compositing.

Pour dtourer un fond vert, dans After Effects, vous pouvez utiliser les effets Keying > Keylight ou
Vido
les effets du menu Effets > Correction colorimtrique, et les dgrossir par exemple avec un mas-
que (pour supprimer dabord les bords du cadre, les cblages qui entrent dans le champ, etc.).
Dans Motion, dgrossissez de mme avec un masque et utilisez Ajouter un filtre > Incrustation >
cran bleu ou vert pour le dtourage.
Rduisez ventuellement lchelle de limage, aprs le dtourage bien sr, juste avant de lenco-
der au format vido de Flash.
Encodez au format FLV avec loption Coder le canal alpha.
Exporter le projet After Effects natif directement vers Flash

Si la composition After Effects doit utiliser des objets que vous souhaitez rendre interactifs dans Flash,
vous pouvez exporter ces contenus directement vers Flash, sans rendre ni aplatir la vido. Faites
Fichier > Exporter > Exporter au format Flash Professionnel XFL. Puis, depuis Flash, ouvrez le docu-
ment XFL et enregistrez la composition au format FLA. Attention, tous les effets ne sont pas toujours
bien interprts. De plus, si des calculs doivent tre appliqus des animations de vidos, un rendu
sera malgr tout ncessaire avant de pouvoir importer le projet dans Flash. Le document Flash
obtenu intgre physiquement la vido, ce qui en limite naturellement lexploitation puisque nous
savons quelle est mieux gre en externe. Pour de plus amples informations nanmoins sur ces pas-
serelles, consultez le livre DAfter Effects Flash / De Flash After Effects, de Richard Harrington et
Marcus Geduld, publi aux ditions Pearson, particulirement adapt aux utilisateurs de Flash qui
souhaitent par ailleurs apprivoiser After Effects.
retenir
Adobe After Effects offre une bonne transversalit avec Flash et permet dexporter facilement au for-
mat FLV avec de la transparence.
Il est possible dexporter une composition After Effects directement vers Flash sans calcul de rendu,
si les objets anims lautorisent.
chantillonner la vido pour Flash

Dans cette section, nous abordons lencodage de fichiers vido, partir dune source dj
enregistre (Quick Time, AVI, DV, etc.) ou depuis une application standard de cration de
contenu vido. Parmi celles-ci, nous abordons les solutions professionnelles des suites
Adobe et Apple avec After Effects, Premiere Pro et Final Cut Pro, ainsi que les solutions
embarques sur les systmes Mac et PC avec iMovie et Window Movie Maker.
lissue de ce chapitre, vous serez en mesure de convertir tout type de montage vido en
format de fichier vido prt tre intgr Flash.
Encoder en FLV avec After Effects

After Effects possde la mme fentre de compression que celle disponible dans lencodeur
Adobe :
1. Pour louvrir, faites Composition > Compiler le film.
2. Lors du premier enregistrement, After Effects demande denregistrer au format Quick
Time. Dans ce cas, confirmez. Rien ne se produit. Puis revenez dans la file de rendu en
faisant, de nouveau et si ncessaire, Composition > Compiler le film.
3. La file dattente de rendu apparat.
4. Dans la file de rendu, cliquez sur le lien jaune intitul Module de sortie non destructif.
5. Dans le menu Format de la nouvelle bote de dialogue, choisissez FLV.
6. Puis, dans Sortie vido, cliquez sur Options de format.
Reportez-vous ensuite la section "Encoder avec Adobe Media Encoder" pour le dtail des
rglages.
Encoder en FLV avec Premiere Pro

Dans Premiere Pro, il est possible dexporter plus directement au format vido de Flash :
1. Faites Fichier > Exportation > Mdias.
2. Puis, en haut et droite, dans la fentre de dialogue, dans le menu Format, choisissez
FLV|F4V.
3. Dans longlet Multiplexeur enfin, cochez loption FLV.
Reportez-vous ensuite la section "Encoder avec Adobe Media Encoder" pour le dtail des
rglages.
Encoder en FLV avec Final Cut Pro

Avec Final Cut Pro, vous devez dabord enregistrer la vido dans un format standard avant
de lencoder avec Adobe Media Encoder ou Compressor.
1. Faites directement Fichier > Exporter > Exporter via la conversion Quick Time.
2. Puis, dans les options de rglage vido de Quick Time, choisissez Animation.
3. Confirmez lenregistrement au format Quick Time.
Reportez-vous ensuite la section "Encoder avec Adobe Media Encoder" pour convertir un
fichier Quick Time en FLV.
Encoder en AVI-DV avec Window Movie Maker

Sur Windows, avec Window Movie Maker, vous pouvez publier au format Window Media
ou AVI. Nous utilisons le format AVI avec le codec DV pour une compatibilit transversale
avec la suite Adobe.

1. Une fois votre montage ralis, faites Fichier > Enregistrer le fichier vido.
2. Puis, choisissez de lenregistrer sur votre poste de travail.
3. Confirmez son nom et lemplacement de lenregistrement.
4. Puis, dans les options de configuration, slectionnez loption Autres paramtres et choi-
sissez le format DV-AVI (PAL). Validez lencodage.
Le fichier vido obtenu peut tre maintenant encod avec Adobe Media Encoder.
Encoder en MOV ou DV avec iMovie

Dans iMovie, vous pouvez accder directement aux lments sources des squences captu-
res, avant montage, dans leur format natif. Ils sont disponibles directement dans le systme
(Finder).
1. Sur chaque plan disponible dans iMovie, faites un clic-droit (ou Ctrl+Clic) puis, slec-
tionnez loption Afficher dans le Finder.
2. Vous pouvez aussi exporter le montage dans un format compatible avec lencodeur
vido Adobe. Faites Exporter > Exporter laide de Quick Time.
3. Puis, dans les options de rglage vido de Quick Time, slectionnez le format Ani-
mation.
Reportez-vous ensuite la section "Encoder avec Adobe Media Encoder" pour convertir un
fichier Quick Time en FLV.
Encoder en FLV avec Adobe Media Encoder

Quel que soit le logiciel de montage ou de trucage vido employ pour crer le fichier
vido, et mme si ce logiciel ne vous offre pas la possibilit dexporter la vido directement
au format Flash, vous pouvez lencoder avec Adobe Media Encoder. Cet utilitaire denco-
dage de mdias est livr dans la suite Adobe et disponible dans vos programmes, mme si
vous navez install que Flash.
Lencodeur offre, en plus des formats vido requis pour Flash, tous les formats vido et
audio que dautres applications ventuellement installes sur votre machine peuvent propo-
ser. Ainsi, si vous avez install toute la suite vido de Adobe, vous aurez accs, travers
lencodeur, aux codecs distribus par ces autres applications. Il en va de mme avec
lensemble des codecs distribus par la suite Apple.
Les rglages dont nous disposons travers lencoder Adobe sont identiques ceux disponi-
bles depuis les autres logiciels de la suite. En tudiant les rglages dans cette section, vous
serez donc en mesure dutiliser aussi les options dexportation avances des logiciels Pre-
miere Pro et After Effects pour les formats vido de Flash FLV et dj une partie de lenco-
dage pour le format F4V.
Les formats pris en charge par Adobe Media Encoder

Vido
Les formats pris en charge par lencodeur sont dsigns par leurs codec de compression et non
par leur extension. Dans un format vido, nous distinguons la coquille de la vido (Quick Time,
AVI) et le format dencodage du fichier contenu dans lenveloppe vido elle-mme (Animation,
H-264, DV). Cest la raison pour laquelle Flash peut parfois interprter des fichiers Quick Time
sans encodage spcifique supplmentaire, si lencodage utilis est identique celui dun fichier
FLV ou F4V.
Si lencodeur Adobe gre diffrents formats, il nautorise pas toutes les options dencodage pour
lensemble de ces formats. Le format le plus ouvert reste le format QuickTime (MOV) avec une com-
pression de type Squence anime (Animation).
Voici la liste des formats pris en charge par lencodeur Adobe :
Vido. 3G2, GIF anim (GIF), DLX (Sony, Windows uniquement), DV (dans un conteneur MOV
ou AVI), FLV, F4V, M2T (Sony HDV), QuickTime (MOV), MP4 (XDCAM EX), Formats MPEG-1, MPEG-2
et MPEG-4 (MPEG, MPE, MPG, M2V, MPA, MP2, M2A, MPV, M2P, M2T, AC3, MP4, M4V, M4A).
Certains formats de donnes MPEG sont enregistrs dans des conteneurs dont le format nest pas
reconnu par Adobe Media Encoder : les extensions .vob et .mod sont notamment concernes.
Dans certains cas, vous pouvez modifier lextension des fichiers afin de les importer dans Adobe
Media Encoder sous un format reconnu. MTS (AVCHD), Media eXchange Format (MXF). Unique-
ment certains types (une variante Op-Atom utilise par les camscopes Panasonic DV, DVCPRO,
DVCPRO50 et DVCPRO HD pour les enregistrements sur support Panasonic P2). Adobe Media
Encoder peut galement importer des fichiers XDCAM HD au format MXF. Netshow (ASF, Win-
dows uniquement), Vido pour Windows (AVI, WAV ; requiert QuickTime sous Mac OS), ne peut
pas importer de fichiers vido DivX, ni de fichiers AVI cods avec DivX. WMV (WMV, WMA, ASF ;
Windows uniquement).
Audio. Fichier Adobe Sound (ASND), AAC (Advanced Audio Coding, M4A), AIF, AIFF (Audio Inter-
change File Format), AVI (Audio Video Interleaved), WAV (Audio WAVeform), MP3 (MP3, MPEG,
MPG, MPA, MPE), MOV, Windows Media Audio (WMA, Windows uniquement), Vido pour Win-
dows (AVI, WAV, requiert QuickTime sous Mac OS X).
Images fixes. Adobe Media Encoder prend en charge les fichiers dimages fixes 8 bits par canal
(4 octets par pixel) et 16 bits par canal (8 octets par pixel). Il convertit les images de rsolution
infrieure en 8 bits par canal et celles de rsolution suprieure en 16 bits par canal lors de limpor-
tation. Les fichiers rsolution leve sont pris en charge une seule virgule flottante en simple
prcision par canal (16 octets par pixel). Adobe Photoshop et squence Photoshop (PSD), Bitmap
et squence Bitmap (BMP, DIB, RLE), GIF, Fichier icne (ICO) (Windows uniquement), JPEG et
squence JPEG (JPE, JPG, JFIF), PICT et PICT (PIC, PCT), Portable Network Graphics (PNG), Targa
et squence Targa (TGA, ICB, VDA, VST), TIFF et squence TIFF (TIF). Vous pouvez importer des
fichiers Illustrator et Photoshop calques sous forme de squences.
Montages aux formats natifs. Adobe Premiere Pro (PRPROJ), Projet After Effects (AEP).
Pour encoder tout type de vido au format Flash FLV (ou F4V), lancez lapplication Adobe
Media Encoder (voir Figure 6.17).

Figure 6.17
Adobe Media
Encoder.
Cette application gre, dans la partie suprieure, une liste de documents encoder. Dans la
partie infrieure, nous pouvons voir la progression de lencodage pour chaque fichier rendu
individuellement. Puis, droite, des options de rglage qui permettent de personnaliser la
compression (dimensions, dbit, transparence, etc.).
Pour encoder une vido, vous devez lajouter dans la liste de rendu. Pour cela, cliquez sur le
bouton Ajouter, situ droite ou bien glisser-dposez directement le fichier prt encoder
dans la file de rendu, situe dans la partie suprieure de lapplication (voir Figure 6.18).
Figure 6.18
Ajouter une vido
la file de rendu.
La fentre affiche le nom du document ajout et propose quelques rglages prdfinis de

compression. Pour chaque vido ajoute, diffrents paramtres sont disponibles : le nom de
la source et son positionnement sur votre machine, le format, des rglages prdfinis pour le
format choisi, le nom, le chemin du fichier de sortie et ltat encod en cours dencodage
ou en attente dencodage qui lui est associ.
Dans la colonne Format, slectionnez loption FLV|F4V si cette option ntait pas dj
active par dfaut.
Dans la colonne Prdfinir, activez lun des diffrents rglages prts utiliser.
Rglages dexportation
La fentre de rendu qui saffiche au lancement de lapplication permet daccder aux dtails
des rglages dexportation pour affiner les rglages proposs par dfaut.
Dans la file dattente de rendu (voir Figure 6.18), dans la colonne Prdfinir, cliquez sur le
lien jaune pour accder aux options de rglage du format slectionn. Une nouvelle bote de
dialogue souvre (voir Figure 6.19).
Figure 6.19
Rglages
dexportation.
lintrieur de cette fentre, nous distinguons deux parties. gauche, un aperu permet de
visualiser, recadrer et dfinir des points de repre qui permettent dajouter une couche
dinteractivit dans une vido. droite, les options dchantillonnage grent la compres-
sion audio et vido. Nous abordons lensemble de ces rglages, par catgorie, dans les sections
qui suivent.
Source et Sortie
Longlet Source, situ en haut et gauche de la fentre de rglages dexportation, affiche
dabord un aperu de la vido. Pour visualiser lensemble de la vido, vous pouvez dplacer
la tte de lecture qui se trouve sous la zone daffichage de la vido, le long de la bande jaune
qui reprsente la dure de la vido.
Vous pouvez galement modifier les points dentre et de sortie de la vido de sorte rogner
les premires et les dernires images de la squence, pour en rduire la dure. Pour cela,
dplacez les triangles situs lextrmit gauche et droite de la bande jaune et rapprochez-
les vers le milieu de cette bande, jusqu lendroit partir duquel vous souhaitez dmarrer
et interrompre la vido.

Au-dessus de la bande jaune, un menu Ajuster permet de visualiser la vido en taille relle,
telle quelle apparatra dans Flash, ou bien avec dautres proportions. Pour un aperu rel,
slectionnez 100 %. Pour un aperu intgral, slectionnez Ajuster.
Dans la partie infrieure, vous avez la possibilit de crer des points de repre dans le flux
vido. Nous reviendrons sur cette notion au Chapitre 8.
Au sommet enfin, un bouton de recadrage permet de supprimer les bords de la vido et nen
conserver quune partie. Pour recadrer, cliquez sur ce bouton, puis dessinez un rectangle sur
la zone daffichage de la vido (voir Figure 6.20). Pour valider le recadrage, passez
longlet Sortie, puis slectionnez loption Modifier la taille de la sortie, du menu intitul
Rglage du recadrage (voir Figure 6.21).
Figure 6.20
Source.
Figure 6.21
Sortie avec option
Modifier la taille
de la sortie.
Dans ce mme menu, loption Bandes noires conserve les dimensions initiales de la vido,
mais remplit la zone supprime avec le recadrage par du noir (voir Figure 6.22).
Figure 6.22
Sortie avec option
Bordures noires.
En slectionnant loption Ajuster, limage recadre pouse les dimensions initiales de la

vido. Cette option agrandit la vido et par consquent la dtriore de manire importante
(voir Figure 6.23).
Figure 6.23
Sortie avec option
Ajuster.
Une fois les premiers rglages de rognage dfinis, vous pouvez personnaliser les paramtres
de lencodage, affichs droite de la fentre.
Rglages personnaliss
droite de la fentre de rglages dexportation, nous pouvons contrler les paramtres
dchantillonnage pour la compression du flux vido en cours (voir Figure 6.24).

Figure 6.24
Rglages dexporta-
tion personnaliss.
En haut de la fentre figurent les rglages de base. Dans la partie infrieure, vous pouvez
modifier les paramtres attribus par dfaut, des rglages prdfinis :
Dans le menu Format, vous pouvez revenir sur le format de fichier. Conservez loption
FLV|F4V pour le format vido de Flash.
Dans le menu Prconfiguration, vous pouvez de nouveau accder des rglages pren-
registrs, comme la fentre de rendu. Conservez le rglage actuel que nous allons modi-
fier en intervenant sur les rglages en bas de la fentre.
Le lien jaune, Nom de la sortie, permet de renommer le fichier qui sera cr lors de
lencodage. Puisque le document est un lment destin au Web, nommez-le sans
espace ni caractres spciaux ou accentus et avec son extension .flv ou .f4v, selon le
format dencodage choisi. Conservez loption Exporter vido, pour exporter le signal
vido lors de lencodage. Conservez loption Audio, pour conserver le son lenco-
dage.
Utiliser le FLV pour laudio, la vido ou les deux. Le format FLV est initialement prvu pour
grer de la vido, et donc, indirectement, le son. Mais il est possible dexploiter les proprits dun flux
FLV pour encoder uniquement du son, uniquement de la vido ou les deux la fois. Par exemple,
vous pouvez traiter pour une mission audio seule sous la forme dun flux vido, en dsactivant
loption Exporter vido. Ce procd est commode car il vite de grer le son avec ActionScript et per-
met, en outre, de laccompagner dinteractivit grce la synchronisation dactions avec les points de
repre disponibles uniquement avec le format vido de Flash (voir aussi le Chapitre 8).
Une fois ces prrglages vrifis, vous pouvez les personnaliser dans la partie infrieure de
la fentre o sont affichs cinq onglets : Filtres, Multiplexeur, Vido, Audio et Autres.
Filtres
Longlet Filtres permet de flouter limage. Cela peut adoucir, par exemple, une image initia-
lement trs dgrade. Mais cette option est surtout utilise pour rduire le bruit dune vido
et acclrer le calcul du rendu. Le filtre flou altre, bien entendu, limage finale.
Pour activer le flou, cochez loption Flou Gaussien. Puis affinez les rglages situs au-des-
sous de loption active.
Multiplexeur
La catgorie Multiplexeur permet de choisir le type dalgorithme que lencodeur appliquera
la vido destine Flash. Deux options sont proposes : FLV ou F4V. De ce choix dpend
la compatibilit de la vido avec les versions antrieures du lecteur Flash. FLV permet de
grer la transparence et est compatible avec Flash 6 (sans transparence : Sorenson Spark)
ou 8 (avec transparence : On2 VP6) et les versions ultrieures. Le F4V, compatible
Flash 10, permet de grer une image en haute dfinition.
Dans ce chapitre, nous abordons la vido composite, donc, FLV, pour en savoir plus sur la
haute dfinition, reportez-vous au chapitre suivant.
Pour exporter la vido avec sa transparence ou pour Flash 7, cochez loption FLV (voir
Figure 6.25).
Figure 6.25
Multiplexeur.
Mcanisme du codec On2 VP6. Le codec On2 VP6, par rapport au codec Sorenson Spark, floute
les artefacts gnrs par une compression de type Sorenson. Ainsi, limage rsultante, du fait que
limage est en mouvement, parat plus propre que celle initialement obtenue avec le premier algo-

rithme, pour un poids gal. Mais le codec Sorenson Spark demeure adapt certains types de vido
pour lesquelles les mouvements restent moins prononcs. Le Sorenson Spark, dans ce cas, peut
mme offrir une meilleure compression que le On2VP6. Pensez tester diffrents rendus selon le type
de vido publier avant de dterminer votre choix. La qualit de la compression tant assujettie la
nature intrinsque de chaque vido, les rsultats obtenus peuvent varier dune vido lautre.
Vido
Longlet Vido donne accs aux rglages dtaills de compression (voir Figure 6.26).
Figure 6.26
Vido (FLV).
La premire tape du rglage affecte les proprits vido de base (voir Figure 6.27).
Figure 6.27
Rglages vido
de base (FLV).
Choisissez le codec Sorenson Spark pour un format de vido compatible avec Flash 6 et
si le fichier vido provient dune captation stable.
Choisissez le codec On2 VP6 pour une vido compatible avec Flash 8 et les versions
ultrieures. Ce format est aussi lger que le Sorenson mais lisse les artefacts rencontrs
lors de la compression pour les images en mouvement. Limage obtenue est donc de
meilleure qualit pour un poids similaire dans les vidos animes. Ce format autorise en
outre la gestion de la transparence. En choisissant le codec On2 VP6, vous accdez
loption Coder la couche alpha.
Cochez loption Coder la couche alpha pour que la transparence du fichier vido encoder
soit prserve dans lchantillonnage. dfaut de cocher cette option, la transparence
sera convertie en noir et, une fois import dans Flash, vous ne pourrez plus voir les
lments disposs larrire-plan de la vido.
Plus bas, nous distinguons les options de redimensionnement. Le redimensionnement intera-
git dynamiquement avec les options du menu Rglage du recadrage, situ gauche de la fen-
tre, dans longlet Sortie. Selon loption choisie dans ce menu, le redimensionnement pourra
apparatre inactif. vitez bien sr dagrandir une vido. Vous en altreriez le contenu.
Pour changer la taille de la vido, en largeur et en hauteur, modifiez directement les
valeurs affiches.
Cliquez ventuellement sur la case situe droite des valeurs pour contraindre les
modifications un redimensionnement homothtique.
La cadence de la vido (ou frquence) peut tre dfinie dans le menu Images/s [i/s]. Utilisez
une cadence leve pour prserver la qualit de la vido, mais au dtriment de son poids.
Par dfaut, la cadence est affiche sur 30ips, qui correspond une cadence NTSC amri-
caine. Portez la valeur de prfrence sur 25ips pour tre en conformit avec les standards
europens PAL.
Conflit entre la cadence des vidos et la cadence des animations Flash. Rappel : Les pro-
prits dun document Flash affichent une cadence dimages. Si vous importez une vido, physique-
ment, dans un document Flash qui naffiche pas la mme cadence que celle de la vido, la vido sera
dsynchronise par rapport lanimation et par rapport la bande son qui lui est propre. Si vous sou-
haitez intgrer physiquement une vido dans le scnario de Flash, utilisez la mme cadence dimages
pour les deux fichiers. Cette constatation ne vaut pas pour les vidos gres dynamiquement, via le
composant FLVPlayBack ou directement en ActionScript laide de la classe NetStream.
Modifier la cadence des images. Certains logiciels, et notamment Motion, disposent dun moteur
de conversion trs performant particulirement adapt pour le remappage temporel (calcul des ima-
ges ajoutes ou supprimes suite la modification de dure dun flux vido). vitez, en rgle gn-
rale, de modifier la cadence de limage dans lencodeur Adobe qui ne gre pas de recalcul sur des
images intermdiaires aussi efficacement que dans des logiciels ddis. Prfrez grer cette modifica-
tion au sein mme du logiciel de compositing pour un meilleur rendu.
La deuxime tape affecte les rglages de dbit (voir Figure 6.28).

Plus bas dans la fentre, deux options dencodage du dbit sont proposes : CBR
(Constant Bite Rate pour chantillonnage constant) et VBR (Variable Bite rate pour
chantillonnage variable).
Lencodage en VBR dsigne une compression qui volue dans le temps (variable) en fonc-
tion du mouvement et de la richesse des images. Tandis quen CBR, la compression reste
constante quel que soit le mouvement des images. Il est recommand de choisir une com-

Dimensions standard dune vido pour le Web
Vido
La taille dune vido peut tre gre en fonction de la taille de votre document Flash ou infrieure, si
sa vocation est de se distinguer dun formatage classique, pour une cration graphique par exem-
ple. Mais dans le contexte de la gestion de vidos aux formats standard, dans le cadre de la diffusion
de squence de reportage ou de fiction simple par exemple, voici les dimensions gnralement
observes :
Les tailles dimage standard pour une vido au format 4/3 de source PAL sont :
Modem (56 Kbits/s) : 180 144
ADSL : 360 288
Cble : 576 460
Cble/rseau dentreprise, fibre optique : 720 576
Les tailles dimage pour une vido au format 16/9 PAL sont :
Modem (56 Kbits/s) : 320 180
ADSL : 540304 ou 576 324
Cble : 960540 ou 1024 576
Les tailles dimage standard pour une vido au format 4/3 de source NTSC sont :
Modem (56 Kbits/s) : 160 20
ADSL : 320 240
Cble : 512 384
Les tailles dimage pour une vido au format 16/9 NTSC sont :
Modem (56 Kbits/s) : 192 108
ADSL : 384 216
Cble : 448 252
Figure 6.28
Rglages de dbit
(FLV).
pression VBR pour un rendu de meilleure qualit, mais au risque que certains passages de la
vido sarrtent pendant la lecture. Le mode CBR est prconis en revanche pour des flux
plus homognes et risque moins dinterrompre la lecture des squences vido, mais les ima-
ges en mouvement seront dgrades car elles sont toutes compresses lidentique, que les
images soient riches et animes ou pauvres et fixes. La qualit des animations riches risque
donc den ptir de manire perceptible. Lencodage VBR sollicite davantage, de part la
nature fluctuante de la compression, les ressources processeur du serveur qui met ces vidos
disposition. Certains problmes de synchronisation de laudio ont galement t observs
dans des conditions extrmes de bas dbit. Pour notre exemple, restez sur VBR. Le codec
Sorenson Spark ne permet enfin quune compression en CBR.
Le paramtre Passes dencodage dsigne le nombre de passages sur la vido que lencodeur
doit effectuer avant de dterminer la quantit dinformations supprimer. Plus lencodeur
analyse la vido, meilleur en sera le rendu. Il est donc recommand de choisir loption Deux
passes, mme si cela augmente le temps de calcul pour lencodage. Cochez loption Deux.
Sous le nombre de passes, un rglage sur la compression est disponible. Les valeurs indi-
quent le dbit pour lequel la vido doit tre adapte. Ce dbit est dfini en nombre de kilo-
bytes par seconde et fait directement rfrence au dbit dont les utilisateurs disposent avec
leur connexion Internet pour lire la vido.
Si une passe a t active, alors, un seul taux de compression, unique, est propos pour
lensemble de la vido. Si loption Deux passes en revanche a t active, deux taux sont
proposs. Le taux maximum dtermine le seuil de compression pour les images riches et
mouvementes, alors que le seuil minimum dtermine celui des images fixes. Pour viter
une rupture de flux lorsque le lecteur atteint une image anime et riche, rduisez lcart
entre les deux seuils proposs en rapprochant autant que possible le seuil maximum du seuil
minimum. Deux seuils de valeur identiques quivalent une compression Une passe. Vous
augmentez simplement la dure de lencodage.
Enfin, la variabilit du dbit, affiche pour deux passes uniquement, permet de dterminer le
moment o lon considre que limage doit basculer dune compression lautre. Plus la
valeur est leve, plus la compression basculera dun seuil lautre intempestivement. Pour
un dbit relativement plus constant, rduisez cette valeur, mais au dtriment de la qualit
des images animes et riches. Conservez pour notre exemple la valeur dfinie par dfaut
(80).
La troisime tape consiste ajouter des rglages plus avancs (voir Figure 6.29).
Figure 6.29
Rglages avancs
(FLV).
Dabord, la distance entre les images-cls permet de dfinir quelles images de la vido
seront codes intgralement. Lencodeur dtermine automatiquement une image-cl toutes

les deux secondes pour une lecture simple du flux vido. Conservez dans cet exemple la
valeur par dfaut (automatique).
Les images-cls. En vido, la compression du signal consiste liminer les informations redon-
dantes dune image sur lautre et ne conserver que les informations qui changent. Les images-cls
servent rafrachir limage courante avec une image pleine. Cela permet dviter certaines aberrations
visuelles surtout lorsque lon autorise lutilisateur naviguer, laide de fonctionnalits dacclration
ou de chapitrage, lintrieur du flux vido. Plus la vido comporte dimages-cls, plus elle sera nette
et plus la navigation pourra tre cible, mais plus elle sera lourde galement. Nous revenons plus en
dtail sur cette option au Chapitre 8.
Plus loin, le profil sert optimiser la compatibilit de la vido avec des quipements faibles
en carte vido. Si loption est active, la vido sera altre et ncessitera alors moins de res-
sources sur la machine utilisateur. Ne cochez pas loption Profil simple.
Le dernier rglage permet de dfinir le pourcentage de vido prcharger dans le cas o le
dbit serait vraiment trop faible, avant de pouvoir tre lu automatiquement. Conservez la
valeur par dfaut.
Une option de qualit permet enfin de choisir entre deux valeurs. Bonne spcifie une
meilleure qualit au dtriment de la rapidit du chargement pour les connexions basses.
Optimale, linverse, rend la vido plus accessible mais au dtriment de sa qualit.
Audio
La compression Audio (voir Figure 6.30), lorsquelle est requise, peut tre optimise en la
passant en Mono. Vous pouvez galement compresser le signal en rduisant la valeur du
menu Dbit. Notez que le son partage le dbit avec la vido. Plus vous augmentez le dbit
pour le son, plus vous diminuez celui qui restera disponible pour limage.
titre indicatif, une valeur infrieure 64 Kbits/s commence affecter srieusement la
qualit sonore dune musique. Une valeur infrieure 32 Kbits/s commence affecter de
manire perceptible le son de la voix. Privilgiez un rglage gnralement compris entre 64
et 128 Kbits/s grand maximum.
Il est possible dencoder le son dans un format audio de meilleure qualit, mais uniquement
avec le format F4V (voir Chapitre 7).
Autres
Un dernier onglet permet de publier directement la vido sur un serveur FTP, pour mettre
jour un podcast audio ou vido par exemple, sans avoir utiliser de logiciel de transfert pour
ce faire (voir Figure 6.31). Renseignez, dans ce cas prcis, les codes FTP fournis par votre
hbergeur pour procder directement une mise en ligne du flux vido sur un serveur distant.
Une fois tous les rglages dfinis. Cliquez sur OK. La bote de dialogue se referme et, dans
la fentre de dpart, le fichier vido est prt tre encod. Cliquez sur le bouton Dmarrer
la file dattente pour lancer le calcul.
Figure 6.30
Audio (FLV).
Figure 6.31
FTP.
Une jauge matrialise alors la progression de lencodage (voir Figure 6.32). La compres-
sion se termine par un signal sonore et le fichier est enregistr lendroit spcifi. Par
dfaut, si vous ne spcifiez pas demplacement ni de nom de sortie, le fichier reprend le nom
de la vido originale et est enregistr dans le mme rpertoire.

Figure 6.32
Rendu.
La vido peut maintenant tre intgre Flash.
retenir
La compression audio-vido est un compromis entre les dimensions de limage, le taux de compression
de limage, le taux de compression du son et le nombre dimages-cls.
Il est possible dexploiter le format FLV y compris pour diffuser de laudio. Cela permet dy associer,
ventuellement, de linteractivit.
La cadence des images de la vido doit tre identique la cadence de la scne, dans flash, si la
vido doit tre importe physiquement dans le scnario. Ce nest pas le cas pour les vidos gres
avec un composant ou avec la classe NetStream.
Intgrer de la vido composite dans Flash

Il y a plusieurs manires dintgrer de la vido dans Flash. Nous pouvons naturellement la
traiter via ActionScript, mais aussi en utilisant un composant prprogramm. Dans cette
section, nous utilisons le composant FLVPlayBack. Nous abordons la gestion de la vido en
ActionScript au Chapitre 8.
Exemples > ch6_videoComposite_1.fla
Dans le document "ch6_videoComposite_1.fla", seul le calque fond_mc affiche un contenu.

Un autre calque, nomm video, demeure vide.
Dans ce document, nous allons placer sur la scne une occurrence du composant vido FLV-
PlayBack et, travers lInspecteur de composants, nous allons tablir une liaison entre cette
occurrence et la vido exporte au format FLV.
1. Affichez la fentre des composants (Fentre > Composants) voir Figure 6.33.
Figure 6.33
Fentre des com-
posants.
2. Dans la catgorie Video, glisser-dposez llment intitul FLVPlayBack directement

sur la scne (voir Figure 6.34).
Figure 6.34
Composant plac
sur la scne.
3. Puis, affichez la fentre Inspecteur de composants (Fentre > Inspecteur de composants)

voir Figure 6.35.
Pour visualiser les options dun composant depuis la fentre Inspecteur de composants, le
composant doit tre pralablement slectionn sur la scne. Cliquez au besoin sur le composant
vido plac dans la scne pour le slectionner si celui-ci ntait pas actif.

Composant FLVPlayBack pour ActionScript 2 ou 3
Le langage
Lorsque vous placez un composant sur la scne, le code utilis pour le crer nest pas le mme selon
que vous publiez un document en ActionScript 2 ou 3. Aussi, les paramtres personnalisables de la
fentre Inspecteur de composants naffichent pas les mmes noms selon le contexte de dveloppe-
ment. Le paramtre source appartient un codage ActionScript 3. En ActionScript 2, ce paramtre
est identifi sous le terme ContentPath.
Figure 6.35
Fentre Inspecteur
de composants.
Dans la fentre des composants, slectionnez le paramtre intitul source. Puis, dans le
champ de texte de saisie, cliquez droite pour afficher une icne qui reprsente une loupe.
Cliquez sur la loupe pour ouvrir une bote de dialogue de slection de fichier. Dans cette bote
de dialogue, cliquez sur licne qui reprsente partiellement un dossier, situe droite, pour
ouvrir enfin la fentre de slection de fichier. Slectionnez alors, sur votre poste de travail, la
vido enregistre au format FLV. Loption Identique aux dimensions sources permet de modifier
les dimensions du composant et ladapter aux dimensions de la vido appele en rfrence.
Avertissement pour les utilisateurs de Windows. Attention, sous Windows, licne de slec-
tion de fichier du composant FLVPlayBack nest presque pas visible. Vous devez cliquer lextrmit
du bord droit de la bote de dialogue pour lactiver. Le cas chant, saisissez manuellement le chemin
relatif qui relie le document Flash la vido (voir Figure 6.37).
Puis refermez la fentre en validant les tapes (voir Figure 6.36).
Figure 6.36
Chemin
du contenu,
sous Macintosh.
Une fois la liaison active, la fentre Inspecteur de composants affiche le chemin daccs au
fichier vido FLV (voir Figure 6.38).
Figure 6.37
Chemin
du contenu,
sous Windows.
Figure 6.38
Chemin
enregistr dans la
fentre Inspecteur
du composant.
Paramtre source des composants vidos. Vrifiez toujours que le chemin dfini pour le para-
mtre source des composants vidos part bien de la position relative de la page HTML qui contient
le document Flash (ou du Flash lui-mme). Dans certains cas, si vous travaillez en rseau par exemple,
Flash peut enregistrer un chemin absolu qui part de la racine de votre systme en ciblant votre rseau
local. Un chemin de ce type ne serait pas fonctionnel une fois le projet en ligne. Il faut donc toujours
vrifier lemplacement dsign une fois loption valide. Le chemin doit tre relatif. Par exemple, le
chemin "videos/mavideo.flv" peut tre valide si la vido se nomme "mavideo.flv" et quelle se trouve
dans un dossier nomm "videos", situ au mme niveau que votre document Flash ou du moins, au
mme niveau que la page HTML qui affiche votre document Flash. En revanche, un chemin du type
"Disque/Poste de travail/projet/site/videos/mavideo.flv" ne sera pas valide dans ce contexte.
Ds la fermeture de la bote de dialogue, le composant est automatiquement adapt aux

dimensions de la vido. Au besoin, repositionnez ce composant lorigine de la scne, ou
lemplacement voulu (voir Figure 6.39).
Selon la configuration de votre application, une console de lecture peut tre attache auto-
matiquement votre composant vido. Elle permet de piloter la vido la publication. Nous
aborderons ces fonctionnalits dans le prochain chapitre. Pour une vido composite, qui
apparat gnralement comme un lment purement graphique, sans outils de contrle
autres que linteractivit dveloppe par ailleurs, nous choisissons de masquer cette
console.
1. Pour masquer la console de lecture affiche par dfaut, dans lInspecteur de compo-
sants, cliquez droite de loption Skin jusqu ouvrir une bote de dialogue (voir
Figure 6.40).
2. Dans cette fentre, vous pouvez choisir le type dhabillage pour la console.
3. Dans le menu Enveloppe, slectionnez loption Aucun. Puis, validez.

Figure 6.39
Reposition-
nement ventuel
du composant.
Figure 6.40
Suppression
des contrles
de lecture
La vido ne possde plus de contrle de lecture. En publiant le document, le flux FLV joue
lanimation de particules (feu darticice) et laisse apparatre la scne du document Flash
situe en arrire-plan (voir Figure 6.41).
Si vous souhaitez utilisez une Skin pour contrler la lecture de la vido, reportez-vous au
Chapitre 8 pour le dtail de ces options.
En publiant le document Flash, la vido nest joue quune seule fois. Il est possible de
crer des boucles ou de contrler plus prcisment la lecture de la vido. Nous abordons
galement ces notions dans les deux chapitres suivants.
Figure 6.41
Aperu aprs
publication
Paramtrer un composant via ActionScript

Le langage
Lensemble des proprits du composant FLVPlayBack peut tre gr en ActionScript. Pour cela,
il suffit dinvoquer le nom doccurrence du composant et dy attacher la proprit modifier,
laide de la syntaxe pointe. Pour modifier la source dynamiquement, inscrivez par exemple :
maVideo.source="videos/film2.flv". Nous abordons en dtail certaines de ces proprits au
Chapitre 8.
Vous pouvez aussi ajouter un aperu de la vido pour faciliter sa manipulation dans la scne :
1. Pour ajouter un aperu, dans lInspecteur de composants, cliquez droite du paramtre
Preview.
2. Dans la nouvelle bote de dialogue, arrtez la vido lemplacement voulu.
3. Puis, cliquez sur OK.
Un aperu matrialise prsent la vido dans la scne. Cet aperu napparat pas la publi-
cation. Il ne sert que pour manipuler la vido dans Flash. Cet aperu tant une image captu-
re en JPEG, il ne gre pas la transparence. Mais cela naffecte en rien le rendu final, obtenu
la publication du document.
Reconstituer un univers 3D avec une vido aplatie. Flash CS4 possde un moteur daffi-
chage simili 3D. Il est possible danimer dans lespace, des symboles de type MovieClip, avec des
proprits de rotation et de position. Un composant vido est un objet qui peut tre contenu
dans un symbole de type MovieClip. Il est donc possible danimer et projeter des vidos dans
lespace 3D de Flash.
Dans le cadre dune animation de particules publie au format FLV avec sa couche transparente, vous
pouvez donc recrer un effet de particules en 3D dans Flash. Pour cela, crez un document compre-

nant plusieurs occurrences de MovieClip identiques, chacune rpartie sur un calque distinct et de pro-
prit de position et de rotation 3D diffrencies. Mais elles sont toutes centres et superposes dans
la page, de sorte que les contenus se croisent au centre du document. Placez, dans le symbole de la
bibliothque ou dans une des occurrences de la scne, le composant FLVPlayBack. Associez sa
source un flux vido FLV de particules cod avec la transparence.
En publiant lanimation, vous pouvez voir que la vido, a priori aplatie, mais redistribue spatia-
lement, et avec sa transparence, adopte une toute nouvelle dimension. Le fichier
"ch6_videoComposite_3.fla" propose ce type de mise en forme.
La transparence, associe laffichage 3D de Flash, ouvre des perspectives dexploitation des flux
vido, mais requiert, bien sr, un minimum de ressources machine ce qui rserve ce type dagence-
ment des configurations solides.
retenir
Pour intgrer une vido FLV dans Flash, nous utilisons le composant FLVPlayBack.
Ce composant prsente des options diffrentes selon la version de langage utilise pour la publication
du document.
Synthse
Dans ce chapitre, vous avez appris intgrer des vidos standard dans un document Flash,
transposer des crations vidos composites avec de la transparence dans un document
Flash. Vous avez appris optimiser un flux vido pour le Web et identifier les contraintes
et apports du format FLV pour une utilisation la plus qualitative possible. Vous tes en
mesure de raliser des interfaces de sites riches qui mixent les flux vido avec des contenus
graphiques traditionnels en Flash.
La vido HD en F4V
7
Introduction
Depuis la version 10 (CS4), Flash accepte le codec H-264 travers le format vido F4V. Ce
codec offre une compression dune excellente qualit o les artefacts demeurent presque
imperceptibles. Cette prouesse est telle que lon peut dsormais dployer une vido dans un
format tendu (haute rsolution) sans perdre en qualit daffichage.
Cependant, la diffrence du format FLV, le format F4V ne gre pas la couche transparente
(canal alpha). Le F4V convient donc plus particulirement la diffusion de squences vido
isoles et non composites (extraits de films, introductions, transitions, dcors darrire-plan
anims, interviews, infographies animes).
Dans ce chapitre, nous allons voir comment encoder au format F4V et distribuer des vidos
de haute qualit vers Flash, y compris vers des versions du lecteur a priori incompatibles
avec ce format. Nous aborderons galement quelques astuces qui permettent de compresser
confortablement une vido de grande taille sans perdre sur la qualit du rendu.
Pour lensemble de ces exemples, nous utilisons des crations originales ralises par la
socit gKaster, spcialise dans le Motion Design, et mises amicalement notre disposition
pour cette dmonstration (www.gKaster.com).
lissue de ce chapitre, vous serez en mesure dintgrer des vidos de grande qualit au
sein de documents Flash, y compris danciennes gnrations.
Encoder en F4V avec Adobe Media Encoder

Pour crer un fichier F4V, vous pouvez lchantillonner avec Adobe Media Encoder. Dans
cette section, nous abordons uniquement les rglages spcifiques au format F4V quapporte
ce logiciel. Si vous voulez dcouvrir les rglages de base pour la compression dune vido
pour Flash, communs au format FLV et F4V, reportez-vous au chapitre prcdent, la section
"chantilloner la vido pour Flash".
Exemples > gKaster > gKaster-amusement.mov
Dans cette section, nous dtaillons les options dencodage pour le format F4V, avec le codec
H-264.
1. Lancez lapplication Adobe Media Encoder.
2. Ajoutez, dans la file de rendu, le fichier nomm gKaster-amusement.mov, disponible
dans le dossier gKaster des exemples du livre (voir Figure 7.1).
Figure 7.1
Aperu de la
vido gKaster-
amusement.mov.
3. Dans la fentre de lencodeur Adobe, cliquez directement sur le lien jaune de la colonne
Prdfinir pour accder aux rglages personnaliss (voir Figure 7.2).
Figure 7.2
Fentre Adobe
Media Encoder.
4. La fentre de rglages souvre. Dans la partie droite de la fentre, activez longlet

Multiplexeur pour dfinir le type dencodage Flash (voir Figure 7.3).
Figure 7.3
Fentre Rglages
dexportation,
onglet
Multiplexeur.
LA VIDO HD EN F4V 179

5. Slectionnez loption F4V si celle-ci nest pas dj active.
6. Puis, cliquez sur longlet Vido pour dfinir les rglages relatifs au format F4V (voir
Figure 7.4).
Figure 7.4
Onglet Vido.
Dans la catgorie Vido, nous dcouvrons des options lgrement diffrentes de celles
affiches pour le format FLV.
Onglet Vido
Le document Flash mesure 800 pixels de large. La vido gKaster en fait 960. Nous allons
donc commencer par redimensionner cette vido pour la contenir dans notre document.
1. Cochez dabord loption de redimensionnement homothtique situe droite des
champs Largeur et Hauteur.
2. Puis, inscrivez la valeur 800, dans le champ relatif la largeur. La valeur Hauteur
sadapte automatiquement (voir Figure 7.5).
Dans la partie Rglages vido de base, vous trouverez de nouveaux paramtres, spcifiques
au format F4V.
Le format F4V utilise le codec H-264 (ou MPEG-4 Partie 10/AVC). Ce codec est dvelopp
en commun par le VCEG (Video Coding Expert Group ou groupe dexperts en encodage
vido), lITU-T (International Telecommunications Union, Telecommunications Standardi-
zation Sector ou le dpartement standardisation de lunion internationale des tlcommuni-
cations) et le MPEG (Movie Picture Expert Group ou le groupe dexperts en images
animes). Il se prsente comme une amlioration du codec MPEG-2 et MPEG-4 et repose
sur le principe suivant.
Figure 7.5
Rglages vido
de base (F4V).
Lorsquune compression classique nutilise quune image-cl de rfrence pour dfinir les
zones qui changent dune image sur lautre (codage diffrentiel), le H-264 peut utiliser
jusqu quatre images de rfrence. Cette logique lui permet de dtecter le mouvement glo-
bal, sur la dure, de groupes de pixels entiers, et de ne coder que lemplacement de ces
groupes et non la teneur colorimtrique de chaque pixel qui compose chaque groupe. Ainsi,
quand une scne se rpte lintrieur dune vido, ou si plusieurs vnements graphiques
identiques sont reproduits ou en mouvement sur diffrentes images-cls, ces vnements ne
sont cods quune fois (voir Figure 7.6). Cela permet de compacter largement les vidos
longues aux effets rptitifs, ou dont la nature des images reprend toujours le mme type
dinformations, quelles soient mobiles ou non (un sujet frontal sur un fond blanc, mme en
mouvement, sera peu gourmand en poids, par exemple). Une compression H-264 applique
une vido perd ainsi environ 80 % de son poids lorsquune vido compresse en MPEG-4
Partie 2 nen perd que 50 %, et sans diffrence de qualit entre les deux modes de compression.
Figure 7.6 Image-cl 1 Image-cl 2 Image-cl 3 Image-cl 4
Reprsentation
du principe de
lalgorithme
H-264.
x1
Les blocs, qui fondent la base de lalgorithme H-264, sont constitus de 16 pixels (4 4).
Outre lavantage observ sur le poids du fichier, cette technique permet galement de facili-
ter et stabiliser la lecture du flux vido surtout lorsquelle est diffuse en ligne. Car chaque
paquet peut ainsi tre lu indpendamment des autres et contribue remplir automatiquement
les trous rsiduels ventuellement obtenus en cas de rupture de flux.
Ces blocs sont utiliss pour dfinir les images-cls de rfrence. Si une portion de limage
se rpte ailleurs, lalgorithme identifie les nombreuses occurrences identiques de la zone

de base et la reproduit virtuellement, mme dans une image-cl. Cela allge donc aussi le
poids des images-cls.
Le H-264 offre enfin un ventail de compression suffisamment large pour tre employ pour
des flux de haute rsolution, avec une frquence dimage leve (diffusion HD), aussi bien
que pour des flux trs rduits et de faible dfinition (appareils mobiles).
De nombreuses options de compression sont possibles pour le H-264. Deux options essen-
tielles sont disponibles dans lencodeur Adobe : le profil et le niveau.
Profil
Le codec H-264 possde initialement sept profils de compression permettant de coder les
images de faible rsolution aux images haute rsolution. Les profils disponibles sont de
qualit croissante et slectionner en fonction de la dimension de la vido. Parmi ces sept
profils propres au H-264, Adobe Media Encoder en propose trois : ligne de base, principal
et lev (voir Figure 7.7).
Figure 7.7
Slection
dun profil.
Ligne de base. Ce profil est adapt aux contenus vidos destination dappareils fai-
bles ressources (appareils nomades, mobiles, visio-confrence, camras rseau). Le
temps de latence de ce profil (temps requis pour compresser et dcompresser le signal)
est faible. Ce profil est donc tout particulirement adapt pour lencodage en direct de
mouvements rapides (zoom, inclinaisons, vues panoramiques).
Principal. Ce profil est adapt aux contenus destination du Web, de la diffusion en vrai
et faux streaming de contenus dj enregistrs. Ce profil possde des capacits de robus-
tesse la perte de donnes qui en fait loption idale pour la vido diffuse en ligne.
lev. Ce profil est utilis pour la diffusion et le stockage sur disque, lencodage Blue-
Ray, HD-DVD et la tlvision haute dfinition franaise. Il convient galement la dif-
fusion de contenu en ligne de trs haute qualit, pour lesquels on prvoit un chargement
de la vido avant den activer la lecture, pour la V.O.D. par exemple.
Niveau
Selon les dimensions de la vido, nous dterminons un niveau (Level) sur une chelle de 1 5.1.
Plus limage encoder est grande, plus le niveau doit tre lev (voir Figure 7.8).
Figure 7.8
Slection
dun niveau
Dans le Tableau 7.1, la valeur de niveau slectionner est dfinie en fonction de la rsolu-
tion de limage et sa cadence. Pour notre exemple, conservez les valeurs par dfaut.
Tableau 7.1 : Niveaux en H-264 (extrait de la page http://fr.wikipedia.org/wiki/

H.264#Levels)
Nombre maximum Dbit maximum en bits Dbit maximum en Exemples de dfinition
Niveau de macro-blocs pour les profils Ligne bits pour le profil et dimages par
lus par seconde de base et Principal lev seconde par niveau
128 96/30.9
1 1485 64 Kbit/s 80 Kbit/s
176 144/15.0
128 96/30.9
1b 1485 128 Kbit/s 160 Kbit/s
176 144/15.0
176 144/30.3
1.1 3000 192 Kbit/s 240 Kbit/s
176 240/10.0
176 144/60.6
1.2 6000 384 Kbit/s 480 Kbit/s 320 240/20.0
352 288/15.2
1.3 11880 768 Kbit/s 960 Kbit/s 352 288/30.0
2 11880 2 Mbit/s 2.5 Mbit/s 352 288/30.0

Tableau 7.1 : Niveaux en H-264 (extrait de la page http://fr.wikipedia.org/wiki/
H.264#Levels) (suite)
Nombre maximum Dbit maximum en bits Dbit maximum en Exemples de dfinition
Niveau de macro-blocs pour les profils Ligne bits pour le profil et dimages par
lus par seconde de base et Principal lev seconde par niveau
352 480/30.0
2.1 19800 4 Mbit/s 5 Mbit/s
352 576/25.0
720 480/15.0
2.2 20250 4 Mbit/s 5 Mbit/s
352 576/25.6
720 480/30.0
3 40500 10 Mbit/s 12.5 Mbit/s
720 576/25.0
1 280 720/30.0
3.1 108000 14 Mbit/s 17.5 Mbit/s
720 576/66.7
3.2 216000 20 Mbit/s 25 Mbit/s 1 280 720/60.0
1 920 1 080/30.1
4 245760 20 Mbit/s 25 Mbit/s
2 048 1 024/30.0
1 920 1 080/30.1
4.1 245760 50 Mbit/s 62.5 Mbit/s
2 048 1 024/30.0
1 920 1 080/64.0
4.2 522240 50 Mbit/s 62.5 Mbit/s
2 048 1 088/60.0
1 920 1 080/72.3
5 589824 135 Mbit/s 168.75 Mbit/s
2 560 1 920/30.7
1 920 1 080/120.5
5.1 983040 240 Mbit/s 300 Mbit/s
4 096 2 048/30.0
Onglet Audio
Le format F4V offre une compression audio de bien meilleure qualit que le FLV. Le codec
AAC, suprieur la qualit du MP3, propose une profondeur de son plus tendue, proche de
celle dun CD audio, mais naturellement, de poids lgrement plus lev. Cest aussi le
codec employ par Apple et RealNetWorks pour la diffusion de leurs contenus audios. Pour
contrler la compression audio, nous considrons vritablement deux paramtres : la fr-
quence et le dbit (voir Figure 7.9).
Frquence. La frquence indique le nombre de fois quune ponction dchantillons
sonores est effectue par seconde ( ne pas confondre avec la longueur donde qui repr-
sente la sonorit elle-mme). Plus la frquence est leve, plus lon peut distinguer les
variations du son sur une dure donne. Mais plus cela augmente ncessairement le
poids du fichier.
Dbit. Le dbit consiste synthtiser les informations en les arrondissant aux valeurs num-
riques les plus proches. Plus la compression du dbit est forte, plus la reprsentation du son
est grossire et perd en nuances, mme avec une frquence leve.
Figure 7.9
Rglages Audio
(F4V).
Les paramtres de rglage affichs sont ceux dfinis par dfaut pour le prrglage partir
duquel nous effectuons cette compression. Ces prrglages sont ceux affichs dans le menu
Prconfiguration, au sommet de la fentre dencodage, ou bien dans la liste Prdfinir, de la
file dattente de rendu. Selon le type de prrglage choisi, vous nobserverez pas, par cons-
quent, les mmes taux de compression.
1. Conservez pour cet exemple les valeurs par dfaut.
2. Puis, refermez la bote de dialogue des rglages de compression en cliquant sur OK.
3. Lancez le rendu en activant le bouton Dmarrer la file dattente.
4. Puis, quittez lapplication.
Seuls des tests de rendu effectus en rel vous donneront une ide du rsultat obtenu.
Nhsitez pas dupliquer le rglage dans la file dattente de rendu et y appliquer diffrents
paramtres de compression audio pour ne retenir que celui qui vous convient le mieux.
retenir
Le format F4V offre une grande souplesse de compression qui permet dadapter la vido tout type
de support, dune projection HD une image rduite pour appareil mobile, sans perte de qualit.
Le format F4V ne permet pas la gestion de la transarence (couche alpha).
Lencodage audio, en F4V, est suprieur en qualit au codage MP3 du format FLV.
Si nous intgrons la vido avec un composant FLVPlayback, le format F4V requiert un lecteur
Flash rcent.
Encodage F4V avec Quick Time

Cela fait dj longtemps quil est possible dexporter avec une compression H-264 depuis
Quick Time. Le format vido F4V de Flash qui repose sur le codec H-264, peut donc aussi
tre gnr depuis un fichier Quick Time et tre intgr un composant Flash FLVPlay-
Back, il sera normalement interprt. Pour viter les messages possibles davertissement et
de scurit de Flash, lors de lintgration de la vido, songez substituer lextension

obtenue avec Quick Time par .f4v. Mais, mme sans en modifier lextension, le fichier
pourra nanmoins tre lu comme un fichier F4V.
Exemples > gKaster > gKaster-amusement.mov
Dans cette section, nous dtaillons le moyen dencoder une vido, partir de Quick Time,
au format F4V, pour Flash.
1. Pour exporter la vido au format H-264 avec Quick Time, dans Quick Time, faites
Fichier > Exporter.
2. Dans la bote de dialogue denregistrement, cliquez sur le bouton options (voir Figure 7.10).
Figure 7.10
Fentre dexpor-
tation Quick
Time.
3. Dans la bote de rglages, cliquez sur Rglages de la catgorie Vido (voir Figure 7.11).
Figure 7.11
Rglages de la
squence.
4. Puis, dans la fentre dencodage, dans le menu Type de compression, slectionnez H-264.
5. Dans les options de rglages pour le type H-264, choisissez Passes multiples et une qua-
lit leve, ainsi quun nombre dimage-cls automatique (voir Figure 7.12). Puis, validez.
Figure 7.12
Compression
H-264.
Puisque le document Flash dont nous disposons mesure 800 pixels de large, nous pouvons
galement redimensionner ici la vido en activant loption taille :
1. Cliquez sur le bouton Taille.
2. Dans la nouvelle bote de dialogue, spcifiez une taille personnalise. Puis, dans les
champs situs droite, inscrivez manuellement les valeurs 800 et 450.
Les options de proportions permettent de rogner et dformer ou non la vido afin quelle
sadapte aux nouvelles dimensions. Loption Letterbox ajoute du noir de part et dautre si
les proportions ne sont pas prserves. Dans notre cas, elles le sont. Cette option naura
donc aucun effet. Vous pouvez donc valider (voir Figure 7.13).
Figure 7.13
Compression
H-264.
La bote de dialogue doptions affiche maintenant les informations en rapport avec la com-
pression H-264 (voir Figure 7.14).

Figure 7.14
Compression
H-264.
Attention, Quick Time conserve par dfaut les prcdents rglages lors de chaque nouvelle compres-
sion. Lorsque vous encoderez un nouveau document, pensez initialiser le redimensionnement pour
viter daffecter votre nouveau fichier.
Validez galement la fentre doptions. Puis, renommez le fichier "gKaster-amusement-

h264.mov" et confirmez lenregistrement. Lencodage se termine. La vido peut tre appele
directement depuis Flash, via un composant FLVPlayBack (voir Figure 7.15).
Figure 7.15
Lecture dune
vido Quick Time
H-264 dans un
document Flash.
Les formats pris en charge par le composant FLVPlayBack (publi dans un document configur
pour ActionScript 3) sont : FLV, F4V, MP4, M4A, MOV, MP4V, 3GP et 3G2.
retenir
Quick Time permet dexporter facilement une vido avec un encodage H-264 directement lisible par
le composant FLVPlayback de Flash CS4.
Crer un lecteur vido personnalis

Dans Flash, en utilisant le composant vido en vue dintgrer une vido FLV ou F4V, une
console de lecture est disponible par dfaut. Elle permet de contrler la vido sans program-
mation spcifique. Diffrents types de consoles sont disponibles travers le paramtre Skin
accessible dans lInspecteur de composants de chaque vido active.
Si vous utilisez une Skin prdfinie, noubliez pas que Flash gnre un fichier SWF pour
chacune delle et quil ne faudra pas manquer de placer ce fichier sur le serveur dhberge-
ment, en mme temps que votre document SWF de base et votre vido, sans quoi la console
napparatrait pas.
Lorsque vous utilisez une Skin prdfinie, Flash importe en ralit un fichier SWF quil gnre la
vole, selon le type de Skin slectionn dans la fentre Inspecteur de composants. Ces boutons sont
standardiss. Mais vous pouvez modifier la forme intrinsque des boutons dj encapsuls dans ces
Skins prdfinies. Pour ce faire, dans le moteur de recherche de votre systme, saisissez le nom de la
Skin gnre par Flash la publication (par exemple SkinOverAll). Puis, reprez lemplacement du
fichier FLA, natif, ayant permis Flash de gnrer ce fichier. Il suffit douvrir ce FLA dans Flash, de le
modifier et de publier un nouveau fichier en lieu et place du prcdent. La console accessible depuis
votre composant est instantanment mise jour.
Pour personnaliser la forme des boutons, nous pouvons utiliser de simples symboles crs
manuellement ou bien recourir des composants spars qui contrlent la lecture de la
vido. Ces composants sont galement disponibles depuis la fentre des composants.
Lavantage de ces lments est quils disposent dj dune structure anime (effet "roll-
Over" intgr) et dactions de contrles prprogramms.
Dans cette section, nous prsentons uniquement ces boutons prprogramms. Nous revenons
sur les actions gres manuellement en ActionScript, au Chapitre 8.
Exemples > ch7_videoHD_3.fla
Dans le document "ch7_videoHD_3.fla", sur la scne, un composant vido apparat au-dessus

des boutons de contrle personnaliss (voir Figure 7.16).
Dans le scnario, au-dessus du calque fond_mc, chaque symbole ou composant est rparti
vers un calque distinct (voir Figure 7.17). Ils possdent des noms doccurrence, mais cela
est facultatif puisquaucune action nest associe ces objets sinon celles dj encapsules
dans les composants boutons eux-mmes.

Figure 7.16
Composant
FLVPlayBack
avec boutons
personnaliss.
Figure 7.17
Fentre
de scnario.
Pour insrer des boutons prdfinis, prts utiliser, vous devez placer des lments de la
fentre Composants, sur la mme scne que celle o figure le composant vido FLVPlay-
Back. Flash, au moment de la publication, va automatiquement tablir une liaison entre le
composant vido et les boutons qui sy rfrent.
Pour placer des boutons prprogramms sur la scne, affichez la fentre des composants via
Fentre > Composants (voir Figure 7.18). Puis, dans la catgorie Vido, slectionnez le
bouton de votre choix. Puis, glisser-dposez les boutons individuellement sur la scne o se
trouve le composant FLVPlayBack.
Figure 7.18
Fentre
Composants.
Double-cliquez ensuite, dans la scne, sur chacun dentre eux jusqu atteindre le graphisme
modifiable pour ventuellement les personnaliser. Enregistrez et publiez. Les boutons insrs
contrlent la vido (voir Figure 7.19).
Figure 7.19
Aperu du
document aprs
publication.
Dfinition des composants associs FLVPlayBack

Vido
Voici les commandes disponibles sous la forme de boutons prdfinis, depuis la fentre Composants
et leur dfinition :
BackButton. Bouton qui permet thoriquement de rembobiner le flux vido. En ralit, il renvoie la
premire image du flux vido (en progressif).
BufferingBar. Barre de progression de mise en cache de la vido. Elle avance mesure que la
vido est charge dans le cache du navigateur et signale lutilisateur la possibilit de naviguer
lintrieur du flux dj mis en cache.
CaptionButton. Utilis avec le composant FLVPlayBack Captionning pour raliser des sous-
titrages (voir Chapitre 8).
ForwardButton. Bouton dacclration de la lecture de la vido. Attention, en flux progressif,
seule la partie dj charge peut tre atteinte par lutilisateur.
FullScreenButton. Active lAffichage en mode plein cran du contenu vido (voir aussi le Cha-
pitre 15 pour la gestion du mode daffichage en plein cran).
MuteButton. Permet de stopper laudio et de le ractiver, sur le mme bouton.
PauseButton. Arrte la lecture du flux vido, sans interrompre la connexion au serveur. La mise
en cache se poursuit de manire transparente.
PlayButton. Lit ou reprend la lecture dun flux vido.
PlayPauseButton. Propose sur le mme bouton, une fonctionnalit de lecture de la vido lorsque
celle-ci est en pause, et de mise en pause lorsquelle est en lecture.

SeekBar. Barre de progression de la lecture de la vido. la diffrence du composant Buffering-
Vido
Bar, la barre affiche la position courante de la vido dans la scne. Lutilisateur peut dplacer la
tte de lecture pour atteindre un autre extrait de la bande vido, dans la mesure, toujours, o le
contenu appel en flux progressif est dj charg par le navigateur.
StopButton. Arrte la lecture vido et interrompt aussi son chargement. Cela libre le canal et
les ressources graphiques sollicites pendant la lecture de la vido.
VolumeBar. Modifie le volume sonore de laudio inclus dans la vido.
Il se peut que vous cherchiez intgrer une vido dans un fichier SWF, lui-mme import dans un
autre document SWF. Le fait de supprimer le SWF charg dans la liste daffichage (avec removeChild)
ne permet pas, dans ce cas, dinterrompre la lecture de la vido. Pour ce faire, il convient dassocier,
la vido, des contrles supplmentaires en ActionScript. Nous dtaillons ces contrles au chapitre
suivant.
retenir
Le composant FLVPlayBack met disposition des consoles de lecture de la vido, personnalisables
si lon dite le FLA utilis pour les gnrer, partir du document source disponible dans le dossier de
lapplication Flash.
Des boutons composants sont utilisables individuellement et peuvent tre personnalises directe-
ment depuis linterface auteur, dans le scnario. Il ne requirent en outre aucune programmation
spcifique pour fonctionner.
Crer un lecteur vido H-264 pour Flash 6 et plus

Si lutilisation du composant offre une plus grande souplesse de manipulation pour des for-
mats standards comme le FLV et le F4V, il ne permet pas de lire des fichiers vido cods en
H-264 avec des versions de documents antrieures la version 10 (CS4), car le codec H-264
nest implment dans le composant FLVPlayBack que depuis cette version.
Pour permettre de lire un flux HD (H-264) dans des versions de Flash antrieures
Flash 10, nous crons un lecteur vido manuellement, en ActionScript, laide de la classe
NetStream. Cette classe tant apparue avec Flash 6, nous pouvons programmer laffichage
de la vido en haute dfinition partir de Flash 6 et pour les versions ultrieures.
Exemples > ch7_videoHD_4.fla
Dans le document "ch7_videoHD_4.fla", sur la scne, apparat une vido vide et transpa-
rente. Cest un objet vido import de la bibliothque et utilis avec la classe NetStream
(voir Figure 7.20). droite et en bas, deux boutons lire_btn et pause_btn sont super-
poss.
Figure 7.20
Aperu de la
scne principale.
Dans la fentre de scnario, au-dessus du calque fond_mc, un calque affiche lobjet vido.
Deux calques distribuent respectivement les deux boutons lire_btn et pause_btn. Un
autre calque affiche les actions (voir Figure 7.21).
Figure 7.21
Aperu
du scnario de la
scne principale.
Les proprits du document affichent enfin un format dexportation Flash 6 et ActionScript

en version 2 (voir Figure 7.22).
Les objets vido sont nativement disponibles dans tous les documents Flash, depuis la
bibliothque. Lobjet qui figure dans ce document est donc extrait de la bibliothque. Pour
extraire un objet vido de la bibliothque, procdez comme suit :
1. Affichez la bibliothque (Fentre > Bibliothque ou Cmd+L sur Mac ou Ctrl+L sur
Windows).
2. Pour insrer un objet vido, supprimez ventuellement lobjet dj en place sur la scne
et dans la bibliothque.
3. Dans le menu contextuel de la bibliothque, slectionnez loption Nouvelle Vido (voir
Figure 7.23).
4. Dans la bote de dialogue, attribuez un nom dobjet, par exemple ecranVideo (voir
Figure 7.24). Puis validez.

Figure 7.22
Aperu des
proprits de la
scne principale.
Figure 7.23
Cration dun
nouvel objet
Vido.
Figure 7.24
Proprits
de la vido.
5. Le nouvel objet apparat dans la bibliothque (voir Figure 7.25).
Figure 7.25
Fentre
Bibliothque.
6. Glisser-dposez cet objet sur la scne et, depuis lInspecteur de proprits, donnez-lui
un nom doccurrence, par exemple : ecranVideo. Puis, redimensionnez-le la taille du
flux vido importer, par exemple 800 450 pixels (voir Figure 7.26).
Figure 7.26
Proprits de
loccurrence de
lobjet vido plac
sur la scne.

Dans la fentre Actions, nous pouvons lire le code suivant, en ActionScript 2 :
// Lecteur vido Flash6
connexion = new NetConnection();
connexion.connect(null);
chargementContinu = new NetStream(connexion);
ecranVideo.attachVideo(chargementContinu);
chargementContinu.play("gKaster/gKaster-amusement.f4v");
// gestion du bouton Play/Pause
lire_btn._visible=false;
pause_btn._visible=true;
lire_btn.onPress=function () {
chargementContinu.pause();
}
pause_btn.onPress=function () {
lire_btn._visible=true;
pause_btn._visible=false;
}
Ce code est structur en deux parties. La premire gre laffichage de la vido. La seconde
organise les boutons lire_btn et pause_btn qui contrlent la vido.
Dans la premire partie, nous spcifions dabord, sans typage spcifique (AS2 autorise), une
variable intitule connexion qui dsigne lactivation dun flux Internet distant :
connexion = new NetConnection();
Plus loin, nous initialisons cette connexion :

connexion.connect(null);
La valeur null, renseigne en paramtre, spcifie que lon se connecte en relatif sur le
mme emplacement que la source SWF. Sinon il serait galement possible duser de http://
ou de rtmp:// pour dsigner une rfrence absolue.
Puis, nous crons une deuxime variable qui active le transfert dun flux chargement pro-
gressif (faux streaming). Nous prcisons, en paramtre de la mthode NetStream que ce
flux concerne la connexion pralablement dfinie :
chargementContinu = new NetStream(connexion);
Nous attachons ensuite ce flux progressif loccurrence vido qui figure sur la scne
(ecranVideo) :
ecranVideo.attachVideo(chargementContinu);
Enfin, nous spcifions que ce flux doit lire le fichier localis dans le chemin dfini entre les
guillemets :
chargementContinu.play("gKaster/gKaster-amusement.f4v");
Mme si le format F4V, comme nous lavons prcis, nest pas reconnu dans les anciennes
versions de Flash, ce qui est appel ici est bien un fichier encod en H-264. Flash, en ralit,
fait abstraction de lextension lors de la lecture de vidos. Cest pourquoi nous pouvons
appeler directement le fichier nomm F4V. Le composant FLVPlayBack des anciennes
versions ne sait pas interprter le F4V, mais la classe NetStream, elle, le fait.
Dans la seconde partie du code, deux actions contrlent chaque bouton individuellement.
Le premier, lire_btn, se masque lui-mme et affiche le bouton pause_btn. Simultanment, il
reprend la lecture l o elle tait arrte grce la mthode pause() :
lire_btn.onPress=function () {
}
De mme, le bouton pause_btn se fait disparatre et raffiche le bouton lire_btn tout en

interrompant la lecture en cours :
pause_btn.onPress=function () {
lire_btn._visible=true;
pause_btn._visible=false;
}
linitialisation, puisque la vido est lue ds le chargement, juste avant les actions atta-
ches aux deux boutons, nous spcifions que le bouton pause_btn est visible et que
lire_btn est masqu :
En publiant le document, la vido F4V joue instantanment en haute dfinition dans un

document Flash 6 cod en ActionScript 2. Les boutons lire et pause contrlent la vido (voir
Figure 7.27).
Figure 7.27
Lecture dune
vido Quick Time
H-264 dans un
document Flash.

retenir
Il est possible de publier une vido en haute dfinition pour un lecteur Flash 6 ou de version ult-
rieure. Pour cela, nous utilisons la classe NetStream.
Pour contrler la lecture du flux vido HD avec NetStream, nous codons et exportons en ActionScript 2.
Agrandir une vido sans perte

La difficult de la vido pour le Web rside dans le bon compromis entre une compression
avec une contenu accessible et une qualit qui, elle, valorise le contenu au dtriment de
laccessibilit. Avec des vidos traites en haute dfinition, le compromis devient presque
impossible rsoudre dans des contextes o limage est trs riche (prsence de bruit
continu, images toutes diffrentes, audio avec une belle amplitude, animation de dure
consquente, etc). Pour permettre une compression forte tout en conservant lillusion dune
image de qualit, il existe une astuce. Comme dans ldition papier, et dans la presse quoti-
dienne en particulier, pour compenser la perte engendre par une image allge, nous lui
appliquons une trame.
Vous pouvez appliquer une trame dans Flash au moyen dune image trame et transparente
place dans un MovieClip auquel vous appliquez une proprit daffichage de type Incrus-
tation ou Produit. Mais, cela sollicite de manire importante la carte vido de lutilisateur.
Nous prfrons alors intgrer cette trame directement dans le flux vido :
1. Dans un logiciel graphique, comme Photoshop, dessinez cette trame en reproduisant sur
une image de dimensions identiques celles de la vido, un motif (un filet, un damier,
des points, des croix ou un effet trame de demi-teinte, par exemple) voir Figure 7.28.
Figure 7.28
Cration dans
Photoshop dune
trame de type
filaire.
2. Puis, exportez cette image en PNG-24, afin den prserver la transparence, en faisant
Fichier > Exporter pour le Web et les priphriques.
3. Dans la bote de dialogue denregistrement, droite, slectionnez loption PNG-24 et
spcifiez bien une transparence en cochant cette option (voir Figure 7.29).
Figure 7.29
Exporter au
format PNG-24,
avec la transpa-
rence.
4. Dans After Effects par exemple, importez limage en faisant Ctrl+I (Windows) ou
Cmd+I (Mac).
5. Puis, glissez limage sur la vido dj en place dans la scne (voir Figure 7.30). Au
besoin, ajustez le paramtre Mode disponible sur le calque dans le scnario, en choisis-
sant un mode de type Produit, Incrustation ou autre.
Figure 7.30
Appliquer la
trame sur la
vido, dans After
Effects.
6. Puis, encodez la vido.

Pour le logiciel Motion, procdez de mme.
1. Depuis la fentre Bibliothque, glisser-dposez limage ralise dans Photoshop sur
votre scne.
2. Puis, exportez la vido au format Quick Time.

retenir
Pour agrandir une vido, nous conservons une compression forte, mais compensons laffichage par
lajout dun tramage.
Il est prfrable dintgrer ce tramage dans le flux du signal vido plutt que dans le document
Flash afin doptimiser les ressources graphiques de lutilisateur.
Synthse
Dans ce chapitre, vous avez appris grer laffichage de flux vido en haute dfinition,
cods en H-264, avec Adobe Media Encoder ou tout autre type de source et notamment avec
les solutions Apple. Vous avez galement appris intgrer une vido HD pour les anciennes
versions de Flash, jusqu la version 6. Vous avez appris personnaliser les boutons de
contrle de lecture dune vido et contourner les contraintes de poids lies une forte
compression grce des astuces inspires de lunivers de la presse. Vous tes mesure de
raliser dsormais des sites contenant des vidos de qualit professionnelle et haut de gamme,
compatibles avec toutes les configurations dutilisateur.
La vido interactive
8
Introduction
Tout lintrt de lintgration de la vido dans Flash, quelle soit standard, composite ou en
haute dfinition, est quen plus doffrir un espace confortable pour son affichage, vous pou-
vez y associer des comportements. Dans ce chapitre, nous allons voir comment interagir
avec la vido aussi bien travers la navigation (sur actions de lutilisateur) qu travers des
vnements (sur des actions excutes par la vido durant son droulement). En plus de
toute cette interactivit, nous allons aborder la manire de raliser une boucle et comment,
dans le contexte de contenus SWF imbriqus, interrompre rellement le flux vido.
lissue du chapitre, vous serez en mesure de crer des interfaces vido interactives riches, en
ligne, mais aussi pour des systmes hors ligne.
Dans ce chapitre, nous utilisons la bande dmo de la socit gKaster, gnreusement mise
disposition pour cette prsentation (www.gKaster.com).
Contrles de base de la vido

Les premires actions ncessaires pour la gestion dune vido sont les contrles de lecture.
Dans cette premire section, nous abordons les actions qui permettent de lire, arrter, acc-
lrer et rembobiner un flux vido, mais aussi modifier le volume sonore dune vido associe
un composant FLVPlayBack.
Exemples > ch8_videoInteractive_1.fla
Dans le document "ch8_videoInteractive_1.fla", sur la scne, un composant vido joue

la bande dmo de la socit gKaster. Au-dessous, une console contient diffrents bou-
tons qui contrlent le flux vido (voir Figure 8.1). Dans cette console, chaque symbole
est dispos sur un calque spar et possde un nom doccurrence lui permettant de rece-
voir une action. Le symbole audio_mc, lui, contient deux MovieClip qui affichent cha-
cun un tat activ ou non activ, pour le contrle du son. Ils possdent galement leur
propre nom doccurrence.
Dans la fentre de scnario de la scne principale, au-dessus du calque fond_mc, apparaissent
la console, le composant et un calque actions (voir Figure 8.2).
Figure 8.1
Aperu aprs
publication.
Figure 8.2
Aperu du
scnario de la
scne principale.

// lecture automatique
ecranVideo.autoPlay=true;
// mise en cache
ecranVideo.bufferTime=3000;
// lire
console_mc.lire_btn.addEventListener(MouseEvent.CLICK,jouerVideo);
function jouerVideo (evt:MouseEvent) {
ecranVideo.play();
}
// arrter
console_mc.stop_btn.addEventListener(MouseEvent.CLICK,stopperVideo);
function stopperVideo (evt:MouseEvent) {
ecranVideo.stop();
}
// suite
console_mc.suite_btn.addEventListener(MouseEvent.CLICK,suiteVideo);
function suiteVideo (evt:MouseEvent) {
ecranVideo.seek(ecranVideo.playheadTime+2)
}
LA VIDO INTERACTIVE 203

// retour
console_mc.retour_btn.addEventListener(MouseEvent.CLICK,retourVideo);
function retourVideo (evt:MouseEvent) {
ecranVideo.seek(ecranVideo.playheadTime-2)
}
// Audio
console_mc.audio_mc.audioOff_mc.visible=false;
console_mc.audio_mc.audioOff_mc.buttonMode=true;
console_mc.audio_mc.addEventListener(MouseEvent.CLICK,audioVideo);
function audioVideo (evt:MouseEvent) {
if (ecranVideo.volume>0) {
ecranVideo.volume=0;
evt.target.visible=false;
console_mc.audio_mc.audioOff_mc.visible=true;
} else {
console_mc.audio_mc.audioOn_mc.visible=true;
}
}
Voici le descriptif dtaill des diffrentes fonctionnalits rassembles dans cette console.
Lecture automatique
La premire ligne spcifie si le composant nomm ecranVideo doit jouer automatiquement
ds laffichage de lanimation (true) o sil doit attendre une action de lutilisateur
(false). Laction est active sur true. La vido joue donc automatiquement ds la
publication :
// lecture automatique
ecranVideo.autoPlay=true;
Mise en cache
Une seconde action affecte directement le signal vido contrl par le composant vido.
Cest la mise en cache. La proprit bufferTime permet dindiquer le nombre de millisecondes
attendre avant dexcuter la lecture du flux vido. Cette indication permet de rduire les
risques de rupture de flux pour les connexions faibles. Ici, la valeur porte 3 000 dsigne une
attente de trois secondes avant le dmarrage de la vido :
// mise en cache
ecranVideo.bufferTime=3000;
La valeur assigne par dfaut la proprit bufferTime est 5 000. Elle ne peut pas tre
modifie depuis lInspecteur de composants.
Lire la vido
Plus loin, un couteur est attach au symbole bouton lire_btn et indique de lire le flux
vido avec laction play() :
// lire
console_mc.lire_btn.addEventListener(MouseEvent.CLICK,jouerVideo);
function jouerVideo (evt:MouseEvent) {
ecranVideo.play();
}
Arrt de la vido
la suite, un couteur est attach au symbole bouton stop_btn et indique de stopper la
progression du flux avec laction stop() :
// arrter
console_mc.stop_btn.addEventListener(MouseEvent.CLICK,stopperVideo);
function stopperVideo (evt:MouseEvent) {
ecranVideo.stop();
}
stop interrompt galement la mise en cache. Pour arrter et reprendre la lecture de la vido
sans interrompre sa mise en cache, utilisez pause().
Acclrer la vido
Il est possible dacclrer la lecture de la vido en positionnant la tte de lecture de la vido
une image plus loigne que limage courante. Pour effectuer ce calcul, nous affectons
dabord la proprit playheadTime au composant vido pour permettre de capturer la posi-
tion courante de la tte de lecture. Puis, nous augmentons la valeur, obtenue par cette pro-
prit, de quelques images ou secondes. Nous passons ensuite directement cette valeur en
paramtre de la mthode seek() qui permet de repositionner la tte de lecture dans la
vido :
// suite
console_mc.suite_btn.addEventListener(MouseEvent.CLICK,suiteVideo);
function suiteVideo (evt:MouseEvent) {
ecranVideo.seek(ecranVideo.playheadTime+2)
}
Les valeurs que nous passons en paramtre sont des nombres. La mthode seek() renvoie
la tte de lecture une position qui correspond toujours limage-cl suivante la plus pro-
che dans le flux vido. La prcision du ciblage dpend donc directement du nombre dimages-
cls encodes dans le flux vido.
La vido que nous traitons a t encode avec un nombre dimages-cls dfini sur Automa-
tique. Cette valeur, dans Adobe Media Encoder, spcifie en ralit un intervalle de deux
secondes entre chaque image-cl. Pour obtenir une navigation plus prcise que par pas de
deux secondes, il convient donc de revenir sur la compression en modifiant cette valeur un
intervalle plus serr. Rappelez-vous cependant que plus un intervalle est serr, plus lenco-
deur ajoute des images-cls. Or, chaque image-cl augmente le poids et, poids gal, taux

de compression gal, dbit gal, lajout dimages-cls rduit la place disponible pour
encoder les autres images. Cela dtriore donc lensemble de la vido. Un paradoxe que
lon peut rsoudre trs simplement : en augmentant les valeurs des rglages de compression
et de dbit.
Le pas dincrmentation utilis dans notre exemple est 2 (deux secondes). La tte de lecture
est donc dplace limage-cl la plus proche deux secondes dintervalle aprs la position
courante du flux vido et reprend la lecture de la vido partir de cette image.
Dans notre exemple, le repositionnement appelle donc toujours la deuxime image-cl
situe aprs la position courante de la tte de lecture et poursuit la lecture de la vido partir
de cette image, car cest toujours limage-cl suivante, la plus proche de limage invoque,
qui est affiche.
Notez quune valeur de recherche leve et une vido avec des plans assez longs peuvent
contribuer masquer le manque de prcision induit par la mthode seek() et par un type de
compression impliquant un faible nombre dimages-cls.
Rembobiner la vido
De la mme manire que nous pouvons acclrer la vido, nous la rembobinons avec la
mthode seek() et la proprit playheadTime. Mais, ici, nous retranchons la valeur la
position courante du flux vido de sorte revenir deux seconde en arrire, chaque clic sur
le bouton retour :
// retour
console_mc.retour_btn.addEventListener(MouseEvent.CLICK,retourVideo);
function retourVideo (evt:MouseEvent) {
ecranVideo.seek(ecranVideo.playheadTime-2)
}
Modifier le volume audio

La mthode volume() permet de modifier le volume sonore global de la vido. La valeur
passer en paramtre est 1 pour un volume normal et 0 pour un son muet. Les valeurs dci-
males intermdiaires permettent de nuancer le volume.
Dans notre exemple, dans le MovieClip console_mc, nous pouvons identifier le symbole
audio_mc. Ce dernier contient lui-mme deux autres clips dont audioOff_mc qui affiche un
trait rouge et audioOn_mc qui reste neutre.
Nous spcifions ici quen cliquant sur chaque symbole contenu dans audio_mc (evt.tar-
get), nous modifions le volume audio de la vido. Au premier clic, le son devient muet, et
au suivant, il redevient normal, et ainsi de suite. Une condition permet de vrifier si le
volume est dj muet ou non et inverse la valeur selon le rsultat.
Pour que le dispositif soit plus ergonomique, nous ajoutons un contrle de visibilit sur cha-
cun des boutons de sorte que lun disparat chaque fois quon lactive, et laisse alors
lautre prendre sa place :
// Audio
console_mc.audio_mc.addEventListener(MouseEvent.CLICK,audioVideo);
function audioVideo (evt:MouseEvent) {
} else {
}
}
Augmenter et diminuer progressivement le son
Nous avons vu quil est possible de modifier une valeur en lincrmentant au sein dun
gestionnaire de type Event.ENTER_FRAME (voir Chapitre 1). Vous pouvez donc aussi
modifier le son, sur action utilisateur, en appelant un couteur qui active la modification
de laudio tant que celui-ci natteint pas une certaine valeur. Nous utilisons pour ce faire
un gestionnaire de type Event.ENTER_FRAME et des structures conditionnelles. Nous
obtenons ceci :
// Audio
console_mc.audio_mc.audioOn_mc.addEventListener(MouseEvent.CLICK,fonctionBaisser);
function fonctionBaisser (evt:MouseEvent) {
addEventListener(Event.ENTER_FRAME,reduireAudio);
}
//
function reduireAudio (evt:Event) {
ecranVideo.volume-=0.01;
trace(ecranVideo.volume)
if (ecranVideo.volume<=0.01) {
removeEventListener(Event.ENTER_FRAME,reduireAudio);
console_mc.audio_mc.audioOn_mc.visible=false;
}
}
}

console_mc.audio_mc.audioOff_mc.addEventListener(MouseEvent.CLICK,fonctionMonter);
function fonctionMonter (evt:MouseEvent) {
addEventListener(Event.ENTER_FRAME,monterAudio);
}
//
function monterAudio (evt:Event) {
if (ecranVideo.volume<1) {
ecranVideo.volume+=0.01;
trace(ecranVideo.volume)
if (ecranVideo.volume>=0.99) {
removeEventListener(Event.ENTER_FRAME,monterAudio);
}
}
}
Dans cet exemple, chaque bouton excute une fonction qui lui est propre. Dans cette fonc-
tion, le gestionnaire Event.ENTER_FRAME appelle une autre fonction. Cest alors que la
valeur de laudio est, soit augmente, soit diminue, selon la fonction qui est excute (sui-
vant le bouton qui est cliqu). Une fois que la valeur est intgralement renverse, alors, une
instruction interrompt la fonction.
Pour modifier la vitesse de progression du volume, il suffit de modifier la valeur du pas
dincrmentation, ici spcifie 0.01.
retenir
Il est possible de personnaliser une console de contrle vido en associant des clips des fonctions
qui affectent les proprits du composant vido en cours dexcution.
Il est possible dacclrer ou de rembobiner une vido en utilisant la proprit playheadTime et
seek(). Mais cette technique offre une prcision relative au nombre dimages-cls encodes dans le
flux vido.
Il est possible de modifier le son dun flux audio en contrlant la proprit volume. Une variation
progressive de laudio peut tre effectue grce un gestionnaire de type Event.ENTER_FRAME.
Chapitrage vido
La navigation au sein dune vido est trs simple mettre en place. Il suffit dutiliser la
mthode seek() que nous venons dj de rencontrer. Nous spcifions alors, en paramtre
de cette mthode, le timecode atteindre. Le timecode reprsente la position des images
dune vido et sexprime en secondes. Un timecode de 12 dsigne la tte de lecture
datteinte limage situe la seconde 12 de la vido.
Naturellement, comme voqu plus haut, nous devons aussi considrer que le flux vido
dispose dun nombre confortable dimages-cls ou alors, nous acceptons que le ciblage
fluctue plus ou moins une ou deux secondes prs.
Pour dfinir un timecode prcisment, considrons lexemple dune vido dune cadence
de 25 ips pour laquelle une image vaut 4 centimes de secondes (100 centimes de seconde /
25 images = 0,04 seconde). Pour cette vido, lexpression suivante appelle la soixante-
septime seconde :
ecranVideo.seek(67);
Mais, lexpression suivante appelle la troisime image de la soixante-septime seconde

(soit 67 secondes + 3 0,04). Si limage appele nest pas une image-cl, comme vu prc-
demment, cest limage-cl suivante la plus proche qui est affiche et cest partir de cette
image-cl que va se prolonger la vido :
ecranVideo.seek(67.12);
Dans lexemple suivant, nous utilisons la mthode seek() travers une srie de vignettes
afin de crer un systme de chapitrage. Mais, nous allons plus loin que dans la section pr-
cdente en optimisant ici le code et en rassemblant dabord toutes les conditions dans une
seule et mme fonction. lintrieur de cette fonction, nous ajoutons aussi une proprit
qui permet de charger ventuellement une autre vido, en lieu et place de la vido active.
Nous combinons donc deux mthodes : seek() et source().
Dans le document "ch8_videoInteractive_3.fla", sur la scne principale, se trouve un com-

posant qui excute directement la vido la publication du document. En dessous, un menu
est compos de plusieurs vignettes. Chacune de ces vignettes est isole dans un MovieClip
et possde un nom doccurrence (voir Figure 8.3).
Figure 8.3
Aperu du
document aprs
publication.

Dans le scnario, au-dessus de calque fond_mc, nous identifions le composant vido, le
menu et un calque actions (voir Figure 8.4).
Figure 8.4
Aperu du
scnario de la
scne principale.
Dans le calque actions, nous lisons le code suivant :

var cheminVideo:String;
var timeCode:Number=0;
menu_mc.addEventListener(MouseEvent.CLICK,timeCode1);
function timeCode1 (evt:MouseEvent) {
if (evt.target.name=="lien1_btn") {
cheminVideo="gKaster/gKaster-demoreel.f4v";
timeCode=0.2;
}
timeCode=10;
}
timeCode=19;
}
timeCode=45;
}
timeCode=66;
}
timeCode=92;
}
timeCode=119.04;
}
if (evt.target.name=="bonus_btn") {
cheminVideo="gKaster/gKaster-amusement.f4v";
timeCode=0;
}
ecranVideo.source=cheminVideo;
ecranVideo.seek(timeCode);
}
Nous dclarons en premier lieu deux variables :

var cheminVideo:String;
var timeCode:Number=0;
La premire dsigne une chane de caractres qui vhiculera le chemin dun fichier vido,
disponible dans notre projet. Chaque lien cliqu va ainsi pouvoir renseigner cette valeur
pour cibler le fichier qui lui est propre. Plus loin dans le code, une instruction reprend la
valeur alors renseigne pour appeler le fichier correspondant avec la mthode source().
La deuxime variable est un nombre et initialise les timecodes avant quils ne soient ven-
tuellement modifis travers la fonction.
Ensuite, un couteur est attach au menu et non aux vignettes elles-mmes. Cela permet dintro-
duire des conditions qui dfinissent, selon lobjet du menu qui est cliqu (evt.target.name),
telle ou telle instruction (voir Chapitre 5 pour en savoir plus sur la proprit target) :
timeCode=0.2;
}
La condition vrifie que le nom de lobjet cliqu correspond bien celui spcifi entre
parenthses. Lorsque la valeur est vrifie, la variable cheminVideo est renseigne, ainsi
que le timecode. Une condition est cre pour chaque bouton.
En fin de programme, les deux variables sont utilises pour activer le chapitrage :
ecranVideo.source=cheminVideo;
ecranVideo.seek(timeCode);
Vous remarquez le dernier bouton bonus, qui se distingue des autres en cela quil appelle un
fichier diffrent. Notez que nous excutons le programme localement, et donc, que les
vidos sont charges instantanment. Nous pourrions donc spcifier un timecode pour cette
nouvelle vido. Mais, noubliez pas que lon ne peut atteindre une image dun fichier vido
que si limage appele est dj charge. Nous ne recommandons donc pas de spcifier une
autre valeur que 0 lorsquune nouvelle vido est appele. Le seul moyen de permettre
datteindre directement une image dune vido non charge est dutiliser la technologie
Flash Media Server, qui autorise la diffusion en vrai streaming (en continu).
Nous remarquons ici que le chapitrage peut appeler indiffremment des squences dans un
mme flux vido (avec seek) que plusieurs fichiers vido distincts (avec source). Notez que
la cration de flux spars (avec source) offre une plus grande souplesse dans la navigation,
car lensemble de la vido na alors pas besoin dtre charge pour permettre daccder
dautres chapitres. Les rfrences appeles chaque requte (avec source) sont toujours de
nouveaux flux vido, indpendants, qui se substituent la vido en cours de lecture. Que les
chapitres soient constitus de vidos distinctes ou contenues dans une seul signal vido,
nous utilisons un seul, mme et unique, composant.
Adobe propose une technologie serveur adapte la gestion de flux vido haute dfinition en
continu. Cette technologie se nomme Flash Media Server. Vous trouverez des informations sur son
utilisation ainsi quun serveur de test dhbergement ladresse suivante : http://www.streame-
dia.eu/#news_fr_5.html.

Chapitrage vido avec les points de repre
Le langage
Il est galement possible de crer un systme de chapitrage partir de points de repre. Nous utili-
sons alors la mthode seekToNavCuePoint(). Cette technique est plus prcise car il est possible de
contrler la position des images-cls. Reportez-vous la section "Synchroniser des actions avec les
points de repre" pour en savoir plus sur cette mthode.
retenir
Pour crer un systme de chapitrage simple, nous utilisons la mthode seek(). Mais le nombre
dimages-cls encodes dans le flux vido dtermine la prcision du ciblage.
Le chapitrage peut appeler aussi bien des squences dans un mme flux vido que plusieurs fichiers
vido distincts. Mais, tant donn que le ciblage ne permet datteindre que les flux dj chargs ou
qui dmarrent, loption avec des fichiers spars demeure la plus confortable pour lutilisateur.
Sous-titrage vido
Flash met disposition un composant qui simplifie la gestion des sous-titres de la vido.
Vous devez pour cela utiliser dabord un composant FLVPlayBack pour y charger une vido,
puis, crer un fichier XML qui contient le texte pour les sous-titres en respectant un format
bien dfini. Enfin, vous devez ajouter sur la scne un composant FLVPlayBackCaptioning
qui se charge de placer le texte du fichier XML dans le champ de texte de votre choix.
Dans cet exemple, nous ajoutons des sous-titres qui accompagnent une cration autour dun
pome de Dan Andersson crivain sudois (voir Figure 8.5). Les textes sont stocks
dans un fichier XML.
Figure 8.5
Aperu du
document aprs
publication.
Dans le document "ch8_videoInteractive_4.fla", la scne principale affiche un composant

vido, un texte dynamique dj format avec une typo embarque (voir Chapitre 15 pour en
savoir plus sur la typographie) et un composant FLVPlayBackCaptioning situ hors champ
(voir Figure 8.6). Chaque objet possde un nom doccurrence. La vido appele se nomme
"gkaster-c19.f4v".
Figure 8.6
Aperu de la
scne principale.
Dans la fentre de scnario, au-dessus du calque fond_mc, les trois objets sont clairement
rpartis vers des calques distincts (voir Figure 8.7).
Figure 8.7
Fentre de
scnario de la
scne principale.
Dans le calque actions, nous accdons au code suivant :

composantSousTitres.flvPlayback=ecranVideo;
composantSousTitres.source="gKaster/sousTitres.xml";
composantSousTitres.autoLayout=false;
composantSousTitres.captionTargetName="sousTitres_txt";

Dans le rpertoire "gKaster" des exemples du livre, se trouve un document XML qui contient
les sous-titres et repose sur la structure suivante :
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="fr" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org
/2006/04/ttaf1#styling">
<head>
</head>
<body>
<div xml:lang="fr">
<p begin="00:00:00.00" dur="00:00:03.00">gKaster <span tts:fontFamily="Verdana"
tts:fontSize="+12">C19</span></p>
<p begin="00:00:09.00" dur="00:00:03.00">Le soleil se lve lhorizon,</p>
<p begin="00:00:12.45" dur="00:00:03.30">regarde, au bord du mont du village de
paille.</p>
<p begin="00:00:17.00" dur="00:00:02.30">Sur le fleuve fragile, dgoulinent,</p>
<p begin="00:00:20.30" dur="00:00:02.30">marchent, les hommes en silence.</p>
<p begin="00:00:25.00" dur="00:00:02.30">Sous le ciel gris du matin frais,</p>
<p begin="00:00:28.30" dur="00:00:04.00">des pas lourds foulent le sol jonch
des roses...</p>
<p begin="00:00:36.00" dur="00:00:03.00">Des ttes sy plient comme la
prire,</p>
<p begin="00:00:40.00" dur="00:00:05.00">loin des terres arrides sest fait
porter feu le pote.</p>
<p begin="00:00:52.00" dur="00:00:05.00">Au travers de la clairire verdoyante,
sous la rose,</p>
<p begin="00:01:00.30" dur="00:00:04.00">il a termin ses annes de douleur.</p>
<p begin="00:01:06.00" dur="00:00:06.00">Mais quand le cercueil savance, noir,
travers la fort verte du printemps</p>
<p begin="00:01:13.00" dur="00:00:05.00">Le silence traverse la nature qui
sveille.</p>
<p begin="00:01:18.00" dur="00:00:04.00">Et l, le vent douest sarrte, en se
demandant:</p>
<p begin="00:01:22.30" dur="00:00:05.00">Qui foule ces roses dun pas si
lourd?</p>
<p begin="00:01:32.00" dur="00:00:06.00">Allez doucement, cest peut-tre une
fleur qui vient de mourir.</p>
<p begin="00:01:45.00" dur="00:00:06.00">Si jtais Houragan, je
laccompagnerais jusquau bout du chemin.</p>
</div>
</body>
</tt>
Pour mettre en place un systme de sous-titrage, il suffit de glisser-dposer une occurrence

du composant FLVPlayBackCaptioning depuis la fentre des composants (Fentre > Com-
posants) sur la mme scne que celle o figure dj le composant de lecture du flux vido
FLVPlayBack. Puis, il faut lui attribuer un nom doccurrence. Dans notre exemple, nous le
nommons composantSousTitres.
Pour lier lobjet composantSousTitres la vido, dans le code, nous spcifions :

composantSousTitres.flvPlayback=ecranVideo;
Pour lui permettre didentifier lemplacement du fichier XML, nous ajoutons galement :
composantSousTitres.source="gKaster/sousTitres.xml";
Nous avons la possibilit de magntiser le champ de texte dynamique sur la vido (true) ou
non (false). Pour que le champ de texte reste sa position actuelle dans la scne, nous
crivons :
composantSousTitres.autoLayout=false;
Enfin, pour que le texte saffiche dans un champ dynamique de notre propre cration, nous
associons, une dernire commande, le nom doccurrence du texte dynamique plac sur la
scne :
composantSousTitres.captionTargetName="sousTitres_txt";
dfaut de spcifier un champ de texte dynamique pour accueillir les lgendes, le composant
les affichera directement sur la vido dans une zone rectangulaire de fond noir.
Lensemble de ces instructions reprend les paramtres du composant FLVPlayBackCaptioning
galement disponibles et paramtrables depuis lInspecteur de composants.
Dans le fichier XML (de type texte TT Timed Text mais au format XML), nous pouvons
lire une structure proche dune page HTML. Ce document rpond en fait une organisation
normalise par le W3C (http://www.w3.org/AudioVideo/TT/). Tout en respectant la syn-
taxe propre ce formatage, il nous suffit dajouter autant de ligne que de sous-titres doivent
apparatre, et ensuite de renseigner chacune des proprits.
Le fichier XML que nous utilisons repose sur le mcanisme suivant. Pour chaque nouveau
sous-titre, le composant requiert une balise <p></p> :
<p begin="00:00:00.00" dur="00:00:03.00">gKaster
<span tts:fontFamily="Verdana" tts:fontSize="+12">C19</span></p>
Dans cette balise, quatre attributs peuvent tre renseigns : begin, dur, end et style. Dans
notre exemple, les deux premiers seulement sont utiliss.
Lattribut begin sert dfinir le timecode partir duquel le titre doit apparatre.
Lattribut dur dsigne la dure de ce sous-titre.
Lattribut end, qui se dfinit de la mme manire que les deux prcdents, dsigne le
timecode de fin du sous-titre. Il na pas lieu dtre si lon connat dj la dure.
Lattribut style, optionnel, permet de grer le formatage des textes partir de styles
HTML de base.
La gestion de laffichage du sous-titre est prcise, contrairement la navigation utilise avec
la mthode seek(), car cest le fichier XML qui dtermine le moment o les textes doivent
apparatre et non les images-cls de la vido.
Le dernier attribut, style, permet dappliquer un style dont nous pouvons dfinir le forma-
tage dans len-tte du document <head></head>, en amont. Pour ce faire, nous utilisons la
syntaxe suivante :

<head>
<styling>
<style id="style1" tts:fontSize="20"/>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="00:00:00.00" dur="00:00:03.00" style="style1">gKaster C19</p>
</div>
</body>
Dans notre exemple, nous nutiliserons pas les styles. En publiant le document Flash, la
vido est lue et des lgendes se succdent les unes la suite des autres, selon le timecode
dfini dans le fichier XML.
Le composant CaptionButton
Vido
Vous pouvez glisser-dposer le composant CaptionButton dans la mme scne que le composant
FLVPlayBack Captionning. Il permet lutilisateur de dsactiver et ractiver laffichage des sous-
titres. Ce composant, comme les boutons de contrle de la vido, peut tre personnalis en double-
cliquant dessus jusqu atteindre les objets graphiques qui le composent.
tendre les formatages du document XML pour les sous-titres

Des options de formatage sont accessibles pour les donnes contenues dans le fichier XML des
sous-titres. Ces formatages rpondent une norme prcise et standardise par le W3C. Vous
trouverez le descriptif dtaill de ces options et les balises employer ladresse suivante :
http://help.adobe.com/fr_FR/ActionScript/3.0_UsingComponentsAS3/
WS5b3ccc516d4fbf351e63e3d118a9c65b32-7ee5.html.
retenir
Il est possible de dployer simplement un systme de sous-titrage grce lutilisation du composant
FLVPlayBackCaptioning.
La synchronisation avec le flux vido est prcise car cest le code qui gre laffichage et non les images-
cls de la vido.
Des styles de formatage peuvent tre appliqus aux textes des sous-titres, depuis Flash ou partir de
formatages dfinis dans le fichier XML.
Boucle vido
Par dfaut, une vido gre avec un composant FLVPlayBack est lue de bout en bout sans
boucler sur elle-mme. Il peut tre intressant de permettre de relancer la vido pour crer
un flux ininterrompu. Pour cela, nous utilisons une classe qui dtecte le comportement de la
vido. Cette classe se nomme videoEvent.
Dans cet exemple, nous utilisons une squence vido associe une barre de progression,
ceci afin de nous permettre, lors de la publication, de tester leffet de boucle plus rapidement,
en dplaant simplement la tte de lecture.
Dans le document "ch8_videoInteractive_5.fla", la scne principale affiche un composant

vido nomm ecranVideo et des occurrences de composants de contrle rparties vers des
calques distincts (voir Figure 8.8).
Figure 8.8
Aperu du
scnario de la
scne principale.
Dans la fentre Actions, nous pouvons lire le code suivant :

import fl.video.VideoEvent;
//
ecranVideo.addEventListener(VideoEvent.COMPLETE,boucleVideo);
function boucleVideo(evt:VideoEvent) {
ecranVideo.seek(0);
ecranVideo.play();
}
Dabord, nous importons la classe videoEvent qui permet de dtecter le comportement

du flux vido. Puis, nous crons un couteur que nous attachons au composant FLV-
PlayBack plac sur la scne. Le gestionnaire dvnements fait rfrence la classe
importe et invoque la proprit COMPLETE afin de dtecter le moment o la vido est
termine.
Lorsque la vido est acheve, la fonction boucleVideo, appele par lcouteur, excute
deux instructions. La premire, seek(0), replace la tte de lecture limage 0. La seconde,
play(), indique de reprendre la lecture.
retenir
Il est possible de gnrer une boucle vido laide de la classe videoEvent. Il faut pour cela replacer la
tte de lecture limage 0 et relancer la lecture de la vido.
En dtectant la fin de lecture de la vido, vous pouvez aussi associer dautres actions, comme
lenchanement avec dautres flux vido ou laffichage dun autre contenu.

Enchaner plusieurs vidos la suite
Vido
En dtectant la fin de lecture dun flux vido, vous tes en mesure de placer dautres instructions la
place du repositionnement de la tte de lecture comme nous lavons fait ici. Par exemple, vous pou-
vez trs bien invoquer un autre fichier vido en vue de crer un enchanement de plusieurs vidos.
Pour appeler une autre vido, utilisez linstruction :
ecranVideo.source="cheminDeLaVideo.f4v";
Pensez ventuellement y adjoindre linstruction play(), comme pour notre boucle, afin de garantir
le redmarrage automatique de la lecture.
Synchroniser des actions avec les points de repre

Les points de repre (ou CuePoints) sont des marqueurs que lon distribue tout au long de la
vido. Ils permettent :
Dy associer des actions de contrle de lecture de la vido pour sy rfrer comme dans
un systme de chapitrage (repres de navigation).
Dy placer des vnements programms en ActionScript (repres dvnements), qui
planifient des actions dans le temps.
Chacun des deux procds requiert naturellement une vido, mais aussi la cration des images-
cls qui dfinissent le timecode sur lequel chaque repre doit tre plac.
Il existe plusieurs techniques pour la cration de ces repres : la premire consiste les int-
grer physiquement dans lencodage du signal vido, la deuxime les stocker dans un
fichier XML appel ensuite avec ActionScript, la troisime consiste les dfinir directement
dans la fentre dActions du document par Flash et la quatrime engage le remplissage
manuel de la proprit cuepoints, disponible depuis lInspecteur de composants.
lintrieur du flux vido, les repres sont introduits depuis After Effects, Premiere Pro
ou Adobe Media Encoder. Ils sont encapsuls dans le fichier une fois celui-ci rendu, si
bien que toute modification du timecode, dun seul de ces repres, induit de procder
un nouveau rendu. Cette mthode prsenterait peu dintrt si elle ne permettait pas un
ciblage prcis pour les repres de navigation. Dans ce contexte, en effet, chaque fois
que nous introduisons un repre de navigation, nous gnrons aussi une image-cl. Il en
rsulte que cette mthode est celle que nous prfrons employer pour dfinir des repres
de navigation, car ils permettent de travailler avec une grande prcision. Pour les repres
dvnements, en revanche, les autres techniques restent plus confortables.
La cration dun fichier XML peut tre intressante pour les cas o un nombre lev de
repres dvnements est enregistr et o la valeur du timecode de chacun de ces rep-
res doit tre modifie souvent. La gestion dun fichier XML, dans ce cas prcis, peut
devenir intressante car elle pargne davoir republier le document Flash pour le mettre
jour. Nous nabordons pas cette mthode dans notre ouvrage.
La troisime option consiste gnrer les points de repre dvnements directement

dans la fentre dactions du document Flash. Cette technique est trs souple puisque,
dabord, le fait de dissocier les repres du flux vido va permettre de simplifier consid-
rablement leur mise jour. Ensuite, une ligne de code suffit par point de repre et, pla-
cs en tte de la fentre dactions, toute mise jour devient extrmement simple
effectuer.
La quatrime option, qui permet dutiliser directement le composant, reprend le prin-
cipe de la troisime, mais noffre pas la souplesse de manipulation du code o nous
pouvons plus facilement tablir des relations entre le nom des repres que nous avons
dfinis et les instructions excuter en regard des noms ajouts. Nous nabordons pas
non plus cette dernire option dans notre ouvrage.
Dans cette section, nous dcrivons la mthode de lencodage dans le flux vido, pour luti-
lisation des repres de navigation avec un ciblage prcis. Plus loin, nous revenons sur un
document Flash pour y introduire, en ActionScript, les repres dvnements dynamiques.
Repres de navigation
Dans cet exemple, nous allons placer des repres de navigation lintrieur de la vido
demoreel de la socit gKaster de manire permettre une navigation prcise. Cette vido
est initialement encode en F4V.
Les points de repre tant une fonctionnalit ajoute par Adobe dans le format Flash vido,
cette fonctionnalit nest malheureusement utilisable que pour le format FLV. En plus de
dfinir les points de repre, nous allons donc aussi modifier le format dencodage de la
vido dont nous disposons. Ce qui nous permet surtout daborder la manire dencoder une
vido pour lajout de repres de navigation. Naturellement, dans le cadre dun projet rel de
cration de contenu, nous vous recommandons de repartir de la source vido non compresse
pour obtenir un meilleur rendu.
Pour cet exemple, nous reprenons le dispositif de chapitrage utilis pralablement avec la
mthode seek(). Nous y remplaons, aprs lencodage, les rfrences seek(), imprcises,
par une action de dtection de repres de navigation, plus prcise, avec la mthode seekTo-
NavCuePoint().
Encoder la vido
Revenons dabord sur lencodage de la vido :
1. Lancez lapplication Adobe Media Encoder.
2. Ajoutez, la liste de rendu, la vido intitule gKaster-demoreel.f4v.
3. Puis, cliquez directement sur le lien jaune de la colonne Prdfinir, ou bien sur le bouton
Rglages, pour ouvrir la fentre de rglages (voir Figure 8.9).

Figure 8.9
Rglages
dexportation.
4. Dans la partie de droite, slectionnez longlet Multiplexeur puis activez loption FLV.
5. Depuis longlet Vido, spcifiez la cadence de limage. Dans notre exemple, nous main-
tenons une cadence dorigine 30ips (voir Figure 8.10).
Figure 8.10
Choix de la
cadence avant
lajout de points
de repre.
Dans lencodeur, notez quil est important de dterminer la cadence de la vido partir du
champ Image, de longlet vido, avant de crer les points de repre. Les points de repre
sont ici calculs en fonction du nombre dimages par seconde pralablement dfini. Si nous
modifions la cadence de la vido aprs avoir gnr les points de repre, comme nous
configurons les points de repre partir de donnes invariables, nous risquons de subir un
dcalage, voire, de ne pouvoir atteindre certaines squences une fois le document Flash
publi. Par exemple, nous spcifions une cadence initiale 30ips, et nous ajoutons un repre
limage 29 de la nime seconde. Si nous modifions, aprs avoir ajout le repre, la cadence de
la vido en la ramenant par exemple 25ips, limage 29 qui nexiste plus ne pourra tre trouve.
Vrifiez ensuite que les dimensions de la vido correspondent la surface disponible dans
notre document (800 450 pixels).
Comment ractiver les champs de dimensionnement de lencodeur ? Lencodeur tant un

peu instable, vous pouvez avoir besoin de ractiver les options de rglage pour les diter. Dans le
volet de gauche de la fentre dencodage, cliquez alors sur loutil de recadrage, puis, dans longlet
Sortie, slectionnez loption Modifier la taille de sortie. Puis, revenez dans longlet Source et dsactivez
loutil de recadrage.
Ajustez enfin lgrement la compression de sorte que lajout dimages-cls ne rduise pas
lespace disponible pour coder les autres images, et donc, naltre pas la qualit globale de
la vido. Passez le dbit minimum 90.
Une fois lchantillonnage calibr, nous pouvons ajouter les repres de navigation.
Ajout des repres de navigation

Pour placer des repres de navigation, nous devons revenir sur la partie gauche de la fentre
dencodage Adobe Media Encoder. Pour chaque repre, nous positionnons la tte de lecture
lemplacement voulu. Puis, nous ajoutons un repre en cliquant, dans la partie infrieure,
sur le bouton Plus.
Placez la tte de lecture au timecode 00;00;00;07 qui correspond la septime image. Pour
contrler la position de la tte de lecture avec prcision, et glissez sur le timecode sans rel-
cher le pointeur. Attention un simple clic rend le champs ditable. Vous pouvez galement y
saisir manuellement une valeur, ou utiliser les flches droite et gauche qui incrmentent ou
dcrmentent le time code de limage. Si vous saisissez une valeur, pour confirmer son
entre, cliquez ensuite dans une zone neutre de la fentre. Nappuyez pas sur la touche
Entre qui ferme la fentre.
La vido tant initialement cadence 30 ips, le timecode sarrte limage 30 et poursuit
la seconde suivante. La gestion du timecode ici nest pas similaire celle que nous avons
contrle par ActionScript, qui est dfinie en secondes uniquement.
1. Dans la partie infrieure de la fentre, cliquez sur le bouton plus (+). Et, depuis le menu
droulant marqu vnement, slectionnez loption Navigation.
2. Une entre est enregistre et ajoute la liste.
3. gauche, cliquez sur le nom attribu par dfaut, Point de signalement, pour le renommer.
Saisissez par exemple : repere1 (voir Figure 8.11).

Figure 8.11
Ajout dun repre
de navigation.
Procdez de mme pour lensemble des repres qui reprsentent le dbut de chaque
squence anime pour lesquelles nous disposons de vignettes dans le document Flash. Par
exemple, placez la tte de lecture limage 00;00;13;13 pour ajouter une image-cl au dbut
de la squence qui correspond la deuxime vignette dans Flash. Puis cliquez nouveau sur
Plus (+), pour dfinir un nouveau repre (voir Figure 8.12) et ainsi de suite.
Figure 8.12
Ajout dun repre
de navigation.
Les timecodes suivants correspondent lensemble des squences identifies dans le Flash,
par des vignettes. Une vido dj code avec les repres de navigation est disponible dans le
dossier "gKaster" sous le nom "gKaster-demoreel-navigation.flv".
00;00;00;07 = repere1
00;00;13;14 = repere2
00;00;17;27 = repere3
00;00;41;14 = repere4
00;01;05;10 = repere5
00;01;29;26 = repere6
00;01;58;07 = repere7
Confirmez lencodage en cliquant sur OK. Choisissez le nom de sortie "gkaster-demoreel-
navigation.flv" et remplacez ventuellement le document dj encod qui porte le mme
nom. Puis lancez un rendu.
En plus des images-cls gnres automatiquement toutes les deux secondes, chaque point
de repre que nous avons spcifi en deviendra galement une au moment de lencodage.
Nous pouvons maintenant rintgrer cette vido au document Flash et y saisir les instructions
de navigation.
Dtecter les points de repre avec ActionScript

Avant de programmer la dtection des points de repre, nous devons mettre jour le compo-
sant vido en y rattachant la vido exporte au format FLV. La vido tant dj intgre
dans ce document, vous pouvez la remplacer en mettant simplement jour la proprit
source de lInspecteur de composants :
1. Revenez dans Flash et ouvrez le document "ch8_videoInteractive_6.fla".
2. Slectionnez le composant vido.
3. Dans lInspecteur de composants (Fentre > Inspecteur de composants), modifiez la
source en la cliquant deux fois. Puis, ciblez la vido que vous venez dencoder et qui
contient vos points de repre de navigation (voir Figure 8.13).
Figure 8.13
Liaison avec
la vido.

Vous remarquez que lInspecteur de composants a dtect lensemble des repres que nous
avons intgrs dans la vido, dans le paramtre cuePoints.
Revenez sur le calque actions. La fentre affiche le code suivant :
var repere:String="";
menu_mc.addEventListener(MouseEvent.CLICK,atteindreRepere);
function atteindreRepere(evt:MouseEvent) {
repere="repere1";
}
repere="repere2";
}
repere="repere3";
}
repere="repere4";
}
repere="repere5";
}
repere="repere6";
}
repere="repere7";
}
trace(repere)
ecranVideo.seekToNavCuePoint(repere);
}
De la mme manire que nous avons distribu la mthode seek() dans les chapitres prc-
dents, nous utilisons ici la mthode seekToNavCuePoint(). Nous spcifions, en paramtre,
une valeur "chane de caractres" qui correspond au nom du point de repre de navigation
ajout dans lencodeur, et ce, pour chaque lien.
Publiez le document en faisant Cmd+Entre (Mac) ou Ctrl+Entre (Windows). La vido
joue instantanment. En cliquant sur chacune des vignettes, le ciblage atteint prcisment le
timecode spcifi dans le flux vido.
Repres dvnements
Les repres dvnements ont pour objectif de planifier une action lintrieur du document
Flash, mesure de la progression de la vido.
Comme pour les repres de navigation, nous devons au pralable dfinir les repres dv-
nements avant dajouter les actions. Pour crer les repres, nous pouvons les placer dans le
flux vido, comme vu pour la navigation ou bien les coder dynamiquement en ActionScript.
Lavantage le coder repose sur lide suivante : un repre dvnements, par rapport au
repre de navigation, est indpendant du flux vido. Si un repre de navigation doit tre
dans la vido, parce quil cible une image-cl prcise de la vido, le repre dvnements,
lui, vise une action, par nature indpendante de la vido. Les repres dvnements nont
donc aucune raison dtre encods dans le flux vido. En somme, les repres dvnements
agissent un peu comme des drapeaux (flags ou labels), des dclencheurs lus par la tte de
lecture en mme temps que limage laquelle ils sont attachs, et ce, quelle que soit la
teneur du flux vido. Il devient donc plus judicieux de les traiter en ActionScript, et non en
dur dans la vido. Ainsi, nous pouvons utiliser une vido au format F4V, de meilleure qua-
lit, et non se limiter uniquement au format FLV, qui est le seul grer les points de repre.
Dans cette section, nous allons voir comment associer un composant qui cible une vido
enregistre en F4V, des repres cods en ActionScript. Dans notre exemple, les actions que
nous associons aux repres permettent de repositionner un MovieClip blanc sous la vignette
qui correspond la squence en cours de visualisation. mesure que la vido progresse, la
vignette est repositionne, laide dune interpolation de type TweenMax, sur la vignette
suivante, et ce, jusqu la dernire.
Le document "ch8_videoInteractive_7.fla" contient un composant qui appelle la vido

"gKaster-demoreel.f4v". Sous le composant, figure un menu compos de MovieClip poss-
dant tous un nom doccurrence. Lun dentre eux, situ en arrire-plan, signale la progres-
sion de la lecture. Il est plac sous la premire image qui matrialise la premire squence
du flux vido (voir Figure 8.14 et 8.15).
Figure 8.14
Aperu du
document.

Figure 8.15
Fentre de
scnario du sym-
bole menu.
Dans le scnario, au-dessus du calque fond_mc, nous retrouvons le composant et le menu

(voir Figure 8.16).
Figure 8.16
Fentre de
scnario de la
scne principale.
Dans la fentre Actions, apparat le code suivant :

// importation des classes
import fl.video.MetadataEvent;
import gs.*;
import gs.easing.*;
import gs.events.*;
// cration des points de repre

ecranVideo.addASCuePoint(0,"repere1");
ecranVideo.addASCuePoint(13.14,"repere2");
// traitement des actions

ecranVideo.addEventListener(MetadataEvent.CUE_POINT,ecouteRepere);
function ecouteRepere(evt:MetadataEvent) {
if (evt.info.name=="repere1") {
TweenMax.to(menu_mc.sequenceActive_mc,2, {x:-300, ease:Strong.easeInOut});
}
}
}
TweenMax.to(menu_mc.sequenceActive_mc,2, {x:0, ease:Strong.easeInOut});
}
}
}
}
trace(ecranVideo.playheadTime)
}
En premier, nous importons les classes ncessaires. La classe MetadataEvent permet de

grer les mtadonnes lies un contenu vido. Les classes Greensock gs permettent
de crer les animations TweenMax, comme vu au Chapitre 2 :
// importation des classes
import fl.video.MetadataEvent;
import gs.*;
import gs.easing.*;
import gs.events.*;
la suite, nous dfinissons les points de repre, un un. Il y en a sept. Chacun dentre eux
est structur ainsi :
Nous ciblons dabord le composant auquel ces repres doivent tre associs avec le nom du
composant vido (ecranVideo). Puis, nous ajoutons un repre ActionScript avec la
mthode addASCuePoint, mthode lintrieur de laquelle deux paramtres sont attendus
dont le timecode (en secondes) et son nom (une chane de caractres). Dclin pour chaque
vignette, nous obtenons :
// cration des points de repre
Une fois les repres ajouts, il reste y associer des actions. Nous plaons pour ce faire un
couteur sur le composant ecranVideo, composant sur lequel nous venons dattacher les
repres en ActionScript. Nous faisons directement rfrence aux points de repre vhiculs
par cette classe, avec la proprit CUE_POINT :
// actions sur chaque point de repre
}
lintrieur du bloc dinstruction de la fonction, nous plaons les actions excuter cha-
que fois que lcouteur dtecte un point de repre, quel quen soit le nom, quelle quen soit

la nature (vnement ou navigation). Pour distinguer une action dune autre, nous utilisons
une structure conditionnelle qui permet de spcifier laction conduire en fonction du nom
de chaque point de repre. Ce qui donne :
}
}
Si, le nom de lobjet (evt.info.name), identifi par lcouteur, correspond une certaine
valeur, alors, dans cet exemple, une interpolation de type TweenMax est excute et dplace
le MovieClip blanc une abscisse dtermine, qui correspond la position courante de la
vignette. Nous dclinons ce principe pour chacun des points de repre.
la fin de la fonction, une instruction permet de vrifier la position du timecode au moment
o laction est excute, avec la mthode playheadTime, que nous avons dj aborde pour
grer lacclration et le rembobinage en dbut de chapitre :
trace(ecranVideo.playheadTime)
Nous avons utilis dans cette section une instruction pour gnrer dynamiquement des points de
repre et permettre lutilisation du format F4V. Mais si la vido tait au format FLV et contenait ses pro-
pres repres, fussent de navigation, la fonction que nous avons dveloppe fonctionnerait gale-
ment. Les instructions lies la cration des points de repre en ActionScript seraient simplement
inutiles. La fonction, en effet, que les repres soient inclus dans les mtadonnes de la vido ou crs
dynamiquement en ActionScript, agit de la mme manire.
retenir
Il est possible de crer un systme de navigation prcis en utilisant des points de repre de navigation
encods dans une vido FLV.
Pour naviguer dans des points de repre encods dans les mtadonnes de la vido, nous utilisons
la mthode seekToNavCuePoint();.
Les points de repre encods dans un flux F4V ne sont pas pris en compte.
Il est possible de grer des vnements ActionScript sur une vido F4V partir de points de repre
ajouts dynamiquement avec ActionScript.
Il est possible de gnrer des points de repre depuis lInspecteur de composants, dans longlet
paramtres, avec la proprit cuepoints, de la mme manire que nous le ferions dans Adobe
Media Encoder.
Lire une vido en arrire

Lire une vido Flash en arrire avec fluidit peut tre intressant dans le cadre dune pr-
sentation interactive graphiquement labore. Par exemple, un fabriquant de voitures, un
bagagiste de luxe, un joaillier, peuvent vouloir valoriser leurs crations dans une mise en
scne fine ralisable uniquement en vido (lumires, dtails, animation 3D avec radiosit
et vlocit, etc.). En permettant alors lutilisateur de prendre la main sur le flux vido
pour le laisser se dplacer librement autour de lobjet film ou modlis, celui peut contr-
ler le sens de dfilement de la tte de lecture dans la vido, comme sil naviguait dans un
espace rel.
Tant que lutilisateur dplace la tte de lecture vers lavant, la vido reste fluide. Mais, lire
un flux vido en arrire aboutit gnralement une lecture saccade de limage, quelle que
soit le type de programmation utilis, ceci mme avec des fichiers encods avec 100 %
dimages-cls, mme en jouant avec deux fichiers dont un projet lendroit et lautre
lenvers. Le repositionnement alatoire et de vitesse variable du pointeur, contrl par luti-
lisateur, implique une autre solution.
La solution la plus fluide et la plus simple dployer pour grer une lecture vido avant et
arrire, consiste intgrer le flux vido physiquement dans le document Flash et en contrler
la lecture laide dun gestionnaire de type ENTER_FRAME. Pour rendre la lecture plus fluide,
nous mettons galement jour laffichage chaque itration.
Lintgration dune vido lintrieur dun document Flash appelle cependant quelques
recommandations :
La vido doit de prfrence tre encode en FLV et avec un nombre dimages-cls int-
gral (1 image-cl par image). Le FLV semble en effet plus permissif la lecture arrire
sur des images-cls pleines que ne lest un F4V.
Lintgration dune vido dans Flash est techniquement limite 16 000 images, mais
elle doit proposer un temps de chargement honorable. Donc, pensez placer, en amorce
du document, une jauge de chargement qui avertisse lutilisateur sur sa progression
(voir Chapitre 5).
Au-del de 2 Mo de poids pour votre document Flash, vido comprise, rduisez les
dimensions de la vido. Diminuez sa dure. Compressez davantage son dbit.
Nous ajoutons la mthode updateAfterEvent() pour fluidifier la lecture de la scne.
Dans cette section, nous utilisons une vido FLV qui reprsente une galaxie en mouvement.
La squence est courte et dure 179 images (soit 7,16 secondes pour un flux 25ips). Une
fois compresse avec une image-cl par image, le fichier ne pse que 1,4 Mo. Dans cet
exemple, un curseur est positionn sur lcran pour que lutilisateur prenne la main sur le
contenu et naviguer comme bon lui semble lintrieur du flux vido.
Dans le document "ch8_videoInteractive_8.fla", un MovieClip intitul vido_mc contient

une squence vido importe. La squence vido est tendue intgralement dans le scnario
de ce MovieClip. Sur la scne principale, le symbole console_mc contient un autre Movie-
Clip nomm curseur_mc (voir Figure 8.17).

Figure 8.17
Aperu du
document.
Pour intgrer physiquement une vido dans le scnario, faites Fichier > Importer > Importer de la
vido. Puis, cliquez sur Parcourir pour slectionner le fichier vido dj compress au format FLV.
Slectionnez loption Incorporer le fichier FLV dans le SWF et le diffuser dans le scnario. Puis cliquez
sur Continuer. Choisissez alors de linclure de prfrence dans un clip. Puis, confirmez jusqu la fer-
meture de la bote de dialogue.
Dans le scnario, au-dessus du calque fond_mc, nous pouvons identifier les objets clairement
rpartis sur des calques distincts (voir Figure 8.18).
Figure 8.18
Fentre de
scnario.
Le calque actions affiche le code suivant :

//--------------- initialisation
video_mc.stop();
var pourcentage:Number;
var positionTeteDeLecture:Number=0;
var initMouseX:Number=console_mc.curseur_mc.x;
//--------------- scroll
var zoneDeDeplacement:Rectangle = new Rectangle(10,0,780,0);
console_mc.curseur_mc.addEventListener(MouseEvent.MOUSE_DOWN, activerDeplacement);
function activerDeplacement(evt:MouseEvent) {
addEventListener(Event.ENTER_FRAME,jouerVideo);
console_mc.curseur_mc.startDrag(false,zoneDeDeplacement);
evt.updateAfterEvent();
}
removeEventListener(Event.ENTER_FRAME,jouerVideo);
}
//--------------- jouer la vido

function jouerVideo (evt:Event) {
pourcentage=Math.ceil((console_mc.curseur_mc.x-initMouseX)/(stage.stageWidth/100));
positionTeteDeLecture=Math.ceil(pourcentage*(video_mc.totalFrames/100))-10;
video_mc.gotoAndStop(positionTeteDeLecture);
}
Pour bien comprendre la mcanique du curseur, nous devons dabord considrer que le clip
qui accueille la vido comporte un certain nombre dimages (179). De mme, le curseur qui
se dplace dans la console est mobile sur une certaine largeur (de 10 780 pixels). Nous
devons donc, comme nous lavons fait pour lascenseur au Chapitre 2, crer une quation
qui convertit la position du curseur en numro dimage atteindre.
Le programme dmarre avec, dans les premires lignes du code, une instruction qui inter-
rompt la lecture du clip vido, avec un stop. Nous initialisons ensuite deux variables nom-
bre que nous utilisons plus loin pour le calcul du rapport entre la position du curseur et celle
de la tte de lecture lintrieur du clip vido. La troisime variable, nomme initMouseX
enregistre la position de dpart du curseur, en X :
video_mc.stop();
var pourcentage:Number;
var positionTeteDeLecture:Number=0;
var initMouseX:Number=console_mc.curseur_mc.x;
Plus loin, nous dfinissons les actions qui permettent de grer le dfilement du curseur le
long de laxe reprsent, dans notre document, par un filet blanc :
//--------------- scroll
var zoneDeDeplacement:Rectangle = new Rectangle(10,0,780,0);
console_mc.curseur_mc.addEventListener(MouseEvent.MOUSE_DOWN, activerDeplacement);
function activerDeplacement(evt:MouseEvent) {
addEventListener(Event.ENTER_FRAME,jouerVideo);
console_mc.curseur_mc.startDrag(false,zoneDeDeplacement);
evt.updateAfterEvent();
}
removeEventListener(Event.ENTER_FRAME,jouerVideo);
}
La dernire commande de la fonction activerDeplacement utilise la mthode update-

AfterEvent(). Cette mthode rafrachit la scne immdiatement aprs que les autres

instructions ont t excutes, savoir, ds que le dplacement du curseur a eu lieu. Cela
rend le dplacement de lobjet plus fluide que si nous limitions le rafrachissement de laffi-
chage un taux bas uniquement sur la cadence de la scne (avec ENTER_FRAME). De mme,
grce cette mthode, leffet de dplacement dans la vido est un peu plus fluide.
Toujours dans la fonction activerDeplacement, une instruction appelle la fonction jouer-
Video, dtaille plus bas, qui contrle la position de la tte de lecture dans le clip vido.
Dans la fonction stopperDeplacement, nous arrtons le dplacement du curseur (stop-
Drag) ainsi que le dplacement de la tte de lecture dans le clip vido (removeEvent-
Listener).
Plus bas, la fonction appele au dplacement du curseur (jouerVideo) calcule la position
de la tte de lecture, dans le clip video_mc :
//--------------- jouer la vido
function jouerVideo (evt:Event) {
pourcentage=Math.ceil((console_mc.curseur_mc.x-initMouseX)/(stage.stageWidth/100));
positionTeteDeLecture=Math.ceil(pourcentage*(video_mc.totalFrames/100))-10;
video_mc.gotoAndStop(positionTeteDeLecture);
}
Dans la fonction jouerVideo, la valeur pourcentage ramne dabord sous la forme dun
pourcentage, la position courante du curseur. Mais, au pralable, nous prenons soin de
retrancher la valeur vhicule par la variable initMouseX, avant la division. Cela nous per-
met dinitialiser le pourcentage la valeur zro, et non la valeur exacte de positionnement
du curseur, qui nest pas plac zro au dmarrage de lapplication, mais 10 pixels dans
notre exemple.
La deuxime ligne du bloc dinstruction reprend cette valeur et la multiplie par un coeffi-
cient. Ce coefficient transpose le pourcentage, obtenu au-dessus, lchelle de la dure de
la vido. Pour dfinir ce coefficient, nous prenons le nombre dimages contenues dans le
clip vido (totalFrames) et le divisons par 100. Le numro dune image de scnario tant
un chiffre entier, nous utilisons la classe Math.ceil() pour arrondir ce chiffre. Limage
zro nexiste pas dans un scnario. Cette mthode permet donc aussi dobtenir une valeur
suprieure zro et datteindre une image qui existe, en toute circonstance.
Une fois la valeur calcule, elle est transmise en paramtre de la mthode goToAndStop()
qui contrle la position de la tte de lecture dans le clip vido.
retenir
Pour raliser une interface o lutilisateur prend la main sur le flux vido, sans sautillement ni rupture
de flux, nous importons la vido dans le Flash en respectant les contraintes de poids qui permettent
de prserver laccessibilit du contenu.
Pour que le dfilement soit fluide, nous contrlons le rafrachissement de la scne avec la mthode
updateAfterEvent().
Pour que le flux dimage ne saute pas, le fichier vido doit tre encod en FLV avec 100 % dimages-
cls.
Arrter une vido dans un SWF imbriqu

Un site bien conu conduit gnralement isoler les rubriques dans des SWF spars et ne
les importer que sils ont t invoqus par lutilisateur. Dans ce contexte, si vous dbutez en
ActionScript 3, vous avez peut-tre prouv des difficults vider un chargeur de son
contenu, dune part, mais surtout interrompre laudio dun fichier vido ou dune musique, que
la rubrique charge pouvait contenir. Lorsque vous supprimez de la liste daffichage (remove-
Child) un chargeur, vous ne supprimez pas son contenu comme nous le faisions en AS2
avec unloadMovie() , vous le "dsaffichez". Pour contourner cette difficult, quatre
solutions sont dsormais disponibles :
Vous pouvez interrompre le contenu dun chargeur depuis le SWF qui a appel le contenu
avec une srie dinstructions compatibles Flash 9.
Vous pouvez procder la mme manipulation avec une simple et unique instruction
compatible Flash 10.
Vous pouvez dcharger et interrompre le SWF appel depuis le SWF lui-mme, avec
des instructions compatibles Flash 9.
Vous pouvez dcharger et interrompre le SWF appel depuis le SWF lui-mme, avec
quelques instructions compatibles Flash 10.
Dans cette section, nous abordons les quatre solutions pour interrompre les contenus. Mais
nous dtaillons galement quelques notions chres aux anciens codeurs AS2, le ciblage des
contenus imbriqus et laccs aux contenus de la scne parente ou racine.
Dans cet exemple, nous disposons dun premier SWF qui en appelle un autre, lequel joue
une vido. Nous avons plac, lintrieur de chaque document, un bouton Fermer qui per-
met, chacun dans son contexte respectif et individuellement, de supprimer le contenu
charg, et cela avec les deux syntaxes Flash 9 et Flash 10.
Exemples > ch8_videoInteractive_9.fla et Exemples > ch8_videoInteractive_9b.fla
Dans le document "ch8_videoInteractive_9.fla", sur la scne, un MovieClip nomm

cible_mc sert de conteneur pour le SWF charg. Au-dessus, un contour blanc reprsente
lespace quoccupe le contenu de ce SWF une fois celui-ci import (voir Figure 8.19).
Dans la fentre de scnario, les symboles cible_mc et le bouton Fermer sont rpartis distincte-
ment vers les calques (voir Figure 8.20).
Dans le second document, nomm "ch8_videoInteractive_9b.fla", la scne affiche seulement
un composant et un bouton de fermeture, localis (voir Figure 8.21).
Dans la fentre de scnario du document charg, le composant et le bouton fermer sont ga-
lement rpartis vers les calques (voir Figure 8.22).
La structure des deux documents permet de dcharger et stopper les contenus aussi bien
depuis le document racine que depuis le document appel.

Figure 8.19
Aperu du SWF
de dpart.
Figure 8.20
Fentre de
scnario.
Figure 8.21
Aperu du
document SWF
charg.
Figure 8.22
Fentre de
scnario du docu-
ment charg.
Arrt et fermeture depuis le document racine

Dans le calque actions du document racine ("ch8_videoInteractive_9.fla"), celui qui
appelle lautre, nous lisons le code suivant :
//---------------------- chargement
var chemin:URLRequest = new URLRequest("ch8_VideoInteractive_9b.swf");

cible_mc.addChild(chargeur);
}
//---------------------- fermer depuis laccueil
fermerDepuisAccueil_btn.addEventListener(MouseEvent.CLICK,fermerSWF);
function fermerSWF (evt:MouseEvent) {
/*
//Mthode avant Flash10
MovieClip(chargeur.content).ecranVideo.stop();
chargeur.unload();
*/
chargeur.unloadAndStop();
}
Dans ce code, la premire tape consiste charger le second document SWF qui excute la
vido. Pour cela, nous dfinissions un nouveau chargeur, lequel excute laffichage du
contenu une fois celui-ci charg (voir Chapitre 5 pour le dtail de ces instructions) :
//---------------------- chargement
var chemin:URLRequest = new URLRequest("ch8_VideoInteractive_9b.swf");

cible_mc.addChild(chargeur);
}
Plus loin, nous ajoutons un couteur sur le bouton nomm fermer_btn. Dans la fonc-
tion appele par lcouteur, nous distinguons deux types dinstructions. La premire,

laisse en commentaire pour ne pas doubler celle qui est reste active, est compatible
Flash 9 :
MovieClip(chargeur.content).ecranVideo.stop();
chargeur.unload();
Si nous nous contentions de purger le chargeur, le contenu serait bien t de linterface,

mais le flux ne serait pas stopp, un peu comme si le robinet continuait dverser de leau
alors que lon ait retir le sceau. Le son et limage continuent de se lire. Cette commande
consiste donc, dans un premier temps, interrompre tout ce qui est excut. En loccur-
rence, la vido. Puis, sur la deuxime ligne, purger le chargeur.
Pour cibler plus spcifiquement le contenu charg dans un SWF, nous devons dabord faire
rfrence au chargeur que nous avons utilis pour importer le contenu. Plus prcisment,
nous devons faire rfrence ce quil contient, et non lenveloppe quil reprsente. Nous
spcifions donc, en plus de reprendre son nom (chargeur), que nous ciblons son contenu
(chargeur.content).
Ensuite, la rfrence au contenu du chargeur est passe en paramtre dune mthode de
transtypage en MovieClip. Et la deuxime ligne, une fois la vido arrte, purge le chargeur
de son contenu.
Pourquoi transtyper un chargeur en MovieClip ?
Le langage
Il faut comprendre que chaque document AS3 possde dsormais une structure o la scne princi-
pale nest plus un simple MovieClip (comme ce fut le cas en AS1 ou en AS2), mais bien un objet de
type Sprite, qui contient la scne principale MovieClip. Une couche intermdiaire a donc t ajou-
te la structure dun document Flash. Si cette modification structurelle a permis dapporter une plus
grande stabilit et de dployer de nombreuses fonctionnalits dans Flash, elle ne permet plus de cibler
directement un contenu charg dans un SWF imbriqu. Chaque document est rellement indpendant.
Le Sprite ne possde pas les mmes proprits de ciblage que MovieClip. Pour transgresser cette
contrainte, il faut donc transtyper le Sprite qui contient la scne MovieClip du document import, en
MovieClip. Ainsi, toute la chaine dimbrication prserve une structure intgralement compose de Movie-
Clip imbriqus, et autorise de nouveau le ciblage. Pour en savoir plus sur la structure native dun docu-
ment Flash en AS3 et sur le principe de la liste daffichage, consultez la documentation Adobe la page
suivante : http://livedocs.adobe.com/flash/9.0_fr/main/wwhelp/wwhimpl/common/html/
wwhelp.htm?context=LiveDocs_Parts_bak&file=00000142.html.
Cette premire mthode, compatible Flash 9, peut vite devenir astreignante si les contenus
chargs deviennent multiples. Cest la raison pour laquelle, la demande des utilisateurs,
une nouvelle instruction est apparue avec Flash 10 : unLoadAndStop().
chargeur.unloadAndStop();
Concernant le ciblage du contenu charg, le principe reste donc le mme. Mais une seule
instruction suffit dsormais pour interrompre tous les contenus et purger le SWF. Voici la
liste des actions dsormais associes cette nouvelle mthode :
Les flux audio et vido sont arrts.
Les couteurs dvnements sont supprims de la scne.

Les couteurs dvnements enterFrame, frameConstructed, exitFrame, activate
et deactivate sont supprims.
Les timers (horloges) sont arrtes.
Les occurrences Camera et Microphone sont retires.
Les clips sont stopps.
Arrt et fermeture depuis le contenu charg

Une autre technique, pour fermer un contenu, consiste placer les actions directement dans
le SWF charg.
Dans le calque actions du document appel ("ch8_videoInteractive_9b.fla"), contenant la
vido, nous lisons ce code-ci :
//---------------------- fermer depuis le SWF charge
fermer_btn.addEventListener(MouseEvent.CLICK,fermerSoiMeme);
function fermerSoiMeme (evt:MouseEvent) {
/*
//Mthode avant Flash10
ecranVideo.stop();
MovieClip(root.parent.root).chargeur.unload();
*/
MovieClip(root.parent.root).chargeur.unloadAndStop();
//MovieClip(this.stage.getChildAt(0)).chargeur.unloadAndStop();
}
Dans ce code, un couteur est attach un bouton situ sur la scne principale, localement.
Cet couteur appelle une fonction qui propose deux types dinstructions : celles compatibles
Flash 9 et Flash 10.
Les deux premires instructions sont en commentaire, pour de nouveau viter de doubler
linstruction active :
ecranVideo.stop();
MovieClip(root.parent.root).chargeur.unload();
La premire ligne interrompt dabord le flux vido contenu dans la scne courante, comme
nous le ferions simplement travers une action classique.
La deuxime reprend le principe de ciblage du contenu dans le chargeur, voqu prcdem-
ment. Mais ce chargeur ayant t cr dans la scne du document parent, nous le ciblons en
y faisant rfrence par transtypage.
En paramtre de la mthode MovieClip(), nous indiquons simplement le chemin qui nous
permet daccder au contenu cibl, avec root.parent.root.

Ciblage dans un document Flash AS3
Le langage
Avec la structure Sprite dun document AS3, root, qui autrefois dsignait la racine globale de
lensemble des documents Flash imbriqus (dquivalent _root en AS1 et en AS2), ne cible dsor-
mais plus que la scne courante.
Il est en revanche toujours possible de remonter dun niveau en utilisant la proprit parent, de
deux niveaux en utilisant parent.parent, et ainsi de suite. Mais pour ce faire, vous devez prci-
ser de quel objet vous partez, en ajoutant la position de dpart et celle darrive un root. Vous
obtenez alors root.parent.parent.root, pour cibler la scne courante dun conteneur de
conteneur parent.
En ActionScript 3, la racine globale, qui correspondait avant _root, est dsormais dsigne par la
proprit stage de lobjet conteneur que constitue le document racine. Pour linvoquer, nous cri-
vons prsent this.stage.getChildAt(0).
Voir aussi la note suivante pour un exemple de ciblage avec this.stage.getChildAt(0).
Exemples de ciblage de contenus dans des SWF imbriqus (AS2 et AS3)

En ActionScript 2, pour cibler un contenu dans un autre SWF, nous procdions ainsi :
Cibler un symbole intitul clip_mc dans un SWF charg, contenu dans cible_mc:
cible_mc.clip_mc.rotation=90;
Cibler un symbole intitul clip_mc dans un SWF parent, contenu dans cible_mc :
_parent.cible_mc.clip_mc.rotation=90;
Ou bien, si le SWF parent est le conteneur principal : _root.cible_mc.clip_mc.rotation=90;
Pour cibler un contenu intitul clip_mc et plac deux conteneurs en amont, nous inscrivions :
_parent._parent.cible_mc.clip_mc.rotation=90;
En ActionScript 3, pour cibler un contenu dans un autre SWF, nous procdons dsormais ainsi :
Cibler un symbole intitul clip_mc dans un SWF charg, contenu dans cible_mc. Le nom du
conteneur napparat plus. Nous invoquons directement le chargeur :
MovieClip(nomDuChargeur.content).clip_mc.rotation=90;
Cibler un symbole intitul clip_mc dans un SWF parent, contenu dans cible_mc :
MovieClip(root.parent.root).cible_mc.clip_mc.rotation=90;
Ou bien, si le SWF parent est le conteneur principal (quivalent en AS3 de _root) :

MovieClip(this.stage.getChildAt(0)).cible_mc.clip_mc.rotation=90;
Pour cibler un contenu intitul clip_mc et plac deux conteneurs en amont, nous inscrivions :
MovieClip(root.parent.parent.root).cible_mc.clip_mc.rotation=90;
dfaut dutiliser la mthode getChildAt(), vous pouvez galement cibler un objet en utilisant
getChildByName(). Mais vous devez alors connatre le nom de lobjet pour le passer en parameter
de cette mthode. Ce qui donne, par exemple :
getChildByName("clip_mc");
Dans notre exemple, la fonction propose aussi une instruction compatible Flash 10 :
MovieClip(root.parent.root).chargeur.unloadAndStop();
//MovieClip(this.stage.getChildAt(0)).chargeur.unloadAndStop();
Comme nonc plus haut, nous ciblons ici le chargeur situ dans le SWF parent. Puis, nous
reprenons, comme pour le lien plac dans le SWF parent, la mthode unloadAndStop().
Une variante de la premire ligne est ajoute en commentaire. Elle propose une alternative
la syntaxe root.parent.root, pour cibler directement la scne du conteneur principale
(avec this.stage.getChildAt(0)), que nous aurions autrefois appele avec _root.
En publiant les deux documents, le premier charge le second et excute directement la
vido. Lorsque vous cliquez sur le lien situ en haut et droite de la vido, comme sur le
lien situ sous la vido droite, celle-ci est dabord arrte, puis disparat (voir
Figure 8.23).
retenir
Il est possible de cibler des objets dans des documents imbriqus et, inversement, de se rfrer des
objets placs dans un document racine, en ActionScript 3. Pour cela, nous transtypons les chargeurs
avec la mthode MovieClip() et ciblons leur contenu avec la proprit content.
Pour supprimer un document imbriqu qui joue une vido, il faut dabord interrompre le flux, puis
purger le chargeur qui a appel ce contenu.
Une nouvelle mthode, en ActionScript 3, permet dinterrompre les contenus chargs et de purger
le chargeur, simultanment : unLoadAndStop().
Figure 8.23
Aperu du
document.

Synthse
Dans ce chapitre, vous avez appris contrler linteractivit sur la vido en crant vous-
mme vos propres commandes pour, entre autres, lire, stopper, acclrer et rembobiner la
vido et modifier le volume sonore avec progression. Vous avez appris raliser un systme
de sous-titrage en utilisant un affichage de texte personnalis, crer diffrents dispositifs
de chapitrage. Vous avez appris raliser des prsentations vido fluides y compris quand
elles sont lues en arrire et vitesse variable. Vous avez appris grer lintgration de
contenus vidos dans des documents imbriqus et contourner la complexit de lAction-
Script 3 pour arrter les contenus audio et vido chargs. Dune manire plus gnrale, vous
avez aussi appris matriser le ciblage de contenus dans une structure de site complexe.
Vous tes prsent en mesure de raliser des sites richmdia impliquant lorganisation de
contenus vidos et une couche importante dinteractivit.
La 3D native
9
Introduction
La gestion de la 3D est possible nativement dans Flash depuis la version CS4. Mais elle
reste toutefois limite lanimation dobjets 2D dans un espace 3D. Ds lors que lutili-
sateur dispose dun lecteur Flash rcent (Flash 10), il peut lexcuter. Les proprits 3D
des objets du scnario, couples des interpolations programmes en ActionScript (avec
la classe TweenMax), ouvrent de nouvelles "perspectives" dans la conception de sites
Internet.
Dans ce chapitre, nous allons voir comment programmer des animations en 3D, dans Flash,
de manire simple et accessible. Pour cela, nous utilisons en premier exemple un livre avec
des pages qui tournent un flipbook , puis, nous analyserons des systmes de prsentation
de contenus avec diffrents types de galeries 3D, impliquant entre autres des images et de la
vido.
lissue de ce chapitre, vous saurez crer des interfaces 3D conviviales, en toute simplicit.
Les proprits 3D disponibles nativement pour lanimation dans Flash sont les suivantes :
x positionne lobjet sur laxe des abscisses.
y positionne lobjet sur laxe des ordonnes.
z positionne lobjet sur laxe Z.
rotationX effectue une rotation de lobjet sur laxe des abscisses.
rotationY effectue une rotation de lobjet sur laxe des ordonnes.
rotationZ effectue une rotation de lobjet sur laxe Z.
Ces proprits permettent de dplacer et pivoter les objets dans lespace de la mme
manire que nous le faisons avec dautres proprits, y compris travers des animations
programmes ou non.
Dans Flash, laxe X reprsente la ligne horizontale qui part de la gauche vers la droite. Laxe Y, la ligne
qui descend verticalement. Laxe Z, enfin, dsigne la ligne frontale qui part du premier plan (lcran)
et se dirige vers linfini en arrire-plan (voir Figure 9.1).
La rotation dans lespace 3D se dtermine par rapport aux axes X, Y et Z. Une rotation en X fait pivo-
ter un objet sur laxe X tout en le maintenant dans sa direction la manire du balai dune moisso-
neuse (voir Figure 9.2). Une rotation en Y fait pivoter un objet autour de laxe des ordonnes (axe
vertical) la manire des lames dun mixeur. Une rotation en Z applique un mouvement circulaire sur
laxe frontal des profondeurs, la manire des ailes dun moulin vent que nous observerions de
face.
Figure 9.1
Dfinition des
axes X, Y et Z
dun espace 3D.
X Y Z
Figure 9.2
Dfinition des
rotations X, Y et Z
dans un
espace 3D.
rotation X rotation Y rotation Z
Animer un livre 3D en ActionScript

Dans cette section, nous allons aborder la conception dun livre avec des pages qui tournent.
Pour cela, nous utilisons la classe TweenMax, compatible avec les proprits 3D de Flash
ainsi que des proprits de rotation dans lespace (voir Figure 9.3).
Figure 9.3
Aperu aprs
publication.
LA 3D NATIVE 243
En publiant le document, une animation fait entrer le livre au centre de lcran. En cliquant
sur la flche situe droite du livre ou sur le livre lui-mme, la page tourne sur un axe 3D et
laisse apparatre la page suivante, ceci pour toutes les pages. Une fois le livre termin, une
animation 3D le retire de lcran en le faisant pivoter dans lespace 3D, sur lui-mme.
Exemples > ch9_3DNative_1.fla
Dans le document "ch9-3DNative-1.fla", sur la scne principale, au-dessus du calque

fond_mc, apparat un symbole de type MovieClip nomm livre_mc (voir Figures 9.4
et 9.5). Le livre est plac hors champ.
Figure 9.4
Aperu de la
scne principale.
Figure 9.5
Aperu du scna-
rio de la scne
principale.
Le MovieClip livre_mc contient quatre symboles. Le premier reprsente la page de gauche

(livre ouvert), cest--dire, la page de couverture. Un autre clip reprsente la page de droite
et comporte lensemble des crans de toutes les pages du livre. En effet, une seule page est
anime et elle laisse donc derrire elle un vide chaque action. Une page Arrire sert de
fond pendant les transitions. Enfin, un bouton en forme de flche active le mcanisme des
pages qui tournent (voir Figure 9.6).
Figure 9.6
Aperu du scna-
rio du symbole
pageDroite_mc.
Le symbole pageDroite, ayant pour nom doccurrence pageDroite_mc, contient une srie
dcrans qui constituent les diffrentes pages du livre. Chaque cran est distribu dans le
scnario sous la forme dimages-cls, places les unes la suite des autres. La dernire
image est vide. Elle reprsente le verso de la page tourne (voir Figure 9.7).
Figure 9.7
Aperu du scna-
rio du symbole
pageDroite_mc.
Sur la scne principale, au sommet de tous les calques, figure le calque Actions (voir
Figure 9.5). Dans la fentre Actions, nous pouvons lire le code suivant :
import gs.TweenMax;
import gs.easing.*;
import gs.events.*;
var tweenPage:TweenMax;
var nombreDePages:Number=livre_mc.pageDroite_mc.totalFrames-1;
var i:Number=1;
livre_mc.pageDroite_mc.stop();
//-------------------------- animation dintroduction

var tween3D:TweenMax=TweenMax.to(livre_mc,4,{x:330, rotationZ:-15, delay:0,
TweenMax.from(livre_mc.pageGauche_mc,2,{rotationY:-180, delay:2,
TweenMax.from(livre_mc.flecheDroite_btn,2,{alpha:0,delay:4,
//-------------------------- cliquer pour tourner les pages

livre_mc.addEventListener(MouseEvent.MOUSE_DOWN,pageSuivante);
function pageSuivante (evt:MouseEvent) {

i++;
// page de garde
if (i<=1) {
livre_mc.swapChildren(livre_mc.pageGauche_mc,livre_mc.pageDroite_mc);
}
// page de droite
if (i<=nombreDePages) {
tween3D=TweenMax.to(livre_mc.pageDroite_mc,1,{rotationY:180,ease:Strong.easeOut});
LA 3D NATIVE 245
tween3D.addEventListener(TweenEvent.COMPLETE, tween3DFini);
} else {
//animation de fermeture
livre_mc.pageArriere_mc.visible=false;
TweenMax.to(livre_mc.pageDroite_mc,1,{rotationY:180,ease:Strong.easeOut});
TweenMax.to(livre_mc,4,{rotationZ:360, x:1000, z:-500, alpha:0,
rotationY:360, delay:1, ease:Strong.easeInOut});
livre_mc.flecheDroite_btn.visible=false;
tweenPage.addEventListener(TweenEvent.COMPLETE, tweenPageFini);
}
}
function tween3DFini (evt:TweenEvent) {

livre_mc.pageDroite_mc.gotoAndStop(i);
TweenMax.from(livre_mc.pageDroite_mc,1,{alpha:0,ease:Strong.easeOut});
livre_mc.pageDroite_mc.rotationY=0;
}
function tweenPageFini (evt:TweenEvent) {

removeEventListener(Event.ENTER_FRAME,masquerVersoPage);
}
//-------------------------- masquer le verso des pages qui tournent

addEventListener(Event.ENTER_FRAME,masquerVersoPage);
function masquerVersoPage (evt:Event) {
if (livre_mc.pageDroite_mc.rotationY>90) {
livre_mc.pageDroite_mc.gotoAndStop(6);
}
}
Ce code est structur en quatre parties : linitialisation, lanimation dintroduction, les

actions des pages qui tournent et la gestion du verso des pages tournes.
La premire partie du code importe les classes utilises pour les transitions TweenMax :
import gs.TweenMax;
import gs.easing.*;
import gs.events.*;
la suite, nous dfinissons quelques variables. La premire identifie une interpolation

TweenMax en vue de lui faire succder dautres actions :
var tweenPage:TweenMax;
La deuxime compte le nombre de pages du livre :

var nombreDePages:Number=livre_mc.pageDroite_mc.totalFrames-1;
La mthode totalFrames, aborde au Chapitre 8, permet ici de compter le nombre total

dimages dans le scnario du symbole pageDroite_mc. Nous lui retranchons cependant 1
afin de ne pas comptabiliser la page vide utilise pour le verso.
Nous dfinissons ensuite une variable i, utilise pour lincrmentation des pages, chaque
fois quune page est tourne. La valeur dmarre 1, car la premire image du scnario de
pageDroite_mc dmarre aussi 1 et, bien que masque, est dj active.
var i:Number=1;
Enfin, nous stoppons le dfilement automatique de la tte de lecture dans le symbole

pageDroite_mc. dfaut, nous les verrions toutes dfiler jusqu la premire interaction.
Ceci quivaut placer un stop directement en tte de la premire image de ce mme clip :
livre_mc.pageDroite_mc.stop();
Les premires instructions consistent raliser une animation dintroduction pour placer le
livre en position de lecture, prt tre ouvert. Nous dployons pour cela, dans cette
deuxime partie, quelques transitions de type TweenMax :
//-------------------------- animation dintroduction
var tween3D:TweenMax=TweenMax.to(livre_mc,4,{x:330, rotationZ:-15, delay:0,
TweenMax.from(livre_mc.pageGauche_mc,2,{rotationY:-180, delay:2,
TweenMax.from(livre_mc.flecheDroite_btn,2,{alpha:0,delay:4,
Dans ces interpolations, nous plaons, en paramtre, des proprits 3D (rotationZ, rota-
tionY). Nous utilisons les proprits 3D de la mme manire que les autres proprits (x,
alpha, scaleX, etc.).
La premire occurrence danimation est type. Cest pour nous permettre de disposer dun
nom dobjet, par la suite, sur lequel nous pourrons placer un couteur et enchaner avec
dautres actions (voir Chapitre 2).
Dans notre animation, le livre vient se positionner dans le champ en sinclinant lgrement
15 (rotationZ:15). Cette transition dure quatre secondes et dmarre linstant 0.
Puis, ds la deuxime seconde, dans la deuxime interpolation, la page de gauche du livre
pivote sur son axe Y (rotationY:180) et rvle la page de droite place larrire-plan.
Cette transition dure deux secondes et se termine en mme temps que la premire. Les effets
des deux animations se superposent dans le temps. Enfin, une transition fait apparatre la
flche droite et signale linteractivit. Les enchanements de ces transitions ont t grs
avec la proprit delay, sans recours aux couteurs.
Laccumulation de filtres sur des objets anims en 3D, avec des textures dgrades et des animations
en alpha, sollicite beaucoup les ressources graphiques. Si des sautillements apparaissent, pensez
rduire ces effets.
Dans la troisime partie, un couteur est attach au livre. Il appelle la fonction pageSui-
vante :
//-------------------------- cliquer pour tourner les pages
livre_mc.addEventListener(MouseEvent.MOUSE_DOWN,pageSuivante);
function pageSuivante (evt:MouseEvent) {

// instructions des pages qui tournent.
}
Nous ciblons directement le livre, et non pas seulement la flche contenue dans le livre, afin
de permettre lutilisateur dactiver le changement de page mme en cliquant sur le livre.
Puisque la flche est contenue dans le symbole du livre, le script fonctionnera galement en
LA 3D NATIVE 247
cliquant sur la flche. En proposant une action plus tendue, nous renforons lergonomie
du projet.
lintrieur du bloc dinstruction de la fonction, nous commenons par incrmenter i :
i++;
Puis, nous vrifions sa valeur. Si cette valeur est infrieure au nombre de pages visiter,
alors, nous intervertissons, dans la liste daffichage, les index de position des symboles
pageGauche et pageDroite :
// page de garde
if (i<=1) {
livre_mc.swapChildren(livre_mc.pageGauche_mc,livre_mc.pageDroite_mc);
}
La mthode swapChildern() appelle en paramtres les deux objets, spars par une vir-
gule, substituer dans la liste daffichage (livre_mc.pageGauche_mc,
livre_mc.pageDroite_mc). Le premier objet prend ainsi lindex du second.
Nous procdons linterversion des objets car lanimation 3D se matrialise sur le niveau
de lobjet uniquement, et non sur lensemble de la scne. La scne nest pas rellement pro-
jete en 3D. Seuls les objets le sont individuellement. Des proprits gnrales existent pour
la scne, mais les transformations des objets se font localement, chaque niveau. Si bien
que lorsque nous faisons pivoter un objet dans lespace, si celui-ci est plac sous un sym-
bole, lobjet restera toujours en arrire-plan. Pour contourner ce problme, nous replaons
au premier plan (pageGauche), celui plac larrire-plan (pageDroite).
Une fois la valeur de i vrifie et lindex de la page de droite plac au premier plan, nous
dployons le mcanisme de rotation :
// page de droite
if (i<=nombreDePages) {
tween3D=TweenMax.to(livre_mc.pageDroite_mc,1,{rotationY:180,ease:Strong.easeOut});
tween3D.addEventListener(TweenEvent.COMPLETE, tween3DFini);
}
Nous programmons la rotation de la page laide de la proprit rotationY et dune inter-

polation de type TweenMax. La page tourne donc bien sur sa verticale. Enfin, pour nous
assurer que lobjet pivote sur sa tranche et non en son centre, nous avons plac le centre du
symbole gauche, ds sa cration (voir Figure 9.8).
Un couteur est attach au nom dobjet de linterpolation TweenMax pour nous permettre de
lancer une autre action, une fois lanimation termine. Cette fonction, qui est excute
quand la page est tourne, dplace la tte de lecture dans le symbole pageDroite et replace
la page tourne sa position initiale :
function tween3DFini (evt:TweenEvent) {
livre_mc.pageDroite_mc.gotoAndStop(i);
livre_mc.pageDroite_mc.rotationY=0;
}
Figure 9.8
La position du
centre dtermine
laxe de rotation.
Nous avons galement ajout une interpolation qui affiche la page avec un fondu de type
alpha, allant de 0 1 (avec from) :
Nous devons comprendre que le fait de tourner la page va ncessairement produire un vide
lemplacement o cette page figurait avant de pivoter. Pour combler ce trou, nous plaons,
larrire-plan, le symbole pageArriere_mc. Afin que la nouvelle page contenant limage
napparaisse pas brutalement, nous utilisons un fondu en alpha.
Il est possible dafficher plus tt le contenu des pages en multipliant les symboles page-
Droite dans le livre, dune part, et en multipliant dautant les instructions gotoAndStop
dans le programme.
Si la condition pour raliser la rotation de la page nest pas vrifie (if(i<=nombreDePages)),
ou si le nombre de pages visites a atteint la limite autorise, alors else, une autre condition,
est excute :
else {
//animation de fermeture
livre_mc.pageArriere_mc.visible=false;
TweenMax.to(livre_mc.pageDroite_mc,1,{rotationY:180,ease:Strong.easeOut});
TweenMax.to(livre_mc,4,{rotationZ:360, x:1000, z:-500, alpha:0,
rotationY:360, delay:1, ease:Strong.easeInOut});
livre_mc.flecheDroite_btn.visible=false;
tweenPage.addEventListener(TweenEvent.COMPLETE, tweenPageFini);
}
LA 3D NATIVE 249
Lorsque les images de la page de droite sont toutes visites, la page arrire est dabord mas-
que (visible=false) car il ne reste plus de page tourner. La scne devient visible
larrire-plan du livre.
Une fois le livre referm, deux transitions sont excutes. La premire fait pivoter la der-
nire page. La seconde fait senvoler le livre, mais avec un dlai dune seconde. Ceci permet
au livre de se refermer avant de le voir senvoler.
Les mouvements du livre sont composs dune rotation sur les axes Z (rotationZ:360) et
Y (rotationY:360), puis dun dplacement en X et Z. La valeur utilise pour le dplace-
ment du livre, en Z, est ngative (z:-500). Cela signifie que lobjet quitte la scne tout en se
rapprochant de lcran.
Puis, nous masquons le bouton flche pour viter que lutilisateur ne relance laction. Nous
signalons aussi la fin du programme.
Enfin, pour doptimiser les ressources de lutilisateur, nous invoquons une fonction qui
interrompt, la fin de la transition, le gestionnaire ENTER_FRAME, dsormais inutile
(tweenPageFini).
Dans les quatrime et dernire parties, pour terminer, nous avons ajout une fonction qui
masque le verso des pages tournes :
//-------------------------- masquer le verso des pages qui tournent
addEventListener(Event.ENTER_FRAME,masquerVersoPage);
function masquerVersoPage (evt:Event) {
if (livre_mc.pageDroite_mc.rotationY>90) {
livre_mc.pageDroite_mc.gotoAndStop(6);
}
}
Nous spcifions que, ds que la page tourne atteint une rotation Y de 90, cest--dire ds
quelle apparat sur la tranche et que lon ne peroit plus son contenu, au recto ni au verso,
nous dplaons, avec un gestionnaire de type ENTER_FRAME, la tte de lecture de lobjet
page limage 6, qui reprsente une page vide. Sans cette fonction, nous pourrions voir des
deux cts du symbole la mme image, mais inverse. En affichant ponctuellement, juste le
temps de la rotation, limage 6, nous donnons lillusion de pages indpendantes les unes des
autres.
Pour complter, laction appele par le gestionnaire ENTER-FRAME fait rfrence une nou-
velle image du symbole pageDroite afin de compenser le fait que le moteur 3D affiche les
contenus sur les deux faces simultanment. Lorsque la page bascule 90, il nous suffit
donc de modifier limage affiche dans ce clip pour donner lillusion que le verso se distin-
gue du recto. Ainsi, pour crer un livre recto-verso, vous pouvez ajouter dans le symbole
pageDroite_mc autant de pages verso que voulues, puis les appeler depuis le gestionnaire
ENTER_FRAME en fonction de i, travers la mme mthode gotoAndStop(). Vous obtenez :
livre_mc.pageDroite_mc.gotoAndStop(i+nombreDePages);
Pensez dans ce cas adapter aussi le calcul de la variable nombreDePages, en fonction du

nombre de pages verso. Par exemple :
Var nombreDePages:int = (livre_mc.pageDroite_mc.totalFrames-1) /2
Raliser un livre interactif avec InDesign. Des systmes trs ralistes de livres interactifs prpro-
gramms (composants pageFlip) existent sur le Web et sont facilement accessibles. Dans la suite
Adobe, par exemple, InDesign CS4 intgre cette solution. Vous pouvez exporter tout type de mise en
pages en livre Flash interactif au format SWF. Il ne reste plus, ensuite, qu lier le document votre site
avec un chargeur programm en ActionScript, comme nous lavons vu prcdemment dans le chapi-
tre sur les galeries dimages. Pour exporter une mise en pages sous la forme dun livre raliste au for-
mat SWF, depuis InDesign, faites Fichier > Exporter. Dans les options dexportation, choisissez SWF.
Pour aller plus loin dans la gestion de documents mis en pages, reportez-vous au Chapitre 15, section
"Grer le PDF".
Lisser les images pour la 3D. Laffichage 3D peut gnrer un crnelage sur les images lorsquelles
sont projetes dans un espace 3D ou simplement inclines. Pour lisser les images, depuis la fentre
de Bibliothque, sur chaque image, faites clic-droit > Proprits. Puis, dans la fentre de dialogue,
activez loption Autoriser le lissage. Vous pouvez procder la mme action en programmation.
Reportez-vous la section "Lissage des images bitmap", au Chapitre 11, pour connatre les solutions
de lissage en programmation.
3D avec la classe Tween

Le langage
Les proprits 3D natives de Flash peuvent tre gres avec la classe Tween. Pour un objet clip_mc
anim, par exemple, avec les proprits z et rotationX, vous obtenez ceci :
var monTween:Tween;
monTween = new Tween(clip_mc, "z", Elastic.easeInOut,0,500,3, true);
var monTweenRx:Tween;
monTweenRx = new Tween(clip_mc, "rotationX", Elastic.easeInOut,0,500,3, true);
3D avec la classe Caurina

Les proprits 3D natives de Flash peuvent tre gres avec la classe Caurina (disponible sur http:/
/code.google.com/p/tweener/downloads/list). Pour un objet clip_mc anim avec, par exem-
ple, les proprits z et rotationX, vous obtenez ceci :
import caurina.transitions.Tweener;
Tweener.addTween(clip_mc, {x:300, y:300, z:330, rotationX:90, rotationY:0,
rotationZ:0, time:5, transition:"easeinoutexpo"});
3D avec la classe TweenMax

Les proprits 3D natives de Flash peuvent tre gres avec la classe TweenMax. Pour un objet
clip_mc anim avec, par exemple, les proprits z et rotationX, vous obtenez ceci :
import gs.TweenMax;
import gs.easing.*;
TweenMax.to(clip_mc,2, {rotationX:90,rotationY:90,z:500,delay:1,
ease:Bounce.easeOut});
LA 3D NATIVE 251
retenir
Flash autorise la gestion de la 3D y compris travers les interpolations des classes TweenMax,
Caurina et Tween. Il suffit dy introduire les proprits 3D x, y, z, rotationX, rotationY et
rotationZ.
Pour animer un objet en 3D, celui-ci doit tre un MovieClip.
La gestion de la 3D dans Flash est localise sur chaque objet. Il faut donc modifier lordre dapparition
des objets dans la liste daffichage lorsque leurs mouvements se croisent.
La position du centre de chaque symbole anim en 3D est dterminant pour la dfinition des mou-
vements dans lespace.
Carrousel dimages 3D
Un carrousel dimages 3D est une suite dimages que lon peut faire dfiler dans un
espace 3D. Les images qui passent au centre sont frontales. Celles qui restent en retrait de la
zone centrale se repositionnent dans lespace 3D par une transition anime. Les carrousels
dimages peuvent tre linaires, circulaires ou pouser dautres formes. Lexemple le plus
illustre de ce type de prsentation est le systme de navigation intitul CoverFlow et dve-
lopp par Apple. On le retrouve principalement sur le systme Mac OS X, dans liPhone,
iTunes et de nombreux services associs la marque Apple (voir Figure 9.9).
Figure 9.9
Apple CoverFlow.
Dans cette section, nous allons voir comment faire dfiler des images sur une bande hori-
zontale. Mais nous prsentons surtout comment dfinir un repositionnement 3D automati-
que, en fonction de la position de chaque image sur laxe des abscisses X.
Pour cet exemple, nous proposons deux documents cods diffremment, selon que vous
prfrez un codage simple partir dobjets placs manuellement dans le scnario ou un
codage plus adapt un interfaage dynamique (pour lier la prsentation un fichier XML,
par exemple).
Version simplifie
En publiant le premier document, nomm "ch9_3DNative_2.fla", deux flches donnent

accs au dfilement dune suite dimages. chaque clic, les images se repositionnement
dynamiquement dans lespace 3D en exerant une rotation sur laxe Y (voir Figure 9.10).
Figure 9.10
Aperu
du document
publi.
Dans la scne principale du document, une srie de MovieClip est rpartie vers les calques
(voir Figure 9.11).
Chaque symbole comporte une image double verticalement pour simuler un reflet. Le
premier dentre eux est situ prcisment 700 pixels droite. Dans le code, nous utili-
sons un pas dincrmentation de 300 pixels pour dfinir le repositionnement en X de ces
images. La scne, elle, mesure 800 pixels et son centre est donc situ 400 pixels (voir
Figure 9.12).
En plaant la premire image une valeur multiple du pas dincrmentation
(400 pixels + 300 pixels), nous permettons lensemble des images dapparatre plus tard,
au centre de la scne, frontalement.
Les images sont par ailleurs colles les unes aux autres, et pourraient mme se chevau-
cher, car la rotation Y que nous ajoutons sur chaque image en programmation, rduit leur
espace ncessaire en largeur. De ce fait, une marge due linclinaison apparatra lors de
la publication.
LA 3D NATIVE 253
Figure 9.11
Aperu de la
scne principale.
Figure 9.12 Origine x = 0 300 px 300 px 300 px 300 px
Calcul du posi-
tionnement des
images.
Scne (800 px)
700 px
Les flches gauche et droite situes de part et dautre du document risquent dtre caches
par le dfilement des images. Pour contourner ce problme, dans le scnario, un masque qui
affecte toutes les images a t appliqu et rduit la partie visible de la zone de dfilement
(voir Figure 9.13).
Figure 9.13
Aperu du scna-
rio de la scne
principale.
lintrieur de chaque MovieClip dimage, le visuel est en fait contenu dans un second
symbole. Ce dernier est dupliqu et plac symtriquement en miroir bas de faon obtenir
un effet de reflet. Sur ce deuxime symbole, nous avons appliqu un alpha 40 %.
Tous les symboles de la scne possdent chacun leur propre nom doccurrence. Le code
plac dans la fentre du calque Actions affiche ceci :
import gs.TweenMax;
import gs.easing.*;
import gs.events.*;
//------------------ actions
// flche droite
flecheDroite_btn.addEventListener(MouseEvent.CLICK,defilementDroite);
TweenMax.to(photo1_mc,2, {x:photo1_mc.x-300, delay:0, ease:Back.easeInOut});
}
// flche gauche
flecheGauche_btn.addEventListener(MouseEvent.CLICK,defilementGauche);
TweenMax.to(photo1_mc,2, {x:photo1_mc.x+300,delay:0, ease:Back.easeInOut});
}
// rotationY
var largeurScene:Number=stage.stageWidth;
var moitieScene:Number=largeurScene/2;
addEventListener(Event.ENTER_FRAME,position3DAuto);
function position3DAuto (evt:Event) {
if (photo1_mc.x<largeurScene+photo1_mc.width && photo1_mc.x>-(photo1_mc.width)) {
photo1_mc.rotationY=Math.ceil((photo1_mc.x-moitieScene)/4);
}
}
LA 3D NATIVE 255
}
}
}
}
}
}
Ce code, conu pour une gestion simple des contenus partir dobjets placs directement
dans le scnario, est structur en trois parties. La premire partie appelle les classes utilises
pour les transitions TweenMax. La deuxime partie gre le dfilement horizontal des vignet-
tes. La troisime partie assure la rotation dans lespace 3D selon la position courante de
chaque image dans la scne.
Le dplacement des images en X, engag avec les flches, utilise des interpolations de type
TweenMax :
// flche droite
}
Le principe est dclin pour chaque image de la scne et sur les deux flches. Nous inversons
simplement les valeurs de positionnement de +300 300.
Ensuite, nous organisons le systme de rotation automatique avec un gestionnaire de type
ENTER_FRAME, afin que lvnement soit recalcul perptuellement :
// rotationY
addEventListener(Event.ENTER_FRAME,position3DAuto);
}
}
Dabord, nous initialisons deux valeurs. La premire enregistre la largeur de la scne

(stage.stageWidth). La seconde enregistre la position du centre de la scne, en divisant la
premire par deux (largeurScene/2). Ces valeurs sont utilises dans la fonction
position3DAuto. Dans le bloc dinstructions de la fonction, pour chaque image, une condi-
tion est vrifie :
}
Si la position courante de limage est infrieure la largeur de la scne et sa largeur cumule

donc si limage entre dans le champ par la droite, alors le programme calcule sa rotation en
Y. Simultanment, une seconde condition est vrifie. Elle se distingue de la premire par les
deux esperluettes (&&) : si, la position courante de limage est galement suprieure sa lar-
geur ngative, cest--dire, ds que limage entre dans le champ par la gauche, alors, la
mme instruction que pour la premire condition est excute (voir Figure 9.14).
Figure 9.14 stage.stageWidth/2

Mcanisme de Origine x = 0
rotation en Y.
Linstruction dsigne est la suivante :

Nous dfinissons la rotation Y de lobjet en fonction de sa position courante en X. Plus pr-

cisment, nous reprenons la position en X de lobjet moins la demie largeur de la scne, de
sorte que la rotation soit neutralise au centre de la scne, et non lextrmit gauche o x
vaut 0. Pour dfinir un angle de rotation entier, nous arrondissons la valeur grce lutilisation
de la mthode Math.ceil().
Ce principe est appliqu chacune des images prsentes dans la scne.
Version dynamique
Afin de vous permettre dexploiter plus facilement le carrousel avec des contenus externali-
ss, nous avons optimis la gestion de ce programme en utilisant une structure compose
partir dune boucle for et une autre avec une structure for each in.
Exemples > ch9_3DNative_2b.fla

Exemples > ch9_3DNative_2c.fla
Dans le premier document, nous retrouvons quasiment la mme structure que dans le fichier
initial, la diffrence que lensemble des vignettes est dsormais rassembl dans un conteneur
LA 3D NATIVE 257
de type MovieClip que vous pourrez substituer ventuellement par un conteneur gnr
dynamiquement.
Cette modification structurelle, en ajoutant un conteneur, permet dappliquer dynamique-
ment le mme comportement lensemble des lments quil contient. Dans le scnario de
la scne principale, le symbole contenu_mc rassemble tous les lments (voir Figure 9.15).
Figure 9.15
Aperu du
scnario de la
scne principale.

import gs.TweenMax;
import gs.easing.*;
import gs.events.*;
var positionPhoto1:Number=(contenu_mc.getChildAt(0)).x;
var pasIncrementation:Number=300;
//------------------ actions
// flche droite
for (var i:Number=0;i<contenu_mc.numChildren;i++) {
TweenMax.to(
(contenu_mc.getChildAt(i)),2,
{
x:(contenu_mc.getChildAt(i)).x-pasIncrementation,
delay:0,
ease:Back.easeInOut
}
);
}
}
// flche gauche
for (var j:Number=0;j<contenu_mc.numChildren;j++) {
TweenMax.to(
(contenu_mc.getChildAt(j)),2,
{
x:(contenu_mc.getChildAt(j)).x+pasIncrementation,
delay:0,
ease:Back.easeInOut
}
);
}
}
// rotationY
contenu_mc.addEventListener(Event.ENTER_FRAME,position3DAuto);
for (var k:Number=0;k<contenu_mc.numChildren;k++) {
if
((contenu_mc.getChildAt(k)).x<largeurScene+(contenu_mc.getChildAt(k)).width-
positionPhoto1 && (contenu_mc.getChildAt(k)).x>-largeurScene) {
(contenu_mc.getChildAt(k)).rotationY=Math.ceil(((contenu_mc.getChildAt(k)).
x-moitieScene-positionPhoto1)/4);
}
}
}
// ciblage dynamique de contenu

contenu_mc.addEventListener(MouseEvent.CLICK,actionPhotos);
function actionPhotos (evt:MouseEvent) {
trace(evt.target.name);
TweenMax.to(evt.target,2, {rotationZ:evt.target.rotationZ+360, delay:0,
ease:Back.easeInOut});
}
Dans ce programme, nous initialisons dabord deux valeurs que nous utiliserons dans le
script. La premire dfinit la position actuelle du premier symbole image dans contenu_mc.
La mthode getChildAt(0) permet de slectionner llment qui apparat en premier dans
la liste daffichage de ce conteneur. Vous pouvez en vrifier le nom en ajoutant la proprit
name une action trace :
trace(contenu_mc.getChildAt(0).name); //photo1_mc
Dans les actions, le code est ar sur plusieurs lignes afin de mieux distinguer chacune des
proprits utilises dans linterpolation TweenMax. Cela na pas dincidence sur lexcution
du programme.
Nous remplaons ici la rptition des instructions par une boucle for qui ne conserve
quune seule ligne dinstruction. Il existe autant ditrations que dimages. Cest la boucle
qui, en fonction de ses paramtres, va multiplier et adapter les lignes de commande pour
chaque contenu :
for (var i:Number=0;i<contenu_mc.numChildren;i++) {
TweenMax.to(
(contenu_mc.getChildAt(i)),2, {x:(contenu_mc.getChildAt(i)).
x-pasIncrementation, delay:0, ease:Back.easeInOut });
}
La valeur qui permet dadapter linstruction est vhicule par i. Nous indiquons, au travers
du constructeur for, dinitialiser i 0. Puis, tant que cette valeur reste infrieure au nombre
denfants (symboles ou objets) disponibles dans contenu_mc, nous incrmentons cette
valeur. Ainsi, la boucle rpte lensemble des instructions quelle contient, entre ses accolades,
LA 3D NATIVE 259
autant de fois quil y aura dautres images. chaque itration, la valeur de i est augmente
(i++) si bien que les instructions qui utilisent cette valeur comme paramtre peuvent main-
tenant atteindre tour tour chaque objet.
Dans linterpolation TweenMax, nous ciblons chaque objet individuellement laide de la
mthode getChildAt() (avec (contenu_mc.getChildAt(i))), dj invoque pour la
variable, plus haut. Cependant, il nest pas possible dappliquer directement la proprit x
la mthode getChildAt(). Des parenthses sont donc ajoutes ici, pour contenir la pre-
mire instruction qui cible dabord lobjet, avant, seulement, de pouvoir modifier une des
proprits de cet objet. Cette mthode est dcline pour lensemble des actions du pro-
gramme.
En fin de code, une dernire action est ajoute au conteneur principal. Elle permet de cibler
individuellement chacun des lments de ce conteneur en usant de la proprit target et de
lui appliquer une rotation sur laxe Z :
// ciblage dynamique de contenu
contenu_mc.addEventListener(MouseEvent.CLICK,actionPhotos);
function actionPhotos (evt:MouseEvent) {
TweenMax.to(evt.target,2, {rotationZ:evt.target.rotationZ+360, delay:0,
ease:Back.easeInOut});
}
Pour en savoir plus sur le dveloppement dynamique dinterfaces, reportez-vous au manuel dAnne
Tasso (Apprendre programmer en ActionScript 3, d. Eyrolles).
Une dclinaison de ce document est propose, avec la structure for each in, dans le
fichier "ch9_3DNative_2c.fla". Dans ce document, nous avons remplac la boucle for avec
une boucle de type for each in. Ce type de boucle possde la particularit de dsigner
lensemble des objets dun conteneur simultanment. Ce qui vite davoir les cibler indi-
viduellement. Cest donc encore plus optimis. Cela donne :
// flche droite
for each (var mc:MovieClip in contenu_mc){
TweenMax.to(mc,2,{x:mc.x-pasIncrementation, delay:0, ease:Back.easeInOut });
}
}
// flche gauche
TweenMax.to(mc,2,{x:mc.x+pasIncrementation, delay:0, ease:Back.easeInOut });
}
}
// rotationY
contenu_mc.addEventListener(Event.ENTER_FRAME,position3DAuto);
if (mc.x<largeurScene+mc.width-positionPhoto1 && mc.x>-largeurScene) {
mc.rotationY=Math.ceil((mc.x-moitieScene-positionPhoto1)/4);
}
}
}
retenir
Pour centrer dans la scne les effets ou les objets, nous intgrons, dans le calcul des valeurs, la posi-
tion du centre de la scne avec stage.stageWidth/2.
La boucle for each in permet de cibler directement lensemble des objets dun conteneur.
Mur dimages 3D
Un mur dimages est une mosaque sur laquelle on clique pour afficher une image en dtail.
Lorsque le pointeur survole lcran, le mur dimages oscille proportionnellement dans un
sens ou dans lautre, verticalement et horizontalement.
Dans cet exemple, nous utilisons des symboles placs sur la scne dont nous contrlons
linclinaison en fonction de la position du pointeur lcran. En balayant la scne, le mur
dimage bouge. Nous ajoutons une interactivit sur les images laide de la proprit tar-
get, pour, par exemple, zoomer individuellement sur chaque image et matrialiser un effet
de "rollOver" avec un filtre dynamique (voir Figures 9.16 9.18).
Figure 9.16
Aperu du docu-
ment la publica-
tion, pointeur sur
le ct.
LA 3D NATIVE 261
Figure 9.17
Aperu du
document la
publication,
image survole.
Figure 9.18
Aperu du
document la
publication,
image clique et
zoome.
Le document "ch9_3DNative_3.fla" affiche une mosaque nomme contenu_mc, lint-

rieur de laquelle sont rpartis diffrents MovieClip. Chacun de ces MovieClip contient sa
propre image et possde un nom doccurrence (voir Figure 9.19).
Figure 9.19
Aperu de la
scne principale.
Chaque symbole est dj rduit 50 % de ses dimensions originales. Cela permet dactiver
une fonction de zoom sans perdre sur la nettet de limage. Le zoom leur affectera seule-
ment leur chelle normale.
Pour amliorer galement le rendu des images, dans un contexte en perptuel mouvement,
nous avons activ, depuis la fentre Bibliothque, dans les proprits de chaque image (clic-
droit > Proprits), loption Autoriser le lissage.
Le scnario ne laisse apparatre que le symbole contenu_mc (voir Figure 9.20).
Figure 9.20
Aperu du
scnario de la
scne principale.

var haloIn:GlowFilter=new GlowFilter(0xffffff,1,2,2,3,255, false, false);
var haloOut:GlowFilter=new GlowFilter(0xffffff,1,0,0,3,255, false, false);
import gs.TweenMax;
import gs.easing.*;
import gs.events.*;
var demieScene:Number=stage.stageWidth/2;
var hauteurScene:Number=stage.stageHeight/2;
var Tween3D:TweenMax;
LA 3D NATIVE 263
var nomImageActive:String;
var positionInitX:Array=new Array();

var positionInitY:Array=new Array();
for (var i:Number=0; i<contenu_mc.numChildren; i++) {
positionInitX.push(contenu_mc.getChildAt(i).x)
positionInitY.push(contenu_mc.getChildAt(i).y)
}
//------------------ actions
// mouvement3D
contenu_mc.addEventListener(Event.ENTER_FRAME, murImages);
function murImages (evt:Event) {
contenu_mc.rotationY=(mouseX-demieScene)*0.1;
contenu_mc.rotationX=(mouseY-hauteurScene)*-0.1;
}
// interactivit zoom
contenu_mc.addEventListener(MouseEvent.CLICK,zoom);
function zoom (evt:MouseEvent) {
Tween3D=TweenMax.to(contenu_mc.photo1_mc,0.3, {z:0, x:positionInitX[0],
y:positionInitY[0], scaleX:0.5, scaleY:0.5, delay:0 ,ease:Strong.easeInOut});
TweenMax.to(contenu_mc.photo2_mc,0.3, {z:0, x:positionInitX[1],
//
Tween3D.addEventListener(TweenEvent.COMPLETE,restaureFini);
function restaureFini (yo:TweenEvent) {
contenu_mc.addChild(MovieClip(evt.target));
}
if (nomImageActive!=evt.target.name) {
nomImageActive=evt.target.name
//
TweenMax.to(evt.target,2, {z:-100, x:0, y:0, scaleX:1.2, scaleY:1.2,
delay:0.3, ease:Elastic.easeOut});
} else {
nomImageActive="";
}
}
// rollOvers
contenu_mc.addEventListener(MouseEvent.MOUSE_OVER,over);
function over (evt:MouseEvent) {

evt.target.filters=[haloIn];
}
contenu_mc.addEventListener(MouseEvent.MOUSE_OUT,out);
evt.target.filters=[haloOut];
}
Le code est compos de quatre parties. Linitialisation, les actions de positionnement du

mur dans lespace 3D, la gestion de linteractivit (zoom) sur les images et la gestion de
leffet rollOver.
Avant de dtailler chaque tape, nous devons comprendre le processus employ. En
publiant le document, dabord, lensemble nomm conteneur_mc oscille en fonction de la
position du pointeur dans la scne. Puis, au passage de la souris sur les symboles quil contient,
ceux-ci ragissent avec un filtre dynamique. En cliquant sur un symbole, celui-ci sagrandit.
En cliquant nouveau dessus, il revient sa position normale. Mais, si nous cliquons directe-
ment sur un autre symbole, simultanment, la nouvelle image sagrandit, tandis que la prc-
dente revient en position initiale.
Dans la premire partie, nous commenons par importer les classes requises, dont filters,
qui permettent, plus bas, de grer leffet rollOver (voir Chapitre 2). Nous commenons par
instancier les deux effets, leffet survol et leffet inactif. Lorsque le pointeur survolera
limage, le premier sera activ. Le second sera appel en sortant de limage :
Nous importons ensuite les classes des transitions TweenMax :

import gs.TweenMax;
import gs.easing.*;
import gs.events.*;
Puis, nous dfinissons quelques valeurs :

Les deux premires valeurs servent dfinir les rotations par rapport au centre de la scne,
sur le mme principe que celui nonc dans la section prcdente. Ensuite, nous typons une
interpolation TweenMax afin de pouvoir enchaner des actions lissue dune interpolation.
Enfin, nous crons une variable chane de caractres afin de capturer, chaque clic, le nom
de limage clique (nomImageActive), de manire diffrencier son comportement, selon
quelle ait dj t zoome ou non.
Nous dfinissons ensuite deux tableaux qui enregistrent respectivement les positions de
dpart des images en X et Y. Nous utiliserons, plus loin dans le code, ces valeurs afin de res-
taurer les images leurs positions initiales :
var positionInitX:Array=new Array();
var positionInitY:Array=new Array();
LA 3D NATIVE 265
positionInitX.push(contenu_mc.getChildAt(i).x)
positionInitY.push(contenu_mc.getChildAt(i).y)
}
La cration de chaque tableau est lance avec la classe Array. Une boucle for ajoute, grce
la mthode push(), la position courante, en X et en Y, de chaque objet en fonction de son
ordre daffichage (contenu_mc.getChildAt(i)). La boucle excute autant ditration
quil y a denfant dans le symbole contenu_mc (contenu_mc.numChildren).
Dans les actions, nous commenons par dfinir le mouvement global du conteneur dimages :
//------------------ actions
// mouvement3D
contenu_mc.addEventListener(Event.ENTER_FRAME, murImages);
}
Un couteur est attach au contenu et fait pivoter, en continu, lobjet sur laxe Y (rota-
tionY) et sur laxe X (rotationX). La rotation sur laxe Y est dtermine en fonction de la
position du pointeur sur X. Celle de laxe X, en fonction de la position du pointeur sur Y.
Mais, comme vu prcdemment, nous retranchons la demi-largeur et hauteur de la scne,
afin de neutraliser les rotations lorsque le pointeur survole le milieu de lcran (quand la
position vaut 0, la rotationX et rotationY vaut 0).
Dautre part, la position du pointeur dfinie en X et en Y se mesure en centaines de pixels.
La rotation, elle, se mesure en dizaines de degrs. Nous rduisons donc la valeur obtenue en
la multipliant par 0.1 (quivaut diviser par 10), ceci afin dviter un mouvement trop pro-
nonc.
Nous ajustons galement la polarit du mouvement, avec un signe moins, selon que le sens
que lon veut affecter linclinaison. Le signe moins inverse linclinaison par rapport la
position du pointeur. Labsence de signe conserve une inclinaison qui accompagne le mou-
vement du pointeur.
la suite, nous crons linteractivit relative la fonction zoom, applique chaque image :
// interactivit zoom
contenu_mc.addEventListener(MouseEvent.CLICK,zoom);
function zoom (evt:MouseEvent) {
Tween3D=TweenMax.to(contenu_mc.photo1_mc,0.3, {z:0, x:positionInitX[0],

//
}
// autres actions
}
Dans un premier temps, nous appliquons un couteur qui dtecte tout clic captur par
lobjet contenu_mc. Le principe de propagation vnementielle utilis par AS3 permet aux
objets contenus par un conteneur dintercepter un vnement appliqu celui-ci. Nous uti-
lisons pour cela la proprit target et nous dsignons un couteur global pour lensemble
des symboles quil contient.
En cliquant sur lun des symboles, une interpolation TweenMax restaure dabord la position
initiale de ceux qui ont ventuellement dj t zooms. Cette interpolation est trs courte
(0.3 secondes) afin de ne pas crer une attente trop longue lorsquaucune image na encore
t active (au premier clic). Les proprits animes sont lindex z, qui dfinit la position de
limage en profondeur. De valeur 0, elle dsigne une position normale.
Nous restaurons aussi la position courante du symbole en X et Y, ainsi que son chelle scaleX
et scaleY, 50 % (0.5).
Linterpolation cre pour le premier symbole est dcline pour lensemble des lments
animer, soit 9 fois. Pour chacun dentre eux, nous modifions le nom de lobjet manipuler
et sa position en X et Y. Les valeurs utilises sont celles stockes initialement dans les
tableaux. Pour lire ces valeurs, nous reprenons le nom de chaque tableau en ajoutant deux
crochets, avec, en paramtre, la valeur correspondant au symbole cibl (positionInitX[0]
et positionInitY[0]).
La premire dentre elles est identifie avec un nom de variable tween3D. Cette instancia-
tion nous permet dajouter une fonction une fois linterpolation de restauration acheve.
La fonction restaureFini, qui est appele, est place dans la fonction zoom, car elle fait
directement rfrence lobjet cliqu avec target par le biais de la variable evt, utilise en
paramtre de la fonction zoom. Si la fonction tait place en dehors de zoom, lobjet ne
serait plus identifi. Si nous avions employ le mme nom de variable en paramtre de la
fonction restaureFini, nous aurions aussi gnr une erreur, car le lecteur naurait pas su
quelle classe il devait se rfrer, MouseEvent ou bien TweenEvent, pour recevoir les infor-
mations. Cest la raison pour laquelle cette fonction emploie galement un terme diffrenci
du premier et sans valeur spcifique (yo).
La fonction restaureFini commence donc par redistribuer au sommet de la liste daffi-
chage, lobjet cliqu. Cette action replace virtuellement lobjet sur le calque du dessus, dans
LA 3D NATIVE 267
contenu_mc, en faisant retomber la pile dobjets restant, un niveau en dessous, jusqu
lemplacement alors rest vide. Ainsi, limage zoome apparatra au premier plan indpen-
damment des autres, et non en chevauchant les autres images.
La fonction se poursuit avec une structure conditionnelle :
}
//
TweenMax.to(evt.target,2, {z:-100, x:0, y:0, scaleX:1.2, scaleY:1.2,
delay:0.3, ease:Elastic.easeOut});
} else {
nomImageActive="";
}
}
Si le nom du symbole cliqu (evt.target.name) est diffrent (!=) du nom enregistr dans
la variable (evt.target.name) ou si limage na pas dj t clique, alors, une action est
excute.
Cette action commence par mmoriser le nom de lobjet cliqu afin de pouvoir lidentifier
comme actif lors du prochain clic.
La deuxime instruction est une interpolation. Elle cible lobjet cliqu (evt.target) et lui
affecte un index de profondeur 100. Lobjet est donc rapproch de lcran. La position en
X et Y est recentre afin que limage agrandie ne sorte pas de lcran lorsquun symbole
situ dans les coins est activ. Puis, en plus du changement dindex z, limage est agrandie
120 %. Comme nous avons activ le lissage des pixels, cette valeur reste tolrable et la
dformation demeure encore imperceptible.
Si la condition else nest pas vrifie, nous purgeons le nom enregistr. Cela permet que
lorsque lutilisateur clique directement deux fois sur la mme image, de louvrir nouveau,
sans devoir cliquer au pralable sur une autre image. Tant que le nom de limage nest pas
modifi, limage dj clique ne pourra pas en effet tre rejoue, sauf si nous modifions ce
nom en le substituant, par exemple, avec un texte vide ("").
Le programme sachve avec la gestion des rollOver :
// rollOvers
}
}
En passant avec le pointeur sur les lments du conteneur, le filtre dynamique GlowFilter
(filters=[haloIn]) affiche un halo blanc autour de lobjet survol (evt.target). De la
mme manire, en sortant le pointeur de lobjet survol, le filtre est initialis avec le second
objet GlowFilter (filters=[haloOut]).
retenir
Pour regrouper le stockage de valeurs, nous pouvons utiliser un tableau grce la mthode Array.
Puis les redistribuer en linvoquant par son nom et en paramtre duquel nous spcifions lobjet
stock lire.
Afin de placer un symbole au premier plan, dans un espace 3D, nous devons le repositionner au
sommet de la liste daffichage, avec, par exemple, la mthode addChild().
Lorsque plusieurs fonctions sont imbriques, il est souhaitable de distinguer les identifiants passs
en paramtre, afin de distinguer les classes distribues par les diffrents couteurs.
Galerie vido 3D circulaire

Une galerie en 3D avec de la vido peut paratre similaire, dun point de vue structurel,
une galerie 3D dimages. Mais, pour obtenir une image propre et un document optimis,
vous devez tenir compte de certaines distinctions :
Limage joue en vido doit tre dimensionne en fonction de laffichage final.
Lors des transitions, pour prserver la qualit de limage, cest le composant vido qui
doit tre redimensionn et non son conteneur. Cest donc le conteneur qui volue dans
lespace 3D et non la vido.
Les vidos doivent de prfrence tre arrtes si aucune interaction de lutilisateur nest
avre. Ceci afin doptimiser les ressources machines de lutilisateur dj sollicites par
la gestion de laffichage 3D.
Dans cet exemple, nous prsentons une galerie dcrans vido disposs de manire cir-
culaire. La galerie oscille selon la position du pointeur sur le mme mcanisme que
lexemple prcdent. En survolant les crans, un effet de rollOver se produit, et, simulta-
nment, la vido survole dmarre. En cliquant sur la vido, celle-ci est projete fronta-
lement avec un zoom spatial (chelle + index z) et loscillation est arrte. Lorsque
lutilisateur clique nouveau sur la vido, celle-ci revient sa position initiale (voir
Figures 9.21 et 9.22).
Dans cette section, nous proposons deux approches pour la construction de cette interface.
La premire, accessible facilement, met en forme le dispositif partir dinstructions simples
et rptes. Une seconde approche exploite linverse une structure tabulaire pour vhiculer
lensemble des proprits des objets, afin de simplifier la gestion du code. Vous trouverez
donc, ncessairement, la formule qui vous convient le mieux pour raliser vos propres sys-
tmes daffichage en 3D.
LA 3D NATIVE 269
Figure 9.21
Aperu du
document
la publication,
vido survole.
Figure 9.22
Aperu du
document
la publication,
vido projete
frontalement.
La galerie simple
Dans cette version, nous initialisons les objets mettre en forme partir dinstructions rp-
tes. Puis, nous ajoutons les comportements requis pour les animations et linteractivit.
Dans le document "ch9_3DNative_4.fla", sur la scne principale, le symbole contenu_mc

affiche six occurrences du mme MovieClip, mais de noms diffrents. Ce MovieClip
contient un composant FLVPlayBack nomm ecranVideo (voir Figure 9.23).
Figure 9.23
Aperu de la
scne principale.
Dans la fentre de scnario, au-dessus du calque fond_mc, on distingue le symbole

contenu_mc (voir Figure 9.24).
Figure 9.24
Aperu du
scnario.
La fentre Actions affiche le code suivant :

LA 3D NATIVE 271
import gs.TweenMax;
import gs.easing.*;
import gs.events.*;
//------------------ configuration des crans vido

contenu_mc.v1_mc.ecranVideo.source="video3D/3d-gKaster-C19.f4v";
contenu_mc.v2_mc.ecranVideo.source="video3D/3d-gKaster-amusement.f4v";
contenu_mc.v3_mc.ecranVideo.source="video3D/3d-gKaster-balistic.f4v";
contenu_mc.v4_mc.ecranVideo.source="video3D/3d-gKaster-demoreel.f4v";
contenu_mc.v5_mc.ecranVideo.source="video3D/3d-galaxieFull.f4v";
contenu_mc.v6_mc.ecranVideo.source="video3D/3d-particules.f4v";
//
contenu_mc.v1_mc.rotationY=-30;
contenu_mc.v2_mc.rotationY=0;
//
contenu_mc.v1_mc.z=-25;
contenu_mc.v2_mc.z=40;
contenu_mc.v5_mc.z=40;
//
MovieClip(contenu_mc.getChildAt(i)).ecranVideo.stop();
MovieClip(contenu_mc.getChildAt(i)).ecranVideo.scaleMode="exactFit";
MovieClip(contenu_mc.getChildAt(i)).ecranVideo.autoPlay=false;
}
//------------------ actions
// mur dimage3D
contenu_mc.addEventListener(Event.ENTER_FRAME,murImages);
}
// interactivit vido
contenu_mc.addEventListener(MouseEvent.CLICK,zoomVideo);
function zoomVideo (evt:MouseEvent) {
//
contenu_mc.removeEventListener(Event.ENTER_FRAME,murImages);
TweenMax.to(contenu_mc,3, {rotationX:0, rotationY:0, delay:0,
ease:Elastic.easeInOut});
//
Tween3D=TweenMax.to(contenu_mc.v1_mc,0.3, {z:-25, x:-245, y:-72,

rotationY:-30, delay:0, ease:Strong.easeInOut});
TweenMax.to(contenu_mc.v2_mc,0.3, {z:40, x:0, y:-72, delay:0, rotationY:0,
TweenMax.to(contenu_mc.v3_mc,0.3, {z:-25, x:245, y:-72, delay:0,
rotationY:30, ease:Strong.easeInOut});
TweenMax.to(contenu_mc.v4_mc,0.3, {z:-25, x:-245, y:72, delay:0,
rotationY:-30, ease:Strong.easeInOut});
TweenMax.to(contenu_mc.v5_mc,0.3, {z:40, x:0, y:72, delay:0, rotationY:0,
TweenMax.to(contenu_mc.v6_mc,0.3, {z:-25, x:245, y:72, delay:0,
//
TweenMax.to(contenu_mc.v1_mc.ecranVideo,2, {width:220, height:123, x:-110,
y:-62, delay:0.3, ease:Elastic.easeOut});
//
}
//
TweenMax.to(evt.target.ecranVideo,2, {width:440, height:246, x:-220,
TweenMax.to(evt.target,2, {z:-100, x:0, y:0, rotationY:0, delay:0.3,
} else {
nomImageActive="";
}
}
// rollOvers
evt.target.ecranVideo.play();
}
evt.target.ecranVideo.stop();
}
Le programme se dcompose en cinq parties. La premire importe les classes requises dont
les filtres et les transitions TweenMax. La deuxime initialise les caractristiques de chaque
composant vido et le positionnement de son conteneur dans lespace 3D. La troisime
LA 3D NATIVE 273
active lanimation 3D du mur dcrans. La quatrime lance linteractivit avec les flux
vido. La cinquime, enfin, ajoute leffet rollOver sur chaque vido et active la lecture de
cette vido.
Dans la deuxime partie, chaque composant est initialis selon les paramtres suivants.
Lensemble de ces rglages est dclin pour chacune des vidos. Voici les caractristiques
pour lune dentre elles :
contenu_mc.v1_mc.ecranVideo.source="video3D/3d-gKaster-C19.f4v";
//
//
Analysons le code :
La proprit source dsigne lURL du fichier vido lire.
Les proprits rotationY et rotationZ positionnent non pas le composant mais son
conteneur, le MovieClip, dans lespace 3D.
Plus loin, nous utilisons une boucle for afin de regrouper la gestion de lensemble des
composants vido distribus dans chaque MovieClip :
MovieClip(contenu_mc.getChildAt(i)).ecranVideo.stop();
MovieClip(contenu_mc.getChildAt(i)).ecranVideo.scaleMode="exactFit";
MovieClip(contenu_mc.getChildAt(i)).ecranVideo.autoPlay=false;
}
Analysons le code :
La mthode stop(), une fois la source appele, permet de prserver les ressources de
lutilisateur en empchant les vidos de se lire automatiquement.
La proprit scaleMode indique si le composant doit tre redimensionn en fonction
des dimensions relles de la vido. La valeur exactFit interdit le redimensionnement.
Si la vido est plus grande ou de proportions diffrentes du composant, elle pousera
quand mme les dimensions du composant (voir Chapitre 8 pour le descriptif dtaill de
ces paramtres).
Enfin, la proprit autoPlay passe sur false empche la vido de lire au dmarrage
(deux prcautions valent mieux quune).
Plus loin, les actions affichent le contrle du mouvement du mur dcrans (voir section prc-
dente). la suite, apparaissent les contrles dinteractivit avec les flux vidos :
//
}
Dans un premier temps, la fonction, appele lorsque lutilisateur active une vido, neutralise
loscillation du mur (removeEventListener). Ainsi, la vido peut tre repositionne fron-
talement assez simplement et permettre une lecture confortable du contenu. Cette fonction
sera ractive lorsque toutes les vidos seront restaures leur position initiale, plus loin
dans le code.
Une deuxime instruction indique au symbole contenu_mc, dont nous venons dinterrom-
pre le mouvement, de passer progressivement de sa position actuelle une position frontale,
pour laquelle tous les paramtres modifis sont initialiss la valeur 0 (rotationX:0,
rotationY:0).
Ensuite, nous ajoutons les transitions pour chacun des composants et leurs conteneurs res-
pectifs :
//
Tween3D=TweenMax.to(contenu_mc.v1_mc,0.3, {z:-25, x:-245, y:-72,
rotationY:-30, delay:0 ,ease:Strong.easeInOut});
TweenMax.to(contenu_mc.v2_mc,0.3, {z:40, x:0, y:-72, delay:0, rotationY:0,
TweenMax.to(contenu_mc.v3_mc,0.3, {z:-25, x:245, y:-72, delay:0,
TweenMax.to(contenu_mc.v4_mc,0.3, {z:-25, x:-245, y:72, delay:0,
rotationY:-30, ease:Strong.easeInOut});
TweenMax.to(contenu_mc.v5_mc,0.3, {z:40, x:0, y:72, delay:0, rotationY:0,
TweenMax.to(contenu_mc.v6_mc,0.3, {z:-25, x:245, y:72, delay:0,
//
//
Vous relevez que nous animons distinctement le conteneur et le composant, avec diffrentes
proprits.
Si nous avions effectivement anim uniquement le conteneur, en lui appliquant les propri-
ts de redimensionnement qui nous permettent dagrandir limage, celle-ci aurait t consi-
drablement dtriore, mme avec un lissage. Or, la vido sadapte par rapport aux
dimensions du composant. Il convient donc de redimensionner le composant et non le
conteneur. Cest la raison pour laquelle nous obtenons deux sries dinterpolations, affec-
tant chacune tous les conteneurs (contenu_mc.v1_mc) voir Figure 9.25 puis tous les
composants (contenu_mc.v1_mc.ecranVideo).
LA 3D NATIVE 275
Figure 9.25 x = -245 x = +245
Calcul du posi-
tionnement des
crans, dans le
y = -72 Origine x,y = 0
conteneur
contenu_mc.
y = +72
Pour compenser nanmoins le dcalage que peut provoquer le redimensionnement du com-

posant indpendamment de son conteneur, nous rappelons les proprits x et y de chaque
objet pour recentrer lensemble chaque modification dchelle. Le changement de taille
des lments conduit en effet les dcaler de leur position dorigine. Il faut donc aussi
animer et restaurer les proprits x et y de chacun dentre eux.
Pour permettre denchaner ces transitions avec dautres actions, lune dentre elles possde
un identifiant tween3D.
Plus loin, nous ajoutons un couteur lobjet tween3D, comme vu la section prcdente.
Nous enchanons ici avec la condition suivante :
//
}
//
} else {
nomImageActive="";
}
}
Nous spcifions dabord de placer le conteneur cliqu au premier plan pour viter les chevau-
chements lors du redimensionnement :
Nous vrifions ensuite la condition selon laquelle lobjet cliqu nest pas dj zoom, selon
le mme principe que celui utilis dans la section prcdente.
Les transitions affectent les deux objets (evt.target.ecranVideo et evt.target).
Le composant vido activ est agrandi selon les dimensions exactes observes durant
lencodage. Nous avons relev les valeurs 440 246 pixels. Nous les appliquons donc aux
proprits width et height du composant vido. Le flux vido, projet au premier plan,
sadaptera ainsi en pleine rsolution la nouvelle dimension du composant. Le conteneur

de la vido active (evt.target) est plac, quant lui, frontalement. Si la condition nest
pas vrifie, donc, si aucune autre vido ne prend la place centrale, nous ractivons le mur
dimages (addEventListener).
Le programme se termine avec la gestion des rollOver :
// rollOver
}
}
Lorsque lutilisateur survole un conteneur, la vido quil vhicule est joue (evt.tar-
get.ecranVideo.play()). Le filtre du halo blanc est excut (evt.target.fil-
ters=[haloIn]).
Les mmes instructions, mais neutralises, sont excutes lorsque le pointeur quitte la sur-
face de lobjet (MOUSE_OUT).
La galerie optimise
Dans cette version, nous optimisons la gestion des proprits de chaque objet avant de ra-
liser les animations et dvelopper linteractivit. Nous distribuons ensuite, sous la forme de
commandes compactes, chacune des instructions dj tudies dans la version prcdente.
Exemples > ch9_3DNative_4b.fla
Le document possde une structure similaire au prcdent. La fentre Actions affiche le

code suivant :
import gs.TweenMax;
import gs.easing.*;
import gs.events.*;
LA 3D NATIVE 277
var datas:Array = [
{source:"video3D/3d-gKaster-C19.f4v",rotationY:-30,x:-245,y:-72,z:-25},
{source:"video3D/3d-gKaster-amusement.f4v",rotationY:0,x:0,y:-72,z:40},
{source:"video3D/3d-gKaster-balistic.f4v",rotationY:30,x:245,y:-72,z:-25},
{source:"video3D/3d-gKaster-demoreel.f4v",rotationY:-30,x:-245,y:72,z:-25},
{source:"video3D/3d-galaxieFull.f4v",rotationY:0,x:0,y:72,z:40},
{source:"video3D/3d-particules.f4v",rotationY:30,x:245,y:72,z:-25}
];

contenu_mc["v"+i+"_mc"].ecranVideo.source=datas[i].source;
contenu_mc["v"+i+"_mc"].rotationY=datas[i].rotationY;
contenu_mc["v"+i+"_mc"].z=datas[i].z;
contenu_mc["v"+i+"_mc"].ecranVideo.stop();
contenu_mc["v"+i+"_mc"].ecranVideo.scaleMode="exactFit";
contenu_mc["v"+i+"_mc"].ecranVideo.autoPlay=false;
}
//------------------ actions
// mur dimage3D
}
//
//
Tween3D=TweenMax.to(contenu_mc["v"+i+"_mc"],0.3, {z:datas[i].z,
x:datas[i].x, y:datas[i].y, rotationY:datas[i].rotationY, delay:0,
TweenMax.to(contenu_mc["v"+i+"_mc"].ecranVideo,2, {width:220,
height:123, x:-110, y:-62, delay:0.3, ease:Elastic.easeOut});
}
//
}
//
} else {
nomImageActive="";
}
}
// rollOvers
}
}
Dans la premire partie du code, nous commenons par instancier lensemble des proprits
de chaque vido travers un tableau, grce la mthode Array. Pour chaque nouvelle
entre, nous ouvrons et fermons une paire daccolades. Chaque bloc cr enregistre, sous la
forme de paramtres, chacune des proprits et valeurs dont nous souhaitons disposer par la
suite dans les fonctions danimation :
var datas:Array = [
{source:"video3D/3d-gKaster-C19.f4v",rotationY:-30,x:-245,y:-72,z:-25},
{source:"video3D/3d-gKaster-amusement.f4v",rotationY:0,x:0,y:-72,z:40},
{source:"video3D/3d-gKaster-balistic.f4v",rotationY:30,x:245,y:-72,z:-25},
{source:"video3D/3d-gKaster-demoreel.f4v",rotationY:-30,x:-245,y:72,z:-25},
{source:"video3D/3d-galaxieFull.f4v",rotationY:0,x:0,y:72,z:40},
{source:"video3D/3d-particules.f4v",rotationY:30,x:245,y:72,z:-25}
];
Puis, nous utilisons une boucle for pour affecter, aux diffrents objets, les proprits stockes
dans le prcdent tableau :
contenu_mc["v"+i+"_mc"].rotationY=datas[i].rotationY;
contenu_mc["v"+i+"_mc"].z=datas[i].z;
contenu_mc["v"+i+"_mc"].ecranVideo.stop();
contenu_mc["v"+i+"_mc"].ecranVideo.scaleMode="exactFit";
contenu_mc["v"+i+"_mc"].ecranVideo.autoPlay=false;
}
Dans ce contexte, pour cibler chaque objet individuellement, nous dsignons dabord le
conteneur principal (contenu_mc), suivi de ses lments descendants grce une syntaxe
tabule (avec des crochets []). En paramtre de cette structure, nous appelons les objets par
leur nom doccurrence en utilisant la valeur de i pour les distinguer les uns des autres
LA 3D NATIVE 279
(contenu_mc["v"+i+"_mc"]). Il ne reste alors qu appliquer les valeurs relatives chaque
proprit initialement dfinie dans le tableau datas, pour affecter directement lensemble
des objets. Ce qui donne, par exemple, pour le chemin de rfrence de chaque fichier vido
dsign par la proprit source :
Lorsque nous avons besoin de faire rfrence chaque proprit de chacun des objets, nous
invoquons galement, dans les animations, le nom du tableau (datas) suivi du numro
dordre dapparition de lobjet cibl (avec [i]) et de la proprit concerne (par exemple
.z). Ce qui donne pour la proprit z :
datas[i].z
Nous avons ensuite remplac la rptition des interpolations TweenMax par une animation
type, rpte dans une boucle for. Pour cibler chaque objet individuellement, nous repre-
nons le mcanisme abord pour laffectation des proprits, dans la premire partie du
programme. Ce qui donne :
contenu_mc["v"+i+"_mc"]
chaque itration des boucles for, ce sont tous les objets enregistrs qui sont affects. Pour
mettre jour les donnes, il suffit donc de modifier les valeurs stockes dans le tableau
initial (datas). Lensemble de la construction est instantanment mise jour.
retenir
Afin doptimiser les ressources daffichage, si des vidos sont dployes, il est souhaitable de ne pas
les jouer toutes simultanment et de les organiser pour un affichage frontal.
Les composants vidos ne disposent pas des mmes proprits que les MovieClip. Il est possible
danimer ces composants dans des MovieClip pour disposer de plus de contrles sur chacun des
objets.
Pour optimiser le stockage de valeurs et simplifier la distribution des instructions sur plusieurs objets
simultanment, nous utilisons deux types de structure : les tableaux et une boucle for. Les tableaux
permettent le stockage des proprits. La boucle simplifie leur affectation.
Afin de cibler dynamiquement un symbole dun conteneur parent, nous pouvons le capturer en
dsignant dabord le conteneur parent, et laide de crochets, nous y inscrivons en paramtre le
nom de lobjet enfant.
Navigation spatiale 3D faon TimeMachine ou Aero

Puisque la 3D offre une profondeur Z, nous pouvons aussi distribuer les contenus de
larrire-plan vers le premier plan comme le proposent, par exemple, les systmes de navi-
gation connus que sont Aero pour Windows et TimeMachine pour Apple (voir Figure 9.26).
Dans cette section, nous allons voir comment raliser une navigation sur laxe Z. Pour cela,
nous utilisons diffrents MovieClip placs dans le scnario.
Figure 9.26
Aperu du
systme darchi-
vage Apple Time
Machine.
En cliquant sur une flche, nous modifions leur position en Z avec une transition. Mais nous
ajoutons au dispositif un systme de boucle qui permet aussi de replacer les images dj
visites, larrire de la file. Nous ajoutons galement un effet dopacit selon la profon-
deur des objets. Nous dclinons enfin le principe en sens inverse avec une flche qui oriente
le mouvement dans le sens oppos (voir Figure 9.27).
Figure 9.27
Aperu du
document publi.
LA 3D NATIVE 281
Sur la scne principale du document "ch9_3DNative_5.fla", nous pouvons voir un symbole

contenu_mc qui intgre une srie de neuf MovieClip. Chacun dispose dun nom doccur-
rence et est rparti vers les calques, dans lordre daffichage qui correspond lordre
dempilement dans lespace. Un symbole navigation_mc contient galement deux flches,
haut et bas, pour faire avancer et reculer les images sur laxe Z (voir Figure 9.28).
Figure 9.28
Aperu de la
scne principale.
Dans la fentre de scnario, nous identifions les symboles contenu_mc et navigation_mc

(voir Figure 9.29).
Figure 9.29
Aperu
du scnario.
La fentre dactions affiche le code suivant :

import gs.TweenMax;
import gs.easing.*;
import gs.events.*;
var tween3DAvant:TweenMax;
var tween3DArriere:TweenMax;
contenu_mc.photo1_mc.z=1600;
navigation_mc.rotationX=-90;
//------------------ actions
// point de fuite
var pointDeFuite:Point=new Point(stage.stageWidth/2,0);
transform.perspectiveProjection.projectionCenter=pointDeFuite;
// Avancer
navigation_mc.flecheHaut_btn.addEventListener(MouseEvent.CLICK,avancer);
function avancer(evt:MouseEvent) {
for (var i:Number=0; i<contenu_mc.numChildren-1; i++) {
TweenMax.to(contenu_mc.getChildAt(i),0.5,
{z:contenu_mc.getChildAt(i).z-200, alpha:1.1-((contenu_mc.getChildAt(i).z)/
1600), delay:0, ease:Strong.easeInOut});
}
if (contenu_mc.getChildAt(contenu_mc.numChildren-1).z<1) {
tween3DAvant=TweenMax.to(contenu_mc.getChildAt(contenu_mc.numChildren-
1),0.5,{alpha:0,delay:0,ease:Strong.easeOut});
}
tween3DAvant.addEventListener(TweenEvent.COMPLETE,sortie);
}
//
function sortie(evt:TweenEvent) {
contenu_mc.getChildAt(contenu_mc.numChildren-1).z=1600;
contenu_mc.addChildAt(contenu_mc.getChildAt(contenu_mc.numChildren-1),0);
}
// Reculer
navigation_mc.flecheBas_btn.addEventListener(MouseEvent.CLICK,reculer);
function reculer(evt:MouseEvent) {
for (var j:Number=0; j<contenu_mc.numChildren; j++) {
tween3DArriere=TweenMax.to(contenu_mc.getChildAt(j),0.5,
{z:contenu_mc.getChildAt(j).z+200, alpha:1-((contenu_mc.getChildAt(j).z)
/1600), delay:0, ease:Strong.easeInOut});
}
tween3DArriere.addEventListener(TweenEvent.COMPLETE,entree);
}
LA 3D NATIVE 283
//
function entree (evt:TweenEvent) {
contenu_mc.getChildAt(0).alpha=0;
contenu_mc.addChildAt(contenu_mc.getChildAt(0),contenu_mc.numChildren-1);
//
boucle.start();
}
//
function lancerBoucle (evt:TimerEvent) {
TweenMax.to(contenu_mc.getChildAt(contenu_mc.numChildren-1),0.5, {alpha:1,
}
// initialiser les alphas

for (var k:Number=0; k<contenu_mc.numChildren-1; k++) {
contenu_mc.getChildAt(k).alpha=1-((contenu_mc.getChildAt(k).z)/1600);
}
Le programme est structur en cinq parties dont : linitialisation, la gestion du point de

fuite, la navigation avec la flche du haut, puis avec la flche du bas, et enfin, la gestion de
lopacit au lancement de lapplication. Lordre dexcution et les valeurs de calcul ntant
pas les mmes pour les deux flches, nous avons prfr isoler ici les deux fonctions.
Dabord, nous dfinissons les classes et quelques variables requises pour les transitions.
Nous modifions ensuite lagencement des contenus dans lespace.
Plus loin, dans les actions, nous redfinissons la position du point de fuite, par dfaut plac
au centre de la scne. Dans notre configuration, nous voulons surplomber lgrement lani-
mation de manire percevoir les objets, de mme dimensions, situs larrire-plan des
premiers lments. Pour ce faire, nous utilisons la proprit filedOfView de la classe
perspectiveProjection :
// point de fuite
var pointDeFuite:Point=new Point(stage.stageWidth/2,0);
transform.perspectiveProjection.projectionCenter=pointDeFuite;
Le point de fuite est dsign par un objet Point qui possde deux valeurs, x et y (vu lors de
la programmation de squelettes).
Le principe du point de fuite, en perspective, est de situer le point de dpart de tous les tra-
cs fuyants qui partent de la ligne dhorizon. Plus le point de fuite est haut, plus vous dominez
la scne. Plus vous prenez, en somme, de laltitude.
Vous pouvez aussi placer le point de fuite horizontalement. Cela dtermine la direction de la
perspective. Si le point de fuite est situ gauche (de valeur x faible), vous vous placez alors
gauche de la scne et lobjet se trouve sur votre droite. Si le point de fuite se trouve
droite, votre regard aussi se retrouve droite et lobjet, lui, se retrouve gauche (voir
Figure 9.30). Vous placez le point de fuite en fonction du ct de lobjet que vous souhaitez
observer.
Le point de fuite reprsente aussi le reflet de la position de votre il sur la ligne dhorizon,
autrement dit, du point de vue.
Figure 9.30 + +
Point de fuite gauche, Point de fuite droite,
Placement du Point de vue gauche. Point de vue droite.
point de fuite. (l'objet est droite) (l'objet est gauche)
Proprits 3D de la scne
Le langage
La scne comporte plusieurs proprits qui peuvent tre contrles en ActionScript, y compris en
animation. Ces proprits sont : le champ de vision, le point de fuite et la focale.
Le champ de vision se dfinit entre 0 et 180 degrs. Le code suivant applique un champ de
vision de 55, qui est aussi la valeur applique par dfaut.
var champDeVision:Number=55;
this.transform.perspectiveProjection.fieldOfView=champDeVision;
Le point de fuite dsigne le point de dpart de tout trac de forme perspective, partir de la
ligne dhorizon. Il reprsente la position de lil du spectateur. Le code suivant indique la valeur
applique par dfaut dans un document Flash 3D :
var pointDeFuite:Point = new Point( stage.stageWidth/2, stage.stageHeight/2);
transform.perspectiveProjection.projectionCenter = pointDeFuite;
La focale indique le type de dformation appliqu aux fuyantes, dtermin par la distance entre
lcran et lobjet. La focale est calcule dynamiquement, comme suit :
var focale:uint=stage.stageWidth/2 * ( Math.cos(champDeVision/2) /
Math.sin(champDeVision/2) );
transform.perspectiveProjection.focalLength= focale;
Vous pouvez, par exemple, modifier la focale ou toute autre proprit de la scne 3D, en la mani-
pulant travers une instruction, comme celle-ci o les valeurs utilises reprennent la position cou-
rante du pointeur en X :
addEventListener(Event.ENTER_FRAME,focaleTest);
function focaleTest(evt:Event) {
transform.perspectiveProjection.focalLength=mouseX;
}
LA 3D NATIVE 285
Le dfilement des images de larrire vers le premier plan est activ par la flche du haut.
Les actions associes ce comportement sont rassembles dans la partie "Avancer" :
// Avancer
navigation_mc.flecheHaut_btn.addEventListener(MouseEvent.CLICK,avancer);
{z:contenu_mc.getChildAt(i).z-200, alpha:1.1-((contenu_mc.getChildAt(i).z)
/1600), delay:0, ease:Strong.easeInOut});
}
// autres actions
}
Dans un premier temps, la fonction avancer est excute sur un clic de souris. Dans cette
fonction, nous mettons en place une boucle for qui applique une interpolation TweenMax
pour lensemble des lments contenus dans le clip principal (avec contenu_mc.get-
ChildAt(i)), comme vu prcdemment. La transition rduit ici lindex z dune valeur
de 200 pixels, pour chaque objet de la liste daffichage et les fait ainsi progresser, simulta-
nment, vers lcran.
Dans le mme temps, un alpha permet de modifier aussi lopacit des objets en fonction de
leur index respectif :
alpha:1.1-((contenu_mc.getChildAt(i).z)/1600),
La valeur 1 600 correspond au seuil que nous avons arbitrairement fix, pour le dmarrage
du dfilement, en plaant le premier objet cette profondeur (voir les paramtres dinitiali-
sation en dbut de programme).
Dans cette quation, plus lindex est proche de 1 600, plus lalpha diminue. Inversement,
plus il tend vers 0, plus lobjet se rvle.
Pour comprendre plus prcisment le calcul, nous savons que lalpha se mesure sur une
chelle de 0 1. Or, lindex maximum que nous observons est 1 600. Il nest pas possible
dappliquer un alpha de 1 600 en attribuant systmatiquement la valeur de lindex z comme
valeur dalpha. Lquation reprend donc lindex z de chaque objet et le divise par la profon-
deur z maximum pour obtenir une valeur comprise entre 0 et 1.
Mais, ce faisant, nous obtenons linverse de ce que nous dsirons. Lalpha est nul pour les
images de premier plan et vaut presque 1 pour les images situes larrire. Pour inverser
les valeurs, nous effectuons donc une petite soustraction partir de la valeur dalpha maxi-
mum : 1. Enfin, pour garantir toutefois que les premires images situes en premier plan
demeurent intgralement visibles et ne risquent pas dtre lgrement translucides (dalpha
lgrement infrieur 1), nous augmentons la valeur 1.1.
la suite, dans la mme fonction, nous plaons quelques structures conditionnelles pour
dterminer quels objets de la liste doivent tre replacs au premier-plan :
{z:contenu_mc.getChildAt(i).z-200, alpha:1.1-((contenu_mc.getChildAt(i).z)/
1600), delay:0, ease:Strong.easeInOut});
}
if (contenu_mc.getChildAt(contenu_mc.numChildren-1).z<1) {
tween3DAvant=TweenMax.to(contenu_mc.getChildAt(contenu_mc.numChildren-
1),0.5,{alpha:0,delay:0,ease:Strong.easeOut});
}
tween3DAvant.addEventListener(TweenEvent.COMPLETE,sortie);
}
//
function sortie(evt:TweenEvent) {
contenu_mc.addChildAt(contenu_mc.getChildAt(contenu_mc.numChildren-1),0);
}
Une condition vrifie dabord les objets dont lindex est infrieur 1, cest--dire que nous
filtrons uniquement les objets situs au premier plan. Pour ces objets, nous ajoutons une
interpolation qui le fait disparatre avec lalpha pass 0.
Ds que la transition (tween3DAvant) est termine (COMPLETE), un couteur excute une
autre fonction (sortie). Nous modifions alors lindex z de lobjet situ au sommet de la liste
daffichage, cest--dire, en premier plan, et le ramenons 1 600, donc, une chelle qui le
reprsente larrire-plan. Mais, comme nous le savons, la 3D dans Flash est limite cha-
que objet. Il faut donc, en plus, modifier lordre dempilement de lobjet dans la liste daffi-
chage. La deuxime instruction prend donc lobjet situ au sommet de la pile
(contenu_mc.getChildAt(contenu_mc.numChildren-1)) pour le replacer au-dessous
(0).
Les actions excutes pour la flche du bas sont une dclinaison de la flche du haut, ceci
prs que les valeurs z et alpha sont inverses.
Nous relevons nanmoins que, par ncessit, nous utilisons un chronomtre (Timer) pour
dcaler, dans le temps, les deux mthodes qui interviennent sur lordre daffichage (add-
Child() et getChild()) afin dviter les conflits. En excutant les deux instructions simul-
tanment, selon le contexte et le poids des contenus affichs dans les objets, le
repositionnement lindex z pourrait effectivement ne pas avoir lieu, cras par la mthode
addChild(), prioritaire et peut-tre toujours en cours dexcution :
//
function entree (evt:TweenEvent) {
contenu_mc.getChildAt(0).alpha=0;
contenu_mc.addChildAt(contenu_mc.getChildAt(0),contenu_mc.numChildren-1);
//
boucle.start();
}
//
function lancerBoucle (evt:TimerEvent) {
TweenMax.to(contenu_mc.getChildAt(contenu_mc.numChildren-1),0.5, {alpha:1,
}
LA 3D NATIVE 287
Le programme sachve avec linitialisation de lalpha au dmarrage de lapplication. Ceci
afin dappliquer, ds le dbut, une transparence aux objets situs en profondeur :
// initialiser les alphas
for (var k:Number=0; k<contenu_mc.numChildren-1; k++) {
contenu_mc.getChildAt(k).alpha=1-((contenu_mc.getChildAt(k).z)/1600);
}
Dans le fichier SWF, les deux flches actionnent le dfilement, dans un sens comme dans
lautre, en prservant toujours lalpha et les index de chaque objet.
Pour en savoir plus sur la 3D dans Flash, et notamment sur la gestion de formes matricielles (volumes
composs de triangles), consultez ladresse suivante : http://help.adobe.com/fr_FR/ActionScript/
3.0_ProgrammingAS3/WSF24A5A75-38D6-4a44-BDC6-927A2B123E90.html. Dautres techni-
ques permettent aussi de grer la 3D partir de formes dj modeles. Nous les abordons au chapi-
tre suivant.
retenir
Vous pouvez contrler la focale et le point de fuite dune perspective 3D grce la proprit pers-
pectiveProjection.
Lordre daffichage des objets dtermine la cohrence dun systme de navigation spatial. Nous utili-
sons la mthode addChild() afin de redistribuer les objets selon leur position sur lindex z.
Synthse
Dans ce chapitre, vous avez appris crer des prsentations 3D partir des classes natives
de Flash, compatibles avec Flash 10 (CS4) et versions ultrieures. La 3D dans Flash est
simple, mais, ne permet pas encore dimporter directement des objets modliss en 3D sans
recourir des classes externes. Elle apparat malgr tout en voie de standardisation. Le lec-
teur 10 est, fin 2009, dj implant en Europe prs de 92 % des postes utilisateurs dispo-
sant dun lecteur Flash. La 3D reste donc ce jour largement compatible avec les
configurations existantes des utilisateurs (source : http://www.adobe.com/products/
player_census/flashplayer/version_penetration.html). Seule la solidit de la configura-
tion (ressources graphiques et bandes passantes) peuvent en temprer encore la diffusion.
La 3D et PaperVision
10
Introduction
Si nous pouvons crer des interfaces 3D partir dobjets 2D, dans Flash, il nest pas encore
possible dy importer des objets 3D rels et dinteragir nativement avec eux. Cependant, des
classes ActionScript libres sont disponibles pour la gestion de la 3D relle au sein de lenvi-
ronnement Flash. Certaines comme PaperVision sont compatibles avec danciennes
versions de Flash, pour AS3 et AS2 et Flash 9 (et les versions suivantes).
Dans ce chapitre, nous allons voir comment installer PaperVision pour AS3 sous Windows
et Mac OS X, ainsi que la manire dinteragir sur des animations dobjets 3D rels exports
depuis lapplication libre Google Sketchup ou tout autre logiciel 3D. Nous allons galement
dcouvrir comment contrler des environnements 3D, crs partir de simples primitives
avec le clavier pour simuler la navigation dans un espace en trois dimensions.
lissue de ce chapitre, vous serez en mesure de crer des visionneuses dobjets 3D et des
galeries 3D.
Installer PaperVision
La classe PaperVision rassemble une srie de fonctionnalits 3D, regroupes dans un
mme rpertoire. Pour en disposer, nous devons dabord tlcharger cette classe. Une fois
charge sur votre ordinateur, elle doit tre copie dans le rpertoire de votre site, au mme
niveau que les documents Flash qui constituent votre projet. Si, pour automatiser le proces-
sus, nous souhaitons centraliser la gestion des classes, nous devons redfinir les prfrences
de Flash. Nous dtaillons cette procdure plus loin dans ce chapitre.
Une fois dans Flash, pour invoquer les sous-classes PaperVision, quelles aient t places
localement ou intgres lAPI, nous y faisons rfrence directement depuis la fentre des
Actions. la compilation, Flash intgre les scripts utiliss, requis pour la gestion des com-
mandes 3D. Une fois dployes, elles nont donc pas besoin dtre places sur le serveur.
Seuls les objets 3D et les textures ventuellement appeles par le code doivent accompagner
le document SWF.
Dans ce chapitre, nous dveloppons les commandes 3D de PaperVision directement dans
le scnario. De nombreux dveloppeurs adoptent la mthode externalise sous la forme de
packages (classes .as). Nous verrons, dans ce chapitre, quil nest pas ncessaire de recourir
une externalisation du code pour excuter PaperVision.
La classe PaperVision tant constitue de nombreux fichiers et de sous-dossiers, vous trouve-
rez plus facile daccder une version zippe de cette classe. Vous en trouverez une sur le site
Googlecode ladresse : http://code.google.com/p/papervision3d/downloads/list.
Vous pouvez aussi la tlcharger en suivant directement le lien qui correspond la dernire
version publie au moment o nous ditons cet ouvrage : http://papervision3d.google-
code.com/files/Papervision3D_2.1.920.zip.
Bien que cette mthode de chargement soit simple, de nombreux utilisateurs prfrent grer
le tlchargement des classes laide dutilitaires capables den assurer la mise jour,
lorsque la source distante a t modifie par exemple.
Nous vous proposons, pour rpondre de nombreuses questions en rapport avec cette tech-
nique de chargement, de prsenter ces utilitaires dans les deux sections suivantes (Tortoise
SVN pour Windows et SVNX pour Mac OS X). Pour les lecteurs qui auront tlcharg
PaperVision partir du format zipp, vous pouvez passer directement la section "Intgrer la
classe PaperVision Flash".
Tlchargement avec Tortoise SVN pour Windows

Lutilitaire de chargement de dossiers nomm Tortoise SVN, compatible Windows, est
disponible gratuitement ladresse suivante : http://tortoisesvn.tigris.org/.
Pour installer cet utilitaire, procdez comme suit :
1. Sur le site http://tortoisesvn.tigris.org/, cliquez directement sur longlet Downloads.
En bas de la page de chargement, apparat un tableau affichant toutes les versions dispo-
nibles, filtres par langue et version de systme (32 bits ou 64 bits)
Figure 10.1
Tlchargement
de lutilitaire
Tortoise SVN pour
Windows.
2. Cliquez sur le lien Setup correspondant votre version de systme. Le chargement

seffectue. Des supports au format PDF sont galement disponibles en franais : Sepa-
rate manual (PDF). Vous pouvez, si besoin, les tlcharger.
3. Installez le logiciel en double-cliquant sur licne dinstallation charge sur votre poste
de travail. Puis validez toutes les tapes.
Une fois install, vous le retrouvez dans le dossier Program files et dans le menu Dmarrer >
Applications. Le principe de lutilitaire Tortoise SVN est de rendre ses fonctions accessibles
par un simple clic-droit sur le rpertoire de votre choix. Vous pouvez alors y importer un
dossier distant partir dune URL, mettre jour le contenu ventuellement dj charg :
4. Directement, sur le dossier racine de votre projet, faites clic-droit > SVN CheckOut.
LA 3D ET PAPERVISION 291
5. Dans la bote de dialogue, saisissez lURL de la classe PaperVision ou dune autre
classe importer : http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/
(voir Figure 10.2).
6. Puis cliquez sur OK.
Figure 10.2
Importer la classe
avec TortoiseSVN
sous Windows.
7. Une fentre de chargement saffiche. Patientez. Une fois le chargement termin, cliquez
nouveau sur OK (voir Figure 10.3).
Figure 10.3
Chargement
de la classe
PaperVision.
8. lintrieur de votre dossier, la classe PaperVision a t importe. Elle apparat sous

la forme de deux rpertoires : "nochump" et "org" (voir Figure 10.4).
Figure 10.4
Classe charge.
La classe est disponible dans votre projet. Vous pouvez linvoquer directement depuis votre
document Flash.
Tlchargement avec SVNX pour Mac OS X

Lutilitaire de chargement de dossiers, nomm SVNX et compatible Mac OS X, requiert
deux installations : le plug-in SCPlugin et lutilitaire SVNX.
Le plug-in SCPlugin est disponible cette adresse : http://scplugin.tigris.org/servlets/
ProjectDocumentList. Lutilitaire SVNX ici : http://www.lachoseinteractive.net/en/
community/subversion/svnx/download/.
1. Pour installer dabord le plug-in, saisissez dans votre navigateur ladresse : http://
scplugin.tigris.org/servlets/ProjectDocumentList.
2. Puis, cliquez sur la dernire version de linstalleur propose dans la liste de tlchargement
(voir Figure 10.5).
Figure 10.5
Tlchargement
du plug-in
SCPlugin pour
Mac OS X.
3. Le package tlcharg ouvre une fentre dinstallation (voir Figure 10.6).
Figure 10.6
Installation du
plug-in SCPlugin
pour Mac OS X.
5. Validez toutes les tapes jusqu lcran final (voir Figure 10.7).
Figure 10.7
Confirmation de
linstallation.
Le dossier du plug-in apparat sur votre bureau (voir Figure 10.8).
Figure 10.8
Plug-in install.
Vous pouvez maintenant installer lutilitaire SVNX disponible ladresse suivante : http://
www.lachoseinteractive.net/en/community/subversion/svnx/download/.
6. Dans la page de chargement, cliquez directement sur licne situe en bas de page pour
le chargement de lapplication (voir Figure 10.9).
7. Une fois le chargement effectu, glisser-dposez directement lapplication du rper-
toire, ouvert automatiquement, vers le dossier Applications de votre systme. Pour
organiser les fichiers, dposez-les dans un nouveau rpertoire que vous nommerez
SVNX (voir Figure 10.10).
Figure 10.9
Tlchargement
de lutilitaire
SVNX pour
Mac OS X.
Figure 10.10
Tlchargement
de lutilitaire
SVNX pour
Mac OS X.
Une fois copi dans Applications, lutilitaire est fonctionnel. Pour charger la classe Paper-
Vision, via lutilitaire SVNX : lancez lutilitaire SVNX en double-cliquant dessus. Deux
fentres apparaissent (voir Figure 10.11).
Figure 10.11
Ouverture de
lutilitaire SVNX.
Seule la premire fentre nous intresse. Elle dsigne lURL tlcharger :

1. Pour dfinir un nouveau chargement, dans la fentre gauche, cliquez sur le bouton Plus.
2. Puis, renseignez un Nom (champ Name). Saisissez par exemple PaperVision3D.
3. Dans le champ Path, inscrivez ladresse de la classe PaperVision importer (voir
Figure 10.12) : http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/.
Figure 10.12
Dfinition
du contenu
importer (fentre
de gauche).
Le chargement du contenu appel par lURL se fait en double-cliquant sur la rfrence du

chargement que nous venons de crer, dans la liste situe au sommet de la premire fentre
(voir Figure 10.13).
Figure 10.13
Ouverture de la
fentre de
chargement.
1. Double-cliquez sur la rfrence pour lancer le chargement. Une nouvelle fentre apparat
2. Pour dfinir un dossier cible et y importer la classe, cliquez sur le lien "svn checkout".
Une fentre de slection de dossier apparat.
3. Slectionnez le rpertoire de destination, soit le dossier racine du site pour lequel vous
importez la classe ou un dossier distinct utilis pour une gestion globale et native des
classes, comme nous le dtaillons plus loin dans ce chapitre (voir Figure 10.15).
4. Validez pour activer directement le chargement des fichiers. Le chargement seffectue
jusqu ce que la barre de chargement situe en bas de la fentre sarrte (voir
Figure 10.16).
Figure 10.14
Activation du
chargement.
Figure 10.15
Fentre de slec-
tion du dossier
cible.
Figure 10.16
Chargement en
cours.
5. Lorsque le chargement est termin, quittez lapplication. lintrieur de votre dossier,

la classe PaperVision a t importe. Elle apparat sous la forme de deux rpertoires :
nochump et org (voir Figure 10.17).
Vous pouvez maintenant lappeler directement depuis un document Flash ou lintgrer
lAPI de Flash.
Figure 10.17
Classe charge.
Intgrer la classe PaperVision Flash

Vous pouvez placer la classe PaperVision, dans Flash, selon deux mthodes. Soit, vous
intgrez le chemin de la classe dans le moteur de Flash pour la rendre accessible partir de
tout nouveau document. Soit vous la copiez ponctuellement et manuellement dans chaque
nouveau projet.
Intgration native
Lorsque vous intgrez une classe nativement dans Flash, vous ne devez plus, par la suite,
modifier lemplacement du rpertoire appel en rfrence. Aussi, nous vous conseillons de
bien choisir son emplacement avant de procder la liaison :
1. Par exemple, dans le dossier Flash du rpertoire Applications de votre systme (ou dans
Program files pour Windows), crez un nouveau rpertoire et nommez-le "Classes-
Persos".
2. Dans ce nouveau dossier, crez un rpertoire et intitulez-le prsent "papervision".
3. Copiez-y intgralement les dossiers que nous venons de tlcharger ("org" et
"nochump"). Attention toutefois, pour ne pas perdre la connexion avec Tortoise, prf-
rez cibler directement ce nouveau rpertoire lors du tlchargement de la classe.
4. Revenez dans Flash.
5. Pour intgrer la classe nativement, dans Flash, affichez les prfrences (Cmd+U sur
Mac ou Ctrl+U sur Windows).
6. Dans la catgorie ActionScript, cliquez sur le bouton Paramtres dActionScript 3.
Dans la bote de dialogue, trois zones de dfinition de chemin apparaissent. La premire

zone concerne lintgration de classes natives (les trois zones sont confondues dans les
anciennes versions de logiciel).
Pour la classe PaperVision, le dossier intitul "org" contient lensemble des lments
requis. Plus prcisment, cest le dossier "papervision3d", contenu dans le dossier "org",
contenu son tour dans "papervision", qui devra plus tard tre invoqu par ActionScript.
1. Dans la fentre de dialogue de Flash, droite, cliquez sur le bouton de slection de dos-
sier. Puis, slectionnez le rpertoire "papervision" que nous venons de crer. En vali-
dant, le chemin de liaison apparat dans la liste des classes intgres (voir Figure 10.18).
Figure 10.18
Fentre dint-
gration des
classes natives
dans Flash CS4.
2. Validez en refermant toutes les fentres. La classe est dsormais intgre nativement
dans lapplication et disponible pour tous les nouveaux documents.
3. Relancez de prfrence lapplication pour garantir la prise en compte de ces nouveaux
lments.
Intgration ponctuelle
Vous pouvez aussi placer ponctuellement la classe dans chaque projet pour lequel elle est
requise. Il nest donc, dans ce cas, pas ncessaire de lintgrer nativement comme vu la
section prcdente :
1. Copiez le rpertoire "org" que nous venons de tlcharger.
2. Collez ce rpertoire directement la racine de votre site.
La classe est prte tre utilise pour les documents Flash placs uniquement la racine de
ce dossier. Vous pouvez commencer raliser des interfaces avec des objets 3D.
retenir
PaperVision est une classe externalise quil faut tlcharger avant de pouvoir lexploiter. Des utili-
taires permettent de charger cette classe dynamiquement : Tortoise SVN pour Windows et SVNX
pour Mac OS X.
Il est possible dintgrer une liaison native de Flash avec avec PaperVision, ou toute autre classe
en modifiant les paramtres dActionScript 3, depuis les prfrences du logiciel. Il faut pour cela
cibler le rpertoire qui les contient depuis la fentre de liaison de classes.
Si vous nintgrez pas les classes nativement, vous devez les copier, chaque utilisation, au mme
niveau darborescence que le document qui y fait rfrence.
Les classes sont compiles dans le SWF la publication. Il nest pas ncessaire de les placer sur le
serveur dhbergement.
Modliser en 3D pour Flash et PaperVision

Avant dimporter dans Flash des objets 3D rels, grce la classe PaperVision, vous devez
naturellement disposer de ces objets. Vous pouvez les raliser partir de logiciels profes-
sionnels ou gratuits. Nous prsentons ici diffrentes solutions pour rendre les crations 3D
compatibles avec Flash et PaperVision. Nous proposons notamment loutil Google Sketchup,
logiciel 3D libre, compatible avec Flash et PaperVision.
Exporter la 3D avec les logiciels standard

Tous les logiciels 3D sont compatibles Flash et PaperVision ds lors quils peuvent expor-
ter au format DAE (Maya, 3DS Max, Cinema 4D, Blender, Swift,). Pour de nombreux
logiciels toutefois, le plug-in Collada est requis. Il est disponible sur Internet. Pour chaque
logiciel, reportez-vous au lien en rapport :
Blender requiert un plug-in. Laide linstallation de Collada pour Blender est disponi-
ble cette adresse : http://colladablender.illusoft.com/cms/content/blogcategory/25/
29/.
Swift 3D gre nativement lexport au format DAE. Consultez le site suivant pour en
savoir plus sur Swift 3D : http://www.erain.com/products/swift3d/?erain=v6pr.
Cinema 4D R11 accepte galement le format DAE de Collada : http://www.maxon.net/
products/cinema-4d.html.
3DSMax et Maya disposent dun plug-in Collada spcifique. Retrouvez-le : http://
sourceforge.net/projects/colladamaya/.
Une aide plus gnrale sur lexportation de fichiers 3D avec Collada, pour tous logi-
ciels 3D, est disponible ladresse : http://www.australopitech.com/883-collada-
papervision3d.
Limite de taille des fichiers 3D. La gestion de la 3D dans Flash avec PaperVision suppose que
les fichiers puissent tre consults par tout type dutilisateur et avec un chargement le plus rapide pos-
sible. Il est recommand dviter de dpasser les scnes 3D composes de plus de 1 500 3 000
polygones. Au-del, veillez bien organiser le chargement du contenu par tapes successives pour
viter un chargement trop long, et viter que le moteur de rendu ne peine calculer entirement le
volume import (prsence de trous, points qui dcrochent, etc.).
Exporter la 3D avec Google Sketchup

Google Sketchup est un logiciel de modlisation 3D, gratuit, si lon sen tient une version
basique. Cet outil initialement dvelopp pour promouvoir la technologie GoogleEarth,
offre une solution accessible et simple utiliser pour crer des objets 3D pour lenvironne-
ment de Flash avec PaperVision, dautant que Sketchup est trs bien document et en
franais. Google propose aussi une banque dobjets 3D dj modliss et libres de droits,
simples charger, pour un usage toutefois non commercial.
Les conditions dutilisation de la banque dobjets 3D Google Sketchup sont disponibles cette
adresse : http://sketchup.google.com/intl/fr/3dwh/tos.html.
Pour tre imports dans Flash, les objets 3D de Google doivent tre exports au format
DAE. Mais, Sketchup ne permet dexporter quaux formats KMZ (optimis) ou SKP (format
natif).
Afin dexporter un objet 3D Sketchup pour Flash, il suffit de le publier au format KMZ et de
modifier son extension .kmz en .zip. Le dossier compress obtenu contient le fichier du
modle 3D au format DAE et un fichier XML de mtadonnes. Seul le fichier DAE et les
textures ventuellement associes sont requis.
Dans cette section, nous prsentons comment rcuprer un objet 3D de la banque dobjets
de Google Sketchup pour le convertir du format natif Sketchup en DAE pour Flash et
PaperVision.
Pour accder directement une bibliothque dobjets 3D KMZ, sans utiliser Sketchup, reportez-vous
ladresse : http://sketchup.google.com/3dwarehouse/.
Pour convertir des fichiers 3D natifs de Google dans un format compatible Flash, procdez
comme suit :
1. Tlchargez la version gratuite de Sketchup : http://sketchup.google.com/intl/fr/
download/gsu.html.
2. Validez toutes les tapes de linstallation.
3. Puis lancez lapplication. Au dmarrage, Sketchup affiche un cran avec diffrentes
aides de grande qualit (voir Figure 10.19).
4. Cliquez directement sur Commencer utiliser Sketchup. Une scne 3D souvre (voir
Figure 10.20).
Figure 10.19
Lancement
de Google
Sketchup 7.
Figure 10.20
Nouvelle scne
dans Sketchup.
5. En haut et droite de la fentre, cliquez sur le bouton Tlcharger des modles (voir
Figure 10.20). Une fentre de navigateur souvre sur la page de la banque dobjets 3D
de Google.
6. Saisissez une requte. Par exemple, sofa ou Sessel Couch Divan. Puis validez. Vous
accdez une liste dobjets.
7. Slectionnez celui de votre choix en le cliquant. Puis, dans la fiche descriptive de larti-
cle, en bas de limage de prsentation, cliquez sur le lien Tlcharger le modle (voir
Figure 10.21).
Figure 10.21
Tlcharger le
modle.
8. Un message demande de confirmer le chargement du modle dans le nouveau document

Sketchup.
9. Confirmez et lobjet apparat instantanment dans la scne. Vous pouvez lexporter
Figure 10.22
Modle import.
10. Si lobjet napparat pas directement au centre de la scne, zoomez en arrire avec la
roulette de la souris ou avec loutil Loupe.
11. Repositionnez lobjet vers le point dorigine de la scne, laide de loutil de dpla-
cement (Outil Dplacer/Copier en forme de 4 flches cardinales rouges).
12. Supprimez le personnage de la scne en cliquant dessus et en faisant retour ou Suppr, au
clavier.
13. Faites Fichier > Exporter > Modle 3D. Nommez le document "sofa.kmz".
Une fentre affiche des informations sur les proprits de lobjet.
14. Refermez la fentre pour continuer. Vous pouvez conserver ventuellement le document
au format natif pour le modifier si ncessaire en faisant Fichier > Enregistrer, au format
SKP.
15. Puis, quittez Sketchup.
Si vous souhaitez pouvoir identifier des groupes dobjets pour PaperVision, en vue de modifier
depuis PaperVision les teintes des composantes de forme des objets, utilisez la fentre Structure de
Sketchup. Puis renommez chaque composante de lobjet 3D affich dans cette liste. Aidez-vous ven-
tuellement de loption Crer un groupe, disponible par un clic-droit sur les formes graphiques composant
les objets dans la scne.
Une fois le document export au format MKZ, vous pouvez en extraire le fichier Collada
DAE.
Modifiez lextension du fichier "sofa.kmz" en "sofa.zip". Confirmez ventuellement la bote
de dialogue davertissement qui apparat. Puis, dcompressez le fichier obtenu. Un dossier
qui porte le mme nom que le document apparat. lintrieur, nous distinguons le fichier
DAE isol dans un rpertoire nomm "models" (voir Figure 10.23).
Figure 10.23
Extraction du
fichier DAE pour
Flash et Paper-
Vision.
Nous pouvons conserver la structure des sous-dossiers. Il nen sera que plus simple pour
grer les ventuelles modifications par la suite. Le fichier DAE est maintenant exploitable
directement dans Flash, en ActionScript.
Pour en savoir plus sur Sketchup, consultez cette adresse : http://sketchup.google.com/intl/fr.

Pour accder une documentation dtaille, en texte et sous la forme de tutoriels vido sur la mod-
lisation avec le logiciel Sketchup, consultez les adresses suivantes :
http://sketchup.google.com/intl/fr/training/videos.html.
http://sketchup.google.com/support/.
retenir
Vous pouvez exporter des objets 3D pour Flash et PaperVision si celui-ci est au format Collada
DAE.
Google Sketchup est une application 3D libre qui donne accs des modles 3D dans un format
compatible avec Flash et PaperVision.
Pour convertir un fichier KMZ en fichier DAE, il suffit de remplacer lextension .kmz en .zip et
dcompresser le fichier obtenu.
Programmer les mouvements de camra 3D

Au cours de cette section, nous utilisons un modle dobjet 3D de rfrence Sessel Couch
Divan, tlcharg depuis la banque dobjets 3D de Google. Nous allons voir comment ajou-
ter dans le scnario de linterface auteur de Flash, les commandes ActionScript 3D de
PaperVision pour animer une camra et lobjet 3D.
Dans cet exemple, nous utilisons des transitions de type TweenMax que nous appliquons
lobjet Camera en vue de raliser plusieurs dispositifs de prsentation.
Nous commenons par crer une animation autonome de la camra 3D pour approcher
lobjet et donner lillusion que cest lui qui sapproche de lcran. Ensuite, nous associons
ces actions une occurrence de bouton pour effectuer un zoom de camra, afin de permettre
lutilisateur de contrler lui-mme le mouvement de la camra. Nous ajoutons enfin un
comportement lobjet 3D, afin de le faire voluer devant la camra, une fois celle-ci fixe.
Pour cela, nous utilisons la classe PaperVision accessible depuis Flash.
Exemples > ch10_3DPaperVision_1.fla
Dans le document "ch10_3DpaperVision_1.fla", nous pouvons voir un bouton en bas et

droite, en forme de loupe, qui est associ une action sur camra. Au-dessous, un habillage
gris matrialise la limite de la zone daffichage rserve pour la 3D telle que dfinie en
ActionScript. Une fois publi, le sofa part du fond de la scne et arrive progressivement au
premier plan, tout en tournant sur lui-mme. En cliquant sur le bouton Loupe, la camra se
rapproche un peu plus encore chaque clic (voir Figures 10.24 10.26).
Figure 10.24
Aperu du
document publi
au dbut de
lanimation.
Figure 10.25
Aperu du
document publi
au milieu de
lanimation.
Figure 10.26
Aperu du
document
publi la fin de
lanimation.
Figure 10.27
Scnario de la
scne principale.
Dans la fentre de scnario de la scne principale, au-dessus du calque fond_mc, nous trou-
vons le bouton loupe_btn, lhabillage gris et le calque Actions (voir Figure 10.27). Dans
le calque Actions, nous pouvons lire le code suivant :
//-------------------- initialisation
import gs.TweenMax;
import gs.easing.*;
import org.papervision3d.view.*;
import org.papervision3d.cameras.*;
import org.papervision3d.scenes.*;
import org.papervision3d.render.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.events.*;
import org.papervision3d.materials.*;
import org.papervision3d.objects.parsers.DAE;
var espace:Viewport3D;
var rendu:BasicRenderEngine;
var scene:Scene3D;
var camera:Camera3D;
var objetDAE:DAE = new DAE();

objetDAE.load("objets3D/sofa/models/sofa.dae");
//-------------------- actions
initialisation();
function initialisation() {
espace=new Viewport3D(stage.stageWidth,stage.stageHeight-110);
addChild(espace);
rendu = new BasicRenderEngine();
scene = new Scene3D();
camera = new Camera3D();
//
objetDAE.rotationX=0;
objetDAE.rotationY=-90;
objetDAE.rotationZ=0;
objetDAE.x=0;
objetDAE.y=0;
objetDAE.z=0;
camera.y=15;
//
activerAffichage3D();
}
function activerAffichage3D() {
scene.addChild(objetDAE);
TweenMax.to(camera,5, {z:camera.z+900, delay:0, ease:Strong.easeInOut});
addEventListener(Event.ENTER_FRAME, enBoucle);
}
function enBoucle(evt:Event) {
objetDAE.yaw(-1);
rendu.renderScene(scene, camera, espace);
}
//modifier un objet3D
loupe_btn.addEventListener(MouseEvent.CLICK,deplacerObjetDAE);
function deplacerObjetDAE(evt:MouseEvent) {
TweenMax.to(camera,5, {zoom:camera.zoom+100, delay:0,
}
Dans la premire partie de ce code, nous commenons par importer lensemble des sous-
classes de la classe PaperVision. Nous ciblons, pour chacune dentre elles, le dossier
"org", comme point de rfrence de cet ensemble. Du fait que nous avons intgr le chemin
de classes dans les prfrences de lapplication, nous spcifions ici le dossier org situ dans
le rpertoire "ClassesPersos" que nous avons pralablement cr.
Les classes importes sont utilises pour les transitions TweenMax :
//-------------------- initialisation
import gs.TweenMax;
import gs.easing.*;
Puis, viennent celles de PaperVision :

import org.papervision3d.view.*; : la classe view permet de grer lenviron-
nement 3D.
import org.papervision3d.cameras.*; : la classe cameras permet de crer une

camra.
import org.papervision3d.scenes.*; : la classe scenes permet de crer la scne
que constitue lespace 3D.
import org.papervision3d.render.*; : la classe render calcule laffichage 3D.
import org.papervision3d.objects.primitives.*; : la classe primitives, non
utilise dans ce document, nous permettra de crer plus tard des formes primitives,
telles que sphres, cylindres, cnes, plans, ou cubes.
import org.papervision3d.events.*; : la classe events autorise linteractivit
avec les objets de la scne 3D.
import org.papervision3d.materials.*; : la classe materials permet dappli-
quer des textures partir dimages des formes 3D. Nous lutilisons galement plus
loin dans ce chapitre.
import org.papervision3d.objects.parsers.DAE; : enfin, la classe DAE autorise
la gestion dobjets 3D imports au format DAE.
Dautres classes sont disponibles. Vous pouvez les identifier en parcourant le contenu du
dossier org.
la suite, nous dfinissons quelques variables qui caractrisent les types dobjets requis
pour la construction de lunivers en trois dimensions :
var scene:Scene3D;
Viewport3D dfinit la surface affiche lcran. Plus loin dans le code, cette variable reoit
en paramtre les dimensions de la zone daffichage en pixels. Lobjet basicRenderEngine
est le moteur de rendu. Lobjet scene3D constitue le volume lintrieur duquel nous pla-
ons tous les lments en 3D. Lobjet Camera3D enfin dsigne lil du spectateur, la
camra.
Plus bas, nous crons un nouvel objet DAE qui charge le fichier 3D dans linterface. Nous
indiquons le chemin qui part du document Flash vers le fichier, lintrieur de la structure
de dossier KMZ que nous avons dcompress :
La deuxime partie du code excute linterface 3D. Les actions sont rassembles dans des
fonctions afin de permettre une gestion de laffichage contrle dans le temps.
//-------------------- actions
initialisation();
addChild(espace);
//
objetDAE.x=0;
objetDAE.y=0;
objetDAE.z=0;
camera.y=15;
//
}
La premire instruction de la premire fonction dfinit la zone daffichage du rendu. Nous

spcifions ici une largeur quivalente la largeur de la scne du document Flash
(stage.stageWidth) et une hauteur de 110 pixels de moins que la hauteur du document
(stage.stageHeight-110). La hauteur est rduite afin de prserver la visibilit des contr-
les de navigation que nous avons placs sur la scne (outil Loupe, entre autres). Gardez
lesprit que plus votre surface de rendu est importante, plus les ressources de la machine
client seront sollicites.
La construction dune interface 3D implique laffichage de deux types dobjets. Dabord,
nous affichons la zone de rendu avec ici lobjet espace dont nous venons de dfinir les
dimensions. Plus loin, nous affichons les objets de la scne en 3D (DAE et primitives ven-
tuelles). Lobjet espace agit comme une fentre travers laquelle on peut observer lobjet
scene en 3D. Lobjet scene ne dfinit en rien laffichage, il nest quun conteneur, pas un
objet daffichage.
Cette distinction est importante, car si la zone de rendu peut tre gre comme tout contenu
depuis la liste daffichage. La scne, elle, ne peut tre invoque directement, pour tre redis-
tribue au-dessous dun autre objet par exemple. Pour permettre de placer des symboles de
la scne Flash au-dessus de la scne 3D, nous devons affecter le premier objet daffichage,
lobjet espace et non lobjet scene. Ainsi, si nous souhaitons que notre cration 3D saffi-
che larrire-plan du bandeau gris du document Flash, par exemple, nous spcifions add-
ChildAt(espace,1) au lieu de simplement addChild(espace). Les objets 3D sont
ajouts la scne avec galement la mthode addChild, mais cela ne les inclut pas pour
autant dans la liste daffichage globale. De cette manire, lobjet scene induit une obstruction
smantique entre le contenu Flash et le contenu gr par PaperVision.
Il est galement possible de placer un symbole par-dessus un objet 3D en conservant toutefois lobjet
espace au sommet de la liste daffichage. Pour cela, il suffit dimporter le symbole ajouter en tant
que texture dans un objet primitif de type Plane, par exemple, puis de grer la position de cette pri-
mitive sur laxe des Z avec un positionnement frontal par rapport la camra. Reportez-vous la sec-
tion "Interactivit avec les touches du clavier" pour en savoir plus sur la construction des primitives.
Une fois la zone daffichage dfinie, nous lajoutons donc la liste daffichage classique
avec addChild(espace).
la suite, nous matrialisons les objets pour lesquels nous avons cr les variables en
amont, les variables :
Puis, nous modifions les proprits des objets avant de les afficher, pour les caler dans
lenvironnement 3D :
objetDAE.x=0;
objetDAE.y=0;
objetDAE.z=0;
camera.y=15;
Nous ajustons les rotations de lobjet 3D afin quil apparaisse de face la camra (rota-
tionY=-90). Puis, nous modifions lgrement la position verticale de la camra pour recentrer
galement lobjet dans la scne (camera.y=15).
En dessous, nous poursuivons avec lappel dune fonction qui va activer laffichage 3D des
objets de la scne, et engager les animations des contenus alors prts tre anims :
}
objetDAE.yaw(-1);
}
La deuxime instruction de cette fonction active une interpolation de type TweenMax qui
anime la proprit z de lobjet camera de manire crer un travelling jusqu atteindre
lobjet DAE (camera.z+=900).
Plus bas, un couteur, associ un gestionnaire de type ENTER_FRAME, active le calcul du
rendu de la scne 3D (rendu.renderScene(scene, camera, espace)). Les trois objets
scene, camera et espace sont passs en paramtre.
Une dernire instruction ajoute un effet danimation sur lobjet DAE. Cette instruction
adopte une syntaxe propre lenvironnement PaperVision et quivaut une rotation en Y
dun pas dincrmentation de 1 chaque image. La mthode employe est yaw et donne :
objetDAE.yaw(-1). Nous abordons dautres mthodes de ce type dans la section suivante.
Le programme sachve sur lajout dun comportement sur le bouton Loupe. En cliquant
dessus, nous lanons une nouvelle interpolation qui anime la camra avec une autre pro-
prit : zoom.
TweenMax.to(camera,5, {zoom:camera.zoom+100, delay:0,
}
Les proprits zoom et z se diffrencie par un dplacement physique de la camra pour z,
tandis que zoom ne fait quagrandir limage. Ainsi, la proprit zoom permet de se rapprocher de
lobjet 3D sans jamais le traverser, alors que z passerait travers.
La sous-classe Camera3D est parfois aussi appele FreeCamera3D (dans danciennes versions de
PaperVision). Selon la version du package que vous utilisez, vrifiez que le nom de votre classe
Camera prsente dans le code ActionScript de votre document correspond bien au nom du fichier
.as disponible dans les sous-dossiers de la classe PaperVision.
Il peut arriver, selon le poids du fichier, que Flash annule le rendu la publication. Le calcul du rendu
est alors peut-tre trop long pour Flash. Pour corriger ce problme, allez dans les paramtres de publi-
cation, et sous le champ mot de passe, allongez la dure limite dexcution du script avant laquelle
Flash annule le rendu.
retenir
Il est possible danimer facilement la camra dans un environnement 3D pour crer des travellings,
des zooms et des trajectoires, grce la combinaison de proprits 3D et dinterpolations de type
TweenMax.
Le contenu dune scne 3D nest pas accessible directement depuis la liste daffichage, mais son
enveloppe oui. Il est donc possible de placer les animations 3D entre diffrents objets dans la scne
du document Flash.
Les commandes ActionScript de PaperVision peuvent tre rdiges directement depuis la fentre
de scnario.
Le zoom se distingue dun dplacement en Z, en cela quil ne traverse jamais lobjet, au

contraire de Z.
Programmer les mouvements dobjets 3D

Dans cette section, nous allons ajouter des animations qui permettent de manipuler directement
les objets 3D de format DAE, imports dans Flash.
Le document "ch10_3DPaperVision_2.fla" est bas sur lexemple prcdent. Sur la scne

principale, en plus de la bande grise et du bouton Loupe, figure un nouveau bouton nomm
sofa_btn (voir Figure 10.28). Ce bouton est destin recevoir des instructions danimation
de lobjet 3D.
En publiant le document (voir Figure 10.29), lorsque le sofa est au premier plan, le bouton
associ lobjet le fait pivoter sur lui-mme.
Figure 10.28
Aperu du
document publi.
Figure 10.29
Scnario de la
scne principale.

//-------------------- initialisation
import gs.TweenMax;
import gs.easing.*;
var scene:Scene3D;

//-------------------- actions
initialisation();
addChild(espace);
//
objetDAE.x=0;
objetDAE.y=0;
objetDAE.z=0;
camera.y=15;
camera.rotationY=-10;
//
}
}
//
objetDAE.yaw(-1);
objetDAE.roll(-1);
objetDAE.pitch(-1);
}
TweenMax.to(camera,5, {zoom:camera.zoom+100, delay:0, ease:Strong.easeOut});
}
//Animer le sofa
sofa_btn.addEventListener(MouseEvent.CLICK,animerCamera);
function animerCamera(evt:MouseEvent) {
TweenMax.to(objetDAE,5, {rotationY:objetDAE.rotationY+45, rotationX:
objetDAE.rotationX+45, rotationZ:objetDAE.rotationZ+45, delay:0,
}
Dans cet exemple, nous animons lobjet DAE en le ciblant par le nom dobjet qui lui a t
attribu (objetDAE), ds la dclaration des diffrents objets en dbut de code.
Lanimation dun objet 3D se construit de la mme manire que lanimation dune camra.
Les transitions TweenMax permettent de repositionner lobjet dans lespace, de le faire pivoter
en rotation sur les axes X, Y et Z.
Nous utilisons aussi dautres mthodes, dont la mthode yaw(), dj voque la section
prcdente :
objetDAE.yaw(-1);
La mthode yaw() excute une rotation latrale sur Y dune valeur qui correspond au chiffre
renseign en paramtre. Lobjet tourne au sol sur lui-mme comme un tourniquet, de degr
en degr :
objetDAE.roll(-1);
La mthode roll() excute une rotation verticale sur X dune valeur qui correspond au
chiffre renseign en paramtre. Lobjet tourne ici sur lui-mme, mais laxe de rotation est
parallle lcran :
objetDAE.pitch(-1);
La mthode pitch() excute une rotation frontale en Z dune valeur correspondant au chif-
fre renseign en paramtre. Lobjet tourne sur lui-mme, comme les aiguilles dune montre.
Ces trois mthodes peuvent tre appliques indpendamment les unes des autres et cumu-
les des rotations X, Y et Z. Dans notre exemple, les trois mthodes donnent un effet de
rotation hybride qui fait voluer lobjet dans toutes les directions simultanment. Vous pouvez
les dsactiver une par une pour observer leur comportement individuel.
En fin de programme, un couteur est attach au bouton sofa_btn et effectue une interpo-
lation de type TweenMax en modifiant les paramtres de rotation X, Y et Z de lobjet DAE.
Optimiser un site 3D. Certains sites, bien que trs spectaculaires, utilisent le mme principe de
navigation spatiale 3D avec des transitions de type TweenMax ou Caurina. Le site System Bolaget
Kampanj (sudois) en est le parfait exemple. Il affiche au premier plan un village modlis en 3D.
larrire-plan, sur la scne principale du document Flash, des panoramiques dimages PNG sont ani-
ms. Pour garantir la fluidit de leffet 3D, les PNG du dcor sont isols dans des clips distincts et ani-
ms avec un cfficient dacclration (voir Chapitre 1). La superposition de la scne 3D et 2D donne
lillusion dun ensemble entirement 3D. En isolant une partie du dcor sous la forme dimages fixes,
plutt que de tout raliser en 3D, nous optimisons considrablement le poids dun projet. Vous pou-
vez consulter le site rfrent ladresse suivante : http://www.systembolagetkampanj.se/forskar-
rapport/.
retenir
Il est possible danimer les proprits 3D dun objet DAE import dans le document Flash, pour le
faire voluer, se dplacer ou pivoter, sur action de lutilisateur, par exemple.
Des mthodes danimation (roll, yaw et pitch) permettent de simplifier les mouvements de ces
objets dans lespace 3D et peuvent tre cumules avec lanimation dautres proprits.
Interactivit avec les touches du clavier
La reprsentation dobjets en volume implique la ncessit de contrler la navigation dans
lespace. Dans cette section, nous allons voir comment reconstituer un dcor virtuel partir
de formes primitives textures, puis comment y naviguer laide des commandes du cla-
vier. Pour cela, nous devons dterminer la possibilit deffectuer une combinaison de tou-
ches (Maj+Flche droite, par exemple). Enfin, nous modifierons le sens de dfilement des
flches du clavier, en fonction de lorientation de la camra dans le dcor. Pour guider luti-
lisateur, une boussole est place sur la scne du document Flash et donne lorientation de la
camra dans lespace 3D.
Dans le document "ch10_3DPaperVision_3.fla", sur la scne principale, au-dessus du cal-

que fond_mc et de lhabillage gris, apparat une boussole. lintrieur du symbole qui le
compose, deux clips sont rpartis vers les calques et possdent leur nom doccurrence.
En publiant le document, des images tapissent des pans de murs virtuels. En activant les fl-
ches du clavier, vous avancez, reculez ou vous dplacez droite et gauche. En appuyant
simultanment sur majuscule et la touche flche latrale, vous effectuez une rotation 90
et pouvez reprendre une circulation vers lavant en appuyant de nouveau sur la flche du
haut (voir Figures 10.30 et 10.31). Laiguille de la boussole tourne en fonction de lorientation
dfinie pour la camra.
Figure 10.30
Aperu du docu-
ment publi.
Figure 10.31
Aperu du
document publi,
plus loin dans
lanimation.
Dans la fentre de scnario, lhabillage gris et la boussole apparaissent (voir Figure 10.32).
Figure 10.32
Aperu du
scnario de la
scne principale.
Dans le calque Actions, nous pouvons lire le code suivant :

//-------------------- initialisation
import gs.TweenMax;
import gs.easing.*;
var scene:Scene3D;
var plan0:Plane=new Plane(new BitmapFileMaterial("images/galerie/photo0.jpg"),400,200);

//-------------------- actions
initialisation();
activerPapervision();
//
camera.y=10;
plan0.rotationY=0;
plan0.x=0;
plan1.rotationY=90;
plan1.x=2000;
plan2.rotationY=-45;
plan2.x=500;
plan3.rotationY=45;
plan3.x=1500;
plan4.rotationY=0;
plan4.x=900;
plan5.rotationY=90;
plan5.x=3000;
//
activerAffichage3d();
}
//
function activerPapervision() {
addChild(espace);
}
function activerAffichage3d() {
scene.addChild(plan0);
stage.addEventListener(KeyboardEvent.KEY_DOWN,navigationClavierDOWN);
stage.addEventListener(KeyboardEvent.KEY_UP,navigationClavierUP);
}
//
}
//-------------------------- contrle clavier

var sens:Number=0;
var toucheBase:Number=0;
var toucheSupplementaire:Number=0;
//
function navigationClavierDOWN(evt:KeyboardEvent) {
trace ("le code de la touche enfonce est: "+evt.keyCode)
//
if (evt.keyCode==16) {
toucheBase=16;
}
}
function navigationClavierUP (evt:KeyboardEvent) {
trace ("sens = "+sens);
trace("toucheBase = "+toucheBase)
trace("toucheSupplementaire = "+toucheSupplementaire)
//
if (toucheBase==16 && toucheSupplementaire==37) {
TweenMax.to(camera,1, {rotationY:camera.rotationY-90, delay:0,
toucheBase=999;
toucheSupplementaire=999;
sens-=90;
if (sens<=-360) {
sens=0;
}
}
TweenMax.to(camera,1, {rotationY:camera.rotationY+90, delay:0,
toucheBase=999;
sens+=90;
if (sens>=360) {
sens=0;
}
}
//
if (sens==0 || sens==360) {
TweenMax.to(camera,1, {x:camera.x-200, delay:0, ease:Strong.easeOut});
}
TweenMax.to(camera,1, {z:camera.z+200, delay:0, ease:Strong.easeOut});
}
TweenMax.to(camera,1, {x:camera.x+200, delay:0, ease:Strong.easeOut});
}
TweenMax.to(camera,1, {z:camera.z-200, delay:0, ease:Strong.easeOut});
}
}
//
if (sens==90 || sens==270) {
}
}
}
}
}
//
if (sens==-90 || sens==-270) {
}
}
TweenMax.to(camera,1, {z:camera.z+200, delay:0,
}
TweenMax.to(camera,1, {x:camera.x+200, delay:0,
}
}
//
if (sens==180 || sens==-180) {
}
}
}
}
}
//
TweenMax.to(boussole_mc.fondBoussole_mc,1, {rotation:-sens, delay:0,
}
Dans ce programme, bas sur les documents prcdents, nous avons substitu lobjet DAE
par des formes primitives de type Plane (plan) :
var plan0:Plane=new Plane(new
BitmapFileMaterial("images/galerie/photo0.jpg"),400,200);
En paramtre de la mthode new Plane(), nous ciblons limage que nous voulons afficher
en tant que texture, puis, sa largeur et sa hauteur, qui sont exprimes en pixels.
Les primitives de PaperVision. Il existe plusieurs types de primitives disponibles dans Paper-
Vision. Chaque objet peut recevoir une texture et possder des dimensions libres si bien quune
sphre ou un cylindre sont couramment employs pour crer des univers entiers (des ciels ou des
panoramiques par exemple). Ainsi, pour crer une sphre de position x=0 et y=0, par exemple, vous
inscrivez :
var sphere:Sphere=new Sphere(new BitmapFileMaterial("images/ciel.jpg"),0,0);
Puis :
scene.addChild(sphere);
Vous pouvez ventuellement ajuster lchelle des formes primitives avec la proprit scale.
Sur le mme principe, la mthode Plane() gnre une forme plate, un plan rectangulaire. Cube()
dsigne un cube (voir aussi http://forum.hardware.fr/hfr/Programmation/Divers-6/cube-site-
entrees-sujet_125429_1.htm). Cone(), cre un cne et Cylinder() cre un cylindre. Pour le des-
criptif dtaill de construction de ces objets, avec des textures bitmaps, consultez ladresse suivante :
http://astrois.info/blog/flash/realiser-une-visionneuse-de-panorama-vr-en-as3.
Plus loin, nous grons dabord lemplacement des objets :

plan0.rotationY=0;
plan0.x=0;
Puis, nous les ajoutons la liste daffichage :

Viennent ensuite les contrles du clavier, activs par deux gestionnaires de la classe Key-
BoardEvent :
stage.addEventListener(KeyboardEvent.KEY_DOWN,navigationClavierDOWN);
stage.addEventListener(KeyboardEvent.KEY_UP,navigationClavierUP);
Nous utilisons deux gestionnaires, lun pour dtecter les touches enfonces (KEY_DOWN) et le
second pour les touches releves (KEY_UP).
Puisque le contrle de deux touches enfonces simultanment nest pas pris en compte dans
une mme structure conditionnelle, nous avons contourn ce problme en distinguant deux
fonctions. Ainsi, la premire fonction se charge de dtecter une touche enfonce pendant
que la seconde dtecte une autre touche, releve. Deux touches appuyes, puis relches
presque simultanment, peuvent donc tre vrifies.
Dans la premire fonction, nous grons la combinaison avec la touche Majuscule (key-
Code=16) et dans la seconde fonction, les touches flches (37 = flche gauche, 38 = flche
haut, 39 = flche droite et 40 = flche bas).
La premire fonction commence par identifier la touche enfonce en affichant son nom.
Cela permet dvaluer, en fonction du systme et du clavier, si les valeurs utilises corres-
pondent bien lenvironnement de dveloppement.
Cette fonction dfinit ensuite une variable qui nous renseigne sur le fait que la touche
Majuscule (keyCode==16) est enfonce :
toucheBase=16;
}
Les touches de commande
Le langage
En ActionScript 3, les touches de commande sont galement identifiables par des noms de proprits :
La proprit shiftKey correspond la touche Shift ou Majuscule.
La proprit altKey correspond la touche Alt.
La proprit ctrlKey correspond la touche Contrle.
Cette valeur est initialise dans la fonction suivante (navigationClavierUP), lorsque luti-
lisateur relche les touches du clavier. En dautres termes, les actions associes la touche
Majuscule nont deffet que si celle-ci reste enfonce pendant que la deuxime fonction est
excute. Seule la combinaison des deux touches modifie laction lexcution de la
deuxime fonction.
La deuxime fonction vrifie la touche complmentaire lorsquelle est relche en nous
informant dabord, dans la fentre de sortie, sur son nom, ainsi que diffrentes valeurs utilises
dans les autres conditions :
trace ("sens = "+sens);
trace("toucheBase = "+toucheBase)
trace("toucheSupplementaire = "+toucheSupplementaire)
Les deux conditions suivantes appliquent, si la touche Majuscule est effectivement enfonce,
une rotation en Y de 90, dans un sens ou dans lautre :
toucheBase=999;
sens-=90;
if (sens<=-360) {
sens=0;
}
}
TweenMax.to(camera,1, {rotationY:camera.rotationY+90, delay:0,
toucheBase=999;
sens+=90;
if (sens>=360) {
sens=0;
}
}
La valeur affecte la touche Majuscule (toucheBase=16) est initialise ds que laction

est active. Ainsi, lutilisateur peut effectuer dautres commandes, qui nimpliquent pas la
touche Majuscule, sans risquer de compromettre les autres actions du programme. Pour tre
initialise, la valeur est passe 999, qui ne correspond aucune touche.
Si, en plus, la touche relche correspond une des quatre flches du clavier (&& touche-
Supplementaire==37), alors, le sens de la camra est modifi :
toucheBase=999;
sens-=90;
if (sens<=-360) {
sens=0;
}
}
Laction est dcline aussi pour la flche droite (39). Plus bas, des conditions lancent les dif-
frents mouvements de camra, sans rotation, pour les combinaisons de touche simples. Ces
animations sont excutes mme si lutilisateur a enfonc la touche Majuscule :
if (sens==0 || sens==360) {
}
//actions des autres flches du clavier
}
Le principe est dclin pour chaque touche (37, 38, 39 ou 40) et, surtout, selon chaque
valeur dorientation de camra dfinie par sens.
Selon la position relative de la camra, il faut en effet ajuster les commandes de sorte quun
utilisateur qui a effectu une rotation de 90 droite (Maj+Flche droite) puisse continuer
davancer en appuyant sur la flche du haut, et non en appuyant sur la flche de droite.
Voici plus prcisment le mcanisme qui rgit lensemble des instructions excuter : dans
un espace 3D, au sol, sont imprims les axes X et Z. Pour avancer tout droit, nous incrmen-
tons notre position sur laxe Z. Pour nous dplacer latralement, en crabe, nous utilisons
donc laxe X. Si maintenant nous faisons pivoter la camra de 90 droite, nous percevons
dsormais ce qui longe laxe X, anciennement notre droite, en face de nous. Mais, la com-
mande du clavier Flche haut, elle, continue de contrler le dplacement sur Z. Si nous acti-
vons la touche Flche haut, nous nous dplaons donc maintenant sur la gauche (axe Z).
Pour que le dplacement gauche se fasse dsormais avec la flche de gauche, nous devons
dfinir une condition. Si nous voulons autoriser lutilisateur sorienter indiffremment
droite ou gauche et davant en arrire, nous devons dfinir quatre blocs de conditions.
Ces conditions vrifient lorientation applique la camra laide de la variable sens. Les
valeurs sont incrmentes ou diminues de 90 chaque modification de la rotation de la
camra en Y. Lorsque cette valeur atteint la limite de +360 ou 360, nous linitialisons 0.
lintrieur de chaque condition, nous ajoutons donc des contrles qui dterminent le type de
dplacement effectuer selon langle observ. Nous ajustons pour cela deux paramtres : le
signe plus ou moins attribu au pas dincrmentation ainsi que laxe de dfilement X ou Z :
Pour terminer, une interpolation indique laiguille de la boussole de pivoter en fonction de

cette orientation :
TweenMax.to(boussole_mc.fondBoussole_mc,1, {rotation:-sens, delay:0,
Vrifier les valeurs de ses propres touches clavier. Pour vrifier instantanment les valeurs de
lensemble de vos touches clavier, placez le code suivant dans la fentre Actions dun document Flash
et publiez-le. Le document "ch10_3DpaperVision_3b.fla" contient ce programme :
// afficher les commandes de clavier
for (var i:int =33; i<126;i++){
trace(i + "\t: " + String.fromCharCode(i))
}
Dans les deux tableaux qui suivent, nous indiquons les valeurs numriques qui correspon-
dent aux claviers ASCII franais et amricain. Vous y trouverez les valeurs vous permettant
de dvelopper dautres actions partir des commandes du clavier, selon sa configuration.
Tableau 10.1 : Valeurs des principales commandes de clavier ASCII

Dnomination des touches Valeur numrique
Retour 8
Tabulation 9
Entre 13
Majuscule 16
Ctrl/Contrle 17
Alt 18
Pause/Break/Attn 19
Verrouillage majuscule 20
Escape 27
Page haut 33
Page bas 34
Fin 35
Sommaire (flche haut et gauche, au-dessus de la touche fin) 36
Flche gauche 37
Flche haut 38
Flche droite 39
Tableau 10.1 : Valeurs des principales commandes de clavier ASCII (suite)

Flche bas 40
Insert 45
Supprimer 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
Touche Windows de gauche 91
Tableau 10.1 : Valeurs des principales commandes de clavier ASCII (suite)
Touche Windows de droite 92
0 (pav numrique) 96
1 (pav numrique) 97
2 (pav numrique) 98
3 (pav numrique) 99
4 (pav numrique) 100
Multiplier 106
Additionner 107
Soustraire 109
Point dcimal 110
Diviser 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
Verrouillage pav numrique 144
Verrouillage dfilement 145
Point-virgule 186
gal 187
Commande 188
Tiret 189
Point 190
Slash 191
Accent grave 192
Crochet ouvert 219
Back slash 220
Crochet ferm 221
Simple quote ou apostrophe simple 222
Tableau 10. 2 : Valeur des principales commandes de clavier US

Alt 18
Arrow down 40
Arrow left 37
Arrow right 39
Arrow up 38
Backspace 8
Caps Lock 20
Ctrl 17
Delete 46
End 35
Enter 13
Esc 27
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F8 119
F9 120
F10 121
F11 122
F12 123
Home 36
Insert 45
Num Lock 144
(NumPad) - 109
(NumPad) * 106
(NumPad) . 110
(NumPad) / 111
(NumPad) + 107
(NumPad) 0 96
(NumPad) 1 97
(NumPad) 2 98
(NumPad) 3 99
(NumPad) 4 100
(NumPad) 5 101
(NumPad) 6 102
(NumPad) 7 103
Tableau 10. 2 : Valeur des principales commandes de clavier US (suite)
(NumPad) 8 104
(NumPad) 9 105
Page Down 34
Page Up 33
Pause 19
Print Scrn 44
Scroll Lock 145
Shift 16
Spacebar 32
Tab 9
A 65
B 66
C 67
D 68
E 69
F 70
G 71
H 72
I 73
J 74
K 75
L 76
M 77
N 78
O 79
P 80
Q 81
R 82
S 83
T 84
U 85
V 86
W 87
X 88
Y 89
Z 90
1 49
2 50
Tableau 10. 2 : Valeur des principales commandes de clavier US (suite)

3 51
4 52
5 53
6 54
7 55
8 56
9 57
0 48
` 222
- 189
, 188
. 190
/ 191
; 186
[ 219
\ 220
] 221
` 192
= 187
Pour connatre la liste des principales commandes clavier supportes par le systme Linux,
reportez-vous ladresse suivante : http://www.comptechdoc.org/os/linux/howli-
nuxworks/linux_hlkeycodes.html.
Interactivit sur les objets 3D. Pour en savoir plus sur les interactions possibles avec les
objets 3D, consultez la page suivante : http://papervision3d-fr.com/2009/09/16/interactive-
displayobject3d/.
Gestion des lumires dans PaperVision. Pour en savoir plus sur lajout de lumires dans
la scne 3D, consultez la page : http://papervision3d-fr.com/2009/09/22/la-lumiere-dans-
papervision3d/.
Guide de rfrence PaperVision. Un guide de rfrence sur PaperVision est disponible cette
adresse : http://papervision3d.googlecode.com/svn/trunk/as3/trunk/docs/class-summary.html.
Aide en ligne de PaperVision. De nombreux utilisateurs de la classe PaperVision travaillent en
mode de programmation objet en externalisant leur code sous la forme de classes et de packages
dans des fichiers ayant lextension .as. Des sites communautaires et des blogs font rfrence cette
mthode. Vous y trouverez des aides complmentaires pour vous guider sur les techniques avances
de programmation avec PaperVision :
http://content.madvertices.com/articles/PV3DTraining/default.htm#setUp.
http://wiki.mediabox.fr/tutoriaux/flash/papervision_3D_bases.
http://blog.pixlp.com/index.php/.
retenir
Les positions 3D des objets et des camras peuvent tre contrles par les touches du clavier laide
de la proprit keyCode.
Pour construire une navigation viable, vous devez dtecter la rotation de la camra et en dterminer
laxe de dfilement x ou z.
Synthse
Dans ce chapitre, vous avez appris intgrer des objets 3D au sein de lenvironnement
Flash, laide de la classe PaperVision, en programmant les commandes PaperVision
directement dans le scnario. Vous savez placer les scnes 3D dans un dcor multicalques et
interagir avec les trajectoires animes de la camra et dplacer les objets 3D, y compris en
utilisant les touches du clavier.
Les bogues daffichage, le poids limit, compar la qualit de rsolution disponible en flux
vido F4V favorise cependant encore largement la vido interactive la technologie 3D
interactive sur le Web aujourdhui. Mais les innovations en cours en font un outil ne pas
ngliger dans les dveloppements venir.
API daffichage et de colorimtrie

11
Introduction
Bien que Flash intgre dj tout type de donnes, il peut tre intressant de dvelopper des
fonctionnalits avances sur des contenus traits dynamiquement. Par exemple, vous pou-
vez proposer une fonctionnalit de grossissement dune image, une fonctionnalit de retou-
che colorimtrique dune image, pour tester des ambiances et offrir de nouveaux services
des utilisateurs exigeants.
Flash propose un moteur de traitement dimages avanc. Il dispose, pour cela, de deux classes
qui permettent de modifier intrinsquement les pixels dune image (colorMatrixFilter) et
de dformer un objet graphique (Matrix).
Dans ce chapitre, nous abordons le traitement des pixels de limage travers ces diff-
rentes mthodes. Nous voyons comment raliser, entre autres, des interfaces sans cr-
nelage, une loupe, des filtres de traitement colorimtrique, des fonctionnalits
dimpression sur des zones dfinies de linterface. Nous verrons ensuite, dans le pro-
chain chapitre, comment exploiter ces techniques pour mettre au point, par exemple, un
moteur de rendu en relief.
Lissage des images bitmap

Le lissage des images est requis ds que limage suit une transformation dchelle ou de
rotation. Sans lissage, limage anime apparat crnele et un voile cristallin semble mme
la dformer ds quelle subit un mouvement.
Comme voqu aux Chapitres 5 et 9, nous avons vu comment lisser une image en activant
loption Autoriser le lissage, depuis les proprits de chaque image, dans la bibliothque.
Mais, dans de nombreux cas, pour une galerie dimages dynamique par exemple, il peut tre
intressant dactiver cette option avec ActionScript. Pour ce faire, nous utilisons la proprit
smoothing.
Pour appliquer cette proprit, nous devons au pralable comprendre quelle sapplique seu-
lement un objet image, et non son conteneur. Il en rsulte que, pour lisser un MovieClip,
nous devons, au pralable, crer une enveloppe image (Bitmap) qui capture ce que repr-
sente le MovieClip, pour seulement ensuite le lisser par ActionScript.
Dans cette section, nous allons voir comment lisser une image charge dynamiquement sur
la scne, dans un MovieClip.
Exemples > ch11_apiGraphisme_1.fla
Dans le document "ch11_apiGraphisme_1.fla", sur la scne principale, est positionn un

MovieClip vide, nomm contenu_mc, ainsi quun bouton Loupe. Le bouton Loupe agrandit
et effectue une rotation sur ce MovieClip, si bien que sans les proprits de lissage, nous
pouvons constater lapparition dun crnelage.
En publiant le document, limage est dabord charge dans le MovieClip et affiche dj un
lissage. En activant le bouton Loupe, limage effectue une rotation et subit un agrandissement,
mais les pixels restent lisses, mme grande chelle (voir Figure 11.1).
Figure 11.1
Aperu du
document publi.
Dans la fentre de scnario de la scne principale, au-dessus du calque fond_mc, figurent le

symbole contenu_mc (vide) et le bouton loupe_btn (voir Figure 11.2).
Figure 11.2
Aperu du
scnario de la
scne principale.

import gs.*;
import gs.easing.*;
API DAFFICHAGE ET DE COLORIMTRIE 333

import gs.events.*;
//--------------- actions
// chargement
var chargeur = new Loader();
chargeur.load(new URLRequest("images/provence/Roussillon.jpg"));
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementComplet);
function chargementComplet(evt:Event) {
// lissage
var imageDepart:Bitmap = evt.target.content;
var informationImage:BitmapData=new
BitmapData(imageDepart.width,imageDepart.height);
informationImage.draw(contenu_mc);
imageDepart.smoothing=true;
// affichage
contenu_mc.addChild(imageDepart);
contenu_mc.x=100;
contenu_mc.y=30;
}
// bouton loupe
loupe_btn.addEventListener(MouseEvent.CLICK,tournerImage);
function tournerImage (evt:MouseEvent) {
if (contenu_mc.rotation>-89) {
TweenMax.to(contenu_mc,2, {rotation:-90, scaleX:2, scaleY:2, x:0,
y:520, delay:0, ease:Strong.easeInOut});
} else {
TweenMax.to(contenu_mc,2, {rotation:0, scaleX:1, scaleY:1, x:100, y:30,
}
}
Ce code est structur en trois parties. La premire appelle les classes utilises pour les inter-
polations TweenMax. La deuxime charge limage et la lisse. La troisime partie gre linterac-
tivit avec le bouton Loupe.
La premire action de la deuxime partie charge limage, comme vu au Chapitre 5. Aussitt
aprs, la fonction appele affiche lorganisation de limage charge, pour lui permettre
dobtenir un lissage :
function chargementComplet(evt:Event) {
// lissage
// affichage
contenu_mc.x=100;
contenu_mc.y=30;
}
Pour appliquer un lissage, nous dfinissons dabord un objet vectoriel textur dune image.
Et seulement une fois cet objet matrialis, nous pouvons lui appliquer un lissage.
Pour lisser une image charge dynamiquement, nous procdons donc en plusieurs tapes.
Dabord, nous commenons par dfinir le flux charg (evt.target.content) comme un
objet image avec un type Bitmap :
Puis, nous plaons les donnes de limage (ses informations colorimtriques), dans un nouvel
objet BitmapData :
Nous indiquons, en paramtre de cette mthode, les dimensions de cet objet (largeur et hau-
teur). Les largeur et hauteur indiques sont ici celles de lobjet Bitmap dj identifi.
Les donnes vhicules par lobjet BitmapData sont matrialises sur le symbole
contenu_mc par linstruction suivante :
Limage est en fait place sur lenveloppe extrieure du MovieClip contenu_mc et non
lintrieur. Pour le vrifier, nous pouvons lire le contenu du symbole en utilisant lune des
instructions suivantes. Ces instructions retournent chacune une valeur nulle. Limage nest
donc pas contenue dans lobjet, mais bien en surface :
trace(contenu_mc.numChildren); //0
trace(contenu_mc.getChildAt(0)); // Index hors limites
Par contre, cest bien lobjet vectoriel textur BitmapData que nous appliquons la pro-
prit de lissage smoothing :
Nous pouvons alors afficher lobjet, le placer avec des proprits x et y, voire, le dformer.
Il restera lisse :
contenu_mc.x=100;
contenu_mc.y=30;
Le code se termine sur la gestion du bouton qui effectue les interpolations dchelle et de
rotation :
// bouton loupe
loupe_btn.addEventListener(MouseEvent.CLICK,tournerImage);
function tournerImage (evt:MouseEvent) {
if (contenu_mc.rotation>-89) {
TweenMax.to(contenu_mc,2, {rotation:-90, scaleX:2, scaleY:2, x:0,
y:520, delay:0, ease:Strong.easeInOut});
} else {
TweenMax.to(contenu_mc,2, {rotation:0, scaleX:1, scaleY:1, x:100, y:30,
}
}
Dans la structure conditionnelle, si le conteneur affiche une rotation infrieure 89, la

premire transition est joue et porte ce conteneur une rotation de 90. Lorsque la condition

nest plus vrifie, une interpolation inverse est lance et retourne lobjet une rotation 0,
suprieure donc 89. Chaque interpolation, en plus de faire tourner lobjet, applique une
modification dchelle. Sans le lissage, limage laisserait apparatre un crnelage. Pour vri-
fier que le lissage est bien actif, vous pouvez neutraliser linstruction suivante, en commen-
taire, puis la restaurer:
//imageDepart.smoothing=true;
la Figure 11.3, nous soulignons la diffrence entre limage affiche avec un lissage et
celle qui bnficie du lissage. La diffrence est surtout perceptible pendant le mouvement,
o limage saute, en plus dapparatre crnele si elle nest pas lisse.
Figure 11.3
Comparaison des
deux images.
Le document actuel traite une image charge dynamiquement. Une dclinaison de cet
exemple, adapt pour une image place manuellement dans le scnario, est disponible dans
le fichier "ch11_apiGraphisme_1b.fla".
retenir
Pour lisser une image, nous devons la placer en tant quobjet Bitmap sur un conteneur et lui passer
la proprit smoothing sur true.
Le lissage augmente les ressources graphiques ncessaires pour lexcution du programme. Il ne
faut pas en abuser.
Lissage des graphismes vectoriels

Tout comme pour les images bitmap, il est possible doptimiser aussi laffichage des formes
graphiques vectorielles. Pour cela, nous utilisons la proprit cacheAsBitmap que nous
dfinissons sur true.
Dans cette section, nous appliquons cette proprit dynamiquement sur un symbole qui
contient plusieurs occurrences dune forme graphique, importe dIllustrator.
Dans le document "ch11_apiGraphisme_2.fla", sur la scne principale, apparat un MovieClip.

lintrieur, plusieurs occurrences dune plume vectorielle sont superposes (voir Figure 11.4).
Figure 11.4
Aperu du
document.
Dans le scnario, seul le symbole contenu_mc apparat entre le calque fond_mc et le calque
actions (voir Figure 11.5).
Figure 11.5
Aperu du
scnario de la
scne principale.
Dans la fentre Actions, une instruction applique la mise en cache sur le symbole conteneur
contenu_mc :
//--------------- Mise en cache
contenu_mc.cacheAsBitmap=true;
La mise en cache peut galement tre applique directement depuis lInspecteur de proprits,
en cliquant sur loption intitule Cache sous forme de bitmap (voir Figure 11.6).
Chaque mise en cache induit la cration dune image bitmap partir des lments vectoriels
affichs dans un clip. En utilisant cette option, nous alourdissons considrablement le document.
Quelques restrictions dutilisation doivent donc tre souleves :
Limitez le nombre de symboles qui utilisent cette proprit. Prfrez rassembler les formes
graphiques vectorielles dans un seul et unique symbole.

Nanimez pas le symbole dont le contenu est mis en cache (pas de rotation, pas de mise
lchelle). Les dplacements simples sont possibles (animation par translation en X ou
Y, ou dplacements avec startDrag). Car une dformation de limage oblige le moteur
de rendu crer une nouvelle image chaque modification. Vous ralentissez donc ind-
niablement les performances de lapplication.
Si limage vhicule doit apparatre de nombreuses reprises, ou tre superpose par
des contenus dj trs gourmands en ressources, il est souhaitable dactiver cette option.
Le texte contenu dans une zone dfilante (avec un ascenseur par exemple) peut tre mis
en cache.
Une illustration en arrire-plan dun site, une carte du monde fixe et non zoome, peut
galement tre mise en cache.
Figure 11.6
Aperu du
document.
Vous pouvez lisser les bords dune forme vectorielle en activant, directement depuis lInspecteur de
proprits, et sur la forme elle-mme, dans la catgorie Remplissage et trait, loption Repres situe
droite du champ chelle. Cette option aligne automatiquement les formes graphiques sur des abscisses
et des ordonnes entires. Elle vite donc laffichage parfois bancal de certains contours.
retenir
Il est possible doptimiser les performances daffichage pour les formes vectorielles. Nous utilisons
pour cela la proprit cacheAsBitmap.
La mise en cache des formes vectorielles ne doit cependant pas tre systmatique et ne doit concerner
que les images non dformes, et non animes.
Effet loupe avec optique dformante

Pour crer une loupe, a priori, rien de plus simple que de dupliquer une zone de limage
agrandir, dans un conteneur masqu. Mais pour que llment agrandi suive correctement le
mouvement de dplacement de la loupe, nous devons dfinir une quation. De mme, pour
que la loupe affiche une image agrandie et dforme, nous devons aussi appliquer un flou
sur le masque qui la canalise. Or, un masque ne supporte un flou que si celui-ci a t cr
dynamiquement.
Dans cette section, nous utilisons une image place dans le scnario pour crer un effet de
loupe sur une lentille, mobile, par simple dplacement (voir Figure 11.7).
Figure 11.7
Aperu du
document publi.
Exemples > ch11_apiGraphisme_3.fla et Exemples > ch11_apiGraphisme_3b.fla
Dans le document "ch11_apiGraphisme_3.fla", sur la scne principale, figure le Movie-

Clip contenu_mc, qui affiche une image. Les dimensions de ce MovieClip sont rduites
50 %. Au-dessus, est plac un symbole nomm loupe_mc, constitu dune forme
dgrade semi-transparente et dun bouton de dplacement. Sur la scne principale, un
disque noir est plac hors champ, sur la droite. Ce MovieClip, nomm masque_mc, sert
de masque pour limage agrandie. Limage agrandie, elle, apparat dans le scnario sous
le nom doccurrence zoom_mc (voir Figure 11.8). Son calque est dsactiv mais
demeure visible la publication. Ce symbole est en fait une deuxime occurrence du
mme symbole contenu_mc, mais affich 100 %. Limage quil vhicule nest donc
pas dforme.

Figure 11.8
Aperu du
scnario.
Dans la fentre de scnario, au-dessus des autres calques, apparat le calque actions.
Il affiche le code suivant :
//---------------- initialisation
import flash.filters.BlurFilter;
loupe_mc.cacheAsBitmap=true;
masque_mc.filters=[flou];
zoom_mc.mask=masque_mc;
var zoneDeplacement:Rectangle=new Rectangle(150,100,470,350);
//----------------- actions
// dplacement de la loupe
loupe_mc.deplacerLoupe_btn.addEventListener(MouseEvent.MOUSE_DOWN, deplacerLoupe );
function deplacerLoupe(evt:MouseEvent) {
loupe_mc.startDrag(false,zoneDeplacement);
}
addEventListener(MouseEvent.MOUSE_UP, arreterDeplacement );
function arreterDeplacement(evt:MouseEvent) {
stopDrag();
}
// positionnement de limage zoome
addEventListener(Event.ENTER_FRAME,positionMasque);
function positionMasque(evt:Event) {
masque_mc.x=loupe_mc.x;
masque_mc.y=loupe_mc.y;
zoom_mc.x=( ( (loupe_mc.x*-1)+(stage.stageWidth/2)) + (zoom_mc.width/2) )
-loupe_mc.width;
zoom_mc.y=( ( (loupe_mc.y*-1)+(stage.stageHeight/2)) + (zoom_mc.height/2) )
-loupe_mc.height;
}
Le programme est organis en trois parties : linitialisation, les actions de dplacement de la

loupe et la gestion de limage agrandie.
La loupe est constitue dun MovieClip qui contient principalement une forme graphique
presque transparente. Cette forme laisse donc voir limage situe larrire-plan. Dans le
programme, nous rendons la loupe mobile sur laction de lutilisateur. Mais cette loupe
nexerce rien, en tant que telle, sur limage survole. Cest, sous la loupe, que nous avons
plac une image agrandie, dans un clip, clip sur lequel nous appliquons un masque avec
ActionScript.
Il est noter que les filtres naffectent que les masques crs en ActionScript. Cest la raison
pour laquelle nous procdons ainsi et non partir des options de masque disponibles dans le
scnario. Dans le programme, plus loin, une action dtermine le positionnement de ce clip
en fonction du positionnement de la loupe. Pour affiner leffet, nous ajoutons aussi au mas-
que un filtre flou. Cest ce flou qui va permettre de simuler la distorsion de limage travers
la lentille.
Pour raliser ce dispositif, le code importe tout dabord la sous-classe BlurFilter (flou)
utilise pour adoucir les bords du masque :
//---------------- initialisation
import flash.filters.BlurFilter;
Puis, nous dfinissons les premires instructions :

loupe_mc.cacheAsBitmap=true;
masque_mc.filters=[flou];
zoom_mc.mask=masque_mc;
var zoneDeplacement:Rectangle=new Rectangle(150,100,470,350);
Nous commenons par appliquer un lissage sur les formes vectorielles contenues dans la
loupe laide de la proprit cacheAsBitmap aborde dans la section prcdente.
Nous appliquons ensuite un filtre flou sur le symbole masque_mc, utilis pour rvler une
partie de limage agrandie. En appliquant une valeur de flou de quelques pixels seulement,
nous dfinissons un contour assez fin pour le masque, et donc, une forme de lentille plutt
plate. En spcifiant des valeurs plus leves, nous crons une forme de lentille plus convexe.
la suite, nous attachons le symbole masque_mc limage agrandie, laide de la proprit
mask (zoom_mc.mask=masque_mc).
Nous dfinissons enfin un rectangle pour canaliser la zone de dplacement de la loupe.
Nous limitons le dplacement une surface proche de la surface de limage, ceci afin dvi-
ter que lutilisateur ne peroive encore, dans les extrmits, limage de dessous, ce qui serait
incohrent dun point de vue graphique.
Ensuite, viennent les actions qui dfinissent le dplacement de la loupe :
//----------------- actions
// dplacement de la loupe
loupe_mc.deplacerLoupe_btn.addEventListener(MouseEvent.MOUSE_DOWN, deplacerLoupe );
function deplacerLoupe(evt:MouseEvent) {
loupe_mc.startDrag(false,zoneDeplacement);
}
addEventListener(MouseEvent.MOUSE_UP, arreterDeplacement );
function arreterDeplacement(evt:MouseEvent) {
stopDrag();
}
La premire fonction active le dplacement de la loupe ds que lutilisateur appuie sur le

bouton situ en haut et droite de lobjet (deplacementLoupe_btn). Ce dplacement est
dfini par les paramtres false et zoneDeplacement. false dsigne le fait que lobjet ne
saccroche pas sur le pointeur en son centre. Le dplacement est donc normal. La variable
zoneDeplacement fait rfrence la zone rectangulaire dfinie comme limites de la zone
de dplacement.
La deuxime fonction interrompt tous les dplacements, quels quils soient, ds que lutili-
sateur relche le bouton de la souris. Du fait que lcouteur est plac sur la timeline du

scnario principal, leffet de relchement de souris est peru aussi bien sur lobjet cliqu
quen dehors.
La troisime partie affiche les commandes relatives au dplacement de limage agrandie :
// positionnement de limage zoome
addEventListener(Event.ENTER_FRAME,positionMasque);
function positionMasque(evt:Event) {
zoom_mc.x=( ( (loupe_mc.x*-1)+(stage.stageWidth/2)) + (zoom_mc.width/2) )
-loupe_mc.width;
zoom_mc.y=( ( (loupe_mc.y*-1)+(stage.stageHeight/2)) + (zoom_mc.height/2) )
-loupe_mc.height;
}
Dans cette fonction excute continuellement (ENTER_FRAME), nous redfinissons les positions
des symboles masque_mc et zoom_mc.
Le masque, affect limage agrandie (zoom_mc), se cale sur la position de la loupe en X et
Y. La zone visible de limage agrandie suit donc le mouvement de la loupe. Les deux objets
se superposent parfaitement, car leurs centres respectifs sont tous deux situs au milieu de
la forme que chacun deux vhicule :
Limage agrandie (zoom_mc) est, quant elle, positionne en fonction de la loupe. Lqua-
tion que nous utilisons indique sommairement laction suivante : la position de limage
agrandie (zoom_mc) correspond la position de la loupe en valeur ngative (voir
Figure 11.9), plus la moiti de la scne (pour permettre dinverser le coefficient lorsque le
pointeur passe le centre du document), plus la demie largeur ou hauteur du zoom (pour
recentrer limage agrandie) moins les dimensions de la loupe (pour center limage avec la
loupe).
Figure 11.9 zoom_mc.width/2

Mcanisme du
positionnement
de limage
zoom_mc.height/2
agrandie.
stage.stageHeight/2
loupe_mc.y
Dplacement Dplacement
de la loupe de l'image agrandie
stage.stageWidth/2
loupe_mc.x
Plus clairement, travers cette quation tendue, nous dsignons les actions suivantes :
Lorsque nous dplaons la loupe, si nous voulons que les extrmits des deux images con-
cident pendant le dplacement, et que limage agrandie ne se retrouve pas compltement
dcale lorsque nous survolons les bords de limage du dessous, nous devons dfinir sa
position selon un coefficient. Ce coefficient lve ici le pas du dplacement de limage
agrandie en fonction de sa distance qui la spare du centre du document. Lorsque la loupe
part gauche, nous levons ainsi la valeur ngative pour acclrer le pas du dplacement
vers la gauche. Inversement, lorsque le dplacement seffectue droite, nous incrmen-
tons la position de limage agrandie en multipliant son pas, par un coefficient, cette fois-
ci, positif.
Pour dfinir la valeur de ce coefficient, nous devons dabord intgrer, dans notre calcul, les
coordonnes du centre du document. Cest pourquoi nous utilisons stage.stageWidth/2,
qui dsigne le centre du document. Mais, nous employons aussi une valeur ngative
(loupe_mc.x*-1) pour que limage agrandie se dplace en sens inverse de la loupe. Cela
permet de faire concider les bords des deux images, lorsque la loupe atteint les extrmits
de limage originale (voir Figure 11.10) :
(loupe_mc.x*-1)+(stage.stageWidth/2)
Figure 11.10
Mcanisme du
positionnement
des images sur les
bords.
Dplacement Dplacement
de la loupe de l'image agrandie
accentu gauche accentu droite
Puis, nous ajoutons la moiti de la largeur de limage agrandie, pour recentrer limage dans
la scne (zoom_mc.width/2). Nous retranchons, enfin, la moiti de la largeur de la loupe,
pour recentrer le contenu par rapport la loupe elle-mme (-loupe_mc.width).
Nous dclinons ensuite le procd pour la hauteur avec les proprits Y et height.
Dans le fichier "ch11_apiGraphisme_3b.fla", nous proposons une variante de loutil loupe.
Dans ce document, la loupe suit directement le pointeur mais avec leffet damortissement
que nous avons tudi au Chapitre 1. Le code est le suivant :
addEventListener(Event.ENTER_FRAME,bougerLaBoule);
function bougerLaBoule (evt:Event) {

boule_mc.x+=(mouseX-boule_mc.x)/20;
boule_mc.y+=(mouseY-boule_mc.y)/20;
ombre_mc.x=boule_mc.x;
ombre_mc.y=boule_mc.y;
}

Pour en savoir plus sur les techniques danimation en ActionScript, reportez-vous au Chapi-
tre 1.
retenir
Pour crer une loupe, nous devons crer un masque flou, dynamiquement, afin de reconstituer la
dformation de la lentille.
Nous devons placer limage duplique et masque en fonction de la position de la loupe en faisant
en sorte que les extrmits des deux images restent proches.
Nous devons contraindre le mouvement de la loupe pour rserver laffichage au contenu utile uni-
quement.
Nous devons mettre en cache la forme graphique translucide pour optimiser les ressources de lutili-
sateur.
Filtres de correction colorimtrique

Le moteur colorimtrique de Flash, affect la classe colorMatrix, permet de modifier la
valeur de chaque pixel qui compose limage. Il est donc possible dappliquer des filtres pour
modifier laspect dune image ou en extraire certaines couches, en vue dune exploitation
pour le relief, par exemple. Dans le contexte de dveloppements plus simples, la classe
colorMatrix permet aussi dappliquer des filtres de saturation, de dsaturation, de lumino-
sit, sur les images. Elle permet de dcliner dans une mme interface diffrentes occurren-
ces dune image et de crer, moindre poids, des dcors composites complexes et alatoires
(une ville avec des maisons de nuances diffrentes, une fort avec des arbres diffrents, un
trafic routier avec des vhicules de teintes diffrentes, mais composs partir des mmes
symboles).
Dans cette section, nous allons voir comment appliquer et restaurer un filtre sur une image.
Sur le mme principe, nous abordons aussi la manire dappliquer dynamiquement un filtre
plusieurs occurrences dune mme composition, mais avec des valeurs diffrentes. Nous
voyons enfin comment animer un filtre de sorte quil apparaisse progressivement, grce
ActionScript.
Appliquer et restaurer un filtre
Dans le document "ch11_apiGraphisme_4.fla", sur la scne principale, apparat un Movie-

Clip qui contient une image. droite, figure un bouton de restauration (voir Figure 11.11).
Figure 11.11
Aperu de la
scne principale,
image normale.
En publiant le document, limage est aussitt modifie. Un filtre de saturation est automati-
quement appliqu. Lorsque le bouton Restaurer est cliqu, limage revient ltat initial
Figure 11.12
Aperu du
document publi,
image sature.
Dans le scnario de la scne principale, au-dessus du calque fond_mc, nous distinguons les
calques contenu_mc et restaurer_btn, qui correspondent aux deux objets placs sur la
scne (voir Figure 11.13).

Figure 11.13
Aperu du
scnario de la
scne principale.

//------------------- initialisation
import flash.filters.ColorMatrixFilter;
//------------------- actions
// filtre saturation
var coef1:Number=2;
var coef255:int=-100;
var tableau1:Array = new Array();
tableau1 = new Array();
tableau1=tableau1.concat([coef1,0,0,0,coef255]);
tableau1=tableau1.concat([0,coef1,0,0,coef255]);
tableau1=tableau1.concat([0,0,coef1,0,coef255]);
tableau1=tableau1.concat([0,0,0,1,0]);
//
var filtreSaturation:ColorMatrixFilter=new ColorMatrixFilter(tableau1);
contenu_mc.filters=[filtreSaturation];
// filtre restauration
var filtreNegatif:ColorMatrixFilter=new ColorMatrixFilter(tableau2);
//
restaurer_btn.addEventListener(MouseEvent.CLICK,appliquerFiltreNegatif);
function appliquerFiltreNegatif(evt:MouseEvent) {
contenu_mc.filters=[filtreNegatif];
}
Dans ce code, nous appliquons un filtre, dynamiquement. Nous lappliquons nouveau, sur
action de lutilisateur, en modifiant simplement les valeurs de sorte que limage affecte soit
restaure.
Les filtres colorimtriques appartiennent la classe filters et plus spcifiquement la
sous-classe ColorMatrixFilter. Nous limportons via linstruction suivante :
//------------------- initialisation
Plus bas, nous appliquons un filtre dont les valeurs dfinissent une augmentation de la satu-
ration :
//------------------- actions
var coef1:Number=2;
//
Un filtre colorimtrique, en ActionScript, se dfinit par une matrice de valeurs applique

chaque pixel de limage pour laquelle il est affect. Cette matrice est compose dune srie
de cinq valeurs (Rouge,Vert, Bleu, Alpha et Luminosit) dfinissantle dcalage de posi-
tionnement de chaque pixel, dans le cercle chromatique, et ce pour chacune des quatre
teintes (Rouge, Vert, Bleu et Alpha). Ainsi, nous obtenons un tableau compos de vingt
valeurs (5 4).
Le tableau de valeurs, utilis par la matrice de couleurs, peut galement adopter la forme
suivante :
nomDuTableau = [1,0,0,0,255,0,1,0,0,255,0,0,1,0,255,0,0,0,1,0].
Pour des raisons de clart, nous prfrons employer la structure clate, qui revient stricte-
ment au mme rsultat. Cette structure offre juste lavantage de permettre une identification
plus rapide des valeurs appliques distinctement pour chaque teinte (R, V, B et A) :
var nomDuTableau: Array = new Array();
nomDuTableau = new Array();
nomDuTableau =nomDuTableau.concat([1,0,0,0,255]);//R
nomDuTableau =nomDuTableau.concat([0,1,0,0,255]);//V
nomDuTableau =nomDuTableau.concat([0,0,1,0,255]);//B
nomDuTableau =nomDuTableau.concat([0,0,0,1,0]);//A
Chaque ligne utilise la mthode concat() qui ajoute de nouvelles valeurs au tableau. Nous
disons que les valeurs sont alors concatnes aux valeurs prcdentes.
Les valeurs utilises pour dfinir lintensit du rouge, du vert et du bleu de chaque teinte
RVBA sont dfinies par un pourcentage. Ce pourcentage est de type dcimal. Pour indiquer
une intensit normale, nous inscrivons donc la valeur 1, qui correspond 100 %. Pour dsi-
gner une valeur nulle, nous inscrivons 0, qui correspond 0 %. Toutes les valeurs dcimales
intermdiaires permettent de dfinir des nuances de couleurs intermdiaires. Les valeurs
peuvent tre suprieures 1 et, mme, ngatives. Dans le cas de valeurs ngatives, la teinte
modifie bascule, dans le cercle chromatique, vers une nuance complmentaire. tant
donn que le calcul multiplie les valeurs entre elles, une modification a priori bnigne peut
souvent aboutir des surprises et notamment lassombrissement intgral de limage.
Travaillez donc en mesurant bien ces valeurs.
Les valeurs de luminosit, ajoutes en fin de ligne, sont dfinies entre 255 et +255. Une
valeur de 0 ne modifie pas la luminosit de limage. Une valeur qui volue vers 255 ajoute
du noir limage. Une valeur qui volue vers +255 ajoute du blanc.
Ainsi, nous pouvons dfinir plusieurs types de rglages partir de la mme structure. Si
nous augmentons les valeurs de luminosit tout en passant les valeurs de teinte en ngatif,
nous saturons limage.

Vous trouverez, ci-aprs, diffrentes variations du filtre colorimtrique en fonction du type
de rglage voulu.
Filtre ngatif (voir Figure 11.14) :
v tableau1=tableau1.concat([-1,0,0,0,255]);
v tableau1=tableau1.concat([0,-1,0,0,255]);
v tableau1=tableau1.concat([0,0,-1,0,255]);
v tableau1=tableau1.concat([0,0,0,1,0]);
Figure 11.14
Aperu du filtre
ngatif.
Filtre Rouge :
v tableau1=tableau1.concat([0,-1,0,0,-255]);
v tableau1=tableau1.concat([0,0,-1,0,-255]);
Filtre Vert :
v tableau1=tableau1.concat([-1,0,0,0,-255]);
Filtre Bleu :
Pour dsigner des filtres de couleurs complmentaires RVB (ou primaires CMJ), inscrivez seu-
lement une valeur de luminosit ngative par tableau, au lieu de deux pour les filtres primaires :
Filtre Cyan (complmentaire du Rouge en RVB) :
Filtre Magenta (complmentaire du Vert en RVB) :
Filtre Jaune (complmentaire du Bleu en RVB) :
En appliquant des valeurs sur les autres paramtres de couleur, la place des 0 affichs
habituellement, nous dcalons radicalement les couleurs de limage dans le cercle chroma-
tique tout en prservant cependant leur luminosit :
Filtre mlangeur de couleurs :
Le site Zoneflash.net prsente les diffrents effets applicables travers la matrice de couleurs
ladresse suivante. Dautres tutoriels y sont galement disponibles et plutt bien documents : http://
www.zoneflash.net/tutoriaux/t038.php.

Dans notre exemple, le premier tableau applique une saturation en doublant les valeurs de
teinte (o coef1 vaut 2, soit 200 % de saturation). Pour compenser lassombrissement
obtenu de limage, nous rduisons galement sa luminosit (o coef255 vaut 100) :
var coef1:Number=2;
//
Le tableau est ensuite introduit en paramtre de la mthode ColorMatrixFilter pour en

faire un filtre colorimtrique. Pour appliquer le filtre colorimtrique une slection, nous
utilisons la proprit filters qui dsigne la matrice en question.
Le principe est le mme pour restaurer les valeurs colorimtriques initiales. Nous isolons
simplement laction du filtre dans une fonction, associe un vnement souris. Les para-
mtres du tableau reprennent alors des valeurs neutres :
// filtre restauration
var filtreNegatif:ColorMatrixFilter=new ColorMatrixFilter(tableau2);
//
restaurer_btn.addEventListener(MouseEvent.CLICK,appliquerFiltreNegatif);
function appliquerFiltreNegatif(evt:MouseEvent) {
contenu_mc.filters=[filtreNegatif];
}
Rsolution limite des images. Flash peut appliquer des filtres et traiter des images de rsolution
maximum de 16 777 216 pixels. Soit, pour une image de ratio 1 sur 4, faisant 8 192 pixels de large,
Flash peut traiter une hauteur maximale de 2 048 pixels.
Correction colorimtrique par lot
Dans le document "ch11_apiGraphisme_5.fla", sur la scne principale, apparat un Movie-

Clip qui contient plusieurs occurrences dun clip de forme graphique, importe dIllustrator
Figure 11.15
Aperu de la
scne principale,
image normale.
En publiant le document, un filtre applique dynamiquement un effet diffrent pour chaque

occurrence dobjet (voir Figure 11.16).
Figure 11.16
Aperu du
document publi,
filtre appliqu par
lot.
Dans le scnario, le calque contenu_mc accueille le MovieClip de toutes les occurrences

darbres (voir Figure 11.17).

Figure 11.17
Aperu du scna-
rio de la scne
principale.

//------------------- initialisation
//------------------- actions
//
var coef1:Number;
var coef255:int;
//
for (var i:Number=0; i<10; i++) {
coef1=i*-0.15;
coef255=i*2+50;
filtreSaturation=new ColorMatrixFilter(tableau1);
contenu_mc.getChildAt(i).filters=[filtreSaturation];
}
Ici, nous dfinissons les variables requises pour la gnration du filtre. la diffrence de la
section prcdente, nous isolons simplement le tableau et modifions dynamiquement ses
valeurs, en intgrant les donnes dans une boucle for. Il nous suffit alors de rcuprer la
valeur ditration (i) pour dmultiplier les valeurs passes en paramtre du filtre. Nous uti-
lisons galement i pour appliquer, dynamiquement, chaque filtre un objet du symbole
contenu_mc, par ordre de la liste daffichage (getChildAt(i)).
Correction colorimtrique par interpolation
Dans le document "ch11_apiGraphisme_6.fla", nous retrouvons la mme structure que dans

le document prcdent. En le publiant, un filtre sapplique dynamiquement, mais il volue
ici de manire autonome et en fonction de la position du pointeur en X (voir Figure 11.18).
Figure 11.18
Aperu du
document publi.
Dans la fentre de scnario, le calque actions affiche le code suivant :

//------------------- initialisation
//------------------- actions
//
var coef1:Number=-2;
var coef255:int=100;
//
addEventListener(Event.ENTER_FRAME,animerFiltre);
function animerFiltre (evt:Event) {
if (coef1<2) {
coef1=coef1+0.01;
}
coef255=100+(mouseX/30);
for (var i:Number=0; i<10; i++) {
filtreSaturation=new ColorMatrixFilter(tableau1);
contenu_mc.getChildAt(i).filters=[filtreSaturation];
}
}
Dans ce programme, nous plaons le filtre lintrieur dune fonction appele par un ges-
tionnaire de type ENTER_FRAME. Il nous est alors possible de modifier dynamiquement les
valeurs passes en paramtre du tableau de la matrice de couleurs.
La premire valeur, coef1, est modifie par incrmentation. Une condition dfinit une
limite cependant lincrmentation, de manire ce que la valeur nexcde pas 2 :

if (coef1<2) {
coef1=coef1+0.01;
}
La seconde valeur, coeff255, est modifie en fonction de la position du pointeur dans le

document :
coef255=100+(mouseX/30);
Animation de filtres. Reportez-vous galement au Chapitre 3 pour en savoir plus sur la gestion de
filtres avec des interpolations de type TweenMax.
retenir
Nous pouvons appliquer des filtres colorimtriques pour modifier ponctuellement les images dune
composition. Pour cela, nous utilisons la classe ColorMatrixFilter.
Il est possible dappliquer un filtre par lot, sur plusieurs occurrences dobjets, dynamiquement. Pour
cela, nous plaons le filtre dans une boucle for et utilisons la valeur ditration de i pour modifier
les paramtres du filtre et dfinir les objets modifier.
Il est possible danimer un filtre en le plaant directement dans un gestionnaire de type
ENTER_FRAME. Nous pouvons alors animer automatiquement le filtre par incrmentation de valeur,
mais aussi en fonction dautres paramtres comme la position du pointeur ou dun objet (type
curseur), par exemple.
Imprimer un document SWF

Vous pouvez imprimer directement tout type de contenu ds lors que celui-ci possde un
conteneur. Il suffit dinvoquer la mthode PrintJob() et de cibler le conteneur imprimer
pour lancer la fentre dimpression automatiquement.
Dans cette section, nous plaons des instructions dimpression, sur le document prcdent,
de manire imprimer limage affiche (voir Figure 11.19).
Figure 11.19
Aperu du
document publi
et excut pour
limpression.
Dans la scne principale du document "ch11_apiGraphisme_7.fla", nous distinguons le bouton

dimpression et le conteneur contenu_mc. Dans la fentre de scnario, ils sont toujours bien
rpartis vers les calques. Dans la fentre Actions, nous pouvons lire le code suivant :
//imprimer
imprimer_btn.addEventListener(MouseEvent.CLICK,imprimer);
function imprimer(evt:MouseEvent) {
var impression:PrintJob = new PrintJob();
if (impression.start()) {
if (contenu_mc.width>impression.pageWidth) {
contenu_mc.width=impression.pageWidth;
contenu_mc.scaleY=contenu_mc.scaleX;
}
impression.addPage(contenu_mc);
impression.send();
}
}
La classe dimpression emploie plusieurs mthodes. Dabord, nous ouvrons la bote de dia-
logue dimpression (start) et, seulement si celle-ci est rendue disponible par le systme
(if (impression.start()), alors, nous indiquons les pages imprimer.
Dans le bloc dinstructions, nous prcisons les dimensions dimpression en hauteur et en
largeur. Ces dimensions sont dfinies en pixels, bien que, en rgle gnrale, limpression se
mesure, elle, en points. Les dimensions de la zone imprimable sont dtectes automatique-
ment et ne peuvent tre modifies. Pour connatre les dimensions ces valeurs, nous utilisons
les proprits pageWidth et pageHeight, en lecture seule, sur lobjet PrintJob(impres-
sion.pageWidth).
En loccurrence, nous spcifions que si la largeur du contenu imprimer est suprieure celle
de la zone dimpression, alors, nous ladaptons la zone dimpression
(contenu_mc.width=impression.pageWidth). Afin de conserver toutefois lhomothtie du
contenu imprimer, nous ajoutons une instruction qui adapte galement lchelle de la hauteur
du contenu en fonction de sa nouvelle largeur (contenu_mc.scaleX=contenu_mc.scaleY).
Puis, laide de la mthode addpage(), nous spcifions le conteneur imprimer. Cette
mthode peut tre multiplie autant de fois que de conteneurs imprimer.
Le programme termine la gestion de limpression en envoyant le tout dans la file dattente
de limprimante, avec la mthode send().
La classe printJob permet dimprimer des conteneurs, mais aussi des zones bitmap telles
que nous les avons dfinies dans ce chapitre. Il suffit alors de remplacer le nom du conteneur
par lobjet Bitmap imprimer.
Options dimpression. Pour le dtail des commandes lies limpression de documents SWF (mise
lchelle, gestion des pages, affichage horizontal ou vertical), consultez aussi laide en ligne, pour
une fois, limpide ce sujet : http://livedocs.adobe.com/flash/9.0_fr/ActionScriptLangRefV3/
flash/printing/PrintJob.html.

retenir
Il est possible dimprimer un contenu Flash, mme isol dans un symbole, y compris si celui-ci a t
modifi en ActionScript. Nous utilisons pour cela la classe printJob().
Lorsquun contenu est de dimension suprieure la zone dimpression, nous le redimensionnons
lchelle de la zone dimpression laide des proprits pageWidth ou pageHeight.
Appliquer une teinte alatoire

Dans de nombreuses circonstances, un contenu doit pouvoir changer de teinte, de manire
totalement opaque : convertir un bouton en lien visit, modifier la teinte dune rgion survo-
le dans une carte gographique interactive, mettre jour la couleur de lensemble des
textes dun site lorsquun nouveau thme artistique limpose.
Dans cette section, nous appliquons une couleur notre conteneur central en cliquant sur un
simple bouton. Nous spcifions, en outre, une valeur alatoire afin de dsigner une couleur
diffrente chaque clic (voir Figure 11.20).
Figure 11.20
Aperu du
document publi.
Le programme affich dans la fentre Actions est le suivant :

//teinter
teinte_btn.addEventListener(MouseEvent.CLICK,teinter);
function teinter (evt:MouseEvent) {
var teinte:ColorTransform = new ColorTransform ();

teinte.color=0xffffff*Math.random();
contenu_mc.transform.colorTransform=teinte;
}
En cliquant sur le bouton teinte_btn, nous crons une nouvelle variable teinte qui mat-
rialise un objet ColorTransform. Cest cet objet qui permet de vhiculer la teinte pour
lappliquer ensuite tout type de contenu.
Pour cet objet ColorTransform, nous modifions ensuite la proprit color, qui dsigne une
couleur hexadcimale.
Nous pourrions directement dfinir une couleur hexadcimale, mais nous la multiplions ici
par une valeur alatoire, gnre par la classe Math.random(), vue prcdemment.
Nous devons comprendre, au sujet de la valeur alatoire, quune couleur hexadcimale est
en fait une simple valeur numrique mme si elle semble compose de caractres alphanu-
mriques (voir note "Systme hexadcimal"). En la multipliant par une autre valeur numri-
que, nous modifions par consquent la teinte affiche. Notons galement que la valeur
utilise initialement est le blanc (ffffff), car le blanc dsigne la valeur numrique maxi-
male pour une teinte (255,255,255). En la multipliant par une valeur dcimale alatoire,
comprise entre 0 et 1, nous obtenons toutes les nuances de couleur comprises entre 0,0,0
(noir) et 255,255,255 (blanc). La valeur 0x indique, elle, au compilateur quil sagit dune
valeur hexadcimale. Cest prcisment ce qui lui permet de convertir une suite de lettres et
de chiffres en valeur numrique.
Systme hexadcimal. Les nombres sont gnralement cods en dcimal, cest--dire en base 10.
Les couleurs web sont, elles, codes en hexadcimal, soit sur une base 16 (ou 2 lev deux fois au
carr). Chaque valeur hexadcimale est donc une valeur numrique dfinie sur 16 nits. Les six
valeurs qui dpassent la dizaine sont simplement transcrites sous la forme de caractres texte, mais
leur valeur est bien numrique.
Pour terminer le programme, nous appliquons la teinte lobjet en utilisant la mthode

colorTransform() de la proprit transform. Cest la mthode colorTransform() qui
copie les pixels crs. La proprit transform les applique lobjet contenu_mc.
La classe ColorTransform peut aussi affecter une zone partielle de lobjet. Pour en savoir plus
sur cette option clairement expose ici, consultez aussi laide en ligne ladresse suivante :
http://help.adobe.com/fr_FR/AS3LCR/Flash_10.0/flash/display/BitmapData.html#color-
Transform().
retenir
Pour modifier intgralement la teinte dun objet, nous utilisons la classe colorTransform.
Pour modifier dynamiquement une valeur hexadcimale, il suffit de la multiplier par un coefficient
numrique.

Crer un puits de couleurs
Laffectation dune teinte un objet peut savrer utile si lon permet lutilisateur de pr-
lever lui-mme cette teinte sur un nuancier ou sur une image de son choix. Dans cet exemple,
nous plaons un nuancier sur la scne principale et nous permettons lutilisateur dy slec-
tionner une couleur. Aussitt la couleur active, lillustration laffiche (voir Figure 11.21).
Figure 11.21
Aperu du
document publi.
Dans ce document, la scne affiche un symbole contenu_mc qui contient une srie de Movie-
Clip. droite, hors champ, apparat un autre symbole nomm couleurs_mc. lintrieur, au
dernier niveau dimbrication, trois objets sont distinctement rpartis vers les calques.
larrire-plan, figure un rectangle transparent (de valeur alpha 0). Au-dessus, sur un troisime
calque, prend place la forme sur laquelle repose un nuancier de couleurs (voir Figure 11.22).
Figure 11.22
Nuancier
de couleurs.
Sur la scne principale, dans le calque actions (voir Figure 11.23), nous pouvons lire :
// affichage de la palette
var monImage:BitmapData=new
BitmapData(stage.stageWidth,stage.stageHeight,true,0x00000000);
monImage.draw(couleurs_mc.getChildAt(0));
var imageDepart:Bitmap=new Bitmap(monImage);
var capture:BitmapData=imageDepart.bitmapData;
var miroir:Bitmap=new Bitmap(capture);
addChild(miroir);
//zone cliquable
var initX:Number=couleurs_mc.zone_mc.nuancier_mc.x;
var initY:Number=couleurs_mc.zone_mc.nuancier_mc.y;
var initWidth:Number=couleurs_mc.zone_mc.nuancier_mc.width;
var initHeight:Number=couleurs_mc.zone_mc.nuancier_mc.height;
// application de la couleur choisie

addEventListener(MouseEvent.CLICK,pipette);
function pipette(evt:MouseEvent) {
if (mouseX>initX && mouseY>initY && mouseX<initX+initWidth && mouseY
<initY+initHeight) {
// capturer
var couleurDuPixel:uint=capture.getPixel(mouseX,mouseY);
var couleur:*="0x"+couleurDuPixel.toString(16);
// teinter
teinte.color=couleur;
}
}
Figure 11.23
Scnario de la
scne principale.
Pour comprendre le mcanisme dun puits de couleurs, nous devons savoir que la mthode
getPixel utilise pour prlever une couleur sur un objet, renvoie uniquement la couleur
dun objet BitmapData. Nous devons par consquent afficher cet objet avant de pouvoir y
rcuprer un pixel de couleur. Cest seulement ensuite que nous redistribuons le prl-
vement effectu sur un autre objet, grce un filtre de couleur.
Dans cet exemple, nous utilisons le pointeur de la souris, pour cibler la couleur prlever.
Les premires lignes de code activent lobjet BitmapData qui copie le contenu graphique
du symbole couleurs_mc situ hors champs. Limage capture est raffecte un nouvel
objet Bitmap ajout la liste daffichage, au point dorigine du document :

// affichage de la palette
var monImage:BitmapData=new
BitmapData(stage.stageWidth,stage.stageHeight,true,0x00000000);
monImage.draw(couleurs_mc.getChildAt(0));
var imageDepart:Bitmap=new Bitmap(monImage);
var capture:BitmapData=imageDepart.bitmapData;
var miroir:Bitmap=new Bitmap(capture);
addChild(miroir);
Il est important de souligner que la zone daffectation du BitmapData est dfinie par les
deux premires valeurs de la mthode BitmapData. Ainsi, pour rduire ou modifier la zone
daffichage du puits de couleurs, vous devez modifier galement ces valeurs.
Dans la suite du code, nous dfinissons la zone daction pour le prlvement de la couleur.
Cette zone reprend les coordonnes exactes et les dimensions du nuancier :
//zone cliquable
var initX:Number=couleurs_mc.zone_mc.nuancier_mc.x;
var initY:Number=couleurs_mc.zone_mc.nuancier_mc.y;
var initWidth:Number=couleurs_mc.zone_mc.nuancier_mc.width;
var initHeight:Number=couleurs_mc.zone_mc.nuancier_mc.height;
Enfin, apparat la fonction pipette qui excute le prlvement et laffectation de la

couleur :
// application de la couleur choisie
addEventListener(MouseEvent.CLICK,pipette);
function pipette(evt:MouseEvent) {
if (mouseX>initX && mouseY>initY && mouseX<initX+initWidth &&mouseY
<initY+initHeight) {
// capturer
var couleurDuPixel:uint=capture.getPixel(mouseX,mouseY);
var couleur:*="0x"+couleurDuPixel.toString(16);
// teinter
teinte.color=couleur;
}
}
Dans la fonction pipette, nous commenons par capturer la teinte sur la zone dfinie par
lobjet BitmapData, et donc, par le nuancier, grce la mthode getPixel(). En paramtre
de cette mthode, nous spcifions les coordonnes du pointeur au moment du clic (mouseX
et mouseY).
La mthode getPixel() prlve une couleur dfinie en RVB. Pour affecter cette valeur
un filtre colorimtrique, nous devons la convertir dabord en valeur hexadcimale.
La deuxime instruction enregistre donc cette valeur RVB en la prcdant des caractres
zro et x, qui dsignent, en ActionScript, une valeur hexadcimale. Afin de convertir la
valeur RVB en valeur galement hexadcimale (en base de 16), nous utilisons le transty-
page toString(16).
La seconde partie de cette fonction emploie la mthode ColorTransform que nous connaissons
dj, et applique la teinte lobjet contenu_mc, prsent sur la scne.
retenir
Pour prlever une couleur, nous utilisons la mthode getPixel() qui fonctionne avec un objet
BitampData.
Pour que la couleur prleve corresponde lendroit cliqu, nous passons, en paramtre de la
mthode getPixel, les coordonnes X et Y du pointeur.
Pour affecter enfin la teinte un objet, nous appliquons le filtre colorimtrique ColorTransform.
Synthse
Dans ce chapitre, vous avez appris modifier intrinsquement le contenu graphique des
images et des formes vectorielles. Vous avez appris optimiser la gestion de contenus gra-
phiques en dclinant certains objets par simple modification de couleur. Vous avez appris
recrer des effets doptique dformante et lisser les images affiches, mme lorsquelles
sont interpoles. Vous avez enfin appris raliser des animations de filtres en vue la cration
de systmes graphiques labors.
Vous savez dsormais traiter les images de faon les valoriser et vous disposez doutils
dclinables dans des interpolations animes (galeries dimages) ou pour des mises en forme
plus spcifiques, comme celle aborde au prochain chapitre.
Le Web en vrai relief

12
Introduction
Limpression de relief est cre par le cerveau. Il analyse les deux images reues par chaque
il et reconstitue le volume en superposant ces deux images. Pour crer des images en
relief, nous devons donc organiser laffichage de sorte que le cerveau puisse lire deux sources
dimages distinctes, dans un temps donn, le plus court possible.
Il existe diffrentes techniques de montage en relief. La plus accessible, tous supports
confondus, demeure la technique de lanaglyphe. Lanaglyphe se caractrise par la cration
dune image compose de couches spares : dune part, le rouge et dautre part, le vert et
bleu. Le rouge est dissoci du vert et du bleu qui eux, restent superposs. Cette technique
implique certes lutilisation de lunettes rouges et bleues (ou rouges et vertes) pour linter-
prter, mais peut se dployer aussi bien sur un cran vido, informatique, cinma, que sur le
papier (exemples danaglyphes : http://www.dailymotion.com/video/xb6ez7_visitez-
paris-en-3d-16_creation).
Les autres techniques demeurent plus complexes et sont gnralement rserves des dis-
positifs plus lourds mettre en uvre, mais qui rpondent une exigence manifeste sur le
choix et la qualit des couleurs. Ainsi, sont galement rencontres :
La technique des lunettes passives. Elle consiste employer une paire de lunettes
dont chaque verre affiche une trame soit horizontale soit verticale. Limage projete est
dissocie travers lutilisation de deux projecteurs. Chacun affiche une image pour une
trame donne, en reproduisant la trame correspondant lil vis.
La technique des lunettes actives. Elle consiste placer un cran translucide cris-
taux liquides devant chaque il. Contrl par un systme de laser qui les relie lcran,
chaque verre alterne le passage de la lumire pour ne laisser passer que limage qui cor-
respond lil vis. Limage est synchrone avec le rythme de balayage de la lunette.
Ces lunettes requirent une lgre alimentation lectrique gnralement assume par
lutilisation de piles. Cette technique est favorise dans la production audiovisuelle car
elle ne limite pas le choix des couleurs lors de la capture, contrairement lanaglyphe
pour lequel ce qui est trop rouge ou trop bleu, du fait du principe de couches spares,
ne peut tre trait en relief.
La technique du rseau lenticulaire. Cette technique ne requiert pas de lunettes. Il
sagit de placer sur un cran une couche uniforme de lentilles convexes trs fines, col-
les les unes la suite des autres. Limage affiche est dcompose en fines trames rai-
son de 8 12 trames diffrentes par lentille. Il faut donc capturer 8 12 images pour
reconstituer un volume. Cest en se dplaant le long de lcran lenticulaire que le
volume seulement rapparat, et une distance bien dfinie. Ce dispositif complexe
nest utilis que pour les images fixes dans des zones dexposition faible recul et pour
des usagers en mouvement (vitrines, galeries ou salons).
Dans ce chapitre, nous abordons la cration dimages en relief de type anaglyphe, avec Photos-
hop, puis, la gestion de laffichage de ces images en ActionScript. Nous prsentons, en fin de
chapitre, un moteur de rendu en relief, entirement dynamique, qui permet de convertir
automatiquement en vritable objet en relief tout objet plac dans un espace 3D dans Flash.
Pour tudier les exemples de ce chapitre, il est recommand de disposer de lunettes pour
anaglyphes, films rouge et bleu, disponibles dans votre kiosque, chez votre marchand de
jouet ou sur Internet. Certains opticiens et photographes proposent galement ce type
dquipement (voir aussi http://www.alpes-stereo.com/lunettes.html).
Prise de vues pour le relief

Pour crer un affichage en relief avec un effet le plus prcis possible, nous devons prendre
en compte un certain nombre dlments. Dans le cadre de ce chapitre, nous en voquons
seulement les grands principes. Pour connatre les techniques de cration dimages en relief
de manire dtaille, consultez le site de David Romeuf : http://www.david-romeuf.fr, trs
largement document sur le sujet.
Pour vous aider considrer toutefois certains principes lmentaires, inhrents la cration
dimages en relief, voici quelques recommandations :
Vous devez dabord disposer de deux images du mme sujet, mais vous devez dcaler le
point de vue de chacune par rapport lautre. Vous reconstituez ainsi le point de vue des
yeux qui est lorigine de la vision en relief.
Lors de la prise de vue photographique, la distance entre les deux points de vue, pour
reconstituer un tel effet, doit tre directement proportionnelle la distance entre
lobturateur et le sujet vis. Ainsi, si vous photographiez un sujet de prs, la distance
entre les deux points de vue doit tre gale la distance entre deux pupilles dil
humain (6 10 cm). Si vous capturez, en revanche, un paysage lointain (une monta-
gne, une architecture, un volume paysag ou urbain), vous devez sparer les points de
vue de plusieurs dizaines de centimtres, voir denviron un mtre pour les grands pay-
sages (voir Figure 12.1).
Figure 12.1
Distance entre les
points de prise de
vue.
Capteur A Capteur B Capteur A Capteur B

7 cm 100 cm
LE WEB EN VRAI RELIEF 363

Dans la conception dune image anaglyphe pour le relief, nous devons galement viter de
capturer des objets dominante colore proche de celle de lune des deux lentilles. Un objet
de couleur rouge, par exemple, ne pourrait tre peru par lune des deux lentilles et son
volume ne pourrait donc pas tre reconstitu. vitez, par consquent, la mise en scne
dobjets rouges et bleus, si vous travaillez avec la technique de lanaglyphe,
Pour raliser un anaglyphe, nous dcalons dabord les couches de couleurs rouge, vert et
bleu, dans Photoshop. Une fois limage exporte pour le Web, nous pouvons en contrler
laffichage, dans Flash, avec ActionScript.
Raliser un anaglyphe avec Photoshop

Dans cette section, nous allons dabord comprendre le principe de limage jaillissante ou
fentre, partir dune image simple. Puis, nous verrons comment convertir deux prises de
vue spares, en un seul anaglyphe, laide de Photoshop.
Le principe de limage jaillissante ou fentre

Dans une image en relief, nous distinguons trois zones. La zone cadre, la zone jaillissante et
la zone fentre (voir Figure 12.2).
Figure 12.2 Zone Fentre

Dfinition des
zones daffichage Zone Cadre
pour le relief.
Zone Jaillissante
La zone cadre reprsente la partie sans relief de limage. La zone jaillissante est la partie qui
se place devant le cadre, cest--dire, la partie de limage qui sort de lcran, au premier
plan. La partie fentre reprsente la partie situe larrire-plan du cadre, cest--dire, la
partie en retrait et situe en profondeur de lcran.
Le principe des trois zones est important, car selon la manire dont nous crons lanaglyphe
dans Photoshop, selon le type de dcalage apport la couche de couleur rouge, nous pou-
vons choisir si limage sera place en retrait (fentre) ou en avant (jaillissante) (voir
Figure 12.3 et 12.4).
Figure 12.3
Anaglyphe
fentre.
Figure 12.4
Anaglyphe
jaillissant.
Dans cette section, nous allons convertir une image initialement "plate", en image fentre,
puis en image jaillissante. Il nest pas ncessaire de disposer de deux images spcifiques
pour le relief pour effectuer cette manipulation. Toute limage sera simplement projete
dans son intgralit, soit vers larrire, soit vers lavant. Sur ce principe, nous pouvons donc
dj imaginer pouvoir composer assez simplement, avec Photoshop, des images en relief
partir dobjets 2D dtours, sur des plans dissocis. Nous abordons cette technique un peu
plus loin dans ce chapitre.

La zone fentre
Dans cette section, nous allons voir comment raliser une image de type fentre.
Exemples > relief > Lacoste.jpg
1. Lancez Photoshop.
2. Ouvrez le document "Lacoste.jpg", situ dans le dossier "relief" des exemples du livre.
Cette image est normale et naffiche pas de relief. Elle est en RVB et son unique calque
est aplati (voir Figure 12.5).
Figure 12.5
Aperu de limage
Lacoste.jpg.
3. Affichez la fentre Couches en droulant le menu Fentre > Couches (voir Figure 12.6).
Figure 12.6
Fentre Couches.
La fentre affiche un aperu des composantes colorimtriques de limage, travers dif-

frentes couches RVB. La couche RVB affiche les composantes de limage dans sa glo-
balit. Les couches R, V et B affichent respectivement les couleurs rouge, vert et bleu
de limage. Vous pouvez cliquer sur chacune dentre elles pour en distinguer les pro-
prits.
Nous allons dplacer la couche Rouge gauche, dune dizaine de pixels, pour faire sortir
limage de la zone cadre et crer un effet Fentre.
1. Cliquez sur la couche Rouge. Elle est active. Les autres couches sont masques. Dans
limage, la luminosit des valeurs de rouge est matrialise en noir et blanc (voir
Figure 12.7).
Figure 12.7
Activation de la
couche Rouge.
2. Pour dplacer la couche de 10 pixels vers la gauche, utilisez loutil de dplacement

(raccourci V). Slectionnez tous les pixels de la couche en faisant Ctrl+A (Windows) ou
Cmd+A (Mac).
3. Puis, appuyez simultanment sur la touche Maj+Flche gauche du clavier. La couche
Rouge est aussitt dplace de 10 pixels vers la gauche.
4. Dsactivez la slection en faisant Ctrl+D (Windows) ou Cmd+D (Mac).
5. Cliquez nouveau sur la couche intitule RVB pour afficher lintgralit de limage.
Limage en couleur affiche dsormais un dcalage entre le rouge et les composantes vert
et bleu. Limage obtenue est un anaglyphe (voir Figure 12.8).

Figure 12.8
Aperu
de lanaglyphe.
6. Recadrez ventuellement limage pour supprimer la marge situe droite.

7. Puis, observez limage laide de lunettes rouge et bleue, en prenant soin de placer le
filtre rouge sur lil gauche.
Vous pouvez maintenant voir une image projete lintrieur de lcran, dans la zone fentre.
La zone jaillissante
Dans cette section, nous allons voir comment raliser une image de type jaillissante.
Exemples > relief > Lacoste-chien.psd
Le principe pour crer un volume jaillissant est identique celui utilis pour le mode Fen-
tre, sauf que nous dplaons la couche Rouge vers la droite afin de projeter limage en pre-
mier plan. Notez cependant que, parce que notre cerveau les analyse ainsi, leffet jaillissant
ne fonctionne quavec des lments qui reprsentent des formes en volume, et non en pro-
fondeur comme cette ruelle reprsente ici. Pour que leffet fonctionne en mode jaillissant,
nous utilisons donc, dans notre exemple, un sujet dtour qui sera positionn au premier
plan.
1. Ouvrez le fichier Lacoste-chien.psd (voir Figure 12.9).
Figure 12.9
Aperu du
document
Lacoste-
chien.psd.
2. Activez le calque du chien.

3. Directement, dans la fentre Couches, cliquez sur la couche Rouge.
4. Slectionnez tous les pixels (Ctrl+A pour Windows ou Cmd+A pour Mac) et dplacez-
les de 10 pixels vers la droite laide de loutil Flche et dplacement (raccourci V).
Vous remarquez que le dplacement gnre une frange blanche de 10 pixels gauche
du sujet (voir Figure 12.10).
Figure 12.10
Frange gauche
du sujet.

Nous pouvons la supprimer en gommant directement sur toutes les couches du calque
chien en mme temps.
5. Intervertissez la slection encore active en faisant Ctrl+Maj+i (Windows) ou
Cmd+Maj+i (Mac).
6. Cliquez dabord sur la couche RVB pour atteindre lensemble des composantes colori-
mtriques du calque.
7. Slectionnez loutil Gomme raccourci E, comme Erase qui signifie gommer en
anglais (voir Figure 12.11).
Figure 12.11
Slection de loutil
Gomme.
8. Puis, gommez la partie gauche du calque chien, matrialise prsent en rouge (voir
Figure 12.12).
Figure 12.12
Gommage de la
frange gauche.
9. Une fois la frange supprime, dsactivez la slection en faisant Ctrl+D (Windows) ou

Cmd+D (Mac).
10. Reprenez les lunettes rouge et bleue. Placez-vous plus dun mtre de votre cran. Le
chien semble sortir de lcran tandis que la ruelle se prolonge en profondeur (voir
Figure 12.13).
Figure 12.13
Reconstitution du
rsultat obtenu.
Cette composition est affiche en relief, bien que chaque sujet ne soit pas captur en relief.
Seuls les plans sur lesquels sont disposs les objets sont en relief. Pour raliser un vritable
anaglyphe en relief, vous devez utiliser deux images qui reprsentent le mme sujet, mais
pris quelques centimtres de dcalage.
Crer lanaglyphe partir de deux images

Nous abordons ici la cration de lanaglyphe, dans Photoshop, partir de deux images
prises sur le mme sujet avec un intervalle de 10 cm.
Exemples > relief > relief.psd
Ouvrez le document "relief.psd". La composition reprsente quelques fruits disposs autour

dun mug th. La fentre des calques (Fentre > Calques) affiche deux images. Le calque
du haut reprsente une prise de vue effectue au niveau de lil droit (voir Figure 12.14).
Celui du bas reprsente le point de vue de lil gauche (voir Figure 12.15).

Figure 12.14
Aperu du calque
il droit.
Figure 12.15
Aperu du calque
il gauche.
Pour raliser un anaglyphe partir de deux images, nous plaons les informations de la cou-
che Rouge dune premire image la place des informations de la couche Rouge de la
seconde :
1. Affichez la fentre Couches et cliquez directement sur la couche Rouge. Puis, slection-
nez tous les pixels de la couche en faisant Ctrl+A sous Windows, ou Cmd+A sous Mac
Figure 12.16
Slection de la
couche Rouge.
2. Faites Ctrl+C (Windows) ou Cmd+C (Mac) pour copier la couche Rouge.

3. Revenez dans la fentre des calques et activez maintenant lautre calque"photo il gau-
che". Pour voir ce calque plac, masquez le calque prcdent, situ au sommet la fentre
des calques (voir Figure 12.17).
Figure 12.17
Isolement du
calque il
gauche.
4. Revenez dans la fentre Couches et cliquez sur la couche Rouge pour lactiver.
5. Slectionnez toute la couche en faisant Ctrl+A (Windows) ou Cmd+A (Mac).
6. Puis, collez les informations Rouges du calque prcdent en faisant Ctrl+V (Windows)
ou Cmd+V (Mac).
7. Activez enfin la couche globale RVB de ce calque pour en visualiser le rendu (voir
Figure 12.18).
La nouvelle couche Rouge est bien applique au document. Mais elle est trop dcale
par rapport limage de gauche. Pour que le relief prenne, nous devons rapprocher les
lments. laide de loutil de dplacement (raccourci V), dplacez la couche Rouge
de 10 ou 20 pixels pour la recentrer (voir Figure 12.19).

Figure 12.18
Placement de la
nouvelle couche
Rouge.
Figure 12.19
Recentrage
de la couche
Rouge.
Limage est prte tre recadre. Elle mesure 1 024 768 pixels. Nous allons la
recadrer afin quelle occupe les mmes dimensions que celles de notre document
Flash :
8. Activez loutil de recadrage raccourci C, comme Crop qui signifie rogner en anglais
Figure 12.20
Slection de loutil
de recadrage.
9. Dans les options, situes au sommet de linterface de Photoshop, sous la barre de menu,
inscrivez les valeurs : 800px, 530px et 72dpi (voir Figure 12.21).
Figure 12.21
Options
de recadrage.
10. Recadrez limage en centrant approximativement le sujet. Puis validez en cliquant sur
Entre (voir Figure 12.22).
Figure 12.22
Aperu de la zone
de recadrage.
11. Une fois limage recadre, vous pouvez aussi laplatir. Faites Calques > Aplatir limage.
12. Puis exportez pour le Web en faisant Fichier > Enregistrer pour le Web et les priphri-
ques. Choisissez une option de compression JPEG de qualit suprieure ou gale 60
(voir Figure 12.23). Puis confirmez lenregistrement.

Figure 12.23
Aperu de la
fentre denregis-
trement pour le
Web.
Limage est prte tre importe dans Flash.
Grer un anaglyphe en ActionScript

Lintgration dun anaglyphe dans Flash est relativement simple puisquil suffit dimporter
limage dans la scne. Mais il convient aussi de bien situer le type dimage dont nous dispo-
sons selon le contexte dexcution. Si vous affichez une image jaillissante, il faut naturelle-
ment la placer de prfrence au sommet de la liste daffichage ou sur un calque plac au-
dessus des autres. Inversement, si limage est de type fentre, vous la placerez larrire des
autres objets de la scne.
Cela signifie aussi que pour une image jaillissante, dans un contexte de scne en 3D, vous
lui affecterez un index z paradoxalement infrieur 0. Pour un type fentre, vous applique-
rez un index z suprieur 0. Dans Flash, nous rappelons le z augmente en allant vers le
fond, tandis quil prend une valeur ngative ds quil se rapproche de lcran. Plus lobjet
est proche de lcran et au premier plan, plus son index z diminue.
Exemples > ch11_vraiRelief_1.fla
Dans le document "ch11_vrairelief_1.fla", sur la scne, nous pouvons voir un MovieClip

qui contient deux images. Une image classique est place sur limage 1 du scnario. La ver-
sion en relief est place sur limage 2. Au-dessus, sur la scne principale, un bouton en
forme de lunette 3D permet de basculer de lune lautre.
En publiant le document, quand nous cliquons sur les lunettes, limage en relief remplace
effectivement limage normale (voir Figure 12.24).
Figure 12.24
Aperu du
document.
Dans la fentre de scnario, au-dessus du calque Actions, nous distinguons le MovieClip

composition_mc du bouton relief_btn (voir Figure 12.25).
Figure 12.25
Aperu de la
fentre de
scnario.
Dans la fentre Actions, apparat le code suivant :

composition_mc.stop();
//
relief_btn.addEventListener(MouseEvent.CLICK,basculerEnRelief);
function basculerEnRelief (evt:MouseEvent) {
if (composition_mc.currentFrame==1) {
composition_mc.nextFrame();
}else {
composition_mc.prevFrame();
}
}
Dans ce programme, nous plaons un stop au dbut du MovieClip qui contient les deux
images afin dviter quune animation ne se produise.

Plus bas, un couteur, attach au bouton relief_btn, lance le changement dimage en
fonction de celle qui est active. Limage active est dtecte, elle, grce la mthode current-
Frame().
Dans cette condition, si limage active est la premire, nous basculons vers la seconde avec
la mthode nextFrame() qui dsigne limage suivante. Nous revenons, en revanche, la
premire image si cest la seconde qui est identifie, avec la mthode prevFrame() qui
dsigne limage prcdente.
La vido en relief. La technique du relief peut galement tre applique un flux vido. Pour cela,
vous devez disposer soit dune composition vido plusieurs calques et dplacer la couche Rouge de
chaque calque gauche ou droite en fonction de leffet souhait (avec After Effects ou Motion par
exemple). Soit vous devez partir de deux flux vido distincts, reprsentant le point de vis des deux
yeux, comme pour des images fixes, et fusionner le tout en un seul flux en prenant la couche rouge
de lun que vous placez la place de la couche rouge de lautre.
Dans After Effects, utilisez leffet Perspective > Lunette 3D pour regrouper les flux vido. Dans les
rglages deffets, source G dsigne le point de vue de lil gauche, source D, le point de vue de lil
droit. Balance couleur Rouge Bleu signifie vision 3D. Ajustez le Dcalage de convergence (normale-
ment, si les vidos sont bien tournes, la valeur est proche de zro). Ajustez la Balance en fonction de
la densit des lunettes (mesurable chez votre opticien). Puis, exportez la vido obtenue en F4V ou en
FLV et intgrez-la simplement avec un composant FLVPlayBack, comme vu au Chapitre 7.
retenir
Pour crer une image en relief, nous devons reproduire la vision humaine en capturant deux images
dont les points de vis sont distants, lun de lautre, denviron 6,5 cm pour un sujet proche, prs
d1 mtre pour un grand paysage.
Nous devons copier la couche Rouge dune image pour remplacer celle de lautre.
Limage devient de type fentre ds lors que la couche Rouge est situe gauche.
Limage devient jaillissante ds que la couche Rouge est place sur la droite.
Il est possible de raliser des images en relief partir dimages classiques. Pour cela, nous dtourons
chaque sujet et dcalons la position de sa couche par rapport aux couches Rouge des autres cal-
ques de la composition.
Il est possible, en ActionScript, de dtecter la position courante dune image de scnario, grce la
mthode currentTarget().
Interface SWF en relief dynamique

Nous venons de voir comment se constitue un contenu en relief. Au chapitre prcdent,
nous avons vu comment agir sur les couches RVB et Alpha dune image, dynamiquement.
Prcdemment encore, nous avons abord la gestion de la 3D avec lindex z. En combinant
toutes ces techniques, nous pouvons construire une interface 3D en relief dynamique.
Le principe de linterface en relief dynamique est de permettre le positionnement dobjets

(textes, images, formes graphiques) dans un conteneur et de leur attribuer, pour chacun
dentre eux, un index z. En publiant le document, les couches Rouge, Vert et Bleu sont auto-
matiquement spares en fonction de la profondeur de z.
Dans cette section, nous allons tudier le mcanisme dun moteur de rendu dobjets en vrai
relief.
Exemples > ch12_vraiRelief_2.fla
Dans le document "ch12_vrairelief_2.fla", sur la scne principale, apparat un MovieClip

composition_mc, lintrieur duquel sont positionns des symboles. Ces symboles sont
rpartis de sorte que celui qui doit apparatre au premier plan est situ naturellement au-des-
sus des autres. Dans le code du calque Actions, que nous allons voir, un index z est gale-
ment attribu pour chacun dentre eux (voir Figure 12.26). Noubliez pas que pour quun
objet puisse disposer dun index z, celui-ci doit tre un MovieClip.
Figure 12.26
Aperu de la
scne principale.
Lorsque le document est publi, si le bouton relief_btn situ droite de lcran est activ, la
composition bascule presque instantanment en vrai relief. Le dcalage de la couche Rouge est
directement proportionnel la position de lobjet sur lindex z (voir Figure 12.27).
Dans la fentre de scnario du document, au-dessus du calque fond_mc, sont rpartis : le
symbole composition_mc, qui affiche tous les lments projeter en relief ; au-dessus, le
symbole zoneDepotRelief_mc, qui contient les objets utiliss par le moteur de relief ; ainsi
que le bouton relief_btn (voir Figure 12.28).

Figure 12.27
Aperu du
document publi,
avec loption relief
active.
Figure 12.28
Scnario de la
scne principale.

//------------------- personnalisation
var echelleZ:Number=400;
var echelleRelief:Number=0.015;
//
function indexZ() {
// toujours <0
composition_mc.p1_mc.z=-700;
}
function basculerEnRelief(evt:MouseEvent) {
composition_mc.visible=false;
moteurRelief();
}
//
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++/
//+++++++++++++++++++ MOTEUR RELIEF (Arzhur CAOUISSIN) +++++++++++++++++++++//
//
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
// tableauRouge
var tableauRouge:Array = new Array();
var filtreRouge:ColorMatrixFilter=new ColorMatrixFilter(tableauRouge);
tableauRouge = new Array();
tableauRouge=tableauRouge.concat([-1,0,0,0,255]);
tableauRouge=tableauRouge.concat([0,-1,0,0,0]);
tableauRouge=tableauRouge.concat([0,0,-1,0,0]);
tableauRouge=tableauRouge.concat([0,0,0,1,0]);
filtreRouge=new ColorMatrixFilter(tableauRouge);
// tableauVert
var tableauVert:Array = new Array();
var filtreVert:ColorMatrixFilter=new ColorMatrixFilter(tableauVert);
tableauVert = new Array();
tableauVert=tableauVert.concat([-1,0,0,0,0]);
tableauVert=tableauVert.concat([0,-1,0,0,255]);
tableauVert=tableauVert.concat([0,0,-1,0,0]);
tableauVert=tableauVert.concat([0,0,0,1,0]);
filtreVert=new ColorMatrixFilter(tableauVert);
// tableauBleu
var tableauBleu:Array = new Array();
var filtreBleu:ColorMatrixFilter=new ColorMatrixFilter(tableauBleu);
tableauBleu = new Array();
tableauBleu=tableauBleu.concat([-1,0,0,0,0]);
tableauBleu=tableauBleu.concat([0,-1,0,0,0]);
tableauBleu=tableauBleu.concat([0,0,-1,0,255]);
tableauBleu=tableauBleu.concat([0,0,0,1,0]);
filtreBleu=new ColorMatrixFilter(tableauBleu);
// tableauNoir
var tableauNoir:Array = new Array();
var filtreNoir:ColorMatrixFilter=new ColorMatrixFilter(tableauNoir);
tableauNoir = new Array();
tableauNoir=tableauNoir.concat([-1,0,0,0,0]);
tableauNoir=tableauNoir.concat([0,-1,0,0,0]);
tableauNoir=tableauNoir.concat([0,0,-1,0,0]);
tableauNoir=tableauNoir.concat([0,0,0,1,0]);
filtreNoir=new ColorMatrixFilter(tableauNoir);
//+++++++++++++++++++++++++++++++++++++++
var largeurDonnees:Array=new Array();

var hauteurDonnees:Array=new Array();
function moteurRelief() {
for (var i:Number=0; i<composition_mc.numChildren; i++) {
largeurDonnees.push(composition_mc.getChildAt(i).width);
hauteurDonnees.push(composition_mc.getChildAt(i).height);
//
if (i==composition_mc.numChildren-1) {
var boucle:Timer=new Timer(500,1);
boucle.start();
indexZ();

}
}
}
affichageRelief();
}
function affichageRelief() {
//
var enveloppeImage:BitmapData=new BitmapData(800,600,false,0x00000000);
enveloppeImage.draw(composition_mc.getChildAt(i));
var pixelsImage:Bitmap=new Bitmap(enveloppeImage);
var capture:BitmapData=pixelsImage.bitmapData;
//
var bitmapR:BitmapData=new BitmapData(largeurDonnees[i],
hauteurDonnees[i],true,0x000000);
var bitmapV:BitmapData=new BitmapData(largeurDonnees[i],
var bitmapB:BitmapData=new BitmapData(largeurDonnees[i],
var bitmapA:BitmapData=new BitmapData(largeurDonnees[i],
//
var imageR:Bitmap=new Bitmap(bitmapR);
var imageV:Bitmap=new Bitmap(bitmapV);
var imageB:Bitmap=new Bitmap(bitmapB);
var imageA:Bitmap=new Bitmap(bitmapA);
//
bitmapR.copyChannel(capture, capture.rect, new Point(0,0),
BitmapDataChannel.RED, BitmapDataChannel.ALPHA);
bitmapV.copyChannel(capture, capture.rect, new Point(0,0),
BitmapDataChannel.GREEN, BitmapDataChannel.ALPHA);
bitmapB.copyChannel(capture, capture.rect, new Point(0,0),
BitmapDataChannel.BLUE, BitmapDataChannel.ALPHA);
bitmapA.copyChannel(capture, capture.rect, new Point(0,0),
BitmapDataChannel.ALPHA, BitmapDataChannel.ALPHA);
//
imageR.filters=[filtreRouge];
imageV.filters=[filtreVert];
imageB.filters=[filtreBleu];
imageA.filters=[filtreNoir];
//
var AffichageRelief:MovieClip=new ZoneAffichageRelief();
zoneDepotRelief_mc.addChildAt(AffichageRelief,i);
// la couche RVB
AffichageRelief.coucheAlpha_mc.addChild(imageA);
imageA.x=composition_mc.getChildAt(i).x;
imageA.y=composition_mc.getChildAt(i).y;
// la couche Rouge
AffichageRelief.coucheRouge_mc.addChild(imageR);
imageR.x=composition_mc.getChildAt(i).x+(composition_mc.getChildAt(i).z)
*echelleRelief;
imageR.y=composition_mc.getChildAt(i).y;
// la couche Bleu
AffichageRelief.coucheVerte_mc.addChild(imageV);
imageV.x=composition_mc.getChildAt(i).x;
imageV.y=composition_mc.getChildAt(i).y;
// la couche Bleu
AffichageRelief.coucheBleue_mc.addChild(imageB);
imageB.x=composition_mc.getChildAt(i).x;
imageB.y=composition_mc.getChildAt(i).y;
//
imageR.scaleX=(composition_mc.getChildAt(i).z)/echelleZ;
imageR.scaleY=(composition_mc.getChildAt(i).z)/echelleZ;
imageV.scaleX=(composition_mc.getChildAt(i).z)/echelleZ;
imageV.scaleY=(composition_mc.getChildAt(i).z)/echelleZ;
imageB.scaleX=(composition_mc.getChildAt(i).z)/echelleZ;
imageB.scaleY=(composition_mc.getChildAt(i).z)/echelleZ;
imageA.scaleX=(composition_mc.getChildAt(i).z)/echelleZ;
imageA.scaleY=(composition_mc.getChildAt(i).z)/echelleZ;
}
}
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
//
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
Le systme est scind en deux parties. La premire donne accs aux lments personnalisa-
bles directement en rapport avec les objets disposs dans la scne. La seconde constitue le
moteur de rendu en relief.
Dans la premire partie, nous dfinissons dabord les cfficients de dformation utiliss par
le moteur :
Le moteur fonctionne de la manire suivante. Nous plaons des objets dans lespace 3D
lintrieur du symbole composition_mc. Limage projete par ce conteneur est alors copie
en ActionScript, puis traite, avant dtre redistribue sur un autre conteneur :
zoneDepotRelief_mc. Pendant le traitement, les couches sont spares et lune dentre
elles, la Rouge, est dcale.
Une fois le traitement termin, les couches sont distribues dans un MovieClip plac dyna-
miquement en ActionScript, partir dune occurrence exporte de la bibliothque. Cette
occurrence contient quatre MovieClip destins respectivement pour chacune des quatre
composantes de couleur Rouge, Vert, Bleu et Alpha.
Afin que les couches colorimtriques fusionnent correctement, nous avons appliqu, sur les
deux premiers MovieClip, une proprit daffichage de type Ajout (cest un mode de fusion
accessible depuis linspecteur de proprits). Ainsi, lorsque les trois couches RVB sont
superposes, sans dcalage, limage est entirement reconstitue. Mais, pour reconstituer
leffet de relief, nous conservons naturellement le dcalage de la couche Rouge.
Le symbole AffichageRelief, disponible dans la bibliothque, est export pour Action-
Script avec le nom de classe ZoneAffichageRelief. Cest lui qui sera distribu dans le
symbole zoneDepotRelief_mc, autant de fois que dobjets reconstituer.

Exporter un symbole pour ActionScript
Le langage
Pour exporter un symbole pour ActionScript en vu de raliser un interfaage dynamique, dans la

bibliothque (Ctrl+L pour Windows ou Cmd+L pour Mac), directement sur lobjet exporter, faites
clic-droit > Proprits. Puis, dans la bote de dialogue, cochez la case Exporter pour ActionScript.
Attribuez ensuite un nom de classe lobjet sans caractre spcial, ni accent, espace ou signe parti-
culier. En validant, le player fabriquera pour nous cette classe la vole si celle-ci nexiste pas.
La variable echelleZ permet de retranscrire lchelle de dformation des couches, selon

lindex z attribu chaque objet :
Ce cfficient est utilis pour recrer la profondeur, car en ralit, dans notre programme, les
proprits 3D que nous avons affectes aux objets de la scne ne sont pas prises en compte
lorsque le calcul daffichage en relief est appliqu. Elle nest applique quune fois les cou-
ches spares. Les proprits width et height utilises, peroivent, en effet, des valeurs
diffrentes lorsque deux couches alpha de mmes dimensions sont places un index z dis-
tinct. Une incohrence que nous contournons en activant laffichage 3D uniquement lorsque
le calcul de sparation des couches est termin. Sans quoi les couches alpha de chaque objet
auraient t bien plus grandes que les objets eux-mmes.
La deuxime variable, echelleRelief, est employe pour dfinir la valeur de dcalage de
la couche Rouge :
Plus cette valeur est leve, plus le dcalage de la couche Rouge sera marqu.
la suite, une fonction dtermine lindex z de chaque objet plac dans le symbole
composition_mc :
function indexZ() {
// toujours <0
}
Le premier objet de la liste daffichage, celui plac en premier plan dans le symbole
composition_mc, affiche un index le plus proche de lcran (700). Les autres se rappro-
chent progressivement de la valeur 0. Ces valeurs sont isoles dans une fonction de manire
permettre au moteur de capturer les dimensions des objets avant de modifier leur index z,
juste avant de lancer le mode daffichage en relief. Afin de prserver les proportions
dchelle des objets en fonction de leur index z, nous limitons la gestion des objets un
index infrieur 0, et donc, un relief jaillissant.
Ensuite, un gestionnaire dvnements appelle le moteur de rendu, sur action de lutilisateur :

function basculerEnRelief(evt:MouseEvent) {
composition_mc.visible=false;
moteurRelief();
}
Nous masquons dabord le symbole composition_mc qui affiche les objets dans un
espace 2D. Puis, nous activons la fonction moteurRelief() qui va placer, dans le clip vide
zoneDepotrelief_mc, situ au premier plan, les objets daffichage en relief.
Intervient ensuite le moteur de rendu. Le moteur gnre, pour commencer, autant de filtres
colorimtriques que de couches isoler. Dans ce systme, nous utilisons quatre couches. La
couche Rouge permet de reconstituer le relief en le dcalant dune valeur proportionnelle
lindex z des objets. Les couches Vert et le Bleu sont spares, mais resteront superposes
pour recrer la base de limage. LAlpha, enfin, va permettre dviter que les couches,
mme superposes, apparaissent lgrement translucides. Souvenez-vous, nous avons
appliqu un mode de fusion par Ajout pour les couches Roug et Vert. Or, la couche Bleu
nest pas ncessairement entirement opaque. Cela dpend de limage. Si nous najoutons
pas une couche supplmentaire qui reprenne lensemble des informations opaques de
limage, nous obtiendrons des images partiellement translucides.
Dans un premier temps, nous dfinissons donc les filtres de couleurs que nous appliquons
plus loin, chaque couche spare :
// tableauRouge
var tableauRouge:Array = new Array();
var filtreRouge:ColorMatrixFilter=new ColorMatrixFilter(tableauRouge);
tableauRouge = new Array();
tableauRouge=tableauRouge.concat([-1,0,0,0,255]);
tableauRouge=tableauRouge.concat([0,-1,0,0,0]);
tableauRouge=tableauRouge.concat([0,0,-1,0,0]);
tableauRouge=tableauRouge.concat([0,0,0,1,0]);
filtreRouge=new ColorMatrixFilter(tableauRouge);
Nous dclinons le principe pour chaque couche. la suite, nous crons un tableau (Array)
qui enregistre les dimensions des images, avant quelles ne soient projetes en relief.
Le premier tableau stocke les largeurs et le second, les hauteurs :
var largeurDonnees:Array=new Array();
var hauteurDonnees:Array=new Array();
Mcanisme dun tableau (Array). Rappel : un tableau fonctionne un peu comme la dfinition
dune variable, ceci prs que la structure peut implmenter un nombre de valeurs indtermines.
Pour ajouter une valeur dans un tableau, nous employons la mthode push(). En paramtre de
cette mthode, nous spcifions la valeur ajouter.
Dans notre exemple, les deux tableaux sont instancis en amont. Cest travers une boucle
for que nous rcuprons les valeurs. Cette boucle permet dexcuter autant denregistre-
ments que le symbole composition_mc affiche dobjets (en fonction de numChrildren) :
function moteurRelief() {

largeurDonnees.push(composition_mc.getChildAt(i).width);
hauteurDonnees.push(composition_mc.getChildAt(i).height);
//
if (i==composition_mc.numChildren-1) {
var boucle:Timer=new Timer(500,1);
boucle.start();
indexZ();
}
}
}
affichageRelief();
}
Ds que la boucle est termine (i==composition_mc.numChildren-1), nous activons le

moteur de rendu avec lappel de la fonction affichageRelief(). Dans ce dispositif, nous
devons attendre que la boucle soit termine, car le moteur utilise les donnes enregistres
par la boucle pour effectuer le calcul daffichage. Si nous lancions le moteur avant davoir
dfini les valeurs ncessaires, celui-ci ne pourrait fonctionner et retournerait une erreur.
Pour garantir le dlai, nous ajoutons mme un chronomtre qui active la fonction seule-
ment 500 millisecondes aprs lenregistrement, soit une demi-seconde aprs lenregistre-
ment. Pour nous assurer que le chronomtre se dclenche uniquement suite aux instructions
lances en dbut de boucle, nous le plaons lintrieur de la boucle.
lintrieur du moteur de rendu (fonction affichageRelief), plus bas dans le code, une
autre boucle for, de mme structure, instancie autant dimages que dobjets dans le conteneur :
var enveloppeImage:BitmapData=new BitmapData(800,600,false,0x00000000);
enveloppeImage.draw(composition_mc.getChildAt(i));
La mthode BitmapData() gnre dabord une surface daffichage quatre canaux (Alpha,
Rouge, Vert et Bleu). Puis, la mthode draw() y place une capture de lobjet appel en
paramtre. La mthode draw() dessine, pour ainsi dire, sur lobjet BitmapData, ce qui est
appel en paramtre de la mthode draw().
Ensuite, nous dfinissons chaque image capture en tant quobjet, afin de permettre de
les redistribuer ensuite dans dautres conteneurs et de leur appliquer des filtres et des
proprits :
var imageR:Bitmap=new Bitmap(bitmapR);
var imageV:Bitmap=new Bitmap(bitmapV);
var imageB:Bitmap=new Bitmap(bitmapB);
var imageA:Bitmap=new Bitmap(bitmapA);
travers la mthode copyChannel(), nous rcuprons la couche correspondant une des

quatre composantes colorimtriques. Cest, en somme, le noyau dur du moteur que nous
dfinissons l :
bitmapR.copyChannel(capture, capture.rect, new Point(0,0),
BitmapDataChannel.RED, BitmapDataChannel.ALPHA);
En paramtre de cette mthode, nous dsignons, respectivement :

Lobjet partir duquel nous voulons extraire une couche (capture).
La surface que nous voulons extraire (cest toujours un rectangle, ici, la proprit rect
lit la surface de limage avec capture.rect).
Les coordonnes x et y du point dorigine de cette zone rectangulaire ; la couche
composite concerne (RED, GREEN, BLUE ou ALPHA).
La proprit opaque ou transparente de limage. Dans le cas dune transparence, elle est
dfinie avec la proprit BitmapDataChannel.ALPHA).
Puis, nous appliquons les filtres dfinis en amont, sur chacune de ces couches, en fonction
de leur teinte respective :
imageR.filters=[filtreRouge];
imageV.filters=[filtreVert];
imageB.filters=[filtreBleu];
imageA.filters=[filtreNoir];
Grce ces filtres, les couches qui taient extraites (par dfaut noires) adoptent prsent la
teinte qui correspond leur composante colorimtrique relle.
Pour chaque objet, nous plaons dynamiquement, dans le symbole zoneDepotRelief_mc,
une instance du symbole ZoneAffichageRelief disponible dans la bibliothque et export
pour ActionScript :
var AffichageRelief:MovieClip=new ZoneAffichageRelief();
zoneDepotRelief_mc.addChildAt(AffichageRelief,i);
Pour chaque occurrence, nous lajoutons galement la liste daffichage dans lordre qui
correspond lempilement dj dfini pour le symbole composition_mc (addChild-
At(AffichageRelief,i)).
Plus bas, nous affichons les occurrences dans le conteneur zoneDepotRelief_mc, en les
distribuant en fonction de la couche vhicule. Les couches Rouge et Vert sont places dans
un conteneur avec le mode de fusion par Ajout dj actif. La couche Bleu est place
derrire. La couche Alpha, elle, se retrouve en dessous de toutes les autres et prserve lopa-
cit de chaque objet (voir Figure 12.29) :
// la couche RVB
AffichageRelief.coucheAlpha_mc.addChild(imageA);
imageA.x=composition_mc.getChildAt(i).x;
imageA.y=composition_mc.getChildAt(i).y;
Figure 12.29
Ordre daffichage
des couches
Alpha, Rouge,
Vert et Bleu.
Nous en profitons pour ajuster aussi la position en X, principalement, pour la couche

Rouge. Pour que leffet de relief puisse tre visible, nous devons effectivement dcaler

labscisse du Rouge par rapport aux autres couches. Cest donc l que nous utilisons la
variable echelleRelief qui nous aide dterminer lampleur de ce dcalage :
// la couche Rouge
AffichageRelief.coucheRouge_mc.addChild(imageR);
imageR.x=composition_mc.getChildAt(i).x+(composition_mc.getChildAt(i).z)
*echelleRelief;
imageR.y=composition_mc.getChildAt(i).y;
La position X de la couche Rouge est ainsi proportionnelle la valeur du x de chaque objet.

Nous terminons la fonction en modifiant lchelle scaleX et scaleY de chaque objet en
fonction de son index x, pour recrer la dformation induite par la mise en relief des objets
dans lespace 3D. Rappelez-vous que laffichage du rendu est dtermin partir
dobjets 2D, placs dans composition_mc, et, ce titre, nous oblige dformer le tout en
fonction de leur profondeur, que nous avons attribue ailleurs, pour conserver lillusion de
cette profondeur :
imageR.scaleX=(composition_mc.getChildAt(i).z)/-echelleZ;
imageR.scaleY=(composition_mc.getChildAt(i).z)/-echelleZ;
La variable echelleZ, galement dfinie en amont du programme, permet de grer la dfor-

mation pour obtenir un effet plus ou moins accentu de la perspective. Une valeur leve
diminue la dformation et donc, loigne les points de fuite.
retenir
Il est possible dextraire une couche de composante colorimtrique laide de la mthode copy-
Channel().
Il est possible raliser un site en relief dynamique partir de proprits distinctes de contenus 2D,
sils sont rpartis par exemple sur un index x. Le moteur de rendu en relief spare les couches RVBA
et les redistribue alors en fonction de la profondeur x des objets.
Lordre daffichage des objets dans la composition est dterminant pour le ralisme du dispositif en
relief.
Synthse
Dans ce chapitre, vous avez vu comment crer des images pour le relief avec la technique
des anaglyphes. Vous avez appris les intgrer dans un document Flash. En dcortiquant le
mcanisme de fonctionnement de laffichage en relief, et laide des techniques abordes
dans les prcdents chapitres, vous avez galement appris crer un systme daffichage
dynamique qui permette de convertir, automatiquement, tout objet situ dans un espace 2D
ou 3D, en relief. Vous tes en mesure de dvelopper des systmes daffichage pour tout type
de contenu dont la volumtrie apporte du sens (architecture, bijoux, uvres dart, design
dobjets, produits high-tech, muses).
Les systmes de navigation

13 avancs
Introduction
Les boutons proposs par dfaut dans Flash offrent des fonctionnalits souvent en de des
besoins rels attendus en production, Par exemple, il est particulirement difficile de contr-
ler, par ActionScript, des contenus distribus au sein de ce type dobjet. Ils ne proposent pas
non plus dtat visit comme le ferait un simple hyperlien en HTML. En utilisant des sym-
boles de type MovieClip, il est possible de raliser des systmes de navigation plus person-
nalisables, plus souples mettre en forme, et plus originaux.
Dans ce chapitre, nous allons aborder lutilisation de symboles de type MovieClip travers
diffrents dispositifs de navigation avancs.
Boutons MovieClip fixes avec tat activ et visit

Dans cette premire section, nous vous proposons de raliser un menu avec diffrents bou-
tons disposant, pour chacun deux, les tats survol (over), sortie (out), appuy (down),
relev (up) et visit (visited).
ActionScript 3 nous permet de centraliser les interactions au sein dun mme gestionnaire
grce aux proprits target et currentTarget. Nous les utilisons dans cet exemple pour
optimiser notre code.
Nous prsentons ici trois dclinaisons du mme menu avec quelques variantes de codage.
La premire version excute tous les tats. La deuxime version, aussi, mais elle utilise une
structure conditionnelle de type Switch, plus souple pour des menus longs. La troisime
enfin aborde lergonomie en traitant les boutons en tant qulments actifs et non plus sim-
plement visits. Lorsquune nouvelle rubrique est affiche, les boutons des autres entres
sont restaurs.
Exemples > ch13_systemesNavigation_1.fla

Exemples > ch13_systemesNavigation_1b.fla
Exemples > ch13_systemesNavigation_1c.fla
Les boutons visits

Dans le document "ch13_systemesNavigation_1.fla", la scne principale affiche un sym-
bole MovieClip de nom doccurrence menu_mc (voir Figure 13.1).
lintrieur de ce symbole sont rpartis, vers les calques, trois boutons respectivement
nomms bouton1_mc, bouton2_mc et bouton3_mc. Sont galement visibles : un filet et
quelques formes graphiques ajoutes pour lhabillage (voir Figure 13.2).
Figure 13.1
Aperu de la
scne principale.
Figure 13.2
Aperu du
scnario du
MovieClip
menu_mc.
Dans le scnario de chacun de ces MovieClip, nous distinguons quatre calques dont certains
affichent des interpolations (voir Figure 13.3).
Figure 13.3
Aperu du
scnario de
chaque bouton
MovieClip.
Le calque du bas contient une srie danimations places les unes la suite des autres. Le
calque nomm texte affiche le libell de chaque bouton. Le calque stop interrompt la tte
de lecture avant chaque nouvelle animation, par la commande stop(). Enfin, le calque
labels distribue une srie dtiquettes (labels) qui nous permettent didentifier chaque ani-
mation en fonction de son rle. Ces tiquettes permettent aussi de piloter par ActionScript le
placement de la tte de lecture ces endroits prcis, lors du changement dtat survenu pour
le bouton (tat survol, sortie, tat appuy, tat relch et tat visit).
Dans la scne principale, au-dessus du calque fond_mc et menu_mc, apparat le calque
Actions (voir Figure 13.4).
Figure 13.4
Aperu du
scnario de la
scne principale.
Dans le calque Actions, nous pouvons lire le code suivant :

//--------------------- actions
//over
LES SYSTMES DE NAVIGATION AVANCS 391

menu_mc.addEventListener(MouseEvent.MOUSE_OVER,over);
evt.target.gotoAndPlay("_over");
}
//down
menu_mc.addEventListener(MouseEvent.MOUSE_DOWN,down);
function down (evt:MouseEvent) {
evt.target.gotoAndPlay("_down");
evt.target.etatVisit=true;
//
if (evt.target.name=="bouton1_mc") {
trace("action1");
}
trace("action2");
}
trace("action3");
}
}
//out
menu_mc.addEventListener(MouseEvent.MOUSE_OUT,out);
if (evt.target.etatVisit==true) {
evt.target.gotoAndPlay("_visited");
} else {
evt.target.gotoAndPlay("_out");
}
}
//up
menu_mc.addEventListener(MouseEvent.MOUSE_UP,up);
function up (evt:MouseEvent) {
evt.target.gotoAndPlay("_up");
}
Pour apprhender le mcanisme du menu, nous devons dabord comprendre que tous les
boutons sont rassembls lintrieur dun symbole MovieClip nomm menu_mc. Action-
Script 3 nous permet de cibler, grce la proprit target, chacun des objets qui capture
lvnement, dans un mme conteneur. Nous pouvons donc automatiser le processus dinte-
ractivit avec plusieurs boutons runis dans un clip, sans avoir recrer de gestionnaire
dvnements pour chacun dentre eux.
Mais, nous souhaitons aussi excuter un nombre dvnements parfois contradictoires. Par
exemple, nous souhaitons quun bouton survol affiche, en sortie, ltat par dfaut. Mais,
nous aimerions aussi que, si ce bouton tait dj activ, que ce soit un autre tat qui appa-
raisse : ltat visit. Pour ce faire, nous utilisons une variable et une structure condition-
nelle, qui, selon lobjet activ, va excuter lune ou lautre des interpolations et ainsi
permettre de rsoudre cette pseudo-contradiction.
Dans le programme, nous crons un premier gestionnaire dvnements pour la dfinition
de ltat survol :
//over

}
Cest bien le symbole menu_mc qui reoit lcouteur. Mais cest bien loccurrence de bouton
survole qui excute la fonction (evt.target). Dans cette fonction, nous lisons linterpola-
tion place ltiquette nomme _over lorsque le pointeur survole le bouton
(MOUSE_OVER).
la suite, un autre gestionnaire excute une fonction lorsque le pointeur est enfonc sur une
occurrence de bouton (MOUSE_DOWN) :
//down
//
trace("action1");
}
trace("action2");
}
trace("action3");
}
}
Dans cette fonction, nous distinguons plusieurs actions. Dabord, lanimation qui corres-
pond ltat _down est lance :
Ensuite, nous crons une proprit etatVisit, pour chaque bouton activ, que nous pas-
sons sur true. Cette proprit nous sert vrifier si lobjet a t cliqu ou non. Selon sa
valeur, nous dfinissons plus loin le type dtat afficher en sortie ("_visited" ou
"_sortie").
Nous ajoutons ensuite des conditions qui permettent de lancer telle ou telle action, selon le
bouton cliqu. Nous vrifions, par exemple, que le bouton cliqu se nomme bouton1_mc.
Dans ce cas, un texte en rapport saffiche dans la fentre de sortie.
Cest la dfinition de diffrentes structures conditionnelles qui nous pargne davoir crer
un nouveau gestionnaire dvnements propre chaque bouton. Lensemble des actions du
menu est centralis dans chacune de ces conditions.
Ensuite, un gestionnaire affiche les actions lorsque le pointeur sort des boutons (MOUSE_OUT) :
//out
if (evt.target.etatVisit==true) {
evt.target.gotoAndPlay("_visited");
} else {
}
}

Dans cette fonction, nous dfinissons deux actions. La premire active linterpolation situe
ltiquette _visited si, et uniquement si, la valeur de la proprit etatVisit du bouton
cliqu est passe sur true, cest--dire, si le bouton, ou la rubrique associe ce bouton, a
bien t visite.
Si le bouton pour lequel le pointeur sort nest pas le bouton cliqu, la seconde action appelle
linterpolation de sortie simple (_out).
La structure Switch case

Vous trouverez galement, dans les exercices du livre, le fichier
"ch13_systemesNavigation_1b.fla". Ce document propose une version alternative de la struc-
ture conditionnelle. La fonction intitule down emploie ici une instruction switch case, au
lieu de if :
//down
//
switch (evt.target.name) {
case "bouton1_mc":
trace("action1");
break;
case "bouton2_mc":
trace("action2");
break;
case "bouton3_mc":
trace("action3");
break;
default:
trace("ni0,1, ou2");
}
}
Le principe de linstruction switch est similaire une structure if, la diffrence que nous
vrifions une seule fois lobjet de la la condition (switch (evt.target.name)). Selon la
valeur identifie aprs lattribut case, nous spcifions ensuite les actions excuter. Les
actions sont places aprs les deux points et se terminent toujours par linstruction break.
Une instruction default permet dexcuter une autre action lorsque la condition nest vrifie
par aucun attribut case.
Cette structure est particulirement adapte pour les systmes dont la condition vrifier est
toujours du mme type, comme vrifier une valeur porte par une variable, et y associer un
comportement en fonction du rsultat obtenu.
Les boutons activs

Un troisime document, nomm "ch13_systemesNavigation_1c.fla", propose un systme de
navigation pour lequel chaque lien affiche ltat actif lorsque le bouton vient dtre enfonc.
Mais cet tat est dsormais restaur ds quun autre bouton reprend le focus.
Dans ce document, nous pouvons lire le code suivant :
//--------------------- initialisation
var actif:*=null;
//--------------------- actions menu

//down
function down(evt:MouseEvent) {
if (evt.target!=actif) {
//up
if (actif!=null) {
actif.gotoAndPlay("_up");
}
//visited
actif=evt.target;
actif.gotoAndPlay("_visited");
}
case "bouton1_mc":
trace("action1");
break;
case "bouton2_mc":
trace("action2");
break;
case "bouton3_mc":
trace("action3");
break;
default:
}
}
//over
function over(evt:MouseEvent) {
}
}
//out
function out(evt:MouseEvent) {
}
}

Dans ce programme, nous initialisons dabord une variable "interrupteur" que nous avons
nomme actif :
//--------------------- initialisation
var actif:*=null;
Le type toile (*) dsigne tout type, sans en privilgier un en particulier. La valeur null
assure quelle ne permettra aucune action tant que nous ne laurons pas modifie.
La fonction down commence par modifier cette valeur lorsquun bouton est enfonc
(actif=evt.target). Les autres fonctions ainsi que les structures conditionnelles de celle-
ci, vrifient alors que le bouton cliqu nest pas celui pralablement activ. Selon la valeur
dtecte, elles lancent ou non les interpolations dentre (_over) ou de sortie (_out) des
boutons du menu.
Menus avec des symboles boutons. Il est possible de raliser dynamiquement un menu partir
de symboles boutons et de cibler les contenus qui y sont distribus. Nous nabordons pas cet aspect
ici. Ces techniques sont dcrites en dtail au Chapitre 7 de louvrage de Thibault Imbert, Pratique
dActionScript 3, aux ditions Pearson.
retenir
Les boutons raliss en MovieClip offrent plus de souplesse de manipulation et de valeur ajoute
crative, quun bouton classique de la classe Button. Il est notamment possible dy introduire de
nombreuses animations et de les contrler facilement par ActionScript.
Pour crer un tat visit sur un bouton cliqu, nous devons ajouter une condition qui vrifie si le
bouton activ est celui enregistr. Dans ce cas, nous jouons lanimation en rapport. Le cas chant,
nous spcifions une autre interpolation.
En ActionScript 3, grce la proprit target, il est facile de centraliser les actions de tout un menu
au travers dun seul gestionnaire dvnements. Pour distinguer nanmoins les actions de chaque
bouton, nous utilisons des structures conditionnelles.
Une structure conditionnelle de type Swich est plus adapte quune structure if, lorsque la condi-
tion vrifier est toujours la mme.
Boutons MovieClip anims et interfaables

La cration de boutons classiques consiste limiter la surface daffichage leur libell. Les
boutons de type interfaables sont des MovieClip qui excutent une animation et transforme
la surface du bouton en fentre de contenu. Les lments distribus dans cette fentre
deviennent leurs tours interactifs, mais ne doivent pas entrer en conflit avec les actions
places justement sur ce conteneur (voir Figure 13.5).
La difficult de cet exemple repose sur la capacit rendre les actions des lments ajouts,
dans le conteneur MovieClip, indpendantes des actions du conteneur lui-mme. Si le bou-
ton qui dploie cette fentre possde ses propres actions douverture et de fermeture.
Figure 13.5
Bouton interfac.
Il devient effectivement plus compliqu dajouter, dans un objet dj interactif, dautres

objets galement interactifs.
Afin de permettre de placer des symboles cliquables lintrieur dautres symboles dj
cliquables, nous devons considrer que :
Les objets placs au-dessus des autres sont toujours prioritaires sur les actions ex-
cuter.
Les objets doivent pouvoir tre identifis au moment prcis o des actions leur sont
attribues. Ou bien, il nest pas possible de cibler un objet qui napparat pas dans la
scne au moment o celui-ci est invoqu.
En ActionScript 3, lensemble des objets enfants dun conteneur remonte au conteneur
principal les interactions ventuellement interceptes.
Pour ajouter des objets interactifs dans un MovieClip, lui-mme interactif, nous procdons
de lune des deux manires suivantes. Soit nous plaons tous les objets interactifs sur la pre-
mire image du scnario de leur conteneur, quitte les rendre invisible (proprit visi-
ble=false) afin quils napparaissent pas au lancement de lapplication et, quils ne soient
pas cliquables. Soit nous les isolons sur une image du scnario du conteneur, l o effecti-
vement ils doivent apparatre, mais nous sommes alors contraints de placer les actions de
ces objets ce mme emplacement, dans le scnario.
Dans cette section, nous abordons les deux solutions.
Diffrence entre les proprits alpha et visible.

La proprit alpha (nomDuSymbole_mc.alpha=0 ) rend les objets transparents mais toujours actifs.
La proprit visible (nomDuSymbole_mc.visible=false ) les rend invisibles et inactifs. Lalpha se
dfinit par une valeur dcimale comprise entre 0 et 1. La visibilit se dfinit par une valeur boolenne
(true ou false).

Mthode avec les actions dans le scnario du lien
Nous prsentons dabord la solution qui consiste placer les actions des liens imbriqus,
dans les liens eux-mmes. Cette technique est la plus simple apprhender. Elle permet de
placer les objets dans le scnario uniquement lorsquils doivent tre actifs. Elle convient
parfaitement pour des actions localises, comme la lecture du scnario partir dun objet
ajout localement, sur une image-cl isole, par exemple.

Exemples > ch13_systemesNavigation_2b.fla
Dans le document ch13_systemesNavigation_2.fla, nous pouvons voir une interface o des

liens, en forme de poids, sont positionns au-dessus de la partie gauche du dcor. Un
MovieClip canalise ces objets et porte le nom doccurrence menu_mc (voir Figure 13.6).
Figure 13.6
Aperu de la
scne principale.
lintrieur de ce menu, trois symboles de type MovieClip, respectivement nomms

bouton1_mc, bouton2_mc et bouton3_mc sont rpartis distinctement vers les calques (voir
Figure 13.7).
Figure 13.7
Scnario lint-
rieur du menu.
lintrieur du symbole bouton1_mc, nous accdons maintenant une animation o la sur-

face du lien stend jusqu dessiner une fentre. Cette animation prend fin limage 24 o
la fentre est totalement dploye. Le reste de lanimation reprsente la fermeture de cette
fentre. La lecture de cette animation est contrle par des actions. Un stop, plac
limage 1 et 24, interrompt la lecture. Cest uniquement, lorsque la tte de lecture atteint
limage 24, que de nouveaux boutons apparaissent lcran (voir Figure 13.8).
Figure 13.8
Scnario
lintrieur du
bouton 1.
Dans la fentre de scnario du bouton1, un autre objet apparat galement limage 24, un
movieClip transparent nomm zoneOut_mc et de proprit alpha 0 %. Cest lui qui permet
dactiver la fermeture de la fentre, lorsque le pointeur le dpasse.
Afin dactiver louverture anime de cette fentre, nous avons plac des actions sur la scne
principale, en direction de lobjet bouton1_mc lui-mme. Pour que les liens situs locale-
ment limage 24 du symbole bouton1_mc soient actifs, nous avons plac dautres actions
directement dans ce scnario, limage 24.
Les autres MovieClip boutons de ce document ne contiennent pas de liens isols. Ils ont t
mis en forme uniquement pour illustrer le mcanisme, dans un systme plus global, avec
plusieurs entres de menu. Leur scnario ne possde pas les calques menuBouton1_mc ni
zoneOut_mc (voir Figure 13.9). Mais le mcanisme adopt pour le premier bouton pourrait
y tre reproduit.
Figure 13.9
Scnario lint-
rieur des bou-
tons 2 et 3.
Les actions du calque de la scne principale sont les suivantes :

//--------------------- initialisation
var boutonActif:String;
//--------------------- actions
//over
if (evt.target.currentFrame==1) {
}

}
//down
boutonActif=evt.target.name;
//
trace("action1");
}
trace("action2");
}
trace("action3");
}
}
//out
if (evt.target.name!="bouton1_mc") {
}
}
}
Les actions localises dans le symbole bouton1_mc, limage 24, sont les suivantes :
stop();
//
menuBouton1_mc.addEventListener(MouseEvent.CLICK,actionsMenuBouton1);
function actionsMenuBouton1 (evt:MouseEvent) {
if (evt.target.name=="lien1_mc") {
trace("action1 du menu bouton1");
}
}
}
}
//
zoneOut_mc.addEventListener(MouseEvent.MOUSE_OUT,sortirBouton1);
function sortirBouton1 (evt:MouseEvent) {
play();
}
Dans la fentre dactions de la scne principale, nous associons une fonction sur le conte-
neur menu_mc qui accueille les trois boutons :
//--------------------- actions
//over
}
}
Dans cette fonction, nous activons la lecture du scnario du bouton cliqu, uniquement si
limage courante du bouton cliqu est limage 1. Ceci vite que lanimation soit relance
intempestivement lorsque lutilisateur navigue au sein de la fentre, si elle est dploye.
Plus bas, dans la fonction associe lvnement MOUSE_DOWN, nous reprenons le mme
type dactions que celles prsentes dans la section prcdente.
En revanche, dans le gestionnaire MOUSE_OUT, nous prcisons que laction de restauration de
ltat du bouton ne peut avoir lieu que si le nom du bouton actif est diffrent de celui qui
contient dautres liens. Autrement dit, laction de restauration napparat que pour les liens
simples. Laction de fermeture de la fentre, dans notre exemple, est contrle directement
limage 24, dans le scnario du MovieClip bouton :
//out
}
}
}
Dans le scnario du MovieClip, limage 24, nous affectons dabord un couteur sur
lenveloppe menuBouton1_mc qui rassemble les trois sous-entres locales. Pour chaque lien
de ce conteneur, nous dfinissons une action trace spcifique :
}
}
}
}
Il ny a pas de contradiction avec le conteneur principal, car ces objets sont situs au premier
plan, et le gestionnaire cible bien un conteneur diffrent du conteneur principal.
Plus bas, une autre action est ajoute et contrle la fermeture de la fentre :
//
zoneOut_mc.addEventListener(MouseEvent.MOUSE_OUT,sortirBouton1);
play();
}
Laction cible tout simplement la forme transparente situe au pourtour de la fentre. Lors-
que cette zone apparat dans la scne, le pointeur est dj sur la partie centrale. Lvnement
MOUSE_OUT permet donc dactiver la fermeture anime de la fentre, uniquement si lutilisateur
sort de la zone transparente, par lextrieur.

Des instructions de neutralisation de MovieClip et de boutons sont proposes en fin de
chapitre. Ils offrent une autre alternative la gestion de contenus imbriqus.
Dans le document "ch13_systemesNavigation_2b.fla", une dclinaison de cet exemple est
propose, partir de linstruction switch. Ce qui donne, pour la fonction down de la scne
principale :
//down
//
case "bouton1_mc":
trace("action1");
break;
case "bouton2_mc":
trace("action2");
break;
case "bouton3_mc":
trace("action3");
break;
default:
}
}
Pour la fonction place lintrieur du symbole :

case "lien1_mc":
break;
case "lien2_mc":
break;
case "lien3_mc":
break;
default:
trace("aucun");
}
}
Mthode avec les actions sur la scne principale

Une dclinaison du prcdent document est propose dans le fichier
"ch13_systemesNavigation_2c.fla". Ce document prend en charge la gestion des liens
imbriqus en plaant le code directement sur la scne principale, ce qui rend plus facile la
liaison des donnes entre fonctions et simplifie, entre autres, la rcupration de valeurs,
lactivation dautres fonctions, la centralisation du code et sa maintenance.
Exemples > ch13_systemesNavigation_2c.fla
Dans ce document, nous observons que lintrieur du MovieClip bouton1_mc affiche dj

les objets zoneOut_mc et menuBouton1_mc, ds la premire image (voir Figure 13.10).
Figure 13.10
Scnario lint-
rieur du bou-
ton 1.
Dautre part, aucune action spcifique, en dehors des stops, napparat non plus
limage 24. Toutes les actions sont centralises limage 1 du scnario de la scne princi-
pale.
Dans le code de la scne principale, nous pouvons lire ceci :
//--------------------- initialisation
var boutonActif:String;
//--------------------- actions
//over
}
}
//down
//
trace("action1");
}
trace("action2");
}
trace("action3");
}
}
//out
}

}
}
// liens1,2 et3, dans bouton1

menu_mc.bouton1_mc.menuBouton1_mc.addEventListener(MouseEvent.CLICK,actions-
MenuBouton1);
}
}
}
}
menu_mc.bouton1_mc.menuBouton1_mc.visible=false;
// sortie bouton1
menu_mc.bouton1_mc.zoneOut_mc.addEventListener(MouseEvent.MOUSE_OUT,sortirBouton1);
menu_mc.bouton1_mc.play();
}
menu_mc.bouton1_mc.zoneOut_mc.visible=false;
// gestion de laffichage des liens dans le bouton1

addEventListener(Event.ENTER_FRAME,afficherLiens);
function afficherLiens (evt:Event) {
if (menu_mc.bouton1_mc.currentFrame==24) {
menu_mc.bouton1_mc.menuBouton1_mc.visible=true;
menu_mc.bouton1_mc.zoneOut_mc.visible=true;
} else {
menu_mc.bouton1_mc.menuBouton1_mc.visible=false;
menu_mc.bouton1_mc.zoneOut_mc.visible=false;
}
}
Dans ce document, nous avons dplac les actions de limage 24, du symbole MovieClip
bouton1_mc, lintrieur de la fentre actions de la scne principale. Afin que ces actions
sexcutent correctement, nous avons plac les objets cibls sur la premire image du scna-
rio bouton1. Ainsi, ils peuvent tre identifis par la tte de lecture, au moment o les actions
de la scne principale sont interprtes. Mais, pour que ces objets napparaissent pas au
dmarrage, nous avons ajout des contrles de visibilit, en fonction de limage active de ce
scnario.
Le mme document, nomm "ch13_systemesNavigation_2d.fla", dclin avec des instructions
switch, est galement disponible dans les fichiers des exemples du livre.
retenir
Des liens peuvent tre placs localement dans un objet dj interactif. Pour cela, ils doivent tre pla-
cs au premier plan et leurs actions doivent tre situes localement au niveau du lien.
Une approche alternative existe. Il est possible de placer les actions sur la scne principale, mais
avec des conditions qui neutralisent dabord laffichage de lobjet par dfaut.
Console de navigation en miniature

Si vous utilisez la fentre de navigation de Photoshop ou dIllustrator, vous tes srement
familier avec la navigation dans une fentre rduite. Une fentre de navigation rduite
reprend, en miniature, un aperu de lensemble de la scne et permet lutilisateur de sy
mouvoir en Y dplaant un simple rectangle. Ce rectangle matrialise la zone visible
lcran.
Dans cette section, nous allons voir comment mettre en place ce dispositif de navigation.
Nous utilisons pour cela une carte du monde, agrandie lchelle de 200 % par rapport sa
taille initiale. Cette carte dborde donc largement de la zone visible par lutilisateur. Cest
en dplaant le rectangle rouge de la fentre de navigation, que lon fera bouger le contenu,
pour accder aux informations que celui-ci propose (voir Figure 13.11).
Figure 13.11
Aperu du
document publi.
Dans le document "ch13_systemesNavigation_3.fla", sur la scne principale (voir

Figure 13.12), au-dessus du calque fond_mc, nous visualisons le calque contenu_mc

masqu par un rectangle de dimensions quivalentes celles de la scne, moins la barre
dinformations.
Figure 13.12
Fentre de
scnario de la
scne principale.
lintrieur du calque nav_mc, figurent plusieurs symboles, dont le rectangle rouge que
nous utilisons comme outil de dplacement et qui porte le nom doccurrence fenetre_mc
(voir Figure 13.13). En dessous, une copie de loccurrence contenu_mc est affiche en pro-
portions rduites, elle illustre lensemble du contenu disponible la navigation, et situe la
position courante du rectangle par rapport au contenu affich dans cette zone. En arrire
plan de ces calques, le symbole fondNavCentre_mc reprsente la zone limite de dplace-
ment dont nous reprenons les coordonnes dans le code. Lobjet fondNavLarge_mc et le
calque contour servent uniquement la dcoration.
Figure 13.13
Fentre de
scnario du
symbole nav_mc.
Dans la fentre Actions de la scne principale, nous pouvons lire le code suivant :
//------------------------ initialisation
var origineX:Number=nav_mc.fondNavCentre_mc.x;
var origineY:Number=nav_mc.fondNavCentre_mc.y;
var largeurRect:Number=(nav_mc.fondNavCentre_mc.width)-
(nav_mc.fentre_mc.width);
var hauteurRect:Number=(nav_mc.fondNavCentre_mc.height)-
(nav_mc.fentre_mc.height);
var zoneDeplacement:Rectangle=new Rectangle(origineX, origineY, largeurRect,
hauteurRect);
//
var echelleMouvement:Number=(contenu_mc.width/nav_mc.fondNavCentre_mc.width);
//------------------------ actions
// dplacement du rectangle
nav_mc.fentre_mc.addEventListener(MouseEvent.MOUSE_DOWN,deplacerRectangle);
function deplacerRectangle (evt:MouseEvent) {
addEventListener(Event.ENTER_FRAME, deplacerContenu);
nav_mc.fentre_mc.startDrag(false,zoneDeplacement);
}
addEventListener(MouseEvent.MOUSE_UP,relacherRectangle);
function relacherRectangle (evt:MouseEvent) {
removeEventListener(Event.ENTER_FRAME, deplacerContenu);
stopDrag();
}
// dplacement du contenu
function deplacerContenu (evt:Event) {
contenu_mc.x=nav_mc.fentre_mc.x*-echelleMouvement;
contenu_mc.y=nav_mc.fentre_mc.y*-echelleMouvement;
}
Le programme se droule en trois tapes. Nous dfinissons dabord la zone de dplacement.

Nous activons ensuite le mouvement. Puis nous lions le contenu de la scne loutil
dploy et mobile.
Tout dabord, dans la partie initialisation, nous spcifions, au travers des quatre premires
variables, les limites de la zone de dplacement :
var origineX:Number=nav_mc.fondNavCentre_mc.x;
var origineY:Number=nav_mc.fondNavCentre_mc.y;
var largeurRect:Number=(nav_mc.fondNavCentre_mc.width)-
(nav_mc.fentre_mc.width);
var hauteurRect:Number=(nav_mc.fondNavCentre_mc.height)-
(nav_mc.fentre_mc.height);
var zoneDeplacement:Rectangle=new Rectangle(origineX, origineY, largeurRect,
hauteurRect);
Nous reprenons la position courante et les dimensions de la zone de dplacement contenue

dans le symbole nav_mc, qui porte le nom doccurrence fondNavCentre_mc. Mais pour
dfinir la largeur utile de ce dplacement, nous devons galement soustraire la largeur et la
hauteur du rectangle mobile, comme nous lavions fait pour lascenseur au Chapitre 2, avec
les interpolations TweenMax.
Plus bas, nous dfinissons une variable pour dterminer le cfficient de vitesse du mouve-
ment. Il sagit du rapport dchelle entre la taille du contenu de la scne principale et les
dimensions de la zone de dplacement :
var echelleMouvement:Number=(contenu_mc.width/nav_mc.fondNavCentre_mc.width);
Dans la deuxime partie, nous activons en premier la fonction qui recalcule la position des
objets (deplacerContenu). Puis, la ligne, nous activons le contrle du mouvement de la
forme rectangulaire rouge et introduisons, en paramtre de la mthode startDrag, la rf-
rence au rectangle pralablement dsign :
//------------------------ actions
// dplacement du rectangle
nav_mc.fentre_mc.addEventListener(MouseEvent.MOUSE_DOWN,deplacerRectangle);
function deplacerRectangle (evt:MouseEvent) {
nav_mc.fentre_mc.startDrag(false,zoneDeplacement);
}
addEventListener(MouseEvent.MOUSE_UP,relacherRectangle);
function relacherRectangle (evt:MouseEvent) {
removeEventListener(Event.ENTER_FRAME, deplacerContenu);
stopDrag();
}

Cette forme est entirement cliquable car nous y avons introduit un symbole qui couvre
toute la surface mais avec un alpha 0 %. Le paramtre false indique que lobjet ne se
repositionne pas en fonction du clic souris, linverse, lusage de true aurait centr le
rectangle en fonction de ce clic.
La fonction relacherRectangle interrompt le dplacement du symbole et la fonction
deplacerContenu, gre par un ENTER_FRAME.
Enfin, nous ajoutons un couteur qui excute le repositionnement en reprenant le cfficient
calcul en amont, et repositionne le symbole contenu_mc, en X et en Y, en fonction de la
position du rectangle rouge :
// dplacement du contenu
function deplacerContenu (evt:Event) {
contenu_mc.x=nav_mc.fentre_mc.x*-echelleMouvement;
contenu_mc.y=nav_mc.fentre_mc.y*-echelleMouvement;
}
retenir
La partie active dun bouton ou de tout type de symbole doit toujours tre matrialise. Pour dpla-
cer une forme qui naffiche pas de fond, nous plaons, lintrieur du symbole utilis pour le dpla-
cement, une forme pleine mais transparente.
Pour dterminer le rapport dchelle des dimensions entre un contenu et la scne courante, il suffit
de diviser les dimensions de la premire par la seconde.
Menu droulant repositionnement automatique

La cration dun menu droulant ne pose pas de difficult particulire ds lors que lon
sait utiliser les masques, le scnario, quelques transitions animes et les conditions en
ActionScript. Mais, si nous voulons que les menus saffichent en colonne, par exemple,
les uns au-dessus des autres, le mcanisme peut se compliquer. En effet, pour ouvrir un
menu et afficher ses sous-entres, nous devons alors chasser les menus du dessous, encore
referms, mesure que les sous-entres du menu prcdent descendent. Et inversement
la fermeture.
Pour raliser ce dispositif, nous crons des sous-menus directement lintrieur des Movie-
Clip boutons qui reprsentent les entres principales de chaque menu. Puis, nous utilisons
des transitions de type TweenMax pour activer le dfilement des sous-menus, sur clic de
lutilisateur.
Nous grons aussi le repositionnement des entres principales de menu, avec un gestion-
naire de type ENTER_FRAME. Cest dans ce gestionnaire que nous indiquons, chaque entre
principale, de se positionner en fonction de la position Y du dernier lment du menu prc-
dent. Ainsi, quelle que soit la position des sous-entres de chaque menu, les entres princi-
pales et leurs sous-menus respectifs, enfants, suivent les mouvements de chaque sous-menu.
Dans cette section, nous utilisons un menu trois entres, qui affichent, chacune, cinq sous-
entres. Les symboles utiliss sont tous diffrents. Vous pouvez donc rapidement personna-
liser le fichier pour vous lapproprier et y placer de vraies fonctionnalits (voir
Figure 13.14).
Figure 13.14
Aperu du
document publi.
Dans la scne principale du document "ch13_systemesNavigation_4.fla", nous pouvons

voir un symbole menu_mc qui contient trois entres principales de menu, respectivement
nommes entree1_mc, entree2_mc et entree3_mc.
Dans le scnario de chaque bouton MovieClip dentre, nous remarquons la prsence dun
masque qui rend invisibles les sous-entres appeles par les scripts. Si nous dverrouillons
les calques, nous constatons que ces sous-entres sont positionnes, au pixel prs, au-dessus
de la zone daffichage, matrialise par le masque (voir Figures 13.15 et 13.16). Dans les
scripts, nous dterminerons le positionnement des lments en fonction de leur position
courante. Il est donc important que les lments ne soient pas placs nimporte o.
Figure 13.15
Aperu du
scnario de la
scne dun sous-
menu

Figure 13.16
Aperu du sous-
menu et de son
masque.
Figure 13.17
Aperu du
scnario de la
scne principale.
Dans le scnario de la scne principale (voir Figure 13.17), au-dessus des calques de dco-
ration et du menu, nous accdons aux actions qui affichent le code suivant :
//-------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
var initEntree1Y:Number=menu_mc.entree1_mc.y;
var initSousMenu1Y:Number=menu_mc.entree1_mc.sousMenu_mc.y;
//-------------------- actions
// activation des sous-menus
menu_mc.addEventListener(MouseEvent.MOUSE_DOWN,ouvrirMenu);
function ouvrirMenu(evt:MouseEvent) {
if (evt.target.name=="entree1_mc") {
if (menu_mc.entree1_mc.sousMenu_mc.y<=initSousMenu1Y) {
TweenMax.to(menu_mc.entree1_mc.sousMenu_mc,0.5, {
y:initSousMenu1Y + menu_mc.entree1_mc.sousMenu_mc.height,
ease:Strong.easeInOut,
onStartListener: placeEcouteur,
onCompleteListener:retireEcouteur,
overwrite:3
});
} else {
y:initSousMenu1Y,
overwrite:3
});
}
}
overwrite:3
});
} else {
y:initSousMenu1Y,
overwrite:3
});
}
}
overwrite:3
});
} else {
y:initSousMenu1Y,
overwrite:3
});
}
}
}
// suivi des entres

function placeEcouteur(Evt:TweenEvent){
addEventListener(Event.ENTER_FRAME,replacerEntreesMenu);
}
function retireEcouteur(Evt:TweenEvent){
removeEventListener(Event.ENTER_FRAME,replacerEntreesMenu);
}

function replacerEntreesMenu(evt:Event) {
trace("fonction active")
menu_mc.entree2_mc.y=initEntree2Y+(menu_mc.entree1_mc.sousMenu_mc.
y-initSousMenu1Y);
y-initSousMenu1Y)+(menu_mc.entree2_mc.sousMenu_mc.y-initSousMenu2Y);
}
Notre code se dfinit en trois parties. La premire importe les classes et enregistre la posi-
tion courante des lments. La deuxime active le droulement des sous-menus. La troi-
sime et dernire partie repositionne les entres en fonction de la position courante des
sous-menus.
Dans la premire partie, linitialisation, aprs limportation des classes, nous stockons les
valeurs de position en Y, de chaque sous-menu et de chaque entre de menu :
Dans les actions, lorsque lutilisateur active une des entres du menu (evt.target), nous
ajoutons des actions selon le nom de lentre active :
//-------------------- actions
// activation des sous-menus
menu_mc.addEventListener(MouseEvent.MOUSE_DOWN,ouvrirMenu);
function ouvrirMenu(evt:MouseEvent) {
overwrite:3
});
} else {
y:initSousMenu1Y,
overwrite:3
});
}
}
// dclinaison des instructions pour les entres de menu2 et3
}
lintrieur de chaque condition, une autre condition vrifie si la position courante du

sous-menu concern est en position affiche ou replie. La position replie est dfinie en
reprenant une des valeurs enregistres en amont. Si la valeur enregistre est identique la
position actuelle, alors, le sous-menu na pas boug. Il est donc ramass. Ceci sinverse ds
que le sous-menu est activ, celui-ci est dplac et sa position ne rpond plus la condition
qui alors excute une autre instruction.
La position des sous-menus, lorsquils sont affichs, augmente de lquivalent de leur hau-
teur respective (do la ncessit de les placer prcisment la limite de la zone daffichage,
dans chaque entre de menu) :
overwrite:3
});
Si la condition est vrifie, si le menu est ferm donc, une transition de type TweenMax le
dplace de lquivalent de sa hauteur laquelle nous ajoutons (par scurit), sa position
enregistre. Sinon, il le ramne uniquement sa position pralablement enregistre
(initSousMenu1Y), donc, en position repli (voir Figure 13.18).
Figure 13.18
Mcanisme de
repositionne-
ment des entres
principales du
menu.
Au sein des interpolations, dautres proprits sont utilises. Chacune se termine en invo-
quant directement, grce aux proprits dcouteur onStartListener et onComplete-
Listener, abordes au Chapitre 2, deux autres fonctions. La premire (placeEcouteur)
active le repositionnement continu des objets au dmarrage de linterpolation. La seconde
(retire-Ecouteur) interrompt cette fonction une fois linterpolation acheve :

// suivi des entres
function placeEcouteur(Evt:TweenEvent){
}
function retireEcouteur(Evt:TweenEvent){
removeEventListener(Event.ENTER_FRAME,replacerEntreesMenu);
}
Il serait dommage en effet de conserver active la fonction replacerEntreeMenu et de

continuer de calculer le repositionnement mme lorsquaucune entre du menu nest clique.
Cette fonction qui est associe lvnement ENTER_FRAME sollicite dimportantes ressour-
ces. En dsactivant cette fonction lorsquelle nest plus usite, nous optimisons celles de
lutilisateur.
Un dernier paramtre (overwrite) permet chaque interpolation de reprendre la main si
lutilisateur activait une entre du menu alors quune autre interpolation est dj en cours
dexcution. Linterpolation en cours est dans ce cas interrompue et permet la nouvelle de
dmarrer. Cette proprit est utilise pour viter les conflits lorsque plusieurs interpolations
ciblent les mmes objets, ce qui est notre cas dans ce dispositif de navigation.
Proprit overwrite pour TweenMax
Le langage
La proprit overwrite contrle le comportement des autres interpolations si elles interviennent sur
le mme objet. La valeur attendue est un chiffre entier compris entre 0 et 3 :
0 (NONE). Aucune interpolation nest neutralise. Cette option risque de crer des conflits si
dautres interpolations affectent simultanment le mme objet avec les mmes proprits.
1 (ALL). Cette valeur est celle active par dfaut sauf si la mthode OverwriteMana-
ger.init() est invoque. Toutes les interpolations qui affectent le mme objet sont neutrali-
ses, quelles soient actives ou non. Par exemple :
TweenMax.to(mc,1, {x:100, y:200});
TweenMax.to(mc,1, {x:300, delay:2, overwrite:1});
// cette interpolation crase la prcdente.
2 (AUTO). Cette valeur est celle active par dfaut lorsque la mthode Overwrite-
Manager.init() est invoque. La valeur 2 crase uniquement les proprits communes avec les
interpolations en cours sur les mmes objets. Par exemple :
TweenMax.to(mc,1, {x:300, overwrite:2});
// seule la proprit x de linterpolation prcdente est crase.
3 (CONCURRENT). Interrompt toutes les interpolations, uniquement ayant cours, et qui affec-
tent les mmes objets. Par exemple :
TweenMax.to(mc,1, {x:300, delay:2, overwrite:3});
// cette interpolation ncrase pas la prcdente, car elle intervient
// avec un dlai de2 secondes aprs lautre,
// bien quelles affectent le mme objet mc.
Les conditions sont dclines pour chaque entre. Une action trace permet galement de
visualiser que le ciblage des lments fonctionne bien. Cette action vous permet aussi de
personnaliser facilement ce dveloppement en Y ajoutant vos propres actions, en rapport
avec chaque lien. Il suffit alors de reprendre simplement son nom pour un ciblage dynamique,
comme vu prcdemment.
Dans la troisime partie, un gestionnaire ENTER_FRAME recalcule en la position de chaque
entre de menu :
function replacerEntreesMenu(evt:Event) {
y-initSousMenu1Y);
y-initSousMenu1Y)+(menu_mc.entree2_mc.sousMenu_mc.y-initSousMenu2Y);
}
La premire instruction dtermine la position Y de la deuxime entre. La premire, demeurant

immobile, il nest donc pas utile de la calculer.
Dans cette premire quation, nous spcifions que la position en Y de lentre 2 doit dpen-
dre de la position en Y du bas du sous-menu de lentre 1. Le bas du sous-menu est calcul
en additionnant sa hauteur sa position courante en Y (voir Figure 13.18).
Le principe est le mme pour lentre 3, la diffrence que nous dcalons le calcul dune
ligne, en ajoutant la position courante en Y du deuxime sous-menu.
retenir
Pour raliser des menus qui se repositionnent les uns par rapport aux autres, dynamiquement, nous
devons utiliser un gestionnaire ENTER_FRAME qui dfinit la position de chaque entre de menu par
rapport la position courante du sous-menu qui la prcde.
Le positionnement des sous-entres de menu est important, dans la construction du document, car
cela dtermine leur visibilit lorsquelles sont dployes.
Activer et dsactiver les boutons et les MovieClip

Dans bien des cas, il est ncessaire de dsactiver des liens et des MovieClip initialement
associs un couteur dvnement. Lorsque vous chargez une rubrique par-dessus une
interface dj riche en fonctionnalits, par exemple, il peut tre conflictuel de garder actifs
certains lments laisss en arrire-plan.
Dans cette section, nous prsentons les diffrentes mthodes employes pour neutraliser un
bouton ou un MovieClip. Mais aussi pour matrialiser le pointeur en forme de main sur les
MovieClip et ainsi amliorer lergonomie de certaines mises en scne.
Pour dsactiver uniquement les tats des boutons (haut, dessus et abaiss), utilisez lins-
truction : nomDuBouton.enabled=false;
Pour dsactiver linteractivit dun bouton ou dun MovieClip, utilisez : nomDuBouton-
OuClip.mouseEnabled=false;

Pour dsactiver linteractivit dun bouton ou dun MovieClip ainsi que tout lment
enfant de chaque objet gr avec evt.target (prcision valable pour les clips ou les Sprites) :
nomDuBoutonOuClip.mouseChildren=false;
Pour activer uniquement laffichage de la main, au survol du pointeur, sur un Movie-
Clip, choisissez linstruction : nomDuClip.buttonMode = true;
Pour dsactiver laffichage de la main sur un symbole bouton, prenez linstruction suivante :
nomDuBouton.useHandCursor=false;
Vous pouvez aussi neutraliser les interactions avec lune de ces mthodes :
Masquer un bouton ou un MovieClip laide de la proprit visible, passe sur
false.
Supprimer lobjet de la liste daffichage avec la mthode removeChild().
Supprimer lcouteur associ lobjet bouton ou MovieClip avec la mthode remove-
EventListener.
Attention, ces techniques ne suppriment pas les actions ventuellement en cours dexcution,
elles rendent seulement les objets interactifs indisponibles pour le lancement de nouvelles
actions.
Ciblage des boutons entre SWF imbriqus. Il est souvent utile de pouvoir neutraliser une action
ou ragir en fonction dune action lance dans un document SWF import. Reportez-vous au Chapi-
tre 8 pour en savoir plus sur les techniques de ciblage dobjets dans des contenus imbriqus.
Target et currentTarget. La dfinition des actions sur les symboles boutons et MovieClip se dter-
mine aussi dans le cadre dlments contenus lintrieur dun objet parent et cibls avec les propri-
ts target et currentTarget. Reportez-vous galement au Chapitre 5 pour en savoir plus ce
sujet.
Synthse
Dans ce chapitre, vous avez appris dvelopper des systmes de navigation sophistiqus en
y intgrant des boutons avec des tats visits ou activs. Vous avez appris transformer de
simples liens en zone interfaable et interactive sans conflit avec lenvironnement initial.
Vous avez galement vu comment grer la superposition dynamique de menus droulants.
Vous avez enfin appris raliser un dispositif de navigation global concentr dans une fentre
rduite. Vous tes en mesure de raliser des interfaces souples et ergonomiques.
La communication Flash/HTML
14
Introduction
Interprt la plupart du temps depuis une fentre de navigateur, Flash offre de nombreu-
ses fonctionnalits qui favorisent lchange entre des contenus HTML et Flash. Vous pou-
vez grer lhistorique de navigation de Flash depuis le navigateur. Vous pouvez aussi
appeler une configuration particulire dun document Flash, en fonction de la page
HTML qui y fait rfrence, en invoquant par exemple directement une image-cl du sc-
nario. Naturellement, vous pouvez galement lancer des pages HTML partir de Flash.
Enfin, pour offrir encore plus de fonctionnalits dans linterface de Flash, et rappeler cer-
taines options de la fentre de navigateur, le menu contextuel de Flash est personnalisable
et vous pouvez y attacher les instructions de votre choix. Enfin, vous pouvez, en ajoutant
un paramtre dans la page HTML, configurer une animation Flash pour rendre la scne
transparente.
Dans ce chapitre, nous allons aborder lensemble de ces mcanismes pour vous permettre
dintgrer efficacement vos ralisations au sein dun environnement web HTML. lissue
de ce chapitre, vous serez capable dlaborer facilement des liaisons entre diffrents types
de contenus, raliss en HTML et en Flash.
Menu contextuel du lecteur Flash

Un menu contextuel est accessible par le clic-droit de la souris sur la fentre de lanima-
tion. Si votre souris ne dispose pas du clic-droit, le menu contextuel peut apparatre en
effectuant simultanment un clic de souris et en appuyant sur la touche Contrle du
clavier.
La classe contextMenu de Flash permet de personnaliser une partie du menu contextuel.
Loption daffichage de la version du lecteur reste cependant affiche. Vous pouvez aussi
choisir de conserver certaines des options disponibles par dfaut, comme loption Imprimer,
par exemple.
Dans cette section, nous allons voir comment personnaliser un menu contextuel sur un sym-
bole de type MovieClip. Nous allons permettre lutilisateur dafficher une nouvelle
image, en slectionnant une option du menu contextuel lemplacement dune photo, pour
ce faire (voir Figure 14.1).
Figure 14.1
Aperu de la
scne principale.
Exemples > ch14_communicationFlashHTML_1.fla
Dans le document "ch14_communicationFlashHTML_1.fla", dans la scne principale, un

symbole vegetal_mc dcore la scne. Au-dessus, un MovieClip nomm galerie_mc affi-
che une suite dimages.
Dans le document SWF si lutilisateur effectue un clic-droit sur limage affiche, une
option propose de voir une autre image. Si loption est active, une nouvelle image apparat
aussitt.
Dans la fentre de scnario de la scne principale, le calque Actions affiche le code
suivant :
//--------------------- actions
galerie_mc.stop();
//--------------------- Personnalisation du menu contextuel

// attacher le menu un objet
var menuContextuel:ContextMenu= new ContextMenu();
galerie_mc.contextMenu=menuContextuel;
// purger le contenu par dfaut

menuContextuel.hideBuiltInItems();
var entreesParDefaut:ContextMenuBuiltInItems=menuContextuel.builtInItems;
entreesParDefaut.print=true;
// ajouter les entres du menu

var entree1:ContextMenuItem=new ContextMenuItem("Voir une autre image");
menuContextuel.customItems.push(entree1);
entree1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, fonctionEntree1);
// attacher les fonctions aux entres

LA COMMUNICATION FLASH/HTML 419

function fonctionEntree1(evt:ContextMenuEvent) {
if (galerie_mc.currentFrame==galerie_mc.totalFrames) {
galerie_mc.gotoAndStop(1);
} else {
galerie_mc.nextFrame();
}
}
Pour crer un menu contextuel, nous devons dabord purger les entres existantes. Cest
alors que nous ajoutons de nouveaux lments auxquels nous associerons des fonctions.
Dans notre exemple, la premire instruction interrompt la tte de lecture sur la premire
image du symbole galerie_mc :
//--------------------- actions
galerie_mc.stop();
Nous attachons ensuite un nouvel objet menuContextuel notre galerie. Nous pouvons,
ainsi, spcifier un menu diffrent pour chaque conteneur, si nous le souhaitons :
// attacher le menu un objet
var menuContextuel:ContextMenu= new ContextMenu();
galerie_mc.contextMenu=menuContextuel;
Puis, nous purgeons le menu actuel de ses entres affiches par dfaut.
// purger le contenu par dfaut
menuContextuel.hideBuiltInItems();
Nous utilisons ici plusieurs mthodes. La premire, hideBuiltInItem() supprime tous les
lments sauf les paramtres du lecteur Flash. Il est possible de conserver nanmoins certai-
nes options. Pour cela, il suffit de les ajouter la liste vide. Pour ajouter une option par
dfaut, nous typons un nouvel objet ContextMenuBuiltInItem auquel nous spcifions
loption intgrer :
var entreesParDefaut:ContextMenuBuiltInItems=menuContextuel.builtInItems;
entreesParDefaut.print=true;
Les options disponibles par dfaut sont : forwardAndBack (affiche une image en arrire ou
en avant), loop (boucle), play (lire), print (imprimer), quality (qualit), rewind (rembo-
biner), save (enregistrer) et zoom (zoom). Pour les activer, il suffit de les attacher au menu
dsign et de les passer en true, comme dans notre exemple avec loption dimpression print.
Une fois la structure de base dfinie, nous pouvons personnaliser le menu en y intgrant nos
propres entres :
// ajouter les entres du menu
var entree1:ContextMenuItem=new ContextMenuItem("Voir une autre image");
menuContextuel.customItems.push(entree1);
Pour ajouter une entre, nous crons un nouvel objet ContextMenuItem() et renseignons,
en paramtre, une chane de caractres qui correspond au texte afficher dans le menu.
Pour ajouter cet objet au menu, nous limplmentons comme pour lajouter un tableau,
laide de la mthode push(). Attention, lobjet doit tre implment en tant quentre l-
ment dune liste. Nous devons pour cela prciser la proprit customItems, juste avant
dappliquer la mthode push().
Vous pouvez ajouter autant dentres que voulu. Crez alors autant de nouveaux objets
ContenuMenuItem.
Lorsque les entres ont t ajoutes, il ne reste plus qu leur affecter une action. Nous uti-
lisons, pour tablir cette relation, un couteur avec lvnement MENU_ITEM_SELECT qui
dsigne le moment o lutilisateur slectionne lentre du menu :
entree1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, fonctionEntree1);
Puis, nous dveloppons les actions appeles. Dans notre exemple, la fonction affiche
une nouvelle image de la galerie, avec la mthode nextFrame(). Si cette image est la
dernire de la squence anime, alors, la tte de lecture revient la premire image.
Elle boucle :
// attacher les fonctions aux entres
function fonctionEntree1(evt:ContextMenuEvent) {
if (galerie_mc.currentFrame==galerie_mc.totalFrames) {
galerie_mc.gotoAndStop(1);
} else {
galerie_mc.nextFrame();
}
}
retenir
Pour crer un menu contextuel personnalis, nous utilisons la classe contextMenu.
Les options du menu contextuel de Flash, affiches par dfaut, peuvent tre supprimes ou partiel-
lement conserves. Seule la version du lecteur ne peut tre supprime du menu contextuel.
Navigation Flash vers le HTML

La base de la communication entre un contenu en Flash et une page HTML est la cration
de liens. Ces liens appellent une page HTML, un site distant ou activent louverture dun
logiciel de messagerie, par exemple.
Dans cette section, nous prsentons la syntaxe de cration de lien dans Flash pour appeler
une page HTML et dautres types de rfrences hypertextes (sites, messagerie, PDF).
Sur la scne principale du document "ch14_communicationFlashHTML_2.fla" figure un

bouton affichant un texte simple : ">Retour la page HTML" (voir Figure 14.3).
Figure 14.3
Aperu de la
scne principale.

Dans le fichier SWF, en cliquant sur le bouton, une page HTML est bien appele ; page dont
nous dtaillons dailleurs le contenu dans la section suivante.
Dans la fentre de scnario de la scne principale, sur le calque Actions, nous pouvons lire
le code suivant :
// lien HTML
lienHTML_btn.addEventListener(MouseEvent.CLICK,lienHTML);
function lienHTML (evt:MouseEvent) {
navigateToURL(new URLRequest("ch14_communicationFlashHTML_3b.html"));
}
En ActionScript 3, pour appeler une page HTML, nous utilisons la mthode navigate-
ToURL et spcifions, en paramtre, un objet URLRequest qui fait rfrence une adresse
dfinie sous la forme dune chane de caractres.
Ladresse utilise peut appeler une page web locale, au sein du mme site que la page qui
contient le document Flash. Les exemples suivants invoquent diffrents lments :
une page de contact au format PHP :
navigateToURL(new URLRequest("contact.php"));
une adresse de site web distant :
navigateToURL(new URLRequest("http://www.pearson.fr/"));
louverture dune fentre de messagerie :
navigateToURL(new URLRequest("mailto:contact@pearson.fr?subject=demande de
renseignement"));
louverture dun PDF :

navigateToURL(new URLRequest("nomDuDocument.pdf"));
Pour appeler un site dans une nouvelle fentre, nous ajoutons la cible :
navigateToURL(new URLRequest("http://www.pearson.fr", "_blank"));
Les cibles daffichage. Pour chaque lien hypertexte cr, une cible permet de dfinir la manire
dont le navigateur affiche la page appele. Lorsque les sites web usaient encore, dans le pass, de
structures composes de jeux de cadres (framesets), nous pouvions utiliser les valeurs _self,
_blank, _parent ou _top afin de dterminer si la page appele devait se substituer ou non aux jeux
de cadres. Les liens demeurant dsormais indpendants de ce type de structure, nous nutilisons plus
que_self ou _blank.
_self : la cible _self quivaut ne rien indiquer et signifie que la page appele doit safficher
dans le mme cadre que celui o lon a cliqu.
_blank : la cible _blank appelle laffichage dans une nouvelle fentre de navigateur. Le terme
anglais Blank dsigne un espace vierge, reprsent ici par louverture dune nouvelle fentre. Ne
confondez pas ce mcanisme avec le comportement JavaScript permettant denclencher
louverture dune fentre pop-up, que les usages ont galement proscris. Laffichage dune page
avec _blank tablie en outre une rupture smantique avec la page initiale. Cette technique
daffichage ne doit donc pas tre abuse, surtout dans le contexte de cration de sites qui doivent
rpondre aux rgles lmentaires daccessibilit (voir aussi les sections en fin douvrage sur
laccessibilit).
La plupart des contenus appels saffichent dans la mme fentre que le document Flash,
la place du Flash lui-mme, lexception des scripts JavaScript ou PHP (ou autres) ven-
tuellement invoqus. Les pages pour lesquelles une cible de type _blank est galement
associe saffichent dans une nouvelle fentre de navigateur et prservent laffichage de
votre document dans la fentre initiale.
Attention, cette option nest recommande que pour les liens faisant appel des lments
situs une autre URL, car elle entrane une rupture smantique du flux qui peut perturber
certains utilisateurs.
Lorsque vous dsignez une adresse dun site ou dune page distante, veillez toujours
commencer ladresse par http://.
Si les liens crs appellent des instructions localises dans la page HTML qui contient le
Flash, ou lorsque des actions ne peuvent tre lances que par un navigateur, pour tester
le bon fonctionnement des liens hypertextes, il est recommand de projeter la page dans
un navigateur et non de vrifier les animations seulement depuis Flash en publiant le
fichier SWF. Le lecteur Flash, activ la publication du document, nest pas un naviga-
teur. Ainsi, il ne peut excuter tous les types de liens (notamment pour louverture de la
fentre de messagerie ou lancer les scripts excuts localement ou depuis un serveur dis-
tant).
Crer un lien HTML sans ActionScript dans Flash. Si vous cherchez raliser un lien dans le
flux dun texte, sans style spcifique, sans avoir crer de symbole Bouton ou MovieClip et sans avoir
coder en ActionScript, vous pouvez utiliser les proprits de texte. Slectionnez dabord la portion
de texte rendre cliquable. Et depuis linspecteur de proprits, dans le champ Lien (catgorie
Option), saisissez directement le lien ou le type de rfrence hypertexte appeler. Puis, appuyez sur
Entre pour confirmer la saisie.
Il est galement possible de gnrer un lien HTML dynamiquement si le champ de texte dynami-
que affiche un rendu HTML. En ActionScript, modifiez la valeur du champ de texte en spcifiant,
dans la chaine de caractres du texte afficher, la balise HTML qui permet de crer un lien. Le
texte dynamique de nom doccurrence monTexte_txt utilise, dans lexemple suivant, cette
proprit :
monTexte_txt.htmlText = <a href="http://www.pearson.fr">Lien</a>
retenir
Vous pouvez appeler tout type de contenu extrieur Flash et lafficher dans la fentre de naviga-
teur la place du Flash en utilisant la mthode navigateToURL laquelle vous associez un nouvel
objet URLRequest qui affiche la rfrence hypertexte mentionne.
Il est prfrable de tester les liens dans le contexte du navigateur, voire en ligne, lorsque ces liens se
rfrent des comportements dynamiques excuts ct serveur ou par le navigateur.

Navigation HTML vers Flash
Si vous ralisez un site presquentirement en Flash et que, ponctuellement, vous appelez
une page HTML, vous aimeriez certainement pouvoir faire un lien de retour depuis cette
page, vers un endroit prcis de votre document Flash, et pas forcment vers la premire
image du scnario de votre document Flash. Cela est possible en adoptant une syntaxe par-
ticulire pour les liens placs dans la page HTML et une structure adapte pour la construction
du document Flash.
Dans ce contexte, le lien HTML fait rfrence, en fait, une image cl du scnario du docu-
ment Flash en ajoutant, au nom de la page qui contient le Flash, un dise (#), suivi du nom
dtiquette de limage cible :
nomDeLaPage.html#nomDeLetiquette
Dans cette section, nous prsentons un document SWF structur en vue dtre appel par un
lien HTML. Le lien HTML contient, de son ct, des liens qui activent distinctement
chacune des rubriques du Flash.
Cette technique impose une conception de site dans le scnario, pour lequel chaque type de
contenu est rparti, un endroit distinct des autres.

Exemples > ch14_communicationFlashHTML_3.html
Exemples > ch14_communicationFlashHTML_3b.html
Dans notre exemple, nous disposons dun document Flash dont linterface est distribue sur
le scnario en mode squentiel (voir Figure 14.4). Chaque emplacement dtiquette correspond
une nouvelle rubrique.
Figure 14.4
Aperu
du scnario
de la scne
principale.
Ce document est plac dans la page HTML "ch4_communicationFlashHTML_3.html". En

affichant ce fichier dans le navigateur, nous constatons dans un premier temps que la page
affiche bien lanimation (voir Figure 14.5).
Pour cet exemple, ne publiez pas le document SWF en faisant F12 ou Fichier > Publier. Vous risque-
riez dcraser la page HTML dj mise en forme et qui porte le mme nom que le document
Flash. Pour publier le document SWF, faites simplement Cmd+Entre (Mac) ou Ctrl+Entre (Win-
dows). Pour projeter la page HTML directement dans le navigateur, lancez-la depuis le systme
dexploitation.
Figure 14.5
Aperu dans le
navigateur.
En cliquant sur les liens du menu situs gauche, vous accdez aux diffrentes rubriques
mises en place dans le scnario de Flash (voir Figures 14.6 14.8).
Figure 14.6
En cliquant sur le lien HTML situ en bas du document Flash, vous accdez une page HTML
(vue la section prcdente). Cette page HTML affiche une srie de liens cods en HTML.

Figure 14.7
Figure 14.8
En cliquant sur chaque lien, vous atteignez directement limage du scnario qui correspond
la rubrique active (voir Figure 14.9).
Dans le document Flash, sur la scne principale, se trouve un symbole nomm menu_mc.
Dans ce symbole, nous pouvons distinguer quatre boutons respectivement nomms
accueil, ch1, ch2 et ch3 (voir Figure 14.10).
Dans le scnario de la scne principale, chaque rubrique est place prcisment sous une
tiquette. Laccueil est sous ltiquette accueil. Le Chapitre 1 est sous ltiquette ch1, et
ainsi de suite pour les Chapitres 2 et 3 (voir Figure 14.4). Vous relevez que les noms dti-
quettes sont identiques aux noms doccurrence emprunts pour les boutons du menu.
Figure 14.9
Aperu de la
page HTML
appele.
Figure 14.10
Boutons de
navigation dans
le Flash.
Cela na pas dincidence directe sur la navigation depuis la page HTML, mais simplifie le
codage au sein du document Flash pour une navigation interne.
Placer un nom dtiquette sur une image du scnario. Pour placer un nom dtiquette sur une
image du scnario, vous devez dabord ajouter une image cl (de prfrence vide), sur un calque ddi
cela dans le scnario, lendroit cibl. Puis, cliquez sur cette image du scnario pour en afficher les pro-
prits. Dans linspecteur de proprits, attribuez un identifiant sans caractres spciaux, sans espace, et
ne commenant pas par un chiffre. Appuyez sur la touche Entre pour confirmer la saisie.
Dans le scnario de la scne principale, sur le calque Actions, limage 1, le code affich
est le suivant :
stop();
menu_mc.addEventListener(MouseEvent.CLICK,afficherRubrique);
function afficherRubrique (evt:MouseEvent) {
gotoAndStop(evt.target.name);
}
lienHTML_btn.addEventListener(MouseEvent.CLICK,lienHTML);
function lienHTML (evt:MouseEvent) {
navigateToURL(new URLRequest("ch14_communicationFlashHTML_2b.html"));
}

Tout dabord, une fonction permet de naviguer lintrieur du document Flash en cliquant
sur les liens contenus dans le symbole menu_mc. Cette fonction utilise la proprit target qui
tablit une relation directe entre le nom de loccurrence active et le nom de ltiquette
atteindre. Si nous cliquons sur le bouton ch1, son nom est donc directement pass en para-
mtre de la mthode gotoAndStop() et nous conduit cette image du scnario. Cette techni-
que nous pargne lajout de structures conditionnelles, pour simplement organiser une
navigation dans le scnario.
En dessous, figure le lien qui pointe vers la page HTML nous lavons utilis dans la section
prcdente.
Ce document Flash est donc autonome. Aucune relation ne lattache la page HTML qui sy
rfre. Mais, ce qui permet aux liens de la page HTML de cibler la bonne rubrique, cest quil
est structur avec des tiquettes dont les noms sont repris dans les liens de la page HTML.
Si nous revenons dans la page HTML qui porte le nom "ch14_commu-
nicationFlashHTML_3b.html", dans Dreamweaver par exemple ou directement dans le
code source du document, en slectionnant chaque lien individuellement, vous remarquez
la valeur inscrite dans lattribut href .
Pour appeler la rubrique accueil, le lien HTML fait rfrence dabord la page qui contient
le Flash (ch14_communicationFlashHTML_3.html), suivi directement dun dise (#) et de
ltiquette (accueil). Ce qui donne :
<a href="ch14_communicationFlashHTML_3.html#accueil">texte du lien</a>
Le principe est dclin pour chaque lien de la page HTML.

Mais, dans ce mcanisme relativement simple, nous devons souligner quelques contraintes.
Lorsque le lien de la page HTML atteint directement une image du scnario, les couteurs,
placs sur la premire image du scnario, ne sont plus actifs. Vous devez recopier chaque
couteur plac sur la premire image au niveau de chaque tiquette. Les fonctions, elles,
restent actives. Il nest pas ncessaire de les dupliquer. Dautant quil ne peut y avoir deux
fonctions de mme nom. Dans le calque Actions, limage ch1, ch2 et ch3, nous pouvons
lire le code suivant :
stop();
menu_mc.addEventListener(MouseEvent.CLICK,afficherRubrique);
Nous avons un stop qui empche la tte de lecture de poursuivre lanimation. Nous pouvons
galement lire une nouvelle instance de lcouteur dj plac limage 1.
Tester les liens HTML sur un serveur distant. Avec certaines configurations, il est possible que
les liens HTML qui appellent une tiquette Flash ne soient pas directement actifs sur votre poste de
travail. Placez dans ce cas vos fichiers sur un serveur distant, et excutez nouveau les pages. Les
liens sont bien actifs.
retenir
Il est possible de cibler directement une image du scnario dans Flash, partir dun lien cod en HTML.
Pour cela, nous invoquons un nom dtiquette (#nomEtiquette) directement depuis le lien HTML.
Historique de lanimation Flash dans le navigateur

Le bouton Suivant et Retour du navigateur peuvent contrler laffichage des contenus dans
un document Flash. Pour cela, le site www.asual.com met disposition les classes SWFAd-
dress et SWFObject, gratuitement et en tlchargement libre, ladresse suivante : http://
www.asual.com/swfaddress/.
Installer une classe importe. Pour voir comment installer la classe nativement ou ponctuelle-
ment, reportez-vous au dbut du Chapitre La 3D et PaperVision. Nous nous contentons, pour cet
exemple, de citer le site rfrent. Une documentation dtaille et un forum sont disponibles sur leur
site Internet.
Ces classes fonctionnent sur le mme principe que le mcanisme des liens dune page
HTML vers un contenu Flash, voqu dans la section prcdente. la diffrence que les
liens ne sont pas activs par la page HTML, mais par un script JavaScript interprt par le
navigateur.
Pour les utiliser, vous devez donc crer un document Flash qui sera contenu dans une page
HTML, laquelle fait rfrence plusieurs fichiers JavaScript. Le code propos par le site
www.asual.com pour intgrer le contenu Flash est le suivant :
<script type="text/JavaScript" src="swfobject/swfobject.js"></script>
<script type="text/JavaScript" src="swfaddress/swfaddress.js"></script>
<script type="text/JavaScript">swfobject.embedSWF(website.swf, website,
100%, 100%, 9,expressInstall.swf, {}, {menu: false}, {id: website});
</script>
Dans Flash, vous devez ensuite placer les commandes dans le scnario. Elles seront automa-
tiquement interprtes par le mme JavaScript utilis dans la page HTML. Dans le docu-
ment Flash, sur la premire image du scnario de la scne principale, le site
www.asual.com propose les actions suivantes :
// SWFAddress actions
function btnClick(e:MouseEvent) {
SWFAddress.setValue(e.target.deepLink);
}
function btnRollOver(e:MouseEvent) {
SWFAddress.setStatus(e.target.deepLink);
}
function btnRollOut(e:MouseEvent) {
SWFAddress.resetStatus();
}
// SWFAddress handling
function handleSWFAddress(e:SWFAddressEvent) {
try {
if (currentFrame ==2 && e.value == /) {
play();
} else {
gotoAndStop($ + e.value);
}
} catch(err) {
gotoAndStop($/error/);
}

var title:String = SWFAddress Website;
for (var i =0; i < e.pathNames.length; i++) {
title += / + e.pathNames[i].substr(0,1).toUpperCase() + e.path-
Names[i].substr(1);
}
SWFAddress.setTitle(title);
}
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);
stop();
Nous distinguons les diffrentes fonctions faisant rfrence des occurrences de MovieClip
distribues dans le scnario chaque niveau dtiquette. Ces fonctions sont donc valides
pour toute la dure du scnario. La variable deepLink est simplement mise jour en fonc-
tion de lobjet activ (target). Cest donc ltiquette invoque qui est diffrente en fonction
de lobjet activ.
Dans le scnario, chaque nouvelle rubrique, utilisez un nom dtiquette qui reprend cette
syntaxe:
$/portfolio/
Ce nom commence avec le caractre dollar. Puis, un nom, sans caractres spciaux ni accent
est plac entre deux slashs.
lintrieur de chaque MovieClip qui est utilis comme bouton et dont la navigation doit
tre contrle par JavaScript , www.asual.com propose dutiliser le code suivant :
this.deepLink = /about/;
this.buttonMode = true;
this.addEventListener(MouseEvent.CLICK, (parent as MovieClip).btnClick);
this.addEventListener(MouseEvent.ROLL_OVER, (parent as MovieClip).btnRollOver);
this.addEventListener(MouseEvent.ROLL_OUT, (parent as MovieClip).btnRollOut);
Dans ce code, nous relevons principalement laffectation dune nouvelle valeur pour la
variable deepLink, qui vhicule la cible atteindre par le bouton cliqu. Cette valeur, enre-
gistre par JavaScript, va permettre au navigateur de contrler toute la navigation lint-
rieur du document Flash.
Enfin, dans le dossier de votre document Flash, vous devez placer les lments suivants :
la classe intitule SWFAddress.as ;
la classe intitule SWFAddressEvent.as ;
le dossier de scripts swfaddress/ ;
et le dossier de scripts swfobject/.
Publiez le document SWF. En activant les liens du menu, le document Flash dfile normale-
ment. Mais les commandes de lhistorique du navigateur enregistrent votre navigation. En
activant les boutons Suivant et Retour, vous pouvez revenir dans le document Flash comme
si vous naviguiez de page HTML en page HTML.
Pour utiliser et tester un fichier Flash dans un environnement dj mis en forme, vous
pouvez tlcharger le dossier compress de prsentation dj structur, et disponible
directement en ligne. Pour des raisons lies la protection des droits dauteurs, nous ne
pouvons pas inclure ces ressources dans notre ouvrage. Vous pouvez en revanche les
tlcharger librement ladresse suivante : http://sourceforge.net/projects/swfaddress/
files/swfaddress/SWFAddress%202.4/swfaddress-2.4.zip/download. Dans le rpertoire
tlcharg, diffrentes configurations sont proposes. Pour un dveloppement en
ActionScript 3, utilisez les lments du rpertoire CS3 mis disposition dans le dossier
Samples.
retenir
Il est possible dactiver les boutons Retour et Suivant du navigateur pour crer un historique de la
navigation dans Flash. Pour cela, nous utilisons la classe SWFAddress et SWFObject disponible gra-
tuitement sur le site www.asual.com.
Importer du HTML dans un SWF

Plus quune simple fonctionnalit, lintgration de contenus formats avec des balises
HTML est une solution presque incontournable quand il sagit dintgrer des contenus di-
toriaux. Sans avoir recourir des systmes de gestion de contenu, il demeure assez facile
dimporter et de mettre en forme des textes et des images avec des feuilles de style. Pour
cela, nous utilisons un champ de texte dynamique et, ventuellement, un composant
ScrollBar (ou un ascenseur fait maison, comme vu au Chapitre 2).
Dans cette section, nous utilisons une interface en Flash qui charge un fichier texte et une
feuille de style au format CSS (voir Figure 14.11).
Figure 14.11
Aperu du
document publi.

Exemples > html > styles.css
Exemples > html > texte.txt
Dans le document "ch14_communicationFlashHTML_4.fla", droite de la scne princi-

pale, est plac un aplat de couleur (forme graphique). Au-dessus, un champ de texte dyna-
mique porte le nom doccurrence contenu_txt. sa droite, un composant ScrollBar
porte le nom doccurrence ScrollBar (voir Figure 14.12).
Figure 14.12
Aperu du
document.
Dans linspecteur de composants (Fentre > Inspecteur de composants), la proprit

scrolltargetName, qui dfinit le champ de texte contrler, fait rfrence au nom de notre
champ de texte dynamique (voir Figure 14.13).
Figure 14.13
Fentre
Inspecteur de
composants.
En dehors du document Flash, dans le dossier html/, plac dans le rpertoire des exemples
du livre, nous disposons dun fichier nomm texte.txt qui affiche en partie le code suivant :
content=<p class="titre">A la une</p><p><i>de Arzhur CAOUISSIN</i><br><li><b>
Source:</b> Les marais salant de Gurande</li><li><b>Site Web:</b> <a href=
"http://www.ot-guerande.fr/" target="_blank"><span class="lien">http://www.ot-
guerande.fr</span></a></li></p><p><img src="images/galerie/vignettes/photo2-
vignette.jpg" vspace="0" hspace="5">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, / </p>
Une variable du nom de content ouvre sur une srie de balises HTML qui organisent le flux
dun texte et contiennent, parfois, des rfrences des classes CSS (.titre, .lien) ou
des balises dapparence modifie, dans la feuille de styles (p). Les images importes sont,
elles, dj places localement dans le rpertoire images du dossier des exemples du livre.
Le dossier html/ des exemples du livre accueille cette feuille de style qui adopte la forme
suivante :
p {
font-family: Arial,Helvetica,sans-serif;
font-size:12px;
color: #001622;
}
.titre {
font-size:24px;
color: #001622;
}
.lien {
font-size:12px;
color: #001622;
text-decoration: underline;
}
Dans le scnario du document Flash, le composant Scrollbar et le texte dynamique sont

rpartis entre les formes dhabillage graphique et le calque Actions (voir Figure 14.14).
Figure 14.14
Aperu du
scnario de la
scne principale.
Le calque Actions affiche le code suivant :

// Charge les CSS
var chargeurCSS:URLLoader = new URLLoader();
chargeurCSS.load(new URLRequest("html/styles.css"));
chargeurCSS.addEventListener(Event.COMPLETE, CSSchargees);

// Applique les CSS
function CSSchargees(evt:Event) {
var stylesCSS:StyleSheet = new StyleSheet();
stylesCSS.parseCSS(evt.currentTarget.data);
contenu_txt.styleSheet=stylesCSS;
chargerLeTexte();
}
// Charge le texte
function chargerLeTexte() {
var chargeurTexte:URLLoader = new URLLoader();
chargeurTexte.load(new URLRequest("html/texte.txt"));
chargeurTexte.addEventListener(Event.COMPLETE, placerLeTexte);
}
// Place le texte
function placerLeTexte(evt:Event) {
var cheminVariable:URLVariables=new URLVariables(evt.currentTarget.data);
contenu_txt.condenseWhite=true;
contenu_txt.htmlText=String(cheminVariable.content);
}
Dans cette application, nous activons le chargement des contenus textes et CSS en quatre
temps. Dabord, nous chargeons les styles. Puis, nous les appliquons au conteneur du
futur texte. Une fois les styles appliqus, nous pouvons importer le texte dans ce champ
dynamique.
La premire tape charge la feuille de style :
// Charge les CSS
var chargeurCSS:URLLoader = new URLLoader();
chargeurCSS.load(new URLRequest("html/styles.css"));
chargeurCSS.addEventListener(Event.COMPLETE, CSSchargees);
Il sagit dun chargeur tout simple qui excute une fonction une fois le chargement com-
plt. La fonction appele applique ensuite les styles, sur le champ de texte dynamique :
// Applique les CSS
function CSSchargees(evt:Event) {
var stylesCSS:StyleSheet = new StyleSheet();
stylesCSS.parseCSS(evt.currentTarget.data);
contenu_txt.styleSheet=stylesCSS;
chargerLeTexte();
}
Dans cette fonction, nous dfinissons, dans un premier temps, un objet feuille de style qui
va stocker les styles avant de les appliquer. Nous compilons ensuite les balises CSS avec un
parseur CSS interne Flash, pour que le code soit correctement interprt par Flash. Les
donnes charges (evt.currentTarget.data) sont passes en paramtre du parseur CSS.
Le parseur affecte les styles lobjet StyleSheet que nous venons dinstancier.
Puis, nous appliquons la feuille de style sur le champ de texte dynamique, laide de la pro-
prit styleSheet.
La fonction qui charge le texte est ensuite appele :

// Charge le texte
function chargerLeTexte() {
var chargeurTexte:URLLoader = new URLLoader();
chargeurTexte.load(new URLRequest("html/texte.txt"));
chargeurTexte.addEventListener(Event.COMPLETE, placerLeTexte);
}
Une fois le texte complt, la fonction appele place le texte format dans le champ de texte
dynamique :
// Place le texte
function placerLeTexte(evt:Event) {
var cheminVariable:URLVariables=new URLVariables(evt.currentTarget.data);
contenu_txt.condenseWhite=true;
contenu_txt.htmlText=String(cheminVariable.content);
}
Dans cette dernire fonction, nous crons un objet de traitement de variable URLVariables,
afin de contenir lensemble du code qui se situe, lintrieur du fichier texte.txt, aprs le
signe gal. Cette variable appelle en paramtre le texte que nous venons de charger pour
sen approprier naturellement le contenu.
La proprit condenseWhite permet de supprimer les espaces blancs redondants, comme le
fait tout interprteur HTML.
La dernire instruction ajoute le texte charg, dans le champ dynamique situ sur la scne,
laide de la proprit htmlText. Mais il le convertit au passage sous la forme dune chane
de caractres (transtypage avec la mthode String()), afin dviter que les balises de for-
matage soient galement affiches dans le flux du texte.
retenir
Le HTML peut tre import dans un document Flash et associ une feuille de style CSS. Pour cela,
nous utilisons la mthode parseCSS().
Il nest pas ncessaire de stocker les balises dans un flux XML. Un simple fichier texte peut suffire
contenir les lments imports. Nous utilisons alors un objet URLVariable pour traiter les donnes.
Grer le Flash transparent

Un document Flash affiche, par dfaut, une couleur darrire-plan. Vous pouvez indiquer au
document HTML de ne pas interprter cette donne en vue de rendre transparent larrire-
plan du document Flash.
Lobjectif de cette modification est de permettre dentrevoir le contenu de la page HTML
gnralement place sous lanimation Flash. Cette technique est employe aussi bien pour
agrmenter des contenus qui doivent se coordonner avec une image darrire-plan place
dans une page HTML beaucoup plus large, ou avec un motif rpt larrire-plan de la
page HTML, par exemple. Mais elle est aussi employe dans des sites ditoriaux pour
placer des annonces commerciales au premier plan sur des articles de fond, ou encore

permettre des menus HTML / CSS de passer au devant (index-z) danimations SWF.
Sans la transparence de celui-ci cela ne serait effectivement pas possible.
Pour appliquer un fond transparent un document SWF, dans la page HTML qui le contient,
ajoutez un paramtre wmode et affectez la valeur transparent :
<param name="wmode" value="transparent">
Assurez-vous que cette option est galement renseigne dans les balises embed et dans les
paramtres du JavaScript qui contrle ventuellement laffichage du document Flash (voir
Chapitre 15).
Attention, cette option peut perturber laffichage des caractres dans les champs de texte
dynamiques, surtout sils sont isols par un masque, mme en ajoutant les caractres au
champ de texte dynamique, particulirement partir de Firefox 2 (voir aussi la section
Grer la typographie au Chapitre 15).
retenir
Afin de convertir larrire-plan dun document SWF en fond transparent, nous dfinissons, dans la
page HTML qui contient lanimation Flash, le paramtre wmode la valeur transparent.
Synthse
Dans ce chapitre, vous avez appris tablir des liaisons entre un contenu ralis en Flash et
la page HTML qui le contient, et donc, personnaliser laffichage dun document Flash
selon la page HTML qui sy rfre. Vous avez galement appris organiser un historique de
navigation, personnaliser le menu contextuel de Flash et importer du HTML dans une
zone Flash. Vous savez dsormais facilement intgrer vos dveloppements dans un site web
et favoriser les changes entre contenus HTML et Flash. Des techniques complmentaires
propres limplmentation du Flash dans le navigateur sont abordes dans le chapitre suivant.
La gestion de sites Full Flash

15
Introduction
Par gestion de sites Full Flash, nous entendons le recours exclusif la technologie Flash
pour mettre en forme un contenu web. Le contenu affich est tendu la surface de la fen-
tre du navigateur la plus large possible, voire, sur toute la surface de lcran.
Naturellement, mme dans un site tout en Flash, une premire page HTML sera ncessaire
pour le contenir (gnralement "index.html"). Cest, entre autres, dans cette page laide
de paramtres HTML que nous spcifions aussi la manire dont le contenu Flash peut
tre dploy, avec un affichage lastique ou en mode plein cran. Nous compltons ces
paramtrages laide dinstructions codes naturellement en ActionScript.
Raliser un site tout en Flash peut rapidement isoler lutilisateur dans un dispositif her-
mtique. Nous vous recommandons de rpondre aux exigences minimales des rgles
dergonomie et daccessibilit lorsque vous choisissez ce type de prsentation. Dans ce
chapitre, nous proposons une option pour basculer laffichage en mode plein cran, un
mode normal. Ceci afin de permettre lutilisateur de revenir librement dautres
tches sur son poste de travail sans se sentir oblig de subir un mode de navigation
impos.
Nous allons voir aussi comment organiser les contenus dans Flash, afin de rendre le site
structurellement lastique avec toutes les dimensions dcran, mais surtout, comment ne pas
distordre les contenus distribus lorsquils sont redimensionns.
Il est important enfin de pouvoir intgrer tout type de contenu dans un site ralis exclusive-
ment en Flash. Nous parcourons galement, en fin de chapitre, la gestion du PDF travers
Flash ainsi que limportation de la typographie y compris travers des champs de texte
dynamiques.
lissue de ce chapitre, vous serez en mesure de crer des interfaces tendues qui valorisent
spatialement les contenus.
Basculer en mode plein cran et restaurer laffichage

standard
Quy a-t-il de plus valorisant que de voir son travail projet en plein cran ? Lorsque laffi-
chage en mode plein cran est employ bon escient, cette option peut rellement offrir une
nouvelle dimension pour organiser les contenus. La surface alors disponible pour les
dployer, pour un cran de rsolution standard de 1 024 768 pixels, passe radicalement
de 960 550 pixels, en moyenne, 1 024 768 pixels. Les images, les vidos, la 3D,
prennent une toute autre dimension. Mais, naturellement, tendre la surface des contenus
suppose quelques prcautions :
La bande passante de lutilisateur, dabord, elle, ne change pas. Il convient donc de ne
pas profiter de cette surface supplmentaire pour augmenter le poids des contenus
charger.
Lutilisateur qui navigue ponctuellement dans votre cration a en outre besoin de pou-
voir quitter le mode plein cran facilement pour revenir une autre tche. Nous
devons donc organiser la gestion de laffichage de sorte que lergonomie reste viable
en toute circonstance, avec un bouton de restauration de laffichage en mode normal,
par exemple.
Dans cette section, nous tudions le basculement de laffichage en mode plein cran, ainsi
que la restauration de laffichage en mode normal.
Exemples > ch15_siteFullFlash_1.fla
Dans le document "ch15_siteFullFlash_1.fla", sur la scne principale, nous pouvons voir le

MovieClip fond_mc, une image isole dans un autre MovieClip, puis un bouton et un mas-
que (voir Figures 15.1 et 15.2). droite de la scne, le symbole pleinEcran_btn contient
deux boutons rpartis sur deux images distinctes. Cest un bouton "bascule". Lorsque
laffichage est normal, la premire image est affiche. Mais ds que laffichage bascule en
mode plein cran, cest la seconde image qui apparat.
Figure 15.1
Aperu
de la scne
principale.
LA GESTION DE SITES FULL FLASH 439

Figure 15.2
Scnario de la
scne principale.
Dans la fentre de scnario, le calque actions affiche le code suivant :

//----------------- initialisation
pleinEcran_btn.gotoAndStop(1);
pleinEcran_btn.buttonMode=true;
//----------------- actions
pleinEcran_btn.addEventListener(MouseEvent.CLICK,affichagePleinEcran);
function affichagePleinEcran(evt:MouseEvent) {
if (stage.displayState==StageDisplayState.NORMAL) {
stage.displayState=StageDisplayState.FULL_SCREEN;
} else {
stage.displayState=StageDisplayState.NORMAL;
}
}
Le code de la page HTML qui accompagne ce document ("ch15_siteFullFlash_1.html"),

intgre le Flash en utilisant les paramtres suivants :
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://
download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
width="800" height="600" id="ch15_siteFullFlash_1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="ch15_siteFullFlash_1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="ch15_siteFullFlash_1.swf" quality="high" bgcolor="#ffffff"
width="800" height="600" name="ch15_siteFullFlash_1" align="middle"
allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x
-shockwave-flash" pluginspage="http://www.adobe.com/go/getflash-player_fr" />
</object>
Dans notre exemple, le mcanisme de laffichage plein cran sexcute sous contrle du
navigateur. Le document Flash nest interprt que par le lecteur Flash. Afin dautoriser le
navigateur basculer laffichage du Flash en mode plein cran, nous devons donc ajouter un
paramtre dans la page HTML qui accueille le Flash.
Pour autoriser laffichage en mode plein cran, dans la page HTML, au niveau des balises
qui grent laffichage du document Flash, vous devez ajouter le paramtre AllowFull-
Screen et le dfinir sur true, y compris dans la balise embed :
<param name="allowFullScreen" value="true" />
Pour ce faire, vous pouvez lajouter manuellement votre mise en forme, en saisissant
directement dans le code. Vous pouvez aussi gnrer automatiquement une page HTML
simple, avec ce paramtre, depuis Flash.
1. Pour publier une animation au format SWF avec une page HTML qui autorise laffi-
chage en mode plein cran, dans Flash, affichez les paramtres de publication, en
faisant Fichier > Paramtres de publication.
2. Dans longlet HTML, dans le menu Modle, slectionnez loption Flash seulement avec
Autorisation du Plein cran (voir Figure 15.3).
Figure 15.3
Paramtres de
publication
HTML.
3. Puis, cliquez sur le bouton Publier, en bas de cette fentre, pour gnrer le document
HTML et SWF.
Attention, le code HTML gnr par Flash utilise trois portes pour inclure un objet SWF :
la balise object, la balise embed et une fonction JavaScript : AC_FL_RunContent. Les
navigateurs modernes se servent de ce JavaScript pour implmenter le Flash dans la page.
Il faut donc sassurer que les paramtres adquats sont galement bien prsents dans cette
partie du code :
allowFullScreen, true,
Pour tester laffichage en plein cran, il faudra maintenant excuter le document SWF
partir de la page HTML, dans le navigateur, et non simplement partir du fichier SWF lui-
mme.
Une fois que la page HTML dispose du paramtre AllowFullScreen, les actions du document
Flash qui dfinissent laffichage, peuvent tre ajoutes.
La programmation dun systme daffichage en mode plein cran, dans Flash, est astreinte
lvnement MouseEvent. Les autres vnements nautorisent pas ce type daffichage pour

viter naturellement les utilisations malveillantes de cette fonctionnalit. Seule une partici-
pation intentionnelle de lutilisateur peut activer ce mode daffichage.
Dsactivation des contrles du clavier en plein cran. Notez que laffichage en mode plein
cran dsactive les contrles du clavier. Seul une exportation au format AIR prserve ces options, mais
ce format nest rserv que pour le dveloppement dapplications de bureau, hors fentre du naviga-
teur. Nous ne lutilisons pas dans le cadre de la ralisation dun site web. Pour en savoir plus sur la
technologie AIR, consultez le site http://www.adobe.com/fr/products/air/.
Activer lacclration matrielle pour les contenus riches. Par dfaut, le contenu Flash est
excut avec le processeur. Pour amliorer les performances daffichage des contenus riches
(vidos, 3D, calculs graphiques permanents) affichs en plein cran par exemple, il est possible dacti-
ver lacclration matrielle du poste utilisateur. Pour cela, utilisez le paramtre wmode avec la valeur
GPU, directement dans le code de la page HTML qui contient le Flash. Si la carte graphique du poste
client est assez puissante, elle prendra en charge laffichage du contenu Flash. Attention, ce mode
peut modifier lgrement laspect des contenus. Il doit, de prfrence, ntre activ que pour un seul
document SWF la fois, afin de garantir la stabilit de laffichage dans la fentre du navigateur. Pour
activer ce mode depuis Flash, dans les paramtres de publication, dans la partie avance de longlet
Flash, slectionnez loption Niveau 2-GPU du menu Acclration matrielle (voir Figure 15.4).
Figure 15.4
Activer lacclra-
tion matrielle.
Dans le document Flash, le programme dmarre sur linitialisation :

pleinEcran_btn.buttonMode=true;
Nous indiquons dans un premier temps de caler le bouton bascule, sur la premire image
avec la mthode gotoAndStop(). Afin de laisser galement apparatre la main au survol du
MovieClip, nous passons la proprit buttonMode sur true.
Plus bas, un couteur affecte une action au bouton sur un vnement souris (Mouse-
Event.CLICK). Cette action active laffichage du mode plein cran :
//----------------- actions
pleinEcran_btn.addEventListener(MouseEvent.CLICK,affichagePleinEcran);
function affichagePleinEcran(evt:MouseEvent) {
if (stage.displayState==StageDisplayState.NORMAL) {
} else {
}
}
Nous pouvons basculer lensemble du document (stage) ou un conteneur. Il suffit de spci-

fier le nom de lobjet projeter et de lui appliquer la proprit displayState qui dsigne
son tat en plein cran daffichage. Dans notre exemple, toute la scne est bascule en mode
plein cran. Cest donc lobjet stage qui reoit la proprit displayState. Nous dfinis-
sons, pour cet objet, le type daffichage laide de la valeur stageDisplay-
State.FULL_SCREEN :
Nous avons ajout une condition qui vrifie ltat daffichage. Si laffichage est normal,
nous basculons en plein cran. Si, inversement, ltat daffichage est dj en plein cran,
nous spcifions laction inverse, de restaurer laffichage :
Pour basculer dune icne une autre, nous ajoutons aussi une action gotoAndStop() qui
cible limage correspondant laction disponible pour chaque mode daffichage. Cette
condition permet dappliquer une action bascule sur un mme et unique bouton. Mais
vous pouvez bien entendu sparer les instructions pour les isoler sur des objets distincts.
En projetant la page HTML dans le navigateur, et en activant le bouton pleinEcran_btn, le
site apparat en plein cran. En cliquant nouveau, il revient un affichage normal (voir
Figure 15.5).
Figure 15.5
Affichage en plein
cran.

Quitter le mode Plein cran avec Echap. Indpendamment des contrles de bouton dvelop-
ps manuellement, Flash active, par dfaut, une option de restauration de laffichage si vous appuyez
sur la touche Echap du clavier. Un message apparat pour prvenir de cette option ds le passage en
mode plein cran. Il ny a pas de contrle pour modifier ce message afin de garantir tout utilisateur
une sortie possible, quel que soit le type de dveloppement ajout. Mais nous pouvons dtecter
laction sur le bouton esc pour repositionner notre bouton bascule son tat normal :
stage.addEventListener(FullScreenEvent.FULL_SCREEN, ecoute);
function ecoute(evt:FullScreenEvent){
if (! event.fullScreen) {
}
}
retenir
Le mode daffichage en plein cran se dfinit par la proprit stageDisplayState.
Pour activer laffichage en mode plein cran, la page HTML qui contient le Flash doit galement
contenir le paramtre AllowFullScreen et le passer sur true.
Les actions de clavier sont inactives en mode plein cran.
Le mode plein cran nest disponible qu travers une action souris.
Interface lastique flottante

Le principe dune interface lastique est dappliquer, pendant le redimensionnement de la
fentre du navigateur, les proportions de cette fentre au document Flash, dans le but de
remplir systmatiquement la surface de la fentre quelles quen soient les dimensions.
Cela se construit initialement de manire assez simple puisquil suffit de renseigner une lar-
geur et une hauteur de 100 % dans les proprits de dimensions du Flash du document
HTML. Mais si lon ne veut pas que les contenus soient dforms, et quils occupent, mal-
gr tout, lintgralit de la surface de la fentre, seules des instructions en ActionScript per-
mettent de redistribuer les contenus en contrlant leurs dimensions, leurs proportions et
leurs positions en X et Y.
Dans cette section, nous allons voir comment placer des MovieClip dans la scne de sorte
quelle stende, quelle que soit la taille de la fentre, mais sans jamais distordre les contenus ni
laisser de vide dans le document.
Dans le document "ch15_siteFullFlash_2.fla", sur la scne, nous distinguons larrire-plan

une image de 800 600 pixels place dans un MovieClip contenu_mc (voir Figure 15.6).
Au-dessous, droite, apparat un MovieClip texteDroite_mc, qui contient le titre du livre.
gauche, un autre MovieClip affiche le logo de lditeur. Le filet est intgr dans le clip du
bandeau bleu, cal, lui, en bas de la fentre. Tout en haut du document, apparat aussi un
symbole nomm carte_mc qui reprsente le dpartement du Vaucluse.
Figure 15.6
Aperu du
document.
Figure 15.7
Scnario de la
scne principale.
Dans la fentre Actions (voir Figure 15.7), nous pouvons lire le code suivant :
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
//----------------- actions
stage.addEventListener(Event.RESIZE, quandResizeActif);
function quandResizeActif(event:Event) {
modifierAffichage();
}
function modifierAffichage() {
//
logo_mc.x=20;
logo_mc.y=stage.stageHeight-35;
//
texteDroite_mc.x=stage.stageWidth-20;
texteDroite_mc.y=stage.stageHeight-35;

//
bandeau_mc.x=stage.stageWidth/2;
bandeau_mc.y=stage.stageHeight-(bandeau_mc.height/2);
bandeau_mc.width=stage.stageWidth;
//
contenu_mc.x=0;
contenu_mc.y=0;
contenu_mc.width=stage.stageWidth;
contenu_mc.height=stage.stageHeight;
if (contenu_mc.scaleX<=contenu_mc.scaleY) {
contenu_mc.scaleX=contenu_mc.scaleY;
} else {
}
}
La scne, en ActionScript 3, possde des proprits de largeur (stageWidth) et de hauteur

(stageHeight), que nous avons dj rencontres dans les chapitres prcdents. Grce ces
proprits, nous connaissons tout moment les dimensions du document. Nous pouvons
donc rcuprer ces valeurs pour redfinir, dynamiquement, lemplacement des objets par
rapport la taille du document.
Nous pouvons, par exemple, jouer sur les positions X et Y, pour caler systmatiquement un
logo en bas et gauche. Nous pouvons, aussi, dans le cas o certains lments doivent tre
redimensionns, modifier leurs proprits width et height en proportions des largeur et hauteur
de la scne.
Dans cet exemple, nous plaons les objets tantt selon la largeur du document, tantt selon
sa hauteur. Pour deux dentre eux, limage de fond ainsi que le bandeau du bas, nous redfi-
nissons leurs dimensions en proportion des dimensions de la scne.
Dans la premire partie du code, nous dfinissons le comportement de laffichage de la
scne par dfaut :
stage.scaleMode=StageScaleMode.NO_SCALE;
La proprit scaleMode permet dindiquer si les contenus sont dforms ou non lorsque la
taille de la fentre du document est modifie. La valeur stageScaleMode.NO_SCALE indique
quaucune dformation nest applique aux contenus.
Modes daffichage de la scne. Il existe quatre modes daffichage de la scne courante :

NO_SCALE, EXACT_FIT, NO_BORDER et SHOW_ALL. Elles dfinissent le comportement des objets dans
la scne, lors du redimensionnement du document Flash dans la fentre de navigateur. Les modifica-
tions de proprit width et height, ajoutes ventuellement en ActionScript sur des objets demeurent
prioritaires sur ces options-ci.
NO_SCALE empche les modifications dchelle des contenus mme si les dimensions de la fentre
sont modifies.
EXACT_FIT autorise la distorsion des contenus selon lexacte proportion des dimensions de la
fentre.
NO_BORDER prserve les proportions de la scne quelle que soit la taille de la fentre. La scne est
agrandie et recadre si ncessaire. Le contenu occupe toujours intgralement la fentre.
SHOW_ALL prserve galement les proportions de la scne et lagrandit si ncessaire, mais ne
recadre jamais le contenu. Des marges sont ajoutes autour de la scne si les proportions de la
fentre sont diffrentes de celles de la scne.
La deuxime instruction emploie la proprit align qui dfinit lalignement de la scne, lors-
que la fentre est redimensionne :
stage.align=StageAlign.TOP_LEFT;
Dans notre exemple, la valeur TOP_LEFT dsigne un calage en haut et gauche. Ainsi, si
nous navions pas modifi dynamiquement le positionnement de tous les objets, ils reste-
raient leur place actuelle et le redimensionnement de la fentre impliquerait lajout de
marges droite et en bas du document.
Proprits dalignement de la scne

Le langage
BOTTOM. La scne est aligne sur le bas.

BOTTOM_LEFT. La scne est aligne sur le coin infrieur gauche.
BOTTOM_RIGHT. La scne est aligne sur le coin infrieur droit.
LEFT. La scne est aligne sur la gauche.
RIGHT. La scne est aligne sur la droite.
TOP. La scne est aligne sur le haut.
TOP_LEFT. La scne est aligne sur le coin suprieur gauche.
TOP_RIGHT. La scne est aligne sur le coin suprieur droit.
Nous dtectons ensuite le redimensionnement de la fentre en ajoutant un couteur la

scne (stage). La proprit RESIZE permet dexcuter la fonction durant chaque redimen-
sionnement de fentre et uniquement l :
//----------------- actions
stage.addEventListener(Event.RESIZE, quandResizeActif);
function quandResizeActif(event:Event) {
}
La fonction invoque appelle une autre fonction, autonome :

Nous avons choisi disoler les actions dans une deuxime fonction afin de permettre de les
appeler depuis diffrents emplacements et selon diffrents types dvnements. En loccur-
rence, nous souhaitons excuter les instructions pendant le redimensionnement, mais aussi
ds louverture du document. Si nous ne redfinissions pas le positionnement ds louver-
ture de lanimation, nous risquerions en effet dobserver un saut ou un dcalage entre la
position courante et celle qui est redfinie au premier redimensionnement.

La fonction appele redfinit les proprits x, y, width et height des diffrents contenus
selon les largeurs et hauteur de la scne :
function modifierAffichage() {
//
logo_mc.x=20;
logo_mc.y=stage.stageHeight-35;
//
texteDroite_mc.x=stage.stageWidth-20;
texteDroite_mc.y=stage.stageHeight-35;
//
bandeau_mc.x=stage.stageWidth/2;
bandeau_mc.y=stage.stageHeight-(bandeau_mc.height/2);
bandeau_mc.width=stage.stageWidth;
//
contenu_mc.x=0;
contenu_mc.y=0;
} else {
}
}
Les premires lignes rcuprent simplement les valeurs stage.stageWidth et stage.stage-

Height. Des marges sont toutefois ajoutes ou soustraites en fonction de la position relle-
ment souhaite pour chaque objet. Par exemple, le symbole logo_mc est plac systmati-
quement 20 pixels du bord gauche de la fentre, mais toujours cal en bas 35 pixels du
bord (stage.stageHeight-35 quivaut dire : la hauteur moins 35 pixels).
Lorsque vous positionnez les objets, pensez tenir compte de leur point dalignement (cen-
tre) et de leur hauteur ou largeur. Ceci est dterminent pour caler parfaitement les lments
dans la scne.
Le MovieClip bandeau_mc est positionn en Y selon la mme hauteur de fentre. Mais il est
galement redimensionn en largeur (width) selon la largeur effective de la fentre. Le sym-
bole occupe donc toute la largeur de la scne quelle quen soit la taille. Nous avons bien
entendu pris soin dy placer des graphismes qui supportent cette distorsion.
La dernire partie de la fonction affecte galement les positions X et Y, ainsi que les dimensions
width et height de lobjet contenu_mc. Mais, nous ajoutons ici une condition :
contenu_mc.x=0;
contenu_mc.y=0;
} else {
}
Lorsque la fentre est tire en largeur, pour remplir la surface de la fentre, nous devons
tirer le contenu galement en largeur. Mais, afin de prserver ses proportions, nous devons
ltirer aussi dans le sens de la hauteur, hors champ (voir Figure 15.8).
Figure 15.8 Extension en largeur

tirement de la fentre
du contenu
la verticale.
Extension en hauteur
de l'image
Inversement, lorsque la fentre est tire en hauteur, nous devons agrandir le contenu en
hauteur et, indirectement, en largeur, hors champ (voir Figure 15.9).
Figure 15.9 Extension en largeur

tirement de l'image
du contenu
lhorizontal.
Extension en hauteur
de la fentre
Il en rsulte que limage remplit la surface de la fentre en toutes circonstances.

Mais, nous ne pouvons la fois dire que la largeur du contenu correspond la largeur de la
fentre et que la hauteur de ce mme contenu quivaut galement la hauteur de la fentre.
Car il suffit que la fentre naffiche pas les mmes proportions que celles du contenu pour
que les instructions entrent en conflit. Pour rsoudre ce dilemme, nous devons spcifier une
action qui active lun ou lautre des redimensionnements, en fonction de la plus grande

longueur observe. Si cest la largeur qui est plus grande que la hauteur, alors, nous tirons
limage en hauteur. Si, en revanche, cest la hauteur de la fentre qui est plus importante,
alors, nous tirons limage dans sa largeur. Comme, dans les deux cas, limage conserve ses
proportions, elle remplira toujours la surface de lcran.
Nous prcisons alors, dans notre fonction, la condition suivante :
} else {
}
Si lchelle de redimensionnement du contenu en largeur (scaleX) est infrieure son redi-

mensionnement en hauteur (scaleY) (donc, si la fentre est plus haute que large), alors,
lchelle en largeur (scaleX) prend pour valeur lchelle de la hauteur (scaleY) :
}
Inversement, si cest la largeur qui est plus grande que la hauteur, dans ce cas, nous appli-
quons lchelle de la hauteur (scaleY) sur lchelle de la largeur (scaleX) :
else {
}
Cette technique permet de redimensionner la fentre dans des proportions libres, diffrentes
de celles de la scne, et dlargir quand mme le contenu, mais sans jamais y appliquer de
distorsion. Seule une transformation homothtique est applique.
Pour assurer une remise lchelle de qualit correcte, pensez galement appliquer, aux
contenus, un lissage. Pour en savoir plus sur cette technique, reportez-vous au chapitre
consacr aux API daffichage et de filtres. Dans ce document, nous avons simplement appliqu
un lissage depuis la fentre Bibliothque.
Principe de flottement faon styles CSS. En dclinant le principe de redimensionnement, ici

voqu, et celui du repositionnement, dvelopp dans la section des menus droulants, vous pouvez
aussi concevoir une interface dans laquelle les objets flottent de manire relative, les uns par rapport
aux autres, et se redimensionnent selon la taille effective de la fentre du navigateur, la manire
dune page HTML, par exemple.
retenir
Pour placer et redimensionner des objets en fonction de la taille de la fentre, nous utilisons les pro-
prits stageWidth et stageHeight de la scne.
Afin dappliquer une mise lchelle homothtique, nous ajoutons une condition qui dtermine le
redimensionnement en fonction de la largeur la plus grande. Cette largeur est ensuite utilise pour
dfinir le cfficient de redimensionnement.
Grer le PDF
Une interface tout en Flash implique la ncessit dy importer diffrents types de mdias,
afin, tout simplement, de ne pas avoir sortir de cet espace pour y accder. Typiquement,
cela pose problme lorsquun lien, dans Flash, cible un document PDF. Dans ce contexte, le
format PDF, qui requiert louverture dAcrobat, oblige lutilisateur sortir du site tout en
Flash pour pouvoir lire un contenu.
Dans cette section, bien que cela soit structurellement impossible, nous abordons les contour-
nements qui permettent dintgrer malgr tout un document PDF dans Flash, afin de
permettre lutilisateur de rester dans son univers dvelopp tout en Flash.
Diffrence structurelle entre Flash et Acrobat. Flash compile des donnes la publication du
document. Acrobat, linverse, ne gre quun amonclement de scripts assembls dans un certain
ordre, sans les compiler. Acrobat agit un peu la manire dune page HTML qui gre des fonctions
JavaScript et de mdias zipps. La structure des documents tant trs diffrente, limplmentation du
format non compil dans le format compil est peu concevable. Linverse, en revanche, se fait facile-
ment. Vous pouvez parfaitement placer un contenu SWF dans un document Acrobat.
Il nest pas possible dafficher dynamiquement un PDF dans linterface de Flash. Mais, il
est possible dimporter un PDF physiquement, dans la scne, avant publication. Il est gale-
ment possible de gnrer dynamiquement des fichiers au format PDF partir dun docu-
ment Flash. Vous pouvez aussi appeler un fichier PDF travers un hyperlien en utilisant la
mthode navigateToURL, aborde au Chapitre 14. Quelques services en ligne proposent
aussi de vous fournir dans un format compatible Flash, un PDF recompil.
Pour importer physiquement un PDF dans Flash, vous devez dabord le convertir dans un
autre format via InDesign ou Illustrator, par exemple, les formats compatibles avec Flash
sont lEPS, le format AI et le XFL. Naturellement, les formats dimages sont galement
compatibles, mais alourdissent considrablement le poids des contenus et la gestion des
documents.
1. Depuis InDesign, faites Fichier > Exporter (Ctrl+E pour Windows ou Cmd+E pour
Macintosh).
2. Puis, dans la fentre dexportation, dans le menu Format, choisissez "Adobe Flash CS4
prof (XFL)". Validez.
3. En validant, une bote de rglage apparat (voir Figure 15.10).
4. Spcifiez un texte InDesign en texte Flash, afin de prserver ldition du document.
Puis, validez.
5. Depuis Flash, faites ensuite Fichier > Ouvrir.
6. Slectionnez le document XFL et confirmez limportation.
Le document est import dans la scne et vous pouvez lanimer. Le procd est similaire
avec Illustrator.
Vous pouvez aussi convertir un PDF en livre feuillets depuis InDesign. Reportez-vous
galement au Chapitre 9 pour en savoir plus ce sujet.

Figure 15.10
Scnario de la
scne principale.
Convertir un PDF en SWF avec FlashPaper. Il est possible de gnrer un document Acrobat PDF
en fichier Flash SWF, la vole. Lutilitaire FlashPaper, dvelopp par la socit Macromedia, et com-
patible uniquement avec Windows, offre cette possibilit. Une version dvaluation de ce programme
est disponible ladresse suivante : http://www.adobe.com/cfusion/tdrc/index.cfm?pro-
duct=flashpaper.
Cration dynamique de fichiers PDF. Pour gnrer dynamiquement un PDF, nous pouvons uti-
liser la classe byteArray. Reportez-vous au Chapitre 5 du livre de Thibault Imbert, ditions Pearson,
Pratique dActionScript 3, pour en savoir plus ce sujet.
retenir
Il est possible dimporter un document PDF au sein dune animation Flash. Pour cela, nous devons
au pralable le convertir en dur depuis une application graphique ou dynamiquement.
Grer la typographie
La gestion de la typographie, dans une page web, soulve toujours de nombreuses interro-
gations. Usuellement, une page web dpend des polices prsentes sur le systme de lutili-
sateur pour afficher un texte. Dans une page HTML, nous spcifions alors la police
employer. Si celle-ci est absente de la configuration de lutilisateur, cest la police active
par dfaut, par le navigateur, qui prend le relais (gnralement Times).
Dans Flash, cest diffrent. Flash propose trois modes de traitement pour le texte : les textes
statiques, les textes dynamiques et les textes de saisie. Nous ne comptons pas les textes
vectoriss sous forme de graphisme ni les textes vhiculs sous la forme dimages.
Vectoriser un texte dans Flash. Pour vectoriser un texte dans Flash, faites deux fois de suite
Ctrl+B (Windows) ou Cmd+B (Mac). Cette commande casse lenveloppe courante, quelle soit un bloc
de texte ou un symbole. Pour le texte, la premire action spare les lettres, la seconde les vectorise.
Petit rappel mnmotechnique : pensez B comme Break qui signifie casser en anglais. Une fois le
texte vectoris, pensez galement le regrouper afin dviter tout risque de morcellement si vous
devez ensuite le manipuler. Pour le regrouper, faites Ctrl+G (Windows) ou Cmd+G (Mac). Attention,
un texte vectoris nest plus ditable. Mais la forme graphique devient modifiable avec les outils de
dessin (Plume, pot de peinture, outils de slection).
Les textes statiques

Les champs de textes statiques intgrent la forme de contour vectorielle des caractres, la
publication du document. Les caractres sont donc pris en charge nativement.
Affichage des polices dans Flash. Attention, toutes les polices affiches correctement dans le
document Flash ne sont pas ncessairement intgres la publication. Pour vrifier quune police est
intgre, vrifiez que loption de menu Affichage > Mode Aperu > Texte anti-alias, est bien coche.
Si une police savre non intgrable, elle apparat alors avec un crnelage dans le document. Vous
pouvez ainsi en choisir une autre depuis le menu Famille de caractre, de linspecteur de proprits.
Les documents Flash peuvent utiliser des polices Type 1 PostScript, TrueType et bitmap
(uniquement sur Macintosh) de taille maximum de 255 points. Les textes sont Unicode
depuis la version du lecteur Flash 7.
Les textes dynamiques

Les textes dynamiques et de saisie, en revanche, utilisent les polices de priphrique (_sans,
_serif, ou _typewriter). Ces polices sont disponibles en tte de liste dans la liste des polices
de linspecteur de proprits. La police _sans correspond de lArial ou de lHelvetica. La
police _serif, un Times. La police _typewriter un Courier.
Si vous souhaitez ajouter une typographique spcifique un texte dynamique, cela reste
possible. Il suffit den ajouter les caractres ncessaires, sur chaque champ concern, depuis
linspecteur de proprits.
1. Pour ajouter une police un champ de texte dynamique, slectionnez le champ de texte
avec loutil de slection (flche noire).
2. Dans lInspecteur de proprits, cliquez sur Intgration de caractres (voir Figure 15.11).
3. Une bote de dialogue souvre.
4. Dans la liste qui apparat, slectionnez uniquement les caractres utiles pour optimiser
autant que possible le poids du document (voir Figure 15.12). Au besoin, ajoutez
manuellement les caractres manquants, dans le champ Inclure ces caractres.
Lorsque vous ajoutez des caractres manuellement, relevez que chaque caractre ajout
augmente dautant le poids du fichier. viter, par consquent, de recourir un nombre trop
vari de polices de caractre dans un mme document.
Lorsque vous saisissez les caractres ajouter, pensez ajouter aussi lespace, les sigles
montaires et les caractres accentus ou spciaux. Les listes de caractres par dfaut tant
conues initialement pour un public anglo-saxon, il convient dajouter ceux qui ne figurent
pas dans cet alphabet, comme les caractres , , , , , , , , , , , , , , et espace.

Figure 15.11
Inspecteur
de proprits.
Figure 15.12
Intgration
de caractres.
Dans la Figure 15.12, nous avons pris soin de ne slectionner que les listes de caractres
Minuscules, Majuscules, Chiffres et Ponctuations, puis de saisir, la main, les caractres
spciaux manquants, directement dans le champ Inclure les caractres. La liste "Tous" intgre
absolument tous les caractres, vous augmenteriez considrablement le temps de publica-

tion et le poids de votre document, en la slectionnant. Il est en outre prfrable de restrein-
dre le choix aux caractres utiles uniquement et dy ajouter, si ncessaire, les caractres
manquants, dans le champ Inclure les caractres, prvu cet effet.
Attention, loption Remplissage automatique nenregistre que les caractres affichs dans le
champ actif.
Les polices et les masques. Si vous utilisez des champs de textes dynamiques ou de saisie, avec
des masques, vrifiez toujours la saisie ou laffichage sur des postes utilisateurs diffrents. Selon la
configuration du systme, certains caractres peuvent ne pas apparatre. Dans ce cas, pensez dj
ajouter les caractres manquants. Notez que le paramtre wmode utilis pour un affichage transpa-
rent du document Flash (vu prcdemment) peut aussi neutraliser certains caractres la saisie (aro-
base), si un masque est utilis, avec danciennes versions du lecteur Flash. Dans ce cas, vitez
dutiliser conjointement les masques et les champs de textes dynamiques.
Les bibliothques partages de symboles et de typographies

Le principe de la bibliothque partage est de centraliser, sous la forme dun fichier SWF ou
SWC, un ou plusieurs objets de la bibliothque dun document Flash. Cette technique per-
met doptimiser la gestion dobjets rcurrents sans avoir les stocker lintrieur de chaque
document SWF qui doit les utiliser. Sachant combien le poids dune typographie peut tre
compromettant dans llaboration dun site web, et combien son utilisation affecte, pour-
tant, les identits graphiques, rassembler une typographie dans une bibliothque partage
peut nous affranchir de quelques contraintes.

Exemples > ch15_siteFullFlash_3b.fla
Dans cette section, nous prsentons comment exporter une police partir dun document
Flash et lintgrer dynamiquement tout autre document SWF. Les deux fichiers dexemple
"ch15_siteFullFlash_3.fla" et "ch15_siteFullFlash_3b.fla" reprennent cette procdure.
Pour partager une typographie, dans le menu contextuel de la fentre de bibliothque dun
document Flash, choisissez Nouvelle police. Une fentre de dialogue apparat (voir Figu-
res 15.13 15.15).
1. Dans le champ Nom, inscrivez le nom que vous souhaitez attribuer votre police parta-
ge.
2. Dans le menu Police, slectionnez la typographie de votre choix. Ajoutez ventuelle-
ment quelques options comme litalique, le gras, si ces proprits sont disponibles par
exemple.
3. Dans la partie centrale, activez loption Exporter pour ActionScript si vous souhaitez
pouvoir disposer de la typographie en programmation pour des objets TextField. Et
attribuez dans ce cas un nom de classe la police.

Figure 15.13
Ajout dune
police partage
la bibliothque.
4. Dans la partie infrieure, activez loption Exporter pour le partage lexcution.

Dans le champ URL, maintenant actif, inscrivez le nom de publication du fichier
SWF de ce document Flash. Puis validez. La fentre de bibliothque affiche la nou-
velle police. La colonne Liaison indique que lobjet est prt pour lexportation (voir
Figure 15.14).
Figure 15.14
Affichage de la
police partage
dans la biblio-
thque.
5. Procdez de mme pour des symboles, en crant par exemple un movieClip. Puis, dans
la fentre de bibliothque, affichez les proprits contextuelles du movieClip en faisant
un clic-droit > Proprit, sur le symbole. La fentre de proprits du symbole apparat
6. Activez les options dexportation et validez.
Figure 15.15
Ajout dun sym-
bole partag la
bibliothque.
La fentre de bibliothque affiche galement le MovieClip et son statut dobjet pour

lexportation (voir Figure 15.16).
Figure 15.16
Affichage du sym-
bole partag dans
la bibliothque.
7. Sans ncessairement utiliser les objets dans la scne de ce document, publiez-le au format
SWF en faisant Ctrl+Entre (Windows) ou Cmd+Entre (Macintosh).
8. Puis, dans un nouveau document Flash que vous aurez pralablement enregistr, impor-
tez les lments partags par glisser-dpos de la bibliothque du document exportateur
vers la scne du document importateur (voir Figure 15.17).
9. Pour accder la bibliothque dun autre document, depuis le sommet de la fentre de
bibliothque du document actif, slectionnez dans la liste droulante, le nom du document
contenant les objets importer.

Figure 15.17
Importation dyna-
mique des objets
partags dans un
autre document..
La fentre de bibliothque du nouveau document affiche le statut des objets imports

une fois ceux-ci ajouts (voir Figure 15.18).
Figure 15.18
Affichage des
objets imports
dans la biblioth-
que du nouveau
document.
10. Dans la scne du nouveau document, placez une occurrence du MovieClip import et
ajoutez un champ de texte en y inscrivant quelques mots. Pour appliquer la police
importe au champ de texte, depuis linspecteur de proprits du texte, dans le menu
Famille de caractre, slectionnez le nom que vous avez attribu votre police, dsor-
mais disponible. Le champ de texte affiche la police slectionne. Dans le document
"ch15_siteFullFlash_3b.fla", nous utilisons les objets partags du document
"ch15_siteFullFlash_3.fla" (voir Figure 15.19). Publiez le nouveau document au format
SWF.
11. Puis, revenez dans le document initial pour modifier la forme intrieure du MovieClip
original et la police. Pour la modifier, depuis les proprits de la police, disponibles
partir de la fentre de bibliothque, slectionnez une autre famille de caractres et validez
votre modification. Publiez nouveau ce document.
Figure 15.19
Utilisation
des objets
partags dans
le document..
12. Sans republier le nouveau fichier Flash qui importe les objets partags, excutez direc-
tement son format dj publi en SWF. Les objets sont instantanment mis jour..
Le nouveau moteur de texte Text Layout Framework. Adobe prvoit limplmentation dun
nouveau moteur de gestion de texte pour les versions venir de Flash. Il permet de grer le flotte-
ment du texte sur plusieurs colonnes, dynamiquement, la chasse, linterlignage, la slection, comme
dans un vritable logiciel de mise en pages. Ce moteur est actuellement disponible en version bta.
Vous pouvez le tester ladresse suivante : http://labs.adobe.com/technologies/textlayout/.
retenir
Il est possible de partager des symboles et des polices de caractre pour plusieurs documents Flash,
simultanment. Pour cela, nous activons loption Exporter pour le partage lexcution, depuis les
proprits des objets disponibles partir de la bibliothque et importons cette bibliothque dans
dautres documents Flash.
Importer Flash AS1/AS2 dans Flash AS3

Les documents cods en AS1 ou AS2 utilisent le mme moteur (AVM1). Le langage
ActionScript 3 est, lui, structurellement diffrent des prcdentes versions et utilise un nou-
veau moteur (AVM2). Les documents Flash bass sur AS3 disposent donc dune architec-
ture diffrente des anciens documents Flash. Si nous pouvons facilement importer des
contenus AS1 ou AS2 anims dans un document AS3, partir dun simple chargeur, nous ne
pouvons pas, en revanche, y apporter de linteractivit. Pour cela, nous devons ouvrir une
connexion entre les deux formats de fichier, par nature dissocis, laide de la classe
LocalConnexion.

Pour comprendre comment utiliser cette classe, nous devons admettre que le fichier AS1/
AS2 dune part et AS3 dautre part, sont hermtiques lun envers lautre, et que seul un
objet localConnexion permet douvrir une porte de chaque ct des deux animations pour
transmettre des requtes dAS3 vers AS2.
Il devient alors facile dinvoquer une fonction AS2, depuis une instruction place dans un
document AS3, par simple identification du nom de la connexion et de la fonction, dfinies
dans le document AS2.
Le fichier AS3 metteur est appel fichier denvoi. Il contient la mthode appeler. Le
fichier denvoi doit contenir un objet LocalConnection et un appel de la mthode send().
Lautre fichier, le fichier AS1 ou AS2, est dit de rception. Il sagit de celui qui appelle la
mthode. Le fichier de rception doit contenir un autre objet LocalConnection et un appel
de la mthode connect().
Dans cette section, nous prsentons un document AS3 qui contient un bouton. Ce bouton
affecte les proprits dun symbole de type MovieClip, contenu dans un fichier AS2
import.
Exemples > ch15_siteFullFlash_4_AS3.fla

Exemples > ch15_siteFullFlash_4b_AS2.fla
Le document "ch15_siteFullFlash_4_AS3.fla" affiche une scne exporte pour Flash 10 et

ActionScript 3.0. Sur cette scne figure un bouton nomm connexion_btn (voir
Figure 15.20).
Figure 15.20
Aperu du
document AS3.
Le fichier "ch15_siteFullFlash_4b_AS2.fla", affiche quant lui une scne exporte pour

ActionScript 2.0 et le lecteur Flash 8. Sur cette scne, figure un MovieClip nomm
symbole_mc (voir Figure 15.21).
Figure 15.21
Aperu du
document AS2.
En publiant le document AS3, le fichier AS2 est dabord import en premier plan. En cli-
quant sur le bouton connexion_btn, du document AS3, le symbole du fichier AS2 subit une
rotation de 20 (voir Figure 15.22).
Figure 15.22
Interaction AS3
vers AS2.
Dans la fentre Actions du document AS2 ("ch15_siteFullFlash_4b_AS2.fla"), nous pouvons

lire le code suivant :
// rcepteur
var recepteur:LocalConnection = new LocalConnection();

// active la connexion
recepteur.connect("maConnexionAS2");
// dfinition de la fonction AS2 active depuis le document AS3

recepteur.monActionProgrammeeAS2=function () {
// actions AS2
symbole_mc._rotation+=20;
}
Dans le code du document AS3 ("ch15_siteFullFlash_4_AS3.fla"), nous lisons le pro-

gramme suivant :
// chargeur
var chemin:URLRequest=new URLRequest("ch15_siteFullFlash_4b_AS2.swf");
addChild(chargeur);
// connexion avec SWF AS2

var emetteur:LocalConnection = new LocalConnection();
connexion_btn.addEventListener(MouseEvent.CLICK,AccesAS2);
function AccesAS2(evt:MouseEvent ) {
// nom de la connexion dfinie dans AS2, nom de la fonction dfinie dans AS2
emetteur.send("maConnexionAS2", "monActionProgrammeeAS2");
}
Dans le premier document (AS2), nous commenons par ouvrir une connexion avec un
objet LocalConnexion :
// rcepteur
var recepteur:LocalConnection = new LocalConnection();
la suite, nous activons cette connexion, laide de la mthode connect(). En paramtre,

nous spcifions le nom de cette connexion invoque plus tard dans le fichier AS3.
// active la connexion
recepteur.connect("maConnexionAS2");
Puis, sur cet objet, nous dfinissons une fonction dont le nom (monActionProgrammeeAS2)
sera galement invoqu plus tard dans le document AS3.
// dfinition de la fonction AS2 active depuis le document AS3
recepteur.monActionProgrammeeAS2=function () {
// actions AS2
symbole_mc._rotation+=20;
}
Pour terminer, linstruction applique une rotation de 20 sur le clip symbole_mc plac sur la
scne principale (symbole_mc._rotation+=20).
Dans le document AS3 appelant, dans la fentre des actions, nous commenons par charger
le fichier SWF cod en AS2. Puis, plus loin, nous ouvrons galement une connexion en dfi-
nissant un nouvel objet LocalConnexion :
// connexion avec SWF AS2
var emetteur:LocalConnection = new LocalConnection();
connexion_btn.addEventListener(MouseEvent.CLICK,AccesAS2);
function AccesAS2(evt:MouseEvent ) {
// nom de la connexion dfinie dans AS2, nom de la fonction dfinie dans AS2
emetteur.send("maConnexionAS2", "monActionProgrammeeAS2");
}
lintrieur de la fonction appele par le gestionnaire dvnement en AS3, nous asso-

cions, lobjet metteur, la mthode send(). Cette mthode envoie une requte qui invoque
le nom de la connexion (maConnexionAS2) et la fonction (monActionProgrammeeAS2),
pralablement dfinies dans le fichier AS2.
En publiant le document, et en cliquant sur le bouton du document AS3, la liaison entre les
deux fichiers est tablie.
Il est possible dappeler un document hberg sur un autre serveur et dun autre domaine que celui
o figure le fichier appelant. Vous devez, pour le document appel, ajouter linstruction qui autorise
le lecteur communiquer avec un autre domaine. Pour cela, entre la dfinition de lobjet Local-
Connexion et lactivation de la connexion, ajoutez une des deux instructions suivantes.
Si le fichier AS3 est sur un domaine diffrent mais identifi, inscrivez :
recepteur.allowDomain("http://www.nomdusite.com");
Ou bien, si le document AS3 est sur un domaine diffrent mais inconnu, inscrivez :
//recepteur.allowDomain("*");
retenir
Les documents AS1/AS2 peuvent tre imports dans un document AS3 laide dun simple chargeur,
mais aucune interaction nest possible avec le document import.
Pour autoriser linteraction du document AS1/AS2 charg, nous devons tablir une connexion
laide dun objet LocalConnexion. Le document AS3 peut alors invoquer des fonctions dveloppes
dans le fichier AS1/AS2, dune ancienne version de langage.
Synthse
Dans ce chapitre, vous avez appris redistribuer les contenus lcran, en fonction des
dimensions dune fentre, et projeter ces contenus dans un affichage de type Plein cran,
tout en permettant lutilisateur de restaurer laffichage initial pour la ralisation dun site
full Flash. Vous avez galement appris grer laffichage de la typographie, lintgrer si
ncessaire et la partager, ainsi que des symboles, avec dautres documents. Vous savez
aussi comment importer physiquement un document PDF pour la publication et viter de
sortir dun univers tout en Flash. Vous avez enfin appris interagir depuis un document
AS3, avec un contenu dvelopp en ActionScript 1 ou 2. Vous tes prsent en mesure de
raliser des systmes daffichage sophistiqus et optimiss, qui valorisent les contenus en
Flash, au-del de la surface daffichage astreinte aux dimensions utiles dune fentre de
navigateur, toutes versions de Flash confondues.
Les solutions de rfrencement

16 du Flash
Introduction
Flash a pendant longtemps t rput pour offrir un contenu totalement opaque pour les
moteurs de recherche. Mais, voici la chose rvolue. Google et Adobe collaborent maintenant
pour favoriser la reconnaissance des contenus dits au format Flash.
Depuis le printemps 2008, tout contenu Flash structur selon les recommandations de Google
est officiellement enregistr et prsent de la mme manire que tout autre contenu HTML,
aussi stricte en soit la mise en forme. Nous dtaillons, dans ce chapitre, les recommanda-
tions mises par Google pour favoriser lindexation dun contenu ralis en Flash.
Nous abordons aussi dautres aspects comme : le pageRanking qui rvle la pertinence dun
site en fonction de sa popularit autant que par son contenu ; les mtadonnes XMP ajoute
de manire intrinsque aux contenus Flash ; lintgration XHTML stricte plus favorable la
lisibilit dun contenu Flash ; et laffichage de contenu HTML alternatif pour les utilisateurs
qui ne disposent pas du lecteur Flash.
lissue de cette annexe, vous saurez rendre vos ralisations parfaitement visibles pour les
moteurs de recherche. Vous saurez mme comment vous positionner mieux que des contenus
raliss en HTML simple.
Intgration XHTML stricte

Les annuaires sont sensibles laccessibilit des contenus. La manire dintgrer les
fichiers Flash favorise donc le positionnement du site.
Lors de lintgration dun fichier SWF dans une page HTML, Flash et Dreamweaver utili-
sent les balises <embed> et <object>. La balise <embed> ne fait pas partie des spcifications
des normes strictes dintgration XHTML. Pour intgrer le Flash proprement, il est prfrable
demployer uniquement la balise <object>.
Le code de base employ pour une intgration stricte du Flash est :
<object type="application/x-shockwave-flash" data="monDocumentFlash.swf"
width="800" height="600">
<param name="movie" value="monDocumentFlash.swf" />
<p>Texte secondaire alternatif</p>
</object>
Il est prciser que la balise <object>, employe seule, active aussi un blocage dans Inter-
net Explorer qui demande lutilisateur de confirmer lactivation du contenu en Flash avant
de poursuivre sa lecture (comme contrle Active-X). Dautres solutions dintgration plus
souples sont disponibles pour Flash. Nous les abordons en fin dannexe, avec lutilisation du
kit SWFObject2.
retenir
Lintgration stricte de Flash avec la balise <object> favorise indirectement son indexation auprs
des moteurs de recherche.
Lutilisation de la balise <object> implique un blocage dans Internet Explorer.
Dautres solutions dintgration sont disponibles avec SWFObject2.
Structurer un document pour lAPI de Google

Depuis juin 2008, Google rfrence officiellement le Flash (lire http://googlewebmaster-
central.blogspot.com/2008/06/improved-flash-indexing.html). Les rsultats des pages de
recherche dmontrent que le contenu vhicul dans un document Flash est dsormais bien
pris en compte (voir Figure 16.1).
Figure 16.1 Indexation d'une animation SWF avant la nouvelle API de Google
Comparaison
des rsultats
de recherche
Google, avant et Indexation d'une animation SWF depuis la nouvelle API de Google
aprs 2008.
Pour que les documents Flash puissent tre correctement indexs, ils doivent obir aux
spcifications suivantes :
Tous les textes contenus dans un document SWF sont enregistrs, ds lors quils sont
visibles lcran et dits dans un champ de texte statique, dynamique ou de saisie. Les
textes placs dans des symboles, dans des boutons sont galement pris en compte. Seuls
les textes images ou vectoriss ne sont pas identifis.
Les URL affiches dans le texte, si elles sont cliquables, sont galement enregistres.
Elles peuvent tre actives partir des fonctionnalits de lien dfinies depuis lInspecteur
de proprits, ou en ActionScript, toutes versions du langage confondues.
Les fichiers SWF, XML, HTML et textes externes, lis un contenu Flash identifiable
(un texte) sont galement enregistrs. Important, Google fait mme ressortir la page
HTML qui contient le Flash. Donc, non seulement Flash nest pas opaque pour les
moteurs, mais lutilisation de la technologie Flash favorise lindexation dune page
HTML.
Les images, les vidos et les graphismes vectoriels ne sont pas, en revanche, enregistrs.
LES SOLUTIONS DE RFRENCEMENT DU FLASH 465

Si les contenus image et formes graphiques ne sont pas identifiables par Google, utilisez
ces formats pour vhiculer des informations au demeurant inutiles, comme le
texte "chargement en cours", par exemple.
Les documents Flash intgrs via une instruction JavaScript ne sont pas rfrencs.
JavaScript apparat comme un mur anti-rfrencement. Prfrez une intgration stricte
avec la balise <object> (voir section prcdente). Mais cela provoque un blocage
dInternet Explorer. Optez plutt pour une indexation qui se base sur un contenu alter-
natif (voir fin dannexe).
Flash distingue les pages HTML, les textes TXT et les fichiers XML appels par le
SWF du fichier SWF lui-mme. Ces contenus risquent donc dtre prsents en accs
parallle aux animations Flash. Veillez dsigner clairement leur libell pour viter les
confusions et orienter autant que possible les utilisateurs.
Les textes bidirectionnels ne sont pas encore indxs, mais Google y travaille (Hbreu,
Arabe).
Ne cachez pas dinformations sans rapport avec les noms et les descriptions affects aux
objets (technique du spamdexing ou spam). Le fonctionnement de Google favorise tou-
jours lindexation des sites qui servent lutilisateur. Tout comportement mal veillant
nuisible pour lutilisateur est donc galement nuisible pour votre positionnement.
Une organisation smantique de la structure du site (noms des fichiers, noms des dos-
siers) est primordiale. Aussi, attribuez des noms de fichiers et de dossiers en rapport
avec le thme abord, naturellement, sans caractres spciaux, ni espaces. Les tirets
sont considrs par Google comme des sparateurs smantiques, mais ils ne sont pas
toujours bien supports par lAPI de Flash dans le cas de documents SWF imbriqus.
Vous pouvez galement ajouter des mtadonnes aux fichiers SWF afin dorienter le
robot. Pour en savoir plus sur cette technique, reportez-vous la section suivante.
Utilisez une mise en page XHTML claire pour le robot, qui lui permettra de distinguer
smantiquement le positionnement du contenu en Flash des autres contenus. Pour cela,
utilisez des balises div dont les identifiants se rapportent aux donnes vhicules (Par
exemple, utilisez un conteneur HTML <div id="flash"></div> pour contenir le
Flash et <embed id="animation" /> pour afficher lanimation Flash).
Pensez toujours associer un contenu alternatif complmentaire au format HTML. Cela
peut tre une note dintention du site, un rsum, une version mobile, un document
PDF. Tout texte qui accompagne le Flash aide positionner le ou les fichiers prsents.
Vous pouvez galement laguer les lments inutiles qui ne doivent pas tre pris en
compte lors de lindexation. Filtrez pour cela les contenus utiles en utilisant un fichier
"robot.txt" (consultez ladresse http://www.google.com/support/webmasters/bin/
answer.py?hl=fr&answer=156449 pour en savoir plus sur lutilisation du fichier
robot.txt).
Nhsitez pas consulter : http://www.google.com/support/webmasters/bin/
answer.py?hl=fr&answer=72746 pour en savoir plus.
Pour valuer au mieux la manire dont votre projet peut tre interprt par Google, pensez
que Google favorise toujours les contenus au service de lutilisateur. Si vous apportez des
contenus utiles, bien organiss, faciles daccs, ils seront mis en avant, mme en Flash. Si
vous tentez de manipuler lutilisateur, dagir son insu, de forcer certains contenus, de
cacher des textes en les mettant blanc sur fond blanc, cela pnalisera votre positionnement.
Google se met toujours la place de lutilisateur pour vrifier un contenu en agissant dans
lintrt de lutilisateur. En respectant cette logique, vous amliorez sensiblement le posi-
tionnement de vos ralisations.
Le pageRanking. Le pageRanking dsigne la popularit dun site et principalement, la qualit des

liens extrieurs qui y font rfrence. Cette donne reprsente 50% des critres qui aident Google
dterminer le positionnement dun site dans ses pages de rsultat. Il en rsulte que, mme un site
entirement opaque et pour lequel aucun effort doptimisation nest dploy, parvient trs bien
apparatre en tte du placement pour une requte cible. Un site 100 % HTML strict ne garantie donc
pas, lui seul, un positionnement meilleur quun site tout en Flash, mme opaque. Nanmoins, nous
ne saurons que vous conseiller de favoriser laccessibilit de votre projet et son optimisation, afin de
rpondre au mieux aux diffrents besoins des utilisateurs.
Une excellente illustration de leffet du pageRanking est cette anecdote apparue pendant les lec-
tions prsidentielles de 2007, en France. Une quipe de webmasters avait plac au sein de nombreux
blogs et forums de discussion, des hyperliens qui pointaient vers une biographie du personnage Izno-
goud, personnage, combien rput pour son got prononc du pouvoir. Ironie de lhistoire, en
associant au libell de ce lien, lexpression "Nicolas Sarkozy Prsident", ces webmasters ont prouv la
toute puissance de Google. Quelques semaines plus tard, il suffisait en effet de saisir "Nicolas Sarkozy
Prsident" dans le moteur de Google, pour que la premire page propose soit la fiche biographique
du personnage Iznogoud. Le mcanisme ayant opr, ils navaient pas tard proposer linverse : un
lien de libell Iznogoud qui pointait vers la page de candidature officielle du candidat Nicolas Sarkozy.
Sans videmment porter de jugement sur le fond de cette forme de blague contemporaine, le rsul-
tat obtenu a prouv combien le mcanisme de Google prenait davantage en considration, le libell
et lemplacement des liens sur lInternet, que les contenus qui y sont associs, eux-mmes. Cest la rai-
son pour laquelle nous pouvons affirmer aujourdhui quun site ralis intgralement en Flash, pour
lequel une campagne virale bien tudie a t dploye, peut obtenir un positionnement bien sup-
rieur au rfrencement naturel obtenu par un site XHTML strict (voir Figure 16.1).
Le dbat Flash vs. XHTML. Flash ne se positionne pas comme une technologie concurrente la
cration de sites XHTML stricts. Ces techniques sont parfaitement complmentaires, au contraire.
Lune apporte laccessibilit (HTML), lautre la richesse et les fonctionnalits (Flash). titre dexemple,
une entreprise pourra raliser un site 100 % XHTML pour offrir un service gnrique et institutionnel
prenne qui vhiculera son image "corporate", une forme de "service public" en somme. Elle peut
laccompagner, plus ponctuellement et rgulirement, sur des priodes plus courtes, avec des mini
sites vnementiels tout en Flash. Cela lui permet, tout en apportant un service de base, lmentaire,
de valoriser et mieux communiquer aussi sur ses produits en proposant des fonctionnalits rich-
mdias irralisables en XHTML. Les deux conceptions se compltent donc parfaitement. Il ny a pas de
camp tout dsign qui puisse se venter doffrir une solution meilleure quune autre. Chaque techno-
logie apporte une valeur ajoute utile et complmentaire lune de lautre.

retenir
Google sait enregistrer les textes contenus dans un document SWF.
Les fichiers qui accompagnent un document Flash, imports dans le SWF ou environnants (page
HTML qui le contient) sont valoriss.
Lintgration du Flash avec JavaScript favorise le blocage avec Internet Explorer. Cette solution
permet, cela dit, de positionner le Flash laide dun contenu alternatif.
Les mtadonnes des fichiers SWF

Les mtadonnes des pages HTML sont des facteurs importants pour le rfrencement,
mme si ces derniers sont de moins en moins pris en considration, la faveur des contenus
eux-mmes. Lorsque les mtadonnes accompagnent les contenus, en intgrant des textes et
des mots qui soulignent le sens rel des informations affiches lcran, elles valorisent le
positionnement des pages.
Lajout de mtadonnes est dsormais possible pour les documents SWF, comme nous le
faisons pour les documents HTML. Depuis Flash CS4, il suffit de renseigner un tableau de
descriptions cod au format XMP, puis, de publier le document, pour que les informations
soient automatiquement intgres lanimation. Ds que le robot identifie le fichier SWF, il
analyse ces mtadonnes et affine le positionnement du document.
1. Pour ajouter des mtadonnes un document Flash, dans Flash, faites Fichier > Infor-
mations.
2. La table des mtadonnes saffiche (voir Figure 16.2).
Figure 16.2
Aperu de la fentre Informations.
3. Dans cette fentre, diffrents onglets sont disponibles :

Longlet Description permet de renseigner le profil gnral de lauteur et dinformer
les robots sur les caractristiques gnrales du document.
Longlet IPTC organise plus en dtail les informations relatives la signature du
document, selon la norme conventionnelle internationale employe dans le secteur
de la presse.
Les autres onglets permettent dajouter des informations en rapport avec dautres
systmes dindexation et dautres formats de fichiers.
lexception de longlet SWF mobile, rserv pour la publication des documents
Flash destination des appareils mobiles, nous nen aurons pas usage pour la cration
de sites web.
4. Renseignez les champs requis dans les diffrents onglets. Puis validez.
5. Publier le SWF en faisant Ctrl+Entre (Windows) ou Cmd+Entre (Mac).
Le fichier SWF contient ses propres mtadonnes. Si vous disposez de la Creative Suite
Adobe, vous pouvez lire ces donnes depuis Bridge. Naviguez alors jusquau fichier SWF
pour lire les mtadonnes (voir Figure 16.3).
Figure 16.3
Affichage des
mtadonnes
dans Bridge.
Il est possible de gnrer des mtadonnes via ActionScript laide de la mthode setMetadata().
Une documentation en ligne prsente les commandes disponibles ladresse suivante : http://
help.adobe.com/fr_FR/Flash/10.0_ExtendingFlash/
WS5b3ccc516d4fbf351e63e3d118a9024f3f-7dcf.html.

retenir
Pour ajouter des mtadonnes dans un fichier SWF, nous utilisons la fentre dinformation du docu-
ment Flash.
Ces mtadonnes sont lisibles par Google, mais aussi et entre autres depuis Bridge.
Grer le contenu alternatif pour les robots et les appareils

nomades
Les lments XHTML (<div></div> ou <embed />) ne sont pas pris en compte par les
moteurs lorsquils sont affichs partir dune commande JavaScript. Pour rendre un contenu
visible, il est donc prfrable dorganiser son affichage directement partir de ces balises
XHTML sans les envelopper de comportements JavaScript (voir aussi http://fr.wikipe-
dia.org/wiki/Web_profond). Mais, bien que le contenu affich par une instruction JavaScript
neutralise laccs au document Flash, il offre un certain avantage.
dfaut de vouloir rendre le document Flash indexable pour lAPI de Google, vous pouvez
aussi afficher un contenu texte XHTML, alternatif au Flash. Dans ce contexte, cest juste-
ment le contenu HTML alternatif qui va aiguiller le robot.Cette technique offre aussi un
deuxime avantage. Nous pouvons afficher un contenu alternatif au Flash destination des
appareils nomades non quips du lecteur. Cela permet, par exemple, de proposer un service
diffrenci et davantage cibl pour les utilisateurs dappareils nomades. Certains appareils
continuent, en effet, de ne pas pouvoir lire le Flash. Cette section apporte les solutions alter-
natives pour ces utilisateurs.
Les contenus alternatifs intelligents. Par le pass, nous dveloppions un clone du site Flash, en
guise de contenu alternatif. Une aberration qui a t repense avec larrive des appareils mobiles et
la vague du Web 2.0. Lorsque vous utilisez un support diffrent dun ordinateur classique (tlphone
mobile), vous attendez un contenu appropri et qui rponde au mieux votre besoin au moment o
vous consultez. Il parat donc plus cohrent de cibler effectivement laffichage des contenus en fonc-
tion de la plateforme qui lexcute et non plus de le doubler de manire parfaitement strile. Si le site
doit tre consult sur un ordinateur, il peut offrir une navigation riche, de nombreuses fonctionnalits
parfois gourmandes en ressources, sans trop de difficult. Mais si le site doit pouvoir tre visit rapide-
ment, entre deux rendez-vous, avec une connexion payante la minute, sur un cran de taille
rduite et sur un appareil aux capacits limites, en plein soleil, vous ne pouvez videmment pas
imposer le mme service que sur le site de base. Pensez utiliser la technique JavaScript qui distingue
le contenu Flash dun contenu HTML pour permettre galement doffrir un contenu mobile appropri,
diffrent du site rfrent dvelopp en Flash.
Installer le kit SWFObject2

Pour raliser une page HTML conforme, qui ne provoque pas le blocage dInternet Explo-
rer, et qui permette de spcifier partir de quelle version du lecteur Flash, nous prfrons
afficher un contenu alternatif, tout en offrant un contenu identifiable pour Google, nous
utilisons le kit de dveloppement SWFObject2.
Pour utiliser ce kit facilement, nous tlchargeons le script SWFObject et son installeur. Le
script est placer dans le rpertoire du site. Linstalleur est une page HTML/JavaScript qui
gnre, la vole, le code HTML requis pour une intgration conforme de lanimation
Flash. Ce kit est disponible gratuitement ladresse suivante : http://code.google.com/p/
swfobject/. Tlchargez les fichiers "SWFObject2_2.zip" (le script) et le fichier
"SWFGenerator_1_2_html.zip" (le gnrateur) (voir Figure 16.4).
Figure 16.4
Tlchargement
du kit
SWFObject2.
Dans le rpertoire de votre site (en loccurrence, dans notre dossier Exemples), dcompres-
sez directement les deux fichiers. Le dossier "SWFObject.js" peut tre plac la racine du
projet. La page HTML, index.html, une fois utilise, peut tre supprime du projet. Dans les
fichiers dexemple de cet ouvrage, nous avons renomm cette page "SWFObject-
Index.html", pour viter toute confusion avec dautres fichiers.
En parcourant le dossier "SWFObject/" apparu la dcompression, nous distinguons, dans
ce rpertoire, le fichier JavaScript "swfobject.js", ainsi quun installeur de mise jour du
lecteur Flash nomm "expressInstall.swf". Dans ce mme dossier, deux pages HTML pro-
posent dj le code pour lintgration dun document Flash selon deux mthodes diffren-
tes. La page "index.html" affiche une intgration stricte et conforme avec des balises
HTML. La page "index_dynamic.html" intgre le Flash partir du JavaScript. Cette
seconde proposition adopte un codage tout fait conforme, mais elle offre lavantage de
neutraliser le blocage dInternet Explorer sur les applications multimdias (avec le message
"cliquez pour activer ce contrle"). Vous pouvez donc utiliser lun ou lautre de ces deux
fichiers pour mettre en forme votre page HTML, selon la technique de votre choix.
Vous pouvez aussi lancer dans le navigateur la page que nous avons renomme "SWFOb-
jectIndex.html", pour obtenir un code personnalis. Pour utiliser cet installeur, procdez
comme suit :
1. Lancez la page SWFObjectIndex.html dans un navigateur.
2. Cette page affiche un formulaire dans lequel nous avons simplement dsigner le nom
et lemplacement relatif du document Flash ( partir de la page HTML qui doit contenir
le Flash), ainsi que ses dimensions en pourcentage ou en pixels (voir Figure 16.5).

Figure 16.5
Aperu du gn-
rateur dans le
navigateur.
3. Le gnrateur affiche les noms des fichiers scripts (swfobject.js) et de linstalleur

express (expressInstal.swf), comme figurant la racine du projet.
4. Pensez dabord ajouter le nom du rpertoire swfobject/ qui organise ces lments,
afin que le navigateur qui excutera la page puisse atteindre ces fichiers.
5. Choisissez un type dintgration stricte ou dynamique.
6. Cliquez ensuite sur Generate afin dobtenir le code HTML de base de votre document.
7. Puis, slectionnez ce code et copiez-le dans une nouvelle page HTML vierge que vous
nommerez index.html, si vous en faites votre page daccueil (voir Figure 16.6).
Figure 16.6
Paramtrage du
document HTML.
Dans le dossier des exemples du livre, vous trouverez la page enregistre, avec loption
dintgration dynamique, sous le nom de "ch16_referncementFlash_2.html".
En louvrant dans le navigateur, si le lecteur Flash 10 ou suprieur est intgr, la page appa-
rat normalement. dfaut, la version alternative est affiche. Cette version alternative est
basique. Le contenu Flash saffiche dans un coin de la page. Pour amliorer lintgration
des contenus, nous pouvons personnaliser le document.
Tester avec plusieurs versions du lecteur Flash avec Flash Switcher. Vous pouvez tester le
comportement de la page partir de diffrentes versions de lecteur Flash, depuis la mme fentre de
navigateur, sans ncessairement disposer de plusieurs configurations pour ce faire. Lextension
de navigateur Flash Switcher offre cette possibilit. Pour en savoir plus lassistant Flash Switcher,
consultez le lien suivant : http://www.sephiroth.it/firefox/flash_switcher/index.php.
Personnaliser le document
Dans le mcanisme du JavaScript SWFObject, le contenu alternatif est toujours affich par
dfaut dans la fentre du navigateur. Cest uniquement lorsque JavaScript dtecte le lecteur
Flash quil affiche lanimation SWF (voir Figure 16.7). Le cas chant, cest la version
HTML qui est affiche. Mais nous devons bien comprendre que ce HTML est dj en place,
il nest simplement pas visible si le lecteur Flash est actif (voir Figure 16.8). Pour cette rai-
son, ce mcanisme est favorable lindexation du contenu et peut tre interprt par tous les
navigateurs.
Figure 16.7
Aperu de lani-
mation Flash.

Figure 16.8
Aperu de la
page HTML
alternative.
Exemples > ch16_referencementFlash_2b.html

Exemples > ch16_referencementFlash_2.fla
Dans le document "ch16_referencementFlash_2b.html", nous avons substitu le contenu

alternatif affich par dfaut par le gnrateur SWFObject (voir section prcdente), par un
texte format avec des styles CSS, une image, un hyperlien et des titres.
Dans le corps de la page, en lieu et place du contenu de la balise <div id="content"></div>,
nous avons introduit le texte alternatif. Les formatages CSS, eux, sont ajouts dans len-tte
du document :
<style type="text/css">
<!--
html {
height:100%;
}
body {
padding:0px;
margin:0px;
font-size:16px;
font-family:Arial, Helvetica;
background-color: #071B22;
color: #FFF;
background-image: url();
background-repeat: repeat-x;
height:100%;
overflow: hidden;
}
#donnees{
height:90%;
width:550px;
margin:20px;
position: relative;
text-align: justify;
}
h1{
color:#FFF;
font-size:48px;
}
h2{
font-size:36px;
border-bottom-width:1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
h3{
display:block;
font-size:12px;
background-color: #333;
padding:3px;
text-transform: uppercase;
}
a:link {
color: #CCC;
}
#design a:link {
color: #666;
}
a:visited {
color: #CCC;
}
a:hover {
color: #FFF;
}
#design a:visited {
color: #666;
}
#design a:hover {
color: #000;
}
ul, li{
margin:0;
padding:0;
}
li{
display:inline;
}
#design {
background-color: #FFF;
color: #000;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
font-size:14px;
}
#design h2 {
font-size:18px;
border-bottom-width:1px;
border-bottom-style: solid;
border-bottom-color: #000;
}

Afin que le contenu Flash puisse apparatre en occupant toute la surface de la fentre du
navigateur, nous lui avons attribu des dimensions de 100 % en largeur et en hauteur. Mais,
comme nous employons un codage XHTML strict, nous devons aussi rappeler au naviga-
teur que le corps du document et la structure HTML gnrale sont tendus, eux aussi, sur
toute la surface de la fentre de navigateur. dfaut, le contenu Flash napparatra pas dans
Firefox. Cest la raison pour laquelle, dans la feuille de style, nous ajoutons les attributs
CSS height:100% pour chacun des lments qui contiennent le Flash.
De mme, afin de supprimer la barre dascenseur verticale qui rsulte de lintgration du
Flash, nous la masquons en ajoutant, dans le style pour le corps de la page (body), lattribut
overFlow, pass sur la valeur "masqu" (hidden). Nous pourrions aussi afficher un Flash
seulement 99 % de la hauteur, au risque toutefois dajouter une petite marge en bas de la
fentre de navigateur. Vous appliquerez loption votre convenance. Notez cependant que
loption overFlow induit une surface limite pour afficher le contenu alternatif. Dans ce cas,
si un contenu important doit apparatre, nous vous conseillons de crer dabord un som-
maire, puis de rpartir le contenu sur diffrentes pages HTML successives qui elles, nutilisent
pas cet attribut.
Le contenu SWF peut dsormais tre affich 100 %. Mais pour cela, nous devons aussi
ajouter des contrles ActionScript, comme vu Chapitre 15, afin de redfinir le positionne-
ment et lchelle des objets selon les dimensions de la fentre. Sans cela, le Flash resterait
cal en haut et gauche, sans tre redimensionn. Seule la couleur darrire-plan du document
SWF occuperait toute la surface de lcran.
Le document Flash "ch16_referncement_2.fla", dont lexportation au format SWF est intgr
dans notre page HTML, affiche le code suivant :
//-------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;
//-------------------- actions
interface_mc.lancer_btn.addEventListener(MouseEvent.CLICK,volPapillon);
function volPapillon (evt:MouseEvent) {
TweenMax.to(interface_mc.Papillon_mc,3, {rotation:-360, delay:0.2,
}
// mise lchelle pour remplissage100 % de la page HTML

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, redimensionneSWF);
function redimensionneSWF(event:Event) {
fond_mc.width=stage.stageWidth;
fond_mc.height=stage.stageHeight;
//
interface_mc.x=stage.stageWidth/2;
interface_mc.y=(stage.stageHeight/2)-20;
}
Ce code rorganise laffichage et les dimensions des lments dans la scne, selon la taille
de la fentre du navigateur.
Pour en savoir plus sur la gestion lastique et flottante du contenu Flash, reportez-vous au
Chapitre 15 qui traite de la cration de sites Full Flash.
Les pages satellites. Les pages satellites sont des pages HTML qui reprennent des contenus textes
dits initialement dans un site en Flash. Cette technique, employe jusqu ce que Google sache
interprter le Flash (jusquen 2008 donc), aidait lindexation des sites tout en Flash. Elle nest plus
recommande aujourdhui, parce que Google sait maintenant lire le contenu en Flash, mais aussi
parce que, comme toute technique de diversion, elle finit malheureusement par tre trop souvent
employe contre lutilisateur. Ces pages ne sont donc plus vraiment prises en compte sauf lorsquelles
servent rellement le contenu et se prsentent comme des pages daccessibilit alternatives, juste-
ment. Cest le cas pour des textes destins aux appareils mobiles ou qui apportent des informations
utiles accessibles rapidement au format texte, par exemple (adresses, coordonnes, contenu
ditorial).
Pour en savoir plus sur SWFObject2. Une page franaise dcrit admirablement les options dis-
ponibles pour la gestion dun contenu Flash avec SWFObject2. Consultez ce lien clair et instructif
pour en savoir plus sur ce sujet : http://egypte.olympe-network.com/swfobject-francais.html.
retenir
Il est possible dafficher un contenu alternatif Flash pour les utilisateurs qui ne disposent pas du
lecteur. Pour cela, nous utilisons le script SWFObject2.
Il existe deux mthodes conformes pour lintgration du Flash : une mthode HTML stricte et une
mthode en JavaScript pour contourner le blocage dInternet Explorer.
La gestion de laffichage du Flash 100 % de la surface de la fentre de navigateur se dtermine en
attribuant des hauteurs de 100 % aux conteneurs HTML, et en dfinissant des comportements
dchelle et de positionnement, en ActionScript, dans le Flash.
Synthse
Dans cette annexe, vous avez appris rendre indexable un site entirement ralis en Flash,
pour favoriser son positionnement dans les moteurs de recherche. Vous avez apprhend le
mcanisme de Google dans sa recherche de contenus. Vous avez appris grer laffichage
dun site pour les systmes qui ne disposent pas du lecteur Flash et notamment certains
appareils mobiles. Vous tes en mesure de raliser et concevoir des interfaces Flash entirement
indexables par les moteurs de recherche.
Laccessibilit dans Flash

17
Introduction
Dans cette annexe, nous prsentons les outils daide la conception de sites accessibles,
dans Flash, pour les personnes "mobilit rduite sur le Web", qui utilisent des logiciels
daccompagnement pour lire les contenus (lecteurs dcran).
Si Flash est naturellement permissif aux lecteurs dcran, condition toutefois quil soit
intgr de manire stricte, des options de formatage et des mthodes de conception permettent
dorganiser le contenu de manire encore plus lisible.
Lorganisation dun site accessible apparat bien souvent comme une contrainte pesante en
production, mais elle permet souvent de rsoudre aussi des problmes vidents dergono-
mie. Si un site est accessible pour un lecteur dcran, il le sera pour tout utilisateur. De plus,
si un site est accessible et pertinent pour tout utilisateur, il sera aussi valoris par les moteurs
de recherche. Raliser un site accessible offre donc de nombreux avantages qui apportent
tous les utilisateurs. Rien nempche cela dit, ponctuellement, de raliser des contenus qui
sortent de ce cadre drastique, si la base, elle, demeure au moins suffisamment ouverte tous
les utilisateurs.
Flash propose, dans son interface, diffrents outils daide laccessibilit. Les mtadon-
nes, que nous avons dveloppes prcdemment, y concourent. Mais aussi, les titres, les
descriptions, lordre des tabulations et des champs, ainsi que quelques classes ActionsScript
dont nous vous prsentons ici les ressources pour pouvoir les utiliser et tendre plus spcifi-
quement vos dveloppement vers ce type de configuration.
Les options daccessibilit sont utiles pour toutes les personnes " mobilit rduite sur le
Web" au sens large, quil sagisse de malentendants, non-voyants, paraplgiques, mais aussi
les "accidents ponctuels de la vie domestique" voire, les utilisateurs sans handicap mais
dont lquipement informatique ne fonctionne tout simplement pas correctement. Un tran-
ger sur un site exclusivement en franais est en situation de handicap. Une personne sans
plugin adquat pour visualiser un site Flash est en situation de handicap (voir Annexe pr-
cdente). Un texte crit trop petit face une personne malvoyante (et qui nuse pas de lec-
teur dcran) et dont il nest pas possible daugmenter la taille du texte est en situation de
handicap. Une personne habitue naviguer en usant que du clavier face une interface uti-
lisateur exclusivement base sur lusage de la souris est en situation dhandicap. Un site fai-
sant appel une vido sans sous-titre, pour un utilisateur en entreprise qui na pas dhaut
parleur, le place en situation de handicap, Un site qui prvoit le chargement dun PDF pour
palier un soucis daccessibilit et qui fournit un PDF non accessible place lutilisateur en
situation dhandicap. Et autant dautres situations cocasses qui nous mettent tous en situation
de handicap. Nous sommes donc a priori tous concerns.
La fentre Accessibilit
Vous pouvez ajouter des titres, des descriptions et associer des contrles de navigation,
tout symbole distribu dans Flash. Il suffit de renseigner les champs mis disposition par la
fentre daccessibilit, pour ce faire.
Exemples > ch16_accessibiliteFlash_1.fla
Dans ce document, la scne affiche quelques symboles dont un champ de texte, un Movie-
Clip et un bouton (voir Figure 17.1).
Figure 17.1
Aperu de la
scne principale.
Vous pouvez ajouter des titres et des descriptions sur la scne et sur les objets eux-mmes
avec le menu Fentre > Accessibilit.
Une fentre apparat et affiche diffrents champs de saisie. Cliquez en dehors de la scne de
manire ne rien slectionner. La fentre daccessibilit affiche alors les entres pour la
scne.
Renseignez les champs Nom et Description pour informer lutilisateur sur le type de contenu
mis en scne (voir Figure 17.2).
Vous pouvez galement renseigner des informations, plus ponctuellement, pour chaque
objet. Il suffit de le slectionner et de renseigner les champs qui correspondent votre slection
active.
Cliquez successivement sur les symboles interface_mc, papillon_mc, sur le champ de
texte dynamique et sur le bouton, puis, inscrivez les textes qui dcrivent succinctement ce
quils reprsentent.
LACCESSIBILIT DANS FLASH 479

Figure 17.2
Aperu des
options pour la
scne principale.
Figure 17.3
Informations
daccessibilit
du symbole
papillon_mc.
Figure 17.4
Informations
daccessibilit du
champ de texte
statique.
Figure 17.5
Informations
daccessibilit du
symbole bouton.
Lorsque des symboles enfants sont distribus lintrieur dun objet, loption Rendre les
enfants accessibles est propose. Par dfaut, tous les enfants sont accessibles. Mais, dans
certains cas, il peut tre intressant de neutraliser cette option afin dviter des bruits visuels
inutiles et masquer des objets purement graphiques utiliss pour lhabillage. Cela contribue
simplifier lossature du document et facilite laccs aux autres contenus.
Vous remarquez que, dans certains cas, les options Ordre des tabulations et raccourci sont
galement disponibles.
Les raccourcis permettent lutilisateur du lecteur dcran daccder directement lobjet,
par simple activation dune touche du clavier. Vous devez inscrire la lettre que vous souhai-
tez dsigner comme touche activer pour rendre cet objet accessible. Utilisez de prfrence
une lettre consonance dure qui rsume la tonalit du mot ou sa premire lettre. Dans notre
exemple, la lettre l est employe pour dsigner le bouton Lancer.
Dans le champ Ordre des tabulations, spcifiez le nombre de fois pour lequel lutilisateur
doit appuyer sur la touche Tabulation, pour activer llment dsign. Dans notre exemple,
le bouton Lancer est associ au chiffre 1. Il faudra donc appuyer une fois sur la touche Tabu-
lation pour activer ce bouton, une fois le module Flash pralablement activ. Lorsque vous
publiez la page HTML du document Flash dans le navigateur, pour activer lanimation avec
les options daccessibilit, procdez comme suit :
1. Activez dabord lobjet Flash en cliquant dessus ou en appuyant sur la touche Tabulation
une premire fois.
2. Puis, une fois le Flash actif, appuyez de nouveau sur la touche Tabulation, autant de fois
que la valeur dsigne dans le champ Ordre des tabulations de la fentre daccessibilit.
3. Puis, appuyez sur la touche Entre pour confirmer lactivation des instructions associes
cet objet.
Afin de garantir une ergonomie la plus cohrente qui soit, utilisez un ordre des tabulations
qui corresponde autant que possible lordre logique et chronologique dexcution des
vnements.
LACCESSIBILIT DANS FLASH 481

Accessibilit dans Flash. Pour en savoir plus sur laccessibilit dans Flash, consultez aussi le lien suivant :
http://help.adobe.com/fr_FR/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1-
fe1af6-7c3ea.html#WSd60f23110762d6b883b18f10cb1fe1af6-7c3ca.
retenir
Ldition de textes de description pour laccessibilit est disponible dans Flash. Pour cela, utilisez la
fentre Accessibilit.
Pour restreindre laccs des informations utiles uniquement, il est possible, linverse, de neutrali-
ser des objets. Pour cela, nous dsactivons les options daccessibilit des objectifs actifs, depuis la
fentre daccessibilit.
Concevoir un document Flash pour les non-voyants et

malentendants
Parmi les utilisateurs de lecteurs dcran non-voyants ou malentendants, des recommanda-
tions spcifiques sont suivre. Nous les dtaillons dans cette section :
vitez de crer des boucles danimation qui provoquent un bavardage encombrant. Lors-
que la tte de lecture rejoue perptuellement des images sur lesquels des textes sont affi-
chs, ces informations peuvent tre rptes indfiniment et voix haute, par les lecteurs
dcran. Cela perturbe la navigation. Pensez appliquer un stop sur chaque image du sc-
nario qui dsigne une nouvelle rubrique. Privilgiez les conceptions de site dans le scna-
rio, o chaque rubrique est joue lune la suite de lautre, et spare par un stop. Les
interfaces dynamiques ne sont pas encore totalement digestes par tous les lecteurs dcran.
vitez dimposer un son ou une ambiance musicale trop prgnante afin de permettre
aux utilisateurs dentendre leurs propres lecteurs dcran lire les contenus.
Ne vectorisez pas le texte, car les objets graphiques et les images ne peuvent pas tre
identifis.
Associez la plupart des actions des commandes du clavier, en plus des commandes de
souris. Cela permet aux personnes qui naccdent pas la souris de compenser en utilisant
le clavier.
Le mode transparent et opaque, sans fentre, dfini dans les paramtres HTML du document
Flash, rendent le Flash compltement inaccessible. vitez dutiliser ces options.
Pensez associer, autant que possible, des textes chaque objet interactif (boutons,
liens, zones dinteraction) pour en faciliter la reconnaissance.
Aides au dveloppement de contenus spcifiques pour les malentendants et les

malvoyants. Des outils daide au dveloppement sont disponibles ladresse suivante, pour
Windows uniquement :
http://help.adobe.com/fr_FR/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-
7c47a.html.
retenir
Pour rendre un site accessible aux non-voyants et malentendants, il est recommand dorganiser les
contenus dans le scnario en privilgiant les textes.
Synthse
Vous avez appris optimiser un site pour laccessibilit et rendre un contenu Flash presque
universel. Vous tes en mesure, prsent, de crer des sites pour le plus large public, tout en
apportant une valeur graphique ajoute et fonctionnelle, significative.
Ressources
Quelques ressources pdagogiques pour le dveloppement en ActionScript 3 et les techno-

logies associes la cration dinterfaces riches sont disponibles en ligne. Vous trouverez
ci-aprs une liste non exhaustive des dernires publications qui complteront idalement cet
ouvrage.
Livres
DAfter Effects Flash, de Flash After Effects, Richard Harrington et Marcus Geduld. d.
Pearson. DVD inclus. Couleur. 38 .
Cet ouvrage vous accompagnera idalement pour tendre vos connaissances sur la
vido interactive avec des crations graphiques, ralises dans After Effects.
Lart du bluff avec Flash CS4, Chris Georgennes. d. Pearson. DVD inclus. Couleur. 29 .
Pour prendre en main les outils danimation, de manire didactique, avec des notions
pratiques danimateurs professionnels.
Apprendre programmer en ActionScript 3, Anne Tasso. d. Eyrolles. Noir et
blanc. 29,90 .
Ce livre aborde linterfaage dynamique sans aucun lment plac sur la scne. Il peut
vous accompagner dans lautomatisation de certains processus de mise en forme,
surtout pour des contenus externaliss.
Pratique dActionScript 3, Thibault Imbert. d. Pearson. Noir et blanc. 56 .
La rfrence de la programmation en ActionScript 3. Ce livre contient les techniques les
plus avances en terme de dveloppement, avec de nombreux conseils relevant de
loptimisation des ressources utilisateur. Vous y abordez aussi les entrailles du lecteur
Flash pour vous familiariser encore plus avec la logique intrinsque de Flash.
Tutoriels vidos
www.alltutorial.com
Ce nouveau petit site pratique et prometteur propose des tutoriels vidos entirement
gratuits et de qualit, en langue franaise, sur les logiciels graphiques.
Tv.adobe.com/fr
Ce site propose des tutoriels vidos sur les produits Adobe, en franais. Dautres tuto-
riels sont disponibles sur la version amricaine, directement ladresse tv.adobe.com.
Sites web et forums

www.thefwa.com
Le site des rfrences en Web design offre plusieurs centaines de liens vers les sites les
plus labors graphiquement. Une rfrence incontournable.
flash.mediabox.fr
Le forum des dveloppeurs en ActionScript. De nombreuses astuces et conseils sur vos
dveloppements.
blog.greensock.com/tweenmax
Les dernires mises jour de la classe TweenMax, disponible directement sur ce site, et
son forum, en anglais.
www.sephiroth.it
Un site communautaire sur le dveloppement en gnral, dont ActionScript 3 en parti-
culier.
sketchup.google.com/intl/fr
Le site de prsentation du logiciel gratuit Google Sketchup, pour la modlisation 3D.
Ce site propose aussi une bibliothque dobjets 3D ainsi quune riche documentation,
en franais.
flash.mediabox.fr
Le forum des dveloppeurs en ActionScript. De nombreuses astuces et conseils sur vos
dveloppements.
www.papervision3d.org
Le site de la communaut des dveloppeurs de la classe PaperVision.
www.adobe.com/fr/devnet/actionscript
Le site communautaire des dveloppeurs ActionScript, par Adobe. De nombreux conseils,
mthodologies et solutions connexes y sont prsentes.
www.yazo.net
Un site pour apprendre les bases du langage ActionScript 1, 2 et 3, avec les fichiers en
libre tlchargement et la palette Yazo.
Dictionnaires
Aide contextuelle
Flash intgre une aide contextuelle pour vous aider dcouvrir les dfinitions des diff-
rentes mthodes, proprits, et autres lments du langage ActionScript. Depuis la fentre
dActions, faites clic-droit, puis activez loption Aide.
www.adobe.com/support/documentation/fr/flash
Cette page recense les diffrentes aides disponibles pour lapprentissage dAction-
Script, au format texte.
Index
3D 289 A Adobe Premiere Pro, exporter

affichage, optimiser 268 en FLV 154
After Effects 147 AAC, codec 183 ADSL 151, 164
amliorer laffichage des Acclration 18, 53 Affichage
images 250 lastique 443
matrielle 441
animation
Accessibilit 477, 481 flottant 443
Caurina 250
Acrobat 450 plein cran 437, 440
Tween 250
AllowFullScreen 439
TweenMax 250 ActionScript 134
quitter 443
banque dobjets 3D libres 300 diffrence entre AS2 et AS3 9
Afficher
champ de vision 284 importer AS1/AS2 dans AS3
exporter 299 458 contenu alternatif Flash 469
focale 284 philosophie du langage 9 plein cran 473
galerie vido 268 random 101 symbole 37
Google Sketchup exporter 300 addASCuePoint 226 Aide de Flash 111
livre interactif raliste 250
addChild 275, 286 Aliasing 250, 268, 452
mouvements Voir Lisser les images
addpage() 354
d'objets 311 align, proprits 446
de camra 304 Adobe After Effects 147
AllowFullScreen 440, 443
mur dimages 260 exporter
directement le projet vers alpha 396
native 241
Flash 153 proprit 12
optimiser un site 3D 314
PaperVision FLV 149, 154 AMFPHP 135
aide en ligne 328 Adobe Media Encoder 177 Amortissement 18, 22, 53
guide de rfrence 328 audio, onglet 183 Anaglyphe Voir Relief
interactivit avec les bandes noires 160 Angle 22
objets 3D 328 dbit 183 Animation 7
lumire 328 exporter en FLV 155 3D (Voir 3D) 279
point de fuite 283, 284 Filtres (onglet) 162 boucle 23
proprit formats pris en charge 156 dtecter la fin 35
rotationX 241 frquence 183 enchaner 36, 47
rotationY 241
Multiplexeur 162 fluidit 28
rotationZ 241
niveau 182 forme 86
x 241
profil 181 intervalles dans le temps 59
y 241
recadrer 158 optimiser 14
z 241, 279
rendu (publication) 311 rglages dexportation 158 panoramique 7
verso des objets 3D 248 vido, onglet 179 plus nette 27
vido 174 Adobe Photoshop rtablir les proprits animes
Voir aussi Modliser et gestion des couches 365 aprs une interpolation 73
PaperVision Voir aussi Photoshop Tween et TweenMax 29
Animer un livre 3D 242 Bones 77, 79 chemin 103

API 331 Boucle 23, 59, 64 externe 103
Apple Compressor 147 accessibilit 481 erreurs 131
Apple Final Cut Pro, exporter arrter 64 Voir aussi Progression et
en Quick Time 154 for 258 Chargeur
raliser une texture raccord 24 Chargeur 235
Apple iMovie, exporter en DV
ou MOV 155 Bouton d'image 103
Apple Motion 141 bascule, interrupteur 442 Chronomtre 59
exporter en Quick Time 145 cibler son contenu 395 Ciblage
Apple Time Machine 279 conflit dinteractivit 400 contenu
tats 389 imbriqus 232, 235, 237
Appliquer des proprits de inexistant 403
MovieClip un objet 64 interfaable 395
masquer la main au survol 414 symbole bouton 395
Armature 77 dynamique 259
neutraliser, dsactiver 414
Array 384 tiquette dans Flash 423
bufferTime 203
Arrter le scnario 58 objet dynamique 258
byteArray 451
Arrondir un chiffre 231 Cinema 4D R11 299
AS3AnimationSystem 29 Cinmatique inverse 77
Ascenseur 54 C Classes 11
masquer 475 aprs la compilation 42
Assistant TweenMax 42 Cache vido 203 AS3AnimationSystem 29
Astrisque (*) 33 cacheAsBitmap 335 Caurina 29
Atteindre une image du scnario Cadence 10 centraliser 42
59 animations Flash 165 compiler 102
Audio 161, 167, 206 vido 138, 143, 165 contextMenu 417
modifier 165 Filters 57, 65
AAC 183
Calque, nommer 8 ik 77
Dbit 183
Camera3D 311 getArmatureAt() 82
Frquence 183
CaptionButton 215 IKJoint 77
volume 205
registerElements() 83
Caractres
importer 11, 32, 41, 51, 290
manquants 435
installer 428
B spciaux 10
localiser sur le systme 32
Carrousel 251
Barre mcanisme 29
Carte interactive 38 Timer 57, 59, 60
d'ascenseur 54 catch 133, 134
de chargement 106 transitionManager 57, 59, 63
Caurina 29, 250 Twease 29
BevelFilter 65, 70
CBR, VBR Voir Vido Tween 29, 34
Bzier 42, 44
Centre des symboles 24, 247 TweenEvent 35
Bibliothque Chane de caractres, TweenMax 29, 38
exporter pour ActionScript 383 conversion 121 classPath 42
partage 454 Champ de texte dynamique 111, Clavier
Bitmap 331, 385 431 accessibilit 481
BitmapData 334, 359, 385 Chapitrage 207 commandes inactives en mode
Blender 299 Chargement 102 plein cran 441
BlurFilter 65, 68, 340 contenu interactivit 315
INDEX 487
navigation 320 nuancier, crer 357 E
tableau des valeurs des touches prlever 360
323 puits, crer 357 easing 32
Clip Voir MovieClip CoverFlow 251 chantillonner la vido pour
Codage diffrentiel 180 Crnelage 250, 268, 452 Flash 153
Codec vido 137 Voir Lisser les images couteur 103
colorMatrix 343 CSS, dans Flash 430 arrter 55
ColorMatrixFilter 345 CUE_POINT 226 placer 63
ColorTransform 360 CuePoints 211, 217 Effets 26, 57
Communication Flash/HTML currentFrame 376 amortissement 22
417 currentTarget 129, 131, 392 fentre 149
Compilation 29, 33 Curseur de dfilement 54 ralenti 21
Composant
reflet 254
FLVPlayBack 169
relief 377
paramtrer 174 D spciaux 141, 147, 153
ScrollBar 431
Dbit 183 lasticit Voir Affichage flottant
Compter
nombre dimages dans le Dcalage 53 Embed 463
scnario 245 Dclration 18 Enchaner
nombre dobjets dans un Dfilant 48 des actions 266, 412
symbole 258 Dformation 13 les animations 35
concat 346 Dgrouper 451 ENTER_FRAME 52, 207, 228
Concatnation 346 Dplacer un symbole Enveloppe vido 173
condenseWhite 434 (startDrag) 406
Ergonomie 48
Conditions 14, 18, 393 Dtecter
Erreur
content 235 fin d'une animation 35, 47, 64
chargement 131
contentLoaderInfo 107 image du scnario 376
version du lecteur Flash 469 excution 131
Contenu alternatif 469
Dveloppement Espace mmoire
contextMenu 417, 419, 420
back-office 134 optimiser 14
ContextMenuBuiltInItem 419
front-office 134 typage 20
Contrle du temps 59
Dictionnaires 484 tendre les proprits d'un
Conversion degrs et radians 22
Diffrence (oprateur !=) 267 objet 64
Convertir un fichier KMZ en
Dimensions tiquette 423
DAE 303
dune page web 139 crer 426
Convertir un objet 64
en MovieClip 64 de la fentre de navigateur 437 Event 20
copyChannel 385 displayState 442 Event.ENTER_FRAME 10, 14
Couche, extraire 385 Document, organiser 8 Excution, mode pour les
Couleurs Donnes, grer avec XML 121 squelettes 92
dcimale 356 draw 385 Extension 10, 14
hexadcimale 356 DropShadowFilter 65, 69 .as 102
modifier 356 DSMax 299 de classe 64
F ForwardButton 190 gotoAndStop() 59

FullScreenButton 190 Graphisme 331
F4V 162 MutteButton 190 Greensock 41
Quick Time 184 PauseButton 190 Greensock TweenMax 73
Voir aussi Vido PlayButton 190
filters 65, 264, 345 PlayPauseButton 190
GlowFilter 268 Preview 174 H
Filtres 65, 264, 345 scaleMode 273
SeekBar 191 H-264, codec 179
animation et interpolation 352
skin 172 niveaux 182
appliquer 343
biseau 70 source 170, 273 hideBuiltInItem() 419
Bleu 348 stop 273 Hirarchie, cinmatique 77
correction des couleurs 343 Stopbutton 191 Historique de navigation dans
Cyan 348 VolumeBar 191 Flash 428
dcliner 71 FLVPlayBackCaptioning 211 HTML 134, 465
flou 68, 340 Focus 413 importer dans Flash 430
halo 69, 70, 268 Fonction lien vers Flash 423
Jaune 348 interrompre 274 tester les liens 427
Magenta 348 neutre 60 voir aussi Intgration
Mlangeur de couleurs 348 nommer 10 XHTML stricte
ngatif 347 paramtre 60 htmlText 434
ombre porte 68, 69 Fonctionnalit applicative 48 Hyperlien 421
par lot 351 for 127, 131, 258
proprits 73, 75 for each in 259
Rouge 347 Formats vido 140
I
saturation 345 Forme Voir Animation i, variable dincrmentation
Vert 347 FreeCamera3D 311 111, 118
finally 133 Frquence 183 ik
fl 32 FTP 168 getArmatureByName() 82
Flash Full Flash 437 getBoneByName() 84
structurer un document 464 getChildAt() 83
vs. HTML 466 headJoint 77
FlashPaper 451 G IKArmature 78, 82
Flottement, effet 19 IKBone 77, 82
FLV 162 Galerie IKEvent 82
animer 29 IKJoint 82, 83
FLVPlayBack 169, 174, 187
d'images 99 IKManager 78, 82, 92
ActionScript 2 et 3 170
voir Image IKMover 82, 84, 94
autoPlay 273
vido 3D 268 JKMover 78
BackButton 190
getChildAt 237, 258, 286 tailJoint 77
boutons spars (voir Vido)
189 getPixel 359, 360 Image
BufferingBar 190 gKaster 177 alatoire 99
CaptionButton 190 GlowFilter 65, 70 carroussel 251
contentPath 170 Google 464 externalise 108
fentre 169 Google Sketchup 300 externe 99, 103, 107
INDEX 489
galerie 99 IO_ERROR 132 Liste daffichage 82
XML 113 IOErrorEvent 132, 134 modifier lordre 275
mur 3D 260 ips Voir Cadence Livres 483
raliser une texture raccord 24 load 102
Itration 258
tremblante, viter 27
load() 118
Image de scnario Voir Scnario
Loader 100
iMovie 155 J localConnexion 458
import 32
Importer Jauge de chargement 103
classes ActionScript 290 JavaScript 134 M
CSS dans Flash 430 Jouer le scnario 59
HTML dans Flash 430 mask 340
PHP/MySQL 134 Masque
police 454 K conflit avec les polices de
un squelette 94 caractre 454
variable 434 KEY_DOWN 320
dynamique 340
Imprimer un SWF 353 KEY_UP 320 progressif (bords flous) 340
Incrmentation 26, 53, 59, 111 keyCode 320 Masquer
InDesign 450 pointeur Main au survol d'un
raliser un livre au format SWF bouton 35
250
L symbole 37
Indexation 464 Label Voir tiquette Math 22
Initialisation 73 Langage, nommer les calques ceil 231
int 20, 28 automatiquement 8 random 356
Intgration XHTML stricte 463 Lecteur Flash Math.random 103
Interactivit 315 menu contextuel 417 Math.random() 101
objets dynamiques 122 pntration (statistiques) 287 Maya 299
rsoudre les conflits dobjets Lecteur vido Mmoire, optimiser 9, 14
imbriqus 400
H-264 pour Flash 6 et suivants Menu
Interface lastique flottante 443 191 contextuel 417
Internet Explorer, blocage des personnalis 188 droulant 407
contrles active-X 469
Lvitation 18 MENU_ITEM_SELECT 420
Interpolation 34
Lien metaDataEvent 226
dure 266
HTML 421 Mtadonnes 467
interrompre 36
tester 427 crer dynamiquement 468
Tween 36
vers Flash 423 Microsoft Aero 279
TweenMax 45
Interrompre Lipsync 86 Microsoft Window Movie
fonction 274 Lissage 250 Maker, exporter en AVI-DV
interpolation 413 Lisser 154
un contenu charg 235 graphismes vectoriels 335 Mise en cache vido 139
Inverse kinematic Voir images 331 Mode plein cran 437
Cinmatique inverse vido 268 Modliser 299
MouseEvent 37 Occurrences, nommer 10 zone daffichage de lespace 3D

MOUSE_OVER 37 On2 VP6 137, 162, 163 309
MOUSE_UP 55 onCompleteListener 47 zoom 311
mouseX 21 onStartListener 47 parseCSS 433
Mouvement Opacit 396 Particules 141, 149
camra 3D 304 accessibilit 481 Pas
organique 86 oprateur != 267 d'acclration 12
progressif 18 d'incrmentation 26
Optimisation mmoire 9
MovieClip 64 Passes dencodage Voir Vido
Organiser
afficher la main au survol 414 PDF 450
le code 9, 16
conflit dinteractivit 400 Performance daffichage 441
les fichiers du site 102
convertir 64 perspectiveProjection
fonction Bouton 389 overwrite 413
filedOfView 284
neutraliser, dsactiver 414 focalLength 284
P projectionCenter 283, 284
Photoshop 24
N pageRanking 466 pitch() 314
name, proprit 83 Pages satellites 476 Pixelisation 250
navigateToURL 421 Panoramique 7 Pixellisation Voir Lisser les
Navigation, repres 218 dfilement en boucle 23 images
NetStream 195 raliser une texture raccord 24 Placer un objet au premier-plan
sens de dfilement 25 275
Nettet 27
images tremblantes 27 PaperVision 289 playheadTime 204
voir aussi Lisser diffrence entre Plein cran Voir Affichage
Camera3D et Podcast 168
new Tween() 34
FreeCamera3D 311 Poids standard dune page web
nextFrame 377
scne 3D et zone daffichage 103
Nodes 79 309
Point(X,Y) 84
Nombre d'images par seconde 10 exemple en ligne 314
Pointeur, aspect du pointeur au
Nommer importer
survol 35
fichiers et dossiers 465 MovieClip dans lespace 3D
Points de repre 211
fonction 10 309
objet 3D DAE 308 voir aussi Vido 217
occurrences 10
installer 289 Police
Nuancier 357
intgrer 297 conflit avec les masques 454
Number 9, 16, 20, 28
nativement 297 importer 451, 454
numChildren 258
ponctuellement 298 vectoriser 451
nombre de polygones 300 Position
O pitch 314 calcul 341
placer une scne 3D entre deux d'un clip 12
Object 463 MovieClip 309 relative 412
Objet primitives 320 prevFrame 377
opacit 12 roll 314 PrintJob 353
rotation 12 yaw 310, 314 Progression du chargement 105,
visibilit 12 Z (proprit) 311 107
INDEX 491
Proprits 12 vido 377 Sparer 451
alpha 47 zone setMetadata 468
animer 7, 14, 34, 44 cadre 363 Sites web et forums 484
courantes 14 fentre 363, 365
Sketchup 304
rotation 45, 46 jaillissante 363, 367
Skin 188
scaleX, scaleY 47 removeEventListener 14, 274
smoothing 250, 333
visible 37 Rpartir vers les calques 8
Son, accessibilit 481
y 46, 52 RESIZE 446
Sorenson Spark 137, 162, 163
Pseudo extension 10 Rsolution 139, 437
limite de Flash 349 Sous-classe 64
Puits de couleurs 357
Ressources 483 Sous-titrage 211
push() 384
Restauration 73 Spamdexing (spam) 465
Retard 18, 20 Squelette 77
Q Retarder une action 59 animer 84
avec formes graphiques 86
Richmdia 48, 239
Qualit 250 charger dans un nouveau SWF
roll() 314
Qualit daffichage Voir Lisser 94
les images RollOver vido 276
construire 80
Quick Time 184 root (racine) 237 contrainte de mouvement et de
rotation, proprit 12 rotation 80
RVBA, extraire une couche 385 dfinir 81
R humain 82
mode Excution 80
Racine (root) 237 S nom doccurrence 80
Ralenti 18 ordre daffichage des liaisons
effet 21 scaleMode 445
81
Rastrisation 250 scaleX, proprit 12
programmer 77
Ratio des pixels 138 scaleY, proprit 12
stage 237, 445
Rebondissement 18 Scnario 7
stageDisplayState 443
Rectangle 54 atteindre limage
prcdente 377 stageHeight 264, 445
Redimensionner la fentre 446 stageWidth 264, 445
suivante 377
Rfrencement 463, 464 compter les images 245 startDrag 406
Relief 361 dtecter limage active 376 startDrag, stopDrag 54
anaglyphe, crer Scnariser 48 Statistiques, pntration du
partir de 2 images 370 lecteur Flash 287
Scne
ActionScript 375
hauteur 264 Streaming 210
Photoshop 363
largeur 264 String() 434
couches RVB 365
mode d'affichage 445 Structure
interfaage dynamique 377
proprit 3D 284 conditionnelle 28
lunettes
actives 361 SCPlugin 292 dun document Flash 235
passives 361 Scroll 54 flottante 476
rseau lenticulaire 361 seek 204, 207 Styles 214, 215
technique de prise de vue 362 seekToNavCuePoints 218 CSS 473
Suivre le pointeur 18 Timer 59, 93, 286 dure 266

Supprimer dtecter la fin 64 enchaner des interpolations
couteur 113 stopper 64 47
symbole 451 Tortoise SVN 290 importer la classe gs 67
un SWF charg 232 totalFrames 245 mise jour 41
Surface utile 139, 437 Touche du clavier Voir Clavier onCompleteListener 412
SVNX 292 onStartListener 412
trace 131
overwrite 413
swapChildren 247 transitionManager 60, 62, 64
proprits 73
SWFAddress 428 dfinition 62
TweenMax gs, importer 67
SWFObject 428 paramtres 62
Typage 14, 28
SWFObject2 469, 476 Transparence 396
nombre 20
Swift 3D 299 accessibilit 481
animer 13 Typographie 451
Switch... case 393
du Flash 435 voir Police 454
Symboles
dplacement 25 Transtypage 64
chane de caractres String()
exporter pour ActionScript 383
434
U
nom d'occurrence 8, 14
placer le centre 24, 247 Trucage vido 141, 152 UILoader 110, 112
position 27 try 133, 134 uint 20, 28
transparent 48 Tutoriels vidos 483 unloadAndStop 235, 238
zone active 48 Twease 29 URL 421
Syntaxe chameau 14 Tween 29, 32, 38, 250 URLLoader 118, 119
sparateurs 10 enchanement 35 URLRequest 118
Systmes de navigation 389 instabilit 36 URLVariables 434
interpolation 36 useHandCursor 35
interrompre 36
T TweenEvent 32, 35, 38, 47
Tableau 384
COMPLETE 47, 90 V
enchanements 36
target 129, 131, 210, 392 MOTION_CHANGE 36 Valeur
Technologie 466 MOTION_FINISH 35, 36 alatoire 356
Teinte alatoire 355 MOTION_LOOP 36 gnrer 101
Temporiser une action dans le MOTION_RESUME 36 incrmenter 26
temps 59 MOTION_START 36 Variabilit du dbit Voir Vido
Tte de lecture, boucle 420 MOTION_STOP 36 Variables 18, 28, 33, 51
Text Layout Framework 458 TweenLight 41 globale 116
Texte 464 TweenLite 29 importer dans Flash 434
accessibilit 481 TweenMax 29, 44, 230, 250 locale 116
dfilant 54 assistant 42 si 59, 61
dynamique 431, 452 bzier 42 valeur par expression 35
statique 452 carte interactive 38 VBR, CBR Voir Vido
vectoriser 451 courbe de bzier 44 Vectorisation, accessibilit 481
Voir aussi Police dfinition 45 Vectoriser 451
Timecode 208, 221, 226 delay 73 Vlocit 18, 53
INDEX 493
Version lecteur Flash, compression 140, 152, 166 remappage temporel 165
pntration (statistiques) 287 configuration utilisateur 140, rembobiner 205
Vido 137, 177 141 rollOver 276
3D 268 dbit 151, 165 source 208
acclrer 204 dtecter la fin 217 sous-titrage 211
dtourage du fond vert 153 activer/dsactiver 215
Adobe After Effects
dimensions 268 standard 139
manuel dapprentissage 153
standard 164 streaming 210
Mode de fusion des calques timecode 221, 226
effet 3D 174
198
enchaner les vidos 217 trame 197
relief 377 entrelacement, progressif
encodage 217, 219
Adobe F4V 162 138
exporter pour Flash 6 191
Adobe Media Encoder externaliser 139 transparence 137, 163
Autres 168 F4V 177, 179, 218, 224, 227 voir aussi Adobe After Effects,
FTP 168 Adoble Media Encoder,
Flash Media Server 210
Passes dencodage 165 Adobe Premiere Pro, Apple
flux simultans 139 Final Cut Pro, Apple iMovie,
Rglages avancs 166 FLV 162, 218, 224, 227-228 Apple Motion, Cadence, On2
Rglages de dbit gnrateur de particules 141 VP6, Quick Time, Sorenson
CBR, VBR 165 HD 139 Spark, Window Movie Maker
Variabilit du dbit 165 images-cls 166, 204, 220 volume audio 205, 206
affichage en relief 377 intgre 229 videoEvent 215
agrandir 197 problme de Viewport3D 308
Apple Motion 165 synchronisation 165 Visibilit 396
intgrer 139
arrter 204, 232, 235 visible 396
interactive 201 proprit 12
dans un SWF imbriqu 191
lecture automatique 203
depuis le document racine volume() 205
234 lire 204
avec des boutons
Audio 183
prprogramms 172
via FLV 161, 167 en arrire (vitesse variable et
W
boucle 215 fluide) 227 Window Movie Maker 154
bruit 139 lissage 268 wmode 435
cadence 138, 143 lumire (prise de vue) 152
capture 139 mtadonnes 226
chapitrage 207, 211, 218 mise en cache 139, 203 X
codage diffrentiel 180 Points de repre (CuePoints)
dynamiques (en x, proprit 12
codec 137 ActionScript) 226, 227 XFL 450
compatibilit 163 vnement 217, 223 XML 113, 211, 217
format vido de Flash 140 navigation 217, 220 atteindre
composant FLVPlayBack Voir profondeur de couleur 143 attribut 119
FLVPlayBack qualit et chelle 139 nud 119
composite dans Flash 169 ratio des pixels 138, 143 cibler un attribut connu 120
crer un document XML 117 site dynamique 134 Z

importer du HTML 119 structure 116
length() 119 XMP 467 z, proprit 279
lire 119 Zone active sur un symbole 48
mcanisme 116 Zone de dfilement 54
Y Zoom 122, 260
nud 117
optimiser la gestion des y, proprit 12
donnes 121 yaw 310
Index des notes et encadrs
3D Accessibilit Placer un nom dtiquette sur une

Accder directement une Aides au dveloppement de image du scnario 426
bibliothque dobjets 3D KMZ contenus spcifiques pour les Raliser une image de type motif,
300 malentendants et les raccord, pour panoramiques 24
Aide en ligne de PaperVision 328 malvoyants 481 Rsolution limite des images 349
Conditions dutilisation de la Informations sur laccessibilit Systme hexadcimal 356
banque dobjets 3D Google dans Flash 481 HTML
Sketchup 300 Animation Crer un lien HTML sans
Gestion des lumires dans Animation de filtres 353 ActionScript dans Flash 422
PaperVision 328 Dfinir les coordonnes dune Les cibles daffichage 421
Guide de rfrence PaperVision courbe de Bzier pour la classe Tester les liens HTML sur un
328 TweenMax 44 serveur distant 427
Identifier des groupes dobjets Dfinition dune interpolation Langage
pour PaperVision 303 TweenMax 45 3D avec la classe Caurina 250
Interactivit sur les objets 3D 328 Dfinition de la classe 3D avec la classe Tween 250
La sous-classe Camera3D 311 transitionManager 62 3D avec la classe TweenMax 250
La vido en relief 377 viter les images tremblantes 27 Arrter un couteur 55
Les primitives de PaperVision Grer un ascenseur avec une Arrter un Timer 64
320 acclration 53 Arrondir une valeur 101
Limite de taille des fichiers 3D Lassistant TweenMax 42 Calcul de la dure dun
300 Mise jour de la classe chronomtre 59
Lisser les images pour la 3D 250 GreenSock TweenMax 41 Calculer avec la class Math 22
Optimiser un site 3D 314 Stabiliser une interpolation Calculer un pas dincrmentation
Placer un symbole par-dessus un Tween 36 26
objet 3D 309 Conception et intgration Ciblage dans un document Flash
Raliser un livre interactif avec Dimensions standard dune vido AS3 237
InDesign 250 pour le Web 164 Ciblage des boutons entre SWF
Sketchup 304 Graphisme imbriqus 415
Vrifier les valeurs de ses propres Centrer les images avec le Composant FLVPlayBack pour
touches clavier 323 composant UILoader 110 ActionScript 2 ou 3 170
retenir 14, 18, 22, 28, 38, 48, 55, Dfinition des paramtres du Conversion de degrs en radians
64, 75, 85, 91, 94, 97, 103, 107, filtre flou BlurFilter 68 et inversement 22
113, 121, 131, 134, 147, 153, 169, Dfinitions des paramtres du Crer un fichier XML 117
174, 184, 188, 191, 197, 199, 207, filtre biseau BevelFilter 70 Dfinir les chemins pour les
211, 215, 216, 227, 231, 238, 251, Dfinitions des paramtres du requtes externes 102
260, 268, 279, 287, 299, 304, 311, filtre halo GlowFilter 70 Dfinition du constructeur Point()
314, 329, 335, 337, 343, 353, 355, Dfinitions des paramtres du 84
356, 360, 377, 387, 395, 404, 407, filtre ombre porte Dtecter la fin dune boucle
414, 420, 422, 427, 430, 434, 435, DropShadowFilter 69 ditration Timer 64
443, 449, 451, 458, 462, 464, 467, Faut-il renseigner toutes les Diffrence entre Loader et
469, 476, 481, 482 proprits pour les filtres ? 73 URLLoader 119
Diffrence entre target et Target et currentTarget 415 Vido

currentTarget 129 Typage des nombres 20 Chapitrage vido avec les points
Doit-on toujours placer un Logiciel de repre 211
couteur sur un chargeur pour Centraliser les classes ajoutes Comment ractiver les champs de
activer laffichage dun contenu avec les chemins de classe dimensionnement de
charg dynamiquement ? 103 (classPath) 42 lencodeur ? 220
Enchaner des actions une Installer une classe importe 428 Composant FLVPlayBack pour
interpolation TweenMax 47 Localiser les classes natives de ActionScript 2 ou 3 170
Exemples de ciblage de contenus Flash 32 Conflit entre la cadence des
dans des SWF imbriqus (AS2 Navigation vidos et la cadence des
et AS3) 237 Diffrence entre les proprits animations Flash 165
Exporter un symbole pour alpha et visible 396 Dfinition des composants
ActionScript 383 Menus avec des symboles associs FLVPlayBack 190
Gnrer une valeur alatoire 101 boutons 395 Dsactiver et ractiver laffichage
Lordre numrique en PDF des sous-titres 215
ActionScript 112 Convertir un PDF en SWF avec Enchaner plusieurs vidos la
Le transtypage 64 FlashPaper 451 suite 217
Les classes 11 Cration dynamique de fichiers Encoder en FLV avec Apple
PDF 451 Compressor 147
Les noms du fichier appelant 95
Diffrence structurelle entre tendre les formatages du
Les proprits en ActionScript 3
Flash et Acrobat 450 document XML pour les sous-
12
Sites Full Flash titres 215
Les touches de commande 321
Activer lacclration matrielle Exporter le projet After Effects natif
Lire le XML 119 pour les contenus riches 441 directement vers Flash 153
Mcanisme dun tableau (Array) Dsactivation des contrles du Flash Media Server 210
384 clavier en plein cran 441 Icne de slection de fichier du
Mcanisme dune boucle for 127 Modes daffichage de la scne composant FLVPlayBack 171
Nommer les occurrences 10 445
Intgrer physiquement une vido
Nommer une fonction 10 Principe de flottement faon
dans le scnario 229
Options dimpression 354 styles CSS 449
Le composant CaptionButton
Quitter le mode Plein cran avec
O placer lcouteur et la 215
Echap 443
fonction ? 63 Les formats pris en charge par
Squelette
Paramtrer un composant via Adobe Media Encoder 156
Cibler un segment 84
ActionScript 174 Les images-cls 166
Construire un squelette pour la
Philosophie de AS3 9 Mcanisme du codec On2 VP6
programmation 80
Pourquoi transtyper un chargeur Cration de squelettes humains 162
en MovieClip ? 235 82 Modifier la cadence des images
Proprit overwrite pour Heure de cration et excution 78 165
TweenMax 413 Paramtre source des composants
Typographie
Proprits dalignement de la Affichage des polices dans Flash vidos 172
scne 446 452 Reconstituer un univers 3D avec
Proprits 3D de la scne 284 Le nouveau moteur de texte Text une vido aplatie 174
Que faire des classes aprs Layout Framework 458 Trucage avec captation sur fond
compilation des SWF ? 42 Les polices et les masques 454 vert 152
Syntaxe chameau et sparateurs Vectoriser un texte dans Flash Utiliser le FLV pour laudio, la
10 451 vido ou les deux 161
Le Campus
ActionScript 3 et le motion design
Programmer facilement la vido en HD, la 3D, le relief, les
Tweens dans le scnario ! Table des matires
Les animations en ActionScript
Vous tes graphiste et dbutez en ActionScript 3 ou utilisez dj Interpolations et interactivit avec
ActionScript 2. Vous aimeriez contrler les contenus et profiter des les classes Tween et TweenMax
performances de ce nouveau langage directement dans le scnario Les transitions deffets et de
de Flash. Ce livre est fait pour vous ! filtres
La programmation de squelettes
Vous y trouverez des solutions nouvelles, concrtes et cls en main. Les galeries dimages
Vous y acquerrez les notions dActionScript indispensables pour La vido standard et composite
en FLV
pouvoir concevoir, sans laide dun dveloppeur, des interfaces La vido HD en F4V
sophistiques et dynamiques partir de symboles placs dans le La vido interactive
scnario. La 3D native
La 3D et PaperVision
Sont abords de faon claire et didactique : la vido en qualit API daffichage et de colorimtrie
HD avec toute linteractivit, la 3D native, lanimation, les classes Le Web en vrai relief
danimation Tweens et TweenMax, les effets et les filtres, la gestion Les systmes de navigation
avancs
de documents imbriqus dsormais plus complexe. Mais aussi de La communication Flash/HTML
nombreux concepts indits, comme le rfrencement de documents La gestion de sites Full Flash
Flash, le relief, lanimation de squelettes et la 3D avec PaperVision. Les solutions de rfrencement
du Flash
Plus quun livre dapprentissage, cet ouvrage rassemble toutes les Laccessibilit dans Flash
techniques quun bon web designer doit aujourdhui connatre. Un Ressources
outil indispensable en production.
propos de lauteur Niveau : Intermdiaire / Avanc

Catgorie : Graphisme web /
Arzhur Caouissin, auteur et ralisateur multimdia indpendant, est formateur depuis plus Programmation
de dix ans lcole des Gobelins, chez Pyramid et lINA. Spcialis dans la technologie
Configuration : Flash CS4 et ultrieur,
Flash, il est apprci pour sa vision transversale et artistique des diffrents mdias, et pour
son expertise en cration de contenus web enrichis.
Mac OS / Windows
Codes sources et galerie sur www.pearson.fr !
Pearson Education France ISBN : 978-2-7440-4128-0

47 bis rue des Vinaigriers
75010 Paris
Tl. : 01 72 74 90 00
Fax : 01 42 05 22 17
www.pearson.fr

ActionScript 3 Et Le Motion Design

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

ActionScript 3 Et Le Motion Design

Cargado por

Copyright:

Formatos disponibles

Le Campus

Publi par Pearson Education France

Avec la collaboration de Bruno Sbarbe

Table des matires

qui sadresse ce livre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Les intentions de lauteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1 Les animations en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Animer les proprits : position, dimension, rotation,

Grer les proprits avec des conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Grer les acclrations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Grer le dfilement de panoramiques en boucle . . . . . . . . . . . . . . . . . . . . 23

2 Interpolations et interactivit avec les classes Tween

Animer une galerie avec la classe Tween intgre . . . . . . . . . . . . . . . . . . . 29

Animer une carte interactive avec la classe TweenMax . . . . . . . . . . . . . . 38

Dfilant TweenMax avec un pointeur et un masque . . . . . . . . . . . . . . . . . 48

VI ACTIONSCRIPT 3 ET MOTION DESIGN

3 Les transitions deffets et de filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Galerie photo avec transition de filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

5 Les galeries dimages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

TABLE DES MATIRES VII

Intgrer de la vido composite dans Flash . . . . . . . . . . . . . . . . . . . . . . . . . 169

7 La vido HD en F4V . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

8 La vido interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

VIII ACTIONSCRIPT 3 ET MOTION DESIGN

Mise en cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Chapitrage vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Lire une vido en arrire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Mur dimages 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Navigation spatiale 3D faon TimeMachine ou Aero . . . . . . . . . . . . . . . . 279

TABLE DES MATIRES IX

11 API daffichage et de colorimtrie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

12 Le Web en vrai relief . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361

X ACTIONSCRIPT 3 ET MOTION DESIGN

Raliser un anaglyphe avec Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

Grer un anaglyphe en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

13 Les systmes de navigation avancs . . . . . . . . . . . . . . . . . . . . . . . . . . 389

Boutons MovieClip anims et interfaables . . . . . . . . . . . . . . . . . . . . . . . . 395

Console de navigation en miniature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

14 La communication Flash/HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

TABLE DES MATIRES XI

Importer Flash AS1/AS2 dans Flash AS3 . . . . . . . . . . . . . . . . . . . . . . . . . . 458

16 Les solutions de rfrencement du Flash . . . . . . . . . . . . . . . . . . . . . 463

17 Laccessibilit dans Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477

XII ACTIONSCRIPT 3 ET MOTION DESIGN

Tutoriels vidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483

Index des notes et encadrs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485

2 ACTIONSCRIPT 3 ET MOTION DESIGN

qui sadresse ce livre

Les intentions de lauteur

4 ACTIONSCRIPT 3 ET MOTION DESIGN

La cration danimations partir de classes importes afin de permettre la cration

Nous disposons dautre part de deux types dencadrs :

6 ACTIONSCRIPT 3 ET MOTION DESIGN

Les animations en ActionScript

Animer les proprits : position, dimension, rotation,

8 ACTIONSCRIPT 3 ET MOTION DESIGN

Exemples > ch1_animationEnActionScript_1.fla

En haut du scnario, un calque nomm actions contient le code suivant :

function defilementPanoramique (evt:Event) {

////////////// width et height

LES ANIMATIONS EN ACTIONSCRIPT 9

////////////// scaleX et scaleY

Tout dabord, nous dclarons les valeurs utiliser :

Dans la partie initialisation, une valeur de type nombre, vitesseDefilement, repr-