AS3 mise à l'échelle proportionnelle image externe

Question

Actuellement, j'utilise une boucle for pour charger dynamiquement des images XML et les placer dans une grille sous forme de vignettes. J'ai l'arrangement réglé et toutes les données se chargent doucement, mais maintenant je dois faire les images mettent à l'échelle de petites miniatures de 100px x 100px dans de petits récipients movieclips. Mon code est le suivant.

import gs.*; 
import gs.easing.*; 
var bttnHeight:Number = 20; 
var select:Number = 0; 


var xmlLoader:URLLoader = new URLLoader(); 
xmlLoader.addEventListener(Event.COMPLETE, showXML); 
xmlLoader.load(new URLRequest("testxml.xml")); 
var list_mc:Array = new Array(); 

function showXML(e:Event):void { 
XML.ignoreWhitespace = true; 
var nodes:XML = new XML(e.target.data); 
var gallcount = nodes.gallery.length(); 
var list_mc = new listitem(); 


//Generate menu to select gallery 
function populateMenu():void { 
    var spacing:Number = 0; 
    for (var i=0; i<gallcount; i++) { 
    list_mc[i] = new listitem(); 
    list_mc[i].name = "li" + i; 
    list_mc[i].y = i*bttnHeight; 
    list_mc[i].gallname.text = nodes.gallery[i].attributes(); 
    menu_mc.addChild(list_mc[i]); 
    list_mc[i].addEventListener(MouseEvent.ROLL_OVER, rollover); 
    list_mc[i].addEventListener(MouseEvent.ROLL_OUT, rollout); 
    list_mc[i].buttonMode = true; 
    list_mc[i].mouseChildren = false; 
    } 
    menu_mc.mask = mask_mc; 
} 
//list_mc.mask(mask_mc); 
var boundryWidth = mask_mc.width; 
var boundryHeight = mask_mc.height; 
var diff:Number = 0; 
var destY:Number = 0; 
var ratio:Number = 0; 
var buffer:Number = bttnHeight*2; 


function findDest(e:MouseEvent):void { 
    if (mouseX>0 && mouseX<(boundryWidth)) { 
    if (mouseY >0 && mouseY<(boundryHeight)) { 
    ratio = mouseY/boundryHeight; 
    diff = menu_mc.height-boundryHeight+buffer; 
    destY = Math.floor(-ratio*diff)+buffer/2; 
    } 
    } 
} 
var tween:Number = 5; 
//This creats the scroll easing 
function moveMenu() { 
    if (menu_mc.height>boundryHeight) { 
    menu_mc.y += (destY-menu_mc.y)/tween; 
    if (menu_mc.y>0) { 
    menu_mc.y = 0; 
    } else if (menu_mc.y<(boundryHeight-menu_mc.height)) { 
    menu_mc.y = boundryHeight-menu_mc.height; 
    } 
    } 
} 

function rollover(e:Event):void { 
    TweenLite.to(e.currentTarget.li_bg, .4, {tint:0x334499}); 
} 
function rollout(e:Event):void { 
    TweenLite.to(e.currentTarget.li_bg, .4, {removeTint:true}); 
} 
stage.addEventListener(MouseEvent.MOUSE_MOVE, findDest); 
stage.addEventListener(Event.ENTER_FRAME, moveMenu); 

populateMenu(); 
select = 0; 

//Generate thumbnails 
function genThumb():void { 
    var photos = nodes.gallery[select].photo; 
    var thumbframe:Array = new Array(); 
    var row = 0; 
    var column = 0; 
    var loaderArray:Array = new Array(); 
    for (var i=0; i<photos.length(); i++) { 
    thumbframe[i] = new Sprite; 
    thumbframe[i].graphics.beginFill(0x0000FF); 
    thumbframe[i].graphics.drawRect(0,0,100,100); 
    thumbframe[i].graphics.endFill(); 
    thumbframe[i].y = row; 
    thumbframe[i].x = column; 
    loaderArray[i] = new Loader(); 
    loaderArray[i].load(new URLRequest(photos[i].text())); 
    trace(loaderArray[i].height); 
    var index = i+1; 
    container_mc.addChild(thumbframe[i]); 
    if (index%5 == 0) { 
    row=row+120; 
    column = 0; 
    } else { 
    column=column+120; 
    } 
    thumbframe[i].addChild(loaderArray[i]); 
    } 
} 

genThumb(); 

} 

Les chargeurs et les conteneurs se trouvent dans des matrices respectives. Les images se chargent correctement, mais je ne sais pas comment les mettre à l'échelle (en fin de compte je voudrais intégrer une interpolation pour les charger aussi bien si possible.)

Merci d'avance pour toute aide!

Answer 1

Vous semblez avoir besoin de mettre à l'échelle vos bitmaps dans un carré de 100x100. Vous devrez attendre jusqu'à ce que le chargeur ait terminé le chargement pour le faire car, jusque-là, vous ne saurez pas quelles sont les dimensions de l'élément.

Lorsque vous créez votre chargeur, ajoutez un écouteur d'événement, comme ceci:

loaderArray[i].contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete); 

puis ajoutez cette fonction:

function onLoadComplete(event:Event):void 
{ 
    var info:LoaderInfo = LoaderInfo(event.currentTarget); 
    info.removeEventListener(Event.COMPLETE); 

    var loader:Loader = info.loader; 
    var scaleWidth:Number = 100/loader.width; 
    var scaleHeight:Number = 100/loader.height; 

    if (scaleWidth < scaleHeight) 
     loader.scaleX = loader.scaleY = scaleWidth; 
    else 
     loader.scaleX = loader.scaleY = scaleHeight; 
} 

Cela peut être un peu compliqué, mais tout ce qu'il fait vraiment nettoie l'écouteur d'événement que vous avez ajouté et trouve les dimensions du chargeur (ce qu'il peut obtenir maintenant parce que le chargement est terminé), et met à l'échelle le chargeur de manière appropriée.

Si vous avez besoin d'être centré dans l'ongle du pouce, ajoutez au fond de la méthode onLoadComplete:

loader.x = (100 - loader.width) * 0.5; 
    loader.y = (100 - loader.height) * 0.5; 

ou vous en avez besoin pour prendre la vignette entière et couper les bords, changer à ce (l'inégalité est l'autre sens autour)

if (scaleWidth > scaleHeight) 
     loader.scaleX = loader.scaleY = scaleWidth; 
    else 
     loader.scaleX = loader.scaleY = scaleHeight; 

et ajoutez ceci:

var shape:Shape = new Shape(); 
    var g:Graphics = shape.graphics; 
    g.beginFill(0x00FF00); 
    g.drawRect(0, 0, 100, 100); 
    g.endFill(); 
    loader.mask = g; 

Je n'ai pas testé cela, donc il y a peut-être quelques problèmes, mais j'espère que ça vous donne la bonne idée.