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

2. 모션 트윈(Motion Tween) 만들기

모션 트윈은 플래시 움직임의 기본으로 플래시 무비 제작 시 90% 이상의 비율을 차지할 정도로 중요한 모션입니다. 셰이프 트윈이 단순히 형태변화에 초점이 맞추어져 있다면 모션 트윈은 움직임 자체에 초점을 맞춘 기법으로 오브젝트는 항상 심벌로 등록하여 사용합니다.
비행기가 날아가는 간단한 모션을 만들어 보겠습니다.

(1) 새 파일에서 상단메뉴 File → Import → Import to Stage를 클릭하여 배경이미지를 삽입합니다. (단축키: Ctrl+R)


(2) 삽입된 배경 이미지의 X, Y 좌표를 (0, 0)으로 맞춰줍니다.


(3) 레이어 이름을 '배경'으로 정하고 레이어를 잠급니다.


(4) Insert Layer 아이콘을 클릭하여 새 레이어를 추가하고 이름을 '비행기'라고 지정합니다.


(5) 상단 메뉴에서 'File → Import → Import to Stage'를 클릭하여 비행기 이미지를 삽입합니다. 비행기 이미지는 배경이 투명한 png 파일입니다. 모션으로 제작할 움직이는 이미지는 png 파일로 저장합니다. 포토샵에서 비행기의 이미지 외의 배경은 모두 삭제한 후에 Save as에서 png를 선택하면 됩니다.


(6) 라이브러리 패널에서 이미지를 제대로 불러왔는지 확인할 수 있습니다. (단축키: F11)


(7) 비행기 이미지를 심벌로 등록합니다.
① 비행기 이미지를 선택하고 상단메뉴의 'Modify → Convert to Symbol'을 클릭합니다. (단축키: F8)


② 심벌 이름은 '비행기', 타입은 'Movie clip'으로 정합니다.


Tip. 심벌이란?
심벌은 플래시에서 실제 움직임의 주체가 되는 것으로 스테이지에서 드로잉을 통해 그린 오브젝트 또는 불러온 이미지에 이름을 붙여주고, 특정한 기능을 수행하도록 성격을 지정해 주는 것입니다. 성격에 따라 세 가지의 심벌 형태가 있습니다.
가) 그래픽 심벌
?보통 특별한 움직임이 없는 상태의 오브젝트를 대상으로 하여 만드는 것입니다.

나) 버튼 심벌
?마우스를 올렸을 때 마우스 커서가 손 모양으로 바뀌면서 다양한 반응을 이끌어낼 수 있는 버튼 역할입니다.

다) 무비클립 심벌
자체 내에 또 하나의 타임라인을 가지고 있어 독립적으로 사용 가능한 심벌입니다.

③ 무비클립 심벌로 저장된 비행기


④ 라이브러리 패널을 열어보면 (단축키: F11) 방금 심벌로 저장한 비행기 무비클립이 들어 있는 것을 확인할 수 있습니다.
스테이지 상에서 오브젝트를 삭제하더라도 라이브러리 패널에 저장되어 있으므로 언제든 다시 가져다 쓸 수 있습니다.


(8) 타임라인의 프레임을 50프레임까지 늘리겠습니다.
① 50프레임에서 마우스 오른쪽 버튼을 클릭하여 'Insert Frame' 항목을 선택합니다. (단축키: F5)


② 프레임이 50프레임까지 늘어났습니다.


(9) 비행기 레이어의 50프레임에 키프레임을 삽입합니다.
① 50프레임의 마우스 클릭 → 마우스 오른쪽 버튼 → Insert Key Frame (단축키: F6)


② 키프레임이 삽입된 모습입니다.


(10) 타임라인 헤더를 1프레임으로 이동합니다.


(11) 비행기 무비클립을 선택하고 도구상자의 자유변형툴(Free Transform Tool)을 이용하거나 Transfrom 패널을 이용해 크기를 줄입니다.

사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 070-7510-3007 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 153-803) 서울특별시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
아사달 이용 가능 브라우저