L’expérimentation du vendredi comme on les aime, c’est à voir sur le blog de Vanilla Chen ou plus directement ici. Cela vous rappellera peut être de loin les jeux de rubans en 3D chez cornflex.

Une des précédentes expérimentations était également à voir : cette encre réactive au son d’une chanson de Nat King Cole.

Le blog de google Geo developper annonce la mise à disposition au travers de l’API de flash d’un peu de 3D. De quoi s’agit-il ? Simplement de la possibilité d’incliner la cartographie à plat vue de haut en différentes perspectives. Il se retrouve combiné avec du Papervision pour y inclure des bâtiments en 3D, ou d’autres éléments, avec une petite différence entre le rendu sous Flash 9 et sous flash 10, un peu plus performant. De quoi se rapprocher un peu d’un Google Earth en mode dégradé, surtout lorsque l’on sait que les fichiers KMZ fonctionnent aussi sous Google Maps.

A voir ce que cela donne en démo sur les ressources de l’API de google maps dans flash, déjà bien fournie en tutoriaux. Petit reproche : c’est parfois un peu lourd, quand même ;)

Il est vrai que la vue en 3D des villes du monde attire beaucoup, si j’en crois la dernière application de très bonne qualité (un peu chère) dispo sur Itunes vue via un article de mobinaute sous le doux nom de http://www.mobile3dcity.com :

La vidéo est aujourd’hui l’un des formats incontournables pour les sites en flash. Une certaine catégorie de sites associent la timeline à une vidéo pour mieux rentrer dans un contenu bien précis à un moment donné, comme un chapitrage de DVD. La gestion du temps de la vidéo permet aujourd’hui de revenir en arrière, d’arrêter une vidéo ou d’interagir pendant.

Ce n’est plus un menu avec une liste de caractéristiques d’un produit qui mène à une vidéo mais l’inverse : c’est la vidéo qui guide l’utilisateur vers des caractéristiques, donnant à l’image une place prépondérante. Avec quelques utilisations intéressantes parfois. Petit tour non exhaustif d’exemples que j’ai en tête.

Chapitrage détaillé

Viera de Panasonic qui se trouve être un bon exemple de départ. La timeline s’enrichit de chapitres détaillés.

Même chose chez Samsung d’ailleurs.

http://taserx3.com/ : si je ne cautionnerais pas le produit en lui-même, on remarquera la très grande fluidité de la vidéo qui démarre instantanément. Et toujours des séquences détaillées.

Interactivité dans la vidéo

http://eu.wrangler.com/bluebell/ réalisé par kokokaka. : changer la tenue de l’acteur au clic de souris pendant la vidéo : un passage d’une tenue à l’autre totalement transparente (et magnifiquement bien réalisé).

http://perfectone.victoriassecret.com/#/perfect_360/ : des marqueurs qui permettent d’entrer dans le contenu.

Ne perdre aucune miette visuelle d’une démo produit

Un petit détour par le Nesspresso de Soleil Noir, qui utilisent eux la vidéo pour un superbe 360°. http://www.nespresso.com/citiz/, ou comment utiliser du mieux possible la timeline comme contrôle non pas temporel mais pour un déplacement de caméra afin de ne rien perdre du produit dans ses moindres détails.

Visite virtuelle

http://www.mnightshyamalan.com/site.html : un classique finalement, mais qui fonctionne bien. La timeline servant de repère pour retrouver les différentes pièces à visiter

La vidéo EST le site internet

Edit : rajout d’un petit dernier original qui est passé largement sur le net. Plus expérimental mais dans la même veine. Merci kimline ;)

Autres exemples à voir déjà cités et à surtout ne pas manquer :
- Montagnes russes chez volkswagen
- Uniqlo calendar : une mosaique vue du (gratte-)ciel
- Un peu d’interactivité vidéo chez Nike
- Nissan.co.uk : un nouveau portail riche et haut en couleurs

On se souviendra de HapyIsland ou d’autres, mais http://14-7.com est particulièrement léger, et impressionnant. Petit jeu de plateforme dans un environnement tout en 3D, bien réalisé, avec 7 niveaux différents, gèrant tout à tour un peu de physique et de collision. Très fort…

Bestiario que j’évoque de temps en temps vient de mettre en ligne dernièrement Remap , qui permet de visualiser sous forme de mosaique les travaux exposés sur le célèbre visualcomplexity.com.

Toujours avec une approche sémantique, chaque projet est relié entre eux et documenté pour aller plus loin. Une interface un peu expérimentale (la réorganisation des éléments est un peu étrange) pour des explorations cartographiques de l’information de données.

Billet en réaction à quelqu’un qui me parlait des applications sur Iphone de sites d’actualités qui se copiaient tous les uns les autres avec le même positionnement de boutons : Ce positionnement en bas de l’écran étant un élément de navigation standard (Apple l’utilise d’ailleurs pour son application de l’appstore) prévu en développant comme une sorte de composant déjà tout prêt. Ce qui est malin dans ce type de développement, c’est que le code standardise un peu l’ergonomie des applications, évitant de partir dans toutes les directions côté conception.

Car la tâche n’est pas facile : les contrôles se sont déplacés dans l’écran. C’est tout simple mais cela peut provoquer une remise en question en terme de conception, et une perte de la navigation pour l’utilisateur.

Finalement, une chose intéressante lorsque l’on regarde un Iphone, c’est qu’il n’a bien sûr pas de clavier, mais pas de bouton de contrôle non plus. Un changement dans l’interface puisqu’elle doit répondre à deux situations : le mode vertical et horizontal.

Deux modes de visualisation et de navigation à maîtriser
Deux modes de visualisation du contenu et d’interaction qui ont du résoudre et absorber deux usages bien différents mais plus traditionnels :
- les claviers de téléphones portables (contrôles en dessous de l’écran)
- les contrôles (touches et stick) de consoles de jeux portables (PSP par exemple…) placés sur les côtés de l’écran.

Verticalement, on se rend compte que le système d’onglet, bien connu du web, est des plus utilisés (voir mon image plus haut). Les boutons sont tous placés en bas de l’écran, puisque très logiquement en haut, le doigt cache complètement le reste du contenu lors de la navigation. Les claviers étaient généralement placés en dessous de l’écran, les interfaces tactiles ont supprimé les croix directionnelles mais ont déplacé ces boutons dans l’écran. CQFD. Tous ces boutons au reflet bleutés dans l’état sélectionné formatent un peu la navigation exactement comme si tout le web était sous le même CMS, même si l’on perd un peu en originalité au final. Vraiment ?

La standardisation des éléments de navigation limite-elle la créativité de mise en page ? Pas forcément. On peut citer certaines applications comme Dexigner, Ru89, Home, ou même un peu plus éloigné l’application de Absolut, qui utilisent une mise en page ou une mise en scène un peu différente, se démarquant des simples listings d’articles.

Horizontalement, ce sont plutôt les jeux. Et là, je rejoins mon dernier article sur ce même déplacement. Challenge en terme de conception et de gameplay donc : tous les jeux ne se ressemblent pas et beaucoup n’ont pas accroché à certains qui demandaient de recouvrir tout l’écran avec le doigt. Certains sont même injouables. Il n’en demeure pas moins que le fait de placer des contrôles dans l’écran au même emplacement qu’ils n’étaient lorsqu’ils étaient bien physiques, n’est pas une si mauvaise idée quand même.

Image tirée du forum de iphone.fr, de Seven Swords, un RPG sur Iphone : les contrôles sont placés là idéalement de la même manière pour se déplacer et pour réaliser des actions. Pas si simple pour un RPG.

Ce challenge en terme d’interface intervient pour toutes les interfaces tactiles au final : comment s’échapper des contrôles physiques et comment surtout faire sans pour réaliser des même actions. Pour les larges surfaces tactiles, le problème n’est que plus large (ahah…). Je l’avais déjà évoqué : comment démarrer une vidéo sur un écran tactile (double clic, enfin double-doigt, ou bien dessin d’un ‘play’ ?), comment enregistrer un élément ou changer de vue ? Bref, de quoi se creuser la tête, au-delà d’une certaine standardisation récurrente…

Pour les plus anciens lecteurs de mon blog, j’avais relevé une superbe campagne de Motorola Chicago à l’époque. Réalisé par des français au passage, il se trouve que ce projet regorgeait quand même d’idée et d’une identité graphique très forte…

Le projet a donc trouvé son prolongement dans le projet Bllankwall : un mur interactif et artistique contrôlé par l’utilisateur par tout type de périphérique.

« A l’aide d’une Wiimote, d’une Tablet pc, d’une surface tactile… et de thèmes réalisés par des artistes, l’utilisateur dessine de façon magique une œuvre originale et ce sur tout type de surface (écran holographique, plasma, façade d’immeuble, objets,…). L’utilisateur peut au final imprimer sa création. »

Je vous invite à consulter sans plus tarder leur compte Flickr pour avoir une petite idée du rendu final, qui avait été pris lors d’une expo à l’ENSCI.

bllankWall Teaser from bllank.com on Vimeo.

Présenté à TED dernièrement avec papervision (avec une sombre histoire de crédit non mentionné qui en a choqué pas mal d’ailleurs), Flartoolkit sera également présenté au prochain ADOBE Max si l’on croit la page spéciale d’Adobe à ce sujet : http://max.adobe.com/MAXar/ Et c’est bien normal, c’est un peu le projet Natal de Microsoft version Adobe sur le web…

(D’ailleurs, l’adobe max cette année n’étant plus en Europe, je ne me pose des questions quant à sa couverture web, il est même fort probable que personnellement je n’y aille pas …enfin bon.).

Si les débouchés sont bien moindres que sur le mobile, la réalité augmentée en flash déchaine les foules, même si beaucoup admettent que passé le premier effet « whaou », l’intérêt reste limité. Si bien que les créations en la matière se multiplient jusqu’à ne plus arriver à suivre, et jusqu’à parfois oublier qu’il existe une licence commerciale.

Depuis le tout premier essai en Mai 2008 avec un petit cube qui tourne, les articles pleuvent (voir l’article de riainside sur flartoolkit et flarmanager) et les projets derivés également : Flarmanager pour le multipoints ou même vu dernièrement ARtisan, qui est une surcouche (assez inutile en mon sens), à Flartoolkit.

Au-delà des applications purement marketing, ce sont surtout les petites expérimentations qui me fascinent…parce que c’est ludique et plein d’idées.

Dernière collection d’exemples

Exemple chez http://sakeprog.cocolog-nifty.com

Certains toutefois s’attèlent plutôt à la detection des objets au travers de la webcam, sans pour autant passer par de la 3D très consommatrice :

Eugene Zatepyakin, décidément petit génie au flash, se concentre sur la détection d’objets également, ce qui constitue une base importante pour ce type d’usage, ce qui rappellera les essais de squidder en la matière :

Flash Motion Tracking [progress] from Eugene Zatepyakin on Vimeo.

Deux autres expérimentations de cartes de visite virtuelles, que certains ont pu voir sur le web ci et là, (article pour le premier et deuxième article pour le second)

Augmented Business Card from jonas on Vimeo.

AR Business Card from James Alliban on Vimeo.

Tandis que certains ne se sont toujours pas remis de la mort de Michael Jackson visiblement :

Un rendu très personnel et « typique », une scène en 3D somme toute légère… ou il faudra recomposer pièce par pièce l’objet éclaté central à découvrir : http://www.energylab.tv, un très bon casse-tête en forme de jeu pour une boisson énergisante. Un dispositif qui me rappelle un peu celui de Peal-Jam d’ailleurs… dans l’idée de l’énigme à résoudre en 3D.

Via mrdoob

Je suis tombé récemment sur Artwall, un projet artistique qui retiendra toute votre attention, j’en suis sur. Un détail m’a laissé plus ou moins perplexe : regardez bien la colonne de gauche. Oui, il utilise une vidéo flash en underlayer, et ce n’est pas une image, et le texte est bien du html.

Qu’est-ce donc ? Tout simplement du flash placé en dessous du contenu textuel, un peu comme une image. Cela alourdit un peu la page, mais c’est une méthode qui a été plus ou moins abandonnée sans doute parce qu’un fond qui bouge de trop, cela ne facilite pas vraiment la lisibilité d’un contenu. Toutefois, l’effet est intéressant et peut arriver à ne pas être trop perturbant.

Pour réaliser cela, j’ai retrouvé quelques vieilles ressources chez particleTree, ou chez willhowat, même si ces techniques remontent à 2005 au bas mot… Amusant de voir comment certaines techniques ont été oubliées.

Si cela peut vous inspirer… mais à consommer avec modération ! Je pense que les cas où cela peut être utilisé avec efficacité sont tellement réduits que… cela explique peut-être :)