Nouvel épisode de l’agence du jour, avec l’agence Les Chinois qui annonce, 9 ans après sa première version, la mise en ligne de son nouveau site web.

Avec l’explosion des sites utilisant HTML5, CSS 3 et du Javascript de très haut niveau l’agence interactive parisienne s’offre un site web full Flash. Mélangeant le rich média, la 3D et une bonne dose de sound design, son ambition est d’offrir une « immersion totale« .

Voilà pourquoi l’agence a choisi Adobe Flash 11 et son nouveau Player sorti il y a seulement quelques jours.

Une fois passé la page de bienvenue vous entrez dans le monde des Chinois. À première vue le site semble très expérimental. Testez ! Utilisez votre souris pour naviguer dans un univers tout en 3D.

La navigation, structurée en bas de page, permet découvrir l’agence en quelques clics sur des pages épurées et propres.

N’oubliant pas les contraintes des supports mobiles, comme les smatphones et les tablettes, le site offre une alternative mobile en HTML5. Comme le décrit l’agence, « cette version nomade est plus épurée, focalisée sur l’information et l’expérience tactile. » Ci-dessous des captures sous Android :

Et vous que pensez-vous de Flash comme choix technologique ? Bonne ou mauvaise idée pour ce type de site ?

www.leschinois.com

Toujours à l’affut des sites Flash qui offrent une superbe immersion de l’utilisateur, voici un exemple qui vous plongera carrément dans les profondeurs de l’océan Atlantique…

Expedition Titanic est un site pour permettre au plus grand nombre d’approcher virtuellement la célèbre épave du Titanic.

L’expérience commence par une rapide descente sous l’eau :

Avec un mélange de vidéos et d‘interaction 3D, au sens propre l’utilisateur est plongé au coté de l’épave :

La large carte interactive permet de naviguer une fois au « fond de l’eau » :

Un site à vivre plutôt qu’à décrire : Expedition Titanic

Une réalisation du studio Firstborn

BMW a axé sa dernière campagne pour sa nouvelle Série 5, autour de la sculpture cinétique du musée BMW à Munich. Bien entendu nous pouvions nous attendre a ce qu’elle soit associée à un site Flash de toute beauté… À découvrir dans la suite de l’article.

BMW Cinetique est un site Flash constituée d’un scène 3D centrale. L’idée est de permettre aux utilisateurs de jouer à l’artiste en leur permettant de créer leur propre sculpture.

L’interface est minimale, simple et fonctionnelle :

Le panneau de création permet un bonne liberté pour imaginer toutes sortes de sculptures. Il est également possible d’enregistrer son œuvre et de la partager en ligne, via Facebook ou Twitter.

La galerie de créatiosn montre un lot impressionnant de réalisations parfois vraiment bien poussées. Le tout est servi et entouré par une légère ambiance sonore.

Site : BMW Cinetique.

PS : Un article attend depuis un moment…Mais patience d’ici la semaine prochaine, Webdesigner Trends devrait retrouver son rythme de publication habituel !

Une ressource intéressante pour aujourd’hui, un slider Flash 3D 100% configurable via XML. Une belle réalisation qui vaut vraiment le détour !

Si vous suivez le blog depuis le début, cela vous rappellera surement doute Cu3er, dont c’est inspiré Björn Crüger le créateur de The Piecemarker. Il ne vous faudra que quelques minutes pour prendre en main la galerie d’image gratuite. Chargez vous photos au format .jpg, .gif, .png via le fichier XML, configurer vos transitions, installez-le sur votre serveur et le tour et joué !

Un moyen facile et rapide d’avoir une galerie Flash vraiment classe. Pour les flasheurs d’entre vous, qui désirent plus de personnalisation, le fichier .fla est disponible dans l’archive de la galerie au téléchargement. Un bon moyen aussi pour voir et essayer de comprendre le code qui se cache derrière une telle application Flash.

À voir et à télécharger sur Active Tuts

Le site officiel de The Piecemarker

Comme promis, voici un article avec une sélection de superbes sites Flash 3D. Il y a du nouveau et du plus ancien mais dans tout les cas, ces sites sont à connaître. Allez c’est parti pour une bonne dose d’inspiration !

Dans l’article précédent, » Sites Flash et 3D. Où en sommes nous ? 1/2 » je faisais un petit point sur les possibilités existantes pour faire dans la 3D sous Flash. Pour venir à des exemples vraiment complet, je vous laisse découvrir cette sélection de 15 sites. Pour le plaisir des yeux et de la souris…À admirer en plein écran pour plus de plaisir.

Tinman

Quand je suis tombé sur ce site il y a 2 ans déjà, j’étais littéralement sur le c.. ! Infinite OZ est une réalisation tout simplement superbe.

Summerfestival

Coloré et fun. Un petit vol dans les airs, ça vous tente ?

Optus Whale Song

Après les airs, un petit tour sous la mer, avec une belle scène sous marine en 3D.

EcoDaZoo

L’interaction avec le décor principal est réellement très fluide. Un vrai plaisir, qui change d’une scrollbar interminable habituelle.

The Morph

Testez la navigation avec webcam, sur le site de The Morph.

Foxtel, I am uniQue

Une application web pour créer des portraits originaux en 3D.

The Egg Republic

Le site web de l’agence The Egg Republic.

NewworkCity

J’apprécie vraiment le style de ce site coloré et très nature.

Eight Interactive

Un concept, une utilisation vraiment légère de la 3D, mais c’est là dessus que repose tout le site.

X-Prime

Le site de l’agence basée à Toulouse, avec son menu 3D.

Chasseurs de dragons

Site à connaître également, avec sa navigation « simple » Dragons Hunters offre vraiment une expérience sensationnelle.

CityExpression

Réaliser par l’agence russe, Creative People, City Expression donne une autre vision de la 3D.

On Toyota’s Mind

Un île flottante en 3D, hum un vrai délice !

The Oleg, portfolio

Embarquez dans le monde de The Oleg.

Verbatim Japan

La marque de supports de stockage vous propose de créer vos propres « mediamonsters ». Tête de carte SD, pattes en clés USB, attention ils arrivent ! L’animation des monstres est fluide et bien réalisée.

La technologie Flash permet de créer des sites web riches en interactivité qui laissent rarement indifférents lorsqu’il sont bien réalisés. Mais il faut l’avouer, l’expérience utilisateur sur ce type de sites peut-être considérablement décuplée en utilisant de la 3D.

Flash est un moyen pour amener la 3ème dimension directement dans votre navigateur web. Avec l’apparition de l’outil  de rotation 3D sur Adobe Flash dans sa version CS4, le logiciel prend en charge l‘axe Z. Cette nouvelle dimension de travail offre de nouveaux horizons aux designers Flash. Mais c’est les développeurs Flash qui révolutionnent vraiment le concept. De plus en plus de sites utilisent des moteurs 3D sous Flash pour créer un concept unique, innovant et souvent visuellement renversant.

Des classes 3D sous Flash :

Les deux plus connues sont probablement Papervision 3D et Away 3D. Ces deux bibliothèques open-source et gratuites permettent de créer un moteur 3D sous Flash en ce basant sur le langage Actionscript 3. Elles offrent aux développeurs une grande liberté de création pour réaliser des effets vraiment détonants. Les classes Papervision 3D et Away 3D sont à installer comme n’importe qu’elle classe en Actionscript 3. Pour pouvoir les utiliser  mieux vaut posséder une bonne base de connaissances du langage. L’avantage de l’utilisation de  ces classes pour un projet est qu’elles ne nécessite pas d’installer de plug-ins supplémentaire pour afficher les éléments 3D. Les animations fonctionnent nativement sous le plug-in Adobe Flash Player. Pour illustrer tout cela quoi de mieux que du visuel ? Je vous propose de découvrir quelques sites utilisant ces deux moteurs 3D.

Des exemples :

Le site officiel de Papervision :

Bien qu’il ne soit pas tout jeune, le fond marin de Papervision offre un bon aperçu de quoi il est capable…

Portfolio de Jim Burrows :

Une utilisation simple de Papervision mais qui rend tout de même bien ! Un portfolio minimaliste et sympa.

Portfolio de Njoore :

Papervision toujours, avec des effets plus poussés sur ce site.

Occasions Freedent :

Le moteur Away 3D est utilisé sur ce site. Allez-y et secouez la box !

Adidas Campaign Outdoor :

Away 3D, avec un effet de parallaxe.

Il existe de nombreux autres moteurs ou applications pour faire de la 3D sous Flash, comme par exemple Sandy 3D,  ou Alternativa3d (gratuit pour un usage non-commercial).

Et des ressources (en Anglais et Français) :

• Apprendre l’animation 3D sous Flash, avec les conseils d’Adobe Developer Connection .
• Un tutoriel de base en français : travail avec des objets 3D (Video2Brain)
• Un bon tutoriel pour apprendre les notions de base pour travailler avec Papervision chez GotoAndLearn.
• La sélection officielle des meilleurs sites utilisant Papervision.
• Créer un jeu de mémoire avec Away 3D, chez ActiveTuts.

À vous d’y aller maintenant ! J’espère vous avoir donné envie de tester les classes 3D sous Flash pour explorer de nouvelles pistes créatives. Les possibilitées qu’offre le logiciel en matière de 3D ne sont pas récente et vont bien au delà de ces quelques exemples. Avec l’augmentation des applications marketing de la réalité augmentée et de la 3D avec lunettes, les sites web à venir promettent d’être exceptionnels. Il en existe pourtant déjà tant à connaitre absolument. C’est pour cette raison que je réserve mon prochain article à une sélection de sites Flash 3D !

Connaissez-vous le Web Flash Festival ? Il prend place au cœur du centre Pompidou à Paris depuis 2002 . Sa vocation est de promouvoir la création web avec le logiciel Adobe Flash.

Étalé sur trois jours, le festival s’intéresse aux nouveaux médias et plus spécifiquement à la création artistique et multimédia, quelles qu’en soient la forme et les technologies. L’édition 2010 se déroulera du 28 au 30 mai. Pour vous faire un aperçu de ce que le Web Flash Festival attend, voici le site « Montréal en 12 lieux«   lauréat en 2008 dans la catégorie « Art/Graphisme » et récompensé aussi par The Fwa :

Un autre exemple, le lauréat de la catégorie « Présentation« , le site de la tour de la terreur de Disneyland Ressort Paris :

Pourquoi ne pas tenter votre chance ? Les soumissions à la compétition du Web flash festival sont ouvertes leur site Internet,  depuis le 05 janvier 2010. Allez-y !

Le célèbre constructeur automobile Posrsche, vient de mettre en ligne un nouveau microsite présentant sa dernière beauté. Réalisé sous Flash avec Papervision 3D, il présente la nouvelle Panamera sous tout les angles.

Les marques créent de plus en plus de « mini-sites« , appelés aussi « micro-sites« , pour mettre en valeur un nouveau produit. En général ils sont très interactifs, basés sur Flash pour amener une réelle expérience utilisateur. Porsche a très bien compris le principe et l’applique parfaitement :

La nouvelle Panamera 4e Dimension (Porsche 4 portes, 4 places) s’offre une intro et une navigation en 3 dimensions.

L’interface du site est très simple, pas de besoin de « décorer » inutilement la page, les voitures parlent d’elles mêmes. Soit, c’est un micro-site mais qui ne manque vraiment pas de contenu (on y trouve des vidéos, des photos, un espace de téléchargement ou comme ci-dessus une application pour choisir la couleur de son bolide…)

Voir le site de la nouvelle Porsche Panamera

Cu3er est une galerie d’images Flash qui permet de créer facilement, rapidement et gratuitement un diaporama avec des transitions en 3D.

Cu3er se présente sous la forme d’un fichier Flash entièrement personnalisable via un fichier XML. Vraiment facile à prendre en main, il permet d’avoir rapidement une bannière animée sur son site web, de créer une galerie de photos, de présenter vos produits… Le point particulier de Cu3er est qu’il offre de superbes transitions en 3D qui en mettront plein la vue à vos visiteurs !

Idéal pour les créateurs de site qui veulent aller vite et pour ceux qui ne veulent pas ce plonger dans le développement Flash. Ce genre de composant offre par ailleurs une bonne source d’inspiration pour créer ses propres diaporamas. Découvrez et télécharger Cu3er sans plus attendre ! Il bien entendu gratuit et libre d’utilisation.

]]> http://www.webdesignertrends.com/2009/10/cu3er-diaporama-flash-3d-gratuit/feed/ 3