베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
    - 기초 모션 만들기
    - 무비 만들기
    - 텍스트 모션 만들기
    - 엘리먼트 만들기
    - 배너 만들기
    - 비주얼 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
엘리먼트 만들기
Home > 디자인 센터 > 웹강좌 > 플래시 모션 만들기 > 엘리먼트 만들기
엘리먼트 만들기 1 엘리먼트 만들기 2 엘리먼트 만들기 3


(7) 버튼 추가하기
① 'Scene1'으로 나와서 방금 제작한 버튼을 옆에 하나 더 복사합니다. 복사된 버튼을 선택하고 마우스 오른쪽 버튼을 클릭하여 'duplicate MovieClip'을 선택합니다.(다른 무비클립으로 바꿔주는 단계입니다.)
② duplicate Symbol 창에 새로운 무비클립이름을 'mc_btn2'로 입력하면 'mc_btn2'라는 이름의 무비클립으로 변경됩니다.


③ 'mc_btn'를 카피하여 'mc_btn2'로 만들었습니다. 'mc_btn2' 안의 심벌을 모두 바꿔야 합니다. 'mc_btn2'를 더블클릭하여 편집창으로 이동합니다. 버튼 레이어의 첫 키프레임 선택 후 무비클립을 선택하고 'duplicate MovieClip'으로 설정하여 심벌로 변경합니다. 버튼 레이어의 모든 키프레임의 무비클립은 'swap Symbol'을 클릭하여 1번 키프레임에서 복제한 심벌로 교체합니다.


④ 이렇게 되면 2번 버튼까지 만들어졌습니다. 3번 버튼도 같은 방법으로 만듭니다.


⑤ 버튼 3개를 모두 만들었으면 Scene1으로 장면을 이동합니다. 버튼을 각각 선택하고 하단의 속성창의 인스턴스 네임을 입력하여 줍니다. 각각 'btn0', 'btn1', 'btn2'로 입력합니다. 액션에서 버튼을 제어하기 위해 이름을 구분하는 것입니다.


(8) 액션스크립트 소스 작성하기
① Scene1의 'Insert Layer'를 클릭하여 as 레이어를 생성시킵니다.


② as 레이어에 액션스크립트를 입력하겠습니다. as 레이어의 1번 프레임 선택 후 단축키 'F9'를 눌러 액션창을 띄웁니다.


▸2번 라인 : 링크될 주소의 배열을 생성합니다.
▸3~5번 라인 : 각 배열에 링크될 해당 주소를 입력합니다.
▸8번 라인 : 이미지의 가로 사이즈를 입력합니다(가로 슬라이드 간격입니다.)
▸9번 라인 : 자동으로 돌아갈 시간을 조정하는 숫자입니다.
▸10~11번 라인 : 이미지의 초기값 X좌표, Y좌표를 설정합니다.
▸12번 라인 : 이미지의 총 개수, 버튼의 총 개수가 위의 링크배열의 개수에 의해 조정됩니다.
▸13번 라인 : 'openNum'이라는 변수를 주어 활성화된 이미지의 넘버를 구합니다.
▸14~17번 라인 : 'imgmc'( 이미지를 담고 있는 무비클립 )의 X좌표값이 항상 targetX로 부드럽게 이동하는 공식입니다.
▸19번 라인 : 'imgmc'의 X좌표값을 startX 값과 연결시켜 줍니다.
▸20번 라인 : 'imgmc'의 Y좌표값을 startY 값과 연결시켜 줍니다.


▸22번 라인 : 'mNum'(이미지개수)만큼 아래의 내용을 반복 실행합니다.
▸23번 라인 : 버튼의 각 넘버를 i와 동일하게 만들어 줍니다. (0, 1, 2가 지정됨)
▸24번 라인 : 버튼에 마우스가 오버되면 아래의 내용을 실행합니다.
▸25~27번 라인 : 'openNum'(활성화번호)은 버튼의 넘버가 됩니다. Img의 targetX는 시작위치 + (-이미지가로사이즈 * 활성화번호)가 됩니다. 자동롤링이 멈춥니다.
▸29번 라인 : 버튼에 마우스가 아웃되면 다시 자동롤링을 돌립니다.
▸33번 라인 : 각 버튼은 항상 아래 내용을 체크하여 실행합니다.
▸34~37번 라인 : 버튼의 넘버와 활성화번호가 같아지면 버튼은 다음 프레임으로 재생됩니다. 버튼의 넘버와 활성화번호가 다르면 버튼은 1번 프레임으로 되돌아옵니다.


▸41번 라인 : 'imgmc'(이미지무비클립)을 클릭했을 때 아래의 내용을 실행합니다.
▸42번 라인 : 링크배열의 해당 활성화번호로 링크가 됩니다.
▸44~49번 라인 : 'imgmc'에 마우스 오버했을 때 자동롤링이 멈추고 마우스를 아웃했을 때 자동롤링이 다시 돌아갑니다.
▸50번 라인 : 자동롤링 함수가 시작됩니다.
▸52번 라인 : 활성화번호가 +1씩 커집니다.
▸53~56번 라인 : 만약 활성화번호가 이미지의 총 개수와 같아지면 활성화번호는 0이 됩니다.
▸57번 라인 : imgmc의 targetX는 시작위치 + (-이미지가로사이즈 * 활성화번호)가 됩니다.
▸60번 라인 : 자동롤링 함수를 speed 간격에 한 번씩 호출하여 자동롤링을 실행합니다.

상단 메뉴의 'Control - Test Movie'를 클릭하여 swf를 실행시켜서 확인합니다.
사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 02-2026-2000 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 153-803) 서울특별시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
아사달 이용 가능 브라우저