![]() |
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base de données | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
DOSSIER | ![]() |
![]() |
cerig.efpg.inpg.fr |
---|---|---|---|---|---|---|
![]() |
|
J.C.Sohm | Mise à jour : 04 décembre 2001 | ![]() |
---|
LA TYPOGRAPHIE du WEB |
---|
7- Cédons à la mode : Flash ! |
Introduction : l'image vectorielle et l'image matricielle | |||||||||
![]() |
Il existe deux types d'image numérique : l'image vectorielle et l'image matricielle. | ![]() |
|||||||
L'image vectorielle. Elle est constituée de courbes, d'aplats et de dégradés simples, tous décrits par des formules mathématiques. L'image vectorielle convient aux plans, aux schémas, aux graphiques, aux logos, et aux polices de caractères. Elle présente un double avantage : elle donne naissance à des fichiers moins lourds que ceux correspondant à l'image matricielle, et elle peut être redimensionnée sans perte de qualité. Elle présente l'inconvénient de ne convenir ni aux photographies, ni aux images contenant des dégradés complexes. |
|||||||||
L'image matricielle. Elle est constituée de petits carrés accolés (les pixels), dont chacun à sa couleur propre. L'image matricielle convient à tous les types d'image, mais elle donne naissance à des fichiers plus volumineux que l'image vectorielle. De plus, son redimensionnement s'accompagne d'une perte de qualité. |
|||||||||
Usages. Les deux types d'image, qui présentent chacun leurs qualités et leurs défauts propres, cohabitent depuis que l'on numérise les images. Ainsi en est-il dans les arts et industries graphiques (en PAO en particulier), dans les SIG (Système d'Information Géographique), dans le dessin et la conception assistés par ordinateur (CAO/DAO), etc. Même le simple traitement de texte a connu les deux types d'image : à l'origine, les polices de caractère étaient matricielles, aujourd'hui elles sont devenues vectorielles, ce qui constitue un net progrès. |
|||||||||
Le cas du web. Seul le web a fait exception à la règle : jusqu'à l'apparition de Flash, il ne connaissait que l'image matricielle -- et personne ne peut dire les raisons d'une telle situation. Il y a un an, le W3C (World Wide Web Consortium), qui normalise le logiciel utilisé sur le web, a fini par s'émouvoir, et par lancer un projet de format vectoriel pour le web intitulé SVG (Scalable Vector Graphics). Le 04 septembre dernier, une "recommandation" définitive a été émise à ce sujet. L'éditeur Adobe, qui voudrait bien concurrencer le produit Flash de Macromedia, soutient à fond ce nouveau format, et la version 10 d'Illustrator -- le logiciel de dessin vectoriel bien connu -- permet d'enregistrer au format SVG. Mais... tout n'est pas rose dans cette affaire : pour visualiser une image SVG, il faut télécharger un lecteur. Si la prochaine édition des navigateurs supporte nativement le format SVG, le succès de ce dernier sera probablement assuré. En attendant, certains acteurs du web pensent que le W3C et Adobe se sont réveillés trop tard : Flash occupe le terrain ! Cette affaire n'étant pas la première du genre, on en en vient à se demander si le W3C sert encore à quelque chose. |
|||||||||
Le logiciel Flash | |||||||||||||||||||||||||||
![]() |
Présentation. Flash est un outil logiciel de l'éditeur
Macromedia, qui remplit essentiellement trois fonctions : créer des images vectorielles, les animer, et les rendre interactives.
Il permet aussi d'introduire des image matricielles dans une animation vectorielle. La version 5 est même équipée d'un langage de
programmation associé (ActionScript), qui renforce encore les possibilités du logiciel. La version 6 est annoncée. |
![]() |
|||||||||||||||||||||||||
Les images fixes. La première idée qui vienne à l'esprit est d'utiliser Flash pour les images fixes se prêtant bien à une représentation vectorielle (dessins au trait, logos, schémas, lettrines, etc.). On peut effectivement introduire dans une page web des images fixes au format SWF (grâce à la balise EMBED), et bénéficier des avantages inhérents au format vectoriel en général, et au format SWF en particulier : |
|||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||
Les images représentées ci-dessous illustrent notre propos. L'arbre a été dessiné dans Flash,
puis enregistré successivement dans les format GIF (image n° 1) et SWF (image n° 2). La taille du fichier GIF est
2.210 octets, celle du fichier SWF 410 octets ; la taille de l'image flashée est donc, dans cet exemple, cinq fois plus
petite ! On peut, certes, diminuer un peu la taille du fichier GIF, en réduisant le nombre de couleurs de 45 à 16 dans la palette
(cela rend la compression LZW plus efficace). Ce résultat est obtenu au prix d'une légère dégradation de l'image (image n° 3),
sans conduire pour autant à un fichier aussi léger que celui généré par Flash. |
|||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||
Pour l'instant, Flash est très rarement utilisé comme format d'image fixe, parce que les concepteurs de sites savent que tous les internautes ne sont pas équipés du lecteur Flash. A l'avenir, cet obstacle disparaîtra, et le format SWF remplacera le format GIF pour la transmission des images fixes qui sont susceptibles d'un traitement vectoriel. Pour celles qui ne le sont pas, on continuera sans doute à utiliser le format JPEG, qui a été conçu pour cela. |
|||||||||||||||||||||||||||
Les images vectorielles animées. Créer une animation
constituée d'images vectorielles est le point fort de Flash. Ci-dessous se trouve un exemple d'animation simple réalisée avec ce
logiciel. |
|||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||
Vous n'avez sans doute pas envie de voir cette animation s'agiter indéfiniment ! Vous pouvez la piloter d'un clic droit de souris ; les fonctions suivantes s'affichent alors : | |||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||
L'interactivité. Pour la création d'images interactives (boutons avec effet de rollover, par exemple), Flash s'avère plus commode d'emploi -- sinon plus puissant -- que le langage JavaScript, qu'il commence à refouler hors de cette application. Il faut bien dire que le langage JavaScript n'est ni facile à apprendre, ni commode à utiliser -- sauf pour les inconditionnels de la programmation, bien sûr ! |
|||||||||||||||||||||||||||
Une tentation forte : flasher les pages web | ||
![]() |
On peut enregistrer du texte sous forme de code ou sous forme d'image. | ![]() |
Le codage du texte. L'enregistrement codé est le plus courant, et ce pour de multiples raisons. Le code ASCII, issu des télécommunications, s'est imposé en informatique, où il a supplanté tous ses rivaux. Le code ASCII est d'un usage universel : tous les logiciels qui traitent du texte le lisent, quelle que soit la plate-forme utilisée. Le texte des pages web, bien sûr, est codé en ASCII (étendu, à cause des caractères accentués), et les informations typographiques nécessaires à la mise en forme des caractères sont contenues dans des balises. Comme le HTML ne prévoit pas le téléchargement des polices de caractères, le navigateur est obligé d'utiliser celles qui se trouvent sur la machine de l'internaute. D'où les problèmes que nous avons évoqués dans les chapitres précédents. |
||
La transformation du texte en image. Si le texte est traité comme une image, il est transmis à l'internaute avec sa typographie. Le problème du téléchargement de la police ne se pose plus, et l'internaute ne peut pas modifier la présentation. Mais la taille du fichier résultant est plus élevée, et il faut choisir un format d'image dont on soit sûr qu'il est lisible par la machine réceptrice. |
||
Le flashage du texte. Le dessin d'un caractère se prêtant bien à une représentation mathématique, l'image vectorielle convient mieux que l'image matricielle à la transmission du texte sous forme d'image, car la taille des fichiers est moindre. Il est donc tentant d'utiliser Flash pour transmettre du texte sur le web. La tentation est d'autant plus grande que Flash -- comme la plupart des logiciels de dessin -- permet d'éditer du texte, et qu'il possède de bons outils pour le mettre en forme. |
||
La typographie dans Flash | |||||||||||||||||||||||
![]() |
Les fonctionnalités de Flash en matière de typographie sont partagées entre la barre d'outils (outil "texte"), et la rubrique "Modifier" du menu. Cette dernière est divisée en quatre sous-rubriques : "crénage", "paragraphe", "police" et "style". L'utilisateur peut ainsi choisir : |
![]() |
|||||||||||||||||||||
|
|||||||||||||||||||||||
Au vu de ce qui précède, on s'aperçoit que Flash possède presque toutes les fonctionnalités requises pour réaliser une bonne typographie ; seules la chasse et la distance entre les mots ne sont pas réglables. De plus, Flash contourne de manière élégante le problème du téléchargement des polices. Comment se fait-il qu'il ne soit pas plus souvent utilisé pour présenter des pages de texte ? |
|||||||||||||||||||||||
Pourquoi Flash est-il peu utilisé pour le texte ? | |||||||||||||||||
![]() |
Au CERIG, nous avons recensé diverses raisons qui expliquent cet état de fait : | ![]() |
|||||||||||||||
|
|||||||||||||||||
L'absence d'indexation. Ce point est très
important : une page qui n'est pas -- ou très peu -- indexée, n'apparaît pas -- ou se trouve très mal classée et n'est pas vue
-- quand les internautes interrogent les moteurs de recherche. Plusieurs responsables de moteurs de recherche ont lancé un
avertissement aux concepteurs de sites : ne flashez pas vos pages web ! |
|||||||||||||||||
La taille des fichiers. Comme nous l'avons vu au chapitre 2, la taille du fichier d'une page web flashée est nettement moindre que celle de la même page transformée en image gif. Mais cette taille reste nettement supérieure à celle du fichier HTML correspondant. Pour limiter le temps d'attente de l'internaute, on peut flasher la page en plusieurs animations placées les unes à la suite des autres. On peut également songer à utiliser la technique du streaming. |
|||||||||||||||||
L'équipement des internautes. Les fichiers SWF générés par Flash (fonction "Publier") ne peuvent être lus par le navigateur que si le lecteur correspondant a été installé comme module externe. C'est toujours le cas avec les versions récentes des navigateurs, mais les internautes qui possèdent une version ancienne doivent se rendre sur le site de l'éditeur Macromedia, et télécharger gratuitement le lecteur. Au mois de mars dernier, si l'on en croit les chiffres cités par l'éditeur, 90 % des internautes étaient équipés du lecteur Flash. Ce taux de pénétration très élevé parait rassurant, mais la situation réelle est sans doute un peu moins rose, pour deux bonnes raisons au moins : |
|||||||||||||||||
|
|||||||||||||||||
Ce problème se réglera progressivement au cours du temps, car Flash est désormais systématiquement incorporé aux deux grands navigateurs du marché, ou proposé lors de leur téléchargement. |
|||||||||||||||||
Les liens hypertextes. Le logiciel Flash prévoit la création de liens hypertextes sur les boutons seulement. De plus, le concepteur doit gérer lui-même le soulignement et le changement de couleur des liens. Voilà qui est bien malcommode ! |
|||||||||||||||||
L'importation de texte dans Flash. L'importation de texte
simple (format ".txt") est prévue, mais ne fonctionne pas (version 4). On peut copier-coller du texte, mais la typographie
et la mise en page sont perdues. Pour les reconstituer, on peut importer une copie de la page sous forme d'image matricielle, la placer
sur un calque sous-jacent, et s'en servir de guide pour reconstituer la page sur un calque supérieur. Quand l'opération est terminée,
on supprime le calque inférieur. Ceci montre que les concepteurs de Flash songeaient à l'image, pas au texte. |
|||||||||||||||||
Divers. Le pilotage des animations Flash via le clic droit de
la souris supprime le menu contextuel correspondant. C'est très gênant lorsque toute la page qui s'affiche dans le navigateur est
flashée : il n'y a plus le moindre recoin sur lequel on puisse cliquer -- soit pour créer un raccourci (IE et NS) -- soit
pour ouvrir un cadre dans une nouvelle fenêtre, ou pour dresser la liste des liens ou des images de la page, ou pour afficher les
propriétés de l'objet sur lequel on clique (IE seulement). Par ailleurs, le lecteur Flash (Flash player) n'est pas parfait, et les animations complexes le bloquent assez facilement. Enfin certains pensent déjà qu'il serait possible de transmettre des virus via Flash... espérons qu'ils se trompent ! |
|||||||||||||||||
Présentation des pages flashées | ||
![]() |
Une erreur à ne pas commettre. Les navigateurs acceptent
d'afficher directement les fichiers au format SWF, pourvu que le module externe Flash soit en place. Nous en avons fait l'expérience
au chapitre 2, et nous pouvons la
reproduire
ici (le fichier s'ouvrira dans une fenêtre séparée). L'inconvénient d'une telle solution apparaît immédiatement quand on fait
varier les dimensions de la fenêtre : le navigateur fait subir une homothétie à l'animation Flash, de telle sorte que la fenêtre
la contienne entièrement. Les barres de défilement ne sont jamais actives. A la résolution du VGA, les caractères sont affichés dans
une taille si petite qu'il devient très difficile de lire le texte. |
![]() |
La présentation fixe. Les dimensions de l'animation Flash sont exprimées en pixels ; on utilise celles de la scène, ou des valeurs homothétiques. Lorsqu'on fait varier les dimensions de la fenêtre du navigateur, celles de l'animation Flash ne changent pas ; les barres de défilement se mettent en place si nécessaire. Il est prudent d'utiliser une largeur compatible avec le VGA, car 5 % encore des internautes observent le web avec cette résolution d'écran. A titre d'exemple, on peut examiner le fichier test.swf du chapitre 2 en présentation fixe centrée dans une page HTML, et faire varier les dimensions de la fenêtre du navigateur (ouverture dans une fenêtre séparée). |
||
La présentation relative. Les dimensions de l'animation Flash sont alors exprimées en pourcentage. Lorsqu'on fait varier les dimensions de la fenêtre du navigateur, celles de l'animation Flash varient en conséquence. A titre d'exemple, on peut examiner le fichier test.swf du chapitre 2 en présentation relative dans une page HTML, et faire varier les dimensions de la fenêtre du navigateur (ouverture dans une fenêtre séparée). Comme on le constate, cette présentation présente les mêmes défauts que le chargement direct du fichier swf : si la fenêtre du navigateur est petite, le texte est illisible. Pour du texte, cette présentation n'est pas recommandable. |
||
Conclusion | ||||||||||||||||||||
![]() |
Actuellement, Flash est l'objet d'une véritable mode chez les concepteurs de sites, et auprès des agences de communication, qui l'utilisent pour créer : |
![]() |
||||||||||||||||||
|
||||||||||||||||||||
L'utilisation de Flash pour la réalisation de dessins animés, de bandeaux publicitaires et de
jeux en ligne parait tout à fait indiquée. Son utilisation pour la réalisation de pages tunnel, d'éléments de navigation et surtout de
pages entièrement flashées, nous semble par contre très contestable. |
![]() |
![]() |
![]() |
![]() |
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base de données | |
Copyright © CERIG/EFPG 1996-2000 |
|
![]() |
![]() |