Flash MX 2004

플래시

플래시 벡터 드로잉 (Vector Drawing) 을 기반으로 한 웹에니메이션

기능과 프로그래밍 기능이 결합한 멀티미디어 제작 도구 플래시의 시초 (1996)

• 퓨처웨이브 소프트웨어 퓨처 스플래시• Macromedia 사에서 인수 (1997) 매크로미디어 플래시• 어도비 , 매크로미디어 인수합병 (2005)

홈페이지 제작 및 웹애니메이션 제작프로그램 가능 애니메이션 기능뿐아니라 프로그래밍 기능까지 가능 인터넷 역사상 , 플래시는 가장 많이 배포된 소프트웨어이다

라고 표현할 정도 폭발적인 인기를 얻고 있음

플래시특징

특징 일정한 화질을 유지

• 벡터그래픽 기반의 도구• 이미지가 크기에 상관없이 일정한 화질을 유지

압축률이 뛰어남• GIF 애니메이션에 비해 상당히 적은 용량으로 자연스럽게 움직임을

만들어냄• 플래시 무비에서 자주 쓰이는 그림을 심벌로 만들 경우 수천 번을

사용해도 전체 무비 용량이 커지지 않음• 플래시 안에 있는 비트맵 이미지나 사운드 파일을 다시 압축 가능

움직이는 정보를 줌• 플래시를 사용함으로써 뮤직 비디오를 보여주듯 원하는 정보를

전달할 수 있게 됨• 정적인 인터넷에 동적인 개념을 부여

플래시특징

특징 양방향 커뮤니케이션이 가능

• 강력한 액션 스크립트 기능 사용• 마우스의 움직임에 따라 내용이 다양하게 변화할 수 있음• 사용자가 원하는 대로 내용을 바꿀 수 있음

스트리밍 기술을 지원• 브라우저에서 플러그인을 사용하여 , 전체 데이터가 전송되기

전에 데이터의 재생을 시작함• 사용자들이 큰 용량의 멀티미디어 파일을 빠르게 다운로드받을

수 있도록 함

플래시특징

음악 파일 추가 가능 무비에 첨부된 음악 파일은 그것을 더욱 역동적으로 꾸며주며 ,

버튼에 적절히 사용된 음악 파일은 해당 페이지에 더욱 집중할 수 있도록 도와줌 .

비트맵 지원 GIF, JPEG, PNG 등의 이미지를 불러오거나 내보내기를 할 수

있음• 삽입된 비트맵 이미지는 ' 비트맵 부드럽게 만들기 ' 기능을 이용하면

확장하거나 회전시킬 때 품질을 높일 수 있음

벡터 vs. 비트맵 방식

벡터 방식 드로잉 계열의 프로그램에서 사용되는 방식

비트맵 방식 이미지프로세싱 계열의 프로그램에서 사용되는 방식 비트맵 방식 이미지

• JPG, GIF, PNG, BMP, TIF, RGB

플래시 활용

플래시 애니메이션 엽기토끼 http://www.mashimaro.co.kr 우비소년 http://www.woobiboy.com 졸라맨 http://www.dkunny.com

플래시로 만든 영화 홈페이지 장화홍련 http://www.twosisters.co.kr 아이스 에이지 http://www.iceagemovie.com/

플래시 게시판 취화선 http://www.chihwaseon.com

플래시 광고 배너 플래시 게임

워너브라더스 어드벤처 게임 http://www2.warnerbros.com 이카드 (E-card)

디어유컴 http://www.dearyou.com 샌드투유 http://card.send2u.net

플래시의 발전과정

퓨처 스플래시 애니메이션 (1996.9) GIF 애니메이션을 대체할 수 있는 애니메이션 툴

매크로 미디어 플래시 2.0 (1997. 4) 매크로미디어 퓨처 웨이브 소프트웨어 인수 비트맵 이미지 사용과 사운드 기능 보완

플래시 3.0 (1998. 5) 드로잉 기능 향상에 중점

플래시 4.0 (1999. 6) 인터페이스와 액션 스크립트 향상

플래시 5.0 (2000. 7) 복잡한 액션 스크립트를 간단 명료화

플래시 MX (2002. 3) 플래시 6.0 매크로 미디어사의 주요 프로그램간의 호환성을 위해 인터넷 애플리케이션으로 발전해 나감

플래시의 발전과정

플래시 MX 2004 자동으로 액션 스크립트 작성 향상된 속도와 성능 (2-10 배 ) 일러스트레이터 및 PDF 파일 임포터 생산성 향상과 자동화 전문적인 비디오 기능 완벽한 유니코드 지원 휴대폰 및 PDA 와 같은 디바이스에 배포 기능

플래쉬 파일 (fla,swf) 포맷 이해하기

플래시 파일 포맷 filename.fla ( 플래쉬 편집 파일 )

• 플래쉬에서 작업한 파일을 저장하게 되면 생기는 기본파일• 수정과 편집이 가능 .

filename.swf( 플래쉬 무비 파일 )• FLA 파일의 결과물로 웹에서 보여지는 파일• SWF 파일은 FLA 파일과 달리 수정과 편집이 불가능한 파일

– 수정시 FLA 파일이 반드시 필요 filename.html(SWF 가 삽입된 HTML 문서 )

• SWF 파일을 HTML 파일이 반드시 삽입하여야 함– SWF 파일만으로도 웹에서 보여지나 홈페이지에 쓰일경우 HTML

파일을 만들어 주어야 함

플래시 MX Interface 이해

플래시 MX Interface 이해

1. 메뉴구성 상위메뉴

• File / Edit / View/ Insert / Modify / Test / Control / Window / Help

2. 레이어 한 겹씩 층을 더할때 , 하나의 " 층 " 을 말함 종이를 차곡차곡 쌓듯이 오브젝트를 여러 개로 분리시켜두는 것

• 오브젝트별로 레이어 분리 작업 편리 3. 타임라인

순서대로 재생되는 영화 필름이나 비디오 테이프와 같음 해당 레이어의 작업스테이지에 놓인 object 뿐만 아니라 그 레이어

자체가 수행할 액션을 집어 넣는 곳 모든 움직임과 액션 명령을 주는 곳 swish, swift, livemotion 등 과 같이 움직임을 주는 모든 프로그램에

존재

플래시 MX Interface 이해

4. 작업 툴 ( 툴박스 ) 무비의 기본적인 작업인 드로잉을 할때 쓰이는 도구

• drawing part – 그림을 그리는 기본 툴 .

• color part– 선과 면을 채울 때 사용하는 색상 선택 툴 ,

• option part– drawing part 에 해당되는 부분을 선택했을 때 세부적으로 옵션을 줄 때 사용

5. 스테이지 무비에 기본이 되는 그림작업을 하는 곳 화면의 크기 단위는 pixel

• 작업을 할경우 알맞게 % 를 조절할 수 있음

플래시 MX Interface 이해

6. 액션 설정창 각 오브젝트는 물론이고 레이어 타임라인에 액션을 줄때

사용 normal mode

• 액션삽입 시 기본적인 태그가 자동 입력 expert mode

• 보다 숙련된 액션을 넣을 때 사용

7. Properties 설정 창 ( 속성 상자 ) 프로퍼티 : 물체가 가지는 속성 ( 특성 ) 스테이지의 크기 조절에서부터 모든 오브젝트 ( 일반 그림 , 심벌 , text 등 ) 뿐만 아니라 타임라인의 프레임까지 각자에게 알맞는 속성을 주는 창

플래시 MX Interface 이해

8. Color Mixer 그림 작업시 모든 웹칼라를 설정하는 곳

• Stroke 색상• 면채우기 ( 단일색상에서 부터 그라디에이션까지 )• alpha값 조절

9. Color Swatches 색상의 팔테트 유사 즐겨쓰는 색이나 비트맵을 색상으로 만든 경우 저장시킬 수 있음 .

10. 콤퍼넌트 플래시 MX 가 기존 버전과 가장 많이 달라진 점 html 내에서나 가능했던 각종 폼양식을 플래시에도 편리하게 사용할

수 있게 만듦 콤보박스 , 리스트 박스 , 라디오 버튼 , 체크 박스 , 스코롤바 등

다양한 콤퍼넌트가 개발되어 제공 이 밖에도 유용한 콤퍼넌트는 Extension Manager 를 통해 플래시 콤퍼넌트 폴더로 저장해서 사용하면 됨

심볼과 라이브러리

심볼 (symbol) 재활용 가능한 오브젝트 플래시 무비 용량 줄임 특별한 애니메이션 효과를 줌

• 그래픽 심볼– 정지 영상

• 무비클립 심볼– 애니메이션되는 심볼

• 버튼 심볼– 마우스 동작에 따라 반응하는 심볼

인스턴스 (instance)• 스테이지에 불러온 심볼 (심볼의 복사본 )

라이브러리 심볼을 보관하는 곳 이미지 , 사운드 , 동영상과 같은 오브젝트 보관

레이어 이해하기 (37)

레이어 (Layer) 계층 : 순서대로 쌓여지는 것 가장위에 있는 레이어의 오브젝트가 가장 위에 보여짐 서로 다른 레이어에 있는 오브젝트들을 개별적으로

변형시키거나 움직일 수 있음

타임라인 (38)

타임라인 애니메이션이 실제로 제작되는 곳 시간의 흐름에 따라 오브젝트를 보여줌

• 프레임 : 애니메이션을 구성하고 있는 개별 화면• 키프레임 : 채워진 점 있는 곳 • 빈프레임 : 비어있는 프레임

트위닝 기법

트위닝 (Tweening) 맨 처음 프레임과 마지막 프레임에 원하는 변화를 적용하면

자동으로 중간과정을 만들어주는 애니메이션 기법 모션 트위닝 (Motion Tweening)

• 움직임과 관련된 무비 제작– 위치 이동 , 크기변화 , 회전 , 색상변화

• 모션 트위닝을 사용하기 위한 조건– 시작하고 끝나는 프레임은 반드시 키프레임이어야한다 .– 키프레임에 있는 오브젝트는 심볼이나 그룹 속성을 가져야 한다 .

쉐이프 트위닝 (Shape Tweening)• 모양자체가 다른 모습으로 바뀌는 무비 제작 (몰핑효과 )

– 시작하고 끝나는 프레임은 반드시 키프레임이어야한다 .– 키프레임에 있는 오브젝트는 반드시 분해된 속성이어야 한다 .

마스크 애니메이션

플래시의 마스크 (Mask) 기능 특정 모양대로만 배경이 보여지도록 함 배경레이어 + 마스크레이어 배경이 보이는 마스크 레이어

액션 스크립트 (Action Script)

액션 스크립트 간단한 프로그램 언어 자바스크립트 언어와 유사

• ECMA( 유럽 컴퓨터 조합 연맹 ) 에서 정한 표준 EXMA-262 문서를 기초로 만듦

• 이문서 역시 자바 스크립트 언어에 대한 표준 액션 스크립트 활용

타임라인 컨트롤 , 메뉴와 관련된 페이지 이동 키보드로 무비 제어 , 외부 플래시 무비 로딩 하이퍼 링크 설정 , 플래시 무비를 브라우저와 연동 무비클립 드래그 , 마우스 커서 모양 변경 플래시 무비의 현재 로딩상태 표시 오브젝트 속성 변경 , 오브젝트 충돌감지 IF 조건문 사용

액션 스크립트 (Action Script)

액션스크립트 편집창 [Window]-[Development Panels]-[Actions] ( 단축키 [F9])

① 액션 툴박스 : 액션들을 모아둔 액션목록② 팝업메뉴 액션 스크립트랑 관련된 설정 팝업 메뉴③ 스크립트 네비게이터

• 액션이 적용된 위치와 무비의 오브젝트들을 찾기 쉽도록 표시

④ 액션 추가 버튼 액션 목록을 표시

1

2

3

4

액션 스크립트 (Action Script)

⑤ 찾기 액션 스크립트 편집창에서 특정 단어 검색⑥ 찾아 바꾸기

• 액션 스크립트 편집창에 있는 특정 단어를 다른 단어로 변경

⑦ 타겟경로 지정 액션을 지정할 대상인 타겟 경로 선택⑧ 문법 체크 액션 스크립트가 잘 작성되었는지 문법 체크⑨ 자동 정렬 작성된 액션 스크립트를 보기 좋게 정렬⑩ 코드 힌트 보기 코드가 입력될 때 풍선도움말 나타남

1

2

3

4 5 6 7 8 9 10

액션 스크립트 (Action Script)

⑪ 참조 액션 스크립트 사전 표시⑫ 디버그 옵션 액션 스크립트 오류 검사⑬ 보기옵션 스크립트 입력창의 줄번호 , 줄 바뀜 설정⑭ 점프메뉴 선택된 오브젝트 정보 표시⑮ 핀 다시 찾을 필요없이 오브젝트 고정 시킴

1

2

3

4 5 6 7 8 9 10

11 12 13

14 15

액션 스크립트 적용 방법

액션 스크립트 적용 방법1. 액션 추가 버튼 (+) 을 이용하는 방법

• 액션 추가 버튼 (+) 클릭한 후 • [Global Functions]-[TimelineControl]-[gotoAndStop]

2. 액션목록에서 추가하는 방법• [Global Functions]-[TimelineControl] 를 클릭후 • [gotoAndStop] 을 더블 클릭

액션 스크립트 기본용어

액션 어떤 상황이 발생하면 어떤 행동을 실행하도록 명령을 내리는

것1. 상황발생 ( 마우스 입력 , 키보드 선택 , 프레임 진행 등 )

2. 이벤트 ( 발생한 상황이 이벤트로 정의 )

3. 이벤트 핸들러 ( 이벤트를 제어하여 액션에 적용 )

4. 액션 ( 명령이 내려지고 명령에 따라 실행 )

이벤트• 프레임 이벤트

– 플레이 헤드가 프레임에 진행• 버튼 이벤트

– 마우스 클릭 , 드래그 등으로 버튼을 선택• 무비클립 이벤트

– 버튼과 키보드 움직임– 로딩 및 언로딩

액션 스크립트 기본용어

이벤트 핸들러 이벤트가 발생할 때 이것을 제어하는 것 프레임 이벤트 핸들러

• 플레이 헤드가 프레임에 진행 버튼 이벤트 핸들러

• on ( 이벤트 ) 형식 무비클립 이벤트 핸들러

• onClipEvent ( 이벤트 ) 형식

액션 스크립트 기본용어

버튼 이벤트 핸들러 on(press): 버튼을 마우스로 클릭할 때 on(release): 버튼을 마우스로 클릭하고 뗄 때 on(releaseOutside): 버튼을 클릭하고 바깥쪽에서 뗄 때 on(rollOver): 버튼 위로 마우스를 올려 놓을 때 on(rollOutpress): 버튼 위에 놓여 있던 커서가 밖으로 벗어날

때 on(dragOver): 버튼을 클릭하여 바깥쪽으로 드래그했다가 다시 버튼 안쪽으로 드래그할 때

on(dragOut): 버튼을 클릭하여 바깥쪽으로 드래그 할 때 on(keyPress): 버키보드의 특정한 키를 눌렀을 때

액션 스크립트 기본용어

무비클립 이벤트 핸들러 onClipEvent(load) : 무비 클립이 처음 나타날 때 onClipEvent(unload) : 무비 클립이 사라질 때 onClipEvent(enterFrame) : 무비 재생속도 (Frame Rate) 인 ‘ fps’ 속도로 반복 실행될 때

onClipEvent(mouseMove) : 마우스 커서를 움직일 때 onClipEvent(mouseDown) : 마우스 버튼을 클릭할 때 onClipEvent(mouseUp) : 마우스 버튼을 뗄 때 onClipEvent(keyDown) : 키보드 키를 누를 때 onClipEvent(keyUp) : 키보드 키를 뗄 때 onClipEvent(data)

• CGI, ASP, PHP, XML 등의 데이터의 전송이 완료될 때 무비 클립이 처음 나타날 때

액션 스크립트 기본용어

인스턴스 (Instance) 심볼의 복사본 원본 오브젝트에서 복사한 또다른 오브젝트

인스턴스 네임 영문과 숫자 , 스페이스만 지정 ( 한글은 안됨 ) 숫자로 시작하면 안됨 ‘+’ 나 ‘ -’ 와 같은 연산기호 사용 안됨 액션용어 사용 안됨

액션 스크립트 기본용어

데이터 타입 문자열 (String) 숫자 (Number) 불린 (Boolean) 오브젝트 (Object) 속성과 메서드로 정해지는 데이터 무비클립 (MovieClip) 인스턴스 네임을 가진 데이터 미지정 (Null): 값이 없는 데이터

변수 변수데이터 타입을 저장 할 수 있는 작은 공간 한가지로 정해져 있는 데이터 타입을 가지는 것이 아니라

어떻게 적용되는냐에 따라서 변수 타입이 변경Ex) var x=5; 변수타입이 숫자 var name=“Lolo”; 변수 타입이 문자열

객체 지향과 계층 구조

객체 지향 프로그래밍 언어 자바스크립트 , C++, Java, 액션스크립트 오브젝트

• 오브젝트 속성• 오브젝트 메서드 ( 행동양식 )

객체지향 표현 방식

오브젝트(Object)

Dot(.)+

속성 (Property)

메서드 (Method)

변수 (Variable)

+

오브젝트 ._ 속성

오브젝트 . 메서드 ( )

오브젝트 . 변수

=

=

=

대상에 따라 달라지는 액션의 종류

액션의 종류 프레임 액션

• 적용대상 : 타임라인 프레임• 액션 실행 : 프레이 헤드가 액션 설정한 프레임에 왔을때

버튼 액션• 적용 대상 : 버튼 인스턴스• 액션 실행 : 버튼에 설정한 이벤트가 일어날 때

무비클립 액션• 적용 대상 : 무비클립 인스턴스• 액션 실행 : 무비클립에 설정한 이벤트가 일어날 때