Sie sind auf Seite 1von 510

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
LivreActionScript.book Page 2 Vendredi, 15. janvier 2010 12:34 12

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
LivreActionScript.book Page 3 Vendredi, 15. janvier 2010 12:34 12

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.
LivreActionScript.book Page 4 Vendredi, 15. janvier 2010 12:34 12

4 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 5 Vendredi, 15. janvier 2010 12:34 12

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.
LivreActionScript.book Page 6 Vendredi, 15. janvier 2010 12:34 12

6 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 7 Vendredi, 15. janvier 2010 12:34 12

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
LivreActionScript.book Page 8 Vendredi, 15. janvier 2010 12:34 12

8 ACTIONSCRIPT 3 ET MOTION DESIGN

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

this.addEventListener(Event.ENTER_FRAME,defilementPanoramique);

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;
arbre3_mc.x+=vitesseDefilement*0.8;
arbre4_mc.x+=vitesseDefilement*0.9;

////////////// y
ciel_mc.y-=1;

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


ciel_mc.width+=10;
ciel_mc.height+=10;
LivreActionScript.book Page 9 Vendredi, 15. janvier 2010 12:34 12

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;
arbre2_mc.alpha-=0.03;
arbre3_mc.alpha-=0.035;
arbre4_mc.alpha-=0.04;

////////////// 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 :


var vitesseDefilement:Number=5;

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
this.addEventListener(Event.ENTER_FRAME,defilementPanoramique);
LivreActionScript.book Page 10 Vendredi, 15. janvier 2010 12:34 12

10 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 11 Vendredi, 15. janvier 2010 12:34 12

LES ANIMATIONS EN ACTIONSCRIPT 11


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 :
function defilementPanoramique (evt:Event) {
}

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;
arbre2_mc.x+=vitesseDefilement*0.5;
arbre3_mc.x+=vitesseDefilement*0.8;
arbre4_mc.x+=vitesseDefilement*0.9;

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

12 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 13 Vendredi, 15. janvier 2010 12:34 12

LES ANIMATIONS EN ACTIONSCRIPT 13


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 :
////////////// width et height
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;
arbre1_mc.alpha-=0.025;
arbre2_mc.alpha-=0.03;
arbre3_mc.alpha-=0.035;
arbre4_mc.alpha-=0.04;

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 :
////////////// scaleX et scaleY
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);
}
LivreActionScript.book Page 14 Vendredi, 15. janvier 2010 12:34 12

14 ACTIONSCRIPT 3 ET MOTION DESIGN

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.

Exemples > ch1_animationEnActionScript_2.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, 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).
LivreActionScript.book Page 15 Vendredi, 15. janvier 2010 12:34 12

LES ANIMATIONS EN ACTIONSCRIPT 15


Figure 1.3
Structure du
document.

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


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

//------------------ actions
this.addEventListener(Event.ENTER_FRAME,defilementPanoramique);

function defilementPanoramique (evt:Event) {


////////////// 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;
arbre3_mc.x+=(vitesseDefilement*0.8)*sens;
arbre4_mc.x+=(vitesseDefilement*0.9)*sens;

if (ciel_mc.x>limiteDroite) {
sens=1;
}
if (ciel_mc.x<limiteGauche) {
sens=-1;
}

////////////// y
ciel_mc.y-=sens;

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


ciel_mc.width+=sens*10;
ciel_mc.height+=sens*10;

////////////// rotation
ciel_mc.rotation-=sens/10;

////////////// alpha
arbre1_mc.alpha-=sens*0.025;
arbre2_mc.alpha-=sens*0.03;
arbre3_mc.alpha-=sens*0.035;
arbre4_mc.alpha-=sens*0.04;

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


dune_mc.scaleX+=sens/1000;
dune_mc.scaleY+=sens/1000;

// trace
trace(ciel_mc.x);
}
LivreActionScript.book Page 16 Vendredi, 15. janvier 2010 12:34 12

16 ACTIONSCRIPT 3 ET MOTION DESIGN

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 vitesseDefilement:Number=5;
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
LivreActionScript.book Page 17 Vendredi, 15. janvier 2010 12:34 12

LES ANIMATIONS EN ACTIONSCRIPT 17


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
this.addEventListener(Event.ENTER_FRAME,defilementPanoramique);
function defilementPanoramique (evt:Event) {
}

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;
arbre2_mc.x+=(vitesseDefilement*0.5)*sens;
arbre3_mc.x+=(vitesseDefilement*0.8)*sens;
arbre4_mc.x+=(vitesseDefilement*0.9)*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;
////////////// width et height
ciel_mc.width+=sens*10;
LivreActionScript.book Page 18 Vendredi, 15. janvier 2010 12:34 12

18 ACTIONSCRIPT 3 ET MOTION DESIGN

ciel_mc.height+=sens*10;
////////////// rotation
ciel_mc.rotation-=sens/10;
////////////// alpha
arbre1_mc.alpha-=sens*0.025;
arbre2_mc.alpha-=sens*0.03;
arbre3_mc.alpha-=sens*0.035;
arbre4_mc.alpha-=sens*0.04;
////////////// scaleX et scaleY
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.
LivreActionScript.book Page 19 Vendredi, 15. janvier 2010 12:34 12

LES ANIMATIONS EN ACTIONSCRIPT 19

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.
//------------------ initialisation
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);
photo3_mc.x+=(mouseX-photo3_mc.x)/(retard*3);
// y
LivreActionScript.book Page 20 Vendredi, 15. janvier 2010 12:34 12

20 ACTIONSCRIPT 3 ET MOTION DESIGN

photo1_mc.y+=(mouseY-photo1_mc.y)/retard;
photo2_mc.y+=(mouseY-photo2_mc.y)/(retard*2);
photo3_mc.y+=(mouseY-photo3_mc.y)/(retard*3);
}

Dans un premier temps, nous dclarons les variables utiliser :


//------------------ initialisation
var retard:Number=20;

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
this.addEventListener(Event.ENTER_FRAME,navigation);

Plus loin, nous inscrivons la fonction qui rassemble les actions excuter :
function navigation(evt:Event) {
}

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
LivreActionScript.book Page 21 Vendredi, 15. janvier 2010 12:34 12

LES ANIMATIONS EN ACTIONSCRIPT 21


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.
photo1_mc.x+=(mouseX-photo1_mc.x)/retard;
photo1_mc.y+=(mouseY-photo1_mc.y)/retard;

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 :
photo1_mc.x+=(mouseX-photo1_mc.x)/retard;
photo2_mc.x+=(mouseX-photo2_mc.x)/retard;
photo3_mc.x+=(mouseX-photo3_mc.x)/retard;
photo1_mc.y+=(mouseY-photo1_mc.y)/retard;
photo2_mc.y+=(mouseY-photo2_mc.y)/retard;
photo3_mc.y+=(mouseY-photo3_mc.y)/retard;

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 :
//------------------ initialisation
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);
photo3_mc.x+=(mouseX-photo3_mc.x)/(retard*3);
LivreActionScript.book Page 22 Vendredi, 15. janvier 2010 12:34 12

22 ACTIONSCRIPT 3 ET MOTION DESIGN

// y
photo1_mc.y+=(mouseY-photo1_mc.y)/retard;
photo2_mc.y+=(mouseY-photo2_mc.y)/(retard*2);
photo3_mc.y+=(mouseY-photo3_mc.y)/(retard*3);
}

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.
LivreActionScript.book Page 23 Vendredi, 15. janvier 2010 12:34 12

LES ANIMATIONS EN ACTIONSCRIPT 23


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.

Exemples > ch1_animationEnActionScript_4.fla

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.
LivreActionScript.book Page 24 Vendredi, 15. janvier 2010 12:34 12

24 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 25 Vendredi, 15. janvier 2010 12:34 12

LES ANIMATIONS EN ACTIONSCRIPT 25


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 :


//-------------- initialisation
var sensDefilement:Number=1;

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
this.addEventListener(Event.ENTER_FRAME,panoramiqueEnBoucle);

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 :
function panoramiqueEnBoucle (evt:Event) {
}
LivreActionScript.book Page 26 Vendredi, 15. janvier 2010 12:34 12

26 ACTIONSCRIPT 3 ET MOTION DESIGN

lintrieur du bloc dinstruction de notre fonction, nous programmons dabord le dfilement


des objets par incrmentation :
// dfilement
ciel_mc.x+=3*sensDefilement;
colline_mc.x+=6*sensDefilement;

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 :
if (ciel_mc.x<=sensDefilement*(ciel_mc.width/3)) {
// 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 :
if (ciel_mc.x<=sensDefilement*(ciel_mc.width/3)) {
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
LivreActionScript.book Page 27 Vendredi, 15. janvier 2010 12:34 12

LES ANIMATIONS EN ACTIONSCRIPT 27


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 :
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;
}

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 :
//-------------- 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;
}
LivreActionScript.book Page 28 Vendredi, 15. janvier 2010 12:34 12

28 ACTIONSCRIPT 3 ET MOTION DESIGN

} 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.
LivreActionScript.book Page 29 Vendredi, 15. janvier 2010 12:34 12

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).
LivreActionScript.book Page 30 Vendredi, 15. janvier 2010 12:34 12

30 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 31 Vendredi, 15. janvier 2010 12:34 12

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;
tweenMurX= new Tween(pano_mc, "x", Strong.easeOut, pano_mc.x,110,4, true);
tweenBusteX= new Tween(buste_btn, "x", Strong.easeOut, buste_btn.x, -560,4, true);
tweenLustreX= new Tween(lustre_mc, "x", Strong.easeOut, lustre_mc.x,200,4, true);
tweenLampeX= new Tween(lampe_mc, "x", Strong.easeOut, lampe_mc.x,100,4, true);
}
LivreActionScript.book Page 32 Vendredi, 15. janvier 2010 12:34 12

32 ACTIONSCRIPT 3 ET MOTION DESIGN

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


evt.currentTarget.gotoAndPlay(11);
}

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.Tween;
import fl.transitions.easing.*;
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
LivreActionScript.book Page 33 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 33


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.*;
import fl.transitions.easing.*;

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
LivreActionScript.book Page 34 Vendredi, 15. janvier 2010 12:34 12

34 ACTIONSCRIPT 3 ET MOTION DESIGN

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).
LivreActionScript.book Page 35 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 35


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);
function defilementGauche (evt:MouseEvent) {
// 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
flecheDroite_btn.addEventListener(MouseEvent.MOUSE_OVER,defilementDroite);
function defilementDroite (evt:MouseEvent) {
flecheDroite_btn.useHandCursor = false;
flecheGauche_btn.visible=true;
flecheDroite_btn.visible=false;
tweenMurX= new Tween(pano_mc, "x", Strong.easeOut, pano_mc.x,110,4, true);
tweenBusteX= new Tween(buste_btn, "x", Strong.easeOut, buste_btn.x, -560,4, true);
tweenLustreX= new Tween(lustre_mc, "x", Strong.easeOut, lustre_mc.x,200,4, true);
tweenLampeX= new Tween(lampe_mc, "x", Strong.easeOut, lampe_mc.x,100,4, true);
}

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 :
tweenMurX= new Tween(pano_mc, "x", Strong.easeOut, pano_mc.x,110,4, true);

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
LivreActionScript.book Page 36 Vendredi, 15. janvier 2010 12:34 12

36 ACTIONSCRIPT 3 ET MOTION DESIGN

pour appeler la nouvelle fonction (consultez le Tableau 2.2 pour connatre les diffrents
vnements disponibles avec cette classe) :
tweenMurX.addEventListener(TweenEvent.MOTION_FINISH, apresTween1);
}
function apresTween1 (evt:TweenEvent) {
}

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 % :
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);
}

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
LivreActionScript.book Page 37 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 37


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 :
flecheGauche_btn.visible=false;

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 :
flecheDroite_btn.visible=true;

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
flecheDroite_btn.addEventListener(MouseEvent.MOUSE_OVER,defilementDroite);
function defilementDroite (evt:MouseEvent) {
flecheDroite_btn.useHandCursor = false;
flecheGauche_btn.visible=true;
flecheDroite_btn.visible=false;
tweenMurX= new Tween(pano_mc, "x", Strong.easeOut, pano_mc.x,110,4, true);
tweenBusteX= new Tween(buste_btn, "x", Strong.easeOut, buste_btn.x, -560,4, true);
tweenLustreX= new Tween(lustre_mc, "x", Strong.easeOut, lustre_mc.x,200,4, true);
tweenLampeX= new Tween(lampe_mc, "x", Strong.easeOut, lampe_mc.x,100,4, true);
}

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);
LivreActionScript.book Page 38 Vendredi, 15. janvier 2010 12:34 12

38 ACTIONSCRIPT 3 ET MOTION DESIGN

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


evt.currentTarget.gotoAndPlay(11);
}

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.
LivreActionScript.book Page 39 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 39


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.

Exemples > ch2_interpolationEtInteractiviteAvecClassesTweenEtTweenMax_2.fla

Le document que nous utilisons prsente la structure suivante : dans la scne, au-dessus du
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.
LivreActionScript.book Page 40 Vendredi, 15. janvier 2010 12:34 12

40 ACTIONSCRIPT 3 ET MOTION DESIGN

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});
restaurer_btn.visible=true;
}

// Ordonne y
plusY_btn.addEventListener(MouseEvent.CLICK,plus2);
function plus2 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {y:monde_mc.y-100, delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}
moinsY_btn.addEventListener(MouseEvent.CLICK,moins2);
function moins2 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {y:monde_mc.y+100, delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}

// Rotation
plusRotation_btn.addEventListener(MouseEvent.CLICK,plus3);
function plus3 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {rotation:monde_mc.rotation-15, delay:0,
ease:Strong.easeOut});
restaurer_btn.visible=true;
}
moinsRotation_btn.addEventListener(MouseEvent.CLICK,moins3);
function moins3 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {rotation:monde_mc.rotation+15, delay:0,
ease:Strong.easeOut});
restaurer_btn.visible=true;
}

// Alpha
plusAlpha_btn.addEventListener(MouseEvent.CLICK,plus4);
function plus4 (evt:MouseEvent) {
LivreActionScript.book Page 41 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 41


if (monde_mc.alpha<1) {
TweenMax.to(monde_mc,1, {alpha:monde_mc.alpha+0.1, delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}
}
moinsAlpha_btn.addEventListener(MouseEvent.CLICK,moins4);
function moins4 (evt:MouseEvent) {
if (monde_mc.alpha>0) {
TweenMax.to(monde_mc,1, {alpha:monde_mc.alpha-0.1, delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}
}

// Echelle
plusEchelle_btn.addEventListener(MouseEvent.CLICK,plus5);
function plus5 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {scaleX:monde_mc.scaleX+0.5, scaleY:monde_mc.scaleY+0.5,
delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}
moinsEchelle_btn.addEventListener(MouseEvent.CLICK,moins5);
function moins5 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {scaleX:monde_mc.scaleX-0.5, scaleY:monde_mc.scaleY-0.5,
delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}

// 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) {
restaurer_btn.visible=false;
}

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.
LivreActionScript.book Page 42 Vendredi, 15. janvier 2010 12:34 12

42 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 43 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 43


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).
LivreActionScript.book Page 44 Vendredi, 15. janvier 2010 12:34 12

44 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
restaurer_btn.visible=false;

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.
LivreActionScript.book Page 45 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 45


Viennent ensuite les actions relatives chaque bouton plus et moins, pour chaque proprit :
//// 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;
}

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
plusX_btn.addEventListener(MouseEvent.CLICK,plus1);
LivreActionScript.book Page 46 Vendredi, 15. janvier 2010 12:34 12

46 ACTIONSCRIPT 3 ET MOTION DESIGN

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});
restaurer_btn.visible=true;
}

// Ordonne y
plusY_btn.addEventListener(MouseEvent.CLICK,plus2);
function plus2 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {y:monde_mc.y-100, delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}
moinsY_btn.addEventListener(MouseEvent.CLICK,moins2);
function moins2 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {y:monde_mc.y+100, delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}

// Rotation
plusRotation_btn.addEventListener(MouseEvent.CLICK,plus3);
function plus3 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {rotation:monde_mc.rotation-15, delay:0,
ease:Strong.easeOut});
restaurer_btn.visible=true;
}
moinsRotation_btn.addEventListener(MouseEvent.CLICK,moins3);
function moins3 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {rotation:monde_mc.rotation+15, delay:0,
ease:Strong.easeOut});
restaurer_btn.visible=true;
}

Les proprits alpha, scaleX et scaleY sont gres un peu diffremment :


// Alpha
plusAlpha_btn.addEventListener(MouseEvent.CLICK,plus4);
function plus4 (evt:MouseEvent) {
if (monde_mc.alpha<1) {
TweenMax.to(monde_mc,1, {alpha:monde_mc.alpha+0.1, delay:0,
ease:Strong.easeOut});
restaurer_btn.visible=true;
}
}
moinsAlpha_btn.addEventListener(MouseEvent.CLICK,moins4);
function moins4 (evt:MouseEvent) {
if (monde_mc.alpha>0) {
TweenMax.to(monde_mc,1, {alpha:monde_mc.alpha-0.1, delay:0,
ease:Strong.easeOut});
restaurer_btn.visible=true;
}
}

// Echelle
plusEchelle_btn.addEventListener(MouseEvent.CLICK,plus5);
function plus5 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {scaleX:monde_mc.scaleX+0.5,
scaleY:monde_mc.scaleY+0.5, delay:0, ease:Strong.easeOut});
LivreActionScript.book Page 47 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 47


restaurer_btn.visible=true;
}
moinsEchelle_btn.addEventListener(MouseEvent.CLICK,moins5);
function moins5 (evt:MouseEvent) {
TweenMax.to(monde_mc,2, {scaleX:monde_mc.scaleX-0.5,
scaleY:monde_mc.scaleY-0.5, delay:0, ease:Strong.easeOut});
restaurer_btn.visible=true;
}

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});
tweenMonde.addEventListener(TweenEvent.COMPLETE, tweenFini1);
}
function tweenFini1 (evt:TweenEvent) {
restaurer_btn.visible=false;
}

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 :
tweenMonde.addEventListener(TweenEvent.COMPLETE, tweenFini1);
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.
LivreActionScript.book Page 48 Vendredi, 15. janvier 2010 12:34 12

48 ACTIONSCRIPT 3 ET MOTION DESIGN

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).
LivreActionScript.book Page 49 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 49


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.
LivreActionScript.book Page 50 Vendredi, 15. janvier 2010 12:34 12

50 ACTIONSCRIPT 3 ET MOTION DESIGN

Exemples > ch2_interpolationEtInteractiviteAvecClassesTweenEtTweenMax_3.fla

Dans le calque actions, nous pouvons lire le code suivant :


//-------------------- 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);
}

//// actions boutons


// +
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,
ease:Strong.easeOut});
} 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) {
addEventListener(Event.ENTER_FRAME,placerTexte);
if (ascenseur_mc.barre_btn.y<hauteurScroll-hauteurBarre-pas) {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:ascenseur_mc.barre_btn.y+pas,
ease:Strong.easeOut});
} else {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:hauteurScroll-hauteurBarre,
ease:Strong.easeOut});
}
}

// 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){
addEventListener(Event.ENTER_FRAME,placerTexte);
evt.currentTarget.startDrag(false,zoneDeDeplacement);
}
LivreActionScript.book Page 51 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 51


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);
}
LivreActionScript.book Page 52 Vendredi, 15. janvier 2010 12:34 12

52 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 53 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 53


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:


//// actions boutons
// +
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,
ease:Strong.easeOut});
} 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,
ease:Strong.easeOut});
} else {
TweenMax.to(ascenseur_mc.barre_btn,1, {y:hauteurScroll-hauteurBarre,
ease:Strong.easeOut});
}
}

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
LivreActionScript.book Page 54 Vendredi, 15. janvier 2010 12:34 12

54 ACTIONSCRIPT 3 ET MOTION DESIGN

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
var zoneDeDeplacement:Rectangle = new Rectangle(0,0,0,hauteurScroll-hauteurBarre);

ascenseur_mc.barre_btn.addEventListener(MouseEvent.MOUSE_DOWN,
activerDeplacement);
function activerDeplacement(evt:MouseEvent){
addEventListener(Event.ENTER_FRAME,placerTexte);
evt.currentTarget.startDrag(false,zoneDeDeplacement);
}

addEventListener(MouseEvent.MOUSE_UP, stopperDeplacement);
function stopperDeplacement(evt:MouseEvent){
evt.currentTarget.stopDrag();
}

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 :
var zoneDeDeplacement:Rectangle = new Rectangle(0,0,0,hauteurScroll-hauteurBarre);

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);
function activerDeplacement(evt:MouseEvent){
addEventListener(Event.ENTER_FRAME,placerTexte);
evt.currentTarget.startDrag(false,zoneDeDeplacement);
}

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
LivreActionScript.book Page 55 Vendredi, 15. janvier 2010 12:34 12

INTERPOLATIONS ET INTERACTIVIT AVEC LES CLASSES TWEEN ET TWEENMAX 55


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 :
addEventListener(MouseEvent.MOUSE_UP, stopperDeplacement);
function stopperDeplacement(evt:MouseEvent) {
evt.currentTarget.stopDrag();
}

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).
LivreActionScript.book Page 56 Vendredi, 15. janvier 2010 12:34 12

56 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 57 Vendredi, 15. janvier 2010 12:34 12

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.
LivreActionScript.book Page 58 Vendredi, 15. janvier 2010 12:34 12

58 ACTIONSCRIPT 3 ET MOTION DESIGN

Exemples > ch3_transitionsEffetsEtFiltres_1.fla

Le document que nous utilisons prsente la structure suivante : dans la scne, au-dessus du
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 :


//-------------- initialisation
import fl.transitions.*;
import fl.transitions.easing.*;

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,
duration:dureeBoucle/2000, easing:Strong.easeInOut});
}
i++;
} else {
LivreActionScript.book Page 59 Vendredi, 15. janvier 2010 12:34 12

LES TRANSITIONS DEFFETS ET DE FILTRES 59


galerie_mc.visible=false;
}
}
lancerGalerie();

transitionPhoto.addEventListener("allTransitionsOutDone", suite2);
function suite2(evt:Event) {
MovieClip(evt.target.content).visible=false;
}

Tout dabord, nous importons les classes ncessaires pour lanimation :


//-------------- initialisation
import fl.transitions.*;
import fl.transitions.easing.*;

Ensuite, nous dfinissons les variables :


var i:Number=1;
var nombreDePhotos:Number=6;
var dureeBoucle:Number=8000;

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).
var boucle:Timer=new Timer(dureeBoucle,nombreDePhotos);

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.
LivreActionScript.book Page 60 Vendredi, 15. janvier 2010 12:34 12

60 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
galerie_mc.visible=false;

Cest seulement lorsque la fonction lancerGalerie sera active que la galerie sera raffiche.
Viennent ensuite les actions :
//-------------- actions

boucle.addEventListener(TimerEvent.TIMER,lancerBoucle);
boucle.start();

function lancerBoucle(evt:TimerEvent) {
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 :
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,
duration:dureeBoucle/2000, easing:Strong.easeInOut});
}
LivreActionScript.book Page 61 Vendredi, 15. janvier 2010 12:34 12

LES TRANSITIONS DEFFETS ET DE FILTRES 61


i++;
} else {
galerie_mc.visible=false;
}
}

Dans cette fonction autonome, dans un premier temps, nous rendons visible la galerie :
galerie_mc.visible=true;

Puis, nous ajoutons une structure conditionnelle avec incrmentation de la valeur i :


if (i<=nombreDePhotos) {
}
i++
} else {
galerie_mc.visible=false;
}

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 :
function lancerGalerie () {
galerie_mc.visible=true;
if (i<=nombreDePhotos) {
galerie_mc.gotoAndStop(i);
}
i++;
} else {
galerie_mc.visible=false;
}
}

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 :
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});
i++;
} else {
galerie_mc.visible=false;
}
}
LivreActionScript.book Page 62 Vendredi, 15. janvier 2010 12:34 12

62 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
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,
duration:dureeBoucle/2000, easing:Strong.easeInOut});
}
i++;
} else {
galerie_mc.visible=false;
}
}

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.
LivreActionScript.book Page 63 Vendredi, 15. janvier 2010 12:34 12

LES TRANSITIONS DEFFETS ET DE FILTRES 63


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;
}
LivreActionScript.book Page 64 Vendredi, 15. janvier 2010 12:34 12

64 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 65 Vendredi, 15. janvier 2010 12:34 12

LES TRANSITIONS DEFFETS ET DE FILTRES 65


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

Le document que nous utilisons prsente la structure suivante : dans la scne, au-dessus du
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.
LivreActionScript.book Page 66 Vendredi, 15. janvier 2010 12:34 12

66 ACTIONSCRIPT 3 ET MOTION DESIGN

Figure 3.5
Aperu du scnario
du symbole
galerie_mc.

Sur la premire image du calque nomm actions, apparat le code suivant :


//-------------- initialisation

import fl.transitions.*;
import fl.transitions.easing.*;
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;
var nombreDePhotos:Number=5;
var dureeBoucle:Number=10000;
var boucle:Timer=new Timer(dureeBoucle,nombreDePhotos);

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);
// 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});
LivreActionScript.book Page 67 Vendredi, 15. janvier 2010 12:34 12

LES TRANSITIONS DEFFETS ET DE FILTRES 67


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},
delay:0, ease:Strong.easeInOut});
//ANIMATION SORTIE
TweenMax.to(galerie_mc,4, {blurFilter:{blurX:100, blurY:100, quality:3},
delay:5, ease:Strong.easeInOut});
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 {
galerie_mc.visible=false;
}
}
lancerGalerie();

Nous importons en premier lieu les classes requises :


//-------------- initialisation

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.filters.*;

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 flou:BlurFilter=new BlurFilter(100,100,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,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 :
var flou:BlurFilter=new BlurFilter(0,0,3);
LivreActionScript.book Page 68 Vendredi, 15. janvier 2010 12:34 12

68 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
var flou:BlurFilter=new BlurFilter(0,0,3);
galerie_mc.filters=[flou];

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).
LivreActionScript.book Page 69 Vendredi, 15. janvier 2010 12:34 12

LES TRANSITIONS DEFFETS ET DE FILTRES 69


Le filtre est appliqu, plus tard dans la fonction, grce la commande suivante :
var ombrePortee:DropShadowFilter=new DropShadowFilter(50,45,1,0x000000,
20,10,1,3, false, false, false);
galerie_mc.filters=[ombrePortee];

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).
LivreActionScript.book Page 70 Vendredi, 15. janvier 2010 12:34 12

70 ACTIONSCRIPT 3 ET MOTION DESIGN

Le filtre est appliqu, plus tard dans la fonction, grce la commande suivante :
var halo:GlowFilter=new GlowFilter(0xffffff,1,20,20,3,255, false, false);
galerie_mc.filters=[halo];

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
une distance de 50 pixels en largeur.
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.
Le filtre est appliqu, plus tard dans la fonction, grce la commande suivante :
var biseau:BevelFilter=new BevelFiter(50,45,0xFFFFFF,1,0x000000,1,50,
50,100,3,inner,false);
galerie_mc.filters=[biseau];

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}
LivreActionScript.book Page 71 Vendredi, 15. janvier 2010 12:34 12

LES TRANSITIONS DEFFETS ET DE FILTRES 71


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
une distance de 50 pixels en largeur.
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;
var nombreDePhotos:Number=5;
var dureeBoucle:Number=10000;
var boucle:Timer=new Timer(dureeBoucle,nombreDePhotos);

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 :
galerie_mc.visible=false;

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 :
LivreActionScript.book Page 72 Vendredi, 15. janvier 2010 12:34 12

72 ACTIONSCRIPT 3 ET MOTION DESIGN

une fois ds la lecture du document Flash avec lancerGalerie(); et chaque itration par
le chronomtre, avec la fonction jouerBoucle(evt:TimerEvent).
//-------------- 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);
//INITIALISATION
//(/)
//ANIMATION INTRO
//(/)
//ANIMATION SORTIE
//(/)
i++;
} else {
galerie_mc.visible=false;
}
}
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
galerie_mc.filters=[flou];
//ANIMATION INTRO
TweenMax.from(galerie_mc,4, {blurFilter:{blurX:100, blurY:100, quality:3},
delay:0, ease:Strong.easeInOut});
//ANIMATION SORTIE
TweenMax.to(galerie_mc,4, {blurFilter:{blurX:100, blurY:100, quality:3},
delay:5, ease:Strong.easeInOut});

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.
LivreActionScript.book Page 73 Vendredi, 15. janvier 2010 12:34 12

LES TRANSITIONS DEFFETS ET DE FILTRES 73


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
galerie_mc.filters=[flou];
//ANIMATION INTRO
TweenMax.from(galerie_mc,4, {blurFilter:{blurX:100, blurY:100, quality:3},
delay:0, ease:Strong.easeInOut});
//ANIMATION SORTIE
TweenMax.to(galerie_mc,4, {blurFilter:{blurX:100, blurY:100, quality:3},
delay:5, ease:Strong.easeInOut});

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
LivreActionScript.book Page 74 Vendredi, 15. janvier 2010 12:34 12

74 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
function lancerGalerie() {
galerie_mc.visible=true;
if (i<=nombreDePhotos) {
galerie_mc.gotoAndStop(i);
// 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},
delay:0, ease:Strong.easeInOut});
//ANIMATION SORTIE
TweenMax.to(galerie_mc,4, {blurFilter:{blurX:100, blurY:100, quality:3},
delay:5, ease:Strong.easeInOut});
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 {
galerie_mc.visible=false;
}

}
LivreActionScript.book Page 75 Vendredi, 15. janvier 2010 12:34 12

LES TRANSITIONS DEFFETS ET DE FILTRES 75


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.
LivreActionScript.book Page 76 Vendredi, 15. janvier 2010 12:34 12
LivreActionScript.book Page 77 Vendredi, 15. janvier 2010 12:34 12

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
LivreActionScript.book Page 78 Vendredi, 15. janvier 2010 12:34 12

78 ACTIONSCRIPT 3 ET MOTION DESIGN

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

Le document que nous utilisons prsente la structure suivante : dans la scne, au-dessus du
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,
LivreActionScript.book Page 79 Vendredi, 15. janvier 2010 12:34 12

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).
getChildAt(1).getChildAt(0);
var segment_cubitusG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
getChildAt(1).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);
LivreActionScript.book Page 80 Vendredi, 15. janvier 2010 12:34 12

80 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 81 Vendredi, 15. janvier 2010 12:34 12

LA PROGRAMMATION DE SQUELETTES 81
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.
LivreActionScript.book Page 82 Vendredi, 15. janvier 2010 12:34 12

82 ACTIONSCRIPT 3 ET MOTION DESIGN

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
// dfinition du squelette

IKManager.setStage(stage);

var squelette:IKArmature=IKManager.getArmatureByName("Squelette_Droide");
squelette.registerElements(stage);

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 :
IKManager.setStage(stage);

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().
LivreActionScript.book Page 83 Vendredi, 15. janvier 2010 12:34 12

LA PROGRAMMATION DE SQUELETTES 83
Nous mmorisons ensuite toute lossature du squelette prsente sur la scne de sorte en
autoriser le contrle avec la mthode registerElements() :
squelette.registerElements(stage);

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 :
var segment_colonneBas:IKJoint=squelette.rootJoint.getChildAt(0);

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_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).
getChildAt(1).getChildAt(0);
var segment_cubitusG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0).
getChildAt(1).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
LivreActionScript.book Page 84 Vendredi, 15. janvier 2010 12:34 12

84 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
// animation du squelette
var mouvement1:IKMover= new
IKMover(segment_humerusD,segment_humerusD.position);
var arrivee:Point=new Point(0,0);
mouvement1.moveTo(arrivee);

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 :


var mouvement1:IKMover= new
IKMover(segment_humerusD,segment_humerusD.position);

Nous rcuprons directement la position courante de lobjet animer. Puis, nous dfinissons le
point darrive :
var arrivee:Point=new Point(0,0);
LivreActionScript.book Page 85 Vendredi, 15. janvier 2010 12:34 12

LA PROGRAMMATION DE SQUELETTES 85
Et enfin, nous activons lanimation :
mouvement1.moveTo(arrivee);

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 :
// 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);
}

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 :
// animation du squelette
var mouvement1:IKMover= new
IKMover(segment_humerusD,segment_humerusD.position);
var arrivee:Point;
stage.addEventListener(Event.ENTER_FRAME, activerMouvement1);
function activerMouvement1(evt:Event) {
arrivee=new Point(mouseX,mouseY);
mouvement1.moveTo(arrivee);
}

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.
LivreActionScript.book Page 86 Vendredi, 15. janvier 2010 12:34 12

86 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 87 Vendredi, 15. janvier 2010 12:34 12

LA PROGRAMMATION DE SQUELETTES 87
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
// dfinition du squelette

IKManager.setStage(stage);
LivreActionScript.book Page 88 Vendredi, 15. janvier 2010 12:34 12

88 ACTIONSCRIPT 3 ET MOTION DESIGN

var squelette:IKArmature=IKManager.getArmatureByName("Squelette_Herbe");
squelette.registerElements(stage);

var segment_colonneBas:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0)
.getChildAt(0).getChildAt(0).getChildAt(0).getChildAt(0).getChildAt(0).
getChildAt(0).getChildAt(0).getChildAt(0);

// animation du squelette

var mouvement1:IKMover= new


IKMover(segment_colonneBas,segment_colonneBas.position);

stage.addEventListener(Event.ENTER_FRAME, activerMouvement1);
function activerMouvement1(evt:Event) {
var arrivee:Point=new Point(abeille_mc.x,abeille_mc.y);
mouvement1.moveTo(arrivee);
}

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.
LivreActionScript.book Page 89 Vendredi, 15. janvier 2010 12:34 12

LA PROGRAMMATION DE SQUELETTES 89
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
// dfinition du squelette

IKManager.setStage(stage);

var squelette:IKArmature=IKManager.getArmatureByName("Squelette_Herbe");
squelette.registerElements(stage);

Puis, comme nous lavons vu prcdemment , nous dfinissons le segment animer:


var segment_colonneBas:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0)
.getChildAt(0).getChildAt(0).getChildAt(0).getChildAt(0).getChildAt(0).
getChildAt(0).getChildAt(0).getChildAt(0);

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 :
// animation du squelette

var mouvement1:IKMover= new


IKMover(segment_colonneBas,segment_colonneBas.position);

stage.addEventListener(Event.ENTER_FRAME, activerMouvement1);
function activerMouvement1(evt:Event) {
var arrivee:Point=new Point(abeille_mc.x,abeille_mc.y);
mouvement1.moveTo(arrivee);
}
var tweenAbeille:TweenMax;
tweenAbeille=TweenMax.to(abeille_mc,5,{x:900,delay:2,ease:Strong.easeInOut});

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
LivreActionScript.book Page 90 Vendredi, 15. janvier 2010 12:34 12

90 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
tweenAbeille.addEventListener(TweenEvent.COMPLETE,suiteAnimation);

function suiteAnimation(evt:TweenEvent) {
tweenAbeille=TweenMax.to(abeille_mc,8,{x:300,delay:0,ease:Back.easeInOut});
}

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).
LivreActionScript.book Page 91 Vendredi, 15. janvier 2010 12:34 12

LA PROGRAMMATION DE SQUELETTES 91
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.
LivreActionScript.book Page 92 Vendredi, 15. janvier 2010 12:34 12

92 ACTIONSCRIPT 3 ET MOTION DESIGN

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.

Exemples > ch4_programmationDeSquelettes_3.fla

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
// dfinition du squelette
LivreActionScript.book Page 93 Vendredi, 15. janvier 2010 12:34 12

LA PROGRAMMATION DE SQUELETTES 93
IKManager.setStage(stage);

var squelette:IKArmature=IKManager.getArmatureByName("Squelette_Herbe");
squelette.registerElements(stage);

var segment_colonneBas:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0)
.getChildAt(0).getChildAt(0).getChildAt(0).getChildAt(0).getChildAt(0).
getChildAt(0).getChildAt(0).getChildAt(0);

// animation du squelette

var mouvement1:IKMover= new


IKMover(segment_colonneBas,segment_colonneBas.position);

stage.addEventListener(Event.ENTER_FRAME, activerMouvement1);
function activerMouvement1(evt:Event) {
var arrivee:Point=new Point(abeille_mc.x,abeille_mc.y);
mouvement1.moveTo(arrivee);
}

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});
tweenAbeille.addEventListener(TweenEvent.COMPLETE,suiteAnimation2);
}

// interrompre lanimation et basculer en mode interactif

var nombreDeBoucle:Number=1;
var dureeBoucle:Number=1000;
var boucle:Timer=new Timer(dureeBoucle,nombreDeBoucle);

function suiteAnimation2(evt:TweenEvent) {
IKManager.trackAllArmatures(true);
boucle.start();
boucle.addEventListener(TimerEvent.TIMER,lancerBoucle);
}

function lancerBoucle(evt:TimerEvent) {
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) {
IKManager.trackAllArmatures(true);
boucle.start();
boucle.addEventListener(TimerEvent.TIMER,lancerBoucle);
}
LivreActionScript.book Page 94 Vendredi, 15. janvier 2010 12:34 12

94 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
function lancerBoucle(evt:TimerEvent) {
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.
LivreActionScript.book Page 95 Vendredi, 15. janvier 2010 12:34 12

LA PROGRAMMATION DE SQUELETTES 95
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_4.fla


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);
//
IKManager.setStage(stage);
squelette = IKManager.getArmatureByName("Squelette_Herbe");
squelette.registerElements(stage);
IKManager.trackAllArmatures(true);
}

Dabord, nous importons la classe ik pour reconstituer le squelette :


//---------------------- initialisation
import fl.ik.*;
LivreActionScript.book Page 96 Vendredi, 15. janvier 2010 12:34 12

96 ACTIONSCRIPT 3 ET MOTION DESIGN

Puis, nous dfinissons un nouveau chargeur afin dimporter le fichier SWF contenant le
squelette :
//---------------------- chargement
var chemin:URLRequest = new URLRequest("ch4-programmationDeSquelettes-4a.swf");
var chargeur:Loader = new Loader();
chargeur.load(chemin);
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, afficher);

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 :
function afficher(Evt:Event){
addChild(chargeur);
//
IKManager.setStage(stage);
squelette = IKManager.getArmatureByName("Squelette_Herbe");
squelette.registerElements(stage);
IKManager.trackAllArmatures(true);
}

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.
LivreActionScript.book Page 97 Vendredi, 15. janvier 2010 12:34 12

LA PROGRAMMATION DE SQUELETTES 97
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.
LivreActionScript.book Page 98 Vendredi, 15. janvier 2010 12:34 12
LivreActionScript.book Page 99 Vendredi, 15. janvier 2010 12:34 12

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).
LivreActionScript.book Page 100 Vendredi, 15. janvier 2010 12:34 12

100 ACTIONSCRIPT 3 ET MOTION DESIGN

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.

Dans le calque nomm actions, nous pouvons lire le code suivant :


// 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 :


var chargeurFond:Loader = new Loader();

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()).
LivreActionScript.book Page 101 Vendredi, 15. janvier 2010 12:34 12

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 :
var valeurAleatoire:Number=Math.round(Math.random()*2);

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")
for (var i:Number=0;i<20;i++){
trace(Math.round(Math.random()*2));
}
trace("ceil")
for (var i:Number=0;i<20;i++){
trace(Math.ceil(Math.random()*2));
}
LivreActionScript.book Page 102 Vendredi, 15. janvier 2010 12:34 12

102 ACTIONSCRIPT 3 ET MOTION DESIGN

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).
chargeurFond.load(urlFond);

Plus loin, un couteur est attach au chargeur chargeurFond et appelle une fonction :
// COMPLETE
chargeurFond.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET);
function chargementCOMPLET(evt:Event) {
cible_mc.addChild(chargeurFond);
}

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 :
function chargementCOMPLET(evt:Event) {
cible_mc.addChild(chargeurFond);
}
LivreActionScript.book Page 103 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 103


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.
LivreActionScript.book Page 104 Vendredi, 15. janvier 2010 12:34 12

104 ACTIONSCRIPT 3 ET MOTION DESIGN

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.

Exemples > ch5_galeriesImages_2.fla

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.
LivreActionScript.book Page 105 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 105


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.

Dans le calque nomm actions, nous pouvons lire le code suivant :


// 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);

// 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
chargeurFond.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET);
function chargementCOMPLET(evt:Event) {
cible_mc.addChild(chargeurFond);
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.
LivreActionScript.book Page 106 Vendredi, 15. janvier 2010 12:34 12

106 ACTIONSCRIPT 3 ET MOTION DESIGN

La fonction appele pendant le chargement est 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))+"%";
}

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 :
chargement_mc.barre_mc.scaleX=valeurPourcentage;

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:
chargement_mc.pourcentage_txt.text=(Math.ceil(valeurPourcentage*100))+"%";

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
chargeurFond.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET);
function chargementCOMPLET(evt:Event) {
cible_mc.addChild(chargeurFond);
chargement_mc.visible=false;
}

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
LivreActionScript.book Page 107 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 107


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.
LivreActionScript.book Page 108 Vendredi, 15. janvier 2010 12:34 12

108 ACTIONSCRIPT 3 ET MOTION DESIGN

Exemples > ch5_galeriesImages_3.fla

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.

Dans le calque nomm actions, nous pouvons lire le code suivant :


//-------------------- 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);
function chargementENCOURS(evt:ProgressEvent) {
chargement_mc.visible=true;
var valeurPourcentage:Number = (evt.currentTarget.bytesLoaded /
evt.currentTarget.bytesTotal);
chargement_mc.barre_mc.scaleX=valeurPourcentage;
LivreActionScript.book Page 109 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 109


chargement_mc.pourcentage_txt.text=(Math.ceil(valeurPourcentage*100))+"%";
}

// COMPLETE
chargeurPhoto.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET1);
function chargementCOMPLET1(evt:Event) {
cible_mc.addChild(chargeurPhoto);
chargement_mc.visible=false;
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;
var nombreDePhotos:Number=7;
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");
chargeurPhoto.load(cheminPhoto);
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" :
var cheminPhoto:URLRequest=new URLRequest("images/galerie/photo0.jpg");

Dans le gestionnaire PROGRESS, nous ractivons laffichage de la jauge de sorte quelle


puisse rapparatre aussi pour les images suivantes :
chargement_mc.visible=true;
LivreActionScript.book Page 110 Vendredi, 15. janvier 2010 12:34 12

110 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 111 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 111


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;
var nombreDePhotos:Number=7;
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.
LivreActionScript.book Page 112 Vendredi, 15. janvier 2010 12:34 12

112 ACTIONSCRIPT 3 ET MOTION DESIGN

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");
chargeurPhoto.load(cheminPhoto);
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.
LivreActionScript.book Page 113 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 113


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.
LivreActionScript.book Page 114 Vendredi, 15. janvier 2010 12:34 12

114 ACTIONSCRIPT 3 ET MOTION DESIGN

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.

Exemples > ch5_galeriesImages_4.fla

Dans la scne principale du document "ch5_galeriesImages_4.fla", au-dessus du calque


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.
LivreActionScript.book Page 115 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 115


Dans le calque nomm actions, nous pouvons lire le code suivant :
//-------------------- Chargement initial PHOTO AGRANDIE
// 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);
function chargementENCOURS(evt:ProgressEvent) {
chargement_mc.visible=true;
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
chargeurPhoto.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET1);
function chargementCOMPLET1(evt:Event) {
cible_mc.addChild(chargeurPhoto);
chargement_mc.visible=false;
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) {
LivreActionScript.book Page 116 Vendredi, 15. janvier 2010 12:34 12

116 ACTIONSCRIPT 3 ET MOTION DESIGN

i++;
if (i==NombreDeNoeudsDansLeXML) {
i=0;
}
distribuerValeurs();
}
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
chargeurPhoto.load(cheminPhoto);
}
}

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>
<titre>GUERANDE</titre>
<legende>Gorgue, canal amenant leau charge en sel dans les tables salantes
</legende>
<image>images/galerie/photo1.jpg</image>
<vignette>images/galerie/vignettes/photo1-vignette.jpg</vignette>
</photo>
<photo>
<titre>GUERANDE</titre>
<legende>Amas de sel</legende>
<image>images/galerie/photo2.jpg</image>
<vignette>images/galerie/vignettes/photo2-vignette.jpg</vignette>
</photo>
LivreActionScript.book Page 117 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 117


<photo>
<titre>GUERANDE</titre>
<legende>Cristallisoir</legende>
<image>images/galerie/photo3.jpg</image>
<vignette>images/galerie/vignettes/photo3-vignette.jpg</vignette>
</photo>
<photo>
<titre>GUERANDE</titre>
<legende>Saliculture</legende>
<image>images/galerie/photo4.jpg</image>
<vignette>images/galerie/vignettes/photo4-vignette.jpg</vignette>
</photo>
<photo>
<titre>GUERANDE</titre>
<legende>Rammasage du sel</legende>
<image>images/galerie/photo5.jpg</image>
<vignette>images/galerie/vignettes/photo5-vignette.jpg</vignette>
</photo>
<photo>
<titre>GUERANDE</titre>
<legende>Outils du paludier</legende>
<image>images/galerie/photo6.jpg</image>
<vignette>images/galerie/vignettes/photo6-vignette.jpg</vignette>
</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 initial PHOTO AGRANDIE
// CHARGEMENT
var chargeurPhoto:Loader= new Loader();
LivreActionScript.book Page 118 Vendredi, 15. janvier 2010 12:34 12

118 ACTIONSCRIPT 3 ET MOTION DESIGN

var cheminPhoto:URLRequest=new URLRequest("images/galerie/photo0.jpg");


chargeurPhoto.load(cheminPhoto);

// PROGRESSION
chargeurPhoto.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
chargementENCOURS);
function chargementENCOURS(evt:ProgressEvent) {
chargement_mc.visible=true;
var valeurPourcentage:Number = (evt.currentTarget.bytesLoaded /
evt.currentTarget.bytesTotal);
chargement_mc.barre_mc.scaleX=valeurPourcentage;
chargement_mc.pourcentage_txt.text=(Math.ceil(valeurPourcentage*100))+"%";
}

// COMPLETE
chargeurPhoto.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET1);
function chargementCOMPLET1(evt:Event) {
cible_mc.addChild(chargeurPhoto);
chargement_mc.visible=false;
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 :
//-------------------- Chargement du XML
var i:Number=0;
var ecartEntreVignettes:Number=90;

var chargeurXML:URLLoader = new URLLoader();


hargeurXML.load(new URLRequest("xml/galerie.xml"));
chargeurXML.addEventListener(Event.COMPLETE, XMLComplet);

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.
LivreActionScript.book Page 119 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 119


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.
function XMLComplet(evt:Event) {
var donneesXML:XML=new XML(evt.target.data);
var NombreDeNoeudsDansLeXML:Number=donneesXML.photo.length();
}

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</
LivreActionScript.book Page 120 Vendredi, 15. janvier 2010 12:34 12

120 ACTIONSCRIPT 3 ET MOTION DESIGN

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
retour_btn.addEventListener(MouseEvent.MOUSE_DOWN, retourDOWN);
function retourDOWN(evt:MouseEvent) {
i--;
if (i<0) {
i=NombreDeNoeudsDansLeXML-1;
}
distribuerValeurs();
}

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
suivant_btn.addEventListener(MouseEvent.CLICK, suivant);
function suivant(evt:MouseEvent) {
i++;
if (i==NombreDeNoeudsDansLeXML) {
i=0;
}
distribuerValeurs();
}

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.
LivreActionScript.book Page 121 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 121


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
chargeurPhoto.load(cheminPhoto);
}

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].
LivreActionScript.book Page 122 Vendredi, 15. janvier 2010 12:34 12

122 ACTIONSCRIPT 3 ET MOTION DESIGN

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.

Exemples > ch5_galeriesImages_5.fla

Dans la scne principale du document "ch5_galeriesImages_5.fla", au-dessus du calque


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
LivreActionScript.book Page 123 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 123


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.

Dans le calque nomm actions, nous pouvons lire le code suivant :


//-------------------- initialisation
import gs.*;
import gs.easing.*;
import gs.events.*;

var i:int=0;
var ecartEntreVignettes:Number=90;
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 initial PHOTO AGRANDIE


LivreActionScript.book Page 124 Vendredi, 15. janvier 2010 12:34 12

124 ACTIONSCRIPT 3 ET MOTION DESIGN

// CHARGEMENT
var chargeurPhoto:Loader= new Loader();
var cheminPhoto:URLRequest;

// PROGRESSION
chargeurPhoto.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
chargementENCOURS);
function chargementENCOURS(evt:ProgressEvent) {
chargement_mc.visible=true;
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
chargeurPhoto.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementCOMPLET);
function chargementCOMPLET(evt:Event) {
cible_mc.addChild(chargeurPhoto);
chargement_mc.visible=false;
}

//-------------------- Chargement du XML

var chargeurXML:URLLoader = new URLLoader();


chargeurXML.load(new URLRequest("xml/galerie.xml"));
chargeurXML.addEventListener(Event.COMPLETE, XMLComplet);

function XMLComplet(evt:Event) {
var donneesXML:XML=XML(evt.target.data);
var NombreDeNoeudsDansLeXML:Number=donneesXML.photo.length();

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");
chargeurPhoto.load(cheminPhoto);
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;
LivreActionScript.book Page 125 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 125


TweenMax.to(cible_mc,3, {x:100, y:50, scaleX:1, scaleY:1, ease:Strong.easeOut});
}
}
}

//--------------------- Boutons NAVIGATION

retour_btn.addEventListener(MouseEvent.MOUSE_DOWN, retourDOWN);
function retourDOWN(evt:MouseEvent) {
if (cibleVignettes_mc.x<=positionCibleVignettesInit*2) {
TweenMax.to(cibleVignettes_mc,1,
{x:cibleVignettes_mc.x+ecratEntreVignettes, ease:Elastic.easeOut});
}
}
suivant_btn.addEventListener(MouseEvent.CLICK, suivant);
function suivant(evt:MouseEvent) {
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 ecartEntreVignettes:Number=90;
var positionCibleVignettesInit:Number=cibleVignettes_mc.x;
cibleVignettes_mc.carreBlanc_mc.x=-2;
cibleVignettes_mc.carreBlanc_mc.y=-2;
cibleVignettes_mc.carreBlanc_mc.visible=false;
LivreActionScript.book Page 126 Vendredi, 15. janvier 2010 12:34 12

126 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
cibleVignettes_mc.carreBlanc_mc.x=-2;
cibleVignettes_mc.carreBlanc_mc.y=-2;
cibleVignettes_mc.carreBlanc_mc.visible=false;

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 initial PHOTO AGRANDIE

// CHARGEMENT
var chargeurPhoto:Loader= new Loader();
var cheminPhoto:URLRequest;

// PROGRESSION
chargeurPhoto.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
chargementENCOURS);
function chargementENCOURS(evt:ProgressEvent) {
chargement_mc.visible=true;
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
chargeurPhoto.contentLoaderInfo.addEventListener(Event.COMPLETE,
chargementCOMPLET);
function chargementCOMPLET(evt:Event) {
cible_mc.addChild(chargeurPhoto);
chargement_mc.visible=false;
}
LivreActionScript.book Page 127 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 127


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 :
//-------------------- Chargement du XML

var chargeurXML:URLLoader = new URLLoader();


chargeurXML.load(new URLRequest("xml/galerie.xml"));
chargeurXML.addEventListener(Event.COMPLETE, XMLComplet);

function XMLComplet(evt:Event) {
var donneesXML:XML=XML(evt.target.data);
var NombreDeNoeudsDansLeXML:Number=donneesXML.photo.length();
}

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 :


// 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) {
LivreActionScript.book Page 128 Vendredi, 15. janvier 2010 12:34 12

128 ACTIONSCRIPT 3 ET MOTION DESIGN

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");
chargeurPhoto.load(cheminPhoto);
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});
}

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) :
// 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);

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 :
cibleVignettes_mc.addEventListener(MouseEvent.CLICK,clickVignettes);
function clickVignettes(evt:MouseEvent) {
// actions excuter
trace (evt.target.name)
}
LivreActionScript.book Page 129 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 129


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 :
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(donneesXML.photo[evt.target.name].image.toString());
chargeurPhoto.load(cheminPhoto);
TweenMax.to(cibleVignettes_mc.carreBlanc_mc,1,
{x:(ecartEntreVignettes*(evt.target.name-1))-2, ease:Strong.easeOut});
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}); // transition Zoom

chaque clic sur une vignette, nous ractivons laffichage du carr blanc, masqu par
dfaut, avec la proprit visible passe sur true :
cibleVignettes_mc.carreBlanc_mc.visible=true;

Puis, nous modifions le texte contenu dans les champs de texte dynamiques titre_txt et
legende_txt:
titre_txt.htmlText=donneesXML.photo[evt.target.name].titre.toString();

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.
LivreActionScript.book Page 130 Vendredi, 15. janvier 2010 12:34 12

130 ACTIONSCRIPT 3 ET MOTION DESIGN

Nous procdons de mme pour dsigner le nud correspondant lURL de limage


agrandie :
legende_txt.htmlText=donneesXML.photo[evt.target.name].legende.toString();

Le chargeur relance ensuite laffichage de limage agrandie :


chargeurPhoto.load(cheminPhoto);

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

retour_btn.addEventListener(MouseEvent.MOUSE_DOWN, retourDOWN);
function retourDOWN(evt:MouseEvent) {
if (cibleVignettes_mc.x<=positionCibleVignettesInit*2) {
TweenMax.to(cibleVignettes_mc,1,
{x:cibleVignettes_mc.x+ecratEntreVignettes, ease:Elastic.easeOut});
}
}
suivant_btn.addEventListener(MouseEvent.CLICK, suivant);
function suivant(evt:MouseEvent) {
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;


LivreActionScript.book Page 131 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 131


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.

Exemples > ch5_galeriesImages_6.fla

Dans la scne principale du document "ch5_galeriesImages_6.fla", au-dessus du calque


fond_mc, figure un unique calque actions (voir Figure 5.17).

Figure 5.17
Aperu de la
fentre de
scnario de la
scne principale.

Dans le calque nomm actions, nous pouvons lire le code suivant :


//-------------------- Chargement du XML
var chargeurXML:URLLoader = new URLLoader();
LivreActionScript.book Page 132 Vendredi, 15. janvier 2010 12:34 12

132 ACTIONSCRIPT 3 ET MOTION DESIGN

//chargeurXML.load(new URLRequest("xml/galerie.xml"));
chargeurXML.load(new URLRequest("xml/g.xml"));
chargeurXML.addEventListener(Event.COMPLETE, XMLComplet);

chargeurXML.addEventListener(IOErrorEvent.IO_ERROR, siErreur);
function siErreur(evt:IOErrorEvent) {
trace("Erreur de chargement");
}

function XMLComplet(evt:Event) {
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
LivreActionScript.book Page 133 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 133


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.");
}
LivreActionScript.book Page 134 Vendredi, 15. janvier 2010 12:34 12

134 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 135 Vendredi, 15. janvier 2010 12:34 12

LES GALERIES DIMAGES 135


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.
LivreActionScript.book Page 136 Vendredi, 15. janvier 2010 12:34 12
LivreActionScript.book Page 137 Vendredi, 15. janvier 2010 12:34 12

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.
LivreActionScript.book Page 138 Vendredi, 15. janvier 2010 12:34 12

138 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 139 Vendredi, 15. janvier 2010 12:34 12

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
LivreActionScript.book Page 140 Vendredi, 15. janvier 2010 12:34 12

140 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 141 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 141


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.
LivreActionScript.book Page 142 Vendredi, 15. janvier 2010 12:34 12

142 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 143 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 143


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).
LivreActionScript.book Page 144 Vendredi, 15. janvier 2010 12:34 12

144 ACTIONSCRIPT 3 ET MOTION DESIGN

Figure 6.5
Slection dune
animation
prdfinie.

Figure 6.7
Fentre
de scnario.
LivreActionScript.book Page 145 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 145


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.
LivreActionScript.book Page 146 Vendredi, 15. janvier 2010 12:34 12

146 ACTIONSCRIPT 3 ET MOTION DESIGN

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".
LivreActionScript.book Page 147 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 147


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).
LivreActionScript.book Page 148 Vendredi, 15. janvier 2010 12:34 12

148 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 149 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 149


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".
LivreActionScript.book Page 150 Vendredi, 15. janvier 2010 12:34 12

150 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 151 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 151


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).
LivreActionScript.book Page 152 Vendredi, 15. janvier 2010 12:34 12

152 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 153 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 153


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.
LivreActionScript.book Page 154 Vendredi, 15. janvier 2010 12:34 12

154 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 155 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 155


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.
LivreActionScript.book Page 156 Vendredi, 15. janvier 2010 12:34 12

156 ACTIONSCRIPT 3 ET MOTION DESIGN

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).
LivreActionScript.book Page 157 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 157


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.
LivreActionScript.book Page 158 Vendredi, 15. janvier 2010 12:34 12

158 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 159 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 159


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.
LivreActionScript.book Page 160 Vendredi, 15. janvier 2010 12:34 12

160 ACTIONSCRIPT 3 ET MOTION DESIGN

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).
LivreActionScript.book Page 161 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 161


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-
LivreActionScript.book Page 162 Vendredi, 15. janvier 2010 12:34 12

162 ACTIONSCRIPT 3 ET MOTION DESIGN

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-
LivreActionScript.book Page 163 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 163


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
LivreActionScript.book Page 164 Vendredi, 15. janvier 2010 12:34 12

164 ACTIONSCRIPT 3 ET MOTION DESIGN

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-
LivreActionScript.book Page 165 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 165


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
Cble/rseau dentreprise, fibre optique : 1920 1080
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
Cble/rseau dentreprise, fibre optique : 640 480
Les tailles dimage pour une vido au format 16/9 NTSC sont :
Modem (56 Kbits/s) : 192 108
ADSL : 384 216
Cble : 448 252
Cble/rseau dentreprise, fibre optique : 704 396

Figure 6.28
Rglages de dbit
(FLV).
LivreActionScript.book Page 166 Vendredi, 15. janvier 2010 12:34 12

166 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 167 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 167


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.
LivreActionScript.book Page 168 Vendredi, 15. janvier 2010 12:34 12

168 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 169 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 169


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.
LivreActionScript.book Page 170 Vendredi, 15. janvier 2010 12:34 12

170 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 171 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 171


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).
LivreActionScript.book Page 172 Vendredi, 15. janvier 2010 12:34 12

172 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 173 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 173


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.
LivreActionScript.book Page 174 Vendredi, 15. janvier 2010 12:34 12

174 ACTIONSCRIPT 3 ET MOTION DESIGN

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-
LivreActionScript.book Page 175 Vendredi, 15. janvier 2010 12:34 12

LA VIDO STANDARD ET COMPOSITE EN FLV 175


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.
LivreActionScript.book Page 176 Vendredi, 15. janvier 2010 12:34 12
LivreActionScript.book Page 177 Vendredi, 15. janvier 2010 12:34 12

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).
LivreActionScript.book Page 178 Vendredi, 15. janvier 2010 12:34 12

178 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 179 Vendredi, 15. janvier 2010 12:34 12

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.
LivreActionScript.book Page 180 Vendredi, 15. janvier 2010 12:34 12

180 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 181 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 181


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.
LivreActionScript.book Page 182 Vendredi, 15. janvier 2010 12:34 12

182 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 183 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 183


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.
LivreActionScript.book Page 184 Vendredi, 15. janvier 2010 12:34 12

184 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 185 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 185


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.
LivreActionScript.book Page 186 Vendredi, 15. janvier 2010 12:34 12

186 ACTIONSCRIPT 3 ET MOTION DESIGN

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).
LivreActionScript.book Page 187 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 187


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.
LivreActionScript.book Page 188 Vendredi, 15. janvier 2010 12:34 12

188 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 189 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 189


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.
LivreActionScript.book Page 190 Vendredi, 15. janvier 2010 12:34 12

190 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 191 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 191


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.
LivreActionScript.book Page 192 Vendredi, 15. janvier 2010 12:34 12

192 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 193 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 193


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.
LivreActionScript.book Page 194 Vendredi, 15. janvier 2010 12:34 12

194 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 195 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 195


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();
lire_btn._visible=false;
pause_btn._visible=true;
}
pause_btn.onPress=function () {
chargementContinu.pause();
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,
LivreActionScript.book Page 196 Vendredi, 15. janvier 2010 12:34 12

196 ACTIONSCRIPT 3 ET MOTION DESIGN

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 () {
chargementContinu.pause();
lire_btn._visible=false;
pause_btn._visible=true;
}

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 () {
chargementContinu.pause();
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 :
lire_btn._visible=false;
pause_btn._visible=true;

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.
LivreActionScript.book Page 197 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 197


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.
LivreActionScript.book Page 198 Vendredi, 15. janvier 2010 12:34 12

198 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 199 Vendredi, 15. janvier 2010 12:34 12

LA VIDO HD EN F4V 199


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.
LivreActionScript.book Page 200 Vendredi, 15. janvier 2010 12:34 12
LivreActionScript.book Page 201 Vendredi, 15. janvier 2010 12:34 12

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).
LivreActionScript.book Page 202 Vendredi, 15. janvier 2010 12:34 12

202 ACTIONSCRIPT 3 ET MOTION DESIGN

Figure 8.1
Aperu aprs
publication.

Figure 8.2
Aperu du
scnario de la
scne principale.

Dans le calque actions, nous pouvons lire le code suivant :


// 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)
}
LivreActionScript.book Page 203 Vendredi, 15. janvier 2010 12:34 12

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 {
ecranVideo.volume=1;
evt.target.visible=false;
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.
LivreActionScript.book Page 204 Vendredi, 15. janvier 2010 12:34 12

204 ACTIONSCRIPT 3 ET MOTION DESIGN

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
LivreActionScript.book Page 205 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 205


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 :
LivreActionScript.book Page 206 Vendredi, 15. janvier 2010 12:34 12

206 ACTIONSCRIPT 3 ET MOTION DESIGN

// 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 {
ecranVideo.volume=1;
evt.target.visible=false;
console_mc.audio_mc.audioOn_mc.visible=true;
}
}

Augmenter et diminuer progressivement le son

Exemples > ch8_videoInteractive_2.fla

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.audioOff_mc.visible=false;
console_mc.audio_mc.audioOff_mc.buttonMode=true;

console_mc.audio_mc.audioOn_mc.addEventListener(MouseEvent.CLICK,fonctionBaisser);
function fonctionBaisser (evt:MouseEvent) {
addEventListener(Event.ENTER_FRAME,reduireAudio);
}
//
function reduireAudio (evt:Event) {
if (ecranVideo.volume>0) {
ecranVideo.volume-=0.01;
trace(ecranVideo.volume)
if (ecranVideo.volume<=0.01) {
ecranVideo.volume=0;
removeEventListener(Event.ENTER_FRAME,reduireAudio);
console_mc.audio_mc.audioOn_mc.visible=false;
console_mc.audio_mc.audioOff_mc.visible=true;
}
}
}
LivreActionScript.book Page 207 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 207


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) {
ecranVideo.volume=1;
removeEventListener(Event.ENTER_FRAME,monterAudio);
console_mc.audio_mc.audioOn_mc.visible=true;
console_mc.audio_mc.audioOff_mc.visible=false;
}
}
}

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.
LivreActionScript.book Page 208 Vendredi, 15. janvier 2010 12:34 12

208 ACTIONSCRIPT 3 ET MOTION DESIGN

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().

Exemples > ch8_videoInteractive_3.fla

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.
LivreActionScript.book Page 209 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 209


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;
}
if (evt.target.name=="lien2_btn") {
cheminVideo="gKaster/gKaster-demoreel.f4v";
timeCode=10;
}
if (evt.target.name=="lien3_btn") {
cheminVideo="gKaster/gKaster-demoreel.f4v";
timeCode=19;
}
if (evt.target.name=="lien4_btn") {
cheminVideo="gKaster/gKaster-demoreel.f4v";
timeCode=45;
}
if (evt.target.name=="lien5_btn") {
cheminVideo="gKaster/gKaster-demoreel.f4v";
timeCode=66;
}
if (evt.target.name=="lien6_btn") {
cheminVideo="gKaster/gKaster-demoreel.f4v";
timeCode=92;
}
if (evt.target.name=="lien7_btn") {
cheminVideo="gKaster/gKaster-demoreel.f4v";
timeCode=119.04;
}
if (evt.target.name=="bonus_btn") {
cheminVideo="gKaster/gKaster-amusement.f4v";
timeCode=0;
}
ecranVideo.source=cheminVideo;
ecranVideo.seek(timeCode);
}
LivreActionScript.book Page 210 Vendredi, 15. janvier 2010 12:34 12

210 ACTIONSCRIPT 3 ET MOTION DESIGN

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) :
if (evt.target.name=="lien1_btn") {
cheminVideo="gKaster/gKaster-demoreel.f4v";
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.
LivreActionScript.book Page 211 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 211


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.
LivreActionScript.book Page 212 Vendredi, 15. janvier 2010 12:34 12

212 ACTIONSCRIPT 3 ET MOTION DESIGN

Exemples > ch8_videoInteractive_4.fla

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";
LivreActionScript.book Page 213 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 213


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.
LivreActionScript.book Page 214 Vendredi, 15. janvier 2010 12:34 12

214 ACTIONSCRIPT 3 ET MOTION DESIGN

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 :
LivreActionScript.book Page 215 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 215


<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.
LivreActionScript.book Page 216 Vendredi, 15. janvier 2010 12:34 12

216 ACTIONSCRIPT 3 ET MOTION DESIGN

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.

Exemples > ch8_videoInteractive_5.fla

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.
LivreActionScript.book Page 217 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 217


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.
LivreActionScript.book Page 218 Vendredi, 15. janvier 2010 12:34 12

218 ACTIONSCRIPT 3 ET MOTION DESIGN

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().

Exemples > ch8_videoInteractive_6.fla

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).
LivreActionScript.book Page 219 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 219


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.
LivreActionScript.book Page 220 Vendredi, 15. janvier 2010 12:34 12

220 ACTIONSCRIPT 3 ET MOTION DESIGN

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).
LivreActionScript.book Page 221 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 221


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.
LivreActionScript.book Page 222 Vendredi, 15. janvier 2010 12:34 12

222 ACTIONSCRIPT 3 ET MOTION DESIGN

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.
LivreActionScript.book Page 223 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 223


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) {
if (evt.target.name=="lien1_btn") {
repere="repere1";
}
if (evt.target.name=="lien2_btn") {
repere="repere2";
}
if (evt.target.name=="lien3_btn") {
repere="repere3";
}
if (evt.target.name=="lien4_btn") {
repere="repere4";
}
if (evt.target.name=="lien5_btn") {
repere="repere5";
}
if (evt.target.name=="lien6_btn") {
repere="repere6";
}
if (evt.target.name=="lien7_btn") {
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.
LivreActionScript.book Page 224 Vendredi, 15. janvier 2010 12:34 12

224 ACTIONSCRIPT 3 ET MOTION DESIGN

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.

Exemples > ch8_videoInteractive_7.fla

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.
LivreActionScript.book Page 225 Vendredi, 15. janvier 2010 12:34 12

LA VIDO INTERACTIVE 225


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.