Transcript Flash II
Flash II
플래시 오브젝트의 종류
심 볼(symbol)
• 심볼
– 재사용을 목적으로 만든 오브젝트
• 플래시 무비 제작 시 여러 번 사용되는 오브젝트를 심
볼로 만들어 사용하면 파일용량에 거의 영향을 주지
않음
• 심벌 라이브러리 창
– 플래시 무비를 만들 때 사용된 모든 심벌을 관리하는 창
– 윈도우 -> 라이브러리
– 특별한 애니메이션 효과
• 이동, 회전, 색상변화, 투명과 같은 애니메이션 효과
를 손쉽게 만들 수 있음
• 심벌의 종류
– 그래픽(Graphic) 심벌
•
•
•
•
•
가장 일반적인 형태의 심벌
아무런 움직임도 갖고 있지 않은 상태
벡터, 비트맵이미지 모두 그래픽 심벌로 변형 가능
이 심벌을 스테이지로 불러들여야 애니메이션에 통합 됨
하나의 심벌을 여러 번 스테이지로 불러와도 플래시의 용량과는
무관
– 버튼(Button) 심벌
• 버튼형식의 심벌
• 마우스 커서가 위에 올라왔을 경우, 클릭했을 경우에 대한 반응
• 액션스크립트와 연관되어 사용
– 무비클립(Movie Clip) 심벌
• 자체로 움직임을 갖고 있는 심벌
• 스테이지 위에 올려놓기만 해도 스스로 무비를 재생하는 애니메
이션 지원
• 액션스크립트와 연관되어 사용됨
• 심벌 종류의 비교
• 심벌 만들기
– 스테이지에서 작업 후 라이브러리에 등록
• [수정]->[심벌로 변환]
– 심벌 편집 전용 창으로 만들기
• [삽입]->[새 심벌]
• 작업후 Ctrl+E 또는 타임라인의 왼쪽 상단이나 오른쪽 상단에 있는 장면
선택 탭을 클릭
• 실습
– 무대 위에 파란 원 만들기
– 원을 선택후, [수정]->[심벌로 변환]->[그래픽] 선택
• 심벌 인스턴스 편집
– 인스턴스
• 심벌 라이브러리상의 심벌을 스테이지로 가져온 상태
• 속성의 값들을 다르게 설정하여 서로 다른 인스턴스가 될 수 있음
• 속성의 변경은 심벌에 영향을 주지 않음
• 실습
– 두 개의 원 심벌을 스테이지에 가져다 놓음
– 두개의 심벌은 속성의 위치 값이 다름
– 오른쪽 그래픽 심벌을 선택후
• 속성패널의 [색상]항목에서 [밝기]를 선택하여 수치를 변동
• 해당 인스턴스의 밝기가 바뀌지만 라이브러리의 심벌에는 영향을 주지 않음
드로잉 오브젝트의 종류
• 도형(모양)
– 도구 패널을 이용하여 그려지는 오브젝트
– 선과 내부의 점들이 하나하나 분리되어 있는 상태
– 원하는 부분에 대한 이동과 변형 가능
• 그룹
– 오브젝트의 개수에 상관없이 하나로 묶여진 대상
– 이동과 변형 시 적용내용이 그룹단위로 반영
• 텍스트
– 고유한 텍스트 박스의 속성을 갖고 있으며, 필요에 따라 도형 또는 그룹으로 변
경 가능함
• 비트맵
– 플래시로 불러온 비트맵 이미지는 그룹속성을 가지고 있음
– 편집을 위해서는 도형속성으로 변형하여 사용
• 심벌
– 플래시 애니메이션과 액션스크립트를 구현할 때 필요한 오브젝트
– 도형, 그룹, 텍스트, 비트맵 등은 모두 심벌로 변환 가능
오브젝트 간의 변환
• 도형(모양) -> 그룹
– 여러 도형 선택후 , [수정]->[그룹]
– 반대의 경우 [수정]->[그룹해제]
• 그룹, 비트맵, 심벌 -> 모양
– 각각을 선택하고 [수정]->[분리]
• 텍스트 -> 모양
– 텍스트 박스를 선택후, [수정]->[분리]
– 글자 수가 여럿일 때는 두 번 적용
레이어와 프레임(1)
• 레이어
– 레이어의 구성
– 레이어 상태 아이콘
•
•
•
•
레이어
레이어
레이어
외곽선
편집 : 현재 작업 중인 레이어 표시
보기/숨기기 : 레이어 보이기 토글
잠금/해제 : 레이어 이동, 삭제, 변형, 채색을 막기
보기
– 해당 레이어의 오브젝트를 지정된 색깔의 외곽선으로 보여줌
•
•
•
레이어 추가 : 새로운 레이어를 추가
레이어 폴더 추가 : 여러 레이어를 관련된 폴더를 만들어 관리
레이어 삭제 : 레이어를 삭제함
레이어와 프레임(2)
• 프레임의 이해
– 프레임과 키프레임 차이점
• 프레임
– 플래시 무비에서의 개별 정지화면
– 타임라인상의 플레이헤드가 움직일 때 한 프레임씩 장면
을 보여줌
– 프레임의 길이 만큼 오브젝트가 화면에 표시됨
• 키프레임
– 편집가능한 오브젝트를 담고 있는 프레임
– 장면이 바뀌거나 새로운 오브젝트를 삽입할 때 사용
레이어와 프레임(3)
•
프레임 메뉴 (타임라인에서 오른쪽 버튼)
–
프레임 삽입 (F5)
•
–
프레임 제거
•
–
프레임을 복사한 후 다른 빈 프레임에 붙이기 가능
프레임 붙여넣기
•
–
프레임 속에 포함하고 있는 객체들을 모두 지우는 것
프레임 제거 명령처럼 프레임을 삭제하는 것이 아님
키프레임을 빈 키프레임으로 변환
프레임 복사
•
–
직접 그림을 그려 넣을 수도, 사운드 파일을 넣을 수도, 심벌을 넣을 수도 있는 빈 키프레임의 삽입
앞의 키 프레임의 오브젝트를 복사해서 가져오지는 않음
새로운 객체들을 넣을 때 사용
프레임 지우기
•
•
•
–
어떤 내용을 포함할 수 있는 키프레임의 삽입
앞의 키 프레임에 포함된 오브젝트들을 복사해서 가져옴
빈 키프레임 삽입(F7)
•
•
•
–
프레임 자체를 제거 (프레임 지우기와 비교)
키프레임 삽입(F6)
•
•
–
키가 아닌 프레임 삽입, 어떤 객체도 포함되지 않는 프레임
복사한 프레임의 내용을 붙여 넣기
프레임 반전
•
•
선택된 구간의 프레임의 앞과 뒤를 바꿈
예) 떨어지는 공 애니메이션이 준다면 튀어 오르는 애니메이션으로 바뀜
레이어와 프레임(3)
• 타임라인에서 애니메이션 구분 표시
– 모션 트윈
• 시작 키프레임이 검정색 점으로 표시되고 중간 트위닝된 프
레임에는 연한 파란색 배경
– 모양 트윈
• 시작 키프레임이 검정색 점으로 표시되고 중간 트위닝된 프
레임에는 연한 초록색 배경에 검정색 화살표
– 클래식 트윈
• 시작 키프레임이 검정색 점으로 표시되고 중간 트위닝된 프
레임에는 연한 보라색 배경에 검정색 화살표
– 트위닝이 제대로 구성되지 않은 경우
• 마지막 키프레임이 없을 때, 점선으로 표시
– 단일 키프레임
• 단일 키프레임 뒤에 있는 연한 회색 프레임에는 변경 내용이
없는 동일한 내용이 포함
– 액션 패널에서 프레임 액션을 지정한 프레임
• 소문자 a 표시
플래시 애니메이션
• 프레임 애니메이션
• 트위닝 애니메이션
– 모션트위닝 애니메이션
– 클래식 애니메이션
– 모양 트위닝 애니메이션
• 모션안내선을 이용한 애니메이션
• IK(Inverse Kinematics) – 관절 운동 애니메이션
• 마스크를 이용한 애니메이션
기본 플래시 애니메이션 비교
프레임 바이 프레임 애니메이션
(Frame by Frame Animation)
모양 트윈
(Shape Tween)
모션 트윈
(Motion Tween)
특징
한 프레임 마다 다른 장면이 담
겨있어 시간이 진행됨에 따라
애니메이션이 되는 것 처럼 보
이는 기법
처음 장면의 오브젝트
가 끝 장면의 오브젝
트 형태(모양)로 자연
스럽게 바뀌어 보이는
기법
위치, 크기, 모양,
색상, 가속도, 회전
등 가장 다양하게
애니메이션기법을
구사 가능
조건
• 키프레임이 변환시점마다 있 • 처음과 끝은 반드시 • 키프레임이 변환
어야 함
키프레임 으로 이루
시점 마다 있어
• 오브젝트 상태는 어떤 것이
어짐
야함
든 관계 없으나 모양이 점차 • 오브젝트는 반드시 • 오브젝트의 상태
바뀌는 경우로 구성되어야
모양(shape)상태
는 그룹(Group)
함
또는 심볼
(Symbol) 이어야
함
프레임 바이 프레임 애니메이션
• 전통적인 셀 애니메이션과 같은 원리
• 매 프레임 마다 그림의 변화를 주어 애니
메이션 효과를 얻는 방법
프레임 바이 프레임 애니메이션(연습)
• 그림 그리는 과정을 보여주는 애니메이션
– 무대 위에 자신의 이름 텍스트 입력 후
– 글꼴과 크기를 “휴먼편지체“, 80으로 맞춤
– 텍스트의 선택 후 [수정]->[분리] 선택
– 다시 한번 [수정]->[분리] 선택
– 2번 프레임에 키프레임 추가 [F6]
– 지우개 툴을 이용하여 단어의 뒷부분을 지움
– 단어가 써지는 순서의 반대순서로 지움
– 위의 작업과 같은 내용으로 3번 프레임에 키프레임을
추가[F6]한 후 지우개 툴로 조금 더 지움
– 이 과정을 반복함
– 위 과정을 반복하면 마지막 프레임에는 내용이 없슴
– 타임라인상에서 마우스 오른쪽버튼을 눌러 모든 프레
임 선택
– 모든 프레임이 선택된 상
태에서 마우스 오른쪽버튼
을 눌러 프레임 반전 선택
– 완성된 단어가 어느 정도
유지되도록 마지막 프레임
이후에 여유 있게 프레임
을 추가
– 애니메이션 확인 후
“내이름.fla” 로 저장
프레임 바이 프레임 애니메이션 -실습
•
장식도구를 이용한 프레임 바이 프레임
애니메이션 실습
– 드로잉효과 ->줄기 채우기
– 나뭇잎, 꽃, 줄기의 색 변경
– 애니메이션 패턴 체크
– 애니메이션 실행 후
– 레이어이름을 “배경” 으로하고
꽃 레이어 추가
– “꽃”레이어의 50프레임에 빈키프레임 추가
– 장식도구 에서 꽃 브러시 -> 장미 선택
– 적당한 색상 선택 후 한 프레임씩 꽃을 그림
– 장식도구에서 나무 브러시 -> 정원 식물 선택
– “나무” 레이어를 추가하여 후반부에 프레임 단위
로 나무 추가
– 실행 후 “정원.fla” 로 저장
모션 트윈
• 클래식 트윈 - CS3 이하 버전의 모션트윈
• 현재의 모션 트윈 - CS4 버전 이후의 모션 트윈
모션 트위닝 애니메이션(1)
• 모션 트위닝 (Motion Tweening)
– 움직임(motion) + 사이(tween)
– 움직임의 사이를 자동으로 처리해 주는 기법
• 모션트위닝 애니메이션의 기법의 종류
– 위치,크기의 변화 : 인스턴스의 크기나 위치를 변화
– 각도의 변화 : 회전(Rotate)옵션을 사용하여 인스턴스
를 회전시키는 기법
– 색상,투명도의 변화 : 색상효과(Color Effects)를 이용
하여 색상,투명도 등을 변화시키는 기법
모션 트위닝 애니메이션(2)
• 모션트위닝 애니메이션의 절대조건
– 모션의 대상 오브젝트는 심벌 또는 그룹 인스
턴스여야 함
– 인스턴스 오브젝트에 변화가 있어야 함
모션 트위닝 애니메이션(3)
• 모션 트위닝 속성
–
부드럽게 :
•
•
•
–
회전
•
–
좀 더 실감나는 모션 트위닝의 속도를 조절
-100에 가까울수록 평균 속도보다 느려지면서
멈추게 되고 100에 가까울수록 가속하여 점점
빨라지면서 멈춤
예) 공을 떨어뜨렸을 때 중력에 의한 효과
모션트위닝에서 인스턴스의 회전 여부를 결정하
는 옵션 (자동, 시계방향, 반시계 방향)
패스 방향으로
•
안내선과 요소를 수평이 되도록 맞추어 움직을
자연스럽게 만들어줌
– 패스
•
모션 트위닝이 적용되는 좌표와 크ㅣ 종절
클래식 트위닝 연습
• 사각형 그리기
– 사각형 도구로 캔버스에 작은 사각형을 그림
– 도형의 선 색과 면 색을 선택 후 그림
• 선택도구로 사각형 전체를 선택
• [수정]->[심볼로 변환], 그래픽 선택, 이름은 사각형으로
• 30프레임에서 마우스 오른쪽 버튼을 누른 후 키 프레임
삽입을 선택
• 30프레임의 사각형 심벌을 오른쪽으로 이동
• 1번과 30번 사이의 프레임 선택후 마우스의 오른쪽버튼
을 누르고 클래식 트윈 만들기 선택
• 결과 확인
모션 트위닝 연습
• 사각형 그리기
– 사각형 도구로 캔버스에 작은 사각형을 그림
– 그래픽 심볼로 변환
• 사각형 선택후 오른쪽 마우스 버튼 -> 모션 트윈 생성
• 자동으로 24프레임 까지 생성됨
• 사각형을 오른쪽으로 이동후 결과 확인
• 마지막 프레임의 사각형을 확대
• 무대위의 모션트윈 선택 후 속성 패널
부드럽게 100
회전 2번
• 결과 확인
모션트위닝 애니메이션 실습
• “자동차.flc”파일을 읽고 자동차가 이동하는 애
니메이션 완성하기
• 힌트
– 들어올 때
• 정지할 시점 : 45frame (모션경로->경로반전)
• 바퀴회전 : 반시계방향 3회
– 나갈 때
• 출발해서 빠져나가는 시점 : 90frame
• 바퀴회전 : 반시계방향 3회
– 감속/가속
• 모션트윈 속성에서 부드럽게 이용
• “자동차이동1”.fla로 저장
• “배경움직임.flc”파일을 읽고 배경을 움직여서
자동차가 이동하는 애니메이션 완성하기
• “자동차이동2.fla”로 저장
모션 경로 경로와 안내선
• 모션 트위닝에 의해 만들어진 이동 애니메이션은 모
션 경로가 자동으로 만들어짐
• 클래식 애니메이션에서는 안내선을 이용하여 애니메
이션 경로를 지정함
모션 경로 변경
• 모션트위닝에 의해 만들어진 이동 애니메이션은 이
동 최단거리를 계산하여 직선으로 움직임이 생성
• 선택도구 화살표로 경로를 선택하면 변경가능
안내선을 이용한 경로 지정
• 클래식 트윈으로 간단한 이동 애니메이션을 제작 후
• 레이어 이름에서 오른쪽 마우스 클릭 -> 클래식 모
션 안내선 추가
안내선을 이용한 경로 지정
• 안내선 레이어에서 선분을 하나 긋는다.
• 클래식 트윈 레이어의 시작 프레임의 사각형을 안내
선의 시작점에, 끝 프레임의 사각형을 마지막 점에
연결한다.
시작 프레임
에서 이동
끝 프레임
에서 이동
실습
• “모션패스.fla” 을 읽고 언덕을 따라 공이 굴러가
는 애니메이션 만들기
• 결과 실행
– “공굴리기.fla” 로 저장
• 새로만들기에서 “자전지구.gif”를 가져오기
하여 공전하는 지구 애니메이션 만들기
• 결과 실행
– “지구공전궤도.fla” 로 저장
모션프리셋을 이용한 애니메이션
• 모션프리셋
• 플래시에서 미리 만들어 제공되는 애니메이션
• 사용자가 일일이 키프레임을 만들지 않고 설정 가능
• 그래픽 심볼은 사용 불가(동영상 클립 심볼 사용)
• 실습
• “모션프리셋.fla” 가져오기
• 무대위의 자동차를 동영상 클립 심
볼로 변환
• 메뉴에서 윈도우 -> 모션 프리셋
• 무대에서 자동차를 선택 후 모션
프리셋 패널에서 적당한 애니메이
션 선택 후 적용
Inverse Kinematics (뼈 도구)
• 뼈 도구
이용법 (AS3.0만 가능)
– 모양(shape) : 1개의 모양에 뼈 도구 이용
– 심볼 : 여러 개의 심볼에 걸쳐 뼈 도구 이용
• 먼저 사각형을 무대에 그리고,
• 뼈 도구
를 선택하고 사각형안에 뼈대를 만든다.
• 생성된 뼈대 레이어의 프레임을 50으로 늘린다.
– 프레임 삽입
• 뼈대 레이어의 25프레임과 50프레임에 포즈 삽입
• 선택 도구 를 선택하여
• 1, 25, 50의 포즈 프레임에서 움직임을 부여
• 실습
– “포크레인.fla”를 읽고 포크레인 암에 움직임 부여하
기.
– “포크레인움직임.fla”로 저장
모양 트위닝 애니메이션
• Shape tweening Animation
– 모양의 변환, 변형을 통한 애니메이션
– 드로잉 오브젝트 또는 모양(shape)오브젝트
만 적용
– 심볼이나 비트맵 분리(Break Apart)를 적용한
후 사용 가능
모양 트위닝 연습
• 도구상자의 사각형 도구 -> 다각형 별도구 선택
• 속성 창의 옵션을 별로 변경
• 테두리 없이 별 모양을 그림
• 30번 프레임 선택후 빈키프레임 삽입 (F7)
• 30번 프레임에서 배경색을 변경한 원을 그림
• 1프레임의 별 또는 1프레임을 선택한 후 오른쪽 마우스
버튼, [모양 트윈 만들기] 선택
텍스트의 모양 트위닝 연습
• CAR 에서 자동차 그림으로 변화
– 텍스트 CAR 를 작성
– 선택툴을 이용하여 텍스트 선택 후,
• 수정 -> 분리
• 반복해서 한번 더 [수정] -> [분리] 적용
– 30번 프레임에서
• 빈 키프레임 삽입후
• 펜도구를 이용하여 자동차 모양을 그림
– 1번 프레임 선택한 후
• 오른쪽 버튼 클릭 후
• 모양트윈 만들기
마스크를 이용한 애니메이션
• 마스크(Mask)
– 오브젝트나 심볼을 보여 주는데 있어서 두개
의 이미지의 차이를 통해서 일부 영역만을 보
여주는 기법
– 마스크가 적용될 레이어와 마스크 레이어로
이루어짐
– 이러한 마스크 기법을 이용하여 여러가지 시
각적 효과를 만들수 있음
마스크 애니메이션
마스크(Mask) 적용 실습
• 새로운 문서에서 배경
을 검정색으로 지정
• 텍스트 도구를 이용하
여 글자 작성
흰색, 크기:50, 굵게
• 새로운 레어어 추가 후 글
자의 왼쪽에 원을 그림
• 원을 그래픽 심벌로 변환
• 2번 레이어의 원에 [모션
트윈 생성]
• 두개의 레이어를 30번
프레임 까지 확장
• 2번 레이어 30번 프레임
의 원 선택
• 원을 글자의 오른쪽 끝으
로 이동
• Layer 2를 선택하고 마우스 오른쪽 버튼을 누른
후 메뉴에서 마스크를 선택
• 결과 확인
– “Masking.fla”로 저장
마스크 활용 실습
(모양트윈 + 마스크)
• “아이폰.fla”를 읽고 모양트위닝과 마스크
를 활용한 장면 전환효과 만들기
– 레이어2의 1프레임 선택, 테두리없는 사각형
이 무대를 가득 차도록 그림
– 20, 50, 60 프레임을 각각선택(Ctrl key)하고,
오른쪽 마우스버튼 -> 키프레임 삽입(F6)
– 정보패널 : 윈도우 -> 정보
– 20, 50프레임의 사각형을 정보패널에서
• 넓이 1, 높이 400, X좌표 275, Y좌표 0으로 세팅
– 30번 프레임 선택 후 빈키프레임 삽입(F7)
– 30번 프레임에서 넓이와 높이가 600인 원을 그림
– X좌표 -30, y좌표 -100
– 1~20, 20~30, 30~50, 50~60 의 구간에 모
양 트윈 만들기
– 레이어2 이름에서 오른쪽 마우스 버튼 -> 마
스크 선택
• 결과 실행
– 아이폰광고.fla로 저장
마스크 활용 실습
(모션트윈 + 마스크 + 경로변경)
• “광고.fla”를 읽고 모션트위닝, 마스크, 경
로변경을 활용하여 드라마광고 만들기
– 전체 200 프레임
– 25프레임 씩 모션트윈으로 스포트라이트 이동
– 액션레이어를 만들고
– 0번 프레임에 다음과 같은 액션스크립 작성
stop();
function replay() {
play();
}
setTimeout(replay, 1000*12); //12초간 delay
– 25, 50, 75, 100, 125번 프레임에 다음을 작성
stop();
setTimeout(replay, 1000*8); //8초간 delay
– 175번 프레임은 12초, 200번은 10초 설정
– 사운드
• 효과 : 페이드 아웃
• 동기화 : 시작
– “드라마광고.fla” 로 저장
필터를 이용한 애니메이션
• 필터
– 포토샵의 필터와 같은 효과를 무비에 적용
– 무비클립 또는 버튼 심볼 객체에 적용 가능
– 속성 패널에 필터속성 지정
• 프리셋 : 현재 설정된 필터 속성을 저장한
다음 다시 불러와 재사용 가능
프리셋
필터추가
필터 재설정
클립보드
필터 삭제
필터 활성화 비활성화
• 필터 재설정 : 선택된 필터의 변경된 속성을
이전 상태로 돌림
필터 이용 실습
• 원을 그리고 무비(동영상)클립 심볼로 변환
• 무대위의 무비클립 객체에 모션 트윈 생성
• 1프레임의 객체에 흐림 필터 추가
– 50px 로 설정
• 마지막 프레임의 객체에 흐림 필터 변경
– 0px 로 설정
• 결과 확인
필터 활용 애니메이션
• 스피디하게 등장하는 비행기
– “비행기.fla”를 읽어들임
– 비행기 레이어를 선택하고 라이브러리의 비행
기 심벌을 무대로 드래그
– 무대의 비행기를 오른쪽 마우스 버튼으로 선
택 -> 모션 트윈 생성
– 비행기의 프레임을 50까지 늘임
– 50번 프레임에서 비행기를 왼쪽으로 드래그하
고 크기 확대
• 비행기에 속도감 주기
–
–
–
–
1프레임의 비행기 심벌 선택후
속성에서 필터 추가
흐림 선택
X흐림: 50, Y흐림: 20
X와 Y의 속성값 연결 해지
– 50번 프레임의 비행기는 X,Y 흐림 0으로 설정
– 결과 확인
• 비행기의 그림자 만들기
– 비행기 레이어 복사하기
• 새 레이어 추가
• 비행기 레이어의 트위닝 영역을 Alt키를 누른 상태
에서 새로운 레이어 위로 드래그
– 비행기 그림자 효과 만들기
• 복제된 레이어의 안내선을 아래로 이동 시키고 곡
선 형태로 만듦
• 1프레임의 비행기를 선택하고 흐림 필터 삭제
• 필터추가 -> 그림자 선택
• 강도: 20, 객체 숨김 체크
• 결과 확인
– “비행기날리기.fla” 로 저장