Awesome menu, any ideas?

[JustinM]

I've come accross a real cool menu on dewars.com. http://www.dewars.com/history/ go here and click on the Timeline button. Anyone know where I could find some sort of tutorial that shows how the little placekeeper moves along the arch as you drag it?

[lunatic]

My guess would be a basic slider bar like this one:

http://www.kirupa.com/developer/mx/slider.htm

But the path is circular instead of a straight line. You'd have to change both the _x AND _y properties, instead of just _x like the tut, but functionality is the same.

[Voetsjoeba]

Interesting menu ... let's see if I can pull something up ...

[scotty]

here is just a rough start.
works if you roll over the red bar

scotty

[lunatic]

Sweet Scotty! You are quick!

But how hard would it be to modify so that the menu moves only when a symbol on the half circle is dragged?

I think that's the functionality that Justin is looking for.

[scotty]

i know, like i said, it was just a rough start. dragging will be hard, at least for me, but i have some ideas. i'll let you know if i've figured it out.
(and in the meantime i stay hoping that Voetsjoeba figures something out)

scotty

[JustinM]

Nice start Scotty. You guys are amazing.

[Voetsjoeba]

Here's some code that recreates the effect ... all AS, so just copy and paste on the first frame of a new file ...

d = 0;
straal = 200;
centrum = {x:350, y:250};
hoek1 = Math.PI+(Math.PI/2);
//--------------------------------------------------------
Math.toDegrees = function(radians) {
	return radians*180/Math.PI;
};
//--------------------------------------------------------
this.createEmptyMovieClip("driehoek", d++);
driehoek.lineStyle(0, 0x000000, 100);
with (driehoek) {
	moveTo(5, -5);
	beginFill(0x0000000, 20);
	lineTo(5, 5);
	lineTo(-5, 0);
	lineTo(5, -5);
	endFill();
}
//--------------------------------------------------------
this.createTextField("p", d++, centrum.x+20, centrum.y, 100, 20);
s = new TextFormat();
p.setTextFormat(s);
//--------------------------------------------------------
this.createEmptyMovieClip("lijn", d++);
lijn.lineStyle(1, 0x000000, 100);
lijn.moveTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);
lijn.onEnterFrame = function() {
	hoek1 -= 0.1;
	if ((centrum.x+Math.cos(hoek1)*straal)<centrum.x) {
		driehoek._x = centrum.x+Math.cos(hoek1)*(straal-10);
		driehoek._y = centrum.y+Math.sin(hoek1)*(straal-10);
		driehoek._rotation = Math.toDegrees(hoek1);
	} else {
		driehoek._x = centrum.x+Math.cos(Math.PI/2)*(straal-10);
		driehoek._y = centrum.y+Math.sin(Math.PI/2)*(straal-10);
		driehoek._rotation = Math.toDegrees(Math.PI/2);
		delete this.onEnterFrame;
	}
	this.lineTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);
};
//--------------------------------------------------------
driehoek.onPress = function() {
	this.onMouseMove = function() {
		_root._xmouse<=centrum.x ? hoek=Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse)) : null;
		this._x = centrum.x+Math.cos(hoek)*(straal-10);
		this._y = centrum.y+Math.sin(hoek)*(straal-10);
		this._rotation = Math.toDegrees(hoek);
		p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100)
	};
};
driehoek.onRelease = driehoek.onReleaseOutside=function () {
	delete this.onMouseMove;
};

[scotty]

Voetsjoeba: wow, that's what we call drag
i think i have to spent some nights (weeks) before i really understand it, but i will!!
i just came a little further, still no drag, but now, if you mouseover, the menu moves (and is clickable)

scotty

[Voetsjoeba]

Here's a rough coded version of a clickable line:

d = 0;
straal = 200;
centrum = {x:350, y:250};
hoek1 = Math.PI+(Math.PI/2);
hoek = Math.PI/2
//--------------------------------------------------------
Math.toDegrees = function(radians) {
	return radians*180/Math.PI;
};
//--------------------------------------------------------
this.createEmptyMovieClip("driehoek", d++);
driehoek.lineStyle(0, 0x000000, 100);
with (driehoek) {
	moveTo(5, -5);
	beginFill(0x0000000, 20);
	lineTo(5, 5);
	lineTo(-5, 0);
	lineTo(5, -5);
	endFill();
}
//--------------------------------------------------------
this.createTextField("p", d++, centrum.x+20, centrum.y, 100, 20);
s = new TextFormat();
p.setTextFormat(s);
//--------------------------------------------------------
this.createEmptyMovieClip("lijn", d++);
lijn.lineStyle(5, 0x000000, 100);
lijn.moveTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);
lijn.onEnterFrame = function() {
	hoek1 -= 0.1;
	if (hoek1>Math.PI/2) {
		driehoek._x = centrum.x+Math.cos(hoek1)*(straal-10);
		driehoek._y = centrum.y+Math.sin(hoek1)*(straal-10);
		driehoek._rotation = Math.toDegrees(hoek1);
	} else {
		driehoek._x = centrum.x+Math.cos(Math.PI/2)*(straal-10);
		driehoek._y = centrum.y+Math.sin(Math.PI/2)*(straal-10);
		driehoek._rotation = Math.toDegrees(Math.PI/2);
		delete this.onEnterFrame;
	}
	this.lineTo(centrum.x+Math.cos(hoek1)*straal, centrum.y+Math.sin(hoek1)*straal);
};
//--------------------------------------------------------
driehoek.onPress = function() {
	this.onMouseMove = function() {
		_root._xmouse<=centrum.x ? hoek=Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse)) : null;
		this._x = centrum.x+Math.cos(hoek)*(straal-10);
		this._y = centrum.y+Math.sin(hoek)*(straal-10);
		this._rotation = Math.toDegrees(hoek);
		p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
	};
};
driehoek.onRelease = driehoek.onReleaseOutside=function () {
	delete this.onMouseMove;
};
lijn.onRelease = function() {
	if (_xmouse<=centrum.x) {
		tH = Math.PI+Math.atan((centrum.y-_ymouse)/(centrum.x-_xmouse));
		if (hoek != tH) {
			if (tH<hoek) {
				driehoek.onEnterFrame = function() {
					hoek -= 0.01;
					if (hoek<tH) {
						delete this.onEnterFrame;
					} else {
						this._x = centrum.x+Math.cos(hoek)*(straal-10);
						this._y = centrum.y+Math.sin(hoek)*(straal-10);
						this._rotation = Math.toDegrees(hoek);
						p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
					}
				};
			} else {
				driehoek.onEnterFrame = function() {
					hoek += 0.01;
					if (hoek>tH) {
						delete this.onEnterFrame;
					} else {
						this._x = centrum.x+Math.cos(hoek)*(straal-10);
						this._y = centrum.y+Math.sin(hoek)*(straal-10);
						this._rotation = Math.toDegrees(hoek);
						p.text = Math.round(((Math.toDegrees(hoek)-90)/180)*100);
					}
				};
			}
		}
	}
};

[hamza84]

What does straal and hoek mean ??

[Voetsjoeba]

straal = radius, hoek = angle

[lunatic]

whoa.

rubs her eyes and shakes her head in disbelief

Hey V, any chance you could comment a few of those?

[Voetsjoeba]

It'll take some time to explain ... I'll need to draw a few images which will take time ... I'll start writing the explanation right away

[eyezberg]

Don't know if you folks noticed the preloader/right-clicked, but this is not Flash, it's Director...
Nice code still, voetsjoeba (does this mean anything..?)