4-20. 돋보기 만들기 - startDrag

제4장 예제를 이용한 애니메이션 만들기

4-20. 돋보기 만들기 - startDrag 활용(2)

startDrag 액션을 활용한 예제는 앞서의 강의(퍼즐 만들기 - startDrag, Hittest)에서 다루어보았습니다만, 여기서는 startDrag 만을 활용하여 돋보기를 만들어보겠습니다. 예제 파일 돋보기_startDrag_ex.fla 원을 마우스로 드래그해보세요. 원 부분이 확대되어 보일 것입니다. [생각해보기] 이 작품의 제작 아이디어는 이렇습니다. 1) 레이어 1에 원본 사진을 넣는다. 2) 레이어 2에는 원본 사진을 넣은 후 [자유 변형 도구]를 이용하여 다소 확대하여 둔다. 3) 레어어 3에 돋보기를 그려넣고, 이 돋보기를 무비클립으로 변환한 후 인스턴스 이름을 부여하고,     startDrag 액선을 넣어준다. 그리고 이 레이어를 마스크 레이어로 처리해준다. [만들어보기] 1) 예제 파일에는 이미 앙코르와트 사원의 사진이 들어 있습니다만, 새로 만들 경우 맨 아래 레이어에는 원하는 사진을 스테이지의 크기에 맞게(혹은 원본 사진의 크기보다 다소 작게, 70~80% 정도로 축소한 스테이지 크기를 설정) 조절해줍니다. * [참고] 사진은 원본을 확대하거나 축소하면 화질이 달라질 수 있습니다. 2) 레이어를 추가하고 2번째 레이어에는 라이브러리에 있는 사진을 끌어다 놓은 후 자유 변형도구로 레이어1보다는 다소 크게(약 120%~140%가 적당) 확대해줍니다. 이때 사진은 스테이지를 다소 벗어날 수도 있습니다. 반대로 사진보다 다소 작은 스테이지 크기일 경우는 레이어1의 사진은 스테이지 크기에 맞게 축소를, 이 레이어에는 원본 사진 그대로를 사용하면 될 것입니다. 3) 레이어를 다시 하나 더 추가하고 레이어 이름을 '돋보기'로 변경해줍니다. 이 레이어에 다음과 같이 돋보기를 그립니다. 4) 그려진 돋보기를 선택한 후 F8키를 눌러 무비클립으로 변환해줍니다.(이름은 돋보기-무비'로 합시다) 5) 무비클립을 더블클릭하여 편집 모드로 들어간 후 다시 돋보기를 선택, F8키를 눌러 '돋보기-버튼'이란 이름으로 심볼로 변환합니다. 이것은 마우스로 끌기(startDrag)를 적용하기 위해서는 버튼 심볼이 필요하기 때문입니다. 결과적으로 '돋보기-무비'라는 무비클립 심볼 안에 '돋보기-버튼'이라는 버튼 심볼이 들어간 셈이 됩니다. 6) '장면 1' 편집 모드로 빠져나옵니다. '돋보기-무비'를 선택한 상태에서 속성 패널에서 [인스턴스 이름]에 이름을 넣어줍니다.('mag'라고 합시다) 7) 이제 액션을 넣어봅시다. '돋보기-무비'를 더블클릭하여 편집 모드로 들어가서는 '돋보기-버튼'을 선택한 상태에서 액션 패널을 열어 다음과 같은 액션을 입력해줍니다. on (press) { // 마우스를 누르면 this.startDrag (); // 이 클립을 드래그하기 시작 } 액션의 기능은 위에 주석을 달아둔 것과 같습니다. 8) 이제 장면 1 로 나와서 '돋보기' 레이어를 마우스 오른쪽으로 눌러 [마스크] 처리해줍니다. 9) 무비 테스트를 해보세요.