벗꽃이 피기를 기다리며...

오늘이 가장 추운 날이랍니다. 온 시내가 꽁꽁 얼어붙고, 지나다니는 아가씨들 걸음이 종종...

다들 꽁꽁 얼어있을 때 저는 따뜻한 봄날을 그리면서 krpano tool을 이용해 파노라마 투어를 하나 만들어 봤습니다. 

요즘같으면 벚꽃이 흐드러지는 저런 날을 전혀 상상치도 못하겠지만, 이제 겨우 100일만 기다리면 됩니다. 하늘은 우리를 속이지 않죠. ㅎㅎ

사실 아래 파노라마는 제 작품이 아닙니다. 저는 벚꽃을 찍은 파노라마가 없어서 하나 빌렸고요, 벗꽃이 흩날리는 플러그인도 krpano 포럼에 올라온 걸 참고로 해서 만들었습니다.

아무튼 먼저 감상하시고... 자세한 설명은 아래에 있습니다. 감상하실 때는 아래 도구막대 가운데 부분에 화살표 4개가 모여있는 걸 클릭하시면 전체화면으로 볼 수 있습니다.

이 플러그인 구현에서 가장 중요한 부분은 layer 정의와, 이걸 움직이게 하는 <action> 부분입니다. 먼저 layer 정의는 아래와 같습니다.

<layer name="flower1" url="snow.swf" alturl="snow.js" imageurl="pink1.png"  mode="image" 

imagescale="1" flag1="0" flakes="30" speed="0.07" speedvariance="100.0" 

spreading="15" shake="300" wind="2" winddir="0" />

여기에서 url="snow.swf" alturl="snow.js" 는 krpano에서 제공하는 플러그인입니다. 이름에서 알 수 있는 것처럼 원래 눈 내리는 모습에 사용하는 플러그인이죠. 몇몇 변수의 의미는 아래와 같습니다.

flakes="30" --- 꽃잎의 수

speed="0.07"  --- 꽃잎이 내려오는 속도

speedvariance="100.0" ---- 속도를 다르게 하는 정도. 모든 꽃잎이 똑같은 속도로 내려오면 안되니까.

spreading="15" shake="300" --- 흩어지는 정도

wind="2" winddir="0"  --- 바람의 속도와 바람의 방향

여기에서 imageurl을 적당한 그림으로 바꿔주기만 하면 눈내리는 효과도 만들어 볼 수 있고, 애인 얼굴이 가득 날려내려오도록 만들 수 있습니다. 원래 여기까지가 snow plugin이 해주는 일입니다.

그런데... 이 꽃잎 플러그인은 그냥 그림이 내려오는 게 아니라, 꽃잎 그림이 팔랑팔랑 거리면서 바뀌고 있습니다. 이걸 구현한게 가장 핵심이겠죠. 그게 아래 <action> 부분입니다.

<action name="fchange1">

switch(layer[flower1].flag1,0,1);

if(layer[flower1].flag1 != 1 ,set(plugin[flower1].imageurl,pink1.png);,

set(plugin[flower1].imageurl,pink1b.png);;

);

tween(layer[flower1].alpha,0.3,0.01,default,

tween(layer[flower1].alpha,0.8,0.01); delayedcall(0.1,fchange1());

);

</action>

윗부분(switch/if)은 꽃잎의 모양을 바꿔주는 겁니다. 이 action은 아랫부분에 의해 무한 반복되는데, 한번 들어올 때마다 다른 형태로 바꿔주게 됩니다.

아랫부분에 있는 tween 은 krpano에서 애니메이션 효과를 위해서 가장 많이 사용되는 action입니다.

set(A, 0) 라면 A를 0로 즉시 바꿔주는데, 

tween(A, 0) 이라고 두면 A에서 주어진 시간(default 는 0.5초)동안 단계적으로 바꿔주게 됩니다. 조금씩 바뀔 때마다 화면에 표현되면 애니메이션 효과가 발생하는 거죠.

여기에서는 꽃잎(layer[flower1]) 의 투명도(alpha)를 현재상태에서 0.3으로 바꾸고, 이게 끝나면 다시 0.8로 단계적으로 바꾼 후, 다시 처음으로 되돌아가서 같은 함수를 호출하도록 되어 있습니다.

결과적으로 pink1.png 라는 그림을 읽어들여와서 투명도를 0.8 -> 0.3 -> 0.8 로 단계적으로 바꾸고, 다음으로 pink1b.png 라는 그림을 읽어들여와서 투명도를 바꾸는... 이런 과정을 계속해서 반복하게 됩니다. 

그런데 이렇게 하더라도 꽃잎이 무작위하게 떨어진다기 보다는 너무 규칙적으로 떨어져 보이기 때문에 layer를 3개 만들고 약간씩 속도나 형태 등을 달리해 두었습니다. 물론 꽃잎모양도 다양하게 만들고, 파라미터 들을 좀더 세세하게 조정하면 더 이쁘게 만들 수도 있지 않을까... 싶습니다만, 저는 여기까지.

파노라마 원본 및 xml 파일 등은 모두 cubicpan cafe에 있으니 직접 확인하세요.

민, 푸른하늘