오늘은 루트 무비클립의 로딩바 만들기에 대해서 알아보겠습니다.

Now Loading...

로딩바 없으면 짜증나죠. 뭐, 그렇다고 1% 올라가는데 하염없는 시간을 필요로 하는것도 좀 거시기 하긴 하지만, 어쨌든 로딩바가 있기 때문에 보통의 하이퍼텍스트 미디어 보다는 당연히 용량이 클수밖에 없는 플래시를 사용자가 뜨길 기다리며 불안감에 휩쌓이지 않을수 있을겁니다.

프로그래밍은 숫자놀이 입니다.

로딩바 만들기 강좌를 볼 사람들이 액션스크립트 개발을 어느정도 하는 개발자일 리는 없으니깐, 원론적인 내용부터 살펴보도록 하죠.

일단 우리들이 바라보는 모니터 안의 그 모든것은 숫자로 구성되어 있습니다. 컴퓨터는 "숫자" 로 구성된다는 아주 당연한 말을 실제 프로그래밍에 익숙하지 않은 사람이 만들려 하다보면 잊어버리곤 하죠. 아주 어려운 게임이나 UI 를 만들던, 이런 아주 단순한 로딩바를 만들던 컴퓨터 프로그래밍은 "숫자놀이" 입니다.

그것을 증명할 수 있는 이야기를 하자면 우리가 바라보는 컴퓨터 안의 글자 역시 숫자입니다.

간단하고 재밌는 예제를 볼까요?



위의 예제는 영문자 "abcd" 의 문자 코드를 보고, 소문자를 대문자로 바꾸는 역할을 하는 코드입니다. 출력해보면 아래와 같은 결과가 나오죠.

이 코드를 만들어내기 위해선 플래시가 프로그래머에게 제공해줘야만 필수적인 기능이 있는데, 바로 "문자" 에 대한 "문자코드" 를 알려주는 기능입니다. F1 을 눌러서 String 에 관련된 메서드를 보면 되겠지만, 간단하게 설명을 하자면 charAt(f) 은 f번째에 해당하는 문자를 보여주는 역할을 하고, charCodeAt(f) 은 f번째에 해당하는 문자의 문자코드를 보여주는 역할을 합니다. a 같은 경우엔 97 이라는 문자코드를 가지고 있구요. 대문자 A 같은 경우엔 65 라는 문자코드를 가지고 있습니다.(이건 약속된 겁니다.) fromCharCode(n) 은 n에 해당하는 문자코드를 문자로 바꿔주죠.

이런 기능들을 통해서 프로그래머는 소문자->대문자 만들기를 만듭니다. 만일 문자코드가 정해져 있지 않다면, 그리고, charCodeAt() 이나 fromCharCode() 처럼 문자를 숫자로 만들거나, 숫자를 문자로 만드는 기능이 프로그래머에게 제공되지 않는다면 굉장히 복잡하게 되거나 심할 경우 만들기 불가능해지는 경우도 있겠죠.

즉… 프로그래밍을 해내가면서 잊지 말아야할 것은 플래시던 php 이던 프로그래밍은 기본적으로 숫자를 이용해서 무엇인가를 만드는 일이며, 그것을 만들수 있는 기능을 프로그래밍 도구는 제공해 준다는 것입니다.

숫자로 만들고, 도구는 숫자를 제공한다.

까막득하게 보이는 프로그래밍을 시작하면서 잊지 말아야 하는 절대적인 상식중에 하나입니다. 이것을 잊어버리면 프로그래밍은 아주 손쉽게 마법처럼 보여버리게 되죠. 인간이 하는 일중에서 초자연적인 마법은 없는데도 말이죠.

꽤 길게 이야기를 했는데, 이렇게 복잡한 이야기를 해야했던 이유를 차근히 알아나가도록 하죠.

로딩을 만들기 위해서 필요한 숫자

위에서도 말했듯 도구는 항상 프로그래머가 사용할 수 있는 숫자를 제공해 줍니다. (혹은, 숫자를 알아낼 수 있는 기본적인 기능을 가지고 있죠.) 그렇다면 로딩을 만들기 위해서 필요한 숫자는 무엇일까요?

일단 오늘 만들 로딩바는 "root" 즉, swf 자기 자신의 로딩을 만들기 위한 것이니 외부 무비클립이나 이미지 로딩에 대해서는 설명하지 않겠습니다.

로딩을 만들기 위해서 필요한 숫자는

1 . swf의 총 크기

2 . 로딩된 크기

가 되겠네요.

Swf 의 총 크기는 당연히 고정된 숫자여야 하겠죠. 로딩된 크기는 시간에 따라서 변해야만 하는 것이겠구요. 여기서 세번째 기능이 필요하겠네요.

3 . 변하는 시간에 따라서 코드를 반복실행 해줄 기능

일단 이 세가지 기능이 있다면 로딩만들기를 위한 기본적인 준비는 완료될 것 같네요.

이 세가지 기능은 당연히 플래시 라는 프로그래밍 도구가 제공을 해 줍니다. 제공을 안해준다면 플래시 개발자들이 로딩을 만들기 불편하겠죠. 플래시에서 F1 (도움말) 을 열어서 해당기능을 찾아볼까요? 레퍼런스 라는 것은 자신이 만들기 위한것을 위해서 도구가 어떤 기능을 제공해주는지 알아내기 위해서 항상 "자주!" 봐야 하는것입니다.

AS2.0 의 경우를 살펴보면

이렇게 getBytesTotal (총 용량) 과 getBytesLoaded (로드된 용량) 을 제공해주는 군요. 그리고, 시간별 반복을 위한 것으로는 예전 강좌중에서 onEnterFrame 이 있습니다. onEnterFrame 같은 경우엔 아래 링크에서 알아보도록 하세요.

http://log.ssen.name/entry/6-onEnterFrame…-시간을-지배하다

AS3.0 의 경우를 살펴볼까요? 저도 AS3.0 은 아직 익숙하지 않아서 좀 찾아봐야 할 것 같네요.

AS3.0 의 경우엔 좀 복잡하게 꼬여있네요.

MovieClip > stage:Stage > loaderInfo:LoaderInfo 에 bytesTotal 과 bytesLoaded 가 있군요.

시간이벤트의 경우엔 이번에 새로 생겼다는 Timer 를 사용해보도록 하겠습니다. AS2.0 의 경우엔 위에 적어놓은 onEnterFrame 에 대한 내용을 참고해주시고, AS3.0 의 Timer 같은 경우엔 따로 설명을 안할테니 알아서 공부해주세요. (뭐, 3.0 기본문법을 아시는 분이라면 사실 이 강좌를 볼 일도 없으시겠지만…;;;)

자… 플래시 프로그래밍 도구가 제공해주는 두가지 숫자와 시간이벤트를 알아냈으니 이제 요리를 시작해 볼까요?

기본 로딩 확인해 보기

일단은 AS2.0 으로 만들어보도록 하겠습니다. 일단은 로딩을 눈으로 확인하려면 용량이 어느정도 커야 하므로, 무비클립 안에 커다란 이미지를 넣도록 하죠. 제가 모니터 바탕화면으로 쓰려고 다운받아놓은 1920x1200 짜리 이미지를 한 10개 넣어두면 되지 않을까 싶습니다.


스테이지에 대빵 큰 그림을 잔뜩 넣었습니다.

라이브러리에 빵빵하게 들어가 있으니 시작해보도록 하죠.

일단은 간단하게 아래처럼 만들어보도록 하죠.





그러면



이런식으로 표시가 되게 되는데요. 우리가 만들고 있는것은 온라인에서 로딩되는것이 아니라서 loaded 의 변화를 눈으로 알수가 없습니다. 플래시에서 약간 조작을 해줘야 눈으로 확인이 가능합니다.



위처럼 다운로드 시뮬레이션을 눌러서 확인을 해볼까요.

이제 정상적으로 나오네요.

Percent 로 표시하기

로딩에 필요한 기능들을 추가해 보도록 할까요?

1 . 일단 숫자가 Percent 로 표시되게 해야겠죠. 기본적으로 로딩들은 100% 기준 숫자로 표현되니깐요.

2 . 로딩이 끝났을때 (100% 가 넘었을때) 어떠한 이벤트가 발생해야 합니다.




위와 같이 간단한 산수로 백분율을 만들어주고, if 조건문을 사용해서 percent 가 100 을 넘었을때 정지되는 이벤트를 만들어줬습니다. 컴파일 해보면…

이렇게 정상적으로 나오게 됩니다. (그림을 너무 많이 넣었나요… 한참 기다려야 했네요…;;;)

Display

자… 이제 로딩바를 만들기 위해서 필요한 기본적인 숫자는 모두 마련되었습니다. 그렇다면 이제 실제로 눈으로 볼 수 있도록 만들어봐야겠네요.

일단 기본적인 숫자를 모두 알아냈으니 Display style 은 여러가지로 만들수 있습니다. 뭐 아주 기본적인 막대기 스타일에서 부터, 원형스타일, 애니메이션 스타일 까지 다양한 스타일링이 가능하죠. 로딩바 만들기 백서를 만들것은 아니니 그냥 기본중에 기본인 막대기 스타일을 만들어보도록 하겠습니다.

무비클립을 조작할 수 있는 기능을 알아야 하겠습니다. 일단은 아주 간단한 _xscale 을 사용해보도록 하죠.

_xscale , _width 같이 무비클립의 크기조절을 위한 기능은 아래 링크에 설명이 되어있습니다.

http://log.ssen.name/entry/3-MovieClip-변화

일단은 스테이지에 간단하게 400px 짜리 무비클립을 만듭니다.




그리고, 링키지네임을 붙여줍니다. "load_mc" 라고 이름 붙여보도록 하죠.



이렇게 무비클립을 만들었으니 이제 다시 코드로 돌아가보도록 할까요.



딱 두 줄 추가 했습니다. Load_mc 의 _xscale 속성에 기존의 percent 숫자를 연결시켰습니다.

영상이 아니라서 눈으로 확인할 순 없지만;;; 잘 돌아갑니다.

이제 저 로딩될때마다 변화하는 무비클립 위에다가 디자인을 입히면 기본적인 로딩바 만들기는 완료가 됩니다. _xscale 속성이 아닌 좀 더 스타일리쉬한 걸 만들기 위해서는 MovieClip 이나 여러가지 Display 관련 기능들을 사용해서 기존에 loaded , total , percent 숫자를 다르게 표현해야 하겠지만요… 어쨌든 기본적으로는 세가지 숫자만 있다면 로딩은 무엇이든 만들수가 있습니다.

프로그래밍은 숫자놀이 니까요…

숫자만 있다면 못만들건 없습니다.

AS3.0 버전 코드

ㅡ ㄴ ㅡ;;; 사실 AS3.0 을 사용하는 분한테 로딩바 만들기 코드를 보여주는것도 우습지만, 일단 적어놨으니 코드를 한번 짜보도록 하죠. AS3.0 은 기본적으로 프로그래밍 상의 효율성을 위해서 기능들이 굉장히 기능단위로 세분화 되어있습니다. 즉… 인간적인 코드는 아니죠. AS2.0 처럼 디자이너들이 사용하기 편하도록 인간중심의 코드가 아닌, 좀 더 기계에서 잘 돌아가고, 모듈화 시키기 편하도록 만들어진 언어이니 디자이너들 같이 프로그래밍에 대한 비중을 크게 느끼지 않는 파트라면 가능하면 2.0 을 사용하도록 하세요. 인간적인 언어를 사용하는게 편합니다.

근데… 사실 알고리즘이 어려운거지 이런 API 적인 문제는 50보 100보 차이일 뿐이라서 어짜피 AS2.0 이든 AS3.0 이든 별 차이 없습니다. 익숙해지는데 시간이 좀 차이가 나긴 하지만, 언어 익히는거야 거기서 거기죠. 어떻게 사용하는게 어려운거지...

저도 AS3.0 은 처음 짜보는 거라서 좀 버벅 거렸네요. Timer 에 사용된 새로운 이벤트 핸들링 방식은 좀 익숙하지 않아서 좀 헤맸군요. 내장된 플래시 플레이어에서 다운로드 시뮬레이션 할때

TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다.

at timer_fla::MainTimeline/timerHandler()

at flash.utils::Timer/flash.utils:Timer::_timerDispatch()

at flash.utils::Timer/flash.utils:Timer::tick()

요런 에러가 뜨면서 timer 가 stop 이 안되던데 왜 그런건지는 잘 모르겠네요. 웹에 올리면 정상적으로 중지 되던데요. 이유 아시는 분 계시면 리포팅 좀 부탁드려요. ' ㅡ 'a

어쨌든 위의 코드는 AS2.0 버전 코드와 크게 다를게 없습니다. _xscale 이 scaleX 로 바뀌면서 0~100 의 숫자범위에서 0~1 의 숫자범위를 가지게 된거랑 enterFrame 대신 Timer 를 쓴거랑 bytesLoaded 같이 기존에 MovieClip 안에 있던 속성들이 세분화 되어서 분리된 것 빼고는 별게 없지요. 레퍼런스 찾느라고 잠깐 버벅이긴 했는데, 뭐 사용하는데 필요한 기능을 제공한다는 점에서는 AS2.0 이나 AS3.0 이나 같죠. 좀 위치랑 표현방식이 다를뿐...

마무리

어쨌든 간단한 내용을 굉장히 길게 써봤습니다. 프로그래밍을 해가는데 있어서 필요한 간단한 접근개념을 적었으니 다른것들도 이렇게 필요한 숫자를 제공하는 기능을 알기위해 레퍼런스를 조금씩 뒤져가면서 하다보면 예전보다는 좀 더 수월하게 작업하실 수 있을겁니다.

그럼 이만 백수는 물러갑니다… 할 일은 없고, 놀기도 지치고 하다보니 자꾸 강좌만 쓰게 되네요…





출처: ssen님의 레시피
http://ssen.name/zb/1103