Macromedia Flash MX Kết Hợp Với XML Tạo Đồ Thị Dạng Cột
| Trang 1 | Trang 2 |
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 cột đó là gì, thay đổi số liệu,...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 cột tăng hay giảm, chỉ việc thay đổi số liệu ở file XML 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 4kb 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,... |
Muốn có đồ thị này à? đượ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:
Mở Notepad copy đoạn code XML bên dưới và dán vào Notepad và lưu lại đặt tên là sodothi.xml
<?xml version='1.0' encoding="UTF-8"?>
<do_thi>
<so_bieuthi_XML>2</so_bieuthi_XML>
<so_bieuthi_XML>4</so_bieuthi_XML>
<so_bieuthi_XML>6</so_bieuthi_XML>
<so_bieuthi_XML>8</so_bieuthi_XML>
<so_bieuthi_XML>10</so_bieuthi_XML>
<so_bieuthi_XML>12</so_bieuthi_XML>
<so_bieuthi_XML>14</so_bieuthi_XML>
<so_bieuthi_XML>16</so_bieuthi_XML>
<so_bieuthi_XML>18</so_bieuthi_XML>
<so_bieuthi_XML>20</so_bieuthi_XML>
<so_bieuthi_XML>22</so_bieuthi_XML>
</do_thi>
<!-- XML scripter : Le^ Quang A'nh Hu+ng (c) 2003 -->
* Lưu ý: Ở đây số 2 bạn có thể thay đổi tùy ý, con số này biểu thị tưng ứng với 2 miếng của hình chữ nhật xếp chồng lên nhau và số này sẽ được hiển thị trên cột này, tạo nên 1 cột. Tương tự vậy 4 là của cột thứ 2, 6 của cột thứ 3,... 22 của cột thứ 11. Ngoài ra bạn có thể cắt giảm bớt số cột hay tăng thêm số cột,...
+ Nếu tăng thêm số cột thì copy dòng này <so_bieuthi_XML>22</so_bieuthi_XML>
và thay số 22 thành 23 và dán tiếp theo vào, ngoài ra phải
lưu ý xem số miếng hình chữ nhật tạo ở Flash MX, có đủ không?,...
+ Nếu giảm bớt số cột thì chỉ cần xoá bớt
<so_bieuthi_XML>22</so_bieuthi_XML>,... ở Flash MX thì
hiệu chỉnh lại độ dãn ra của từng cột,...
Bước 2:
Chạy chương trình MacroMedia Flash MX bấm Ctrl+S để lưu lại, đặt tên là dth_cot.fla nằm kề bên file sodothi.xml vừa lưu xong. 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:

Tiếp theo bạn hãy click mouse trái vào biểu tượng
Line Tool (N),
để vẽ trục tung và trục hoành, 2 mũi tên của trục tung & trục hoành bạn có thể
mở Microsoft Word ra vẽ và copy sau đó dán vào là xong!

Sau khi vẽ xong click mouse trái vào Keyframes 15 của Layer 1 bấm F5.
Sau đó bạn hãy click mouse phải vào Layer 1 của TimeLine chọn Insert Layer, bạn sẽ được Layer 2, kéo Layer 2 này xuống dưới Layer 1, bạn sẽ được như hình sau:

Tiếp theo bạn hãy bấm Ctrl+N để mở trang thiết kế mới chọn biểu tượng Rectangle Tool (R), vẽ 1 hình chữ nhật, sau đó chọn biểu tượng Arrow Tool (V), chọn hết hình chữ nhật này, mở bảng Properties chọn kích thước hình chữ nhật W: 60 (ngang), H: 12 (cao), như hình bên dưới: (Tất nhiên hình chữ nhật của tôi sẽ không giống của bạn đâu!)

Sau đó mở menu Insert chọn Create Motion Tween, tiếp theo click mouse trái vào hình chữ nhật, nhìn vào bảng Properties đang để Graphic mở ra chọn Movie Clip, click mouse trái vào <Instance Name> gõ vào bieu_thi1, click mouse trái bấm Ctrl + X (Cut), sau đó bấm Ctrl + F6 chuyễn sang Document đang thiết kế bấm Ctrl + V (dán) vào Layer 2 (Nằm bên ngoài vùng thiết kế)

Tương tự như vậy bạn hãy làm thêm 15 miếng hình chữ nhật như vậy với cùng kích thước, nhưng "bieu_thi1" thì thay bằng "bieu_thi2", "bieu_thi3",..."bieu_thi16", đồng thời màu sắc của từng miếng khác nhau.
Sau khi bạn tạo xong 16 miếng hình chữ nhật bạn hãy
bấm Ctrl+N, click mouse trái vào biểu tượng
Text Tool (T),
nhập chữ "load", nhìn vào bảng Properties ở Var gõ vào:
dua_so_tu_file_xml

(ngoài ra nếu bạn không muốn số hiển thị trên đầu các cột thì đừng gõ chữ load và cũng không gán dua_so_tu_file_xml, nhưng những bước kế tiếp phải thực hiện)
| Trang 1 | Trang 2 |