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. Elle transmet à l'ordinateur une série d'instructions sur la géométrie de l'image à représenter. À charge à l'ordinateur de construire cette image à partir des indications reçues. Une image vectorielle par exemple codera un disque rouge en retenant les coordonnées de son centre, la grandeur de son rayon et la couleur de remplissage, c'est à dire en gros 3 informations.
Vous commencez peut être à saisir l'intérêt de l'image vectorielle appliquée au web où l'information circule à travers des canaux réduits de communication.
L'image vectorielle convient aux plans, aux schémas, aux graphiques, aux logos, et aux polices de caractères.

Elle présente un triple avantage : (1) elle donne naissance à des fichiers moins lourds que ceux correspondant à l'image matricielle (elle occupe peu de place en mémoire ; au lieu de mémoriser une matrice de points élémentaires, on stocke la succession d'opérations conduisant au tracé), (2) la conversion d'un fichier vectoriel en fichier bitmap s'effectue généralement bien et (3) elle peut être redimensionnée sans perte de qualité.

Elle présente de multiples inconvénients : (1) de ne convenir qu'aux formes géométriques relativement simples, mais de n'être appropriée ni aux photographies, ni aux images contenant des dégradés complexes et (2) de nécéssiter un plug-in pour être lue (comme peuvent s'en rendre compte ceux qui n'en sont pas équipés et qui voit une zone grise à la place) ; (3) l'apparence d'une image peut énormément varier en fonction du logiciel qui l'interprète ; cela dépend des algorithmes utilisés pour l'affichage ; les vecteurs sont plus efficacement rendus sur un système vectoriel (comme une table traçante). Un écran de haute résolution est nécessaire pour un affichage correct. (4) la reconstruction d'une image à partir de vecteurs peut prendre beaucoup plus de temps qu'une image bitmap de complexité égale.

 

L'image matricielle.
Elle est constituée de petits carrés accolés (les pixels), on parle d'une matrice de cases dont chacun à sa couleur propre, codée par un nombre (cf. Un guide pour vos débuts en HTML (02) - couleur de fond). L'image matricielle convient à tous les types d'image, mais elle donne naissance à des fichiers plus volumineux que l'image vectorielle. Tout format d'image matricielle, fonctionne selon ce principe. Si au départ le format bitmap (bmp) se contente d'enregistrer le tableau de pixels tel quel, des formats différents d'image (gif, pict, tiff...) se proposent d'enregistrer l'image de façon plus économique (en groupant par exemple les pixels voisins de même couleur). Il s'agit de la compression.

De plus, son redimensionnement s'accompagne d'une perte de qualité. Pour preuve :

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.

Présentation.
Sous ce dernier aspect très évolué, le format vectoriel s'appelle shockwave. C'est un format propriétaire libre de droit mais dont le principal logiciel de travail est privé et payant. Il s'agit de Flash.

Flash est un outil logiciel développé par 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 images matricielles dans une animation vectorielle. Depuis 2005, ce logiciel a été racheté par Adobe.

Mais, comme seul le logiciel Flash est propriétaire et payant, les défenseurs du logiciel libre ont créé l'équivalent Gnash qui utilise le format .SWF. D'après Wikipedia, "Gnash est un logiciel issu du projet GNU, qui se veut une alternative libre au lecteur d'animations vectorielles interactives Flash d'Adobe Systems. Il est utilisable comme une application individuelle, ou bien comme plugin pour les navigateurs internet Mozilla, Mozilla Firefox, Konqueror et Opera.
Gnash est disponible pour de nombreuses distributions GNU/Linux, ainsi que pour les systèmes d'exploitation FreeBSD, NetBSD, OpenBSD, IRIX. Des ports pour Darwin et Microsoft Windows sont en cours.
Il possède à l'heure actuelle de nombreuses fonctionnalités de la version 7 de Flash. Il supporte toutes les classes ActionScript 2, mais toutes les méthodes ne sont pas encore complètement implémentées ; des développeurs supplémentaires sont arrivés dans cette optique.

D'autres logiciels peuvent aussi exporter des fichiers au format SWF, par exemple OpenOffice, Swift ou Toon Boom Studio.

Parce qu'il n'existait pas d'alternative libre à Flash avant sa création, Gnash est considéré comme un projet prioritaire par la Free Software Foundation. De plus, Flash n'étant disponible que sur un nombre restreint d'architectures et de systèmes d'exploitation, les utilisateurs de certains systèmes d’exploitation libres pour 64 bits ou pour PowerPC ne pouvaient pas visualiser des animations flash. Le projet Gnash est hébergé par Savannah et est développé principalement par Rob Savoye."

Ce format SWF est une des nouveautés qui fasse fureur sur le web, où il est en passe de devenir incontournable. Ainsi, une étude du CERIG montre que 20 % des sites web du secteur des industries graphiques contiennent des animations, réalisées pour la plupart à l'aide de Flash. Le logiciel Flash est tellement orienté vers l'image animée que les fichiers qu'il crée sont toujours appelés des "animations Flash", même si lesdits fichiers ne contiennent que du texte et/ou des images fixes. Nous nous conformerons à cet usage dans la suite de ce chapitre.
 

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 ci-dessous (reprises du site akvis.com) montre comment un simple dessin au trait, de petit poids informatique (soit 111 octets) peut être agrandi sans déformation :

Les images représentées ci-dessous et reprises du même site, illustrent aussi 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.

Si vous possédez Internet Explorer, utilisez la fonction "Zoom avant" pour agrandir ces images. La différence entre une image matricielle et une image vectorielle vous sautera aux yeux !

Pour l'instant, Flash est très rarement utilisé comme format d'image fixe, parce que les concepteurs de sites pensent que l'investissement dans un logiciel coûteux ne justifie pas l'apport souhaité. À l'avenir, peut-on penser que 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.
On estime cependant que plus de 90 % des internautes sont équipés du plug-in Flash correspondant. Certes, il est regrettable que ce format soit la plupart du temps utilisé pour réaliser des animations ineptes, qui n'ont pas d'autre résultat que d'impatienter l'internaute (d'où la présence du fameux bouton "skip intro"). Mais ces errements n'enlèvent rien à la valeur technique du produit.

Les images vectorielles animées.
On peut convertir gratuitement et simplement un diaporama .ppt en .swf avec le logiciel Impress de la suite OpenOffice.org !

Pour cela :
- télécharger la suite OpenOffice
- une fois installée, ouvrir "OpenOffice.org Impress"
- cliquer sur "Créer"
- cliquer sur "Fichier", "Ouvrir..." puis chercher son diaporama
- une fois son diapo ouvert, aller dans "Fichier", "Exporter..."
- comme format de fichier, choisir "Macromedia Flash (SWF) .swf"
- "OK" et c'est bon

Ensuite, il suffira de convertir le fichier .swf en .exe avec un autre logiciel
Exemples de logiciels :
http://www.flashkeeper.com/download.htm
http://www.eltima.com/fr/download/swf-tools/
http://www.logitheque.com/fiche.asp?I=19619&L=SWF+Toolbox
http://www.bytescout.com/flashextractor_how_to_convert_swf_to_exe.html

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.
 

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 !

Et pour ceux qui veulent découvrir une série de tutoriels OpenOffice, écrits au format .SWF, nous les invitons à découvrir ce beau travail pédagogique de Guillaume Durieux.

L'image gif animée.
Sur le web, Flash concurrence l'image GIF animée (format 89a), avec l'avantage et l'inconvénient suivants :

L'image gif animée ne va pas disparaître du web du jour au lendemain, mais Flash lui fait une concurrence de plus en plus rude. Pour l'instant, l'image gif animée est principalement utilisée dans les bandeaux publicitaires, dont les animations sont fort rudimentaires, et Flash ne l'a pas encore délogée de cette application. Par ailleurs, l'image gif animée a fait des progrès : on peut désormais n'enregistrer que les modifications dans les images successives, ce qui allège d'autant la taille du fichier pour certains types d'animation.
 

L'applet Java.
L'applet Java est un autre outil utilisé pour créer des animations dans les pages web. C'est un petit programme, écrit en langage Java, qui n'est pas stocké dans le cache du navigateur ; il est directement téléchargé dans la mémoire vive de l'ordinateur client, d'où il disparaît dès que la page web est refermée. Il s'exécute dans une fenêtre (dont la taille doit être précisée). Dans le domaine des animations, l'applet le plus célèbre, et le plus spectaculaire, permet de simuler le reflet d'une image quelconque dans une eau miroitante (il en existe plusieurs variantes). Mais, pour créer un applet, il faut savoir programmer en Java, ce qui nécessite un gros effort de formation, au regard d'un résultat modeste. C'est pourquoi l'applet est peu utilisé sur le Net. Vous pouvez désactiver la JVM (Java Virtual Machine) de votre navigateur, et surfer sur le web sans vous apercevoir de rien -- sauf sur de très rares sites. Flash va certainement donner le coup de grâce à l'applet -- du moins dans le domaine de l'animation, car l'applet permet de réaliser d'autres applications.
 

Les formats de la vidéo.
Ces formats concernent tous l'image matricielle. Ils souffrent tous du même handicap : le débit du web est trop faible pour permettre une bonne vidéo en direct, et la technique du streaming est un pis-aller (utilisable également avec Flash). Les formats de la vidéo ne concurrencent pas Flash, et il ne vient à l'esprit de personne de les utiliser pour transmettre des images animées sur le web.
 

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.
 

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 ?

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. Depuis le 1er juillet 2008, Google a lancé l'indexation des fichiers Flash. Peu de temps après, Yahoo a décidé de suivre cette option. Plusieurs responsables de moteurs de recherche ont lancé un avertissement aux concepteurs de sites : ne flashez pas vos pages web !

Certains webmestres pensaient avoir trouvé une parade dans l'utilisation du "cloaking". On installait sur son serveur web un logiciel qui coûtait moins de 100 $... et quand le robot du moteur de recherche se présentait, on lui servait une page qui n'est pas flashée en lieu et place de celle qui l'est. On en profitait pour tricher encore un peu plus, en bourrant ladite page "fantôme" de mots-clés alléchants.
L'internaute pris à ce piège enrageait, quand il découvrait que le mot-clé qui l'avait conduit vers une page n'y figurait pas. Les responsables des moteurs de recherche détestaient les pages fantômes, mais il ne semble pas qu'ils avaient trouvé la parade adéquate. Patience !

Une autre astuce consistait à reproduire sous forme de remarque le texte flashé. Les navigateurs n'affichent pas les remarques, mais quelques moteurs de recherche sont réputés en tenir compte. Le logiciel Flash, d'ailleurs, fait systématiquement l'opération pour vous. Quelle est l'efficacité réelle de cette façon de procéder ? Faible, sans doute, et variable selon les moteurs.

La solution qui nous parait la plus raisonnable consiste à dédoubler les pages, comme on le fait souvent pour celles comportant des cadres. A l'internaute, on propose de choisir entre voir la page en version Flash ou la voir en version HTML. La page sera indexée normalement par les moteurs de recherche grâce à sa version HTML. L'inconvénient est le même que pour les pages comportant des cadres : la création et la maintenance des pages dédoublées est beaucoup plus lourde. En examinant son trafic, le webmestre peut juger du succès des pages flashées, et savoir si le jeu en vaut la chandelle (voir plus loin l'expérience du Cerig).
 

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 Adobe, 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. 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.

Il est clair que la fonction "Fichier / Importer..." est l'un des points faibles de Flash. Cette fonction est essentiellement dirigée vers les images, et même ainsi elle ne fonctionne pas toujours très bien. Le format 8 d'Illustrator n'est pas reconnu (il faut procéder par copier-coller, ou utiliser le format 7), et les dégradés passent mal hors du format swf. En pratique, il faut procéder par copier-coller quand l'importation marche mal, et vice versa.
 

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 !

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.

Il faut donc toujours appeler les fichiers SWF à partir d'une page web, grâce à la balise EMBED. Cette dernière possède deux attributs (WIDTH et HEIGHT) précisant les dimensions de l'animation Flash. Celles-ci peuvent être indiquées en valeur absolue (pixels) ou en valeur relative (pourcentage). Il est donc possible de choisir entre une présentation fixe et une présentation relative.
 

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. À 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.

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.

   Les animations, certes, permettent aux agences de communication de séduire le client, de se démarquer des concurrents, de faire monter les coûts -- et aux spécialistes de se faire plaisir. Mais les experts en communication s'interrogent : donne-t-on vraiment une image plus dynamique de l'entreprise en rajoutant une page tunnel flashée à son site ? Les risques associés à Flash (lenteur du chargement, obligation de télécharger le module externe, risques de plantage, impossibilité d'établir un lien hypertexte vers une page entièrement flashée) valent-ils la peine d'être courus ? À quoi sert une animation Flash si la majorité des internautes, lassés d'attendre, finissent par appuyer sur le bouton "skip intro" ? Et l'éternelle question est remise sur le tapis : l'internaute vient-il sur un site pour s'amuser, ou pour en examiner le contenu ?
   Peut-être espère-t-on, chez l'éditeur Macromedia, que les pages flashées supplanteront un jour les pages HTML, mais un tel dénouement parait peu vraisemblable. Il semble (écrit fin 2001) que le nombre des pages tunnel flashées soit encore en augmentation, mais que celui des pages entièrement flashées reste très faible.
   L'opinion de l'auteur de ces lignes est qu'il se passera sans doute pour Flash ce qui s'est produit précédemment pour PDF : un engouement initial important, cause d'une utilisation à tort et à travers, suivi d'une période de réflexion, conduisant à un usage mieux ciblé, plus restreint, mais beaucoup plus raisonnable, de l'outil.
   Flash constitue donc une solution peu crédible au problème de la typographie sur le web.