Rotating Navigational Menu

[XParadigmX]

If any of you have ever played Tomb Raider or something and have seen the menu, you'll know exactly what I'm talking about.

Basically it's a circular-motioned rotation of icons. What I want to do is when you move the cursor towards the left side of it, it moves to the right and vice versa. Then you can make a selection through that navigational menu.

Are there tutorials that are like this on Flashkit or other sites? Hwo would I make something like this? Would it be easy?

Help is much, much appreciated. Many thanks in advance.

[XParadigmX]

Anybody know? It's a real emergency.

[jbum]

I'm pretty sure I can help you, but since I haven't played tomb raider, it would help if you could draw a quick picture and post it.

I need to know if it's a full circle, or a partially obscured circle...

- Jim

[jbum]

Here's a first pass on a script for such a beastie. Put a circular movie on the stage that has it's registration point in the center of the circle (e.g. within the movie, the buttons are arranged in a circle around the crosshairs).

Name the movie wheel_mc.

Then put the following script in frame 1.

code:

---

MouseExtent = Stage.width/2;

MaxSpinSpeed = 10;



wheel_mc.onEnterFrame = function()

{

	var dir = (_root._xmouse - this._x)/MouseExtent;

	this._rotation += dir*MaxSpinSpeed;

}

---

The script basically says that when the mouse is MouseExtent away from the center of the wheel, the wheel will spin at a rate of MaxSpinSpeed. If the mouse is closer than this, it will spin at a slower rate. It slows to a near stop when the mouse is centered on the wheel.

If the wheel is centered on the stage, then the furthest the mouse can get from the wheel is Stage.width/2.

[moagrius]

here's an imperfect sample i've been toying with, might find something helpful

code:

---

function buttonmaker(t, n, x, y, w, h, c, b, s) {

	t._z == undefined ? t._z=0 : t._z++;

	t.createEmptyMovieClip(n, t._z);

	t[n]._x = x;

	t[n]._y = y;

	t[n].createEmptyMovieClip("sq", 0);

	t[n].sq.lineStyle(1, b);

	t[n].sq.beginFill(c);

	t[n].sq.lineTo(w, 0);

	t[n].sq.lineTo(w, h);

	t[n].sq.lineTo(0, h);

	t[n].sq.lineTo(0, 0);

	t[n].sq.endFill();

	t[n].createTextField("tf", ++t._z, 10, 0, w, h);

	t[n].tf.text = s;

	var tfo = new TextFormat("tahoma", 11, 0x999999, true);

	t[n].tf.setTextFormat(tfo);

}

function rotation(t, q) {

	for (var i = 0; i<q; i++) {

		buttonmaker(t, "rm"+i, Stage.height/2, Stage.height/2, 150, 20, 0xff8800, 0xcccccc, "button"+i);

		t["rm"+i]._r = Math.PI*2*i/q;

		t["rm"+i].onEnterFrame = function() {



			this._r += .07;

			this._x = (Math.cos(this._r)*360)/3;

			this._y = (Math.sin(this._r)*180)/3;

			this._alpha = this._yscale=this._xscale=50+Math.sin(this._r)*25;

			

		};

	}

}

---

[XParadigmX]

A 2D circle can be fine. But it would be cooler if it was sitting flat.

That way when they're rotating, the icons would gradually shrink as they approach the back part of the circle and when they come to the front of the screen again, they would enlarge.

I'm not exactly sure how to use these wonderful scripts you guys wrote up either. :P

Are they in FLAs?

[gparis]

Originally posted by XParadigmX
That way when they're rotating, the icons would gradually shrink as they approach the back part of the circle and when they come to the front of the screen again, they would enlarge.

You should definitely post a picture/story board. What you just said is confusing.

gparis

[XParadigmX]

Here is an image. One diagram is the 3-Dimensional diagram, and the other is 2-Dimensional.


I hope this helps.

[moagrius]

Originally posted by XParadigmX
A 2D circle can be fine. But it would be cooler if it was sitting flat.

That way when they're rotating, the icons would gradually shrink as they approach the back part of the circle and when they come to the front of the screen again, they would enlarge.

I'm not exactly sure how to use these wonderful scripts you guys wrote up either. :P

Are they in FLAs?

as far as the one i wrote, just paste it into frame 1 of a new fla and publish or test.

[XParadigmX]

I pasted the code into the first frame and I get a blank screen.

PS: the rotation speed shouldn't increase faster and faster as the cursor is more way from the object. ^_^;;

[gparis]

Originally posted by XParadigmX
PS: the rotation speed shouldn't increase faster and faster as the cursor is more way from the object. ^_^;;

Then you could go with something like this:

Make your circle movieClip, place it on _root, give it the instance name of 'wheel' in the movieclip property panel and paste this on the 1st frame on _root:

code:

---

limitLeft = wheel._x-(wheel._width/2);

limitRight = wheel._x+(wheel._width/2);

speed = 4;

function rotate() {

    if (_root._xmouse<limitLeft) {

        wheel.onEnterFrame = function() {

            this._rotation+=speed;

        };

    } else if (_root._xmouse>limitRight) {

        wheel.onEnterFrame = function() {

            this._rotation-=speed;

        };

    } else {

        delete wheel.onEnterFrame;

    }

}

this.onMouseMove = function() {

    rotate();

};

---

gparis

[moagrius]

Originally posted by XParadigmX
I pasted the code into the first frame and I get a blank screen.

PS: the rotation speed shouldn't increase faster and faster as the cursor is more way from the object. ^_^;;

well, you have to actually call the function...

add this line

code:

---

rotation(this, 10);

---

[NTD]

Hi,

Have a look at this demo. Manipulate 'thisBall.ellipseHeight=.1" to change the orientation of the elipse.

hope it helps
NTD

[jbum]

And here's yet another try at it - see the enclosed.

- Jim

[moagrius]

that one wins. nice, jbum.

[XParadigmX]

Hey guys. I'm a bit late and a bit frustrated with this scripting stuff. Thanks for all of your hard work. I decided to go with a 2D rotational menu now.

The problem now that stands is getting the menus to rotate.

THE FLA is included.

What I'm basically trying to acheive is when you press the left or right arrow button, it will move to the next icon in that direction, then stops (USING ACTION SCRIPT TO ROTATE NOT THE TIMELINE.. There's a big reason for this: I plan to make even more pages inside which will create conflicts and stuff). Then it somehow knows which one is being detected through actionscript. Then if you click OK it'll go to the designated frame on the timeline.

This is the final thing I need help with. Many thanks again for all your help.

[XParadigmX]

Thank you so much for your help guys! I'm back on track. Got 10 hours to finish this off. Many, many thanks. Much much appreciated!

[gparis]

I downloaded your menu, and noticed a few things that led me to think it had to be re-built entirely to work. The major bug being alignment. Which becomes quite important if you want, for example, to 'rotate" something. Easier if it round and aligned!

If questions, post back. file in attachment.

gparis

[moagrius]

that's nicely done gparis.

edit: just saw yours for the first time NDT, very cool as well :/

[NTD]

I have little doubt that jbums is the best version. Just wish he would demo things for us slow MX users. I would like to see his demo.

NTD