dcsimg
A Flash Developer Resource Site

Results 1 to 14 of 14

Thread: [RESOLVED] [as3] tile backgrounds help (please)

  1. #1
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017

    resolved [RESOLVED] [as3] tile backgrounds help (please)

    Hi...

    I wonderd if anyone could point me in the right direction of how to create a tiled background in flash, that resizes to the full screen?...in as3...

    can you use mc's for this, or bitmaps? - if both, which is better and takes up less memory?

    thanks in advance
    Jeff

  2. #2
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441

  3. #3
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    Hi...

    Thanks nez for your help.
    I've managed to get a .png tile across the stage to begin with (dimensions of stage are the default 550x400). I would like to be able to create a full screen background that resizes to the users monitor resolution.
    My full screen code is
    code:

    //set up full screen functions...
    function createFullScreen(e:Event):void {
    //check to see what state the screen is...
    if (stage.displayState == StageDisplayState.NORMAL) {
    stage.displayState = StageDisplayState.FULL_SCREEN;
    } else {
    stage.displayState = StageDisplayState.NORMAL;
    }
    }



    which is called when the user clicks a mc to go full screen. This works fine, but the .png tile background scales up to fill the screen, whereas what I wanted to do is for the stage to resize to full screen, but then the tiled .png image to fill the screen but keeping it's original size (ie: no scaling of the background image, just it filling the screen with more tiles!)

    can this be done?

    thanks in advance
    Jeff

  4. #4
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    Try something like this:

    PHP Code:
    stage.addEventListener(Event.RESIZEonStageResize);

    function 
    onStageResize(e:Event):void{
        
    graphics.clear();
        
    graphics.beginBitmapFill(...);
        
    graphics.drawRect(00stage.stageWidthstage.stageHeight);
        
    graphics.endFill();


  5. #5
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    Hi, sorry...that didn't seem to work.
    I tried calling the function when you click the full screen button, attached are the screenshots of what get...

    the tile I use for testing is just a rectangle shaped tile (a red square ontop of a grey square).

    I can get the movie to go full screen, but I can't seem to get the tiles to stay the same size and then fill the screen. I assume therefore that I'm not actually changing the stage size with my code, but just scaling the movie in it's current state?

    any ideas...

    here's my current code
    PHP Code:
    import flash.display.BitmapData;
    import flash.geom.Rectangle;
    import flash.events.MouseEvent;
    import flash.display.StageDisplayState;

    //stage.scaleMode = "noScale";
    //stage.align = "TL";
    stage.addEventListener(Event.RESIZEonStageResize);

    var 
    url:String = new String("images/bgd1.png");

    var 
    imageRequest:URLRequest = new URLRequest(url);
    var 
    imageLoader:Loader = new Loader();
    imageLoader.load(imageRequest);
    imageLoader.visible false;
    addChild(imageLoader);
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETEonBackgroundLoaded);

    mc_fullScreen.addEventListener(MouseEvent.CLICKcreateFullScreen);

    function 
    onBackgroundLoaded(event:Event):void {
        var 
    tile:BitmapData = new BitmapData(event.target.content.widthevent.target.content.height);
        
    tile.draw(event.target.content);
        
    graphics.beginBitmapFill(tilenulltrue,true);
        
    graphics.lineTo(this.stage.stageWidth0);
        
    graphics.lineTo(this.stage.stageWidththis.stage.stageHeight);
        
    graphics.lineTo(0this.stage.stageHeight);
        
    graphics.lineTo(00);
        
    graphics.endFill();
    }

    //set up full screen functions...
    function createFullScreen(e:Event):void {
        
    //check to see what state the screen is...
        
    if (stage.displayState == StageDisplayState.NORMAL) {
            
    stage.displayState StageDisplayState.FULL_SCREEN;
        } else {
            
    stage.displayState StageDisplayState.NORMAL;
        }
    }


    //set up stage resize function...
    function onStageResize(e:Event):void{
        var 
    tile:BitmapData = new BitmapData(e.target.content.widthe.target.content.height);
        
    tile.draw(e.target.content);
        
    graphics.clear(); 
        
    graphics.beginBitmapFill(tilenulltrue,true); 
        
    graphics.drawRect(00stage.stageWidthstage.stageHeight); 
        
    graphics.endFill(); 

    Last edited by pointguard; 11-05-2008 at 08:37 AM.

  6. #6
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    See if this helps:

    PHP Code:
    stage.scaleMode StageScaleMode.NO_SCALE;
    stage.align StageAlign.TOP_LEFT

  7. #7
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    hi...thanks...


    I can't seem to get the tiles to erdraw themselves to fit the screen. The stage size resizes itself, but the tiles are all stuck in the top left corner.

  8. #8
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    The stage-align is setting your swf up so that the top-left will always be (0,0) and the bottom right is fluid with the size of the canvas. So when you get a stageResize you need to draw accordingly (use the code I posted on 10-01). That assumes you're drawing onto the stage, or else onto an object positioned at 0,0...?

  9. #9
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    it's only I've sorted it already now thanks...
    (what a divvy I am!)

    Thanks for your help...
    Jeff

  10. #10
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    Hi...

    Sorry to re-open this post, but I thought I'd coverede it but I actually haven't...Here's my code, if you can possibly spare a little time to look over it again...
    PHP Code:

    /*
    'Full Screen Tiled Background' (AS3)
    */

    //import flash packages...
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.display.StageDisplayState;
    import flash.display.Stage;
    import flash.display.BitmapData;
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    import flash.display.InterpolationMethod;
    import flash.geom.Matrix;
    import flash.events.MouseEvent;

    stage.scaleMode StageScaleMode.NO_SCALE;
    stage.align StageAlign.TOP_LEFT;
    stage.addEventListener(Event.ADDEDonStageResize);
    stage.addEventListener(Event.RESIZEonStageResize);


    var 
    backgroundGradient:Sprite = new Sprite();
    addChildAt(backgroundGradient0);

    var 
    url:String = new String("images/bgd1.png");//path to background image...

    var imageRequest:URLRequest = new URLRequest(url);
    var 
    imageLoader:Loader = new Loader();
    imageLoader.load(imageRequest);
    imageLoader.visible false;
    addChild(imageLoader);
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETEonBackgroundLoaded);
    mc_fullScreen.addEventListener(MouseEvent.CLICKcreateFullScreen);

    //set up function to draw tiles to fill stage...
    function onBackgroundLoaded(event:Event):void {
        var 
    tile:BitmapData = new BitmapData(event.target.content.widthevent.target.content.height);
        
    tile.draw(event.target.content);
        
    graphics.clear();
        
    graphics.beginBitmapFill(tilenulltrue,true);
        
    graphics.lineTo(this.stage.stageWidth0);
        
    graphics.lineTo(this.stage.stageWidththis.stage.stageHeight);
        
    graphics.lineTo(0this.stage.stageHeight);
        
    graphics.lineTo(00);
        
    graphics.endFill();
    }

    function 
    onStageResize(e:Event):void {
        var 
    colors:Array = [0xff00000x000000];//choose colours of radial fill here...(set at red fill for testing...)
        
    var alphas:Array = [01];//0= no alpha, 1= alpha 100%...
        
    var ratios:Array = [00xFF];
        var 
    matrix:Matrix = new Matrix();
        
    matrix.createGradientBox(stage.stageWidthstage.stageHeight, (Math.PI 2), 010);
        var 
    focalPoint:Number 0.5;//centre point of radial fill...
        //redraw tiles...
    //was here as well but didn't work here...
        //

        
    with (backgroundGradient.graphics) {
            
    clear();
            
    beginGradientFill(GradientType.RADIALcolorsalphasratiosmatrixSpreadMethod.PADInterpolationMethod.RGBfocalPoint);
            
    drawRect(00stage.stageWidthstage.stageHeight);//draw rectangle size of stage and fill with radial fill...
            
    endFill();
        }
    }

    //go full screen...
    function createFullScreen(e:Event):void {
        
    //check to see what state the screen is... 
        
    if (stage.displayState == StageDisplayState.NORMAL) {
            
    stage.displayState StageDisplayState.FULL_SCREEN;
            
    //redraw tiles...
            
    var tile:BitmapData = new BitmapData(e.target.content.widthe.target.content.height);
            
    //graphics.clear();
            //graphics.beginBitmapFill(true);
            
    graphics.beginBitmapFill(tilenulltrue,true);
            
    graphics.lineTo(this.stage.stageWidth0);
            
    graphics.lineTo(this.stage.stageWidththis.stage.stageHeight);
            
    graphics.lineTo(0this.stage.stageHeight);
            
    graphics.lineTo(00);
            
    graphics.endFill();
            
    //
        
    } else {
            
    stage.displayState StageDisplayState.NORMAL;
        }

    thanks in advance...
    Jeff

  11. #11
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    bump

  12. #12
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    double bump - sorry!

  13. #13
    Junior Member
    Join Date
    Dec 2000
    Posts
    15

    hi there

    I'm new on AS3, but I have this:

    Code:
    import flash.display.Stage;
    import flash.display.StageDisplayState;
    import flash.display.*;
    import flash.events.*;
    import flash.geom.Rectangle;
    import flash.display.BitmapData;
    
    stop();
    
    
    
    //bg
    var url:String="bg.gif";
    var bgrequest:URLRequest=new URLRequest(url);
    var loader:Loader = new Loader();
    loader.load(bgrequest);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, drawImage);
    
    function Fullscreen() {
    	stage.scaleMode=StageScaleMode.NO_SCALE;
    	stage.align=StageAlign.TOP_LEFT;
    	stage.addEventListener(Event.RESIZE, onResize);
    
    	//fillMC
    	addChildAt(fillMC,1);
    	fillMC.width=stage.stageWidth;
    	fillMC.height=stage.stageHeight;
    	fillMC.x=0;
    	fillMC.y=0;
    	addChildAt(fillMC,0);
    
    	putImagebg();
    	return;
    
    }// end function
    
    function onResize(param1:Event):void {
    	//trace("width " + stage.stageWidth, "height " + stage.stageHeight);
    	fillMC.width=stage.stageWidth;
    	fillMC.height=stage.stageHeight;
    	fillMC.x=0;
    	fillMC.y=0;
    	putImagebg();
    
    }// end function
    
    // bg.gif stuff
    
    function putImagebg():void {
    	trace("drawImage");
    	var mySprite:Sprite = new Sprite();
    	var myBitmap:BitmapData=new BitmapData(loader.width,loader.height,false);
    	myBitmap.draw(loader);
    	mySprite.graphics.beginBitmapFill(myBitmap);
    	mySprite.graphics.drawRect(fillMC.x, fillMC.y, fillMC.width, fillMC.height);
    	mySprite.graphics.endFill();
    	addChildAt(mySprite,0);
    }// end function
    
    function drawImage(evt:Event):void {
    	fillMC.visible = true;
    	putImagebg();
    }// end function
    
    Fullscreen();
    maybe we can optimize this..

    []'s

  14. #14
    ...dishing dimes on an .fla! pointguard's Avatar
    Join Date
    Dec 2001
    Location
    Cambridgeshire, England
    Posts
    1,017
    thanks for the reply, but I've already sorted this...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center