열기 닫기
새 프로젝트 생성이 완료되셨나요? 그렇다면 이제 애니메이션 마법사를 실행해보도록 하겠습니다~
만약 새 프로젝트 생성을 하지 않으셨다면 이 게시글을 참고해 프로젝트를 생성해 주세요. ☞ 프로젝트 생성하기
1. 애니메이션 마법사 실행
////
관리자페이지 애니메이션 목록
////
목록에 있는 [디자인 수정] 버튼을 클릭하시면 애니메이션 편집툴이 나타납니다.
새프로젝트의 경우는 배경선택 팝업이 나옵니다. 프로젝트 제작을 위해서 배경이미지를 등록해주세요.
※ 디저애니메이터는 배경이미지를 기준으로 넓이값, 높이값이 지정되기에 이미지를 등록해 주셔야 다음단계를 진행할 수 있습니다.
(jpg, gif, bmp, png 파일만 업로드 가능합니다.)
///////
2. 기본옵션설정 설명란
(시작옵션, 종료옵션 버튼지정관련 수정필요)
//배경 이미지 변경, 시간, z-index설정
//////
3. 레이어 추가
배경만 있다면 애니메이션이 아니겠죠? 레이어를 추가하는 방법에 대해 설명해 드릴게요~
레이어는 애니메이션 마법사 좌측상단에 있는 아이콘을 클릭하면 레이어를 추가할 수 있는 팝업창이 나옵니다.
이미지를 먼저 추가해 보겠습니다. - [이미지 추가] 버튼을 클릭해주세요~
그럼 이미지를 업로드 할 수 있는 업로드 창이 나타납니다.^^
[파일 선택] 버튼을 눌러 업로드 할 이미지 파일을 선택해 주세요.
(이미지 컨텐츠도 배경 이미지와 같이 jpg, gif, bmp, png 파일만 업로드 가능해요~)
참고로 모든 컨텐츠(이미지&텍스트)에는 링크값을 적용하시면 해당 컨텐츠를 클릭했을 때 상품상세 페이지, 이벤트 페이지 또는 타 사이트 등 원하는 페이지 어디든 이동시킬 수 있습니다.
이번에 등록 할 이미지 컨텐츠는 링크값을 입력하지 않고 아래 [저장] 버튼을 클릭하여 컨텐츠를 추가시켜 보겠습니다~
컨텐츠 목록창에는 1개의 레이어가 생성되었고 장면 편집창에 이미지가 생성되었습니다.
이번에는 텍스트 컨텐츠도 추가해 보겠습니다.
- [텍스트 추가] 버튼을 클릭하면 아래와 같이 텍스트 컨텐츠 추가창이 나옵니다~
먼저 "내용"을 입력하시고 폰트크기, 폰트스타일, 폰트색상을 설정해 보세요~
<텍스트 색상변경>
< 텍스트 배경 색상 변경 >
위와 같이 "내용" 입력창 아래에 있는 "텍스트 배경" 에서 내용 입력창의 컬러를 설정할 수 있습니다.
흰색 배경에서 잘 보이지 않는 컬러(예를 들어 흰색이나 밝은 회색 등)로 텍스트를 입력 할 경우 검정색 배경으로 변경해서 작업하면 편하게 작업 할 수 있어요^^
여기서 잠깐!
텍스트 컨텐츠의 폰트크기, 폰트스타일, 폰트색상을 변경하면 "내용" 입력창에서 설정된 폰트를 바로 확인 할 수 있습니다. 참 편리한 기능이죠?
단, 폰트스타일은 익스플로러(IE), 사파리(Safari)에서는 미리보기 지원이 되지 않습니다. 해당브라우저에서 지원을 하지 않기 때문에 현재로서는 작업하시는 브라우저에 따라 “내용”부분 출력이 "폰트스타일만" 다소 다를 수 있으니 참고해 주세요^^
그외 크롬, 파이어폭스, 오페라에서는 버전에 상관없이 미리보기가 지원됩니다^^
익스플로러(IE), 사파리(Safari)에서는 미리보기만 되지 않을뿐, 편집창에서는 폰트스타일이 정상적으로 적용되니 걱정마세요^^
텍스트 컨텐츠도 링크값을 입력해 해당 텍스트를 클릭시 원하는 페이지로 연결 할 수 있어요.
설정을 모두 마쳤다면 [추가] 버튼을 눌러 장면에 추가된 텍스트 컨텐츠를 확인해 보겠습니다~
4. 레이어 수정
이미지를 수정하거나 텍스트를 수정하고 싶을때는 레이어 목록창에서 해당 레이어의 톱니바퀴 버튼을 눌러주시면 수정 팝업창이 나옵니다.
5. 컨텐츠 순서변경
순서변경을 위해 이미지를 하나더 추가할게요~
아래의 이미지를 보시면 순서가 따봉이미지 > 텍스트 컨텐츠 > 연필이미지 순으로 되어있습니다.
(컨텐츠 목록순서가 상단으로 갈수록 장면편집창, 애니메이션 설치화면에서 위로 나옵니다.)
저는 텍스트 컨텐츠가 제일 위로 변경을 하겠습니다.
컨텐츠 목록창에서 "텍스트 이미지" 컨텐츠를 드래그하여 "따봉" 컨텐츠를 위로 올릴게요~
분홍색의 배경이 원하는 위치에 갔을때 드래그를 풀어주세요~
짠~ 아래의 이미지에서 컨텐츠 목록창을 보시면 "텍스트 이미지"와 "따봉" 컨텐츠가 자리가 바뀌었죠?
장면 편집창에도 텍스트 컨텐츠가 제일 상단으로 출력되게 변했습니다~
6. 편집창 컨텐츠 안보임 처리
제작하다가 큰이미지가 위로 올라와서 밑에 이미지를 클릭할 수가 없는 상황이 있어요.
걱정마세요~ 애니메이션 마법사가 다른 컨텐츠를 움직이지 않고 변경할 수 있게 도와드릴게요^^
컨텐츠 목록창 좌측에 보시면 [눈모양 아이콘]이 있습니다. 따봉의 [눈모양 아이콘]을 클릭해 볼게요~
<따봉 컨텐츠 숨김처리>
컨텐츠가 숨김처리 되니 밑에 있는 다른 컨텐츠를 편하게 클릭이 가능해 졌습니다^^
※ 해당기능은 애니메이션 컨텐츠 편집툴에서만 숨김처리가 적용됩니다.
미리보기나 애니메이션 설치시 숨김처리 상관없이 모든 컨텐츠가 출력됩니다.
7. 컨텐츠 삭제
삭제하고싶은 레이어의 [휴지통 아이콘] 클릭하시면 해당 레이어를 삭제할 수 있습니다.
단, 컨텐츠와 블록 모두 복구가 안되니 꼭 신중하게 삭제를 해주세요~
미리보기를 하니 아직 애니메이션 이동이나 동작이 없어서 허전하시죠?
그럼 이제 본격적으로 블록 추가/수정 방법과 시간별 위치조정 기능에 대해 알아보도록 할까요?!
블록 설정에 대한 관련글은 다음글을 통해 확인해 주세요~
열기 닫기