Stage resize issue

[Mighty Flash Gordon]

Hi guys and girls,

I have an issue with an image not being the stage width when it is resized.

Im using greensocks LoaderMax to load the image and tile it across the stage which works fine but when I resize the browser the image doesnt resize and I cant figure out what im doning wrong.

Here is the AS3 for importing and tiling the image:

var footer:Sprite = new Sprite();
var footerImageSpt = new Sprite();
// footer
var footerImage:ContentDisplay = LoaderMax.getContent("footerImage");
footerImageGrfx:Graphics = footerImageSpt.graphics();
footerImageGrfx.beginBitmapFill(footerImage.rawContent.bitmapData);
footerImageGrfx.drawRect(0, 0, stage.stageWidth, footerImage.height);
footerImageGrfx.endFill();
footer.addChild(footerImageSpt);

I did try adding a event listener but couldnt get it to work, it resized the image instead of keeping it tiled.

Any help would be appreciated.

[solisarg]

The first thing is to disable the automatic resize, then add the listener

this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.addEventListener(Event.RESIZE, handleResize);

This code should be in an object thatis in the DisplayList, if not you will get an error

Jorge

[Mighty Flash Gordon]

I have this code:

// stage setup 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			stage.addEventListener(Event.RESIZE, resizeFooter, false, 0, true);

Then a listener:

private function resizeFooter(e:Event):void
		{
			if((stage.stageWidth) > footerImageSpt.width)
			{
				TweenMax.to (footerImageSpt, 0.5, {width: stage.stageWidth});
			    trace(footerImageSpt.width);
			}
			else
			{
				TweenMax.to (footerImageSpt, 0.5, {width: footerImageGrfx.width});
			}
			
		}

but this only stretches the image.

[solisarg]

And that's what your code does, it change the width of footerImageSpt ... what do you expect?

Jorge

[[afz]snickelfitz]

Use the drawing API and bitmapFill to tile the image from the library.
Do this in the resizeHandler. That way, the image is tiled to fit when the browser is resized; no scaling or distortion.

[Mighty Flash Gordon]

The drawing API and bitmapFill are using a dynamic image not an image from the library.
Not sure how to do it. I put this code in the resize handler but it didnt do anything:

private function resizeFooter(e:Event):void
		{
			if((stage.stageWidth) > footerImageSpt.width)
			{
				addChild (footerImageSpt);
			var footerImage:ContentDisplay = LoaderMax.getContent("footerImage");
			var footerImageBar:Graphics = footerImageGrfx.graphics;
			footerImageBar.beginBitmapFill(footerImage.rawContent.bitmapData);
			footerImageBar.drawRect(0, 0, maxWidth, footerImage.height);
			footerImageBar.endFill();
			footerImageSpt.addChild(footerImageGrfx);
			}
		}

[[afz]snickelfitz]

This script loads an image then tiles across the stage on resize.

import flash.display.Stage;
import flash.display.Shape;
import flash.display.Graphics;
import com.greensock.loading.ImageLoader;
import com.greensock.events.LoaderEvent;
import flash.display.BitmapData;
import flash.display.Bitmap;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeFooter, false, 0, true);

var bmd:BitmapData;
var f:Sprite = new Sprite();
addChild(f);

var imageLoader:ImageLoader = new ImageLoader("squares.png", {onComplete:parseImage});
imageLoader.load();

function parseImage(e:LoaderEvent):void
{
    var img:Bitmap = e.target.rawContent as Bitmap;
    bmd = img.bitmapData;
    resizeFooter();
}

function resizeFooter(e:Event=null):void
{
    var sw:Number = stage.stageWidth;
    var sh:Number = stage.stageHeight;
    var fh:Number = 200;
    
    f.y = sh - fh;
    f.x = 0;
    
    var g:Graphics = f.graphics;
    g.beginBitmapFill(bmd);
    g.drawRect(0,0,sw,fh);
    g.endFill();
}

[Mighty Flash Gordon]

I got it to work with this:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeFooter, false, 0, true);

private function resizeFooter(e:Event):void
		{
			addChild (footerImageSpt);
			var footerImage:ContentDisplay = LoaderMax.getContent("footerImage");
			var footerImageBar:Graphics = footerImageGrfx.graphics;
			footerImageBar.beginBitmapFill(footerImage.rawContent.bitmapData);
			footerImageBar.drawRect(0, 0, stage.stageWidth, footerImage.height);
			footerImageBar.endFill();
			footerImageSpt.addChild(footerImageGrfx);			
		}

I have a footer text field on top of the image but when the screen resized it went on top of my footer text field and i cant see why.

[[afz]snickelfitz]

you are adding footerImageSpt on resize.
This moves the footerImageSpt to the top of the displaylist (above everything else)
don't do that.

[Mighty Flash Gordon]

ok gotcha ya,

Put this and its all working :

private function resizeFooter(e:Event=null):void
		{
			var footerImage:ContentDisplay = LoaderMax.getContent("footerImage");
			var footerImageBar:Graphics = footerImageGrfx.graphics;
			footerImageBar.beginBitmapFill(footerImage.rawContent.bitmapData);
			footerImageBar.drawRect(0, 0, stage.stageWidth, footerImage.height);
			footerImageBar.endFill();
		}

Big thanx to ya [afz]snickelfitz