Αναλαμπή | Οπτικοποίηση δεδομένων για τον Ιστό

Το Flare διευκολύνει τη δημιουργία διαδραστικών απεικονίσεων δεδομένων

Για να αρχίσετε να κάνετε τις δικές σας οπτικοποιήσεις, κατεβάστε το flare και δουλέψτε μέσω του παρακάτω οδηγού. Χρειάζεστε περισσότερη βοήθεια; Επισκεφθείτε το φόρουμ βοήθειας (θα χρειαστείτε ένα SourceForge συνδεθείτε για να δημοσιεύσετε).

Το Flare είναι λογισμικό ανοιχτού κώδικα που κυκλοφορεί με άδεια BSD, πράγμα που σημαίνει ότι μπορεί να αναπτυχθεί και να τροποποιηθεί ελεύθερα (και ακόμη και να πωληθεί για $ $$). Ο σχεδιασμός του Flare προσαρμόστηκε από τον προκάτοχό του, μια εργαλειοθήκη οπτικοποίησης για την Java.

Εφαρμογές

Ανακοινώσεις

• 2010.10.07: Το Flare development έχει ανοιχτεί στην κοινότητα και η πηγή έχει μετακινηθεί από το SourceForge στο ένα νέο σπίτι στο GitHub. φωτοβολίδα 2009.01.24 παραμένει η τελευταία επίσημη κυκλοφορία και (τουλάχιστον προς το παρόν) τα σεμινάρια και η τεκμηρίωση το αντικατοπτρίζουν. Η έκδοση ανάπτυξης στο GitHub Τώρα περιέχει καλύτερη υποστήριξη για το Flash Player 10, καθώς και πολλές άλλες μικρές διορθώσεις και αλλαγές.
• 2009.01.24: φωτοβολίδα 2009.01.24 έχει κυκλοφορήσει. Αυτή είναι μια έκδοση συντήρησης με μια σειρά διορθώσεων σφαλμάτων και ενημερώσεων. Δείτε το σημειώσεις έκδοσης Για περισσότερες πληροφορίες. Αυτή είναι η τελευταία προγραμματισμένη έκδοση για το Flash Player 9 - οι μελλοντικές εκδόσεις θα μεταφερθούν στην έκδοση 10.
• 2008.07.30: φωτοβολίδα 2008.07.29 έχει κυκλοφορήσει. Πρόκειται για μια σημαντική έκδοση που εισάγει πολλά νέα χαρακτηριστικά και αρχιτεκτονικές βελτιώσεις. Δείτε το σημειώσεις έκδοσης Για περισσότερες πληροφορίες.
• 2008.07.30: φωτοβολίδα 2008.08.08 έχει κυκλοφορήσει. Αυτή η έκδοση περιλαμβάνει βελτιωμένη υποστήριξη θρύλων, ονομαστικές μεταβάσεις, επιδιορθώσεις σφαλμάτων και επαναπροσδιορισμό για τη μείωση της σύζευξης και την ενοποίηση κλάσεων χρησιμότητας. Δείτε το σημειώσεις έκδοσης Για περισσότερες πληροφορίες.

φροντιστήριο

Ένα βήμα-προς-βήμα φροντιστήριο για την εκμάθηση ActionScript και Flare.

Ξεκινώντας

Το πρώτο βήμα είναι να ρυθμίσετε τα εργαλεία ανάπτυξης.

1. Ρυθμίστε ένα περιβάλλον ανάπτυξης flash εργασίας. Υπάρχουν δύο προσεγγίσεις. Συνιστούμε το πρώτο για απλότητα, αλλά οι πιο προηγμένοι χρήστες είναι ευπρόσδεκτοι να χρησιμοποιήσουν τη δεύτερη προσέγγιση.
   • Επιλογή 1 (απλούστερη): Εγκαταστήστε το Adobe Flex Builder.
     • Αυτό είναι ένα πλήρες περιβάλλον ανάπτυξης για εφαρμογές ActionScript / Flex. Είναι διαθέσιμο για όλες τις μεγάλες πλατφόρμες (Windows, Mac, Unix). Οι χρήστες που χρησιμοποιούν ήδη το Eclipse IDE μπορούν επίσης να εγκαταστήσουν το Flex Builder ως πρόσθετο Eclipse.
     • Η προειδοποίηση για τη χρήση του Flex Builder είναι ότι είναι εμπορικό λογισμικό και θα λειτουργεί μόνο για περιορισμένη δοκιμαστική περίοδο. Ωστόσο, η Adobe παρέχει δωρεάν άδειες Flex Builder σε φοιτητές πανεπιστημίου, καθηγητές και προσωπικό.
   • Επιλογή 2 (πιο περίπλοκη): Εγκαταστήστε το δωρεάν Flex SDK
     • Αυτό θα εγκαταστήσει τους βασικούς μεταγλωττιστές ActionScript / Flex: mxmlc και compc. Στη συνέχεια, μπορείτε να ρυθμίσετε το δικό σας περιβάλλον κατασκευής, για παράδειγμα, χρησιμοποιώντας το make or ant συστήματα κατασκευής. Το Flare συσκευάζεται με α build.xml αρχείο για χρήση με το Απάτσι Αντ σύστημα κατασκευής. Μόλις εγκατασταθεί το μυρμήγκι, απλώς ανοίξτε το build.xml αρχειοθετήστε σε ένα πρόγραμμα επεξεργασίας κειμένου, αλλάξτε τις πρώτες γραμμές για να δείξετε το Flex σας SDK εγκατάσταση και στη συνέχεια χρησιμοποιήστε ant για να μεταγλωττίσετε τις βιβλιοθήκες. Χρησιμοποιούμε τις εργασίες μυρμηγκιών της Adobe Labs για ανάπτυξη Flex.
     • Το πλεονέκτημα αυτής της προσέγγισης είναι ότι όλο το λογισμικό είναι δωρεάν και δεν θα λήξει για εσάς. Ωστόσο, χάνετε λειτουργίες όπως αυτόματη συλλογή, διαχείριση έργων και αυτόματη συμπλήρωση που παρέχεται από το Flex Builder.
2. Κατεβάστε τις βιβλιοθήκες prefare flare.
   • Η λήψη είναι ένα αρχείο zip που περιέχει ένα σύνολο έργων βιβλιοθήκης ActionScript. Αποσυμπιέστε τα αρχεία στον κύριο κατάλογο του χώρου εργασίας σας εάν χρησιμοποιείτε το Flex Builder. Κατά τη διάρκεια του σεμιναρίου θα τα εισαγάγουμε στο Flex Builder και θα τα χρησιμοποιήσουμε για να δημιουργήσουμε οπτικοποιήσεις!
   • Το λογισμικό είναι επί του παρόντος μια έκδοση άλφα και επομένως αναμένεται κάποια σφάλματα και περιορισμοί. Θα διορθώσουμε τα προβλήματα το συντομότερο δυνατό και ο παραπάνω σύνδεσμος θα δείχνει πάντα στην πιο πρόσφατη έκδοση.

Εισαγωγή στο Flash και το ActionScript 3

Το Flash είναι ένα εξαιρετικό περιβάλλον για διαδραστικά γραφικά και με την πρόσφατη προσθήκη της γλώσσας προγραμματισμού ActionScript 3, έγινε πολύ πιο ισχυρό και αποτελεσματικό. Ενώ μια πλήρης εισαγωγή στο AS3 είναι πέρα ​​από το πεδίο αυτού του σεμιναρίου, ακολουθούν ορισμένοι πόροι που θα βρείτε χρήσιμοι:

• Η Adobe παρέχει μια Επισκόπηση του AS3, με συνδέσμους προς πρόσθετους πόρους.
• Βασικό ActionScript 3 από τον Colin Moock από την έκδοση O'Reilly είναι ένα εξαιρετικό βιβλίο που θα σας βοηθήσει να ξεκινήσετε. Μπορείς αποκτήστε πρόσβαση στο διαδίκτυο εδώ (ορισμένα ιδρύματα, όπως τα πανεπιστήμια, παρέχουν δωρεάν πρόσβαση).
• Το Adobe Flex API Reference είναι ανεκτίμητο για την κατανόηση των διαφόρων τάξεων και μεθόδων που είναι διαθέσιμες. Θα επικεντρωθούμε μόνο στα μαθήματα στο flash.* πακέτα.

Αυτό το σεμινάριο προϋποθέτει βασική εξοικείωση με τη σύνταξη και τους τύπους ActionScript, καθώς και τις έννοιες του αντικειμενοστραφούς προγραμματισμού.

Μέρος 1: DisplayObjects

Εισαγωγή

Το Flash μοντελοποιεί μια 2D οπτική σκηνή χρησιμοποιώντας ένα σκηνογραφία. Τα οπτικά αντικείμενα οργανώνονται σε μια ιεραρχία, με τα παιδικά αντικείμενα να ορίζονται στον χώρο συντεταγμένων του γονέα. Θα βλέπετε συχνά αυτό το σκηνικό που αναφέρεται ως το λίστα εμφάνισης τόσο στην τεκμηρίωση της Adobe όσο και στα βιβλία σχετικά με τον προγραμματισμό Flash.
Ο κόμβος στην κορυφή της λίστας εμφάνισης είναι πάντα ο Stage αντικείμενο. Η σκηνή έχει πάντα ένα και μόνο ένα παιδί. Αυτό ονομάζεται το rootκαι όλα τα οπτικά αντικείμενα βρίσκονται κάτω από τη ρίζα. Συνήθως, η ρίζα είναι η πραγματική εφαρμογή Flash. Θα επανέλθουμε σύντομα σε αυτό.
Όλα τα οπτικά στοιχεία που μπορούν να προστεθούν στη λίστα εμφάνισης είναι παρουσίες του DisplayObject τάξη. Υποκατηγορίες του DisplayObject περιλαμβάνουν Bitmap (για εικόνες), TextField (για διαδραστικές περιοχές κειμένου) και Video (σκεφτείτε το YouTube). Οι πιο συνηθισμένες περιπτώσεις, ωστόσο, είναι οι Sprite και Shape τάξεις. Για αναφορά, οι περισσότερες από αυτές τις τάξεις βρίσκονται στο flash.display πακέτο (αν και τελικά θα βρείτε πιθανώς το flash.text και το πακέτο χρήσης).
Η Sprite Η κλάση είναι το πιο χρήσιμο, γενικό οπτικό αντικείμενο που χρησιμοποιείται από το Flash Player. Τα sprite είναι οπτικά αντικείμενα που περιέχουν τόσο περιεχόμενο σχεδίασης και μπορούν να χρησιμεύσουν ως κοντέινερ για υπο-κόμβους στη λίστα εμφάνισης (το Sprite τάξη υποκατηγορίες το flash.display.DisplayObjectContainer τάξη). Σε αντίθεση, το Shape κλάση μπορεί να περιέχει περιεχόμενο σχεδίασης, αλλά δεν μπορεί να διατηρήσει υπο-κόμβους. Ως αποτέλεσμα, τα σχήματα καταναλώνουν λιγότερη μνήμη, αλλά είναι πολύ λιγότερο ευέλικτα. Για απλότητα, θα επικεντρωθούμε στα Sprites σε αυτό το σεμινάριο.

Δημιουργήστε μια νέα εφαρμογή

Αρχικά, ας δημιουργήσουμε μια νέα εφαρμογή Flash. Για να το κάνετε αυτό, ανοίξτε το Flex Builder και βεβαιωθείτε ότι βρίσκεστε στην προοπτική "Ανάπτυξη Flex" (προσεγγίζεται συχνά κάνοντας κλικ στο ασπρόμαυρο εικονίδιο "Fx" πάνω δεξιά).
Στο παράθυρο "Navigator" στα αριστερά, κάντε δεξί κλικ στην οθόνη και επιλέξτε "Νέο> ActionScript Project". Στο διάλογο που προκύπτει, πληκτρολογήστε "Tutorial" ως όνομα έργου και, στη συνέχεια, κάντε κλικ στο "Finish" Αυτό θα δημιουργήσει ένα νέο έργο για εσάς.
Θα πρέπει τώρα να δείτε ένα φάκελο "Tutorial" στο παράθυρο "Navigator". Σε αυτόν τον φάκελο, θα πρέπει να δείτε ένα αρχείο με το όνομα "Tutorial.as". Αυτό είναι το κύριο αρχείο της αίτησής σας. Ανοίξτε το, εάν δεν είναι ήδη ανοιχτό.
Μέσα στο αρχείο, θα δείτε τα βασικά ικριώματα για αυτήν την τάξη:

πακέτο {import flash.display.Sprite; Το δημόσιο μάθημα επεκτείνει το Sprite {public function Tutorial () {}}}

Παρατηρήστε ότι αυτή η τάξη επεκτείνει το Sprite τάξη. Επειδή αυτή είναι η κύρια κατηγορία εφαρμογών μας, όταν εκτελούμε την εφαρμογή μια παρουσία του Tutorial τάξη θα προστεθεί αυτόματα στη λίστα εμφάνισης ως root (το μοναδικό παιδί του Stage).
Παρατηρήστε επίσης ότι ένας κατασκευαστής έχει δημιουργηθεί αυτόματα. Αυτός ο κατασκευαστής θα καλείται όταν ξεκινήσει η εφαρμογή. Για όσους είναι εξοικειωμένοι με γλώσσες προγραμματισμού όπως C, C ++ ή Java, ο κατασκευαστής για την κατηγορία εφαρμογών λειτουργεί σαν main λειτουργία σε αυτές τις άλλες γλώσσες.
Με αυτήν τη νέα εφαρμογή σκαλωσιάς εφαρμογών, μπορούμε να αρχίσουμε να παίζουμε με οπτικά αντικείμενα. Ωστόσο, υπάρχει ένα πράγμα που θέλουμε να κάνουμε πρώτα. Προσθέστε μια νέα γραμμή ακριβώς πάνω από τη δήλωση τάξης ("public class Tutorial…Γραμμή που λέει:

[SWF (πλάτος = "800", ύψος = "600", backgroundColor = "# ffffff", frameRate = "30")]

Αυτή η γραμμή ορίζει τις προεπιλεγμένες ρυθμίσεις για την εφαρμογή σας (η οποία μεταγλωττίζεται και αποθηκεύεται ως αρχείο .swf στον κατάλογο "bin" του έργου σας). Πάνω, ορίζουμε το μέγεθος, το χρώμα φόντου και το ρυθμό καρέ στόχου (σε καρέ ανά δευτερόλεπτο) για την εφαρμογή μας.

Παιδάκια

Όπως όλα DisplayObjects, Sprite υποστηρίζει έναν αριθμό οπτικών ιδιοτήτων απευθείας από το κουτί. Αυτό περιλαμβάνει το x, y, scaleX, scaleY, rotation, να alpha ιδιότητες. Αυτά αλλάζουν αντίστοιχα τη θέση, το μέγεθος, τον προσανατολισμό και τη διαφάνεια ενός sprite (και όλων των παιδιών του! Θυμηθείτε, χρησιμοποιούμε μια σκηνογραφία εδώ).
Ωστόσο, αυτές οι τιμές δεν έχουν σημασία ακόμη, καθώς τα sprites δεν περιέχουν τίποτα από προεπιλογή. Θα ξεκινήσουμε σχεδιάζοντας το δικό μας περιεχόμενο.
Κάθε Sprite έχει επίσης ένα graphics ιδιοκτησία. Μπορούμε να το χρησιμοποιήσουμε για να σχεδιάσουμε γραφικά για το Sprite. ο graphics η ιδιότητα είναι μια παρουσία του flash.display.Graphics τάξη, η οποία παρέχει έναν αριθμό εντολών σχεδίασης διανύσματος.
Στο παρακάτω παράδειγμα, κάνουμε πολλά πράγματα.

• Πρώτον, δημιουργούμε ένα νέο Sprite.
• Δεύτερον, χρησιμοποιούμε το sprite's graphics για να σχεδιάσετε έναν κύκλο με γκρι γέμισμα και μαύρο περίγραμμα.
  • beginFill ορίζει το τρέχον χρώμα και στυλ πλήρωσης. Το πρώτο όρισμα είναι το χρώμα, σε εξάγωνο συμβολισμό, και το δεύτερο όρισμα είναι η τιμή άλφα, η οποία κυμαίνεται από 0 για πλήρως διαφανή έως 1 για πλήρως αδιαφανή.
  • lineStyle ορίζει το τρέχον χρώμα και στυλ διαδρομής. Το πρώτο όρισμα είναι το πλάτος της γραμμής, το δεύτερο όρισμα είναι το χρώμα.
  • drawCircle σχεδιάζει έναν κύκλο ακτίνας 10 στο σημείο 0,0 στον χώρο συντεταγμένων του sprite μας.
• Τρίτον, προσθέτουμε το sprite ως παιδί της κύριας εφαρμογής μας (a Tutorial ξωτικό).
• Τέταρτον, ορίσαμε το x και y θέση του sprite μας.
• Πέμπτον, προσθέτουμε κάποια έξοδο εντοπισμού σφαλμάτων. trace εκτυπώνει μια συμβολοσειρά στην κονσόλα. Αυτή η έξοδος εμφανίζεται μόνο κατά την εκτέλεση της εφαρμογής σε λειτουργία "εντοπισμού σφαλμάτων".

Εδώ είναι ο κωδικός:

πακέτο {import flash.display.Sprite; [SWF (πλάτος = "800", ύψος = "600", backgroundColor = "# ffffff", frameRate = "30")] Δημόσια τάξη Tutorial επεκτείνει το 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 μας είναι στο:" + sprite.x + "," + sprite.y); }}}

Εκτελέστε την εφαρμογή (κάντε δεξί κλικ στο "Tutorial.as" και επιλέξτε "Run As> Flex Application"). Θα πρέπει να δείτε έναν γκρίζο κύκλο με μαύρο περίγραμμα στην επάνω αριστερή γωνία, στο κέντρο του σημείου 50, 50. Εάν εκτελείτε την εφαρμογή σε κατάσταση εντοπισμού σφαλμάτων (επιλέξτε "Debug As> Flex Application"), θα πρέπει επίσης να δείτε τη συμβολοσειρά "μας Το sprite είναι στα: 50, 50 "στην κονσόλα εξόδου.

Ένθετα Sprites

Τώρα ας κάνουμε τη σκηνή μας λίγο πιο ενδιαφέρουσα. Ας ξεκινήσουμε μετακινώντας τον κώδικα παραγωγής Sprite σε μια νέα μέθοδο. Θα προσθέσουμε αυτήν τη μέθοδο στην τάξη μας:

 private function createCircle (x: Number, y: Number): Sprite {var sprite: Sprite = νέο Sprite (); sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); sprite.x = x; sprite.y = y; επιστροφή sprite? }

Στη συνέχεια, αντικαθιστούμε τον κωδικό στον κατασκευαστή μας. Αρχικά, δημιουργούμε ένα νέο sprite που ονομάζεται κοντέινερ, το οποίο θα χρησιμοποιήσουμε για να κρατήσουμε μια συλλογή κύκλων. Το βάζουμε στο κέντρο της σκηνής μας. Δεύτερον, χρησιμοποιούμε έναν βρόχο για να δημιουργήσουμε ένα σωρό κύκλους. Εδώ, ευθυγραμμίζουμε τους κύκλους συμμετρικά γύρω από το 0,0 σημείο του γονικού κοντέινερ. Ο νέος μας κατασκευαστής μοιάζει τώρα με αυτό:

 Public function Tutorial () {var container: Sprite = νέο Sprite (); container.x = 400; container.y = 300; this.addChild (κοντέινερ); για (var i: int = 0; i <10; ++ i) {var x: Number = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); container.addChild (createCircle (x, 0)); }}

Εκτελέστε τη νέα έκδοση της εφαρμογής. Θα πρέπει να δείτε μια γραμμή δέκα κύκλων στη μέση της εφαρμογής.
Τώρα μπορούμε να τροποποιήσουμε το κοντέινερ για να ενημερώσουμε όλους τους κύκλους μέσα σε αυτό. Δοκιμάστε να παίξετε με τη ρύθμιση διαφορετικών οπτικών μεταβλητών στο sprite του κοντέινερ. Για παράδειγμα, τροποποιήστε το x, y, scaleX, scaleY, rotation, να alpha ιδιότητες.

Άλλα Θέματα

Υπάρχουν πολλά περισσότερα που μπορείτε να κάνετε με τις βασικές επιλογές που παρέχει το Flash. Δυστυχώς, είναι λίγο πέρα ​​από αυτό που έχουμε χρόνο εδώ. Ορισμένα πράγματα που πρέπει να εξερευνήσετε περιλαμβάνουν φίλτρα εικόνας (δείτε το flash.filters πακέτο), το οποίο σας επιτρέπει να προσθέσετε οπτικά εφέ για να εμφανίσετε αντικείμενα χρησιμοποιώντας αυτά filters ιδιοκτησία και τις διάφορες διαθέσιμες επιλογές στο flash.display.Graphics τάξη, συμπεριλαμβανομένων στυλ γεμίσματος και γραμμής, και πολλές άλλες ρουτίνες σχεδίασης 2D.

Μέρος 2: Κινούμενα σχέδια

Τώρα που μπορούμε να δημιουργήσουμε οπτικά αντικείμενα, ήρθε η ώρα να αρχίσουμε να τους δίνουμε κάποια ζωή. Το Flare περιλαμβάνει το flare.animate πακέτο για να το κάνετε εύκολο. Πρώτον, πρέπει να εισαγάγουμε τις βιβλιοθήκες flare για χρήση στο Flex Builder.

Εισαγωγή βιβλιοθηκών

Πριν προχωρήσετε, βεβαιωθείτε ότι έχετε φορτώσει τις βιβλιοθήκες flare ως έργα στο Flex Builder. Θα έπρεπε να έχετε ήδη αποσυμπιέσει τα αρχεία flare στον κύριο κατάλογο του χώρου εργασίας του Flex Builder. Το επόμενο βήμα είναι να τα εισαγάγετε στο περιβάλλον Flex Builder:

• Βεβαιωθείτε ότι βρίσκεστε στην προοπτική "Ανάπτυξη Flex".
• Κάντε δεξί κλικ στο παράθυρο πλοήγησης στα αριστερά.
• Επιλέξτε "Εισαγωγή ..." στο αναδυόμενο μενού.
• Στο παράθυρο διαλόγου, επιλέξτε "Γενικά> Υφιστάμενα έργα στον χώρο εργασίας" και κάντε κλικ στο κουμπί "Επόμενο".
• Χρησιμοποιήστε τα γραφικά στοιχεία "Επιλογή ριζικού καταλόγου" για να μεταβείτε στον κατάλογο του χώρου εργασίας του Flex Builder
• Τώρα θα πρέπει να δείτε τα έργα flare που αναφέρονται στον πίνακα "Projects:".
• Επιλέξτε τα έργα "flare" και "flare.demos" και μετά κάντε κλικ στο κουμπί "Τέλος".

Θα πρέπει τώρα να δείτε τα έργα flare στο παράθυρο Navigator. Τώρα μπορείτε να περιηγηθείτε στον πηγαίο κώδικα για κάθε βιβλιοθήκη και τις επιδείξεις.

Επισκόπηση της βιβλιοθήκης flare

Ακολουθεί μια γρήγορη επισκόπηση του κιτ εργαλείων flare. μεσα στην flare έργο, κοιτάξτε μέσα στο φάκελο "src / flare". Θα βρείτε έναν αριθμό πακέτων που παρέχουν διαφορετικές δυνατότητες:

• analytics: τελεστές για υπολογιστική στατιστική και ανάλυση δεδομένων
• animate: εργαλεία για τη δημιουργία κινούμενων σχεδίων
• data: μέθοδοι ανάγνωσης και γραφής συνόλων δεδομένων
• display: DisplayObject τύποι που επεκτείνουν αυτούς που παρέχονται από flash.display
• flex: ένα περιτύλιγμα για την ενσωμάτωση οπτικοποιήσεων Flare σε εφαρμογές Flex
• physics: μια μηχανή φυσικής για φυσικά εφέ ή διάταξη κατευθυνόμενη με δύναμη
• query: ένας επεξεργαστής ερωτημάτων για αντικείμενα ActionScript
• scale: κλάσεις για το χειρισμό κλιμάκων δεδομένων, όπως γραμμικές, ημερολόγιο και κλίμακες χρόνου
• util: ένα σύνολο τάξεων χρησιμότητας που παρέχουν κοινώς απαραίτητες λειτουργίες
• vis: τα εξαρτήματα και οι χειριστές οπτικοποίησης φλόγας

Υπάρχει επίσης το flare.demos έργο, το οποίο παρέχει μια σειρά παραδειγμάτων για το πώς να δημιουργήσετε στοιχεία Flare.

Εισαγωγή βιβλιοθήκης σε άλλο έργο

Για να χρησιμοποιήσετε τη φλόγα στα δικά σας έργα, θα πρέπει να ενημερώσετε τις ρυθμίσεις του έργου σας. Δείτε πώς μπορείτε να το κάνετε αυτό:

1. Στο παράθυρο πλοήγησης, κάντε δεξί κλικ στον επάνω φάκελο του έργου "Tutorial"
2. Κάντε κλικ στο "Ιδιότητες" στο μενού περιβάλλοντος
3. Στο διάλογο που προκύπτει, κάντε κλικ στο "ActionScript Build Path" στον αριστερό πίνακα (θα πρέπει να είναι το 3ο στοιχείο από την κορυφή)
4. Κάντε κλικ στην καρτέλα "Διαδρομή βιβλιοθήκης" στο δεξιό πλαίσιο
5. Κάντε κλικ στο κουμπί "Προσθήκη έργου"
6. Θα πρέπει τώρα να δείτε μια λίστα έργων, συμπεριλαμβανομένου του flare.
7. Επιλέξτε "flare" και μετά κάντε κλικ στο "OK"

Τώρα έχετε προσθέσει τις βιβλιοθήκες flare στο έργο σας και μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις τάξεις που παρέχει.
Ένα πράγμα που πρέπει να σημειωθεί σχετικά με τον μεταγλωττιστή Flex - από προεπιλογή, περιλαμβάνει μόνο τις κλάσεις που χρησιμοποιείτε πραγματικά στην εφαρμογή σας. Έτσι, ακόμη και αν εισαγάγετε μια πολύ μεγάλη βιβλιοθήκη, το μέγεθος του τελικού αρχείου .swf μπορεί να εξακολουθεί να είναι αρκετά μικρό. Ωστόσο, προσέξτε ότι αυτό μπορεί να προκαλέσει προβλήματα εάν χρησιμοποιείτε την αντανάκλαση για να εκτελέσετε δυναμική φόρτωση κλάσης στην εφαρμογή σας (μια πιο προηγμένη δυνατότητα που δεν καλύπτεται σε αυτό το σεμινάριο).

Βασική ζωτικότητα: Tween, ακολουθία και παράλληλη

Εντάξει, τώρα ας κινούμαστε! ο flare.animate.Transition Το class είναι η βασική κατηγορία για όλες τις κινούμενες εικόνες. Σημαντικές υποκατηγορίες του Transition είναι η Tween, Sequence, να Parallel μεταβάσεις. Τα Tweens χρησιμοποιούνται για την κίνηση των ιδιοτήτων ενός αντικειμένου. Οι ακολουθίες χρησιμοποιούνται για την εκτέλεση μιας σειράς κινούμενων σχεδίων με τη σειρά. Οι παράλληλες μεταβάσεις εκτελούν ταυτόχρονα μια συλλογή μεταβάσεων. Ας ξεκινήσουμε με το Tween.

Ιδιότητες αντικειμένου Tweening

Τα βασικά της κλάσης Tween είναι απλά: παίρνουμε ένα αντικείμενο, δίνουμε ένα σύνολο τιμών ιδιοτήτων που θα θέλαμε να αλλάξουμε με την πάροδο του χρόνου και καθορίζουμε τη διάρκεια του χρόνου για αυτήν την αλλαγή. Χρησιμοποιώντας την εφαρμογή Tutorial από το Μέρος 1, ας περιστρέψουμε το αντικείμενο κοντέινερ. Προσθέστε την ακόλουθη γραμμή στο τέλος του κατασκευαστή κλάσης Tutorial:

 var tween: Tween = νέο Tween (κοντέινερ, 3, {περιστροφή: 360}); tween.play ();

Επίσης, βεβαιωθείτε ότι έχετε μια νέα δήλωση εισαγωγής στην κορυφή της τάξης σας, ώστε ο μεταγλωττιστής να γνωρίζει τι μιλάτε. Προσθέστε το στη λίστα εισαγωγών:

 εισαγωγή flare.animate.Tween;

(ΣΗΜΕΙΩΣΗ: μερικές φορές το Flex Builder θα προσθέσει αυτόματα μια δήλωση εισαγωγής για εσάς καθώς πληκτρολογείτε ένα νέο όνομα κλάσης. Εάν όχι, μια άλλη τεχνική είναι να τοποθετήσετε το δρομέα κειμένου στο το τέλος του νέου ονόματος τάξης και πληκτρολογήστε "Ctrl-Space" - αυτό θα δημιουργήσει μια νέα εισαγωγή για εσάς για την τάξη.)
Τώρα εκτελέστε την εφαρμογή σας - τα σημεία πρέπει να περιστρέφονται σε κύκλο για περίοδο 3 δευτερολέπτων.
Δείτε τι κάνει ο κατασκευαστής Tween:

• Το πρώτο επιχείρημα είναι το αντικείμενο του οποίου οι τιμές πρέπει να αναδοθούν
• Το δεύτερο επιχείρημα είναι το μήκος της κινούμενης εικόνας, σε δευτερόλεπτα
• Το τρίτο όρισμα είναι μια παρουσία αντικειμένου που απαριθμεί τις ιδιότητες προς κίνηση και τις τιμές-στόχους τους.
  • Τα ονόματα ιδιοτήτων πρέπει να ταιριάζουν ακριβώς με τις ιδιότητες του αντικειμένου εισαγωγής.
  • Επιτρέπονται ένθετες ιδιότητες, αλλά πρέπει να περικλείονται σε εισαγωγικά. Για παράδειγμα, {“data.profit”:50} είναι μια νόμιμη είσοδος εάν το αντικείμενο εισαγωγής έχει μια ιδιότητα που ονομάζεται δεδομένα η οποία με τη σειρά της έχει μια ιδιότητα που ονομάζεται κέρδος.

Η play Στη συνέχεια, η μέθοδος εκτελεί την κινούμενη εικόνα. ο play Η μέθοδος μπορεί επίσης να κληθεί με μία μόνο παράμετρο Boolean που υποδεικνύει εάν θα εκτελεστεί η κινούμενη εικόνα αντίστροφα.
Ίσως έχετε παρατηρήσει ότι η κίνηση περιστροφής παρουσιάζει κάποια επιτάχυνση. Αυτό συμβαίνει επειδή η προεπιλεγμένη ρύθμιση για Tween Το στιγμιότυπο είναι η χρήση κινούμενης εικόνας "αργής μετάβασης". Μπορείτε να ελέγξετε αυτές τις συμπεριφορές χρησιμοποιώντας Easing λειτουργίες. Αυτές οι λειτουργίες λαμβάνουν ως είσοδο την τρέχουσα πρόοδο κινούμενης εικόνας ως κλάσμα μεταξύ 0 και 1. Στη συνέχεια, επιστρέφουν ένα κλασμένο κλάσμα προόδου για να αλλάξει ο ρυθμός της κινούμενης εικόνας, συχνά με μη γραμμικό τρόπο.
Για να αφαιρέσετε την χαλάρωση (δηλαδή, χρησιμοποιήστε μια λειτουργία γραμμικής χαλάρωσης) μπορείτε να γράψετε: tween.easing = Easing.none. Απλά βεβαιωθείτε ότι έχετε εισαγάγει το flare.animate.Easing τάξη στην κορυφή του αρχείου.
Μη διστάσετε να πειραματιστείτε με άλλες λειτουργίες χαλάρωσης. Για παράδειγμα, οι λειτουργίες χαλάρωσης μπορεί να περιλαμβάνουν χαλάρωση (χειρισμός μόνο της έναρξης της κινούμενης εικόνας), χαλάρωση (χειρισμός μόνο το τέλος της κινούμενης εικόνας) ή και τα δύο. Για παράδειγμα, δοκιμάστε αυτό: tween.easing = Easing.easeOutBounce. Αυτό θα κάνει την περιστροφή να αναπηδά στο τέλος.
Πριν προχωρήσετε, δοκιμάστε να κινήσετε άλλες ιδιότητες του κοντέινερ, όπως οι τιμές θέσης, κλίμακας ή άλφα.

Σύνθετα κινούμενα σχέδια

Η Sequence και Parallel μαθήματα σας επιτρέπουν να ομαδοποιήσετε κινούμενα σχέδια μαζί. Η ακολουθία εκτελεί ένα σύνολο κινούμενων σχεδίων το ένα μετά το άλλο. Για παράδειγμα, δοκιμάστε αυτό:

 var t1: Tween = νέο Tween (κοντέινερ, 1, {y: 100}); var t2: Tween = νέο Tween (κοντέινερ, 1, {scaleX: 2}); var t3: Tween = νέο Tween (κοντέινερ, 1, {y: 300}); var t4: Tween = νέο Tween (κοντέινερ, 1, {scaleX: 1}); var seq: Sequence = νέα ακολουθία (νέα παράλληλη (t1, t2), νέα παράλληλη (t3, t4)); seq.play ();

Θα πρέπει επίσης να προσθέσετε μερικές νέες δηλώσεις εισαγωγής στο επάνω μέρος του αρχείου:

 εισαγωγή flare.animate.Parallel; εισαγωγή flare.animate.Sequence;

Αυτό δημιουργεί τέσσερα tweens: t1, t2, t3, να t4. Στη συνέχεια δημιουργεί δύο παράλληλες μεταβάσεις που εκτελούνται t1 και t2 μαζί και τρέξτε t3 και t4 μαζί. Οι παράλληλες μεταβάσεις στη συνέχεια εκτελούνται το ένα μετά το άλλο σε μια σειρά. Με αυτόν τον τρόπο, είναι εύκολο να δημιουργήσετε πιο περίπλοκα κινούμενα σχέδια.
Για πιο προηγμένες σύνθετες κινούμενες εικόνες, ρίξτε μια ματιά στο FlareLogo και flare.demos.Animation τάξεις στο flare.demos του έργου.

Batch Animation με Transitioners

Χρήση του Tween, Parallel, να Sequence μαθήματα, μπορείτε να πραγματοποιήσετε οποιονδήποτε αριθμό μετακινήσεων κινουμένων σχεδίων. Ωστόσο, όταν ασχολείστε με μεγάλες συλλογές αντικειμένων (συνηθισμένα στην οπτικοποίηση), μπορεί να είναι πόνος να χειρίζεστε χειροκίνητα ένα παρόμοιο μεγάλο σύνολο tweens. Επιπλέον, θα πρέπει να είναι εύκολο να εκτελείτε ξεχωριστές ρουτίνες για την κωδικοποίηση οπτικών ιδιοτήτων όπως διάταξη, χρώμα, μέγεθος, σχήμα και να μην χρειάζεται να ανησυχείτε για το χειρισμό κινούμενων σχεδίων. Ίσως θέλετε να κάνετε κινούμενες αλλαγές ή ίσως θέλετε μια στατική ενημέρωση. Σε κάθε περίπτωση, θα πρέπει να μπορείτε να επαναχρησιμοποιήσετε τον ίδιο κωδικό για την εκχώρηση τιμών.
Για να αντιμετωπίσει αυτές τις ανησυχίες, το Flare παρέχει το Transitioner τάξη. Οι transitioners απλοποιούν τη διαδικασία δημιουργίας κινούμενων σχεδίων για συλλογές αντικειμένων. Παίρνετε απλά ένα αντικείμενο και ορίζετε τις επιθυμητές ιδιότητες ένα προς ένα. Πίσω από τα παρασκήνια, ο μεταβατικός παράγοντας θα δημιουργήσει και θα επαναχρησιμοποιήσει αυτόματα τα απαραίτητα tweens για να μοντελοποιήσει την πλήρη κινούμενη εικόνα. Επιπλέον, εάν δεν είναι επιθυμητή η κινούμενη εικόνα, ο μεταβάτης μπορεί να ρυθμιστεί ώστε να ορίζει αμέσως τις τιμές ιδιοτήτων. Εν ολίγοις, ο μεταβατικός παράγοντας παρέχει ένα επίπεδο έμμεσης για την ενημέρωση ιδιοτήτων αντικειμένων - αυτές οι ενημερώσεις μπορούν να συλλεχθούν και, στη συνέχεια, να κινούνται ή να εφαρμοστούν αμέσως.
Ακολουθεί ένα απλό παράδειγμα χρήσης ενός μεταβατικού στην εφαρμογή φροντιστηρίου μας.

 var t: Transitioner = νέο Transitioner (2); για (var j: int = 0; j

Αυτό το παράδειγμα ζωντανεύει όλα τα sprites container σε ένα νέο τυχαίο y θέση και παράγοντας τυχαίας κατακόρυφης κλίμακας. Δημιουργούμε πρώτα ένα νέο Transitioner που θα πρέπει να δημιουργήσει μια κινούμενη εικόνα 2 δευτερολέπτων. Στη συνέχεια περνάμε από κάθε παιδικό sprite και χρησιμοποιούμε το μεταβατικό για να ορίσουμε τις ιδιότητες στο Tween.
Ο μεταβατικός $ τελεστής δηλώνει ότι θέλουμε να ορίσουμε μια τιμή-στόχο για το αντικείμενο εισαγωγής. Από προεπιλογή, είτε ένα νέο Tween έχει δημιουργηθεί ή υπάρχει Tween βρίσκεται για το τρέχον στοιχείο. ο $ Ο τελεστής επιστρέφει έπειτα ένα αντικείμενο στο οποίο να ορίσει την ιδιότητα-στόχο του tween.
Επιπλέον, οι μεταβατικοί μπορούν να χρησιμοποιηθούν για τη δημιουργία στατικών (μη κινούμενων) μεταβάσεων. Εάν ένας μεταβατικός immediate η ιδιότητα έχει οριστεί ως αληθής, δεν θα δημιουργήσει νέα Tweens. Αντ 'αυτού, ο τελεστής $ απλώς θα επιστρέψει την τιμή εισαγωγής. Αυτό σημαίνει ότι μπορείτε να δημιουργήσετε μεθόδους που ενημερώνουν τις τιμές χρησιμοποιώντας έναν μεταβατή και, στη συνέχεια, ελέγχετε αργότερα εάν θέλετε ή όχι αυτές οι τιμές να ενημερώνονται. Η τυπική "άμεση λειτουργία" Transitioner ανακτάται χρησιμοποιώντας το στατικό Transitioner.DEFAULT ιδιοκτησία. Με αυτόν τον τρόπο δεν χρειάζεται να διαθέσετε νέο Transitioner κατά την εκτέλεση άμεσων ενημερώσεων.
Τα transitioners χρησιμοποιούνται εκτενώς σε όλο το flare.vis πακέτο, επιτρέποντας στους σχεδιαστές οπτικοποίησης να ελέγχουν ποιες ενημερώσεις πρέπει να είναι κινούμενες και πώς.

Μέρος 3: Οπτικοποιήσεις

Τα δεδομένα φορτώνονται

Η βασική αναπαράσταση δεδομένων για το Flare χρησιμοποιεί απλά τους ενσωματωμένους τύπους δεδομένων Flash: Object και Array. Για παράδειγμα, ένας πίνακας δεδομένων μπορεί απλώς να αναπαρασταθεί ως μια σειρά αντικειμένων, τα οποία κάθε αντικείμενο περιέχει τα ονόματα και τις τιμές κάθε πεδίου δεδομένων. Ενώ είναι πιο αποτελεσματικές οι αναπαραστάσεις, αυτή η προσέγγιση παρέχει τη μεγαλύτερη ευελιξία, ενώ ταυτόχρονα εκμεταλλεύεται τις υπάρχουσες συμβάσεις ανάπτυξης Flash.
Για να φορτώσετε δεδομένα στο πρόγραμμα αναπαραγωγής Flash, υπάρχουν διάφορες προσεγγίσεις. Μια απλή προσέγγιση είναι να ενσωματώσετε τα δεδομένα σας στην ίδια την εφαρμογή. Με αυτόν τον τρόπο, τα δεδομένα λαμβάνονται μαζί με την εφαρμογή, η οποία είναι καλή για στατικά σύνολα δεδομένων. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε τη σημείωση αντικειμένου του ActionScript για να ορίσετε το σύνολο δεδομένων απευθείας ως μεταβλητή:

var data: Array = [{id: "Q1", sales: 10000, profit: 2400}, {id: "Q2", sales: 12000, profit: 2900}, {id: "Q3", πωλήσεις: 15000, κέρδος : 3800}, {id: "Q4", πωλήσεις: 15500, κέρδος: 3900}];

Ωστόσο, σε πολλές περιπτώσεις θα θελήσετε να φορτώσετε τα δεδομένα σας δυναμικά, είτε από μια ιστοσελίδα (μπορείτε να χρησιμοποιήσετε το JavaScript στο πρόγραμμα περιήγησης για να μεταβιβάσετε τιμές στο Flash) είτε από έναν διακομιστή στο Διαδίκτυο. Υπάρχουν πολλές προσεγγίσεις για να γίνει αυτό και θα πρέπει να επιλέξετε ό, τι λειτουργεί καλύτερα για τη συγκεκριμένη εφαρμογή σας. Για παράδειγμα, το ActionScript παρέχει επιπλέον τύπους δεδομένων και σύνταξη για εργασία XML δεδομένα χρησιμοποιώντας το ECMAScript για XML (E4X) πρότυπο.
Το Flare παρέχει επίσης ορισμένα βοηθητικά προγράμματα για τη φόρτωση εξωτερικών συνόλων δεδομένων. Υποστηρίζει τη φόρτωση δεδομένων από οποιονδήποτε διακομιστή στο Διαδίκτυο και τη μετατροπή αυτών των δεδομένων σε εσωτερικά αντικείμενα ActionScript. Οι τρέχουσες υποστηριζόμενες μορφές αρχείων είναι κείμενο οριοθετημένο με καρτέλες ("tab", μια τυπική μορφή αρχείου για την εξαγωγή δεδομένων από εργαλεία όπως το Excel), Γράφημα αντικειμένου JavaScript ("Json", μια κοινή μορφή δεδομένων για εφαρμογές ιστού) και ΓράφημαML ("Graphml", ένα XML μορφή για την αναπαράσταση δικτύων με κόμβους και άκρα).
Τα απομακρυσμένα δεδομένα φορτώνονται με flare χρησιμοποιώντας το flare.data.DataSource τάξη. Ακολουθεί ένα παράδειγμα χρήσης του για τη φόρτωση ενός αρχείου δεδομένων οριοθετημένου με καρτέλες:

var ds: DataSource = νέο DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// function για χειρισμό δεδομένων μόλις ολοκληρωθεί η φόρτωση var ds: DataSet = loader.data as DataSet; // τώρα κάντε κάτι με τα δεδομένα ...} )

Η DataSource Ο κατασκευαστής έχει δύο απαιτούμενα ορίσματα: τη διεύθυνση URL του συνόλου δεδομένων και μια συμβολοσειρά που δείχνει τη μορφή του αρχείου. Αυτήν τη στιγμή οι υποστηριζόμενες μορφές είναι "tab" (tab-delimited), "json" (JavaScript Object Notation) και "graphml" (GraphML).
Για σύνολα δεδομένων των οποίων το σχήμα (τα ονόματα και οι τύποι δεδομένων των πεδίων) ενδέχεται να είναι ασαφή, υπάρχει επίσης ένα τρίτο, προαιρετικό όρισμα κατασκευαστή που παίρνει ένα DataSchema τύπος. Δείτε το flare.data.DataSchema και flare.data.DataField μαθήματα για περισσότερα. Το σχήμα μπορεί να είναι χρήσιμο για τη διασφάλιση της σωστής ονομασίας των τιμών δεδομένων (π.χ., για ένα αρχείο οριοθετημένης καρτέλας που δεν περιέχει μια γραμμή κεφαλίδας) και να μετατραπούν σε κατάλληλους τύπους δεδομένων (π.χ., για δεδομένα JSON στα οποία οι αριθμητικές τιμές ήταν τυλιγμένες σε εισαγωγικά).
Για να φορτώσετε πραγματικά τα δεδομένα, καλείται η μέθοδος φόρτωσης DataSource, επιστρέφοντας a flash.net.URLLoader παράδειγμα. Ο φορτωτής μπορεί να χρησιμοποιηθεί για την παρακολούθηση της προόδου της λήψης (π.χ., εάν θέλετε να παράσχετε μια γραμμή προόδου) και παρέχει ένα συμβάν ειδοποίησης όταν ολοκληρωθεί η λήψη. Στο παραπάνω παράδειγμα, προσθέτουμε έναν ακροατή συμβάντων που θα ειδοποιείται όταν ολοκληρωθεί η λήψη. ο DataSource θα αναλύσει αυτόματα τα δεδομένα εισόδου, θα τα χαρτογραφήσει σε αντικείμενα ActionScript και θα αποθηκεύσει τα αποτελέσματα σε ένα flare.data.DataSet αντικείμενο. ο DataSet Η κλάση μπορεί να αντιπροσωπεύει δεδομένα πίνακα και δικτύου (κόμβος / άκρη).

Δημιουργία και διαχείριση οπτικών αντικειμένων

Τώρα θα θέλαμε να απεικονίσουμε ένα σύνολο δεδομένων. Για να γίνει αυτό, χαρτογραφούμε μεμονωμένες εγγραφές δεδομένων σε οπτικά στοιχεία. Το Flare παρέχει ένα σύνολο οπτικών αντικειμένων που αντιπροσωπεύουν τα δεδομένα. Ακολουθεί μια επισκόπηση των βασικών τάξεων που παρέχονται από το flare.vis.data πακέτο.

• DataSprite: Κατηγορία βάσης για sprites που αντιπροσωπεύουν οπτικά δεδομένα. DataSprite είναι μια υποκατηγορία του Flash Player Sprite τάξη. DataSprite περιλαμβάνει ένα data ιδιότητα όπου αποθηκεύεται η πλειάδα δεδομένων (ένα αντικείμενο ActionScript) και παρέχει επίσης πρόσθετες οπτικές μεταβλητές πέραν εκείνων που υποστηρίζονται από βασικά sprite, συμπεριλαμβανομένων των πεδίων χρώματος, σχήματος και μεγέθους και υποστήριξη για τη ρύθμιση θέσεων σε πολικές συντεταγμένες.
• NodeSprite: DataSprite παρουσία που αντιπροσωπεύει έναν κόμβο. Αυτός είναι ο προεπιλεγμένος τύπος που χρησιμοποιείται για την οπτικοποίηση δεδομένων. NodeSprite Οι παρουσίες μπορούν να συνδεθούν σε δομές δικτύου ή δέντρων από EdgeSprite περιπτώσεις.
• EdgeSprite: DataSprite παράδειγμα που αντιπροσωπεύει ένα άκρο. Ενα EdgeSprite συνδέει δύο NodeSprites. Οι κόμβοι είναι προσβάσιμοι μέσω του source και target ιδιότητες. EdgeSprites χρησιμοποιούνται για τη δημιουργία γραφημάτων και δέντρων, καθώς και για την αναπαράσταση γραμμών, όπως σε γραφήματα χρονοσειρών.

Συνήθως, το NodeSprites και το EdgeSprites δημιουργούνται και αποθηκεύονται στο flare.vis.data.Data τάξη, η οποία διαχειρίζεται όλα τα οπτικά στοιχεία για μία μόνο οπτικοποίηση. ο Data Η κλάση παρέχει μεθόδους για τη δημιουργία νέων οπτικών αντικειμένων για πλειάδες δεδομένων και για την αναπαράσταση μιας δομής γραφήματος.
Η Data Η κλάση παρέχει επίσης μεθόδους για διασχίζοντας και ενημερώνοντας τα περιεχόμενα στοιχεία δεδομένων. ο nodes και edges Οι ιδιότητες επιστρέφουν λίστες των κόμβων και των άκρων που περιέχονται στα δεδομένα. Κάθε μία από αυτές τις λίστες περιλαμβάνει ένα visit μέθοδος που σας επιτρέπει να περάσετε σε μια συνάρτηση που στη συνέχεια θα καλείται με κάθε κόμβο ή άκρη. Επίσης το setProperty και setProperties Οι μέθοδοι σάς επιτρέπουν να ορίσετε ταυτόχρονα τιμές ιδιοτήτων για όλους τους κόμβους ή τα άκρα. Αυτές οι μέθοδοι παίρνουν προαιρετικά ένα Transitioner ως επιχείρημα, ώστε να μπορείτε να κάνετε κινούμενη εικόνα της ενημέρωσης ιδιοκτησίας.
Για παράδειγμα, ο ακόλουθος κώδικας οδηγεί σε κινούμενη εικόνα ενός δευτερολέπτου στην οποία το χρώμα γραμμής για όλους τους κόμβους έχει οριστεί σε μπλε. (Σημειώστε ότι η hex σημείωση για DataSprite Οι τιμές χρώματος περιλαμβάνουν τα κανάλια άλφα, καθώς και κόκκινα, πράσινα, μπλε κανάλια).

data.nodes.setProperty ("lineColor", 0xff0000bb, νέο Transitioner (1)). play ();

Οι λίστες κόμβων και ακρών υποστηρίζουν επίσης προεπιλεγμένες τιμές ιδιοτήτων, χρησιμοποιώντας το setDefault, setDefaults, removeDefault, να clearDefaults μεθόδους. Οι προεπιλεγμένες τιμές θα οριστούν σε έναν κόμβο ή άκρη που δημιουργήθηκε πρόσφατα χρησιμοποιώντας την κατηγορία δεδομένων addNode or addEdgeFor μεθόδους.
Η Tree τάξη είναι μια υποκατηγορία του Data, εξειδικευμένο για την αναπαράσταση ενός δέντρου παρά για ένα γενικό γράφημα. ο Data Η τάξη υποστηρίζει την αυτόματη δημιουργία ενός Tree για παράδειγμα με τον υπολογισμό των δέντρων ενός γενικού γραφήματος. Μια σειρά από μεθόδους δημιουργίας δέντρων έκτασης - συμπεριλαμβανομένων των αλγόριθμων πρώτου εύρους, πρώτου βάθους και ελάχιστου δέντρου έκτασης - μπορούν να μεταδοθούν ως παράμετρος. Αυτοί οι υπολογισμοί εκτελούνται χρησιμοποιώντας το flare.analytics.graph.SpanningTree τάξη.
Για να δημιουργήσουμε πραγματικά αντικείμενα κόμβου και άκρων, χρησιμοποιούμε το addNode και addEdgeFor μεθόδους.

• addNode παίρνει μια πλειάδα δεδομένων εισόδου (an Object) και δημιουργεί ένα νέο NodeSprite για την οπτικοποίηση αυτών των δεδομένων.
• addEdgeFor παίρνει δύο υπάρχοντα NodeSprites και προσθέτει ένα EdgeSprite συνδέοντάς τα. Η μέθοδος εξαιρεί επίσης προαιρετικά μια πλειάδα δεδομένων (και πάλι, ένα Object που αντιπροσωπεύει οποιαδήποτε πεδία δεδομένων) για το άκρο.

Εδώ είναι ένα απλό παράδειγμα για τη δημιουργία NodeSprites για ένα σύνολο δεδομένων πίνακα, υποθέτοντας ότι έχουμε μια σειρά αντικειμένων δεδομένων:

λίστα var: Array; // μια σειρά αντικειμένων δεδομένων που έχουμε ήδη φορτώσει δεδομένα var: Data = new Data (); // ένα νέο κοντέινερ δεδομένων για κάθε (var o: Object in list) {data.addNode (o); }

Το αποτέλεσμα είναι α Data αντικείμενο που συμπληρώνεται με οπτικό DataSprite (κόμβοι ή άκρα) παρουσίες.
Στην πράξη, δεν χρειάζεται πάντα να συμπληρώνετε τα οπτικοποιημένα δεδομένα με μη αυτόματο τρόπο. Για να δημιουργήσετε ένα Data αντικείμενο για την απεικόνιση ενός φορτωμένου συνόλου δεδομένων, μπορείτε συχνά να χρησιμοποιήσετε μια μέθοδο ευκολίας αντ 'αυτού. ο Data.fromArray() η συνάρτηση δημιουργεί ένα Data παράδειγμα για δεδομένα πίνακα που αποθηκεύονται ως πίνακες αντικειμένων ActionScript, ενώ το Data.fromDataSet() μέθοδος δημιουργεί παρόμοια ένα Data παρουσία από ένα φορτωμένο DataSet αντικείμενο.

Κατασκευή οπτικοποίησης

Τώρα ας τα συνδυάσουμε όλα αυτά για να αρχίσουμε να κάνουμε οπτικοποιήσεις. ο Visualization η κλάση αντιπροσωπεύει μία μόνο οπτικοποίηση, συμπεριλαμβανομένων των οπτικών σημείων (αποθηκευμένα σε ένα Data παράδειγμα) και άξονες. Για να δημιουργήσουμε μια οπτικοποίηση, φορτώνουμε ένα σύνολο δεδομένων, προσθέτουμε τα δεδομένα σε μια οπτικοποίηση και δημιουργούμε τελεστές που καθορίζουν τον τρόπο οπτικοποίησης των δεδομένων. Εδώ είναι ένα παράδειγμα. Κοιτάξτε πρώτα τον κωδικό και μετά διαβάστε για να καταλάβετε τι κάνει κάθε μέρος.

πακέτο {import flare.data.DataSet; εισαγωγή flare.data.DataSource; εισαγωγή flare.scale.ScaleType; εισαγωγή flare.vis. Οπτικοποίηση; εισαγωγή flare.vis.data.Data; εισαγωγή flare.vis.operator.encoder.ColorEncoder; εισαγωγή flare.vis.operator.encoder.ShapeEncoder; εισαγωγή flare.vis.operator.layout.AxisLayout; εισαγωγή flash.display.Sprite; εισαγωγή flash.events.Event; εισαγωγή flash.geom.Rectangle; εισαγωγή flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Δημόσια τάξη Το Tutorial επεκτείνει το Sprite {private var vis: Visualization; Δημόσιο πρόγραμμα εκμάθησης () {loadData (); } ιδιωτική συνάρτηση 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; visualize (Data.fromDataSet (ds));}); } ιδιωτική λειτουργία visualize (data: Data): void {vis = new Visualization (data); vis.bounds = νέο ορθογώνιο (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (νέο AxisLayout ("data.date", "data.age")); vis.operators.add (νέο ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (νέο ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Ας δούμε κάθε μέθοδο.
Ο κατασκευαστής είναι απλός: απλά καλεί το loadData μέθοδος.
Η loadData Η μέθοδος δημιουργεί μια νέα πηγή δεδομένων και τη φορτώνει χρησιμοποιώντας τις μεθόδους που περιγράφηκαν προηγουμένως. Σε αυτήν την περίπτωση, το σύνολο δεδομένων αναφέρεται ανθρωποκτονίες στο νομό Λος Άντζελες το 2007, αποθηκευμένο σε μορφή οριοθετημένης καρτέλας. Όταν ολοκληρωθεί η φόρτωση, οι φορτωμένες πλειάδες δεδομένων προστίθενται στο a Data παράδειγμα χρησιμοποιώντας το fromDataSet μέθοδο ευκολίας. Κάτω από την κουκούλα, αυτό έχει ως αποτέλεσμα τη δημιουργία NodeSprites για την οπτικοποίηση κάθε στοιχείου δεδομένων. Τέλος, το visualize καλείται μέθοδος.
Η visualize μέθοδος ρυθμίζει την οπτικοποίηση. Να τι συμβαίνει σε κάθε βήμα:

• Μέρος 1: Αρχικοποίηση
  • Δημιουργείται μια νέα οπτικοποίηση για τα δεδομένα
  • Θέτουμε τα όρια για την οπτικοποίηση. Αυτό καθορίζει την περιοχή διάταξης.
  • Ρυθμίζουμε το x και y θέση της οπτικοποίησης μας και την προσθήκη της οπτικοποίησης στη λίστα εμφάνισης.
• Μέρος 2: Καθορισμός οπτικών κωδικοποιήσεων
  • Χρησιμοποιούμε διάταξη άξονα, τοποθετώντας «ημερομηνία» στον άξονα x και «ηλικία» στον άξονα y. ο AxisLayout Ο χειριστής διαμορφώνει επίσης αυτόματα τους άξονες για την απεικόνιση. Χρησιμοποιούμε τη σύνταξη “data.date” για να υποδηλώσουμε τις μεταβλητές δεδομένων, καθώς βρίσκονται μέσα στο NodeSprite'μικρό data ιδιοκτησία.
  • Προσθέτουμε μια χρωματική κωδικοποίηση, έτσι ώστε το χρώμα γραμμής ενός κόμβου να αντιπροσωπεύει τη μεταβλητή «αιτία» (αιτία θανάτου). Λέμε επίσης στον χρωματικό κωδικοποιητή ότι οι τιμές της μεταβλητής «αιτία» αντιπροσωπεύουν κατηγορίες (ScaleType.CATEGORIES). Ο κωδικοποιητής χρώματος θα χρησιμοποιήσει αυτές τις πληροφορίες για να επιλέξει αυτόματα μια κατάλληλη παλέτα χρωμάτων. Όπως θα δούμε σύντομα, μπορείτε επίσης να παρέχετε τη δική σας παλέτα χρωμάτων.
  • Προσθέτουμε μια κωδικοποίηση σχήματος, έτσι ώστε το σχήμα ενός αντικειμένου να αντιπροσωπεύει τη «φυλή» ενός θύματος.
  • Ορίζουμε τις προεπιλεγμένες ιδιότητες - ορίζουμε το χρώμα πλήρωσης των κόμβων σε πλήρη διαφάνεια και ορίζουμε το πλάτος της γραμμής σε 2 pixel.
  • Τέλος, ονομάζουμε το update μέθοδος. Αυτό τρέχει όλους τους χειριστές με τη σειρά.

Ενημέρωση οπτικοποίησης

Μόλις δημιουργηθεί μια οπτικοποίηση, ίσως θέλουμε να την ενημερώσουμε. Για παράδειγμα, ίσως θα θέλαμε να αλλάξουμε την κωδικοποίηση χρώματος, αντί να απεικονίσουμε το φύλο των ανθρώπων.
Αρχικά, ας προσθέσουμε μια νέα μέθοδο στην τάξη:

 ιδιωτική συνάρτηση colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = νέο ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (νέο Transitioner (2)). play (); }

Αυτή η μέθοδος:

1. Ανακτά τον δεύτερο τελεστή (ο χειριστής στο ευρετήριο 1) και τον μεταδίδει στο a ColorEncoder
2. Αλλάζει το source ιδιότητα για τον χρωματικό κωδικοποιητή να χρησιμοποιεί τη μεταβλητή "data.sex"
3. Ορίζει μια νέα παλέτα χρωμάτων (σε αυτήν την περίπτωση, κόκκινο για γυναίκες, μπλε για άντρες - η σειρά χρωμάτων ταιριάζει με την αλφαβητική σειρά των ετικετών)
4. Ζωντανεύει την αλλαγή καλώντας την ενημέρωση με ένα Transitioner ρυθμιστεί για μια κινούμενη εικόνα δύο δευτερολέπτων. ο vis.update η μέθοδος επιστρέφει το Transitioner, έτσι μπορούμε να καλέσουμε το παιχνίδι με την τιμή επιστροφής της ενημέρωσης. (Σημείωση: μπορείτε επίσης να παραλείψετε το Transitioner και απλώς δώστε τον αριθμό 2 ως επιχείρημα update. Ενα νέο Transitioner θα δημιουργηθεί αυτόματα και θα επιστραφεί.)

Τώρα πρέπει να ολοκληρώσουμε την εφαρμογή, ώστε να μπορούμε να ενεργοποιήσουμε την ενημέρωση διαδραστικά. Για να το κάνετε αυτό, προσθέστε τον ακόλουθο κώδικα στον κατασκευαστή:

 // προσθέστε ένα κουμπί ετικέτας var με δυνατότητα κλικ: TextSprite = νέο TextSprite ("Color by Gender"); addChild (κουμπί); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Αυτός ο κωδικός:

1. Δημιουργεί μια νέα ετικέτα κειμένου (TextSprite είναι μια βοηθητική τάξη από το flare.display πακέτο)
2. Προσθέτει την ετικέτα στην εφαρμογή και ορίζει τη θέση της
3. Σέτς buttonMode σε true (αυτό κάνει τον κέρσορα να εμφανίζεται όταν τοποθετείτε το ποντίκι πάνω από την ετικέτα
4. Προσθέτει ένα πρόγραμμα ακρόασης συμβάντων που ενεργοποιείται όταν κάνετε κλικ στην ετικέτα. Προσθέτουμε μια συνάρτηση επανάκλησης που καλεί το colorByGender μέθοδος.

Για να λειτουργήσει ο παραπάνω κώδικας, θα πρέπει να συμπεριλάβουμε αυτές τις πρόσθετες δηλώσεις εισαγωγής στο επάνω μέρος του αρχείου:

 εισαγωγή flash.events.MouseEvent; εισαγωγή flare.animate.Transitioner; εισαγωγή flare.display.TextSprite; εισαγωγή flare.util.palette.ColorPalette;

Τώρα θα πρέπει να μπορείτε να μεταγλωττίσετε και να εκτελέσετε την εφαρμογή. Κάνοντας κλικ στην ετικέτα "Χρώμα κατά φύλο" θα πρέπει να ζωντανεύει η αλλαγή στην κωδικοποίηση χρώματος.

Επόμενα βήματα

Τα παραπάνω παραδείγματα δείχνουν τα βασικά στοιχεία του Flash και της βιβλιοθήκης Flare, αλλά υπάρχουν πολλές ακόμη δυνατότητες που δεν έχουν ακόμη καλυφθεί. Προς τα εμπρός, προτείνουμε (α) να ελέγξετε τόσο το Flash όσο και το Flare API τεκμηρίωση για να αποκτήσετε μια αίσθηση όλων των διαθέσιμων τάξεων, και (β) σκάψιμο μέσω των επιδείξεων Flare για να δείτε πώς μπορούν να χρησιμοποιηθούν οι ίδιες αρχές που παρουσιάζονται εδώ για την κατασκευή ορισμένων άλλων οπτικοποιήσεων. Ή, ακόμα καλύτερα, ανακαλύψτε τον πηγαίο κώδικα Flare για να μάθετε τι συμβαίνει κάτω από την κουκούλα.
Για να βοηθήσετε σε αυτήν τη διαδικασία, ακολουθεί μια γενική επισκόπηση των υπο-πακέτων στο flare.vis:

• flare.vis.axis: παρέχει άξονες, ετικέτες και γραμμές πλέγματος
• flare.vis.controls: χειριστές αλληλεπίδρασης για επιλογή, ζουμ και άλλα
• flare.vis.data: οπτικά αντικείμενα που αντιπροσωπεύουν στοιχεία δεδομένων
• flare.vis.data.render: pluggable renderers που σχεδιάζουν DataSprites
• flare.vis.events: τύποι συμβάντων που χρησιμοποιούνται στο πλαίσιο flare
• flare.vis.legend: αντιπροσωπεύει θρύλους για την περιγραφή οπτικών κωδικοποιήσεων
• flare.vis.operator: δομικά στοιχεία για τον ορισμό των απεικονίσεων
• flare.vis.palette: παλέτες για τιμές χρώματος, σχήματος και μεγέθους
• flare.vis.util: γενικές τάξεις χρησιμότητας

Τώρα πρέπει να γνωρίζετε αρκετά για να κατανοήσετε τα demo στο flare.demos πακέτο. Μη διστάσετε να παίξετε, να τροποποιήσετε, να αντιγράψετε, να επικολλήσετε και να δημιουργήσετε τις επιδείξεις για να κατανοήσετε καλύτερα τον τρόπο λειτουργίας του Flash και του Flare.

Links

Λήψεις

Εργαλεία

Άλλοι τεχνικοί οδηγοί

Υποστήριξη

Πηγή: https://blokt.com/tool/prefuse-flare