Préface

velodromegoodyearΛογισμικό & κατασκευή λογ/κού

5 Ιουλ 2012 (πριν από 5 χρόνια και 4 μήνες)

340 εμφανίσεις

Préface
Le motion design se définit par l’ensemble des signes fixes et animés qui caractérisent
l’identité d’un site et au service de son contenu. Ces signes et ces formes véhiculent une
identité par des animations distribuées dans un scénario sur une échelle de temps linéaire.
Par cette organisation plastique et sémantique, ils en appuient le sens dégagé.
Pour offrir une identité qui puisse évoluer selon la configuration et le comportement de
l’utilisateur, une identité évolutive, réactive et applicative, il est incontournable de la réali-
ser en ActionScript. Nous parlons alors de motion design en ActionScript. Nous pourrions
parler aussi de script design, mais le terme n’est pas vraiment usuel.
Pour cela, nous disposons de plusieurs versions du langage ActionScript. Il convient natu-
rellement d’aborder la version qui offre la réponse la plus appropriée au besoin défini par le
concepteur du site. Trois versions de ce langage sont apparues successivement depuis la fin
des années 90 et continuent d’exister chacune indépendamment des autres :
• ActionScript 1.0 est utilisé pour le Web mobile et les sites de première génération. Il n’est
presque plus employé pour la création de sites Internet classiques car il est trop restreint
en fonctionnalités. Son lecteur est léger d’où l’intérêt conservé pour sa portabilité.
• ActionScript 2.0 offre une palette de comportements bien plus étoffée et demeure
encore largement employé pour bon nombre des créations de sites dits vitrines, n’expri-
mant pas un grand besoin de réactivité ni de fonctionnalités. Son apprentissage est
encore relativement accessible et son lecteur est déjà déployé sur de nombreux appareils
mobiles.
• ActionScript 3.0, apparu depuis Flash CS3 (Flash 9), permet de réaliser des applica-
tions complexes avec une grande réactivité. Concernant la partie graphique, elle
autorise principalement la 3D et la gestion de la vidéo en haute définition, ainsi que le
développement d’applicatifs lourds comme le traitement des images, gourmands en
calculs. Si le langage semble plus complexe au premier abord, il n’en est rien dans la prati-
que, car en réalité, la multiplication des lignes de code requise en AS3 vient de la néces-
sité de détailler le contexte d’utilisation de chaque action. Ceci afin de réserver l’espace
mémoire uniquement requis pour les animations, et donc, d’en améliorer les performances
à l’affichage. Mais les actions elles-mêmes restent souvent équivalentes à celles déjà
utilisées en AS2. D’autres modifications d’ordre structurel ont, cela dit, été apportées en
AS3, qu’il est nécessaire d’apprivoiser, surtout lorsque l’on a acquis des habitudes de
développement tranquilles, encore possibles en AS2.
Ce livre a pour objectif de vous permettre d’acquérir facilement les notions d’Action-
Script 3 nécessaires pour vous rendre indépendant dans le développement d’interfaces
riches et graphiques, à partir de symboles placés dans le scénario. Il vous permettra aussi de
contourner les problèmes éventuellement rencontrés suite aux modifications structurelles
induites par ce nouveau langage, notamment si vous utilisiez déjà AS2 et aviez pris
LivreActionScript.book Page 1 Vendredi, 15. janvier 2010 11:49 11
© 2010 Pearson Education France – ActionScript 3 et le motion design – Arzhur Caouissin
A
CTION
S
CRIPT
3
ET

MOTION

DESIGN
2
l’habitude de dialoguer facilement d’un document SWF à un autre. Ainsi, en plus des prin-
cipales fonctionnalités déjà évoquées comme la 3D et la vidéo en haute définition, vous
apprendrez à imbriquer des animations SWF entre elles, mais en sachant réellement les
faire interagir l’une envers l’autre. Vous apprendrez également à afficher et masquer des
informations, mais en connaissant comment désactiver les contenus supprimés alors qu’ils
demeurent intrinsèquement encore actifs. Vous verrez autant d’autres principes inhérents à
AS3 qu’un ouvrage plus scolaire ne vous aurait pas permis de contrôler et qu’un livre trop
technique vous aurait découragé de découvrir.
Cet ouvrage, où nous abordons les spécificités graphiques d’AS3 et quelques principes déjà
présents avec AS2, peut être appréhendé ponctuellement, au cas par cas, pour résoudre des
besoins ciblés, ou bien dans son intégralité, pour mieux englober l’ensemble de la valeur
ajoutée que constitue désormais, pour tout concepteur graphique, ce nouveau langage. Avec
ce livre, vous serez en mesure, je le souhaite, de réaliser vous-même – et facilement – les
sites les plus aboutis graphiquement et aux fonctionnalités avancées.
À qui s’adresse ce livre
Nous détaillons dans cet ouvrage les techniques utilisées en production par les webdesi-
gners. Ce livre est destiné aux flasheurs débutants qui souhaitent contrôler les contenus
depuis le scénario, en codant le plus simplement possible de vraies fonctionnalités.
Tout graphiste flasheur débutant, en poste, en freelance, ou en étude, peut trouver dans cet
ouvrage les réponses aux questions qu’il se pose afin de maîtriser ActionScript 3, directement
dans le scénario de Flash CS4.
Toute personne intéressée par le déploiement de contenus enrichis avec Flash, maîtrisant
déjà cette technique, mais inspirée par des notions inédites, comme le référencement,
l’accessibilité, le relief, l’importation d’objets 3D, entre autres, trouvera également des
réponses sur ces sujets.
Pour aborder ce livre, vous devez seulement maîtriser quelques rudiments du langage
ActionScript 3 : le placement du code dans le scénario, la gestion des fonctions et des écouteurs,
ainsi que la navigation dans le scénario.
Les nombreux exemples commentés de ce livre en font un guide pratique incontournable pour
toute personne néophyte dans la programmation en ActionScript 3 et le motion design.
Les intentions de l’auteur
Pour avoir été longtemps graphiste indépendant sur les nouvelles technologies, dès leur
apparition dans les années 90, je comprends le besoin de mes amis designers et de mes
élèves graphistes de mettre en forme les contenus efficacement et facilement.
Pour la communauté de concepteurs, de designers, de créatifs, à laquelle j’appartiens, la
problématique est de ne pas consacrer son précieux temps à seulement coder. L’énergie
déployée en production doit privilégier avant tout la conception et la créativité.
Si Flash est désormais un brillant outil pour l’animation et si ActionScript 3 est désormais
un puissant langage pour l’interactivité, qu’en est-il de la programmation au service de la
LivreActionScript.book Page 2 Vendredi, 15. janvier 2010 11:49 11
© 2010 Pearson Education France – ActionScript 3 et le motion design – Arzhur Caouissin
3
P
RÉFACE
création ? À la question peut-on programmer de l’interactivité avancée sur des contenus
graphiques placés à même le scénario, ma réponse est oui ! Et comment !
Depuis que ce langage est arrivé, aucun ouvrage n’a jusqu’ici su apporter ce qui était réellement
utile pour un designer. Aucun ouvrage n’a su présenter de manière accessible et avancée, les
techniques pour organiser dans le scénario tous les médias et tous les types d’interactions
possibles entre ces différents médias, et ceci avec des exemples concrets et efficacement. Une
idée pourtant simple, mais devant laquelle un désert pédagogique m’a laissé pantois.
Oui, le ciblage est autorisé et possible entre SWF imbriqués. Oui, la 3D est facilement
contrôlable depuis le scénario. Oui, une ligne de code suffit pour créer des animations
époustouflantes. Oui, la vidéo en F4V et les points de repère sont compatibles, y compris
avec d’anciens lecteurs Flash. Oui, nous pouvons même, avec Flash, expérimenter des choses
incroyables comme le relief, le référencement et l’accessibilité.
Face aux innombrables questions que mes élèves se sont posées lors de leur découverte
d’ActionScript 3, à celles auxquelles se sont heurtés mes collègues en production, astreints
depuis quelques années à la création d’interfaces Flash sans la moindre interactivité, ainsi
que mes amis designers ulcérés (oui, oui, ulcérés) par l’invraisemblable mécanique de ce
langage, j’ai souhaité apporter mes réponses.
Il existe deux approches, souvent mises en opposition, pour appréhender l’ActionScript 3.
La première consiste à tout coder de manière stricte dans des classes externes et ne rien
introduire dans l’interface auteur ni sur le scénario. Cette méthode permet d’optimiser la
vitesse d’exécution d’une animation de quelques micro-secondes. Mais lorsque nous consi-
dérons que la valeur ajoutée doit davantage être focalisée sur l’organisation du contenu et sa
forme, plutôt que sur ce temps d’exécution, nous ne pouvons accepter de devoir program-
mer des pages entières de code, et y consacrer bien trop de temps, au détriment de la créati-
vité et… de sa santé.
À défaut de pouvoir déléguer une partie de la programmation à un tiers, l’autre choix consiste
donc à placer, directement dans le scénario, les seules instructions utiles, pour mettre en
forme les contenus, sans compromettre cette noble créativité et sans corrompre non plus les
avancées du langage ni les performances de l’application.
Devant cette nécessité de devoir livrer toutes mes astuces, j’ai donc choisi de proposer un
ouvrage qui rassemble de manière claire, accessible et évidente, ce que j’aurais moi-même
jubilé de trouver si je débutais : un livre synthétique sur ce que l’on pourrait nommer
ActionScript 3 et le motion design.
Structure du livre
Cet ouvrage présente les instructions ActionScript 3 nécessaires pour développer des concepts
inhérents à la création interactive avec Flash CS4. Dans ce livre, nous détaillons les points
suivants :
• L’animation réalisée à partir d’instructions simples en ActionScript : les accélérations et
les boucles.
LivreActionScript.book Page 3 Vendredi, 15. janvier 2010 11:49 11
© 2010 Pearson Education France – ActionScript 3 et le motion design – Arzhur Caouissin
A
CTION
S
CRIPT
3
ET

MOTION

DESIGN
4
• La création d’animations à partir de classes importées afin de permettre la création
d’interfaces animées entièrement dynamiques et modifiables selon le comportement de
l’utilisateur.
• L’animation de filtres et d’effets appliqués à des contenus graphiques.
• La gestion des squelettes avec ActionScript afin de permettre le contrôle dynamique de
l’animation de personnages ou de structures mécaniques ainsi que le mouvement de for-
mes organiques composées à partir de graphismes vectoriels.
• La création de galeries d’images simples et plus avancées, avec et sans XML, ainsi que
l’interaction avec des objets placés dynamiquement dans la scène.
• La gestion de la vidéo au sein de Flash, à partir du format FLV, et la gestion de vidéos
composites avec la transparence pour l’implémentation d’effets spéciaux.
• La gestion de vidéos en haute définition, avec le format F4V et le codec H-264, à partir de
séquences réalisées par la société gKaster, et compatibles avec d’anciens lecteurs Flash.
• L’interactivité en vidéo avec les contrôles de lecture, le chapitrage, les points de repère,
mais surtout toute la complexité liée à une gestion fluide et optimale du signal vidéo,
avec lecture en arrière et arrêt complet de la vidéo dans un document embarqué.
• La 3D native disponible dans Flash, avec la création d’interfaces graphiques (murs
d’images, galeries vidéo, navigations spatiales).
• La modélisation et l’animation d’objets 3D réels, avec le logiciel gratuit Google Sketchup
et la classe libre PaperVision.
• L’API de traitement de l’image avec la gestion dynamique de filtres colorimétriques afin de
permettre la retouche des images et le lissage des contenus déformés, pivotés ou zoomés.
• Le relief avec la création d’un contenu en relief depuis Photoshop, et son intégration
dans Flash. Nous abordons aussi dans ce chapitre la réalisation inédite d’une interface
dynamique qui affiche, automatiquement en relief, tout contenu distribué sur un index Z
de profondeur 3D.
• La création de systèmes de navigation avancés avec la résolution de problèmes et de
contraintes souvent observées en production, comme la création de boutons à états visités
et les boutons interfaçables imbriqués.
• La communication entre un document HTML et un document Flash, afin d’améliorer la
relation entre les contenus dans une interface de site hybride.
• La gestion de sites tout en Flash avec la réorganisation des contenus de manière à créer
des interfaces élastiques, mais non déformantes, et disponibles pour un affichage en
plein écran.
• Les connaissances requises pour la création d’un site en Flash, accessible pour les
moteurs de recherche, et l’affichage de contenu alternatif pour les utilisateurs qui ne
disposent pas du lecteur Flash.
• En annexe, vous trouverez les outils de développement qui permettent de rendre un
document Flash accessible aux personnes à mobilité réduite sur le Web, ainsi que des
références et aides pour compléter votre apprentissage. Enfin, un index classique ainsi
qu’un index des notes et remarques complètent cet ouvrage.
LivreActionScript.book Page 4 Vendredi, 15. janvier 2010 11:49 11
© 2010 Pearson Education France – ActionScript 3 et le motion design – Arzhur Caouissin
5
P
RÉFACE
Les exemples
Chaque étape du livre est présentée avec une logique pédagogique progressive. Chacun des
chapitres aborde un thème spécifique et fait référence à des exemples disponibles en Flash
au format natif (.fla). Vous pouvez utiliser ces fichiers et leur code, librement, à l’exception
des vidéos et des images qui y sont placées uniquement pour illustrer l’ouvrage.
L’ensemble des exemples du livre est disponible en téléchargement à l’adresse suivante :
http://www.pearson.fr/livre/?GCOI=27440100685160.
Pour suivre confortablement les exemples commentés du livre, veuillez télécharger distinc-
tement les différents dossiers compressés mis à votre disposition, puis rassembler leurs
contenus respectifs dans le même répertoire que vous créerez et nommerez "Exemples".
Tout au long du livre, nous faisons référence aux fichiers placés dans ce dossier "Exemples".
Aussi, en organisant vos téléchargements de la sorte, vous en faciliterez la lecture.
Dans les exemples, de nombreux fichiers font également référence à des contenus placés
dans des répertoires ou des classes ActionScript et JavaScript. Pour votre confort, il convient
donc de télécharger l’ensemble des dossiers compressés et de tous les rassembler dans ce
nouveau dossier "Exemples" que vous aurez créé. Vous pourrez alors exploiter librement les
fichiers appelés tout au long de la lecture de l’ouvrage.
Conventions
Ce livre contient quelques morceaux de code, représentés avec cette convention :
//------------------ actions
this.addEventListener(Event.ENTER_FRAME,defilementPanoramique);
Dans le corps du texte, les éléments relatifs à ActionScript sont notés avec cette typographie.
Ce pictogramme signale que vous pouvez télécharger les fichiers d’exemple sur le site de Pearson.
Nous disposons d’autre part de deux types d’encadrés :
Ces encadrés sont des remarques: il peut s’agir d’un point auquel
faire attention, d’une référence externe, d’une définition, d’une
astuce, d’un renvoi…
Encadrés
Ces encadrés sont des encadrés de référence. Ils émaillent le texte et précisent certains points de
manière formelle. Ils sont recensés dans la Table des encadrés en fin d’ouvrage.
Conventions
LivreActionScript.book Page 5 Vendredi, 15. janvier 2010 11:49 11
© 2010 Pearson Education France – ActionScript 3 et le motion design – Arzhur Caouissin
A
CTION
S
CRIPT
3
ET

MOTION

DESIGN
6
Remerciements
Naturellement, je tiens à remercier mon éditeur pour m’avoir accompagné avec un réel
dévouement et un grand enthousiasme dans ce projet (Dominique Buraud principalement et
Patricia Moncorgé). Je remercie bien sûr Bruno Sébarte pour son implication, ses compé-
tences techniques et ses recommandations toujours constructives. Prends bien soin !
Je remercie également toute l’équipe des Gobelins et Pyramyd pour leur accompagnement
et leur soutien sans cesse renouvelé depuis mes débuts (Marie-France, Didier, Sylvie,
Sandrine, Anne Tord, Jean-Marie) ; Olivier Coach pour ses conseils avisés sur le relief ; la
société GKaster pour leur généreuse mise à disposition de ressources vidéo graphiques ;
Thibaut Imbert, Anne Tasso et David Tardiveau pour leurs attentions respectives ; mes
élèves et ma clientèle pour l’expérience que nous avons tissée ensemble ; et l’ensemble des
graphistes flasheurs développeurs pour qui j’ai conçu ce livre et pour qui la création impli-
que nécessairement un dépassement de soi, dépassement que j’espère enfin possible à mon
humble niveau grâce à ce manuel. Je remercie enfin mes proches pour leur patience car
l’élaboration d’un tel ouvrage prend du temps et de l’énergie.
Présentation de l’auteur
Arzhur CAOUISSIN est auteur et réalisateur multimédia indépendant, affilié AGESSA.
Déjà auteur de trois livres et de nombreux supports pédagogiques au format numérique, il
est aussi formateur depuis plus de dix ans en région parisienne, à l’école des Gobelins et
chez Pyramyd. Il a également été formateur occasionnel pour l’INA, le GRETA Réseau gra-
phique de l’école Estienne, l’université de Marne La Vallée, la CNAM, l’ILOI et l’école
supérieure de design Olivier de Serres.
Spécialisé dans la technologie Flash, il est aussi consulté pour sa vision transversale et artis-
tique sur les différents médias, dans la mode, les cosmétiques, la finance, mais aussi par des
agences, pour son expertise en création de contenus web enrichis. Proche du milieu de l’ani-
mation, il est intervenu enfin en tant qu’assistant à la mise en scène et à l’écriture, pour des
projets filmiques courts, impliquant, entre autres, des captations en studio sur fond vert et le
traitement vidéo y compris de scène animées, avant leur intégration dans des univers multi-
média.
LivreActionScript.book Page 6 Vendredi, 15. janvier 2010 11:49 11
© 2010 Pearson Education France – ActionScript 3 et le motion design – Arzhur Caouissin