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

출판사 리뷰

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