공부할겸 이런 기능 저런 기능을 만들어 보고 있습니다. (플래시라는 툴 접한지 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 형식으로 올려둡니다. 



요즘 트윗을 보면 '솔로라서.. ' 라고 시작하는 트윗들이 많이 보이는 것 같습니다. 그런 트윗을 넘 자주 보다 보니 예전에 유행하던 솔로부대가 생각 나더군요 ㅎㅎ


당당하게!!


혼자 놀아도 됩니다. ㅎㅎ



휴가 끝날때까지 자동으로 노래는 틀어집니다. ㅎㅎ


저번 글 에서 테두리가 있는 것이 얼마만큼 사진을 그럴듯 하게 보이는 가에 대해서 글을 썼더니 같이 '노투(http://notoo.kr)' 사이트를 이용하는 친구가 저에게 팁을 한가지 더 주더군요. 바로 여백 입니다. 역시 테두리때와 마찬가지로 포토샵을 전혀 쓸 필요가 없이 연습장 사이트인 노투에서 간단한 클릭 몇번으로 여백을 줄 수가 있습니다.

뭐 디지탈 사진 그냥 올리면 되지, 뭐하러 조작을 해 주냐 하시면 드릴 말씀이 없구요. 항상 2%가 부족하신 분들을 위해서 설명 드리는 것입니다.

이번에는 친구가 좋아하는 김태희 사진으로 해 볼까 합니다.
사진만으로 충분히 이쁜 얼굴이겠지만 전 이나영을 좋아하는 지라.. 별 감흥이 없군요.. 훗..
아무 효과도 안준 사진
테두리 효과만 줬을때
확실히 테두리 없는 사진에 비해서는 사진 자체에 집중하기 쉽습니다. 경계가 생기기 때문에 그 경계안의 것에 집중하는 심리적인 효과가 있기 때문에 그렇다고 합니다.
테두리와 여백을 줬을 때
어떤가요? 실제 인화한 사진하고 비슷한 느낌이 나죠? 뭐 다른 분들은 모르겠지만 전 이런 느낌이 나는 사진이 아주 좋더군요.
사진을 겹치는 것은 여백이 흰색 을 박는게 아니라 여백을 주는 것이기 때문에 배경을 흰색으로 바꾸고 애벽과 테두리를 주는 것이 겹치기 효과가 제일 좋더군요.

위 이나영 사진 모음은 꼭 실제 사진 인화한 것처럼 보이지 않습니까? ㅋㅋ


사진 올리 실때 테두리랑 여백만 살짝 추가해서 올려보세요. 사진의 느낌이 살아나는군요. +ㅂ+
최근에 노투 를 사용하고 있는데요. 그동안 얼마나 사진에 무지 했었는지 잘 알게 됩니다. 뭐 지금도 많이 알지는 못하지만 한가지 알게 된게 있습니다. 바로 '테두리' 입니다. 그동안 수많은 사진을 올렸지만 테두리 하나 변변하게 설정 하지 못하고 올렸었는데 이제야 테두리를 새로운 눈으로 보게 됐습니다. 정말 간단한 설정 한가지만으로도 사진 자체가 뭔가 그럴듯 해 보이는 겁니다. 전적으로 주관적인 생각이긴 하지만요 ㅎㅎ
예제 - 테두리 없는 사진
예제 - 테두리가 없는 경우
굳이 어색함을 찾을 수 없을 지경이군요. (이나영을 좋아함..) 뭐 괜찮은데요?  테두리 보다는 역시 그 안에 들어 있는 사진의 대상이 중요한거군요... - 무슨 소리중인지...
예제 - 테두리가 있을 때
단지 테두리만 추가해줬는데 뭔가 사진이 살아나는 느낌이네요. 위의 테두리가 없는 사진이랑 비교해 보면 더 명백한 것 같습니다. 개인적인 느낌이지만 뭔가 안정된 느낌이라고나 할까? 그래서 사진을 보통 액자에 집어 넣는 것이겠죠?

실제로 필름을 인화해서 사진으로 가지고 있더라도 사진이 테두리 (보통 흰색이지요?) 가 있는 경우가 저는 더 마음에 들었 던 기억이 납니다.

뭐 사진 올릴 때마다 포토샵을 쓰시라는 건 아니고요. 단지 테두리 하나만 추가해도 사진이 달라 보인다는 이야기가 하고 싶었습니다.
가장 테두리가 돋 보이는 것은 이렇게 사진을 겹쳐서 표현 할 때가 아닌 가 싶습니다.  사진 사이의 경계가 뚜렸하게 보이면서 각각의 사진이 겹쳤음에도 불구하고 겹치는 부분이 명확해서 시선으로 두 사진이 구분이 갑니다. 보통 디지털 사진들을 겹쳤을 때 두 사진이 합쳐보이는 것과 반대로 말이죠.
중요한 건 이나영이 이쁘다는 것이죠... (새기능 테스트)

[경향의 눈]방치의 참상을 보존하라

서울시가 2006년 3월 숭례문을 시민에 개방하지 않았더라면, 개방을 하더라도 문화재보호를 위한 대책마련이 선행되어야...숭례문 개방 자체를 탓할 수는 없다. 국보 1호를 시민의 품으로 되돌린다는 취지는 외려 칭찬할 만하다. 문제는 관리다....

600년 역사 간직한 국보1호 숭례문, 잿더미만 남아

시민들은 가던 길을 멈추고 망연자실한 표정으로 검게 타버린 숭례문을 바라보고 있습니다. 숭례문 앞 잔디밭...☞ 숭례문 화재, 발화에서 붕괴까지 ☞ 숭례문, 화재 끝 5시간여 만에 붕괴 ☞ 범행 용의자 최초 제보자 인터뷰 ☞ [오늘의...

국회 문광위, 숭례문 화재 관련 책임자 질타

국회문화관광위원회는 11일 국보 1호 숭례문 화재사고와 관련해 긴급 상임위를 열고 문화관광부,...이 자리에서 한나라당 김학원 의원은 1년 전 문화관광위원회 홈페이지에 올라온 숭례문 근처에서 노숙자들한테 (숭례문에) 불을 지르겠다는...

숭례문 참사, 국회에서 KT텔레캅 도마위

대한민국 보물 1호인 숭례문이 전소된 데에는 저녁 8시 이후 무인경비를 도맡았던 KT텔레캅의 뒤늦은 출동과 작동안 된...국회문화관광위원회(위원장 조배숙)는 11일 오후 3시 긴급회의를 열고 숭례문 참사의 원인을 조사하고 대책을 논의했다....

[포토] 믿을 수 없는 숭례문의 모습

11일 오후 화재로 붕괴된 국보1호 숭례. 서울에서 가장 오래된 목조건물인 숭례문은 10일 저녁 화재가 시작돼 11일 새벽 전소된 후 붕괴되었다. 한 시민이 숭례 휴대폰 카메라로 촬영하고 있다. /사진

마음이 아플 따름..

chewed by Notoo

사용자 삽입 이미지

- 2007년 1월 파주 헤이리 ..

홍대에서 유명했던 (제가 자주 가서 유명할꺼라고 생각합니다.) 갤러리였던 아티누스가 파주 헤이리로 옮겼다는 소식에 예전에 한번 찾아갔더니 아직 개장전이였습니다.

휴가기간때 집에서 잠수중에 드라이브 시켜준다는 말에 낼름 쫓아나가서 간 헤이리에 반가운 소식이 저를 기다리더군요.

아티누스 갤러리가 오픈했습니다. 이건 기쁜 소식이지만 , 마저 소식을 말하자면, 아티누스 건물 자체가 이동한게 맞지만 딸려 있던 갤러리, 찻집, 서점은 같은게 아니라고 합니다. - 오너!! 나한테 거짓말 한거에여? ㅜ.ㅜ

신선한 과일 - 로열 밀크티 - 와인 빙수로 이어지던 그 멋진 콤보는 이제 다시는 맛볼 수 없게 되버렸습니다.

과자 - 계속해서 따뜻한 차 와 바꼈습니다. 뭐 예전의 콤보를 생각하면 정말 한없이 부족하다는 느낌밖에 없지만 , 예전을 생각 안하자면 이정도로도 만족할만 합니다. 무엇보다 좋았던건 아무 사람도 없어서 조용히 이야기 나누기 좋았다는거 그건 정말 행복할만한 기쁨이였습니다.


사용자 삽입 이미지

- 저를 드라이브 시켜준 미녀 아가씨 입니다 후후

+ Recent posts