dcsimg
A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: [RESOLVED] [MX] On Drag effect for a selector switch navigation

  1. #1
    Senior Member brocwind's Avatar
    Join Date
    Jan 2003
    Location
    London
    Posts
    268

    [RESOLVED] [MX] On Drag effect for a selector switch navigation

    i need to create a 'selector switch' to use as navigation on a new site. It basically needs to be very similar to the attached file, but needs to be a round dial like the timer on a microwave for example, so it has a pointer that you drag around to point at one of the available choices, which changes the page.

    Has anyone ever created something similar or know how this would be done? I have no idea how to change the attached file to something that rotates around a center axis instead of just horizontally.

    Thanks in advance for any help
    Attached Files Attached Files

  2. #2
    :
    Join Date
    Dec 2002
    Posts
    3,518
    If you want it to go in a circle, this one from senocular -- http://www.senocular.com/flash/source.php?page=5&per=25
    could be adapted.
    See attached...

  3. #3
    Senior Member brocwind's Avatar
    Join Date
    Jan 2003
    Location
    London
    Posts
    268
    that's just what i was looking for thanks a lot, now i just got to figure out how to make it work a bit more like a selector switch.

    If you see the attached jpeg, i need to make it only turn between a certain couple of degree figures e.g 0 degrees to 160 degrees and then getURL when it snaps to the selected choice.

    Any idea how it could get that to work?
    Attached Images Attached Images

  4. #4
    :
    Join Date
    Dec 2002
    Posts
    3,518

    Maybe try something like this...

    See attached file...

  5. #5
    Senior Member brocwind's Avatar
    Join Date
    Jan 2003
    Location
    London
    Posts
    268
    that's great, nice one, how do i change the limits to specific degree values?

    Just one last thing, thanks again for all your help so far, I need it to have a selector switch graphic more like the original one that extends to the middle of the circle, ideally one like the attached file that rotates around the black spot.

    Could you make it work with the attached shape? I really won't be able to develop it like that myself
    Attached Images Attached Images

  6. #6
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Updated the file.

    Note that in flash 0 degrees is to the right, so the top is -90 degrees and not 0 degrees.

    Below are the numbers you want to change.
    Code:
    var startRot = -60; // this is where the first position is located
    var numOfPos = 6;  // this is the num of positions or links
    var degSpacing = 20; // this is the num of degrees between the positions or links
    Last edited by dawsonk; 08-22-2007 at 10:51 AM.

  7. #7
    Senior Member brocwind's Avatar
    Join Date
    Jan 2003
    Location
    London
    Posts
    268
    that's perfect mate thanks so much, exactly what i needed.

    Where would i add the getURL actions to each link? Is there a way of making that dynamic aswell rather than just specifying it by what angle it's pointing in or something?

  8. #8
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Code:
    stop();
    // establish a start position
    var startRot = -60;
    var numOfPos = 6;
    var degSpacing = 20;
    // *************************** list of URLs
    var myLinks = new Array("www.flashkit.com", "www.flashkit.com", "www.flashkit.com", "www.flashkit.com", "www.flashkit.com", "www.flashkit.com")
    //
    var endRot = ((numOfPos-1) * degSpacing) + startRot;
    var posArray = new Array();
    for (var i = 0; i < numOfPos; i++) {
    	posArray.push((i * degSpacing) + startRot);
    }
    //
    knob._rotation = startRot;
    //
    knob.pointer.onPress = function() {
    	knob.onMouseMove = function() {
    		// add a mouse move event to the knob
    		// get an angle to the mouse using atan2 (gets radians)
    		var angle = Math.atan2(this._parent._ymouse - this._y, this._parent._xmouse - this._x);
    		// apply rotation to knob by converting angle into degrees
    		this._rotation = Math.round(angle * 180 / Math.PI);
    		// make sure rotates only within valid area
    		if (this._rotation < 0 && this._rotation < startRot - (degSpacing / 2)) {
    			this._rotation = startRot - (degSpacing / 2);
    		} else if (this._rotation > 0 && this._rotation > endRot + (degSpacing / 2)) {
    			this._rotation = endRot + (degSpacing / 2);
    		}
    	};
    };
    knob.onMouseUp = function() {
    	// if a mouse move event, delete it on mouse up
    	if (this.onMouseMove) {
    		delete this.onMouseMove;
    	}
    	var newPos = numOfPos - 1;
    	for (var i = 0; i < numOfPos; i++) {
    		if (this._rotation < posArray[i]) {
    			newPos = i;
    			break;
    		}
    	}
    	this._rotation = posArray[newPos];
    	// **************************** put your getURL code here
    	trace(newPos+": "+myLinks[newPos]);
    };

  9. #9
    Senior Member brocwind's Avatar
    Join Date
    Jan 2003
    Location
    London
    Posts
    268
    nice one, works perfectly, thanks a lot for all your help

    cheers

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center