이미지 슬라이더는 좁은 공간에 좀더 많은 것을 보기 좋게 보여주기 위해 유용한 유저 인터페이스입니다. 아래 소개하는 내용은 이번 플래시 스터디 과제를 해결하기 위한 힌트이기도 하며 플래시 액션스크립트 초급자를 위한 학습용 플래시 소스이기도 합니다. Tween 클래스를 사용해서 매끄러운 배너 이동에 적용했으며 주기적으로 반복해서 함수를 실행하게 해주는 setInterval 함수를 이용해 일정 시간 간격으로 배너를 교체하도록 하였습니다. 그리고 마우스를 배너 위에 올렸을 경우 clearInterval 함수로 반복하는 것을 중지 하도록 했고 마우스가 배너 위를 벗어났을 때 다시 setInterval 함수를 이용해 다시 반복 하도록 했습니다. 배너의 갯수(menu_max), 배너의 폭(menu_width), 이동 시간 간격(show_time), 어떤 스타일로 이동할 것인지(show_style)를 변경할 수 있는 변수도 적용하였습니다.
백번 설명하는 것 보다 한번 직접 해보는 것이 플래시 액션스크립트 학습의 지름길입니다. 자신의 필요나 구미에 맞게 아래 플래시 소스를 수정 보완 해보시면 학습에 도움이 될 것입니다. 이렇게 만들어진 플래시는 블로그나 홈페이지 배너로 사용하면 보기 좋을 것이며 실제 많이 사용하고 있기도 합니다.







import mx.transitions.Tween;
import mx.transitions.easing.*;

var menu_pos = 0;
var menu_max = 4;
var menu_width = 200;
var show_style = 0;
var show_time = 4000;
var
menu_distance = menu_width * -1;
var time_id = setInterval(_root,"do_next", show_time);
mc_screen.onRollOver = function (){
    clearInterval(time_id);
}
mc_screen.onRollOut = function (){
    time_id = setInterval(_root,"do_next", show_time);
}
mc_screen.onRelease = function (){
    getURL("http://hompy.info/507","_blank");
}
function do_next(){
    var pos1, pos2, x1, x2;
    pos1 = menu_pos;
    menu_pos = menu_pos + 1;
    pos2 = menu_pos;
    x1 = pos1 * menu_distance;
    x2 = pos2 * menu_distance;
    menu_pos = (menu_pos) % menu_max;
    switch (show_style){
        case 1: new Tween(mc_screen,"_x",Elastic.easeOut,x1,x2,20,false); break;
        case 2: new Tween(mc_screen,"_x",Bounce.easeOut,x1,x2,20,false); break;
        case 3: new Tween(mc_screen,"_x",Regular.easeOut,x1,x2,20,false); break;
        case 4: new Tween(mc_screen,"_x",Back.easeOut,x1,x2,20,false); break;
        default: new Tween(mc_screen,"_x",Strong.easeOut,x1,x2,20,false); break;
    }
    trace (menu_pos+":"+x1+"->"+x2);
}

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info
2008/10/01 08:23 2008/10/01 08:23

트랙백 주소 :: 이 글에는 트랙백을 보낼 수 없습니다

댓글을 달아 주세요

  1. 은선 2013/02/05 13:12  댓글주소  수정/삭제  댓글쓰기

    각 배너별 다르게 링크 거는 법이나.....
    링크부분을 빼고싶은데..그건 어떻해야 하나요?ㅠ

  2. jack 2012/07/17 17:18  댓글주소  수정/삭제  댓글쓰기

    너무 좋은데요...각 배너별로 다르게 링크를 걸려면 어떻게 하면 좋을까요? @.@

  3. 임채경 2010/06/23 13:46  댓글주소  수정/삭제  댓글쓰기

    감사합니다!

  4. 학생 2009/04/17 21:33  댓글주소  수정/삭제  댓글쓰기

    굳!
    아주 유용합니다.