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

25 décembre 2008 par Niums dans Action script

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)

background-color:#000000;
background-image:url(http://www.url-de-l-image.jpg);
background-position:center top;
background-repeat:repeat;
background-attachment:fixed;
 

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.

import flash.display.BitmapData

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.

var monBackground:BitmapData = BitmapData.loadBitmap("bg");
 

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 »

this.beginBitmapFill(monBackground);
/* dessinons le rectangle à l’aide de lineTo : MovieClip.lineTo(x , y) */
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
/* il faut arrêter l’opération de remplisage débuté avec this.beginBitmapFill(monBackground); */
this.endFill();
 

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.

import flash.display.BitmapData; // déjà importé
import flash.geom.Point;
import flash.geom.Matrix;
import flash.geom.Transform;
import flash.geom.ColorTransform;
import flash.filters.BitmapFilter;
import flash.filters.ColorMatrixFilter;
import flash.filters.DisplacementMapFilter;
import flash.filters.BevelFilter;
import flash.filters.DropShadowFilter;
import flash.filters.BlurFilter;
 

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

this.createTextField("status_txt", 90, 0, 0, 100, 20);
status_txt.selectable = false;
status_txt.multiline = true;
status_txt.html = true;
status_txt.background = 0xFFFFFF;
status_txt.autoSize = "left";
 

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

myBitmap=new BitmapData(largeur,hauteur,transparence,couleurDeRemplissage);
 

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

var coloredBitmap:BitmapData = new BitmapData(140,137,true,0xFF990000);
 

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.

var coloredConteneur:MovieClip = this.createEmptyMovieClip
("coloredConteneur",this.getNextHighestDepth());
coloredConteneur._x = 130;
coloredConteneur._y = 40;
coloredConteneur.attachBitmap(coloredBitmap,this.getNextHighestDepth());

// Utilisons le filtre biseau au clik

var filterBiseau:BevelFilter = new BevelFilter(5, 45, 0×000000, 0.8, 0×333333, 0.8, 20, 20, 1, 3, "inner", false);
coloredConteneur.onPress = function() {
coloredBitmap.applyFilter(coloredBitmap, coloredBitmap.rectangle, new Point(0, 0), filterBiseau);
}
 coloredConteneur.onRollOver =function () {
status_txt.htmlText = "<strong>Clip : </strong>coloredConteneur";
}
coloredConteneur.onRollOut = function () {
status_txt.htmlText = "";
}
 

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().

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

var isDropShadow:Boolean = false;
var isBlur:Boolean = false;

//Définir les propriétés du composant dropShadow
Ch.label = "Ombre";
blurCh.label = "Flou";

// ajouter un écouteur d’évènements sur les 2 checkbox.
dropShadowCh.addEventListener("click", toggleDropShadow);
blurCh.addEventListener("click", toggleBlur);

// créer un movie clip pour afficher l’image.
// Créer à l’intérieur de ce Movie clip un Movie clip dans lequel sera chargé l’image.
// Si on ne fait pas cela et si on fait le load directement dans le premier mc créé.
// L’application de filtre ne fonctionnera pas.
this.createEmptyMovieClip("imageClip", this.getNextHighestDepth()); imageClip.createEmptyMovieClip("nestedClip", 1);
imageClip._x = 330;
imageClip._y = 40;

imageClip.onRollOver =function () {
status_txt.htmlText = "<strong>Clip : </strong>imageClip";
}
imageClip.onRollOut = function () {
 status_txt.htmlText = "";
}

// movie clip loader
var imageLoader:MovieClipLoader = new MovieClipLoader();
imageLoader.addListener(imageListener);
imageLoader.loadClip("logo.jpg", imageClip.nestedClip);

// On définit la valeur de isDropShadow pour qu’elle concorde avec celle du check box.
function toggleDropShadow(event:Object):Void {
isDropShadow = event.target.selected; setFilters();
}
// On définit la valeur de isBlur pour qu’elle concorde avec celle du check box.
function toggleBlur(event:Object):Void {
isBlur = event.target.selected; setFilters();
}
function setFilters():Void {
// nouveau tableau var filtersArr:Array = new Array();
// si isDropShadow, si on a coché ombre. On crée un nouvel objet DropShadowFilter et on l’ajoute au tableau.
if(isDropShadow) {
var dropShadow:DropShadowFilter = new DropShadowFilter(10, 40, 0, 50, 10, 10);
filtersArr.push(dropShadow);
}
// si isDropShadow, si on a coché flou. On créé un nouvel objet BlurFilter et on l’ajoute au tableau.
if(isBlur) {
var blur:BlurFilter = new BlurFilter(10, 10); filtersArr.push(blur);
}
// application des filtres
imageClip.filters = filtersArr;
coloredConteneur.filters = filtersArr;
}
 

ImageLoadBitmap

var monLogo:BitmapData = BitmapData.loadBitmap("logo");
var imageLoadBitmap:MovieClip = this.createEmptyMovieClip("imageLoadBitmap", this.getNextHighestDepth());
imageLoadBitmap._x = 130;
imageLoadBitmap._y = 220;
imageLoadBitmap.attachBitmap(monLogo, this.getNextHighestDepth());
imageLoadBitmap.onRollOver =function () {
status_txt.htmlText = "<strong>Clip : </strong>imageLoadBitmap";
}
imageLoadBitmap.onRollOut = function () {
status_txt.htmlText = "";
}
 

Image chargée dynamiquement

var conteneurDynImg:MovieClip = this.createEmptyMovieClip("conteneurDynImg",4);
var dynImg:MovieClip = conteneurDynImg.createEmptyMovieClip("dynImg",1);
conteneurDynImg.dynImg.loadMovie("logo.jpg");
conteneurDynImg._x = 330;
conteneurDynImg._y = 220;
conteneurDynImg.onRollOver =function () {
status_txt.htmlText = "<strong>Clip : </strong>conteneurDynImg";
}
conteneurDynImg.onRollOut = function () {
status_txt.htmlText = "";
}
var noiseBmp:BitmapData = new BitmapData(140, 137, true,0×00000000);
conteneurDynImg.attachBitmap(noiseBmp, this.getNextHighestDepth());

 

Appliquer filtre

var ecouteur:Object = new Object();
ecouteur.imageClip = imageClip;
ecouteur.onMouseMove = function() {
var xPercent:Number = 1 – (_xmouse/Stage.width);
var yPercent:Number = 1 – (_ymouse/Stage.height);

var matrix:Array = new Array();
matrix = matrix.concat([yPercent, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, xPercent, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, xPercent, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha

var matrixFilter:BitmapFilter = new ColorMatrixFilter(matrix);
imageClip.filters = new Array(matrixFilter);

var low:Number = 30 * _xmouse / Stage.width;
var high:Number = 200 * _ymouse / Stage.height;
noiseBmp.noise(Math.round(Math.random() * 100000), low, high, 8, true);
}

Mouse.addListener(ecouteur); ecouteur.onMouseMove();

 

Voilà

Continuez votre lecture avec



Articles similaires


Commentaires (5)

 

  1. Robert Jay dit :
    28 février 2009 à 1:27

    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

    Répondre
  2. Alain Brunet dit :
    5 mai 2009 à 9:15

    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, 0×000000);

    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

    Répondre
    • Niums dit :
      5 mai 2009 à 11:05

      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

      Répondre
  3. jean-michel dit :
    29 décembre 2009 à 9:42

    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

    Répondre

Laisser un commentaire