- 현재 위치
- home > 컴퓨터·ICT·어학 > 컴퓨터·IT 도서 > 그래픽 > 바로바로 할 수 있는 엣지 애니메이트[제우미디어]
;)
『바로바로 할 수 있는 엣지 애니메이트』는 엣지 애니메이트의 필수 기능과 그것을 활용한 예제들이 따라하기만 해도 개념을 잡을 수 있도록 설명한 책이다. 쉽게 따라하 할 수 있는 27가지의 예제를 수록하였고, 따라하며 배우는 엣지 애니메이트 기본과 실전 예제가 수록되어 있다. HTML, CSS, 자바스크립트의 전문 지식이 없는 디자이너들을 위해 엣지 애니메이트를 이용한 애니메이션과 자바스크립트, 제이쿼리, CSS를 활용하는 방법도 기초부터 상세하게 정리되어 있다.
저자: 임진우
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 심벌 클릭 스크립트 만들기
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 심벌 클릭 스크립트 만들기
