dcsimg
A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: need on rollOver effect for onDrag selector switch

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

    need on rollOver effect for onDrag selector switch

    I have a rotating selector switch for the navigation of a site, you can click on it and drag it around to one of the 9 page choices and when you release it the page will change to the last choice the pointed end of the switch was pointed at (see attached image).

    Here's the code on the main timeline:

    Code:
    stop();
    // establish a start position
    var startRot = -60;
    var numOfPos = 9;
    var degSpacing = 15;
    // *************************** list of URLs
    var myLinks = new Array("www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk");
    //
    var endRot = ((numOfPos-1)*degSpacing)+startRot;
    var posArray = new Array();
    for (var i = 0; i<numOfPos; i++) {
    	posArray.push((i*degSpacing)+startRot);
    }
    //
    knob._rotation = 0;
    //
    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]);
    	getURL("http://"+myLinks[newPos]);
    };

    I need to add a 'onRollOver' type effect when the pointer is pointing at each button, can anyone please show how i would do this with the above code?
    Attached Images Attached Images

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

    Maybe try something like this...

    Using movie clips "p0" thru "p8" as indicators, each has two frames, with a stop on the first frame.
    Code:
    stop();
    // establish a start position
    var startRot = -60;
    var numOfPos = 9;
    var degSpacing = 15;
    // *************************** list of URLs
    var myLinks = new Array("www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk", "www.test.co.uk");
    //
    var endRot = ((numOfPos - 1) * degSpacing) + startRot;
    var posArray = new Array();
    for (var i = 0; i < numOfPos; i++) {
    	posArray.push((i * degSpacing) + startRot);
    }
    function chkOver(mc) {
    	var newPos = 0;
    	for (var i = 0; i < numOfPos; i++) {
    		_root["p" + i].gotoAndStop(1);
    		if (mc._rotation > posArray[i]) {
    			newPos = i;
    		}
    	}
    	mc._parent["p" + newPos].gotoAndStop(2);
    	return newPos;
    }
    //
    knob._rotation = 0;
    //
    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);
    		}
    		var newPos = chkOver(this);
    	};
    };
    knob.onMouseUp = function() {
    	// if a mouse move event, delete it on mouse up
    	if (this.onMouseMove) {
    		delete this.onMouseMove;
    	}
    	var newPos = chkOver(this);
    	this._rotation = posArray[newPos];
    	// **************************** put your getURL code here
    	trace(newPos + ": " + myLinks[newPos]);
    	//getURL("http://" + myLinks[newPos]);
    };
    Last edited by dawsonk; 08-27-2007 at 06:54 PM.

  3. #3
    Senior Member brocwind's Avatar
    Join Date
    Jan 2003
    Location
    London
    Posts
    268
    works perfectly! Thanks a lot for your help

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