Bùng cháy | Trực quan hóa dữ liệu cho Web

Flare giúp dễ dàng tạo trực quan hóa dữ liệu tương tác

Để bắt đầu hình dung của riêng bạn, tải flare và làm việc thông qua hướng dẫn bên dưới. Cần sự giúp đỡ nhiều hơn? Tham quan diễn đàn trợ giúp (bạn sẽ cần một SourceForge đăng nhập để đăng bài).

Flare là phần mềm mã nguồn mở được phát hành theo giấy phép BSD, có nghĩa là nó có thể được triển khai và sửa đổi miễn phí (và thậm chí được bán với giá $$). Thiết kế của Flare được điều chỉnh từ prefuse tiền nhiệm của nó, một bộ công cụ trực quan hóa cho Java.

Ứng dụng

Thông báo

• 2010.10.07: Sự phát triển của Flare đã được mở ra cho cộng đồng và nguồn đã được chuyển từ SourceForge sang một ngôi nhà mới trên GitHub. bùng phát 2009.01.24 vẫn là bản phát hành chính thức cuối cùng và (ít nhất là bây giờ) các hướng dẫn và tài liệu phản ánh điều đó. Phiên bản phát triển trên GitHub hiện có hỗ trợ tốt hơn cho Flash Player 10 cũng như nhiều bản sửa lỗi và thay đổi nhỏ khác.
• 2009.01.24: bùng phát 2009.01.24 đã được phát hành. Đây là bản phát hành bảo trì với một số bản sửa lỗi và cập nhật. Xem ghi chú phát hành để biết thêm chi tiết. Đây là dự kiến ​​cuối cùng được phát hành cho Flash Player 9 - các phiên bản trong tương lai sẽ chuyển sang phiên bản 10.
• 2008.07.30: bùng phát 2008.07.29 đã được phát hành. Đây là một bản phát hành chính giới thiệu nhiều tính năng mới và cải tiến kiến ​​trúc. Xem ghi chú phát hành để biết thêm chi tiết.
• 2008.07.30: bùng phát 2008.08.08 đã được phát hành. Bản phát hành này bao gồm hỗ trợ chú giải được cải tiến, chuyển đổi được đặt tên, sửa lỗi và tái cấu trúc để giảm sự ghép nối và hợp nhất các lớp tiện ích. Xem ghi chú phát hành để biết thêm chi tiết.

Hướng Dẫn

Hướng dẫn từng bước để học ActionScript và Flare.

Bắt đầu

Bước đầu tiên là thiết lập các công cụ phát triển của bạn.

1. Thiết lập một môi trường phát triển flash hoạt động. Có hai cách tiếp cận. Chúng tôi khuyên bạn nên sử dụng cách đầu tiên vì sự đơn giản, nhưng những người dùng nâng cao hơn được hoan nghênh sử dụng cách tiếp cận thứ hai.
   • Tùy chọn 1 (đơn giản hơn): Cài đặt Adobe Flex Builder.
     • Đây là một môi trường phát triển đầy đủ cho các ứng dụng ActionScript / Flex. Nó có sẵn cho tất cả các nền tảng chính (Windows, Mac, Unix). Người dùng đã sử dụng IDE Eclipse cũng có thể cài đặt Flex Builder như một trình cắm thêm Eclipse.
     • Lưu ý khi sử dụng Flex Builder là nó là phần mềm thương mại và sẽ chỉ hoạt động trong thời gian dùng thử có giới hạn. Tuy nhiên, Adobe cung cấp giấy phép Flex Builder miễn phí cho sinh viên, giảng viên và nhân viên đại học.
   • Tùy chọn 2 (phức tạp hơn): Cài đặt SDK Flex miễn phí
     • Thao tác này sẽ cài đặt các trình biên dịch ActionScript / Flex cơ bản: mxmlc và compc. Sau đó, bạn có thể thiết lập môi trường xây dựng của riêng mình, chẳng hạn như sử dụng make or ant xây dựng hệ thống. Flare được đóng gói với một build.xml tập tin để sử dụng với Kiến Apache xây dựng hệ thống. Sau khi kiến ​​được cài đặt, chỉ cần mở build.xml tệp trong trình soạn thảo văn bản, hãy thay đổi vài dòng đầu tiên để trỏ đến Flex của bạn SDK cài đặt, và sau đó sử dụng ant để biên dịch các thư viện. Chúng tôi sử dụng các nhiệm vụ kiến ​​của Adobe Labs để phát triển Flex.
     • Ưu điểm của phương pháp này là tất cả phần mềm đều miễn phí và sẽ không hết hạn đối với bạn. Tuy nhiên, bạn bị mất các tính năng như biên dịch tự động, quản lý dự án và tự động hoàn thành do Flex Builder cung cấp.
2. Tải xuống thư viện pháo sáng prefuse.
   • Tải xuống là một tệp zip chứa một tập hợp các dự án thư viện ActionScript. Giải nén các tệp vào thư mục không gian làm việc chính của bạn nếu bạn đang sử dụng Flex Builder. Trong phần hướng dẫn, chúng tôi sẽ nhập chúng vào Flex Builder và sử dụng chúng để xây dựng hình ảnh trực quan!
   • Phần mềm hiện là phiên bản alpha, vì vậy dự kiến ​​sẽ có một số lỗi và hạn chế. Chúng tôi sẽ khắc phục sự cố ngay khi có thể và liên kết ở trên sẽ luôn trỏ đến phiên bản mới nhất.

Giới thiệu về Flash và ActionScript 3

Flash là một môi trường tuyệt vời cho đồ họa tương tác và với sự bổ sung gần đây của ngôn ngữ lập trình ActionScript 3, nó đã trở nên mạnh mẽ và hiệu quả hơn rất nhiều. Mặc dù phần giới thiệu đầy đủ về AS3 nằm ngoài phạm vi của hướng dẫn này, nhưng đây là một số tài nguyên bạn sẽ thấy hữu ích:

• Adobe cung cấp Tổng quan về AS3, với các liên kết đến các tài nguyên bổ sung.
• ActionScript 3 cần thiết của Colin Moock từ nhà xuất bản O'Reilly là một cuốn sách tuyệt vời để giúp bạn bắt đầu. Bạn có thể truy cập nó trực tuyến tại đây (một số tổ chức, chẳng hạn như các trường đại học, cung cấp quyền truy cập miễn phí).
• Tham chiếu API Adobe Flex là vô giá để hiểu các lớp và phương pháp khác nhau có sẵn. Chúng tôi sẽ chỉ tập trung vào các lớp học trong flash.* gói.

Hướng dẫn này giả định sự quen thuộc cơ bản với cú pháp và kiểu ActionScript, cũng như các khái niệm về lập trình hướng đối tượng.

Phần 1: DisplayObjects

Giới thiệu

Flash mô hình hóa cảnh trực quan 2D bằng cách sử dụng khung cảnh. Các đối tượng trực quan được tổ chức theo một hệ thống phân cấp, với các đối tượng con được xác định trong không gian tọa độ của cha. Bạn sẽ thường thấy cảnh này được gọi là danh sách hiển thị trong cả tài liệu của Adobe và sách về lập trình Flash.
Nút ở đầu danh sách hiển thị luôn là Stage vật. Sân khấu luôn có một và chỉ một đứa trẻ. Đây được gọi là rootvà tất cả các mục trực quan đều nằm bên dưới thư mục gốc. Thông thường, gốc là ứng dụng Flash thực tế của bạn. Chúng tôi sẽ quay lại vấn đề này sớm.
Tất cả các mục trực quan có thể được thêm vào danh sách hiển thị là các phiên bản của DisplayObject lớp học. Các lớp con của DisplayObject bao gồm Bitmap (đối với hình ảnh), TextField (cho các vùng văn bản tương tác), và Video (nghĩ YouTube). Tuy nhiên, các trường hợp phổ biến nhất là Sprite và Shape các lớp học. Để tham khảo, hầu hết các lớp này có thể được tìm thấy trong flash.display gói (mặc dù cuối cùng bạn có thể sẽ tìm thấy flash.text gói sử dụng, quá).
Sản phẩm Sprite lớp là đối tượng hình ảnh chung, hữu ích nhất được Flash Player sử dụng. Sprites là các đối tượng trực quan chứa cả nội dung bản vẽ và có thể đóng vai trò như một vùng chứa cho các nút con trong danh sách hiển thị ( Sprite lớp con phân lớp flash.display.DisplayObjectContainer lớp học). Ngược lại, Shape lớp có thể chứa nội dung bản vẽ, nhưng không thể chứa các nút con. Do đó, Shapes sử dụng ít bộ nhớ hơn nhưng lại kém linh hoạt hơn nhiều. Để đơn giản, chúng tôi sẽ tập trung vào Sprites trong hướng dẫn này.

Tạo một ứng dụng mới

Đầu tiên, hãy tạo một ứng dụng Flash mới. Để thực hiện việc này, hãy mở Flex Builder và đảm bảo rằng bạn đang ở trong phối cảnh “Phát triển linh hoạt” (thường đạt được bằng cách nhấp vào biểu tượng “Fx” màu đen và trắng ở phía trên bên phải).
Trong ngăn “Bộ điều hướng” ở bên trái, nhấp chuột phải vào màn hình và chọn “Mới> Dự án ActionScript”. Trong hộp thoại hiện ra, nhập “Hướng dẫn” làm tên dự án, sau đó nhấp vào “Kết thúc”. Điều này sẽ tạo ra một dự án mới cho bạn.
Bây giờ bạn sẽ thấy thư mục “Hướng dẫn” trong ngăn “Bộ điều hướng”. Trong thư mục này, bạn sẽ thấy một tệp có tên “Tutorial.as”. Đây là tệp ứng dụng chính của bạn. Mở nó, nếu nó chưa được mở.
Bên trong tệp, bạn sẽ thấy dàn giáo cơ bản cho lớp này:

gói {import flash.display.Sprite; public class Hướng dẫn mở rộng Sprite {public function Tutorial () {}}}

Lưu ý rằng lớp này mở rộng Sprite lớp học. Bởi vì đây là lớp ứng dụng chính của chúng tôi, khi chúng tôi chạy ứng dụng, một phiên bản của Tutorial lớp sẽ tự động được thêm vào danh sách hiển thị dưới dạng root (đứa con duy nhất của Stage).
Cũng lưu ý rằng một hàm tạo đã được tạo tự động. Hàm tạo này sẽ được gọi khi ứng dụng khởi chạy. Đối với những người quen thuộc với các ngôn ngữ lập trình như C, C ++ hoặc Java, hàm tạo cho lớp ứng dụng hoạt động giống như một main hoạt động trong các ngôn ngữ khác.
Với giàn giáo ứng dụng mới này, chúng ta có thể bắt đầu chơi với các đối tượng trực quan. Tuy nhiên, có một điều chúng tôi muốn làm trước. Thêm một dòng mới ngay phía trên khai báo lớp (”public class Tutorial…”) Dòng nói:

[SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")]

Dòng này xác định cài đặt mặc định cho ứng dụng của bạn (được biên dịch và lưu dưới dạng tệp .swf trong thư mục "bin" của dự án). Ở trên, chúng tôi đặt kích thước, màu nền và tốc độ khung hình mục tiêu (tính bằng khung hình trên giây) cho ứng dụng của mình.

sprites

Giống như tất cả DisplayObjects, Sprite hỗ trợ một số thuộc tính trực quan ngay lập tức. Điều này bao gồm x, y, scaleX, scaleY, rotationvà alpha tính chất. Những điều này tương ứng thay đổi vị trí, kích thước, hướng và độ trong suốt của một sprite (và tất cả các con của nó! Hãy nhớ rằng, chúng tôi đang sử dụng một cảnh ở đây).
Tuy nhiên, những giá trị này chưa có nhiều ý nghĩa, vì các sprites không chứa bất kỳ thứ gì theo mặc định. Chúng tôi sẽ bắt đầu bằng cách vẽ nội dung của riêng chúng tôi.
Mỗi Sprite cũng có một graphics bất động sản. Chúng ta có thể sử dụng cái này để vẽ đồ họa cho Sprite. Các graphics tài sản là một ví dụ của flash.display.Graphics lớp, cung cấp một số lệnh vẽ vector.
Trong ví dụ dưới đây, chúng tôi thực hiện một số điều.

• Đầu tiên, chúng tôi tạo một Sprite.
• Thứ hai, chúng tôi sử dụng sprite's graphics để vẽ một vòng tròn với tô màu xám và đường viền màu đen.
  • beginFill đặt màu và kiểu tô hiện tại. Đối số đầu tiên là màu sắc, trong ký hiệu hex và đối số thứ hai là giá trị alpha, nằm trong khoảng từ 0 đối với hoàn toàn trong suốt đến 1 đối với hoàn toàn không trong suốt.
  • lineStyle đặt màu và kiểu nét hiện tại. Đối số đầu tiên là độ rộng dòng, đối số thứ hai là màu sắc.
  • drawCircle vẽ một vòng tròn bán kính 10 tại điểm 0,0 trong không gian tọa độ của sprite của chúng ta.
• Thứ ba, chúng tôi thêm sprite dưới dạng con của ứng dụng chính của chúng tôi (a Tutorial ma).
• Thứ tư, chúng tôi đặt x và y vị trí của sprite của chúng tôi.
• Thứ năm, chúng tôi thêm một số đầu ra gỡ lỗi. trace in một chuỗi vào bảng điều khiển. Đầu ra này chỉ hiển thị khi chạy ứng dụng ở chế độ "gỡ lỗi".

Đây là mã:

gói {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] public class Hướng dẫn mở rộng Sprite {public function Tutorial () {var sprite: Sprite = new Sprite () ; sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); this.addChild (sprite); sprite.x = 50; sprite.y = 50; trace ("sprite của chúng tôi tại:" + sprite.x + "," + sprite.y); }}}

Chạy ứng dụng (nhấp chuột phải vào “Tutorial.as” và chọn “Run As> Flex Application”). Bạn sẽ thấy một vòng tròn màu xám với đường viền màu đen ở góc trên bên trái, tập trung vào điểm 50, 50. Nếu bạn chạy ứng dụng ở chế độ gỡ lỗi (chọn “Debug As> Flex Application”), bạn cũng sẽ thấy chuỗi “của chúng tôi sprite ở: 50, 50 ”trong bảng điều khiển đầu ra.

Sprites lồng nhau

Bây giờ hãy làm cho cảnh của chúng ta thú vị hơn một chút. Hãy bắt đầu bằng cách chuyển mã tạo Sprite của chúng ta sang một phương thức mới. Chúng tôi sẽ thêm phương thức này vào lớp của mình:

 hàm private createCircle (x: Number, y: Number): Sprite {var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); sprite.x = x; sprite.y = y; trả về sprite; }

Tiếp theo, chúng tôi thay thế mã trong hàm tạo của chúng tôi. Đầu tiên, chúng tôi tạo một sprite mới có tên là container mà chúng tôi sẽ sử dụng để chứa một bộ sưu tập các vòng kết nối. Chúng tôi đặt nó ở trung tâm của sân khấu của chúng tôi. Thứ hai, chúng tôi sử dụng một vòng lặp để tạo ra một loạt các vòng tròn. Ở đây, chúng tôi xếp các vòng tròn đối xứng xung quanh điểm 0,0 của vùng chứa mẹ. Hàm tạo mới của chúng tôi bây giờ trông giống như sau:

 public function Tutorial () {var container: Sprite = new Sprite (); thùng chứa.x = 400; containerr.y = 300; this.addChild (vùng chứa); for (var i: int = 0; i <10; ++ i) {var x: Number = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); containerner.addChild (createCircle (x, 0)); }}

Chạy phiên bản mới của ứng dụng. Bạn sẽ thấy một dòng gồm mười vòng tròn ở giữa ứng dụng.
Bây giờ chúng tôi có thể sửa đổi vùng chứa để cập nhật tất cả các vòng kết nối bên trong nó. Thử chơi với việc đặt các biến trực quan khác nhau trên mô hình vùng chứa. Ví dụ: sửa đổi x, y, scaleX, scaleY, rotationvà alpha tài sản.

chủ đề khác

Bạn có thể làm được nhiều việc hơn với các tùy chọn cơ bản mà Flash cung cấp. Thật không may, chúng hơi vượt quá những gì chúng ta có thời gian ở đây. Một số điều cần khám phá bao gồm bộ lọc hình ảnh (xem flash.filters gói), cho phép bạn thêm hiệu ứng hình ảnh để hiển thị các đối tượng bằng cách sử dụng filters tài sản và các tùy chọn khác nhau có sẵn trong flash.display.Graphics lớp, bao gồm các kiểu tô và đường kẻ, và nhiều quy trình vẽ 2D khác.

Phần 2: Ảnh động

Bây giờ chúng ta có thể tạo ra các đối tượng trực quan, đã đến lúc bắt đầu tạo cho chúng một sức sống. Flare bao gồm flare.animate gói để giúp thực hiện điều này dễ dàng. Đầu tiên, chúng ta cần nhập các thư viện flare để sử dụng trong Flex Builder.

Nhập thư viện

Trước khi tiếp tục, hãy đảm bảo rằng bạn đã tải các thư viện flare dưới dạng các dự án trong Flex Builder. Bạn hẳn đã giải nén các tệp flare vào thư mục không gian làm việc Flex Builder chính của mình. Bước tiếp theo là nhập chúng vào môi trường Flex Builder:

• Đảm bảo rằng bạn đang ở trong quan điểm “Phát triển linh hoạt”.
• Nhấp chuột phải vào ngăn điều hướng ở bên trái.
• Chọn “Nhập…” trong menu bật lên.
• Trong hộp thoại, chọn “Chung> Dự án hiện có vào không gian làm việc” và nhấp vào nút “Tiếp theo”.
• Sử dụng tiện ích con “Chọn thư mục gốc” để điều hướng đến thư mục không gian làm việc Flex Builder của bạn
• Bây giờ bạn sẽ thấy các dự án bùng phát được liệt kê trong bảng “Dự án:”.
• Chọn dự án “flare” và “flare.demos” rồi nhấp vào nút “Hoàn tất”.

Bây giờ bạn sẽ thấy các dự án bùng phát trong ngăn Bộ điều hướng. Bây giờ bạn có thể duyệt mã nguồn cho từng thư viện và các bản trình diễn.

Tổng quan về thư viện pháo sáng

Dưới đây là tổng quan nhanh về bộ công cụ pháo sáng. Bên trong flare hãy xem bên trong thư mục “src / flare”. Bạn sẽ tìm thấy một số gói cung cấp các tính năng khác nhau:

• analytics: toán tử để tính toán thống kê và phân tích dữ liệu
• animate: công cụ để tạo hoạt ảnh
• data: phương pháp đọc và ghi tập dữ liệu
• display: DisplayObject loại mở rộng những loại được cung cấp bởi flash.display
• flex: một trình bao bọc để nhúng trực quan hóa Flare vào các ứng dụng Flex
• physics: một công cụ vật lý cho các hiệu ứng vật lý hoặc bố cục hướng lực
• query: một bộ xử lý truy vấn cho các đối tượng ActionScript
• scale: các lớp để xử lý các thang đo dữ liệu, chẳng hạn như thang đo tuyến tính, nhật ký và thời gian
• util: một tập hợp các lớp tiện ích cung cấp các chức năng thường cần thiết
• vis: các thành phần và toán tử trực quan hóa ngọn lửa

Ngoài ra còn có flare.demos dự án cung cấp một số ví dụ về cách tạo các thành phần Flare.

Nhập thư viện trong một dự án khác

Để sử dụng flare trong các dự án của riêng bạn, bạn sẽ cần cập nhật cài đặt dự án của mình. Đây là cách để làm điều đó:

1. Trong ngăn Bộ điều hướng, nhấp chuột phải vào thư mục trên cùng của dự án "Hướng dẫn"
2. Nhấp vào "Thuộc tính" trong menu ngữ cảnh
3. Trong hộp thoại hiện ra, nhấp vào “Đường dẫn xây dựng ActionScript” trong bảng điều khiển bên trái (nó phải là mục thứ 3 từ trên cùng)
4. Nhấp vào tab "Đường dẫn thư viện" trong bảng điều khiển bên phải
5. Nhấp vào nút "Thêm dự án"
6. Bây giờ bạn sẽ thấy một danh sách các dự án, bao gồm cả flare.
7. Chọn “flare” và sau đó nhấp vào “OK”

Bây giờ bạn đã thêm các thư viện flare vào dự án của mình và có thể sử dụng bất kỳ lớp nào mà nó cung cấp.
Một điều cần lưu ý về trình biên dịch Flex - theo mặc định, nó chỉ bao gồm các lớp mà bạn thực sự sử dụng trong ứng dụng của mình. Vì vậy, ngay cả khi bạn nhập một thư viện rất lớn, kích thước của tệp .swf cuối cùng của bạn vẫn có thể khá nhỏ. Tuy nhiên, hãy cẩn thận rằng điều này có thể gây ra sự cố nếu bạn sử dụng phản chiếu để thực hiện tải lớp động trong ứng dụng của mình (một tính năng nâng cao hơn không được đề cập trong hướng dẫn này).

Hoạt ảnh cơ bản: Tween, Sequence và Parallel

Ok, bây giờ hãy tạo hiệu ứng! Các flare.animate.Transition lớp là lớp cơ sở cho tất cả các hoạt ảnh. Các lớp con quan trọng của Transition là Tween, Sequencevà Parallel chuyển tiếp. Tweens được sử dụng để tạo hiệu ứng cho các thuộc tính của một đối tượng. Chuỗi được sử dụng để chạy một loạt các hoạt ảnh theo thứ tự. Chuyển tiếp song song chạy một tập hợp các chuyển đổi đồng thời. Hãy bắt đầu với Tween.

Thuộc tính đối tượng Tweening

Cơ bản của lớp Tween rất đơn giản: chúng ta lấy một đối tượng, đưa ra một tập hợp các giá trị thuộc tính mà chúng ta muốn thay đổi theo thời gian và chỉ định khoảng thời gian cho sự thay đổi đó. Sử dụng ứng dụng Hướng dẫn từ Phần 1, hãy xoay đối tượng vùng chứa. Thêm dòng sau vào cuối hàm tạo lớp Hướng dẫn:

 var tween: Tween = new Tween (container, 3, {xoay: 360}); tween.play ();

Ngoài ra, hãy đảm bảo rằng bạn có một câu lệnh nhập mới ở đầu lớp của mình, để trình biên dịch biết bạn đang nói gì. Thêm cái này vào danh sách hàng nhập:

 nhập flare.animate.Tween;

(LƯU Ý: đôi khi Flex Builder sẽ tự động thêm câu lệnh nhập cho bạn khi bạn nhập tên lớp mới. Nếu không, một kỹ thuật khác là đặt con trỏ văn bản tại cuối cùng của tên lớp mới và nhập “Ctrl-Space” - thao tác này sẽ tạo một lần nhập mới cho lớp cho bạn.)
Bây giờ hãy chạy ứng dụng của bạn – các điểm sẽ xoay theo hình tròn trong khoảng thời gian 3 giây.
Đây là những gì mà hàm tạo Tween đang làm:

• Đối số đầu tiên là đối tượng có giá trị phải được điều chỉnh
• Đối số thứ hai là độ dài của hoạt ảnh, tính bằng giây
• Đối số thứ ba là một đối tượng Đối tượng liệt kê các thuộc tính để tạo hoạt ảnh và giá trị mục tiêu của chúng.
  • Tên thuộc tính phải khớp chính xác với các thuộc tính của đối tượng đầu vào.
  • Thuộc tính lồng nhau được phép, nhưng phải được đặt trong dấu ngoặc kép. Ví dụ, {“data.profit”:50} là đầu vào hợp pháp nếu đối tượng đầu vào có thuộc tính có tên là dữ liệu đến lượt nó có thuộc tính có tên là lợi nhuận.

Sản phẩm play sau đó chạy hoạt ảnh. Các play phương thức cũng có thể được gọi với một tham số Boolean cho biết có chạy ngược lại hoạt ảnh hay không.
Bạn có thể nhận thấy rằng hoạt ảnh xoay thể hiện một số gia tốc. Điều này là do cài đặt mặc định cho Tween các trường hợp là sử dụng hình ảnh động "làm chậm". Bạn có thể kiểm soát những hành vi này bằng cách sử dụng Easing chức năng. Các hàm này lấy đầu vào là tiến trình hoạt ảnh hiện tại dưới dạng phân số từ 0 đến 1. Sau đó, chúng trả về một phân số tiến trình được thao tác để thay đổi tốc độ của hoạt ảnh, thường là theo kiểu phi tuyến tính.
Để xóa nới lỏng (tức là, sử dụng một hàm nới lỏng tuyến tính), bạn có thể viết: tween.easing = Easing.none. Chỉ cần đảm bảo rằng bạn nhập flare.animate.Easing ở đầu tệp.
Hãy thử nghiệm với các chức năng nới lỏng khác. Ví dụ: các chức năng nới lỏng có thể liên quan đến việc nới lỏng trong (chỉ thao tác khi bắt đầu hoạt ảnh), giảm bớt (chỉ thao tác phần cuối của hoạt ảnh) hoặc cả hai. Ví dụ, hãy thử điều này: tween.easing = Easing.easeOutBounce. Điều này sẽ làm cho vòng quay bị trả lại ở cuối.
Trước khi tiếp tục, hãy thử tạo hoạt ảnh cho các thuộc tính khác của vùng chứa, chẳng hạn như vị trí, tỷ lệ hoặc giá trị alpha.

Ảnh động tổng hợp

Sản phẩm Sequence và Parallel các lớp cho phép bạn nhóm các hoạt ảnh lại với nhau. Trình tự chạy lần lượt một tập hợp các hoạt ảnh. Ví dụ, hãy thử điều này:

 var t1: Tween = new Tween (container, 1, {y: 100}); var t2: Tween = new Tween (container, 1, {scaleX: 2}); var t3: Tween = new Tween (container, 1, {y: 300}); var t4: Tween = new Tween (container, 1, {scaleX: 1}); var seq: Sequence = new Sequence (new Parallel (t1, t2), new Parallel (t3, t4)); seq.play ();

Bạn cũng sẽ cần thêm một số câu lệnh nhập mới ở đầu tệp:

 nhập flare.animate.Parallel; nhập flare.animate.Sequence;

Điều này tạo ra bốn cột: t1, t2, t3và t4. Sau đó, nó tạo ra hai quá trình chuyển đổi song song chạy t1 và t2 cùng nhau và chạy t3 và t4 cùng với nhau. Các quá trình chuyển đổi song song sau đó được chạy lần lượt theo một trình tự. Bằng cách này, có thể dễ dàng xây dựng các hình ảnh động phức tạp hơn.
Để có các hoạt ảnh tổng hợp nâng cao hơn, hãy xem FlareLogo và flare.demos.Animation các lớp học trong flare.demos dự án.

Hoạt ảnh hàng loạt với bộ chuyển đổi

Sử dụng Tween, Parallelvà Sequence các lớp học, bạn có thể thực hiện bất kỳ số lượng chuyển đổi động nào. Tuy nhiên, khi xử lý các tập hợp lớn các đối tượng (phổ biến trong trực quan), việc xử lý thủ công một tập hợp lớn tương tự của các đối tượng có thể là một vấn đề khó khăn. Hơn nữa, sẽ dễ dàng chạy các quy trình riêng biệt để mã hóa các thuộc tính trực quan như bố cục, màu sắc, kích thước, hình dạng và không phải lo lắng về việc xử lý hoạt ảnh. Có lẽ bạn muốn tạo ảnh động cho các thay đổi hoặc có lẽ bạn muốn cập nhật tĩnh. Dù bằng cách nào, bạn sẽ có thể sử dụng lại cùng một mã để gán giá trị.
Để giải quyết những lo lắng này, Flare cung cấp Transitioner lớp học. Bộ chuyển đổi đơn giản hóa quá trình tạo hoạt ảnh cho bộ sưu tập các đối tượng. Bạn chỉ cần lấy một đối tượng và thiết lập từng thuộc tính mong muốn. Phía sau hậu trường, bộ chuyển đổi sẽ tự động tạo và sử dụng lại các đoạn thẳng cần thiết để tạo mô hình hoạt ảnh đầy đủ. Hơn nữa, nếu không muốn hoạt ảnh, bộ chuyển đổi có thể được định cấu hình để đặt các giá trị thuộc tính ngay lập tức. Nói tóm lại, bộ chuyển đổi cung cấp một lớp hướng dẫn để cập nhật các thuộc tính đối tượng - những cập nhật này có thể được thu thập và sau đó hoạt ảnh hóa hoặc áp dụng ngay lập tức.
Đây là một ví dụ đơn giản về việc sử dụng bộ chuyển đổi trong ứng dụng hướng dẫn của chúng tôi.

 var t: Transitioner = new Transitioner (2); for (var j: int = 0; j

Ví dụ này tạo hoạt ảnh cho tất cả các sprite trong container đến một ngẫu nhiên mới y vị trí và hệ số tỷ lệ dọc ngẫu nhiên. Đầu tiên chúng tôi tạo một Transitioner sẽ tạo ra hoạt ảnh dài 2 giây. Sau đó, chúng tôi lặp qua từng sprite con và sử dụng bộ chuyển đổi để đặt các thuộc tính thành Tween.
Người chuyển tiếp $ toán tử chỉ ra rằng chúng ta muốn đặt một giá trị đích cho đối tượng đầu vào. Theo mặc định, một Tween được tạo, hoặc hiện có Tween được tìm thấy cho mục hiện tại. Các $ sau đó, toán tử trả về một đối tượng để đặt thuộc tính đích của tween.
Hơn nữa, bộ chuyển đổi có thể được sử dụng để tạo chuyển đổi tĩnh (không động). Nếu một người chuyển tiếp immediate thuộc tính được đặt thành true, nó sẽ không tạo Tweens mới. Thay vào đó, toán tử $ sẽ chỉ trả về giá trị đầu vào. Điều này có nghĩa là bạn có thể tạo các phương thức cập nhật giá trị bằng bộ chuyển đổi, sau đó kiểm soát việc bạn có muốn cập nhật các giá trị đó hay không. "Chế độ tức thì" tiêu chuẩn Transitioner được truy xuất bằng cách sử dụng tĩnh Transitioner.DEFAULT bất động sản. Bằng cách đó, bạn không cần phải phân bổ Transitioner khi thực hiện cập nhật ngay lập tức.
Bộ chuyển đổi được sử dụng rộng rãi trong suốt flare.vis gói, cho phép các nhà thiết kế hình ảnh hóa kiểm soát các bản cập nhật nào nên được làm động và như thế nào.

Phần 3: Hình dung

Đang tải dữ liệu

Biểu diễn dữ liệu cơ bản cho Flare chỉ đơn giản là sử dụng các kiểu dữ liệu Flash tích hợp: Object và Array. Ví dụ, một bảng dữ liệu chỉ có thể được biểu diễn dưới dạng một mảng các đối tượng, mỗi đối tượng chứa tên và giá trị của mỗi trường dữ liệu. Mặc dù có thể trình bày hiệu quả hơn, nhưng cách tiếp cận này cung cấp tính linh hoạt nhất đồng thời tận dụng các quy ước phát triển Flash hiện có.
Để tải dữ liệu vào trình phát Flash, có một số cách tiếp cận. Một cách tiếp cận đơn giản là nhúng dữ liệu của bạn vào chính ứng dụng. Bằng cách đó, dữ liệu được tải xuống cùng với ứng dụng, điều này tốt cho các tập dữ liệu tĩnh. Ví dụ: bạn có thể sử dụng ký hiệu đối tượng của ActionScript để xác định trực tiếp tập dữ liệu dưới dạng một biến:

var data: Array = [{id: "Q1", sales: 10000, profit: 2400}, {id: "Q2", sales: 12000, profit: 2900}, {id: "Q3", sales: 15000, lãi : 3800}, {id: "Q4", doanh số: 15500, lợi nhuận: 3900}];

Tuy nhiên, trong nhiều trường hợp, bạn sẽ muốn tải dữ liệu của mình một cách động, từ trong một trang web (bạn có thể sử dụng JavaScript trong trình duyệt để chuyển các giá trị vào Flash) hoặc từ một máy chủ trên internet. Có nhiều cách để thực hiện việc này và bạn nên chọn bất kỳ cách nào phù hợp nhất với ứng dụng cụ thể của mình. Ví dụ: ActionScript cung cấp các kiểu dữ liệu và cú pháp bổ sung để làm việc với XML dữ liệu bằng ECMAScript cho XML (E4X) tiêu chuẩn.
Flare cũng cung cấp một số tiện ích để tải các tập dữ liệu bên ngoài. Nó hỗ trợ tải dữ liệu từ bất kỳ máy chủ nào trên internet và chuyển đổi dữ liệu đó thành các đối tượng ActionScript nội bộ. Các định dạng tệp hiện được hỗ trợ là văn bản được phân tách bằng tab (“tab”, một định dạng tệp tiêu chuẩn để xuất dữ liệu từ các công cụ như Excel), Ký hiệu đối tượng JavaScript (“Json”, một định dạng dữ liệu phổ biến cho các ứng dụng web) và GraphML (“Graphml”, một XML định dạng biểu diễn mạng với các nút và các cạnh).
Dữ liệu từ xa được tải bằng cách sử dụng flare.data.DataSource lớp học. Dưới đây là một ví dụ về việc sử dụng nó để tải tệp dữ liệu được phân tách bằng tab:

var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// hàm xử lý dữ liệu sau khi tải xong var ds: DataSet = loader.data as DataSet; // bây giờ hãy làm gì đó với dữ liệu ...} );

Sản phẩm DataSource hàm tạo có hai đối số bắt buộc: url của tập dữ liệu và một chuỗi cho biết định dạng tệp. Hiện tại, các định dạng được hỗ trợ là “tab” (phân cách bằng tab), “json” (Ký hiệu đối tượng JavaScript) và “graphml” (GraphML).
Đối với các tập dữ liệu có lược đồ (tên và kiểu dữ liệu của các trường) có thể không rõ ràng, cũng có một đối số phương thức khởi tạo thứ ba, tùy chọn nhận một DataSchema kiểu. Xem flare.data.DataSchema và flare.data.DataField các lớp học để biết thêm. Lược đồ có thể hữu ích để đảm bảo rằng các giá trị dữ liệu được đặt tên đúng (ví dụ: đối với tệp được phân cách bằng tab thiếu hàng tiêu đề) và được chuyển đổi thành các kiểu dữ liệu thích hợp (ví dụ: đối với dữ liệu JSON trong đó giá trị số được đặt trong dấu ngoặc kép).
Để thực sự tải dữ liệu, phương thức tải DataSource được gọi, trả về flash.net.URLLoader ví dụ. Trình tải có thể được sử dụng để theo dõi tiến trình tải xuống (ví dụ: nếu bạn muốn cung cấp thanh tiến trình) và cung cấp sự kiện thông báo khi quá trình tải xuống hoàn tất. Trong ví dụ trên, chúng tôi thêm một trình nghe sự kiện để được thông báo khi quá trình tải xuống hoàn tất. Các DataSource sẽ tự động phân tích cú pháp dữ liệu đầu vào, ánh xạ nó thành các đối tượng ActionScript và lưu trữ kết quả trong flare.data.DataSet vật. Các DataSet lớp có thể đại diện cho cả dữ liệu bảng và mạng (nút / cạnh).

Tạo và quản lý các đối tượng trực quan

Bây giờ chúng ta muốn hình dung một tập dữ liệu. Để làm điều này, chúng tôi ánh xạ các bản ghi dữ liệu riêng lẻ thành các mục trực quan. Flare cung cấp một tập hợp các đối tượng trực quan để biểu diễn dữ liệu. Dưới đây là tổng quan về các lớp cơ bản được cung cấp bởi flare.vis.data Gói.

• DataSprite: Lớp cơ sở cho các sprite đại diện cho dữ liệu một cách trực quan. DataSprite là một lớp con của Flash Player's Sprite lớp học. DataSprite Bao gồm một data thuộc tính nơi bộ dữ liệu (một Đối tượng ActionScript) được lưu trữ và cũng cung cấp các biến trực quan bổ sung ngoài các biến trực quan được hỗ trợ bởi các sprite cơ bản, bao gồm các trường màu sắc, hình dạng và kích thước cũng như hỗ trợ thiết lập vị trí trong tọa độ cực.
• NodeSprite: DataSprite thể hiện đại diện cho một nút. Đây là kiểu mặc định được sử dụng để hiển thị dữ liệu. NodeSprite các cá thể có thể được kết nối trong mạng hoặc cấu trúc cây bằng EdgeSprite các trường hợp.
• EdgeSprite: DataSprite ví dụ đại diện cho một cạnh. An EdgeSprite kết nối hai NodeSprites. Các nút có thể truy cập thông qua source và target tài sản. EdgeSprites được sử dụng để tạo biểu đồ và cây, cũng như để biểu diễn các đường, chẳng hạn như trong biểu đồ chuỗi thời gian.

Thông thường, NodeSosystemes và EdgeSivirus được tạo và lưu trữ trong flare.vis.data.Data lớp, quản lý tất cả các mục trực quan cho một hình ảnh trực quan. Các Data lớp cung cấp các phương thức để tạo các đối tượng trực quan mới cho các bộ dữ liệu và để biểu diễn cấu trúc đồ thị.
Sản phẩm Data lớp cũng cung cấp các phương thức để duyệt và cập nhật các mục dữ liệu chứa trong đó. Các nodes và edges thuộc tính trả về danh sách các nút và cạnh có trong dữ liệu. Mỗi danh sách này bao gồm một visit phương thức cho phép bạn chuyển vào một hàm sau đó sẽ được gọi với mỗi nút hoặc cạnh. Ngoài ra, setProperty và setProperties các phương thức cho phép bạn đặt các giá trị thuộc tính cho tất cả các nút hoặc các cạnh cùng một lúc. Các phương pháp này tùy chọn lấy một Transitioner như một đối số, vì vậy bạn có thể tạo hiệu ứng cho bản cập nhật thuộc tính.
Ví dụ: đoạn mã sau dẫn đến hoạt ảnh một giây trong đó màu đường cho tất cả các nút được đặt thành màu xanh lam. (Lưu ý rằng ký hiệu hex cho DataSprite giá trị màu bao gồm các kênh alpha cũng như đỏ, lục, lam).

data.nodes.setProperty ("lineColor", 0xff0000bb, New Transitioner (1)). play ();

Danh sách nút và cạnh cũng hỗ trợ các giá trị thuộc tính mặc định, sử dụng setDefault, setDefaults, removeDefaultvà clearDefaults các phương pháp. Giá trị mặc định sẽ được đặt trên một nút hoặc cạnh mới được tạo bằng cách sử dụng lớp Dữ liệu ' addNode or addEdgeFor phương pháp.
Sản phẩm Tree lớp là một lớp con của Data, chuyên dùng để biểu diễn một cây hơn là một đồ thị tổng quát. Các Data lớp hỗ trợ việc tạo tự động Tree ví dụ bằng cách tính toán cây bao trùm của một đồ thị tổng quát Một số phương pháp tạo cây bao trùm - bao gồm thuật toán mở rộng đầu tiên, chiều sâu và tối thiểu cây bao trùm - có thể được chuyển vào dưới dạng tham số. Các phép tính này được thực hiện bằng cách sử dụng flare.analytics.graph.SpanningTree lớp học.
Để thực sự tạo các đối tượng nút và cạnh, chúng tôi sử dụng addNode và addEdgeFor phương pháp.

• addNode lấy một bộ dữ liệu đầu vào (một Object) và tạo một NodeSprite để hiển thị dữ liệu đó.
• addEdgeFor có hai hiện tại NodeSprites và thêm một EdgeSprite kết nối chúng. Phương thức cũng tùy chọn loại trừ một bộ dữ liệu (một lần nữa, Object đại diện cho bất kỳ trường dữ liệu nào) cho cạnh.

Đây là một ví dụ đơn giản để tạo NodeSprites đối với tập dữ liệu dạng bảng, giả sử chúng ta có một mảng các đối tượng dữ liệu:

var list: Mảng; // một mảng các đối tượng dữ liệu mà chúng ta đã tải dữ liệu var: Data = new Data (); // một vùng chứa dữ liệu mới cho mỗi (var o: Object in list) {data.addNode (o); }

Kết quả là một Data đối tượng được điền bằng hình ảnh DataSprite (các nút hoặc các cạnh) các thể hiện.
Trên thực tế, không phải lúc nào bạn cũng cần điền dữ liệu được hiển thị theo cách thủ công. Để tạo ra một Data để hiển thị một tập dữ liệu đã tải, bạn thường có thể sử dụng một phương pháp tiện lợi để thay thế. Các Data.fromArray() hàm tạo ra một Data ví dụ cho dữ liệu dạng bảng được lưu trữ dưới dạng một mảng các đối tượng ActionScript, trong khi Data.fromDataSet() phương pháp tương tự tạo ra một Data ví dụ từ một DataSet vật.

Tạo hình ảnh

Bây giờ chúng ta hãy tập hợp tất cả những điều này lại với nhau để bắt đầu hình dung. Các Visualization lớp đại diện cho một trực quan duy nhất, bao gồm các nhãn trực quan (được lưu trữ trong Data ví dụ) và trục. Để tạo trực quan, chúng tôi tải tập dữ liệu, thêm dữ liệu vào trực quan và thiết lập các toán tử xác định cách trực quan hóa dữ liệu. Đây là một ví dụ. Xem qua mã trước, sau đó đọc tiếp để hiểu mỗi phần đang làm gì.

gói {import flare.data.DataSet; nhập flare.data.DataSource; nhập flare.scale.ScaleType; nhập flare.vis.Visualization; nhập flare.vis.data.Data; nhập flare.vis.operator.encoder.ColorEncoder; nhập flare.vis.operator.encoder.ShapeEncoder; nhập flare.vis.operator.layout.AxisLayout; nhập flash.display.Sprite; nhập flash.events.Event; nhập flash.geom.Rectangle; nhập flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] public class Hướng dẫn mở rộng Sprite {private var vis: Visualization; public function Tutorial () {loadData (); } private function loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {var ds: DataSet = loader.data as DataSet; Visual (Data.fromDataSet (ds));}); } hàm private visualization (data: Dữ liệu): void {vis = new Visualization (data); vis.bounds = new Rectangle (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (new AxisLayout ("data.date", "data.age")); vis.operators.add (ColorEncoder mới ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (mới ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Hãy xem xét từng phương pháp.
Hàm tạo rất đơn giản: nó chỉ gọi loadData phương pháp.
Sản phẩm loadData phương thức tạo một nguồn dữ liệu mới và tải nó bằng các phương pháp được mô tả trước đó. Trong trường hợp này, tập dữ liệu được báo cáo về các vụ giết người ở hạt Los Angeles vào năm 2007, được lưu trữ ở định dạng phân cách bằng tab. Khi quá trình tải hoàn tất, các bộ dữ liệu đã tải được thêm vào Data ví dụ sử dụng fromDataSet phương pháp tiện lợi. Dưới mui xe, điều này dẫn đến việc tạo ra NodeSprites để hiển thị từng mục dữ liệu. cuối cùng visualize phương thức được gọi.
Sản phẩm visualize phương pháp thiết lập trực quan. Đây là những gì đang xảy ra trong mỗi bước:

• Phần 1: Khởi tạo
  • Một hình ảnh trực quan mới được tạo cho dữ liệu
  • Chúng tôi đặt giới hạn cho hình ảnh hóa. Điều này xác định khu vực bố trí.
  • Chúng tôi đặt x và y vị trí hiển thị của chúng tôi và thêm trực quan vào danh sách hiển thị.
• Phần 2: Chỉ định mã hóa trực quan
  • Chúng tôi sử dụng bố cục trục, đặt “ngày” trên trục x và “tuổi” trên trục y. Các AxisLayout nhà điều hành cũng tự động cấu hình các trục để hiển thị. Chúng tôi sử dụng cú pháp “data.date” để biểu thị các biến dữ liệu, vì chúng nằm trong NodeSprite'S data bất động sản.
  • Chúng tôi thêm mã hóa màu để màu đường của nút đại diện cho biến "nguyên nhân" (nguyên nhân tử vong). Chúng tôi cũng nói với bộ mã hóa màu rằng các giá trị của biến "nguyên nhân" đại diện cho các danh mục (ScaleType.CATEGORIES). Bộ mã hóa màu sẽ sử dụng thông tin này để tự động chọn bảng màu thích hợp. Như chúng ta sẽ thấy ngay sau đây, bạn cũng có thể cung cấp bảng màu của riêng mình.
  • Chúng tôi thêm mã hóa hình dạng để hình dạng của một đối tượng đại diện cho "chủng tộc" của nạn nhân.
  • Chúng tôi đặt thuộc tính mặc định - chúng tôi đặt màu tô của các nút thành trong suốt hoàn toàn và đặt chiều rộng đường thành 2 pixel.
  • Cuối cùng, chúng tôi gọi update phương pháp. Điều này chạy tất cả các toán tử theo thứ tự.

Cập nhật hình ảnh hóa

Khi hình ảnh đã được tạo, chúng tôi có thể muốn cập nhật nó. Ví dụ: có thể chúng tôi muốn thay đổi bảng mã màu để thay vào đó hình dung giới tính của mọi người.
Đầu tiên, hãy thêm một phương thức mới vào lớp:

 hàm private colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = new ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (Bộ chuyển đổi mới (2)). play (); }

Phương pháp này:

1. Truy xuất toán tử thứ hai (toán tử ở chỉ mục 1) và chuyển nó thành ColorEncoder
2. Thay đổi source thuộc tính cho bộ mã hóa màu sử dụng biến “data.sex”
3. Đặt bảng màu mới (trong trường hợp này, màu đỏ cho nữ, màu xanh cho nam - thứ tự màu khớp với thứ tự bảng chữ cái của các nhãn)
4. Làm động sự thay đổi bằng cách gọi cập nhật với Transitioner đặt cho một hoạt ảnh hai giây. Các vis.update phương thức trả về Transitioner, vì vậy chúng tôi có thể gọi phát trên giá trị trả về của bản cập nhật. (Lưu ý: bạn cũng có thể bỏ qua Transitioner và chỉ cần chuyển số 2 làm đối số cho update. Một cái mới Transitioner sẽ được tạo tự động và trả về.)

Bây giờ chúng ta cần kết nối ứng dụng để chúng ta có thể tương tác kích hoạt bản cập nhật. Để làm như vậy, hãy thêm mã sau vào hàm tạo:

 // thêm nút var nhãn có thể nhấp: TextSprite = new TextSprite ("Màu theo giới tính"); addChild (nút); nút.x = 710; nút.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Mã này:

1. Tạo nhãn văn bản mới (TextSprite là một lớp trợ giúp từ flare.display gói)
2. Thêm nhãn vào ứng dụng và đặt vị trí của nó
3. bộ buttonMode thành true (điều này làm cho con trỏ tay xuất hiện khi bạn di chuột qua nhãn)
4. Thêm trình xử lý sự kiện được kích hoạt khi nhãn được nhấp vào. Chúng tôi thêm một hàm gọi lại gọi colorByGender phương pháp.

Để mã trên hoạt động, chúng tôi sẽ cần bao gồm các câu lệnh nhập bổ sung này ở đầu tệp:

 nhập flash.events.MouseEvent; nhập flare.animate.Transitioner; nhập flare.display.TextSprite; nhập flare.util.palette.ColorPalette;

Bây giờ bạn sẽ có thể biên dịch và chạy ứng dụng. Việc nhấp vào nhãn "Màu sắc theo giới tính" sẽ tạo hiệu ứng cho sự thay đổi trong mã hóa màu sắc.

Bước tiếp theo

Các ví dụ trên cho thấy những điều cơ bản về Flash và thư viện Flare, nhưng vẫn còn nhiều tính năng khác chưa được đề cập đến. Về sau, chúng tôi khuyên bạn nên (a) kiểm tra cả Đèn flash và Đèn lóa API tài liệu để hiểu về tất cả các lớp có sẵn và (b) tìm hiểu qua các bản trình diễn Flare để xem các nguyên tắc tương tự được hiển thị ở đây có thể được sử dụng như thế nào để xây dựng một số hình ảnh trực quan khác. Hoặc, tốt hơn, hãy đào qua mã nguồn Flare để tìm hiểu những gì đang diễn ra.
Để hỗ trợ quá trình này, đây là tổng quan chung về các gói con trong flare.vis:

• flare.vis.axis: cung cấp các trục, nhãn và đường lưới
• flare.vis.controls: trình xử lý tương tác để lựa chọn, thu phóng và hơn thế nữa
• flare.vis.data: các đối tượng trực quan đại diện cho các phần tử dữ liệu
• flare.vis.data.render: trình kết xuất có thể cắm được vẽ DataSprites
• flare.vis.events: các loại sự kiện được sử dụng trong khung flare
• flare.vis.legend: đại diện cho truyền thuyết để mô tả các mã hóa trực quan
• flare.vis.operator: các khối xây dựng để xác định hình ảnh trực quan
• flare.vis.palette: bảng màu cho các giá trị màu sắc, hình dạng và kích thước
• flare.vis.util: các lớp tiện ích chung

Bây giờ bạn đã biết đủ để hiểu các bản demo trong flare.demos gói hàng. Hãy thoải mái chơi với, sửa đổi, sao chép, dán và xây dựng dựa trên các bản trình diễn để hiểu rõ hơn về cách hoạt động của Flash và Flare.

Liên kết

Tải thư liệu

CÔNG CỤ

Hướng dẫn kỹ thuật khác

HỖ TRỢ

Nguồn: https://blokt.com/tool/prefuse-flare