본문 바로가기

IT 신간

[신간 안내] 엣지 애니메이트 CC 더[THE] 쉽게 배우기





엣지 애니메이트 CC 더쉽게배우기
안효정, 임민재 공저 ㅣ 408쪽 ㅣ 23,000원
2014년 6월 30일






소개

“인터렉티브한 웹 컨텐츠 제작을 위한 엣지 애니메이트 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의 풀이 과정을 담은 동영상 해설 파일을 담아 제공합니다.




주요 내용

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의 사용과 활용에 대해 학습합니다.

【 부록 】

- 부록 DVD : 각 Part별 예제 파일과 Self Test의 풀이 과정을 담은 동영상 해설 파일을 제공합니다.




저자 소개
 

저자 안효정

* 그린 아이티 강의

* 웹표준 & 접근성 Expert, Web Site UI&UX Expert

* (주)지아이티아카데미 Objective-C, JAVA, 아이폰앱, 아이폰게임 등 강의

* (주)지아이티아카데미 웹표준, Javascript, jQuery, HTML5 기업체 출강 교육

* 아이폰 게임 개발사 창업(PPstudio)

* 현재 애플 앱스토어에 3개의 게임 출시(미국앱스토어)

* 아이패드용 전자잡지프로젝트 기획/개발

* 아이패드용 멀티미디어북(3D동화책) 기획/개발

* 아이폰 게임 개발(프로그래밍 지원 - 인공지능/그래픽담당)

* 충무로 미술관용 전자 잡지 프로젝트기획/프로그래밍 지원

* 아이패드용 인터랙티브북 기획/프로그래밍(동화책)

* 아이폰/아이폰 게임 개발 인터넷 강의 자료 제작


저자 임민재

* 그린 아이티 강의

* 웹표준 & 접근성 Expert ,Web Site UI&UX Expert

* e-learning(이러닝) 시스템 프론트, 백엔드 페이지 기획/개발

* e-Shop(쇼핑몰) 시스템 프론트, 백엔드 페이지 기획/개발

Web Site 구축

* 인트라넷 프론트,백엔드 페이지 기획/개발

* 모바일론 시스템 프론트,백엔드 페이지 기획/개발

* Brand 및 Community Web Site 다수 구축

* COUZLE-IT - 연구개발팀 근무(하이브리드 모바일 웹앱 제작)

* 웹표준 홈페이지 - 모바일 웹앱 제작(프리랜서)

* 프로그래밍 언어(C/C++, Objective-C, 아이폰앱 개발 기

초/고급 강의, 하이브리드 모바일 웹앱) 출강

* 그래픽스 컴퓨터 학원 강의, 기업체 강의 등

* 웹표준, HTML5 기업체 강의 출강




목차

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 [Paste Actions]를 이용해 쉽게 액션 복사하기

LESSON 08. JSON 컨트롤하기

기초탄탄 JSON 파일 만들기

STEP 01 애니메이션 심벌 만들기

STEP 02 JSON 파일 사용하기

LESSON 09. ANIAMTE를 이용해 슬라이딩 윈도우 만들기

기초탄탄 Aniamte 알아보기

STEP 01 심벌들 조합해서 심벌 만들기

STEP 02 제어문을 이용해 메뉴에 마우스를 위에 올리면 메뉴판 나오게 만들기

STEP 03 메뉴판의 단추에 마우스를 위에 올리면 단추 애니메이션 실행하게 만들기

STEP 04 메뉴판의 단추를 클릭하면 메인 심벌이 움직이는 애니메이션 실행하게 만들기

● PART SUMMARY

● SELF TEST

PART 06 고급 멀티미이어 콘텐츠 만들기

LESSON 01. HTML Audio와 Video

기초탄탄 Audio 태그와 Video 태그 알아보기

STEP 01 Audio 태그 활용하기

STEP 02 Video 태그 활용하기

LESSON 02. Drag and Drop 기능이 들어간 애니메이션 만들기

기초탄탄 Drag and Drop 기능 알아보기

STEP 01 움직일 대상 애니메이션 만들기

STEP 02 드래그 했을 때 움직이기 전 위치 만들기

STEP 03 드래그 했을 때 타깃 영역 만들기

STEP 04 모바일에서도 터치 기능이 가능한 코드 작성하기

LESSON 03. Stege를 드래그해 애니메이션 조절하기

기초탄탄 Stege를 드래그하는 애니메이션

STEP 01 배경이 서서히 움직이는 애니메이션 만들기

STEP 02 Stege를 드래그 해 애니메이션 조절하기

LESSON 04. jQuery를 이용해 서서히 그림이 나타나는 배너 만들기

기초탄탄 jQuery로 슬라이딩 제어하기

STEP 01 메인 만들기

STEP 02 코드를 이용해 서서히 나타나는 슬라이딩 만들기

LESSON 05. 플립 애니메이션 만들기

기초탄탄 플립 애니메이션 살펴보기

STEP 01 플립 심벌 분석하기

STEP 02 플립 심벌 애니메이션 완성하기

STEP 03 심벌 콘텐츠 만들기

STEP 04 심벌 콘텐츠 만들어 html, css를 이용해 제목 타이틀 콘텐츠 수정하기

LESSON 06. 심벌과 jQuery를 이용해 엣지 애니메이트 정리하기

기초탄탄 Animate 분석하기

STEP 01 심벌 만들고 애니메이션 효과주기

STEP 02 심벌을 가져와 사용하기

● PART SUMMARY

● SELF TEST

PART 07 반응형 웹 만들기

LESSON 01. 창 크기에 따라 배치가 바뀌는 반응형 콘텐츠 만들기

기초탄탄 가로 크기에 따라 변하는 반응형 콘텐츠 만들기

STEP 01 창의 가로 크기에 따라 변하는 반응형 콘텐츠 만들기

STEP 02 Publishh Settings를 실행해 웹에 게시할 파일 출력하기

LESSON 02. Reflow 이해하기

기초탄탄 Edge Reflow 이해하기

STEP 01 Reflow시작하기

STEP 02 반응형 레이아웃 잡기(PC 버전 : 3단)

STEP 03 반응형 레이아웃 잡기(태블릿 버전 : 2단)

STEP 04 반응형 레이아웃 잡기(모바일 버전 : 1단)

LESSON 03. Edge Code를 이용해 엣지 애니메이트를 Reflow에 적용시켜보기

기초탄탄 Edge Code 이해하기

STEP 01 엣지 애니메이트를 Edge Code에 적용시켜보기

LESSON 04 l Edge Inspect를 활용하여 모바일기기에 연동하기

기초탄탄 Edge Inspect 이해하기

STEP 01 Edge Inspect 설치하고 사용하기

● PART SUMMARY

● SELF TEST

PART 08 Adobe Muse를 이용한 웹사이트 제작하기

LESSON 01. 코드 작성없이 최신 웹 표준을 준수하는 웹사이트 제작하기

기초탄탄 Adobe Muse 알아보기

STEP 01 Muse 시작하기

STEP 02 마스터 페이지 지정하기

STEP 03 손쉽게 위젯 추가하기

STEP 04 세부 페이지 꾸미기

STEP 05 태블릿 버전 만들기

LESSON 02. 엣지 애니메이트를 Muse에 적용시키고 FTP 서버에

업로드하고 관리하기

기초탄탄 Adobe Muse 카탈리스트 호스팅 서버에 올리기

STEP 01 엣지 애니메이트에서 Publishh Settings를 실행해 Muse에 게시할 파일 출력하기

STEP 02 엣지 애니메이트를 Muse에 적용시키기

STEP 03 Adobe 서버 이외의 다른 호스팅 제공 업체를 통해 사이트를 게시하는 방법

STEP 04 Adobe Muse 카탈리스트 호스팅 서버를 통해 사이트를 게시하는 방법

● PART SUMMARY

● SELF TEST



한 눈에 보는 페이지



반응형

'IT 신간' 카테고리의 다른 글

미친 SCM이 성공한다  (0) 2014.07.24
속전속결 파워포인트 2013  (0) 2014.06.30
[신간 안내] 한글 2014 더 쉽게 배우기  (0) 2014.06.05