Link to home
Start Free TrialLog in
Avatar of GodsHand
GodsHandFlag for Canada

asked on

How do you target childByName to change alpha (or anything for that matter)?

I'm building a Flash app that loads images through an XML file and displays them. Right now I have them displaying in rows and columns. I want it so when the cursor goes over one of the images, the cursor's alpha changes.

But I can't figure out how to target an individual child and alter its properties. I've tried lots of different ways of using getChildByName but I just don't get it. I'm honestly confused!

I tried this:

            getChildByName[i].addEventListener(MouseEvent.MOUSE_OVER,
                                                            function (event:MouseEvent)
                                                            {
                                                                  this.alpha = 0.5;
                                                            });

But it definitely doesn't work.
function imageLoop(var1):void
{
	var thumbX:Number = 10;
	var thumbY:Number = 10;
	
	for (var i:int = 0; i < total; i++)
	{
		getImages = new Loader();
		getImages.load(new URLRequest(images[i].@[var1]));
		
		var imageContainer = new MovieClip();
		addChildAt(imageContainer,0)
		imageContainer.name = i;
		imageContainer.scaleX = 0.2;
		imageContainer.scaleY = 0.2;
		imageContainer.addChild(getImages);
		
		if (i%3 == 0 && i != 0)
		{
			thumbY += 90;
			thumbX = 10;
		}
		imageContainer.x = thumbX;
		imageContainer.y = thumbY;
		thumbX += 180;
}

Open in new window

SOLUTION
Avatar of biyik
biyik

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of GodsHand

ASKER

That does work, and thank you for that. However, what if I want to change the alpha of all the images (so imageContainer.alpha = 0.5) outside of the for loop? Let's say I wanted a button that you click and it brings up a window. The alpha of all the objects behind the window change to 0.5.

I have a function:

function hideImages():void
{
      imageContainer.alpha = 0.5;
}

And the button's MOUSE_DOWN event calls that function. But I get the following error:

1120: Access of undefined property imageContainer.
Avatar of biyik
biyik

It throws an error because you're defining the imageContainer movieclip in the loop and trying to access it outside of it.
May be you can create a "holder" mc outside of the loop and add imageContainer as a child of it in your loop.
Finally you can add events to the holder clip which will effect all thumbs...
That does work, except that it makes ALL the children of parentContainer transparent, like this:

            parentContainer.addEventListener(MouseEvent.MOUSE_OVER,
                                                            function (event:MouseEvent)
                                                            {
                                                                  parentContainer.alpha = 0.5;
                                                            });

Makes sense, of course. But i still want it so when I MOUSE_OVER on a child of imageContainer, it can go transparent. I've been trying different ways that I think would work, but they don't. Check out my code snippet and the code below:

            imageContainer.addEventListener(MouseEvent.MOUSE_OVER,
                                                            function (event:MouseEvent)
                                                            {
                                                                  var test:Sprite = (parentContainer.getChildByName('imageContainer').getChildByName(i)) as Sprite;
                                                                  test.alpha = 0.5;
                                                            });


They don't work and return the error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
      at MethodInfo-30()

Maybe there's a better way of doing this...
var parentContainer = new MovieClip();
 
function imageLoop(var1):void
{
	var thumbX:Number = 10;
	var thumbY:Number = 10;
	
	addChildAt(parentContainer, 0);
	
	for (var i:int = 0; i < total; i++)
	{
		getImages = new Loader();
		getImages.load(new URLRequest(images[i].@[var1]));
		
		var imageContainer = new MovieClip();
		
		parentContainer.addChild(imageContainer);
		
		imageContainer.name = i;
		imageContainer.scaleX = 0.2;
		imageContainer.scaleY = 0.2;
		imageContainer.addChild(getImages);
				
		if (i%3 == 0 && i != 0)
		{
			thumbY += 90;
			thumbX = 10;
		}
		
		imageContainer.x = thumbX;
		imageContainer.y = thumbY;
		thumbX += 180;
		
		imageContainer.addEventListener(MouseEvent.MOUSE_OVER,
										function (event:MouseEvent)
										{
											var test:Sprite = (imageContainer.getChildByName(i)) as Sprite;
											test.alpha = 0.5;
										});
	}
}

Open in new window

Now that I think about it, wouldn't it be easier to manage of each XML image was loaded into it's own movieclip, instead of being a child of a movieclip? How would I do that?
I code predominately in AS2 so I'm not sure if this will hold true but hopefully it will help...

I think you were on the right track, keep the images in the a single movieclip as it makes it easier to move the group, change it's side, remove it, etc.  However you shouldn't use the movieclip holder to change the alpha for all of the clips at once.  If you want to just change a single child and not the whole group you will want to use currentTarget.  As you have event listed as your MouseEvent variable you will want to use event.currentTarget to access the individual child.

I believe this may be the solution to your problem:





event.currentTarget

imageContainer.addEventListener(MouseEvent.MOUSE_OVER,                                                                             function (event:MouseEvent){                                                                                            
    event.currentTarget.alpha = 0.5;                                                                            });

Open in new window

Wow that didn't show up very well! maybe this will look better

imageContainer.addEventListener(MouseEvent.MOUSE_OVER,function (event:MouseEvent){
    event.currentTarget.alpha = 0.5;
});
That is perfect! Thank you!

One more question...

Let's say I wanted it so when you click on the image, it scales it to show the full thing. My problem right now is that I don't know how to adjust the index/depth of the image I'm clicking on.

Check out my code below. I'm very new to AS3 and don't quite have a handle on depth management yet, so I'm not sure what I'm doing wrong...
		imageContainer.addEventListener(MouseEvent.MOUSE_DOWN,function (event:MouseEvent){
			event.currentTarget.alpha = 1;
			event.currentTarget.scaleY = 1;
			event.currentTarget.scaleX = 1;
			event.currentTarget.setChildIndex(event.currentTarget as MovieClip, 2);
		});

Open in new window

I should add that the error I get with the above code is that the supplied index is out of bounds.
I believe the reason you are getting the out of bounds error because you are sending the wrong argument to the setChildIndex function, it is looking for an integer and you are sending it a movieclip object.

I believe this should do the job of sending the object to the front:

this.setChildIndex(this.getChildByName(event.target.name), this.numChildren-1);

This should send the object to the back:

this.setChildIndex(this.getChildByName(event.target.name), 0);


The reason it is set to "this" is because you are changing the index order on the parent not the child, the first argument of the function is to retrieve the Child index from parent.  The second argument is the level you want to place it, as it is the number of children -1 that will put it at the top (remember indexes start from 0)

Hope that helps :-)
Hey Craybe, thanks for the reply!

Looks like it doesn't work though. Here's the error:

TypeError: Error #1006: getChildByName is not a function.
      at MethodInfo-32()

I have included my entire function again just incase.
var parentContainer = new MovieClip();
 
function imageLoop(var1):void
{
	var thumbX:Number = 10;
	var thumbY:Number = 10;
	
	addChildAt(parentContainer, 0);
	
	for (var i:int = 0; i < total; i++)
	{
		getImages = new Loader();
		getImages.load(new URLRequest(images[i].@[var1]));
		
		var imageContainer = new MovieClip();
		
		parentContainer.addChild(imageContainer);
		
		imageContainer.name = i;
		imageContainer.scaleX = 0.2;
		imageContainer.scaleY = 0.2;
		imageContainer.addChild(getImages);
				
		if (i%3 == 0 && i != 0)
		{
			thumbY += 90;
			thumbX = 10;
		}
		
		imageContainer.x = thumbX;
		imageContainer.y = thumbY;
		thumbX += 180;
		
		imageContainer.addEventListener(MouseEvent.MOUSE_OVER,function (event:MouseEvent){
			event.currentTarget.alpha = 0.5; 
		});
 
		imageContainer.addEventListener(MouseEvent.MOUSE_OUT,function (event:MouseEvent){
			event.currentTarget.alpha = 1; 
		});
		
		imageContainer.addEventListener(MouseEvent.MOUSE_DOWN,function (event:MouseEvent){
			event.currentTarget.alpha = 1;
			event.currentTarget.scaleY = 1;
			event.currentTarget.scaleX = 1;
			this.setChildIndex(this.getChildByName(event.target.name), this.numChildren-1);
		});
	}

Open in new window

That is strange I don't get a compile error at all... Are you using CS4 or CS3 I'm in 3 and maybe that is making the difference (still odd though).

How about giving this a try:

this.setChildIndex(event.currentTarget, this.numChildren-1);
Hey Craybe,

I'm using CS4, but I'd be surprised if that made a difference. How about this... I included my .fla (saved as CS3) as well as the xml and jpgs. Do you see anything funky in there? Can you replicate my error on your system? I'm using CS4 on a Mac, btw.

Edit: Okay, attaching doesn't work. Here's a link:

http://www.fighters-xtreme.com/forexpexch.zip
Sorry the flash file is saying "The docfile has been corrupted." I'm not sure if that is a version issue or not, I'm also on a PC which might not help.  

I work in CS4 at my other office, if you can upload a copy of just the flash file in CS4 I will give it a go.  
Hey Craybe,

I checked the .zip on the FTP and it wasn't the correct size. Maybe try this one:

http://www.fighters-xtreme.com/forexpexch2.zip

Not sure what happened. I also attached my entire ActionScript below.
// ============================================================== //
// VARIABLES ---------------------------------------------------- //
 
// ! Buttons ____________________________________________________ //
var btn_fullScreen:btnFullScreen = new btnFullScreen();
var btn_normalScreen:btnNormalScreen = new btnNormalScreen();
var btn_options:btnOptions = new btnOptions();
var btn_info:btnInfo = new btnInfo();
 
// ! GUI Elements _______________________________________________ //
var bar_bg:barbg = new barbg();
var mc_infoBox:mcInfoBox = new mcInfoBox();
var showInfoBool:Boolean = true;
var highImagesBool:Boolean = false;
 
// ! XML Elements _______________________________________________ //
var gallery_xml:XML;
var images:XMLList;
var total:Number;
var xmlReq:URLRequest = new URLRequest("gallery.xml");
var xmlLoader:URLLoader = new URLLoader();
var getImages:Loader;
var low:String = "low";
var high:String = "high";
 
// ============================================================== //
 
// EVENT LISTENERS ---------------------------------------------- //
 
// ! Stage ______________________________________________________ //
stage.addEventListener(Event.RESIZE, stageResize);
 
// ============================================================== //
 
init();
 
// ============================================================== //
// FUNCTIONS ---------------------------------------------------- //
 
// ! Initialize the application _________________________________ //
function init():void
{	
	stage.align = StageAlign.TOP_LEFT;
	
	defaultProperties();
	navBar();
 
	xmlLoader.load(xmlReq);
	xmlLoader.addEventListener(Event.COMPLETE, xmlImagesLoaded);
 
}
 
function xmlImagesLoaded(event:Event):void
{
	gallery_xml = new XML(xmlLoader.data);
	images = gallery_xml.image;
	total = images.length();
 
	// Loop through the XML images
	imageLoop(low);
}
 
var parentContainer = new MovieClip();
 
function imageLoop(var1):void
{
	var thumbX:Number = 10;
	var thumbY:Number = 10;
	
	addChildAt(parentContainer, 0);
	
	for (var i:int = 0; i < total; i++)
	{
		getImages = new Loader();
		getImages.load(new URLRequest(images[i].@[var1]));
		
		var imageContainer = new MovieClip();
		
		parentContainer.addChild(imageContainer);
		
		imageContainer.name = i;
		imageContainer.scaleX = 0.2;
		imageContainer.scaleY = 0.2;
		imageContainer.addChild(getImages);
				
		if (i%3 == 0 && i != 0)
		{
			thumbY += 90;
			thumbX = 10;
		}
		
		imageContainer.x = thumbX;
		imageContainer.y = thumbY;
		thumbX += 180;
		
		imageContainer.addEventListener(MouseEvent.MOUSE_OVER,function (event:MouseEvent){
			event.currentTarget.alpha = 0.5; 
		});
 
		imageContainer.addEventListener(MouseEvent.MOUSE_OUT,function (event:MouseEvent){
			event.currentTarget.alpha = 1; 
		});
		
		imageContainer.addEventListener(MouseEvent.MOUSE_DOWN,function (event:MouseEvent){
			event.currentTarget.alpha = 1;
			event.currentTarget.scaleY = 1;
			event.currentTarget.scaleX = 1;
			this.setChildIndex(event.currentTarget, this.numChildren-1);
		});
	}
}
 
function navBar():void
{
	addChild(bar_bg);
	addChild(btn_fullScreen);
	addChild(btn_options);
	addChild(btn_info);
 
	buttonControl(btn_fullScreen, goFullScreen);
	buttonControl(btn_normalScreen, goNormalScreen);
	buttonControl(btn_options, showInfo);
	buttonControl(btn_info, showInfo);
}
 
// ! Reuseable button function __________________________________ //
function buttonControl(var1, var2):void
{
	var1.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
	var1.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
	var1.addEventListener(MouseEvent.MOUSE_DOWN,
									function (event:MouseEvent)
									{
										var2();
									});
}
 
// ! Set default positions for movieclips (helps w/fullscreen ___ //
function defaultProperties():void
{
	bar_bg.y = stage.stageHeight-bar_bg.height;
	bar_bg.width = stage.stageWidth;
	bar_bg.alpha = 0.8;
 
	btn_fullScreen.y = bar_bg.y;
	btn_fullScreen.x = stage.stageWidth - btn_fullScreen.width;
	btn_fullScreen.buttonMode = true;
	
	btn_normalScreen.y = bar_bg.y
	btn_normalScreen.x = stage.stageWidth - btn_normalScreen.width;
	btn_normalScreen.buttonMode = true;
 
	btn_options.y = stage.stageHeight-btn_options.height;
	btn_options.x = stage.stageWidth-btn_options.width-btn_fullScreen.width;
	btn_options.buttonMode = true;
 
	btn_info.y = stage.stageHeight-btn_info.height;
	btn_info.x = stage.stageWidth-btn_options.width-btn_fullScreen.width-btn_info.width;
	btn_info.buttonMode = true;
	
	mc_infoBox.x = stage.stageWidth*.5 - mc_infoBox.width*.5;
	mc_infoBox.y = stage.stageHeight*.5 - mc_infoBox.height*.5;
}
 
function hideImages():void
{
	parentContainer.imageContainer.alpha = 0.5;
}
 
// ! Common mouseover function __________________________________ //
function mouseOver(event:MouseEvent):void
{
	event.currentTarget.gotoAndPlay("over");
}    
 
// ! Common mouseout function ___________________________________ //
function mouseOut(event:MouseEvent):void
{
	event.currentTarget.gotoAndPlay("out");
}
 
// ! Enters fullscreen mode _____________________________________ //
function goFullScreen():void
{
	stage.displayState=StageDisplayState.FULL_SCREEN;
	stage.scaleMode = StageScaleMode.NO_SCALE;
	stage.align = StageAlign.TOP_LEFT;
	removeChild(btn_fullScreen);
	addChild(btn_normalScreen);
	defaultProperties();
}
 
// ! Enters normal screne mode __________________________________ //
function goNormalScreen():void
{
	stage.displayState=StageDisplayState.NORMAL;
	removeChild(btn_normalScreen);
	addChild(btn_fullScreen);
}
 
// ! Based on a listener, sets default properties _______________ //
function stageResize(event:Event):void
{
	defaultProperties();
	
	if (stage.displayState == StageDisplayState.NORMAL)
	{
		removeChild(btn_normalScreen);
		addChild(btn_fullScreen);
	}
}
 
function showInfo():void
{
	if (showInfoBool)
	{
		addChild(mc_infoBox);
		showInfoBool = false;
	}
	else if (!showInfoBool)
	{
		removeChild(mc_infoBox);
		showInfoBool = true;
	}
}

Open in new window

Sorry test.fla is still corrupt.  Also when I paste your above code into Flash CS4 I get compile errors: eg. Type was not found or was not a compile-time constant: btnFullScreen

Is btnFullScreen a library movie clip or external class?  If it is I will need the flash file.  Can you perhaps upload just the fla file, everything else is fine.  

Sorry for all the messing around, it may be that it is a Mac to PC incompatibility but I would like to get this running nice and smooth for you.



Thanks Craybe. Maybe it's a Mac/PC issue. Weirdness. Let me know how it goes, and if it's still corrupt.

Just for "fun", I uploaded the .fla here:

http://www.fighters-xtreme.com/test.fla
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Wow, perfect! Thank you very much. I think this should be good (for now). I'm sure I'll ask questions later, but thanks again!