Les bases de l'utilisation des bitmaps

Introduction à l'utilisation des images bitmap

Tout travail avec des images numériques nécessite de gérer deux types de graphismes : les images bitmap et les images vectorielles. Les bitmaps, également appelés graphismes en points, sont composés de petits carrés (les pixels) organisés en une grille rectangulaire. De leur côté, les graphismes vectoriels sont composés de formes géométriques (lignes, courbes et polygones) générées à l'aide de formules mathématiques.

Les images bitmap sont définies par la largeur et la hauteur de l'image, mesurées en pixels, et par le nombre de bits contenu dans chaque pixel (ce nombre de bits définit le nombre de couleurs que peut comporter l'image). Dans le cas d'une image bitmap utilisant le modèle colorimétrique RVB, les pixels sont composés de trois octets : rouge, vert et bleu. Chaque octet contient une valeur comprise entre 0 et 255. C'est la combinaison de ces octets pour chaque pixel qui produit une couleur, un peu comme le mélange des couleurs de base par un peintre. Par exemple, un pixel contenant les valeurs 255, 102 et 0 respectivement pour les octets dévolus au rouge, au vert et au bleu produira un orange vif.

La qualité d'une image bitmap est déterminée en combinant la résolution en pixels de l'image avec sa profondeur de couleur exprimée en bits ou en octets. La résolution définit le nombre de pixels contenus dans l'image. Plus le nombre de pixels est important, plus la résolution est élevée et plus l'image semble bien définie. La profondeur de couleurs définit la quantité d'informations colorimétriques contenues par chaque pixel. Par exemple, une image ayant une profondeur de couleur de 16 bits par pixel ne peut pas représenter un nombre de nuances aussi élevé qu'une image ayant une profondeur de couleur de 48 bits. En conséquence, l'image sur 48 bits aura plus de nuances que la version sur 16 bits.

Dans la mesure où les graphismes bitmap dépendent de la résolution, il est délicat de modifier leur échelle, ce qui se remarque particulièrement avec les images bitmap agrandies, qui perdent beaucoup de détails et de qualité.

Format des fichiers bitmap

Les images bitmap existent en divers formats de fichier. Ces formats utilisent différents types d'algorithmes de compression pour réduire la taille des fichiers et optimiser la qualité de l'image en fonction de sa destination. Les formats d'image bitmap pris en charge par Flash Player sont les suivants : GIF, JPG et PNG.

GIF

Le format GIF (Graphics Interchange Format) fut développé à l'origine par CompuServe en 1987, dans le but de transmettre des images en 256 couleurs (codées sur 8 bits). Ce format, qui permet d'obtenir des fichiers de petite taille, est très utilisé pour les images sur le Web. Toutefois, en raison de son nombre limité de couleurs, ce format n'est pas adapté aux photographies, qui nécessitent en général un nombre de nuances plus élevé. Les images GIF autorisent la transparence sur un bit, ce qui permet de rendre les couleurs invisibles (ou transparentes). C'est ainsi que sont produits les fonds transparents des images de pages Web.

JPEG

Développé par le Joint Photographic Experts Group (JPEG), le format d'image JPEG (souvent noté JPG) fait appel à un algorithme de compression avec perte pour autoriser une profondeur de couleur de 24 bits avec une taille de fichier très réduite. En raison de la compression avec perte, chaque fois que l'image est enregistrée elle perd des données, donc de la qualité, mais la taille de fichier résultante en est d'autant plus réduite. Le format JPEG est idéal pour les photographies, car il permet d'afficher des millions de couleurs différentes. La possibilité de contrôler le taux de compression appliqué à l'image permet de modifier la qualité de l'image et la taille du fichier.

PNG

Le format PNG (Portable Network Graphics) a été créée comme autre possibilité gratuite (open source) au format de fichier GIF, qui est breveté. Les fichiers PNG acceptent jusqu'à 64 bits de profondeur de couleur, ce qui permet d'obtenir jusqu'à 16 millions de couleurs. Le format PNG étant relativement récent, les versions anciennes de certains navigateurs ne gèrent pas ces fichiers. Contrairement au JPG, le format PNG utilise une compression sans perte, ce qui signifie qu'aucune donnée de l'image n'est perdue lors de l'enregistrement. De plus, les fichiers PNG acceptent également la transparence alpha, ce qui autorise jusqu'à 256 niveaux de transparence.

Fichiers bitmap transparents et opaques

Les images bitmap qui utilisent le format GIF ou PNG peuvent comporter pour chaque pixel un octet supplémentaire pour le canal alpha. Cet octet de pixel supplémentaire représente la valeur de transparence du pixel.

Les images GIF n'autorisent la transparence que sur la base d'un bit, ce qui ne permet de spécifier la transparence que pour une seule couleur (dans une palette de 256 couleurs). Par contre, les images PNG acceptent jusqu'à 256 niveaux de transparence. Cette caractéristique est particulièrement intéressante pour « fondre » les images ou le texte avec l'arrière-plan.

ActionScript 3.0 permet de gérer cet octet supplémentaire de transparence à l'aide de la classe BitmapData. Suivant le modèle de transparence PNG, la constante BitmapDataChannel.ALPHA permet d'obtenir jusqu'à 256 niveaux de transparence.

Tâches courantes d'utilisation des bitmaps

Voici plusieurs tâches courantes susceptibles d'être accomplies en cas d'utilisation d'images bitmap en ActionScript:

Affichage de bitmaps
Récupération et modification des valeurs de couleur des pixels
Copie de données bitmap :
- création d'une copie exacte d'un bitmap
- copie des données d'un canal couleur d'une image bitmap dans un canal couleur d'une autre image bitmap
- Copie sous forme de bitmap d'un objet d'affichage apparaissant à l'écran
Création de bruit et de textures sous forme d'images bitmap
Défilement du contenu d'images bitmap

Concepts importants et terminologie

La liste suivante énumère les termes importants que vous rencontrerez dans ce chapitre :

Alpha : niveau de transparence (ou, plus précisément, d'opacité) d'une couleur d'une image. La valeur alpha est fréquemment appelée valeur du canal alpha.
Couleur ARVB : modèle colorimétrique suivant lequel la couleur de chaque pixel est définie selon ses composants rouge, vert et bleu, ainsi que par sa transparence spécifiée comme valeur alpha.
Canal de couleur : en général, les couleurs sont représentées par le mélange des couleurs primaires, rouge, vert et bleu. Chaque couleur primaire est considérée comme un canal de couleur. C'est le mélange des proportions de chaque canal de couleur qui détermine la couleur finale.
Profondeur de couleur : parfois appelée codage des couleurs, cette caractéristique détermine la quantité de mémoire vice dévolue à chaque pixel, ce qui, indirectement, définit le nombre de couleurs qu'il est possible d'afficher.
Pixel : unité d'information de base pour une image bitmap (en essence, un point coloré).
Résolution : dimensions d'une image en pixels, ce qui détermine le niveau de détails fins qu'il est possible de séparer dans l'image. La résolution est fréquemment exprimée en nombre de pixels pour la largeur et la hauteur.
Couleur RVB : modèle colorimétrique suivant lequel la couleur de chaque pixel est définie selon ses composants rouge, vert et bleu.

Utilisation des exemples des chapitres

Au fur et à mesure que vous avancez dans le chapitre, vous pouvez tester les exemples de code. Etant donné que ce chapitre décrit comment créer et manipuler du contenu visuel, le test du code implique l'exécution du code et l'affichage des résultats dans le fichier SWF créé.

Pour tester les exemples de code de ce chapitre :

Créez un document Flash vide.
Sélectionnez une image-clé dans le scénario.
Ouvrez le panneau Actions et copiez le code de l'exemple dans la fenêtre de script:
Choisissez Contrôle > Tester l'animation pour exécuter le programme.
Les résultats du code apparaissent dans le fichier SWF créé.

Presque tous les exemples de code créent une image bitmap, vous pouvez donc tester le code directement sans fournir aucun contenu bitmap. Si vous souhaitez tester le code à l'aide de vos propres image, importez celles-ci dans Adobe Flash CS3 Professional ou chargez des image externes dans le fichier test SWF pour utiliser leurs données avec le code des exemples. Pour toutes instructions sur le chargement d'images externes, consultez la section Chargement dynamique de contenu à afficher.

Flash CS3

M'envoyer un message électronique lorsque des commentaires sont ajoutés à cette page | Rapport de commentaire

Page en cours: http://livedocs.adobe.com/flash/9.0_fr/main/00000242.html