플래시 액션스크립트를 이용한인터랙티브 홈페이지

팀명 : Hot-Flash팀원 : 이 석 구

Term-Project 의 목적

목적 : 플래시의 에니메이션과 액션스크립트 기능을 이용하여 역동적인 홈페이지를 제작 하기위한 기술 습득

목표 : 컴퓨터학부 OS 연구회의 홈페이지 제작

플래시의 장점

벡터기반의 운영프로그램– 벡터를 기반으로 사용되기 때문에

원하는 에니메이션에서 주로 사용되는 이미지의 확대 및 축소에 따른 이미지의 손상이 없으며 , 웹상에서 모든 데이터를 전송받지 않고 부분적으로 전송완료후 실행이 가능한 스트리밍 (Streaming)기술로 파일이 다소 커지더라도 이에 대한 단점을 보완해 주고 있다 .

백터이미지

비트맵이미지

플래시의 장점

뛰어난 압축률– 전에 간단한 에니메이션으로 사용했던 GIF 와는

달리 뛰어난 움직임의 효과의 재현이 가능하며 , 플래쉬에서 에니메이션을 제작할 때 심벌로 등록을 하여 사용할 경우 같은 심벌에 대한 사용은 수백 , 수천번을 사용하여도 이에 대한 용량은 동일하다 .

플래시의 장점

사용자의 상호작용– 이전 그래픽 솔루션의 경우 화려함이나 이미지의

보여주는 효과에 그쳤지만 , 플래쉬는 다양한 에니메이션 형식의 제작이 가능하며 , 또한 웹을 이용하는 사용자와의 상호작용이 가능하다 . 보통 플래쉬카드나 게임등에서 보아왔듯이 사용자가 누르는 버턴이나 키보드등의 작용에 대한 반응이 가능하기 때문에 디자인과 프로그램이 결합된 차세대 멀티미디어 저작도구로 각광받고 있다 .

플래시의 장점

사운드의 삽입가능– 플래쉬가 초기에 이렇게 각광을 받게 된 요인중의

하나가 화려한 화면과 함께 제공되는 효과음이였다 . 이전의 보기만 해오던 화면에 사운드가 추가됨으로써 많은 이들의 시선을 한몸에 받게된 것이다 .

배우기가 쉽다– 플래쉬는 다른 저작도구나 그래픽 프로그램과는

달리 전문가가 아니더라도 이에 대한 지식 및 활용을 넓히는데 큰 어려움이 없다 .

액션스크립트란 ?

액션스크립트 (ActionScript) 는 플래시 내에서 사용되는 스크립팅 언어 입니다 . 플래시에서는 타임라인을 이용해서 애니메이션을 제작할 수 있는것은 물론 , 액션스크립트를 이용하여 강력하고 상호작용이 포함된 멀티미디어 콘텐츠를 제작할 수 있습니다 . 액션스크립트는 플래시 무비에 등장하는 그래픽 , 텍스트 , 애니메이션 , 사운드 등의 요소를 재어할 수 있는 프로그래밍 언어입니다 .

액션스크립트의 미래

매크로미디어사는 포켓 pc 에서 플래시 무비를 재생시킬 수 있는 포켓 pc 용 플래시 플레이어와 개발자 키트를 발표했습니다 . 적은 용량을 가지면서도 강력한 기능을 담을 수 있는 플래시 기술은 이처럼 데스크탑 이외의 장비에서도 채용되고 있습니다 . 포켓 pc 는 물론이고 곧 무선 단말기 (PDA, 핸드폰등 ), 인터렉티브 TV 나 게임화면의 인터페이스 등에서도 플래시 무비가 재생되는 것을 볼 수 있게 될 것입니다 .

플래시 홈페이지 제작 단계

웹 서버로 전송

로컬상의 브라우저에서 테스트

쇽웨이브 파일 Html 문서에 삽입

쇽웨이브 파일 생성

플래시무비 제작

플래시무비 기획

플래시 웹사이트의 기획

플래시 웹사이트의 사용성 (Usability) 을 높이기 위한 10 가지 Tip

1. 사용자의 목적을 기억하라 . 2. 사이트의 목적을 기억하라 . 3. 불필요한 인트로 애니메이션을 자제하라 . 4. 논리적인 내비게이션과 상호작용을 제공하라 . 5. 일관성있게 디자인 하라 . 6. 애니메이션을 남용하지 말라 . 7. 사운드를 적절한 선에서 사용하라 . 8. 저 ( 低 ) 대역폭 사용자들에게 대한 배려를 잊지 말라 . 9. 다양한 환경의 사용자들도 접근이 용이하게 디자인 하라 . 10. 사용성을 테스트 하라 .

플래시 무비 제작과정

Os 연구회 홈페이지 전체 구조

Intro movie

main

About scene Professor scene Studests scene

Professor back Students backAbout back

Intro main

skip

플래시 무비 제작과정

Intro 화면 구성심볼 (MovieClip)

심볼 (Button)

플래시 무비 제작과정

Intro 프래임 구성

label

무한루프

플래시 무비 제작과정

메인 화면 구성

가이드라인

메뉴버튼

심볼 (Symbol)

심볼의 정의– 심볼을 한마디로 정의하면 “재사용이 가능한 오브젝트”

라고 말할 수 있습니다 . 즉 , 어떠한 오브젝트를 심볼로 저장한 후 재사용할 수 있다는 의미이기도 합니다 .

심볼의 특징1. 오브젝트가 그룹의 속성을 가지게 됩니다 .2. 라이브러리에 등록이 되어 재사용할 수 있게 됩니다 .3. 재사용을 해도 파일의 크기가 커지지 않습니다 .4. 라이브러리에서 꺼내어 재사용한 오브젝트를 변형할 수

있습니다 .

심볼 (Symbol)

심볼의 종류– 그래픽 심볼 : 일반적인 트위닝에 사용하는 Instance( 재사용 가능

한 객체 ) 로 , 메인 무비의 애니메이션이 Play 된 상태에서만 애 니메이션이 일어나는 심볼입니다 .

– 버튼 심볼 : 사용자와의 상호작용을 위한 액션을 지정할 수 있는 Instance 로 , [UP][OVER][DOWN][HIT] 의 마우스 반응

프레 임 속성을 가지고 있는 심볼입니다 .– 무비 클립 : 메인 무비의 애니메이션이 Stop 된 상태에서도 독자적 인 타임라인에 의해 애니메이션이 일어나는 Instance로 , 무비 클립 속에 또다른 무비클립이나 버튼 심볼 , 그래픽 심볼 , 혹은 심볼이 아닌 그룹 , 비트맵 ... 등등을 포함할 수 있습니다 .

심볼 (Symbol)

Intro 메인화면의 ‘ OSL’ 버튼 제작과정

1. 먼저 각 글씨를 만들고 각각 심볼로 등록한다 .

2. 각 심볼을 이용하여 무비를 작성하고 무비심볼로 등록한다 .

심볼 (Symbol)

Intro 메인화면의 ‘ OSL’ 버튼 제작과정 ( 계속 )

3. 위 그림과 같이 심볼들을 배치 하고 버튼심볼로 등록한다 .

3. 등록된 버튼심볼에 마우스에 대

한 속성을 주기위해 더블클릭 하여 연다 .

심볼 (Symbol)

평상시 오버시 클릭시

Intro 메인화면의 ‘ OSL’ 버튼 제작과정 ( 계속 )

4. 각 속성에 키프래임을 설 정하고 다음과 같이 등록 한다 .이전단계에서 등록한

무비심볼

플래시 무비 테스트

스트리밍 테스트– 우리가 무비를 만들어 놓고 제일 궁금해 하는

사항은 실제로 이 무비를 인터넷상에 올렸을 때 어떻게 재생이 되는가 하는 것입니다 .

– 테스트 모드의 Control 메뉴에서 Show Streaming을 선택하면 대역폭에 따른 사용자가 접속했을때 실제 인터넷 상에서의 상황 그대로를 재현해 줍니다 .

플래시 무비 테스트

대역폭

실제 전송된 데이타

대역폭을 초과한 프래임

<28.8k 모뎀사용자가 접속했을때 >

플래시 무비 테스트

대역폭 초과– 위 그래프에서 프래임당 200byte(200B/fr) 의 값을 넘는 그래프가

있다면 그 해당 프래임을 재생할때 일시적으로 멈추는 현상이 발생합니다 .

플래시 무비의 최적화– 무비를 제작한 후 태스트 할 때에는 될수 있는 한 대역폭의 한계를 넘어서는 프레임이 없도록 무비를 최적화 시켜줄 필요가 있습니다 .

– 대역폭을 넘기는 프레임이 있다고 하더라도 그 주위의 프레임에 있는 데이타가 작으면 데이터를 분산하여 스트리밍이 가능하게 만들어 주므로 최적화가 이루어 질 수 있습니다 .

대역폭 2400kb / 초당 12 프레임 = 200B/fr