I'm having troubled with indexing in Actionscript 3.0. Basically I have two objects that are spawned on the stage. One is dock and the other a ball object. How it works is that when a ball object is over the dock, a info window appears on the screen. The ball object has a wrapper called Container.
So the objects are: MainClass, Dock, Container, BallObject, InfoWindow.
So from back to front it's: MainClass > Dock > InfoWindow > Container > BallObject.
Dock and Container are added in the Main class, and infoWindow is added in the Dock class and BallObject from the Container class.
What I want to achieve is to have the InfoWindow on top of the BallObjects, without the Dock being in front of the Container or BallObjects.
Here is an image to help illustrate things out.
d = dock c = container B = ballobject I = infowindow
The image on the left is what I want to achieve and the one right is what I have right now.
With your hierarchy it is impossible, as the DisplayList is a tree as a whole, and is rendered depth first. So, put Container under Dock, and give it child index less than InfoPanel.
dock.addChild(container);
dock.addChild.infoPanel);
container.addChild(ball);
main.addChild(dock);
This approach will net you the requested goal. In case you need to add another layer, say between Container and InfoPanel, add another container between them, and add required stuff to that container.
Related
Please have a look at this project, in this project I have two symbol, one of them create and add another symbol as child.
Child symbol is drawn over parent as I expected. Parent symbol has two frames. When parent goes to second frame, child symbol drawn under parent. I mean depth order will change.
Can somebody help me!!?? Sorry for poor language.
Download link:
https://drive.google.com/file/d/0B-KCX3wxRH-cOUk5YU1OUzNFN3M/view?usp=sharing
Yellow shape from the frame 1 move to the new layer.
Hide Layer 3 and go to the second frame.
Select and remove the yellow bitmap image.
Show Layer 3.
Another solution:
Add next code after gotoAndStop(2);
swapChildren(btselect,getChildAt(numChildren - 1));
You misunderstand completely how the Flash rendering works so here's a couple of pointers:
"Child symbol is drawn over parent as I expected", nope, that doesn't happen. A parent has content which can be pictures, other symbols ect ... and they are all inside the parent so no child are drawn over the parent, they have a display hierarchy that's all.
"child symbol drawn under parent." well once again nope, a child is not drawn under it's parent, it is inside the parent and under other objects.
When a MovieClip with multiple frame displays the content of a frame it adds those content to it's display list (inside itself). After that if you add another child in it it will be on top. Then you move to another frame let's say frame 2. Once again the MovieClip adds the content of frame 2 inside itself, but since the child you added in the previous frame is already there all the new content is added on top of it.
I am developing a flex screen, in which i have a canvas, above to that there will be a button, by clicking that button we can create panels dynamically.My problem is if a panel was manually dragged and kept in the position where new panel to be created then new panel have to be created somewhere else that means not above any other panels.
How to achieve this..Pls give me any solution.Thanks
my first idea is that you keep array of created panels. while creating new panel, you should check in this list if any panel colides with the one you created (get x and y position and width, height and check if it kolides or not)
tou can also create new component based on canvas and override its addChild method.
I have a MovieClip called navbar and it has buttons over it. How do I connect the buttons to the MovieClip so that when the MovieClip is moved the buttons move with it? I have been able to make the navbar draggable but the buttons aren't dragged with it.
I have tried the following:
navbar.addChild(button1);
This just made the button disappear.
Your approach is correct: adding the buttons as children to the MovieClip will allow them all to be moved as one item.
The button disappearing could be any number of reasons, for instance x and y now relative to new parent (i.e. setting button y to 600 is now 600 pixels down from the navbar, not from the stage or old parent).
Try commenting out any properties you have set on the button and see if that resolves the issue, from there you can determine which property is causing the button to disappear.
So you should basically just have something like this:
var button1:Button = new Button();
navbar.addChild(button1);
If even with that minimal code doesn't result in the button displaying on the navbar, you'll need to post more code so that we can see where the problem is occurring.
you can calculate distance from Movieclip's X,Y to buttons and you can write a code like this:
var diff1:int = navbar.x - example_button1.x;
stage.addEventListener(Event.ENTER_FRAME, function(event:Event):void{
example_button1.x=navbar.x-diff1;
});
you can duplicate example_buttons and diff variables.
or you can startDrag() sametime with same event listener,
navbar.addEventListener(someEvent.some, function(event:someEvent):void{
MovieClip(root).navbar.startDrag();
MovieClip(root).example_button1.startDrag();
});
MovieClip(root) allows you to effect main stage. With this property you can effect an object from inside of navbar for example.
As you supposed, if you want the navbar and the buttons to act like a unique element you need to put buttons inside the navbar and not just over it.
The reason the button is disappearing is due to the fact that it has been put on the stage in Designer so, when you add it to navbar, you have it into two different display stacks, and that's not allowed.
You should put buttons inside the navbar in Designer, or export them for AS and then instance them dynamically, as follow:
var btn:Button1 = new Button1()
navbar.addChild(btn)
Class name Button1 is assigned in the MovieClip properties window of the Library, under Export for ActionScript.
I have create a custom contextMenu using AS3 and can apply that to the stage. Any movie clip I place onto the stage does not inherit the contextMenu from the stage, i.e. they display the default contextMenu.
How do I apply my custom contextMenu to every child in my application?
[edit]
This is a simplified version of what I have in my main.as file:
var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();
var my_copyright = new ContextMenuItem("Copyright - 2012");
my_copyright.enabled = false;
my_copyright.separatorBefore = true;
my_menu.customItems.push(my_copyright);
stage.contextMenu = my_menu;
If I right-click on the stage then I get the copyright. If I add a movieclip (or anything else) to the stage then right-click on that, then I get the default context-menu.
[edit]
I have found the problem, and fixed it. I was adding a background image using stage.addChildAt(mc, 0);. For some reason this removes the context menu. Placing the child at 1 fixes this and allows everything to inherit the contextMenu.
Before: http://richard.parnaby-king.co.uk/examples/stackoverflow/stackoverflow.swf
After: http://richard.parnaby-king.co.uk/examples/stackoverflow/stackoverflow-after.swf
I am changing the purpose of the bounty - can someone explain WHY this happens!?
Ok, so after a bit of testing this is what I have. I can't say it's that definitively, as flash doesn't give the events for right-click, so it's only a guess, but it seems to hold up.
On a side note, you can't add a context menu to the stage, it won't allow it, so the lowest item you can add it to is the document class
When you right-click on a DisplayObject, it'll look for a ContextMenu on that object. It it doesn't find one, it'll continue on up the hierarchy for that object looking for one, stopping when it finds one. Something like this:
stage
- document (has context menu1)
- parent (has context menu2)
- child
- parent2
In this example, if you right click on child, there's no menu, so it looks to parent. Here it finds context menu2 so it shows that. However if you right-click on parent2, there's no menu, so it looks to document and here it finds context menu1.
There seems to be a bit of a hack though when you right-click somewhere else on the stage (i.e. somewhere with no graphics). In this case, as the stage can't have a ContextMenu (or at least you can't set one), it seems to decide to use the context menu of the child at depth 0 (normally the document class).
When you added your background image at depth 0, you were bumping up your document class to depth 1. Your hierarchy now looks something like this:
stage
- bg
- document (has context menu1)
- parent (has context menu2)
- child
- parent2
I'm assuming you're adding your context menu to the document class (in this example context menu1), so unless your document class has some graphics in it, your event would search up to the stage, find no context menu, then try to look for the context menu of child 0 - in this case bg which doesn't have one.
You can test this by drawing something in the graphics object of your document class (or clicking on one of the nested elements). If you right click on the graphics, you'll see your custom menu, even though bg is at depth 0. Alternatively, you can add another menu to bg to see what I mean.
The answer to your why really is subjective to what else you add into the stage & their order.
I could quote 2 points from the adobe live docs relating to the same :
An index of 0 represents the back (bottom) of the display list for
this DisplayObjectContainer object.
If you specify a currently occupied index position, the child object
that exists at that position and all higher positions are moved up one
position in the child list.
I think if you properly analyse all that is added onto the stage, you yourself might get the answer.
try changing stage.contextMenu = my_menu; to just contextMenu = my_menu;
I am playing with animation in AS3 and flex4, and I've come into a problem. My application is a game board (like a chess board), where each field is a border container added to some position.
Also I am adding a child element (shape), to this container on mouse click. What I want to achieve is to be able to move shapes smoothly from one field to another. But it appears that the shape goes behind the neighbor field this way http://screencast.com/t/iZ3DCdobs.
I believe this happens because shape is a child of specific border container, and to make it visible over every other container, I would need to use layers somehow....
I would be happy if anybody could suggest a solution
Yes you're right on that. You should add the movable objects to a different layer.
As there are no typical layers in AS, you could try to drop the fields in one sprite and any other objects to a different an than place them on each other, so that when you will move a object it won't go behind other objects.
If you place both sprites in the same position you will still have accurate x,y positions between movable objects and fields.
You have two options:
First one is to have different layers for your DisplayObjects: as an example, the bottom layer would hold all the boards, and the upper layer would hold all the pieces.
Second option is to manipulate the index of the objects with swapChildren(), swapChildrenAt(), and setChildIndex(). So to bring a MovieClip to the topmost front, you would do MovieClip(parent).setChildIndex(this, 0);
If the situation is that always the shape object gets hidden behind the next ( right side ) grid container, the I suggest you create your grid in reverse.
Suppose you are creating a chess grid. that is a 8x8 grid. Normally you would create your grid using 2 for loops, looping from 0 to 8 with say the x and y points starting at 0,0 for the first grid and going on till the end. What I suggest you to do is to create from 8,8 to 0,0.
Display objects in flash are stacked on top of each other based on their child index.
For example: If you create two objects. Rectangle and Circle as follows
var rect:Rectangle = new Rectangle();
this.addChild(rect);
var circ:Circle = new Circle();
this.addChild(circ);
The circle will always be on top of the rectangle in this scenario because the circle was added after the rectangle to the display list.
So if you reverse the order of creation of your grid, the right grid cell will be added to the display list first and so the grid cells to the left will always be on top of the right ones. Hence, the problem that you are facing will not occur.