Designpot

HTML5가 점차 확산되는 분위기이다.

이제는 PC뿐 아니라 다양한 방법으로 웹페이지를 접근하고 있기 때문에 플랫폼에 상관없이 호환되는 웹페이지를 만드는 것이 필요하다.

단순한 것은 코딩 자체가 그리 어렵지 않지만, 예전 플래시에서 보던 것과 같은 애니메이션 효과들을 구현하기 위해서는 복잡한 과정을 거쳐야 한다.

하지만 코딩을 할 줄 몰라도 애니메이션 효과를 구현해줄 수 있는 툴이 있을까 검색하다보니 Adobe Edge Animate 라는 것이 나와있다.

Adobe 홈페이지에서 다운 설치할 수 있는데, 설치 후 사용법이 마치 Premire를 다루는 것 같다.

Premire와 유사한 점이 많아서, 내 경우에는 오히려 반가웠고 적응하고 사용하는데 어려움이 없었다.

아주 자세한 것까지는 전문가가 아니라 잘 모르겠지만, 웹페이지에서 충분히 활용가능한 정도의 사용팁을 연재해서 올려보려고 한다.

툴 살펴보기 1번째로~

일단 새 파일을 열면, 기본적으로 왼쪽분할화면에는 Properties라는 항목이 있다.

이 항목의 세부항목에는 Stage 항목과 Preloader 항목이 있는데

Stage항목

이 항목의 경우에는 파일의 가로X세로 길이를 픽셀단위나 퍼센트 단위로 설정할 수 있고, 접속 기기에 따라 조절될 수 있도록 최소길이 또는 최대길이도 지정할 수 있다.

- AutoPlay: HTML 파일을 열면 애니메이션을 자동재생할 지 여부를 선택

- Composition ID: 컴포지션 고유 ID로서 해당 애니메이션을 다른 것과 구별해주는 식별자 같다.

- Poster: 애니메이션 대표 이미지 정도?

Preloader 항목

이 항목은 애니메이션의 크기가 클 경우 버퍼링을 예상하여

만약 즉시 재생이 가능한 정도의 애니메이션의 경우라면 Immediate를 기본으로 두면 되고,

그렇지 않은 대용량의 애니메이션이라면 Polite를 선택하고 나서 Edit 에서 세부 설정을 해주면 된다.

세부설정에 가면 애니메이션 재생 전에 보여줄 Preloader Clip-Art를 넣어줄 수 있다.

미리 몇 가지 프리로더들이 들어가 있으니 사용자는 그 중에 마음에 드는 것을 고르면 된다.

이 부분 매우 센스있다는 생각이 들었다.^^

실제로 해보면 금새 이해가 될 것 같으니 실제로 해보시면 좋겠다.

다음 번 포스팅에서는 오른쪽에 위치한 Library 항목을 살펴보겠다.