भड़कना | वेब के लिए डेटा विज़ुअलाइज़ेशन

फ्लेयर इंटरैक्टिव डेटा विज़ुअलाइज़ेशन बनाना आसान बनाता है

अपनी खुद की विज़ुअलाइज़ेशन बनाना शुरू करने के लिए, डाउनलोड भड़कना और नीचे दिए गए ट्यूटोरियल के माध्यम से काम करते हैं। क्या और मदद चाहिये? दौरा करना सहायता मंच (आपको एक की आवश्यकता होगी SourceForge लॉगिन करने के लिए पोस्ट)।

फ्लेयर एक ओपन-सोर्स सॉफ्टवेयर है जिसे बीएसडी लाइसेंस के तहत जारी किया गया है, जिसका अर्थ है कि इसे स्वतंत्र रूप से तैनात किया जा सकता है और संशोधित किया जा सकता है (और $ $ के लिए बेचा भी जाता है)। फ्लेयर के डिजाइन को इसके पूर्ववर्ती प्रीफ्यूज, जावा के लिए एक विज़ुअलाइज़ेशन टूलकिट से अनुकूलित किया गया था।

अनुप्रयोगों

घोषणाएं

• 2010.10.07: फ्लेयर डेवलपमेंट को समुदाय के लिए खोल दिया गया है और स्रोत SourceForge से स्थानांतरित कर दिया गया है GitHub पर एक नया घर। चमक 2009.01.24 अभी भी अंतिम आधिकारिक रिलीज है और (अब कम से कम) ट्यूटोरियल और प्रलेखन इसे दर्शाते हैं। GitHub पर विकास संस्करण अब फ़्लैश प्लेयर 10 के साथ-साथ कई अन्य छोटे सुधारों और परिवर्तनों के लिए बेहतर समर्थन है।
• 2009.01.24: चमक 2009.01.24 जारी कर दिया गया है। यह कई बग फिक्स और अपडेट के साथ एक रखरखाव रिलीज है। देखें रिलीज नोट्स अधिक जानकारी के लिए। यह फ़्लैश प्लेयर 9 के लिए अंतिम रूप से जारी की गई योजना है - भविष्य के संस्करण 10 संस्करण में माइग्रेट करेंगे।
• 2008.07.30: चमक 2008.07.29 जारी कर दिया गया है। यह कई नई विशेषताओं और वास्तु सुधारों को पेश करने वाली एक प्रमुख रिलीज़ है। देखें रिलीज नोट्स अधिक जानकारी के लिए.
• 2008.07.30: चमक 2008.08.08 जारी कर दिया गया है। इस रिलीज़ में बेहतर लीजेंड सपोर्ट, ट्रांज़िशन, बग फिक्स, और कपलिंग को कम करने और उपयोगिता वर्गों को समेकित करने के लिए एक रीफैक्टरिंग शामिल है। देखें रिलीज नोट्स अधिक जानकारी के लिए.

ट्यूटोरियल

एक्शनस्क्रिप्ट और फ्लेयर सीखने के लिए एक कदम-दर-चरण ट्यूटोरियल।

Getting Started

पहला कदम यह है कि अपने विकास उपकरण स्थापित करें।

1. एक कार्यशील फ़्लैश विकास वातावरण सेट करें। दो दृष्टिकोण हैं। हम सादगी के लिए पहले की सलाह देते हैं, लेकिन दूसरे दृष्टिकोण का उपयोग करने के लिए अधिक उन्नत उपयोगकर्ताओं का स्वागत है।
   • विकल्प 1 (सरल): एडोब फ्लेक्स बिल्डर स्थापित करें.
     • यह ActionScript / Flex अनुप्रयोगों के लिए पूर्ण विकास का वातावरण है। यह सभी प्रमुख प्लेटफार्मों (विंडोज, मैक, यूनिक्स) के लिए उपलब्ध है। जो उपयोगकर्ता पहले से ही ग्रहण आईडीई का उपयोग करते हैं, वे फ्लेक्स बिल्डर को एक ग्रहण प्लग-इन के रूप में भी स्थापित कर सकते हैं।
     • फ्लेक्स बिल्डर का उपयोग करने के लिए चेतावनी यह है कि यह वाणिज्यिक सॉफ्टवेयर है और यह केवल सीमित परीक्षण अवधि के लिए काम करेगा। हालांकि, Adobe विश्वविद्यालय के छात्रों, शिक्षकों और कर्मचारियों को मुफ्त फ्लेक्स बिल्डर लाइसेंस प्रदान करता है।
   • विकल्प 2 (अधिक जटिल): मुक्त फ्लेक्स एसडीके स्थापित करें
     • यह मूल ActionScript / Flex कंपाइलर स्थापित करेगा: mxmlc और compc। तब आप अपने स्वयं के बिल्ड वातावरण को सेट कर सकते हैं, उदाहरण के लिए, का उपयोग करके make or ant सिस्टम का निर्माण। फ्लेयर एक के साथ पैक किया जाता है build.xml के साथ उपयोग के लिए फ़ाइल अपाचे चींटी निर्माण प्रणाली। एक बार चींटी स्थापित हो जाने के बाद, बस खोलें build.xml एक पाठ संपादक में फ़ाइल, अपने फ्लेक्स को इंगित करने के लिए पहली जोड़ी लाइनों को बदलें एसडीके स्थापना, और फिर उपयोग करें ant पुस्तकालयों को संकलित करने के लिए। हम फ्लेक्स विकास के लिए एडोब लैब्स के चींटी कार्यों का उपयोग करते हैं।
     • इस दृष्टिकोण का लाभ यह है कि सभी सॉफ्टवेयर मुफ्त हैं, और आप पर समाप्त नहीं होंगे। हालाँकि, आप स्वत: संकलन, परियोजना प्रबंधन और फ्लेक्स बिल्डर द्वारा प्रदान किए गए ऑटो-पूर्ण जैसी सुविधाओं से चूक जाते हैं।
2. डाउनलोड प्रीफ़्यूज़ फ्लेयर लाइब्रेरीज़।
   • डाउनलोड एक ज़िप फ़ाइल है जिसमें एक्शनस्क्रिप्ट लाइब्रेरी प्रोजेक्ट्स का एक सेट है। यदि आप फ्लेक्स बिल्डर का उपयोग कर रहे हैं, तो अपने प्राथमिक कार्यक्षेत्र निर्देशिका में फ़ाइलों को अनज़िप करें। ट्यूटोरियल के दौरान हम उन्हें फ्लेक्स बिल्डर में आयात करेंगे और विज़ुअलाइज़ेशन बनाने के लिए उनका उपयोग करेंगे!
   • सॉफ्टवेयर वर्तमान में एक अल्फा संस्करण है, और इसलिए कुछ बग और सीमाएं अपेक्षित हैं। हम जितनी जल्दी हो सके समस्याओं को ठीक कर देंगे, और ऊपर दिए गए लिंक हमेशा सबसे हाल के संस्करण की ओर इशारा करेंगे।

फ्लैश और एक्शनस्क्रिप्ट 3 का परिचय

इंटरएक्टिव ग्राफिक्स के लिए फ्लैश एक शानदार वातावरण है और एक्शनस्क्रिप्ट 3 प्रोग्रामिंग भाषा के हालिया जोड़ के साथ, यह अभी बहुत अधिक शक्तिशाली और कुशल बन गया है। हालांकि AS3 का पूरा परिचय इस ट्यूटोरियल के दायरे से परे है, यहाँ कुछ संसाधन दिए गए हैं जो आपको उपयोगी लगेंगे:

• Adobe अतिरिक्त संसाधनों के लिंक के साथ AS3 का अवलोकन प्रदान करता है।
• आवश्यक ActionScript 3 ओ'रिली प्रकाशन से कॉलिन मॉक आपकी शुरुआत करने में मदद करने के लिए एक शानदार किताब है। आप ऐसा कर सकते हैं इसे यहाँ ऑनलाइन एक्सेस करें (कुछ संस्थान, जैसे विश्वविद्यालय, मुफ्त में पहुंच प्रदान करते हैं)।
• एडोब फ्लेक्स एपीआई संदर्भ विभिन्न वर्गों और उपलब्ध तरीकों को समझने के लिए अमूल्य है। हम केवल कक्षाओं में केंद्रित होंगे flash.* संकुल।

यह ट्यूटोरियल एक्शनस्क्रिप्ट सिंटैक्स और प्रकारों के साथ-साथ ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग की अवधारणाओं के साथ एक बुनियादी परिचय मानता है।

भाग 1: DisplayObjects

परिचय

फ्लैश मॉडल का उपयोग कर एक 2 डी दृश्य दृश्य दृश्य-चित्र। दृश्य वस्तुओं को एक पदानुक्रम में आयोजित किया जाता है, जिसमें बाल वस्तुओं को माता-पिता के समन्वय स्थान में परिभाषित किया जाता है। आप अक्सर इस दृश्य को इस रूप में संदर्भित देखेंगे प्रदर्शन सूची दोनों एडोब के प्रलेखन और फ्लैश प्रोग्रामिंग पर पुस्तकों में।
प्रदर्शन सूची में सबसे ऊपर नोड हमेशा होता है Stage वस्तु। स्टेज में हमेशा एक और एक ही बच्चा होता है। इसे कहते हैं root, और सभी दृश्य आइटम रूट के नीचे हैं। आमतौर पर, रूट आपका वास्तविक फ्लैश एप्लीकेशन है। हम जल्द ही इस पर वापस आएंगे।
सभी दृश्य आइटम जिन्हें प्रदर्शन सूची में जोड़ा जा सकता है, के उदाहरण हैं DisplayObject कक्षा। के उपवर्ग DisplayObject शामिल Bitmap (छवियों के लिए), TextField (इंटरेक्टिव टेक्स्ट क्षेत्रों के लिए), और Video (YouTube सोचो)। हालांकि, सबसे आम उदाहरण हैं Sprite और Shape कक्षाएं। संदर्भ के लिए इन वर्गों में से अधिकांश में पाया जा सकता है flash.display पैकेज (हालांकि अंततः आपको संभावना मिल जाएगी flash.text उपयोग का पैकेज, भी)।
RSI Sprite क्लास फ़्लैश प्लेयर द्वारा उपयोग की जाने वाली सबसे उपयोगी, सामान्य दृश्य वस्तु है। स्प्राइट दृश्य वस्तुएं हैं जिनमें दोनों ड्राइंग सामग्री होती है और प्रदर्शन सूची (ए) में उप-नोड्स के लिए एक कंटेनर के रूप में काम कर सकती है Sprite वर्ग उपवर्गों flash.display.DisplayObjectContainer कक्षा)। इसके विपरीत, Shape कक्षा में ड्राइंग सामग्री हो सकती है, लेकिन उप-नोड्स को पकड़ नहीं सकता है। नतीजतन, आकार कम मेमोरी का उपयोग करते हैं, लेकिन बहुत कम लचीले होते हैं। सरलता के लिए, हम इस ट्यूटोरियल में स्प्राइट्स पर ध्यान केंद्रित करेंगे।

एक नयी एप्लीकेशन बनाऊ

सबसे पहले, एक नया फ़्लैश एप्लिकेशन बनाएं। ऐसा करने के लिए, फ्लेक्स बिल्डर खोलें और सुनिश्चित करें कि आप "फ्लेक्स डेवलपमेंट" परिप्रेक्ष्य में हैं (अक्सर ऊपरी दाहिने हिस्से में काले और सफेद "एफएक्स" आइकन पर क्लिक करके पहुंचते हैं)।
बाईं ओर "नेविगेटर" फलक में, प्रदर्शन पर क्लिक करें और "नया> एक्शनस्क्रिप्ट प्रोजेक्ट" चुनें। परिणामी संवाद में, प्रोजेक्ट नाम के रूप में "ट्यूटोरियल" टाइप करें, फिर "फिनिश" पर क्लिक करें। यह आपके लिए एक नया प्रोजेक्ट बनाएगा।
अब आपको "नेविगेटर" फलक में एक "ट्यूटोरियल" फ़ोल्डर देखना चाहिए। इस फ़ोल्डर के भीतर, आपको "Tutorial.as" नामक एक फ़ाइल देखनी चाहिए। यह आपकी मुख्य एप्लिकेशन फ़ाइल है। इसे खोलें, अगर यह पहले से ही खुला नहीं है।
फ़ाइल के अंदर, आपको इस वर्ग के लिए मूल मचान दिखाई देगा:

पैकेज {आयात Flash.display.Sprite; सार्वजनिक वर्ग ट्यूटोरियल स्प्राइट {सार्वजनिक फ़ंक्शन ट्यूटोरियल (} {}}} का विस्तार करता है

ध्यान दें कि यह वर्ग विस्तार करता है Sprite कक्षा। क्योंकि यह हमारा मुख्य एप्लिकेशन क्लास है, जब हम एप्लिकेशन को इंस्टेंस चलाते हैं Tutorial क्लास अपने आप ही डिस्प्ले लिस्ट में जुड़ जाएगी root (का एक और एकमात्र बच्चा Stage).
सूचना यह भी है कि एक निर्माणकर्ता स्वचालित रूप से बनाया गया है। एप्लिकेशन लॉन्च होने पर यह कंस्ट्रक्टर कहा जाएगा। C, C ++ या Java जैसी प्रोग्रामिंग लैंग्वेज से परिचित लोगों के लिए, एप्लीकेशन क्लास के लिए कंस्ट्रक्टर बहुत कुछ पसंद करता है main उन अन्य भाषाओं में कार्य करते हैं।
जगह में इस नए आवेदन मचान के साथ, हम दृश्य वस्तुओं के साथ खेलना शुरू कर सकते हैं। हालांकि, एक चीज है जिसे हम पहले करना चाहते हैं। सीधे वर्ग घोषणा के ऊपर एक नई पंक्ति जोड़ें ("public class Tutorial…)) लाइन जो कहती है:

[एसडब्ल्यूएफ (चौड़ाई = "800", ऊंचाई = "600", पृष्ठभूमि का रंग = "# फाफ्फ़", फ्रेमरेट = "30")]

यह लाइन आपके एप्लिकेशन के लिए डिफ़ॉल्ट सेटिंग्स को परिभाषित करती है (जो आपके प्रोजेक्ट के "बिन" डायरेक्टरी में .swf फाइल के रूप में संकलित और सहेजी गई है)। ऊपर, हमने अपने आवेदन के लिए आकार, पृष्ठभूमि का रंग और लक्ष्य फ्रेम दर (फ्रेम प्रति सेकंड) निर्धारित किया है।

स्प्राइट

जैसे सभी DisplayObjects, Sprite बॉक्स के ठीक बाहर कई दृश्य गुणों का समर्थन करता है। इसमें शामिल है x, y, scaleX, scaleY, rotation, तथा alpha गुण। ये क्रमशः एक स्प्राइट की स्थिति, आकार, अभिविन्यास और पारदर्शिता को बदलते हैं (और इसके सभी बच्चों को याद रखें! याद रखें, हम यहां एक दृश्य का उपयोग कर रहे हैं)।
हालाँकि, इन मूल्यों का अभी तक कोई मतलब नहीं है, क्योंकि स्प्राइट में डिफ़ॉल्ट रूप से कुछ भी नहीं होता है। हम अपनी स्वयं की सामग्री खींचकर शुरू करेंगे।
हर स्प्राइट में ए भी होता है graphics संपत्ति। हम इसका उपयोग ग्राफिक्स के लिए आकर्षित करने के लिए कर सकते हैं Sprite। graphics संपत्ति का एक उदाहरण है flash.display.Graphics वर्ग, जो कई वेक्टर ड्राइंग कमांड प्रदान करता है।
नीचे दिए गए उदाहरण में, हम कई चीजें करते हैं।

• सबसे पहले, हम एक नया बनाते हैं Sprite.
• दूसरा, हम स्प्राइट का उपयोग करते हैं graphics ग्रे फिल और ब्लैक आउटलाइन के साथ एक सर्कल बनाना।
  • beginFill वर्तमान भरने रंग और शैली सेट करता है। पहला तर्क हेक्स अंकन में रंग है, और दूसरा तर्क अल्फा मान है, जो पूरी तरह से पारदर्शी के लिए 0 से लेकर 1 तक पूरी तरह से अपारदर्शी के लिए है।
  • lineStyle वर्तमान स्ट्रोक रंग और शैली सेट करता है। पहला तर्क लाइन की चौड़ाई है, दूसरा तर्क रंग है।
  • drawCircle हमारे स्प्राइट के समन्वय स्थान में बिंदु 10 पर त्रिज्या 0,0 का एक चक्र खींचता है।
• तीसरा, हम स्प्राइट को अपने मुख्य अनुप्रयोग के बच्चे के रूप में जोड़ते हैं (ए Tutorial स्प्राइट)।
• चौथा, हम निर्धारित करते हैं x और y हमारे प्रेत की स्थिति।
• पांचवां, हम कुछ डिबगिंग आउटपुट जोड़ते हैं। trace कंसोल के लिए एक स्ट्रिंग प्रिंट करता है। यह आउटपुट केवल "डिबग" मोड में ऐप चलाते समय दिखाई देता है।

यहाँ कोड है:

पैकेज {आयात Flash.display.Sprite; [एसडब्ल्यूएफ (चौड़ाई = ""००", ऊंचाई = "६००", पृष्ठभूमि का रंग = "# फाफ्फ़", फ्रेमरेट = "३०")] सार्वजनिक वर्ग ट्यूटोरियल स्प्राइट का विस्तार करता है {सार्वजनिक फ़ंक्शन ट्यूटोरियल () {var sprite: स्प्राइट = नया स्प्राइट () ; sprite.graphics.beginFill (800xcccccc, 600); sprite.graphics.lineStyle (30, 0x0.5); sprite.graphics.drawCircle (1, 0, 000000); this.addChild (स्प्राइट); sprite.x = 0; sprite.y = 0; ट्रेस ("हमारा स्प्राइट इस पर है:" + स्प्राइट.एक्स + "," + स्प्राइट.वाई); }}}

एप्लिकेशन चलाएं ("Tutorial.as" पर राइट क्लिक करें और "Run As> Flex Application" चुनें)। आपको ऊपरी बाएं कोने में काले रंग की रूपरेखा के साथ एक ग्रे सर्कल देखना चाहिए, जो बिंदु 50, 50 पर केंद्रित है। यदि आप एप्लिकेशन को डिबग मोड में चलाते हैं ("डीबग अस> फ्लेक्स एप्लिकेशन" का चयन करें), तो आपको स्ट्रिंग को भी देखना चाहिए "हमारा स्प्राइट पर है: उत्पादन कंसोल में 50, 50 ”।

नेस्टेड स्प्रिट

अब हम अपने सीन को थोड़ा और दिलचस्प बनाते हैं। आइए हमारे स्प्राइट जनरेशन कोड को एक नई विधि पर ले जाकर शुरू करें। हम इस पद्धति को अपनी कक्षा में शामिल करेंगे:

 निजी फ़ंक्शन क्रिचेक्रेल (x: संख्या, y: संख्या): स्प्राइट {var sprite: स्प्राइट = नया स्प्राइट (); sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); sprite.x = x; sprite.y = y; स्प्राइट वापस; }

अगला, हम अपने निर्माता में कोड को प्रतिस्थापित करते हैं। सबसे पहले, हम कंटेनर नामक एक नया स्प्राइट बनाते हैं जिसका उपयोग हम मंडलियों के संग्रह को करने के लिए करेंगे। हम इसे अपने चरण के केंद्र में रखते हैं। दूसरा, हम हलकों का एक गुच्छा बनाने के लिए एक लूप का उपयोग करते हैं। यहां, हम मूल कंटेनर के 0,0 बिंदु के चारों ओर सममित रूप से मंडलियां बनाते हैं। हमारा नया कंस्ट्रक्टर अब इस तरह दिखता है:

 सार्वजनिक समारोह ट्यूटोरियल () {var कंटेनर: स्प्राइट = नया स्प्राइट (); कंटेनर। x = 400; कंटेनर.य = 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)); }}

एप्लिकेशन का नया संस्करण चलाएँ। आपको एप्लिकेशन के बीच में दस मंडलियों की एक पंक्ति देखनी चाहिए।
अब हम कंटेनर को संशोधित कर सकते हैं ताकि उसके भीतर के सभी मंडलियों को अपडेट कर सकें। कंटेनर स्प्राइट पर विभिन्न दृश्य चर सेट करने के साथ खेलने का प्रयास करें। उदाहरण के लिए, संशोधित करें x, y, scaleX, scaleY, rotation, तथा alpha गुण।

अन्य विषय

फ्लैश विकल्प प्रदान करने वाले मूल विकल्पों के साथ आप बहुत कुछ कर सकते हैं। दुर्भाग्य से, वे थोड़ा परे हैं कि हमारे पास यहां के लिए क्या समय है। पता लगाने के लिए कुछ चीजों में इमेज फिल्टर शामिल हैं (देखें flash.filters पैकेज), जो आपको उनके उपयोग से वस्तुओं को प्रदर्शित करने के लिए दृश्य प्रभाव जोड़ने की अनुमति देता है filters संपत्ति, और विभिन्न विकल्पों में उपलब्ध है flash.display.Graphics भरण और रेखा शैलियों सहित वर्ग, और कई और अधिक 2D ड्राइंग दिनचर्या।

भाग 2: एनिमेशन

अब जब हम दृश्य ऑब्जेक्ट बना सकते हैं, तो उन्हें कुछ जीवन देना शुरू करने का समय है। भड़कना भी शामिल है flare.animate पैकेज यह आसान बनाने में मदद करने के लिए। सबसे पहले, हमें फ्लेक्स बिल्डर में उपयोग के लिए भड़क पुस्तकालयों को आयात करने की आवश्यकता है।

पुस्तकालयों का आयात करना

आगे बढ़ने से पहले, सुनिश्चित करें कि आपके पास फ्लेक्स लाइब्रेरी फ्लेक्स बिल्डर के भीतर परियोजनाओं के रूप में भरी हुई हैं। आप पहले से ही अपने मुख्य फ्लेक्स बिल्डर कार्यक्षेत्र निर्देशिका में भड़कना फ़ाइलों को खोलना चाहिए था। अगला कदम उन्हें फ्लेक्स बिल्डर वातावरण में आयात करना है:

• सुनिश्चित करें कि आप "फ्लेक्स डेवलपमेंट" के परिप्रेक्ष्य में हैं।
• दाईं ओर बाईं ओर नाविक फलक पर क्लिक करें।
• पॉपअप मेनू में "आयात करें" चुनें।
• संवाद में, "सामान्य> मौजूदा परियोजनाओं को कार्यक्षेत्र में" चुनें और "अगला" बटन पर क्लिक करें।
• अपने फ्लेक्स बिल्डर कार्यक्षेत्र निर्देशिका में नेविगेट करने के लिए "रूट निर्देशिका का चयन करें" विगेट्स का उपयोग करें
• अब आपको "प्रोजेक्ट:" पैनल में सूचीबद्ध फ्लेयर प्रोजेक्ट्स को देखना चाहिए।
• "भड़कना" और "flare.demos" परियोजनाओं का चयन करें और फिर "समाप्त" बटन पर क्लिक करें।

अब आपको नेविगेटर फलक में भड़कने वाली परियोजनाओं को देखना चाहिए। अब आप प्रत्येक लाइब्रेरी और डेमो दोनों के लिए स्रोत कोड ब्राउज़ कर सकते हैं।

फ्लेयर लाइब्रेरी का अवलोकन

यहाँ फ्लेयर टूलकिट का त्वरित अवलोकन है। के अंदर flare परियोजना, "src / भड़कना" फ़ोल्डर के अंदर देखो। आपको विभिन्न सुविधाएँ प्रदान करने वाले कई पैकेज मिलेंगे:

• analytics: आंकड़ों की गणना और डेटा का विश्लेषण करने के लिए ऑपरेटर
• animate: एनिमेशन बनाने के लिए उपकरण
• data: डेटा सेट पढ़ने और लिखने के तरीके
• display: DisplayObject प्रकार जो उन लोगों द्वारा प्रदान किए गए हैं flash.display
• flex: फ्लेक्स अनुप्रयोगों में फ्लेयर्ड विज़ुअलाइज़ेशन को एम्बेड करने के लिए एक आवरण
• physics: भौतिक प्रभाव या बल-निर्देशित लेआउट के लिए एक भौतिकी इंजन
• query: ActionScript ऑब्जेक्ट के लिए एक क्वेरी प्रोसेसर
• scale: डेटा स्केल, जैसे लीनियर, लॉग और टाइम स्केल को संभालने के लिए कक्षाएं
• util: आमतौर पर आवश्यक कार्य प्रदान करने वाली उपयोगिता वर्गों का एक समूह
• vis: भड़कना दृश्य घटकों और ऑपरेटरों

वहाँ भी है flare.demos प्रोजेक्ट, जो भड़क घटकों को बनाने के लिए कई उदाहरण प्रदान करता है।

एक अन्य परियोजना के भीतर एक पुस्तकालय का आयात करना

अपनी खुद की परियोजनाओं में भड़क का उपयोग करने के लिए, आपको अपनी परियोजना सेटिंग्स को अपडेट करना होगा। यहाँ है कि कैसे करना है:

1. नेविगेटर फलक में, "ट्यूटोरियल" प्रोजेक्ट के शीर्ष फ़ोल्डर पर राइट क्लिक करें
2. संदर्भ मेनू में "गुण" पर क्लिक करें
3. परिणामी संवाद में, बाएं पैनल में "एक्शनस्क्रिप्ट बिल्ड पाथ" पर क्लिक करें (यह शीर्ष से 3 आइटम होना चाहिए)
4. दाहिने पैनल में "लाइब्रेरी पथ" टैब पर क्लिक करें
5. "प्रोजेक्ट जोड़ें" बटन पर क्लिक करें
6. अब आपको भड़कने सहित परियोजनाओं की एक सूची देखनी चाहिए।
7. "भड़क" का चयन करें और फिर "ठीक" पर क्लिक करें

आपने अब अपने प्रोजेक्ट में फ़्लेयर लाइब्रेरी जोड़े हैं, और जो भी क्लासेस प्रदान करता है, उसका उपयोग कर सकते हैं।
फ्लेक्स कंपाइलर के बारे में एक बात ध्यान दें - डिफ़ॉल्ट रूप से, इसमें केवल वे कक्षाएं शामिल होती हैं, जिन्हें आप वास्तव में अपने एप्लिकेशन में उपयोग करते हैं। इसलिए यदि आप बहुत बड़ी लाइब्रेरी आयात करते हैं, तो भी आपकी अंतिम .swf फ़ाइल का आकार अभी भी काफी छोटा हो सकता है। हालाँकि, सावधान रहें कि यह समस्या पैदा कर सकता है यदि आप अपने अनुप्रयोग में डायनामिक क्लास लोडिंग करने के लिए प्रतिबिंब का उपयोग करते हैं (इस ट्यूटोरियल में अधिक उन्नत सुविधा नहीं है)।

बुनियादी एनीमेशन: ट्वीन, अनुक्रम, और समानांतर

ठीक है, अब चलो चेतन! flare.animate.Transition क्लास सभी एनिमेशन के लिए बेस क्लास है। के महत्वपूर्ण उपवर्ग Transition हैं Tween, Sequence, तथा Parallel संक्रमण। ट्वीन्स का उपयोग किसी एकल ऑब्जेक्ट के गुणों को चेतन करने के लिए किया जाता है। अनुक्रम में एनिमेशन की एक श्रृंखला को चलाने के लिए दृश्यों का उपयोग किया जाता है। समानांतर संक्रमण एक साथ संक्रमण का एक संग्रह चलाते हैं। आइए शुरू करते हैं Tween से।

वस्तु संबंधी गुण

टिवेन क्लास की मूल बातें सरल हैं: हम एक वस्तु लेते हैं, एक संपत्ति मान देते हैं जिसे हम समय के साथ बदलना चाहते हैं, और उस परिवर्तन के लिए समय अवधि निर्दिष्ट करें। भाग 1 से ट्यूटोरियल एप्लिकेशन का उपयोग करते हुए, कंटेनर ऑब्जेक्ट को घुमाएं। ट्यूटोरियल क्लास कंस्ट्रक्टर के अंत में निम्नलिखित पंक्ति जोड़ें:

 var tween: ट्वेन = नया ट्वीन (कंटेनर, 3, {रोटेशन: 360}); tween.play ();

इसके अलावा, सुनिश्चित करें कि आपके पास अपनी कक्षा के शीर्ष पर एक नया आयात विवरण है, इसलिए कंपाइलर जानता है कि आप किस बारे में बात कर रहे हैं। इसे आयात की सूची में जोड़ें:

 आयात flare.animate.Tween;

(नोट: कभी-कभी फ्लेक्स बिल्डर स्वचालित रूप से आपके लिए एक आयात विवरण जोड़ देगा क्योंकि आप एक नया वर्ग नाम लिखते हैं। यदि नहीं, तो एक अन्य तकनीक पाठ कर्सर को रखना है। समाप्त नए वर्ग का नाम और "Ctrl-Space" टाइप करें - इससे आपको कक्षा के लिए एक नया आयात बनाना चाहिए।)
अब अपने एप्लिकेशन को चलाएं- अंक 3 सेकंड की अवधि में एक सर्कल में घूमना चाहिए।
यहाँ क्या Tween निर्माता कर रहा है:

• पहला तर्क वह वस्तु है, जिसके मूल्यों पर ध्यान दिया जाना चाहिए
• दूसरा तर्क सेकंड में एनीमेशन की लंबाई है
• तीसरा तर्क एक वस्तु उदाहरण है जो गुणों को चेतन और उनके लक्ष्य मानों को सूचीबद्ध करता है।
  • संपत्ति के नामों को इनपुट ऑब्जेक्ट के गुणों से बिल्कुल मेल खाना चाहिए।
  • निहित गुणों की अनुमति है, लेकिन उद्धरणों में संलग्न होना चाहिए। उदाहरण के लिए, {“data.profit”:50} एक कानूनी इनपुट है यदि इनपुट ऑब्जेक्ट में डेटा नाम की संपत्ति होती है, जिसके बदले में लाभ नामक एक संपत्ति होती है।

RSI play विधि तो एनीमेशन चलाता है। play विधि को एकल बूलियन पैरामीटर के साथ भी बुलाया जा सकता है जो यह दर्शाता है कि एनीमेशन को रिवर्स में चलाना है या नहीं।
आपने देखा होगा कि रोटेशन एनीमेशन कुछ त्वरण को प्रदर्शित करता है। इसका कारण डिफ़ॉल्ट सेटिंग है Tween उदाहरणों में "धीमे-धीमे धीमे" एनीमेशन का उपयोग करना है। आप इन व्यवहारों का उपयोग करके नियंत्रित कर सकते हैं Easing कार्य करता है। ये फ़ंक्शंस वर्तमान एनीमेशन प्रगति को इनपुट के रूप में 0 और 1 के बीच एक अंश के रूप में लेते हैं। वे एनीमेशन की गति को बदलने के लिए एक हेरफेर किए गए प्रगति अंश को लौटाते हैं, अक्सर एक गैर-रैखिक फैशन में।
सहजता को दूर करने के लिए (यानी, एक रैखिक सहजता फ़ंक्शन का उपयोग करें) आप लिख सकते हैं: tween.easing = Easing.none। बस सुनिश्चित करें कि आप आयात करते हैं flare.animate.Easing फ़ाइल के शीर्ष पर वर्ग।
अन्य सहज कार्यों के साथ प्रयोग करने के लिए स्वतंत्र महसूस करें। उदाहरण के लिए, आसानी से किए जाने वाले कार्यों में सहजता शामिल हो सकती है (केवल एनीमेशन की शुरुआत में हेरफेर करें), बाहर सहजता (केवल एनीमेशन के अंत में हेरफेर), या दोनों। उदाहरण के लिए, इसे आज़माएँ: tween.easing = Easing.easeOutBounce। यह अंत में रोटेशन को उछाल देना चाहिए।
आगे बढ़ने से पहले, कंटेनर के अन्य गुणों, जैसे कि स्थिति, पैमाने या अल्फा मानों को एनिमेट करने का प्रयास करें।

समग्र एनिमेशन

RSI Sequence और Parallel कक्षाएं आपको एक साथ समूह एनिमेशन करने की अनुमति देती हैं। अनुक्रम एक के बाद एक एनिमेशन का एक सेट चलाता है। उदाहरण के लिए, इसे आज़माएँ:

 var t1: ट्वीन = नया ट्वीन (कंटेनर, 1, {y: 100}); var t2: ट्वेन = नया ट्वीन (कंटेनर, 1, {स्केलएक्स: 2}); var t3: ट्वेन = नया ट्वीन (कंटेनर, 1, {y: 300}); var t4: ट्वेन = नया ट्वीन (कंटेनर, 1, {स्केलएक्स: 1}); var seq: अनुक्रम = नया अनुक्रम (नया समानांतर (t1, t2), नया समानांतर (t3, t4)); seq.play ();

आपको फ़ाइल के शीर्ष पर कुछ नए आयात स्टेटमेंट जोड़ने होंगे:

 आयात flare.animate.Parallel; आयात flare.animate.Sequence;

यह चार चिमटी बनाता है: t1, t2, t3, तथा t4। यह तब दो समानांतर संक्रमण बनाता है जो चलता है t1 और t2 एक साथ और भागो t3 और t4 साथ में। समानांतर संक्रमण एक क्रम में एक के बाद एक चलाए जाते हैं। इस तरह, अधिक जटिल एनिमेशन बनाना आसान है।
अधिक उन्नत समग्र एनिमेशन के लिए, पर एक नज़र डालें FlareLogo और flare.demos.Animation में कक्षाएं flare.demos परियोजना.

ट्रांजिशनर्स के साथ बैच एनीमेशन

ऊपर दिए Tween, Parallel, तथा Sequence कक्षाएं, आप किसी भी संख्या में एनिमेटेड बदलाव कर सकते हैं। हालांकि, जब वस्तुओं के बड़े संग्रह (विज़ुअलाइज़ेशन में आम) के साथ काम करना, यह मैन्युअल रूप से ट्वीन्स के समान बड़े सेट को संभालने के लिए दर्द हो सकता है। इसके अलावा, लेआउट, रंग, आकार, आकार जैसे दृश्य गुणों को एन्कोडिंग के लिए अलग-अलग रूट चलाना आसान होना चाहिए और एनीमेशन से निपटने के लिए चिंता करने की ज़रूरत नहीं है। शायद आप परिवर्तनों को चेतन करना चाहते हैं या शायद आप स्थैतिक अद्यतन चाहते हैं। किसी भी तरह से, आपको मान निर्दिष्ट करने के लिए समान कोड का पुन: उपयोग करने में सक्षम होना चाहिए।
इन चिंताओं को दूर करने के लिए, भड़कना प्रदान करता है Transitioner कक्षा। ट्रांजिशनर वस्तुओं के संग्रह के लिए एनिमेशन बनाने की प्रक्रिया को सरल बनाते हैं। आप बस एक ऑब्जेक्ट लेते हैं और वांछित गुणों को एक-एक करके सेट करते हैं। पर्दे के पीछे, ट्रांस्फ़ॉर्मर स्वचालित रूप से उत्पन्न करेगा और पूर्ण एनीमेशन को मॉडल करने के लिए आवश्यक चिमटी का पुन: उपयोग करेगा। इसके अलावा, यदि एनीमेशन वांछित नहीं है, तो संपत्ति के मूल्यों को तुरंत सेट करने के लिए ट्रांजिस्टर को कॉन्फ़िगर किया जा सकता है। संक्षेप में, ट्रांज़िशनर ऑब्जेक्ट गुणों को अपडेट करने के लिए अप्रत्यक्ष की एक परत प्रदान करता है - इन अपडेट को एकत्र किया जा सकता है और फिर एनिमेटेड, या तुरंत लागू किया जा सकता है।
हमारे ट्यूटोरियल ऐप में एक ट्रांज़िशनर का उपयोग करने का एक सरल उदाहरण यहां दिया गया है।

 var t: Transitioner = new Transitioner (2); के लिए (var j: int = 0; j

यह उदाहरण सभी स्प्राइट्स को एनिमेट करता है container एक नया यादृच्छिक करने के लिए y स्थिति और यादृच्छिक ऊर्ध्वाधर पैमाने पर कारक। हम पहले एक नया बनाते हैं Transitioner जिसे 2-सेकंड का एनीमेशन बनाना चाहिए। फिर हम प्रत्येक बच्चे को स्प्राइट के माध्यम से लूप देते हैं और संक्रमण करने वाले का उपयोग टिवेन के गुणों को सेट करने के लिए करते हैं।
संक्रमण करनेवाला $ ऑपरेटर इंगित करता है कि हम इनपुट ऑब्जेक्ट के लिए लक्ष्य मान सेट करना चाहते हैं। डिफ़ॉल्ट रूप से, या तो एक नया Tween बनाया गया है, या एक मौजूदा है Tween वर्तमान आइटम के लिए मिला है। $ ऑपरेटर तब एक वस्तु लौटाता है, जिस पर टॉनी की लक्षित संपत्ति सेट करना है।
इसके अलावा, स्थैतिक (गैर-एनिमेटेड) संक्रमण बनाने के लिए ट्रांज़ेक्टर का उपयोग किया जा सकता है। यदि एक संक्रमण है immediate संपत्ति सही पर सेट होती है, यह नई Tweens नहीं बनाएगी। इसके बजाय, $ ऑपरेटर केवल इनपुट मान लौटाएगा। इसका मतलब है कि आप एक ट्रांज़िशनर का उपयोग करके मूल्यों को अपडेट करने वाले तरीके बना सकते हैं, और फिर बाद में नियंत्रित कर सकते हैं कि आप उन मूल्यों को अपडेट करना चाहते हैं या नहीं। मानक "तत्काल-मोड" Transitioner स्थिर का उपयोग करके पुनर्प्राप्त किया जाता है Transitioner.DEFAULT संपत्ति। इस तरह आपको एक नया आवंटन करने की आवश्यकता नहीं है Transitioner तत्काल अद्यतन करते समय।
संक्रमणों का बड़े पैमाने पर उपयोग किया जाता है flare.vis पैकेज, विज़ुअलाइज़ेशन डिजाइनरों को नियंत्रित करने की अनुमति देता है कि कौन से अपडेट एनिमेटेड और कैसे होने चाहिए।

भाग 3: विज़ुअलाइज़ेशन

डेटा लोड हो रहा है

फ्लेयर के लिए मूल डेटा प्रतिनिधित्व केवल अंतर्निहित फ़्लैश डेटा प्रकारों का उपयोग करता है: Object और Array। उदाहरण के लिए, डेटा की एक तालिका को केवल वस्तुओं की एक सरणी के रूप में दर्शाया जा सकता है, जिसमें प्रत्येक ऑब्जेक्ट में प्रत्येक डेटा फ़ील्ड के नाम और मान होते हैं। जबकि अधिक कुशल अभ्यावेदन संभव हैं, यह दृष्टिकोण मौजूदा फ्लैश विकास सम्मेलनों का लाभ लेते हुए सबसे अधिक लचीलापन प्रदान करता है।
फ़्लैश प्लेयर में डेटा लोड करने के लिए, कई दृष्टिकोण हैं। एक सरल तरीका यह है कि आप अपने डेटा को एप्लिकेशन में ही एम्बेड करें। इस तरह, डेटा एप्लिकेशन के साथ डाउनलोड हो जाता है, जो स्थैतिक डेटा सेट के लिए ठीक है। उदाहरण के लिए, आप एक्शनस्क्रिप्ट की ऑब्जेक्ट नोटेशन का उपयोग कर सकते हैं डेटा को सीधे एक चर के रूप में परिभाषित करने के लिए:

var डेटा: Array = [{id: "Q1", बिक्री: 10000, लाभ: 2400}, {id: "Q2", बिक्री: 12000, लाभ: 2900}, {id: "Q3", बिक्री: 15000, लाभ : 3800}, {आईडी: "क्यू 4", बिक्री: 15500, लाभ: 3900}];

हालांकि, कई मामलों में आप अपने डेटा को गतिशील रूप से लोड करना चाहेंगे, या तो एक वेब पेज के भीतर से (आप फ्लैश में मानों को पारित करने के लिए ब्राउज़र में जावास्क्रिप्ट का उपयोग कर सकते हैं), या इंटरनेट पर एक सर्वर से। ऐसा करने के लिए कई दृष्टिकोण हैं और आपको अपने विशेष एप्लिकेशन के लिए सबसे अच्छा काम करना चाहिए। उदाहरण के लिए, ActionScript अतिरिक्त डेटा प्रकार और सिंटैक्स के साथ काम करने के लिए प्रदान करता है एक्सएमएल के लिए ECMAScript का उपयोग कर डेटा एक्सएमएल (E4X) मानक है।
फ्लेयर बाहरी डेटा सेट लोड करने के लिए कुछ उपयोगिताओं को भी प्रदान करता है। यह इंटरनेट पर किसी भी सर्वर से डेटा लोड करने और आंतरिक एक्शनस्क्रिप्ट ऑब्जेक्ट में डेटा को परिवर्तित करने का समर्थन करता है। वर्तमान में समर्थित फ़ाइल स्वरूप टैब-सीमांकित पाठ ("टैब" हैं, जो एक्सेल जैसे उपकरणों से डेटा निर्यात करने के लिए एक मानक फ़ाइल प्रारूप हैं), जावास्क्रिप्ट ऑब्जेक्ट नोटेशन ("Json", वेब अनुप्रयोगों के लिए एक सामान्य डेटा प्रारूप), और ग्राफएमएल ("ग्रैफ़लएम", a) एक्सएमएल नोड्स और किनारों के साथ नेटवर्क का प्रतिनिधित्व करने के लिए प्रारूप)।
रिमोट डेटा का उपयोग करके भड़कना द्वारा लोड किया जाता है flare.data.DataSource कक्षा। टैब-सीमांकित डेटा फ़ाइल को लोड करने के लिए इसका उपयोग करने का एक उदाहरण यहां दिया गया है:

var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); var लोडर: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// फंक्शन को संभालने के लिए डेटा एक बार लोड होने के बाद var ds पूरा हो जाता है: DataSet = loader.data as DataSet; // डेटा के साथ कुछ करते हैं ...} );

RSI DataSource कंस्ट्रक्टर के पास दो आवश्यक तर्क हैं: डेटा सेट का url, और फ़ाइल प्रारूप को इंगित करने वाला एक स्ट्रिंग। अभी समर्थित प्रारूप "टैब" (टैब-सीमांकित), "json" (जावास्क्रिप्ट ऑब्जेक्ट संकेतन), और "ग्राफमिल" (ग्राफएमएल) हैं।
उन डेटा सेटों के लिए जिनके स्कीमा (नाम और डेटा प्रकार के फ़ील्ड) अस्पष्ट हो सकते हैं, एक तीसरा भी है, वैकल्पिक निर्माता तर्क एक लेता है DataSchema प्रकार। देखें flare.data.DataSchema और flare.data.DataField अधिक के लिए कक्षाएं। स्कीमा यह सुनिश्चित करने के लिए सहायक हो सकती है कि डेटा मान ठीक से नामित किए गए हैं (उदाहरण के लिए, टैब सीमांकित फ़ाइल के लिए हेडर पंक्ति गायब है) और उचित डेटा प्रकारों में परिवर्तित हो गया (उदाहरण के लिए, JSON डेटा जिसमें संख्यात्मक मान उद्धरण में लिपटे थे)।
वास्तव में डेटा को लोड करने के लिए, डेटा स्रोत लोड विधि कहा जाता है, एक लौटाने flash.net.URLLoader उदाहरण। लोडर का उपयोग डाउनलोड की प्रगति को ट्रैक करने के लिए किया जा सकता है (जैसे, यदि आप एक प्रगति बार प्रदान करना चाहते थे) और डाउनलोड पूरा होने पर एक अधिसूचना घटना प्रदान करता है। ऊपर दिए गए उदाहरण में, हम एक श्रोता को जोड़ते हैं जब डाउनलोड पूरा हो जाता है। DataSource स्वचालित रूप से इनपुट डेटा को पार्स कर देगा, इसे एक्शनस्क्रिप्ट ऑब्जेक्ट्स में मैप करेगा, और परिणाम को एक में स्टोर करेगा flare.data.DataSet वस्तु। DataSet वर्ग तालिका और नेटवर्क (नोड / एज) डेटा दोनों का प्रतिनिधित्व कर सकता है।

दृश्य ऑब्जेक्ट बनाना और प्रबंधित करना

अब हम एक डेटा सेट की कल्पना करना चाहेंगे। ऐसा करने के लिए, हम व्यक्तिगत डेटा रिकॉर्ड को विज़ुअल आइटम में मैप करते हैं। फ्लेयर डेटा का प्रतिनिधित्व करने के लिए दृश्य वस्तुओं का एक सेट प्रदान करता है। यहाँ बुनियादी कक्षाओं का अवलोकन दिया गया है flare.vis.data पैकेज.

• DataSprite: स्प्राइट के लिए बेस क्लास जो नेत्रहीन डेटा का प्रतिनिधित्व करते हैं। DataSprite फ्लैश प्लेयर का उपवर्ग है Sprite वर्ग. DataSprite एक भी शामिल है data वह संपत्ति जहां डेटा टपल (एक एक्शनस्क्रिप्ट ऑब्जेक्ट) संग्रहीत है और रंग, आकार और आकार के क्षेत्रों सहित बुनियादी स्प्राइट द्वारा समर्थित उन लोगों से परे अतिरिक्त दृश्य चर प्रदान करता है, और ध्रुवीय निर्देशांक में पदों की स्थापना के लिए समर्थन करता है।
• NodeSprite: DataSprite एक नोड का प्रतिनिधित्व उदाहरण। यह डेटा को विज़ुअलाइज़ करने के लिए उपयोग किया जाने वाला डिफ़ॉल्ट प्रकार है। NodeSprite उदाहरणों को नेटवर्क या ट्री संरचनाओं से जोड़ा जा सकता है EdgeSprite उदाहरणों।
• EdgeSprite: DataSprite एक छोर का प्रतिनिधित्व उदाहरण। एक EdgeSprite दो जोड़ता है NodeSprites। नोड्स के माध्यम से सुलभ हैं source और target गुण। EdgeSprites रेखांकन और पेड़ बनाने के लिए उपयोग किया जाता है, साथ ही रेखाओं का प्रतिनिधित्व करने के लिए, जैसे समय-श्रृंखला रेखांकन में।

आमतौर पर, NodeSprites और EdgeSprites बनाए और संग्रहीत किए जाते हैं flare.vis.data.Data वर्ग, जो एक दृश्य के लिए सभी दृश्य वस्तुओं का प्रबंधन करता है। Data वर्ग डेटा टुपल्स के लिए और एक ग्राफ संरचना का प्रतिनिधित्व करने के लिए नई दृश्य वस्तुओं को बनाने के लिए तरीके प्रदान करता है।
RSI Data वर्ग सम्‍मिलित डेटा आइटम्‍स को ट्रेस करने और अपडेट करने के तरीके भी प्रदान करता है। nodes और edges गुण डेटा के भीतर निहित नोड्स और किनारों की सूची लौटाते हैं। इनमें से प्रत्येक सूची में ए शामिल है visit विधि जो आपको एक फ़ंक्शन में पास करने की अनुमति देती है जिसे तब प्रत्येक नोड या किनारे के साथ बुलाया जाएगा। यह भी setProperty और setProperties विधियाँ आपको एक साथ सभी नोड्स या किनारों के लिए संपत्ति मान सेट करने की अनुमति देती हैं। ये विधियाँ वैकल्पिक रूप से ए Transitioner एक तर्क के रूप में, इसलिए आप संपत्ति अद्यतन को चेतन कर सकते हैं।
उदाहरण के लिए, निम्न कोड में एक दूसरे एनीमेशन का परिणाम होता है जिसमें सभी नोड्स के लिए लाइन का रंग नीला होता है। (ध्यान दें कि हेक्स नोटेशन के लिए DataSprite रंग मूल्यों में अल्फा के साथ-साथ लाल, हरा, नीला चैनल शामिल हैं)।

data.nodes.setProperty ("lineColor", 0xff0000bb, नया Transitioner (1)) play ();

नोड और एज सूचियाँ भी डिफ़ॉल्ट संपत्ति मानों का समर्थन करती हैं, का उपयोग करते हुए setDefault, setDefaults, removeDefault, तथा clearDefaults तरीकों। डिफ़ॉल्ट मान डेटा वर्ग का उपयोग करके बनाए गए एक नोड या किनारे पर सेट किया जाएगा ' addNode or addEdgeFor तरीकों.
RSI Tree वर्ग एक उपवर्ग है Data, एक सामान्य ग्राफ के बजाय एक पेड़ का प्रतिनिधित्व करने के लिए। Data वर्ग स्वत: निर्माण का समर्थन करता है Tree सामान्य ग्राफ के पेड़ों की गणना करके उदाहरण। फैले हुए पेड़ निर्माण विधियों की एक संख्या-जिसमें चौड़ाई-प्रथम, गहराई-पहले और न्यूनतम फैले हुए पेड़ एल्गोरिदम शामिल हैं - को एक पैरामीटर के रूप में पारित किया जा सकता है। इन गणनाओं का उपयोग किया जाता है flare.analytics.graph.SpanningTree वर्ग.
वास्तव में नोड और किनारों की वस्तुओं को बनाने के लिए, हम इसका उपयोग करते हैं addNode और addEdgeFor तरीकों.

• addNode एक इनपुट डेटा टपल लेता है (ए Object) और एक नया बनाता है NodeSprite उस डेटा को देखने के लिए।
• addEdgeFor दो मौजूदा लेता है NodeSprites और एक जोड़ता है EdgeSprite उन्हें कनेक्ट कर रहा है। विधि भी वैकल्पिक रूप से एक डेटा tuple (फिर से, एक Object किनारे के लिए किसी भी डेटा फ़ील्ड का प्रतिनिधित्व)।

यहाँ बनाने के लिए एक सरल उदाहरण है NodeSprites एक सारणीबद्ध डेटा सेट के लिए, यह मानते हुए कि हमारे पास डेटा ऑब्जेक्ट्स की एक सरणी है:

var सूची: सरणी; // डेटा ऑब्जेक्ट्स की एक सरणी जिसे हमने पहले ही var डेटा लोड किया है: डेटा = नया डेटा (); // प्रत्येक के लिए एक नया डेटा कंटेनर (var o: सूची में ऑब्जेक्ट) {data.addNode (o); }

परिणाम एक है Data दृश्य के साथ आबादी DataSprite (नोड्स या किनारों) उदाहरण।
व्यवहार में, आपको हमेशा विज़ुअलाइज़ किए गए डेटा को मैन्युअल रूप से पॉप्युलेट करने की आवश्यकता नहीं है। बनाने के लिए Data लोड किए गए डेटा सेट को विज़ुअलाइज़ करने के लिए ऑब्जेक्ट, आप अक्सर इसके बजाय एक सुविधा पद्धति का उपयोग कर सकते हैं। Data.fromArray() फ़ंक्शन एक बनाता है Data सारणीबद्ध डेटा के लिए उदाहरण एक्शनस्क्रिप्ट ऑब्जेक्ट्स की एक सरणी के रूप में संग्रहीत है, जबकि Data.fromDataSet() विधि इसी तरह एक बनाता है Data एक लोड से उदाहरण DataSet वस्तु।

एक विज़ुअलाइज़ेशन का निर्माण

अब विज़ुअलाइज़ेशन बनाना शुरू करने के लिए यह सब एक साथ रखें। Visualization कक्षा दृश्य अंक (एक में संग्रहीत) सहित एकल दृश्य का प्रतिनिधित्व करता है Data उदाहरण) और कुल्हाड़ियों। एक विज़ुअलाइज़ेशन बनाने के लिए, हम एक डेटा सेट को लोड करते हैं, डेटा को विज़ुअलाइज़ेशन में जोड़ते हैं, और ऐसे ऑपरेटर सेट करते हैं जो निर्धारित करते हैं कि डेटा की कल्पना कैसे की जाए। यहाँ एक उदाहरण है। पहले कोड देखें, फिर यह समझने के लिए पढ़ें कि प्रत्येक भाग क्या कर रहा है।

पैकेज {आयात flare.data.DataSet; आयात flare.data.DataSource; आयात flare.scale.ScaleType; आयात flare.vis.Visualization; आयात 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। आयत; आयात Flash.net.URLLoader; [एसडब्ल्यूएफ (चौड़ाई = "800", ऊंचाई = "600", पृष्ठभूमि का रंग = "# ffffff", फ्रेमरेट = "30")] सार्वजनिक वर्ग ट्यूटोरियल स्प्राइट {निजी var vis: विज़ुअलाइज़ेशन का विस्तार करता है; सार्वजनिक समारोह ट्यूटोरियल () {लोडडाटा (); } निजी फ़ंक्शन loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var लोडर: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {var ds: DataSet = loader.data as DataSet; visualize (Data.fromDataSet (ds));}); } निजी फ़ंक्शन विज़ुअलाइज़ (डेटा: डेटा): शून्य {विज़ = नया विज़ुअलाइज़ेशन (डेटा); vis.bounds = नया आयत (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (विज़); vis.operators.add (नया AxisLayout ("data.date", "data.age")); vis.operators.add (नया ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (नया शेपइन्कोडर ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

आइए प्रत्येक विधि को देखें।
कंस्ट्रक्टर सरल है: यह सिर्फ कॉल करता है loadData विधि.
RSI loadData विधि एक नया डेटा स्रोत बनाता है और इसे पहले बताए गए तरीकों का उपयोग करके लोड करता है। इस मामले में, डेटा सेट को लॉस एंजिल्स काउंटी में 2007 में होमसाइड्स की सूचना दी गई है, जिसे टैब-सीमांकित प्रारूप में संग्रहीत किया गया है। जब लोड पूरा हो जाता है, तो लोड किए गए डेटा ट्यूपल्स को एक में जोड़ दिया जाता है Data उदाहरण का उपयोग करते हुए fromDataSet सुविधा विधि। हुड के तहत, इस के निर्माण में परिणाम है NodeSprites प्रत्येक डेटा आइटम को देखने के लिए। अंततः visualize विधि कहा जाता है।
RSI visualize विधि विज़ुअलाइज़ेशन सेट करती है। यहाँ प्रत्येक चरण में क्या हो रहा है:

• भाग 1: प्रारंभिक
  • डेटा के लिए एक नया विज़ुअलाइज़ेशन बनाया जाता है
  • हम दृश्य के लिए सीमा निर्धारित करते हैं। यह लेआउट क्षेत्र को निर्धारित करता है।
  • हमने सेट किया x और y हमारे दृश्य की स्थिति और प्रदर्शन सूची में विज़ुअलाइज़ेशन जोड़ें।
• भाग 2: दृश्य एनकोडिंग निर्दिष्ट करना
  • हम एक अक्ष लेआउट का उपयोग करते हैं, x- अक्ष पर "तिथि" और y- अक्ष पर "आयु" रखते हैं। AxisLayout ऑपरेटर भी विज़ुअलाइज़ेशन के लिए कुल्हाड़ियों को स्वचालित रूप से कॉन्फ़िगर करता है। हम डेटा वैरिएबल को निरूपित करने के लिए वाक्यविन्यास "data.date" का उपयोग करते हैं, क्योंकि वे भीतर स्थित हैं NodeSpriteकी data संपत्ति।
  • हम एक रंग एन्कोडिंग जोड़ते हैं, ताकि नोड का रेखा रंग "कारण" (मृत्यु का कारण) चर का प्रतिनिधित्व करता है। हम रंग एनकोडर को भी बताते हैं कि "कारण" चर के मान श्रेणियों का प्रतिनिधित्व करते हैं (ScaleType.CATEGORIES)। रंग एनकोडर इस जानकारी का उपयोग स्वचालित रूप से एक उपयुक्त रंग पैलेट लेने के लिए करेगा। जैसा कि हम जल्द ही देखेंगे, आप अपना स्वयं का रंग पैलेट भी प्रदान कर सकते हैं।
  • हम एक आकृति एन्कोडिंग जोड़ते हैं, ताकि किसी वस्तु का आकार पीड़ित की "दौड़" का प्रतिनिधित्व करे।
  • हम डिफ़ॉल्ट गुण सेट करते हैं - हम नोड्स के रंग को पूर्ण पारदर्शी पर सेट करते हैं, और लाइन की चौड़ाई 2 पिक्सेल तक सेट करते हैं।
  • अंत में, हम कहते हैं update तरीका। यह सभी ऑपरेटरों को क्रम में चलाता है।

विज़ुअलाइज़ेशन को अद्यतन करना

एक बार विज़ुअलाइज़ेशन बन जाने के बाद, हम इसे अपडेट करना चाह सकते हैं। उदाहरण के लिए, शायद हम लोगों के लिंग की कल्पना करने के लिए रंग एन्कोडिंग को बदलना चाहेंगे।
सबसे पहले, कक्षा में एक नई विधि जोड़ते हैं:

 निजी फ़ंक्शन colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = नया ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (नया ट्रांजिशनर (2))। play (); }

यह विधि:

1. दूसरे ऑपरेटर (अनुक्रमणिका 1 में ऑपरेटर) को पुनः प्राप्त करता है और इसे एक को भेजता है ColorEncoder
2. बदलता है source रंग एनकोडर के लिए संपत्ति "data.sex" चर का उपयोग करने के लिए
3. एक नया रंग पैलेट सेट करता है (इस मामले में, महिलाओं के लिए लाल, पुरुषों के लिए नीला - रंग क्रम लेबल के वर्णानुक्रम से मेल खाता है)
4. A के साथ अद्यतन कॉल करके परिवर्तन को एनिमेट करता है Transitioner दो सेकंड के एनीमेशन के लिए सेट करें। vis.update विधि वापस आती है Transitioner, इसलिए हम अपडेट के रिटर्न वैल्यू पर प्ले को कॉल कर सकते हैं। (नोट: आप भी छोड़ सकते हैं Transitioner और सिर्फ तर्क के रूप में नंबर 2 पास करें update। एक नया Transitioner स्वचालित रूप से बनाया जाएगा और वापस आ जाएगा।)

अब हमें एप्लिकेशन को वायर करने की आवश्यकता है ताकि हम अंतःक्रियात्मक रूप से अपडेट को ट्रिगर कर सकें। ऐसा करने के लिए, निम्न कोड को कंस्ट्रक्टर में जोड़ें:

 // एक क्लिक करने योग्य लेबल var बटन जोड़ें: TextSprite = नया TextSprite ("Gender द्वारा रंग"); addChild (बटन); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): शून्य {colorByGender ();});

यह कोड:

1. एक नया पाठ लेबल बनाता है (TextSprite से एक सहायक वर्ग है flare.display पैकेज)
2. लेबल को एप्लिकेशन में जोड़ता है और उसकी स्थिति निर्धारित करता है
3. सेट buttonMode सच करने के लिए (यह एक हाथ कर्सर प्रकट होता है जब आप लेबल पर माउस करते हैं)
4. एक इवेंट श्रोता को जोड़ता है जो लेबल पर क्लिक करने पर चालू हो जाता है। हम एक कॉलबैक फ़ंक्शन जोड़ते हैं जो कॉल करता है colorByGender विधि.

उपरोक्त कोड को काम करने के लिए, हमें फ़ाइल के शीर्ष पर इन अतिरिक्त आयात विवरणों को शामिल करना होगा:

 आयात Flash.events.MouseEvent; आयात flare.animate.Transitioner; आयात flare.display.TextSprite; आयात flare.util.palette.ColorPalette;

अब आपको एप्लिकेशन को संकलित करने और चलाने में सक्षम होना चाहिए। "कलर बाय जेंडर" लेबल पर क्लिक करने से रंग एन्कोडिंग में परिवर्तन को चेतन करना चाहिए।

अगला चरण

उपरोक्त उदाहरण फ्लैश और फ्लेयर लाइब्रेरी की मूल बातें दिखाते हैं, लेकिन कई और विशेषताएं हैं जिन्हें अभी तक कवर नहीं किया गया है। आगे जाकर, हम अनुशंसा करते हैं कि (ए) फ्लैश और फ्लेयर दोनों का निरीक्षण करे API सभी उपलब्ध वर्गों की समझ पाने के लिए दस्तावेज़ीकरण, और (ख) भड़कना डेमो के माध्यम से यह देखने के लिए कि यहां दिखाए गए समान सिद्धांतों का उपयोग कई अन्य विज़ुअलाइज़ेशन के निर्माण के लिए कैसे किया जा सकता है। या, बेहतर अभी तक, फ्लेयर स्रोत कोड के माध्यम से खुदाई करने के लिए जानने के लिए कि हुड के नीचे क्या हो रहा है।
इस प्रक्रिया में सहायता के लिए, यहां उप-संकुल का एक सामान्य अवलोकन दिया गया है flare.vis:

• flare.vis.axis: कुल्हाड़ियों, लेबल और ग्रिडलाइन्स प्रदान करता है
• flare.vis.controls: चयन के लिए इंटरैक्शन हैंडलर, ज़ूमिंग और बहुत कुछ
• flare.vis.data: दृश्य तत्व जो डेटा तत्वों का प्रतिनिधित्व करते हैं
• flare.vis.data.render: प्लगेबल रेंडरर्स जो आकर्षित करते हैं DataSprites
• flare.vis.events: घटना प्रकार भड़क फ्रेम में इस्तेमाल किया
• flare.vis.legend: दृश्य एन्कोडिंग का वर्णन करने के लिए किंवदंतियों का प्रतिनिधित्व करता है
• flare.vis.operator: विज़ुअलाइज़ेशन को परिभाषित करने के लिए ब्लॉक का निर्माण
• flare.vis.palette: रंग, आकार और आकार मूल्यों के लिए पट्टियाँ
• flare.vis.util: सामान्य उपयोगिता वर्ग

अब आपको डेमो में समझ बनाने के लिए पर्याप्त पता होना चाहिए flare.demos पैकेज। फ़्लैश और फ्लेयर कैसे काम करते हैं इसकी बेहतर समझ हासिल करने के लिए डेमो के साथ खेलने, संशोधित करने, कॉपी करने, पेस्ट करने और बनाने के लिए स्वतंत्र महसूस करें।

लिंक

डाउनलोड

टूल्स

अन्य टेक मार्गदर्शिकाएँ

सहायता

स्रोत: https://blokt.com/tool/prefuse-flare