9-sliced 무비클립 만들기 02

처음 글에서 보여진 이미지들은 Adobe Flash CS4 에서의 작업창 이어서
다른 버전의 유저는 살짝 다른 위치에 있으니 잘 찾아보라고 미리 말해두고 싶다.

작업창에서의 체크박스의 위치만 다를 뿐 크게 달라지는 것은 없으니
걱정은 접어두시고 사용하시라.

일단, 플래시 유저라면 플래시에서 어떠어떠한 버그들이 있는지 숙지하고 있어야 할 것이다.

버그는 잘 이용할 수도 있는 것도 있고 우회해서 피해가야 할 버그도 있는 법.
잘 쓰면 약이되고, 잘 못 쓰면 독이 된다는 사실.

9-sliced에도 그러한 문제가 있다.
정확하게 이것이 옳고 저것이 틀리다 라고 말 할 수는 없는데,
'이렇게 쓰세요'라고 해놓고는 그렇게 되지 않는경우가 있다.

여기서 그것을 대처하는 방법을 놓고 이야기 해보고자 한다.

자, 지난 이전 글에서 9-sliced 무비클립을 만들기만 했다.
하지만, 만들기만 했지 정작 이 녀석을 어디에 어떻게 쓰는지에 대해서
전혀 이야기를 해 본적이 없었다.

자, 그럼 이 녀석을 어떻게 쓰려고 만든 것일까?

위의 이미지를 보시라.
센터를 기준으로 센터를 포함하여 각 8방향으로 나뉘어 총 9개로 나뉜 것을...

각각의 명칭을 이렇게 부르는 것은 아니지만, 이렇게 구분을 하고 있다.
위, 아래, 오른쪽, 왼쪽, 그리고 4개의 코너와 센터.

이렇게 나눈 이미지에서 센터에 축구공이 올려져 있다.

이것은 무엇일까?
내가 부르길 센터는 컨텐츠 영역이라 부른다.

그럼 나머지 8방향의 나뉜 조각들은 뭐라고 부를까?
내가 부르길 프레임 영역이라고 부른다.

그럼, 왜 그렇게 부르는 걸까?
내맘이다.

9-sliced 무비클립을 처음 쓰던 당시에는 '이건 이렇게 쓰이는구나'라고 생각만 했지,
미처 급한 작업을 할 때 어떠한 문제가 있는지 전혀 인지하지 못했었다.

그래서 문제를 해결하면서, 이러한 문제가 다른 사람들에게 있었는지,
해결방안으로는 어떤 것이 있는지,
아무도 웹문서로 만들어 놓질 않았더라 이거란말이다.

이런, 빌어먹을...

그래서 내가 문제를 해결하면서 이런걸 이렇게 부르자, 저렇게 부르자
하나의 규격을 내맘대로 만들어 버린것이다.

그래서 그렇게 네이밍을 했고, 지금 그렇게 부르고 있다.
맘에 안드는 사람은 다르게 불러라.
어차피 정해진 국제 규격이 있는게 아니라면 꼴리는대로 해서 문제되진 않으니...

아무도 궁금해하지 않을 잡설은 여기서 끝내고 저걸 어떤 때 쓰는지 알아보자.

각 모서리와 컨텐츠 영역의 변화를 체크하기 위해서
각 모서리를 라운딩 처리한 사각형을 그리고, 컨텐츠영역과 프레임 영역의
넓이 변화를 체크 해야 하므로 임의적으로 '컨텐츠영역이다'라는 표시를 해주자.

이렇게 그려놓고 첫글에서 설명한대로 9-sliced 무비클립을 만든뒤
생성된 9-sliced무비클립을 더블클릭해서 안으로 들어가면,
여지껏 보아온 무비클립의 모습이 아닌 점선 4줄이 보일 것이다.

4줄의 점선은 구역을 나누는 나뉘는 선(devide lines)으로 이 선으로 각각의 영역을 구분 짓게 된다.

각각의 점선들은 일반적인 가이드 라인(guide line)과 같이 드래그가 가능하며,
점선의 삭제는 불가능하다.

이렇게 원하는 영역을 칼같이 잘 맞추어 놓으면 9-sliced 무비클립이 완성된다.
그럼, 무비클립의 밖으로 나와서 정확하게 프레임영역과 컨텐츠영역을 맞춰서
늘여지고 줄어드는지 비교를 하면서 확인을 할 필요가 있다.

그럼 상위스테이지로 나가서 비교를 위해 무비클립을 복제하고 복제한 녀석을 늘여보자.

이대로 하면 당신이 원하는 결과가 기다리고 있을까?
아니면, 전혀 다른 결과가 나올 것인가?

일단, 모르면 따라해봐라.