En flash, il est souvent intéressant de créer le background en dynamique pour des raisons de poids et d’esthétisme.
Pour les dégradé par exemple, ou pour la répétition d’un motif. C’est également mieux quand le fond se resize avec la fenêtre.
Voici donc une méthode relativement simple et qui permet des résultats très variés.
Cette méthode utilise les classes :
• flash.display.BitmapData
• flash.geom.Matrix
• MovieClipLoader
Prenons l’exemple du FlashBlog, qui superpose 2 motifs rayés et un dégradé, pour un poids de 1,26 Ko .(Ces fonctions ne sont disponibles qu’à partir de Flash 8).
L’application d’un masque de fusion arrivera un peu plus tard dans un autre article.
Téléchargez la source ici

1. Créer un motif de fond.

Peu importe la taille de votre ou vos motifs, le plus petit sera le mieux.
C’est le principal élément qui influencera le poids du fichier final.
Ils peuvent être exportés aux formats : .png, .jpg, .gif (pas très propre selon le type de motif). ou .swf (mais sans animation puisque le clip est converti en BitmapData). La transparence est conservée avec un .png.
Les 2 motifs d’exemple :
rayures rayures 2

2. Initialisation de la scène

Après avoir ouvert votre flash, créez un calque « actions ».
Importez les classes qui serviront ensuite � la création du fond
La classe BitmapData vous permet de créer des images bitmap transparentes ou opaques dimensionnées de manière arbitraire et de les manipuler à votre guise lors de l’exécution.
La classe Matrix représente une matrice de transformation qui détermine la façon de mapper des points d’un espace de coordonnées à l’autre. Pour effectuer diverses transformations graphiques d’un objet, il vous suffit de définir les propriétés d’un objet Matrix et de l’appliquer à un objet MovieClip ou BitmapData.
[actionscript]
import flash.display.BitmapData;
import flash.geom.Matrix;
[/actionscript]
J’initialise ensuite la scène pour gérer le plein écran et l’adaptation du fond quand l’évènement « resize » a lieu.
[actionscript] / //j’ajoute un écouteur sur la scène
sizeListener = new Object();
//j’applique un événement onresize à l’écouteur
sizeListener.onResize = function() {
//je rempli le fond � chaque re-dimensionnement de la scène
remplir();
};
[/actionscript]
Lors de la publication de votre swf: Paramètres de Publication > HTML > pourcentage > 100%
Précisez les marges du body � 0 dans le html.
[actionscript]
//Spécifiez true pour exécuter Flash Player en mode plein écran.
fscommand(« fullscreen », true);
//Indique l’alignement actuel du fichier SWF dans le lecteur ou le navigateur.
//TL = haut gauche
Stage.align = « TL »;
//Indique le redimensionnement actuel du fichier SWF dans Flash Player.
Stage.scaleMode = « noScale »;
//j’applique l’écouteur � la scène
Stage.addListener(sizeListener);
[/actionscript]
On créé dynamiquement les différents clips qui vont héberger le fond :
[actionscript]
//création de l’hôte qui va servir à créer le bitmap externe
var hote_bitmap:MovieClip = this.createEmptyMovieClip(« hote_bitmap », this.getNextHighestDepth());
//création de l’hôte du bitmap rayure externe
var hote_motif:MovieClip = this.createEmptyMovieClip(« hote_motif », this.getNextHighestDepth());
//création de l’hôte des rayures transparentes et blanches
var hote_rayure:MovieClip = this.createEmptyMovieClip(« hote_rayure », this.getNextHighestDepth());
//création de l’hôte du dégradé au dessus des autres
var hote_gradient:MovieClip = this.createEmptyMovieClip(« hote_gradient », this.getNextHighestDepth());
[/actionscript]
Par défaut, ils sont placés en coordonnées x0 ;y0

3. Création de l’objet BitmapData

Nous allons utiliser 2 méthodes différentes :
• La première utilise un motif qui est déjà dans la bibliothèque.
Après avoir importé votre motif dans la bibliothèque, faites un clic droit sur l’image dans la bibliothèque et choisissez « liaisons ». Cochez « exporter pour AS » et «exporter pour la première image» comme si dessous.

fenetre

Le nom de liaison permet ensuite de cibler le bitmap directement depuis le code.
On utilise ensuite la méthode
loadBitmap qui renvoie un nouvel objet BitmapData qui contient une version bitmap du symbole identifié par l’ID de liaison spécifié dans la bibliothèque :
[actionscript]
var motif2 = flash.display.BitmapData.loadBitmap(« motif_rayure »);
[/actionscript]
« motif2 » est prêt à être employé.(suite à l’étape 3)
• La deuxième charge un motif externe, qui peut donc être très facilement modifié.
Ici, j’utilise la classe movieClipLoader, détaillée dans cet autre poste
[actionscript]
function onLoadInit(){
// Chargement du fichier externe dans le clip récepteur
/*Créez un nouvel objet bitmap en mémoire de même taille que le fichier chargé et remplissez-le de pixels transparents.*/
myBitmap = new BitmapData(hote_bitmap._width, hote_bitmap._height,true,0x00FFFFFF);
// Instantané du clip contenant le fichier externe chargé
myBitmap.draw(hote_bitmap);
// Suppression du clip devenu inutile
hote_bitmap.removeMovieClip();
//appel de la fonction qui rempli le clip avec le BitMap(étape 3)
remplir();
}
// Cette fonction est appelée par l’objet ‘loader’ si le chargement du fichier est impossible
function onLoadError(){
hote_bitmap.removeMovieClip()
}
//j’instancie le loader
loader = new MovieClipLoader()
//Enregistre un objet de façon � ce qu’il reçoive des notifications lors d’un appel du gestionnaire d’événements
loader.addListener(this);
//je charge mon motif externe dasn l’hote créé � cet effet
loader.loadClip(« img/background.png »,hote_bitmap);
[/actionscript]

« myBitmap» est prêt à être employé.

4. Remplissage du background

On crée ensuite la fonction « remplir » qui va être appelée � chaque dimensionnement de la scène. De la même manière vous pouvez créer une fonction « replacer » qui va réaligner les éléments de votre interface en fonction des nouvelles largeur et hauteur.

[actionscript]
function remplir(){
//j’initialise les nouvelles largeur et hauteur.
hScene = Stage.height;
wScene = Stage.width;

//création des rayures du fond avec le BitmapData myBitmap
//j’efface l’image actuellement affichée dans hote_motif
hote_motif.clear();
//je remplit la zone de dessin hote_motif avec le motif myBitmap qui va former une mosaïque afin de remplir la zone.
hote_motif.beginBitmapFill(myBitmap);
//Déplace la position de dessin actuelle vers (x, y).
hote_motif.moveTo(0, 0);
//je trace le rectangle qui va contenir le motif � la meme taille que la scène
hote_motif.lineTo(wScene, 0);
hote_motif.lineTo(wScene, hScene);
hote_motif.lineTo(0, hScene);
hote_motif.lineTo(0, 0);
//j’applique le remplissage aux lignes ajoutées depuis le dernier rappel � beginFill()
hote_motif.endFill();
//création des rayures blanches transparentes avec le BitmapData motif2
//j’efface l’image actuellement affichée dans hote_rayure
hote_rayure.clear();
//je remplit la zone de dessin hote_rayure avec le motif motif2 qui va former une mosaïque afin de remplir la zone.
hote_rayure.beginBitmapFill(motif2);
//Déplace la position de dessin actuelle vers (x, y).
hote_rayure.moveTo(0, 0);
//je trace le rectangle qui va contenir le motif � la meme taille que la scène
hote_rayure.lineTo(wScene, 0);
hote_rayure.lineTo(wScene, hScene);
hote_rayure.lineTo(0, hScene);
hote_rayure.lineTo(0, 0);
//j’applique le remplissage aux lignes ajoutées depuis le dernier rappel � beginFill()
hote_rayure.endFill();
//creation du dégradé
//j’efface l’image actuellement affichée dans hote_gradient
hote_gradient.clear();
//le type de dégradé que je souhaite (radial ou linear)
var fillType:String = « linear »;
//Les nombres d’éléments dans les paramètres colors, alphas, et ratios doivent être égaux
//couleur initiale et couleur finale.
var colors:Array = [0xFFFFFF, 0x000000];
//transparence des différentes couleurs
var alphas:Array = [0, 35];
//Cette valeur définit le pourcentage de la largeur où la couleur est échantillonnée � 100 %.(de 0 � 255)
var ratios:Array = [127,255];
//La classe flash.geom.Matrix représente une matrice de transformation qui détermine
// la façon de mapper des points d’un espace de coordonnées � l’autre.
var matrix:Matrix = new Matrix();
//Crée le style de matrice attendu par la méthode MovieClip.beginGradientFill()
matrix.createGradientBox(Stage.width,Stage.height,Math.PI/2,0,0);
//Indique le début d’un nouveau chemin de dessin avec les parametres definis au dessus
hote_gradient.beginGradientFill(fillType, colors, alphas, ratios, matrix);
hote_gradient.moveTo(0, 0);
hote_gradient.lineTo(0, Stage.height);
hote_gradient.lineTo(Stage.width, Stage.height);
hote_gradient.lineTo(Stage.width, 0);
//je trace le rectangle qui va contenir le motif � la meme taille que la scène
hote_gradient.lineTo(0, 0);
//j’applique le remplissage aux lignes ajoutées depuis le dernier rappel � beginFill()
hote_gradient.endFill();
};
[/actionscript]
La méthode MovieClip.beginGradientFill permet de créer des dégradés épatants, je vous conseille vivement d’aller voir dans l’aide de Flash les détails de celle-ci, que je ne vais pas aborder ici.