La Classe BitmapData – un background avec un motif répété et chargement d’images

Ce post est très long car il y a plusieurs exemples. Même si il n’est pas très compliqué, j’espère que sa longueur ne va pas le rendre trop indigeste ou incompréhensible…

Le but : créer comme en css un fond avec un motif répété.  Comme le code ci-dessous :

L’exemple (contenant les exemples à venir…)

La source (fla+img)

Pour faire cela sans se prendre la tête, on va utiliser la classe Bitmapdata : on charge l’image (contenue dans la bibliothèque) et on remplit une zone definie avec la méthode lineTo.

Créons une instance de BitmapData et assignons-la à une variable.
Comme nous voulons utiliser une image bitmap contenue dans la bibliothèque, nous allons utiliser la méthode static « loadBitmap » associée à l’identifiant de liaison, donné à l’image contenue dans la bibliothèque : ici bg pour l’image background.
Cette méthode retourne une instance BitmapData à laquelle nous avons assigné le nom de variable monBackground de manière à pouvoir l’utiliser plus tard.

Répéter n fois l’image jusqu’à ce que le background soit rempli.
Comment faire ? Il faut créer un rectangle entourant la scène, qui sera rempli autant de fois qu’il le faut par « monBackground »

Maintenant chargeons des images et appliquons leurs des filtres

Il faut importer les classes nécessaires.
La  class BitmapData vous permet de travailler avec les data(pixels) de votre image.
Elle permet de représenter un objet bitmapData en mémoire.
Lorsque vous créez une nouvelle instance de la class , une image vide est stockée en mémoire.
Vous pourrez ensuite manipuler ces instances avec diverses méthodes de la class bitmapData.
La class bitmapData est située dans le package flash.display.

Champs de texte permettant de savoir sur quel clip on rollOver…

Créer une image bitmap cliquable
BitmapData accepte 4 arguments :

La taille maximale pour la largeur et pour la hauteur est de 2880px

Affichons l’image
Une instance de la class bitmapData est chargée en mémoire et reste invisible jusqu’à ce que vous décidiez du contraire.
Pour afficher l’image, utiliser MovieClip.attachBitmap();
PS : il est préférable d’utiliser createEmptyMovieClip pour créer un clip vide dont le seul but sera l’affichage du bitmap.
Car le problème de BitmapData est qu’il n’existe aucune méthode permettant de retirer un bitmap à un clip auquel on l’a attaché.
On pourra donc utiliser removeMovieClip(); pour « effacer » le movie clip contenant le bitmap.

Une fois notre bitmap créée, utilisée et plus si nécessaire, nous devons libérer la mémoire.
Une instance de l’objet bitmapdata occupe assez rapidement beaucoup d’espace mémoire.
Si vous créez un bitmap de 500 x 500 px il va prendre presque 1MB de ram.
Si vous n’avez plus besoin de l’objet bitmap il est préférable (voir obligatoire)
de libérer la mémoire que le bitmap utilise. Pour cela utilisez la méthode dispose().

Charger une image externe et y appliquer des filtres

Exemple tiré de la doc.
Savoir si les filtres sont actifs, initialisation des 2 filtres sur false

ImageLoadBitmap

Image chargée dynamiquement

Appliquer filtre

Voilà

5 réponses sur “La Classe BitmapData – un background avec un motif répété et chargement d’images”

  1. Hello Niums,
    Excellent tutorial, très complet, bien écrit, intelligent et généreux. Bon j’arrête là ;) mais c’est vrai, ce tuto très clair m’a beaucoup aidé et épargné pas mal d’heures de travail, j’apprécie au plus haut point.
    Grand merci à toi!
    Bob

  2. Salut Niums !

    Merci pour ce tuto plein de sagesse permettant de s’initier rapidement à la classe BitmapData notamment, qui se révèle puissante et pleines de promesses. Ce sont de bons exemples qui complète bien la doc actionscript.

    Petit problème cependant sur le tutos ‘Image chargée dynamiquement’:

    dynImg = conteneurDynImg.dynImg.loadMovie(« logo.jpg »);

    A priori il ne faut pas réaffecter le loadMovie à la variable dynImg car elle est alors undefined.

    deuxième point:

    var noiseBmp:BitmapData = new BitmapData(140, 137, true);

    var noiseBmp:BitmapData = new BitmapData(140, 137, true, 0x000000);

    Dans le cas contraire, l’image ne s’affiche pas.
    Voilà je peux me tromper ou j’ai peut-être oublié quelque chose mais il semble que ça marche comme ça.

    Merci encore !

    Alain

    1. Plein de sagesse plein de sagesse, c’est vite dit ;-).

      Alors pour le deuxième point (oui je commence à l’envers), erreur d’inattention. Je corrige ça de suite.

      Ensuite pour le premier point, il est vrai que je ne suis pas un « vrai » dévellopeur et c’est la que je le vois…. arghhhff.
      En fait, en me relisant ce n’est carrément pas possible surtout qu’au dessus je l’ai définit tel que :

      var dynImg:MovieClip = conteneurDynImg.createEmptyMovieClip(« dynImg »,1);

      Bon je corrige tout ça et te remercie Alain.

      +++
      Niums

  3. merci de tes exemples c’est sympa pour les débutants je viens de découvrir ton site que j’ai noté dans mon annuaire de sites
    j’utilise swfc pas évident d’adapter mais j’y arrive voir dossier swfc sous mon site .
    là j ai un problème avec la variable Ch pas de class CheckBox dans mon cas

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *