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

Slides:



Advertisements
Similar presentations
Multimedia Programming 21: By FLEX Departments of Digital Contents Sang Il Park.
Advertisements

6조6조 김지혜 이지현 황지만 저널리즘 위기의 실체와 극복. 목차 『한국언론정보학보 』 2006 년 겨울, 통권 36 호, 한국언론정보학회 저널리즘 위기의 실체와 극복방안에 관한 연구 문제제기 : 미디어 폭발시대의 저널리즘 위기 1 저널리즘 위기의 선행연구와 연구방법.
HTML.  Hyper Text Markup Language  Hyper Text : Link  Markup :  전용 브라우저 (IE, Netscape, Opera..)  프로그램 + 실행 환경 ( 실행기 )
Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ ’ ( 금 ) ~ ( 목 ) / 15 개 시・군 대한체육회 / 도, 교육청, 도체육회 47 개 종목 / 32 천명 ’ ( 금 ) ~ ( 화 ) / 9 개 시・군 대한장애인체육회 / 도,
2015 상반기 공채 대비 _ 겁나 빠른 공채 달력 이용 안내 년 상반기 대기업 공채 달력 공채 달력을 대학 게시판에 쉽게 등록 - 게시판에 쉽게 등록할 수 있게 Html 로 제공 - 복사해서 학생들에게 메일로 발송 가능 대기업 공채 일정을.
목차 1 엑셀화면 구성 알아보기 2 저장 불러오기, 셀 이동 복사 3 텍스트 입력수정 특수화 기호 / 글꼴 서식, 맞춤 서식 / 표시형식, 테두리 및 채우기 1 4 엑셀 셀 삽입 삭제 / 워크시트 관리.
한국산업기술대학교 온라인 기술교육 교재 개발 차세대 모바일 디지털 컨텐츠 15. WML 개발 - I 이번 시간에는... 지난 시간에는 WAP 의 WTA 프로토콜의 기능과 구성, 서비스 예에 대해서 학습하고, WAP 보안을 위한 WTLS 와 WAP 애플리케이션 레이어 보안,
2장. 윈도우즈 입출력 1/211 1.
1. 기관별 맞춤형 집중교육 : 실습 및 개인별 집중지도    1. 기관별 맞춤형 집중교육 : 실습 및 개인별 집중지도 (상설) 기관별 맞춤형 교육 - 당 교육기관에서.
공개SW 기반 멀티미디어 학습 유 승 욱.
CSS Web Page Construction
HTML5 웹 프로그래밍 입문 (개정판) 3장. 링크와 멀티미디어.
웹 페이지.
HTML5 웹 프로그래밍 입문 (개정판) 1장. 인터넷과 웹환경의 발전.
06장. <A> 태그로 하이퍼링크 설정하기
CHAPTER 4. CSS 스타일시트 기초.
10장 동적 HTML (Dynamic HTML)
HTML5 웹 프로그래밍 입문 (개정판) 4장. CSS3 스타일시트 기초.
예방접종 정보 SITE.
자기소개서 작성법.
홈페이지 자동 구축 솔루션 K2 Web WIZARD 2.6 관리자 메뉴얼
컴포넌트 (Component)
15년 용접등급 평가(3차) 생 산 관 리 팀 DATE : 2015年 09月 24日.
HTML5 Overview 숙명여자대학교 임순범.
HTML GRAPHICS 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역
제12장 유연한 카메라 클래스 만들기 학기 컴퓨터게임(DirectX).
웹디자인 표준 정의서 통합정보시스템 구축 (1단계) KCDC-PRO-012 Version 1.0.
이 름: 정홍도 (과장) 팀 명: 개발사업팀 일 자:
P507 Series NETWORK RACK   SERVER RACK   MINI RACK  
㈜학술교육원 온라인논문투고시스템 투고자 메뉴얼.
HTML과 TAG 편집 ※ 01/ 태이블 태그 소스 (태이블 편집)
CSS – 개요 Cascading Style Sheets의 약자 “계단형 스타일시트”라고 한다.
HTML5 웹 프로그래밍 입문 (개정판) 5장. 고급 표현을 위한 CSS3 활용.
3장 컴퓨터 그래픽스 3.1 벡터 그래픽과 비트맵 이미지 3.2 벡터와 비트맵의 통합 3.3 레이어 3.4 파일 포맷
HTML5+CSS3 실무 테크닉 김은기 저.
~ 초콜릿 공작소 ~ 프로젝트 완료 조은아.
Active X 이름 : 김 수 종 학번 :
Project Proposal 그래픽스 및 웹 응용설계 2010년 6월 4일 백선재.
CHAPTER 13. HTML5 위치정보와 드래그앤 드롭.
반도체 신입 Operator 채용 안내 ㈜ 하이닉스반도체에서는 2011년도 신입 Operator 사원을 모집합니다.
엽기토끼 죽이기 팀명 : 청순가련.
보건교사.
제5장 생성자와 접근제어 객체 지향 기법을 이해한다. 클래스를 작성할 수 있다. 클래스에서 객체를 생성할 수 있다.
3D 프린팅 프로그래밍 06 – 에펠탑 만들기 강사: 김영준 목원대학교 겸임교수.
Processing.org 자바실험실 JavaLab.org 이동준.
Chapter07 CSS3 글꼴과 문자 HTML5 Programming.
12강_CSS 속성-III font-family , font-size 속성
PART 1 앱 인벤터 프로젝트 03 잡아라! 두더지. PART 1 앱 인벤터 프로젝트 03 잡아라! 두더지.
모두가 행복한 교육, 미래를 여는 창의인재 2015 개정교육과정 서울숭인초등학교 교사 이소정.
문서작성에 사용되는 기본태그 MARQUEE, A.
컴퓨터 그래픽 I 영화 홍보 사이트 분석 과목 : 컴퓨터 그래픽 I 담당교수 : 손애경 교수님 학과 : 정보처리과 1반(A1)
제1장 협상이란.
SEOUL NATIONAL UNIVERSITY OF SCIENCE & TECHNOLOGY
상업경제 2학년 3반 / 송경민 선생님.
3D Shapes 3개 핵심 Properties가 존재 1.Material 표면의 재질을 설정합니다.
AP 수량 산정 및 도면 2014 서강대학교 정보통신원.
Chapter02 HTML 자기소개서 작성하기
<사계>중 ‘봄’감상하기 음 악 6학년 3. 봄 (1/2) [제작의도] [활용방법] 초기회면 수업 내용 제시 화면
문서 작성에 사용되는 기본태그 HR, PRE, B, I, U, S.
조사 설계안 개인용 미디어의 고객만족도와 이용실태조사 조.
신경언어장애.
서울, 1964년 겨울 -김승옥.
서울, 1964년 겨울 -김승옥.
서울, 1964년 겨울 -김승옥.
국어지도 유아교육과 권수연 김아람 중등특수교육과 박수진 양한솔
졸업 프로젝트 제안서 K-Alt Editor 김지영 문지수 박서영.
OpenGL (3D Racing) PROJECT 2011 Dongseo Univ..
Spring, 2019 School of CSE Pusan National University
2016년 3정 5행 추진현황보고 (5월 실적) 생산관리팀.
JigsawⅡ 모형을 적용한 육색사고모자기법으로 풀어보는 허생전의 비밀
Presentation transcript:

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

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

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

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

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

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

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

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

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

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

기본 도형 그리기 도형 태그명 속성 사각형 <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 스 함 평 심

사각형 그리기 <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 스 함 평 심

원 그리기 <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 스 함 평 심

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

위치 이동 <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 스 함 평 심

회전하기 <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 스 함 평 심

확대하기 <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 스 함 평 심

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

함께 해 보기 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 스 함 평 심

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

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