For at opnå denne effekt skal vi bruge to ting:

  • Vi skal bruge en funktion 'doResize', som aflæser bredden og højden af swf'en. Denne funktion vil vi kalde, når swf'en skifter størrelse.

  • Vi skal bruge en funktion 'createTiles', som fylder et område (på størrelse med swf'en) med vores mønster.

    • doResize funktionen

    For at vi kan opfange når swf'en ændre størrelse, skal 'scaleMode' sættes til "noScale":
    Stage.scaleMode = "noScale";

    Herefter kan vi oprette et stageListener objekt:

    1
2
3
4

    var stageListener:Object = new Object();
//når swf'en skifter størrelse kalder vi funktionen 'doResize'
stageListener.onResize = doResize;
Stage.addListener(stageListener);

    (Du kan lærer mere om stageListener i video tutorialen 'Fullscreen flash uden at skalere', samt tutorialen 'Placering af MovieClips i Fullscreen Flash'.)

    I funktionen 'doResize' måler vi bredden og højden på swf'en. Den information sender vi til vores 'createTiles' funktion:

    1
2
3
4
5
6

    function doResize(Void):Void {
  var sw:Number = Stage.width;
  var sh:Number = Stage.height;
  createTiles(sw, sh);
  updateAfterEvent();
}

    createTiles funktionen

    For at benytte BitmapData class'en skal vi importere den:
    import flash.display.BitmapData;
    Næste skridt er at definere mønsteret vi vil benytte.
    Det gør vi ved at importere et mønster (billede) til vores library (File > Import > Import to Library...). I eksemplet her, har jeg brugt dette mønster:

    Vores mønster

    Mønsteret skal have en Linkage Identifier, så vi kan refererer til det i vores script. Det gøres ved at højreklikke på mønsteret i libraryet og vælge 'Linkage...'

    Højreklik på billedet og vælg 'Linkage...'

    I boxen der kommer frem, vælger vi 'Export for ActionScript' og giver den 'tile' som identifier

    Giv billedet identifieren 'tile'

    Nu er vi klar til at definere vores mønster:

    var tile:BitmapData = BitmapData.loadBitmap("tile");

    Inden vi kommer til 'createTiles' funktionen, skal vi huske at sætte Stage.align til top left, så (0,0)-koordinaten ligger i øverste højre hjørne:

    1

    Stage.align = "TL";

    'createTiles' funktionen modtager swf'ens bredde og højde fra 'doResize' funktionen. Herefter tegner vi en firkant med swf'ens dimensioner og fylder den med vores mønster

    1
2
3
4
5
6
7
8
9

    function createTiles(w:Number, h:Number):Void {
  this.beginBitmapFill(tile);
  this.moveTo(0, 0);
  this.lineTo(w, 0);
  this.lineTo(w, h);
  this.lineTo(0, h);
  this.lineTo(0, 0);
  this.endFill(0, 0);
}

    Den endelige kode kommer altså til at se sådan ud:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

    /*******************************************************
settings
*******************************************************/
Stage.align = "TL";
Stage.scaleMode = "noScale";
/*******************************************************
classes
*******************************************************/
import flash.display.BitmapData;
/*******************************************************
vars
*******************************************************/
var stageListener:Object = new Object();
var tile:BitmapData = BitmapData.loadBitmap("tile");
/*******************************************************
functions
*******************************************************/
function createTiles(w:Number, h:Number):Void {
  this.beginBitmapFill(tile);
  this.moveTo(0, 0);
  this.lineTo(w, 0);
  this.lineTo(w, h);
  this.lineTo(0, h);
  this.lineTo(0, 0);
  this.endFill(0, 0);
}
function doResize(Void):Void {
  var sw:Number = Stage.width;
  var sh:Number = Stage.height;
  createTiles(sw, sh);
  updateAfterEvent();
}
/*******************************************************
init
*******************************************************/
stageListener.onResize = doResize;
Stage.addListener(stageListener);
doResize();

    Se det endelige resultat.