Deux créations en France promouvant le patrimoine architectural de deux manières bien différentes :

- Visite virtuelle du grand palais à Paris en vidéo.

- Visite virtuelle de l’orangerie à Versailles. en 3D temps réel en virtools

Solution moins chère : les panoramiques, ca donne toujours aussi un très bon effet

Il n’est pas indispensable d’aller à l’autre bout du monde pour trouver de l’inspiration, pourtant, parfois, cela fait du bien de voir ce qu’il se passe sur d’autres sphères. Sélection de widgets amusants, ou innovants sur la sphère marketing japonaise. Les exemples cités peuvent être originaux ou juste distrayants et si j’ai le temps, je ferais un comparatif avec d’autres widgets des 4 coins du monde. Je vous invite à lire ou relire les billets suivants pour compléter votre lecture, qui cite quelques très bons exemples qui n’ont pas été repris ici :

- Un widget détonnant pour un jeu DS
- Un widget qui fait pousser des plantes sur votre site.
- Un widget en vidéo chez Uniqlo
- La campagne de Nike Jasari.

Pour les exemples suivants, je les ai classé par ordre d’intérêt, du plus original/technique au plus classique. Lire la suite pour voir les widgets sélectionnés.

Lire la suite

J’en parle souvent, les widgets web au Japon qui font la promotion d’un site ou d’un produit me fascinent toujours. Kunitori est un RPG de samourai sur DS (et pc?). A l’occasion de cette sortie au Japon, un petit widget web tout à fait original en deux phases est proposé aux internautes :
- Passez votre souris sur le samourai, et voyez votre souris coupée en deux par un sabre affuté.
- Deuxième étape : faites-vous découper deux fois, puis cliquez sur les torches : le samourai se met à crier “TIREZZZ !!” et votre blog se retrouve criblé de balles avant de tomber en morceaux. (voir la capture d’écran, et ce n’est pas la faute d’IE qui affiche mal mon css…) Autre scénario, il se retrouve noyé dans un ras de marée…

Vous trouverez le code d’insertion du script par ici. Pour voir le widget en action, cliquez sur lire la suite, il y a du son dessus, je ne tiens pas à vous perturber dès la page d’accueil.

Lire la suite

Cette application est un peu le Etsy de la musique : Getty Images vient de sortir Moodstream, une interface permettant à l’internaute de naviguer dans des contenus musicaux en définissant son humeur. S’ajoute à cela un fond animé en images et en vidéo issu de la base de données géante de Getty Images, plus ou moins synchronisé avec l’audio.

Plusieurs possibilités sont disponibles : un filtre triste, joyeux, calme, vivant, contemporain, nostalgique… Un autre onglet plus générale définit des ambiances : simple, rafraichissant, vivant… Cette sorte de jukebox permet de se créer une playlist, proposant d’acheter ensuite tous les medias diffusés.

Une manière plus sympathique que de parcourir un catalogue avec des titres qui ne nous disent rien, l’interface choisit d’afficher différemment son contenu en le mettant en valeur d’une bien belle façon.

France2.fr est en train d’expérimenter la diffusion des rencontres de Roland Garros en vidéo HD en direct en 720p, non pas en flash en H.264 ou en Silverlight mais avec un codec vidéo spécial MobiClip, propulsé par Actimagine. Un codec à installer, ce qui dans l’usage se rapproche d’un lecteur de VOD classique.

Alors, qu’a t il de particulier ce petit codec ? Je me suis livré à un rapide comparatif des codecs avec une vidéo sur la galerie d’Adobe, qui a exactement le même poids et la même résolution en 720p que l’une de celle disponible pour tester sur le site de france2. La seule différence c’est que l’une se lance dans le navigateur et l’autre dans un lecteur sur le bureau :

- Vidéo avec du mouvement, qui dure 45 secondes, et tourne à 25 images seconde. Elle me prend entre 45 et 55% du processeur.

- La vidéo de Roland Garros prends seulement 20 à 25% de mon processeur. Très bonne gestion des ressources et donc accessible aux plus petites configurations mais surtout, la vidéo dure 1m45 (2 fois plus longue pour le même poids) et tourne à 50 images par seconde. Meilleure perception de fluidité et de mouvement, même si 25 fps suffit à donner l’illusion au niveau de l’oeil d’une image fluide. Et la qualité d’image reste superbe.

Maintenant, la configuration minimale est impressionante :
Processeur : minimum de 500MHz pour les fichiers 25 images/s et 900Mhz pour les 50 images/s

500Mhz pour faire tourner de la HD avec une adsl classique … euh je ne sais pas si vous imaginez, mais, c’est assez énorme en terme de performance… Well done !

Pour la citroen C4 360, un commentaire agrémente la navigation. Je parlais récemment de l’intérêt du son dans des sites en flash : hormis la musique qui met dans l’ambiance, la voix complète totalement le visuel et tente de persuader comme un doux chant de sirène les atouts du produit. Le texte est ainsi réduit au strict minimum, ce qui laisse place à l’image. On remarquera une vision de la voiture à 360° à l’aide de vidéo, sur laquelle l’utilisateur a le contrôle.

Interface vidéo avec plusieurs modes de visualisation pour cette campagne participative de Samsung. Elle présente leur dernier téléphone portable, promouvant sa qualité d’enregistrement vidéo. Ce n’est pas seulement une mise dans l’espace de vidéo avec une gestion de la profondeur : la composition au fur et à mesure du clic rapproche les vidéos de manière à pouvoir passer rapidement d’une vidéo à l’autre. L’animation fait fonctionner tout cela très bien, je trouve. well done!

Deux sites amusants et très marketing que j’ai pu croiser aujourd’hui :

Official PSP présente la console portable de Sony. Une utilisation fine de la vidéo en flash, avec des robots animés attachants et amusants. Vaut le coup d’oeil, ne serait-ce que pour le travail d’animation !

Réconciliez vous avec la lessive (russe) ! Un advergame ultra-simple, il faut bien le dire, toutefois avec potentiel énorme : rattrapez avec le logo de la marque de lessive, les vêtements qui tombent du ciel. Méfiez-vous, il est addictif !

viZoo est une agence créant des dispositifs intégrant des hologrammes 3D pour des salons, des défilés, des vitrines de magasins. J’ai commencé à en voir il y a deux ans (notamment en Allemagne), mais rien d’étonnant car de tels usages sont destinés à se diversifier, outre les écrans tactiles, ou interactifs à base de tracking du mouvement.

Dans la vidéo ci-dessous, un hologramme de jeune femme essaye des vêtements du catalogue dans un magasin fermé la nuit. Cette création est particulièrement innovante (pas dans le fait qu’elle se déshabille hein..), elle anime une vitrine, accroche l’oeil du passant par le mouvement, la source de lumière produite et par une technologie originale qui relève d’un film de science fiction saisissant de réalisme :

Vous pouvez retrouver leurs autres travaux sur leur site. D’autres très bons exemples aussi disponibles sur Youtube ici.

Quel rapport avec le flash ? aucun mais bon..

Edit : pas tout à fait un hologramme dans cet exemple ! Sur leur site, il y a des démos de véritables hologrammes qui permettent de tourner physiquement autour d’objets en 3D, ce qui m’a un peu mis dans le doute ! Merci Pascal

Lire la suite

Le son dans flash s’est limité à ses débuts à des ambiances de musique-au-mètre de 10 secondes sur fond de techno et de sons si basiques / cliquants / forts que très vite, il a perdu de son potentiel, catalogué comme perturbant par les utilisateurs. Ajoutons à cela qu’un site web étant essentiellement visuel, à sa création, le son est considéré comme superflu, et coûteux. Et pourtant…

Sur le web, des détails techniques à prendre en compte
Un gros fossé entre le bureau et le chez soi :
- au bureau : bien des ordinateurs n’ont pas d’enceintes, ou ont le son coupé parce que l’open space ne permet pas une liberté sonore totale.
- à la maison : bien des utilisateurs ont leur ordinateur branché sur leur chaine et enceintes 5.1. Ecouter le vrombrissement d’un gros moteur de voiture sur un site marketing, c’est toujours attrayant. (Enfin, il parait que les “automobilophiles” en sont friands).

En définitive, le son peut être découpé en 3 domaines pour lesquels je prendrais des exemples récents qui m’ont marqués :
- la voix : la voix pour inciter à agir / La voix renforce une ambiance, et elle appuye un discours
- la musique : le renforcement / la rupture et le contraste / C’est la musique qui commande / L’appropriation d’une musique connue par une marque en campagne cross-media
- les bruitages et effets d’ambiance : Renforcer le réalisme des éléments graphiques / Le mode non synchronisé pour illustrer sans visuel.

La voix.
Quelques sites :
La voix pour inciter à agir

Un personnage incrusté dans un décor parle à l’internaute. Pas d’autre indication que le son, pas de sous-titre. Une relation directe qui attend une action de la part de l’utilisateur, et qui, comme dans une relation réelle, interpelle.

La voix renforce une ambiance, et elle appuye un discours.

Un exemple que je continue de trouver très fort. Ecoutez 10 minutes d’un témoignage de 6 Milliards d’Autres, du projet de Yann Arthus-Bertrand : écoutez la voix des interviewés, son timbre, sa force, ses hésitations, ses silences, ses tremblements… ses accents. Elle donne une force aux témoignages. Il y a dans la voix humaine une telle richesse dans les tonalités que je m’étonne qu’elle ne soit pas plus utilisée. (Le regard, les mouvements des lèvres, les thèmes évoqués et le cadrage dans cet exemple jouent également un rôle extrêmement important).

Testez avec ce site Japonais de AXE et écoutez simplement sans comprendre ce qui se dit : le timbre de la voix renforce cette impression de mystère que donne le visuel. Soulignons qu’il s’agit seulement d’un préchargement.

La musique.

Le renforcement

Un joli cochon rose, et peu d’illustrations, avec une charte quasi inexistante. La musique en pseudo-MIDI tirée des vieux ordinateurs donne toute la dimension décalée au site. (Même si en boucle, cela assomme vite)

La rupture et le contraste

Site magnifique pour le jeu vidéo Halo3 sur xbox, d’une scène de bataille, accompagné aussi surprenant soit-il, par une musique au piano, très grave, (qui ressemble à un Eric Sati ou un Chopin). Les FPS sont plutôt destinés à un public jeune et l’on pouvait s’attendre une approche plus techno/electro ou rock/metal tonitruant. Qu’est-ce qui fascine d’abord ? la scène ou la musique ?

C’est la musique qui commande

Neon Bible est le single d’un nouvel album d’Arcade Fire. C’est la musique la star : elle n’illustre plus, elle scénarise toute l’animation. L’animation, la vidéo, la mise en scène suivent la musique.

L’appropriation d’une musique connue par une marque en campagne cross-media
A l’heure des campagnes cross-media où l’on retrouve les mêmes visuels/animations au cinéma, à la télé, sur mobile et dans les sites interactifs, le son est à ne pas oublier. La musique peut être un code de reconnaissance d’une marque. Qui n’a pas chanté des spots publicitaires connus, dont la musique a été créé spécialement pour cela ? Je pense au Tchiwawa (orthographe approximatif) de Coca-Cola, qui a très bien su en jouer. Autre cas de figure, les rocks anglais utilisés par les constructeurs automobiles il y a quelques années (vous vous souvenez de l’utilisation d’une chanson de Dire Straits pour une pub Renault ou Peugeot (j’ai oublié) ?). Je m’écarte un peu du web mais la mise en relation avec les outils de communication autre que le web est toute aussi importante.

Les bruits et effets d’ambiance.
Renforcer le réalisme des éléments graphiques.

Regardez ce site de Nike d’abord sans le son. En fonction de la configuration, l’animation peut paraitre pauvre, et saccadée. Regardez l’animation des panneaux avec du son : l’animation prend de la profondeur, les panneaux se matérialisent en portes lourdes de métal, avec une résonnance qui illustre une scène de hangar mal isolé. (La qualité du son n’est pas forcément bonne mais c’est dans l’idée). Un bouton auquel on ajoute un bruitage bien particulier va ou appuyer l’aspect graphique et y ajouter du relief, ou bien lui donner une autre dimension qui va compléter son aspect seulement visuel.

Le mode non synchronisé pour illustrer sans visuel.
Je manque d’exemples : on peut avoir aussi en fond sonore des effets que l’on ne voit pas en lien direct avec la scène. C’est une scénarisation utilisée souvent dans des Tex Avery (au hasard). Je pense par exemple à un personnage qui se casse la figure hors champ, avec des bruits de casseroles, des poulets qui hurlent, et toutes sortes d’objets qui tombent et qui se cassent. Une manière habile de ne pas illustrer ou animer une scène graphiquement, ce qui demande du travail. Dans ce cas, le son est source d’économies et peut produire un meilleur effet que s’il avait été illustré.

p.s : Personnellement peu habile avec le son (j’ai fait du 3Ds, du toshop, du premiere, du flash mais le son… rien) même si je l’ai déjà utilisé dans des projets, ce billet est dédicacé à mon super stagiaire qui m’a posé la question aujourd’hui, qui avait besoin de quelques pistes pour un boulot qu’il doit rendre. J’espère que ca l’aidera. J’ai manqué de temps (fait à la volée, j’avoue) pour envisager tous les cas de figures mais si vous pensez qu’il manque des exemples marquants ou que vous voulez ajouter quelques éléments, n’hésitez pas ! aidez le !

p.s 2 : attention, je n’ai traité que les sites en flash ! Je n’ai pas parlé des horribles pages myspace avec une musique qui démarre à l’ouverture…

Evolution du Jukebox3D, Galaxy : une application en Flex, fortement intéressante présentée au WIF (avec cette version sortie spécialement pour le WIF). Voir le billet d’ouverture de Galaxy sur le blog de Tkaap et l’article sur l’atelier qui en parlent. Galaxy est en démo à cette adresse. C’est une interface de visualisation donc permettant de lire rapidement des vidéos provenant à terme de Youtube, Dailymotion, et des images de Flickr - et pourquoi pas - de la musique. Un gros boulot d’optimisation pour une consultation et une navigation rapides.

Remarque : je ne vais jamais sur Youtube ou Dailymotion à vrai dire, mais j’ai pris un malin plaisir à en regarder avec cet outil pour une raison : la consultation est rapide, et l’on peut faire deux choses en même temps, choisir celle que l’on va consulter tout en regardant celle qui se joue. Great Job ! on attends la version suivante.

Avec une supeeeeer interview autour de Galaxy, de l’outil, des évolutions, du travail sur l’ergonomie, la conception de l’outil etc…