정보 3 4-3 애니메이션의 제작 YoungjinMedia.

Presentation on theme: "정보 3 4-3 애니메이션의 제작 YoungjinMedia."— Presentation transcript:

1 정보 3 4-3 애니메이션의 제작 YoungjinMedia

2 학습 목표 1 2 애니메이션의 동작 원리와 구성 요소를 설명할 수 있다. SVG를 이용하여 간단한 애니메이션을 만들 수 있다.
애니메이션의 동작 원리와 구성 요소를 설명할 수 있다. 1 SVG를 이용하여 간단한 애니메이션을 만들 수 있다. 2 학 생 1 2 3 스 함 평 심

3 우리 주변 생활을 주제로 간단한 플립 북을 만들어 보자
생각 열기 우리 주변 생활을 주제로 간단한 플립 북을 만들어 보자 나비가 날아가는 모습이나 나무가 자라는 과정, 꽃이 피는 모습 등을 간단하게 그려 보자. 그리고 준비한 메모지에 옮겨 플립 북으로 완성해 보자. 학 생 1 2 3 스 함 평 심

4 기초 지식 익히기 1 애니메이션의 동작 원리 학 생 1 2 3 스 함 평 심

5 애니메이션의 동작 원리 정지된 이미지를 연속적으로 배열해 보여 줌으로써 움직이는 동작을 만들어 내는 작업
기초 지식 익히기 1 – 애니메이션의 동작 원리 애니메이션의 동작 원리 정지된 이미지를 연속적으로 배열해 보여 줌으로써 움직이는 동작을 만들어 내는 작업 연속적인 이미지가 움직이는 동작으로 보이는 이유는 잔상 효과 때문 잔상 효과 : 이미지는 사라졌지만 사람의 눈이나 뇌에는 그 이미지를 계속 남겨 두려는 경향 학 생 1 2 3 스 함 평 심

6 기초 지식 익히기 2 애니메이션의 구성 요소 학 생 1 2 3 스 함 평 심

7 기초 지식 익히기 2 – 애니메이션의 구성 요소 프레임 사물의 움직임을 자연스러운 동작으로 인식하려면 1초에 24장 정도의 속도로 연속적인 동작을 보여 주어야 한다. 1초에 보이는 24장의 그림들 중 하나를 프레임(frame)이라고 한다. 초당 프레임 수 영화 - 1초당 24프레임 비디오, 텔레비전의 영상 - 1초당 30프레임 애니메이션 – 1초당 24프레임/12프레임/8프레임 학 생 1 2 3 스 함 평 심

8 기초 지식 익히기 2 – 애니메이션의 구성 요소 키 프레임 애니메이션을 만들 때 변하는 동작의 프레임들 중 가장 기준이 되는 프레임을 키 프레임(key frame)이라고 한다. 보통 변하는 동작의 시작 프레임이 키 프레임이 되어 변하는 애니메이션이 만들어진다. 학 생 1 2 3 스 함 평 심

9 기초 지식 익히기 3 애니메이션 만들기 학 생 1 2 3 스 함 평 심

10 SVG 파일 SVG의 시작과 끝 XML로 쓰이며 확장자는 반드시 ‘svg’로 정의되어야 한다.
기초 지식 익히기 3 – 애니메이션 만들기 SVG 파일 XML로 쓰이며 확장자는 반드시 ‘svg’로 정의되어야 한다. SVG의 시작과 끝 <svg>로 시작하여 </svg>로 끝나야 한다. 학 생 1 2 3 스 함 평 심

11 기본 도형 그리기 도형 태그명 속성 사각형 <rect> x=“좌표값”y=“좌표값”
기초 지식 익히기 3 – 애니메이션 만들기 기본 도형 그리기 도형 태그명 속성 사각형 <rect> x=“좌표값”y=“좌표값” width=“크기”height=“크기” 원 <circle> cx=“좌표값”cy=“좌표값” r=“크기” 타원 <ellipse> cx=“좌표값”cy=“좌표값” rx=“크기”ry=“크기” 선 <line> x1=“좌표값”y1=“좌표값” x2=“좌표값”y2=“좌표값” 학 생 1 2 3 스 함 평 심

12 사각형 그리기 <svg> <rect x=“10” y=“10” width=“100” height=“100”
기초 지식 익히기 3 – 애니메이션 만들기 사각형 그리기 <svg> <rect x=“10” y=“10” width=“100” height=“100” fill=“yellow” stroke=“red” stroke-width=“2”/> </svg> 학 생 1 2 3 스 함 평 심

13 원 그리기 <svg> <circle cx=“150” cy=“150” r=“100”
기초 지식 익히기 3 – 애니메이션 만들기 원 그리기 <svg> <circle cx=“150” cy=“150” r=“100” fill=“blue” stroke=“yellow” stroke-width=“3”/> </svg> 학 생 1 2 3 스 함 평 심

14 명령문 <g transform=“요소”> 도형 </g>
기초 지식 익히기 3 – 애니메이션 만들기 명령문 <g transform=“요소”> 도형 </g> 요소 내용 translate(x, y) x, y 이동 값만큼 이동한다. rotate(회전 각도) 회전 각도만큼 시계 방향으로 회전시킨다. scale(확대·축소 비율) 확대 · 축소 비율만큼 확대하거나 축소시킨다. 확대·축소 비율이 1보다 크면 확대시키고 1미만이면 축소시킨다. 학 생 1 2 3 스 함 평 심

15 위치 이동 <svg> <g transform=“translate(200,0)”>
기초 지식 익히기 3 – 애니메이션 만들기 위치 이동 <svg> <g transform=“translate(200,0)”> <rect x=“50” y=“50” width=“100” height=“100” fill=“yellow” stroke=“red” stroke-width=“2”/> </g> </svg> 학 생 1 2 3 스 함 평 심

16 회전하기 <svg> <g transform=“rotate(45)”>
기초 지식 익히기 3 – 애니메이션 만들기 회전하기 <svg> <g transform=“rotate(45)”> <text x=“150” y=“150” font-family=“Arial” font-size=“20pt”> Hello!!</text> </g> </svg> 학 생 1 2 3 스 함 평 심

17 확대하기 <svg> <g transform=“scale(2)”>
기초 지식 익히기 3 – 애니메이션 만들기 확대하기 <svg> <g transform=“scale(2)”> <circle cx=“55” cy=“55” r=“50” fill=“purple”/> </g> </svg> 학 생 1 2 3 스 함 평 심

18 스스로 해 보기 ( )은 정지된 이미지를 연속적으로 배열하여 보여줌으로써 움직이는 동작을 만들어내는 작업을 말한다. 연속적인 이미지를 움직이는 동작으로 보이게 하는 이유는 ( ) 때문이다. 애니메이션의 가장 기본적인 요소는 ( )이다. 보통 ( ) 프레임이면 자연스러운 영상이 만들어진다. 애니메이션을 만들 때 변하는 동작의 프레임들 중 가장 기준이 되는 프레임을 ( )이라고 한다. 애니메이션 잔상 효과 프레임 1초당 24 키 프레임 학 생 1 2 3 스 함 평 심

19 함께 해 보기 SVG를 이용하여 다음 조건에 맞는 도형을 완성해 보자. (단위는 픽셀)
(1) x, y 좌표가 20, 20, 가로 200, 세로 200인 사각형 (2) 원의 중심 좌표값이 100, 100, 반지름 100인 원 (색 채우기: 파랑, 외곽선: 노랑) SVG를 이용하여 다음 조건에 맞게 도형을 변환시켜 보자. (1) x, y 좌표가 20, 20, 가로 200, 세로 200인 사각형을 X축으로 100, Y축으로 50만큼 평행 이동 (2) 원의 중심 좌표값이 100, 100, 반지름 100인 원을 2배 확대시키기 학 생 1 2 3 스 함 평 심

20 평가하기 연속적인 이미지가 움직이는 동작으로 보이는 이유는? 애니메이션의 가장 기본적인 요소는?
① 프레임 ② 키 프레임 ④ 특수 효과 ⑤ 편집 애니메이션의 가장 기본적인 요소는? ② 키 프레임 ③ 잔상 효과 3. SVG 명령에서 사각형을 그리는 명령은? ② <circle> ③ <ellipse> ④ <translate> ⑤ <rotate> ③ 잔상 효과 ① 프레임 ① <rect> 학 생 1 2 3 스 함 평 심

21 심화 학습 SVG에서 다음과 같이 animateColor을 활용하여 시간이 지남에 따라 색이 변하는 애니메이션을 만들어 보자.
생 1 2 3 스 함 평 심