추가 적립 안내

HTML5 인터랙션을 구현하기 위해 고민하는 디자이너와 코더들을 위한 엣지 애니메이트!

『바로바로 할 수 있는 엣지 애니메이트』는 엣지 애니메이트의 필수 기능과 그것을 활용한 예제들이 따라하기만 해도 개념을 잡을 수 있도록 설명한 책이다. 쉽게 따라하 할 수 있는 27가지의 예제를 수록하였고, 따라하며 배우는 엣지 애니메이트 기본과 실전 예제가 수록되어 있다. HTML, CSS, 자바스크립트의 전문 지식이 없는 디자이너들을 위해 엣지 애니메이트를 이용한 애니메이션과 자바스크립트, 제이쿼리, CSS를 활용하는 방법도 기초부터 상세하게 정리되어 있다.

엣지 애니메이트를 마스터할 수 있는 가장 쉬운 방법!
웹디자이너나 퍼블리셔가 쉽게 HTML5 환경에 필요한 애니메이션을 만들기 위한 엣지 애니메이트. 이 책에서는 엣지 애니메이트의 필수 기능과 그것을 활용한 예제들이 따라하기만 해도 개념을 잡을 수 있도록 설명되어 있습니다.
또한 HTML, CSS, 자바스크립트의 전문 지식이 없는 디자이너들을 위해 엣지 애니메이트를 이용한 애니메이션과 자바스크립트, 제이쿼리, CSS를 활용하는 방법도 기초부터 상세하게 정리되어 있습니다.

*이 책의 특징
- 쉽게 따라할 수 있는 27가지 감각적인 예제들
- 따라하며 배우는 엣지 애니메이트 기본과 실전 예제
- 포토샵, 일러스트레이터, 제이쿼리를 연동한 인터랙션 제작

*추천평
이번에 Adobe에서 Adobe Edge Animate가 새로 나왔는데, 관련된 서적을 찾기 어려웠고 인터넷에서도 기초에 관련된 내용들을 쉽게 접하기가 어려웠습니다. 이 책에는 Edge Animate를 이용한 애니메이션과 자바스립트, 제이쿼리, CSS를 활용하는 방법이 기초부터 상세하게 정리되어 있기 때문에 Edge Animate를 처음 접하는 사람들도 쉽게 이해할 수 있을 것이라 생각합니다. Adobe Edge Animate 와 HTML5에 관련된 공부를 하시는 분들께 강력 추천합니다.
이강희/웹모션그래퍼

아직 어도비 엣지에 관련된 서적들이 시장에 거의 나와 있지 않아서 선뜻 시작하기 두려웠는데, 이 책을 통해 초보자인 제가 혼자서도 빠르게 이해하고 습득할 수 있었습니다. 필수기능과 그것을 활용한 예제들이 쉽고 재밌게 표현되어 있어 따라하기만 해도 개념을 쉽게 이해하고 적용할 수 있었습니다. 앞으로 웹, 모바일 다양한 분야에서 많이 사용되기 때문에 알아두면 유용할 것 같고, 무엇보다 HTML, CSS, 자바스크립트의 전문 지식이 없는 디자이너들도 쉽게 웹모션에 접근할 수 있기 때문에 이 책을 강력 추천합니다.
이정민/웹디자이너

웹에이전시에서 플래시 모션을 5년 넘게 해 오고 있는 저로써는 웹 시장의 흐름에 맞춰 플래시와는 다르게 다양한 디바이스에 적용되는 HTML5와 jQuery에 관심을 가지게 되었습니다. 그러던 중 Adobe Edge라는 툴이 기존에 플래시와 마찬가지로 타임라인을 이용하여 애니메이션을 구현하고 플래시를 통해 웹에 구현했던 대부분의 기능들이 Adobe Edge를 이용해서 HTML5로 구현된다는 사실을 알게 되었습니다.
이 책에는 HTML5 애니메이션 외에도 다양하게 활용될 수 있는 방법들이 담겨 있습니다. 직관적이고 쉽게 설명되어 있어서 차근차근 따라하다 보면 실력이 금방 향상될 것이라고 생각합니다. HTML5에 관심 있는 사람이라면 충분히 공부해볼 만한 가치가 있는 책이라 생각됩니다.
이정현/ 플래셔

Part01 어도비 엣지 알아보기

chapter 01 | 어도비 엣지에 대해
· 어도비 엣지 시작하기
01 어도비 엣지와 HTML5
02 Creative Cloud 가입하기
03 어도비 엣지 애니메이트의 특징
· 엣지 애니메이트의 인터페이스 및 메뉴
01 엣지 애니메이트의 인터페이스
02 엣지 애니메이트의 메뉴
03 엣지 애니메이트의 툴바
04 속성의 제어 창, Properties 알아보기

chapter 02 | 어도비 엣지의 기능
· 타임라인 이해하기
01 Alpha 값 속성을 이용한 애니메이션 만들기
02 반복 애니메이션 만들기
· 키프레임 개념 이해하기
01 이미지 배치하기
02 키프레임을 이용한 원 애니메이션 만들기
· Easing 기능을 이용한 모션
01 오브젝트 준비하기
02 Easing으로 속도 적용하기
· 공 애니메이션으로 Easing 이해하기
01 떨어지는 모션
02 Easing으로 효과 적용하기
· Clipping 기능
01 Clipping을 위한 레이어 구성하기
02 Clipping을 적용하여 애니메이션 만들기
· Nesting Element
01 Nesting Element 적용하기
02 Nesting Elements 애니메이션 만들기
· Createing 심벌
01 심벌 만들기
02 Library에서 심벌 애니메이션 복제하기
· Png 시퀀스 애니메이션
01 Png 시퀀스 애니메이션 만들기
02 심벌 만들기
· Sprite Sheets 애니메이션
01 심벌 만들기
02 심벌 애니메이션 만들기

Part02 기본 다지기
chapter 01 | 디자인 요소 만들기
· 포토샵 Png 애니메이션 만들기
01 Png 파일 만들기
02 REFRESH 애니메이션 만들기
03 YOUR 애니메이션 만들기
04 LIFE 애니메이션 만들기
· 일러스트레이터 SVG 애니메이션 만들기
01 SVG 파일 만들기
02 SVG 파일 애니메이션 만들기
· 플래시에서 Sprite Sheets 만들기
01 Flash motion 추출하기
02 Png 시퀀스 만들기
chapter 02 | 인터렉티브 애니메이션
· 스크립트를 이용한 이벤트 제어
01 play, stop 버튼 제어하기
02 마우스 포인터 변경하기
· 타임라인 라벨 제어하기
01 타임라인에 label 만들기
02 play, stop 버튼 설정하기
· PlayReverse 오버 효과
01 btn 투명 버튼 만들기
02 over_mc의 타임라인 제어하기
03 text의 타임라인 제어하기
· Open_url 링크 만들기
01 버튼에 링크 걸기
02 여러 개의 버튼에 링크 걸기
· 더블클릭 효과
01 db_btn, back_btn에 스크립트 만들기
02 Easing 및 마우스 버튼 활성화
· 엣지 HTML 오디오
01 compositionReady에 audio 이벤트 등록하기
02 btn_mc의 play_btn, pause_btn에 click 이벤트 등록하기
· 엣지 HTML 비디오
01 MP4 파일 재생하기
02 유튜브 재생하기

Part03 실전 예제
chapter 01 | 실전 모션 만들기
· 타임라인을 이용한 텍스트 모션 만들기
01 EDGE 텍스트 모션 작업하기
02 강조 effect 모션 만들기
03 HTML5 텍스트 모션 만들기
· 나비 날갯짓 모션 만들기
01 디자인 오브젝트로 나비 날갯짓 모션 만들기
02 오른쪽 날개 만들기
03 Butterfly 심벌 만들기
· 배트맨 인트로 모션 만들기
01 배트맨 마크가 등장하는 모션 만들기
02 배경과 배트맨 마크 확대 모션 만들기
03 배트맨 등장 모션 만들기
· 다양하고 감각적인 트리모션 만들기
01 텍스트 등장 모션 만들기
02 파티클 모션 불러오기
03 나무 모션 만들기
chapter 02 | 실전 효과 만들기
· 마우스 오버 인터렉션 콘텐츠
01 소스 분석
02 버튼 이벤트 만들기
03 변수를 이용하여 오버 시 오류 해결하기
· jQuery로 슬라이딩 내비게이션 만들기
01 소스 분석
02 코드 작업하기
03 for문을 이용하여 최적화하기
04 2×2 크기 슬라이드하기
· 화면 크기에 반응하는 모션 만들기
01 소스 분석
02 삼각형 디자인 모션 제어하기
03 Text, Visual 움직임 제어하기
04 Visual 움직임 제어하기
05 화면 크기의 변화에 맞춰 요소 제어하기
· 마우스에 반응하는 메인 비주얼 만들기
01 내비게이션의 버튼 애니메이션 만들기
02 navi 인터랙션을 위한 스크립트 만들기
03 mc_vi0 애니메이션 만들기
04 mc_vi1 애니메이션 만들기
05 mc_vi2 애니메이션 만들기
06 visual 심벌 클릭 스크립트 만들기