Vidéo « nouvelle » génération chez General Electric pour se présenter : pleine page, qualité au rendez-vous, mise en scène, écriture de l’histoire, options de partage…

… ou bien youtube ?

Dernier dossier de l’année : l’utilisation du flash et de la vidéo pour recruter.

Je ne parlerais pas de cv vidéo, leur pratique étant sujette à différentes problématiques éthiques, et c’est une conviction personnelle qui me retient d’en parler dans un processus de recrutement. Nous allons nous attacher plutôt à la manière dont certains utilisent la vidéo et le flash pour séduire leurs futures recrues.

Avec l’explosion de la vidéo sur internet et de l’interactivité, voyons comment certains ont utilisé à bon escient la technologie et quelle approche ils ont choisi. Par vidéo, j’entends également scénario, effets, captation et manière de filmer, travail de post production et montage.

Dispositif technique

Oui, la première tendance étant la hausse de niveau en terme de qualité de visionnage, et la viralité. Des players plus grands, des vidéos plus nombreuses, autour des collaborateurs (j’en parlerais plus bas), mais voici différents cas d’intégration :

1- Player flash intégré dans une page : JPMOrgan, bouygues.com, Johnson&Jonhson. Bon, je ne reviendrais pas sur une liste d’exemple exhaustive, mais il y a une mode de la vidéo en layer over, (par dessus le contenu de la page web et centrée), qui est assez récurrente maintenant. On apprécie le player brandé, plutôt que le composant de Flash 8 par défaut.

2- Espace vidéo dédié : exemples chez General Electrics, credit agricole, Intel, Target, at&t, Lilly, Toyota, Danone, le très beau portail de la SocGen ou de Chaine vidéo intégrée à une chaine plus corporate :comme celle de GDFSuez

3- chaine youtube globale : Chez shell avec sa playlist intéressante.

Finie la vidéo en pop up au format wmv (ou presque). Les essais d’intégration dans la page originaux semblent avoir fait long feu (quoique celle sur CHRobinson était plutôt bien intégrée). Les formats de compression et qualité qui laissent à désirer également, on va tâcher d’oublier…

Modules interactifs

Un peu d’interactivité pour découvrir un contenu, les histoires de chacun ne fait pas forcément de mal lorsque c’est bien maitrisé. Voyons quelques exemples.

Bon module interactif chez Target.

Chez Orange, petit dispositif avec incrustation vidéo en transparence et mise en scène. Présentation de collaborateurs.

Histoire de collaborateurs, histoire de spécialistes, histoire d’êtres humains composant l’entreprise, histoire de l’entreprise et séquence émotion

Objectif d’atteindre un certain ton de sincérité, d’authenticité et de transparence, la vidéos rentrant dans le vif du sujet a le vent en poupe : faire se rencontrer les internautes (le futur candidat) et les collaborateurs au travers de leur passion pour leur métier. Loin de faire dans le même registre que le inside d’air France, la vidéo contribue à ce rapprochement.

Chez Target, « get to know the people who help to build the Target brand. » Menu en JS, vidéo en layer over, et qualité au rendez-vous. Bonne approche.

Chez Michelin, également, un regroupement dédié, orienté activité

Morgan Stanley est également très versé dans l’histoire de ses collaborateurs. Bien écrit, mis en scène. Grosse phase de préparation. A voir également leur manière d’explorer les métiers : à partir d’un diagramme, la liste des personnes interviewées est présente directement dans la présentation des activités de l’entreprise. Le flash ne paye pas de mine mais le dispositif est intéressant.

… + Ecriture, présentation

Chez Starbucks, on tire plus sur la corde sensible de l’émotion, du souvenir et du chemin traversé. Authenticité, quand tu nous tiens… avec flûte de pan.. svp… j’en ai la larme à l’oeil

Idem chez Goldman Sachs, vidéo de la collaboratrice qui prend son café chez elle, au métro, jusqu’à son lieu de travail. Observez bien la manière de filmer et de monter la vidéo : il y a une vraie âme dans l’écriture du film, avec cette voix en off très intimiste, très proche, comme un chuchotement à l’oreille.

Et oui, l’écriture est importante ! observez le rythme d’une vidéo sur le portail d’UBS :

Rien à voir, mais lorsqu’il y a une approche un peu décalée ou qui donne un peu d’identité à la vidéo, on la regarde un peu plus… exemple avec celle de Danone en colonne de gauche.

Mini-site impactant

General Electrics a fort bien réalisé son site : Meet GE, avec une bonne dose d’interactivité. Chaque main tient une carte de visite, avec au survol l’interview vidéo de la personne.

On se souvient du site d’Ubisoft, avec des vidéos retraitées en postprod, un montage et une bonne dose d’interactivité qui convainc totalement et est en adéquation avec l’esprit de l’entreprise.

Le site de recrutement de l’armée suédoise, également, à voir, avec un positionnement original. Côté armée et vidéo, ce site à voir, basé essentiellement sur de la vidéo. Très immersif.

Ce n’est pas un site de recrutement, mais le dreams de Honda, bon sang, il aurait pu… à ne pas manquer.

Conclusion

On ne peut pas dire que la vidéo a son heure de gloire dans le recrutement. Si certains développent de vrais media center sur leurs sites pour créer une vraie encyclopédie des métiers, la qualité est parfois très variable. La vidéo est encore beaucoup restreinte à de l’illustration, ou ayant un socle technologique qui commence à dater en terme de compression/lecteur. Toutefois, on remarque pour certains un vrai travail sur le traitement visuel de l’image, l’écriture du scénario et sa présentation, sortant des carcans trop corporate, empruntant parfois des codes issus du cinéma. Ceux-là font mouche, ca fonctionne. Vraiment.

Je parle là de marques qui acquièrent une réelle présence dans la mémoire des gens parce qu’ils ont compris qu’internet est réellement un terrain d’innovation. D’autres, s’acharnent en spot télé, presse ou radio, et oublient totalement le web. Sur le terrain du web, certaines marques sont totalement absentes, inexistantes. Passées dans l’oubli le plus total. Et qu’est-ce qu’elle vous évoque lorsque vous rentrez dans leur enseigne, vous, internautes ? Rien… rien d’autre qu’un magasin qui vous vend un produit. Nous sommes bien loin du lien sentimental que certaines parviennent à atteindre.

Uniqlo fait partie de la première catégorie : inventive, créative, réinventant à chaque campagne ses codes d’expression. S’ils ont une charte graphique très forte, ils doivent avoir certainement une charte interactive dont les mots d’ordre sont peut-être : soyez inventifs, surprenez l’utilisateur, utilisez les nouvelles possibilités techniques pour vous exprimer, mais sans jamais la mettre au devant de la scène, mais utilisez-la pour servir un scénario visuel, un esprit graphique dans le mouvement. Tout cela au service de l’image et de l’aspect business.

Résultat ? A chaque campagne, c’est un raz de marée de blogs et de sites qui parlent d’eux (moi le premier). Sans jamais débourser quoi que ce soit pour qu’un bloggeur écrive un billet sur eux. C’est ce que l’on appelle la notoriété spontanée. On a envie de parler d’eux parce qu’au travers de leur maitrise du support de communication, il y a une beauté dans la créativité qui force l’admiration. Parce que c’est nouveau, dans le sens où ils inventent de nouvelles expériences interactives à chaque nouveau site avec une qualité de réalisation constante. On pourrait également citer les campagnes Ikea de la même manière.

Attention, ce n’est pas une manière exhaltée de vendre le renouveau continu : tout est relié directement avec des potentiomètres business et indicateurs d’images.

Du site à la bannière

Même chose pour les bannières de pub sur les espaces media : je regardais une étude simple sur les formats qui marchent et il en ressort que les plus « rentables » sont celles qui sont également les plus créatives. Chiffres à l’appui.

Et puis, ce gain en image sur internet est relié directement avec la réputation. Une marque a moins de problèmes lorsqu’un détail gênant apparait sur internet si elle bénéficie d’une « aura » positive. Parce que l’internaute est plus tolérant et qu’il a à son égard un fort capital sympathie. C’est déjà moins à dépenser en veille de réputation, en énergie et en temps humain à démêler tout cela. Regardez sur le même terrain la réputation de GAP : en France, ils sont inexistants sur le terrain de la communication alors qu’ils ont une image déplorable d’exploitants d’enfants dans leurs usines en asie.

Quelle que soit la technique utilisée
Pour tout cela, le flash est bien sûr un maitre en la matière et sert directement les personnes qui l’utilisent à bon escient : interactivité, un peu de scénario (storytelling) bien ficelé, une approche technique qui relève le défi de principes créatifs pour renouveler l’expérience d’un utilisateur sur un site internet. Wake up, l’âge de l’internet préhistorique est dépassé, et cela va beaucoup plus loin qu’auparavant.

Et quelle que soit la technique utilisée : je parle de flash, mais il en va de même avec un site en html bien géré au niveau CSS : un bon choix d’image, de tonalités, de couleurs… Je vous invite à consulter tous les exemples magnifiques chez Konigi qui montrent également en terme d’ergonomie, ce que l’on peut faire pour améliorer le sentiment de confort ressenti sur un site internet.

Construire son identité interactive sur internet
Faisons un parallèle entre plusieurs réalisateurs connus : Tarentino, Tati, Tim Burton, les films de Dreamworks ou les Disney…

Un film ne se résume pas uniquement à son affiche ou à son teaser sur allociné. Est-ce la même manière pour chacun de ces exemples de filmer, d’écrire un dialogue, de définir des codes graphiques, de cibler son public ? Bien sûr que non, ils ont une identité et une patte qui leur est propre. Il en va de même pour l’image de chaque marque sur internet. Trouvez vos propres manières de communiquer et de vous exprimer. Et arrêtons de diffuser la même sauce à toutes les cibles, avec des identités et des discours qui se ressemblent tous, en jetant négligemment un message porté avec naïveté sur internet, juste parce qu’internet est un support comme un autre. Et qu’il n’est pas noble comme la télé ou la presse.

Au delà de la campagne éphèmère : le long terme
Le social media a beau être très tendance en ce moment, c’est encore une histoire d’interaction avec les utilisateurs. Une relation au plus long terme qui vise créer de la valeur avec ses clients, prospects, ou « fan ». Ce n’est pas cela qui ira sauver une entreprise en difficulté, certes, mais cela peut aider à limiter la casse, à fidéliser, à améliorer son image auprès d’une certaine cible. A connecter les personnes qui composent l’entreprise avec l’extérieur. Combien de marques sourdes et muettes ont des collaborateurs qui ne disent jamais à l’extérieur de quelle entreprise ils viennent juste par défaut d’image… ?

Merci à ceux qui m’offrent ce service
Une marque qui lance une application rendant service quotidiennement à un internaute. C’est le cas de widgets notamment ou d’autres plateformes de mise en relation. (Cherchez bien, vous en trouverez..) Vous imaginez le gain en terme d’image ? Tous les jours de la semaine, j’emporte avec moi une application qui m’est réllement utile, et qui me sert vraiment. Qu’importe au final s’il y a un petit logo dans un coin. J’y suis attaché, je la garde.

Et encore une fois, on peut en être absent également… et creuser un peu plus le fossé entre ses utilisateurs et soi-même. Ou commencer à réfléchir interaction : interaction par le dispositif offert ou interaction avec les utilisateurs.

Non, ne fuyez pas tout de suite, je m’explique :
Le flash est très utilisé pour les lecteurs audios/vidéos, pour des RIA, à destination des domaines variés du e-commerce aux sites marketing ou aux applications un peu plus ludiques. Les campagnes interactives et marketing, d’accord, mais le web ne tourne pas qu’autour de cela !

Et il est un domaine – celui des sites institutionnels – caricaturalement ennuyeux, avec des chiffres sur l’entreprise, une maladie du PDF et un wording parfois si complexe et institutionnel qu’il en est incompréhensible. Ce n’était pas jusqu’à récemment un domaine qui se voulait être le fer de lance de l’innovation. Et pourtant ! il y a aujourd’hui un enjeux certain à se présenter en 2009 de manière un peu plus proche des internautes, de manière à répondre à leurs besoins lorsqu’ils naviguent sur ces sites. Et de manière plus interactive, plus attrayante. Pour résumer, j’essaye d’aller là où se passe en théorie le moins de choses pour en tirer les quelques points les plus intéressants.

Et la question suivante se pose : quelle est l’utilisation sur ces sites de grands comptes(+premières plus grandes compagnies du monde) du flash, alors que l’accessibilité et le référencement par le dieu Google du contenu textuel est censé être une de leur règle première ?

Bon nombre de sites semblent avoir compris le principe des flux RSS à présent, voire des podcasts pour certains. Pourtant, dès que l’on arrive sur de l’audio ou de la vidéo, c’est une autre affaire. Regardons cela de plus près. Au sommaire donc :

- Diaporamas, illustrations, photos interactives, vidéos, webcast, PDF, synthèse vocale, lecteur vidéo….

Note : attention, évitons toute mésentente, je ne dis pas que faire un site en flash est bien. Je fais simplement un état des utilisations du flash sur ces sites et exclusivement du flash. Et j’ai essayé de rester impartial^

On commence !

http://www.alstom.com/home/

Je passe sur les petites animations explicatives. Tout le monde les connait, et on pouvait les faire en flash 5. Même si une animation comme celle d’Alstom plus haut est tout à fait convaincante.

Par contre, des vidéos interactives comme celle de StatoilHydro sont plus intéressantes : précises, de qualité, explicatives. Surtout pour aborder des sujets sur l’histoire de l’entreprise peu.. sexy. Nous ne sommes plus très loin du cdrom pédagogique.

De même chez General Electrics, des mini-sites bien ficelés documentent avec animations, illustrations et vidéos des axes bien précis.

Diaporamas d’images interactifs

Présente la diversité des facettes de l’entreprise. Simple slideshow ou diaporama interactifs, l’animation peut devenir sérieusement intrusive et gênante à la longue. C’est toutefois une grosse tendance d’avoir des visionneuses avec plusieurs images associées à des liens, autour de sujet centraux sur l’entreprise ou des évènements du moment. L’image est roi ! (enfin reine..)

Exemples :
http://www.bouygues.fr/fr/le-groupe/
http://www.capgemini.com/
http://www.danone.com/fr/carrieres/nos-metiers/achats.html
http://www.lagardere.com/groupe/page-accueil-fr-234.html

Chez TimeWarner, par contre, on mélange tout, avec vignettes, tags, ou tri par business sur une présentation dans l’espace. On leur pardonnera (ou pas) un menu entièrement en flash… On a également une variante chez Nissan avec des petites bulles, (ca ne va pas loin mais bon).

Zurich a un système interactif un peu complexe mais qui mérite attention : il a plusieurs systèmes de visualisation, de droite à gauche et de haut en bas. Une richesse de contenu condensée dans une seule zone.

Les lecteurs vidéos

Beaucoup utilisent des lecteurs flash open source (Je me demande s’ils ont payé la licence commerciale…^), d’autres le player composant de flash 8 coloré et d’autres des players dédiés, avec une intégration à plus de 450/500px de large et une très bonne qualité. Ce n’est pas toujours le cas, on voit encore de petits players timides. Une vidéo en grand et de bonne qualité donne envie de la regarder ! Peu de players réellement bien brandés. Et pourtant, cela ajouterait une touche plus ‘pro’.

Dernier point, il semble que sur les exemples vus, il y a quand même une compréhension du format de la vidéo, en 4:3 et 16:9ème. Très bon point !

http://www.airliquide.com/fr/le-groupe/recherche-et-developpement.html
http://corporate.airfrance.com/fr…859974e4f
http://corporate.airfrance.com/fr/mediat…f02e85e

Un exemple d’intégration en lightbox de vidéo :
http://www.gdfsuez.com/fr/medias/mediatheque/videos/vue-de-detail/?media=54

Un effort d’intégration des vidéos dans le site original :
http://www.ppr.com/front__sectionId-463_Changelang-fr.html

Chez Capgemini (capture) comme chez Intel (ou d’autres), on peut embedder une vidéo chez soi ou sur différents réseaux sociaux.

Et ceux qui ne sont pas en flash alors ?

http://www.eads.com utilise un bon media center, mais en windows media… Essilor également avec un pop up, ainsi que Michelin. Le Wmv subsiste encore mais il est largement minoritaire. (oui, comme le rapport, mais cela n’a rien à voir).

Le real et le quicktime sont quelques peu passés de mode, visiblement.

Carte interactives monde

Pour souligner une présence internationale, rien ne vaut une petite carte interactive en marge des combobox de sélection avec une liste de pays à n’en plus finir. La règle d’une bonne intégration : légère à charger, fluide, ergonomique. L’alternative est un panneau qui s’ouvre en grand avec la liste des pays. On gagne un peu de temps, mais c’est moins fun. Voici quelques exemples :

http://www.bouygues.fr/fr/le-groupe/bouygues-dans-le-monde/bouygues-dans-le-monde/
http://www.gdfsuez.com/fr/groupe/presence-internationale/
http://maps.bnpparibas.com/
http://www.sanofi-aventis.com/produits_presence/presence_locale/local_presence_home.asp
http://www.roche.com/r….id=63 ou également http://www.novartis.com/abo….shtml: soulignons sur ces 2 exemples un zoom profond jusqu’à un google maps.

Bon, on peut faire aussi de très belles choses avec du html quand même hein…

La palme de la carte interactive revient à…

http://www.unicreditgroup.eu…tegy.htm pour l’originalité de son intégration.
Sur cette page, il suffit de cliquer sur le bouton situé tout en haut et observez ce qu’il se passe. J’ai failli applaudir… superbe intégration ! L’agenda n’était pas indispensable je trouve…

Dans le même genre Siemens en Javascript, mais l’effet n’est pas le même, c’est moins beau.

Et entre parenthèses(), dans le genre mashup, voir ce superbe exemple de worldbank avec google maps, qu’il ne faut pas non plus oublier.

Des titres plus riches avec une police dédiée

Pour changer de polices sur le web, il n’y a pas 36 solutions : ou bien du texte en image, ou bien avec du flash, avec des outils comme SiFR :

Quatre exemples différents d’intégration, avec des chartes bien différentes :
http://www.bouygues.fr/fr/finances-actionnaires/
General Electrics
http://www.danone.com/
http://www.unilever.com/sustainability/?topic=2

Le dernier exemple donne un très bon rendu à la page.

Des illustrations animées

Les compositions d’images, c’est sympa mais Chevron a trouvé mieux avec des compositions interactives en vidéos, avec pour chacune des urls. Une forme moins diaporama mais plus illustratrice permettant si cela intéresse l’utilisateur d’aller vers d’autres parties du site. (Le reste du texte est en flash aussi, mais ne chipotons pas).

Ils ont également un très bon minisite autour de l’environnement et de l’humain, avec une url rewriting, et qui s’intègre très bien dans le site : ni trop, ni pas assez. C’est important de garder en tête la place de chaque élément par rapport au reste !

Graphique et diagramme dynamique avec exportation en image

Déception sur les graphiques, peu sont animés et bien designés (ce qui ajoute un gramme de finesse dans ce monde de chiffres bruts), et pas mal d’interfaces auraient méritées de gros diagrammes en Flex comme sur un Google Analytics. Il existe pourtant de très bons outils pour créer de beaux graphiques aujourd’hui, et même animés. Même pour le cours de bourse, le fournisseur du service proposant un menu en Java, on n’aura pas droit à du Flex, question de développement supplémentaire. (Pourtant, il y a des choses qui devraient faire envie!). Les beaux graphiques de RIA sont réservés à un front en accès restreint le plus souvent à valeur ajoutée ou à des applications métiers.

Quelques beaux exemples quand même :
http://www.loreal-finance.com/fr/chiffres-cles
http://www.lagardere.com/groupe/chiffres-cles-151.html

Chez RWE Group, on a un diagramme interactif de présentation de chaque branche du groupe, avec un peu de 3D et de la vidéo. Presque parfait.

Magazine vidéo

Quelle que soit la thématique, les magazines vidéos vont bon train et sont souvent dédiés à un domaine particulier. Plus rares sur le terrain purement institutionnel, les espaces vidéos eux-aussi comment à fleurir sur les sites, mais restent timides.

Globalement l’usage de la vidéo est vaste : reportages sur les personnalités du groupe ou collaborateurs, évènements, magazines, vidéo institutionnelle ou dernière publicité en cours… c’est un autre sujet mais il apparait deux cas :

- Il y a des modules très bien habillés, tournés, préparés.
- Il y en a qui frôlent un peu le manque de moyens, mais plus encore, le manque de forme ‘pro’ corporate. Certains sont maladroits. A mon sens, cela donne une touche un peu plus humaine, même si c’est le décalage de qualité entre toutes les vidéos d’un même site qui peut paraitre étrange. En tout cas, il faut bien le baliser.

Full flash, vous avez dit full flash ?

Il en existe un ou deux en effet :
- Site de L’Oréal : très beau site full flash, même s’il n’y a pas de version texte alternative mais de l’URL rewriting. Inconvénients ? Cela prends du temps de chargement à chaque onglet, mais il reste très bien concu. Les limites sont là lorsqu’il y a du contenu plus long : on récupère un ascenseur classique. Autre sujet à base de flash, l’entreprise a par ailleurs depuis longtemps un widget corporate sur le bureau assez sympa et très (trop?) complet.

- Le site portail d’EDF : full flash également mais il y a une optimisation du contenu textuel en version alternative.

Rich media et synchroslides

Très utilisé dans le cadre des rapports financiers et des assemblées générales : vidéo + synchroslides avec gestion de la bande passante. (le bon vieux rich media). Superbe exemple d’habillage chez L’Oréal :
http://loreal.netdirect.fr/080422_loreal/site/Archives/ND_SLIDE_CDROM_001_FR.html

De manière générale, hormis ces synchro-slides, tous ces sites donnent l’impression que le chapitrage sur une simple vidéo ne leur sert à pas grand chose. Je n’en ai pratiquement pas vu. Déjà l’intégration des vidéos pêche parfois au niveau de l’habillage mais intégrer un système de chapitrage, c’est peut-être un peu trop.

(mauvaise expérience avec celui d’EDFoù il faut un plugin windows media webcast.. et chez eux également avec une autre vidéo en flash cette fois, je n’ai jamais eu l’image. Pas si facile.)

Transcript sur les vidéos

Option qui peut intéresser quelques personnes : il y existe différentes vidéos sur tous ces sites qui mettent à disposition les transcripts des vidéos. Un bel effort sur l’accessiblité et le référencement.

Etrangeté

http://www.socgen.com/rse/#la-demarche-qualite
A mi-chemin entre le mini-site et le pdf interactif : on ne sait pas trop sur quel pied danser, et le menu qui disparait en continu et va de droite et de gauche, cela me perturbe personnellement. Mais bon, graphiquement, cela tient la route.

La lecture vocale des pages

Exemples :
http://www.gdfsuez.com/fr/services/lecteur-vocal/?no_cache=1
http://www.bnpparibas.com/fr/develop…20sibles.
http://www.glaxosmithkline.fr/gsk/gsk_monde/index.html

Ces lecteurs audios discrets qui lisent du texte au travers d’une synthèse vocale sont très appréciés et notamment de personnes ayant des difficultés à lire sur un écran, tant la synthèse vocale de leurs propres outils sont parfois mauvais. Petit outil sympathique donc ! Par contre, j’ai un doute sur l’accessibilité du lecteur avec une apparition en Javascript comme c’est le cas chez GDF…

Rapports et PDFs interactifs :

http://www.edf.com/html/RA2007/dd/appli.htm
http://media.bnpparibas.com/fluidbook/Depliant_2008_Vf/
http://www.vinci.com/vinc…ts-annuels.htm#

Je ne comprends pas comment tous ces pdfs publiés à profusion n’ont pas une version automatiquement transformée en flash interactif, à la lecture plus aisée sur le web, et doté d’une bonne ergonomie de zoom. On peut aujourd’hui avoir de très bons systèmes de flipbook avec des moteurs de recherches sur le texte, des envois à un ami, des paniers des pages les plus importantes…

Un peu de 3D ?

Mais oui, chez Statoil Hydro, qui affiche sur un mur des artistes qu’ils soutiennent. C’est le côté mise en avant et galerie permise par la 3D en flash qui est utilisée ici à bon escient.

Aide à la navigation et relation avec un avatar

Le crédit Agricole sur sa page d’accueil permet au visiteur de se renseigner avec un avatar. Souvent cité comme un moyen d’humaniser la relation client, il est mis en valeur ici comme un bon « plan du site » interactif. Mais ce n’est pas le site corporate, je m’égare.

Les worstcases et petites bourdes

- Créer un lien directement sur un mp3, sans lecteur audio en flash. Ce n’est pas compliqué (ca prends 40 minutes à coder pour un flasheur), et cela facilite la vie. Pourtant ne pas proposer les deux usages ?

- On ne fait pas un pop up pointant directement sur un swf… ca demande d’ouvrir le lecteur flash sur le poste interne !!!

- Les menus entièrement en flash (je ne citerais personne tant c’est honteux…), avec des lettres floues, des frames, des ascenseurs qui ne sont pas cliquables, et un plan du site en flash également. (Apothéose !). Sans aucune version alternative HTML, bien sûr…

- Confusion entre un lecteur vidéo et un diaporama de photos (un gif animé quoi..). Eviter les diaporamas si petits que personne ne comprendra que les éléments sont en réalité cliquables.

Mes préférés

http://www.psa-peugeot-citroen.com
http://www.vivendi.com/vivendi/-accueil-en-
http://www.gdfsuez.com/fr/developpement-durable/
Tous les 3 pour leur parti pris ambitieux graphiquement qui ont fait un véritable effort de se démarquer avec uen identité propre, même cela manque ci et là de css sur le texte ou d’allègement de la page en terme de chargement.

http://www.statoilhydro.com
http://www.unicreditgroup.eu
http://www.chevron.com
Et pour leur simplicité, rapidité de navigation et quelques efforts sur l’interactivité et la présentation.

Remarques diverses :

- Au final, le bilan est plutôt positif : il y a un effort de fait sur l’aspect graphique et la navigation en général. On ne rencontre plus guère de grossières erreurs sur l’utilisation en flash classiques d’une époque pas si lointaine. Le flash est utilisé de manière parcimonieuse là où les contenus peuvent être plus interactifs : mise en scène, vidéo et audio, pdf interactif, diaporamas, animations… mais sans pour autant révolutionner le genre. Ces sites sont plutôt suiveurs par rapports à l’énorme source d’innovation que l’on rencontre dans d’autres domaines, même si le tour n’est pas inintéressant à faire.

- On voit poindre des technologies classiques utilisées : swfobject, SiFR, et des techniques de référencement avec du contenu alternatif. C’est bien !

- Une vidéo qui démarre automatiquement mais sans son (attention important!) bien mise en scène, je trouve cela sympathique en fin de compte. Exemple.

- Je suis tombé sur quelques 404. Ce n’est pas sérieux, allons…. Soyez utilisateur de vos propres sites !

- Ce genre de site est complexe à réaliser : surcharge de l’information, ergonomie et clarté de l’architecture de l’information tant tout est dense. Faire passer tel ou tel contenu plutôt qu’un autre, faire ressortir son identité, cela n’est pas chose facile. Sans parler des barrières techniques de plateformes parfois préhistoriques et des questions politiques. bref, soyons indulgents, mais il sera intéressant de voir comment ce type de communication évolue.

- Pour le reste des remarques, je les garde, ce n’est pas le sujet ici… ^

Quelques idées sur 2009 en quelques points non exhaustifs bien sûr, je mets à plat quelques ‘trucs’ qui m’interpellent quand on me parle de 2009…

1. Le web tend de plus en plus vers le jeu et des codes interactifs ou narratifs (et sans parler du cinéma) qui puisent leur inspiration dans celui-ci. On le voit beaucoup au travers de certains sites en flash apparus en 2008 ou certaines bannières : la mise en scène ludique du contenu, la manipulation interactive des éléments dans l’espace, le scénario… (merci à la 3D temps réeel, la vidéo interactive, et le flash tout court)C’est aussi une question de capacité technique devenu possible, mais c’est un aspect du web que je prends plaisir à observer.

2. 3D in the browser : oui ! de Flash 10, à Unity3D, de plus en plus… j’en parle assez depuis des mois et certains se demandent aujourd’hui si Adobe n’aurait pas intérêt à racheter Unity pour l’intégrer dans flash. beaucoup ont envie de faire un grand pas en avant avec les capacités de calcul. Cette idée folle pourrait être révolutionnaire… Toutefois, le débat entre Unity et Flash semble intéresser pas mal de monde. Il y a même sur googlecode des projets d’intégration de Unity dans une page web, très tourné vers le dialogue avec Flash (j’avais avancé l’idée que Unity pourrait remplacer Shockwave, ce n’était peut être pas si idiot que cela, et surtout avec la mise à dispo de l’outil sur pc qui arrive en 2009)
;)

3. Interconnections, et dialogues : de la 3D au web, du web au mobile, du mobile à la 3D, de la 3D dans le web qui communique avec un mobile, du web/metaverse qui comunique avec des objets reliés à internet… : dialogues, échanges, et partage de données. Comme pour le flash : tout support, plateforme, omniprésent et permanent. Des services comme Twitter forcent la main, sous la frénésie des internautes à vouloir rester connectés en permanence. La représentation des données s’adapte en fonction du support, mais elles continuent de transiter…

4. En parlant de Lifestream/lifelogging, l’élément central reste l’identité numérique et l’avatar. Ce couple est une relation passionnante qui reste la base de tout échange, et la base de nombreux univers. Je crois beaucoup à l’utilisation et à la montée en puissance de l’avatar comme élément central d’un certain développement du web (ce n’est pas nouveau en même temps), même si c’est quelque chose d’un peu trop systématique aujourd’hui. (Edit : à lire un billet qui va dans ce sens d’ailleurs! et ma petite chronique là-dessus sur l’atelier)

5. Attention à ne pas se lancer trop vite : le web se développe depuis 15 ans, la 3D sur le web tente de se développer depuis 15 ans. Certains sujets reviennent régulièrement sur le devant de la scène : espaces virtuels, agents virtuels, tout 3D… Laissez du temps aux technologies pour devenir un peu plus standard et matures… Oui, tout ceci est fun, mais pas n’importe comment. Il y a une question d’équipement du public, de coût de production, de performance de la techno… Observez, testez, expérimentez… Je suis assez d’accord avec certains points évoqués chez readwriteweb : il y a les usages et technos du passé qui ressurgissent avec un effet ‘hype’ et les vraies innovations qui ont tendances à se mêler entre elles et l’évolution peut être lente.

6. Toujours dans les réserves : malgré toutes sortes de prédictions comme celle de Forrester, et malgré des concepts convaincants ci-et-là, je ne crois toujours pas à la prochaine transformation totale d’internet de la 2D à la 3D . Ce sont deux choses qui continueront encore longtemps de travailler en parallèle, de dialoguer et qui ne partagent pas forcément le même usage. (Je reproche un peu aux prédictions de vouloir voir trop loin ( > 2015 ?!), ce qui fausse la vision des choses, et s’écarte de la réalité de ce que sera le futur… beaucoup de points ne sont pas gagnés par avance). C’est aussi pour moi une question d’interface.

Par contre, il ne faut surtout pas sous-estimer la montée en puissance de la 3D du côté du web ou des metaverses (advergames, simple interface 3D en flash, concepts originaux de jeux, serious games, mondes miroirs…). Les outils de créations se sont multipliés en 2008… il va devenir aussi facile de créer un univers virtuel qu’une page web… non j’exagère… Mon site favori de l’année ? Ecodazoo bien sûr !!!

7. On a vu cette année la sortie de Silverlight 2, Flash 10, et AIR sur le terrain des RIAs. Ne me posez pas la question de savoir si Flash ou Silverlight va gagner, je n’aime pas les mettre en concurrence. Toutefois, on va voir en 2009 une explosion des effets d’annonce, des moyens et finalement des avancées en terme de 3D, de vidéo, de RIA… jusqu’à Silverlight 3 et Flash 11 à la fin de l’année 2009. Des versions logicielles qui se suivent plus rapidement, mais est-ce que les gens vont suivre, eux ? (formation, équipement, coût de chaque upgrade…)

8. Montée en puissance de la réalité augmentée comme l’a été en 2008 l’interface tactile. En flash, c’est encore un peu limité, mais sur consoles, sur pc, ou dans les magasins, c’est un élément ludique surprenant qui fascine et qui peut être bien utile de surcroît. IHM, quand tu nous tiens…. Quelques exemples :

Sur PC, consoles ou autre :
- Mini expérimente la réalité augmentée en Allemagne avec plein d’images sur cet autre blog.
- Eyepet : la réalité augmentée arrive sur PS3
- Réalité augmentée de bureau : de nouveaux tamagotchis ? (ca bugge à loisir mais cela reste intéressant).
- Sur une petite revue de web ancienne

En Flash avec Papervision :
- Cette première exploitation pour un vrai site internet de Flartoolkit pour globo.com
- 2ème réalité augmentée en flash et un magazine papier augmenté…
- Réalité augmentée en Flash : #3ème, chez Digital Pictures

Sur Iphone:
ARF : un chiot en réalité augmentée sur Iphone

8 bis. – C’est aussi l’année où l’image va sortir le plus de l’écran, et ce, un peu partout (webcam ou cinéma). Avec les bonnes vieilles lunettes, pourquoi pas. Toutefois, c’est comme pour la 3D sur le web, ces nouvelles interfaces vont enrichir, compléter ou travailler en parallèle l’expérience d’un utilisateur, mais pas remplacer totalement celle que l’on connait depuis des années. (clavier, souris, page web, écran…)

Et enfin, deux points un peu plus hors sujets :
9. Réalité du terrain oblige, des services courants web 2 deviennent payants. (Si jamais un jour netvibes devient payant, je n’aurais pas trop de mal à louer ce service tant il m’est devenu indispensable… mais il ne faudrait pas que cela se généralise ! )

10. Un fossé regrettable de plus en plus présent entre les acteurs d’internet qui font de la veille et grandissent au rythme de l’évolution du web et ceux qui gardent leurs acquis sans les renouveler. Le web a évolué très très vite depuis quelques années et cela continue. Des métiers sont apparus (ne serait-ce dans la création, voir à ce sujet les études de designers interactifs) et le panel des connaissances au global s’étend de plus en plus. Je ne parle même pas de ceux qui n’ont pas pris le train en marche de l’essor d’internet (ou qui ne peuvent pas, confer fracture numérique bien connue)… les résultats sont notables en qualité de la communication, des campagnes et des investissements qui sont faits dans des opérations qui n’auront pas les résultats escomptés. Peut-être est-ce aussi le début de cette Génération Y qui grandit avec un web plus mature, et le ciblage d’un public en particulier de plus en plus important, avec des strates de plus en plus marquées dans les différents usages (UGC, advergames, Serious Games etc…)

De fil en aiguille, les technologies traitées dans ce billet, me permettent aussi – point après point – de montrer qu’il y a une certaine logique sur ce blog (ahah!) et pourquoi je parle d’interactivité en flash, de 3D, et d’univers virtuels régulièrement et de manière mélangée. De plus en plus, ces points sont liés et se mêlent entre eux ! Ce n’était pas si difficile que ca à trouver dans le même temps…

Jouer avec de la vidéo sur le web en flash : comment ?
Plusieurs techniques :
- Intégrer directement la vidéo dans le swf. Pratique pour les interactions, l’intégration ou les transitions, mais destiné à des boucles ou des vidéos très courtes, car l’inconvénient est qu’il faut tout télécharger avant de commencer à le lire. (on pouvait avoir aussi à une époque un décalage de synchro vidéo/son sur des vidéos longues)
- séparer la vidéo du swf : permet le streaming ou le progressive download. Autorise ainsi la lecture dès que quelques secondes de vidéos sont chargées ou la lecture instantanée.

Historique et formats
Le format vidéo de prédilection de flash est le FLV. C’est ce que l’on appelle un conteneur, comme l’avi ou le mov. Il permet d’avoir différentes compressions vidéos à l’intérieur même de cette extension. Rapide historique

En 2002, avec flash 6, le codec Sorenson est apparu et a permis de lire de la vidéo en H263 sur le web le plus simplement du monde. Utilisé longtemps par Youtube, il n’a pas été spécialement apprécié par les amateurs de vidéos de qualité mais il a permis de démocratiser totalement la vidéo sur le web, et Youtube comme Viméo ont finalement migré vers le au H264 (j’y viens).

Avec Flash 8, le codec propriétaire On2 VP6 a complètement boosté la qualité et optimisé le poids des vidéos, instaurant une nouvelle ère de la vidéo interactive. De plus, le VP6 permettait la prise en charge du canal alpha, ouvrant la voie à des incrustations de personnes ou d’éléments interactifs sous fond vert/bleu dans la scène. Ajoutons l’effet de ‘smooth’ directement dans flash 8 qui permet de lisser une vidéo présentant des effets de petits carrés, un peu plus consommateur en ressources par contre.

En Aout 2007, ca se complique, mais pour le meilleur. La release beta 9.115 du player flash prends désormais en charge le mp4 et le H264 (enfin x264) tout en créant en parallèle un nouveau container : le F4V (f4a pour l’audio et f4p pour le mp4 avec DRM) avec du son en AAC et plus seulement en mp3.

Pourquoi avoir rajouté cette prise en charge de ce format ? Sans parler de support en plus de M4V, M4a ou de 3gp pour le mobile, je ferais court : Adobe s’est rapproché d’un standard, plus libre, permettant d’encoder avec une très bonne qualité la vidéo. De plus, le H264 permet la HD pour peu que l’on ait la bande passante suffisante (histoire de contrer l’avance prise par Silverlight à l’époque pour l’excellente qualité de sa compression en wmv). Cela a aussi permit à de nombreux acteurs de la vidéo en ligne de ne pas utiliser de codec propriétaire à licence/royalties… puisque FFMpeg, MeGui ou Mencoder côté serveur peuvent aussi à l’heure actuelle encoder en H264.(même si certains ont trouvé la parade depuis apparemment avec le VP6).

Comparaison
Quel est le codec de compression idéal ? Tout dépend du projet, mais une chose est certaine : le Sorenson H263 est un format préhistorique maintenant, lourd, de mauvaise qualité, à proscrire en 2009 (je prends de l’avance). Préférez un VP6 ou un H264… Je viens de refaire la comparaison, un VP6 est de meilleur qualité à débit de moitié inférieur à un Sorenson. (200 / 400kbps).

Entre le VP6 et le H264 ? C’est à peu près la même chose, même si les effets de compression sont différents (crénelage, flouté, perte de teinte/luminosité de couleur….). Je trouve que l’on perd un peu en intensité de couleur en h264… même s’il est censé être meilleur que le VP6.

Si le temps d’encodage est critique pour vous, faites attention au format source de la vidéo : un mp4 en source est très long à encoder en flv tandis qu’un simple avi tout bête en DV sera rapide. Autre détail à prendre en compte : le temps de l’encodage d’un même fichier en VP6 ou H264. Le H264 est plus long à encoder et il est plus consommateur en ressources CPU à la lecture.

La qualité est aussi importante : une vidéo très compressée à l’entrée en encodage ne vous donnera pas une meilleure vidéo en sortie. La source doit être impeccable !
;)

Encoder, comment ?

Le plus simple aujourd’hui reste de passer maintenant par le Adobe Media Encoder : il est fournit avec flash et autres logiciels de la suite d’Adobe, il est à l’heure actuelle de très bonne qualité, gérant avec la CS4 les batchs d’encodage, l’estimation du projet final et les différents profils de réglages. Il y a aussi MediaCoder ou Riva. Il existe bien sûr d’autres outils assez puissants (Turbine, Sorenzon Squeeze, Rhozet (ancien Canopus), Flix…), mais souvent payants et… beaucoup plus chers. (4 000€ pour un encodeur, dans un projet, ca plombe un peu l’ambiance…)

Note : tous les encodeurs se suivent et ne se ressemblent pas. Ils n’ont pas les mêmes performances en qualité de compression et de temps de calcul. Faites des tests si vous hésitez.

Note 3 : les outils payants ont des fonctions que les autres n’ont pas forcément. Je pense aux « watched folders » qui permettent d’encoder dans différents profils des vidéos déposées dans un dossier partagé à partir d’un réseau ou depuis internet, et de les renvoyer ensuite par FTP ailleurs….

Note 3 : attention par ailleurs aux metadata, ces petites informations incluses dans le FLV. Un encodeur inconnu peut ne pas les inclure, perdant ainsi des informations de durée, de débit etc… c’est pour cela que sont apparus des outils comme celui de Buraks : FLVMI. Sans metadata, oublions le streaming et la navigation efficace dans la vidéo.

Débit d’encodage et bande passante ?
La bonne question^ Cela dépend aussi de votre projet, mais il faut savoir qu’une vidéo très « standard » encodée à 550/600kbps ne gagnera pas forcément beaucoup en qualité si elle passe à 800kbps, toutefois si vous avez du traffic sur cette vidéo, cela représente une grosse montée en charge au niveau de la bande passante : 1/4. Et oui. Libre à vous de monter à 1500kb/s ou de faire de la HD si le coeur vous en dit mais il faut éviter que l’internaute n’attende trop le chargement…. ou que la plateforme ne supporte pas la charge.

Adobe a mis en ligne il y a quelques mois une calculette pour le débit optimal si jamais vous n’êtes pas sûr de vous ainsi qu’un autre article sur la taille recommandée que l’on peut utiliser pour étirer la vidéo. (Encoder en 320×240 mais on peut la visualiser avec une règle simple de multiples en 464×348) (septembre 2007 quand même, mais c’est un bon référent. Pour info, c’est ce que font Youtube et Dailymotion.)

Dernière chose : l’espace disque sur les serveurs ne coûte rien aujourd’hui. Par contre, la bande passante est une autre paire de manche. Think about it.

Paramètres d’encodage : CBR, VBR, FPS…
Il existe deux techniques d’encodage :
- Le CBR (Constant Bitrate Rate) et le VBR (Variable Bitrate Rate). En gros, le CBR diffuse en continu par exemple 500 kb à la seconde de donnée tandis que le VBR va analyser la vidéo pour réduire le débit lorsque l’image n’a pas de mouvement et remonter plus fortement lorsque l’image bouge beaucoup. Cette fourchette haut et bas est bien sûr paramétrable et elle permet d’optimiser énormément la qualité de la vidéo.

Pour le VBR, il y a l’analyse à la volée avec un 1-pass et l’analyse plus fine avec le 2-pass, plus longue à encoder. Un VBR 2-pass est préférable, car l’autre provoque des effets hilarants dans certains cas de compression dès que la vidéo entre en mouvement.

On peut jouer en fonction de la nature de la vidéo sur les FPS (Frame Per Second). Cas beaucoup plus rare, cela peut être utilisé lors de fonds animés plein écran en vidéo, cela marche bien, mais c’est vraiment occasionnel. Le risque est d’obtenir une vidéo saccadée si l’on tombe en-dessous des 25 images par seconde. (standard en Europe). Un 60 FPS avec de la HD donne une superbe fluidité à l’image mais… disons que c’est consommateur en bande passante… (euphémisme!)

Keyframe
Je fais court : une keyframe est l’image de référence à partir de laquelle la vidéo ensuite va rajouter ce qui a changé : mouvement, déplacement etc… Rajouter des keyframe va alourdir la vidéo, en enlever peut provoquer (notamment pour le streaming) des effets indésirables (de lapin bien sûr) dans la navigation.

Le son ?
Le poids du son doit s’ajouter à la vidéo bien sûr et il faut faire attention à la nature de la bande son. Si vous avez de la musique complexe, vous pouvez passer jusqu’à du 160 kbps en stéréo, mais pour de la voix, en fonction de sa nature, vous pouvez descendre à du mono, 64kbps et même moins, jusqu’à cibler un 11khz de fréquence d’échantillonage. (Cela s’entends dans tous les cas à l’oreille).

The end
Il existe d’autres choses à prendre en compte plus poussée comme la taille finale de l’export, le 4:3 et le 16/9ème, les keyframes, le désentrelacement, les filtres mais en laissant les paramètres par défaut, ca passe bien le plus souvent… et le but ici était d’arriver à s’y retrouver dans les différents formats, les basics quoi.

So…. la conclusion est : sauf si vous avez le malheur de devoir cibler flash 6 ou 7, le Sorenson H263 est vraiment mort : lourd, de mauvaise qualité, vieux. Même si l’on peut faire de très bons encodages avec, j’ai envie de dire : Oubliez-le.
;)

J’ai fait ce guide rapidement, mais si vous avez repéré une erreur, comme d’habitube, faites signe ^

Note : l’architecture la plus courante est découpée en 3 zones : un front php pour afficher les pages webs et le player vidéo, une routine serveur qui encode les vidéos, et une dernière qui héberge les vidéos (en streaming, download progressif, ou bien streaming php). Chacune de ces zones peut être sur le même serveur pour les plus petits besoins ou bien séparé (à chacun sa tâche), voire offrir des architectures beaucoup, beaucoup plus complexes, utilisant des load balancer ou des CDN par exemple de type Akamai, level3 ou autre… pour les gros budgets.

Construire tout soi-même
La solution la plus courante est le couple php – ffmpg ou mencoder (pour l’encodage) notamment, avec parfois un streaming offert par un Red5, ce magnifique concurrent open source d’un Flash Media Serveur coûteux. Les encodeurs gratuits sont complexes à configurer mais ils sont toujours moins coûteux qu’un turbine (au hasard).

Côté player vidéo ? Je crois que le player de Joering fait l’unanimité sur le web, même si refaire entièrement un player vidéo n’est pas si compliqué…

Des solutions open source toute faites.

Trois solutions open source :
- PHPMotion : Celle qui semble la plus simple classique techniquement parlant.

- Pandastream : Utilise pleinement les webservices d’Amazon.

- Kaltura avec un superbe éditeur en ligne.

Le choix reste dans le déploiement technique : linux bien souvent, php ou ruby on rails, et quelle architecture, avec quel dialogue vers quelle plateforme, avec quel système d’hébergement (interne ou externalisé)… etc. A noter qu’il existe aussi des solutions payantes similaires mais honnêtement, il y en a pas mal. Mais maintenant, vous savez que cela existe et si vous en connaissez d’autres, n’hésitez pas.

Je me lance, car la question taraude pas mal de gens et je ne trouve définitivement pas d’articles qui répondent concrètement à celle-ci. Ce graphique est une interprétation personnelle aussi bien qu’elle tente de rester objective, à partir de tous les exemples que j’ai pu observer. (note : c’est bien de la 3D temps réel). Quelques explications ci-dessous, même si elle reste volontairement assez sommaire, (il y aurait trop de choses à en dire) :

Flash
Limite : La 3D dans flash 10 en natif va débloquer pas mal de choses et optimiser les rendus actuellement un peu trop lourds. Toute la question est de savoir si la visualisation d’objets sera facilement gérable. J’en suis convaincu, mais je peux me tromper…

Flash peut créer à terme un certain darwinisme de l’évolution des solutions 3D : si je peux le faire en flash, cela ne me sert à rien de le faire avec un plugin… c’est plus contraignant. Nivellement par le haut en placant la barre à un minimum technologique… pour l’instant assez bas.

Java
Temps d’installation : Si le Java est installé sur un grand nombre de postes, le démarrage du plugin prend autant de temps que d’installer et de lancer un Unity…

Notes : Sans doute la meilleur solution pour afficher des objets, même si les limites pour gérer des scènes plus complexes et multiplier les interactions existent bel et bien. Les performances chutent ‘souvent’ lors de la gestion de scènes plus complexes. Et mine de rien, ce n’est pas tout à fait de la 3D sans plugin, quoi qu’on en dise ^ Les exemples d’univers virtuels en Java sont plutôt hors navigateur…

Virtools, Unity et plugins autres
Installation : les deux premiers cités ont un temps et une facilité d’installation vraiment performante. Mais totalement absent des postes chez les utilisateurs.

Notes : Outils trop puissants pour juste de l’affichage d’objets, ils font beaucoup plus que cela. Ces plugins permettent de gérer des scènes similaires à des jeux vidéos, ou bien certains sont dédiés à des environnements 3D comme du travail collaboratif par exemple…

Shockwave
Une installation qui fait encore peur mais bien reconnu et installé sur de nombreuses machines. Le roi historique des jeux en 3D, alors qu’Adobe a tendance à le laisser un peu de côté…

Et le Vrml ou x3D alors ?
Je ne l’ai pas inclus… mon avis porte à croire que c’est un usage qui restera minoritaire encore longtemps, même si les outils étaient intéressants à une époque, voire même gratuits. Ils ont raté le virage du ‘standard’ il y a bien longtemps.

Rien ne vous convient ?
Il reste encore la vidéo interactive, qui reste à l’heure actuelle et pour certains usages un magnifique outil.

D’accord / pas d’accord, la discussion reste ouverte, bien sûr…

En préparant conférences, démos et salon en ce moment, j’ai compilé en vidéo 6 mois de sorties de sites utilisant la 3D dans flash. Là où les sites utilisant un plugin pour afficher de la 3D sortent au compte-goutte, j’ai du faire un tri dans près de 140 urls pour me limiter à 10 minutes dans ceux conçus en flash. Papervision, away3D ou autre, quelle que soit la technique utilisée, c’est le résultat qui importe vraiment. Une sélection donc qui présage de bonnes choses avec flash 10, lorsque l’on voit tout ce qui a pu être réalisé en 6 mois. (sauf un seul exemple antérieur a priori.)

La liste des urls que j’avais faite est disponible en cliquant sur ‘lire la suite’

La vidéo est aussi téléchargeable en mp4. (139Mo – clic droit enregistrer sous)

Tip : pas de musique, je vous laisse lancer un deezer ou votre musique favorite par dessus pour y mettre ce que vous voulez. Certaines vidéos saccadent un peu, la capture n’est pas facile lorsque les sites utilisent encore beaucoup de ressources processeur.

Papervision Away & co
———————————–

http://theovenreinvented.com/

http://www.colourlikenoother.com/

http://www.redbull.com/flightlab/

http://www.formapartedelahistoria.org/

http://www.the-neighbourhood.com/

http://www.floorplanner.com/

http://www.audi.co.uk/RS6

http://www.rhythmoflines.co.uk/

http://puig01.simplerezo.net/blackxs/

http://www.canon-europe.com/eos400d

http://www.hbovoyeur.com/

http://www.nikeacg.com/

http://papercritters.com/

http://www.absolut.com/iaaw

http://www.truthinengineering.com/

http://www.mediapartners.nl/

http://benjaminkahle.com/

http://www.breakthedrought.com.au/

http://www.bbc.co.uk/blogs/radiolabs/2008/01/bbc_podcasts_browser_prototype.shtml

http://www.conocimientovirtual.com/

http://www.nshispeedontdekhetzelf.nl/

http://www.officinanessuno.com/

http://www.fabiolana.com/

http://www.documentshowa.jp/

http://www.rubenpapian.com/

http://www.massivecube.com/

http://www.vacuumsucks.com/

http://www.frederikdelmotte.be/

http://martincollett.com/flash/papervision/c4news/C4News.html

http://www.andco.com/

http://www.nike.com.au/thearmoury

http://www.blastradius.com/

http://www.whitevoid.com/application

http://www.mysk8land.com/

http://adn.blam.be/papervision/

http://www.varywell.com/

http://pv3d.eventbrite.com/

papervision3d.org

http://www.markfennell.com/flash/pool/

http://mrdoob.com/

http://www.nshispeedontdekhetzelf.nl/

http://spil.kathart.dk/stevenote/index.php

http://www.ludoescrime.com/

http://www.carlosulloa.com/2008/

http://www.nitrogroup.com/

http://nike.com/jumpman23/m4/

http://www.audi.de/a4

http://www.slopester.com/cv/battlestar/

http://bullying.co.uk/poster

http://www.komodomedia.co.uk/

http://www.eightinteractive.com/

http://dogside.com/

http://johndyer.name/post/2007/10/Size-Comparison-in-Papervision3D.aspx

http://www.cuentatuimposible.com/feliz2008

http://www.dandelion-photography.com/

http://www.orange8.com/variete/

http://redbulletin.hi-res.net/index.html

http://www.hushpuppies-shoesfit.co.uk/

http://www.edgy.com.br/

http://www.grupofiger.com.br/

http://bigbert.vfs.com/~dd09tyler/wp-content/themes/dd09tyler/flash/Audio%

20Experiments/beta/Final%20Package/VisualSound3.html

http://www.pioneer.nl/nl/flash/products/kuro2007/experience.html

http://tyleregeto.com/flash/deploy/paper.html

http://www.egonmagazine.com/

http://www.rossino.it/

http://www.elequipoquenecesitas.com/develacion1.html

http://netageadv.it/

http://www.fuzz.com/fan/adampasz/mixtapes/1da1ee229033daf5

http://www.verizonwireless.com/next

http://www.c-for-yourself.in.th/parties/gameindex.php?lang=en

http://www.pillandpillow.com/growAXmasTree/

http://www.ing-renaultf1.com/en/

http://www.sprintenterprise.com/burnandbrag/

http://www.underunder.com/store/

http://www.3dgeostats.com/

http://www.creativesunlimited.com/

http://leapday.glg.com/

http://www.flowerbyyou.com/

https://www3.nationalgeographic.com/genographic/globe.html#

http://www.mycitysoul.com/

http://www.shinobishoecorp.com/b/assets/globe/

http://www.dasai.es/.html

http://next.yahoo.net/download/newsglobe/index.html

http://www.webgamesarefun.com/spacehockey/

http://www.ecsw.pl/

http://www.cleoag.ru/labs/flex/parkseasons/

http://www.infrared5.com/ir5/splash/main.html

http://www.emlab.pl/experience/index_pl.html

http://www.nike.com.au/thearmoury/

http://web-director.jp/

http://www.tkaap.com/galaxy/

http://www.flashsandy.org/blog/new-sandycast3d-demos-with-animated-model-and-3d-sound.html

http://blog.r3c7.net/wp-content/uploads/j_traditional_color/j_traditional_color25.swf

http://www.newaccord.com.au/

http://www.truthinengineering.com/super-bowl/home.html

http://www.100cheergirl.jp/

http://www.milknosugar.co.uk/

http://tree3d.zerofractal.com/Live_Example.html

http://www.flowerbyyou.com/home.php

http://www.tbwa-compact.com/

http://84.ufc.com/

http://www.selftitled.ca/

http://www.closier.nl/playground/greenplanet.html

http://away3d.com/wp-content/uploads/2008/03/bitmaprender1.png

http://www.discovery.com/discoveryearthlive

http://www.newgrounds.com/portal/view/427278

http://www.empressor.com/

http://www.closier.nl/playground/temple.html

http://www.fifastreet3.com/

http://www.buildyouriq.com/

http://dekort3d.todesign.pl/

http://www.450park.com/map.php?startNode=1000

http://www.closier.nl/playground/extrude1.html

http://www.ecodazoo.com/

http://www.bestiario.org/research/tedsphere/

http://www.thecoronabeach.com/

http://www.myfiatspace.fr/accueil.html

http://www.earthbrowser.com/

http://www.smallworlds.com

http://www.playsmart.jp/index.html

http://www.beestudio.pl/beegame/

http://www.uniqlo.com/try/

http://storage.elektroncek.eu/oskar/airship/pv009.html

http://www.karimzariffa.com/

http://www.literaturdoener.de/

http://blog.papervision3d.org/2008/05/14/coca-cola-brasil-who-was-better/

http://blog.papervision3d.org/2008/05/14/tag-galaxy/

http://www.brinkdieckmann.de/

http://yasai-seikatsu.jp/index.html

http://www.typesql.com/

http://www.msnbc.msn.com/id/24207533/

http://www.live2d.jp/swf_2/

http://bougie.amnesty.fr/site.php

Alternativa
————————————————

http://blog.alternativaplatform.com/ru/files/2008/04/bunker.swf

http://blog.alternativaplatform.com/ru/files/2008/04/temple.swf

Je parlais du moteur de rendu Unity dernièrement. C’est un moteur à la qualité de rendu saisissant qui permet de développer des applications aussi bien sur le web, que sur le bureau. Il a le vent en poupe puisque Unity pourra porter des applications 3D sur Iphone.

Rajout : dernier jeu en date, une course endiablée de voiture sur shockwave. Un jeu que l’on pourrait désormais retrouver porté sur Iphone. Top.

En parlant de 3D sur le web, je répare une grande injustice en listant ici les différents moteurs 3D en flash que j’ai pu croiser, puisque je parle souvent de Papervision et peu des autres. Tous n’en sont pas au même stade de développement bien sur et le code source des deux derniers n’est pas disponible pour l’instant. Ces librairies sont bien sûr sans compter flash 10 qui nous réserve des surprises en terme de rendu et d’accélération matérielle (on l’espère tous!), poussé par la qualité de rendu d’un Silverlight qui va de plus en plus monter en puissance.

Papervision3D : on ne le présente plus.^

Away3D : autre librairie 3D.

Sandy : la librairie 3D francaise qui a de bon atouts dans sa manche.

Flash MX 2004 3D Engine

FFilmation : Moteur de 3D isométrique ciblant plus les jeux. Sans doute la meilleure solution pour ce type d’application.

Rajout : Five3D pour la 3D en vectoriel

Rajout : We3D, peu de docs et peu d’infos mais il existe et marche bel et bien !

Alternativagame : plateforme de développement ambitieuse de 3D isométrique. Pour les jeux également.

Zenbullets isometric : 3D isométrique, embryon de moteur en développement.

J’en ai oublié ?

Avatar Reality commence à présenter son univers virtuel qui doit sortir vers le milieu d’année en beta : il se nomme Blue Mars et quelqlues captures d’écran sont disponibles. Blue Mars n’aura ni monstres à tuer ni casinos mais plusieurs activités comme cette capture de golf sur le net. La cible : le casual gamer. L’univers utilise le moteur cryengine2 qui est en quelque sorte la RollsRoyce du moteur3D pour les jeux, aux côtés du moteur d’Unreal. Le contenu de cet univers sera ouvert aux développeurs de jeu ou à des professionnels qui seront en contrat avec le studio. Rien en leur empêchera de contacter des annonceurs pour créer du contenu dans cet univers. Ils visent 1 millions d’utilisateurs en 2010.

TheMall.Tv est une sorte de gigantesque centre commercial virtuel où les marques pourront exposer leurs produits numériquement pour y faire leurs achats. Ils n’attendent pas moins de 40 millions d’utilisateurs à terme répartis dans 20 centres commerciaux virtuels en 17 langues. Sortie été 2008 aussi.

Cafe.com est univers virtuel où l’on peut jouer à toutes sortes de casual games : (Via JacquesFroissant)

Projetons-nous un peu dans l’avenir

Réseau sociaux, advergames, mondes virtuels, e-commerce… et si le prochain web n’était pas si lointain que cela ? Il y a une convergence vers l’environnement virtuel de plusieurs domaines : on vise des univers de plus en plus beaux, des typologies de public de plus en plus large, avec un business-model qui semble déjà bien sûr de lui, et des activités qui dépassent complètement les lignes directrices du jeu vidéo traditionnel.

Des univers virtuels pour tout type de public à l’accès gratuit vont permettre de faire du shopping, du vrai shopping, à grande échelle. Chaque avatar pourra disposer de son propre appartement virtuel et inviter ses amis pour dialoguer, échanger, se rencontrer. Les activités disponibles pour se distraire seront développées dans le jeu et financées par des annonceurs. On peut supposer que le futur de l’advergaming tel qu’on le connait aujourd’hui est justement le développement d’activités mises en place gratuitement dans un univers virtuel, en échange d’un logo, de la même manière que de grandes marques sponsorisent des événements sportifs dans la réalité (pensez à l’athlétisme, au football, aux régates en bateaux…), mais tout cela, mélangé dans le même univers ! (ou passant de l’un à l’autre de manière la plus transparente possible). Cela peut créer une cohérence forte en se calant sur les diverses activités quotidiennes : entre le travail, le loisir, l’achat en ligne, voir des amis, aménager sa maison… Allons-nous arriver à un monde parallèle virtuel/réel non plus seulement géographique comme un meet-me mais aussi basé sur l’existence de l’internaute ?

Quelques liens :
Blue Mars :
http://starbulletin.com/2007/11/23/business/story01.html
http://gigaom.com/2008/02/19/blue-mars-second-life-with-pro-level-content/
TheMall.tv
http://www.atelier.fr/e-mar…l-organise-commerce-internet-36067-.html

Qu’est-ce que serait le web3D ? Pour Wikipedia, « Le Web3d correspondait initialement au concept d’un web totalement en 3D, des hyperliens reliants les contenants entre eux. Par extension, le terme désigne aujourd’hui tous les contenus en 3d interactive qui sont intégrés à des pages html, et que l’on peut visualiser par l’intermédiaire de son navigateur web. Soit : « la 3D sur le Web ». Les navigateurs requièrent généralement l’installation d’un plug-in pour afficher ce type de contenus.« .

Progressant depuis plus de 10 ans avec des technologies tout à fait hétéroclites, on voit pointer à l’horizon ce qui pourrait être dans un futur proche ou lointain, un ersatz de véritable web3D : interconnecté, interopérable, portable, léger, et aussi simple d’utilisation qu’un site internet, accessible auprès du grand public en somme. Rappellons-le, le niveau moyen d’un internaute en terme de nouvelle technologie n’est pas de loin aussi élevé que l’on pourrait le penser. La technologie doit rester facile d’utilisation et accessible. A la frontière entre les Serious Games, le jeux vidéo et les simulations en temps réelles vieilles de 10 ans comme le VRML, le web 3D – appellation tout aussi floue qu’incertaine – touche à tous ces domaines sans pour autant les remplacer forcément, tout restant à définir.

Je ne ferais pas rentrer l’aspect 3D rich media de certains sites comme le center parcs ou michelin, puisque je parle ici de véritable 3D calculée en temps réel et non précalculée puis retranscrite en vidéo sur les sites webs en flash. L’évolution du haut-débit permet maintenant la création de tels sites mais le précalculé a des contraintes (linéarité, poids…) qui limitent à terme son utilisation.

Ce billet a aussi pour but de dépasser un peu les visions réalité augmentée, mondes miroirs, mondes virtuels, et d’approcher cela sous un autre angle/point de vue. Choix d’approche donc, mais aussi questionnement sur l’évolution de ces plateformes au long terme.

La 3D sous diverses technologies : problèmes et contraintes techniques

Commençons par séparer trois choses bien distinctes :

- le plugin multimedia dans le navigateur web de monsieur tout le monde
- le plugin dédié gérant uniquement la 3D
- l’application lourde (logiciel) qui permet d’afficher de la 3D, tout comme un jeu vidéo. (GoogleEarth, Second life, etc…)

Au-delà de la présence de plugins, plusieurs contraintes techniques sont de véritables défis pour afficher un véritable modèle en 3D sur une page web :

- la bande passante : même avec l’explosion du haut-débit, un meshe 3D qui prend 1 minute à charger est problématique.
- le framerate : afficher des objets complexes consomme beaucoup de ressource. Non seulement du côté du processeur, mais il faut aussi faire appel parfois aux capacités d’accélérations matérielles des cartes graphiques pour tenir un minimum de 25 fps, soit une image fluide par définition. Ce n’est pas si facile.
- A mettre en rapport avec le framerate : le rendu même du moteur, et sa capacité à gérer sans problèmes la lumière, la réflexion/réfraction, le placage de texture voire le bump mapping et diverses autres techniques (shading, FSAA, HDR…) qui donnent un rendu plus ou moins réaliste à la scène ou à l’objet.
- Un code trop complexe va à un moment ou à un autre freiner l’évolution du système, et la production d’exemples, ce qui reste quand même la meilleure preuve que cela marche.
- La possibilité d’importer des meshes 3D de plusieurs sources différentes (grand public et pro), et pas d’un seul format propriétaire.
- L’interaction possible de certains éléments du décor. (comme l’ouverture de placard par exemple lors d’une reconstitution de salle de bains ou de cuisine.)

La 3D dans le navigateur web

La 3D dans le navigateur internet pour le grand public, c’est possible depuis cette année en flash grâce à des librairies 3D. Le plugin concurrent de flash de Microsoft sur le terrain des RIA/RDA, Silverlight, est arrivé depuis quelques mois (exemple avec les flux rss par ici). Il ne lui manque qu’une librairie similaire à celles utilisées dans flash pour y inclure de la 3D. Si Silverlight ne prend pas pour l’instant l’accélération graphique, flash est lui aussi dénué de vraie prise en charge de la 3D, il faudra attendre la version 10 – et sans doute la 11 – du Flash Player d’Adobe pour espérer voir un tel moteur 3D. Le flash player à l’heure actuelle est aussi dénué d’accélération matérielle (aucune prise en charge des capacités de la carte graphique, c’est le processeur qui calcule tout). Nul doute qu’Adobe ne laissera pas ce créneau incontournable à Microsoft, mais c’est pour eux un chantier énorme. Voir ci-dessous la preview du flash player 10 en terme de gestion 3D :

[youtube]ympeCv8lLmw[/youtube]

Pourtant, des initiatives de développeurs ont décidé de ne pas attendre Adobe. Des projets open source comme Papervision – librairies de rendu 3D – ont été largement adoptés par les créatifs pour présenter leurs projets marketing. De très bons exemples sont sortis ces derniers mois : personnalisation de produits en temps réel, immersion dans un univers de jeu brandé, nouveaux effets de perspective interactifs… Cependant, nous en sommes encore loin d’un remplacement des pages html classiques. Ce que permet Papervision n’est autre que de pousser des petits éléments 3D pour créer des objets, jeux ainsi que des systèmes interactifs particuliers. Ils demeurent quand même encore assez simples, par rapport à ce que de vrais plugins 3d sont capables de réaliser, en terme de capacité de rendu et d’interaction (Pour l’instant…). Et par rapport à des clients lourds, la comparaison ne se pose même pas…

Il existe d’autres technologies, pourtant en développement depuis de nombreuses années. On peut parler du VRML , ou du Java3D, qui proposent une solution intéressante. Mais voilà, si le VRML (vous vous souvenez du Cosmo Player?) a vu ses heures de gloire dans les années 1997 à 2000, il a été abandonné petit à petit. Dans les deux cas du VRML ou JAVA3D, il faut ou bien installer un plugin ou bien Java. Sur ce point, c’est Java qui gagne, et pourtant, il n’est jamais parvenu à être majoritaire sur le web. Après le VRML, Le X3D, a tenté de revendiquer son statut de standard. Sans vraiment y parvenir non plus. L’autre technologie, reste le Shockwave, de Adobe. (Macromedia à l’époque), qui lui aussi a gagné un peu de terrain un temps, puis a finalement reculé au profit de son cousin, le flash. (D’ailleurs, Director ne serait-il pas sur la pente de la fin de vie ?)

Pour les autres technos, c’est un véritable brouhaha de plugins et de technologies (propriétaires ou non) aussi différents les uns des autres (la liste est incomplète et disparate) :

- Virtools
- Quest 3D
- Wirefusion, basé sur du Java
- scenecaster, qui a fait récemment parler de lui avec son application sur facebook.

SceneCaster

- Stonetrip, créations de jeux et applications multimedia.
- Westimages, qui utilise le Java (Java3D ?), avec de bonnes scènes et interactions sur portes et tiroirs…

Westimages

Exemple à base de Java, pris sur internet3d.fr

Enervant, n’est-ce pas ?

Côté carte interactive, ca se bouscule entre trois acteurs :
- TerraExplorer, utilisé par le Geoportail de l’iGN
- VirtualEarth de Microsoft
- Sans oublier GoogleEarth et son sketchup.

Ils proposent tous au travers d’un plugin le support d’une scène 3D complète ou partielle : pièces, objets, avec réflexions de matières et lumière… avec une fidélité et une interactivité plus ou moins importantes selon le contexte d’utilisation. Le problème bloquant reste l’installation nécessaire de plugins. Toutefois, ces applications peuvent être utilisées pour des usages bien ciblés en entreprise dans le cadre de Serious Games : apprentissage, formation, simulation…

Toutes ces technologies peinent à se mettre d’accord entre elles : il manque profondément des normes, des règles, et des standards pour uniformiser le parc des technologies développées au fil des ans, au risque de voir de vieux acteurs dans le domaine se faire doubler par des mastodontes du web, qui bénéficient d’une adoption massive par le grand public. Surtout que certaines technologies sont propriétaires (et sous licence, voire pour certains utilisant des midlleware) tandis que d’autres utilisent des projets open sources, et d’autres encore se veulent être un standard sans être véritablement adoptés par la majorité.

Je résumerais l’adoption de ces plugins par un petit graphique fort simple. En gros, qui cela intéresse d’installer un plugin 3D à usage unique qui va ralentir le navigateur internet pour le restant de ses jours (ou presque, à moins de le désinstaller) ?

La solution passerait peut être donc par trois axes :

- Etendre les fonctionnalités des plugins courants (Flash / Silverlight) à une prise en charge de la 3D et il y a du chemin à faire pour y parvenir….

- Trouver un plugin unique, qui prendrait en charge toutes les applications en 3D. (C’est ce que tente de faire IBM et Pelican Crossing avec son InDuality).

- On peut espérer qu’une technologie de visualiseur 3D finisse par gagner, aussi invraisemblable que cela puisse paraître. ( En premier, virtools ?)

InDuality

La 3D dans le web ou le web dans la 3D ?

Ces derniers exemples mettent en évidence trois tendances sur l’évolution de la 3D et de sa position avec les logiciels, clients, plugins et environnements :

- Des pages html dites ‘classiques’ qui incorporent des éléments 3D (scènes, objets, systèmes d’interactions et effets d’interfaces en 3D). On devine évidemment les possibilités en terme de vente en ligne, d’animations et d’interfaces riches.

- Des logiciels d’environnements virtuels (collaboratifs, e-learning…) qui affichent une page web. (c’est le cas de logiciels comme Tixeo, i-maginer, blink3D de pelicancrossing ou le célèbre croquet). Ubrowser propose de manière très simple la basique représentation d’une navigation dans un environnement 3D. Le véritable apport reste à prouver, isolé des autres applications.

- Une séparation d’usage entre la 3D et le web, qui part du principe que ce qui se passe sur le web ne peut pas forcément être remplacé par la 3D, et inversement. Chacun dans son coin, la 3D trouve son rôle dans des systèmes d’interactions riches, et le web aussi, parce que dans certains cas, la 3D n’apporte rien, et la rapidité/lisibilité du contenu est de mise. (Prenons l’exemple d’univers virtuels relevant plus du social games, où l’on va pouvoir afficher sur le site web un ensemble d’informations en rapport avec la vie de son avatar, dédié donc plus à la gestion de son ‘double’ virtuel, tandis que l’univers étant plus destiné à la vie de son avatar.) Le travail est plutôt du côté de la bascule la plus fine et rapide possible entre la 3D et le web ‘traditionnel’.

Portabilité et interopérabilité
Les univers virtuels, aussi nombreux puissent-ils être, restaient jusque là isolés dans ‘leur monde’, tant au niveau technique que social. Les utilisateurs se cachaient derrière des avatars virtuels, ceci leur permettant de garantir un anonymat virtuel. Des entreprises comme Linden Lab, éditeur de Second Life, ou Hipihi, le clone de SL en Chine, ou même IBM, revendiquent une recherche croissante vers une interropérabilité entre les univers. L’objectif est de repousser les barrières physiques du virtuel, en favorisant le dialogue entre plusieurs plateformes, d’univers virtuels ou non.

En parallèle à cette interopérabilité, certains projets s’orientent fortement vers une portabilité d’un univers sur d’autres plateformes : ainsi, NTTDocomo et Sun ont annoncé développer une interface qui permettrait d’accéder à Second Life sur mobile. Hipihi a de son côté annoncé la même chose lorsque la version bêta de l’univers est sortie. Nokia s’est même déclaré intéressé pour développer un univers virtuel sur mobile. Rappellons qu’au Japon, il existe déjà Naviblog, une petite application qui propose un univers virtuel avec un système de géolocalisation des avatars dans le virtuel/réel, permettant de déposer des remarques sur tel ou tel magasin/restaurant. D’ailleurs, il est d’un intérêt certain pour les mobiles de s’intéresser à la 3D.

Au-delà du mobile, d’autres projets connectent le navigateur internet avec des univers virtuels. Interaction entre le web, des bases de données, le mobile, des bornes interactives (pourquoi pas…)… aussi bien en entrée qu’en sortie. Les deux sens sont tous deux très importants.

Convergence des technologies, Absorption des logiciels sur d’autres supports
Quelle importance peut prendre un navigateur de type web3D avec son environnement ? Intéropérable avec la plupart des systèmes d’univers virtuels qui dialoguent eux-mêmes entre eux (un logiciel de messagerie inter-univers virtuel par exemple ? un système monétaire inter-univers virtuel ?), certaines applications en logiciel lourd dévelopées isolément sont destinés à disparaître avec le temps : il y a une absorption d’une application dans une autre comme l’a fait le mobile ces dernières années (et plus récemment avec l’Iphone) avec les fonctionnalités diverses (téléphone, réveil/heure, lecteur mp3/vidéo, etc…, support de widget pour flux rss et autres…), on peut alors parler de convergence. Si un univers virtuel n’est pas absorbé techniquement par une application de web3D fédératrice, il va dans tous les cas développer le maximum d’interactions entre le web classique, et ses autres plateformes : vers un site de réseau social virtuel, vers un site de vente en ligne, etc…

Allez, un petit graphique (j’aime pas faire des graphiques) pour illustrer le propos :

Cliquez dessus pour agrandir

(c’était la partie hypothétique au long terme)

Pour quels usages ?
Le web 3D peut-il dans un futur lointain remplacer internet actuel ? Difficile d’imaginer dans sa globalité quel serait l’apport d’un tel changement de technologie en terme d’usage et d’interaction. Nous en sommes encore loin. Soulignons aussi que la création d’un espace 3D n’est pas simple, même s’il est assisté : la création sous Second Life est un exemple extrêmement intéressant : le grand public pouvait accéder à la création d’un espace, dans les limites définies par Linden Lab, tout comme le web à ses débuts avec le html. D’un autre côté, la création 3D en flash ou autre plugin divers requiert des connaissances approfondies qui dépassent largement celles du grand public. Il y a une barrière entre utiliser et créer. Les premières pages web pouvaient être crées avec le bloc-notes à l’époque, aujourd’hui, il faut bien plus d’un bloc-notes pour créer une application 3D. Là n’est pas forcément la question. Il est passionnant de voir l’évolution des Serious Games progresser sur bon nombre de professions et ne trouvant pas seulement des applications dans le domaine industriel ou de simulation, mais aussi à des fins pédagogiques.

Je ne suis pas rentré volontairement dans les enjeux marketing, sociaux, ou business de la question du web3D (c’est déjà bien assez compliqué comme ca). Pour être honnête, je laisse cela à des gens beaucoup plus préoccupés par ces questions que moi. Et puis les événements et conférences sur le sujet ne manquent pas en ce moment.
;)

Adobe FlashLite, FlashCast, FlashHome ?

Flash Lite est le lecteur flash des navigateurs d’OS de bureau, mais porté sur mobile, à quelques différences près. La version 2 de Flash Lite est presque un équivalent de la version 7 du plugin web de navigateurs sur ordinateur, avec des fonctions en moins comme la prise en charge de la vidéo. Flash Lite est optimisé pour interagir avec l’interface d’un téléphone, et s’adapter en fonction de la taille de l’écran. L’avantage avancé bien souvent est la possibilité de développer une même animation et qu’elle reste compatible pour un parc large de téléphones.

Edit: je suis tombé sur cette excellente présentation de Flash Lite par Scott Janousek :

cliquez sur l’image pour voir la présentation.

Avec la sortie de la suite CS3, Adobe a sorti Device Central, un simulateur de téléphone assez étendu qui calcule les ressources prises par l’animation sur tel ou tel téléphone, le rendu, la consommation mémoire, la consommation de la batterie… Device Central peut mettre à jour la liste des profils de téléphone, ce qui facilite grandement les tests d’applications dessus. Flash Lite 2.1 a vu donc le jour. A noter que sur n’importe quel pack Adobe, le Device Central est fourni. Avec Flash Lite 3, on nous annonce des capacités étendues en terme de rich media, d’animations vectorielles… et de la vidéo en Flash Media Server (un service assez coûteux mine de rien…). On peut parier sur la forte utilisation de la vidéo, et puis de l’animation vectorielle grâce notamment à l’achat de la solution vectorielle dela société Actimagine, génies du codec vidéo pour mobile. L’inconnue reste la prise en charge ou non de la caméra vidéo pour en faire toutes sortes d’applications (vidéoconférences à deux/trois, jeux vidéo…). Flash Lite prend déjà en charge la fonction d’appareil photo (exemple avec magic wanda).

voir l’interface de Device Central CS3

Flash Home donne la capacité à Flash Lite de rendre le contenu dynamique et personnalisable. Il permet de personnaliser aux couleurs d’une marque par exemple totalement l’interface du téléphone, avec une synchronisation du contenu (des news par exemple) automatique et facilitée. Il y a même une fonctionnalité de push de contenu en rapport avec les sms/mms/appels recus. (une pub différente selon la provenance des appels par exemple ? wow…) Lorsque l’on connait le marché de la personnalisation du mobile avec des chiffres qui font tourner la tête, on se dit que Flash Home a un très fort potentiel pour une marque.

Flash Home

Flash Cast, propulsé par NTT Docomo au Japon, a dépassé en mars dernier les 10 millions d’abonnés avec leur service en ligne à base de Flash lite. (Le portail Mobage Town dépasse les 4 millions d’utilisateurs). (Un exemple intéressant au Japon : les japonais seront prévenus par un système de push des prochaines alertes de tremblement de terre. Recherche similaire d’alerte utilisateur chez Softbank). FlashCast va être parachuté en Amérique du Nord par l’intermédiaire de Verizon dans la deuxième moitié de l’année 2007.

Flash Cast

Pour différencier FlashCast de FlashHome, je dirais que FlashCast s’occupe de la synchronisation du contenu avec un fournisseur d’informations au travers de chaines, tandis que FlashHome permet plus une personnalisation en profondeur de l’UI du téléphone. Deux services complémentaires donc, toujours basés sur du Flash Lite, l’un sur l’habillage, l’autre sur l’apport de contenu.

Flash Home et Flash Cast

Pour voir ce que donne un UI de téléphone à base de flash avec beaucoup de travail dessus, voir la vidéo du très coûteux LG Prada :

Sinon, voir ici quelques vidéos d’UI de téléphones à base de Flash.

Concurrents
Les concurrents sont nombreux : Sun avec son JavaFx et déjà aujourd’hui Java, des dizaines d’entreprises ont déjà construit leur propre solution (bien souvent avec du Java d’ailleurs) de rich media (tricastmedia, WeComm, Streamezzo et bien d’autres…) avec une interface similaire à ce que peut faire du Flash, Microsoft avec son Silverlight mais uniquement sur Windows Mobile…

Silverlight sur mobile.

… et prochainement Adobe même qui a annoncé sortir Apollo pour mobile prochainement (quelle va être sa position dans le développement actuel de l’offre Adobe pour mobile ? mystère). Sans parler de la prise en charge de plus en plus grande de formats web sur les téléphones nouvelles génération et des recherches pour faire tourner des applications AJAX sur téléphone (nous n’y sommes pas encore mais quand même). D’autres supports comme les consoles portables (Archos, Iphone, Sony PSP, Nintendo DS), ont leur propre navigateur web (avec parfois la prise en charge du flash).

N’oublions pas non plus les constructeurs de téléphone, comme Motorola, qui veut développer leur propre système, appellé Motocast, réservé uniquement aux téléphone Motorola et directement concurrent d’un FlashCast. Cela ne leur empêche pas de créer en parallèle des téléphones dont l’UI est aussi basé sur Flash Lite. Bref, une belle une cacophonie de technologies.

Pourtant, deux technologies pour l’instant s’imposent sur mobile : en premier, le Java. Et vient ensuite le Flash Lite, quasiment uniquement au travers des appareils Nokia.

Il existe toutefois une différence en terme d’utilisation dans les acteurs qui créent du contenu sur mobile : les programmeurs qui veulent développer des outils évolués comme des widgets vont plutôt utiliser le Java, tandis qu’il existe une petite communauté pour Flash Lite, de designers et graphistes qui s’y intéressent fortement. (Des artistes Japonais ont trouvé sur Flash Lite un bon support d’expression graphique.)

En ce qui concerne les plateformes de consultation de contenu, elles se multilplient elles-aussi :
- les mobiles
- les lecteurs portables multimedia (Iphone, Archos, Sony PSP, Nintendo DS…)
- les smartphones, Pocket PC et PDA

Progression des usages, progression de flash lite ?

Aujourd’hui, de multiples usages émergent avec le téléphone mobile : de l’actu du web en flux rss, des photos, des vidéo (mobile et TV), de la musique, de la messagerie en direct, des jeux en 3D, des jeux ou des applications utilisant la caméra comme boussole…

Publicité pour vanter les mérites des jeux de bowling sur mobile, où figurent des têtes connues, notamment anna tsuchiya, actrice, chanteuse et mannequin… star au Japon.

.. la reconnaissance d’image (QRCode, MobileTag & co) pour des utilisations cross-media, pour consulter ses mails, pour payer notamment ses achats en ville, se repérer en ville grâce à une carte interactive, faire du m-learning… Je risque d’en oublier !

L’ensemble des services proposés par Adobe et au travers des autres technologies vont aussi contribuer à faire disparaitre progressivement les alertes SMS pour des pushs d’alertes ou d’actus au travers des portail tournant aussi bien offline (le métro?) que online (à quand une offre wap illimitée en France ?!). Evolution progressive des usages sans aucun doute.

Par rapport à tous ces usages, Flash Lite, principalement utilisé dans ses premières versions pour faire de beaux fonds d’écrans animés et des petits jeux, doit offrir à présent les possibilités (adaptées) offertes par son grand frère sur le web et devenir une référence en matière d’interactivité, de service pour les opérateurs et d’interface. Le choix d’Adobe de se tourner vers une solution en profondeur pour le mobile est intéressant. Il ne concerne pas que l’application, mais l’os même du téléphone, et un dialogue client/serveur. Maintenant le plus gros reste à faire : être embarqué par défaut sur tous les téléphones. Il y a fort à parier que le déployement de Flash Lite en Amérique du Nord avec Verizon aura des impacts sur le taux de pénétration du player chez les constructeurs. Pour ma part, je ne suis pas convaincu d’un impact direct de l’Iphone sur le flash, mais plutôt d’une évolution des usages qui, indirectement, forcément…. surtout qu’aux dernières nouvelles, l’Iphone ne supporte pas vraiment le flash. Peut être dans un prochain update de firmware ?

Le Flash Lite sur tous les téléphones ?

Les seuls qui semblent être concernés par Flash Lite est Nokia, qui commence à inclure dans ses updates de Firmware, les nouvelles version de Flash Lite. Les autres constructeurs tardent à l’intégrér sur leurs produits par défaut.

Pourquoi ce besoin indispensable d’être installé sur les téléphones ? Sans cela, un utilisateur lambda serait bien incapable de l’installer. Qui connait son modèle par coeur de téléphone – je dis bien son modèle exact – version de l’os, du firmware… De plus, Flash Lite était jusque là payant sur toutes les plateformes : 8 dollars. Quand même. S’il n’est pas fourni avec le téléphone, peu de chances que le grand public s’y intéresse.

Pourtant, d’après les gens d’Adobe lors d’une interview vue sur le journaldunet, « Flash est aujourd’hui largement présent sur les téléphones mobiles. Plus de 200 millions de terminaux sont aujourd’hui équipés de Flash Lite, et plus de 300 modèles de terminaux. ». Les modèles sont disponibles sur le site d’Adobe, certes. Maintenant, à part des petits jeux et des fonds d’écrans, on ne fait pas grand chose avec la version 1 de Flash Lite. Si l’on retire les version 1 de Flash Lite et les mobiles japonais équipés, il ne doit pas rester grand chose.

Quel est l’avantage pour un développeur du flash par rapport à une application Java ?
- Le coût de développement principalement. Une application Java doit être redéveloppée sur chaque modèle de téléphone. Une application flash peut passer aisément sur tout un parc de téléphones sans la moindre retouche.
- L’offre actuelle de la plateforme. Il manquait à Flash Lite un ensemble de services client/serveur qui permette de délivrer facilement du contenu et de le lire. Un lecteur ne suffit pas, il faut aussi une plateforme capable de créer le contenu, de le gérer et de le diffuser.

Handicap ?
- Sa très faible prise en charge par l’ensemble du parc des mobiles. Les constructeurs sont frileux à l’idée d’embarquer le flash sur leurs téléphones. Outre le coût d’un player flash, les opérateurs voient peut-être d’un mauvais oeil ce moyen d’approcher de consommer du contenu en dehors de leur propre portail wap (vendant des sonneries, fonds d’écrans, et diffusant des news/vidéos, avec un peu de pub…). C’est un marché énorme et cela se comprend que détourner le consommateur de ce trafic potentiel engendre la frilosité. D’autre part en France, rien ne presse tant que le parc des téléphones ne permet pas de prendre en charge la 3G, des fonctionnalités de visualisation de vidéos et un abonnement illimité au wap. (Sans compter que mine de rien, il reste pas mal de téléphones préhistoriques encore en circulation…)
- Je m’avance peut-être un peu en disant que le flash sur mobile semble ne concerner qu’un public trop restreint. Côté communauté, je croise rarement des forums spécialisés en Flash/Flex ouverts sur le sujet Flash Lite. (Exemple avec l’un des plus gros forums francais sur le flash.) C’est le néant, personne ne s’y intéresse à part quelques aficionados. Et ce n’est pas une recherche sous Google de ‘flash lite forum’ qui me conforte dans cette idée. Bon, à part celui-là, forcément.

Opportunités marketing ?
Je vois bien les portails wap des opérateurs en France être remplacés par une offre FlashCast d’abord, puis des téléphones co-brandés avec de grandes marques avec FlashHome. Le mélange des deux peut être fort intéressant. (Personnellement, je n’aimerais pas spécialement que l’on m’habille mon interface aux couleurs de Coca-cola ou d’Adidas avec les sonneries adéquats mais c’est une question de goût… certainement!). Toutefois, si cela peut faire baisser la facture de téléphone ou l’abonnement, pourquoi pas. Et c’est un marché potentiellement énorme chez les plus jeunes, friands de personnalisation et de marques, ainsi que de contenus riches : informations, réseaux d’amis, vidéos, télévision…

Voir ici un exemple de téléphone brandé McDo…

En bref
En 2006, certains prédisaient : « ce sera l’année du mobile et du Flash Lite », pareil en 2007. Je n’attends rien avant 2008/2009 voire 2010, le temps que les modèles de téléphones compatibles Flash Lite 3 nous parviennent, et que les usages du grand public évoluent. Flash Lite est mine de rien très jeune par rapport à son grand frère sur internet. Il faut pouvoir prouver aussi que les services soient assurés de réussite. Rien ne dit qu’en France, le service mis en place par NTT Docomo trouve une adhésion massive. 2010.. ce n’est pas très loin, mais au vu de l’avancée très rapide des concurrents sur le marché, Flash Lite ne risque-t-il pas d’être dépassé et d’arriver bien trop tard ? A moins qu’il soit condamné à n’être que second dans les technologies sur mobile…

Quelques chiffres sur Flash Lite traduits de visionmobile :
- 194% de progression de mobiles équipés Flash Lite entre 2005 et 2006
- prévision de 220 millions de mobiles équipés d’ici la fin de l’année 2006 et ils prévoient le milliard en 2010.
- Adobe a percu en 2006 0,20$ par mobile des constructeurs utilisant le Flash Lite.
- Au Japon, 40% des mobiles étaient équipés de Flash Lite en 2006, supportés par 4 opérateurs.
- Sur le service de NTT Docomo qui rassemble 10 millions d’utilisateurs, les utilisateurs dépensent en moyenne 5$ pour avoir accès à leurs chaines.
- Flash Lite 3 est prévu pour Noel 2007

(Utilisation personnelle qui peut être aussi un indicateur : utilisateur 1 journée d’un sudoku en flash sur mon téléphone, mais utilisateur régulier des widgets en Java permettant de consulter des flux rss ou ses mails (widsets, yahoo! go…). (ou de se repérer parfois dans Paris, oui, j’avoue, j’ai honte…))

Article orienté plutôt pour des graphistes flash.

Ayez une vision globale du projet
Sans doute un détail… garder toujours en tête : pourquoi je le fais en flash ? qu’est ce que cela m’apporte ? ai-je bien considéré tous les points positifs et négatifs de le faire dans cette techno là ? qu’est ce que cela implique ? Comment gérer les mises à jour et ajouts de contenu ? et par quelle techno (xml, php… ) ? Maitrisez en amont la conception.

Le flash, c’est des clips dans des clips, dans des clips dans des clips… mais attention à la structure globale du projet. Il faut préparer au moins dans sa tête ce que l’on veut faire afin de ne pas de retrouver bloqué dans son animation, et avoir une idée de l’arborescence des différents éléments qui vont s’animer et des éléments interactifs.

Toujours dans la structure globale du projet, ayez une vision de recul sur le poids total des éléments qui seront intégrés. Doit-on tout développer en un seul swf ou en plusieurs de manière à répartir le temps de chargement en plusieurs temps d’attente ? Tout dépend du poids total. Mais attendre qu’un flash de 5mo se charge, c’est ennuyeux à souhait.

Rendre son flash accessible.
ActiveContent, ou swfobject, utilisez-le ! Il permet de désactiver ce ‘cliquer sur cet activex pour interagir avec’ sous IE. Le swfobject permet en plus d’y insérer un contenu alternatif.
Utile aussi, le swfaddress permet d’avoir une url bien précise pour accéder à l’intérieur d’un flash.

Préparez vos fichiers.
Combien de fois ai-je fait des retours sous photoshop afin d’optimiser, de séparer en deux une seule image, de la recadrer… Il n’y a pas de sens interdit. Le bouton mise à jour dans la bibliothèque est le meilleur ami de l’homme.

Pensez aux outils disponibles dans flash… parfois, il est inutile de sortir un PNG transparent si l’on peut faire un masque pour moins de poids…

De la méthode
Dans le cas où quelqu’un reprendrait votre animation, pensez à nommer vos calques, et à classer par dossier en catégories vos calques. (J’ai mis des années à me résoudre à le faire, mais c’est bien pratique!)

Optimisez le flash !
Faire bien attention au poids total d’un flash est primordial. Il faut rester raisonnable, qu’il s’agisse d’une bannière ou d’un site. Vous aurez très certainement un jour à devoir prendre en compte une limite stricte de poids. On ne fait pas la même animation avec 45Ko et 55Ko. Travail de conception, où il faut prévoir et justifier la présence de chaque élément graphique pour ne pas franchir la barre fatidique du poids limite. Utilisez dans la bibliothèque au besoin l’optimisation des éléments fichiers par fichiers, à 10% près, on passe… ou pas.

Pas la peine de créer 10 symboles différents pour la même forme. Le movieClip est là pour vous faciliter la vie et alléger l’animation. Réutilisez au besoin la même forme… 10 fois !

Optimisez la puissance requise pour votre animation. J’en vois qui crée des animations consommant 80% du processeur, avec 30 objets gèrant de la transparence… ou un script mal placé qui fait une boucle infinie (c’est ma spécialité, ca, je l’adore^). Tout le monde n’a pas un CoreDuo 2… (enfin, une machine de course quoi…)

Attention à l’utilisation des composants ! Le poids d’une animation peut monter très vite…

Apprenez un peu d’actionscript.
Quelques notions d’actionscript ne peuvent faire de mal. Je vois parfois des graphistes flash qui ne savent pas ce qu’est un _root ou comment créer un bouton. C’est bien malheureux, le code n’est pas si compliqué que cela. Mais quelle liberté une fois que l’on connait ne serait-ce qu’une vingtaine d’expressions !! On s’affranchit de déranger un programmeur qui a autre chose à faire que du code ‘Playskool’, et on satisfait le client, plutôt que d’avoir un retour « le bouton ne marche pas ».

Et pourtant, il n’y a pas grand chose à retenir en AS1 :
stop();
play();
gotoAndPlay();, gotoAndStop();
bouton.onRelease = function (){ gnagnagna… }
getURL(« http://www.miaou », »_blank »);
loadMovie
fscommand(« quit »);

Autre intérêt pour les plus téméraires. Une connaissance plus large du code permet de concevoir des systèmes interactifs qui vont réellement être efficaces, et surprendre l’utilisateur dans le bon sens du terme. Lorsque le concept est graphiquement basé sur un système interactif exploitant des fonctions judicieuses, le résultat peut être suprenant. Mon plus bel exemple est certainement levitated.net. Pour ma part, je ne me suis jamais autant amusé dans flash depuis que j’ai mis les papattes dans le code.

Connaissez les capacités des versions de Flash.
Vous connaissez Flash 8 ? Vous adorez les effets de blur, et d’ombrage. Votre animation est terminée. Mais on vous demande un flash en version 6. Aie… A force de travailler sur des versions différentes de flash, j’ai pu connaitre les possibilités de chaque version, tant au niveau du code qu’au niveau de l’animation/graphique. C’est une expertise que je trouve importante, et cela évite les désagréments de conception en cours de route.

Maitrisez l’animation. Créez de la vie !
Flash est un logiciel d’animation. Ce n’est pas ImageReady pour faire du gif animé. Il faut bien retenir cela. Je vois passer quelques fois des bannières qui ne justifiaient en rien du flash. L’animation est un domaine fantastique, qui regorge de possibilités. Apprenez à maitriser la simulation de la physique, du poids des objets, de leurs accélérations, décélérations… Retournez voir les premiers travaux du début du siècle sur l’analyse du mouvement. Vous vous souvenez ? ce cheval qui court, en mouvements décomposés…

Faites bouger un personnage d’un point A à un point B. Si vous lui donnez la même vitesse de A à B, l’animation sera fade. C’est de la perte de temps d’avoir dessiné un personnage ! Par contre, si le personnage démarre lentement (un corps, c’est du poids à déplacer), pour arriver au point B avec une petite inertie, c’est tout de suite plus vivant.

Hommage à Onesque sur cette animation là !

Sans doute le plus important : si vous ne faites pas de dessin animé, oubliez ce f… 12 images par seconde ! C’est 25 images secondes une animation fluide, comme à la télé ! Certains codeurs montent le framerate, mais c’est pour des besoins plus spécifiques. (Tips : votre animation toute entière est un poil trop rapide ? baissez le fps, des fois, ca passe plutôt que de devoir refaire toute l’animation. Ruse pas terrible, mais ruse quand même.)

Pensez à tout ce que Flash peut faire d’autre
Flash peut faire des exports vidéos d’animation. La fonction marche plus ou moins bien, mais une fois passés les pièges à éviter, cela m’a déjà sauvé la vie lorsque je manquais de temps pour créer une animation rapidement en vidéo. (on peut même faire des gifs, mais là, honnêtement, je n’en ai jamais eu l’usage…)

Flash peut faire aussi des cd-roms. Dit comme ca, ce n’est pas très sexy, mais pouvoir emporter une présentation en .exe et être certain de n’avoir pas de problèmes de version de flash sur le poste utilisé pour la présentation, c’est important, ca rassure et ca évite les ennuis. (L’exe embarque un lecteur flash autonome, pas un plugin).

Derniers détails
- Faites du texte lisible, et pas flou ! J’ai parfois l’impression de devoir changer de lunettes tant certains textes sont illisibles. Il y a des ruses (faire du texte en png transparent), et des optimisations possibles pour cela. C’est du boulot, mais cela fait plus pro.

- Vous avez un temps de chargement un peu long ? Faites une barre de chargement… mais inventive ! Créez un petit jeu avec l’utilisateur de manière à ne pas l’ennuyer. Une animation très efficace graphiquement peut faire patienter beaucoup plus qu’une vulgaire barre de chargement avec un pourcentage. Cela vous évitera que la personne quitte le site inopinément.

- Tips pour la vidéo : je connais bon nombre de grandes entreprises qui blacklistent les vidéos en flash pour des raisons de bande passante. Soyez le premier à passer les firewall : renommez votre vidéo *.flv en *.vlf ou n’importe quoi d’autre qui n’existe pas. La vidéo sera quand même lue… et le firewall n’y verra que du feu :D

Pause anecdote : il y a quelques années, j’étais chez un client assez connu dans Paris, qui m’avait refusé un développement en flash alors que le sujet l’aurait mérité. Sa justification était sans appel : « pas de ca, on ne veut plus voir de flash chez nous. » L’explication venait d’un projet précédent qui s’était visiblement mal passé. Graphiquement déplorable, mal conçu, mal animé, il était bon à jeter…. pourtant, il aurait suffit de suivre la moitié des points évoqués ici…