Dans le cadre de leurs réalisations, les designers ont pour habitude de laisser libre cours à leur créativité, sans trop la brider. Le pôle Rich Media prend ensuite le relais pour transformer une création graphique statique en un site full Flash, multilingue, entièrement administrable. Se pose alors la question des procédés techniques qu’il va falloir employer pour restituer la sophistication graphique de la maquette design. Celle-ci passe inévitablement par des effets de transparence et de masquage, domaines dans lesquels Flash, à la base, montre quelques lacunes. Voici quelques exemples de traitements graphiques un peu pointus qui ne sont pas prévus par Flash…

• On ne peut pas appliquer de masque sur un texte non lissé. Le texte n’est simplement pas affiché.
• On ne peut pas ajuster la transparence sur un texte non lissé. Toute valeur d’alpha résulte en une opacité de 100%.
• Les masques de Flash n’admettent pas de dégradés. Tout objet servant de masque n’est utilisé que pour sa forme, et non pour ses valeurs de luminosité ou d’alpha. Le masquage est donc net. Impossible de simuler directement un masque de fusion (Photoshop) ou d’opacité (Illustrator), qui estompe l’objet selon les valeur de gris du masque.
• Un effet assez indésirable apparaît lorsqu’on applique une transparence sur un movie clip composé de différents objets : au lieu de s’appliquer au movie clip dans son ensemble, la transparence affecte chaque objet contenu dans le movie clip, de sorte que chacun d’eux se fond avec ses voisins. La résultante n’a donc rien à voir avec ce qu’on en attendait.

Confrontés quotidiennement à ce type de problématiques, les valeureux Flasheurs que nous sommes sont amenés à déployer des trésors d’ingéniosité. En creusant bien, et profitant de la généralisation du player 8, nous avons donc repris ou développé un certain nombre d’astuces fort utiles, que voici.

Masquer un texte non lissé

Lorsqu’on essaie d’utiliser un masque sur un texte non lissé, le texte n’est simplement pas affiché. C’est d’autant plus désarmant que dans l’interface de Flash, on voit bien le texte masqué, quel que soit le « Mode Aperçu » sélectionné. Pour y arriver, il suffit de placer le champ texte à l’intérieur d’un movie clip, et de cocher l’option « Utiliser la mise en cache des bitmaps à l’exécution« . Le rendu du texte sera bien non lissé, et le masque effectif.

On peut bien sûr obtenir le même résultat par le code :

texte_non_lisse_mc.cacheAsBitmap = true ;

Appliquer une transparence alpha sur un texte non lissé

Lorsqu’on essaie d’appliquer une transparence alpha à un movie clip contenant du texte non lissé, le bloc de texte ignore simplement la transparence et reste complètement opaque. On pourrait penser que notre petite astuce précédente (l’utilisation de la mise en cache bitmap), suffirait à résoudre ce problème similaire. Mais ça n’est pas le cas. Il va falloir ruser plus encore, en appliquant au movie clip concerné un effet de la palette Filtres.

Cette astuce nous permettra de résoudre également d’autres problématiques, comme nous le verrons ci-après. Évidemment, on ne souhaite pas nécessairement, à la base, appliquer un filtre (flou, halo…) au texte aliasé. Dans ce cas, on prendra soin de régler les paramètres du filtre de façon à le rendre invisible. Par exemple, un flou X et Y de 0 pixels, ou un réglage couleur avec toutes ses valeurs à 0.

A noter : une option de Fondu peut aussi permettre, dans certains cas, de simuler une transparence, sans recourir aux Filtres.

Appliquer un masque d’opacité / de fusion

Le designer utilise couramment des masques d’opacité (présents dans Photoshop sous le nom de « Masque de fusion« , et sous Illustrator comme « Masque d’opacité« ). Ce procédé permet de dessiner sur une couche en niveaux de gris qui sera interprétée comme un canal alpha sur l’objet masqué, permettant d’obtenir une transparence nuancée. C’est une technique qui existe de longue date dans Photoshop, depuis un peu moins longtemps dans Illustrator. Les seuls masques autorisés dans Flash sont l’équivalent des « Masques d’écrêtage » d’Illustrator : seule la forme du masque est prise en compte, et non ses valeurs de luminosité. Comme si, dans Photoshop, seul le noir était autorisé sur un masque de fusion, et aucune valeur de gris. L’objet masqué est vu comme à travers un pochoir opaque, de forme libre.

Comment obtenir le même résultat dans Flash ?

Première étape : définir le masque. Pour cela, typiquement, on dessine une forme contenant un dégradé (une couleur unie présenterait peu d’intérêt : autant appliquer un taux de transparence directement à l’objet). Fait intéressant : contrairement aux exemples dont nous parlions (Photoshop et Illustrator), les couleurs ou valeurs de gris du dégradé n’ont aucune importance. Ce sont les valeurs alpha du dégradé qui serviront de valeurs alpha de masquage.

Deuxième étape : pour appliquer le masque, l’astuce consiste, là encore, à recourir à la mise en cache bitmap, à la fois pour le masque et pour l’objet masqué. Mais on sera obligé de passer par le code pour définir le masque, car l’option « Masque » du calque ne nous permettra pas d’obtenir l’effet escompté. On écrira donc, une fois l’objet et son masque créés et correctement instanciés :

objet_mc.setMask(masque_mc) ;

On a toujours le choix d’activer la mise en cache bitmap soit par le code, soit par les propriétés de l’objet dans l’interface Flash.

Cet effet pourra être utilisé notamment pour simuler un reflet sur un movie clip, quelle qu’en soit la nature (movie clip vectoriel, ou contenant une photo ou du texte dynamique).

On peut même appliquer un filtre sur le masque (flou, par exemple) !

Appliquer un alpha sur un movie clip composite

Sans doute avez-vous déjà constaté cet effet indésirable : On a un movie clip composé de différents objets graphiques (objets de dessins, symboles ou movie clips). Lorsqu’on applique une transparence sur ce movie clip, on s’attend à ce que celle-ci s’applique à l’objet dans son ensemble. Or, ce n’est pas le cas : la transparence s’applique à chaque objet contenu à l’intérieur du movie clip. En somme, sur un movie clip « mc », contenant des objets « a », « b », et « c », on obtient :

alpha(mc) = alpha(a)+alpha(b)+alpha(c)

alors qu’on voudrait :

alpha(mc) = alpha(a+b+c)

Là encore, il va nous falloir forcer le rendu du clip avant l’application de l’alpha. L’option de mise en cache des bitmaps semble suffire, car lorsqu’on la coche, le rendu du clip dans Flash se modifie de la façon souhaitée. Mais à la compilation, le rendu est toujours le même ! En revanche, dès que l’on applique un filtre, on s’aperçoit que le rendu est correct. On réglera les valeurs du filtre à zéro si nécessaire.

Il est intéressant de noter que cet effet alpha indésirable s’observe aussi sur un champ texte dont l’interlettrage est négatif.

Flash 8… et les autres ?

Toutes ces astuces nécessitent que le projet soit compilé en version 8 ou supérieure. Dans le cas où ça n’est pas possible, il faut garder à l’esprit que, sur un fond uni, les effets de transparence peuvent souvent être simulés simplement en jouant sur les couleurs ou les dégradés. Les masques d’opacité peuvent également être simulés en dupliquant une portion du fond par dessus l’élément, sous la forme d’un PNG transparent. Dans l’exemple ci-après, publié en Flash 6, le premier calque (en partant du bas) comporte la trame de fond. Le calque « Texte » comporte un movie clip, qui est dupliqué sur le calque « Texte inversé » par une symétrie d’axe horizontal. Entre les deux est intercalée une capture de la trame de fond préparée avec un masque de fusion dans Photoshop, exportée comme PNG transparent, et importée dans Flash.

Le résultat dans le SWF publié en version 6 est conforme, et peut s’appliquer à du texte dynamique (ou autres éléments graphiques) :

Simplement, c’est une option beaucoup moins souple, plus lourde à mettre en oeuvre, et qui aura tendance à gonfler le poids du swf, un peu inutilement.

A propos de la mise en cache bitmap et des filtres

Flash propose depuis la version 8 la « mise en cache des bitmaps à l’exécution », que nous avons ici un peu détournée de son utilisation de base. Cette fonction est normalement prévue pour permettre d’optimiser le rendu, à l’exécution, des symboles lourds à afficher. En effet, si le fait de travailler avec des tracés vectoriels présente de nombreux avantages (poids des objets graphiques très réduit, qualité maximale quelle que soit la résolution d’affichage…), il peut, dans certains cas, être un inconvénient : Flash doit de toutes façons fournir à l’écran un rendu sous forme de pixels, qu’il recalcule à chaque instant à partir des données vectorielles. C’est pourquoi des tracés vectoriels nombreux et complexes peuvent finir par ralentir considérablement l’affichage, à l’exécution. Au final, il peut être judicieux parfois de demander à Flash de mettre en cache les graphiques vectoriels lourds en tant que bitmaps, afin de lui éviter de les recalculer continuellement.

Évidemment, s’il s’agit d’un movie clip qui est en perpétuel mouvement (rotation en particulier), ou s’il est lui-même composé d’éléments animés, il n’est pas conseillé de choisir cette option, car Flash est de toutes façons contraint de recalculer son rendu. Dans ce cas, Flash perd du temps et beaucoup de mémoire à mettre en cache des bitmaps fugitifs.

Il est à noter que le terme de « mise en cache des bitmaps » est sans doute mal choisi – peut-être le fruit d’une traduction hasardeuse. On pourrait croire que cette fonctionnalité consiste à mettre en cache les images bitmaps importées dans Flash. L’équivalent de « cacheAsBitmap » serait plutôt « cacher en tant que bitmap », c’est-à-dire mémoriser un instantané de n’importe quel objet graphique sous forme d’un bitmap.

Adobe explique en détail « Quand activer la mise en cache ».

Les filtres, quant à eux, ne sont à la base pas conçus pour résoudre des problèmes d’opacité. La documentation Flash spécifie que l’application d’au moins un filtre sur un objet force la mise en cache bitmap de celui-ci – ce qu’on observe facilement en édition dans Flash : il suffit de zoomer sur un movie clip vectoriel comportant un filtre pour constater que le rendu est pixellisé (à l’exécution, en revanche, même avec un filtre, le movie clip reste en pleine qualité quelle que soit sa taille d’affichage). Mais à la lumière des exemples précédents, il semble que l’application d’un filtre force la mise en cache bitmap au-delà de ce que permet le cacheAsBitmap.

Pour ceux qui le souhaitent, les sources sont disponibles ici, au format CS3.

Cette entrée a été publiée le Mardi 11 mars 2008 à 11 h 02 min, et rangée dans Richmédia. Vous pouvez suivre les réponses à cette entrée via son flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un rétrolien depuis votre site.