Animation 2D avec Flash CS5

Adobe recevait Chris Georgenes, flasheur-animateur américain, pour une conférence (Paris 25/06/2010, durée de 3h environ, en anglais) sur le thème « Technique, optimisation et maîtrise de l’animation 2D traditionnelle avec Flash Pro CS5 ». La présence de caméras dans la salle laisse supposer que la conférence sera mise à disposition pour consultation sur le web (les projecteurs nécessaires au tournage nous en mettent plein la vue, au sens propre…).
Le représentant Adobe qui nous accueille rappelle que nous sommes dans une salle historique des conférences Macromedia (avant le rachat par Adobe, donc). À l’heure où Flash est devenu un environnement de développement complet (et complexe), au coeur d’un enjeu technologique (ou commercial ?) sans pitié sur les plateformes mobiles Apple (i-Phone, i-Pad), l’objectif est peut-être de rappeler l’origine du logiciel : l’animation vectorielle 2D.

Dans la salle, une moitié environ des participants utilise Flash quotidiennement (sondage à main levée). Parmi eux, seule une proportion finalement assez réduite a un profil animation.
Comme nous allons le voir, lors de cette conférence, on va beaucoup parler d’animation, beaucoup de Flash, et finalement très peu de CS5 !

Chris Georgenes

Les premiers travaux de Chris Georgenes, avec une formation en Beaux-Arts, sont de facture très classique, voire hyperréaliste. Alors qu’il démarre sa carrière comme restaurateur ou mécanicien (!), il tombe dans l’animation Flash par le jeu des hasards et des opportunités. Il s’agit à l’époque de Flash 3, et les créations de Chris n’ont encore aucun lien avec le web naissant.
Auteur d’ouvrages tels que « How to cheat in Flash », Chris est aujourd’hui devenu une référence en matière d’animation Flash, avec des clients aussi prestigieux que Yahoo!, Adobe, Microsoft, et de grandes agences de com américaines.
Sa production concerne aussi bien des courts métrages animés que des jeux ou interfaces ludiques.
Il se limite au travail de la timeline, laissant à des développeurs (comme Thibault Imbert, par ex.) le soin d’exploiter les movie-clips qu’il leur prépare. Aucune ligne de code, donc, au cours de cette conférence.
Chris utilise également le logiciel d’animation Toon Boom.

2 dimensions et demie

Chris Georgenes excelle dans un art qu’il nomme « 2D½ », consistant à donner une illusion tridimensionnelle en utilisant des effets d’animation purement 2D. En exportant des animations 3D vers Flash, Chris réalise un jour que le même rendu pourrait être obtenu avec des éléments 2D basique. De fait, sa technique consiste simplement à faire glisser judicieusement des symboles graphiques les uns sur les autres, en jouant sur leurs positions relatives, leurs proportions… un zeste de cisaillement, et le tour est joué.
Pour se faire une bonne idée du rendu, on peut regarder le petit monstre adipeux qui orne la têtière de son portfolio (survolez le personnage pour le réveiller).

2D½ Monster

Productivité

Très à l’aise pour dessiner directement dans Flash, Chris a semble-t-il développé une capacité à travailler très rapidement. Pour exemple, un court-métrage assez élaboré, réalisé en 2 semaines au total (storyboard compris).
En revanche, à la question « combien de temps faut-il passer sur le design d’un personnage ? », pas de réponse standard : ce sont souvent les créations les plus rapides et les plus spontanées qui sont les meilleures. Mais pour certains personnages, plus de temps sera nécessaire, et c’est parfois après une bonne nuit de sommeil que la solution graphique s’imposera.

Lip sync

Pour les courts métrages, Chris nous donne ses astuces pour le fastidieux travail de synchronisation des mouvements labiaux : un unique symbole graphique contenant toutes les variantes de bouches (jusqu’à 50 différentes, si on veut combiner les différents sons avec des expressions faciales multiples) sur des images-clés distinctes. Sur la timeline principale, il suffit alors de déterminer l’image à afficher, calée sur la bande-son (elle-même synchronisée avec la timeline principale).

Symboles graphiques ou movie-clips ?

Vaut-il mieux utiliser les symboles graphiques ou les movie-clips ? Bien sûr, ça dépend. Chris rappelle les concepts de base : Les symboles graphiques sont en permanence synchronisés avec la timeline principale, d’où leur intérêt pour les animateurs. En revanche, les movie-clips sont idéaux pour des animations subalternes, qui bouclent indépendamment de l’action principale (clignements d’yeux ou balancements de queue, par ex.).
Si c’est pour exporter en vidéo, mieux vaut oublier les movie-clips : ils sont ignorés !
Et dans la wish list Flash de M. Georgenes : le support des filtres pour les symboles graphiques (seulement pour les movie-clips actuellement).

Interpolation de forme ou de mouvement ?

Là encore, ça dépend. Les interpolations de forme sont à réserver dans le cas de changements de forme, comme leur nom l’indique. Dans tous les autres cas (changement de couleur, de taille, d’orientation…), les interpolations de mouvement sont préférables.
On note que Chris Georgenes, dans ses créations, semble utiliser majoritairement les interpolations dites « classiques » (d’avant CS4). Les nouvelles interpolations de mouvement ont certes leurs atouts, mais elles imposent d’exporter en player version 10 (et ne pourront donc pas être lues par les versions antérieures).

Cinématique inverse

Au vu des réalisations de Chris (utilisation d’interpolations classiques, méthode de travail entièrement compatible avec Flash 3 ou 4 !), l’intervenant Adobe juge bon de recentrer le débat vers les fonctionnalités offertes par les suites plus récentes, CS4 ou CS5 : Par exemple, quid de la cinématique inverse (IK) dans Flash ?
Petit sondage dans la salle : Qui a déjà utilisé la cinématique inverse dans Flash ? Personne.
Chris Georgenes fait une démo. L’outil paraît puissant, mais Chris le juge peu fiable. Il regrette surtout l’absence de « pinning » (possibilité de fixer la position d’un membre, par ex. un pied au sol), et une mauvaise gestion des symboles graphiques (problème corrigé dans CS5).
Inverse Kinematics
La principale astuce suggérée par Chris est d’ajouter un os fictif au-delà de l’extrémité d’un membre (après la main ou le pied, par exemple) afin de mieux pouvoir contrôler ses mouvements et lui fixer des contraintes.
Sinon, l’outil IK fait des merveilles pour animer le balancement tout en souplesse de la queue d’une girafe ou d’une trompe d’éléphant.

Conclusion

À l’évidence, l’utilisation de Flash par un animateur confirmé est restée à peu près la même depuis Flash 3 ! Il est vrai qu’avec le temps, Adobe a concentré ses efforts en direction des développeurs plus que des animateurs (peut-être parce que Flash n’avait pas vraiment de concurrent en matière d’animation sur le web… ?).
Les nouveautés des versions récentes ne sont pas complètement révolutionnaires : les filtres depuis Flash 8, l’axe Z et la cinématique inverse depuis CS4, les interpolations nouvelle version. L’axe Z est une réelle avancée en matière d’animation, faisant entrer Flash dans une certaine 3ème dimension. Mais son absence jusqu’alors avait été comblée par des librairies telles que Papervision. Et comme le souligne Chris Georgenes : un bel effet 2D (voire 2D½ !) bien soigné vaut toujours mieux qu’un effet 3D un peu laborieux.

Liens

Pour retrouver la vidéo de la conférence : http://tv.adobe.com/fr/watch/we-are-5/lanimation-flash-avec-chris-georgenes-confrence-paris-le-25-juin-2010-partie-3/

Le portfolio de Chris Georgenes
Son blog « Keyframer »
Livre How to cheat in Flash | Sur Amazon
En français : « L’art du bluff avec Adobe Flash »

architectures (de pages) 2

Pour continuer notre série sur les rapports entre l’architecture de pages web et l’architecture de batiments (voir l’article architecture (de pages) premier du nom), voici une nouvelle sélection de constructions pouvant ouvrir l’architecture des possibles pour nos pages internet.

Architectures organiques
MahaNakhon by OMA
Constructions et dé-constructions pour le projet MahaNakhon by OMA

Urban Forest by MAD
Urban Forest by MAD

trans-city - nomadic corporations
Souplesse & rigueur pour le projet Trans-city – nomadic corporations

studio gang architects - aqua tower
Studio gang architects – aqua tower

OIII architects - commercial bank of ethiopia proposal
OIII architects – commercial bank of ethiopia proposal

Après Gaudi, l’Art Nouveau, le surréalisme et les années 70, les métaphores végétales font leur grand retour dans l’architecture.

Hermann Finsterlin - Die Stadt (1920-24)
Hermann Finsterlin – Die Stadt (1920-24)

China Hills by MVRDV
China Hills by MVRDV

Nature Factory by Makoto Tanijiri
Pour nos sites e-commerce, nous pourrions nous inspirer du design des show room avant-gardistes. Ici : Nature Factory by Makoto Tanijiri.

Dialogues
2 langages architecturaux se répondent, se contredisent, échangent.

frank gehry - city of wine complex marques de riscal hotel
Frank gehry – city of wine complex marques de riscal hotel

coop himmelb(l)au - energy roof, perugia italy
Coop himmelb(l)au – energy roof, perugia italy

diller scofidio + renfro hirshhorn museum bubble
Diller scofidio + renfro hirshhorn museum bubble

arons en gelauff architecten - annie MG schmidt house
Arons en gelauff architecten – annie MG schmidt house

Townhouse in Landskrona by Elding Oscarson
Townhouse in Landskrona by Elding Oscarson

Le cube et le cadre

Housing project in Helsingborg
Housing project in Helsingborg

DnB NOR headquarters by MVRDV
DnB NOR headquarters by MVRDV

101DESIGN of Japan (UPTO35 competition shortlist)
101DESIGN of Japan (UPTO35 competition shortlist)

Motifs décoratifs

Dorobanti Tower by Zaha Hadid Architects
Dorobanti Tower by Zaha Hadid Architects

frederick roije - metrobowl
Frederick roije – metrobowl

Matières

House in St. John’s Wood by Hogarth Architects
On pourraient aussi multiplier les jeu sur les matières comme pour cette vue de la House in St. John’s Wood de Hogarth Architects

Sites & Publicité en ligne

times square new york by studio lindfors
Times square new york by studio lindfors

iPhone, applications et navigation

Pour changer un peu des barres noires de navigation basiques, petit benchmark…

Navigation par liste
Around Me
Around Me

Navigation par icônes
Linkedin

Linkedin

Facebook

Facebook

Libération

Libération

iMandalArt

iMandalArt

Navigation par onglets

Awesome Note

Awesome Note

Navigation par roulette

Convertbot

Convertbot

Où trouver ?

Où trouver ?

Little Snapper

Little Snapper

Navigation par carrousel

Pages Jaunes

Pages Jaunes

Navigation horizontale

Royal Riviera

Royal Rriviera

Concours SNCF 01net Multitouch : Votez pour nous !

Bonjour à tous,
Comme vous le savez peut-être déjà, sqli agency (représentée par Stéphane Donic, Vincent Hove, Jimmy Pina, Julie Hirtz, Cédric Le Floch, Julien Demeuzois, Jean-Marc Léglise, Memmie Lenglet, Fabien Mirault et Florent Capon) participe au Concours MultiTouch SNCF.

La société a organisé, en partenariat avec 01.NET un concours de développement d’applications tactiles multitouch.
Objectif : inventer une nouvelle façon de vendre des billets de train en boutique SNCF.
Le gagnant de ce concours verra son projet multitouch exposé dans la boutique Gare de Lyon pendant un mois !

Et pour que nous soyons cet heureux gagnant, c’est maintenant que nous avons besoin de vous !
Votez ici pour notre réalisation Projet « Révolution », cela ne prend qu’une minute. A vos clics, partez !

SNCF CONCOURS MULTITOUCH
N’hésitez pas à diffuser l’information autour de vous : amis, parents, billets blogs, Facebook…

Merci !

Découverte du jour : un site fait à la main !

J’avoue ne pas trop comprendre la langue et donc je ne sais pas trop ce que fait VOB Nedir, mais leur site est très original !

VOB