Page 1 of 3 123 LastLast
Results 1 to 15 of 33

Thread: Awesome menu, any ideas?

  1. #1
    203
    posts
    Registered User

    Awesome menu, any ideas?

    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?

  2. #2
    lunatic's Avatar
    9,895
    posts
    "I feel like I'm taking crazy pills!"
    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.


  3. #3
    Interesting menu ... let's see if I can pull something up ...
    Wait, what?

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

    scotty

  5. #5
    lunatic's Avatar
    9,895
    posts
    "I feel like I'm taking crazy pills!"
    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.

  6. #6
    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

  7. #7
    203
    posts
    Registered User
    Nice start Scotty. You guys are amazing.

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

    Code:
    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;
    };
    Wait, what?

  9. #9
    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

  10. #10
    Here's a rough coded version of a clickable line:

    Code:
    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);
    					}
    				};
    			}
    		}
    	}
    };
    Wait, what?

  11. #11
    What does straal and hoek mean ??
    Look at yourself in the mirror and ask... have I met you before?

  12. #12
    straal = radius, hoek = angle
    Wait, what?

  13. #13
    lunatic's Avatar
    9,895
    posts
    "I feel like I'm taking crazy pills!"
    whoa.

    rubs her eyes and shakes her head in disbelief

    Hey V, any chance you could comment a few of those?
    "i walk in stride with people much taller than me and partly it's the boots but mostly it's my chi and i'm becoming transfixed with nature and my part in it which i believe just signifies i'm finally waking up "


  14. #14
    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
    Wait, what?

  15. #15
    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..?)
    Joe
    www.eyezberg.com

Page 1 of 3 123 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012