Adobe Edge Animate가 뭐 하는 프로그램임?을 알기 전에 HTML5에 관한 이야기를 하지 않으면 안 될 것 같습니다.



* HTML5?

PC, 모바일, 태블릿PC 등 디바이스가 나날이 무궁무진하게 확대되고 있습니다. 그래서 이제는 일일이 디바이스에 대응해서 만드는 것보다는, 사용자들에게 보여지는 환경을 통합해서 보여지는 웹 환경, 크로스 플랫폼을 요구하는 시대가 되었죠. 그 선두에 서있는 녀석이 바로 HTML5입니다. 이미 IE9이상, 크롬, 사파리 등에서 HTML5 환경을 지원하고 있다고 합니다.


* 웹에서도 플래시 효과를?!

HTML5는 다재다능한 기능을 내포하고 있는데요. 많은 기능들은 구글링/네이*지식*에 찾아보시면 저도 모르는 깊은 지식들을 만나실 수 있습니다. 특히 가장 저를 사로잡았던 기능은 임베디드 애니메이션 구현이었는데요. HTML5+JQuery의 조합이라면 플래시로 표현했던 거의 모든 기능을 구현할 수 있게 된 것이죠.


* HTML5 애니메이션, Edge Animate로 만들면 어렵지 않아요!

Adobe Edge Animate는 바로 이 HTML5에서 제공하는 인터렉션/인터렉티브 기능들을 쉽게 제작할 수 있게 도와주는 툴입니다.


Q. 장점은?

복잡한 기능들을 일일이 손코딩할 필요가 없습니다.

마크업 언어를 몰라도 간단한 클릭과 수치 조작만으로 애니메이션을 더 쉽고 편하게 만들 수 있답니다. 물론 HTML5가 사용되는 영역에서만 가능하겠죠?


Q. 플래시의 기능을 모두 다 구현할 수 있을까요?

플래쉬 API를 제외한 인터렉티브한 요소들은 거의 제작할 수 있습니다.

예를 들어 오브젝트 간의 충돌 애니메이션이라던지, 스크롤을 내리면 이미지도 함께 내려지거나 하는 인터렉티브한 동작도 쉽게 만들 수 있습니다.


Q. 툴을 활용하기 위해 필요한 지식이 있나요?

  • jQuery
  • 컨텐츠를 불러오기 위한 HTML, CSS

이 두가지 지식을 가지고 있다면 Edge를 효율적으로 다룰 수 있다고 합니다.


HTML5라는 캔버스 안에서 플래시와 거의 같은 효과를 제작할 수 있는 Edge Animate. 정말 매력적이지 않나요? 혹시 저처럼 이 녀석이 어떤 아이인지 너무너무 궁금한데 어찌해야 할 지 몰라 방황하고 있다면, 이 포스팅을 주목해주세요!

지금부터 임진우 강사님과 함께 한번 무궁무진한 Edge의 매력에 엣지있게 빠져볼까요? 자자 원, 투, 레디~ 고!




☞ Adobe Edge Animate 트라이얼 버전 다운받기




chapter 01. 기초 사용법 익히기


대망의 첫 수업시간. 25명의 수강생이 한 분도 빠짐없이 자리를 메꿔주셨습니다. 퇴근 후에도 배움의 열정이 장난 아닌 실무자 여러분, 정말 존경스럽습니다! 저 또한 이번 강의를 통해서 Edge 전문가가 되기 위해 열심히 따라가 보겠습니다~>_<



강사님의 자기소개는 오프라인으로, 수강생들의 자기소개는 온라인으로 받고 계시는 모습입니다.


툴을 본격적으로 배우기 전에... 강사님께서 가장 강조하신 부분은 타임라인/심볼의 개념을 꼭 알아두자! 였습니다.

타임라인? 심볼? 흐음.. 아직은 잘 와닿지는 않는데요. 강의를 듣다보면 이해할 수 있으리라는 믿음을 조심스레 가져봅니다.


그리고 드디어기다리고기다리던 Edge를 실행, Create New를 클릭했더니 



짜잔! Edge의 속살(?)은 이렇게 세팅되어 있었습니다.


그런데, 왠지 Flash와 왠지 흡사하지 않나요? Flash나 Premiere, After Effect를 다뤄보신 분들이라면 많이 생소한 UI는 아닐 거라는 생각이 드네요.


간략히 각 창에 대해 설명하자면

  • Menu : 흔히 알고있는 그 메뉴바입니다.
  • Tools : Panel에 들어가 있는 요소들을 선택하거나 사각형 등의 도형과 글씨를 넣을 수 있도록 모드를 제공합니다.
  • Panel : 일종의 캔버스입니다. 도형, 사진, 글씨 등의 보이는 요소들을 배치하고 이리저리 변형할 수 있습니다.
  • Timeline : 애니메이션 제작 시 시간을 제어하는 부분입니다. 시간마다 스크립트도 심을 수 있습니다.
  • Properties : 선택한 오브젝트의 정보를 변경할 수 있습니다. 아무것도 선택하지 않았을 때는 패널의 정보를 나타냅니다.
  • Elements : Panel에 배치된 요소들입니다.
  • Library : import하거나 현재 편집중인 HTML파일과 같은 폴더에 있는 요소들을 모아둔 곳입니다.


여기서 잠깐 - Edge의 라이브러리 vs Flash의 라이브러리


Flash : 이미지를 import를 꼭 해야만 라이브러리에 저장됩니다.

Edge : 두가지 방법이 있습니다. 

① import해서 불러오기 ② 현재 제작중인 HTML파일과 같은 경로에 이미지가 있다면 자동으로 라이브러리에 저장됩니다.







첫 시간에는 워밍업으로 opacity를 활용해서 애니메이션을 만들어 보았습니다.  라이브러리에 import한 이미지를 패널에 드래그 한 후, opacity 키를 타임라인에 생성해서 이래저래 조작해서 완성해 보았어요.




실습시간이 되자 다들 이 생소한 툴과 씨름 시작. 강사님의 설명에 따라 차근차근 하나씩 만드는 모습입니다.


키를 생성해서 opacity값을 0%로 주고, 이미지가 나타나길 원하는 시간에 타임바를 배치해서 opacity값을 100%으로 줬더니 자연스러운 fade out 효과를 낼 수 있었습니다. 아래 이미지는 타임라인에 키 생성하는 과정을 간략히 표현해 봤는데요. 아무래도 Flash와 달라서 이 부분이 가장 헷갈렸던 것 같아요. 




저도 강사님의 설명을 따라 집중해서 만들어봤는데요. Flash를 다뤘던 기억이 있어서 많이 어렵지는 않았습니다. 어쨌든, 사소하지만 직접 결과물을 제작해보니 엄청 보람차네요! 다음 시간에는 어떤 것을 배울지 벌써부터 기다려지네요. ^^*

☞ Opacity Fade-in/out(결과)

ex01.zip

 



chapter 02. Symbol, Easing, Clip


지난 시간에 간략히 fade in-fade out을 활용한 애니메이션을 제작했는데요. 이번 시간에는 Symbol의 개념을 확실히 잡을 수 있는 실습으로 수업이 진행되었습니다.



* Symbol

캔버스에서 요소를 단일 혹은 다중선택하면 심볼로 지정 가능합니다. 


Q. 심볼의 속성?


자신만의 타임라인을 가지고 있습니다. 즉 자신만의 독자적인 움직임을 줄 수 있습니다. 


예를 들어 버스본체, 바퀴*2개만 주어진다고 생각해보겠습니다.

만약 한 타임라인에서 이를 다 표현한다고 생각해볼까요? 가장 크게 신경쓰이는 건 두 바퀴가 멈춤 없이 계속 굴러가는 모습이네요. 하지만 버스가 출발지에서 목적지까지 가는 동안 한 타임라인에서 바퀴 구르는 것을 일일이 설정해야 한다면..어휴.한숨부터 나옵니다.

이 때 우리는 심볼을 활용해서 간단히 표현할 수 있답니다.



심볼을 활용한 버스 구조는 대략 이렇습니다.


  • wheel1에 1초동안 360도 돌아가도록 애니메이션 한 후, 0프레임으로 다시 돌아가는 스크립트(sym.play(0);)를 설정합니다.
  • wheel2도 wheel1과 같은 방식으로 애니메이션을 설정합니다.
  • 본체와 바퀴*2를 다중선택해서 심볼로 지정합니다. (Ctrl+Y)
  • 심볼로 지정한 버스를 왼쪽에서 오른쪽으로 움직입니다.

  • 요런 개념을 활용해 미키마우스 캐릭터로 심볼을 생성하고 애니메이션 하는 법을 익힐 수 있었답니다. 

    ☞ 미키마우스 부위별로 움직이기(결과) 

    ex02.zip






    * Easing

    Easing은 곡선의 기울기에 따라 타임라인에 적용하는 시간을 자동으로 배분하는 기능입니다.




    속도, 크기, 알파값 등 애니메이션을 설정한 구간에 적용 가능합니다. 가속도를 함수 써서 힘겹게 구현하지 않고도 Easing기능을 사용하면 아주 쉽게 가속도를 설정할 수 있습니다.

    linear(직선), ease in(점점 빨라짐), ease out(점점 느려짐), ease in out(빨라졌다 느려졌다), swing 이렇게 총 5종으로 설정가능합니다.




    * Clip

    Clip은 애니메이션을 풍성하게 만들어준다. 예를 들어 형태는 같지만 색상이 다른 두 이미지가 있을 때, 그 형태를 클립으로 밀어주면 마스크를 씌운 것처럼 효과를 줄 수 있습니다.

    클립을 활용한 실습은 다음강의때 더 자세하게 다루겠습니다.



    다음주에는 더 풍성한 내용으로 찾아올게요! 긴 글 읽어주셔서 감사합니다. ^^


    강문영 씀. (UX 디자인스쿨 4기 수료생, IDEA 서포터즈)






    Posted by kipfanews
    올블로그추천버튼 블코추천버튼 믹시추천버튼 한RSS추가버튼 구글리더기추천버튼

    댓글을 달아 주세요

    1. 에지에니메이트에서 심볼은 어떡해 만드나욤?

      2014.04.15 14:55 [ ADDR : EDIT/ DEL : REPLY ]
    2. 무한 루프되는거는 어캐저장하면되나욤? 플래쉬 할줄몰라서 제이쿼리 무지 찾다가 kipfa블로그 찾아왓내요 좋은 정보들 감사합니다

      2014.04.15 15:03 [ ADDR : EDIT/ DEL : REPLY ]