SOYMALAU - MMVIII - ZEITUNG

Si vous avez lu la section “WHO / QUI“, vous deviez vous attendre à trouver des filles nues et du flash sur ce blog, du coup pour le moment vous devez rester un peu sur votre faim. On va faire en sorte de corriger ça. Au moins pour l’aspect Flash.

Dans la vie je suis Flash-Designer, c’est mon boulot, ça me permet de payer mon loyer et ma bouffe. Et puis de toutes façons Flash, j’aime bien. Ça va faire 8 ans que je le côtoie, de fait je commence à avoir une relation privilégiée avec ce soft. On forme un peu un vieux couple, j’ai appris à accepter ses petits défauts même s’ils m’énervent toujours beaucoup, souvent on s’engueule et puis on se réconcilie, sur l’oreiller…

Bref. Des sites flash j’en vois beaucoup beaucoup, je saurais pas dire combien j’en découvre par jour. Et avec le temps j’ai repéré quelques trucs qui reviennent régulièrement et qui pour moi gâchent un peu la qualité d’un site. Les finitions c’est important, je sais que beaucoup de nos clients sont des cons et qu’ils ne verront jamais le soin que l’on peut apporter aux détails, mais ça ne doit pas nous servir d’excuse pour ne pas y faire attention.

Voici un petit top des erreurs qui distinguent un putain de site bien léché d’un putain de site bouclé un peu en vitesse.

Le loader :

Ce site est plutôt chouette, mais avoir un *glitch* curseur sur le loading ne sert à rien.

C’est vraiment sympa de vouloir permettre à vos visiteurs de copier coller le pourcentage de chargement de votre site, mais à moins qu’il soit vraiment très long à charger ou vraiment très marrant, je doute qu’ils y trouvent une utilité. Eh oui, quand on fait un loader en flash avec une indication du pourcentage, on est pratiquement obligé d’utiliser un champ texte dynamique, ce dernier active par défaut la possibilité d’en sélectionner le contenu. Est-ce vraiment utile de la laisser activée ? Je ne crois pas. Ce n’est qu’une case à décocher, le curseur et ses différents états sont des éléments d’ergonomie, les traiter avec intelligence permet aux utilisateurs de mieux comprendre la teneur du contenu.

Les champs de texte dynamique pas assez grands :

Lorsqu’on utilise un champ de texte dynamique, il est possible d’en régler la taille, il faut savoir qu’une taille de champ texte trop petite rognera certaines parties de votre texte, certains caractères en fin de phrase peuvent même tout simplement ne pas s’afficher ! Donc soyez généreux, faites vos champs textes dynamiques suffisamment grands, de toutes façons, ils ne gêneront personne puisque vous en aurez désactivé la sélection au curseur.

Le context-menu (options disponibles en clic droit) :

Le menu d’origine et ce qu’il est possible d’en faire, entre autre.

Un des reproches qu’on fait parfois à Flash est l’inutilité du clic droit, supposée impossibilité de s’en servir pour l’interactivité d’une part, fonctions proposées plus que basiques d’autre part (zoom, changement de la qualité du SWF, super, rien que de l’essentiel). Du coup, avoir un menu accessible en clic droit bien pensé, ça fait tout de suite class, genre “hey mec je pense à toi t’as vu, I care“. Sur thefwa.com par exemple, il est possible de cliquer droit sur les liens, pour les copier-coller facilement ou les ouvrir dans une nouvelle fenêtre, c’est chouette. J’ai vu un portfolio une fois qui permettait via clic droit d’ouvrir les travaux présentés directement au format image et en grande résolution, c’était vraiment une bonne idée. Ça permettait par exemple aux visiteurs d’enregistrer les images qu’ils aimaient, de les imprimer facilement, d’en faire leur fond d’écran, que sais-je. Vous trouverez facilement des ressources pour bien gérer votre clic droit, genre sur Kirupa.

Les éléments planqués hors-champ et les backgrounds :

Sur le site Diesel, en 1680*1050 le background se termine joliment en haut mais est coupé en bas.

Parfois, pour certaines raisons on dépose sur la scène des clips qui sont destinés à demeurer hors champ tant qu’on ne les appelle pas dans la zone visible de l’animation. On peut trouver ça un peu crado comme façon de faire, mais ça l’est encore plus lorsqu’on oublie les gens qui ont de grands écrans. Ben ouais les mecs, nos clients nous saoulent avec l’optimisation pour le sacro-saint 1024*768 mais c’est pas une raison pour oublier les 2048*1536. Il est donc préférable de planquer ces éléments sur le coin haut-gauche de la scène, si on a besoin de les mettre ailleurs on récupère la taille de la scène avec un Stage.width et Stage.height, une petite fonction onResize et hop.

Si jamais votre site ne se prête pas au repositionnement, vous pouvez toujours planquer un petit clin d’oeil aux possesseurs de gros écrans, comme le fait SoleilNoir sur son site (impossible de vous remontrer vu que je n’ai plus mon 22″ CRT, si quelqu’un en 2048*1536 peut confirmer, ils avaient caché un petit “hey your screen is too large for us” au dessus du fond).

Il en va de même pour les images que vous pouvez utiliser en background, faites un petit fondu au noir sur le bord, ça ne coûte rien et ça évite les découpages un peu trop visibles (cf image)…

Les polices pixel et autres éléments nets :

Depuis quelques temps déjà, la mode est aux polices pixel c’est à dire des polices qui ne sont pas anti-aliasées (pas lissées) et qui du coup sont vraiment plus lisibles sur écran, car plus nettes. Durant longtemps, Flash ne permettait pas d’afficher des polices sans antialias autrement qu’en faisant des champs textes dynamiques. Depuis la version 8 ou 9 je ne sais plus, c’est possible, joie. Le problème, c’est que ces polices sont parfois capricieuses et selon leur positionnement elles peuvent devenir floues, ce qui en plus de rendre vos textes moins lisibles, ruine un peu l’aspect léché de votre design.

Il existe un pack de police utilisé par beaucoup beaucoup de monde, nommé Miniml il est trouvable à cette adresse. C’est un bon début. Ensuite, histoire de mettre toutes les chances de votre côté il est impératif de vous assurer que vous placez vos textes sur des coordonnées axiales entières. Un texte placé en X 10 - Y 10 ne vous posera pas de soucis, par contre placez le en X 10.3 - Y 10.2 et il est possible que ça devienne voyant. Je viens de refaire le test et il semble que les dernières versions de flash atténuent grandement le problème, pour ce qui est des polices, mais pas des éléments vectoriels autres, du coup tant qu’à faire, prenez le bon réflexe directement. Veillez aussi à toujours aligner vos éléments lorsque vous imbriquez des clips les uns dans les autres.

Enfin, pour le repositionnement dynamique, il existe la fonction Math.round(). qui vous permet d’arrondir une valeur à l’entier le plus proche.

Il est aussi possible d’utiliser des PNG en veillant à ne pas en autoriser le lissage dans la bibliothèque, c’est une solution qui est parfois préférable car ce qu’on peut perdre en optimisation du poids, on le récupère en optimisation de la mémoire nécessaire pour manipuler l’élément.

Les rectangles aux bords arrondis :

Flash c’est du vectoriel et le vectoriel c’est cool car ça permet de déformer ses éléments facilement tout en gardant les contours nets, ce qui n’est pas possible avec du bitmap. Le problème c’est que certains en abusent et on termine souvent avec des choses vraiment vraiment pas esthétiques, notamment sur les cadres. Ça va peut être vous sembler atterrant de simplicité mais je l’ai déjà vu suffisamment souvent pour vouloir en parler. Démo.

Au début on a un joli rectangle avec des angles propres, si on le déforme avec le mauvais outil les angles ne sont pas respectés lors de l’étirement et au final on a quelque chose d’horrible. Il en va de même pour l’imbrication de rectangles aux bords arrondis, ce n’est pas possible de simplement dupliquer son rectangle et de le rétrécir car la proportionnalité des angles ne sera pas respectée, on va donc se retrouver avec quelque chose ressemblant au premier cadre alors que dans notre tête on voulait faire quelque chose ressemblant au second :

(maj) Les boutons, zones de rollOver et anticipation des défauts de clic :

Dans les commentaires, Thomas parle du onReleaseOutside, qui est une fonction trop souvent négligée. J’ai donc décidé d’ajouter un petit paragraphe sur les boutons, car il y a une autre erreur qui va de paire avec, heureusement celle-ci on ne la rencontre pas souvent sur les sites d’agence, mais beaucoup plus régulièrement sur les sites de jeunes étudiants, c’est la zone de rollOver.

Commençons avec celle-ci. Un bouton dans flash est généralement composé de 3 états visuels, l’état neutre lorsqu’il ne se passe rien (appelé “Haut” par flash), l’état survolé (”Dessus”) lorsque le curseur se trouve au dessus et l’état “Abaissé” (plus rare) lorsque le clic est maintenu. Mais s’il y a un état à ne pas négliger, même s’il n’est pas “visuel” c’est la zone d’interactivité du bouton, l’état que flash appelle injustement “Cliqué” ! En effet, prenons l’exemple d’un bouton qui serait composé du texte “mon bouton”, si je n’y prends pas garde, la zone active sera uniquement les pixels nécessaires à écrire “mon bouton”, impossible de cliquer sur celui-ci si mon curseur pointe au milieu du “o” par exemple, faites le test :

Tandis qu’avec une zone de rollOver bien définie, on aura un bouton cliquable bien plus facilement :

Il est d’autant plus important de bien assimiler l’état “Cliqué” qu’il permet ensuite de faire ce qu’on appelle les boutons “invisibles”. Ce sont des boutons dont seul l’état “Cliqué” est rempli et qui peuvent servir autant de fois que l’on veut, vous faites un bouton invisible de 10px sur 10px puis déformez son occurence à votre bon vouloir pour l’adapter à ce que vous voulez rendre actif, il suffit ensuite de leur donner un nom d’occurrence différent et de leur assigner un comportement via ActionScript. On peut aussi jouer avec l’état “Cliqué” en le faisant par exemple varier pour modifier la zone active, dans le cadre d’un jeu.

“Ok mais moi je fais mes boutons à la main, dans un clip normal, alors je la gère comment ma zone de survol ?“. Ben en rusant, il suffit de créer un nouveau calque et de dessiner une zone de la taille voulue puis de lui assigner une couleur en Alpha 0, et hop vous avez votre bouton clip avec une zone de survol aussi grande que voulue.

Alors, le onReleaseOutside maintenant. Vous devez tous connaître onRelease qui est l’évènement qui permet de lancer une action lorsque le clic est relâché. Maintenant imaginons que pour une raison ou pour une autre, votre utilisateur relâche son clic en dehors de la zone “Cliqué”, par exemple si vos boutons bougent, dans ce cas, si vous avez oublié d’inclure le onReleaseOutside, il ne se passera rien. Et pourtant rien n’est plus simple que de l’inclure : monBouton_mc.onRelease = onReleaseOutside = function () { … }. Le onReleaseOutside c’est s’assurer que quelle que soit la façon de cliquer de votre utilisateur, l’action désirée sera bien lancée… Maintenant il arrive parfois aussi que l’on clique et que l’on se ravise alors qu’on a encore le clic enfoncé, dans certains cas, sur Windows par exemple, relâcher en dehors du bouton annulera l’action, à vous de juger si vous voulez lancer l’action absolument ou si vous voulez laisser la possibilité à l’utilisateur de se raviser (par exemple sur une fenêtre d’alerte demandant s’il désire vraiment fermer un document, peut être que le onReleaseOutside est à proscrire).

_

Voilà pour les principales erreurs qui me viennent à l’esprit, si vous en voyez d’autres n’hésitez pas à les ajouter dans les commentaires. Alors attention hein, on est clairement d’accord qu’il s’agit de détails et de finitions et qu’on est pas là pour pointer ceux qui font ces erreurs en disant “ahah les mauvais !”. La preuve c’est que le chargement de mon portfo a encore le curseur texte activé à l’heure qu’il est uhuh, je viens de corriger ça il faut que j’upload le fichier. Mais je pense que lorsque l’on veut faire un site vraiment bien fini, il est important de considérer ces différents aspects. Il y aurait encore beaucoup de choses à dire entre autre sur le design sonore, choisir le bon type d’évènement de synchronisation pour déclencher le son sur un bouton par exemple, mais bon l’exhaustivité n’est pas mon but non plus.

C’est un des premiers billets “Flash”, d’autres suivront, notamment un petit coup de gueule sur la tendance “tout vidéo” qui moi m’agace un peu, surtout quand ces sites gagnent des FWA, il y a faire du flash pour faire du flash et se servir de flash comme d’une table de montage, je préfère la première option, je crois qu’il y a encore pas mal d’effets à trouver avec les options offertes par flash directement, plutôt que de choisir la solution After Effect à tout va.

Je vous souhaite un bon week end et puis pour finir…

via ffffound.

Edit : Et juste pour finir, une petite astuce, comment conserver la fluidité de vos anims y compris lorsqu’elles sont affichées dans un navigateur ? Avec le wmode bien sûr ! Un petit “fenêtre : opaque” dans les paramètres d’exportation HTML et vous passez de ceci (sans) à ceci (avec). Logique.