공부할겸 이런 기능 저런 기능을 만들어 보고 있습니다. (플래시라는 툴 접한지 4일째임)
ActionScript3.0 을 이용해서 동적으로 버튼을 생성해서 구동시켜보는 예제입니다.
저번 포스팅에서 쓰였던 "초 간단 사진 갤러리" 소스를 이용해서 변경해 보기로 하겠습니다. 추가 할 내용은 사진이 바뀔 때 보여주는 이미지 전환 효과를 ActionScript 에서 하드코딩 되어 있는 부분을 동적으로 버튼을 만들어서 클릭할 때마다 전환 효과를 변하게 해주는 기능을 추가해 줍니다.
1. Stage 에서 보이는 모습을 그림과 같이 바꾸어 줍니다. 맨 윗부분에 버튼을 추가 하기 위해서 그림을 전체적으로 내려줬습니다.
2. "Window" -> "Component" 를 선택하고 "User Interface" 에서 Button 을 끌어다가 Library 로 가져다 둡니다.
이제 ActionScript 만 바꾸어 주면 됩니다.
3. 첫번째 프레임의 "Actions" 레이어에서 오른쪽 마우스 클릭후 "Actions" 선택해 줍니다. (Windows 라면 "F9" 키 클릭 , OSX 라면 "option"-"F9" 입니다. OSX 와 해피해킹 키보드를 쓰고 있는데 두키를 동시에 눌러주는게 은근히 짜증납니다.)
4. 시작할때 전환 효과를 "Blinds" 방식으로 시작하게 바꿔줍니다.
var transitionType:String = "Blinds";
5. 전환 효과에 쓰이는 단어들을 버튼 레이블로 활용 가능하게 배열에다가 저장해 둡니다.
var labels:Array = new Array( "Blinds", "Fade", "Fly", "Iris", "Photo", "PixelDissolve", "Rotate", "Squeeze", "Wipe", "Zoom", "Random");
추가합니다.
6. 전에 눌러뒀던 버튼을 알아야지 새로 버튼을 누를때 강조효과를 없애줄 수가 있습니다.
var oldSelectButton:Button ;
추가합니다.
7. 동적으로 버튼을 생성해 줍니다. (문법은 정확히 알고 한다기 보다는 대충 이럴것이다 라고 생각해서 써봤습니다. 안돌아가면 돌아가는 예제들을 조금 찾아봐서 고쳤습니다)
for(var i=0; i < labels.length ; i++){
var myButton:Button = new Button();
myButton.label = labels[i] ; //
myButton.width = 80;
var posY = 10;
var posX = i;
if (i > 5)
{
posX = i - 6;
posY = 40;
}
myButton.move(20 + posX * (myButton.width + 10), posY);
myButton.addEventListener(MouseEvent.CLICK , onMyButtonClick);
addChild(myButton);
if (i == 0) {
myButton.emphasized = true;
oldSelectButton = myButton;
}
}
세부적으로 살펴보자면
myButton.width = 80;
버튼 폭을 80으로 정해줍니다.
if (i > 5)
{
posX = i - 6;
posY = 40;
}
버튼이 6개를 넘어가면 한 줄 내려서 그려줍니다.
myButton.move(20 + posX * (myButton.width + 10), posY);
버튼을 정해진 위치로 이동시켜주는 부분입니다.
myButton.addEventListener(MouseEvent.CLICK , onMyButtonClick);
버튼을 클릭할때 발생시키는 이벤트 핸들러를 등록시켜줍니다.
addChild(myButton);
실제로 화면에 그려주는 부분입니다.
if (i == 0) {
myButton.emphasized = true;
oldSelectButton = myButton;
}
첫번째 버튼 (Blinds 라는 라벨이 붙은 버튼)을 강조시키고 그 버튼을 선택했다고 저장합니다.
8. 동적으로 생성한 버튼을 클릭했을 때의 구동 되는 핸들러 함수를 정의해 줍니다.
function onMyButtonClick(evt:MouseEvent):void
{
oldSelectButton.emphasized = false;
var selButton:Button = Button(evt.target) ;
transitionType = selButton.label ;
selButton.emphasized = true;
oldSelectButton = selButton;
}
전체를 아우르면서 설명을 하자면
전에 선택된 버튼의 강조 효과를 없애고 , 이벤트가 발생한 버튼이 무엇인지 알아내서, 그 버튼의 레이블에 쓰여져 있는 전환효과로 바꾸고 (transitionType 이 전환 효과 지정해주는 것입니다) 지금 선택된 버튼을 강조시킵니다. 그리고 나중에 다른 버튼이 클릭될 때를 가정하여 지금 선택된 버튼을 oldSelectButton 에 저장해 둡니다.
9. 완성된 모습입니다.
상단의 버튼을 이거 저거 눌러보시면서 전환 효과가 변경되는 것을 확인하세요.
역시나 소스는 Flash CS4 형식으로 올려둡니다.
PhotoAlbum_dynamic_cs4.fla.zip