Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Silverlight rocks the world (un peu de design…)

[new:29/06/2010] Du code, toujours du code… il n’y a pas que le code dans la vie, il y a aussi le design ! Avec Expression Blend c’est plus facile (normal, il est fait pour ça). Voyons au travers d’un exemple quelques astuces de mise en œuvre graphique…

L’exemple

Pas de quoi se rouler par terre je vous l’accorde, mais c’est un simple prétexte. Il n’y a pas d’interaction, juste à regarder.

[silverlight:source=/SLSamples/SLWorld/SLWorld.xap;width=480;height=300]

Les trucs

C’est dans la planisphère qui tourne que se situent les astuces. Aucune n’est délirante je vous le dit tout de suite. Ce qui m’intéresse dans ce billet est de vous montrer comment les outils mis à disposition par Blend peuvent rendre la conception d’une interface plus aisée. Un autre but est de vous donner des exemples d’utilisation de ces outils pour libérer peut-être un peu plus encore votre imagination.

Le texte “e-naxos”

Quelques mots sur ce bout de texte. Vous aurez reconnu le nom ma société, un peu de pub ne fait pas de mal :-) En réalité le principe du logo est que le “o” est remplacé par un sphère. Voici le logo original pour rappel (c’est pas bien amené ça ? !) :

E-NAXOX LOGO 2006 mini

Dans l’exemple Silverlight d’aujourd’hui j’ai donc repris (en très gros) le principe du logo. Pour séparer le texte il suffit de taper “e-nax” d’un côté et “s” de l’autre. Rien de sorcier. Appliquer un effet de drop shadow est aussi simple que le drag’n drop on ne s’y arrêtera pas non plus.

Mais pour faire les réglages du texte (je n’étais pas sûr de la taille finale du projet au départ, ni de celui de la planisphère) avoir deux TextBlocks séparés c’est enquiquinant. Je suis fainéant et l’idée de refaire le même choix de police, de taille, etc, sur deux objets m’ennuie rien que d’y penser…

Autre problème de mise en œuvre pure, voulant pouvoir adapter le texte à la taille de la planisphère je voulais avoir toute la souplesse possible. La taille d’une fonte n’est pas assez. Il faut pouvoir déformer éventuellement le texte (un peu plus large, ou plus haut). Et là, gérer deux fois la même (exactement la même) série de transformations sur les deux textes est une perspective qui ne me disait rien du tout. Toujours cette satanée fainéantise ? Oui, bien sûr, mais pas seulement… Dans la réalité quand on fait une telle mise en page, les transformations ne sont pas appliquées au cordeau, mais à l’œil. On hésite. On fait des runs. On se demande… un peu plus large ? non. un peu plus haut ? … peut-être. Bref on tripote. Et se souvenir exactement de tous les tripotages sur un objet pour les reporter à l’identique sur un second relève de la plaisanterie, on n’y arrive jamais.

Pour régler ce problème il fallait une solution pour travailler sur les deux parties de texte en même temps tout en ayant la souplesse requise. Ici j’ai choisi de transformer le texte “e-naxs” (sans le “o”) en Path.

Une fois le Path dégroupé j’ai pu tirer le “s” à sa place, Blend m’aidant à conservant l’alignement horizontal avec l’autre bout resté à sa place. Ensuite j’ai déplacé le premier bout de texte. A noter, le creux des lettres (comme le trou du “e” ou du “a”) semblent avoir disparu. Ils vont revenir. Une fois les deux morceaux de texte placés, il suffit dans l’arbre visuel de les sélectionner ensembles et de faire ce qu’on veut, notamment de les étirer dans un sens ou l’autre jusqu’à avoir trouver le bon rapport visuel. Bien entendu cela écarte ou ressert les deux parties de texte, ce qui dérange pour le placement autour de la planisphère. Mais il suffit de lever la sélection en cours et il est facile à nouveau de déplacer la partie gauche ou la partie droite pour qu’elles entourent la sphère correctement. On peut aller et venir entre sélection de tous les Paths pour avoir exactement les mêmes modifications et le mode désélectionné pour placer l’un ou l’autre.

Une fois le placement terminé (en réalité on y revient plusieurs fois, parce que la sphère change de taille par exemple) il suffit de resélectionner tous les Paths et de demander à Blend de refaire un chemin composé (compound path). Les creux des lettres sont de nouveaux visibles (ils ont toujours été là, mais dans un chemin composé les parties intérieures sont évidées donc visible alors qu’en version isolée chaque lettre est pleine bien que les chemins représentant les creux soient bien entendu toujours présents).

Bref, une astuce de mise en page qui peut être utilisée de mille façons mais surtout lorsqu’on doit appliquer des transformations à l’identique à des bouts de texte qui, normalement, sont isolés. Cela suppose que ce texte ne soit pas modifiable. Il faut donc une grande vigilance pour éviter les coquilles. Une fois converti en Path un texte ne se corrige plus !

La planisphère

Je voulais animer une planisphère dans la boule. Le faire en générant un avi avec Swift 3D aurait été possible et plus simple. Appliquer une texture à une sphère est un job de base pour un soft de 3D. Faire tourner la sphère devant une caméra et en tirer une séquence animée relève aussi du b-a.ba.

Mais je ne voulais pas utiliser une ficelle aussi grosse (dans tous les sens du terme, un avi ça pèse lourd aussi !).

Comment obtenir l’effet avec uniquement les outils de base de Blend ?

Deux aspect étaient à régler : l’aspect 3D de la sphère et le défilement 3D de la map.

La sphère 3D

Il s’agit là d’un tutor de base sur les objets “glossy”. Pour obtenir l’effet d’une sphère on prend un rond (Ellipse xaml) et on lui applique un dégradé radial qu’on fait varier du noir au transparent en écrasant le dégradé pour qu’il forme une sorte d’anneau. Choisir le bon anneau, les bonnes valeurs de noir et d’opacité est affaire de goût mais surtout de résultat. C’est assez délicat à régler pour obtenir le bon effet.

Ensuite on place un second rond (une autre Ellipse) par dessus pour créer l’éclairage. On rempli ce rond d’un autre dégradé radial allant du blanc au transparent, mais dans l’autre sens : le plus clair et le plus visible au centre, le transparent à l’extérieur. Ici encore le réglage du dégradé est délicat.

Seulement cet effet est centré dans la sphère. C’est moche et cela ne suit pas forcément la direction de la lumière de l’ensemble. Pour cela Blend fourni un outil de modification du background : le Brush Transform (transformation de brosse). Il suffit, à l’aide de ce dernier, de déplacer le gradient pour obtenir l’effet désiré.

La map

J’ai rapidement cherché sur le Web une carte du monde simple. Une belle image à plat.

Plusieurs problèmes se posent alors : comment faire entrer l’image dans le cercle sans déborder, comment l’animer pour donner l’impression qu’il tourne alors qu’il est plat, et comment lui donner un aspect bombé pour l’illusion de la 3D ?

Première astuce : on créé un nouveau cercle (toujours une Ellipse xaml) qu’on placera en dessous des deux autres (ceux créant l’effet sphère). Pas de Stroke. Mais on va utiliser une astuce : l’ellipse est un Path qui supporte le mode Tile. Originellement (et sous WPF cela fonctionne d’ailleurs très bien) un tile est une répétition d’une même image pour créer un modif répétitif. Sous Silverlight le tile ne marche pas… C’est à dire que la création d’un motif répétitif ne répète rien. Silverlight 4 ne corrige pas ce problème. Mais on s’en moque un peu vu que ce n’est pas cet effet qu’on recherche ici. En plaçant l’image de la map en mode tile cela nous permet surtout de clipper cette dernière dans le cercle et de pouvoir animer le tile, donc l’image de fond grâce à un groupe de transformation rattaché au tile.

Grâce à cette astuce, il est maintenant possible de créer un StoryBoard en mode “repeat forever” faisant glisser la map de droite à gauche. Il faut bien régler les points de bouclage pour que l’impression que la map tourne soit la meilleure.

L’effet 3D de la map

On a beau dire, partant d’une map plate la translation a du mal à convaincre. L’effet de sphère ajouté avec les ellipses trompe un peu l’œil mais pas suffisamment.

Hélas pas de 3D en Silverlight.

L’idée consiste alors à utiliser l’un des nombreux pixel sharders fourni avec SL4, ici le Magnify. On le pose sur l’ellipse contenant la map et ensuite il faut trouver les bons réglages ! Et ce n’est pas facile :-)

Une fois l’effet bien réglé, on fait tourner l’animation et, ô miracle, le “bombage” créé par Magnify renforce l’effet visuel d’une sphère 3D qui tourne.

Rien n’étant parfait, les réglages les meilleurs que j’ai trouvés avait tendance à faire “déborder” le dessin en dehors de l’ellipse. Fâcheux, quand ça déborde ça fait sale.

Pour régler ce dernier problème, on reprend une ellipse, de la même taille que la précédente et grâce à Blend on demande “Path/Make Clipping Path”. Il suffit de sélectionner la cible (l’ellipse contenant la map) et le tour est joué : l’effet déborde toujours, mais il est clippé et visuellement on ne voit plus rien.

L’illusion est créée, la planisphère tourne, sans 3D, en partant d’une image plate.

L’image originale étant un jpeg, pas de transparence. Et je voulais conserver un effet “bulle”. C’est donc sous PaintShop Pro que s’effectue les derniers réglages : colorisation, création d’un png avec transparence, etc. Mais parler de ce logiciel bien pratique quoi que moins puissant que PhotoShop est hors de ce tutor. En revanche j’ajouterais que PhotoShop comme tous les produis Adobe est programmé par des pieds qui n’ont rien compris à l’ergonomie. C’est navrant. Un soft Adobe est toujours imbuvable, plein de sous-menus sournois, de manips effarantes. Mais en revanche tout ce qui est calcul et rendering est parfait… Quand on a quelque chose où l’exigence ne se situe pas au pixel près, mieux vaut choisir Paint Shop. Et c’est beaucoup moins cher !

On change l’image originale par le png avec sa transparence et le travail est terminé.

Reste à déclencher l’animation, toujours sans code, et pour cela on place un Behavior “ControlStoryBoardAction” sur l’ellipse qui sera animée. Le trigger se fait sur l’événement Loaded, histoire de s’assurer que tous les morceaux sont bien chargés avant de déclencher le Begin de l’animation. Ca démarre donc tout seul et sans souci.

Conclusion

Une sorte de tutor graphique sans image ça peut sembler étrange et à contre emploi. Mais je ne voulais pas vous distraire avec des petits mickeys. C’est la démarche qui compte ici bien plus que les images et même plus que le rendu final qui n’est pas une œuvre d’art. Comme je le disais en introduction c’est un prétexte. Pour parler de Blend. Car j’entends encore trop souvent certains développeurs affirmer que tout peut être fait sous Visual Studio. C’est une aberration totale. Même VS 2010 et sa puissance ne sont d’aucune aide dans les manipulations ici exposées. C’est comme ceux qui affirmaient qu’un site Web ne nécessite que le bloc-notes. A la niche les rétrogrades dinosauresques et réactionnaires ! Couchés, sages ! Voilà… (quelqu’un peut lui filer un os, oui à celui là, ça l’occupera, il bave, faites gaffe ça tache. Zut j’ai oublié mon fouet. merci du coup de main). 

Il faut absolument un logiciel dédié au design. Pas au dessin, au design. Un outil capable d’importer du PhotoShop, de l’illustrator, du Expression Design, mais qui soit aussi un soft de dessin. Il doit aussi contenir les prémices et l’intelligence des actions que l’application devra réalisée (behaviors par drag and drop par exemple). A mi chemin entre Illustrator, Flash et Visual Studio, Expression Blend est un produit unique. Plus on l’utilise plus on l’aime…

Bref, j’espère avoir ouvert quelques petites portes avec ce billet, quelques envies aussi, ne soyons pas trop présomptueux. Ma devise est “ne pouvant les sauver tous, si jamais je n’en sauve qu’un seul, alors tout cela a un sens” :-)

Alors Stay Tuned, vous serez peut-être sauvé par le prochain billet si celui-ci vous a laissé de marbre !

Le code du projet  (Blend 4 bien entendu, même s’il peut être ouvert et compilé sous VS 2010):

blog comments powered by Disqus