메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

<html><head><title>플래시의 기초</title></head><body bgcolor="#FeFeFe">

우선 플래시를 실행합니다.

매크로미디어 플래시는 컴퓨터를 모르는 초급자라고 하더라도 참 접하기 쉽고 툴에 대한 약간의 이해만 한다면 상당히 매력적인 툴입니다.

하지만 많은 플래시 책들은 플래시에 대한 너무 많은 설명들이 많아 사실 초급자로 하여금 포기하거나 지치게 만듭니다.
제 경우 플래시를 처음 배울시절 플래시 메뉴얼 책을 한권 샀었는데.. 약 600페이지의 칼라책이였고, 책의 절반이 별로 알고싶지 않은 내용들로 너무 가득했습니다.

무슨설명이 그리도 많은지...

그래서 책을 다 보고도 뭐가 무슨 내용인지 몰랐습니다.
즉, 핵심을 몰랐습니다.


좀더 시간이 흐른 후 플래시 툴의 핵심은 일단 그림을 그리고 그 그림을 움직이도록 하면 되는 것으로 깨우쳤습니다.
즉, 툴바와 타임라인 그리고 심볼과 트위닝 정도가 전부입니다.

그런데 무슨 그리도 많은 내용이 약 300페이지에 달하니... 컴퓨터를 처음 접했던 전 두권의 메뉴얼 책을 샀어도 역시 몰랐습니다.

다 보고난 느낌은...
"그래서 어쨌다는거지...?"였습니다.

그건 어떻게 보면 형식적인 절차란 것을 약 2년정도 지나서 알게 되었습니다.
현재 플래시책은 백권이 넘습니다.
메뉴얼이 얼마나 많은지 잘 알고 있을겁니다.

그런데 그 메뉴얼을 보면... 알고 싶지 않은 내용으로 가득한 것을 보게 될겁니다.


이것은 어떻게 보면 플래시를 시작하는 사람들에게 혼동을 주고 플래시를 쉽게 접하지 못하도록 만든 근원일지도 모릅니다.

이같은 폐단과 절차를 밟지 않기 위해 앞의 강좌는 플래시를 다운로드 받고, 설치하고 실행하는 단계까지 알아봤습니다.

이번 강좌에서는<strong>플래시의 기초</strong>로서 이론으로 플래시라는 이제는 어도비사의 소프트웨어 툴을 사용하기 위해서 알아야 할 전체적인 제반사항과
그리고 플래시 문서를 작성해서 저장하는 방법에 대해서 살펴보겠습니다.
다음강좌에서부터는 이제 실습을 통한 플래시의 모션그래픽스를 만들기 위한 과정들을 접하게 될겁니다.

제 강좌는 철저히 초보를 위해서 초보자를 플래시어(액션스크립트 랭귀지)까지 자연스럽게 말할 수 있도록 하는데 강좌가 맞추어져 있으므로...
어쩌면 플래시를 어느정도 사용하는 사람에게 약간은 부적합할 수도 있습니다.^^;

자 그러면 진행해 보겠습니다.
우선적으로 플래시 실행합니다.
<!---->

이제 집중해야 할 부분은 보이는 환경의 중앙인 Create New 입니다.
이 Create New가 새 문서를 작성하는 것입니다.

그림에서 1은 플래시 문서를 가리키고, 2는 액션스크립트 파일을 나타냅니다. 2번의 경우는 주로 액션스크립트 버전 1.0 클래스를 작성할 경우 사용합니다.

1을 선택해서 새로운 플래시문서(*.fla)를 엽니다.

<table><tr><td bgcolor="#D1E2FE"><strong>Tip</strong> : 새 문서를 여는 또 다른 방법
Ctrl+N
</td></tr></table>



새로운 플래시 문서는 다음과 같은 모습을 하고 있습니다.


플래시 작업환경이해하기
우선 그림과 같이 5가지에 대한 이해가 필요하며, 해당 기능을 사용시 필요한 부분은 그때그때 기능을 이야기할겁니다.

그림의 숫자는 다음의 의미를 가집니다.
1. 플래시 기본 메뉴
2. 타임라인
3. 툴바
4. 스테이지
5. 속성창과 액션스크립트 그리고 도움말(Help)

플래시에 대한 기초를 알기 위해서는 이 외에 거추장하게 많은 건 사실 현재 필요도 없습니다.

이건 꼭 헬스클럽에서 운동을 처음하는 사람과 같습니다.

<table width="400" border="1"><tr><td bgcolor="#CC3366">"홍길동"이라는 친구는 몸좀 만들어볼라고 "아놀드슈바제네거 헬스클럽"을 방문합니다.
헬스클럽의 원장은 아놀드 슈바입니다.
길동이는 아놀드를 보곤 "오호 몸 끝짱인데~ 아놀드 슈바원장님 나도 원장님과 같이 되려면 어떻게 해야될까요...."
아놀드는 적어도 2년정도 꾸준히 하라고 하며, 직접 운동기구에 대한 설명을 합니다.
헬스클럽에 있는 운동기구는 약 100가지 정도 됩니다.
아놀드는 이 100가지에 대한 설명을 길동이에게 하나씩 알려줍니다.
아놀드의 말을 들은 길동이는 "나도 아놀드슈바와 같이 될 수 있다"라는 자신감 하나를 가지고 집으로 돌아갑니다.
그리고는 100가지가 되는 기구를 일주일동안 나누어서 돌아가며 운동을 합니다.
그리고 어느덧 2개월이 흘렀습니다.
그런데 길동이의 몸매는 별 차이가 없습니다.
이상하다 싶어서 2개월을 또 그렇게 반복을 했습니다.
그리고 이상하게 매일같이 주거라 2시간씩 헬스를 하는데 알통이 생기질 않고, 가슴 일명 갑바가 나오질 않아서...대뜸 신경질 내며,
"아니 아놀드 슈바원장님!
나는 4개월 동안 주거라 했는데... 왜 알통이나 갑바가 그대론가요?"
아놀드 왈
"도대체 어떤 방식으로 운동을 했길래.... 설명을 좀 해줄래?"
길동이 왈
---주절주절주절.........
아놀드 슈바는 듣고 놀랩니다.
헬스클럽에서 초급자는 단지 벤치프레스와 역기, 아령과, 역기를 이용한 다리운동, 그리고 윗몸일으키기를 통한 배운동만 약 4개월 또는 6개월만 하면 된다고 말을 해주며...
"길동이 자네 뭔가 큰 오해를 하고 있구만 그려.
100가지의 기구는 초보자를 위한 기구가 아닐세.
초보자는 그냥 벤치프레스와 아령 그리고 역기만 있으면 끝이야.. 그런데 100가지를 모두 하다니.. 지금 자네가 제정신인가! 그건 전문가들이나 간간히 다룰 툴과 기능들이야 알아들었는가!
자네는 벤치프레스,아령,역기 이 3가지로 돌아가며 하는 것이 가장 적절한 트레이닝 방법이고..
자네같이 아직 근육도 나오지 않는사람이 잔근육을 키우기 위한 기구등을 한다는건 헛고생이야....더구나 중점적으로 트레이닝 되어야 할 부분이 되지 않고 있으니 당연히 근육이 나오질 않는거야.
일단 벤치프레스를 하게 되면 가슴의 군살을 제거하며, 가슴의 중앙근육을 발달시키며, 배와 선을 그어준다네..
그리고 역기는 어깨운동을 위한 걸세.

어깨근육도 3등분이되지만 자네는 아직 그걸 생각할 때가 아니고 그냥 역기를 열심히 들면 되는거야..
그리고 아령과 역기는 멋진팔을 만들기 위해서 이두근과 삼두근을 발달시킨다네...
다리운동에는 역시 역기를 어깨뒤로 짊어메고,
앉았다가 일어나기를 하면 되는거고...
배는 그냥 윗몸일으키기가 장땡이야...
두가지 운동을 하루에 하고 그 다음날은 어제 하지 않았던 다른 운동을 하고 다시 그 다음날은 그제 했던 것을 반복하며, 시간이 되면 어제 했던 것에 대한 부위의 긴장을 할 정도로 운동을 하면 되는거야....
즉, 자네는 비계인 군살을 빼고 근육을 확대시키는 운동을 약 4~6개월 혹은 멀리서 봤을 때 전체적으로 근육이 확대될 만큼만 되는거야.
1개월 혹은 보름만에도 이정도만 되면 자네는 또 다시 업데이트를 위해 이제 좀더 많은 기구를 그때가서 만지면 되는거야!
...알겠나!
"
"ㅡ0ㅡ 네~~~"
</td></tr></table>


이와같이 플래시 역시도 다섯가지만 우선 이해하면 됩니다.
초급자는 더 많은 내용을 이해한다는 것은 능률을 향상시키지 못할 뿐더러 오히려 하지 않는것보다 못하게 됩니다. 그 원인이 바로 포기입니다. 아시겠지요?
그리고 물론 그 다섯가지에서도 세세하게는 알필요도 없습니다. 그 이유는 플래시의 흥미와 매력을 느끼는 것이 가장 중요하기 때문입니다.

1. 플래시 기본 메뉴
2. 타임라인
3. 툴바
4. 스테이지
5. 속성창과 액션스크립트 그리고 도움말(Help)


자 그러면 1번 플래시 기본 메뉴부터 설명에 들어갑니다.



<strong>1. 플래시 기본 메뉴</strong>



플래시의 기본메뉴는 그림에서 보는 것처럼 File, Edit, View, Insert, Modify, Text, Commands, Control, Window, Help이 됩니다.
하지만 다른 부분은 현재 이해할 필요가 없으며, 현재는 우선 File을 클릭해서 나오는 팝업메뉴에서 다음과 같은 부분을 이해하면 됩니다.


New (Ctrl+N)
- 새로운 문서를 열경우
Open (Ctrl+O)
- 기존 파일을 열경우(주로 플래시문서-fla파일을 열게 됩니다.)
Colse (Ctrl+W)
- 플래시 문서 또는 플래시에서 만들어진 결과물 swf파일을 닫을 경우
Save (Ctrl+S)
- 작업중인 문서를 저장할 경우
SAve AS (Ctrl+Shift+S)
- 작업중인 문서를 새이름으로 저장할 경우

이런 것이 있다는 것만 알아 두세요. 앞으로 작업하다보면 자연히 알게 되는 부분이랍니다.
이것으로 1. 플래시 기본 메뉴 를 마칩니다.

다음으로 살펴볼 것은 타임라인(TimeLine)인데... 타임라인은 플래시의 핵심이라고 생각하면 됩니다.
자 그러면 타임라인에 빠져봅시다.~



2. 타임라인

타임라인은 이 그림을 나타내며, 타임라인은 영어입니다.
영문의 의미는 <u>(분·초까지 정밀하게 예정된) 시각표.</u>입니다.
즉, Timeline은 시간과 관계가 있다는 말이며,
시간에 대한 표를 말합니다.(표같이 보이나요??)

시간에 대한 표라는 것은 시간 개념을 일렬로 길게 늘어놓았다는 것입니다.

그림과 같은 부분은 뒤에서 설명될 프레임(Frame)이라는 부분으로 한없이 길게 늘어나는 부분입니다.


타임라인은 많은 곳에 있습니다.
혹시 애프터이펙트를 사용해봤다면 그곳에서도 타임라인을 사용하는 것을 볼 수 있으며, 프리미어도 역시 같은 개념입니다.


타임라인은 크게 두 부분으로 나뉩니다. 이 부분을 이해하는 것은 플래시를 하는데 있어서 아주 중요하답니다. 그러니 명확하게 이해하길 바랍니다...^0^;
혹시 설명이 잘 이해가 되지 않는다면 질문을 바로주세요...^^

1번은<strong>"레이어"</strong> 2번은 <strong>"타임라인 프레임"</strong>이라고 합니다. 플래시를 처음 접했다면 생소하게 들릴 겁니다.
자 그러면 레이어부터 살펴봅시다.


레이어(Layer)
우선 레이어에 대한 사전적 의미는 다음과 같습니다.

층(層), 겹쳐 쌓음, 칠하기[입히기]; 지층(地層); (사회의) 계층(階層).

사전적인 의미에서 보는 것처럼 레이어는 건물의 층을 나타냅니다.


레이어는 플래시 실행시켜 플래시 문서를 처음 열었을 경우 Timeline에서 보는 것처럼 단 하나의 레이어만 존재합니다.

그림은 타임라인의 레이어에 대한 명칭이며, 다음은 그 설명입니다.

<strong>레이어의 설명 </strong>
1. Layer
- 플래시에서 레이어(층)이라고 하면 지금의 1번을 나타냄

2. Insert Layer
- 레이어를 추가하는 버튼
  만약 새로운 레이어를 추가하고자 한다면 현재의 레이어 추가버튼을 누르면 됩니다.
 
  그림은 Insert 버튼을 클릭해서 레이어를 추가하는 모습입니다.

3. Motion Guide
- 움직이는 모션의 가이드를 나타내는 것으로 사실 거의 사용하지 않습니다.

4. Insert Layer Forder
- 레이어 관리용으로 여러개의 레이어가 한꺼번에 존재할 경우 특징별로 레이어를 분리할 수 있도록 한 것입니다.
  플래시어(액션스크립트)에 익숙해진다면 플래시어 역시 여러레이어로 사용해야 하는 것을 느끼고 그로 인해서 그래픽 요소와
  액션스크립트 요소로 레이어를 관리함을 느끼게 될 것입니다. 물론 클래스도 사용하게 될 것입니다.
  다음은 그래픽과 액션스크립트를 분리해둔 경우입니다.
 
  물론 레이어를 관리하기 위해서 사용하므로 현재는 사용할 일이 거의 없으며, 플래시에 어느정도 익숙해져서 레이어가 수십개이상이 될 때 사용하면 편리할 것입니다.
 
 그림은 3개의 레이어가 있는 상태에서 폴더추가버튼을 클릭한 모습이고, 이 폴더에 레이어를 담기 위해서는 레이어를 선택해서 폴더로 드래그 해주면 됩니다. <table width="493" height="111" border="0"><tr><td width="237" height="19" bgcolor="#DAF1FE"><strong>드래그 시의 레이어 </strong></td><td width="240" bgcolor="#DAF1FE"><strong>드래그 후의 레이어 </strong></td></tr><tr><td height="84"></td><td></td></tr></table>

* 건물의 경우 10층이 되는 건물이 있을 경우 1~5층까지는 영화관이고, 6~10층까지는 사무실이라면 건물은 크게 영화관과 사무실로 분리될수 있겠죠?
바로 이런 경우가 레이어 관리 폴더와 같답니다.

5. Delete Layer
- 이 말은 레이어를 지운다는 말입니다. 즉, 불필요한 레이어가 있으면 해당 레이어를 선택한 후 지우는 버튼을 선택하며 됩니다.
  즉, 휴지통이라고 생각하면 됩니다.





자 그러면 레이어는 동전이나 종이를 순차적으로 쌓아놓은 것으로 생각될 수 있겠죠...


다음은 레이어(Layer)에 대한 간단한 구조입니다.


레이어는 그림과 같이 종이를 하나씩 쌓아올린 층을 나타냅니다.
물론 레이어는 절대 중복될 수 없습니다.
즉, 건물을 보면 1층, 2층, 3층..N층과 같은 의미로 레이어도 Layer 1, Layer 2... LayerN 으로 되지만 건물의 1층과 2층을 혼합할 수 없는 것처럼 레이어 역시도 중복시킬 수 없습니다.
다만 2층의 모든 물건을 1층으로 이동할 수는 있겠지요?
그러면 2층은 비워지게 됩니다. 물론 2층 전체를 빌딩에서 제거하게 되면 2층은 사라지고 기존의 3층은 2층으로 변신되겠구요...
이런 방식으로 층에 변화를 유동성있게 줄 수 있습니다.

레이어의 구조는 높게 쌓아올린 동전 혹은 건물과 같아서 스택(Stack)이라는 말을 합니다.
스택은 플래시를 하는데 있어 아주 중요한 부분을 차지합니다.
바로 레이어가 스택의 구조니 말입니다.
스택은 -가장나중에 쌓아올린 동전을 가장 먼저 빼거나-후입 선출(LIFO : Last-In-First-Out) or 가장 먼저 쌓아올린 동전을 가장 먼저 뺀다는-선입 후출(FILO : First-In-Last-Out) -이라고 합니다.
개념이 모호할 수 있지만 여하튼 레이어는 스택의 의미로 쌓아올린 층이라고 생각하면 됩니다.

그리고 한가지 건물의 층에는 뭔가 구성요가 들어가겠지요..?
(자동차, 마징가, 동물, 책상, 의자, 컴퓨터, 책장, 화장실 혹은 신혼집, 이웃사람집 등등, 혹은 수영장, 과수원, 혹은 귤 10개, 혹은 바나나 20송이, 오랜지 100개 등)
바로 여러가지 요소가 들어가는 부분이 프레임입니다.


자 이제 위의 그림에서 2번에 해당하는 프레임에 대해서 살펴봅시다.<table><tr><td bgcolor="#B5D2FF">유의
사항
</td>
<td bgcolor="#B5D200">
우선 한가지 기억해둘 점은 플래시라는 툴은 한국사람이 만든 툴이 아니라 영어권나라인 미국에서 만들었습니다.
그렇기 때문에 용어 하나하나를 볼 때 사전 참고를 권합니다.
그것은 곧 후에 접할 액션스크립트를 잘 하는 지름길이 됩니다.
그리고 반드시 그 용어의 의미를 살펴보면 의미가 상통합니다.
</td></tr></table>


타임라인(TimeLine) 프레임(Frame) - 구성물, 구성요소, 구조물(frame) - 프레임으로 읽힘.

frame에 대한 사전적 의미를 살펴보면 다음과 같습니다.

1 (건조물 따위의) 골조, 뼈대.
the ~ of a house 집의 뼈대.
2 구성, 구조물.
3 (사람·동물의) 신체, 체격, 골격.
He has a strong ~. 그는 체격이 건장하다.
4 (정치·사회 따위의) 기구(機構); (이론 따위의) 구조; 조직, 체제.


골조라는 의미를 가지고 있지만 플래시에 좀더 다가선다면 구성, 구조물혹은 구성요소등으로 프레임(Frame)은 풀이됩니다.

프레임은 성분 등의 구성요소로 나타내므로, 프레임에 들어갈 것은 사실 많습니다.
과일, 동물, 사람, 사물, 날씨, 학교, 건물 등등...

구성요소는 무언가 담는 바구니나 보관함이 필요합니다.
바로 레이어가 됩니다.

레이어를 새로 만들때마다 플래시에서는 늘 비어있는 구성요소 즉, 프레임을 하나 만들게 되고, 그 프레임에서는 뭔가를 담을 수 있게 됩니다.

즉, 건물의 층을 나타내는 것이 레이어이며, 프레임은 건물의 층에 들어갈 요소를 나타냅니다.

레이어를 지우면 모두 층이 사라지니 층에 있던 많은 요소는 한꺼번에 지워지겠지요?

그렇다면 레이어와 프레임의 관계는 정의하고 개념을 명확히 이해해둘 필요가 있습니다.

레이어와 프레임의 정의

<table><tr><td bgcolor="#B5D200">
<li>레이어은 건물의 층을 나타낸다.
<li>프레임(구성요소)는 건물에 들어갈 구성요소(컴퍼넌트)를 나타낸다.
<li>레이어는 담는 바구니라면 프레임은 바구니안에 들어가는 플래시에서 나타낼 수 있는 모두 사물이다.
<li>프레임은 레이어에 종속되어 있다
<li>변수와 값의 관계이다.(변수에 값을 담기 때문)
<li>플래시에서 보여지는 모든 그래픽요소는 프레임에 작성되어야 하며, 액션스크립트 코드도 거의 프레임에 작성된다.
</td></tr></table>


다음의 그림은 레이어에 관한 그림에 프레임 즉, 구성요소들을 추가해놓은 그림입니다.

Layer 1에는 삽을 든 사람, 포도, 토마토, 개가 존재하며,
Layer 2에는 침대, 호텔이,
Layer 3에는 고양이가,
Layer 4에는 토마토가,
Layer 5에는 동물 두마리가...
Layer 6에는 호텔과, 침대가..
Layer 7에는 컴퓨터가 존재합니다.
이 외에도 더 많은 요소를 추가할 수 있으며, 플래시로 만들 수 있는 모든것이 프레임에 안착이됩니다.

레이어를 처음 만들게 되면 만든 레이어는 늘 비어있게 되고, 뭔가 추가해줘야만 레이어는 제기능을 하게 됩니다.
프레임에 뭔가를 추가할 때는 반드시 툴바를 통하게 되며, 툴바에 의해서 스테이지로 뭔가를 그리게 됩니다.
프레임은 또한 무한정 늘릴수도 있습니다.
즉, 하나의 프레임을 선택한 상태에서 F5를 눌러주게 되면 프레임이 한칸 늘어나는 것을 볼 수 있으며, F5를 계속 누르고 있으면 프레임이 점차 더 많아지는 것을 보게 됩니다.
<table width="400" border="1"><tr><td bgcolor="#66CCFF"><strong>프레임을 선택한 경우</strong></td></tr><tr><td></td></tr><tr><td bgcolor="#66CCFF"><strong>프레임을 선택한 상태에서 F5를 누른 경우 </strong></td></tr><tr><td></td></tr></table>

하지만 처음 프레임을 설명시 타임라인 프레임이라는 호칭을 붙였습니다.
왜 이렇게 붙였을까요..?

그건 시간단위로 프레임이 이어져 있기 때문입니다.



프레임과 연관되어서는 약 6가지를 이해할 필요가 있습니다.
이것은 앞으로 플래시를 만들 시 늘 중요하게 생각되는 핵심부분이기 때문입니다.

그림은 프레임과 연관되어 알아야 할 6가지를 나타냅니다.
1. Play Head
2. currentFrame
3. Frame Rate
4. Elapsed Time
5. TimeLine
6. Frame

1번인 플레이 헤드(Play Head)부터 살펴보겠습니다.

<strong>1. Play Head</strong>
- 플래시 무비가 움직이도록 하는 장본인으로 플레이 헤드를 중심으로 왼편은 과거, 오른편은 미래, 플레이 헤드가 있는 지점은 현재가 됩니다.
  물론 이 플레이 헤드는 프레임을 읽는답니다.
  즉, 프레임에 존재하는 플래시어(ActionScript Language)와 그래픽 요소를 모두 읽습니다.
  이것에 대한 속도는 바로 다루게 될 3. Frame Rate의 영향을 지대히 받는답니다. 즉, Frame Rate가 1로 되어 있으면, 1초당 1프레임을 읽게 되고,
  12로 되어 있다면 1초마다(당) 12프레임을 읽도록 되어 있습니다.
  만약에 60이면..? 1초당 60프레임을 읽어들인답니다.
  즉, Play Head는 프레임과 타임라인 프레임에 존재해서 Frame Rate만큼 요소(플래시어, 그래픽)를 읽어들여서 사용자에게 줍니다.
  후에 접하게될 gotoAndPlay(), gotoAndStop(), _currentframe, stop(), play(), nextFrame(), prevFrame() 등의 내장 속성과 메서드 모두 이 플레이 헤드를 움직여서 해당 프레임을 읽어서 사용자에게 무비를 보여주는 명령들입니다.

<strong>2. current Frame</strong>
- 현재의 프레임을 나타냅니다.
  다음의 그림은 현재 5 프레임(Frame)을 나타내는데요... 5가 나타내지는 이유는 플레이 헤드가 5에 있기 때문입니다.
 
  하단의 0.3s와 서로 관련되어 있답니다.
  플래시어로 gotoAndPlay(5); 라는 말을 한것과 같습니다.

<strong>3. Frame Rate</strong>
- 프레임레이트는 현재의 프레임 진행속도비율을 나타내어주는 역할을 합니다.
 
  그리고 프레임률(Frame Rate)는 현재의 타임라인의 Frame Rate를 더블클릭하거나 Ctrl+J 를 통해서 프레임률을 조절할 수 있습니다.
  Ctrl+J나 타임라인의 Frame Rate를 더블클릭 하게되면 다음의 Document Properties 박스가 나타납니다.
  여기서 Frame rate의 숫자를 수정해 주면 됩니다.
 
  이 Document Properties(플래시 문서 속성창)에 대해서는 차후에 다루게 되니 이 부분만 이해를 하고 있으면 됩니다.


<strong>4. Elapsed Time</strong>
- 현재 그림은 12.0 fps를 나타냅니다.
  이것은 1초당 12 프레임을 플레이헤드가 진행한다는 말이 됩니다. 1초당 12프레임을 진행한다고 하는 말은 어떤 의미인지 아시나요...
  플레이헤드가 1부터 시작해서 12프레임까지(총 12프레임) 움직이는 시간의 비율을 나타내는 것입니다.

  그렇다면 현재의 그림에서 <strong>Elapsed Time</strong>는 0.3s을 나타냈습니다. 왜 0.3이라는 수가 나왔을까요?
  1초당 12프레임을 가기 때문에 5/12를 통해서 0.3이라는 왔습니다. 물론 정확히는 4/12를 해야 합니다.
  왜 그럴까요? 이 부분은 플래시의 특성으로 생각을 하면 됩니다. 플래시는 늘 현재 플레이헤드이전프레임까지의 수를 계산하는 히안한 특성이 있거든요.
  프레임을 선택하고 F5를 눌러서 프레임을 12까지 늘린 뒤 Frame Rate를 보면 0.9s가 나타나는 것을 볼 수 있습니다. 바로 이러한 원인 때문에 0.3s라는 수치가 나타난 것입니다.


<strong>5. TimeLine</strong>
    타임라인으로 시간의 선을 나태냅니다. 시간의 선은 1부터 시작해서 무한대라고 생각하면 됩니다.
   
    플레이헤드가 현재 있는 시점을 현재시간으로 나타내며, 플레이 헤드의 좌측을 이전시간인 과거, 우측을 미래시간인 미래라고 말합니다.

<strong>6. Frame</strong>
   프레임을 나타냅니다. 즉, 구성요소인 컴퍼넌트를 담아두는 곳을 나타냅니다.(컴퍼넌트라고 하니 이상하죠? Frame라는 영어를 풀이했기 때문이며, 엄연히 요소를 두는 곳입니다.)
  
   하지만 이 프레임은 5. TimeLine과 함께 살펴봐야합니다. 그래야만 명확히 현재 몇 프레임인지 알 수 있거든요.
  
  그리고 현재의 프레임의 전체개수는 10개입니다. 다른말로 표현하면 전체프레임수 즉, 전체프레임은 10프레임입니다.
  
   그림에서 보는 것처럼 진짜 프레임은 A. blank frame 부분을 나타내고, 프레임이 아닌 것은 B. Nothing 부분입니다.
   A부분을 blank frame 즉, 빈 프레임이라고 부르는 것은 프레임이 존재하되 비어있기 때문입니다.
   그리고 플레이 헤드는 플래시 무비가 실행되면 프레임이 없는 곳(B. Nothing)이 아닌 프레임이 있는 부분까지만 진행을 합니다. 이건 불변의 법칙입니다.

   프레임을 늘리는 법에 대해서는 두가지가 존재합니다.
<table width="400" border="1"><tr><td bgcolor="#009933"><strong>프레임을 늘리는 방법 1 </strong></td></tr><tr><td>


그림과 같은 상태에서 프레임을 선택합니다.
프레임이 현재는 1프레임뿐입니다.
이제 프레임을 늘리기 위해서 빈 프레임을 선택합니다.

그리고 키보드의 F5 버튼을 1번 누릅니다. 그러면 다음 그림과 같이 빈 프레임이 하나 생기는 것을 볼 수 있습니다.

키보의 F5 버튼을 누를 때마다 프레임은 계속 증가되는 것을 보게 될겁니다.

기본적으로 프레임은 이와 같은 방식으로 늘려줄 수 있습니다.


</td></tr><tr><td bgcolor="#009933"><strong>프레임을 늘리는 방법 2 </strong></td></tr><tr><td>프레임은 1번과 같이 프레임을 선택한 상태에서 늘릴수도 있겠지만 그렇지 않고, 프레임이 없는 곳을 선택해서 늘릴수도 있습니다.
우선 그림과 같이 기본상태에 존재합니다.

그리고 임의의 프레임을 선택합니다. 여기서는 25프레임을 선택합니다.

그 다음 키보드의 F5버튼을 누릅니다.

어느새 25프레임으로 프레임이 증가되어 버립니다.
바로 이런 형식으로 프레임을 늘릴 수 있습니다.</td></tr></table>

자 이제 프레임의 증가를 알아보았습니다. 이 과정이 왜 필요한 것인가! 하고 생각이 들 수 있습니다.
이 과정은 플래시를 움직이고 플래시어(액션스크립트 언어)로 말하기 위한 가장 기초입니다.
보통 플래시 메뉴얼 책에서는 이런 부분 보다는 어디에 뭐가 있고, 어디에 뭐가 있고... 사실 저는 현재
개발 5년차이지만 아직도 어디에 뭐가 있는지 모르는 부분도 있답니다.
그래도 아주 잘만 사용한답니다.
이것이 말하는 것은 허와 실입니다.

많은 사람들은 DB연동을 위해 php,asp, jsp, c#, Database, sql 등을 모두 섭렵해야 한다는 착각을 일으키고,
그로 인해서 그런 책들도 쏟아져 나옵니다.
플래시하는 사람들(디자이너, 개발자)에게 원하는 실상은 php를 만져라 혹은 DB를 만져라 하지 않습니다.
오로지 플래시 툴만 잘 사용하면 됩니다.
나머지는 개념만 이해하면 되거든요.
얼마전 진행했던 삼성그룹본사 SDS 해외 IT 부서 프로젝트에서는 약 1500라인을 통해 자바와 통신을 했습니다. 자바와 통신을 한다고 하면 대단하게 보이는 허가 있습니다.
하지만 이건 엄연히 착각입니다. 왜냐하면 플래시개발자가 자바를 만질일은 없기 때문입니다. 그냥 플래시만 만지면 됩니다.^^
음.. 이야기가 좀 삼천포로 빠져가는 느낌이네요^^
다시 돌아와서 여튼 타임라인을 이해하기 위해서 이렇듯 여러가지에 대해서 이해를 해야 합니다.
이건 기본이기 때문입니다.
프레임을 추가하는 방법에 대해서 앞에서 살펴보았습니다.
그러면 프레임을 지우는 방법도 있겠지요?
간단하답니다.
해당 프레임을 선택하고 키보드의 Shift키와 F5키를 함께 눌러주면 됩니다.(Shift+F5) <table width="400" border="1"><tr><td bgcolor="#FF66CC"><strong>프레임을 지우는 방법</strong></td></tr><tr><td>
우선 그림과 같이 열개의 프레임을 가진 플래시 문서가 있습니다.
이 문서에서 적당한 프레임을 선택합니다.
물론 아직 마우스에서 손가락을 떼면 안되구요.

그리고 지우고자 하는 프레임까지 드래그 하고 마우스를 뗍니다. 물론 특정한 하나의 프레임만을 지우고자 한다면 프레임을 마우스로 선택만 하면 됩니다.

그리고 나서 키보드의 Shift 키와 F5키를 동시에 누릅니다.

자 그러면 그림과 같이 프레임이 사라진 것을 볼 수 있죠?

프레임을 지우는 것은 이렇듯 간단하답니다.
지운만큼 검정색으로 남는 것은 그냥 ESC키를 누르거나 스테이지의 아무곳을 클릭하면 됩니다.

</td></tr></table>

 

전세계의 모든 플래시 결과물이 반드시 프레임에 작성된 그래픽 요소로만 표현된다는 것을 아는 것이 중요합니다.(액션스크립트 포함-무비클립위의 이벤트를 작성한다고 해도 역시 무비클립은 프레임에 존재해야 하기 때문입니다. 혹은 동적으로 복제를 한다고 해도 역시 그것은 프레임이 있기 때문에 가능한 것입니다.)
이 말은 사용할 수 있는 모든 그래픽요소를 이곳에서 작성할 수 있다는 것을 나타냅니다.

이제 타임라인은 뭐라고 생각하세요...?
바로 이들 레이어와 프레임을 모두 갖는 총체적인 역할을 하는 도구라고 생각하면 됩니다.


레이어와 프레임은 아무리 이야기 해도 그 중요함은 이루 말할수가 없답니다.
이 부분에 대해서는 3.툴바, 4.스테이지, 5. 속성창과 액션스크립트 그리고 도움말(Help)를 살펴보면서 좀더 들어가도록 하고, 3번 툴바부터 알아보겠습니다.


3. Tool Bar - 툴바
툴바라는 것은 Tool Bar 이라는 영어입니다.
Tool은 도구라는 의미라는 것은 잘 아는 단어일것이며,
Bar는 막대나 틀이라는 의미입니다.
그래서 Tool Bar 라고 한다면 도구 막대 혹은 도구 틀이라는 의미가 됩니다.
플래시에서 제공하는 도구는 여러가지로 있습니다만 도구를 추가하거나 혹은 제거 할 수 없는 도구틀의 단점을 가지고 있습니다.

우선 툴바는 플래시 작업환경의 왼편에 존재하며, 다음의 그림과 같은 모습을 하고 있습니다.


툴바는 다시 4등분으로 분할됩니다.


4 등분으로 분류한 것은 하는일이 저마다 다르고 툴을 선택할 때마다 나타나는 옵션이 다르기 때문입니다.

일단 툴바에서 공통적으로 사용되는 것과 무관한 View를 먼저 살펴봅시다.

<strong>2. View</strong>
- 이 두번째는 스테이지를 이동하거나 확대 축소를 위해 사용되는 툴입니다.
물론 제 경우 View의 도구를 선택해서 스테이지를 움직이거나 확대/축소 하지 않습니다. 그 이유는 단축키가 실상 편하기 때문입니다. <table width="726" border="1"><tr><td width="716" bgcolor="#CC3300"><strong>단축키</strong></td></tr><tr><td bgcolor="#99CC33"><strong>스테이지를 드래그 할 경우</strong>
키보드의 SpaceBar를 누른 상태에서 마우스 왼쪽 버튼을 누르면 됩니다.

<strong>스테이지를 확대할 경우</strong>
Ctrl+[+] - [+] 표시는 키보드의 덧셈 표시이며, (물론 Shift를 누르지 않은 상태입니다.)

<strong>스테이지를 축소할 경우</strong>
Ctrl+[-] - [-] 표시는 키보드의 빼기 표시입니다.
물론 특정한 개체를 확대 축소할 경우 개체를 선택한 상태에서 Ctrl+[+], 축소할 경우는 Ctrl+[-]를 선택하면 됩니다. </td></tr></table>

이제 1.3.4 번의 살펴봅시다.

<strong>1. Tools</strong>
- 툴바의 도구를 나타냅니다.
  하지만 이 많은 툴들을 사용할까요? 글쎄요... 플래시에 대한 흥미와 매력을 위해서는 다음의 붉은색으로 동그라미 쳐진 툴만 익숙해지면 됩니다.

위에서부터 순서대로 화살표툴, 선툴, 텍스트툴, 원툴, 사각형툴, 연필툴, 잉크툴, 면툴 입니다.

<table width="600" border="1" bordercolor="#0066CC"><tr><td width="71">가.
<strong>화살표툴</strong></td><td width="61">나.
<strong>선툴</strong></td><td width="66">다.
<strong>텍스트틀</strong></td><td width="66">라.
<strong>원툴</strong></td><td width="66">마.
<strong>사각형툴</strong></td><td width="66">바.
<strong>연필툴</strong></td><td width="66">사.
<strong>잉크툴</strong></td><td width="86">아.
<strong>면툴</strong></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>도구틀의 기본은 지금처럼 화살표툴입니다. 스테이지의 어느개체나 선택할 수 있는 기능을 제공하는 툴입니다. </td><td>선을 그을 때 사용하는 툴입니다. </td><td>텍스트를 쓸 때 사용하는 툴입니다. </td><td>원을 그릴 때 사용하는 툴입니다. </td><td>사각형이나 그 외의 도형을 그릴 때 사용하는 툴입니다.(물론 95%이상은 사각형을 그릴 때 사용을 합니다.) </td><td>연필로 뭔가 쓸 때 필요한 툴입니다. </td><td>선의 속성을 바꾸기 위한 툴입니다. </td><td>면의 색상을 바꾸기 위한 툴입니다. </td></tr></table>


<strong>3. Color</strong><strong>s</strong>

- 선과 면을 위한 칼라를 제공하는 부분입니다.

선 혹은 면 색상(Color)을 클릭하면, 기본적으로 컬러피커가 나타납니다.
- 도구툴인 툴바에서 선과 면을 위해 사용되는 자주 사용되는 툴은 선툴, 연필툴, 면툴, 원툴, 텍스트툴 등 입니다.
- Colors 는 도구들을 사용한다고 해서 Color 자체는 변하지 않습니다. <table width="548" border="1"><tr bgcolor="#FFFF00"><td width="276">선 색상(Color)을 사용하는 도구 </td><td width="126">면 색상(Color)을
사용하는 도구 </td><td width="128">선과 면 색상(Color)을 모두 사용하는 도구 </td></tr><tr><td>


</td><td>
</td><td>
</td></tr></table>



가령 스테이지 파랑색 선을 긋고 싶다고 한다면 툴바의 선툴을 클릭후 다음그림과 같이 반드시 선색상(Color)을 클릭해서 파랑색을 선택한 후 스테이지에 선을 그어야 합니다. 물론 긋고 나서 그은 선을 선택한 후 선색상(Color)아이콘을 선택해서 색의 선을 변형할 수 있습니다.





<strong>4. Options</strong>
- 1. Tools에서 특정한 도구를 선택할 경우 Options에서는 해당 툴에 대한 옵션 기능을 제공해줍니다.

<table width="583" border="1"><tr><td width="114">

선툴, 원툴을 선택한 경우

</td><td width="92">
사각형툴을 선택한 경우
</td><td width="78">연필툴을 선택한 경우
</td><td width="117">잉크병툴을 선택한 경우
</td><td width="148">면색상툴을 선택한 경우
</td></tr><tr><td>
</td><td>
</td><td></td><td></td><td></td></tr></table>

 

<strong>4. 스테이지(Stage)</strong>

스테이지는 무대, 스테이지, 연단 이라는 영어의미로 툴바의 도구를 이용해서 그림을 그릴 수 있도록 하는 곳으로 그림처럼 중앙의 흰색박스를 나타냅니다.
또한 플래시에서 만든 결과물을 보여주는 역할을 하는 것도 역시 스테이지입니다.
물론 스테이지에 뭔가를 작성하게 되면 타임라인의 해당 프레임에 검정색 동그라미가 보입니다.
현재 그림은 텍스트툴을 이용해서 스테이지에 Stage 라는 글자를 썼기 때문에 타임라인의 프레임에 검정색 동그라미가 보이는겁니다.


타임라인(TimeLine)의 프레임을 설명할 때 한 프레임에 여러가지 레이어가 들어간다고 언급을 했었는데요...
그래서 특정한 하나의 프레임에 많은 요소가 들어갈 수 있지만, 그래도 그 프레임에 보여지는 것은 단 하나의 검정색 동그라미입니다.
이 동그라미는 "Key frame"라고 해서 키프레임이라고 읽혀집니다.



<strong>5. 속성창과 액션스크립트 그리고 도움말(Help)</strong>
이제 플래시 작업을 위해 마지막으로 개념을 이해하고 있어야 하는 부분은 속성창(Properties), 도움말(Help), 그리고 액션스크립트(Actions - Frame) 입니다.



<strong>Actions - Frame</strong>
액션스크립트를 작성하는 패널입니다.
그림에 보면 오른편에 여러가지 암호(Code), 즉, 영어로 불리는 한국식 발음인 "코드"를 작성하는 곳이 바로 본 패널에서 하는 역할입니다.
차후 작업시 본 패널이 보이지 않거나 빠르게 열기를 원할 경우 키보드의 <strong>F9 버튼</strong>을 누르면 됩니다.


<strong>Help</strong>
도움말입니다.
플래시 도움말은 어떨때 가장 유용할까요...?
사실 플래시를 막 배우는 분들에게는 그리 필요하지 않습니다.
즉, 컴퓨터에 대해(C,C++, Java, Html, XML, ASP, PHP, JSP, Database, SQL, JavaScript, VisualBasic, C#, ASP.NET, WinAPI etc.)잘 모르는 디자이너 및 인터넷 검색외에 알지 못하는 분들에게는 적합지 않습니다.

이 점은 읽어보면 왜 그런지 잘 알게 될겁니다.
"나는 디자이넌데.... 포샵도, 일러도 잘하는데..." 한번 보세요.
착찹합니다.
이거이 바로 플래시 Help의 지극히 문제점이거든요.
컴퓨터 언어에 대한 기본 이해가 있는 사람들을 위주로 제품 사양서 같은 기술서이기 때문입니다. 디자이너들에게 너무나도 유명하고..이미 웹과 플래시의 대 스타(Big Star)로 자리매김한 플래시 1세대 선구자 죠슈아데이비스(www.joshuadavis.com)의 바니메뉴의 샘플조차도 나오지 않으니 말입니다.

여튼...현 시점에서 도움말은 그리 힘을 주지 못합니다. 하지만 플래시어(ActionScript Language)를 하게 되면서 Help를 자주 접하게 될 것이며, 아마도 Help가 소중히 여겨지게 될 시점이 올겁니다.

Help는 키보드의 F1키를 통해서 접할 수 있습니다.




<table><tr><td bgcolor="#EEF7FF">본 강좌를 마치며


본 강좌는 플래시에 대해 잘 모르며, 플래시를 시작하는 사람들을 위한 첫번째 강좌입니다.
플래시를 막 시작하는 분들을 위해 플래시 사용에 아주 지대한 영향을 주고 아주 중요한 몇가지를 살펴봤습니다.


<li>1. 플래시 기본 메뉴
<li>2. 타임라인
<li>3. Tool Bar
<li>4. 스테이지
<li>속성창과 액션스크립트 그리고 도움말(Help)

다섯가지는 플래시 사용에 아주 중요한 역할을 합니다.
특히 2. 타임라인은 반드시 이해해야 하며, 전체적으로 그리많지 않은 부분이므로 개념을 이해하고 숙지하길 바랍니다.
만약 이해가 되지 않거나 내용상에 모호한 부분은 언제든지 글을 올려주시기 바랍니다.


자 이렇게 해서 플래시를 들어가기 위해 알아야 할 이론들 즉, 준비사항들에 대해서 살펴보았습니다.
물론 자주 사용되지만 다루지 못한 몇몇 부분들은 다음강좌부터 실습을 통해서 접하게 될것이며,
분명히 말씀드릴 부분은 위에서 다루었던 아래의 다섯가지 대부분은 늘 사용될 것입니다.


*끝으로 본 강좌는 유료로 할 수 없음을 알립니다. 그리고 상업적인 용도(책의 발간, 온라인 유료강좌 등) *본 강좌를 다른 곳에 배포하고자 한다면 반드시 제작자인 저 "Adam"과 출처를 분명히 밝혀두시기 바랍니다. 본 강좌의 출처 : http://www.flashclub.co.kr/bbs/view.php?id=tutorial_017&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=4
</td></tr></table>



</html>Adam http://www.flashconference.co.kr http://www.nfmk.com http://www.ysbn200.com
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48026
191 플래시와 제로보드 연동(리스트에서 해당 내용을 플래시로 보여주자 1) [9] file 홈때기~♪ 2005.05.28 9183
190 [플래시 MX 동영상 강좌] 9. Shape Tweening [6] 서기 2005.05.28 4339
189 [플래시 MX 동영상 강좌] 8. 사운드 연습(공튀기기) [5] 서기 2005.05.27 6175
188 [플래시 MX 동영상 강좌] 7. 트위닝 옵션 [10] 서기 2005.05.26 7483
187 [플래시 MX 동영상 강좌] 6. 텍스트 에니메이션 [13] 서기 2005.05.25 7781
186 [플래시 MX 동영상 강좌] 5-1. 레이어를 이용한 에니메이션 보강 [8] 서기 2005.05.24 6578
185 [플래시 MX 동영상 강좌] 5. 레이어를 이용한 에니메이션 [16] 서기 2005.05.24 13565
184 [플래시 MX 동영상 강좌] 4. 심볼을 이용한 에니메이션 - Motion Tweening [11] 서기 2005.05.23 5760
183 [플래시 MX 동영상 강좌] 3. 심볼을 배워보자! [7] 서기 2005.05.22 5585
182 [플래시 MX 동영상 강좌] 2. 태극기 그리기 [18] 서기 2005.05.22 12345
181 플래시와 제로보드 연동 기초 (외부 TXT 파일 호출 하여 뿌려주기) [6] 홈때기~♪ 2005.05.20 7191
180 [플래시 MX 동영상 강좌] 1. 기본 사용방법익히기 [18] 서기 2005.05.20 8887
» 플래시의 기초(이론) [5] Fc 2005.05.11 6114
178 플래시를 시작하기 위한 준비 [1] Fc 2005.05.06 7495
177 디비 연동의 허와 실 [2] Fc 2005.04.28 5099
176 FlashVars로 플래시에 변수값 넘기기 [1] file 삐리리 2005.04.25 4758
175 wmode 속성중 transparent 와 opaque 의 차이점 file 삐리리 2005.04.22 4356
174 getURL로 자바스크립트 호출하기 [1] file 삐리리 2005.04.21 4477
173 테두리 없는 플래시 윈도우 띄워주기 [7] 홈때기~♪ 2005.04.19 8233
172 플래시에서 포토샵에서 작업한 깔끔한 투명 이미지 임포트 시키는 방법 [5] 홈때기~♪ 2005.04.19 8284