AS3 setChildIndex to front - actionscript-3

Is there a way to send a specific movieClip to the front of all other movieClips on stage?
I know about setChildIndex, but I can't figure out a way to to calculate the top position dynamically.

You can use setChildIndex() with numChildren.
setChildIndex(childClip, numChildren - 1);

You don't need to use setChildIndex.
addChild is sending child on the top of all clips.
You may be thinking that addChild will double add your MC, but it will not, the second time it will just update it's child index.

By default, flash adds the movieclip to the top of the display list, so you can just repeat adding of the child to the container.
stage.addChild(bottom);
stage.addChild(top);
// top is now on bottom.
stage.addChild(bottom);
// bottom is now on top.

The movieclip(mc) is added on the canvas,
canvas.setChildIndex(mc, 0);
The canvas is added on the stage,
stage.setChildIndex(canvas, 0);

/* Bring Any Clicked Object to the Front
Clicking on any symbol on the Stage moves it in front of all other instances.
*/
// This code makes all symbol instances on stage clickable by making them listen for the CLICK event.
for (var fl_ChildIndex:int = 0;
fl_ChildIndex < this.numChildren;
fl_ChildIndex++)
{
this.getChildAt(fl_ChildIndex).addEventListener(MouseEvent.CLICK, fl_ClickToBringToFront);
}
// This is the function that moves the clicked object to the front of the display list
function fl_ClickToBringToFront(event:MouseEvent):void
{
this.addChild(event.currentTarget as DisplayObject);
}
From Adobe Flash Professional Code Snippets.

Related

AS3 addChild() drawing on top of my movieClip on CLICK

So basically my issue is when I click on my movieClip I want it to spawn this animation I did over the protonCore. Essentially to show that when you click the protonCore you generate 1 proton. However the problem with this when spamming your CLICK, is that when it adds this child on every click, it draws on top of the movieClip and prevents hit detection while the addedChild "fuseSpark" is added to the stage. Is there a way to make it so when I add this child it doesn't affect the hitBox of the clickable movieClip?
function protonGenerator(e:MouseEvent):void
{
var fuseSpark:MovieClip = new MC_FX_fuse;
stage.addChild(fuseSpark);
fuseSpark.x = stage_protonCore.x;
fuseSpark.y = stage_protonCore.y;
}
An easy solution would be to disable the mouse for those children when you create them:
fuseSpark.mouseEnabled = false;
That is, ofcourse, only if you don't care if the user can click those elements.

Flash Action Script 3: drag movie clip issue

I am new to as3. I create a rectangle and convert it to symbol. Then I go into the symbol and create two sliders. Also, I make the symbol draggable.
controlPanel_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragStartF);
controlPanel_mc.addEventListener(MouseEvent.MOUSE_UP, dragEndF);
function dragStartF(e:MouseEvent){
e.currentTarget.startDrag();
}
function dragEndF(e:MouseEvent){
e.currentTarget.stopDrag();
}
It works fine, but I can't use the slider. If I drag the slider, the entire movie clip moved. How can I solve this problem? Cheers!
Without more info on the structure of your FLA-file I assume that controlPanel_mc is the container containing the rectangle[background] and the two sliders.
What it seems like you did in your code was to add event listener to the container, what that means is that "if a click occures anywhere on this object, do the following". Since that clip "owns" the 2 sliders, the sliders will not get any MOUSE_DOWN-events since the parent is always the one handling the event first.
You probably want to convert the background into a symbol and add the eventListeners to that object instead.
bg.addEventListener(MouseEvent.MOUSE_DOWN, onBgClick);
bg.addEventListener(MouseEvent.MOUSE_UP, onBgRelease);
function onBgClick(e:MouseEvent){
controlPanel_mc.startDrag();
}
function onBgRelease(e:MouseEvent){
controlPanel_mc.stopDrag();
}
That should solve your issue :)

Dynamically adding tween to n MC's

Here's what I'm aiming for. I'm querying the Rotten Tomatoes API for Upcoming Movies. For each movie returned, I'm creating an instance of MovieIcon (MC). I'm then adding this MC as a child of a Container MovieClip that's already on the scene. Each time, I'm incrementing the xPosition of each MovieIcon MC such that, they're positioned next to each other.
My container MC has a mask applied to it, therefore any child objects that are positioned beyond the size of the mask, they're are hidden from view.
How can I dynamically add a tween/easing animation between all these MovieIcon MC's so that when I hover over the Container MC, it 'scrolls' left or right, depending on the mouse motion?
Thanks in advance.
First I would recommend using a tweening library.
TweenLite and Tweener are good options
http://www.greensock.com/tweenlite/
http://code.google.com/p/tweener/
Both of these include docs that will help you get everything set up in your project.
Then you should be able to add a ROLL_OVER event to each of your MovieIcon MC's
MovieIcon.addEventListener(MouseEvent.ROLL_OVER, handleRollOver);
Inside your handler you can use the event.target property to get a handle on the over MovieIcon.
Assuming your using TweenLite you can go and add your tween to that target
private function handleRollOver(e:MouseEvent):void{
TweenLite.to(e.target, duration, {x: new x value, any other prop: any other val})
}

getting movieclip on top of everything else

i have a bunch of movieclips on the stage and some are nested into others, i would like to have 1 of them to be put on top of everything else on the stage when i start dragging it. Anyone know how to get a nested movieclip on top of parents etc?
You could have a top layer & a bottom layer , whenever you want to add a child on top of everything else, simply add the child to the top layer. This way you don't need to figure what the parent position is , just keep this layer on top for that specific purpose.
var topLayer:Sprite = new Sprite();
var bottomLayer:Sprite = new Sprite();
var childMc:MovieClip; // the mc you want to have on top
//somewhere in your code...
childMc.addEventListener(MouseEvent.MOUSE_DOWN , childMcMouseDownListener );
addChild( bottomLayer );
addChild( topLayer );
//add everything to the bottom layer
//leave the topLayer empty until you add the child mc
//add the following code in your MouseDown Listener
function childMcMouseDownListener(event:MouseEvent ):void
{
topLayer.addChild( event.currentTarget );
}
top of everything else on stage:
stage.addChild(target);
warning from AS3 doc :
The command stage.addChild() can cause problems with a published SWF
file, including security problems and conflicts with other loaded SWF
files. There is only one Stage within a Flash runtime instance, no
matter how many SWF files you load into the runtime. So, generally,
objects should not be added to the Stage, directly, at all. The only
object the Stage should contain is the root object. Create a
DisplayObjectContainer to contain all of the items on the display
list. Then, if necessary, add that DisplayObjectContainer instance to
the Stage.
Suppose, Container is your parent movieClip and it has many children then Now your target and currentTarget property depends on which object the listener is attached and how much you have nested your movieclips. in my case the Container is your parent movieClip having two or more children.
Container.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
public function pickUp(param1:MouseEvent) : void
{
var objectToDrag = param1.target;
Container.setChildIndex(param1.target,Container.numChildren-1);
objectToDrag.startDrag(true);
}

Movieclip stacking in Actionscript

I'm building a game of which the interface is one of the first items to load on screen. Sound button, pause and all the bits -
During the game - all manor of things are dynamically added and removed to the stage. Therefore my interface goes behind my game scene.
How do I ensure the movieclip always stays on top?
Can I override the addChild of my Document Class and every time a new child is added, I restack the interface to the top?
You can use setChildIndex to rearrange objects that are already contained within a MovieClip or Sprite. For example, if you have an object called container, which contains a redBall, blueBall and many other ball objects, you can use the following to make sure redBall is behind everything else:
container.setChildIndex(redBall, 0);
Equally you can make sure that blueBall will be displayed infront of everything else using:
container.setChildIndex(blueBall, container.numChildren-1);
addChildAt will sort you out for adding children straight into their correct position, and setChildIndex will allow you to re-position objects already placed. Hope that helps.
debu
Look into addChildAt, it allows you to specify the index that the new object should be added too.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObjectContainer.html#addChildAt%28%29
A good strategy is to keep all interface elements in one parent Sprite/MovieClip, and all game assets in another. (With the interface one on top)
With your guys suggestion I made this, apparently, if you addChild an object already on the screen, it's simply reindex'd to the top. Does this look ok?
private var topLevelChildrenArray:Array = [];
public function addTopLevelChild(child:DisplayObject):DisplayObject
{
topLevelChildrenArray.push(child)
return this.addChildAt( child, this.numChildren - 1 );
}
override public function addChild(child:DisplayObject):DisplayObject
{
this.addChildAt(child, this.numChildren);
for each(var topChild:DisplayObject in topLevelChildrenArray)
{
super.addChild(topChild);
}
return child
}