고객지원센터

이전

매뉴얼

고객지원센터매뉴얼
게시글 검색
[디저애니메이터] 애니메이션 만들기 : 2) 애니메이션 마법사 - ② 배경추가, 레이어 추가/수정/삭제
데브디저트 조회수:3263
2017-02-15 14:36:11

새 프로젝트 생성이 완료되셨나요? 그렇다면 이제 애니메이션 마법사를 실행해보도록 하겠습니다~

만약 새 프로젝트 생성을 하지 않으셨다면 이 게시글을 참고해 프로젝트를 생성해 주세요.   ☞ 프로젝트 생성하기

 


 

1. 애니메이션 마법사 실행

////

관리자페이지 애니메이션 목록 

////

목록에 있는 [디자인 수정] 버튼을 클릭하시면 애니메이션 편집툴이 나타납니다.

 

새프로젝트의 경우는 배경선택 팝업이 나옵니다. 프로젝트 제작을 위해서 배경이미지를 등록해주세요.

 

 

※ 디저애니메이터는 배경이미지를 기준으로 넓이값, 높이값이 지정되기에 이미지를 등록해 주셔야 다음단계를 진행할 수 있습니다.

(jpg, gif, bmp, png 파일만 업로드 가능합니다.)

 

///////

2. 기본옵션설정 설명란

(시작옵션, 종료옵션 버튼지정관련 수정필요)

//배경 이미지 변경, 시간, z-index설정

//////

 


3. 레이어 추가

배경만 있다면 애니메이션이 아니겠죠? 레이어를 추가하는 방법에 대해 설명해 드릴게요~

레이어는 애니메이션 마법사 좌측상단에 있는 아이콘을 클릭하면 레이어를 추가할 수 있는 팝업창이 나옵니다.

 

 - [텍스트 추가]          - [이미지 추가]

 

이미지를 먼저 추가해 보겠습니다.   - [이미지 추가] 버튼을 클릭해주세요~

그럼 이미지를 업로드 할 수 있는 업로드 창이 나타납니다.^^

 

  

[파일 선택] 버튼을 눌러 업로드 할 이미지 파일을 선택해 주세요.

(이미지 컨텐츠도 배경 이미지와 같이 jpg, gif, bmp, png 파일만 업로드 가능해요~)

참고로 모든 컨텐츠(이미지&텍스트)에는 링크값을 적용하시면 해당 컨텐츠를 클릭했을 때 상품상세 페이지, 이벤트 페이지 또는 타 사이트 등 원하는 페이지 어디든 이동시킬 수 있습니다.

이번에 등록 할 이미지 컨텐츠는 링크값을 입력하지 않고 아래 [저장] 버튼을 클릭하여 컨텐츠를 추가시켜 보겠습니다~

 


컨텐츠 목록창에는 1개의 레이어가 생성되었고 장면 편집창에 이미지가 생성되었습니다. 

 

이번에는 텍스트 컨텐츠도 추가해 보겠습니다.

 - [텍스트 추가] 버튼을 클릭하면 아래와 같이 텍스트 컨텐츠 추가창이 나옵니다~

먼저 "내용"을 입력하시고 폰트크기, 폰트스타일, 폰트색상을 설정해 보세요~

 

 

<텍스트 색상변경>

 

< 텍스트 배경 색상 변경 >

 

위와 같이 "내용" 입력창 아래에 있는 "텍스트 배경" 에서 내용 입력창의 컬러를 설정할 수 있습니다.

흰색 배경에서 잘 보이지 않는 컬러(예를 들어 흰색이나 밝은 회색 등)로 텍스트를 입력 할 경우 검정색 배경으로 변경해서 작업하면 편하게 작업 할 수 있어요^^

 

여기서 잠깐!

텍스트 컨텐츠의 폰트크기, 폰트스타일, 폰트색상을 변경하면 "내용" 입력창에서 설정된 폰트를 바로 확인 할 수 있습니다. 참 편리한 기능이죠?

단, 폰트스타일은 익스플로러(IE), 사파리(Safari)에서는 미리보기 지원이 되지 않습니다. 해당브라우저에서 지원을 하지 않기 때문에 현재로서는 작업하시는 브라우저에 따라 “내용”부분 출력이 "폰트스타일만" 다소 다를 수 있으니 참고해 주세요^^

그외  크롬, 파이어폭스, 오페라에서는 버전에 상관없이 미리보기가 지원됩니다^^

 

 

익스플로러(IE), 사파리(Safari)에서는 미리보기만 되지 않을뿐, 편집창에서는 폰트스타일이 정상적으로 적용되니 걱정마세요^^

 

텍스트 컨텐츠도 링크값을 입력해 해당 텍스트를 클릭시 원하는 페이지로 연결 할 수 있어요.

설정을 모두 마쳤다면 [추가] 버튼을 눌러 장면에 추가된 텍스트 컨텐츠를 확인해 보겠습니다~

 

 

4. 레이어 수정

이미지를 수정하거나 텍스트를 수정하고 싶을때는 레이어 목록창에서 해당 레이어의 톱니바퀴 버튼을 눌러주시면 수정 팝업창이 나옵니다.

 

5. 컨텐츠 순서변경

순서변경을 위해 이미지를 하나더 추가할게요~

아래의 이미지를 보시면 순서가 따봉이미지 > 텍스트 컨텐츠 > 연필이미지 순으로 되어있습니다.

(컨텐츠 목록순서가 상단으로 갈수록 장면편집창, 애니메이션 설치화면에서 위로 나옵니다.)

 

 

 

저는 텍스트 컨텐츠가 제일 위로 변경을 하겠습니다.

컨텐츠 목록창에서 "텍스트 이미지" 컨텐츠를 드래그하여 "따봉" 컨텐츠를 위로 올릴게요~

 

 

분홍색의 배경이 원하는 위치에 갔을때 드래그를 풀어주세요~

짠~ 아래의 이미지에서 컨텐츠 목록창을 보시면 "텍스트 이미지"와 "따봉" 컨텐츠가 자리가 바뀌었죠?

장면 편집창에도 텍스트 컨텐츠가 제일 상단으로 출력되게 변했습니다~

 

 

6. 편집창 컨텐츠 안보임 처리

제작하다가 큰이미지가 위로 올라와서 밑에 이미지를 클릭할 수가 없는 상황이 있어요.

걱정마세요~ 애니메이션 마법사가 다른 컨텐츠를 움직이지 않고 변경할 수 있게 도와드릴게요^^

컨텐츠 목록창 좌측에 보시면 [눈모양 아이콘]이 있습니다. 따봉의 [눈모양 아이콘]을 클릭해 볼게요~

 

<따봉 컨텐츠 숨김처리>

 

컨텐츠가 숨김처리 되니 밑에 있는 다른 컨텐츠를 편하게 클릭이 가능해 졌습니다^^

※ 해당기능은 애니메이션 컨텐츠 편집툴에서만 숨김처리가 적용됩니다.

   미리보기나 애니메이션 설치시 숨김처리 상관없이 모든 컨텐츠가 출력됩니다.

 

7. 컨텐츠 삭제

삭제하고싶은 레이어의 [휴지통 아이콘] 클릭하시면 해당 레이어를 삭제할 수 있습니다.

단, 컨텐츠와 블록 모두 복구가 안되니 꼭 신중하게 삭제를 해주세요~

 

미리보기를 하니 아직 애니메이션 이동이나 동작이 없어서 허전하시죠?

그럼 이제 본격적으로 블록 추가/수정 방법과 시간별 위치조정 기능에 대해 알아보도록 할까요?!

블록 설정에 대한 관련글은 다음글을 통해 확인해 주세요~

 

☞ 블록 추가/수정, 시간별 효과 설정하기

댓글[0]

열기 닫기