플래시 인터페이스와 주요 기능

Transcription

1 플래시인터페이스와주요기능 웹애니메이션 1 강

2 Adobe Flash 애니메이션, 멀티미디어콘텐츠를제작가능한도구 다이나믹하고화려한인터렉티브기능으로사용자들의주목을얻을수있어활발히이용되어옴 웹페이지, 모바일어플, 광고, ebook, 카탈로그, 스마트TV용콘텐츠, 게임 CS6에서는익스텐션으로, CC 버전이후로는정식으로 HTML5 Canvas 지원 Adobe Air를이용하여모바일이나데스크탑용어플리케이션도제작가능

3 비트맵과벡터 비트맵 : 픽셀 ( 작은사각형점 ) 으로이루어진이미지 o 높은해상도일수록이미지용량이커짐 o 해상도나크기가작은이미지를크게키우면이미지에계단현상이생기거나뭉그러져보인다. o 사진, 페인팅일러스트, 스캔이미지촬영무비 벡터 : 수학적베지어곡선, 점과점을연결해이미지구성 o 해상도에영향을받지않음 o 이미지크기에상관없음, 아무리크게해도깨지지않음 o 용량이작음 o 실사에가까운표현이불가능 o 타이포그래피, 로고나캐릭터일러스트, 플래시무비

4 플래시 cs6 시작화면 새파일 유형별탬플릿 ㅍ 최근파일열기

5 메뉴 기본화면구성 모든패널사라졌다 / 보이게할때 : F4 현재작업물에서의위치 Library: 관련소스들을모아놓고필요할때꺼내사용하게함 작업창 Properties: 선택한대상의속성설정 툴 / 도구 타임라인 주요패널을아이콘으로요약

6 불러오기와저장하기 새파일만들기작업의속성에따라 Action Script 3.0이나 Air 파일등을선택하여새파일만들기 ( 주로 Action Scrip 3.0) 파일저장하기작업한원본소스프로젝트는 xfl이나 fla 파일형식중하나를선택하여저장 - FLA : 오래전부터사용한프로젝트저장포맷, 프로젝트파일자체만저장됨 ( 소스함께저장 x) - XFL: 최근에생긴프로젝트저장포맷, 소스와구성물들을폴더로함께모아서저장함높은버전에서저장한파일은낮은버전의플래시에선열리지않음

7 출력하기 Publish 작업이끝난원본소스파일을쉽게볼수있는 swf 파일등으로출력하는과정 Save as 에서저장한 Fla/xfl 은 flash 에서만확인가능한대신편집이가능 swf 는어디서도애니메이션을볼수있지만편집할수없음 Publish Setting 에서출력에대한설정 Publish preview(f12) 로미리보기 보통 publish 를하면 swf 파일과 html 파일이 함께생성됨. Swf 만출력할때는 Ctr l+ enter 를눌러출력

8 Import 외부이미지가져오기 Import to Stage 선택한이미지를작업화면안으로바로가져오기 Import to Library 선택한이미지를소스들을모아놓은라이브러리안에넣어놓고작업화면으로바로꺼내지는않음 PSD( 포토샵원본파일 ) 와 AI( 일러스트레이터원본파일 ) 포맷도플래시에서원본의레이어들을그대로가져올수있음 각레이어들을어떻게가져올것인지세부속성창에서조정

9 스프라이트시트만들기 Generate Sprite Sheet 스프라이트시트 : 움직이는그래픽요소의모든장면을전개도처럼펼친이미지파일 플래시에서는작업한심볼오브젝트를스프라이트시트로별도로뽑아낼수있음 1. 스프라이트.swf 파일을불러온다. 2. 파일을열면강아지의이미지가보인다. 3. 강아지를마우스오른쪽버튼으로다시클릭하고 Generate Sprite Sheet 를선택한다. 4. 새창이뜨면펼쳐진스프라이트시트와움직이는모습을 Preview 에서확인할수있다. 5. 내보낼경로를선택한후 export 한다. 6. 완성된스프라이트시트를확인한다.

10 PNG 시퀀스파일만들기 해당오브젝트의장면별로따로따로 PNG sequence 로내보낼수있다. 해당경로와파일명을지정한다. 새대화상자가뜨면속성을확인후 Export 를클릭하여파일을내보낸다. 각이미지별로저장된 PNG 이미지들을확인한다.

11 플래시에서의선과면 선 (Stroke) : 형태를그릴때사용. 펜툴, 직선툴, 연필툴 ( 선을그림 ), 잉크툴 ( 면테두리에선을입힘 ) 면 (Fill): 특정영역안을색으로채움. 브러쉬툴 ( 면을그림 ), 페인트버켓툴 ( 선의안쪽을면으로채움 ) 선과면의차이 : 선을그리는펜툴과면을그리는브러쉬툴로각각원을그려보자. 각원의선근처로가면화살표 & 반원아이콘이생긴다. 이아이콘을드래그하여움직이면, 선은선자체가변화되지만, 면은선택한라인에따라형태가바뀐다 선을면으로바꿀수있지만면을선으로바꿀수는없다 [modifiy]-[shape]-convert lines to fils] 메뉴를선택하여선을면으로바꾸기가능

12 선의주요툴옵션 선색깔 선끝의형태 선모서리의형태 선의종류 선두께 면의주요툴옵션 면색깔 면다듬기

13 기본그라디언트로칠하기 패널탭중에서 color 탭아이콘을을클릭하여색설정을열수있다. None: 아무색도없는투명 Solid color: 단색칼라 Linear Gradient: 직선형그라디언트. 일반 / 거울식 / 반복의그라디언트형태선택가능 Radial Gradient: 원형으로퍼지는그라디언트 Bitmap fill: 비트맵이미지를 import해와서그이미지로채우기 시작색과마지막색선택하여그라디언트만들기

14 쉐이프와그룹, 오브젝트드로잉의차이 쉐이프 플래시에서드로잉툴로그림을그렸을때생기는기본적인오브젝트. 선과면으로이루어짐 Properties 창에서선과면의색바로변경가능 선이나면일부만선택하여이동하고분리가능 다른도형과겹쳐지는순간잘려나감. 복잡한형태수정이어려움 그룹 쉐이프나오브젝트드로잉, 그룹, 심벌등의모든오브젝트들여러개를선택하고 Ctr l+ G 를눌러하나의그룹으로묶을수있음 ( 그룹해제는 Ctr l+ B) 그룹된오브젝트들전체가선택됨. Properties 에서선이나면옵션수정불가 그룹을더블클릭해서그룹안으로들어가야쉐이프나오브젝트드로잉을직접수정가능 그룹끼리겹쳤다가분리되어도원형보존됨. 복잡한형태의보존과이동, 수정에편함 오브젝트드로잉 펜툴, 선툴, 도형툴, 연필툴, 브러시툴사용시오브젝트드로잉아이콘선택하여설정가능 쉐이프와그룹의장점이섞임 Properties 창에서선과면의색바로수정가능, 도형변형가능 오브젝트드로잉끼리겹쳐져도원래형태유지함 Ctr l+ b 를눌러오브젝트드로잉을일반쉐이프로만든후에는다시오브젝트드로잉으로되돌릴수없음 오브젝트드로잉아이콘

15 툴의주요기능 선택툴 선택툴 가장많이사용하는툴. 오브젝트를선택하고이동할수있음. 원하는대상을하나씩클릭하거나드래그하여선택가능 Shape 근처로가져갈경우직선을곡선으로바꾸거나, 모서리를둥글게만드는등의변형기능이나타남 부분선택툴 도형의부분을정밀하게선택하여일정부분만변형하거나수정할때사용 변형툴 (Free Transform Tool) 선택한오브젝트를회전시키거나크기를늘리고 / 줄이고. 왜곡시킬수있음 올가미툴 (Lasso) 오브젝트를원하는대로드래그한형태대로선택할수있음 직선툴 : 드래그하여직선을그리는툴 사각형 (Rectangle) 툴 : 일반사각형그리는툴, 그려지기전에설정, 그려진후수정불가 사각형변형 (Rectangle Primitive) 툴 : 사각형먼저그리고수치조정하여형태수정가능 원형툴 (Oval): 원을그리는툴, 그려지기전에설정, 그러진후수정불가 원형변형 (Oval Primitive) 툴 : 원형먼저그리고수치조정하여형태수정가능 다각형툴 (Polystar Tool): 다양한다각형과별모양그릴수있음

16 스포이드툴 다른오브젝트에있는색상을추출할때사용 지우개툴 지우기옵션 (Erase mode): 선이나면만을골라지우는등의옵션설정 수도꼭지 (Faucet): 클릭한선이나면과연결된같은색들을함께지움 지우개형태 (Eraser shape): 지우개의크기와모양선택 돋보기툴 화면의확대와축소 화면의줌인단축키 : Ctr l+ Space 화면의줌아웃단축키 : Ctr l+ Alt + Space 손바닥툴 줌인되어화면이확대된상황에서화면을드래그하여원하는곳으로이동 단축키 Space

17 Arrange 앞뒤배열설정 오브젝트들이여러개가겹쳐있을때겹쳐져있는순서를조정가능 Bring to Front: 맨앞으로 Bring Forward: 한단계앞으로 Send Backward: 한단계뒤로 Send to Back: 가장뒤로

18 예제 01 꽃잎과고양이 Sample01.fla 파일을열고다음의과정을거쳐서 아래의이미지처럼그림을바꿔주세요. 1. Properties 패널에서 stage의배경색을하늘색으로바꿔준다. 2. 선택툴로큰별의가장자리쪽을가져가꽃잎모양으로바꿔준다. 3. 작은별은드래그하여선택한후지운뒤에이미모양을만든꽃잎을복사해서 자유선택툴로이동시키고크기를줄여서대신배치하는방식을사용한다. 4. 페인트버켓툴로꽃잎의면의색을바꿔준다. 5. 잉크병툴로꽃잎의선의색을바꿔준다. 6. 가장큰꽃잎을드래그하여선과면을다선택한후 [modifiy]-[shape]-convert lines to fils] 를 클릭하여선을면으로바꾼다. 7. 가장큰꽃잎의면과선을 Radial Gradient를적용시커그라데이션으로칠해준다. 8. 고양이의몸통색을바꿔준다. 9. 고양이와눈동자를 shift를누른채로클릭하여함께선택한후자유변형툴로 고양이의몸을약간앞쪽으로회전시킨다. 10. 고양이의눈동자는더블클릭하면스테이지위쪽에 scene 옆에 group이생기면서 그룹외의요소들은흐려지고그룹요소는진하게나타난다. 11. 서브선택기능으로그룹내의요소를수정가능하다. 고양이눈동자의색을바꿔준다. 12. 수정이끝난뒤위쪽의 scene을누르면원래의스테이지로돌아온다.

19 Object Drawing 기능을켜고, brush 기능으로고양이의코와입을그려준다 사각형그리기툴을이용하여배경의창문을더해준다. 사각형변형툴 (Rectangle Primitive Tool) 을사용하여서창문을그리고창문의형태를바꿔준다. 스포이드툴을이용하여창문의색을하늘의색과같은색으로바꿔준다. 그외다양한방법으로이미지를꾸며본다. 완성한파일은 F12 를눌러미리보기한다. Ctr l + enter 를눌러 swf 만 publish 한다. 저장한뒤파일명을본인이름 _ 학번.fla 로바꾼뒤 mintgray00@naver.com 으로제출한다.

20 기말과제 : 플래시애니메이션만들기 기말과제목표 : 본인이고안한캐릭터가들어간 30초가량의짤막한플래시애니메이션만들기 1. 본인이디자인한케릭터 1개와전체무비의내용계획, 짤막한스토리보드구성하여제출 ( 중간과제- 10월 11일까지제출 ) 2. 10월 6일은휴강합니다. 보강주에수업예정 3. 플래시애니메이션안에이미지, 비디오, 사운드, 텍스트등의미디어요소추가되어있어야함. 4. 스테이지위에타임라인을활용하여요소를배치하고움직임효과를줄것 5. 그래픽필터나블렌드등의특수효과적용 6. 액션스크립트를한가지적용해볼것 7. 완성된무비테스트후 publish하여발표하고, XF L 파일과소스폴더들과함께제출할것 (12월 8일발표와제출 )