슬라이딩 스크립트(마름모무늬)

슬라이딩 스크립트(마름모무늬)

1. 작업창 크기; 700*500, 이미지 크기; 700*420, 난이도; ★★★★

 

사실 오늘 작업은 별 4개를 줄 정도로 어려운 것은 아니다. 그러나 스위시를 공부하는데 꼭 만들어 보아야 하는 그런 영상이다. 세이프를 만드는 요령이라든지, 포지션 포인트를 적절하게 사용한다든지, 또 물결효과도 이제까지 슬라이딩 스크립트 영상은 개별적으로 주어 좌표값으로 이동시켰는데 오늘 이 영상은 전체를 카피해 물결효과를 주겠다. 그럴러면 스크립트문도 복잡해진다. 하여튼 이 작업을 통해 스크립트와 더 친숙해 지기를 바란다.

 

먼저 마르모꼴 세이프를 만들자. 이 세이프를 만드는 방법도 여러가지이겠지만 이제까지의 작업을 통해 얻은 나의 노하우를 소개한다.

세이프를 이미지 높이 값에 맞추어 420*420으로 그려 포지션 포인트 중상으로 찍고 _x=350, _y=0으로 하여 작업창 윗선에 맞춘다. 이어 다시 포지션 포인트를 중으로 하고 Reshape창에서 로테이션 45를 주고 4/4로 자르고 트랜스폼으로 온다.

 

 

2. 트랜스폼에서 -45를 주어 원위치시키고 _w값을 1400으로 하여 작업창 폭과 맞춘다. 이어 이를 언그룹해서 벗겨낸다.

 

 

3. 사선으로 자른 이미지라 한 칸 건너 하나가 아니다. 그림을 잘 보면서 선택하고 우선 색상을 바꾸어 보라. 그런 다음 맞으면 그룹핑 에스 세이프를 해서 [예]를 하든 [아니오]를 하든 하나를 선택한다. 여기서는 겹쳐지는 부분이 없어 관계없다. [예]는 겹쳐지는 부분을 오려내고 합치는 것이고 [아니오]는 겹쳐진 상태로 합치는 것이다. 그러면 하나의 세이프로 될 것이다. 이제 나머지도 같은 작업을 해 두 개의 세이프를 만든다.

 

 

4. 이미지 10장을 모두 불러와 모두 선택된 상태에서 포지션 포인트 중상으로 하고 -y=0을 주어 작업창 윗선에 맞추고 다시 포지션 포인트 중으로 한다. 그림을 보면서 이해하자. 6번 이미지가 작업창 중앙에 위치한다. 6번 이미지를 중심으로 5번 이미지 선택하고 -x=-350을 주면 그림처럼 된다. 그럼 4번은 -1050일 것이다. 700을 빼거나 더해서 일렬로 정렬한다.

 

 

5. 정렬이 끝났으면 이미지 10장을 모두 묶어 무비클립으로 하고 img1이라 이름하고 아래 스크립트를 적는다. 이어 이를 복사해 하나 더 만들어 img2라 한다. 이어 img1과 처음에 만들어 놓은 세이프 하나와 다시 무비클립으로 하고 마스크에 체크하고 이름을 aa라 한다.

 

onSelfEvent (load) {

targetX = 0;

speedX = 0.06;

}

onSelfEvent (enterFrame) {

this._x = this._x + speedX * (targetX - this._x);

}

 

 

6. img2와 남은 세이프를 무비클립으로 하고 마스크에 체크한 다음 bb이라 이름하고 스크립트창에서 스피드 0.06을 0.09로 한다. 두 이미지의 속도가 같으면 효과 나타나지 않는다. 그래 스피드의 차이를 주는 것이다. 참고로 숫자가 클수록 속도가 빠르다.

이제 aa와 bb를 묶어 무비클립으로 하고 image1이라 이름 한다.

 

 

7. image1을 카피해 하나 더 만들어 image2라 이름하고 _y 값을 1을 더 주고 물결판 불러와 마스크 처리하고 image3라 한다. 그림을 잘 보면서 이해하면 될 것이다. 이제 영상 작업은 끝났다. 버튼과 스크립트만 적으면 된다.

 

 

8. 버튼 만들기는 전 강좌와 같아 생략하고 싶은데 한 번 설명한다. 700*80으로 사각형 그려 작업창 밑부분과 맞추고 10/0을 잘라 언그룹하고 한 번의 작업을 줄이기 위해 미리 세이프를 필타입=이미지로 하고 모두를 선택한 상태에서 콘버트 투 버튼을 하여 오버스테이지에 체크하고 b1-10으로 적고 이를 다시 무비클립으로 하고 btn이라 이름한다. 업스테이지의 투명도는 25로 한다.

오늘 스크립트도 모션의 스케일을 크게하기 위해 지그재그로 할 것이니 버튼 순서가 잘 이해되지 않는 분들은 미리 이미지로 교체하지 말고 나중에 플레이를 해보면서 해당 이미지로 교체하는 것도 한 방법이다. 물론 시간은 많이 걸리지만.

 

* 버튼에 들어갈 이미지

b1=01, b2=06, b3=02, b4=07, b5=03, b6=08, b7=04, b8=09, b9=05, b10=10, (다섯장 차이로 지그재그다)

 

 

*b1에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = 3500;

_parent.image1.bb.img2.targetX = 3500;

_parent.image3.image2.aa.img1.targetX = 3500;

_parent.image3.image2.bb.img2.targetX = 3500;

}

 

*b2에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = 0;

_parent.image1.bb.img2.targetX = 0;

_parent.image3.image2.aa.img1.targetX = 0;

_parent.image3.image2.bb.img2.targetX = 0;

}

 

*b3에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = 2800;

_parent.image1.bb.img2.targetX = 2800;

_parent.image3.image2.aa.img1.targetX = 2800;

_parent.image3.image2.bb.img2.targetX = 2800;

}

 

*b4에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = -700;

_parent.image1.bb.img2.targetX = -700;

_parent.image3.image2.aa.img1.targetX = -700;

_parent.image3.image2.bb.img2.targetX = -700;

}

 

*b5에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = 2100;

_parent.image1.bb.img2.targetX = 2100;

_parent.image3.image2.aa.img1.targetX = 2100;

_parent.image3.image2.bb.img2.targetX = 2100;

}

 

*b6에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = -1400;

_parent.image1.bb.img2.targetX = -1400;

_parent.image3.image2.aa.img1.targetX = -1400;

_parent.image3.image2.bb.img2.targetX = -1400;

}

 

*b7에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = 1400;

_parent.image1.bb.img2.targetX = 1400;

_parent.image3.image2.aa.img1.targetX = 1400;

_parent.image3.image2.bb.img2.targetX = 1400;

}

 

*b8에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = -2100;

_parent.image1.bb.img2.targetX = -2100;

_parent.image3.image2.aa.img1.targetX = -2100;

_parent.image3.image2.bb.img2.targetX = -2100;

}

 

*b9에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = 700;

_parent.image1.bb.img2.targetX = 700;

_parent.image3.image2.aa.img1.targetX = 700;

_parent.image3.image2.bb.img2.targetX = 700;

}

 

*b10에 들어갈 스크립트

on (release) {

_parent.image1.aa.img1.targetX = -2800;

_parent.image1.bb.img2.targetX = -2800;

_parent.image3.image2.aa.img1.targetX = -2800;

_parent.image3.image2.bb.img2.targetX = -2800;

}