Z-Order / setChildIndex problem

[jmjw1985]

Hi everyone.

I am trying to simultaneously modify 5 movieclip index values but I am having a struggle.

I am attempting to create a 3D illusion of four movieclips rotating around a central movieclip.

See below:
http://jwhite.co.uk/spinJW.JPG

I have the rotating part working, but I need all of the movieclips to be in the correct order so they appear to be orbiting 360 degrees around.

I have tried using standard setChildIndex() and swapChildren() methods, but movieclips are duplicating and remaining stationary when I do this.

Here is a demo of the rotating clips so you can get an idea
http://jwhite.co.uk/jwspin_test/jwSPIN3.swf

Any help would be great.

Cheers, Jamie.

[Computer Dork]

Have you tried simply using addChildAt(Number) each time? It's sloppy, but it works.

[jmjw1985]

Would that not create duplicate movieclips? (remembering that all of the movieclips on-screen are already tweened on stage)

I will try it nethertheless. Thanks :)

[jmjw1985]

Have you tried simply using addChildAt(Number) each time? It's sloppy, but it works.

I haven't had any luck with this. It duplicates the clips. Thanks for the reply though.

[Jedimace1]

You delete the old clip, or use setChildIndex().

[z07]

hey just passing by and stumbled upon this thread, im a newbie to as3, if its possible could u please let me know how u got those to move on the guide?

thanks in advance

[senocular]

hey just passing by and stumbled upon this thread, im a newbie to as3, if its possible could u please let me know how u got those to move on the guide?

thanks in advance

Start here:
http://livedocs.adobe.com/flash/9.0/UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7d83.html

[z07]

SENOCULAR thanks for the quick response i'v checked out your link, but it seems i was misunderstood, i already know how to make guide and set elements to run along them by tweeining, but what i dnt know is how to do it in AS3 with scripting... any ideas or links on that one? would really apreciate it, i'v been googling it for the past 3days, cant seem to find anything:confused:

[drek]

why don´t you just quick- or bubblesort your displayList (regarding to the z-Order) of each clip, that´s very fast and lightwight.

drek

[senocular]

SENOCULAR thanks for the quick response i'v checked out your link, but it seems i was misunderstood, i already know how to make guide and set elements to run along them by tweeining, but what i dnt know is how to do it in AS3 with scripting... any ideas or links on that one? would really apreciate it, i'v been googling it for the past 3days, cant seem to find anything:confused:

The example above uses a timeline motion guide. Were you looking for something 100% scripted?

[z07]

SENOCULAR

oh sorry, i just assumed it was coded. actually yes, i am trying to make something similar to this but with only script, i have just started it but cant really get anywher until i know how to move it on the path(with script), i can move mc's with the tween class already, on the x and y axis only, but need to get that smooth circular motion the guide gives.... any ideas?

[senocular]

That's kind of a different problem. Do you need a path or do you need circular motion? Circular motion is often better managed through some basic trig rather than a dynamic path.

x = Math.cos(angle)*radius;
y = Math.sin(angle)*radius;

and just increment (tween) the angle value. You can even get an oval shape by using different radius values for x and y

[drek]

and additionally to that, you could setup a sin- and cosine-table (object, class or array), precalculate all your circle math, so that you can shorten your calculations when accessing the main frameEvent´s.

[CJ Cat]

If you're trying to make something going around in a 2.5D circle.
I just happen to have done some research into this effect.

I made an API called Carousel, where you can create this effect with a few lines of code.
All Z-depth ordering are taken good care of for you.
And the objects that go around in a Carousel is called Ponies.

Here is a sample for how to use Carousel in your application.
You can view it online (http://homepage.ntu.edu.tw/~b95901008/bbsfiles/AS/Carousel%20test/CarouselSample.swf) and download the source (http://homepage.ntu.edu.tw/~b95901008/bbsfiles/AS/Carousel%20test/CarouselSample.rar).

For more Carousel applications, you can check it out at my Carousel development log right here (http://cjcat.blogspot.com/search/label/Carousel).

All you type in is a couple of lines of self-explanatory code like:

//import the Carousel API package
import idv.cjcat.display.carousel.*;

//create a Carousel object
var carousel:Carousel = new Carousel();

//set up the centers and radii of x, y, scale, alpha property for your Carousel
carousel.centerX = 320;
carousel.radiusX = 200;
carousel.centerY = 200;
carousel.radiusY = 50;
carousel.centerS = 1;
carousel.radiusS = 0.3;
carousel.centerA = 0.7;
carousel.radiusA = 0.5;

//add three Ponies
//the second parameter for a Pony constructor is the 'phase' of the Pony in the Carousel circle
carousel.add(new Pony(yourObject1, 2 * Math.PI / 3 * 1));
carousel.add(new Pony(yourObject2, 2 * Math.PI / 3 * 2));
carousel.add(new Pony(yourObject3, 2 * Math.PI / 3 * 3));

//constantly changing the 'Carousel reference phase' and re-rendering the Carousel
//increasing the Carousel's phase creates the illusion of 2.5D rotation
addEventListener(Event.ENTER_FRAME, rotate);
function rotate(e:Event):void {
carousel.phase += 0.01;
carousel.render();
}

[z07]

wow thanks man, u think ill be able to manipulate it to be mouse sensitive? well i'll be trying, thanks again...

[z07]

CJCAT - hey just checked your site/blog great stuff man, i see u have minipulated it for interactivity, thanks again dude

[CJ Cat]

Of course it's possible to make it mouse sensitive~
All you have to do is to tweak the phase property of the Carousel according to the mouse position.
And remember every time you alter the phase of a Carousel, remember to call its render() method afterwards.

Here's some sample code for mouse sensitive interaction.


addEventListener(Event.ENTER_FRAME, tweak);
function tweak(e:Event):void {
carousel.phase = mouseX / 100;
carousel.render();
}

[yeezer1]

Hi everyone.

I am trying to simultaneously modify 5 movieclip index values but I am having a struggle.

I am attempting to create a 3D illusion of four movieclips rotating around a central movieclip.

See below:
http://jwhite.co.uk/spinJW.JPG

I have the rotating part working, but I need all of the movieclips to be in the correct order so they appear to be orbiting 360 degrees around.

I have tried using standard setChildIndex() and swapChildren() methods, but movieclips are duplicating and remaining stationary when I do this.

Here is a demo of the rotating clips so you can get an idea
http://jwhite.co.uk/jwspin_test/jwSPIN3.swf

Any help would be great.

Cheers, Jamie.

Hi Jamie, I realize your post is old, but I'm wondering if you found a solution to your problem? I'm having the same issue of movieclips duplicating after using swapChildren or setChildIndex. They don't duplicate upon using those functions, but they duplicate the next time the parent movieclip (the one that contains those moviclips) has its timeline played. During the parent movieclip's animation, those children movieclips (the ones having the problem) are animated via code only using a simple tween to move them off or on stage.

Thanks for any insight.

[pheno7]

I used this workaround having this same issue:
Move your animation frames inside a child (nested) movieclip so the tween/motion properties won't be overridden with "setChildIndex".
You can also copy the frame of your parent animation as a guide layer in your animation (check that guide layers aren't exported).

In more complex project I would also suggest to wrap animations in separate swfs. It would also make possible to use timeline-based animations in flex projects.

Discovering the new motion-tween features, it's kind of sad to see that it does not fully integrate with AS3. The editor must generate keyframes instead of AS3 commands or am I wrong?

Timeline animation is a powerfull tool when you do animations that are too complex or artistic to compute by code without the help of a math scientist. In the 3D field, many skilled animators still use timeline-like techniques for artistic purposes. That said, I wish that "half and half" will remain possible.

[yeezer1]

Thanks very much for the response. I ended up converting all the animation from the movieclip to use actionscript. Your solution would've been better :)

I totally agree that it would be nice if we could use both timeline and actionscript animations. I understand the school of thought that you should commit to one or the other from the standpoint of consistency. I'm a big proponent of consistency in everything in programming, but I don't think that applies to Flash animations. Not only are some too artistic to do in scripting without a math and physics doctorate, but some are just so much quicker to do on a timeline, saving time and money in creating them and maintaining them. I think both of your suggestions are great, wrapping timeline animations inside child movieclips or separate swfs.