• 컴퓨터/IT > 컴퓨터그래픽 > 그래픽일반/자료집

• [시리즈] 영진닷컴 더 쉽게 배우기 시리즈 [19]

출판사 리뷰

출판사 서평 * 개요 및 내용 “인터렉티브한 웹 컨텐츠 제작을 위한 엣지 애니메이트 CC 활용 가이드!” 엣지 애니메이트 CC 더 쉽게 배우기 엣지 애니메이트는 웹상에서 구현되는 다양한 모션 그래픽과 애니메이션을 제작하는 툴입니다. 인터랙션 콘텐츠를 제작하기 위해서는 HTML5, CSS3, JavaScript를 잘 다룰 수 있는 전문적인 지식이 필요 하지만, 엣지 애니메이트는 이 3가지 기술과 jQuery를 잘 다루지 못해 도 다양한 애니메이션을 구현할 수 있습니다. 이 책에서는 이러한 엣지 애니메이트 CC의 핵심 기능들을 초보자들도... * 개요 및 내용 “인터렉티브한 웹 컨텐츠 제작을 위한 엣지 애니메이트 CC 활용 가이드!” 엣지 애니메이트 CC 더 쉽게 배우기 엣지 애니메이트는 웹상에서 구현되는 다양한 모션 그래픽과 애니메이션을 제작하는 툴입니다. 인터랙션 콘텐츠를 제작하기 위해서는 HTML5, CSS3, JavaScript를 잘 다룰 수 있는 전문적인 지식이 필요 하지만, 엣지 애니메이트는 이 3가지 기술과 jQuery를 잘 다루지 못해 도 다양한 애니메이션을 구현할 수 있습니다. 이 책에서는 이러한 엣지 애니메이트 CC의 핵심 기능들을 초보자들도 쉽게 익힐 수 있도록 구성되어 있습니다. 또한 다양한 실습을 통해 웹뿐만 아니라 모바일 분야에 서도 다양한 인터랙션 제작할 수 있습니다. 『엣지 애니메이트 CC 더 쉽게 배우기』는 입문자들의 눈높이에 알맞은 설명과 자세한 따라하기로 구성하였습니다. 엣지 애니메이트 CC의 핵심 기능을 8개의 PART로 나눠 설명하고, 각각의 PART는 몇 개의 Lesson으로 이루어집니다. Lesson의 학습에 앞서 ‘기초 탄탄’에서는 메뉴나 대화상자 등 엣지 애니메이트 CC의 주요 기능들을 미리 알아보고, ‘Step’은 따라하기 형식으로 구성하여 엣지 애니메이트 CC의 기능을 쉽게 익힐 수 있도록 하였습니다. ‘Tip’, ‘연관 검색’, ‘문제 해결’과 같은 요소들은 엣지 애니메이트 CC를 더욱 유기적으로 학습할 수 있도록 도와줄 것입니다. 그리고 ‘PART SUMMARY’와 ‘Self Test’에서는 각 PART에서 배운 내용을 되짚어보고 동영상 해설 파일을 통해 눈과 귀가 즐거워지는 학습이 될 수 있도록 꾸몄습니다. 이 책의 부록 DVD에는 각 Part별 예제 파일과 Self Test의 풀이 과정을 담은 동영상 해설 파일을 담아 제공합니다. [부록 DVD] 이 책의 부록 DVD에는 각 Part별 예제 파일과 Self Test의 풀이 과정을 담은 동영상 해설 파일이 담겨 있습니다. * 주요 내용 PART 01 엣지 애니메이트 CC 기본기 다지기 엣지 애니메이트를 이용해 HTML5 인터랙션을 자유자재로 구현할 수 있습니다. 시작하기에 앞서 엣지 애니메이트의 등장 배경 및 특징, 구성 요소와 화면 구성, 환경설정 등 엣지 애니메이트에 대해 파악하는 기초 다지기 시간을 가져보겠습니다. 웹뿐만 아니라 모바일 분야에서 다양한 인터랙션을 구현할 수 있는 매력적인 엣지 애니메이트의 세계로 들어가 보겠습니다. PART 02 애니메이션 기본기 다지기 엣지 애니메이트를 배우는 가장 기본 목적인 애니메이션 제작입니다. 원리는 간단하지만 매력적이고 멋진 애니메이션을 만들기 위해서는 많은 노력이 필요합니다. 애니메이션의 패턴, [Timeline] 패널, Transition, Keyframe, Toggle Pin, Easing에 대해 알아봅니다. PART 03 엣지 애니메이트로 자유롭게 드로잉하기 애니메이션을 제작할 때는 ‘무엇을(What)/언제(When)/어떻게(How)’ 이 3가지를 기억하면 편하게 작업할 수 있습니다. 이 파트는 무엇을(What)에 해당하는 오브젝트를 제작하는 방법을 배웁니다. 엣지 애니메이트는 도구상자와 [Properties] 패널을 중심으로 엣지 애니메이트의 기초인 각 도구의 역할과 기능을 예제를 통해 익히고 [Properties] 패널을 통해 오브젝트의 속성을 설정하는 방법을 배웁니다. PART 04 액션과 심벌 기본기 다지기 앞에서 만든 소스를 다른 Stage에서도 사용하려면 심벌을 이용해 사용할 수 있습니다. 심벌을 이용하면 용량의 변화없이 사용할 수 있고 상황에 맞게 수정해 사용하면 멋진 애니메이션을 만들 수 있습니다. 이번 파트에서는 심벌의 활용과 심벌을 제어할 수 있는 액션을 배워보겠습니다. PART 05 액션과 심벌 활용하기 소스 파일을 심벌로 지정해 다른 스테이션에서도 유용하게 활용할 수 있습니다. 심벌을 만들었다면 제어해야 하는데 복잡한 동작의 애니메이션은 JavaScript 및 jQuery를 활용해 제어할 수 있습니다. 이번 파트에서는 좀 더 유용하게 심벌을 활용하고 JavaScript를 사용하는 방법에 대해 배웁니다. PART 06 고급 멀티미디어 콘텐츠 만들기 플러그인이 필요 없는 Audio, Video 태그를 이용해 콘텐츠에 오디오와 비디오 콘텐츠를 만들 수 있습니다. 각종 효과음부터 배경음악을 삽입하여 애니메이션에 활력을 불어 넣을 수 있습니다. 사운드 및 동영상을 사용하면 애니메이션만으로만 표현하기 어려웠던 내용을 좀 더 정확한 내용 전달할 수 있습니다. 이 파트에서는 사운드와 동영상을 삽입하고 활용하는 방법에 대해 학습합니다. PART 07 반응형 웹 만들기 데스크탑, 태블릿 PC, 모바일 폰 등 다양한 크기의 디바이스 환경에 맞추어 레이아웃을 최적화하여 구성하는 콘텐츠를 만들 수 있습니다. 콘텐츠가 디바이스 환경에 맞추어 유기적으로 변하기 때문에 사용자들이 보다 편안한 환경에서 웹을 이용할 수 있습니다. 이 파트에서는 반응형 웹 콘텐츠 만드는 방법에 대해 학습합니다. PART 08 사운드 및 동영상 활용하기 웹사이트를 제작하는 프로그램들의 어려움 점은 눈으로 보이지 않는 코드를 작성하거나, 웹 표준 방식을 지키지 않아 호환성이 떨어지는 문제점을 내포하고 있는데 그에 반해 Adobe Muse는 최신의 웹 표준 방식을 지키면서 개인 PC 및 모바일 디바이스용 웹사이트를 쉽고 간단하게 제작할 수 있습니다. Adobe Muse의 가장 편리한 점은 직접 눈으로 확인하며 레이아웃 작업이 가능하고, 마우스를 이용하여 객체를 끌어당기는 방식을 채택하고 있어 객체의 움직임에도 자유로움을 더하고 있다는 장점이 있습니다. 이 파트에서는 이러한 장점을 가진 Adobe Muse의 사용과 활용에 대해 학습합니다.

목차
PART 01 엣지 애니메이트 기본기 다지기
LESSON 01. 엣지 애니메이트란?
기초탄탄 엣지 애니메이트의 등장 배경과 특징 알아보기
STEP 01 엣지 애니메이트 설치하기
STEP 02 엣지 Tools & Services
LESSON 02. 엣지 애니메이트 둘러보기
기초탄탄 엣지 애니메이트 인터페이스 살펴보기
STEP 01 새로운 Stage 시작하기 : New
STEP 02 엣지 작업 파일 저장하고 구성 파일 살펴보기 : Save As
STEP 03 엣지 파일 열기 : Open
STEP 04 외부파일 가져오기 : Import 37
LESSON 03. 엣지 애니메이트 작업 환경 설정하기
기초탄탄 Stage 영역과 Workspace 영역 구분하기
STEP 01 보이기 위한 작업 공간 조절하기
STEP 02 작업 공간이 이상해졌다면 [Reset “Default”]로 해결하기
● PART SUMMARY
● SELF TEST
PART 02 애니메이션 기본기 다지기
LESSON 01. 엣지 애니메이트 제작 기법 살펴보기
기초탄탄 엣지 애니메이트 제작 기법 알아보기
STEP 01 애니메이션 패턴 익히기
STEP 02 애니메이션 확인해보기
LESSON 02. [Timeline] 패널 이해하기
기초탄탄 [Timeline] 패널 살펴보기
STEP 01 오토 키프레임 사용하기 : Auto-Keyframe Mode
STEP 02 오토 트랜지션 사용하기 : Auto-Transition Mode
STEP 03 키프레임과 트랜지션 이해하기
STEP 04 트랜지션 활용하기
LESSON 03. 토글 핀 활용하기 : Toogle Pin
기초탄탄 토글 핀 살펴보기
STEP 01 토글 핀 활용하기
STEP 02 움직이기 전과 후 지정하기
LESSON 04. 가속과 감속 알아보기 : Easing
기초탄탄 Easing 살펴보기
STEP 01 Easing 이해하기
STEP 02 Easing Options 활용하기
● PART SUMMARY
● SELF TEST
PART 03 엣지 애니메이트로 자유롭게 드로잉하기
LESSON 01. 오브젝트 자유롭게 드로잉하기
기초탄탄 도구상자와 [Properties] 패널 이해하기
STEP 01 [Corners]를 이용해 철봉 배경 만들기
STEP 02 [Color]와 [shadow]을 이용해 새 body 만들기
STEP 03 [Color]-[border]을 이용해 새부리와 눈 만들기
STEP 04 [Transform]을 이용해 새 날개와 꼬리 만들기
STEP 05 [텍스트 툴]을 이용해서 ‘Red bird, my friends’ 글씨 쓰기
LESSON 02. 오브젝트를 그룹으로 관리하고 회전 및 변형하기
기초탄탄 [Transform] 패널 알아보기
STEP 01 오브젝트를 그룹화하고 [Origin]을 이용해 회전축 이동시키기
STEP 02 변형 툴을 사용해 반대 방향으로 회전시키기
STEP 03 모션 패스를 이용해 곡선 움직임 만들기
LESSON 03. 오브젝트 정렬하고 배치하기
기초탄탄 [Modify] 메뉴 알아보기
STEP 01 [Arrange]로 오브젝트 순서 변경하기
STEP 02 [Distribute]를 이용해 오브젝트 배치하기
STEP 03 [Align]를 이용해 오브젝트 정렬하기
LESSON 04. 외부 이미지 소스 사용하기
기초탄탄 외부 소스 사용
STEP 01 일러스트레이터로 SVG 애니메이션 만들기
STEP 02 구글 웹 폰트 사용하기
● PART SUMMARY
● SELF TEST
PART 04 액션과 심벌 기본기 다지기
LESSON 01. 액션 추가하기
기초탄탄 트리거 액션 이해하기
STEP 01 트리거 액션 추가하기
STEP 02 오브젝트에 액션 추가하기
LESSON 02. 심벌만들기
기초탄탄 [Library] 패널과 심벌 플레이백 알아보기
STEP 01 심벌 만들어 재활용하기
STEP 02 심벌 편집해 원하는 애니메이션으로 만들기
STEP 03 심벌을 복제하여 색상이 다른 새 만들기
STEP 04 심벌 내보내고 가져오기 : Export/Import Symbo
STEP 05 Playback을 이용해 심벌 재생 제어하기
LESSON 03. Clipping 기능
기초탄탄 Clipping 기능 알아보기
STEP 01 [Always] 속성을 이용해 Clipping을 위한 레이어 구성하기
STEP 02 Clipping을 적용해 세련된 애니메이션 만들기
LESSON 04. Sprite Sheet 애니메이션
기초탄탄 Snapping과 Grid를 이용해 정확하게 시간 설정하기
STEP 01 Clipping 속성을 이용해 한 개의 그래픽이 보이게 지정하기
STEP 02 Show Grid를 이용해 세밀한 심벌 애니메이션 만들기
STEP 03 심벌 무한 반복 만들기
LESSON 05. Label과 Capture 기능을 이용해 Zoom In 기능 만들기
기초탄탄 Capture를 원하는 애니메이션 캡처하기
STEP 01 원하는 애니메이션 장면 Capture하기
STEP 02 Zoom In 애니메이션 만들기
STEP 03 액션을 추가해 Zoom In 애니메이션 완성하기
● PART SUMMARY
● SELF TEST
PART 05 액션과 심벌 활용하기
LESSON 01.심벌 컨트롤하기
기초탄탄 Stege 액션과 심벌 제어 알아보기
STEP 01 compositionReady 액션과 getSymbol()을 이용해 Stege 요소에 있는 symbol 컨트롤하기
STEP 02 $를 이용해 심벌 안에 있는 엘리먼트 컨트롤하기
STEP 03 심벌을 엘리먼트처럼 컨트롤하기
STEP 04 심벌에서 심벌 컨트롤하기
LESSON 02. Duplicate를 이용해 특징이 다른 심벌을 만들어 컨트롤하기
기초탄탄 Duplicate의 이해와 활용
STEP 01 Duplicate한 심벌을 [Image]를 이용해 쉽게 이미지 교체하기
STEP 02 jQuery의 html() 사용해 콘텐츠 삽입하기
LESSON 03. Overflow 속성 사용하기
기초탄탄 Overflow 알아보기
STEP 01 심벌을 만들어 편집하기
STEP 02 마우스를 올릴 박스 만들어 play, playReverse 메서드 사용하기
STEP 03 Overflow를 이용해 넘치는 부분 안보이게 만들기
STEP 04 Html을 이용하여 콘텐츠 내용 바꾸기
LESSON 04. Dropdown 메뉴 만들기
기초탄탄 Dropdown 알아보기
STEP 01 Dropdown 화면 꾸미기
STEP 02 Dropdown 애니메이션 만들기
STEP 03 Main에 마우스를 위에 올리면 Sub 메뉴가 나오게 액션 지정하기
STEP 04 compositionReady와 Html을 이용해 Sub 메뉴 내용 바꾸기
LESSON 05. fade In 기능을 가진 [tab] 패널 만들기
기초탄탄 [tab] 패널 알아보기
STEP 01 그림이 겹쳐서 서서히 나타나는 내용 패널 애니메이션 만들기
STEP 02 레이블을 이용해 애니메이션 구간을 정확하고 세밀하고 지정하기
STEP 03 Clipping과 play, playReverse 메서드를 이용해 메뉴판 만들기
STEP 04 메뉴판에서 메인 메뉴 제어하기
STEP 05 function을 이용해 코드 줄이기
STEP 06 click하면 사이트로 링크걸기
LESSON 06. 제어문(IF)과 타임라인 컨트롤 메서드를 이용해 슬라이딩 윈도우 만들기
기초탄탄 타임라인과 관련된 메서드와 IF 제어문 알아보기
STEP 01 메인 메뉴 애니메이션 만들기
STEP 02 초기화시키기
STEP 03 이전 버튼, 다음 버튼
STEP 04 getPosition을 이용해 재생 위치를 알아내 메인그림이 롤링되게 만들기
LESSON 07. [Paste Special]을 이용해 쉽고 빠르게 감각적인 애니메이션 만들기
기초탄탄 심벌이 유지되는 상태 만들기
STEP 01 getSymbol을 이용하여 심벌 안에 심벌 제어하기
STEP 02 [Past