프레임을 이용한 애니메이션 만들기 / 레이어와 타임 라인을 이용한 애니메이션 만들기
1) 프레임이란
: 타임라인에 위치해 있으며 애니메이션이 진행되는 각각의 장면을 담고 있는 공간을 말한다.
2) 키 프레임이란
: 오브젝트가 등록이 된 프레임을 키 프레임이라고 하고 아무 것도 등록되지 않으면 속이 빈 원으로 표시되고 등록되면 검정색으로 채워진다.
3) 프레임을 이용한 애니메이션 만들기 (글자 타이핑)
'FLASH 4 배우기'라는 글자가 타이핑되는 것을 만들어보자.
① 배경색과 화면 크기 설정하기
: 메뉴에서 Modify -> Movie에서 원하는 배경색과 화면 크기를 설정한다.(예를
들어 Background:검정색, Width:550px, Height:400px)
② 텍스트 입력 : 드로잉
도구의 텍스트 툴을 선택하고 원하는 Font 종류, 크기, 색깔등을 선택한다.(예를
들어 Font 종류:궁서체, 크기:48, 색깔:하늘색, 진하게 등등) 스테이지에 원하는
위치에 마우스를 클릭하여 글자를 입력해 보자. 영문으로 'F'만 입력한다.
③ 키 프레임 설정
: 타임라인의 2번 프레임을 선택한 후 마우스 오른쪽을 눌러 Insert Blank Keyframe을
선택한다.
④ 텍스트 입력 : ②번
처럼 다시 텍스트를 이용하여 'L'을 입력한다. 똑같은 방법으로 Insert Blank Keyframe을
선택하고 'ASH4 배우기'를 한자씩 입력한다.
⑤ 저장하기 : 메뉴에서
File -> Save를 선택하여 원하는 디렉토리와 파일이름을 설정한다.
⑥ 무비 테스트하기 :
메뉴에서 Control -> Text Movie를 선택하여 지금까지 한 것을 미리 보자. 간격이
1프레임으로 되었기 때문에 매우 빨리 움직일 것이다.
⑦ 글자가 나타나는 시간 늘려주기
: 타임라인의 각 프레임에 해당하는 데에서 마우스 오른쪽을 눌러 Insert Frame을
선택하자. 원하는 프레임만큼 설정하고, 다른 프레임들도 설정해 주자. 또다른 방법으로는
키 프레임 자체를 이동하는 것이다. 제일 끝에 있는 9번 프레임은 33번 프레임으로
마우스로 드래그 하여 이동시켜 준다. 다른 프레임들도 차례대로 원하는 만큼 다른
프레임으로 마우스로 드래그하여 이동시켜보자. 위의 두 가지 방법 중 선택해도 되고
복합적으로 사용해도 된다.
⑧ 무비 테스트하기(2)
: 다시 저장하기를 하고 ⑥번과 같이 무비 테스트를 하여 프레임의 변화가 있는지
살펴보자. 그러면 방금 전보다 시간이 조금 더 길어졌을 것이다. 더 길게 하고 싶으면
⑦번과 같이 해보자.
⑨ Publish : 메뉴에서
File -> Publish Settings...을 클릭하여 HTML 항목에서 Dimensions를 Percent로
하고 Width, Height를 100으로 선택하고 확인 버튼을 누른다. 이제부터 진짜 Publish를
해보자. File -> Publish를 선택한다. 그러면 fla파일 외에 swf, html파일이 만들어졌을
것이다.
실행결과 보기 / 소스 다운 받기(flash_ex4.fla / 16kb)
■ 레이어와 타임 라인을 이용한 애니메이션 만들기 [맨위로]
1) 레이어의 정의
: 레이어(Layer)는 각 층을 의미하는데 여기에서는 하나의 화면을 만들기 위해 여러개의 개체들이 동시에 움직일 수 있고 존재할 수 있도록 각각에 대하여 개체를 지정하는 것이다. (포토샵 등에서 편집할 때도 이 레이어라는 것을 자주 이용한다.) 예를 들어 한가지는 고정되어 있고 다른 것들이 움직이는 것등, 만화 영화를 보면 많이 나올 것이다. 배경은 그대로 인데 사람이 움직이는 것 등. 이것은 배경과 사람이라는 것은 다른 층에 각각 배치하여 각각에 대하여 편집도 할 수 있다. 만약 같은 층에 배경 그림과 사람을 같이 놓는다면 동시에 움직이거나 멈출 것이다. 그럼 이제부터 실제로 레이어를 어떻게 사용하는지 연습해 보자.
2) 레이어와 타임 라인을 이용한 애니메이션 만들기 1 (좌, 우에서 동시에 움직이는 글자)
왼쪽에서 글자가 천천히 오른쪽으로 움직이고, 반대로 오른쪽에서 천천히 왼쪽으로 움직이는 글자를 만들어 보자.
① 배경색과 화면 크기 설정하기 : 메뉴에서 Modify -> Movie에서 원하는 배경색과 화면 크기를 설정한다.(예를 들어 Background:군청색, Width:550px, Height:400px)
② 텍스트 입력 : 드로잉 도구의 텍스트 툴을 선택하고 원하는 Font 종류, 크기, 색깔등을 선택한다.(예를 들어 Font 종류:궁서체, 크기:36, 색깔:노란색, 진하게 등등) 스테이지에 원하는 위치에 마우스를 클릭하여 글자를 입력해 보자. 왼쪽 위의 가장자리에 '광주전자공업고등학교'라고 입력해보자.) 다른 것을 원하면 글자나 색깔 등을 다르게 해 보자.
③ 키 프레임 설정 : 타임라인의 20번 프레임을 선택한 후 마우스 오른쪽을 눌러 Insert Blank Keyframe을 선택하고 ②번과 같이 텍스트를 입력한다. 단 오른쪽 가장자리로 이동을 시키자. 그러면 아래 그림과 같이 될 것이다.
- 1번 프레임에서의 모습
|
|
- 20번 프레임에서의 모습
|
|
④ 트위닝 시키기 : 1번과 20번 프레임 사이에 아무 곳이나 마우스를 놓고 오른쪽을 눌러 Create Motion Tween을 선택하면 1번에서 20번으로 화살표 표시가 생긴다. 이 때 각각의 프레임을 왼쪽 마우스로 누르면 차츰 변화하는 것을 볼 수 있다. 전체를 보고 싶으면 메뉴의 Control -> Test Movie, Test Scene을 클릭하면 글자가 왼쪽에서 오른쪽으로 움직일 것이다.
⑤ 레이어 만들기 : 이제는 오른쪽에서 왼쪽으로 움직이는 글자를 만들어 보자. 먼저 레이어를 추가해 보자. 레이어의 왼쪽 하단에 '+' 부분을 누르면 레이어가 추가된다. 첫번째 레이어는 Layer1, 두번째 레이어는 Layer2라고 된다. 단순히 Layer1, Layer2라고 하면 레이어가 많을 경우에는 혼동되기 때문에 알기 쉽게 고유의 이름으로 바꿔준다. Layer1, Layer2라고 써진 부분을 마우스로 더블 클릭하면 수정할 수 있게된다. 이 때 바꿀 이름을 써주면 된다. 한글, 영문 상관 없음.
⑥ 레이어2에 텍스트 입력 : 드로잉 도구의 텍스트 툴을 선택하고 원하는 Font 종류, 크기, 색깔등을 선택한다.(예를 들어 Font 종류:궁서체, 크기:36, 색깔:분홍색, 진하게 등등) 스테이지에 원하는 위치에 마우스를 클릭하여 글자를 입력해 보자. 오른쪽 아래의 가장자리에 '자기 이름'을 입력해보자.) 다른 것을 원하면 글자나 색깔 등을 다르게 해 보자. 이때 주의 할 점은 반드시 Layer 2를 선택하고 1번 프레임에 입력을 한다.
⑦ 키 프레임 설정(2) : 타임라인의 20번 프레임을 선택한 후 마우스 오른쪽을 눌러 Insert Blank Keyframe을 선택하고 ⑥번과 같이 텍스트를 입력한다. 단 왼쪽 가장자리로 이동을 시키자. 그러면 아래 그림과 같이 될 것이다.
- 1번 프레임에서의 모습
|
|
- 20번 프레임에서의 모습
|
|
⑧ 트위닝 시키기(2) : 1번과 20번 프레임 사이에 아무 곳이나 마우스를 놓고 오른쪽을 눌러 Create Motion Tween을 선택하면 1번에서 20번으로 화살표 표시가 생긴다. 이 때 각각의 프레임을 왼쪽 마우스로 누르면 차츰 변화하는 것을 볼 수 있다. 전체를 보고 싶으면 메뉴의 Control -> Test Movie, Test Scene을 클릭하면 글자가 왼쪽에서 오른쪽으로 움직일 것이다.
⑨ 저장하기 : 메뉴에서 File -> Save를 선택하여 원하는 디렉토리와 파일이름을 설정한다.
⑩ Publish : 메뉴에서 File -> Publish Settings...을 클릭하여 HTML 항목에서 Dimensions를 Percent로 하고 Width, Height를 100으로 선택하고 확인 버튼을 누른다. 이제부터 진짜 Publish를 해보자. File -> Publish를 선택한다. 그러면 fla파일 외에 swf, html파일이 만들어졌을 것이다.
실행결과 보기 / 소스 다운 받기(flash_ex5.fla / 43kb)
3) 레이어와 타임 라인을 이용한 애니메이션 만들기 2 (좌우로 움직이는 글자)
편집 과정은 생략하고 실행결과와 소스를 제공하겠습니다. 혼자서 한번 해 보세요.
실행결과 보기 / 소스 다운 받기(flash_ex6.fla / 17kb)
4) 레이어와 타임 라인을 이용한 애니메이션 만들기 3 (연속된 타이핑 글자)
편집 과정은 생략하고 실행결과와 소스를 제공하겠습니다. 제 홈페이지의 배너이기도 합니다. Publish Setting할 때 html, gif를 같이 해 줍니다. GIF의 설정은 Playback -> Animated 로 해 주면 움직이는 그림으로 보입니다. 다운 받아서 여러분한테 알맞는 것으로 바꿔보세요.
실행결과 보기 / 소스 다운 받기(banner.fla / 37kb)
