포물선 운동과 공 step11 : 클래스로 만들기 step09, 10까지 걸쳐서 이미 충분히 완성도 있게 완료는 되었지만 혹시 클래스로 이를 사용할 경우 우리는 단순히 new Ball()로 만들어서 쓰면 되므로 여러가지 잇점이 있다. Ball( $stage:Stage, $mc:MovieClip, $bottom:int, $top:int) 으로 생성자 함수에서 기본적으로 스테이지, 무비클립객체, 바닥한계, 높이한계를 인자로 받으며 두번째 인자인 $mc에 꼭 공이 아니더라도 무비클립객체 이기만 하면 그림자를 생성하고 공처럼 튕겨줄 것이다. 소스) package { import caurina.transitions.Tweener; import flash.display.Stage; import flash.displ..
포물선 운동과 공 step10 : 공의 움직임 함수로 만들기 버튼을 넣고 클릭 할 때마다 우리가 만들었던 내용을 계속해서 반영하려면 반영 될 때마다 ball의 오리지널 width, height, rotation을 지정해주고 거기에서 부터 다시 시작해야 한다. 즉 전역변수에 var ball_original_w:Number = 79; var ball_original_h:Number = 77.25; 으로 지정해 주고 function 공함수():void { ball.rotation = 0; ball.width = ball_original_w; ball.height = ball_original_h; } 이렇게 기존의 width, height, rotation값을 모두 초기화해 준 뒤시작해야 한다. 소스) impo..
포물선 운동과 공 step09 : 움직임과 위치를 랜덤하게 설정하기 step09에서는 랜덤하게 vx와 vy를 지정하고 공의 바운드 되는 바닥(bottom)또한 랜덤하게 설정한다. 랜덤에 관한 계산은 함수로 만들어서 사용하도록 하며, 여기에서 중요한 것은 공의 바운드 되는 바닥이 마이너스(모니터상 y축이 위로)될 수록 공의 원근감을 표현하기 위해 공의 사이즈가 작아진다는 것이다. 이것 또한 앞의 내용과 마찬가지로 비례식을 사용하도록 하겠다. 먼저 랜덤함수는 http://serpiko.tistory.com/314 에 자세하게 설명 되어져 있고 자바스크립트나 as3.0이나 제공하는 스펙은 비슷하다. 함수로 표현하면 function randomize($min:Number, $max:Number):Number {..
포물선 운동과 공 step08:그림자의 투명도와 크기 변화 공이 높이 튀어 오를수록 그림자는 흐릿해지고 작아진다. 이를 비례식에 대입해 넣고 적용시키면 된다. 참고로 비례식과 일차함수의 내용은 http://serpiko.tistory.com/40 http://serpiko.tistory.com/41 에서 자세하게 살펴볼 수 있다. A : a = B : b 를 생각해 보면 공이 바닥에 닿았을 때 : 공이 수직 운동 했을때 = 그림자 100% : 그림자 x 우리가 구하려는건 그림자 x 이며 프로그램으로 돌아와서 표현해보면 다음과 같다. bottom : ball.y = (_eclipse.alpha1=1) : (_eclipse.alpha = x) _eclipse.alpha = ball.y * (_eclipse...
포물선 운동과 공 step07 : 그림자 사이즈 조절 그림자가 공의 너비를 그대로 가지므로 아직 어색하다. 그림자는 공의 너비 70%를 가지게 조절하도록 해보자. 공식은 아래와 같다. 그림자 너비 = 공의 너비 * 70 / 100 이것을 함수로 바꾸면 function percent($target:Number, $per:Number):Number { return $target * $per / 100; } 이렇게 만들어 놓으면 percent(공.width, 70) 만 넣어주면 70%에 해당하는 수치를 반환해 줄 것이다. 소스) import flash.events.Event; import flash.display.Sprite; import flash.filters.BlurFilter; import flash...
포물선 운동과 공 step06 : 그림자 따라다니기 그림자가 공을 계속 따라다니려면 "그림자.x = 공.x" 로 간단하게 처리하면 된다. 소스) import flash.events.Event; import flash.display.Sprite; import flash.filters.BlurFilter; import flash.filters.BitmapFilterQuality; var g:Number = 1; var vy:Number = 8; var vx:Number = 10; var rot:Number = vx; var bottom:Number = stage.stageHeight - (ball.height/2) - 20; var _eclipse:Sprite = new Sprite(); _eclipse.g..
포물선 운동과 공 step05:그림자 만들기
포물선 운동과 공 step05 : 그림자 만들기 바운드 되는 위치에 그림자를 만들어 보겠다. _eclipse 라는 Sprite 데이터형의 객체를 한개 만들고 graphics 속성을 이용하여 타원을 그릴텐데 그림자 특유의 blur 처리를 위해 필터도 적용해 보도록 한다. import flash.display.Sprite; import flash.filters.BlurFilter; import flash.filters.BitmapFilterQuality; var _eclipse:Sprite = new Sprite(); _eclipse.graphics.beginFill(0x000000, 0.7); _eclipse.graphics.drawEllipse(0, 0, 80, 20); _eclipse.graphics...
포물선 운동과 공 step04 : 공의 회전 공의 회전은 오른쪽으로 진행할 때는 시계방향이므로 + , 왼쪽으로 진행할 때는 반시계방향이므로 - 이다. 다른 처리를 해줄 필요없이 ball의 x방향에 따라서 rotation을 적용해 주면 된다. rot 라는 변수를 하나 만들어서 x축의 변화가 있을때마다 부호를 바꿔준다. 소스) import flash.events.Event; var g:Number = 1; var vy:Number = 8; var vx:Number = 10; var rot:Number = vx; this.addEventListener(Event.ENTER_FRAME, function(e:Event):void{ vy += g; ball.y += vy; ball.x += vx; ball.rota..
포물선 운동과 공 step03 : 공에 수평운동 추가 앞서 수평운동은 vy와 마찬가지로 단순히 vx 변수를 만들어서 ball.x에 계속 더해주면 된다. step01과 마찬가지의 방식으로 vx의 오른쪽 끝은 stage.stageWidth - (ball.width / 2), 왼쪽 끝은 ball.width / 2로 구하여 조건문 처리 해준다. 소스) import flash.events.Event; var g:Number = 1; var vy:Number = 8; var vx:Number = 10; this.addEventListener(Event.ENTER_FRAME, function(e:Event):void{ vy += g; ball.y += vy; ball.x += vx; if( ball.x > stage..
포물선 운동과 공 step02:공에 중력 더하기
포물선 운동과 공 step02 : 공에 중력 더하기 앞서 step01에서 살펴본 공의 움직임은 중력이 없기 때문에 약간 부자연스럽다. 중력을 포함하는 공식은 아래와 같다. g = 1 (중력가속도 값) 수직 방향의 속도 = 수직 방향의 속도 + g 움직이는 물체 = 움직이는 물체 + 수직 방향의 속도 공식을 그대로 적용하여 소스로 옮기면 var g:Number = 1; var vy:Number = 8; 매프레임(시간)이 증가할 때 마다 vy = vy + g; ball.y = ball.y + vy; 포물선 운동에서 x축과 y축 어떠한 물체를 던져 올릴 경우 사선운동에 있어서 수평 방향으로는 공기의 저항을 무시하므로 등속 운동. 수직방향은 중력운동을 하므로 등가속도 운동을 한다. 이러한 운동을 포물선 운동이라..