HTML5와 애니메이션

종이문서처럼 HTML문서를 이용한다

HTML은 가까이 있다

HTML?

• 기본적인 구성: Flash + AfterEffect
• 좌측부터 Tool, Properties, Stage, Timeline, Elements, Library 패널들로 구성되어 있으며 기존 Adobe제품을 사용하셨던분들은 쉽게 사용 가능

• 먼저 속성창은 컴포지션의 이름을 정의하는 입력란이 있으며, 스테이지의 가로 세로 사이즈를 설정가능함
• Link기능이 있어서 같은 비율로 조절할 수 있고 개별적으로도 늘리거나 줄일 수 있슴. 또한 스테이지의 백그라운드 색상을 조절할 수 있는 색상필드가 구성

• 애니메이트 툴이기 때문에 프로그램 상단에 오브젝트들을 조절할 수 있는 선택툴, 크기를 변형할 수 있는 Transform툴, 오브젝트를 그릴 수 있는 Rectangle, Rounded Rectangle, Ellipse 툴 등으로 구성.
• 타이포로 모션 그래픽을 할 수도 있기 때문에 Text Tool은 기본적으로 있고 스테이지를 확대해가며 이동할 수 있도록 Hand Tool과 Zoom Tool으로 구성됨.

• 먼저 사각형 오브젝트를 한번 그려보면 좌측의 Properties창에서 Rectangle의 사이즈나 속성을 조절가능
• 오브젝트의 투명도도 수치 조절하여 정할 수 있고 x축과 y축으로 이동할 수도 있고 사이즈 조절도 가능

• Color 패널에서 백그라운드 컬러를 솔리드 컬러로 지정해 넣을 수도 있고 보더 컬러를 굵기에 따라 지정해서 삽입 가능
• 더 라인은 Solid, Dashed, Dotted 로 선택해서 조절이 가능하며 전체 컬러는 RGP 코드로 정의됨

• 오브젝트의 백그라운드를 설정할 때 솔리드 컬러 뿐만 아니라 그라데이션을 설정 가능
• Color 패널에서 이런 부분들 조절 가능

• Transform 패널에서는 가로 세로로 비율로 조절할 수 있고 오브젝트 변형도 가능
• 또한 돌아가는 회전 애니메이션을 구현하기 위해 로테이션 수치 입력 가능

• Corner라는 속성 창이 있는데 기본적으로 Rectangle만 그려서 모서리를 둥글게 조절가능
• 한 군데의 모서리만도 가능하고 네 군데 모두 조절하여 둥글게 모양을 제작가능함

About HTML

다를수 있다고?

사용자가 보는 화면이랑

Why?

2.HTML의 발전과정

HTML 1.2

XHTML1

HTML4

- 단순한 HTML시대

- 가장 많이 사용했던 HTML

- 구조(HTML)과 표현(CSS)가 분리되기 시작

1999

1995

2009

HTML5

2000

1998

1998-1991

HTML 3

HTML4.01

HTML 5

-브라우저 전성시대(넷스케이프 vs IE)

- 가장 많이 사용했던 HTML

- 가장 많이 사용하게 될 HTML

내가보는 화면이랑

크로스 브라우징이란?

다양한 웹 브라우저 때문

어떤 웹 브라우저를 사용해도 제작자의 의도대로 사용자에 전달되도록 하는 것

하지만 기존의 html4의 규격으로는 브러우저별 간극을 좁히기 어려움!!

그래서 "웹브라우저마다 렌더링 방식이 서로 달라 불쌍한 개발자만 죽어나니 새로운 표준을 마련하고자 한다"

크로스 브라우징 필요

Hyper Text

Markup Language

Hyper Text? 연결된 텍스트 정보

Markup Language? 구조화 언어

웹브라우저에 하이퍼텍스트의 구조를 서술하는 컴퓨터 언어의 한 종류

잠깐!

HTML5 Animation

HTML5 디자인 원칙

보편적 접근성

상호운영성

컨텐츠의 소비자가 기계와 모든 사람들(장애자를 포함한 )이 접근할 수 있도록 해야함

HTML5를 적용한 브라우저라면 동일하게 동작하여야 함

호환성

실용성

• 컨텐츠의 호환성
• 이전브라우저와의 호환성
• 기능의 재사용
• 이용방법의 호환성
• 혁신보다는 발전을 우선시함

W3C가 진행하던 이상적인 Markup Language인 XHTML2.0와 같은 HTML을 제작하는 것이 아닌 웹현장에서 필요로 하는 것들을 중점적으로 진행해야함

HTML5 활용 예제

• video - http://www.apple.com/html5/showcase/video/
• type - http://www.apple.com/html5/showcase/typopography
• 화면전환 - http://www.apple.com/html5/showcase/transitions/
• canvas - http://html5cup.kayac.com/
• Demo - http://www.mrdoob.com/#/55/Fluid_simulation_02

• HTML의 최신규격이다.
• 브라우저간의 호환성을 위해 브라우저 제작사에서 협의체 구성
• 외부 플러그인이 없어도 멀티미디어나 그래픽 기능을 브라우저 자체적으로 구현 가능
• 플러그인 사용이 제한적인 스마트폰에서도 동일하게 구현이 가능하기 때문에 모바일에서 활용이 늘어가는 추세

• HTML5 등장 이전에는 웹에서 구현되는 애니메이션의 대부분이 플래쉬로 제작
• 플래쉬는 디자이너가 아닌 개발자도 애니메이션을 제작할 수 있는 강력하고 편리한 기능 제공->웹 애니메이션 생산에 큰 부분을 차지
• 웹표준 HMLT5 등장 이후 보안에 취약하고 리소스를 많이 잡아먹는 단점으로 HTML5 애니메이션으로 대체되는 추세
• HTML5+CSS3+자바스크립트를 활용하여 역동적인 웹사이트뿐만 아니라 모바일 UI 트렌지션 작업 등도 가능

HTML5 애니메이션 제작 프로그램

Conclusion

Mugeda

Adobe Edge Animation CC

• 분석기능을 제공하는 애니제작도구
• 배너,미니게임,전문리치 미디어 광고 등 최고 수준의 광고 단위를 만들 수 있고 교사와 출판사들이 스마트 폰에서 볼 수 있는 교육자료 만들때 유용

A5-Animator

• 프레임 기반으로 제작된 도구로 수동타타임라인과 기록모드로 키 프레임을 배치하여 애니를 제작하는 도구
• 일부 기능이 제한된 무료버전과 제한없는 프리미엄으로 다운 가능

Tumult Hype

• 키 프레임 기반의 HTML5
• 애니메이션 제작도구 아쉽게도 100% 무료는 아님
• 시험판버전을 사용후 프리미엄 버전으로 전환
• 키프레임 작업에 익숙하거나 좋아하는 분들에게 추천

Mixeek

• 장점은 100% 무료이며, 강력한 브라우저 호환성을 제공하는 도구
• 순수하게 자바스크립트, CSS3와 HTML5를 기반으로 제작되며 간단한 경량 애니메이션을 만들때 유용한 도구

Google Web Designer

• 무료로 이용할 수 있는 애니메이션 도구
• 고급/빠른 모드 제공,빠른 모드는 빠르게 단순한 애니를 제작하는데 편리한 모드
• 오브젝트3D편집은 개체의 회전, 변환, 변경으로 오브젝트를 3D느낌이 나도록 만들수 있는 유용한 기능을 제공

대세는 HTML5&CSS&JC

HTML5 애니메이션 사례

http://http://gojs.net/latest/samples/index.html

http://codepen.io/estelle/pen/LyItm

http://codepen.io/yoksel/pen/nxgrp

HTML5 ANIMATION

EXAMPLE

Sample1 - http://spotify-tastewind.com

Sample2 - http://mountain.quechua.com

Sample3 - http://silenza.it

Sample4 - http://youtube10.withgoogle.com

HTML5와 애니메이션