디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
  - 기초 모션 만들기
  - 무비 만들기
  - 텍스트 모션 만들기
  - 엘리먼트 만들기
  - 배너 만들기
  - 비주얼 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
텍스트 모션 만들기
Home > 디자인 센터 > 웹강좌 > 플래시 모션 만들기 > 텍스트 모션 만들기
텍스트 모션 만들기 1 텍스트 모션 만들기 2 텍스트 모션 만들기 3

Ⅲ. 텍스트 모션 만들기

텍스트가 한 글자씩 나타나는 텍스트 모션을 만들겠습니다. 텍스트를 한 글자씩 심벌로 저장하고 각 글자별로 레이어를 만들어 모션 효과를 적용시키는 것입니다.

1. 하단의 속성창(Properties)에서 Background 색상을 중간 톤의 회색으로 지정합니다.


2. 왼쪽의 도구상자(Tools)에서 'Text Tool'을 선택합니다.


3. 하단의 속성창에서 폰트는 기본 서체인 'Franklin Gothic'으로, 폰트 크기는 '50'으로 설정합니다.


4. 화면에 'business'라고 쓰고 Align 패널을 이용해 글자를 화면의 중앙에 위치시킵니다.


5. 상단메뉴에서 'Modify → Break Apart'를 클릭하여 텍스트를 한 글자씩 분리시킵니다. (단축키: Ctrl+B) 여기에서 텍스트는 한 번만 분리해야 합니다. 단축키를 사용할 경우 Ctrl+B를 한 번 더 누르게 되면 글자가 그래픽으로 되어 버리기 때문에 주의해야 합니다.


6. 상단메뉴 'Modify → Timeline → Distribute to Layers'를 클릭하여 글자별로 레이어를 생성합니다. (단축키: Ctrl+shift+D)

   


7. 레이어 수가 많으므로 한 화면에 보기 쉽도록 프레임의 세로 폭을 줄이겠습니다.
- 타임라인 오른쪽 상단의 작은 버튼을 클릭하고 'sort'를 선택합니다.


8. 프레임의 세로 폭이 좁아지고 아이콘들이 작은 아이콘으로 대체되었습니다.


9. 텍스트를 한 글자씩 선택하여 무비클립 심벌로 등록합니다.
① 'b' 레이어를 선택하거나 스테이지 화면에서 'b'를 선택합니다.


② 상단메뉴의 'Modify → Convert to Symbol'을 클릭합니다. (단축키: F8)


③ 타입은 무비클립을 선택하고 중심점은 왼쪽 상단 또는 가운데로 정합니다. 이름은 아무것이나 지정하여도 상관없습니다.


④ 'b'라는 글자가 무비클립 심벌로 등록되었습니다. 라이브러리를 열어보면 등록된 심벌을 확인할 수 있습니다.


10. 나머지 글자들도 위와 같은 방법으로 모두 무비클립 심벌로 등록합니다.


11. 애니메이션을 적용할 키프레임을 삽입합니다.
① 타임라인에서 모든 텍스트 레이어의 12프레임 부분을 드래그하여 선택합니다.


② 마우스 오른쪽 버튼 클릭 → insert Keyframe을 클릭합니다. (단축키: F6)


③ 모든 텍스트 레이어의 12프레임에 키프레임이 삽입되었습니다.


④ 마찬가지로 각각 20, 35, 50프레임에 키프레임을 삽입하여 줍니다.


11. 타임라인의 플레이헤더를 1프레임으로 이동시킵니다.
① 화면에서 텍스트를 하나씩 걸러 b/s/n/s를 선택합니다. Shift를 누른 상태에서 레이어를 선택하면 중복선택이 가능합니다.


② Shift+↑(방향키)를 4번 눌러 상단으로 40px 이동시켜 줍니다.


③ 나머지 텍스트인 u/i/e/s를 선택하고 Shift+↓(방향키)를 4번 눌러 하단으로 40px 이동시켜 줍니다.


④ 텍스트를 모두 선택하고 하단의 속성창(Properties)에서 알파 값을 '0%'로 설정합니다.

하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 회사소개 사진모음 협력사 오시는길 이용약관 개인정보취급방침 전화상담안내 게시판문의 모바일 한국어 라인 이미지 日本語 라인 이미지 中文 라인 이미지 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 (주)아사달