JAVA와 놀자

어도비 사에서 html5 를 적극 지원하기 위해 Edge 라는 프로그램을 선보였다.

7월 31일 부터 preveiw 버전을 다운로드 할 수 있도록 하였다.

http://labs.adobe.com/technologies/edge/

Edge 는 좀더 쉽게 html5 와 css3 를 이용하여 애니메이션을 만들 수 있도록 하는 툴이다. 당연히 html5 를 지원하지 않는 인터넷 익스플로러 6,7,8 에서는 동작 하지 않는다. 하지만 이를 지원하는 브라우저에서는 잘 동작 된다. 물론 아이폰과 아이패드에서도 아주 잘 동작 될 것이다(테스트 해보지 않았음.).

그럼 지금부터 Edge 에 대해 조금 살펴 보기로 한다. 먼저 아래 링크로 가서 Edge 의 preview 버전을 다운로드 받은 후 설치 한다.

http://labs.adobe.com/technologies/edge/

adobe 계정이 필요 하며, windows 는 vista 이상 부터 설치가 가능하며, 맥은 Mac OS X v10.6 and v10.7 부터 설치가 가능하다.

설치가 끝나면 아래와 같은 화면을 볼 수 있다.

adobe Edge Preveiw 버전의 실행화면

엣지 프로그램 튜토리얼 과 샘플 파일도 다운로드 받을 수 있다.

나 는 엣지 프로그램의 테스트를 위해 Create New 를 클릭 하였다. 그러면 아래와 같이 Untitled-1.html 파일이 만들어 지며 flash 나 afterEffects 를 다루어 본 사람이라면 조금 익숙한 work space를 볼 수 있다.

Create New 를 누르면 Untitled.html 문서가 만들어 진다.

일 단 상단에 선택, 도형, 택스트 입력 툴이 보인다. 좌측에는 속성 창(Properties) 창이 보이며, 여기서 Stage 의 색상 과 width, height 값을 설정 할 수 있다. 또한 Stage 를 넘어설 경우에 해당되는 css 속성자인 overflow 를 선택 할 수도 있다.

overflow 속성 선택

직사각형툴(Rectangle Tool) 을 이용해 사각형을 그려 보겠다.

직사각형 툴(Rectangle Tool)

사각형을 그린뒤 해당 사각형(Elements)를 선택하면 좌측 속성창에 해당 엘리먼트의 조정가능한 속성값들이 나온다. 해당 속성값은 아래와 같다.

1. Element 의 ID 값을 지정한다. (<div id="Rectangle1"></div> 라고 생각하면 된다. 실제로 이렇게 된다.)
2. Element 의 좌표값과 사이즈, 투명도를 지정할 수 있다.
• 중 요한것은 이것은 애니메이션을 만들기 위한 툴이기 때문에 좌표값의 개념을 다르게 생각해야 한다. 최초 사각형 모양의 엘리먼트를 그린 그 위치를 x,y 각각 0으로 인식하면 된다. 그리고 그려진 위치를 기준으로 +,- 하여 애니메이션이 생성된다.
3. Element의 background 와 border 를 지정한다.
4. Element의 회전, 회전시 기준점, 뒤틀림, 비율 등을 지정할 수 있다.
5. border-radius 속성을 지정할 수 있다.

* 위의 속성값들을 변화 시키면 하단 타임 라인에 해당 속성값들이 추가된다. 이 개념은 에프터 이펙트와 비슷한데 아래에서 추가로 설명 하도록 하겠다.

여기에 택스트를 하나 더 추가해 보도록 하겠다. 텍스트는 내가 자주가는 네이버카페인 '하드코딩하는 사람들' 이라고 쓰도록 하겠다.

텍스트를 적으면 해당 텍스트 에 대한 속성값들이 properties 창에 보여진다.

1. Element 의 id 값이다.
2. Element 의 좌표값과 사이즈, 투명도를 지정할 수 있다.
3. font-family 와 size , color , text-align 및 decoration 속성들을 변경할 수 있다.
4. Element 의 회전축, 회전각도, 뒤틀림, 비율 등을 변경 할 수 있다.

여기까지 하게되면 마크업 구조는 다음과 같아진다.

물론 위의 코드는 Edge 가 자바스크립트 화 하여 문서가 로드될때 상위 Element에 write 해준다. 크롬 개발자 도구로 확인 할 수 있다. 이제 만들어진 엘리먼트들에게 생명을 불어 넣어 보겠다. 그전에 알아두어야 할것 몇가지..

위의 속성값들 이름 앞에 보면 ◇ 모양을 볼수 있다. 이것은 하단 Timeline 창의 Element 에 해당 속성에 대한 키프레임을 추가하는 버튼이다. 클릭하거나 해당 속성을 변경하게 되면 하단 타임라인의 엘리먼트에 속성값이 추가되는 것을 알 수 있다.

이것이 add Keyframe 버튼

키프레임추가 버튼을 누르거나 속성값을 변경하면 타임라인에 키프레임이 생성된다.(Auto-Keyframe Properties 가 체크된 상태일 경우 -> 붉은색 시계모양)

 

이것이 Auto-Keyframe Properties 로 체크되 있으면 Element 의 속성값이 변화할때 자동으로 키프레임이 추가된다.

급하게 애니메이션을 만들어 보겠다.

순서는 지금 까지 만은 앨리먼트에 속성값을 각각 타임라인의 시간에 따라 다르게 주기만 하면 된다.

예로 0:00 에서 엘리먼트의 x 축을 10 으로 주면 0:02 에서 x 축의 값을 30으로 변경하면 좌에서 우로 움직이는 애니메이션이 된다.

일단 지금 만들어 놓은 것이 최종적인 모습이므로 키프레임에서 현재 만들어 놓은 속성들을 0:02 로 끌어서 이동시켰다.

 

그런다음 타임라인의 현재 프레임을 0:00 으로 이동시켜서 시작시의 모습으로 속성을 변경 시켜본다. 위에서 회색박스가 떨어지는 효과를 주기 위해 Rectangle4 의 tY 값을 -276까지 변경해서 stage 의 위쪽으로 안보일때까지 올려 버렸다. 그러면 타임라인에 아래와 같이 모션이 적용된걸 확인 할 수 있다. 재생 버튼을 눌러 보면 위에서 아래로 떨어지는 회색 상자 모션을 볼 수 있다.

 

위의 녹색부분을 클릭하면 좌측에 속성을 변화 시킬 수 있다. 모션이 되는 부분의 아이디, 시간, 시작되고 끝나는 시간을 조절할 수 있으며 Easing(부드럽게 시작되고 끝나는 등의 효과) 를 줄 수 있다. 이부분은 직접 해보는 편이 빠를듯.

이와 같이 해서 텍스트에도 같은 효과를 주었다.

 

모션이 완료되고 저장하면, edge 파일과 함께 html, css, js 파일과 edge_includes 폴더 가 생성된다. 이것들이 모두 올라가야 하며, html 파일을 열어보면 (웹퍼블리셔, 혹은 개발자라면) 아..이렇게 되는 구나 라고 알수 있을듯...

edge_블로그.zip

 

 

위에 작업한거 샘플파일임.

시작할때는 꼼꼼하게 분석해서 포스팅 해야지..했는데.. 회사일도 바쁘고 하다보니 결국 날림이 됐다.

지금은 베타 버전이라 기능이 거의 없지만 실제 상용화 버전은 아마 이벤트를 걸고, 만들고 하는 기능 부터 해서 많은 부분이 추가될 거라 기대한다.

 

http://eyekorea.tistory.com/18 에서 가져왔습니다.