디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
  - 플래시 소개
  - 단축키
  - 도구상자
  - 패널
  - 플래시 활용 예제
  - 메뉴설명
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
플래시 활용 예제
Home > 디자인 센터 > 웹강좌 > FLASH 사용법 > 플래시 활용 예제
나비 효과 만들기 액자 만들기
1. 나비 효과 만들기
플래시 모션을 이용하여 날개를 펄럭이는 나비 효과를 만들어 보겠습니다.
(1) 플래시 CS3를 실행합니다. 사용자의 컴퓨터에 따라 환경설정이 다를 수 있으니 플래시 CS3 환경을 맞춰 보겠습니다. New Document에서 새 문서를 만듭니다.
(2) 속성창의 'Size 항목에서 '문서 속성' 버튼을 클릭합니다.
(3) 'Document Properties' 대화상자가 나타납니다. 각각의 항목을 다음과 같이 설정한 후 'OK' 버튼을 클릭합니다.
(4) 나비 이미지를 그립니다. 이미지는 다른 이미지로 대체하거나 간단하게 그려도 무방합니다.
(5) 나비이미지 그리기가 완성된 후 각각의 날개를 선택하고 F8을 클릭하면 Convert to Symbol 창이 뜹니다.
심벌네임을 '날개위'라고 적은 후 Type에서 Graphic을 선택하고 Registration은 좌측 상단을 선택합니다. 선택을 모두 하였으면 'OK' 버튼을 클릭합니다. 날개 아래도 심벌네임을
'날개아래'라고 적은 후 같은 방법으로 Graphic Symbol로 만듭니다.
(6) 이번에는 나비날개 위 부분만 무비클립 심벌로 한 번 더 만들도록 하겠습니다.
'날개위'라는 그래픽 심벌을 선택하여 단축키 [F8]을 누르면 Convert to Symbol 창이 뜹니다. 심벌네임을 '날개위모션'이라고 입력하고 Type에서 'MovieClip'을 선택, Registration
은 '좌측 상단'을 선택하고 'OK' 버튼을 클릭합니다.
(7) 위와 같이 하였으면 '날개위모션'이라는 무비클립 안에 '날개위'라는 그래픽 심벌이 생성되었을 것입니다.
이젠 날개모션을 만들어 보겠습니다. '날개위모션'이라고 만든 무비클립 심벌을 더블클릭합니다. '날개위모션' 무비클립 심벌 안으로 들어가면 Layer1이라는 레이어가 있습니다.
15프레임을 클릭한 후 단축키 [F6]을 눌러 키프레임을 만듭니다.
(8) 15프레임에 있는 '날개위' 그래픽 심벌을 선택하면 'Properties' 창에 'Color' 탭이 생성됩니다. 'Brightness'를 선택하고 값을 '-50'으로 설정합니다.
(9) 한 번 더 15프레임에서 '날개위'라는 그래픽 심벌을 선택한 후 Tool에서 'Free Transform Tool'을 선택하면 아래와 같이 점 9개가 나옵니다. 'Alt' 키를 누른 상태에서 좌측상단
점을 오른쪽으로 이동시킵니다.
(10) 아래 이미지만큼 너비를 줄입니다.
(11) Layer1에서 16프레임을 선택한 후 단축키 [F6]을 눌러 15프레임에 있던 프레임을 복사합니다. 17프레임 역시 단축키 [F6]을 눌러 앞에 있는 프레임을 복사합니다.
(12) 이번에는 Layer1에서 30번째 프레임을 선택한 후 단축키 [F7]을 눌러 빈 프레임을 만듭니다.
(13) 1프레임을 선택한 후 마우스 오른쪽 버튼을 눌러 'Copy Frames'을 선택합니다.
(14) 다시 Layer1에서 30프레임을 선택한 후 마우스 오른쪽 버튼을 클릭하여 'Paste Frame'을 선택합니다. 1프레임에 있던 그래픽 심벌이 30프레임으로 복사되었습니다.
(15) 각각의 프레임에 모션트위닝을 적용시키도록 하겠습니다.
- 각각의 키프레임 사이에 마우스 오른쪽 버튼을 클릭한 후 'Create Motion Tween'을 선택합니다.
(16) 오니온 스킨 상태로 확인한 모습입니다. 날개가 접히는 모습이 연속으로 보이는 것을 알 수 있습니다.

* 오니온 스킨이란?
모션과 모션 사이의 연속 동작을 보여주는 것입니다. 레이어의 아래 부분에 오니온 스킨을 설정할 수 있는 아이콘이 있습니다. 오니온 스킨을 설정하면 모션의 중간 단계를 화면에서
확인할 수 있습니다.
(17) 날개 아래 부분도 모션을 넣어 보겠습니다. '날개위'와 같이 움직여야하므로 '날개위'를 복제하여 변경하는 방법으로 설정하겠습니다.
우선 '날개위' 모션에서 scene1을 클릭합니다.
(18) scene1에서 '날개아래' 그래픽 심벌은 삭제합니다. '날개위모션' 무비클릭을 선택하고 제자리에 붙여넣기 합니다. 위치는 '날개위모션' 아래에 오도록 합니다.
(19) 복사한 '날개위모션'을 선택한 후 마우스 오른쪽 버튼을 클릭하여 'Duplicate MoviClip'을 선택, 복제합니다.
(20) 복제 무비 심벌 이름은 '날개아래모션'으로 정하겠습니다.
(21) 복제한 무비 '날개아래모션'을 더블클릭하여 무비클립 안으로 들어갑니다. '날개위' 그래픽 심벌을 선택한 후 Properties에서 'Swap' 버튼을 클릭합니다.
(22) 'Swap' 버튼을 클릭하면 'Swap Symbol'이라는 창이 뜹니다. 현재 '날개위'에 선택되어 있는 것을 '날개아래' 그래픽 심벌로 선택한 후 'OK' 버튼을 클릭합니다.
(23) '날개위' 그래픽 심벌이 '날개아래' 그래픽 심벌로 바뀌었습니다. 15, 16, 17, 30 프레임에 있는 '날개위' 그래픽 심벌도 같은 방법으로 '날개아래' 그래픽 심벌로 바꿉니다.
(24) 오니온 스킨 상태에서 본 모습입니다. 아래쪽 날개가 접히는 모습을 볼 수 있습니다.
(25) 이제 Scene1을 클릭하여 장면을 이동합니다.
(26) '날개위모션' 무비클립을 복사하여 제자리에 붙인 후에 오른쪽으로 이동시킵니다.
(27) 복사한 '날개위모션' 무비클립을 선택한 후 메뉴에서 Modify → Transform → Flip Horizontal을 클릭하여 반전시킵니다.
(28) 아래와 같이 '날개위모션' 무비클립 심벌이 반전되었습니다. 적당한 위치로 이동시킵니다.
(29) '날개아래모션'도 위와 같은 방법으로 복사 → 제자리에 붙여넣기 → 오른쪽으로 이동시키기 → 복사한 '날개아래모션'을 선택하여 (Modify→Transform→Flip Horizontal)
반전시키기 → 적당한 위치로 이동시키기를 합니다.
(30) '날개위' 두 개를 선택하여 마우스 오른쪽 클릭 → Arrange → Bring to Front를 선택하여 배열의 위치를 맨 위로 보냅니다. '날개위'와 '날개아래'의 위치 값을 정확히 맞춥니다.
(31) 이젠 Scene1에 있는 모든 오브젝트를 선택한 뒤 단축키 [F8]을 눌러 '나비모션'이라는 무비클립을 만듭니다.
(32) '나비모션' 무비클립 심벌을 선택한 후 좌측에 있는 Transform에서 'Constrain'은 38%, Rotate는 30.8도로 지정합니다. Transform 탭이 없을 경우
메뉴 → Window → Transform을 체크하면 됩니다.
(33) 배경을 넣어 보도록 하겠습니다. 새 레이어를 만듭니다.
(34) Layer2가 생성되면 맨 아래로 레이어를 이동시킵니다. 레이어의 이동은 해당 레이어를 클릭한 상태에서 원하는 위치로 이동하면 됩니다.
(35) 배경 이미지를 불러옵니다. File → Import → Import to Stage를 선택합니다.
(36) 불러올 이미지를 선택합니다.
(37) 다음과 같이 바탕화면에 배경이 삽입되었습니다.
(38) 텍스트 삽입하기
이제 텍스트를 삽입해 보겠습니다. Tool에서    Text Tool(단축키 [T]) 버튼을 선택합니다.
(39) 폰트는 Georgia, 사이즈는 30, Bold, Anti-aliasfor animation, 색상 #FFFFFF로 설정한 뒤 'Butterfly'라고 입력합니다.
(40) 'Butterfly' 아래 부분을 마우스로 선택한 후, 폰트 Tahoma, 사이즈 10, Bold, 자간 1.5. 색상 #FFFFFF, Anti-alis for animaion으로 설정하고 'ASAFLASH MOTIVE'라고
적습니다.
(43) 이젠 Ctrl+Enter 을 눌러 미리보기를 하겠습니다. 아래 그림과 같이 날개모션이 있는 나비효과를 보실 수 있습니다.
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 회사소개 사진모음 협력사 오시는길 이용약관 개인정보취급방침 전화상담안내 게시판문의 모바일 한국어 라인 이미지 日本語 라인 이미지 中文 라인 이미지 ENGLISH 라인 이미지 사이트맵 하단 메뉴 배경 이미지
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 1544-8442 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 08507) 서울시 금천구 가산디지털1로 168 우림라이온스밸리 A동 8층 (주)아사달
(우편번호 : 153-786) 서울시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
인터넷 익스플로어 구글 크롬 모질라 파이어폭스
애플 사파리 오페라 넷스케이프
맨위로
디지털콘텐츠 No.1 (주)아사달