스크랩 눈송이 액션으로 떨치기(보너스 실용 눈 내리기 소스 추가)

[청암]

눈송이 떨치기 둘째마당

---

눈송이를 액션을 이용해서 떨쳐 봅시다. 눈송이의 떨어지는 경로까지 액션으로 정의할 예정이므로 제법 난이도가 높아 집니다.  총 4단계 업그레이드가 됩니다만, 각 단계에서 그만해도 됩니다. ^^ 라이브러리창에서 복제해서 다양하게 무비클립을 만든 후에 복사해서 뿌리면 되니깐요. 각 단계에선 액션 함수를 좀 더 넣어서 혼합해 가는 과정을 보여 줍니다. 예를 들어 duplicateMovieClip 액션을 안다는 전제하에 기존의 내용을 합쳐가는 겁니다. 이 전제는 기초강좌에서 설명하는 대목입니다. 해당 강좌를 읽어서 액션을 어떻게 쓰는 지 파악하신 후에 접해 주세요.

삼각함수에서 싸인 곡선과 코싸인 곡선이 1과 -1 사이에서 일정한 경로를 눈송이의 떨어지는 경로로 만들어 봅시다.

일단 디자인을 보면, 눈송이를 그려 준 후에 무비클립으로 잡아 줍니다.

그리고 인스턴스 이름을 snow라고 줍니다.

이걸로 디자인은 끝납니다. ^^ 이제부터 철저히 액션만 씁니다. ㅠㅠ

플래쉬액션스크립트에선 삼각함수를 다음과 같이 씁니다.

Math.sin(); Math.cos();

()안에 숫자가 들어가면 각각의 싸인값과 코싸인값을 구할 수 있게 됩니다. 수학시간이 아닌 관계로 싸인 45도가 몇이야? 이런 질문은 안 합니다. ^^ 듣자니 포병장교들은 1도씩 다 외우고 다닌다는...

이제 숫자를 계속 넣어줄 궁리를 합시다. 쉬운 방법은 시간함수를 넣어주면 간단해 집니다. 밀리초단위로 넣을 수 있는 건 getTimer(); 함수가 있습니다.

Trace(getTimer()); 라는 액션을 써서 플래쉬를 돌려보면, 숫자가 0부터 차근차근 올라가는 걸 알 수 있습니다.

초단위로 하고 싶다면,

Mydate=new date;

Mydate.getSeconds();

이런 액션을 쓸 수 있습니다. 이건 속도에 관련된 것이므로 이 두가지 옵션을 가지고 진행해 봅시다.

삼각함수의 값에 시간함수를 넣으면,

Math.sin(getTimer()); Math.cos(Mydate.getSeconds());

이런 액션들을 생각해 볼 수 있습니다. Trace로 추적해 보면 -1에서 1 사이의 값들이 계속 호출이 됩니다.

이 값들로 눈송이의 x축 이동 즉 흔들림 또는 좌우이동을 액션으로 제어 할 수 있게 됩니다.

snow._x+=Math.sin(getTimer());

최종적으로 이 액션식이 나옵니다. 그외 cos 이나 초단위로 해서 하면 서너 액션식들을 추가로 얻을 수 있습니다.

snow._x+Math.sin(Mydate.getSeconds());

snow._x+Math.cos(Mydate.getSeconds());

snow._x+=Math.cos(getTimer());

이런 액션식들이 추가로 나옵니다. 눈송이의 경로의 풍성함을 위해서 써 봅시다.

위의 액션들은 눈송이의 x축 이동에만 관여합니다. 따라서 써서 돌려보면, 눈송이가 안 떨어지고 좌우이동만 하고 있게 됩니다. 이제 눈송이의 y축 이동을 다뤄 봅시다.

x축과는 달리 y축 이동은 간단합니다.

snow._y+=speed;

speed=##;

이외 가속도를 감안한다면,

snow._y+=(목적지 y값-snow._y)/speed;

이런 액션식을 생각할 수 있게 됩니다.

눈송이를 떨치는 경우 가속도를 감안해 버리면, 눈송이가 잘 없어지지가 않습니다. ^^ 없어지려는 찰라에 계속 미세하게만 움직이게 되어서요. 따라서 이 경우, 그냥 y축 값을 일정하게 빼가는 게 더 좋을 듯 합니다.

최종적으로 위의 액션을 눈송이 무비클립에 적용해 봅시다.

onClipEvent (enterFrame) {

    this._x += Math.sin(getTimer());

    this._y += speed;

    speed = 3;

}

onClipEvent (enterFrame) {

    this._x += Math.sin(getTimer());

    this._y += speed;

    speed = 3;

    if(this._y>=200){

        this._y=0;

    }

}

실제론 위의 swf에는 이 액션이 걸려 있습니다. if문을 써서 다시 눈송이가 내리게 하는. 무비의 높이값에 일치시키면 좋습니다. 이 swf의 경우 높이가 200입니다. ^^

눈송이가 조금 꿈틀 거리는 정도의 미동만 있습니다. 이게 좋다면 그냥 쓰겠지만, 좀 더 차이를 보이고 싶다면,

this._x+=Math.sin(getTimer())*random(5);

지금은 눈송이 하나에만 집중하고 있습니다. 왜냐면, 눈송이 하나 만들어서 이걸 복사해서 뿌려거나 duplicate 액션으로 무비클립을 우르르 복사를 하면 많은 눈송이를 뿌릴 수 있게 되니깐요.

여기서 머리가 복잡해지면, 그냥 여기에 cos 함수를 쓴 걸 하나 더 넣어서 그냥 작업화면에 복사해서 뿌려줍니다.

액션을 쓴 김에 완전 액션으로 하는 걸 도전해 봅시다.

즉, 눈송이의 시작위치를 액션으로 제어 해 봅시다.

이걸 위해선 onClipevent(load)를 사용하게 됩니다.

onClipEvent (load) {

    this._x = random(400);

    this._y = random(30)-50;

}

onClipEvent (enterFrame) {

    this._x += Math.sin(getTimer())*random(5);

    this._y += speed;

    speed = 3;

    if (this._y>=200) {

        this._x = random(400);

        this._y = random(30)-50;

    }

}

_x값은 무비의 너비값에 일치시키면 됩니다. 그리고 _y값은 눈송이의 시작 높이를 정의하게 됩니다.

무비에 따라 테스트 해서 적절히 수치를 조절해 주세요.

이렇게 하고 다시 선택의 기로에 놓이게 됩니다. 액션을 더 쓰느냐 그냥 복사해서 뿌리느냐?

Duplicate에 도전하기.

액션으로 원하는 수만큼의 무비클립을 복사해 봅시다. duplicateMovieClip 액션은 기초강좌로 있습니다. 상세한 설명은 다른 강좌를 참조해 주세요.

레이어를 추가한 후, 새로 추가한 레이어의 1번 키프레임에

_root.[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxonLoad = function() {

    amount = 30;

    while (amount>0) {

        duplicateMovieClip(_root.snow, "snow"+i, i);

        setProperty("snow"+i, _x, random(400));

        setProperty("snow"+i, _y, random(30)-50);

        i++;

        amount--;

    }

};

눈송이 크기를 50% 줄인 결과입니다.

amount 수치가 곧 눈송이 갯수가 됩니다.

여기에 cos 및 다른 시간함수를 적용한 무비클립까지 합치게 되면 눈송이 떨어지는 것이 정말 풍부해 집니다.

좀 더 액션을 써 볼까요?

이 눈송이 경로를 정의한 식들을 무작위로 선택하게 해 봅시다. 위의 액션식의 경우, cos 및 다른 시간함수를 적용한 무비클립을 따로 만들어서 따로 duplicate 액션을 써야 합니다. 따라서 액션식이 많아지고 복잡해 집니다. 내용은 더 복잡해 집니다만, 좀 더 간단하게 표현하기 위해서, alpha값으로 switch문을 만들어 한데 모아 봅시다. Switch문은 엉떠리 로또복권번호 추출기에서 있습니다.

onClipEvent (load) {

    this._x = random(400);

    this._y = random(30)-50;

    alpha = random(1);

}

// alpha값을 0과 1을 무작위로 호출합니다.

onClipEvent (enterFrame) {

    switch (alpha) {

    case 0 :

        this._x += Math.sin(getTimer())*random(5);

        this._y += speed;

        speed = 3;

        if (this._y>=200) {

            this._x = random(400);

            this._y = random(30)-50;

            alpha = random(1);

// 눈송이의 y축 값이 200이 넘었을 때, 다시 alpha값을 호출시켜 다른 경로로 갈 수 있는 경우의 수를 만들어 줍니다.

        }

        break;

    case 1 :

        this._x += Math.cos(getTimer())*random(5);

        this._y += speed;

        speed = 3;

        if (this._y>=200) {

            this._x = random(400);

            this._y = random(30)-50;

            alpha = random(1);

        }

        break;

    }

}

alpha값에 따라 어떤 액션식을 채택할지를 결정하게 한 결과입니다. 눈송이가 y값 200을 넘어가면, 또 alpha값을 뽑기 때문에 눈송이가 같은 경로를 채택할 경우의 수를 줄였습니다. 여기까지 액션을 소화했다면, 최소한 액션 초급자 단계는 넘어섰습니다. ^^

 아주 머리 아퍼 보기

일단, 라이브러리창을 열어서 무비클립을 선택한 후에 마우스 오른쪽 버튼을 클릭하여 링크속성을 선택한 후에

Action Script에 내보내기 항목을 선택한 후에 식별자로 snow를 써 줍니다.

그리고 키프레임에  다음 액션을 넣어 주세요. 참고적으로 배경을 검은 색 계통으로 해야 눈이 잘 보이겠지요?

var mw:Number = Stage.width;
var mh:Number = Stage.height;
var sw:Number = 5;
var sn:Number = 70;
var ds:Number = 0.04; 
var mc:MovieClip;

for (i=0; i<sn; i++) {
 mc = this.attachMovie("snow", "snow"+i, i);
 mc._x = mw-Math.random()*mw; 
 mc._y = mh-Math.random()*mh;
 mc._alpha = mc._xscale = mc._yscale = 50+Math.random()*50;
 mc.k = mc._alpha*ds;
 mc.d = Math.random()*3-1.5;
 mc.onEnterFrame = function() {
  this._y += this.k;
  this._x += this.d;
  if (this._y>mh+sw || this._x<-sw || this._x>mw+sw)  {
   this._x = Math.random()*mw*2-mw/2;
   this._y = -20;
  }   
 }; 
}