포물선 운동과 공 step08:그림자의 투명도와 크기 변화

   포물선 운동과 공

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.alpha1=1) / bottom

_eclipse.alpha = ball.y  *  1 / bottom 이 된다.

그림자 사이즈는 우리가 70%가 되길 원했으므로 직접 그림자의 width로 제어하면 다시 원래의 사이즈로 되돌아 가므로

변수를 하나 만들어서 70%에 대한 사이즈를 저장하고 그것을 기준으로 제어해야 한다.

_eclipse_sizeW = percent(ball.width, 70);

_eclipse.width = _eclipse_sizeW; 로 일단 70% 사이즈로 처리한 뒤

bottom : ball.y = (_eclipse.width가 아니라 _eclipse_sizeW) : (_eclipse.width = x)

_eclipse.width = ball.y  *  _eclipse_sizeW / bottom

_eclipse.width = ball.y  *  _eclipse_sizeW / bottom 이 된다.

소스) 

step08.fla

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 _eclipse_sizeW:Number;
var bottom:Number = stage.stageHeight - (ball.height/2) - 20;  
					  
var _eclipse:Sprite = new Sprite();
_eclipse.graphics.beginFill(0x000000, 0.7);
_eclipse.graphics.drawEllipse(-ball.width/2, -20/2, ball.width, 20);
_eclipse.graphics.endFill();

_eclipse.x = ball.x;
_eclipse.y = bottom + (ball.height/2) + 10;

_eclipse_sizeW = ball.width * 70 / 100; //그림자는 볼의 70%사이즈
_eclipse.width = _eclipse_sizeW;

_eclipse_sizeW = percent(ball.width, 70);
_eclipse.width = _eclipse_sizeW;

var blur:BlurFilter = new BlurFilter(10, 5, BitmapFilterQuality.HIGH);
_eclipse.filters = [blur];

addChild(_eclipse);

var num:int = this.numChildren;
this.setChildIndex(ball, num-1);
//addChild(ball);

this.addEventListener(Event.ENTER_FRAME, function(e:Event):void{
					  	  vy += g;
						  ball.y += vy;
						  ball.x += vx;
						  ball.rotation += rot;
						  
						  _eclipse.x = ball.x;
						  _eclipse.alpha = ball.y * 1 / bottom;
						  _eclipse.width = ball.y * _eclipse_sizeW / bottom;
			
						  if( ball.x > stage.stageWidth - (ball.width/2) ) {
							ball.x = stage.stageWidth - (ball.width/2);
							vx = -vx;
							rot = -rot;
						  }
						  if( ball.x < (ball.width/2) ) {
							ball.x = ball.width/2;
							vx = -vx;
							rot = -rot;
						  }

						  if( ball.y > stage.stageHeight - (ball.height/2) ) {
							ball.y = stage.stageHeight - (ball.height/2);
							vy = -vy;
						  }
						  if( ball.y < (ball.height/2) ) {
							ball.y = ball.height/2;
							vy = -vy;
						  }
					  });

function percent($target:Number, $per:Number):Number
{
	return $target * $per / 100;
}

결과)