I m loading 8 thumbnails via XML, placing in a sprite, and spacing them out with a helper grid class. This part works. What does not work is when I try to assign a mask to each of these (using a simpleRectangle class I made) I appear to only be assigning a mask to the last image. Am I doing something wrong with imageLoader.mask = _mask; ?
My ultimate endeavor here is to click the thumbnail and animate the mask to reveal the entire thumb.
I nested the showPictures function so it could have a reference to the masks, which is not optimal, so if anyone could help me see a better way to do this I d really appreciate it.
package
public class MiniGallery extends Sprite
{
//create($columns:int, $rows:int, $xSpacing:int, $ySpacing:int, $xPadding:int, $yPadding:int)
private var imagePoints:Array = grid.create(8, 1, 100, 0, 10.5, 15);
private var fadeTween:*
private var imageText:TextField = new TextField();
private var imageLoader:Loader;
private var xml:XML;
private var xmlList:XMLList;
private var xmlLoader:URLLoader
private var i:int
private var _mask:SimpleRectangle;
private var _sprite:Sprite;
public function MiniGallery()
{
flash.system.Security.allowDomain("*")
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load (new URLRequest("data/images.xml"));
xmlLoader.addEventListener (Event.COMPLETE, xmlLoaded);
}
private function xmlLoaded (event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
trace( xmlList: + xmlList)
for (i = 0; i < xmlList.length(); i++)
{
imageLoader = new Loader();
imageLoader.load (new URLRequest(xmlList[i].attribute("thumb")));
createBoxes ();
}
}
private function createBoxes ():void
{
for (var j:int = 0; j < 1; j++)
{
imageLoader.addEventListener(MouseEvent.CLICK, showPicture)
imageLoader.x = imagePoints[i].x;
imageLoader.y = imagePoints[i].y - 36;
_mask = new SimpleRectangle(88,50, 0x000000, 0x000000, 0, 1);
_mask.name = xmlList[i].toString();
imageLoader.name = xmlList[i].attribute("source");
trace( imageLoader name is + imageLoader.name)
_mask.x = imagePoints[i].x
_mask.y = imagePoints[i].y
imageLoader.mask = _mask;
trace( mask name is + _mask.name)
addChild (imageLoader);
_sprite = new Sprite
_sprite.addChild(imageLoader)
addChild(_sprite)
_sprite.addChild(_mask)
}
function showPicture (event:MouseEvent):void
{
TweenLite.to(_mask, 3, {scaleY:-40, ease:Quad.easeOut});
}
}
}
这 trace了XmlList的正确形象。
xmlList:
<image source="m1" thumb="thumbnails/dj051.jpg">mask1</image>
<image source="m2" thumb="thumbnails/dj052.jpg">mask2</image>
<image source="m3" thumb="thumbnails/dj053.jpg">mask3</image>
<image source="m4" thumb="thumbnails/dj054.jpg">mask4</image>
<image source="m5" thumb="thumbnails/dj055.jpg">mask5</image>
<image source="m6" thumb="thumbnails/dj056.jpg">mask6</image>
<image source="m7" thumb="thumbnails/dj057.jpg">mask7</image>
<image source="m8" thumb="thumbnails/dj058.jpg">mask8</image>
imageLoader name is m1 mask name is mask1 imageLoader name is m2 mask name is mask2 imageLoader name is m3 mask name is mask3 imageLoader name is m4 mask name is mask4 imageLoader name is m5 mask name is mask5 imageLoader name is m6 mask name is mask6 imageLoader name is m7 mask name is mask7 imageLoader name is m8 mask name is mask8