플래시 개발시에 자주 쓰이는 산수 또는 수학들 3 - 항등식 / 스크롤

일단 새벽에 시크해지니 하나 더 써보죠... 밤을 새고 있으려니 쓸데없는 일에 정력을 쏟고 있습니다...


점점 웹UI시장에서는 자리를 잃어가는 플래시이지만 대신 다른 시장이 계속 생기잖습니까...뭐가 그렇게들 고민이신가요... 우린 그냥 프로야구팀처럼 연고지 이전을 하면 되는겁니다


머 암튼 웹 ui를 만들던 시절... 지겹도록 만들어 내던 것이 바로 2뎁스 메뉴이고, 다음이 아마도 스크롤이 아니였을까 싶습니다...


스크롤은 참 별거 없습니다... 초등산수에 나오는 항등식을 사용합니다.



[스크롤버튼]
[--------------------스크롤배경-------------]

[-----마스크-----]
[------------스크롤할 무비클립----------]


이렇게 있다고 치죠...


[스크롤버튼]
----------------a-------------->[스크롤버튼] 스크롤 버튼은 이정도를 움직이겠죠...
[--------------------스크롤배경-------------]

이 움직일 총 거리를 a 라고 하겠습니다. 스크롤 버튼은 0에서 a까지 움직이죠...
a는 스크롤 배경에서 스크롤 버튼의 크기를 뺀 값이란 걸 그림에서 알 수가 있습니다


                                  [-----마스크-----]
<---------b-----------[------------스크롤할 무비클립----------]
[------------스크롤할 무비클립----------]


아래쪽은 마스크가 아닌 마스크가 움직여야겠죠? b라고 하겠습니다.

무비는 오른쪽에서 왼쪽으로 이동하니(상하는 그리기가 힘들어 그냥 가로로 표현하겠습니다) 0 에서 b가 아닌 b에서 0으로 움직입니다 (화살표를 보세요)

그리고 그림에서 b는 스크롤할 무비클립의 크기에서 마스크의 크기를 뺀 값이란 걸 알 수가 있습니다


즉,

a = scrollWidth - scroll.width
b = mc.width - mask.width

이러면 맞을 것 같지만, 위에서 말했듯 아랫녀석은 반대 방향으로 뺏으니 - 를 붙여줘서

b = mask.width - mc.width 가 되겠습니다


스크롤이라는 게 스크롤의 범위에서 스크롤을 움직인 것만큼, 무비의 스크롤 범위에서 무비를 움직인 것입니다.

그렇다면 다음과 같은 항등식이 성립하겠죠...

scroll.x : a = mc.x : b (뭐 여기서, scroll.x / a = mc.x / b 로 바로 나와도 되긴 합니다만... )

항등식을 푸는 방법은 양 끝쪽변을 서로 곱해주고, 안쪽변 끼리 또 곱해주면 됩니다... 이건 기억나시겠죠...
암튼 그래서 양쪽을 곱해주면,

scroll.x * b = a * mc.x


양쪽을 a로 나눠주면, 

mc.x = scroll.x * b / a


답이 나왔네요... 



산수란 참 쉬운 녀석이랍니다...



p.s. 작성하는 와중에 히카(http://www.diebuster.com/flash/)님은 3d 포스팅 작성중이라고 페북 챗으로 말씀하고 계신다는... 이거야 원 수준차가... ㅡ.,ㅡ;;;

그래도 쉽게 설명하는 것에는 저에게 한표를!!!!