리눅스포털

공지사항 ▶

로그인 | 회원가입 | 마이페이지 | 사이트맵

강좌

HOME > 강좌 >

강좌| 리눅스 및 오픈소스에 관련된 강좌를 보실 수 있습니다.

애니메이션파일과 GIF Construction Set 개론

Gif Construction Set은 Alchemy Mindworks Inc에서 개발한 소프트웨어로서, 대부분 인터넷의 웹에 쓰이는 애니메이션파일, 예를들어 배너광고, 움직이는 아이콘 등을 만드는데 가장쉽고, 가장빠르게 제작해주는 애니메이션파일 제작툴입니다.

간단히 말씀드려 "현재 발표된 애니메이션을 만드는 소프트웨어중 가장 간단하고 쉽게 애니메이션 파일을 만들어 주는 도구"라고 할 수 있습니다.

우선, Gif Construction Set의 주된 기능은 다음과 같다고 할 수 있습니다.

새로운 애니메이션 파일의 생성 및 편집하기
Animation Wizard로 애니메이션파일 자동생성 및 편집하기
배너이미지 생성 및 편집하기
Transition효과를 이용한 여러 가지 애니메이션 파일 생성 및 편집하기
전광판(Neon)애니메이션 생성 및 편집하기
글자나 이미지가 회전하는 애니메이션파일 생성 및 편집하기
Avi 파일을 Gif파일로 변환시키거나, Gif파일을 Avi파일로 변환하기
Supercompress로 파일size 최적화하기

여기서 소개드린 것은 GIF Construction Set의 주된 기능으로 이외에도 여러 가지 기능이 있으며, 이번장에서는 홈페이지제작에 필요한 애니메이션파일의 제작방법에 대해서 자세히 배워보도록 할 것입니다.

먼저, Gif Construction Set으로 애니메이션 파일을 만들기 전에 몇가지 기본 지식이 필요합니다.

그렇게 어려운 내용은 아니므로 미리 겁먹진 마시고...

첫 번째 Gif Construction Set에서는 GIF 파일만 그 작업대상으로 하고 있기에 GIF파일의 기본적인 내용에 대한 것이며,

둘째로 웹에 애니메이션 파일을 올려두려면 파일사이즈를 줄여야만 하는데 이를 줄이기 위해서는 파렛트(색상판 정도로 이해하시면 무난함)에 대한 기초적인 이해가 필요합니다.

1. GIF 파일의 구성에 대한 이해

사실 gif파일은 그냥 보기에는 단순한 이미지처럼 보입니다.

하지만 이 gif파일은 몇가지로 구성이 되어 있습니다.

그 구성을 보면 헤드블럭, 루프블럭, 컨트롤블럭, 이미지블럭, 텍스트블럭, 컨멘트블럭등이 있습니다.

gif이미지파일을 구성하고 있는 이 각각의 블록에 대해 자세히 알아보면

헤드블럭 : 이미지의 가로×세로, 즉 이미지의 크기가 정의되어 있습니다.

루프블럭 : 해당이미지의 반복횟수가 정의되어 있습니다.

컨트롤블럭 : 하나의 이미지마다 하나씩 존재하며 해당 이미지에서 다음이미지로 넘어갈 때의 지연시간이 1/100초 단위로 정의되어 있습니다. 여기서 100으로 정의되어 있다면

해당이미지에서 다음이미지로 넘어갈때의 지연시간은 1초가 걸리게 되는 것입니다.

이미지블럭 : 해당이미지의 이름과 이미지크기, 컬러수가 정의되어 있습니다.

현재는 gif이미지의 구성과 블록의 의미등이 잘 이해되지 않겠지만, 실제 애니메이션 파일을 만들어 보면 정말 친근하게 다가올 것이라 생각합니다.

2. 파레트에 대한 이해

Gif 이미지 파일은 색을 정의해 놓은 파레트라는 것을 모두 갖고 있습니다.

하나의 이미지에 하나의 파레트를 갖고 있는 것이 정상입니다.

그런데 우리가 여기서 만들고자 하는 애니메이션 Gif이미지는 사실 여러개의 파일이 하나의 파일로 구성이 되어있는 것입니다.

이 여러개의 파일에는 공통된 이미지들도 많고 똑같은 색상을 가진것들도 많이 있습니다.

여러개의 파일을 하나의 이미지파일로 만들어진 애니메이션 gif파일에서는 공통된 색상과 똑같은 색상들을 추려내어 하나의 파레트를 가지게 됩니다.

하나의 gif이미지에 하나의 파레트를 가진 것을 '로컬파레트'라고 하며, 여러개의 이미지가 하나의 공통된 파레트를 가진 것을 '글로벌파레트'라고 합니다.

이 글로벌파레트를 갖는 이유는 파일사이즈를 줄이고 전송속도를 높이기 위함입니다.

자 그럼 이제부터 본격적으로 Gif Construction Set에 대한 알아보도록 하겠습니다.

Gif Construction Set은 국내의 대형 PC통신상에서 쉽게 구할 수가 있습니다.

뿐만아니라 왠만한 그래픽 자료실등에는 대부분 구비되어 있으므로 별 어려움없이 쉽게 구하실수가 있을 것입니다.

다운받으실때에는 가급적이면 최신버전을 구하시는 것이 좋으며 현재의 버전은 2.0a로 그 파일의 이름은 gcsp20.exe입니다.

자동풀림으로 생성된 파일이기 때문에 실행만 시킨다면 쉽게 설치하실수 있을 것입니다.

편하신 곳에서 다운로드를 하시면 되지만 앞에서도 권해드린 바와 같이 가급적 이 제품을 만든 회사의 홈페이지에서 직접 다운로드를 받는 것이 가장 좋습니다.

여기서는 이 제품의 제작사인 Alchemy의 홈페이지에 방문하여 Gif Construction Set을 다운받아 보도록 하겠습니다.

1. http://www.mindworkshop.com/alchemy/gifcon.html에 접속하십시요.

2. 홈페이지에 접속하면 맨위의 몇가지 메뉴중 "Download"를 클릭한다.

3. 그러면 옆의 그림과 같이 파일이름을 클릭하여 다운로드를 받을 수 있습니다.

4. 다운받은 파일(gcsp20.exe)을 적당한 디렉토리에 저장합니다.

1. 다운받은 파일(gcsp20.exe)을 더블클릭하여 설치를 실행합니다.

2. 설치하는 과정은 아래와 같습니다.

자동풀림파일로 되어있으며, 설치를하고 난뒤에 프로그램그룹을 생성하며, 설치를 하기위해서는 최소한 11MB의 하드디스크 공간이 필요함을 알리고 있습니다.

"OK"버튼을 클릭하시면 됩니다.

설치될 디렉토리를 지정합니다. 원하는 디렉토리를 지정할 수 있지만, 수정없이 그냥 지정된 디렉토리를 그대로 사용하시는 것이 좋습니다. "OK"버튼을 클릭합니다.

이 소프트웨어를 설치하기 위해서는 다음과 같은 라이선스에 동의를 해야합니다.

동의한다는 의미로 아래 오른쪽의 "I Agree"버튼을 클릭합니다.

정식사용자로 등록을 하는 단계입니다.

등록을 하지않더라도 사용이 가능하며 등록없이 그냥 사용하려면 아래의 "None"버튼을 클릭하면 됩니다.

정식사용자로 등록하려면 "등록자 이름"과 "등록코드"를 입력하면 됩니다.

윈도우의 시작메뉴에 GIF Construction Set을 추가하려면 "Yes"를 클릭합니다.

설치가 종료되었습니다.

"OK"버튼을 클릭하시면 됩니다.

설치가 되고 나면 윈도우의 프로그램 폴더에 실행아이콘들이 등록이 되어 있습니다.

이를 먼저 실행시켜 보도록 하겠습니다.

1. 윈도우95/98/NT에서 [시작->프로그램->GIF Construction Set Professional]에서 GIF Construction Set Professional을 클릭합니다.

GIF Construction Set을 처음으로실행시킨 것이며 아래 그림과 같은 메인윈도우가 뜹니다.

모든 작업은 이 창을 통해서 이루어 지며 이 창에 매우 익숙하게 될 것입니다.

먼저 애니메이션 마법사(Animation Wizard)를 이용하여 간단한 애니메이션 파일을 만들어 보도록 하겠습니다.

이 애니메이션 마법사라는 기능은 원하는 GIF파일만 있다면 아래의 예처럼 몇번의 클릭으로 정말 간단히 애니메이션 파일을 만들어 낼 수가 있습니다.

먼저 Animation Wizard를 실행시켜가면서 다음의 작업을 따라해 보시기 바랍니다.

먼저 Animation Wizard를 실행시켜봅니다.

[File - Animation Wizard]를 선택하시거나, 단축키 Ctrl+A를 선택하시면 됩니다.

그러면 다음과 같은 창이 뜨면서 Animation Gif파일을 만들 준비가 되었으며 Next버튼을 클릭하라고 합니다.

여기서 "Next"버튼을 클릭합니다.

Animation Gif file을 Web page용으로 만들것인지를 묻고 있습니다.

우리는 인터넷의 Web상에 올려놓을 Animation file을 만드는 것을 목적으로 하고 있기 때문에 "Yes, for use with a Web page"를 선택하고, "Next"버튼을 클릭합니다.

생성될 애니메이션이 무한정 반복되게 할 것인지, 아니면 한 번 Animation되고 Stop시킬것인지를 선택합니다.

인터넷의 Web page에서는 계속적으로 반복되는 것이 일반적이므로 "Loop indefinitely"를 선택하고 "Next"버튼을 클릭합니다.

생성할 애니메이션파일이 간단히 그려진 이미지인지, 사진 등을 스캔한 이미지인지에 따라서 알맞게 선택해 줘야합니다.

스캔한 이미지이거나, 컴퓨터로 생성된 이미지라면 "Photorealistic"을 선택하고, 선이나 텍스트로 구성된 이미지라면 "Drawn"을 선택합니다.

특별한 이미지가 아닌 일반적인 이미지라면 "Matched to super palette"를 선택하고 "Next"버튼을 클릭합니다.

- Matched to super palette : 가장많이 사용하는 색으로 파레트를 만들어 적용합니다.

- Matched to first palette : 삽입되는 첫이미지의 파레트를 적용합니다.

- Photorealistic : 스캔한 이미지나, 사진같은 이미지일 때 선택합니다.

- Drawn : 선이나 텍스트로 구성된 단순한 이미지일 때 선택합니다.

- Drawn in sixteen colours : 16색이하의 이미지일 경우에 선택합니다.

각 프레임(전체의 gif이미지를 구성하고 있는 하나하나의 이미지) 사이에서 전환될 때의 지연시간을 지정합니다.

1/100초 이므로, 100을 지정하게 되면 지연시간은 1초가 됩니다. 기본으로 100(1초)를 지정하고 "Next"버튼을 클릭합니다.

애니메이션 Gif 파일을 만들 원본이미지를 선택합니다.

"Select"버튼을 클릭하여 원본 gif이미지파일을선택하시면 됩니다.

보통은 페인트샵이나, 포토샵등으로 사용하게될 이미지를 미리 만들어 놓은 뒤에 여기서 사용하게 됩니다.

2개이상의 파일을 선택하여 사용하며 한꺼번에 여러개의 파일을 선택하시려면 윈도우의 탐색기에서 파일을 선택할때와 같이 Shift키나 Ctrl키를 함께 사용하시면됩니다.

만약에 선택된 파일중에 불필요한 파일이 있다면 Delete버튼으로 제거할 수도 있습니다.

(여기서 Delete는 선택하지 않는다는 의미일 뿐, 디스크상에서 삭제된다는 의미는 아닙니다.)

그림과 같이 5개의 파일을 선택했습니다.

다수개의 파일을 선택하기 위해서는 "Shift"키를 누른채 선택하시면 됩니다.

원하는 파일은 계속 선택이 가능하며, 선택이 끝난 후 "Next'버튼을 클릭하시면 다음으로 넘어갑니다.

만약 선택한 파일을 제거하려면 "Delete'버튼을 클릭하시면 됩니다.

이제 애니메이션 마법사가 GIF파일만들기를 완료했습니다.

"Done'버튼을 클릭하면 메인윈도우창에 로딩을 하게됩니다.

생성된 애니메이션파일을 보기위해 "View"버튼을 클릭해 봅니다.

어떻습니까? 조금은 어색할지 모르나, 처음으로 자기손으로 만들어본 애니메이션 치고는 꽤 근사하지 않습니까?

이렇게 생성된 애니메이션을 바로 홈페이지의 애니메이션이미지로 사용을 할 수도 있습니다.

하지만, 그냥 이대로 사용하기에는 파일용량도 제법크고, 불필요한 부분도 많아 이 애니메이션 이미지를 전송하는데 꽤 시간이 걸릴 것입니다.

하여, 뒤에서 설명되는 "Supercompress로 파일최적화하기"편을 참조하셔도 좋습니다.

일단은 생성된 애니메이션을 확인하셨다면 [File - Save]메뉴를 이용해서 생성된 애니메이션을 저장 해 둡니다.

이제, 생성된 이미지를 간단히 편집하는 법을 배워보도록 하겠습니다.

이 그림은 완성된 애니메이션을 테스트해보기 위해 "View'버튼을 클릭한 것입니다.

이상으로 애니메이션 마법사의 사용법을 모두 마치도록 하겠습니다.

사실 Gif Construction Set에서 애니메이션 마법사의 사용은 기초에 해당합니다.

좀더 세련되고 멋진 애니메이션을 만들어 보기위해 다음으로 넘어 가도록 하겠습니다.

여기까지 따라오시느라 힘이드신분은 커피한잔 드시면서 지금까지 설명해왔던 내용들을 차근차근 돌이켜보는 것도 좋을 것 같습니다.

Banner이미지는 주로 Web page상의 광고이미지로 많이 쓰입니다.

이번에는 이 배너 이미지를 간단히 만들어 보도록 하겠습니다.

배너광고이미지를 만들기는 너무나 쉽습니다.

배너이미지에서 나타낼 텍스트의 입력과 몇가지 설정사항들만 지정해 주면 자동적으로 배너이미지가 생성됩니다.

자, 그럼 단계별도 따라가면서 배너광고이미지를 만들어 보도록 하십시요.

우선먼저 [Edit - Banner]메뉴를 선택합니다.

그러면 아래와 같은 "Edit Banner"대화상자가 열리면서 몇가지 설정사항이 기다리고 있습니다.

각 버튼의 기능들은 다음과 같습니다.

Text colour : 글자색지정

Background : 배경색지정

Shadow : 그림자색지정

Backlight : 문자에 Backlight효과나 Neon효과를 줄 때의 색지정

Grey level : 문자에 Soft Shadow효과를 적용할 때 지정

Loop : 애니메이션이 계속 반복되게 하려면 체크(?)

Rolling : 우에서 좌로 애니메이션

Transparent background : 배경색에 대한 투명이미지로 생성

Compress palette : 최소색상을 적용하여 애니메이션 생성

Cells : Banner의 프레임수를 지정(수치가 높을수록 부드러운이미지가 되지만 파일용량이
----커짐에 유의하여 적당한 셀크기를 지정합니다.

Delay(1/100ths of a second) : 각 프레임간의 지연시간을 지정

Offset : 글자와 그림자 사이의 간격지정

Pause : 한 번 애니메이션 되고 난뒤에서 다시 시작하기전까지의 정지시간지정

Font : 글자체 지정

Type : 문자효과를 지정합니다.(이것저것 선택해서 "Test"버튼으로 확인해보는 것이 좋습니다.)

- Simple : 보통문자(별 효과없음)

-Drop Shadow : 그림자가 있는 문자

-Embossed : 볼록문자효과

-Teletype : 문자가 하나씩 나타나는 효과(직접확인 하는 것이 이해가 가장빠름)

-Teletype with shadow : 그림자가 있는 Teletype효과

-Backlight : 배경색과 문자색은 검정색, 문자테두리색은 Backlight에서 지정한 색

-Neon : 배경색은 검은색, 문자색은 Text colour에서 지정한색, Backlight가 적용됨

-Soft Shadow : 부드러운 그림자효과

-Texture : 문자가 약간 두꺼워지면서 무늬가 생기는 효과

-Texture with Shadow : 그림자가 있는 문자

Banner text : 여기에 애니메이션 시킬 문자를 입력한다.

Sample text : 각종 설정사항들이 적용되어 보여준다.

Test : 위의 설정사항들로 실제어떻게 생성이 될 것인지를 미리보기한다.

설정사항이 변경되었을 때마다 "Test"버튼을 클릭하여 설정된 사항으로 배너이미지가 실제로 어떻게 생성될 것인가를 확인하면서 작업하시면 됩니다.

Test버튼으로 작업중 결과확인

이렇게하여 원하는 애니메이션이 생성되었다면 "OK"버튼을 클릭하시면 주화면으로 돌아옵니다.

View버튼으로최종결과 확인하기

애니메이션이 완료 되었다면 저장을 하시고 홈페이지에 링크를 시키시면 됩니다.

이번에는 버튼이미지를 만들어 보도록 하겠습니다.

먼저 버튼이미지를 만들기 위해 "Edit -> Button"을 클릭합니다.

Text color : 버튼에 쓰여진 글자색을 결정합니다.
Button color : 버튼의 색을 결정합니다.
Back color : 배경색을 결정합니다.
Font : 클릭을 하면 Font창이 뜨면서 글자체, 글자스타일, 글자크기등을 결정합니다.
Button text : 버튼에 쓸 글자를 입력합니다.
Drop shadow : 버튼에 글자효과를 줍니다.
Highlight : 버튼을 밝게 해 줍니다.
Anti-alias : Anti-alias 기능을 사용합니다.
Round : 모서리를 둥그렇게 합니다.
Transparent : 투명한 효과를 줍니다.
Depth : 외각의 오목한 효과를 주는 두께를 결정합니다.
Padding : 전체적인 크기를 바꾸어 줄 수 있습니다.
Offset : Offset 값을 바꾸어 줄 수 있습니다.
Export : 다른이름으로 저장할 수 있습니다.

앞의 설정값들을 왼쪽의 값들로 변경하여 바뀐이미지를 보여주고 있습니다.

Font 지정하기

"Font"버튼을 클릭하면 왼쪽의 그림과 같이 글자속성을 변경하여 줄 수 있습니다.

최종결과 확인

원하는 설정값을 모두 입력했다면 "OK"버튼을 클릭하면 왼쪽의 그림과 같이 메인윈도우로 돌아 옵니다.

그리고 최종결과값으로 "View"버튼(선글라스아이콘)을 클릭합니다.

원하는 이미지가 되었다면 저장하여 홈페이지에서 버튼으로 활용해 보시기 바랍니다.

지하철이나 비디오가게, 증권거래소등에서 볼 수 있는 글자가 좌우로 스크롤되는 전광판형태의 애니메이션 이미지를 만들 수 있게 해주는 기능이 LED sign기능입니다.

이런 전광판형태의 애니메이션을 만들려면 먼저 [Edit - LED sign]메뉴를 선택합니다.

그러면 아래그림과 같은 대화상자가 나타나며, 적당한 값으로 설정사항을 지정합니다.

먼저 그림과 같이 "Edit -> LED Signs"버튼을 클립합니다.

Loop : 애니메이션이 계속 반복되게 하려면 체크(?)
Show dark pixels : 바탕색을 회색으로 바꿔줌
Smooth scroll : 애니메이션의 움직임을 부드럽게함.
Compact sign : 글자의 크기를 작게 만들어줌.
Compress palette : 최소색상을 적용하여 애니메이션 생성(파일크기를 줄임)
Columns wide : 애니메이션이미지의 가로(좌우)크기를 지정
Columns per frame : 프레임당 칼럼수로 1로 지정했을 때 가장 부드럽게 움직이지만, 파일의 용량이 커지는 단점이 있다.
Delay(1/100ths of a second) : 각 프레임간의 지연시간을 지정

Sign text : 문자를 입력하는 곳으로, 문자의 기본색은 흰색입니다. 색깔을 바꿔주고자 한다면 다음과 같 은 색코드를 참조하여 입력한다.

@R :빨강색(RED), @G :녹색(GREEN), @B :파랑색(BLUE), @C :(CYAN), @M :심홍색(MAGENTA), @Y :노란색(YELLOW), @W :흰색(WHITE)

**참고하세요**

예를 들어 보겠습니다.

"어서오십시오, 저의 홈페이지에 오신 것을 환영합니다."라는 문자의 색을 파랑색, 노란색, 빨강색순으로 애니메이션되게 만들고 쉽다면 다음과 같이 입력하면 됩니다.

"@B어서오십시오 @Y제홈페이지에 오신 것을 @R환영합니다."

Test : 위의 설정사항들로 실제어떻게 생성이 될 것인지를 미리보기한다.

다음 그림은 오른쪽의 "Test"버튼을 클릭하여 현재의 설정이 어떻게 적용되었나를 확인해 본 것입니다.

Test 하기

완료가 되었다면 "OK"버튼을 클릭합니다.

메인 윈도우 화면에서 완료된 애니메이션을 확인해 보기 위해 "View"버튼(선글라스아이콘)을 클릭하여 최종결과를 확인하고 있습니다.

인터넷을 조금이라도 항해해 보셨다면 문자가 회전하는 애니메이션을 본적이 있을 것입니다.

또한 이미지가 회전하는 애니메이션도 보신적이 있을 것입니다.

이런 애니메이션들을 여기서 만들수가 있습니다.

단, 여기서 회전시킬 이미지나 텍스트이미지는 미리 만들어져 있어야 한다는 것입니다.

앞에서도 언급했었지만, 페인트샵이나 포토샵등으로 얼마든지 훌륭한 이미지를 만들수가 있습니다.

먼저 [Edit - Spin]메뉴를 선택하면 아래의 그림이 나타납니다.

아래의 그림은 회전방향과 반복여부등 몇가지 설정사항들이 있습니다.

몇가지 설정사항들은 앞에서 반복되는 것들입니다.

Direction : 회전방향선택 (왼쪽:반시계방향과 오른쪽:시계방향)
Loop : 애니메이션이 계속 반복되게 하려면 체크(?)
Transparent background : 배경색에 대한 투명이미지로 만들것인지의 여부
Remap to current default palette : Setup에서 지정한 파레트로 이미지를 바꿈.
Compress palette : 최소색상을 적용하여 애니메이션 생성
Steps : 애니메이션의 전체 프레임수 지정
Delay(1/100ths of a second) : 각 프레임간의 지연시간을 지정
Select : 회전시킬 문자이미지나, 이미지파일을 선택합니다.
Test : 설정된 사항으로 미리보기를 확인합니다.

앞에서도 누차 말씀드린바와 같이 위의 설정사항들로 설정하고 나면 "Test"버튼으로 반드시 생성될 실제 이미지를 확인해 보시기 바랍니다.

설정이 완료되었다면 "OK"버튼을 클릭 합니다.

주화면으로 돌아와서 먼저 해야 할 것은 생성한 애니메이션을 저장하는 것입니다.

다음부터는 GIF Construction Set의 파워풀한 기능에 대한 것입니다.

선택한 이미지에 수십가지의 변이효과를 적용할 수 있습니다.

먼저, [Edit - Transition]메뉴를 선택합니다. 그러면 아래와 같은 창이 나타납니다.

Appear : 이미지를 보이게함.
Disappear : 이미지를 보이지 않게함.
Loop : 애니메이션이 계속 반복되게 하려면 체크(?)
Transparent background : 배경색에 대한 투명이미지로 생성
Remap to current default palette : Setup에서 지정한 파레트로 이미지를 바꿈.
Pause after cycle :한번반복(애니메이션)되고 난후에 정지시간(Pause)의 적용여부
Compress palette : 최소색상을 적용하여 애니메이션 생성
Cells : 생성할 애니메이션의 프레임수를 지정(수치가 높을수록 부드러운이미지가 되지만 파일용량이 커짐에 유의하여 적당한 셀크기를 지정합니다.)
Delay (1/100ths of a second) : 각 프레임간의 지연시간을 지정
Pause : 한 번 애니메이션 되고 난뒤에서 다시 시작하기전까지의 정지시간지정. 앞의 "Pause
after cycle"이 선택이 되었을때만 효과가 있다.

-Transition : 애니메이션의 변이효과를 선택합니다.("Test"버튼으로 확-인하면서 선택합니다.)
-Adam 7 interlace : 픽셀단위의 점형태
-Holizontal Split : 수평으로 갈라지는 애니메이션
-Raster : 왼쪽과 오른쪽에서 동시에 맞물려 어울리는 애니메애선.
-Sandstorm : 모래형태로 흩뿌려지는 애니메이션
-Tile : 타일의 조작이 맞춰지는 효과의 애니메이션
-Vertical Split : 수직으로 갈라지는 애니메이션
-Wipe in From Bottom : 아래에서 위로 움직이는 애니메이션
-Wipe in From Left : 왼쪽에서 오른쪽으로 움직이는 애니메이션
-Wipe in From Right : 오른쪽에서 왼쪽으로 움직이는 애니메이션
-Wipe in From Top : 위에서 아래로 움직이는 애니메이션
Select : 여기서 애니메인션시킬 gif파일을 선택합니다.
Test : 위의 설정사항들로 실제 어떻게 생성이 될 것인지를 미리보기한다.

여기서 적당한 값이 설정이 되었다면 반드시 "Test"버튼으로 설정된 값이 지정한 gif파일에 어떻게 적용이되어 애니메이션되는가를 반드시 확인해 보시기 바랍니다.

만약에 마음에 들지 않는다면 다시 설정값을 조절하여 마음에 쏘~옥 들때까지 "Test"버턴으로 확인해 보시기 바랍니다.

설정이 다 되었다면 이제 "OK"버튼을 클릭합니다.

주화면으로 다시 돌아왔다면 [File - Save]메뉴를 선택하고 생성된 애니메이션파일을 저장합니다.

다음은 GIF Construction Set에서 제공하는 변이효과에 대한 예들을 보인 것입니다.

Dissove 변이효과

Horizontal Spinner Down 변이효과

Horizontal Spinner Up변이효과

Interlace변이효과

Horizontal Raster 변이효과

Horizontal Split 변이효과

None 변이효과

Radar 변이효과

Sandstorm 변이효과

Tile 변이효과

Vertical Raster 변이효과

Roll Down 변이효과

Roll Left 변이효과

Roll Right 변이효과

Roll Up 변이효과

Vertical Spinner Clockwise변이효과

Vertical Spinner Counterclockwise 변이효과

Vertical Split 변이효과

Wipe in from Bottom 변이효과

Wipe in from Left 변이효과

Wipe in from Right 변이효과

Wipe in from Top 변이효과

PC에서 동영상파일로 많이 쓰이는 *.avi 파일을 gif 애니메이션파일로 만들 수 있고, 반대로 gif파일을 *.avi파일로 만들수가 있습니다.

*.mpg, *.mov등 동영상파일에는 몇가지 더 있으나 *.avi파일 외에는 Gif Construction Set에서 지원되지 않습니다.

아래의 그림과 같이 "File -> Movie"를 클릭하시면 3개의 메뉴가 나옵니다.

첫 번째 "Movie to GIF"는 동영상 AVI파일을 애니메이션 GIF파일로 변환할 수 있는 것이며, 두 번째 "GIF to Movie"는 GIF 애니메이션 파일을 AVI동영상파일로 변환시켜 줍니다.

그리고 마지막 세 번째 "Preview Movie"는 동영상파일을 미리 볼 수 있도록 해 줍니다.

먼저 동영상 파일(AVI파일)을 애니메이션 GIF파일로 변환하여 보겠습니다.

"File -> Movie -> Movie to Gif"를 클릭합니다.

"열기"대화상자에서 변환할 *.avi파일을 선택합니다.

Movie options에서 적용한 팔레트를 선택한 후 "OK"버튼을 클릭합니다.

여기서는 사용할 파렛트를 선택 합니다.

가장 효과가 좋은 "Dither to superpalette"를 선택하고 맨 아랫쪽에 있는 "Loop"는 애니메이션의 반복을 무한루프하게 합니다.

이제 "OK"버튼을 클릭합니다.

주화면의 아랫부분을 보면 파일변환 진행율이 표시되는 막대가 보입니다.

파일변환이 완료되고 나면 주화면에 블록단위로 생성된 gif파일이 나타납니다.

작업이 완료되면 파일을 저장합니다.(File - Save)

먼저, Movie파일로 만들기 위해 GIF파일을 불러와야 합니다.

*.avi파일로 변환할 gif파일을 File - Open메뉴에서 선택합니다.

"File -> Movie -" Gif to Movie"메뉴를 선택합니다.

이제 불러오기한 GIF파일을 저장하면 동영상 파일(AVI)로 변환이 됩니다. "Save as"대화상자에서 적당한 이름을 입력한 후에 생성된 동영상파일을 저장합니다.

※ 동영사파일 미리보기

. 작업을 하기전에 동영상파일이 어떻게 동작하는지를 미리 확인할 수 있게 합니다.

. File - Movie - Preview Movie를 선택합니다.

. "Open"대화상자에서 동영상파일(*.avi)을 선택한후 "열기"버튼을 클릭하면 화면상에 작은 실행창이 뜨서 동영상을 보여줍니다.

애니메이션파일은 여러개의 파일이 하나, 하나씩 차례로 디스플레이 되므로 파일의 용량이 다른 이미지파일에 비해 더 클 수밖에 없습니다.

그런데 Web page에서 사용하기 위한 애니메이션파일은 그 크기를 줄여야만 합니다.

애니메이션파일의 크기가 크면 홈페이지를 로딩하는데 많은 시간이 소요되게 됩니다.

아무리 훌륭한 서비스에 멋진 디자인으로 무장한 홈페이지라도 홈페이지가 뜨는 시간, 즉 로딩하는 시간(전송시간)이 길어지면 네티즌들은 발길을 돌리게 되므로 홈페이지 로딩시간을 최소화 하여야 합니다.

이 전송시간을 줄이기 위해서 애니메이션 파일의 사이즈를 최대한 줄여야 하는데 이 역할을 자동적으로 해 주는 것이 여기서 설명할 "Supercompress"기능입니다.

Supercompress는 필요한 색상을 최소화하여 파렛트를 만들어 애니메이션파일을 만들게 됩니다.

구체적으로 설명하면 다음과 같습니다.

gif애니메이션파일에 속해있는 여러개의 이미지파일들은 서로 공통된 색과 불필요한 부분이 상당히 많습니다.

또한 gif 이미지의 한부분을 구성하고 있는 Plain Text블럭과 Comment블럭은 웹브라우즈에서는 볼수가 없으므로 인터넷에서 사용하기 위한 목적으로 애니메이션을 만들었다면 이 두 블록은 필요가 없습니다.

따라서, 이런 불필요한 부분은 없애주고, 여러개의 이미지파일이 하나의 공통파레트(이를 "글로벌파레트"라고합니다.)를 사용하게 되면 파일의 사이즈를 상당부분 줄일 수 있게 됩니다.

이런 방법을 활용해서 파일의 최적화를 시켜주는 기능이 바로 "Supercompress" 기능입니다.

자, 그럼 최적화 시킬 애니메이션 파일을 File - Open 메뉴를 선택해서 불러오도록 합니다.

그리고 File - Supercompress메뉴를 선택하면 다음과 같은 최적화 대화상자가 나타납니다.

가급적이면 선택할 수 있는 항목은 모두 선택하는 것이 좋습니다.

Start버튼을 클릭한다.

- Palette compression : 글로벌 파레트에서 사용되지 않는 색은 제거합니다.
- Strip all plain text blocks : 웹브라우즈에는 의미없는 텍스트블럭을 제거합니다.
- Prune overlapping frames: 각 프레임간 변함없는 부분을 제거한다.
- Strip all comment blocks : 웹브라우즈에는 의미없는 코멘트블럭을 제거합니다.

선택을 하셨다면 이제 "Start"버튼을 클릭하면 불필요한부분을 싸~악 제거한 최적화된 파일이 생성됩니다.

최적화시키기 전에 파일사이즈를 체크해 두셨다가 최적화 시킨후의 파일사이즈와 비교해 보신다면 최적화의 효과가 어느정도인가를 알수가 있을 것입니다.

이렇게 하나, 둘씩 응용해 가다보면 자신도 모르게 남보다 많이 알게되고, 남들보다 더 많이 알게되면 자신만의 노하우가 쌓이게 되며, 이 노하우가 쌓이다 보면 자기자신이 어느새 그 분야의 전문가가 되어 있다는 것을 스스로 느낄때가 있을 것입니다.

이번 장에서는 작성된 애니메이션의 각 프레임마다의 세밀한 설정을 할 수 있는 편집작업에 대해 배워보도록 하겠습니다.

GIF Construction Set의 메인윈도우에 나타나 있는 아이콘들의 기능에 대해서 알아보도록 하겠습니다.

아래의 그림을 먼저 보도록 하십시오.

메인윈도우의 툴바(Toolbar)에 있는 아이콘들의 기능은 다음과 같습니다.

메인윈도우에서 작업중인 애니메이션파일의 이미지들의 크기를 어떻게 해서 볼것인가를 선택합니다.

맨위의 Text Only는 이미지는 보이지 않고 각 Block의 설정수치만 보여줍니다.

그외에 Percent로 되어 있는 것은 그 수치에 맞는 크기로 보여 줍니다.

각자의 취향에 맞게 선택하면 됩니다.

Loads an animation from disk

GIF파일을 불러오기 합니다.

Saves the current animation to disk

현재 작업중인 GIF파일을 저장합니다.

Views the current animation

현재 작업중인 GIF파일의 실제 모습을 볼 수 있습니다.

Activates Animation Wizard

애니메이션 마법사를 실행합니다.

[원글링크] : https://www.linux.co.kr/home2/board/subbs/board.php?bo_table=lecture&wr_id=469

박성수

파파
헐렁고수

회사소개 사이트맵 이용약관 개인정보취급방침 책임한계와 법적고지

상호 : (주)에스유소프트 | 대표자 : 박성수 | 전화 : 1544-8128 | Fax : 051-744-4970 | 사업자번호 : 220-88-56770
통신판매업신고번호 : 2015-경기성남-0883호
서울: 경기도 성남시 분당구 성남대로 295 대림아크로텔 B동 436호
부산: 부산광역시 해운대구 센텀중앙로 48, 914호(우동, 에이스하이테크21)
기업부설연구소: 부산광역시 해운대구 센텀중앙로 48, 914호(우동, 에이스하이테크21)