본문 바로가기

Flash17

4-04. 액션 스크립트 작성법 제4장 예제를 이용한 애니메이션 만들기 4-04. 액션 스크립트 작성법 액션 스크립트 작성 모드는 표준 모드와 전문가 모드 등 두 가지가 있으며, 초보자에게는 표준모드(일명 도우미 모드)가, 스크립트 위주의 작업에는 전문가 모드가 편리합니다. 물론 처음에는 표준 모드가 쉽지만 구문이 복잡해지면 오히려 표준 모드가 불편해지게 됩니다. 가. 표준 모드에서의 작성법 액션 스크립트 창을 불러낸 다음 사용할 액션을 더블클릭하고, 속성 항목들을 선택하거나 채워주는 방식입니다. 나. 전문가 모드에서의 작성법 일부는 액션 리스트를 이용하고, 또 일부는 직접 타이핑하는 방식입니다. 액션의 오른쪽 상단 끝에 있는 액션 패널 메뉴를 열어 [Esc 단축키 보기]를 체크해두면 다음과 같이 명령어 오른쪽에 단축키가 표시됩니다. .. 2016. 6. 28.
4-03. 콜백 함수의 이해 제4장 예제를 이용한 애니메이션 만들기4-03. 콜백 함수의 이해 이제 플래시의 액션은 크게 버전 2와 3이 있습니다. 이전의 MX버전부터 콜백 함수라는 것이 도입이 되고, 버전 3은 이전의 2버전과는 구조가 많이 다른 새로운 액션과 스크립트가 도입되었습니다. 콜백 함수를 이용하면 일명 '원(One)프레임 무비' 혹은 '스크립트 모션(Script Motion)'이라 불리우는 1개의 프레임을 이용한 애니메이션 및 상호작용을 구현할 수 있습니다. 이로써 플래시를 단순한 애니메이션 제작도구에서 프로그래밍 언어에 가깝도록 프로그램의 성격을 바꿔놓았고, 액션스크립트 3.0으로 이어지게 됩니다. 여기에서 다룰 액션 스크립트는 1개의 프레임에서 구현하는 것을 원칙으로 하겠습니다. 가. 콜백 함수와 인스턴스 이름 액션.. 2016. 6. 28.
3-26. 눈이 내린다 - 심볼 속 심볼 재3장 애니메이션 기초3-26. 눈이 내린다 - 심볼 속 심볼 심볼은 세 가지 유형이 있으며, 이 세 가지 유형은 같은 유형 혹은 다른 유형을 다시 포함할 수 있습니다. 물론 포함된 심볼 속에 또다른 심볼을 포함시킬 수가 있지요. 2중 3중 필요한 만큼 심볼은 또 다른 심볼을 포함할 수 있습니다.이 강의에서는 아래와 같은 눈이 내리는 풍경을 만들어봄으로써 심볼이 심볼을 포함하는 것을 이해해보도록 하겠습니다.아울러 심볼을 복제, 변형해서 활용하는 방법도 알아봅니다. 1) 무비의 배경색을 검정색으로 설정합니다. Ctrl + J키를 눌러 문서 속성에서 배경색을 바꾸어줄 수도 있습니다. 2) 브러시 도구를 이용하여 눈송이를 그립니다. 3) 그려진 눈을 선택한 후 [수정 > 모양 > 채우기 가장자리 부드럽게]를 .. 2016. 6. 23.
3-25. 빛이 지나가는 효과 만들기 - 마스크 효과 활용(2) 제3장 애니메이션 기초3-25. 빛이 지나가는 효과 만들기 - 마스크 효과 활용(2) 3-18. 마스크 효과 활용에 이어 다음 완성된 예제와 같은 또 다른 마스크 효과를 만들어봅시다. [만들어보기]1) 무비의 크기를 가로 550, 세로 150 정도로 설정합니다. 2) 스테이지에 다음과 같이 글자를 입력합니다. 확실한 효과를 나타내도록 글꼴은 굵은 것으로 선택하고, 크기는 스테이지 크기에 맞도록 해주십시오. 3) 글자를 선과 면으로 분리합니다. 그렇게 하기 위해서 Ctrl + B(수정 > 분리)를 2번 눌러줍니다. 4) 색상 패널에서 다음과 같이 그래디언트 색상을 만듭니다. 여기서 중요한 것은 알파값인데, 좌우측은 30% 정도, 가운데는 70% 정도로 설정해줍니다. 이렇게 하면 빛이 지나가는 효과를 더욱 .. 2016. 6. 23.
3-24. 사운드 편집/제어하기 제3장 애니메이션 기초3-24. 사운드 편집/제어하기 무비에 사운드를 삽입하고, 필요에 따라 음량 및 음향 효과를 조절하는 방법을 알아봅니다. 예제 파일을 다운로드해서 플래시에서 불러오기를 하십시오. 무비 테스트를 해보면 배경 음악이 나오도록 되어 있습니다. 1. 사운드 파일 삽입1) 음악을 플래시 무비에 포함시키려면 먼저 Ctrl + R(스테이지로 가져오기)키를 눌러서 삽입할 음악을 가져옵니다. (삽입 가능한 파일 형식은 WAV, MP3, AIF 등입니다)2) 가져오기를 하면 라이브러리에 등록이 되게 됩니다. 3) 레이어를 추가하고 라이브러이에 있는 사운드 클립을 드래그해서 스테이지에 놓습니다.(스테이지에 끌어다 놓기만 하면 됩니다.) 이렇게 하면 타임라인에 파형이 표시됩니다. 2. 사운드 관련 속성1.. 2016. 6. 23.
3-23. 타임라인 관련 부가 기능 제3장 애니메이션 기초3-23. 타임라인 관련 부가 기능 타임라인 바로 아래쪽에는 다음과 같은 타임라인과 관련한 부가 기능들이 있습니다. 어니언 스킨(Onion Skin ; 단어의 뜻은 양파 껍질)은 타임라인에 움직임이 제작되어 있으면 여러 프레임에 걸쳐 그 움직임의 모습을 보여주는 기능입니다. [어니언 스킨]이나 [어닌언 외곽선]을 켠 상태에서 범위를 지정하여 주면 아래 그림과 같이 움직임의 모습이 보이게 됩니다. 현재 프레임 속도를 더블클릭하면 문서(무비) 속성을 설정할 수 있습니다. 2016. 6. 23.
3-20. 글자(텍스트) 입력 및 속성 이해(2) 제3장 애니메이션의 기초3-20. 글자(텍스트) 입력 및 속성 이해(2) 이전 페이지에 이어서 일반적인 것은 설명을 그림으로 대신하고, 꼭 이해해둘 필요가 있는 항목 중심으로 설명합니다.ⓔ 선택 사항○ 선택 가능 : 유형이 정적텍스트인 경우 사용자가 무비 상에서 마우스 드래그 혹은 Shift + 방향키를 이용하여 글자를 선택 가능하게 혹은 불가능하게 해줍니다. 입력/동적 텍스트는 기본적으로 선택 가능합니다. ○ HTML로 텍스트 렌더링 : 웹페이지 형식으로 무비를 제작할 때 글자를 HTML 태그로 코딩해줍니다. ○ 테두리 표시 : 특히 입력 텍스트의 경우, 사용자가 입력할 글자의 영역 테두리를 표시해줌으로써 입력할 수 있는 영역을 쉽게 확인할 수 있도록 해줍니다.ⓕ 서식 옵션 설정다음과 같은 창을 통해 .. 2016. 6. 23.
3-19. 글자(텍스트) 입력 및 속성 이해(1) 제3장 애니메이션 기초3-19. 글자(텍스트) 입력 및 속성 이해(1) 1. 글꼴 관련 속성 패널 이해일반적인 것은 설명을 그림으로 대신하고, 꼭 이해해둘 필요가 있는 항목 중심으로 설명합니다.ⓐ 텍스트 유형 용도에 따라 3가지 유형이 있습니다. - 정적 : 일반적으로 화면에 보여주기만 하는 텍스트. 무비 상에서 편집(선택, 복사, 지우기 등)이 불가능합니다. - 입력 : 사용자 입력이 가능한 유형. 동적 텍스트와 연관이 되며, 변수를 가집니다. - 동적 : 사용자 입력에 의해 입력된 내용을 화면에 표시하는 데 주로 사용하는 유형. 입력 텍스트와 연관이 되며, 변수를 가집니다.(문자 입력 받아 출력하기 강좌 참조)ⓑ 문자 간격과 위치 - 글자와 글자 사이의 간격(자간)을 넓히거나 좁힙니다. - 위치는 보.. 2016. 6. 23.
3-18. 마스크 제3장 애니메이션 기초18. 마스크 효과 마스크(Mask)는 무엇인가를 덮어서 가린다'는 뜻입니다. 입을 가리는 마스크를 생각해보면 될 것 같은데, 이 경우 마스크는 타인이 보기에는 입이 가려져 보이지 않게 되지만, 플래시 마스크는 반대 개념으로 생각을 해야 합니다. 즉, 마스크가 씌워진 부분만 보이게 된다는 것입니다. - 참고 자료 : 마스크의 개념 http://prezi.com/pmt9etltn5fn/?utm_campaign=share&utm_medium=copy&rc=ex0share마스크 효과는 마스크 당하는 레이어(Masked Layer)와 마스크 레이어(Maks Layer)가 짝을 이루어야 합니다. 마스크 레이어 하나에 마스크 당하는 레이어는 1개 이상이 될 수도 있습니다.여기서는 마스크 효과를.. 2016. 6. 23.
3-16. 블렌드 모드 구현하기 제3장 애니메이션 기초16. 블렌드 모드 구현하기 플래시 8 이후부터는 포토샵에서 사용했던 필터 기능과 플렌드 모드 기법을 텍스트 오브젝트에 구현할 수 있게 되었습니다.예제 파일 : 예제 파일을 다운로드해서 열어보면 다음 그림과 같이 사진 위에 글자가 입력되어 있습니다.1. 블렌드 모드 구현하기1) 블렌드 모드는 일반 오브젝트를 가지고는 구현할 수 없습니다. 반드시 무비클립 심볼이어야만 한다는 조건이 있습니다.따라서 먼저 글자를 선택한 후 다음과 같이 무비클립 심볼로 변환합니다. 2) 스테이지의 '텍스트' 무비클립 인스턴스를 선택한 후 속성 패널에 있는 [블렌드] 항목을 펼쳐보면 다음과 같은 블렌드 모드 들이 펼쳐집니다.아래는 각 블렌드를 적용시켜본 예입니다. 2016. 6. 23.
3-15. 라이브러리 활용 제3장 애니메이션 기초3-15. 라이브러리 활용 1) 라이브러리 패널 살펴보기라이브러리는 심볼들의 창고임을 앞서 강의를 통해 익혔습니다.심볼을 만들면 라이브러리에 보관되므로 라이브러리는 일종의 자료실이라고 할 수 있습니다. 다음은 라이브러리와 관련된 주요 기능 아이콘들에 대한 설명입니다.심볼 추가 : 스테이지에서 제작한 후 심볼로 변환(F8키), 새 심볼 만들기(Ctrl + F8) 등 2가지 기능을 주로 이용하지만 이 아이콘을 눌러 새 심볼 만들기를 할 수도 있습니다.폴더 추가 : 심볼이 많을 경우 비슷한 유형이나 종류별로 묶어두기 위한 폴더를 생성할 수 있습니다.심볼/폴더 지우기 : 불필요한 심볼이나 폴더를 선택한 후 지울 수 있습니다.미리보기 : 목록에서 선택한 심볼을 미리 볼 수 있습니다.미리보기 .. 2016. 6. 21.
3-14. 안내선을 따라 움직이는 애니메이션 만들기 제3장 애니메이션 기초14. 안내선을 따라 움직이는 애니메이션 만들기앞서 공부한 애니메이션은 직선 운동을 하는 것 아주 단순한 것이었습니다. 이번에 다룰 내용은 안내선을 마련해주고 개체가 그 선을 따라 움직이는 애니메이션입니다. 아래의 예제를 한번 살펴보세요.풍선이 꾸불꾸불한 궤적을 따라 움직입니다. 이는 모션 가이드(안내선) 기능을 이용한 것입니다. [만들어보기]1) 그리기 도구 들을 이용하여 아래 그림과 같이 풍선을 그립니다. 그리고 화살표 도구로 불록을 싸서 심볼의 그래픽으로 등록(F8)합니다.2) '레이어1'을 더블클릭하여 이름을 '풍선'으로 변경합니다. (아래 설명에서 이 레이어를 지칭하는 이름으로 사용하겠습니다.) 3) 풍선 레이어를 선택하고 마우스 오른쪽 버튼을 눌러 [클래식 모션 안내선 추.. 2016. 6. 21.