Welcome to Le Hu'ng (ahung@hcmpt.vnn.vn

Macromedia Flash MX Kết Hợp Với Microsoft Excel Tạo Đồ Thị Dạng Đường Kẻ

Khi có các dữ liệu số cần trình bày với khách hàng hay đối tác, ta thường muốn hiển thị một số yếu tố và số liệu dưới dạng đồ thị. Đồ thị là một biểu thị đồ họa về các phạm trù thông tin được thiết kế để chuyển thể các hàng và cột dữ liệu thành các ảnh có ý nghĩa. Đồ thị có thể giúp ta định danh các xu hướng số mà nếu như để trong các bảng tính sẽ khó phân biệt và so sánh, ngoài ra đồ thị cũng có thể làm tăng sức hấp dẫn cho một phiên trình bày quan trọng.

Bên dưới là tôi trình bày một đồ thị cơ bản, ngoài ra bạn có thể thêm vào nhiều thứ như chú thích các đường kẻ đó là gì, thay đổi số liệu, dấu vạch tỉ lệ,...Nói chung tùy theo nhu cầu công việc của bạn đang cần!

Khi bạn có dữ liệu là số muốn biểu thị bằng đồ thị, khi cần thay đổi các đường kẻ lên hay xuống, chỉ việc thay đổi số liệu ở file Excel thì Flash sẽ tự động hiểu và thay đổi theo ý bạn mong muốn. Nhưng khi nhúng vào web chưa tới 1kb so với việc bạn dùng hình ảnh đưa vào với kích thước cực kỳ lớn, mà thay đổi dữ liệu số lại rất khó khăn,...

Muốn được như vậy bạn hãy cùng tôi tìm hiểu và thiết kế thông qua 2 bước chính như sau:

Bước 1:

Chạy chương trình Microsoft Excel nhập vào như hình sau:

	A	B	C
1	17.5	3.6	25.2
2	30.2	17.3	13.1
3	19.5	13.3	9.1
4	27.4	6.3	16.2
5	7	14.3	10.3
6	14.9	5.3	21
7	13	23.3	32

17.5 : là biểu thị đường kẻ màu đỏ, nếu cho 40.5 thì đường kẻ màu đỏ này sẽ vượt khỏi vạch 30 của trục tung,...

30.2 : là tọa độ gấp khúc thứ hai của đường kẻ màu đỏ.

19.5 : là tọa độ gấp khúc thứ ba của đường kẻ màu đỏ.

27.4 : là tọa độ gấp khúc thứ tư của đường kẻ màu đỏ.

7 : là tọa độ gấp khúc thứ năm của đường kẻ màu đỏ.

14.9 : là tọa độ gấp khúc thứ sáu của đường kẻ màu đỏ.

13 : là tọa độ gấp khúc thứ bảy của đường kẻ màu đỏ.

Tương tự vậy cho 2 cột kế tiếp của "B" và "C" trong Excel

3.6 là biểu thị đường kẻ màu vàng, nếu cho 40.6 thì đường kẻ màu vàng này sẽ vượt khỏi vạch 30 của trục tung

25.2 là biểu thị đường kẻ màu xanh nước biển, nếu cho 40.2 thì đường kẻ màu xanh nước biển này sẽ vượt khỏi vạch 30 của trục tung

sau khi xong lưu lại đặt tên là dl_dothi.csv (lưu ý đuôi đặt là .csv)

Bước 2:

Chạy phần mềm MacroMedia Flash MX bấm Ctrl+S để lưu lại, đặt tên là dothi.fla nằm kề bên file dl_dothi.csv vừa lưu bên trên. Mở menu Window chọn Properties (Ctrl + F3), sau đó click mouse trái vào hộp màu ở Background: để chọn màu nền (tùy ý bạn chọn màu nào cũng được) như hình sau:

Click mouse trái vào size: sẽ hiển thị ra hộp thoại "Document Properties" và hiệu chỉnh kích thước hoặc Background như mong muốn cho movie đang chuẩn bị thiết kế. Ở đây tôi chọn kích thước (420 Width x 120 Height)px.

Tiếp tục Click mouse trái vào biểu tượng Line tool (N), vẽ trục tung & trục hoành, tiếp theo lick mouse trái vào biểu tượng Text tool (T) gõ vào những số trên trục tung & trục hoành vừa vẽ, bạn hãy làm theo như hình bên dưới:

Sau khi xong, click mouse trái vào keyframe 1 của Timeline.

Mở menu Insert chọn Create Motion Tween, tiếp theo click mouse trái vào đồ thị (hình vừa vẽ bên trên), nhìn vào bảng Properties, thấy đang để là Graphic, mở ra và chọn Movie Clip, như hình sau:

Sau đó, click mouse trái trở lại vào keyframe 1 của Timeline. Mở menu Windows chọn Actions (F9) để mở bảng "Actions – Frame" ra, nếu đã mở rồi thì thôi, nếu bấm F9 nó sẽ đóng lại à nghe! Click mouse trái vào biểu tượng bên phải của "Actions-Frame" sẽ xuất hiện menu mở ra chọn "Expert Mode", copy câu lệnh bên dưới vào Actions-Frame, hoặc gõ vào cũng được!

// Bắt đầu

stop();

Bạn có thể sử dụng kịch bản này hoặc tách những kịch bản này cho mục đích của bạn và sửa lại nó theo nhu cầu của công việc bạn đang cần.

Tạo nên sự tự do và thuận lợi duy nhất cho người dùng.

Việc vẽ đồ thị này là nét đặc trưng mà trong sản phẩm của MacroMedia Flash không thấy đề cập đến!

// Kết thúc

Tiếp tục bạn hãy double click (click mouse trái 2 lần liên tiếp) vào đồ thị, bạn hãy click mouse trái vào Keyframes 5 bấm F5.

- Tiếp theo click mouse phải vào Layer 1 của Timeline chọn Insert Layer

Bạn sẽ được Layer 2, bấm chết mouse trái vào Layer 2 này kéo xuống dưới Layer 1. Sau đó Click mouse trái vào Keyframe 2 của Layer 2 bấm F6 mở bảng "Actions – Frame" và copy đoạn code bên dưới dán vào "Actions - Frame"

csv = new LoadVars();
csv.load("dl_dothi.csv");
/*
Đang nạp file ...

Kiểm tra nó trước khi đi vào frame kế tiếp. Đây là con đường duy nhất để nó làm việc!
*/

Click mouse trái vào Keyframes 3 của Layer 2 bấm F6 (2 lần), nó sẽ nhảy đến Keyframes 4 mở bảng "Actions – Frame" và copy đoạn code bên dưới dán vào "Actions - Frame"

if (csv.loaded) {
// Nếu dữ liệu đã được nạp
nextFrame();
} else {
// quay lại keyframes 3
gotoAndPlay(3);
}

Kế tiếp bạn hãy Click mouse trái vào Keyframes 5 của Layer 2 bấm F6 mở bảng "Actions – Frame" và copy đoạn code bên dưới dán vào "Actions - Frame"

// Bắt đầu
unescaped = unescape(csv.toString());
// unescaped bao gồm bên trong của "dl_dothi.csv"
sep_lines = unescaped.split("\n");
// sep_lines giá trị của những hàng ngang; "\n" giá trị đường được dùng cho việc tách ra của những hàng ngang
gra_col = new Array("0xff6666", "0xffff00", "0x00aaff");
//gra_col màu của đường biểu thị (những ký hiệu 0xffff00,... này là mã màu)
for (i=0; i<7; i++) {
cell = sep_lines[i].split(",");
// ... cell values
for (j=0; j<3; j++) {
// 3 cột hoặc graphs
if (i == 0) {
// Cho thời gian đầu tiên ... chạy với vài FlashMX API những hàm vẽ năng động
this.createEmptyMovieClip("gra_"+j, 100+j);
with (this["gra_"+j]) {
lineStyle(1, gra_col[j], 100);
moveTo(0, -parseFloat(cell[j]));
}
} else {
// continue to draw the lines
this["gra_"+j].lineTo(i*30, -parseFloat(cell[j]));
}
}
}
stop();

// Kết thúc

Lúc này bạn chỉ cần bấm Ctrl + S để lưu lại và bấm Ctrl+Enter để chạy thử được rồi đó. Hoặc bạn có thể bấm Ctrl+F12 để đưa vào Web.

Sau khi tạo xong có thể bạn sẽ thấy sao đồ thị của mình quá nhỏ và các trục tung & hoành không nằm gần các đường kẻ, bạn có thể kéo trục tung & trục hoành lại gần đường kẻ mà bạn cho là nó nằm ở đó & bấm Ctrl+Enter chạy thử nếu thấy chưa nằm gần thì hiệu chỉnh tiếp.

Sau khi đã hiệu chỉnh các trục tung & trục hoành nằm ăn khớp như minh họa của tôi bên trên, bạn muốn đồ thị này lớn lên thì click mouse trái vào Scene 1 hay mũi tên màu xanh nước biển như hình bên dưới:

Bạn click mouse trái vào biểu tượng Free transform tool (Q), lúc này biểu đồ của bạn sẽ cho phép bạn kéo lớn nhỏ tùy ý,...

Vui lòng góp ý về bài viết này xin liên hệ:

Lê Quang Ánh Hưng

256 Tran Van Dang Street, District 3, Ho Chi Minh City, Vietnam.

E-Mail: lehunghp@yahoo.com hoặc ahung@hcmpt.vnn.vn (khi gửi mail vui lòng đừng bỏ dấu Tiếng Việt)

Homepage: http://www25.brinkster.com/lehung/

hoặc : http://ahung.cjb.net

Chúc Bạn & Gia Đình nhiều sức khỏe.