Search code examples
actionscript-3flashbackgroundactionscriptuiloader

UILoader cover background in ActionScript 3


I'm using ActionScript 3 and the UILoader component to show a .jpg image.

I would like a "covered background" result, like the css property :

background-size : cover;

I tested the parameter scaleContent (true or false):

uilBackground.scaleContent = true; 

But the result is not a true "covered background".

I think to set the scaleContent false and made a ratio calcul to modify the size of the UILoader component.

Is it a good way ? Are there others solutions ?

Thanks. Julien


Solution

  • Based on the Alsacrations jQuery solution (http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html) :

    function backgroundCover(){
        var image_width:Number = uilBackground.content.width;
        var image_height:Number = uilBackground.content.height;
    
        var over = image_width / image_height; 
        var under = image_height / image_width; 
    
        var body_width = uilBackground.width; 
        var body_height = uilBackground.height; 
    
        if (body_width / body_height >= over) { 
    
            uilBackground.content.width = body_width;
            uilBackground.content.height = Math.ceil(under * body_width);
            uilBackground.move(0,(Math.abs((under * body_width) - body_height) / -2));
    
        }else{
            uilBackground.content.width = Math.ceil(over * body_height);
            uilBackground.content.height = body_height;
            uilBackground.move((Math.abs((over * body_height) - body_width) / -2),0);
        }
    
        //trace(uilBackground.content.width);
        //trace(uilBackground.content.height);  
    }
    

    It seems work.