1

現在、for ループを使用して XML 画像を動的に読み込み、サムネイルとしてグリッドに配置しています。配置が設定され、すべてのデータがスムーズに読み込まれますが、小さなコンテナー ムービークリップで画像を小さな 100px x 100px のサムにスケーリングする必要があります。私のコードは次のとおりです。

  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();

}

ローダーとコンテナの両方がそれぞれの配列にあります。画像は正しく読み込まれますが、スケーリングの方法がわかりません (最終的には、トゥイーンを統合して、可能であれば読み込み時にアニメーション化したいと考えています)。

助けてくれてありがとう！

4

1 に答える 1

3

ビットマップを100x100の正方形に拡大縮小する必要があるようです。ローダーがロードを完了するまで待つ必要があります。それまでは、アイテムの寸法がわからないためです。

ローダーを作成するときに、次のようなイベントリスナーを追加します。

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

次に、この関数を追加します。

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;
}

これは少し複雑かもしれませんが、実際に行うのは、追加したイベントリスナーをクリーンアップし、ローダーのディメンション（読み込みが完了したために取得できる）を見つけて、ローダーを適切にスケーリングすることだけです。

サムネイルの中央に配置する必要がある場合は、これをonLoadCompleteメソッドの下部に追加します。

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

または、サムネイル全体を取得して端を切り取り、これに変更する必要があります（不等式は逆です）

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

そしてこれを追加します：

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

私はこれをテストしていないので、いくつかの不具合があるかもしれませんが、うまくいけば、それはあなたに正しい考えを与えるでしょう。

于 2009-12-04T05:40:37.417 に答える