Flash II.

Presentation on theme: "Flash II."— Presentation transcript:

1 Flash II

2 플래시 오브젝트의 종류

3 심 볼(symbol) 심볼 재사용을 목적으로 만든 오브젝트 특별한 애니메이션 효과
플래시 무비 제작 시 여러 번 사용되는 오브젝트를 심볼로 만들어 사용하면 파일용량에 거의 영향을 주지 않음 심벌 라이브러리 창 플래시 무비를 만들 때 사용된 모든 심벌을 관리하는 창 윈도우 -> 라이브러리 특별한 애니메이션 효과 이동, 회전, 색상변화, 투명과 같은 애니메이션 효과를 손쉽게 만들 수 있음

4 심벌의 종류 그래픽(Graphic) 심벌 버튼(Button) 심벌 무비클립(Movie Clip) 심벌
가장 일반적인 형태의 심벌 아무런 움직임도 갖고 있지 않은 상태 벡터, 비트맵이미지 모두 그래픽 심벌로 변형 가능 이 심벌을 스테이지로 불러들여야 애니메이션에 통합 됨 하나의 심벌을 여러 번 스테이지로 불러와도 플래시의 용량과는 무관 버튼(Button) 심벌 버튼형식의 심벌 마우스 커서가 위에 올라왔을 경우, 클릭했을 경우에 대한 반응 액션스크립트와 연관되어 사용 무비클립(Movie Clip) 심벌 자체로 움직임을 갖고 있는 심벌 스테이지 위에 올려놓기만 해도 스스로 무비를 재생하는 애니메이션 지원 액션스크립트와 연관되어 사용됨

5 심벌 종류의 비교

6 심벌 만들기 실습 스테이지에서 작업 후 라이브러리에 등록 심벌 편집 전용 창으로 만들기 무대 위에 파란 원 만들기
[수정]->[심벌로 변환] 심벌 편집 전용 창으로 만들기 [삽입]->[새 심벌] 작업후 Ctrl+E 또는 타임라인의 왼쪽 상단이나 오른쪽 상단에 있는 장면 선택 탭을 클릭 실습 무대 위에 파란 원 만들기 원을 선택후, [수정]->[심벌로 변환]->[그래픽] 선택

7 심벌 인스턴스 편집 실습 인스턴스 두 개의 원 심벌을 스테이지에 가져다 놓음 두개의 심벌은 속성의 위치 값이 다름
심벌 라이브러리상의 심벌을 스테이지로 가져온 상태 속성의 값들을 다르게 설정하여 서로 다른 인스턴스가 될 수 있음 속성의 변경은 심벌에 영향을 주지 않음 실습 두 개의 원 심벌을 스테이지에 가져다 놓음 두개의 심벌은 속성의 위치 값이 다름 오른쪽 그래픽 심벌을 선택후 속성패널의 [색상]항목에서 [밝기]를 선택하여 수치를 변동 해당 인스턴스의 밝기가 바뀌지만 라이브러리의 심벌에는 영향을 주지 않음

8 드로잉 오브젝트의 종류 도형(모양) 그룹 텍스트 비트맵 심벌 도구 패널을 이용하여 그려지는 오브젝트
선과 내부의 점들이 하나하나 분리되어 있는 상태 원하는 부분에 대한 이동과 변형 가능 그룹 오브젝트의 개수에 상관없이 하나로 묶여진 대상 이동과 변형 시 적용내용이 그룹단위로 반영 텍스트 고유한 텍스트 박스의 속성을 갖고 있으며, 필요에 따라 도형 또는 그룹으로 변경 가능함 비트맵 플래시로 불러온 비트맵 이미지는 그룹속성을 가지고 있음 편집을 위해서는 도형속성으로 변형하여 사용 심벌 플래시 애니메이션과 액션스크립트를 구현할 때 필요한 오브젝트 도형, 그룹, 텍스트, 비트맵 등은 모두 심벌로 변환 가능

9 오브젝트 간의 변환 도형(모양) -> 그룹 그룹, 비트맵, 심벌 -> 모양 텍스트 -> 모양
여러 도형 선택후 , [수정]->[그룹] 반대의 경우 [수정]->[그룹해제] 그룹, 비트맵, 심벌 -> 모양 각각을 선택하고 [수정]->[분리] 텍스트 -> 모양 텍스트 박스를 선택후, [수정]->[분리] 글자 수가 여럿일 때는 두 번 적용

10 레이어와 프레임(1) 레이어 레이어의 구성 레이어 상태 아이콘 레이어 편집 : 현재 작업 중인 레이어 표시
레이어 보기/숨기기 : 레이어 보이기 토글 레이어 잠금/해제 : 레이어 이동, 삭제, 변형, 채색을 막기 외곽선 보기 해당 레이어의 오브젝트를 지정된 색깔의 외곽선으로 보여줌 레이어 추가 : 새로운 레이어를 추가 레이어 폴더 추가 : 여러 레이어를 관련된 폴더를 만들어 관리 레이어 삭제 : 레이어를 삭제함

11 레이어와 프레임(2) 프레임의 이해 프레임과 키프레임 차이점 프레임 키프레임 플래시 무비에서의 개별 정지화면
타임라인상의 플레이헤드가 움직일 때 한 프레임씩 장면을 보여줌 프레임의 길이 만큼 오브젝트가 화면에 표시됨 키프레임 편집가능한 오브젝트를 담고 있는 프레임 장면이 바뀌거나 새로운 오브젝트를 삽입할 때 사용

12 레이어와 프레임(3) 프레임 메뉴 (타임라인에서 오른쪽 버튼) 프레임 삽입 (F5) 프레임 제거 키프레임 삽입(F6)
키가 아닌 프레임 삽입, 어떤 객체도 포함되지 않는 프레임 프레임 제거 프레임 자체를 제거 (프레임 지우기와 비교) 키프레임 삽입(F6) 어떤 내용을 포함할 수 있는 키프레임의 삽입 앞의 키 프레임에 포함된 오브젝트들을 복사해서 가져옴 빈 키프레임 삽입(F7) 직접 그림을 그려 넣을 수도, 사운드 파일을 넣을 수도, 심벌을 넣을 수도 있는 빈 키프레임의 삽입 앞의 키 프레임의 오브젝트를 복사해서 가져오지는 않음 새로운 객체들을 넣을 때 사용 프레임 지우기 프레임 속에 포함하고 있는 객체들을 모두 지우는 것 프레임 제거 명령처럼 프레임을 삭제하는 것이 아님 키프레임을 빈 키프레임으로 변환 프레임 복사 프레임을 복사한 후 다른 빈 프레임에 붙이기 가능 프레임 붙여넣기 복사한 프레임의 내용을 붙여 넣기 프레임 반전 선택된 구간의 프레임의 앞과 뒤를 바꿈 예) 떨어지는 공 애니메이션이 준다면 튀어 오르는 애니메이션으로 바뀜

13 레이어와 프레임(3) 타임라인에서 애니메이션 구분 표시 모션 트윈 모양 트윈 클래식 트윈 트위닝이 제대로 구성되지 않은 경우
시작 키프레임이 검정색 점으로 표시되고 중간 트위닝된 프레임에는 연한 파란색 배경 모양 트윈 시작 키프레임이 검정색 점으로 표시되고 중간 트위닝된 프레임에는 연한 초록색 배경에 검정색 화살표 클래식 트윈 시작 키프레임이 검정색 점으로 표시되고 중간 트위닝된 프레임에는 연한 보라색 배경에 검정색 화살표 트위닝이 제대로 구성되지 않은 경우 마지막 키프레임이 없을 때, 점선으로 표시 단일 키프레임 단일 키프레임 뒤에 있는 연한 회색 프레임에는 변경 내용이 없는 동일한 내용이 포함 액션 패널에서 프레임 액션을 지정한 프레임 소문자 a 표시

14 플래시 애니메이션 프레임 애니메이션 트위닝 애니메이션 모션안내선을 이용한 애니메이션
모션트위닝 애니메이션 클래식 애니메이션 모양 트위닝 애니메이션 모션안내선을 이용한 애니메이션 IK(Inverse Kinematics) – 관절 운동 애니메이션 마스크를 이용한 애니메이션

15 프레임 바이 프레임 애니메이션(Frame by Frame Animation)
기본 플래시 애니메이션 비교 프레임 바이 프레임 애니메이션(Frame by Frame Animation) 모양 트윈 (Shape Tween) 모션 트윈 (Motion Tween) 특징 한 프레임 마다 다른 장면이 담겨있어 시간이 진행됨에 따라 애니메이션이 되는 것 처럼 보이는 기법 처음 장면의 오브젝트가 끝 장면의 오브젝트 형태(모양)로 자연스럽게 바뀌어 보이는 기법 위치, 크기, 모양, 색상, 가속도, 회전 등 가장 다양하게 애니메이션기법을 구사 가능 조건 키프레임이 변환시점마다 있어야 함 오브젝트 상태는 어떤 것이든 관계 없으나 모양이 점차 바뀌는 경우로 구성되어야 함 처음과 끝은 반드시 키프레임 으로 이루어짐 오브젝트는 반드시 모양(shape)상태 키프레임이 변환시점 마다 있어야 함 오브젝트의 상태는 그룹(Group) 또는 심볼(Symbol) 이어야 함

16 프레임 바이 프레임 애니메이션 전통적인 셀 애니메이션과 같은 원리
매 프레임 마다 그림의 변화를 주어 애니메이션 효과를 얻는 방법

17 프레임 바이 프레임 애니메이션(연습) 그림 그리는 과정을 보여주는 애니메이션 무대 위에 자신의 이름 텍스트 입력 후
무대 위에 자신의 이름 텍스트 입력 후 글꼴과 크기를 “휴먼편지체“, 80으로 맞춤

18 텍스트의 선택 후 [수정]->[분리] 선택
다시 한번 [수정]->[분리] 선택 2번 프레임에 키프레임 추가 [F6]

19 지우개 툴을 이용하여 단어의 뒷부분을 지움 단어가 써지는 순서의 반대순서로 지움 위의 작업과 같은 내용으로 3번 프레임에 키프레임을 추가[F6]한 후 지우개 툴로 조금 더 지움 이 과정을 반복함

20 위 과정을 반복하면 마지막 프레임에는 내용이 없슴
타임라인상에서 마우스 오른쪽버튼을 눌러 모든 프레임 선택

21 모든 프레임이 선택된 상태에서 마우스 오른쪽버튼을 눌러 프레임 반전 선택
완성된 단어가 어느 정도 유지되도록 마지막 프레임 이후에 여유 있게 프레임을 추가 애니메이션 확인 후 “내이름.fla” 로 저장

22 프레임 바이 프레임 애니메이션 -실습 장식도구를 이용한 프레임 바이 프레임 애니메이션 실습 드로잉효과 ->줄기 채우기
나뭇잎, 꽃, 줄기의 색 변경 애니메이션 패턴 체크 애니메이션 실행 후 레이어이름을 “배경” 으로하고 꽃 레이어 추가

23 “꽃”레이어의 50프레임에 빈키프레임 추가 장식도구 에서 꽃 브러시 -> 장미 선택 적당한 색상 선택 후 한 프레임씩 꽃을 그림

24 장식도구에서 나무 브러시 -> 정원 식물 선택
“나무” 레이어를 추가하여 후반부에 프레임 단위로 나무 추가 실행 후 “정원.fla” 로 저장

25 모션 트윈 클래식 트윈 - CS3 이하 버전의 모션트윈 현재의 모션 트윈 - CS4 버전 이후의 모션 트윈

26 모션 트위닝 애니메이션(1) 모션 트위닝 (Motion Tweening) 모션트위닝 애니메이션의 기법의 종류
움직임의 사이를 자동으로 처리해 주는 기법 모션트위닝 애니메이션의 기법의 종류 위치,크기의 변화 : 인스턴스의 크기나 위치를 변화 각도의 변화 : 회전(Rotate)옵션을 사용하여 인스턴스를 회전시키는 기법 색상,투명도의 변화 : 색상효과(Color Effects)를 이용하여 색상,투명도 등을 변화시키는 기법

27 모션 트위닝 애니메이션(2) 모션트위닝 애니메이션의 절대조건 모션의 대상 오브젝트는 심벌 또는 그룹 인스턴스여야 함
인스턴스 오브젝트에 변화가 있어야 함

28 모션 트위닝 애니메이션(3) 모션 트위닝 속성 패스 부드럽게 : 회전 패스 방향으로 좀 더 실감나는 모션 트위닝의 속도를 조절
-100에 가까울수록 평균 속도보다 느려지면서 멈추게 되고 100에 가까울수록 가속하여 점점 빨라지면서 멈춤 예) 공을 떨어뜨렸을 때 중력에 의한 효과 회전 모션트위닝에서 인스턴스의 회전 여부를 결정하는 옵션 (자동, 시계방향, 반시계 방향) 패스 방향으로 안내선과 요소를 수평이 되도록 맞추어 움직을 자연스럽게 만들어줌 패스 모션 트위닝이 적용되는 좌표와 크ㅣ 종절

29 클래식 트위닝 연습 사각형 그리기 사각형 도구로 캔버스에 작은 사각형을 그림 도형의 선 색과 면 색을 선택 후 그림

30 선택도구로 사각형 전체를 선택 [수정]->[심볼로 변환], 그래픽 선택, 이름은 사각형으로

31 30프레임에서 마우스 오른쪽 버튼을 누른 후 키 프레임 삽입을 선택
30프레임의 사각형 심벌을 오른쪽으로 이동

32 1번과 30번 사이의 프레임 선택후 마우스의 오른쪽버튼을 누르고 클래식 트윈 만들기 선택
결과 확인

33 모션 트위닝 연습 사각형 그리기 사각형 도구로 캔버스에 작은 사각형을 그림 그래픽 심볼로 변환

34 사각형 선택후 오른쪽 마우스 버튼 -> 모션 트윈 생성
자동으로 24프레임 까지 생성됨 사각형을 오른쪽으로 이동후 결과 확인

35 마지막 프레임의 사각형을 확대 무대위의 모션트윈 선택 후 속성 패널 부드럽게 100 회전 2번 결과 확인

36 모션트위닝 애니메이션 실습 “자동차.flc”파일을 읽고 자동차가 이동하는 애니메이션 완성하기 힌트
들어올 때 정지할 시점 : 45frame (모션경로->경로반전) 바퀴회전 : 반시계방향 3회 나갈 때 출발해서 빠져나가는 시점 : 90frame 감속/가속 모션트윈 속성에서 부드럽게 이용 “자동차이동1”.fla로 저장

37 “배경움직임.flc”파일을 읽고 배경을 움직여서 자동차가 이동하는 애니메이션 완성하기
“자동차이동2.fla”로 저장

38 모션 경로 경로와 안내선 모션 트위닝에 의해 만들어진 이동 애니메이션은 모션 경로가 자동으로 만들어짐
클래식 애니메이션에서는 안내선을 이용하여 애니메이션 경로를 지정함

39 모션 경로 변경 모션트위닝에 의해 만들어진 이동 애니메이션은 이동 최단거리를 계산하여 직선으로 움직임이 생성
선택도구 화살표로 경로를 선택하면 변경가능

40 안내선을 이용한 경로 지정 클래식 트윈으로 간단한 이동 애니메이션을 제작 후
레이어 이름에서 오른쪽 마우스 클릭 -> 클래식 모션 안내선 추가

41 안내선을 이용한 경로 지정 안내선 레이어에서 선분을 하나 긋는다.
클래식 트윈 레이어의 시작 프레임의 사각형을 안내선의 시작점에, 끝 프레임의 사각형을 마지막 점에 연결한다. 시작 프레임에서 이동 끝 프레임에서 이동

42 실습 새로만들기에서 “자전지구.gif”를 가져오기하여 공전하는 지구 애니메이션 만들기
“모션패스.fla” 을 읽고 언덕을 따라 공이 굴러가는 애니메이션 만들기 결과 실행 “공굴리기.fla” 로 저장 새로만들기에서 “자전지구.gif”를 가져오기하여 공전하는 지구 애니메이션 만들기 “지구공전궤도.fla” 로 저장

43 모션프리셋을 이용한 애니메이션 모션프리셋 실습 플래시에서 미리 만들어 제공되는 애니메이션
사용자가 일일이 키프레임을 만들지 않고 설정 가능 그래픽 심볼은 사용 불가(동영상 클립 심볼 사용) 실습 “모션프리셋.fla” 가져오기 무대위의 자동차를 동영상 클립 심볼로 변환 메뉴에서 윈도우 -> 모션 프리셋 무대에서 자동차를 선택 후 모션 프리셋 패널에서 적당한 애니메이션 선택 후 적용

44 Inverse Kinematics (뼈 도구)
뼈 도구 이용법 (AS3.0만 가능) 모양(shape) : 1개의 모양에 뼈 도구 이용 심볼 : 여러 개의 심볼에 걸쳐 뼈 도구 이용

45 먼저 사각형을 무대에 그리고, 뼈 도구 를 선택하고 사각형안에 뼈대를 만든다. 생성된 뼈대 레이어의 프레임을 50으로 늘린다.
뼈 도구 를 선택하고 사각형안에 뼈대를 만든다. 생성된 뼈대 레이어의 프레임을 50으로 늘린다. 프레임 삽입 뼈대 레이어의 25프레임과 50프레임에 포즈 삽입

46 선택 도구 를 선택하여 1, 25, 50의 포즈 프레임에서 움직임을 부여 실습
선택 도구 를 선택하여 1, 25, 50의 포즈 프레임에서 움직임을 부여 실습 “포크레인.fla”를 읽고 포크레인 암에 움직임 부여하기. “포크레인움직임.fla”로 저장

47 모양 트위닝 애니메이션 Shape tweening Animation 모양의 변환, 변형을 통한 애니메이션
심볼이나 비트맵 분리(Break Apart)를 적용한 후 사용 가능

48 모양 트위닝 연습 도구상자의 사각형 도구 -> 다각형 별도구 선택 속성 창의 옵션을 별로 변경

49 테두리 없이 별 모양을 그림 30번 프레임 선택후 빈키프레임 삽입 (F7) 30번 프레임에서 배경색을 변경한 원을 그림 1프레임의 별 또는 1프레임을 선택한 후 오른쪽 마우스버튼, [모양 트윈 만들기] 선택

50 텍스트의 모양 트위닝 연습 CAR 에서 자동차 그림으로 변화 텍스트 CAR 를 작성 선택툴을 이용하여 텍스트 선택 후,
수정 -> 분리 반복해서 한번 더 [수정] -> [분리] 적용 30번 프레임에서 빈 키프레임 삽입후 펜도구를 이용하여 자동차 모양을 그림 1번 프레임 선택한 후 오른쪽 버튼 클릭 후 모양트윈 만들기

51 마스크를 이용한 애니메이션 마스크(Mask)
오브젝트나 심볼을 보여 주는데 있어서 두개의 이미지의 차이를 통해서 일부 영역만을 보여주는 기법 마스크가 적용될 레이어와 마스크 레이어로 이루어짐 이러한 마스크 기법을 이용하여 여러가지 시각적 효과를 만들수 있음

52 마스크 애니메이션

53 마스크(Mask) 적용 실습 새로운 문서에서 배경을 검정색으로 지정 텍스트 도구를 이용하여 글자 작성 흰색, 크기:50, 굵게

54 새로운 레어어 추가 후 글자의 왼쪽에 원을 그림 원을 그래픽 심벌로 변환

55 2번 레이어의 원에 [모션 트윈 생성] 두개의 레이어를 30번 프레임 까지 확장 2번 레이어 30번 프레임의 원 선택 원을 글자의 오른쪽 끝으로 이동

56 Layer 2를 선택하고 마우스 오른쪽 버튼을 누른 후 메뉴에서 마스크를 선택
결과 확인 “Masking.fla”로 저장

57 마스크 활용 실습 (모양트윈 + 마스크) “아이폰.fla”를 읽고 모양트위닝과 마스크를 활용한 장면 전환효과 만들기
레이어2의 1프레임 선택, 테두리없는 사각형이 무대를 가득 차도록 그림 20, 50, 60 프레임을 각각선택(Ctrl key)하고, 오른쪽 마우스버튼 -> 키프레임 삽입(F6)

58 정보패널 : 윈도우 -> 정보 20, 50프레임의 사각형을 정보패널에서 30번 프레임 선택 후 빈키프레임 삽입(F7)
넓이 1, 높이 400, X좌표 275, Y좌표 0으로 세팅 30번 프레임 선택 후 빈키프레임 삽입(F7) 30번 프레임에서 넓이와 높이가 600인 원을 그림 X좌표 -30, y좌표 -100

59 1~20, 20~30, 30~50, 50~60 의 구간에 모양 트윈 만들기 레이어2 이름에서 오른쪽 마우스 버튼 -> 마스크 선택 결과 실행 아이폰광고.fla로 저장

60 마스크 활용 실습 (모션트윈 + 마스크 + 경로변경)
“광고.fla”를 읽고 모션트위닝, 마스크, 경로변경을 활용하여 드라마광고 만들기 전체 200 프레임 25프레임 씩 모션트윈으로 스포트라이트 이동

61 액션레이어를 만들고 0번 프레임에 다음과 같은 액션스크립 작성 25, 50, 75, 100, 125번 프레임에 다음을 작성
175번 프레임은 12초, 200번은 10초 설정 사운드 효과 : 페이드 아웃 동기화 : 시작 “드라마광고.fla” 로 저장 stop(); function replay() { play(); } setTimeout(replay, 1000*12); //12초간 delay stop(); setTimeout(replay, 1000*8); //8초간 delay

62 필터를 이용한 애니메이션 필터 포토샵의 필터와 같은 효과를 무비에 적용 무비클립 또는 버튼 심볼 객체에 적용 가능
속성 패널에 필터속성 지정 프리셋 : 현재 설정된 필터 속성을 저장한 다음 다시 불러와 재사용 가능 필터 재설정 : 선택된 필터의 변경된 속성을 이전 상태로 돌림 프리셋 필터 재설정 필터 삭제 필터추가 클립보드 필터 활성화 비활성화

63 필터 이용 실습 원을 그리고 무비(동영상)클립 심볼로 변환 무대위의 무비클립 객체에 모션 트윈 생성
1프레임의 객체에 흐림 필터 추가 50px 로 설정 마지막 프레임의 객체에 흐림 필터 변경 0px 로 설정 결과 확인

64 필터 활용 애니메이션 스피디하게 등장하는 비행기 “비행기.fla”를 읽어들임
비행기 레이어를 선택하고 라이브러리의 비행기 심벌을 무대로 드래그 무대의 비행기를 오른쪽 마우스 버튼으로 선택 -> 모션 트윈 생성

65 비행기의 프레임을 50까지 늘임 50번 프레임에서 비행기를 왼쪽으로 드래그하고 크기 확대

66 비행기에 속도감 주기 1프레임의 비행기 심벌 선택후 속성에서 필터 추가 흐림 선택 X흐림: 50, Y흐림: 20
결과 확인 X와 Y의 속성값 연결 해지

67 비행기의 그림자 만들기 비행기 레이어 복사하기 새 레이어 추가
비행기 레이어의 트위닝 영역을 Alt키를 누른 상태에서 새로운 레이어 위로 드래그

68 비행기 그림자 효과 만들기 복제된 레이어의 안내선을 아래로 이동 시키고 곡선 형태로 만듦
1프레임의 비행기를 선택하고 흐림 필터 삭제

69 필터추가 -> 그림자 선택 강도: 20, 객체 숨김 체크 결과 확인 “비행기날리기.fla” 로 저장