추가 적립 안내

[Adobe Edge Animate Classroom in a Book]은 HTML5와 CSS3, 자바스크립트를 이용해 모션 그래픽과 인터랙티브 컨텐츠를 만드는 웹 저작 도구인 엣지 애니메이트를 쉽고, 포괄적으로 학습할 수 있는 책이다. 이 책에서는 어도비 엣지 애니메이트를 최대한 활용할 수 있게 해주는 팁과 테크닉 등 여러 고급 기법들도 다룬다.

어도비 엣지 애니메이트(Adobe Edge Animate)는 HTML5와 CSS3, 자바스크립트를 이용해 모션 그래픽과 인터랙티브 컨텐츠를 만드는 웹 저작 도구로 직관적인 인터페이스와 도구상자를 제공해 디자이너와 애니메이터도 빠르고 쉽게 컨텐츠 제작이 가능하다. 어도비 시스템즈의 공식 교육 교재로서 어도비 제품 전문가의 지원을 받아 만들어진 이 책으로 엣지 애니메이트를 가장 쉽고, 빠르고, 포괄적으로 배울 수 있다.

★ 이 책에서 다루는 내용 ★

이 책은 어도비 제품 전문가를 지원하기 위해 개발된 어도비의 그래픽과 퍼블리싱 소프트웨어를 위한 공식 트레이닝 시리즈 중 하나다. 레슨은 독자 자신의 속도에 맞춰 진행할 수 있게 설계되었다. 이 프로그램을 사용하는 데 필요한 기본적인 개념과 기능에 대해 배우게 될 것이다.
이 책에서는 어도비 엣지 애니메이트를 최대한 활용할 수 있게 해주는 팁과 테크닉 등 여러 고급 기법들도 다룬다.

# 어도비 엣지 애니메이트를 써야 하는 이유 #
어도비 엣지 애니메이트는 인터랙티비티와 애니메이션이 적용된 웹 컨텐츠 개발 혁명의 다음 단계를 보여준다. HTML5 규격의 채택이 늘어남에 따라 최신 브라우저에서는 플래시 플레이어 같은 플러그인 없이도 풍부한 미디어를 표현할 수 있게 되었다. 어도비 엣지 애니메이트를 CSS3, 자바스크립트와 함께 쓰면 애니메이션과 복잡한 인터랙티비티를 통합해서 놀라운 시각적 효과와 사용자 경험을 제공할 수 있게 된다.
HTML5와 CSS3, 자바스크립트는 인기에 힘입어 급속히 성장했지만 불행히도 이를 다룰 수 있는 크리에이티브 전문가를 위한 도구는 출현하지 않았다. 일반적으로 모션 그래픽과 인터랙티브 컨텐츠는 코딩을 통해 만들어지는데, 이런 방식은 시간과 노력이 많이 들고 그래픽 유저 인터페이스에 익숙한 디자이너와 애니메이터에게는 더욱 어렵다. 어도비 엣지 애니메이트는 직관적인 인터페이스와 친숙한 도구상자를 제공해 디자이너와 애니메이터의 모션 그래픽과 인터랙티브 컨텐츠 제작을 가능하게 해준다. 어도비 엣지 애니메이트를 이용하면 툴로 모양을 만들고, 옵션으로 스타일링, 변형, 정밀한 레이아웃, 타이포그래피 등을 설정하고, 키프레임을 조정해서 타임라인으로 모션 그래픽을 생성할 수 있다. 코딩에 소요되는 시간을 줄이고 디자이너와 애니메이터의 전문 분야인 디자인과 애니메이팅에 좀 더 많은 에너지를 쓸 수 있다.

★ 이 책의 구성 ★

1장, 시작: 엣지 애니메이트 작업 영역에 대해 알아보고, 관련 용어나 작업 방식과도 좀 더 친해져 본다.

2장, 그래픽스 생성과 아트웍 가져오기: 엣지 애니메이트 컴퍼지션에 놀라운 시각적 효과를 구현하는 다양한 방법에 대해 탐구해본다.

3장, 애니메이션 제작: 효과적이고 멋진 애니메이션 광고를 만들기 위해 모션(motion)과 트랜지션(transition)을 추가하는 다양한 방법에 대해 배운다.

4장, 애니메이션 개선과 복잡성 추가: 애니메이션에 대해 더 깊이 알아보면서 심볼을 만들어 종속된 애니메이션을 만들고 시각적 효과를 위해 클리핑을 사용하는 상급 기술에 대해 배운다.

5장, 기본적인 인터랙티비티 추가: 비선형 내비게이션, 즉 처음부터 끝까지 연속으로 재생할 필요 없이 중간에 멈출 수 있는 애니메이션을 생성하는 법을 배운다.

6장, 미디어와 고급 인터랙티비티 추가: 엣지 애니메이트 자바스크립트 코드를 더 깊이 연구하고 좀 더 정교한 미디어와 고급 인터랙티비티를 추가해본다.

7장, 퍼블리싱과 반응형 디자인: 엣지 애니메이트 컴퍼지션을 다양한 포맷으로 퍼블리싱하거나 기존 웹사이트에 쉽고 완벽하게 통합하는 방법을 배운다.

★ 부록 CD 수록 ★

이 책의 부록CD에는 이 책에 담긴 예제를 학습하는 데 필요한 레슨 파일이 포함되어 있다. 또한 어도비 엣지 애니메이트(Adobe Edge Animate)를 학습하고, 좀 더 손쉽고 효율적으로 사용할 수 있게 도와주는 여러 내용들도 담겨 있다. 레슨 파일은 Lessons 폴더 내에 단원별로 들어가 있다. 각 레슨을 시작하기에 앞서 레슨 폴더를 본인의 하드 드라이브에 복사하자. 모든 레슨 파일에는 IE11을 지원하는 호환성 업데이트가 반영되어 있다.

★ 저자의 말 ★

어도비 엣지 애니메이트(Adobe Edge Animate)는 웹을 위한 애니메이션과 인터랙티비티, 리치 미디어 콘텐츠를 만들 수 있는 종합 제작 환경을 제공해주는 새로운 도구다. HTML5, CSS3, 자바스크립트를 이용하는 공개된 최신 브라우저 표준을 기반으로 엣지 애니메이트를 이용하면 데스크탑, 스마트폰, 태블릿 등의 플랫폼에 제한 없이 제작할 수 있다. 플래시 플레이어, 실버라이트, 퀵타임 등의 애플리케이션을 다운로드해 설치해 필요가 사라진다.
엣지 애니메이트를 이용해서 애니메이션 배너 광고, 역동적인 웹사이트를 비롯해 자바스크립트의 모든 능력을 총동원한 인터랙티브한 게임까지도 만들어보자.
전문적인 베테랑 플래시 사용자와 애니메이터에게 타임라인, 스테이지, 라이브러리 패널 등의 인터페이스는 친숙하고 편하게 느껴질 것이다. 이들은 속성을 기반으로 키프레이밍과 이징, 중첩된 애니메이션 등을 이용해 이미지를 그리고, 텍스트와 간단한 모양 같은 HTML 요소에 모션을 추가할 것이다. 내장된 코드 스니펫이나 자바스크립트를 이용하면 어떤 경력을 가진 코더라도 인터랙티비티를 추가할 수 있다. 개발에 대한 정교하고 직관력이 있는 제어와 플랫폼 독립적인 컨텐츠 제작을 가능케 할 어도비 엣지 애니메이트는 당신의 창조 범위를 확장시켜 줄 것이다.

★ 옮긴이의 말 ★

요즘의 웹 콘텐츠는 다양한 디바이스와 브라우저에 대한 대응을 요구 받습니다. 데스크탑은 물론 스마트폰과 태블릿 등의 다양한 모바일 환경과 사파리, 크롬, 인터넷 익스플로러 등 여러 브라우저에서 호환되도록 콘텐츠를 디자인하고 개발합니다.

이런 요구사항에 부응하기 위해 어도비는 HTML5, CSS3, 자바스크립트 등의 최신 웹 표준기술을 기반으로 인터랙티브한 콘텐츠를 만들 수 있는 엣지 애니메이트를 개발했습니다. 어도비 엣지 애니메이트는 차세대 브라우저에서 표준을 준수하며 데스크톱과 모바일에서 모두 구동되는 애니메이션과 컨텐츠를 구현할 수 있는 저작 도구입니다. 또한 플래시나 애프터 이펙트와 같은 타임라인 기반의 애니메이션 제작 인터페이스를 제공해서 전문적인 지식이 없어도 관련 분야의 지식이 있다면 엣지 애니메이트와 손쉽게 친해질 수 있습니다.
Classroom in a Book? 시리즈는 어도비 소프트웨어의 기능을 빠르고 쉽게 학습할 수 있도록 제작된 어도비 시스템의 공식 교육 교재입니다. Classroom in a Book? 시리즈 중 하나인 이 책은 어도비 엣지 애니메이트를 다루는 교과서적인 책으로 엣지 애니메이트에 대한 다양한 기능과 팁, 고급 기법 등을 모두 7개 장에 걸쳐 친절하고 체계적으로 설명합니다.

이 책에서는 엣지 애니메이트를 사용하기 위한 기본 개념과 기능에 대해 소개하면서 모션 그래픽과 컨텐츠에 인터랙티비티를 추가하는 방법에 대해 다룹니다. 각 장의 예제는 기초에서부터 좀 더 복잡하고 심화된 고급 과정까지 단계별로 진행되며, 마지막으로 반응형 웹과 온라인 퍼블리싱에 대해 알아봅니다.

특히 이 책에 있는 예제들은 어도비사의 공식 교육 교재로서 어도비 제품 전문가에 의해 만들어졌습니다. 학습만을 위한 것이 아닌 실무에도 적용 가능한 훌륭한 예제를 바탕으로 전개하고 있으므로, 기능 습득과 동시에 실무에서의 감각, 어도비 엣지 애니메이트를 이용한 애니메이션 실무의 입문으로 그 역할을 톡톡히 해주는 좋은 책입니다.
임보은

1장. 시작
1.1 엣지 애니메이트 시작
1.2 작업 영역
1.3 요소로 작업
1.4 Elements 패널과 Timeline 패널
1.5 모션 추가
1.6 모션 미리보기
1.7 모션 지속과 수정
1.8 다음에 배울 내용

2장. 그래픽스 생성과 아트웍 가져오기
2.1 이 장에서 배울 내용
2.2 그래픽 포맷
2.3 비트맵으로 작업
2.4 벡터 그래픽으로 작업
2.5 HTML 요소 생성
2.6 사각형 수정
2.7 눈금자와 안내선으로 작업
2.8 문자 입력
2.9 사용자 정의 폰트 가져오기
2.10 요소 정리
2.11 요소 조직화
2.12 특수 효과 추가
2.13 회전

3장. 애니메이션 제작
3.1 시작
3.2 애니메이션
3.3 프로젝트 파일 이해
3.4 핀으로 애니메이션 위치 지정
3.5 속도와 타이밍 변경
3.6 Display 속성 켜기와 끄기
3.7 비율 변화 애니메이션
3.8 페이드 효과 생성
3.9 Timeline 패널 옵션
3.10 애니메이션 복사하기와 붙여넣기
3.11 이징 추가로 모션 개선
3.12 전체 타이밍 편집

4장. 애니메이션 개선과 복잡성 추가
4.1 시작
4.2 심볼
4.3 종속된 애니메이션 제작
4.4 스테이지에서 심볼에 애니메이션 적용
4.5 루핑 애니메이션 제작
4.6 심볼 인스턴스
4.7 Playback 명령
4.8 심볼 편집
4.9 캐릭터 추가
4.10 클리핑 애니메이션
4.11 그림자를 이용한 애니메이션
4.12 고급 이즈로 작업

5장. 기본적인 인터랙티비티 추가
5.1 시작
5.2 인터랙티브 컴퍼지션
5.3 자바스크립트
5.4 타임라인 트리거
5.5 신택스
5.6 이벤트와 액션
5.7 버튼 제작
5.8 Code 패널 탐색
5.9 레이블 제작
5.10 시각적 피드백 추가
5.11 마우스 커서 커스터마이징
5.12 애니메이션이 적용된 요소 조정

6장. 미디어와 고급 인터랙티비티 추가
6.1 시작
6.2 미디어 삽입
6.3 삽입된 미디어 보여주기
6.4 미디어 제거
6.5 하이퍼링크 추가
6.6 HTML 콘텐츠 추가
6.7 키보드 이벤트
6.8 조건문
6.9 변수
6.10 인터랙티브 슬라이드쇼 코딩
6.11 최종 편집

7장. 퍼블리싱과 반응형 디자인
7.1 시작
7.2 컴퍼지션 퍼블리싱
7.3 다운 레벨 스테이지
7.4 프리로더
7.5 HTML에 컴퍼지션 삽입
7.6 반응형 디자인
7.7 엣지 애니메이트 리소스