막대 그래프 만들기, 플래시 차트 소스

플래시 연구소 2008/10/04 10:01
TAG , , , , , , , , ,
오늘 오후에 있을 플래시 스터디 과제인 막대 그래프 만들기에 대한 이해를 돕기 위해 간소화 시킨 플래시 차트 소스를 준비했습니다. 그래프 막대로 사용하기 위해 다섯 가지 색상의 무비클립을 만들었습니다. 차트에 적용할 데이터는 2차원 배열에 담았고 Tween 클래스를 활용해 막대 그래프에 활력을 불어 넣었습니다. 여러가지 Tween 클래스 효과를 실험하기 위해 onEnterFrame 이벤트를 이용해 5가지 다른 스타일을 일정한 시간 간격으로 보여주고 있습니다. 플래시 입문자들은 아래 소스를 수정하고 개선해 보시면 플래시 액션스크립트 학습이 도움이 될 것입니다. 뭐든 직접 해보는 것이 중요하므로 손수 멋진 디자인을 입혀서 자신만의 개성있는 막대 그래프를 만들어보세요.

 

flash_chart.fla

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

var chart_array = Array(
    Array('80','94','70','80','60')
    ,Array('60','100','78','50','80')
    ,Array('90','80','100','75','95')
);

var style_array = Array(
    Strong.easeOut, Elastic.easeOut, Bounce.easeOut, Regular.easeOut, Back.easeOut
);

var menu_max = chart_array.length;
var part_max = chart_array[0].length;
var time_step = 0, style_pos = 0;

function show_chart(set_style){
var i, j, y1, y2, style, mc;
    y1 = 0;
    for (i=0;i<part_max;i++) {
        for (j=0;j<menu_max;j++) {
            mc = this['mc_bar_'+j+'_'+i];
            y2 = chart_array[j][i] * 2;
            style = style_array[set_style];
            new Tween(mc,"_yscale",style,y1,y2,20,false);
        }
    }
}

this.onEnterFrame = function(){
    if (time_step>100) time_step = 0;
    if (time_step==0) {
        show_chart(style_pos);
        style_pos = (style_pos+1)%5;
    }
    time_step ++;
}

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info
이올린에 북마크하기(0) 이올린에 추천하기(0)
No Trackback, No Comment

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

◀ 이전페이지 1 ... 104 105 106 107 108 109 110 111 112 ... 607 다음페이지 ▶