MovieClip.scale9Grid 속성을 이용한 타원형 무비 클립 크기 조절

플래시 8 이전의 크기 조절 방법

플래시 8 이전 버전에서 타원형의 무비 클립 크기를 조절하려면 다음과 같은 방법으로 크기를 조절했습니다.

그림 1. 타원형 무비 클립을 9개로 분할

먼저 그림처럼 무비 클립을 9개로 분할하고 무비 클립의 크기가 변할 때 기준으로 사용될 무비 클립을 결정합니다. 기준 무비 클립은 9개로 분할된 무비 클립의 가운데 무비 클립을 사용하는데요. 기준이 되는 무비 클립의 크기에 따라 나머지 무비 클립의 크기와 좌표가 조절되는 것입니다. 그리고, 중요한 것은 9개로 분할된 무비 클립을 하나로 다시 묶어 주는 것입니다. 일반적으로 타원형의 무비 클립을 먼저 만들고, 해당 무비 클립의 편집 스테이지에 들어가서 드로잉 오브젝트를 9개로 분할한 후 각각의 분할된 드로잉 오브젝트를 무비 클립 심벌로 만들어주면 됩니다. 그럼 간단한 예제를 통해 실제 사용 방법을 살펴보도록 하겠습니다.

스테이지에 타원형의 무비 클립이 있고, 버튼을 클릭할 때마다 타원형 무비 클립의 크기가 화면 중앙에서 랜덤하게 조절되는 예제를 만들어보겠습니다.

그림 2. 타원형 무비 클립 크기 조절

화면 중앙에는 크기가 조절되는 타원형 무비 클립이 있습니다. 그리고, 하단에는 타원형 무비 클립의 현재 크기를 나타내는 텍스트 필드와 타원형 무비 클립의 크기를 조절하기 위한 버튼이 있습니다. 이 버튼을 클릭할 때마다 타원형 무비 클립의 크기가 랜덤하게 조절될 것입니다.

가장 먼저 해야 할 일은 화면 중앙에 있는 타원형 무비 클립을 9개로 분할하는 것입니다. 분할 영역은 4개의 외각 곡선을 기준으로 분할하면 됩니다. 타원형 무비 클립을 클릭해서 편집 스테이지로 들어간 후 드로잉 오브젝트를 9개로 분할해서 무비 클립으로 만들어줍니다.

그림 3. 무비 클립 9개로 분할

위 그림처럼 타원형 무비 클립 안에 드로잉 오브젝트를 9개로 분할해서 서로 다른 무비 클립으로 만들어줍니다. 이렇게 9개로 무비 클립을 만들어주었다면 기준이 되는 무비 클립의 크기에 따라 나머지 무비 클립의 크기와 좌표가 조절되도록 크기 조절 버튼을 클릭할 때 마다 실행될 액션스크립트를 다음과 같이 만들어줍니다.

// 초기 설정
fscommand("allowscale", false);
info_txt.text = "[box_mc] 크기 - W : 260   H : 140";

// 타원형 무비 클립 크기 변경 실행 버튼 제어
chageBtn_mc.onRollOver = function(){
   this.gotoAndStop(2);
}
chageBtn_mc.onRollOut = function(){
   this.gotoAndStop(1);
}
chageBtn_mc.onRelease = function(){
   changeBoxSize();	
}

// 타원형 무비 클립 크기 변경 사용자 정의 함수
function changeBoxSize():Void{
   // 타원형 무비 클립의 변해야 할 랜덤한 크기
   var targetWidth:Number = Math.floor(Math.random() * (460 - 140 + 1)) + 140;
   var targetHeight:Number = Math.floor(Math.random() * (300 - 120 + 1)) + 120;
   // 스테이지에 타원형 무비 클립의 크기 출력 
   info_txt.text = "[box_mc] 크기 - W : "+targetWidth+"   H : "+targetHeight;
   // 기준이 되는 무비 클립 크기 제어 (기준 무비 클립 : box_mc.box5_mc)
   box_mc.box5_mc._width = targetWidth - (box_mc.box4_mc._width + box_mc.box6_mc._width);
   box_mc.box5_mc._height = targetHeight - (box_mc.box2_mc._height + box_mc.box8_mc._height);	
   // x좌표가 변동되는 무비 클립 제어
   box_mc.box3_mc._x = box_mc.box6_mc._x = box_mc.box9_mc._x = box_mc.box5_mc._x + box_mc.box5_mc._width;
   // y좌표가 변동되는 무비 클립 제어
   box_mc.box7_mc._y = box_mc.box8_mc._y = box_mc.box9_mc._y = box_mc.box5_mc._y + box_mc.box5_mc._height;
   // width가 변동되는 무비 클립 제어
   box_mc.box2_mc._width = box_mc.box8_mc._width = box_mc.box5_mc._width;	
   // height가 변동되는 무비 클립 제어
   box_mc.box4_mc._height = box_mc.box6_mc._height = box_mc.box5_mc._height;	
   // 타원형 무비 클립 스테이지 중앙에 위치하도록 좌표 조절
   box_mc._x = 250 - (box_mc._width/2);
   box_mc._y = 200 - (box_mc._height/2);	
}

					  

이 액션스크립트는 기준 무비 클립인 box5_mc 무비 클립의 크기에 따라 다른 무비 클립들의 크기와 좌표가 제어되도록 명령을 수행하고 있습니다. 자세한 사항은 아래 표를 참조해보시기 바랍니다.

* box5_mc 무비 클립은 기준 무비 클립이며 부모 무비 클립인 box_mc는 생략했습니다.

표 내용을 자세히 살펴보면 box_mc.box5_mc 무비 클립의 크기에 따라 변동되어야 할 나머지 무비 클립들이 일괄적으로 제어되는 것을 확인할 수 있을 것입니다.

그림 4 및 5. 외각 곡선이 뭉개지지 않고 크기가 조절되는 타원형 무비 클립

이처럼 플래시 8 이전에는 타원형 무비 클립의 크기를 조절하기 위해서 복잡한 방법을 사용할 수 밖에 없어서 제작 시간이나 수정 및 확장성이 용이하지 못했습니다. 하지만, 플래시 8에서는 무비 클립을 분할하는 복잡한 작업을 할 필요가 없어졌습니다. 새롭게 추가된 MovieClip.scale9Grid 속성을 이용하면 손쉽게 타원형 무비 클립의 크기를 조절할 수 있습니다.

2/5 페이지

이전 페이지

다음 페이지