휠마우스로 원형메뉴 돌리기

전시간에는 삼각 함수로 도형을 그렸습니다.

이번에는 만든 도형을 움직여 볼께요.

꼭지점 부분에다가 메뉴가 될 무비클립을 붙여넣기 하고 각도 변위값을 휠마우스delta 값에 맞게 바꾸어 주면 원으로 돌리는 모션을 만들 수 있습니다.

휠마우스 이벤트가 블로그에서 브라우저에도 먹히기 때문에 문서에는 embed하지 않고 첨부파일 열어서 테스트 해 주시기 바랍니다.

 

삼각함수_5_휠마우스로n각형돌리기.fla

 

소스코드입니다.

var n:Number = 8;  //n각형을 그려볼까?

var t:Number = 0;  //파이값

var tt:Number = 0;   //n 각 하나에 해당하는 파이

var cx:Number = 275; //중심점x

var cy:Number = 200; //중심점y

var rx:Number = 100; //타원가로반경

var ry:Number = 100; //타원세로반경 

var menuArray:Array = new Array();

//메뉴생성

for(var i:int=0; i<n; i++){

 var mc:Mc_menu = new Mc_menu();

 mc.x = cx + rx * Math.cos(t+i/n * 2*Math.PI - Math.PI/2);

 mc.y = cy + ry * Math.sin(t+i/n * 2*Math.PI - Math.PI/2); 

 menuArray.push(mc);

 mc.tf.text = String(i);

 addChild(mc);

}

//휠마우스이벤트

stage.addEventListener(MouseEvent.MOUSE_WHEEL, wheel);

function wheel(e:MouseEvent):void{

 if(e.delta > 0){

  tt += 1/n*2*Math.PI;

 }else if(e.delta < 0){

  tt -= 1/n*2*Math.PI;

 }

 trace(e.delta );

 trace(tt);

}

//엔터프레임 t값 변화 부드러운 움직임

addEventListener(Event.ENTER_FRAME, moveMenu);

function moveMenu(e):void{

 for(var i:int=0; i<n; i++){

  menuArray[i].x = cx + rx * Math.cos(t+i/n * 2*Math.PI - Math.PI/2);

  menuArray[i].y = cy + ry * Math.sin(t+i/n * 2*Math.PI - Math.PI/2);

 }

 t += 0.2*(tt-t); 

}

 

타원도 만들 수 있겠죠?

 

3D도 가능할 것 같은 마음이 저쪽에서 은근슬쩍 밀려오네요.

 

다각형그리는 것은 위의 소스에서 첫줄에 있는

var n:Number = 5;  대신에

var n:Number = 12;

처럼 적어주면 됩니다.