에지 애니메이트 CC 무작정따라하기(CD1장포함)

웹 표준에 맞는 다양한 콘텐츠를 만들 수 있다

이 책에서 설명하는 방법으로 콘텐츠를 만들면 HTML5와 CSS3가 사용되어 다양한 기기와 운영체제에 적용할 수 있습니다. 복합적 애니메이션, HTML 게임, 웹 사이트, 디지털 출판, 모바일 애플리케이션, 웹 광고, 데이터 시각화 등 다양한 분야의 콘텐츠를 만들 수 있으며, 웹 표준에 맞게 만들어지기 때문에 유지하고 관리하기가 쉽습니다.

또한 에지 애니메이트 콘텐츠를 드림위버, 어도비 뮤즈, 아이북스 오서, 인디자인 등 다양한 프로그램과 자유롭게 연동하여 사용할 수 있고, 폰갭을 활용하여 웹 앱 콘텐츠를 네이티브 앱으로 간단하게 변경할 수 있습니다.



에지 애니메이터를 누가 사용하나요?

- 최신 웹 표준 기술에 신속하게 대처하려는 웹 디자이너 및 개발자

- 기존 기술을 활용하여 작업물을 게시하려는 플래시 콘텐츠 디자이너 및 개발자

- 모바일 콘텐츠를 위해 애프터 이펙트를 대체할 도구를 찾는 모션그래픽 디자이너

- 인디자인, 아이북스 오서, 드림위버 작업물에 움직이는 콘텐츠를 넣으려는 전자책 제작자

- 다양한 운영체제와 기기에서 완벽하게 콘텐츠를 제공하려는 모바일 애플리케이션 디자이너 및 개발자

- 에지 애니메이트 1.5와 CC(2.0)의 두 가지 버전별로 실습이 되는지 테스트한 후 버전을 표기하여, 혹시 다른 버전을 사용하더라도 막힘없이 학습할 수 있습니다.



출판사 서평

쉽고 직관적으로 초급 기능부터 고급 기능까지 배울 수 있다

누구나 따라할 수 있도록 친절하고 자세한 설명으로 구성되어 있으며, 뒤로 갈수록 고급 기능을 소개하여 실무에 바로 응용할 수 있도록 돕습니다. 처음 배우는 분도, 이전 버전을 사용한 분도 이 책을 통해 유익한 학습을 할 수 있도록 학습 계획을 제안합니다.



다양한 기기에 맞는 반응형 웹 디자인을 할 수 있다

창 크기에 따라 변하는 반응형 콘텐츠를 만드는 간단한 방법을 알려 줍니다. 이제 어떤 프로그램보다 쉽게, 다양한 크기에 자동으로 맞춰지는 디자인을 할 수 있습니다.



간단한 자바스크립트 API로 애니메이션에 감각을 더할 수 있다

에지 애니메이트에서 사용할 수 있는 자바스크립트 API를 기본부터 자세히 설명합니다. 프로그래밍에 대한 전문 지식이 없어도, 책에서 소개하는 예제를 통해 에지 애니메이트 자바스크립트 API를 확실히 자신의 것으로 할 수 있기 때문에 더욱 풍부한 느낌을 가진 애니메이션을 만들 수 있습니다.



이 책만의 고급 활용 및 연동 노하우를 익힐 수 있다

에지 애니메이트 카페를 운영하며 쌓아온 저자의 노하우를 통해, 확장 라이브러리인 Edgedocks를 사용하는 방법, 어도비에서 제공하는 온라인 필터인 CSS Filterlab을 사용하는 방법, 자바스크립트 구문 형식을 따르는 JSON 파일을 사용해 심볼을 표시하는 방법, 만든 콘텐츠를 기기나 웹에서 미리 보는 방법, 태그를 함께 사용하는 방법 등 다른 책에서는 찾아 볼 수 없었던 고급 활용 방법을 소개합니다.

이 책을 학습하면 에지 애니메이트 콘텐츠를 드림위버, 어도비 뮤즈, 아이북스 오서, 인디자인 등 다양한 프로그램과 자유롭게 연동하여 사용할 수 있고, 폰갭을 활용하여 웹 앱 콘텐츠를 네이티브 앱으로 간단하게 변경할 수 있습니다.

첫째 마당 새로운 웹 기술과 에지 애니메이트 기초 기능 알아보기

필수 기능 001 에지 애니메이트 등장 배경 알아보기 : 새로운 웹 콘텐츠 :

필수 기능 002 콘텐츠 제작 도구 변화 알아보기 : HTML5와 플래시 :

필수 기능 003 웹 기술과 활용 분야 살펴보기 : HTML5/CSS3/자바스크립트 :

필수 기능 004 에지 도구 알아보기 : Adobe Edge :

필수 기능 005 전체 화면 구성 살펴보기 : 시작 화면/작업 화면 :

기능 예제 006 새로운 프로젝트 만들기 : Create New :

기능 예제 007 나만의 작업 환경 만들기: Workspace :

기능 예제 008 프로젝트 불러오기 : Open :

필수 기능 009 파일 다루기 : File :

기능 예제 010 프로젝트 저장하기 : Save/Save As :

기능 예제 011 서식(템플릿)으로 저장하기 : Save As Template :

필수 기능 012 저장 파일 살펴보기 : 콘텐츠 파일 :

실력 알아보기 작업 환경과 서식 다루기



둘째 마당 에지 애니메이트 구성 익히기

필수 기능 013 패널과 도구 살펴보기 : 도구 :

기능 예제 014 엘리먼트 만들기 : 도구 :

필수 기능 015 작업 영역과 패널 표시 여부 설정하기 : Window :

필수 기능 016 보이기 위한 작업 공간 활용하기 : Stage 패널 :

필수 기능 017 속성 설정하기 : Properties 패널 :

기능 예제 018 아쿠아 버튼 만들기 : Properties 패널 :

필수 기능 019 엘리먼트와 심볼 관리하기 : Elements 패널 :

필수 기능 020 용량 변화 없이 소스 쓰기 : Library 패널 :

필수 기능 021 액션 관리 패널 살펴보기 : Code 패널 :

필수 기능 022 프로그램에서 학습법 익히기 : Lessons 패널 :

필수 기능 023 출력 형식 설정하고 출력하기 : Publish :

필수 기능 024 외부 파일 가져오기 : Import :

필수 기능 025 개체 편집하기 : Edit :

필수 기능 026 스테이지 다루기 : View :

필수 기능 027 Modify 메뉴 알아보기 : Modify :

필수 기능 028 타임라인 다루기 : Timeline :

기능 예제 029 키프레임 만들기 : Add Keyframe :

기능 예제 030 오토 키프레임 사용하기 : Auto-Keyframe Mode :

기능 예제 031 오토 트랜지션 사용하기 : Auto-Transition Mode :

기능 예제 032 토글 핀 활용하기 : Toogle Pin :

필수 기능 033 정보 얻고 사용 언어 바꾸기 : Help :

기능 예제 034 결과물 미리 보기 : 브라우저/Edge Inspect :

필수 기능 035 가속과 감속 알아보기 : Easing :

기능 예제 036 가속과 감속 살펴보기 : Easing :

기능 예제 037 곡선 움직임 만들기 : 모션 패스 :

실력 알아보기 엘리먼트와 토글 핀 활용하기



셋째 마당 에지 애니메이트 기초 애니메이션 익히기

필수 기능 038 심볼 이해하기 : Symbol :

기능 예제 039 심볼 전환하고 사용해 보기 : Symbol :

필수 기능 040 심볼 내보내고 가져오기 : Export/Import Symbol :

필수 기능 041 심볼 플레이백 사용하기 : Playback :

활용 예제 042 달리는 자동차 애니메이션 만들기

활용 예제 043 이미지와 배경 바꾸기

실력 알아보기 심볼 활용해 보고 플레이백 사용하기



넷째 마당 에지 애니메이트 액션 이해하기

기능 예제 044 구글 웹 폰트 사용하기 : Custom Web Fonts :

기능 예제 045 웹 폰트 사용하기 : Edge Web Fonts :

필수 기능 046 스테이지 액션 추가하기 : Stage Action :

필수 기능 047 엘리먼트 액션 추가하기 : Element Action :

필수 기능 048 타임라인 액션 추가하기 : Timeline Action :

필수 기능 049 액션 관리하기 : Code 패널 :

필수 기능 050 스니펫으로 액션 쉽게 추가하기 : Code Snippets :

필수 기능 051 트리거 액션 추가하기 : Trigger :

기능 예제 052 엘리먼트 액션으로 모션 재생 조절하기 : Element Action :

기능 예제 053 스테이지 액션으로 문구 바꾸기 : Stage Action :

필수 기능 054 에지 애니메이트 파일 구성 요소 및 구조 살펴보기 : Anatomy :

필수 기능 055 트리거, 이벤트, 액션 알아보기 : Triggers/Events/Actions :

필수 기능 056 작업과 심볼 알아보기 : Symbols :

기능 예제 057 스테이지 심볼 타임라인 재생하기 : Main Stage Symbol :

기능 예제 058 심볼 안에서 다른 심볼 재생하기 : Within Another Symbol :

기능 예제 059 심볼 속 심볼 제어하기 : Main Stage Nested Symbol :

기능 예제 060 심볼을 엘리먼트화하여 사용하기 : getSymbolElement :

필수 기능 061 자바스크립트 API 사용하기 : Javascript API :

기능 예제 062 동작에 대해 함수 호출하기 : bindElementAction :

기능 예제 063 동적으로 트리거 이벤트 만들기 : bindTriggerAction :

기능 예제 064 동적 심볼 클릭하여 멈추기 : bindSymbolAction :

기능 예제 065 컴포지션 인스턴스 함수 활용하기 : createSymbolChild :

기능 예제 066 지정한 시간에 타임라인 재생하기 : Play :

필수 기능 067 고급 항목 살펴보기 : Advanced Topics :

기능 예제 068 여러 콤포지션 사용하기 : Multiple Compositions in a Page :

활용 예제 069 롤링 배너 만들기

실력 알아보기 트리거 액션과 엘리먼트 액션 활용하여 숫자 증가시켜 표시하기



다섯째 마당 에지 애니메이트 고급 콘텐츠 만들기

기능 예제 070 콘텐츠에 소리 추가하기 :

박춘호