Flash 4 를 이용한 홈페이지 만들기

5. Flash 4 드로잉 툴 사용하기

드로잉 툴 / 드로잉 툴을 이용한 이미지 만들기 / 드로잉 툴을 이용한 이미지 만들기 2

■ 드로잉 툴      [맨위로]
 

  (1) 화살표 툴 : 오브젝트 선택, 이동 수정시 사용
  (2) 선 툴 : 선을 그릴 때 사용
  (3) 원형 툴 : 타원이나 원을 그릴 때 사용
  (4) 연필 툴 : 자유로운 선을 그릴 때 사용
  (5) 잉크병 툴 : 선을 수정하거나 테두리 선을 만들 때 사용
  (6) 스포이드 툴 : 오브젝트의 색상 및 선의 형태를 인식한 후 잉크병 툴이나 페인트 통 툴로 전환하여 사용
  (7) 손 툴 : 스테이지의 오브젝트를 보기 편하게 이동할 때 사용
  (8) 올가미 툴 : 원하는 영역을 자유롭게 선택할 때 사용
  (9) 텍스트 툴 : 문자를 입력하거나 텍스트 필드로 사용
  (10) 사각 툴 : 직사각형이나 정 사각형을 그릴 때 사용
  (11) 브러쉬 툴 : 색을 칠할 때 사용
  (12) 페인트 통 툴 : 오브젝트 안의 색상을 채울 때 사용
  (13) 지우개 툴 : 오브젝트를 지우고자 할 때 사용
  (14) 돋보기 툴 : 스테이지의 이미지를 확대/축소할 때 사용
  (15) 드로잉 툴 옵션 : 선택된 툴의 옵션 메뉴

 

■ 여기서 잠깐!

오브젝트(Object)란 ?

오브젝트는 독립된 하나의 개체를 뜻하는 말로서 플래시에서는 도형이나 이미지, 그룹 지어진 요소들과 심벌 등을 총칭하여 오브젝트라고 한다.

 

■ 드로잉 툴을 이용한 이미지 만들기    [맨위로]

1) 배경색 및 화면 크기 지정하기  / 2) 원형과 사각형 그리기 / 3) 선 그리기 / 4) 텍스트 툴 사용하기 / 5) 화살표 툴 사용하기 / 6) 잉크병 툴 사용하기 / 7) 페이트 툴 사용하기 / 8) 브러쉬 툴 사용하기 / 9) 올가미 툴 사용하기 / 10) 스포이드 툴 사용하기 / 11) 지우개 툴 사용하기 / 12) 손 툴 사용하기 / 13) 돋보기 툴 사용하기

먼저 Flash 4를 실행한다.

1) 배경색 및 화면 크기 지정하기    [드로잉 툴을 이용한 이미지 만들기]

메뉴에서 Modify -> Move를 선택한다. Dimensions 와 Background를 적절하게 선택한다. (예를 들어 Dimensions -> Width : 700px, Height : 500px, Background -> 연한 하늘색)

2) 원형과 사각형 그리기    [드로잉 툴을 이용한 이미지 만들기]

① '원형 툴'을 선택한 후 외곽선 색, 선 두께, 선 종류, 내부에 칠해질 색상 등을 선택하여 스테이지에 마우스를 놓고 왼쪽 버튼을 누른채 드래그 하여 원하는 크기의 원을 그린다.(예를 들어 외곽선 색 : 군청색, 선 두께: 2pt, 선 종류 : 기본, 내부 색상 : 군청색을 선택한다.) Shift 키를 누른 채로 왼쪽 버튼을 누르고 드래그 하면 완전한 원이 그려진다. 원하는 위치에 원하는 모양으로 3개 정도 만든다. (예를 들어 첫번째 원 : 내부 색상이 있는 것, 두번째 원 : 외곽선 만 있는 것, 세번째 원 : 내부 색상이 다른 것 등)

  

② 이제는 '사각형 툴'을 선택하여 사각형도 원과 같은 방법으로 그려본다. 원하는 색, 선 종류, 선 두께 등을 설정하여 원하는 모양으로 그려본다. 사각형도 Shift키를 누른 채 왼쪽 버튼을 드래그 하면 정사각형이 그려진다. (예를 들어 첫번째 사각형 : 내부 색상이 있는 것, 두번째 사각형 : 왼곽선만 있는 것, 세번째 사각형 : 내부 색상이 다른 것 등)

  

 

■ 여기서 잠깐!

사각형 툴에서는 모서리 부분을 부드럽게 해주는 옵션이 있다.
사각형을 그리기 전에 바로 이것 을 클릭하여 아래와 같이 Corner Radius를 30 points로 해 보자.(숫자가 클수록 사각형의 모서리는 더 둥글어 진다.)

  

그런 다음 원하는 만큼 사각형을 그려보면 아래 같이 보일 것이다.
   

 

3) 선 그리기    [드로잉 툴을 이용한 이미지 만들기]

① 직선 그리기 : 화살표 툴 밑에 있는 '선 툴'을 선택한다. 역시 원하는 선 색, 선 두께, 선 종류 등을 선택하여 자유 자재로 그려본다.

   

② 자유곡선 그리기 : '연필 툴'을 선택한 후 Pencil Mode에서 Straighten, Smooth, Ink 중에서 선택하고 선 색, 선 두께, 선 종류 등을 선택하여 자유 자재로 그려본다. (Straighten : 마우스가 지나간 선을 직선화 시켜줌, Smooth : 마우스가 거칠게 지나가더라도 곡선화 시켜 부드러운 선을 만듦, Ink : 자유롭게 곡선을 그릴 수 있는 상태임. 아래 그림은 위에서부터 차례로 그린 것이다.)

  

4) 텍스트 툴 사용하기     [드로잉 툴을 이용한 이미지 만들기]

① 텍스트 툴 옵션 : 텍스트 툴을 선택하면 오른쪽과 같이 텍스트 툴의 옵션들이 나온다.

② 실전 연습

③ 메뉴에서 Modify -> Font를 선택하면 폰트 모양, 크기, 위치(보통, 위첨자, 아래첨자), 글자 간격 등을 더욱 자세하게 설정할 수 있다.
④ 텍스트 필드에 마우스를 놓고 메뉴에서 Modify -> Text Field를 선택하면 텍스트 필드에 관련된 옵션들이 나타난다. variable, option, outline 등 원하는 것을 선택해 보자. 이러한 것들은 텍스트를 화살표 툴로 놓고 텍스트에 마우스를 놓고 오른쪽을 놓으면 선택할 수도 있다.
⑤ 텍스트 부드럽게 보이기 -> 텍스트 편집시 텍스트를 부드럽게 보고 싶다면 메뉴에서 View -> Antialias Text를 선택하면 부드럽게 보일 것이다.

5) 화살표 툴 사용하기    [드로잉 툴을 이용한 이미지 만들기]

① 화살표 툴 옵션 : 화살표 툴을 선택하면 제일 위에 드로잉 툴을 설명하는 그림에서 제일 밑에 있는 화살표 툴의 옵션들이 나온다.

② 선택과 해제 : 면이나 선을 선택하고 싶으면 마우스를 해당되는 곳에 놓고 클릭을 하면 면 또는 선이 선택된다. 또한 면과 선이 동시에 있는 것을 선택하려면 마우스를 해당 위치에 놓고 더블클릭하거나 이미지를 포함하도록 마우스로 드래그 하면 된다. 여러개의 오브젝트를 한꺼번에 선택하고자 한다면 Shift키를 누른 상태에서 선택하면 된다. 선택해제는 Esc 이다.

③ 화살표 커서 종류 : 화살표 툴이 선택된 상태에서 마우스로 이미지 주변을 갖다 대면 마우스의 가장자리 부분이 변화가 있을 것이다. 선의 중간 부분에 갖다 대면 곡선 모양으로 변하고, 선의 끝 부분이나 교차점에 위치할 경우에는 각 진 모양으로, 면에 위치할 경우와 빈 공간에 위치할 경우 및 선택한 선이나 면 위에 있을 경우에는 + 십자가 모양으로 변할 것이다.

6) 잉크병 툴 사용하기    [드로잉 툴을 이용한 이미지 만들기]

① 잉크병 툴의 쓰임새 : 앞에서도 설명했듯이 잉크병 툴은 이미 그려진 선을 수정하거나 면에 테두리 선을 만들어 주는 것이다.

② 선 수정하기 : 먼저 잉크병 툴을 선택하고 수정하고자 하는 선 색, 선 두께, 선 종류 등을 선택한다. 원하는 선에 잉크병 툴을 갖다 놓고 마우스 왼쪽을 클릭한다. 그러면 선이 변해있는 것을 볼 수 있을 것이다.

③ 테두리선 만들기 : 먼저 선은 없고 면만 있는 원이나 사각형 모양을 만들어 보자. 면 색은 자유롭게 한다. 그런 다음 잉크병 툴을 선택하고 테두리 선 색, 두께, 종류 등을 선택하여 면의 아무 곳이나 잉크병 툴을 갖다 놓고 마우스 왼쪽을 클릭한다. 그러면 선이 없던 면에 선이 테두리 선이 생겼을 것이다.(주의. 이 때 면의 색이 변하는 것이 아닙니다.) 실제 연습해 보세요.

7) 페이트 툴 사용하기     [드로잉 툴을 이용한 이미지 만들기]

① 페인트 툴의 쓰임새 : 잉크병 툴이 선을 수정한다면 페인트 툴은 면을 채우는 기능을 한다. 또는 이미 채워진 면의 색상을 변환시킬 수도 있다.

② 페인트 툴의 옵션 : 페인트 툴을 선택하면 오른쪽과 같은 옵션들이 나타난다.

③ 면 색상 수정하기 : 먼저 페인트 통 툴을 선택하고 원하는 색상을 선택한다. 수정할 면으로 마우스를 가져가면 마우스 모양이 페인트 통으로 바뀔 것이다. 이 때 마우스 왼쪽을 클릭하면 원하는 색상으로 변할 것이다. 또한 면 색상에서 단색 뿐만 아니라 그라디언트도 선택하여 한번 수정해 보면 마우스의 위치에 따라서 그라디언트가 변할 것이다. (이때 선의 색은 변화가 없다.) 한번 연습해 보세요.

8) 브러쉬 툴 사용하기     [드로잉 툴을 이용한 이미지 만들기]

① 브러쉬 툴은 그림을 그리거나 색을 칠할 때 사용하는 것인데 붓으로 그리듯 두껍게 칠해진다. (이것은 면으로 인식합니다.)브러시 툴을 선택하고 스테이지에 마우스를 놓으면 마우스 모양이 현재 선택되어진 브러쉬 모양으로 변했을 것이다.

② 브러쉬 툴 옵션 : 브러쉬 툴을 선택하면 오른쪽과 같은 옵션들이 나타난다.

9) 올가미 툴 사용하기     [드로잉 툴을 이용한 이미지 만들기]

올가미 툴은 선택 영역을 사각형 모양만이 아니라 자유로운 형태로 설정할 수 있는 툴이다.

10) 스포이드 툴 사용하기     [드로잉 툴을 이용한 이미지 만들기]

스포이드 툴은 선이나 면 또는 텍스트의 속성을 그대로 얻을 때 사용한다. 즉 면에 스포이드 툴을 갖다 대면 브러시 툴로 변하고 클릭하면 페이트 툴의 옵션들을 보여준다. 또한 선에 갖다대면 연필 툴로 변하고 클릭하면 잉크병 툴의 옵션들을 보여준다. 또한 텍스트에 스포이드 툴을 갖다 대면 텍스트 툴로 변하고 텍스트 툴의 옵션들을 보여준다.

11) 지우개 툴 사용하기     [드로잉 툴을 이용한 이미지 만들기]

① 지우개 툴 옵션 : 말 그대로 지우기 위해 사용하는데 지우개 툴을 선택하면 오른쪽과 같은 옵션들이 나타난단.

12) 손 툴 사용하기     [드로잉 툴을 이용한 이미지 만들기]

손 툴은 스테이지를 드래그하여 작업하기 편한 위치에 놓을 때 사용한다. 좌우 스크롤 바를 이용하는게 불편할 때 보통 사용한다.

13) 돋보기 툴 사용하기    [드로잉 툴을 이용한 이미지 만들기]

① 돋보기 툴은 작업 화면을 확대/축소할 때 사용한다. 을 이용하여 +는 확대, -는 축소시킬 수 있다. 돋보기 툴은 스테이지 전체를 확대/축소할 수도 있지만 마우스로 드래그 하여 원하는 부분만 확대/축소할 수도 있다.

② 돋보기 툴을 이용하지 않고 스테이지의 확대/축소하는 방법이 있다. 메뉴의 밑에 보면 단축아이콘 툴바가 나오는데 가장 오른쪽에 퍼센트가 적혀진 부분 이 바로 이것이다. 원하는 퍼센트 만큼 또는 무비 쇼를 한 화면에 볼 수 있는 등 원하는 모양으로 볼 수가 있다.

■ 드로잉 툴을 이용한 이미지 만들기 2     [맨위로]

1) 배경색 및 화면 크기 지정하기

메뉴에서 Modify -> Movie에서 화면 크기 및 배경색을 지정한다. (Demensions -> Width:550px, Height:400px, Background -> 군청색)

2) 파레트 모양의 이미지 만들기

① 드로잉 툴에서 원형 툴을 선택한다.  예를 들어 선 색, 면 색 모두 노란색을 선택하고 원형의 모양을 만들어 원하는 위치에 놓으면 아래 그림과 같이 된다. 원형 모양을 다르게 하고 싶으면 화살표 툴을 선택하여 원형을 삭제하면 되고 색깔도 다른 색을 선택해도 된다.

  

② 원형 내부에 작은 원을 또 그려보자. 파레트 모양을 만들려고 하기 때문에 작은 원을 골고루 배치하여 5개정도 그리고 색깔도 각기 다르게 해보자. (단 선 색만 지정해 보자. 예를 들어, 빨강, 녹색, 파랑, 분홍, 하늘색 등등)
③ 페인트 통을 선택하여 이제부터 작은 원형들 안에 면 색을 칠할 것이다. 단색으로 해도 좋고 그라디언트를 사용해도 좋다. (예를 들어 빨강 그라디언트를 선택하여 원형 안에 아무곳이나 클릭해보자. 차례대로 원하는 색을 선택하여 원형 안에 아무곳이나 클릭하여 예쁜 파레트 모양을 만들어 보자. 결과는 아래 그림과 같이 될 것이다.

  

④ 또한 내부 원형들의 테두리선을 다른 색으로 지정해 주고자 한다면 잉크병툴을 선택하여 해당 원형에 클릭하면 된다.
⑤ 또 원형 툴을 선택해 보자. 이제부터는 파레트의 손잡이가 될 부분을 만들 것이다. 선 색은 없고 면색은 아무거나 선택해 보자. 손잡이가 될 부분에 해당하는 곳에 알맞은 모양으로 원형을 그리고 다시 화살표 툴을 선택하여 방금 그린 원형을 삭제해 보자 그러면 그 부분만 지워질 것이다. 물론 지우개 툴을 이용해도 된다. 또한 손가락이 들어갈 곳을 만들기 위해 원형 툴을 선택하여 앞에 방법처럼 원을 그리고 그 부분만 삭제 해보자. 아래의 두 개 그림과 같이 진행이 될 것이다.

    

3) 저장하기

메뉴에서 File -> Save를 선택하여 원하는 디렉토리에 원하는 파일이름으로 저장한다.

4) 퍼블리시

① 퍼블리시 설정하기 : 메뉴에서 File -> Publish settings...를 선택하여 Formats 항목에서 HTML뿐만 아니라 GIF도 선택하고,  HTML 항목에서 Dimensions를 Percent로 선택하여 Width, Height를 100으로 한다. 이것은 브라우저에 100퍼센트로 보여주기 위함이다.
② 퍼블리시 : 메뉴에서 File -> Publish를 선택한다. 그러면 fla파일 외에 swf, html, gif의 세 개의 파일이 더 만들어질 것이다.
③ 퍼블리시 미리보기 : 메뉴에서 File -> Publish Preview -> Default-(HTML)를 선택하면 브라우저가 실행되면서 파일이 보일 것이다.

  실행결과 보기 / 소스 다운 받기(flash_ex3.fla / 14kb)

[맨위로] [차례] [앞으로] [뒤로]

COPYRIGHT ⓒ 2001 A24S.COM  ALL RIGHTS RESERVED.