[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2009-04-25
19
Medium Priority
?
966 Views
Last Modified: 2013-11-11
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

0
Comment
Question by:GodsHand
  • 10
  • 7
  • 2
19 Comments
 
LVL 6

Assisted Solution

by:biyik
biyik earned 200 total points
ID: 24233622
What about adding
 imageContainer.addEventListener(MouseEvent.ROLL_OVER, imgContainerRollover);
 imageContainer.addEventListener(MouseEvent.ROLL_OUT, imgContainerRollout);
in the for and defining function outside of the loop?
function imgContainerRollover(event:MouseEvent) {
trace("hi!")
}
0
 

Author Comment

by:GodsHand
ID: 24234127
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.
0
 
LVL 6

Expert Comment

by:biyik
ID: 24234923
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...
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:GodsHand
ID: 24236038
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

0
 

Author Comment

by:GodsHand
ID: 24236042
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?
0
 
LVL 3

Expert Comment

by:Craybe
ID: 24237857
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

0
 
LVL 3

Expert Comment

by:Craybe
ID: 24237867
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;
});
0
 

Author Comment

by:GodsHand
ID: 24238043
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

0
 

Author Comment

by:GodsHand
ID: 24238052
I should add that the error I get with the above code is that the supplied index is out of bounds.
0
 
LVL 3

Expert Comment

by:Craybe
ID: 24238100
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 :-)
0
 

Author Comment

by:GodsHand
ID: 24238244
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

0
 
LVL 3

Expert Comment

by:Craybe
ID: 24238295
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);
0
 

Author Comment

by:GodsHand
ID: 24238377
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
0
 
LVL 3

Expert Comment

by:Craybe
ID: 24238567
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.  
0
 

Author Comment

by:GodsHand
ID: 24238648
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

0
 
LVL 3

Expert Comment

by:Craybe
ID: 24239126
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.



0
 

Author Comment

by:GodsHand
ID: 24240894
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
0
 
LVL 3

Accepted Solution

by:
Craybe earned 1800 total points
ID: 24246936
Finally got it to work :D  My problem with opening the fla was I work in Windows 7 (7000) and there is an obscure bug whereby you cannot open CS4 files saved in Mac OS, it is apparently fixed in Windows 7 (7100)... anyway I have your solution! (Worked for me anyway)

What we needed to do was point at the correct parent.  In this case it was parentcontainer.

this is what the setChildIndex should look like:

parentContainer.setChildIndex(event.currentTarget,parentContainer.numChildren - 1);

you can download the updated flash file from http://www.craybe.com.au/working.fla

Here is the full function:


imageContainer.addEventListener(MouseEvent.MOUSE_DOWN,function (event:MouseEvent){
    event.currentTarget.alpha = 1;
    event.currentTarget.scaleY = 1;
    event.currentTarget.scaleX = 1;
 parentContainer.setChildIndex(event.currentTarget,parentContainer.numChildren - 1);
 
});

Open in new window

0
 

Author Comment

by:GodsHand
ID: 24246994
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!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question