해보고 알림창(플래시)광고 제작 가이드.

Presentation on theme: "해보고 알림창(플래시)광고 제작 가이드."— Presentation transcript:

1 해보고 알림창(플래시)광고 제작 가이드

2 Content 1. 플래시광고 가이드 제작 목적 2. 플래시제작 기본 사항 3. 알림창 플래시광고 구현 화면
4. 디자인 작업 시 참고 사항 1) 사이즈 및 화면 구성 2) 플래시 화면 설명 3) btn 무비클립 설명 4-1) btn 무비클립 설명 (무비 심볼의 좌측 또는 우측에 닫기 버튼을 이동 할 경우) 4-2) btn 무비클립 설명 (버튼을 원하는 위치로 이동) 5) Movie 무비클립 설명 6) 타임라인 action 설명 (닫기 버튼) 7) Js 파일 (링크 및 배경 투명 설정) 8) 타임라인 action 설명 (다시 보기) 9) 폴더구조 및 파일 네이밍 10) 완료작업 시 테스트 확인 1) 플래시 위치 및 특징 2) 옳은 적용의 예 3) 잘못된 적용의 예

3 1. 플래시광고 가이드 제작 목적 플래시광고 가이드 제작 목적은 플래시의 기본적인 기능을 구현하기 위해 가이드를 제작 하는데 목적이 있음. 플래시광고를 컨트롤 할 수 있게 닫기 버튼과 다시보기 버튼의 구현과 클릭 시 사이트 링크(외부파일 JS파일 링크 소스 적용) 플래시 제작 시 아래 주소의 플래시를 기본적인 기능 참고 하시고 작업에 들어가시면 되겠습니다. (샘플 파일과 같은 파일)

4 2. 플래시 제작 기본 사항 flash 설정 1) 사이즈 및 화면 구성 사이즈 : 320 x 180 (권장사항)
2. 플래시 제작 기본 사항 1) 사이즈 및 화면 구성 flash 설정 사이즈 : 320 x 180 (권장사항) FPS : 30.00 Action Script 3.0 애니메이션은 무비클립 심볼로 제작 배경 : 없음 Scene 적용 : 없음 화면 상단, 왼쪽으로 경계선이 만들어지지 않도록 구성할 것. 플래시 용량: 3M가 미만

5 2. 플래시 제작 기본 사항 타임라인에 actiom , btn, movie 3개의 레이어가 있습니다.
2. 플래시 제작 기본 사항 2) 플래시 화면 설명 타임라인에 actiom , btn, movie 3개의 레이어가 있습니다. action 닫기버튼의 액션과 에니매이션의 액션이 들어있는 곳입니다. btn 닫기버튼의 무비클립 입니다. movie 에니매이션의 무비클립입니다.

6 2. 플래시 제작 기본 사항 3) btn 무비클립 설명 타임라인 닫기버튼 btn, 무비클립 네임은 ui_mc (꼭 닫기 버튼 무비클립 네임을 ui_mc로 해야함.) 타임라인 btn은 닫기버튼 무비가 마지막까지 재생되면 그 다음에는 다시보기 버튼이 나타 나야 함.

7 2. 플래시 제작 기본 사항 scene1 에서 movie를 더블 클릭하여 들어가 레이어 첮번째 AS에서 2프레임 레이블 네임을
2. 플래시 제작 기본 사항 4-1) btn 무비클립 설명 ( 무비 심볼의 좌측 또는 우측에 닫기 버튼을 이동 할 경우) scene1 에서 movie를 더블 클릭하여 들어가 레이어 첮번째 AS에서 2프레임 레이블 네임을 r1 ,r2 ,r3 오른쪽일 경우 l1, l2, l3 왼쪽일경우 순으로 지정해주면 위치가 오른쪽 또는 왼쪽으로 버튼이 이동하게 된다.

8 2. 플래시 제작 기본 사항 4-2) btn 무비클립 설명 (버튼을 원하는 위치로 이동) 닫기버튼 원하는 위치로 이동시 타임라인 btn, 무비클립을 터블 클릭하여 무비클립에 들어가 레이어 btn_allign 를 원하는 위치로 이동

9 2. 플래시 제작 기본 사항 타임라인 movie 무비클립 네임은 ani_mc 입니다. movie은 에니매이션 무비클립 입니다.
2. 플래시 제작 기본 사항 5) Movie 무비클립 설명 타임라인 movie 무비클립 네임은 ani_mc 입니다. movie은 에니매이션 무비클립 입니다.

10 2. 플래시 제작 기본 사항 타임라인 action의 내용 입니다.
2. 플래시 제작 기본 사항 6) 타임라인 action 설명 (닫기 버튼) 타임라인 action의 내용 입니다. btn의 닫기 버튼의 세부적인 액션입니다. 옵션의 세부사항을 주석 처리해 설명 하였습니다. 닫기버튼의 무비클립 네임 ui_mc의 버튼이 따라다니며 마우스 가져갈 시 나따나는 기능의 액션의 세부 옵션들 입니다.

11 2. 플래시 제작 기본 사항 위의 소스는 수정하시면 안됨
2. 플래시 제작 기본 사항 6) 타임라인 action 설명 ( 외부 링크 ) 위의 소스는 수정하시면 안됨 플래시 이미지 클릭 시 홈페이지 링크 파일 액션들 입니다. (주석 처리한 내용들을 참고) “link( )”의 외부파일 js 로 링크 할 수 있음 홈페이지 링크(플래시 내부에서 링크를 설정하지 마세요) 플래시 내부에서 링크가 가능하나 외부파일로 링크를 할 수 있게 되어 있음(주석처리 되어있음)

12 2. 플래시 제작 기본 사항 플래시 파일명 asmple_01.swf 1 2 3 4 5 5 3
2. 플래시 제작 기본 사항 7) sample_01.Js 파일 ( 메모장 또는 에디터 에서 수정 ) 1 2 3 4 5 5 3 플래시 이미지를 클릭시 원하는 링크 주소 플래시 사이즈 with=“320” hright=“180” id 플래시 제목 , name 플래시 제목 배경이 투명하게 transparent 로 설정 플래시 파일명 asmple_01.swf 1 5 2 3 4

13 타임라인에서 movie를 더블 클릭해서 에니매이션 무비클립으로 들어가면 AS의 타임라인의 마지막에 액션은 넣어주어야 함.
2. 플래시 제작 기본 사항 8) 타임라인 action 설명 ( 다시 보기) 타임라인에서 movie를 더블 클릭해서 에니매이션 무비클립으로 들어가면 AS의 타임라인의 마지막에 액션은 넣어주어야 함. “AniEnd”마지막까지 무비가 돌아 가면 다시 보기 버튼이 나옴

14 2. 플래시 제작 기본 사항 9) 폴더구조 및 파일 네이밍 기본 소스폴더(폴더가 있어야 액션이 정상 작동) 플래시 링크 소스 플래시 작업 완료 시 swf 파일과 js 파일을 같은 네이밍(파일명)으로 만들기 원하는 파일명으로 네이밍 변경가능 , sample.swf 파일과 sample.js caurina(기본 소스폴더) 폴더가 있을 시 액션이 정상적으로 작동

15 2. 플래시 제작 기본 사항 10) 완료작업 시 테스트 확인
2. 플래시 제작 기본 사항 10) 완료작업 시 테스트 확인 테스트 시 서버에 올린 후 인터넷 브라우져로 닫기 버튼기능과 다시보기 버튼 기능, 링크가 걸리는지 최종 확인 플래시 무비가 플레이 될 때 마우스가 올라가면 정지하며 닫기 버튼이 나옴, 닫기 버튼을 클릭하면 창이 닫힘. 플래시 무비가 마지막 까지 플레이 되면 다시 보기 버튼이 자동으로 생김. 다시 보기 버튼 클릭하면 플레이 됨. 플래시의 움직이는 이미지를 클릭 시 링크. 위와 같은 기능으로 플래시 무비가 구현 되어야 함. 알림창 광고가 실 서버에 서비스 될 때에는 인터넷 브라우져에 없이 플래시광고가 보여지게 됨.

16 3. 알림창 플래시광고 구현 화면 검색 키워드에 따라 모니터 오른쪽 하단 플래시가 나타남.
3. 알림창 플래시광고 구현 화면 검색 키워드에 따라 모니터 오른쪽 하단 플래시가 나타남. 익스플로러 창에 종속되지 않고 독립적으로 구현 광고창과 모니터 화면과의 경계선이 없음 플래시 이미지 클릭 시 설정한 사이트로 링크

17 4. 디자인 작업 시 참고 사항 1) 플래시 위치 및 특징 검색 키워드에 따라 모니터 오른쪽 하단 플래시가 나타남.
익스플로러 창에 종속되지 않고 독립적으로 존재 광고창과 모니터 화면과의 경계선이 없음

18 4. 디자인 작업 시 참고 사항 이어지도록 제작 2) 옳은 적용의 예 배경이 없기 때문에 모니터 화면 위에 자연스럽게 얹혀짐.
화면 상단과 왼쪽 경계 면이 나뉘지 않고 자연스럽게 이어지도록 제작

19 4. 디자인 작업 시 참고 사항 3) 잘못된 적용의 예 흰색 배경이 적용돼 있음.
흰색, 알파값 0%의 투명한 배경도 적용 불가. 화면 구성에서 상단에 캐릭터가 잘려나가는 경계선이 생김. 알림창 광고는 모니터 화면에 자연스럽게 얹혀지는 특징을 갖고 있기 때문에 상단, 왼쪽 경계선이 생겨 잘려나가지 않게 디자인 해야 함.

20 감사합니다.