본문 바로가기

액션스크립트18

제5장 콜백함수 예제 - 5-01. 무비클립 메서드 제5강 콜백함수 예제제5강에서는 콜백함수의 기본적인 사용법을 익히기 위한 예제들로 구성하였습니다.5-01. 무비클립 메서드 플래시 액션스크립트는 객체 지향 언어로서의 특성을 가지고 있으며, 이는 인간의 일상 생활과 매우 닮은데가 있습니다. 낯설지 않은 구문 형식 때문에 각광을 받고 있는 것 같습니다. 일상생활과 유사한 구조에다가 앞서의 액션스크립트 구문 형식을 통해 살펴본 바와 같이 경로, 액션스크립트, 매서드, 함수 등의 구분을 위한 기호가 가미되어 있는 것이므로 결코 어렵지 않다는 점을 염두에 두면 액션스크립트는 쉽게 구현할 수 있습니다. 가. 메서드(Method)? 어떤 식이든 명령을 그 명령의 대상자가 있어야할 것이고, 그 대상자가 취해야 할 행동이 따라주어야할 합니다. 이를테면 공부해라고 한다면.. 2016. 7. 4.
4-22. 영상시 만들기(1) 제4장 예제를 이용한 애니메이션 만들기4-22. 영상시 만들기(1) [생각해보기] 영상시란 영상이 움직이면서 그 위에 멋진 시가 흐르는 작품을 말합니다. 시가 움직이도록 하고 그 위에 마스크를 씌워서 시의 일부만 보이게 하면 됩니다. 첫 번째 작품은 이런 방법으로 제작하였습니다.여기에 사용된 주요 기법은 마스크 효과입니다. [만들어보기]1. 새 파일을 열고 스테이지 크기를 가로 550, 세로 100 픽셀, 프레임 속도 20fps로 설정해줍니다. 프레임 속도가 기본값인 12fps로 해주면 글자의 움직임이 부자연스럽습니다. 2. 시를 타이핑합니다. 낙화 - 이형기가야 할 때가 언제인가를 분명히 알고 가는 이의 뒷모습은 얼마나 아름다운가.봄 한철 격정을 인내한 나의 사랑은 지고 있다.분분한 낙화…… 결별이 이.. 2016. 7. 1.
4-21. 마우스 이벤트 활용 - rollOver / rollOut 제4장 예제를 이용한 애니메이션 만들기4-21. 마우스 이벤트 활용 - rollOver / rollOut 마우스 이벤트란 마우스 버튼을 어떻게 조작할 것인가를 의미합니다. 다음과 같은 마우스 이벤트가 있습니다. - 누르기(press) : 마우스 왼쪽 버튼 누르기 - 해제(release) : 마우스 왼족 버튼 눌렀다 놓기(클릭) - 외부에서 해제 : 마우스 버튼을 hit 프레임에서 정해준 영역 밖에서 뗐을 때 - 키 누르기 : 마우스 이벤트와 함께 혹은 단독으로 키보드의 지정해준 키를 사용하도록 합니다. 선택하고 키보드의 키를 눌러주면 키 이름이 표시됩니다. - 롤 오버 : 마우스 포인터를 hit 영역에 올렸을 때 - 롤 아웃 : 마우스 포인터를 hit 영역에서 벗어나게 했을 때 - 드래그 오버 : 마우스.. 2016. 7. 1.
4-20. 돋보기 만들기 - startDrag 제4장 예제를 이용한 애니메이션 만들기4-20. 돋보기 만들기 - startDrag 활용(2) startDrag 액션을 활용한 예제는 앞서의 강의(퍼즐 만들기 - startDrag, Hittest)에서 다루어보았습니다만, 여기서는 startDrag 만을 활용하여 돋보기를 만들어보겠습니다. 예제 파일 원을 마우스로 드래그해보세요. 원 부분이 확대되어 보일 것입니다. [생각해보기] 이 작품의 제작 아이디어는 이렇습니다. 1) 레이어 1에 원본 사진을 넣는다. 2) 레이어 2에는 원본 사진을 넣은 후 [자유 변형 도구]를 이용하여 다소 확대하여 둔다. 3) 레어어 3에 돋보기를 그려넣고, 이 돋보기를 무비클립으로 변환한 후 인스턴스 이름을 부여하고, startDrag 액선을 넣어준다. 그리고 이 레이어를 마스.. 2016. 7. 1.
4-19. 검사 자료 제작하기-점수누적, 점수 분류하기 제4장 예제를 이용한 애니메이션 만들기4-19. 검사 자료 제작하기 이 예제는 아래의 완성된 예제와 같이 문항을 보고 보기 항목에서 자신의 상황에 따른 보기를 고르면 보기에 따라 차등화된 점수가 합산되어 결과를 진단해주도록 되어 있습니다. 문항은 모두 20개로 되어 있으며, 인터넷 중독 예방센터(http://www.iapc.or.kr)의 진단 프로그램을 참고하였습니다. 내용은 다음과 같은 것들입니다.인터넷을 한번 시작하면 생각했던 것보다 오랜 시간을 인터넷에서 보내게 된다. 인터넷을 하고 있지 않을 때에도 인터넷에 대한 생각이 자꾸 떠오른다. 인터넷에 빠져 있다가 다른 사람과의 약속을 어긴 적이 있다. 인터넷을 하면 스트레스가 모두 해소되는 것 같다. 주위 사람들이 내가 인터넷을 너무 많이 한다고 지적하.. 2016. 7. 1.
4-18. 주-객관식 문제 출제하기 제4장 예제를 이용한 애니메이션 만들기4-18. 주-객관식 문제 출제하기 1. 안내 간단한 액션 스크립트로 객관식과 주관식의 형성평가 문제를 만들어봅니다.여기에서 다루고 있는 방법만이 형성평가 제작의 절대적인 방법은 아니라는 점을 미리 말씀드립니다. 보다 깊은 액션에 대한 이해가 뒷받침되면 훨씬 더 멋진 형성평가를 제작할 수 있을 것입니다. 2. 완성된 작품과 예제 파일 다운로드 예제 파일 3. 객관식 형성평가 만들기가. 보기 번호 복제하기(1) 예제 파일에는 보기 1, 2, 3 그래픽 심볼만 만들어 두었습니다.내부에 표시되는 숫자만 다르므로, 보기 4, 5를 추가하려면 다음과 같은 방법이 편리합니다.(2) 라이브러리에서 ‘보기3’ 심볼에서 마우스 오른쪽 단추를 누릅니다.그림과 같이 메뉴가 나타납니다.메.. 2016. 6. 30.
4-17. 툴팁 만들기 제4강 예제를 이용한 애니메이션 만들기4-17. 툴팁 만들기 1. 안내이번 차시에 익히실 내용은 텍스트를 이용한 웹 자료를 플래시로 만들 때 유용한 기능입니다.버튼으로 지정된 특정 영역 위에 마우스 커서를 올리면 설명문이 나오도록 하는 이른바 툴팁(Tool Tip ; 프로그램의 도구 아이콘에 마우스를 가져가면 그 도구에 대한 간단한 설명이 나오는)과 같은 기능입니다. 이를 초보적인 방법으로 구현하려면 버튼의 마우스 이벤트, 즉, Up, Over, Down, Hit라고 하는 4가지의 마우스 이벤트 중 Over를 적절히 잘 이용하면 되는 것입니다.하지만 이 방법은 손이 많이 가는 단점이 있습니다.여기서 제시하는 방법은 버튼과 무비클립을 결합한 한 쌍의 심볼을 이용하여, 이를 복제한 후 인스턴스 이름과 설명문.. 2016. 6. 30.
4-16. 퍼즐 만들기 - startDrag, hitTest 제4강 예제를 이용한 애니메이션 만들기4-16. 퍼즐 만들기 - startDrag, hitTest 1. 안내Start Drag와 hitTest 액션을 활용한 그림 짝맞추기 작품을 만들어 봅니다.문제와 보기를 나열하고, 문제를 드래그해서 정답 위에 올리면 그림이 붙고, 오답이면 원 위치로 돌아가도록 하는 것으로 형성평가 문제 제작에 활용하면 유용할 것이라고 생각됩니다. 2. 완성된 작품과 예제 파일 다운로드 예제 파일 다운로드 예제 웹페이지에서는 완성된 예제를 보실 수 있으며, 실습을 위해 기초적인 작업을 해둔 예제 파일을 다운로드할 수 있도록 해두었습니다.예제 파일을 다운로드해서 적당한 폴더에 저장을 하시고, 아래의 실습 과정을 따라 해보시기 바랍니다. 3. 만들어보기가. 무비 클립 안에 버튼 넣기이번 .. 2016. 6. 30.
4-15. 이미지 갤러리 만들기 - loadMovie / unloadMovie 제4장 예제를 이용한 애니메이션 만들기4-15. 로드 무비를 이용한 이미지 갤러리 만들기 이번 시간에 제작해 볼 작품은 몇 개의 쇽웨이브 파일(SWF)을 만들고 이 파일들을 불러들여 보이주거나 보이지 않게 닫는 방법을 이용한 이미지 갤러리입니다. 이전의 goto를 이용하는 방법과는 다른 방법으로 이번 예제에서 사용할 액션은 loadMovie와 unloadMovie입니다.아울러 화면 전체에 꽉 차도록 쇽웨이브 파일을 보이도록 하는 방법과 실행 파일을 만들고, 시작과 종료를 하는 방법을 알아봅니다.[완성된 예제] [만들어보기]가. 버튼 및 무비 클립 만들기Load Movie는 쇽웨이브 플래시 무비 파일에서 또 다른 플래시 무비 파일을 불러들이는 기능입니다. Unload Movie는 불러들인 무비 파일을 닫아.. 2016. 6. 30.
4-14. 산수 문제 출제하기 - 난수와 if 제4장 예제를 이용한 애니메이션 만들기4-14. 산수 문제 출제하기 - 난수와 if 가. 안내이번 강의는 완성된 예제는 간단해 보이지만 제법 복잡한 액션을 사용하게 됩니다. 그렇다고 지나치게 긴장할 필요는 없습니다. 지금까지의 예제보다는 약간 복잡하다는 것이지 어렵지는 않습니다.무비를 실행시켰을 때 덧셈문제가 자동으로 출제됩니다. 사용자는 답을 입력하는 텍스트 필드에 답을 입력하고 버튼을 누르면 답이 맞았는지 틀렸는지 텍스트 필드에 결과가 나타나게 됩니다. 계산하는 액션 스크립트만 수정하면 사칙 연산이 모두 가능한 예제입니다.예를 들면 7 + 8 라고 문제가 자동으로 출제될 수 있습니다.사용자가 답 입력란에 답을 입력하고 확인 버튼을 누르면결과가 나타나는 텍스트 필드에 "정답" 또는 "틀림" 이 나타납니.. 2016. 6. 30.
4-13. 사칙연산 계산기 만들기 -변수 제4장 예제를 이용한 애니메이션 만들기4-13. 사칙연산 계산기 만들기 다음 그림과 같은 간단한 액션 스크립트와 변수를 사용하여 사칙연산을 하는 계산기를 만들어 봅시다.예제 파일 가. 변수액션 스크립트에서 변수는 다음과 같이 표시합니다.가령 'a 라는 변수에 5를 대입하라'라고 한다면a = 5이 때의 = 은 대입하라는 의미이고, 같다는 의미는 아닙니다. 같다는 == 로 표시합니다.이 예제의 핵심은 바로 이 변수를 적절히 사용하는 것입니다.입력받은 두 수에 대하여 각각 aa, bb라는 변수에 대입하고, 사칙연산의 결과를 cc라는 변수에 대입해 봅시다. 그러면 사칙 연산은 다음과 같은 식으로 표현할 수 있을 것입니다.더하기 : cc = aa + bb빼기 : cc = aa - bb곱하기 : cc = aa * .. 2016. 6. 30.
4-11. 텍스트 입력과 출력 - 텍스트 유형, 변수 제4장 예제를 이용한 애니메이션 만들기4-11. 문자 입력 받아 출력하기이름과 주소를 입력 받아 출력하는 예제입니다. (1) 텍스트 유형 3가지텍스트 유형은 모두 3가지가 있습니다. [정적 텍스트, 동적 텍스트, 입력 텍스트]가 그것입니다. 이를 경우에 따라서 적절하게 잘 활용하는 것이 이번 강좌의 핵심입니다.- 정적 텍스트 위의 예제에서 입력창 위에 표시된 '받는 사람', '주소', '우편번호'는 단지 화면상에 표시되는 것으로 그 임무를 다합니다.- 입력 텍스트 입력창에 입력되는 문자는 [확인] 단추를 눌렀을 때 편지 봉투 위에 나타나야할 문자입니다. 따라서 이 문자는 '입력 텍스트'가 되어야 하고, 입력된 결과를 처리를 하기 위해서는 [변수]를 필요로 합니다.- 동적 텍스트 입력된 문자를 화면 상에 .. 2016. 6. 30.