fitting jpg fullscreen smoothly

[brentW505]

alright.. I'm trying to make photos stretch to fullscreen.. It works right now fine, but when the jpg isn't its natural size its all glitchy and looks like less quality where edges aren't as fine as they should be.

I have this:
if(stage.stageHeight-(HEIGHT*(stage.stageWidth/WIDTH))>0){
container.height=HEIGHT*((stage.stageHeight)/HEIGHT);
container.width=WIDTH*((stage.stageHeight)/HEIGHT);
}else{
container.width=WIDTH*((stage.stageWidth)/WIDTH);
container.height=HEIGHT*((stage.stageWidth)/WIDTH);
}


How can you do it so the edges are fine and perfect?

[Baby Minion]

I have used this for a long time, not sure exactly how it will work with fullscreen, but you might want to check it out.

//takes a view area (object at least with '_width, _height, _x and _y')
//and centers it in that area
function positionSpace (target, view) {
    target._x = (((view._width - view._x) - (target._width - target._x)) / 2) + view._x;
    target._y = (((view._height - view._y) - (target._height - target._y)) / 2) + view._y;
}


//this takes the target, and makes it fit the view
//as big as it can withOUT changing proportions
function formatSpace (target, view) {
    if (target._width / target._height > view._width / view._height) {
        trace ("ratio is bigger");
        var perc = target._width / target._height;
        target._width = view._width;
        target._height = target._width / perc;
        target._y += ((view._height - target._height) / 2);
    } else if (target._width / target._height < view._width / view._height) {
        trace ("ratio is smaller");
        var perc = target._height / target._width;
        target._height = view._height;
        target._width = target._height / perc;
        target._x += ((view._width - target._width) / 2);
    } else {
        trace ("ratio is same");
        target._width = view._width;
        target._height = view._height;
    }
} 

to elaborate on the view parameter for both of the functions
it is an Object()
as long as it has those properties its fine.
It can be a display object, sprite, movieclip, or just an object.

Hope that helps.

[brentW505]

Hey thanks..
I'm not understanding what the view object is really. It looks like it should have the width/height properties of the screen...
Also, is this AS2 code? I don't think AS3 uses _width/_height does it?

PS... I do have my photo in a movieclip container. Also It seems like I kind of do the same thing but just use the screen height/width to figure out the new dimensions. When I simply change the height/width of the photo container it makes the photo look all pixelated.

[Baby Minion]

it is AS@, but just take out the underscores and it will work fine.

Think Small box inside of BIG box.

Small Box = target
Big Box = view

If you want to center the small box inside of the big box, then use the positionSpace function

If you want to make the small box match the size of the big box, but without changing the ration, use formatSpace.



If when you make the photo container bigger, and the image gets pixelated, the reason why is because your image, is just not a large resolution.

Let me know if that helps, or doesn't

[brentW505]

Alright this isn't really working... I don't really understand what needs to happen.

so is it supposed to be a movieclip containing the photo inside a movieclip?

If you have AS3 check this out...

If not is it possible to send a zip file of a simple working one?

Thanks a lot for helping!

[neznein9]

The problem is in the comparison...you need to figure out if you're images are portrait or landscape, and then compare them to eachother to figure out which way you need to scale. So if you have a really wide image and a square stage it makes sense to scale the height first and let the width hang over the edges. Take a gander:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, resizeEvent);
init();

function init():void{
    trace('initializing');
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeListener);
    loader.load(new URLRequest("photo_4.jpg"));    
}

function completeListener(e:Event):void{
    trace('image loaded');
    var bmp:Bitmap = Bitmap(e.target.loader.content);
    bmp.smoothing = true;    
    outc.photoc.addChild(bmp);
    formatSpace(outc.photoc, stage.stageWidth, stage.stageHeight);
}

function resizeEvent(e:Event){
    trace('resizing stage');
    formatSpace(outc.photoc, stage.stageWidth, stage.stageHeight);
}

function formatSpace(target:DisplayObject, wid:Number, ht:Number):void{
    //  figure out width-to-length ratio for both 
    var targetRatio:Number = target.width / target.height;
    var destRatio:Number = wid / ht;
    
    if(targetRatio > destRatio){
        //  target is landscape, dest is portrait
        target.height = ht;
        target.scaleX = target.scaleY;
    } else if(targetRatio < destRatio){
        //  target is portrait, dest is landscape
        target.width = wid;
        target.scaleY = target.scaleX;
    } else {
        //  both are the same ratio
        target.width = wid;
        target.scaleY = target.scaleX;        
    }

} 

The block above will give you a pan-and-scan approach where your image will always stay at the same aspect-ratio and it will always fill the background. Below is an alternate option to make sure you always see the entire image, more like letterboxing.

function formatSpace(target:DisplayObject, wid:Number, ht:Number):void{
    //  figure out width-to-length ratio for both 
    var targetRatio:Number = target.width / target.height;
    var destRatio:Number = wid / ht;
    
    if(targetRatio > destRatio){
        //  target is landscape, dest is portrait
        target.width = wid;
        target.scaleY = target.scaleX;
    } else if(targetRatio < destRatio){
        //  target is portrait, dest is landscape
        target.height = ht;
        target.scaleX = target.scaleY;
    } else {
        //  both are the same ratio
        target.width = wid;
        target.scaleY = target.scaleX;        
    }
} 

[brentW505]

Oh wow.. alright... all i needed in my old code was to add:
image.smoothing = true;

Now it works great.

Thanks a lot though for helping.. I appreciate it