이미지 슬라이더는 좁은 공간에 좀더 많은 것을 보기 좋게 보여주기 위해 유용한 유저 인터페이스입니다. 아래 소개하는 내용은 이번 플래시 스터디 과제를 해결하기 위한 힌트이기도 하며 플래시 액션스크립트 초급자를 위한 학습용 플래시 소스이기도 합니다. 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
이올린에 북마크하기(0) 이올린에 추천하기(0)

트랙백 주소 :: http://hompy.info/trackback/507

댓글을 달아 주세요