Transcript 슬라이드 1

전자상거래 실무
PART 2. 준비 작업
9주차 – HTML/스내그잇(SnagIt)
10주차 – 포토샵의 개요/포토샵 활용 방법
11주차 – 플래시를 이용한 메뉴 만들기/Action 스크립트 만들기
12주차 – 인트로 화면 만들기/스위시(Swish 2.0)
2. 준비 작업
01
02
03
04
05
HTML
스내그잇(SnagIt)
포토샵을 이용한 이미지 만들기
플래시(Flash MX)를 이용한 메뉴 만들기
스위시(Swish 2.0)
01 HTML
1.
2.
3.
4.
HTML의 개요
태그의 기본 구조
표 만들기
아이프레임 만들기
전자상거래 실무 - 인터넷과 전자 상거래
1. HTML의 개요
HTML이란

HTML(Hyper Text Markup Language)의 약자로 하이퍼
텍스트 문서를 제작하는데 사용되는 웹 표준 언어로서
태그(Tag)라는 개개의 명령어로 이루어진다.
HTML 문서에서 사용되는 태그의 형식
태그의 형식
예제 태그
<태그>내용</태그>
<Title>제목</Title>
<태그>
<br>, <p>, <meta>, <hr>, <img>
<태그 속성=인자>내용</태그>
<Font Color=“red”>내용</Font>
Page : 4
전자상거래 실무 - 인터넷과 전자 상거래
2. 태그의 기본 구조
HTML의 기본구조
Page : 5
전자상거래 실무 - 인터넷과 전자 상거래
2. HTML의 기본 구조
HTML의 특징




HTML 태그는 시작태그<..>와 종료태그</..> 쌍으로 이
루어져 작업한다.
HTML은 텍스트로 작성되어 크기가 작아 웹에서 빠르게
전송될 수 있다.
HTML 문서는 컴퓨터의 기종에 독립적으로 기종에 관계
없이 문서를 표시한다.
HTML 문서는 HTML을 번역하는 브라우저만 나타낼 수
있다.
Page : 6
전자상거래 실무 - 인터넷과 전자 상거래
2. HTML의 기본 구조
본문에 사용되는 태그

이미지 삽입 태그
<img src=“이미지 파일 경로(주소)” alt=“그림설명”>

문서 연결 태그
<A href=“파일 이름”>‥‥</A>

표 만들기 태그
<Table>‥‥ </Table>
Page : 7
전자상거래 실무 - 인터넷과 전자 상거래
3. 표 만들기
기본 명령어
기본 명령어
기
능
<Table>‥‥</Table>
표의 처음과 끝을 의미
<tr>‥‥</tr>
테이블의 가로줄 지정
<th>‥‥</th>
테이블 안의 제목 지정
<td>‥‥</td>
한 셀을 만듬
<caption>‥‥</caption> 표 바로 위에 제목을 지정
Page : 8
전자상거래 실무 - 인터넷과 전자 상거래
3. 표 만들기
<tr>명령어 속성
부가적 속성
기 능
Cellspacing = “수치”
셀과 셀 사이의 간격을 조정
Cellpadding = “수치”
셀 내부의 간격 조정
Width=“수치”
가로 넓이 지정
height=“수치”
세로 높이 지정
border=“수치”
테두리 두께 지정
bgcolor="색명“ or "색상코드명” 표의 배경색 지정
Page : 9
전자상거래 실무 - 인터넷과 전자 상거래
3. 표 만들기
<td>명령어 속성
부가적 속성
기 능
Colspan = “가로 셀 수”
가로 셀 병합
Cellpadding = “세로 셀 수”
셀 내부의 간격 조정
nowarp
테이블의 크기를 고정
width=“수치”
셀의 너비를 조정
align=left, center, right
셀 안의 수평 정렬 지정
valign=top, middle, bottom, baseline 셀 안의 수직 정렬 지정
Page : 10
전자상거래 실무 - 인터넷과 전자 상거래
3. 표 만들기
표 만들기 예제
Table 태그를 이용한 결과
HTML Source
Page : 11
전자상거래 실무 - 인터넷과 전자 상거래
4. 아이프레임(IFRAME) 만들기
HTML 문서 내에 다른 HTML 문서를 보여주고자 할 때 사용된다.
(익스플로러 전용 태그)
IFRAME 명령어
부가적 속성
기 능
src=“문서 경로(주소)”
아이프레임 내에 보여줄 HTML 문서의 경로를 지정
width=“수치”
너비를 지정
height=“수치”
높이를 지정
marginwidth, marginheight
문서 내용의 가로/세로 여백을 지정
frameborder=“0”, “1”
테두리의 “있음”, “없음” 지정
scrolling=“yes”, “no”, “auto” 프레임의 스크롤바 지정, defalt 값은 “auto”로 된
다.
name
아이프레임의 이름 지정
Page : 12
전자상거래 실무 - 인터넷과 전자 상거래
4. 아이프레임(IFRAME) 만들기
IFRAME 예제
Page : 13
02 스내그잇(SnagIt)
1. 스내그잇의 개요
2. 스내그잇의 활용 방법
전자상거래 실무 - 인터넷과 전자 상거래
1. 스내그잇(SnagIt)의 개요
스내그잇이란?
전자 상거래 사이트를 구축할 경우 회사 로고나
각종 이미지 등이 그림으로 필요하다. 이때 기존
의 이미지 중 필요한 부분만 캡처하여 유용하게
사용할 수 있는 프로그램 중의 하나가 스내그잇
(SnagIt)이다.
Page : 15
전자상거래 실무 - 인터넷과 전자 상거래
1. 스내그잇(SnagIt)의 개요
스내그잇의 특징




화면의 모든 그림을 캡처하여 그래픽 파일로 저장
이 가능하며, 프린터나 모니터로 출력 할 수 있다.
윈도우나 창, 아이콘, 버튼, 메뉴 등을 캡처할 수
있다.
그림이나 이미지 등을 반복적으로 캡처할 수 있다.
지원하는 파일 형식은 gif, jpeg, tif, pcx, png,
bmp, avi 등이다.
Page : 16
전자상거래 실무 - 인터넷과 전자 상거래
1. 스내그잇(SnagIt)의 개요
화면 설명
① 메뉴 표시줄 : Input, Output, Filters,
Options, Tools, Help의 주메뉴와 부
메뉴가 있어 필요한 기능을 제어할
수 있다.
② 도구모음 : 간단한 기능을 아이콘화
하여 활용시 편리하다.
③ 캡처 타입 설정 : 캡처할 타입을 선택
하는 기능으로 이미지 타입, 텍스트
타입, 비디오 타입 등이 있다.
④ 캡처 설정 상태 보기 : 캡처할 때 미
리 설정한 기능들을 확인할 수 있다.
⑤ 캡처 단축키 : 캡처 작업을 수행하기
위한 단축키를 알려준다.
Page : 17
전자상거래 실무 - 인터넷과 전자 상거래
2. 스내그잇의 활용 방법
회사로고 캡처하기
① 익스플로러를 실행하여‘꽂과 나무 사랑’의 홈페이지
(http://www.neoffice.com/ftlove)로 이동한다.
② 바탕화면에서 스내그잇 아이콘( )을 더블클릭하여 프로그램을 실행한다.
③ 스내그잇 툴이 화면에 표시되면 메뉴 중에 [Input]-[Region]을 선택한 다
음, 캡처 타입 설정에서 이미지 캡처(
)를 선택한다.
④ 캡처 단축키 [Ctrl]+[T] 를 누른다.
⑤ 꽃과 나무 사랑’의 홈페이지에서 캡처할 영역으로 마우스 포인터를 이동한
다음 왼쪽 위에서 오른쪽 아래까지 원하는 크기만큼 대각선 방향으로 마우
스를 누르고, 끌어다 놓으면 캡처된다.
⑥ 캡처한 그림은 [Capture Preview] 창에 나타난다. 저장( ) 아이콘을 클릭
하여 저장할 위치를 지정한 다음, 파일명을 logo.jpg로 하여 저장한다.
Page : 18
전자상거래 실무 - 인터넷과 전자 상거래
2. 스내그잇의 활용 방법
플래시 화면 캡쳐하기
①
②
익스플로러를 실행하여 Fashion
cody(http://sample.www44.freesell.co.kr/) 홈페이지로 이동한
다. 메인화면에서 처음에 보이는 플래시 이미지만 캡처한다.
캡처한 이미지의 사이즈를 630px×200px로 조정하여 파일명을
“main.jpg”로 저장한다.
Page : 19
03 포토샵을 이용한
이미지 만들기
1. 포토샵(Photoshop)의 개요
2. 포토샵 활용 방법
전자상거래 실무 - 인터넷과 전자 상거래
1. 포토샵(Photoshop)의 개요
포토샵이란?


어도비 포토샵(Adobe Photoshop) 프로그램은 그
래픽 프로그램 중 가장 강력한 기능을 가진 이미
지 편집 프로그램
간단한 이미지 제작에서 사진 편집, 웹 디지털 이
미지 제작 등의 비트맵 이미지 편집 분야까지 가
장 많이 활용되는 프로그램
Page : 21
전자상거래 실무 - 인터넷과 전자 상거래
1. 포토샵(Photoshop)의 개요
포토샵의 특징






여러 이미지를 하나로 합성
기존 이미지 정보 보정
다양한 텍스트를 삽입, 편집, 이미지화
아이콘, 인트로 이미지, 배너 이미지 제작
플래시, 프리미어 등의 프로그램과 호환성 우수
psd, gif, jpeg, png, bmp 등으로 저장가능
Page : 22
전자상거래 실무 - 인터넷과 전자 상거래
2. 포토샵 활용방법
포토샵의 초기 화면
① 메뉴 표시줄 : 포토샵에서 사용하는 기능
을 메뉴 형식으로 표시한 것이다.
② 도구 모음 옵션 : 선택한 도구별로 옵션
을 설정할 수 있다.
③ 툴 박스 : 그림을 그리기 위한 도구를 모
아놓은 상자처럼 모든 그래픽 작업에 필
요한 도구를 모아 놓은 곳이다.
④ 이미지 작업 창 : 새 파일을 만들거나 작
업 중인 이미지를 표시한다.
⑤ 팔레트 : 도구 상자의 세부적인 기능을
효율적으로 활용하도록 제공되어, 작업
창에서 이미지를 수정, 편집 시 보조 옵
션으로 사용할 수 있다.
⑥ 상태 표시줄 : 현재 작업 중인 내용이나
선택한 도구에 대한 설명을 표시하는 곳
이다.
Page : 23
전자상거래 실무 - 인터넷과 전자 상거래
2. 포토샵 활용방법
회사소개 인트로 이미지 만들기
① 바탕화면의 포토샵 아이콘을 더블 클릭한다.
② [File]-[Open] 메뉴로 스내그잇에서 캡처한 회사소개 자료실 인트로 이미지 파일을
불러온다.
③ 작업 창 크기 설정 : 메뉴 표시줄에서 [File]-[New]를 선택하여 [New] 창이 나오면
파일 이름, 너비, 높이, 해상도 등을 설정하고, [OK] 버튼을 클릭한다.
④ 바탕화면의 이미지를 제작하기 위해 두 작업 창을 적당히 배열한다. 전경색을 선택하
기 위해 예제 이미지 창을 선택한 다음, 도구 상자에서 스포이드(
)를 클릭하고, 마
우스로 예제 이미지의 바탕색을 선택한다. 도구 모음과 컬러 팔레트의 색상표을 보면
청녹색 부분은 전경색(Foreground Color) 아이콘, 흰색 부분은 바탕색(Background
Color) 아이콘으로 구분된다.
⑤ 전경색을 넣기위해 실습 창(company-intro-img)을 선택하고, 메뉴에서 [Select][All]을 선택하면 작업 창 외곽으로 점선이 표시된다. 또 [Edit]-[Fill]을 선택하면
[Fill] 창이 나타난다. 여기서 [Contents] 항목의“전경색(Foreground Color)”을 선택
하고 [OK]버튼을 클릭하면 전경색이 그려진다.
Page : 24
전자상거래 실무 - 인터넷과 전자 상거래
2. 포토샵 활용방법
회사소개 인트로 이미지 만들기
⑥ [Select]-[Deselect]를 선택하면 작업 창 외곽의 점선이 사라진다.
⑦ 꽃 이미지를 따기 위해 도구 상자에서 올가미(
택한다.
)를 선택하고, 예제 이미지 창을 선
⑧ 꽃 이미지 외곽 부분에서 마우스 버튼을 누르면서 끝부분을 따라 조금씩 움직인다.
단, 조금씩 움직일 때마다 마우스 버튼을 누르고, 처음 부분과 마지막 부분이 만나면
꽃 이미지가 점선으로 반짝인다.
⑨ 꽃 이미지의 이동은 도구 상자에서 이동 도구( )를 선택하고, 예제 이미지창의 반짝
이는 꽃 이미지를 마우스로 선택하여 실습 창(company-intro-img)으로 끌어오면
된다. 이때 마우스나 방향키로 적당한 위치를 선택한다.
⑩ 텍스트 입력을 위해 도구 상자에서 텍스트 도구( )를 선택하고, 옵션 모음줄에서 글
꼴을 Gulim, 크기를 18 pt, 색상은‘흰색’을 선택하고, 마우스로 텍스트를 입력할 적
당한 위치를 선택한 다음, 텍스트를 입력한다.
Page : 25
전자상거래 실무 - 인터넷과 전자 상거래
2. 포토샵 활용방법
회사소개 인트로 이미지 만들기
⑪ 텍스트 입력이 끝나면 도구 상자
에서 이동 도구(
)를 선택한
다음, 적당한 위치로 이동한다.
⑫ 파일 저장은 포토샵 파일과 Gif
파일 두가지로 한다. 메뉴 표시
줄에서 [File]-[Save As]을 선
택하고, Photoshop 포맷(*.PSD)
으로 저장한다.(파일명:
company-intro-img.psd)
Page : 26
전자상거래 실무 - 인터넷과 전자 상거래
2. 포토샵 활용방법
회사 로고 만들기
① 인터넷에서 로고 제작 대상 사이트인 http://www.daum.net로
이동한다.
② 스내그잇(SnagIt) 프로그램을 이용하여 회사 로고를 캡처하여
“daum-logo.gif”로 저장한다.
③ 포토샵 프로그램을 실행시킨다.
④ 메뉴 표시줄에서 [File]-[Open] 항목을 선택하여 스내그잇에
서 저장한“daumlogo.gif”파일을 불러온다.
⑤ 작업 창의 크기를 설정하기 위해 메뉴 표시줄에서 [File][New]을 선택하여 [New] 창이 나타나면 파일 이름, 너비, 높
이, 해상도 등을 설정한다.
Page : 27
전자상거래 실무 - 인터넷과 전자 상거래
2. 포토샵 활용방법
회사 로고 만들기
⑥ 회사 로고의 이미지를 제작하기 위해 불러온 이미지와 새 창을
적당한 위치에 배열한다. 이때 도구 상자의 돋보기를 이용하여
이미지를 적당한 크기로 확대한다.
⑦ 저장을 위해 [File]-[Save As]을 클릭하여, 파일명을 “daumlogo,psd”로 저장한다. 또 [File]-[Save for Web]을 선택하여
[Save For Web] 저장창의 [2-Up] 탭에서 [GIF]를 선택한 다
음 [Save] 버튼을 클릭하면 “daum-logo1.gif “로 저장된다.
Page : 28
전자상거래 실무 - 인터넷과 전자 상거래
2. 포토샵 활용방법
무지개 만들기
①
②
③
④
⑤
[File]-[New]에서 작업 창의 크기를 조절한다
무지개 색을 칠할 영역을 선택한다.
무지개 색깔 중 하나를 선택한다.
페인트 통 툴을 이용하여 색깔을 채운다.
같은 방법으로 4색의 무지개를 만든다.
Page : 29
전자상거래 실무 - 인터넷과 전자 상거래
2. 포토샵 활용방법
무지개 만들기
⑥ 투명도를 90% 정도로 조절한다.
⑦ 파일 이름을“무지개.gif”로 입력하여 저장한다.
Page : 30
04 플래시(Flash MX)를
이용한 메뉴 만들기
1.
2.
3.
4.
5.
6.
7.
플래시란?
플래시의 특징
플래시 초기 화면
플래시를 이용한 메뉴 만들기
Action 스크립트 작업하기
쇽웨이브 파일(SWF) 파일 만들기
플래시를 이용한 인트로 화면 만들기
전자상거래 실무 - 인터넷과 전자 상거래
1. 플래시란?

플래시는 매크로미디어(Macromedia)사에서 제작한
벡터(Vector) 형식 기반의 웹 애니메이션 저작 도구
이다.

작은 파일 용량과 다양한 기능을 지원할 수 있는 프
로그램이다

플래시가 널리 쓰이는 까닭은 전자 상거래 구축시 메
뉴 이미지나 각종 애니메이션 이미지 등을 쉽게 만들
어 활용할 수 있기 때문이다.
Page : 32
전자상거래 실무 - 인터넷과 전자 상거래
2. 플래시의 특징







벡터(Vector)형식 기반의 프로그램
다양한 애니메이션 기능 제공
강력한 애니메이션 기능 제공
뛰어난 압축기술 제공
스트리밍 기술 지원
오디오 파일 삽입 기능 제공
다른 웹용 그래픽 프로그램과의 호환성 우수
Page : 33
전자상거래 실무 - 인터넷과 전자 상거래
2. 플래시의 특징

비트맵이미지





픽셀이라고 하는 많은 점을 이용하여 표현
픽셀의 크기가 작을 수록 선명도가 높아짐
선명도가 높아질수록 이미지의 용량이 증가함
이미지를 크게 하면 모자이크 처리한 것처럼 보임
벡터 이미지



이미지 정보를 가지고 표현
이미지의 크기에 관계없는 일정한 선명도 유지
이미지 정보만을 저장하기 때문에 이미지 용량이 작음
Page : 34
전자상거래 실무 - 인터넷과 전자 상거래
3. 플래시 초기 화면
플래시 초기 화면
① 메뉴 표시줄(Menu Bar) : 플래시에서 사용되는 기능
을 메뉴 형식으로 표시한 곳이다.
② 도구 모음 막대(Tool Bar) : 플래시에서 자주 사용하
는 명령어에 대한 아이콘을 한 곳에 모아둔 곳이다.
③ 도구 상자(Toolbox) : 그리기와 애니메이션을 표현할
때 사용되는 다양한 그리기도구를 모아놓은 곳이다.
도구 상자에는 벡터 방식으로 그리기 작업을 자유스
럽게 할 수 있는 아이콘이 들어 있다.
④ 레이어(Layer) : 객체(오브젝트, Object)를 여러 개의
층으로 나누어 편집할 수 있게 하는 공간이다.
⑤ 타임 라인(Time line) : 계층 (레이어, Layer) 레이어와
프레임(Frame)을 사용하여 무비 컨텐츠를 만들고, 시
간에 따라 제어할 수 있다.
⑥ 무비 창(Stage) : 무비의 개별 프레임에 대한 컨텐츠
를 구성할 수 있고, 프레임에 직접 그리기나 객체를
삽입할 수 있다.
⑦ 패널(Panels) : 무비 제작에 필요한 각종 도구를 팔레
트 형식으로 모아 놓은 곳이다.
⑧ 속성 창(Property) : 플래시 작업 중 선택된 객체 속성
에 따라 자동으로 내용을 바꾸어 주는 기능이 있다.
Page : 35
전자상거래 실무 - 인터넷과 전자 상거래
4. 플래시를 이용한 메뉴 만들기
2단 메뉴 표
참고 사이트 http://www.neoffice.com/ftlove
Page : 36
전자상거래 실무 - 인터넷과 전자 상거래
4. 플래시를 이용한 메뉴 만들기
플래시 열고 작업하기
① 플래시 실행 : 바탕화면에서 플래시 아이콘을 눌러 플래시를 실행한다.
② 파일 저장 : 메뉴 표시줄의 [File]-[Save As]를 눌러 파일을 저장한다.
파일명은 “menu”로 한다. (확장자는‘fla’로 지정된다.)
③ 메인 무비 클립의 크기 조절 : 메뉴에서 [Modify]-[Document]를 선
택하거나 단축키([Ctrl]+[J])를 눌러 [Document Properties] 창을 나
타나게 한 후 Dimension 항목의 가로(width)와 세로(height) 항목에
적절한 값을 입력한다(가로 800픽셀, 높이 60픽셀로 조정한다.)
Page : 37
전자상거래 실무 - 인터넷과 전자 상거래
4. 플래시를 이용한 메뉴 만들기
레이어 추가와 이름 변경하기

레이어 추가
레이어 추가 버튼을 누르면 레이어가 추가된다.

레이어 이름 변경
레이어 이름 영역 부분을 마우스로 더블클릭한 후 레이어 이름을
변경한다. 단, 나열된 레이어 이름 순서를 지킨다.
Page : 38
전자상거래 실무 - 인터넷과 전자 상거래
4. 플래시를 이용한 메뉴 만들기
해당 레이어 작업하기

로고 레이어 작업하기
① 로고 레이어를 선택한다.
② 로고 불러오기 : 스내그잇 프로그램에서 캡처하여 저장한 loge.gif
이미지를 불러온다. 메뉴에서 [File]-[Import]를 눌러 loge.gif 이
미지를 선택하고, [열기]버튼을 클릭한다.
③ 로고 위치 이동 : 불러온 로고를 화살표 도구( )를 이용하여 적당
한 위치로 이동한다.
④ 로고 크기 조절 : 조절 도구( )을 이용하여 크기를 조절한다.
⑤ 로고 레이어를 잠근다.
Page : 39
전자상거래 실무 - 인터넷과 전자 상거래
4. 플래시를 이용한 메뉴 만들기
해당 레이어 작업하기

로고 투명 버튼 만들기
① 로고 투명버튼 레이어를 선택한다.
② 메뉴에서 [Insert]-[New Symbol..]이나 단축키[Ctrl]+[F8]를 누
르면 [Create New Symbol] 대화상자가 나타난다. Name에 “투명
버튼”이라고 입력하고, “Button”을 선택한 후 [OK] 버튼을 클릭한
다.
③ 타임라인의 화면이 변경되면서 무비 창에“+”(십자형)이 표시된다.
④ [Windows]-[Library] 메뉴를 선택하거나 키를 누르면 Library 패널
이 나타난다. Library 패널에서 투명 버튼을 클릭하여 무비 창으로
끌어 온다. 끌고 온 투명 버튼을 조절 도구( )를 이용하여 적당한
크기로 조절한다.
⑤ 로고 레이어 작업하기의 ④와 같이 개별 레이어 잠그기를 한다.
Page : 40
전자상거래 실무 - 인터넷과 전자 상거래
4. 플래시를 이용한 메뉴 만들기
버튼 만들기

버튼을 만드는 목적
버튼을 이용하여 다른 프레임 또는 URL로 이동할 수 있다.

프레임
타임라인의 한칸 한칸을 프레임이라고 한다. 프레임은 한 장의
사진이라고 할 수 있으며, 여러 프레임이 모여서 애니메이션 기
능을 구현할 수 있다.

버튼의 기본 프레임
Page : 41
전자상거래 실무 - 인터넷과 전자 상거래
4. 플래시를 이용한 메뉴 만들기
해당 레이어 작업하기

주 메뉴 레이어 작업하기
① 주 메뉴 레이어를 선택한다.
② 텍스트 도구( )를 선택하고, 속성 창의 글꼴을 굴림, 16포인트, 굵
게로 선택한다.
③ 무비 창에서 텍스트를 입력할 적당한 위치로 마우스 포인터를 이동
한 후 주 메뉴의 텍스트를 각각 입력한다. 이때 마우스 포인터의 모
양은 ( )과 같다.
④ 화살표 도구( )을 선택하고, 무비 창에 입력된 텍스트를 모두 선택
한다. 또 도구모음의 정렬 패널( )을 선택하여 Align에 패널 창을
나타낸다.
Page : 42
전자상거래 실무 - 인터넷과 전자 상거래
4. 플래시를 이용한 메뉴 만들기
해당 레이어 작업하기

주 메뉴 레이어 작업하기
⑤ Align 패널 창에서 Align 항목의 Align top edge 버튼( )을 클릭하
고, Match Size 항목의 Match width 버튼( )을 클릭하여 주 메뉴
텍스트 심벌의 폭을 동일하게 만든다. 윗 모서리를 가지런히 정렬시
킨다.
⑥ 버튼을 만들기 위해 마우스로‘회사소개’텍스트만 선택하고,
[Insert]-[Convert to Symbol..] 또는 키를 누르면 [Convert to
Symbol] 대화상자가 나타난다. Name에‘버튼’을 입력하고,
Behavior에‘Button’을 선택한다.
Page : 43
전자상거래 실무 - 인터넷과 전자 상거래
4. 플래시를 이용한 메뉴 만들기
해당 레이어 작업하기

주 메뉴 레이어 작업하기
⑦ [회사소개] 버튼을 마우스로 더블클릭하면 타임 라인이 버튼 심벌
편집 모드로 바뀐다.
⑧ [F6]키를 세 번 눌러서 Up 프레임의 객체를 똑같이 Over, Down,
Hit 프레임에 복사한다. Over 프레임과 Down 프레임의 텍스트는
Color Swatches 패널에서 파란색으로 바꾼다.
⑨ Hit 프레임에서 사각형 도구( )를 이용하여‘회사소개’텍스트를 감싸
는 사각형을 그린다.
⑩ 타임라인 아래에 표시된 Scene 1을 선택하면 초기 화면으로 되돌아
오면서 버튼이완성된다.
⑪ 로고 레이어 작업하기의 ④와 같이 작업이 끝난 레이어를 잠근다.
Page : 44
전자상거래 실무 - 인터넷과 전자 상거래
5. Action 스크립트 작업하기
제어 레이어 Action 스크립트 작업하기
① 제어 레이어를 선택하고, 레이어 잠금을 푼 후 1번 프레임을 선택
한다.
② 타임라인 1번 프레임에서 마우스 오른쪽 버튼을 선택하여 액션
(Actions)을 선택한다. 액션 속성 창에서 [Actions]-[Movie
Control]-[Stop]을 선택하고, 액션 창 제목 표시줄을 선택하면 원
래 화면으로 되돌아온다. 되돌아온 화면의 제어 레이어 1번 프레
임을 보면 액션 스크립트가 적용된 것을 알 수 있다.
 제어 레이어를 만드는 목적
Stop Action을 주어서 특정 프레임에서 전체 메뉴 애니메이션 멈추게 하는
레이어이다. 따라서 Stop Action은 2단 메뉴 플래시에서 사용하는 기본 액션
이다.
Page : 45
전자상거래 실무 - 인터넷과 전자 상거래
5. Action 스크립트 작업하기
주 메뉴 레이어에 액션 스크립트 작업하기
① 주 메뉴 레이어를 선택하고, [회사 소개] 버튼을 선택한 후 마우스
오른쪽 버튼을 클릭하여 액션을 선택한다.
② 액션 속성 창에서 [Movie Control]-[goto]을 선택하고, 액션 창
의 우측에서 Frame 항목에“5”를 입력한다.
③ 액션 스크립트에서“on (release) { “을 선택하면 액션 창의 선택
이벤트(Event) 항목을 선택할 수 있는 기능이 나타난다. 여기서
“Release”기능이 선택되어 있으나 이를 해제하고, “Roll Over”기
능을 선택한다.
④ 액션 창 속성 제목 표시줄을 선택하여 원래 화면으로 되돌아오면
[회사소개] 버튼에 대한 goto 액션 스크립트 작성이 완성된다.
⑤ 같은 방법으로 [상품소개] 버튼은 10번 프레임으로, [쇼핑가이드]
버튼은 15번 프레임으로, [커뮤니티] 버튼은 20번 프레임으로 이
동하는 goto 액션 스크립트를 RollOver 마우스 이벤트에 대해서
각각 작성한다.
Page : 46
전자상거래 실무 - 인터넷과 전자 상거래
5. Action 스크립트 작업하기
goto 액션의 이벤트(Event) 항목의 특징
Page : 47
전자상거래 실무 - 인터넷과 전자 상거래
6. 쇽웨이브 파일(SWF) 파일 만들기
쇽웨이브 파일이란?

플래시로 작업한 파일을 저장할 경우 확장자는 fla로 저장
된다. 이 파일을 무비로 보여주기 위해서는 쇽웨이브 파일
로 저장해야 하는데, 이 쇽웨이브 파일의 확장자는 swf이
다.

이는 HTML문서에 플래시로 작업한 파일을 삽입할 때 사
용하는 확장자의 한 형태이다.

쇽웨이브 파일(SWF)을 만들기 위해서는 [File]-[Publish]
를 선택하면 된다.
Page : 48
전자상거래 실무 - 인터넷과 전자 상거래
6. 쇽웨이브 파일(SWF) 파일 만들기
Flash 6.0/MX 버전을 사용할 경우 준비사항
그림과 같이 [File]-[Publish Settings]-[Flash]를 선택하여
‘Compress Movie’항목의 체크 표시를 해제한 후 퍼블리싱
(Publishing)해야 한다.
Page : 49
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
빈 페이지 만들기
[File]-[New]를 클릭하여 새로운 페이지를 만든 후 [Modify][Document]를 클릭하여 페이지의 크기나 속성을 설정한다. 가
로는 630px, 세로는 200px로 고정하고,Frame Rate는 30fps의
속도로 설정한다.
Page : 50
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
파일 저장하기
파일을 생성하였으면 미리 저장을 하고 작업을 시작한다.
[File]-[Save]를 클릭하여
저장한다. (저장할 때 파일 이름은 영문으로 한다.)
Page : 51
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
원무비 클립 만들기
① [Insert]-[New Symbol]을 클릭하여 새로운 심벌을 등록한다.
플래시에서 모션을 생성하기 위해서는 심벌이라는 객체가 필
요하다. Name에“원”을 입력하고 Behavior 에는“Graphic”을
선택한다.
②
이라는 경로가 보이면서“원”심벌을 만들 수 있
는 심벌 편집모드로 들어간다.
③ Tools에서
을 선택한 후 스테이지에 작은 크기의 원을 드래
그하여 그린다.
Page : 52
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
원 모션 만들기(작은 원이 커지는 모션)
①
을 클릭하여 심벌 편집 모드에서 빠져나온다.
② “원”심벌을 만들었으므로, 이를 사용하여 모션을 주는
작업을 하기 위해 [Window]-[Library]를 선택한다.
③ [Library] 창이 열리면서“원”심벌이 나타나면 스테이지
로 드래그하여 삽입한다. Timeline의 Layer1에 프레임
이 생기면서 원이 스테이지 위에 표시된다.
④ Layer 1의 15번 프레임에서 마우스 오른쪽 버튼을 클릭
하여 바로가기 메뉴 중 [Insert KeyFrame]을 선택하여
프레임을 삽입한다.
Page : 53
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
원 모션 만들기(작은 원이 커지는 모션)
⑤ 작았던 원이 커지면서 화면을 채우는 모션을 만들어야 하기 때문에
15번 프레임에서 삽입한 원을 확대한다. 도구상자에서 을 클릭,
스테이지에 있는 원을 선택하고 모서리를 밖으로 당겨 키워준다.
⑥ 1번 프레임과 15번 프레임 사이의 프레임에서 마우스 오른쪽 버튼
을 클릭하여, [Create Motion Tween]을 선택한다. 1번 프레임의 작
은 원과 15번 프레임의 큰 원 사이에 Motion Tween이 설정되어 작
은 원이 점점 커지는 모션Control]-[Test Movie]를 클릭해서 원이
커지는 무비를 확인할 수 있다.
⑦ 작은 원이 커지는 모션으로 화면을 채우기 위해서 5개 정도 만들어
화면에 배열해 보자. 하나는 만들었기 때문에 Layer 2가 Layer 1위
로 생겨나도록 레이어 생성( )을 클릭하여 새로운 레이어를 만든다.
⑧ [Library]에서 원을 선택하여 스테이지에 삽입하고, 같은 방법으로
5개를 만들어 화면에 고루 배열한다. 노란색 원이 피어나는 느낌을
갖도록 모션을 만든다.
Page : 54
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
배경이 서서히 등장하는 모션
① 레이어를 하나 생성하고, 45번 프레임에서 마우스 오른쪽 버튼을 클릭하
여 [InsterKeyFrame]을 선택하고 프레임을 삽입한다.
② [File]-[Import] 기능을 이용하여 스내그잇에서 작업한 배경 이미지
“main.jpg”를 불러온다.
Page : 55
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
배경이 서서히 등장하는 모션
③ 배경 이미지를 선택하고 [Insert]-[Convert to Symbol]을 선택하여
배경을 심벌로 등록한다.
④ 55번 프레임에서 마우스 오른쪽 버튼을 클릭하여 [Insert KeyFrame]
을 선택, 키프레임을 삽입한다.
⑤ 배경 이미지는 처음에는 안 보이다가 서서히 등장하는 것으로, 45번
프레임에 있는 이미지는 보이지 않게 설정한다. 45번 프레임을 선택
하고 배경 이미지를 선택한다. [Properties] 창에서 Color 를“Alpha”
로 선택한 후 수치는“0%”로 입력한다. 45번 프레임에는 이미지가 보
이지 않는다.
⑥ 45번 프레임과 55번 프레임 사이에서 마우스 오른쪽 버튼을 클릭하여
바로가기 메뉴 중 [Create Motion Tween]을 선택한다. 배경 이미지
가 사라졌다가 서서히 등장하는 모션이 완성된다.
Page : 56
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
중앙에서 열리는 무지개 모션 만들기
① 새 레이어를 삽입하고 포토샵에서 만들어 놓은“무지개.gif”를
불러온 후 [Insert]-[Create New Symbol]을 선택하여, 새 심
벌로 등록시켜 놓는다.
② 55번 프레임에서 마우스 오른쪽 버튼을 클릭하여 바로가기 메
뉴 중 [Insert KeyFrame]을 선택, 키프레임을 삽입하고, 중앙
에 무지개를 작게 만들어 놓는다.
③ 65번 프레임에서 마우스 오른쪽 버튼을 클릭하여 바로가기 메
뉴 중 [Insert KeyFrame]을 선택, 키프레임을 삽입하고, 무지
개를 넓게 만든다.
④ 55번 프레임과 65번 프레임 사이에서 마우스 오른쪽 버튼을
클릭하여 [Create Motion Tween]을 선택한다. 무지개 이미지
가 중앙에서 점점 커지는 모션이 완성된다.
Page : 57
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
Spring 모션 만들기
① 레이어를 새로 만들고, 60번 프레임에 키프레임을 삽입한다.
②
를 선택, 스테이지를 클릭하고 텍스트를 입력한다.
③
를 선택한 후 [Insert]-[Convert to Symbol]을 실행하여 Spring을
심벌 등록한다. Name에“Spring”을 입력하고, “Graphic”을 선택한다.
Page : 58
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
Spring 모션 만들기
④ [Insert]-[Convert to Symbol]을 클릭하여 그래픽 심벌로 등록된 Spring을 다
시 한 번 등록한다.
⑤ 이번에는 모션을 주기 위한 것으로 Behavior를“Movie Clip”으로 선택한다.
⑥ 커졌다 작아졌다 하는 텍스트“Spring”에 모션을 만들기 위해 스테이지에 있는
“Spring 무비”를 더블 클릭한다.
⑦ 30번 프레임과 60번 프레임에KeyFrame을 삽입한 후 30번 프레임에 있는
Spring 텍스트를 선택하고 크기를 늘려준다.
⑧ 30번 프레임 앞뒤로 프레임을 드래그하여 선택하고, 마우스 오른쪽 클릭하여
[Create Motion Tween]을 실행한다. (이 방식은 여러 모션을 한 번에 적용할
수있는 방법이다.) 1번 프레임에서는 작게 시작해서 30번 프레임에서는 커지고,
60번 프레임에서는 다시 작아지는 모션이 된다.
⑨
을 클릭하여“Spring”심벌 편집 모드에서 빠져나온 후 레이어를 하나
생성하고 60번 프레임에 KeyFrame을 생성한다. Library에서“Spring무비”를 드
래그하여 스테이지의 적정 위치에 올려놓은 후 다음 그림처럼 약간 비스듬하게
위치시킨다. ( ) 도구를 선택한 상태에서 스테이지에 있는“Spring”무비 클립
을 클릭하면, 모서리 쪽을 위 아래로 돌려서 비스듬하게 만들 수 있다.
Page : 59
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
설명 텍스트 무비 만들기
① 레이어를 하나 새로 추가하고 68번 프레임에 키프레임을 삽입한다.
②
도구를 선택하고, 사각형을 그려준다.
③ 이 사각형은 흰색이지만 약간 반투명으로 배경이 비쳐 보이게 만들
기 위해 [Windos]-[ColorMixer]를 선택한 다음 Alpha를 60%로
설정하여 반투명한 흰색을 만들어 준다.
Page : 60
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
설명 텍스트 무비 만들기
④ 빨간색 작은 사각형과“새봄단장은 패션코디에서 준비하세요”라는 문장을
입력한다.
⑤ 세 가지 모두를 선택하여 심벌로 등록한다.
⑥ “새봄단장은 패션 코디에서 준비하세요”라는 텍스트가 왼쪽에서 오른쪽으
로 튀어나오는 효과를 주기 위하여 73번 프레임에 키프레임을 입력한다.
“설명문구”심벌을 가운데에 위치시킨다.
⑦ 68번 프레임을 선택하고“설명문구”심벌의 위치를 왼쪽으로 옮겨준다.
Properties 창에서 Alpha 값을‘0’으로 설정한다.
⑧ 68번 프레임과 73번 프레임 사이에서 마우스 오른쪽 버튼을 클릭하여
[Create Motion Tween]을 선택한다. 설명 문구가 왼쪽에서 중앙으로 나
타나는 모션이 완성되었다.
⑨ “새봄맞이 패션코디”텍스트도 같은 방법으로 심벌로 등록한 다음 왼쪽에
서 나타나도록 설정한다.
Page : 61
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
액션 설정
① 레이어를 추가하고 플래시 무비가 모두 진행된 80번 프레임에 키
프레임을 추가한다.
② 80번 프레임을 클릭하고 [Window]-[Actions]을 선택한다.
③ Actions 창이 활성화되면, “stop( ):”을 입력한다.
Page : 62
전자상거래 실무 - 인터넷과 전자 상거래
7. 플래시를 이용한 인트로 화면 만들기
무비 테스트
[Control]-[Test Movie] 메뉴를 클릭하여 제작된 무비를 테스트
해 보고, [File]-[Export move]를 선택하여 swf 파일을 만든다.
(파일 이름은“main.swf”로 한다.)
Page : 63
05 스위시(Swish2.0)
1. 스위시란?
2. 스위시 활용 방법
전자상거래 실무 - 인터넷과 전자 상거래
1. 스위시란?

스위시는 호주 DJJ Holdings사에서 개발한
프로그램이다.

플래시 프로그램 없이도 애니메이션 효과를
누구나 쉽게 만들 수 있는 웹 애니메이션 툴
프로그램이다.
Page : 65
전자상거래 실무 - 인터넷과 전자 상거래
1. 스위시란?
특징


텍스트 효과, 이미지 효과, 사운드 효과 등을 제공하여 각
종 애니메이션 효과를 쉽게 구현할 수 있다.
텍스트 애니메이션 효과에 탁월한 기능이 있으며, 애니메
이션 효과에는 150여 개의 기능이 내장되어 있어서 플래시
(Flash)로 만들 때 복잡한 작업을 간단하게 할 수 있다.
사용 목적
애니메이션 효과를 구현할 때 드는 시간과 노력, 비용을 줄
이기 위해 사용한다.
Page : 66
전자상거래 실무 - 인터넷과 전자 상거래
2. 스위시 활용 방법
① 메뉴 표시줄 : 스위시 사용에 필요한 메뉴를 표시한다.
스위시 화면 구성
② 도구 모음줄 : 스위시 사용에 필요한 메뉴를 아이콘화
한 기능으로 표준, 삽입, 제어 도구모음이 한 줄로 나열
되어 있다.
③ 타임 라인 패널 : 선택한 이미지에 액션을 삽입, 레이어
나 액션을 삭제, 타임라인의 가로, 세로 높낮이 조절이
가능한 곳이다.
④ 아웃라인 패널 : 선택한 Scene에 텍스트, 이미지 등을
삽입, 삭제하고, 위치를 변경할 수 있으며, 레이어와 여
러 개의 프레임 등으로 구성되어 있다.
⑤ 툴 박스 : 무비 창 작업시 사용하는 도구를 모아놓은 곳
이다.
⑥ 무비 창 : 사용자가 실제로 무비 작업을 할 수 있는 공
간이다.
⑦ 오브젝트 패널 : 무비, 텍스트, 변형, 액션 등에 대한 오
브젝트 설정이 가능하며, 독립된 패널로 구성되어 있다.
⑧ 무비 창 조절 박스 : 무비 창의 크기를 조절할 수 있는
기능을 모아놓은 곳이다.
Page : 67
전자상거래 실무 - 인터넷과 전자 상거래
2. 스위시 활용 방법
메인 인트로 이미지 만들기
 글자 입력하기
① 바탕 화면의 스위시(
) 아이콘을 더블클릭하여 프로그램을 실행한다.
② 스위시 초기 화면이 나타나면 오브젝트 패널의 무비(movie) 패널에서
가로(Width) 650, 세로(Height) 160을 선택한다. 무비 창의 크기가 선택
에 맞게 조절된다.
③ 메뉴 표시줄의 [File]-[Import..]를 선택하여“main-intro.jpg”파일을 불
러오기한다.
④ 불러온“main-intro.jpg”파일의 위치를 키보드의 방향키를 이용하여 적
당한 위치에 놓는다.
⑤ 도구 모음줄에서 텍스트 삽입( ) 아이콘을 선택한다.
⑥ 오브젝트 패널 중 텍스트 패널을 선택하여 텍스트 창에‘자연의 포근함을
느껴보세요’를 입력하고, 글자 크기를 28 포인트로 지정한 다음, 무비
창의 텍스트 위치를 적당하게 이동한다.
Page : 68
전자상거래 실무 - 인터넷과 전자 상거래
2. 스위시 활용 방법
메인 인트로 이미지 만들기
 첫 번째 텍스트에 애니메이션 효과 주기
⑦ 타임 라인 패널의 [Add Effect] 버튼을 클릭해서“Transform”을 선택하면,
[Transform Settings] 대화상자가 나타난다. Name을 선택한 다음 [Close]
를 클릭한다.
⑧ 타임 라인 패널의 [Add Effect] 버튼을 눌러서“Fade Out”을 선택하면,
[Fade Out Settings] 대화상자가 나타난다. [Close]를 선택한다.
 두 번째 텍스트에 애니메이션 효과 주기
⑨ ⑥과 같은 방법으로 ‘소중한 분에게 선물해보세요’를 입력한 다음 ⑧과 같은
방법으로 으로 Fade In 효과를 준다.(효과는‘Fade In’이 아니라도 상관없다.)
⑩ 텍스트에 애니메이션 효과를 주면 타임 라인 패널에 텍스트 레이어 2개가 추
가되고, 추가된 레이어 프레임에 애니메이션 효과 표시를 보여준다.
⑪ 첫 번째와 두 번째 텍스트에 주어진 애니메이션 효과를 미리 확인하는 버튼으
로 stop과 play(
) 버튼이 있다.
Page : 69
전자상거래 실무 - 인터넷과 전자 상거래
2. 스위시 활용 방법
메인 인트로 이미지 만들기
 저장하기
⑫ 메뉴 표시줄의 [File]-[Save As]를 선택하고, 파일명을“main-intro.swi”로
저장한다.
⑬ swf 파일로 추출하기 : 메뉴 표시줄의 [File]-[Export]-[SWF]를 선택하고,
파일명을“main-intro.swf”로 저장하면 main-intro 이미지가 완성된다.
 Add Effect
 스위시에서 쉽게 애니메이션 효과를 줄 수 있는 기능으로, 약 150여 가
지의 효과를 줄 수 있다.
 Fade Out
 애니메이션 효과 중에서 객체(글자, 그림, 도형)가 사라지는 효과를 의
미한다.
Page : 70