Flash CS4 - Utilisation et modification de bitmaps

De EduTech Wiki
Aller à la navigation Aller à la recherche

<pageby nominor="false" comments="false"/>

Introduction

Objectifs d'apprentissage

  • Survol des méthodes pour traiter un bitmap dans Flash
  • A faire: Traitements de base avec un programme externe

Prérequis

Matériel (fichiers *.fla à manipuler)

  • [1] (répertoire)

Qualité et niveau

Ce tutoriel aidera les adeptes de la technique à démarrer. Le niveau de ce tutoriel est un peu haut pour les novices, mais peut servir comme des fiches pratiques dans un atelier.

Prochaines étapes

Autres versions

Lorsque vous importez une image bitmap dans Flash, vous pouvez la manipuler et l'exploiter de nombreuses manières dans votre document Flash.

Importer

Il y a trois solutions:

  • Vous pouvez simplement copier depuis le presse-papiers un graphique bitmap dans la bibliothèque. Par exemple, si vous voyez une belle texture sur Internet (libre de droit) avec le navigateur Firefox, procédez comme suit: (1) Voir l'image, (2) Copier l'image, (3) CTRL-V dans Flash
  • Enregistrer l'image sur votre ordinateur puis cliquer sur le bouton Import dans le panneau des couleurs réglé sur type = bitmap.
  • Importer le bitmap avec File->Import, Import to stage pour afficher le graphique bitmap sur la scène ou Import to library pour intégrer le graphique bitmap dans la bibliothèque.

Définition des propriétés des images bitmap

1) Sélectionnez une image bitmap dans le panneau Bibliothèque, puis cliquez sur le petit bouton Propriétés en bas du panneau.

2) Sélectionnez Allow smoothing (Autoriser le lissage). Le lissage améliore la qualité des images bitmap lorsqu'elles sont mises à l'échelle.

3) Dans la section Compression, vous pouvez régler la compression, soit JPEG (pour les photos et autre images avec beaucoup de couleurs) ou PNG/GIF pour les graphiques

Application d'une image bitmap comme remplissage

Voir Flash CS4 - Couleurs et gradients (Dessin avec un bitmap)

Division d'un bitmap et création d'un remplissage bitmap

Vous pouvez break apart (diviser) un bitmap pour modifier l'image avec les outils de dessin et de peinture de Flash.

  1. Mettez le bitmap sur la scène
  2. Clic-droit -> break apart

Maintenant votre bitmap s'est transformé en shape et vous pouvez manipuler les pixels de l'image. Une opération fréquente est de changer les couleurs ou encore de détruire des pixels.

  1. Sélectionnez l'outil Lasso, cliquez sur le modificateur baguette magique (magic wand), puis définissez les options suivantes :
    • Pour Threshold (seuil), entrez une valeur comprise entre 1 et 200 pour définir le degré de correspondance nécessaire entre les couleurs des pixels adjacents pour qu'ils soient inclus dans la sélection. Une valeur élevée inclut un plus grand nombre de couleurs. Si vous entrez 0, seuls les pixels ayant exactement la même couleur que le premier pixel sur lequel vous cliquez seront sélectionnés.
    • Pour smoothing (lissage), définissez le degré de lissage des bords de la sélection en sélectionnant une option.
  2. Pour sélectionnez une zone ayant la même couleur (ou des couleurs proches selon vos règlages), cliquez sur le bitmap. Pour agrandir la sélection, continuez de cliquer.
  3. Pour détruire une sélection, appuyez sur la touche delete.
  4. Alternativement, pour remplir les zones sélectionnées dans l'image bitmap, choisissez le remplissage désiré dans la commande Couleur de remplissage.
  5. Pour appliquer le nouveau remplissage, sélectionnez l'outil Pot de peinture et cliquez en un endroit quelconque de la zone sélectionnée.

Une fois terminé, vous pouvez tout sélectionner (CTRL-A) et faire une union.

C.f. Division d'un bitmap et création d'un remplissage bitmap (Manuel Adobe)

Voir aussi la conversion d'une image bitmap en graphique vectoriel ce-dessous (tracing).

Convertir une image bitmap en image vectorielle

La commande Tracer le bitmap (bitmap tracing) convertit un bitmap en graphique vectoriel avec des zones de couleur modifiables et discontinues. Vous pouvez alors manipuler l'image comme un graphique vectoriel et réduire la taille de son fichier. Ceci dit, si vous gardez la même résolution, le résultat sera plus "lourd"...

Lorsque vous convertissez une image bitmap en graphique vectoriel, ce dernier n'est plus lié au symbole du bitmap dans le panneau Bibliothèque.

Procédure: 1. Sélectionnez un bitmap sur la scène ouverte.

2. Sélectionnez Modify > Bitmap > Trace Bitamp

3. Saisissez un Color threshold, c.a.d. une valeur de Seuil de couleur.

Lorsque deux pixels sont comparés, si la différence entre leurs valeurs de couleur RGB est inférieure au seuil de couleur, les deux pixels sont considérés comme étant de la même couleur et vont donc faire partie de la même forme. Plus vous augmentez la valeur du seuil, plus le nombre de couleurs diminue.

4. Pour Minimum area (zone minimale), entrez une valeur pour définir le nombre de pixels environnants à prendre en considération lors de l'affectation d'une couleur à un pixel.

5. Pour Curve Fit (Aspect des courbes), sélectionnez une option pour déterminer le degré de lissage des contours dessinés.

6. Pour Corner Threshold (Seuil d'angle), sélectionnez une option pour déterminer si les angles seront conservés ou s'ils seront lissés.

Voici quelques exemples de paramétrage:

  • Pour créer un graphique vectoriel très similaire au bitmap d'origine, entrez les valeurs suivantes :
Color threshold=10, minimum area=1, Curve Fit= Pixels, Corner threshold = many corners
  • Pour une image assez "normale" et qui garde la plupart des traits importants:
Color threshold = 30 and minimum area = 30, corner threshold and curve fits = normal
  • Pour une image très "gros dessin":
olor threshold = 200 and minimum area = 2

Exemple qui montre l'effet de variations:

Convertir un movieClip en image Bitmap

Si l'instance de votre movieClip est myMovieClip, ajoutez le code suivant à votre script:

var myBitmapData:BitmapData = new BitmapData (myMovieClip.width, myMovieClip.height);

myBitmapData.draw(myMovieClip);

var myBitmap:Bitmap = new Bitmap(myBitmapData);

addChild (myBitmap);

Remerciement et modification du copyright