Flash MX 2004

1. Flash MX 2004

2. 플래시 • 플래시 • 벡터 드로잉(Vector Drawing)을 기반으로 한 웹에니메이션 기능과 프로그래밍 기능이 결합한 멀티미디어 제작 도구 • 플래시의 시초(1996) • 퓨처웨이브 소프트웨어  퓨처 스플래시 • Macromedia사에서 인수(1997)  매크로미디어 플래시 • 어도비, 매크로미디어 인수합병 (2005) • 홈페이지 제작 및 웹애니메이션 제작프로그램 가능 • 애니메이션 기능뿐아니라 프로그래밍 기능까지 가능 • 인터넷 역사상, 플래시는 가장 많이 배포된 소프트웨어이다 라고 표현할 정도 폭발적인 인기를 얻고 있음

3. 플래시특징 • 특징 • 일정한 화질을 유지 • 벡터그래픽 기반의 도구 • 이미지가 크기에 상관없이 일정한 화질을 유지 • 압축률이 뛰어남 • GIF 애니메이션에 비해 상당히 적은 용량으로 자연스럽게 움직임을 만들어냄 • 플래시 무비에서 자주 쓰이는 그림을 심벌로 만들 경우 수천 번을 사용해도 전체 무비 용량이 커지지 않음 • 플래시 안에 있는 비트맵 이미지나 사운드 파일을 다시 압축 가능 • 움직이는 정보를 줌 • 플래시를 사용함으로써 뮤직 비디오를 보여주듯 원하는 정보를 전달할 수 있게 됨 • 정적인 인터넷에 동적인 개념을 부여

4. 플래시특징 • 특징 • 양방향 커뮤니케이션이 가능 • 강력한 액션 스크립트 기능 사용 • 마우스의 움직임에 따라 내용이 다양하게 변화할 수 있음 • 사용자가 원하는 대로 내용을 바꿀 수 있음 • 스트리밍 기술을 지원 • 브라우저에서 플러그인을 사용하여, 전체 데이터가 전송되기 전에 데이터의 재생을 시작함 • 사용자들이 큰 용량의 멀티미디어 파일을 빠르게 다운로드받을 수 있도록 함

5. 플래시특징 • 음악 파일 추가 가능 • 무비에 첨부된 음악 파일은 그것을 더욱 역동적으로 꾸며주며, 버튼에 적절히 사용된 음악 파일은 해당 페이지에 더욱 집중할 수 있도록 도와줌. • 비트맵 지원 • GIF, JPEG, PNG 등의 이미지를 불러오거나 내보내기를 할 수 있음 • 삽입된 비트맵 이미지는 '비트맵 부드럽게 만들기' 기능을 이용하면 확장하거나 회전시킬 때 품질을 높일 수 있음

6. 벡터 방식 드로잉 계열의 프로그램에서 사용되는 방식 비트맵 방식 이미지프로세싱 계열의 프로그램에서 사용되는 방식 비트맵 방식 이미지 JPG, GIF, PNG, BMP, TIF, RGB 벡터 vs. 비트맵 방식

7. 플래시 활용 • 플래시 애니메이션 • 엽기토끼  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 • 쇼케이스(Showcase) Flash Player Download

8. 플래시의 발전과정 • 퓨처 스플래시 애니메이션(1996.9) • GIF 애니메이션을 대체할 수 있는 애니메이션 툴 • 매크로 미디어 플래시 2.0 (1997. 4) • 매크로미디어  퓨처 웨이브 소프트웨어 인수 • 비트맵 이미지 사용과 사운드 기능 보완 • 플래시 3.0 (1998. 5) • 드로잉 기능 향상에 중점 • 플래시 4.0 (1999. 6) • 인터페이스와 액션 스크립트 향상 • 플래시 5.0 (2000. 7) • 복잡한 액션 스크립트를 간단 명료화 • 플래시 MX (2002. 3) • 플래시 6.0 매크로 미디어사의 주요 프로그램간의 호환성을 위해 • 인터넷 애플리케이션으로 발전해 나감

9. 플래시의 발전과정 • 플래시 MX 2004 • 자동으로 액션 스크립트 작성 • 향상된 속도와 성능 (2-10배) • 일러스트레이터 및 PDF 파일 임포터 • 생산성 향상과 자동화 • 전문적인 비디오 기능 • 완벽한 유니코드 지원 • 휴대폰 및 PDA와 같은 디바이스에 배포 기능 • 어도비 사에서 인수 (2005) • Adobe Systems acquired Macromedia and its product portfolio (including Flash). • Flash Basic 8 & Flash Professional 8 (2005) • Flash Basic 9 & Flash Professional 9 (2007. 4) • Adobe Flex 1.0 (2004. 3)  Flex 2.0.1 (2007. 1) • to support the development and deployment of rich Internet applications based on Macromedia Flash platform.

10. 플래쉬 파일(fla,swf) 포맷 이해하기 • 플래시 파일 포맷 • filename.fla (플래쉬 편집 파일) • 플래쉬에서 작업한 파일을 저장하게 되면 생기는 기본파일 • 수정과 편집이 가능. • filename.swf(플래쉬 무비 파일) • FLA파일의 결과물로 웹에서 보여지는 파일 • SWF파일은 FLA파일과 달리 수정과 편집이 불가능한 파일 • 수정시 FLA파일이 반드시 필요 • filename.html(SWF가 삽입된 HTML문서) • SWF파일을 HTML파일이 반드시 삽입하여야 함 • SWF파일만으로도 웹에서 보여지나 홈페이지에 쓰일경우 HTML파일을 만들어 주어야 함

11. 플래시 MX Interface이해

12. 플래시 MX Interface이해 • 1. 메뉴구성 • 상위메뉴 • File / Edit / View/ Insert / Modify / Test / Control / Window / Help • 2. 레이어 • 한 겹씩 층을 더할때, 하나의 "층"을 말함 • 종이를 차곡차곡 쌓듯이 오브젝트를 여러 개로 분리시켜두는 것 • 오브젝트별로 레이어 분리  작업 편리 • 3. 타임라인 • 순서대로 재생되는 영화 필름이나 비디오 테이프와 같음 • 해당 레이어의 작업스테이지에 놓인 object뿐만 아니라 그 레이어 자체가 수행할 액션을 집어 넣는 곳 • 모든 움직임과 액션 명령을 주는 곳 • swish, swift, livemotion등 과 같이 움직임을 주는 모든 프로그램에 존재

13. 플래시 MX Interface이해 • 4. 작업 툴 (툴박스) • 무비의 기본적인 작업인 드로잉을 할때 쓰이는 도구 • drawing part • 그림을 그리는 기본 툴. • color part • 선과 면을 채울 때 사용하는 색상 선택 툴, • option part • drawing part에 해당되는 부분을 선택했을 때 세부적으로 옵션을 줄 때 사용 • 5. 스테이지 • 무비에 기본이 되는 그림작업을 하는 곳 • 화면의 크기 단위는 pixel • 작업을 할경우 알맞게 %를 조절할 수 있음

14. 플래시 MX Interface이해 • 6. 액션 설정창 • 각 오브젝트는 물론이고 레이어 타임라인에 액션을 줄때 사용 • normal mode • 액션삽입 시 기본적인 태그가 자동 입력 • expert mode • 보다 숙련된 액션을 넣을 때 사용 • 7. Properties 설정 창 (속성 상자) • 프로퍼티: 물체가 가지는 속성(특성) • 스테이지의 크기 조절에서부터 모든 오브젝트(일반 그림, 심벌, text등)뿐만 아니라 타임라인의 프레임까지 각자에게 알맞는 속성을 주는 창

15. 플래시 MX Interface이해 • 8. Color Mixer • 그림 작업시 모든 웹칼라를 설정하는 곳 • Stroke색상 • 면채우기(단일색상에서 부터 그라디에이션까지) • alpha값 조절 • 9. Color Swatches • 색상의 팔테트 유사 • 즐겨쓰는 색이나 비트맵을 색상으로 만든 경우 저장시킬 수 있음. • 10. 콤퍼넌트 • 플래시MX가 기존 버전과 가장 많이 달라진 점 • html내에서나 가능했던 각종 폼양식을 플래시에도 편리하게 사용할 수 있게 만듦 • 콤보박스,리스트 박스, 라디오 버튼, 체크 박스, 스코롤바 등 다양한 콤퍼넌트가 개발되어 제공 • 이 밖에도 유용한 콤퍼넌트는 Extension Manager를 통해 플래시 콤퍼넌트 폴더로 저장해서 사용하면 됨

16. 심볼과 라이브러리 • 심볼(symbol) • 재활용 가능한 오브젝트 • 플래시 무비 용량 줄임 • 특별한 애니메이션 효과를 줌 • 그래픽 심볼 • 정지 영상 • 무비클립 심볼 • 애니메이션되는 심볼 • 버튼 심볼 • 마우스 동작에 따라 반응하는 심볼 • 인스턴스 (instance) • 스테이지에 불러온 심볼(심볼의 복사본) • 라이브러리 • 심볼을 보관하는 곳 • 이미지, 사운드, 동영상과 같은 오브젝트 보관

17. 레이어 이해하기 (37) • 레이어(Layer) • 계층 : 순서대로 쌓여지는 것 • 가장위에 있는 레이어의 오브젝트가 가장 위에 보여짐 • 서로 다른 레이어에 있는 오브젝트들을 개별적으로 변형시키거나 움직일 수 있음

18. 타임라인 (38) • 타임라인 • 애니메이션이 실제로 제작되는 곳 • 시간의 흐름에 따라 오브젝트를 보여줌 • 프레임: 애니메이션을 구성하고 있는 개별 화면 • 키프레임: 채워진 점 있는 곳 • 빈프레임: 비어있는 프레임

19. 트위닝 기법 • 트위닝(Tweening) • 맨 처음 프레임과 마지막 프레임에 원하는 변화를 적용하면 자동으로 중간과정을 만들어주는 애니메이션 기법 • 모션 트위닝(Motion Tweening) • 움직임과 관련된 무비 제작 • 위치 이동, 크기변화, 회전, 색상변화 • 모션 트위닝을 사용하기 위한 조건 • 시작하고 끝나는 프레임은 반드시 키프레임이어야한다. • 키프레임에 있는 오브젝트는 심볼이나 그룹 속성을 가져야 한다. • 쉐이프 트위닝(Shape Tweening) • 모양자체가 다른 모습으로 바뀌는 무비 제작 (몰핑효과) • 시작하고 끝나는 프레임은 반드시 키프레임이어야한다. • 키프레임에 있는 오브젝트는 반드시 분해된 속성이어야 한다.

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

21. 액션 스크립트 (Action Script) • 액션 스크립트 • 간단한 프로그램 언어 • 자바스크립트 언어와 유사 • ECMA(유럽 컴퓨터 조합 연맹)에서 정한 표준 EXMA-262 문서를 기초로 만듦 • 이문서 역시 자바 스크립트 언어에 대한 표준 • 액션 스크립트 활용 • 타임라인 컨트롤, 메뉴와 관련된 페이지 이동 • 키보드로 무비 제어, 외부 플래시 무비 로딩 • 하이퍼 링크 설정, 플래시 무비를 브라우저와 연동 • 무비클립 드래그, 마우스 커서 모양 변경 • 플래시 무비의 현재 로딩상태 표시 • 오브젝트 속성 변경, 오브젝트 충돌감지 • IF 조건문 사용

22. 액션 스크립트 (Action Script) • 액션스크립트 편집창 [Window]-[Development Panels]-[Actions] (단축키  [F9]) • 액션 툴박스: 액션들을 모아둔 액션목록 • 팝업메뉴 액션 스크립트랑 관련된 설정 팝업 메뉴 • 스크립트 네비게이터 • 액션이 적용된 위치와 무비의 오브젝트들을 찾기 쉽도록 표시 • 액션 추가 버튼  액션 목록을 표시 2 4 1 3

23. 액션 스크립트 (Action Script) • 찾기 액션 스크립트 편집창에서 특정 단어 검색 • 찾아 바꾸기 • 액션 스크립트 편집창에 있는 특정 단어를 다른 단어로 변경 • 타겟경로 지정  액션을 지정할 대상인 타겟 경로 선택 • 문법 체크  액션 스크립트가 잘 작성되었는지 문법 체크 • 자동 정렬  작성된 액션 스크립트를 보기 좋게 정렬 • 코드 힌트 보기 코드가 입력될 때 풍선도움말 나타남 4 2 5 6 7 8 9 10 1 3

24. 액션 스크립트 (Action Script) • 참조  액션 스크립트 사전 표시 • 디버그 옵션  액션 스크립트 오류 검사 • 보기옵션  스크립트 입력창의 줄번호, 줄 바뀜 설정 • 점프메뉴  선택된 오브젝트 정보 표시 • 핀  다시 찾을 필요없이 오브젝트 고정 시킴 4 2 5 6 7 8 9 10 11 12 13 1 14 15 3

25. 액션 스크립트 적용 방법 • 액션 스크립트 적용 방법 • 액션 추가 버튼(+)을 이용하는 방법 • 액션 추가 버튼(+) 클릭한 후 • [Global Functions]-[TimelineControl]-[gotoAndStop] • 액션목록에서 추가하는 방법 • [Global Functions]-[TimelineControl]를 클릭후 • [gotoAndStop]을 더블 클릭

26. 액션 스크립트 기본용어 • 액션 • 어떤 상황이 발생하면 어떤 행동을 실행하도록 명령을 내리는 것 • 상황발생 (마우스 입력, 키보드 선택, 프레임 진행 등) • 이벤트 (발생한 상황이 이벤트로 정의) • 이벤트 핸들러 (이벤트를 제어하여 액션에 적용) • 액션 (명령이 내려지고 명령에 따라 실행) • 이벤트 • 프레임 이벤트 • 플레이 헤드가 프레임에 진행 • 버튼 이벤트 • 마우스 클릭, 드래그 등으로 버튼을 선택 • 무비클립 이벤트 • 버튼과 키보드 움직임 • 로딩 및 언로딩

27. 액션 스크립트 기본용어 • 이벤트 핸들러 • 이벤트가 발생할 때 이것을 제어하는 것 • 프레임 이벤트 핸들러 • 플레이 헤드가 프레임에 진행 • 버튼 이벤트 핸들러 • on (이벤트) 형식 • 무비클립 이벤트 핸들러 • onClipEvent (이벤트) 형식

28. 액션 스크립트 기본용어 • 버튼 이벤트 핸들러 • on(press): 버튼을 마우스로 클릭할 때 • on(release): 버튼을 마우스로 클릭하고 뗄 때 • on(releaseOutside): 버튼을 클릭하고 바깥쪽에서 뗄 때 • on(rollOver): 버튼 위로 마우스를 올려 놓을 때 • on(rollOutpress): 버튼 위에 놓여 있던 커서가 밖으로 벗어날 때 • on(dragOver): 버튼을 클릭하여 바깥쪽으로 드래그했다가 다시 버튼 안쪽으로 드래그할 때 • on(dragOut): 버튼을 클릭하여 바깥쪽으로 드래그 할 때 • on(keyPress): 버키보드의 특정한 키를 눌렀을 때

29. 액션 스크립트 기본용어 • 무비클립 이벤트 핸들러 • 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 등의 데이터의 전송이 완료될 때 무비 클립이 처음 나타날 때

30. 액션 스크립트 기본용어 • 인스턴스(Instance) • 심볼의 복사본 • 원본 오브젝트에서 복사한 또다른 오브젝트 • 인스턴스 네임 • 영문과 숫자, 스페이스만 지정 (한글은 안됨) • 숫자로 시작하면 안됨 • ‘+’나 ‘-’와 같은 연산기호 사용 안됨 • 액션용어 사용 안됨

31. 액션 스크립트 기본용어 • 데이터 타입 • 문자열(String) • 숫자(Number) • 불린(Boolean) • 오브젝트(Object)  속성과 메서드로 정해지는 데이터 • 무비클립(MovieClip)  인스턴스 네임을 가진 데이터 • 미지정(Null): 값이 없는 데이터 • 변수 • 변수데이터 타입을 저장 할 수 있는 작은 공간 • 한가지로 정해져 있는 데이터 타입을 가지는 것이 아니라 어떻게 적용되는냐에 따라서 변수 타입이 변경 Ex) var x=5;  변수타입이 숫자 var name=“Lolo”;  변수 타입이 문자열

32. 객체 지향과 계층 구조 • 객체 지향 프로그래밍 언어 • 자바스크립트, C++, Java, 액션스크립트 • 오브젝트 • 오브젝트 속성 • 오브젝트 메서드 (행동양식) • 객체지향 표현 방식 오브젝트 (Object) Dot (.) 속성 (Property) = 오브젝트._속성 메서드 (Method) = 오브젝트.메서드( ) + + 변수 (Variable) = 오브젝트.변수

33. 대상에 따라 달라지는 액션의 종류 • 액션의 종류 • 프레임 액션 • 적용대상: 타임라인 프레임 • 액션 실행: 프레이 헤드가 액션 설정한 프레임에 왔을때 • 버튼 액션 • 적용 대상: 버튼 인스턴스 • 액션 실행: 버튼에 설정한 이벤트가 일어날 때 • 무비클립 액션 • 적용 대상: 무비클립 인스턴스 • 액션 실행: 무비클립에 설정한 이벤트가 일어날 때

34. Duplicate Movie Clip • Duplicate Movie Clip • Part5/duplicate_random.fla this.money._parent[newname]._x= random(300)+100 this.money._parent[newname]._y= random(150)

35. Movie Clip Property Control • Movie Clip Property Control • Part6/property_cpntrol.fla • 무비클립 속성: 예제) This.ufo. • 위치이동: _x, _y • 투명조절: _alpha • 크기변환: _xscale, _yscale • 회전: _rotation on (release) { this.ufo._x += 10; } on (release) { this.ufo._xscale -= 10; this.ufo._yscale -= 10; } on (release) { this.ufo._x -= 10; }

36. IF 조건문 • IF 조건문 • Part6/if_quiz.fla on (release) { if (_root.answer == "2004") { gotoAndStop(10); } else { gotoAndStop(5); } }

37. Keyboard Control • Keyboard Control • Part6/key.fla • 레이블 (label) 사용 onClipEvent (enterFrame) { if (Key.isDown(Key.RIGHT)) { this._x += 10; this.gotoAndStop("right"); } if (Key.isDown(Key.LEFT)) { this._x -= 10; this.gotoAndStop("left"); } if (Key.isDown(Key.DOWN)) { this._y += 10; this.gotoAndStop("front"); } if (Key.isDown(Key.UP)) { this._y -= 10; this.gotoAndStop("back"); } if (this._x<70) { this._x = 70; } if (this._x>320) { this._x = 320; } if (this._y<50) { this._y = 50; } if (this._y>300) { this._y = 300; } }

38. Hit Test 액션레이어 1프레임 • Hit Test • Part6/hit_test.fla root_count=10; stop(); 뼈다귀 밥그릇 onClipEvent (enterFrame) { if (this._x>=350) { this._x = 50; this._y = random(300)+50; } else { this._x += 15; } if (this.hitTest(this._parent.dog)) { _root.dog.gotoAndStop("hit"); _root.dog._x = random(300)+50; _root.dog._y = random(300)+50; _root.count--; } } onClipEvent (enterFrame) { if (this._x<=50) { this._x = 350; this._y = random(300)+50; } else { this._x -= 10; } if (this.hitTest(this._parent.dog)) { _root.dog.gotoAndStop("hit"); _root.dog._x = random(300)+50; _root.dog._y = random(300)+50; _root.count--; } }