Pour créer un fond pour son application, nous avons plusieurs possibilités :

Premier cas : utiliser la méthode beginFill()  de la classe Graphics.

La classe Graphics permet de dessiner des formes vectorielles (ligne, ellipse, rectangle…). Notons que cette classe n’est jamais instanciée directement, mais l’est par les classes actionscripts qui utilisent des tracés vectoriels. Ces classes actionscripts créent automatiquement une instance de Graphics et permet donc un accés aux méthodes à travers la variable d’instance graphics.

Les classes d’affichage MovieClip, Sprite et Shape permettent l’affichage de formes vectorielles. Les objets Shape nécessitent moins de mémoire que les objets Sprite et MovieClip. Il est donc préférable d’afficher du contenu vectoriel à l’aide d’objets Shape.

La forme obtenue sera un dessin vectoriel.Nous avons également besoin de la méthode drawRect() pour dessiner une forme rectangulaire, dont les dimensions seront celles de la scène et dont le remplissage sera de couleur unie.

Voici comment il faut s’y prendre :

var rectangle:Shape = new Shape ();
// on definit la variable d'instances d'affichage rectangle
rectangle.graphics.beginFill(0x86B1FB);
// on précise la couleur de remplissage du rectangle
rectangle.graphics.drawRect(5, 5, 100, 30);
// on dessine un rectangle avec la méthode drawRect(x,y,width,height)
this.addChild(rectangle);
// on affiche le rectangle sur la scène 

Voici le résultat : Si l’on souhaite remplir la scène alors il suffit de faire :

rectangle.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);

Voici le résultat : Utilisons maintenant une classe BackgroundColor situé dans le package elements :

  // nouvelle définition de ma classe BackgroundColor dans /elements/BackgroundColor.as :
package elements {
import flash.display.*;
public class BackgroundColor extends Sprite {
private var _stage:Stage;
public function BackgroundColor(stageCurrent:Stage) {
_stage=stageCurrent;  return;  }
private function updateBackground():void {
var _background:Shape;
_background=new Shape  ;
_background.graphics.beginFill(0x86B1FB);
_background.graphics.drawRect(0,0,_stage.stageWidth,_stage.stageHeight);
addChild(_background);  return; } 

Maintenant pour pouvoir utiliser cette classe, il faut l’intancier depuis la classe principale nommée Application :

 package {
import elements.BackgroundColor;
import flash.display.*;
public class Application extends Sprite {
public var  _gradientBackground:BackgroundColor;
public function Application():void{  init();  }
private function init():void{
_gradientBackground = new BackgroundColor(stage);
addChildAt(_gradientBackground, 0);
}
}
}

Deuxième cas : utiliser la méthode beginGradientFill() de la classe Graphics.

Cette méthode permet de modifier le remplissage de notre rectangle. Effectivement, elle permet d’obtenir des dégradés de couleurs.

Voici ce que cela donne :

// nouvelle définition de ma classe BackgroundColor dans /elements/BackgroundColor.as :

package elements {

import flash.display.*;
import flash.geom.*;
public class BackgroundColor extends Sprite {

private var _stage:Stage;

public function BackgroundColor(stageCurrent:Stage) {

_stage=stageCurrent;

return;

}

private function updateBackground():void {

var _background:Shape;

_background=new Shape  ;

var matrix:Matrix = new Matrix();
 matrix.createGradientBox(_stage.stageWidth,_stage.stageHeight,0,0,0);
 _background.graphics.beginGradientFill(GradientType.LINEAR, [9292762, 13695487], [1, 1], [0, 255], matrix);
 _background.graphics.drawRect(0,0,_stage.stageWidth,_stage.stageHeight);

addChild(_background);

return;
}

Voici le résultat :

On voit alors que l’on peut maintenant combiner les deux types de remplissage uni ou dégradé suivant la nature du projet, voir même laisser choisir l’utilisateur de l’application. Pour cela, on peut utiliser l’instruction switch. Voici ce que devient la classe BackgroundColor :

package elements {

 import flash.display.*;
 import flash.geom.*;

 public class BackgroundColor extends Sprite {

 private var _stage : Stage;
 private var _type : String;

 public function BackgroundColor(stageCurrent:Stage,type:String="full") {
 _stage=stageCurrent;
 _type=type;
 updateBackground();
 return;
 }

 private function updateBackground():void {
 var _background:Shape;
 _background=new Shape;
 switch(_type){
 case "uni":
 _background.graphics.beginFill(0x86B1FB);
 _background.graphics.drawRect(0,0,_stage.stageWidth,_stage.stageHeight);
 break;
 case "gradient":
 var matrix:Matrix = new Matrix();
 matrix.createGradientBox(_stage.stageWidth,_stage.stageHeight,0,0,0);
 _background.graphics.beginGradientFill(GradientType.LINEAR, [9292762, 13695487], [1, 1], [0, 255], matrix);
 _background.graphics.drawRect(0,0,_stage.stageWidth,_stage.stageHeight);
 break;
 default:
 _background.graphics.beginFill(0x86B1FB);
 _background.graphics.drawRect(0,0,_stage.stageWidth,_stage.stageHeight);
 }
 addChild(_background);
 return;
 }

 }}

Le choix se fait au niveau de la classe Application :

private function init():void{
 _gradientBackground = new BackgroundColor(stage,gradient);
 addChildAt(_gradientBackground, 0);
 }

On peut maintenant penser que le choix des couleurs ou du type de dégradé (linéaire ou radiale) dépendent de l’application. Il est donc intéressant de créer une classe qui regroupe des variables qui définissent les couleurs utilisées. J’appelle cette classe ColorConstants :

package environment{

 public class ColorConstants extends Object
 {
 public static const backgroundBlue:uint = 0x86B1FB;
 public static const backgroundWhite:uint = 0xFFFFFF;

 public  function ColorConstants()
 {
 return;
 }
}}

On peut aussi s’apercevoir que les dimensions de la scène peuvent changer selon le projet, d’où la création d’une classe qui contient des constantes. j’appelle cette classe ApplicationConstants :

package environment {

 public class ApplicationConstants {
 public static const IDEWidth:Number = 1200;
 public static const IDEHeight:Number = 800;

 public function ApplicationConstants()
 {
 return;
 }

}
 }