مضيئة | تصور البيانات للويب

يجعل التوهج من السهل إنشاء تصورات بيانات تفاعلية

لبدء صنع تصوراتك الخاصة ، تحميل مضيئة والعمل من خلال البرنامج التعليمي أدناه. هل تريد المزيد من المساعدة؟ قم بزيارة منتدى المساعدة (ستحتاج إلى سورس تسجيل الدخول للنشر).

Flare هو برنامج مفتوح المصدر تم إصداره بموجب ترخيص BSD ، مما يعني أنه يمكن نشره وتعديله بحرية (وحتى بيعه مقابل $$). تم تكييف تصميم Flare من سابقه ، مجموعة أدوات تصور لـ Java.

التطبيقات

الإعلانات

• 2010.10.07: تم فتح تطوير التوهج للمجتمع وانتقل المصدر من SourceForge إلى منزل جديد على جيثب. توهج 2009.01.24 لا يزال الإصدار الرسمي الأخير و (على الأقل في الوقت الحالي) تعكس الدروس والبرامج التعليمية ذلك. إصدار التطوير على جيثب يحتوي الآن على دعم أفضل لـ 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. قم بإعداد بيئة تطوير فلاش تعمل. هناك طريقتان. نوصي الأول بالبساطة ، ولكن نرحب بالمستخدمين الأكثر تقدمًا لاستخدام النهج الثاني.
   • الخيار 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 بناء أنظمة. يتم حزم مضيئة مع أ build.xml ملف للاستخدام مع أباتشي النملة نظام البناء. بمجرد تثبيت النملة ، فقط افتح build.xml في محرر نص ، قم بتغيير أول سطرين للإشارة إلى Flex الخاص بك SDK التثبيت ، ثم استخدم ant لتجميع المكتبات. نحن نستفيد من مهام النمل في Adobe Labs لتطوير Flex.
     • تتمثل ميزة هذا النهج في أن جميع البرامج مجانية ولن تنتهي صلاحيتها عليك. ومع ذلك ، تخسر ميزات مثل التجميع التلقائي وإدارة المشاريع والإكمال التلقائي المقدم من Flex Builder.
2. قم بتنزيل مكتبات التوهج الجاهزة.
   • التنزيل هو ملف مضغوط يحتوي على مجموعة من مشاريع مكتبة ActionScript. قم بفك ضغط الملفات في دليل مساحة العمل الأساسية إذا كنت تستخدم Flex Builder. أثناء البرنامج التعليمي ، سنقوم باستيرادها إلى Flex Builder واستخدامها لبناء تصورات!
   • البرنامج حاليًا هو إصدار ألفا ، ومن المتوقع توقع بعض الأخطاء والقيود. سنقوم بإصلاح المشكلات في أقرب وقت ممكن ، وسيشير الرابط أعلاه دائمًا إلى أحدث إصدار.

مقدمة إلى Flash و ActionScript 3

يعتبر Flash بيئة رائعة للرسومات التفاعلية ، ومع إضافة لغة برمجة ActionScript 3 مؤخرًا ، أصبح أكثر قوة وفعالية. في حين أن مقدمة كاملة لـ AS3 خارج نطاق هذا البرنامج التعليمي ، إليك بعض الموارد التي ستجدها مفيدة:

• توفر Adobe نظرة عامة على AS3 ، مع روابط لموارد إضافية.
• ActionScript الأساسي 3 بقلم كولين موك من دار النشر O'Reilly كتاب رائع لمساعدتك على البدء. تستطيع الوصول إليها عبر الإنترنت هنا (توفر بعض المؤسسات ، مثل الجامعات ، إمكانية الوصول مجانًا).
• مرجع Adobe Flex API لا يقدر بثمن لفهم الفئات والأساليب المختلفة المتاحة. سنركز فقط على الفصول في flash.* الحزم.

يفترض هذا البرنامج التعليمي إلمامًا أساسيًا ببناء وأنواع ActionScript ، بالإضافة إلى مفاهيم البرمجة الشيئية.

الجزء 1: DisplayObjects

المُقدّمة

نماذج فلاش مشهد بصري ثنائي الأبعاد باستخدام سينغراف. يتم تنظيم الكائنات المرئية في تسلسل هرمي ، مع تعريف الكائنات التابعة في مساحة الإحداثيات الخاصة بالأصل. غالبًا ما سترى هذا الرسم البياني يُشار إليه باسم قائمة العرض في كل من وثائق Adobe وفي كتب حول برمجة Flash.
العقدة في أعلى قائمة العرض هي دائمًا Stage موضوع. تحتوي المرحلة دائمًا على طفل واحد فقط. هذا يسمى root، وجميع العناصر المرئية تحت الجذر. عادةً ما يكون الجذر هو تطبيق الفلاش الفعلي. سنعود إلى هذا قريبًا.
جميع العناصر المرئية التي يمكن إضافتها إلى قائمة العرض هي مثيلات DisplayObject صف دراسي. الفئات الفرعية DisplayObject تتضمن Bitmap (للصور) ، TextField (لمناطق النص التفاعلية) ، و Video (أعتقد يوتيوب). ومع ذلك ، فإن الحالات الأكثر شيوعًا هي Sprite و Shape الطبقات. كمرجع يمكن العثور على هذه الفئات في flash.display الحزمة (على الرغم من أنك في نهاية المطاف ستجد على الأرجح flash.text حزمة الاستخدام أيضا).
• Sprite الفئة هي العنصر المرئي الأكثر فائدة وعامة الذي يستخدمه Flash Player. Sprites هي كائنات مرئية تحتوي على كل من محتوى الرسم ويمكن أن تعمل كحاوية للعقد الفرعية في قائمة العرض ( Sprite الفئات الفرعية للطبقة flash.display.DisplayObjectContainer صف دراسي). في المقابل ، فإن Shape يمكن أن تحتوي الفئة على محتوى رسومي ، ولكن لا يمكنها الاحتفاظ بالعقد الفرعية. ونتيجة لذلك ، تستهلك الأشكال ذاكرة أقل ، ولكنها أقل مرونة بكثير. من أجل البساطة ، سنركز على العفاريت في هذا البرنامج التعليمي.

إنشاء تطبيق جديد

أولاً ، لنقم بإنشاء تطبيق Flash جديد. للقيام بذلك ، افتح Flex Builder وتأكد من أنك في منظور "Flex Flex" (يتم الوصول إليه غالبًا بالنقر فوق رمز "Fx" بالأبيض والأسود في الجزء العلوي الأيمن).
في جزء "المستكشف" على اليسار ، انقر بزر الماوس الأيمن على الشاشة وحدد "جديد> مشروع ActionScript". في مربع الحوار الناتج ، اكتب "البرنامج التعليمي" كاسم المشروع ، ثم انقر فوق "إنهاء". سيؤدي هذا إلى إنشاء مشروع جديد لك.
يجب أن تشاهد الآن مجلد "برنامج تعليمي" في جزء "المستكشف". داخل هذا المجلد ، سترى ملفًا باسم "Tutorial.as". هذا هو ملف التطبيق الرئيسي الخاص بك. افتحه ، إذا لم يكن مفتوحًا بالفعل.
داخل الملف ، سترى السقالات الأساسية لهذا الفصل الدراسي:

الحزمة {import flash.display.Sprite؛ البرنامج التعليمي للفئة العامة يمتد Sprite {public function Tutorial () {}}}

لاحظ أن هذا الفصل يمتد Sprite صف دراسي. لأن هذه هي فئة التطبيق الرئيسية ، عندما نقوم بتشغيل التطبيق مثيل لـ Tutorial ستتم إضافة الفئة تلقائيًا إلى قائمة العرض باعتبارها قائمة root (الطفل الوحيد والوحيد لل Stage).
لاحظ أيضًا أنه تم إنشاء مُنشئ تلقائيًا. سيتم استدعاء هذا المُنشئ عند بدء تشغيل التطبيق. بالنسبة لأولئك الذين على دراية بلغات البرمجة مثل C أو C ++ أو Java ، فإن مُنشئ فئة التطبيق يعمل مثل a main تعمل بهذه اللغات الأخرى.
مع وجود سقالات التطبيق الجديدة في مكانها ، يمكننا البدء في اللعب بأشياء مرئية. ومع ذلك ، هناك شيء واحد نريد القيام به أولاً. أضف سطرًا جديدًا مباشرةً فوق إعلان الفئة ("public class Tutorial…سطر) يقول:

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

يحدد هذا السطر الإعدادات الافتراضية لتطبيقك (والتي يتم تجميعها وحفظها كملف .swf في دليل "bin" الخاص بمشروعك). أعلاه ، قمنا بتعيين الحجم ولون الخلفية ومعدل الإطار المستهدف (في إطارات في الثانية) لتطبيقنا.

العفاريت

مثل كل 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 طباعة سلسلة على وحدة التحكم. يظهر هذا الإخراج فقط عند تشغيل التطبيق في وضع "التصحيح".

إليك الرمز:

الحزمة {import flash.display.Sprite؛ [SWF (width = "800"، height = "600"، backgroundColor = "# ffffff"، frameRate = "30")] البرنامج التعليمي للفئة العامة يمتد 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 ؛ تتبع ("sprite لدينا في:" + sprite.x + "،" + sprite.y) ؛ }}}

قم بتشغيل التطبيق (انقر بزر الماوس الأيمن على "Tutorial.as" وحدد "تشغيل باسم> تطبيق Flex"). يجب أن تشاهد دائرة رمادية ذات مخطط أسود في الزاوية اليسرى العليا ، تتمحور حول النقطة 50 ، 50. إذا قمت بتشغيل التطبيق في وضع التصحيح (حدد "تصحيح باسم> تطبيق Flex") ، يجب أن ترى أيضًا السلسلة "لدينا الكائن في: 50 ، 50 "في وحدة التحكم في الإخراج.

العفاريت المتداخلة

الآن دعونا نجعل المشهد أكثر إثارة للاهتمام. لنبدأ بنقل كود جيل Sprite الخاص بنا إلى طريقة جديدة. سنضيف هذه الطريقة إلى فصلنا:

 وظيفة خاصة 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 ؛ عودة العفريت }}

بعد ذلك ، نستبدل الرمز في مُنشئنا. أولاً ، ننشئ نقشًا متحركًا جديدًا يسمى الحاوية سنستخدمها لاحتواء مجموعة من الدوائر. نضعها في وسط المسرح. ثانيًا ، نستخدم حلقة لإنشاء مجموعة من الدوائر. هنا ، نقوم بترتيب الدوائر بشكل متناظر حول النقطة 0,0،XNUMX من الحاوية الرئيسية. يبدو منشئنا الجديد الآن كما يلي:

 دروس الوظيفة العامة () {var container: Sprite = new Sprite () ؛ container.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. لسوء الحظ ، هم أبعد قليلاً مما لدينا الوقت هنا. تتضمن بعض الأشياء التي يجب استكشافها مرشحات الصور (راجع flash.filters الحزمة) ، والتي تسمح لك بإضافة تأثيرات بصرية لعرض الكائنات باستخدام filters الممتلكات ، والخيارات المختلفة المتاحة في flash.display.Graphics الفئة ، بما في ذلك أنماط التعبئة والخط ، والعديد من إجراءات الرسم ثنائية الأبعاد.

الجزء الثاني: الرسوم المتحركة

الآن بعد أن نتمكن من إنشاء كائنات بصرية ، حان الوقت لبدء منحهم بعض الحياة. يشمل التوهج flare.animate حزمة للمساعدة في جعل هذا سهلا. أولاً ، نحتاج إلى استيراد مكتبات مضيئة للاستخدام في Flex Builder.

استيراد مكتبات

قبل المتابعة ، تأكد من تحميل مكتبات مضيئة كمشاريع ضمن Flex Builder. يجب أن تكون قد قمت بالفعل بفك ضغط ملفات التوهج في دليل مساحة عمل Flex Builder الرئيسي. الخطوة التالية هي استيرادها إلى بيئة Flex Builder:

• تأكد من أنك في منظور "Flex Flex".
• انقر بزر الماوس الأيمن على جزء المتصفح الموجود على اليسار.
• حدد "استيراد ..." في القائمة المنبثقة.
• في مربع الحوار ، حدد "عام> المشاريع الحالية في مساحة العمل" وانقر فوق الزر "التالي".
• استخدم أدوات "تحديد الدليل الجذر" للانتقال إلى دليل مساحة عمل Flex Builder
• يجب أن تشاهد الآن مشاريع التوهج المدرجة في لوحة "المشاريع:".
• حدد مشروعي "flare" و "flare.demos" ثم انقر فوق الزر "Finish".

يجب أن تشاهد الآن مشاريع التوهج في جزء المستكشف. يمكنك الآن تصفح شفرة المصدر لكل من المكتبة والعروض التوضيحية.

نظرة عامة على مكتبة الشعلة

فيما يلي نظرة عامة سريعة على مجموعة أدوات التوهج. داخل flare المشروع ، انظر داخل مجلد "src / flare". ستجد عددًا من الحزم التي تقدم ميزات مختلفة:

• analytics: عوامل تشغيل حساب الإحصائيات وتحليل البيانات
• animate: أدوات لإنشاء الرسوم المتحركة
• data: طرق قراءة وكتابة مجموعات البيانات
• display: DisplayObject الأنواع التي توسع تلك التي تقدمها flash.display
• flex: غلاف لتضمين تصورات مضيئة في تطبيقات فليكس
• physics: محرك فيزيائي للتأثيرات الفيزيائية أو التخطيط الموجه بالقوة
• query: معالج استعلام لكائنات ActionScript
• scale: فئات للتعامل مع مقاييس البيانات ، مثل المقاييس الخطية والسجلات والزمنية
• util: مجموعة من فئات الأدوات المساعدة توفر الوظائف المطلوبة بشكل شائع
• vis: مكونات ومشغلات تصور التوهج

وهناك أيضا flare.demos المشروع ، الذي يقدم عددًا من الأمثلة حول كيفية إنشاء مكونات Flare.

استيراد مكتبة ضمن مشروع آخر

للاستفادة من التوهج في مشاريعك ، ستحتاج إلى تحديث إعدادات مشروعك. إليك كيفية القيام بذلك:

1. في جزء المستكشف ، انقر بزر الماوس الأيمن فوق المجلد العلوي لمشروع "البرنامج التعليمي"
2. انقر فوق "خصائص" في قائمة السياق
3. في مربع الحوار الناتج ، انقر على "مسار إنشاء ActionScript" في اللوحة اليمنى (يجب أن يكون العنصر الثالث من الأعلى)
4. انقر فوق علامة التبويب "مسار المكتبة" في اللوحة اليمنى
5. انقر فوق الزر "إضافة مشروع"
6. يجب أن تشاهد الآن قائمة المشاريع ، بما في ذلك التوهج.
7. حدد "مضيئة" ثم انقر فوق "موافق"

لقد أضفت الآن مكتبات التوهج إلى مشروعك ، ويمكنك استخدام أي من الفئات التي توفرها.
شيء واحد يجب ملاحظته حول برنامج التحويل البرمجي المرن - افتراضيًا ، لا يتضمن سوى الفئات التي تستخدمها بالفعل في تطبيقك. لذلك حتى إذا قمت باستيراد مكتبة كبيرة جدًا ، يمكن أن يظل حجم ملف .swf النهائي صغيرًا جدًا. ومع ذلك ، احذر من أن هذا يمكن أن يسبب مشاكل إذا كنت تستخدم انعكاسًا لأداء تحميل ديناميكي للفئة في تطبيقك (ميزة أكثر تقدمًا لم يتم تناولها في هذا البرنامج التعليمي).

الرسوم المتحركة الأساسية: Tween و Sequence و Parallel

حسنًا ، فلنتحرك الآن! ال flare.animate.Transition class هي الفئة الأساسية لجميع الرسوم المتحركة. الفئات الفرعية الهامة Transition هي Tween, Sequenceو Parallel الانتقالات. يتم استخدام أدوات Tweens لتحريك خصائص كائن واحد. تُستخدم التسلسلات لتشغيل سلسلة من الرسوم المتحركة بالترتيب. تعمل التحولات المتوازية على مجموعة من التحولات في وقت واحد. لنبدأ بتوين.

خصائص كائن Tweening

أساسيات فئة Tween بسيطة: نأخذ كائنًا ، ونعطي مجموعة من قيم الخصائص التي نود تغييرها بمرور الوقت ، ونحدد المدة الزمنية لهذا التغيير. باستخدام تطبيق البرنامج التعليمي من الجزء 1 ، دعنا ندير كائن الحاوية. أضف السطر التالي إلى نهاية مُنشئ فئة البرنامج التعليمي:

 var tween: Tween = new Tween (الحاوية ، 3 ، {الدوران: 360}) ؛ tween.play () ؛

تأكد أيضًا من وجود بيان استيراد جديد في أعلى صفك ، حتى يعرف المترجم ما تتحدث عنه. أضف هذا إلى قائمة الواردات:

 استيراد مضيئة.

(ملاحظة: في بعض الأحيان يضيف Flex Builder تلقائيًا عبارة استيراد لك أثناء كتابة اسم فئة جديد. إذا لم يكن الأمر كذلك ، فهناك أسلوب آخر يتمثل في وضع مؤشر النص على النهاية لاسم الفئة الجديدة واكتب "Ctrl-Space" - وهذا من شأنه إنشاء استيراد جديد لك للفصل.)
الآن قم بتشغيل تطبيقك - يجب أن تدور النقاط في دائرة خلال فترة 3 ثوانٍ.
إليك ما يفعله مُنشئ Tween:

• الوسيطة الأولى هي الكائن الذي يجب أن يتم تشويه قيمه
• الوسيطة الثانية هي طول الرسم المتحرك بالثواني
• الوسيطة الثالثة هي مثيل كائن يسرد الخصائص لتحريك وقيمها المستهدفة.
  • يجب أن تتطابق أسماء الخصائص تمامًا مع خصائص كائن الإدخال.
  • الخصائص المتداخلة مسموح بها ، ولكن يجب تضمينها بين علامتي اقتباس. فمثلا، {“data.profit”:50} هو إدخال قانوني إذا كان كائن الإدخال يحتوي على خاصية باسم البيانات والتي بدورها لها خاصية تسمى الربح.

• play طريقة ثم تشغيل الرسوم المتحركة. ال play يمكن أيضًا استدعاء الطريقة باستخدام معلمة منطقية واحدة تشير إلى ما إذا كان سيتم تشغيل الرسم المتحرك في الاتجاه المعاكس أم لا.
ربما لاحظت أن الرسوم المتحركة التناوب تظهر بعض التسارع. هذا لأن الإعداد الافتراضي لـ Tween من الأمثلة استخدام الرسوم المتحركة "بطيئة بطيئة التدريجي". يمكنك التحكم في هذه السلوكيات باستخدام Easing المهام. تأخذ هذه الوظائف كإدخال تقدم الرسوم المتحركة الحالي على شكل كسر بين 0 و 1. ثم تُرجع جزءًا من التقدم المُعالَج لتغيير وتيرة الرسوم المتحركة ، غالبًا بطريقة غير خطية.
لإزالة التسهيل (على سبيل المثال ، استخدم وظيفة التسهيل الخطي) يمكنك كتابة: tween.easing = Easing.none. فقط تأكد من استيراد flare.animate.Easing الطبقة في أعلى الملف.
لا تتردد في تجربة وظائف تخفيف أخرى. على سبيل المثال ، قد تتضمن وظائف التيسير التخفيف في (معالجة بداية الرسم المتحرك فقط) ، أو التخفيف (معالجة نهاية الرسوم المتحركة فقط) ، أو كليهما. على سبيل المثال ، جرّب ما يلي: tween.easing = Easing.easeOutBounce. وهذا من شأنه أن يجعل ترتد الدوران في النهاية.
قبل الانتقال ، حاول تحريك الخصائص الأخرى للحاوية ، مثل قيم الموضع أو المقياس أو ألفا.

الرسوم المتحركة المركبة

• Sequence و Parallel تسمح لك الفصول بتجميع الرسوم المتحركة معًا. يقوم Sequence بتشغيل مجموعة من الرسوم المتحركة واحدًا تلو الآخر. على سبيل المثال ، جرّب ما يلي:

 var t1: Tween = new Tween (الحاوية ، 1 ، {ص: 100}) ؛ var t2: Tween = new Tween (الحاوية ، 1 ، {scaleX: 2}) ؛ var t3: Tween = new Tween (الحاوية ، 1 ، {ص: 300}) ؛ var t4: Tween = new Tween (الحاوية ، 1 ، {scaleX: 1}) ؛ var seq: Sequence = new Sequence (new Parallel (t1، t2)، new Parallel (t3، t4))؛ seq.play () ؛

ستحتاج أيضًا إلى إضافة بعض عبارات الاستيراد الجديدة في أعلى الملف:

 استيراد مضيئة. موازية. استيراد مضيئة.

هذا يخلق أربعة فتيات مراهقات: t1, t2, t3و t4. ثم يخلق انتقالين متوازيين يعملان t1 و t2 معا وتشغيل t3 و t4 سويا. ثم يتم تشغيل التحولات المتوازية واحدة تلو الأخرى في تسلسل. بهذه الطريقة ، من السهل إنشاء رسوم متحركة أكثر تعقيدًا.
لمزيد من الرسوم المتحركة المركبة المتقدمة ، نلقي نظرة على FlareLogo و flare.demos.Animation فصول في flare.demos مشروع.

دفعة الرسوم المتحركة مع المتحولين

باستخدام Tween, Parallelو Sequence فصول ، يمكنك إجراء أي عدد من التحولات المتحركة. ومع ذلك ، عند التعامل مع مجموعات كبيرة من الأشياء (شائعة في التصور) ، قد يكون من الصعب التعامل مع مجموعة كبيرة مماثلة من المراهقين يدويًا. علاوة على ذلك ، يجب أن يكون من السهل تشغيل إجراءات منفصلة لترميز الخصائص المرئية مثل التخطيط واللون والحجم والشكل ولا داعي للقلق بشأن التعامل مع الرسوم المتحركة. ربما تريد تحريك التغييرات أو ربما تريد تحديثًا ثابتًا. في كلتا الحالتين ، يجب أن تكون قادرًا على إعادة استخدام نفس الرمز لتعيين القيم.
لمعالجة هذه المخاوف ، يوفر Flare Transitioner صف دراسي. يبسط المتحولون عملية إنشاء الرسوم المتحركة لمجموعات الكائنات. يمكنك ببساطة أخذ كائن وتعيين الخصائص المطلوبة واحدة تلو الأخرى. خلف الكواليس ، سينتقل المغيّر تلقائيًا إلى المراهقين الضروريين ليعيدوا استخدام الرسوم المتحركة الكاملة. علاوة على ذلك ، إذا لم يكن الرسم المتحرك مرغوبًا ، فيمكن تكوين أداة التحويل لتعيين قيم الخصائص على الفور بدلاً من ذلك. باختصار ، يوفر المُنتقل طبقة غير مباشرة لتحديث خصائص الكائن - يمكن جمع هذه التحديثات ثم تنشيطها أو تطبيقها على الفور.
فيما يلي مثال بسيط على استخدام محول في تطبيقنا التعليمي.

 var t: Transitioner = new Transitioner (2) ؛ لـ (var j: int = 0 ؛ j

هذا المثال يحرك كل العفاريت container إلى عشوائي جديد y عامل وعامل مقياس عمودي عشوائي. نقوم أولا بإنشاء جديد Transitioner من المفترض أن ينشئ رسمًا متحركًا مدته ثانيتان. ثم ننتقل عبر كل نقش متحرك ونستخدم المُنتقل لتعيين الخصائص إلى Tween.
المحول $ يشير عامل التشغيل إلى أننا نريد تعيين قيمة هدف لكائن الإدخال. بشكل افتراضي ، إما جديد Tween تم إنشاؤه ، أو موجود Tween تم العثور على العنصر الحالي. ال $ عامل التشغيل ثم إرجاع كائن لتعيين خاصية الهدف tween.
علاوة على ذلك ، يمكن استخدام المتحولات لإنشاء انتقالات ثابتة (غير متحركة). إذا المتحول immediate تم تعيين الخاصية إلى true ، لن يتم إنشاء Tweens جديدة. بدلاً من ذلك ، سيُرجع عامل التشغيل $ ببساطة قيمة الإدخال. هذا يعني أنه يمكنك إنشاء طرق لتحديث القيم باستخدام محول ، ثم التحكم فيما بعد في ما إذا كنت تريد تحديث هذه القيم أم لا. المعيار "الوضع الفوري" Transitioner يتم استردادها باستخدام ثابت Transitioner.DEFAULT خاصية. بهذه الطريقة لا تحتاج إلى تخصيص جديد Transitioner عند إجراء تحديثات فورية.
يتم استخدام المتحولين على نطاق واسع في جميع أنحاء flare.vis مما يسمح لمصممي التصور بالتحكم في التحديثات التي يجب أن تكون متحركة وكيف.

الجزء 3: تصورات

تحميل البيانات

يستخدم تمثيل البيانات الأساسية لـ Flare ببساطة أنواع بيانات الفلاش المدمجة: Object و Array. على سبيل المثال ، يمكن تمثيل جدول البيانات فقط كمصفوفة من الكائنات ، يحتوي كل كائن على أسماء وقيم كل حقل بيانات. في حين أن التمثيلات الأكثر كفاءة ممكنة ، يوفر هذا النهج أكبر قدر من المرونة مع الاستفادة أيضًا من اصطلاحات تطوير الفلاش الموجودة.
لتحميل البيانات في مشغل الفلاش ، هناك عدد من الأساليب. طريقة بسيطة هي تضمين البيانات الخاصة بك في التطبيق نفسه. بهذه الطريقة ، يتم تنزيل البيانات مع التطبيق ، وهو أمر جيد لمجموعات البيانات الثابتة. على سبيل المثال ، يمكنك استخدام تدوين كائن ActionScript لتعريف مجموعة البيانات مباشرة كمتغير:

بيانات var: Array = [{id: "Q1"، sales: 10000، ربح: 2400} ، {id: "Q2" ، مبيعات: 12000 ، ربح: 2900} ، {id: "Q3" ، مبيعات: 15000 ، ربح : 3800} ، {id: "Q4" ، sales: 15500 ، الربح: 3900}] ؛

ومع ذلك ، في كثير من الحالات ، ستحتاج إلى تحميل بياناتك ديناميكيًا ، إما من داخل صفحة ويب (يمكنك استخدام JavaScript في المتصفح لتمرير القيم إلى Flash) ، أو من خادم على الإنترنت. هناك العديد من الطرق للقيام بذلك ويجب عليك اختيار أفضل ما يناسب تطبيقك الخاص. على سبيل المثال ، يوفر ActionScript أنواعًا إضافية من البيانات وبناءًا للعمل معها XML البيانات باستخدام ECMAScript ل XML (E4X) قياسي.
يوفر Flare أيضًا بعض الأدوات المساعدة لتحميل مجموعات البيانات الخارجية. يدعم تحميل البيانات من أي خادم على الإنترنت وتحويل تلك البيانات إلى كائنات ActionScript داخلية. تنسيقات الملفات المدعومة حاليًا هي نص محدد بعلامات جدولة ("علامة التبويب" ، وهو تنسيق ملف قياسي لتصدير البيانات من أدوات مثل Excel) ، جافا سكريبت تدوين كائن ("json" ، تنسيق بيانات مشترك لتطبيقات الويب) ، و GraphML ("الرسم البياني" ، XML تنسيق لتمثيل الشبكات مع العقد والحواف).
يتم تحميل البيانات البعيدة عن طريق الشعلة باستخدام 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 ، الوظيفة (evt: Event): void {// function to data data بمجرد اكتمال التحميل var ds: DataSet = loader.data as DataSet؛ // الآن افعل شيئًا مع البيانات ...} ) ؛

• DataSource يحتوي المُنشئ على وسيطتين مطلوبتين: عنوان url لمجموعة البيانات ، وسلسلة تشير إلى تنسيق الملف. التنسيقات المدعومة الآن هي "علامة تبويب" (مفصولة بعلامات جدولة) و "json" (تدوين كائن JavaScript) و "الرسم البياني" (GraphML).
بالنسبة لمجموعات البيانات التي قد يكون مخططها (أسماء وأنواع بيانات الحقول) غير واضح ، هناك أيضًا وسيطة مُنشئ ثالث اختيارية تأخذ DataSchema نوع. انظر flare.data.DataSchema و flare.data.DataField دروس للمزيد. يمكن أن يكون المخطط مفيدًا لضمان تسمية قيم البيانات بشكل صحيح (على سبيل المثال ، لملف محدد بعلامات جدولة يفتقد صف رأس) وتحويله إلى أنواع البيانات المناسبة (على سبيل المثال ، لبيانات JSON التي تم فيها التفاف القيم الرقمية بين علامات اقتباس).
لتحميل البيانات فعليًا ، تسمى طريقة تحميل DataSource ، بإرجاع flash.net.URLLoader نموذج. يمكن استخدام أداة التحميل لتتبع تقدم التنزيل (على سبيل المثال ، إذا كنت ترغب في توفير شريط تقدم) وتوفر حدث إعلام عند اكتمال التنزيل. في المثال أعلاه ، أضفنا مستمعًا للأحداث ليتم إعلامك عند اكتمال التنزيل. ال DataSource سيقوم تلقائيًا بتحليل بيانات الإدخال ، وتعيينها في كائنات ActionScript ، وتخزين النتائج في ملف flare.data.DataSet موضوع. ال DataSet يمكن أن تمثل الفئة بيانات الجدول والشبكة (العقدة / الحافة).

إنشاء وإدارة الكائنات المرئية

نود الآن تصور مجموعة بيانات. للقيام بذلك ، نقوم بتعيين سجلات البيانات الفردية في عناصر مرئية. يوفر التوهج مجموعة من العناصر المرئية لتمثيل البيانات. هنا لمحة عامة عن الفئات الأساسية التي تقدمها flare.vis.data الحزمة.

• DataSprite: فئة أساسية للعفاريت التي تمثل البيانات بشكل مرئي. DataSprite هي فئة فرعية من Flash Player Sprite فئة. DataSprite يتضمن data خاصية حيث يتم تخزين مجموعة البيانات (كائن ActionScript) وتوفر أيضًا متغيرات بصرية إضافية بخلاف تلك التي تدعمها النقوش المتحركة الأساسية ، بما في ذلك حقول الألوان والشكل والحجم ، ودعم تحديد المواضع في الإحداثيات القطبية.
• NodeSprite: DataSprite مثيل يمثل عقدة. هذا هو النوع الافتراضي المستخدم لتصور البيانات. NodeSprite يمكن توصيل الأمثلة داخل هياكل الشبكة أو الشجرة عن طريق EdgeSprite الحالات.
• EdgeSprite: DataSprite مثيل يمثل حافة. An EdgeSprite يربط اثنين NodeSprites. يمكن الوصول إلى العقد من خلال source و target خصائص. EdgeSprites يتم استخدامها لإنشاء الرسوم البيانية والأشجار ، وكذلك لتمثيل الخطوط ، مثل الرسوم البيانية للسلسلة الزمنية.

عادة ، يتم إنشاء NodeSprites و EdgeSprites وتخزينها في flare.vis.data.Data فئة ، والتي تدير جميع العناصر المرئية لتصور واحد. ال Data يوفر الفصل طرقًا لإنشاء كائنات مرئية جديدة لصفوف البيانات ولتمثيل بنية الرسم البياني.
• Data يوفر الفصل أيضًا أساليب لاجتياز وتحديث عناصر البيانات المضمنة. ال nodes و edges خصائص إرجاع قوائم العقد والحواف المضمنة في البيانات. تتضمن كل من هذه القوائم أ visit الطريقة التي تسمح لك بتمرير وظيفة سيتم استدعاؤها بعد ذلك مع كل عقدة أو حافة. أيضا ، setProperty و setProperties تسمح لك الطرق بتعيين قيم الخصائص لجميع العقد أو الحواف في وقت واحد. هذه الأساليب بشكل اختياري تأخذ Transitioner كحجة ، بحيث يمكنك تنشيط تحديث الخاصية.
على سبيل المثال ، ينتج عن الكود التالي رسم متحرك لمدة ثانية واحدة يتم فيه تعيين لون الخط لكل العقد إلى اللون الأزرق. (لاحظ أن تدوين سداسي عشري 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 يأخذ tuple بيانات الإدخال (و Object) ويخلق جديد NodeSprite لتصور تلك البيانات.
• addEdgeFor يأخذ اثنين القائمة NodeSprites ويضيف EdgeSprite ربطها. كما تستثني الطريقة اختياريًا مجموعة بيانات (مرة أخرى ، Object تمثل أي حقول بيانات) للحافة.

هنا مثال بسيط للإنشاء NodeSprites لمجموعة بيانات مجدولة ، بافتراض أن لدينا مصفوفة من كائنات البيانات:

قائمة var: Array ؛ // مصفوفة من كائنات البيانات التي قمنا بتحميلها بالفعل var data: Data = new Data ()؛ // حاوية بيانات جديدة لكل منها (var o: Object in list) {data.addNode (o)؛ }}

والنتيجة هي Data كائن مملوء بصري DataSprite (العقد أو الحواف) المثيلات.
من الناحية العملية ، لا تحتاج دائمًا إلى تعبئة البيانات المرئية يدويًا. لخلق Data كائن لتصور مجموعة بيانات محملة ، يمكنك غالبًا استخدام طريقة ملائمة بدلاً من ذلك. ال Data.fromArray() وظيفة يخلق Data مثيل للبيانات الجدولية المخزنة كمصفوفة من كائنات ActionScript ، بينما Data.fromDataSet() بطريقة مماثلة يخلق Data مثيل من تحميل DataSet موضوع.

إنشاء تصور

الآن دعنا نجمع كل هذا معًا لبدء عمل تصورات. ال Visualization تمثل الفئة تصور واحد ، بما في ذلك العلامات المرئية (المخزنة في a Data سبيل المثال) والفؤوس. لإنشاء تصور ، نقوم بتحميل مجموعة بيانات ، وإضافة البيانات إلى التمثيل البصري ، وإعداد عوامل التشغيل التي تحدد كيفية تصور البيانات. هنا مثال. انظر إلى الشفرة أولاً ، ثم تابع القراءة لفهم ما يفعله كل جزء.

الحزمة {import flare.data.DataSet؛ استيراد flare.data.DataSource ؛ استيراد flare.scale.ScaleType ؛ استيراد التوهج. استيراد 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.net.URLLoader ؛ [SWF (width = "800"، height = "600"، backgroundColor = "# ffffff"، frameRate = "30")] البرنامج التعليمي للفصل العام يمتد Sprite {private var vis: Visualization؛ الوظيفة العامة البرنامج التعليمي () {loadData () ؛ } الوظيفة الخاصة loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt"، "tab")؛ محمل var: URLLoader = ds.load () ؛ loader.addEventListener (Event.COMPLETE ، الوظيفة (evt: Event): void {var ds: DataSet = loader.data as DataSet؛ visualize (Data.fromDataSet (ds))؛}) ؛ } تصور الوظيفة الخاصة (البيانات: البيانات): باطل {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 ، مخزنة بتنسيق محدد بعلامات جدولة. عند اكتمال الحمل ، تتم إضافة مجموعات البيانات التي تم تحميلها إلى ملف Data سبيل المثال باستخدام fromDataSet طريقة الراحة. تحت غطاء محرك السيارة ، وهذا يؤدي إلى إنشاء NodeSprites لتصور كل عنصر بيانات. وأخيرا، فإن visualize طريقة تسمى.
• visualize طريقة إعداد التصور. إليك ما يحدث في كل خطوة:

• الجزء الأول: التهيئة
  • يتم إنشاء تصور جديد للبيانات
  • وضعنا حدود التصور. هذا يحدد منطقة التخطيط.
  • وضعنا x و y موقف التصور الخاص بنا وإضافة التصور إلى قائمة العرض.
• الجزء 2: تحديد الترميزات المرئية
  • نستخدم تخطيط المحور ، ووضع "التاريخ" على المحور السيني و "العمر" على المحور الصادي. ال AxisLayout يقوم المشغل أيضًا بتكوين محاور التصور تلقائيًا. نستخدم بناء الجملة "data.date" للإشارة إلى متغيرات البيانات ، حيث أنها تقع داخل NodeSpriteالصورة data خاصية.
  • نضيف ترميزًا للون ، بحيث يمثل لون خط العقدة متغير "السبب" (سبب الوفاة). نقول أيضًا لترميز الألوان أن قيم متغير "السبب" تمثل الفئات (ScaleType.CATEGORIES). سيستخدم برنامج ترميز الألوان هذه المعلومات لاختيار لوحة ألوان مناسبة تلقائيًا. كما سنرى قريبًا ، يمكنك أيضًا توفير لوحة الألوان الخاصة بك.
  • نضيف ترميز الشكل ، بحيث يمثل شكل الجسم "جنس" الضحية.
  • نقوم بتعيين الخصائص الافتراضية - نقوم بتعيين لون تعبئة العقد إلى شفاف كامل ، وتعيين عرض الخط إلى 2 بكسل.
  • أخيرا ، نسميها update طريقة. هذا يدير جميع العوامل بالترتيب.

تحديث التصور

بمجرد إنشاء تصور ، قد نرغب في تحديثه. على سبيل المثال ، ربما نود تغيير ترميز الألوان لتصور جنس الأشخاص بدلاً من ذلك.
أولاً ، دعنا نضيف طريقة جديدة إلى الفصل:

 وظيفة خاصة colorByGender (): باطلة {var color: ColorEncoder = ColorEncoder (vis.operators [1])؛ color.source = "data.sex" ؛ color.palette = new ColorPalette ([0xffff5555، 0xff8888ff]) ؛ vis.update (new Transitioner (2)). play () ؛ }}

هذه الطريقة:

1. استرداد عامل التشغيل الثاني (عامل التشغيل في الفهرس 1) وصبه إلى أ ColorEncoder
2. يغير source خاصية لترميز الألوان لاستخدام متغير "data.sex"
3. لتعيين لوحة ألوان جديدة (في هذه الحالة ، أحمر للإناث ، أزرق للذكور - ترتيب اللون يتطابق مع الترتيب الأبجدي للتسميات)
4. ينعش التغيير عن طريق استدعاء التحديث بعلامة Transitioner تعيين الرسوم المتحركة لمدة ثانيتين. ال vis.update طريقة إرجاع Transitioner، حتى نتمكن من استدعاء اللعب على القيمة المرجعة للتحديث. (ملاحظة: يمكنك أيضًا حذف Transitioner وتمرير الرقم 2 كحجة update. حلقة جديدة Transitioner سيتم إنشاؤها تلقائيًا وإعادتها.)

الآن نحن بحاجة إلى توصيل التطبيق حتى نتمكن من تشغيل التحديث بشكل تفاعلي. للقيام بذلك ، أضف التعليمات البرمجية التالية إلى المنشئ:

 // add a var var label label button button: TextSprite = new TextSprite ("Color by Gender")؛ addChild (زر) ؛ button.x = 710 ؛ button.y = 50 ؛ button.buttonMode = صحيح ؛ button.addEventListener (MouseEvent.CLICK ، الوظيفة (evt: MouseEvent): void {colorByGender ()؛}) ؛

هذا الكود:

1. إنشاء تسمية نصية جديدة (TextSprite فئة مساعد من flare.display صفقة)
2. يضيف الملصق إلى التطبيق ويضبط موضعه
3. باكجات buttonMode إلى true (وهذا يجعل مؤشر اليد يظهر عند تحريك الماوس فوق التسمية)
4. يضيف مستمع حدث يتم تشغيله عند النقر على الملصق. نضيف وظيفة رد الاتصال التي تستدعي colorByGender الأسلوب.

لكي يعمل الرمز أعلاه ، سنحتاج إلى تضمين عبارات الاستيراد الإضافية هذه في الجزء العلوي من الملف:

 استيراد flash.events.MouseEvent ؛ استيراد مضيئة. متحرك. استيراد flare.display.TextSprite ؛ استيراد flare.util.palette.ColorPalette ؛

الآن يجب أن تكون قادراً على ترجمة وتشغيل التطبيق. يؤدي النقر على تصنيف "اللون حسب الجنس" إلى تحريك التغيير في ترميز اللون.

الخطوات المقبلة

توضح الأمثلة أعلاه أساسيات Flash ومكتبة Flare ، ولكن هناك العديد من الميزات التي لم يتم تغطيتها بعد. للمضي قدمًا ، نوصي (أ) بفحص كل من الفلاش والتوهج API وثائق للتعرف على جميع الفئات المتاحة ، و (ب) الحفر من خلال العروض التوضيحية Flare لتعرف كيف يمكن استخدام نفس المبادئ الموضحة هنا لإنشاء عدد من التصورات الأخرى. أو الأفضل من ذلك أن تحفر في شفرة مصدر Flare لتتعرف على ما يجري تحت غطاء المحرك.
للمساعدة في هذه العملية ، هنا لمحة عامة عن الحزم الفرعية في 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 صفقة. لا تتردد في اللعب باستخدام العروض التوضيحية وتعديلها ونسخها ولصقها والاستفادة منها للحصول على فهم أفضل لكيفية عمل Flash و Flare.

روابط

المرفقات

الأدوات

أدلة تقنية أخرى

الدعم الفني

المصدر: https://blokt.com/tool/prefuse-flare