Ce composant flash 3d est inspiré du plugin wordpress de Roy Tank. Il a été réalisé avec la librairie 3D native as3 du fp10. C’est un menu 3D dont les liens sont répartis sur la surface d’une sphère. les mouvements de la souris à l’écran permettent de faire tourner la sphere sur ses différents axes. La taille des tags à l’écran est personnalisable et permet son utilisation depuis un blog par exemple.
Un exemple d’implémentation:
var collection:Vector. = getTags();
tagCloud = new AFTagCloud(500, 500);
tagCloud.speed = 0.5;
tagCloud.move(0, 40);
tagCloud.dataProvider = new DataProvider(collection);
addChild(tagCloud);
L’ensemble des items est stocké dans un type DataProvider. Cette classe permet comme présentée sur la vidéo
- l’ajout d’item dynamiquement,
- le filtrage et tout type de classement.
le style(dégradé de couleurs, taille) des liens est entierement personnalisable.
le composant accepte le chargement d’une police au runtime.
le composant est disponible
– comme librairie(swc) pour une implémentation directe depuis le code as3
– emcapsulé dans un swf. Son parametrage est possible soit directement depuis le code javascript de la page html et les attributs de l’objet flash (flashVars) ou depuis un fichier xml externalisé.
Toutes mes excuses pour la mauvaise qualité de la vidéo. Elle sera remplacée des que possible.
Petite expérimentation avec la réalisation d’un analyseur de sons créé avec papervision3D et la méthode computeSpectrum qui comme son nom l’indique réalise l’analyse du spectre d’un signal sonore. Au cours de la démo, 10 vues différentes se succèdent.
En m’appuyant sur le patch Max/msp créé par J. K. Van Woesik et P. Brouwer créateur d’un Pong à commande vocal, j’ai créé a mon tour le mien. Le patch réalise l’analyse FFT du signal sonore et transmet à Flash via un serveur dédié des paquets OSC contenant l’amplitude et le pitch du signal stereo. L’idée est donc d’utiliser le son du micro pour piloter un jeu 2 joueurs ici incarné par le légendiare Pong. L’idée est innovante et super sympa et mérite d’être approfondie. L’idée de coupler max/msp à des phidgets ouvriraient encore plus de possibilités.
Dans mon cas, je n’utilse pas de signal stéréo mais la direction de la balle active le paddle se trouvant sur sa route.
Dans la première démo, le mouvement et la taille des paddles est commandé respectivement par le pitch et l’amplitude du signal.
Pour la démo, J’utilise ma voix dans un premier temps puis un piano et c’est plutôt sympa.
Retour sur Chromazone un site réalisé en as2 qui mérite un petit détour.
Passons en revue la structure du site.
Le menu principal
menu textuel sur un seul niveau occupant la partie supérieure de la scène. Il liste l’ensemble des sections principales du site et reste accessible tout au long de la navigation. Il contient également un lien permettant de couper le son d’ambiance mais pas le son des éléments actifs (boutons et liens). Il est également possible d’accéder à chaque section depuis le menu contextuel.
la scène principale
elle occupe l’ensemble de l’espace disponible dans le navigateur au dessous du menu principal,
la couleur du fond et la nature des motifs composant l’arrière plan changent pour chaque section de même que la musique d’ambiance,
le contenu est accessible via un ensemble de liens répartis aléatoirement sur toute la scène et présent sur un seul niveau au premier plan. Chaque lien se résume à un icône cliquable et un label,
un effet 3D est donné par un effet de parralax visible au cours de la navigation alors que la profondeur de champ est retranscrite par une modification du niveau de transparence des motifs présents en arrière plan,
seule une partie de la scène est visible à l’écran. Les déplacements de la souris permettent de dévoiler la scène dans son entier de manière fluide et instinctive ce qui remplace avantageusement un scroller.
la fenêtre de vue générale
située en bas à gauche de l’écran en semi-transparence, elle présente une miniature de la scène (sans arrière plan) à la manière de Photoshop,
elle permet de voir immédiatement la répartition des liens au sein de la scène et faciliter leur accessibilité puisqu’il sont également cliquable (sans en connaitre pour autant leur nature!) dans cette vue,
un curseur virtuel retranscrit les mouvements de la souris au sein de la scène pour restituer l’état courant de la navigation. Par contre, les déplacements de la souris au sein de cette vue ne sont pas synchroniser avec la scène,
telle quelle, son intérêt est limité et son usage pas très ergonomique.
liens et contenus
Un simple clic sur un lien actif permet d’accéder au contenu associé,
les contenus sont de 2 types texte & images et sont affichés dans une fenêtre dédiée. Elle se divise en deux pour laisser celle de droite héberger éventuellement une image ou un slideshow. Deux tailles de fenêtre sont crées histoire d’apporter une variation au transition et à la vue finale. La fenêtre apparaît autour du lien cliqué qui change d’aspect pour décrire l’état de chargement avant de retrouver son état précédent une fois le contenu chargé,
Dans ce mode, la scène est figée mais pas le menu principal. Pour sortir de la rubrique et revenir à la scène, on clique à nouveau sur le lien ou l’on peut naviguer vers une autre section directement depuis le menu principal,
De retour à la scène, le lien visité a changé de couleur pour copier le comportement d’un lien html classique.
Les transitions
changement de section
les effets sonores et effets d’animations décrivent une ambiance flottante et ‘marine’ plutôt réussie. Chaque transition s’apparente à un plongeon dans la nouvelle scène.
ouverture/fermeture d’un lien
L’ouverture de chaque lien est accompagné d’un effet de transition consistant à la rotation de l’arrière plan et l’ouverture d’une fenêtre spécifique contenant les données.
Les points forts,
l’ambiance générale,
les transitions,
la simplicité de la navigation
les points faibles,
le manque de diversité dans les contenus,
toujours le même viewer pour les images, simple et buggé,
l’utilisation de la fenêtre de vue générale qui même si c’est une idée sympa n’apporte pas grand chose dans son état actuel,
L’ambiance est très bonne mais on peut regretter qu’il n’est pas lié spectre du son et animation en arrière plan à la john Grden…en se limitant à quelque chose de discret qui pourrait être un simple effet de couleur.
Ce que j’aurais aimé voir,
la fenêtre de vue générale,
Telle quelle, son intérêt est limité mais elle doit être conservée et améliorée.
améliorer les transitions lors des changements de section,
la navigation à l’intérieur de cette fenêtre doit être synchroniser avec celle de la scène principale ou sinon au moins rajouter un tooltip pour rappeler à l’utilisateur la nature du lien actif.
les contenus,
Développer le coté 3D, en ajoutant un effet 3D aux fenêtres lors des transitions,
introduire des petits slideshow 3d à base de plans sans complications pour respecter l’esprit minimaliste,
améliorer transitions dans slideshows 2D
lier navigation au sein de l’animation flash à l’historique du navigateur
Ne réussissant pas à trouver un shader pour réaliser un effet de reflexion, j’ai décidé de m’atteler à la tâche. C’est pas l’exploit de la semaine mais c’est le shader à avoir dans sa librairie.
Je l’ai voulu le plus paramétrable possible. Il accepte:
fadeStart et fadeHeight permettent de définir la zone de fondu
exposure et brightness permettent d’ajuster la teinte
blur l’intensité du flou
fadeHeight qui ajuste la transparence de l’image dans son ensemble
La vidéo ci-dessous montre un exemple appliquée à une vidéo.
Yogurt3D est le petit nouveau dans les moteurs flash 3D opensources (à terme). Il est basé sur SwiftGL qui est compatible OpenGL. Ils précisent que le code OpenGL existant pourrait donc être directement réutilisé.
yogurt3d
Le rendu est vraiment sympa et la fluidité plutôt bonne mais il serait gourmand en ressources. Un projet à suivre de près en tout cas. Pour vous faire une petite idée, ca se passe ici.
Grosse nouveauté de flash player 10, Pixel Bender toolkit est un outil permettant de créer des filtres paramétrables pour photoshop, after Effects et Flash avec quelques restrictions malgré tout pour ce dernier. Ces shaders peuvent être appliqués à n’importe quel objet graphique (shape,sprite,movieclip,movie) et fonctionnent comme des miniprogrammes qui modifient en parralèle la valeur de chaque pixel composant l’image. Leur exécution qui utilise un process différent de celui du flash Player est nettement plus rapide comparée aux autres opérations graphiques dans flash. Le langage de programmation est basé sur le C. Ils peuvent être chargées dynamiquement ou directement embeddé à la compilation. On peut les utiliser de 4 manières différentes:
filtres personnalisés au même titre que Blur, Shadow, Bevels…
motifs. La méthode beginShaderFill remplace beginFill.
mode de fondu (blendMode) au même titre que Add, Substract…
exécution d’opérations mathématiques spécifiques.
J’ai décidé de me faire ma librairie de shaders et la rendre disponible via un swc. Certains viennent du net (adobe exchange notamment) et ont été adapté pour servir de transition, d’autres ont été conçu pour l’occasion. Au final, chaque Shader est embeddé dans une classe dédiée décrivant son comportement et facilitant son utilisation. L’intérêt du swc c’est qu’il permet d’intégrer les shaders pour les rendre ensuite disponible aussi bien depuis flex que flash cs4. Une partie des transitions sont présentées dans la vidéo ci-dessous d’autres sont déjà en développement. Les paramètres de chaque shader n’apparaissent pas dans la vidéo qui présente une utilisation basique mais montrent déjà bien ce que l’on peut faire.
Toujours sur le même thème de la nature, retour sur le très beau site de jonathan yuen et son univers plein de poésie.
Un peu de poésie
Ce que j’aime:
la poésie et l’imagination de l’auteur,
le graphisme et la composition de la scène,
Les animations sont quelques fois approximatives mais cela ne détériore en rien le résultat général,
l’idée d’orchestrer les transitions par les mouvements des personnages à l’écran.
Ce que j’aurai aimé voir:
une interface un peu moins sombre. Mettre un arrière plan éventuellement animé mais très effacé pour ajouter un peu de couleur et de profondeur de champ,
certaines transitions vers les rubriques secondaires et leurs retours un peu moins basiques,
une meilleure ergonomie, surtout si le site venait à grandir sur le même modèle,
une meilleure synchronisation des animations des personnages lors des changements d’écrans.
Superbe univers, j’attends avec impatience le prochain site de Jonathan Yuen.
Dans la catégorie nature, je demande Interactive And Design. C’est un site qui laisse une grande place à l’arrière plan qui accueille une scène d’extérieur que l’on peut imaginer se jouer à l’aube ou à l’aurore.
Interactive And Design
Ce que j’aime:
l’animation en arrière plan est très réussie et c’est le grand point fort du site. L’arbre et l’herbe au premier plan donnent de la profondeur à la scène. Jouer sur les silhouettes permet de simplifier le travail de design et d’animation mais contribue également à limiter le poids de l’animation. Cela ajoute un coté apaisant (aurore ou aube) et ce n’est pas super dur à réaliser. Poser 3D par exemple, peut apporter une aide précieuse dans la conception des animations des personnages comme ici le coureur. Le danger est peut être de faire une interface un peu trop sombre.
le panneau déroulant situé en bas de l’écran qui héberge le menu et les contenus ne vient pas recouvrir l’arrière plan lors qu’il se déroule mais au contraire le pousser vers le haut. C’est simple mais je trouve que ça rend bien.
