התלקחות | ויזואליזציה של נתונים באינטרנט

Flare מקל על יצירת הדמיות נתונים אינטראקטיביות

כדי להתחיל לבצע הדמיות משלך, להוריד התלקחות ולעבוד במדריך הבא. צריך עוד עזרה? בקרו ב- פורום עזרה (תצטרך א מקור כניסה לפרסום).

Flare היא תוכנת קוד פתוח המשוחררת תחת רישיון BSD, כלומר ניתן לפרוס אותה ולשנות אותה בחופשיות (ואף למכור אותה עבור $$). העיצוב של פלייר הותאם לפי ההעדפה הקודמת שלו, ערכת כלים להמחשה עבור ג'אווה.

יישומים

הודעות

• 2010.10.07: פיתוח התלקחות נפתח לקהילה והמקור עבר מ- 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. הגדרת סביבת פיתוח פלאש עבודה. ישנן שתי גישות. אנו ממליצים על הראשון לשם פשטות, אך משתמשים מתקדמים יותר מוזמנים להשתמש בגישה השנייה.
   • אפשרות 1 (פשוטה יותר): התקן את Adobe Flex Builder.
     • זוהי סביבת פיתוח מלאה ליישומי ActionScript / Flex. זה זמין לכל הפלטפורמות העיקריות (Windows, Mac, Unix). משתמשים שכבר משתמשים ב- IDE Eclipse יכולים גם להתקין את 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

פלאש הוא סביבה נהדרת עבור גרפיקה אינטראקטיבית ועם התוספת האחרונה של שפת התכנות ActionScript 3 היא פשוט הפכה להרבה יותר חזקה ויעילה. בעוד שמבוא שלם ל- AS3 אינו מעבר לתחום הדרכה זה, הנה כמה משאבים שתוכלו למצוא בהם שימוש:

• Adobe מספקת סקירה כללית של AS3, עם קישורים למשאבים נוספים.
• ActionScript 3 חיוני מאת קולין מוק מהוצאת אוריילי הוא ספר נהדר שיעזור לכם להתחיל. אתה יכול גש אליו באופן מקוון כאן (מוסדות מסוימים, כמו אוניברסיטאות, מספקים גישה בחינם).
• ההפניה של ממשק API של Flex היא לא יסולא בפז בהבנת המחלקות והשיטות השונות הקיימות. אנו נהיה ממוקדים רק בשיעורים בשכונה flash.* חבילות.

הדרכה זו מניחה היכרות בסיסית עם תחביר וסוגים של ActionScript וכן מושגים של תכנות מונחה עצמים.

חלק 1: DisplayObjects

מבוא

פלאש מדגם סצנה חזותית דו-ממדית באמצעות א תרשים. אובייקטים חזותיים מסודרים בהיררכיה, כאשר אובייקטים של ילדים מוגדרים במרחב הקואורדינטות של ההורה. לעיתים קרובות תראה תרחיש זה המכונה " רשימת תצוגה הן בתיעוד של אדובי והן בספרים על תכנות פלאש.
הצומת בראש רשימת התצוגה הוא תמיד Stage לְהִתְנַגֵד. לבמה יש תמיד ילד אחד ויחיד. זה נקרא root, וכל הפריטים הוויזואליים נמצאים מתחת לשורש. בדרך כלל, השורש הוא יישום ה- Flash שלך בפועל. עוד נחזור לזה בקרוב.
כל הפריטים הוויזואליים שניתן להוסיף לרשימת התצוגה הם מקרים של DisplayObject מעמד. תת-קבוצות של DisplayObject לכלול Bitmap (לתמונות), TextField (עבור אזורי טקסט אינטראקטיביים), ו- Video (תחשבו ביוטיוב). המופעים הנפוצים ביותר, עם זאת, הם המקרים Sprite ו Shape שיעורים. לעיון רוב השיעורים הללו ניתן למצוא ב- flash.display חבילה (אם כי בסופו של דבר סביר להניח שתמצא את flash.text חבילת שימוש,).
השמיים Sprite המחלקה היא האובייקט החזותי הכללי היעיל ביותר שמשמש נגן Flash. שודדים הם אובייקטים חזותיים המכילים תוכן רישום ויכולים לשמש כמכולה לתתי צמתים ברשימת התצוגה (ה- Sprite תת כיתות flash.display.DisplayObjectContainer מעמד). לעומת זאת, ה- Shape המחלקה יכולה להכיל תוכן רישום, אך אינה יכולה להחזיק צמתי משנה. כתוצאה מכך, צורות צריכות פחות זיכרון, אך הרבה פחות גמישות. לשם הפשטות, נתמקד בספריטים במדריך זה.

צור אפליקציה חדשה

ראשית, בואו ליצור יישום Flash חדש. לשם כך, פתח את Flex Builder וודא שאתה נמצא בפרספקטיבה של "פיתוח פיתוח" (בדרך כלל מגיעים אליו על ידי לחיצה על הסמל "Fx" בשחור לבן בפינה השמאלית העליונה).
בחלונית "ניווט" משמאל, לחץ לחיצה ימנית על התצוגה ובחר "חדש> פרוייקט ActionScript". בתיבת הדו-שיח המתקבלת, הקלד "הדרכה" כשם הפרויקט, ואז לחץ על "סיום". זה ייצור פרויקט חדש עבורך.
כעת תראה תיקיית "הדרכה" בחלונית "ניווט". בתוך תיקיה זו, אתה אמור לראות קובץ בשם "Tutorial.as". זהו קובץ היישום הראשי שלך. פתח אותו, אם הוא כבר לא פתוח.
בתוך הקובץ תראה את הפיגומים הבסיסיים לשיעור זה:

חבילה {ייבוא ​​flash.display.Sprite; הדרכה בכיתה ציבורית מרחיבה את Sprite {מדריך לתפקוד ציבורי () {}}}

שימו לב שכיתה זו מרחיבה את Sprite מעמד. מכיוון שזו מחלקת היישומים העיקרית שלנו, כאשר אנו מפעילים את היישום מופע של ה- Tutorial המחלקה תתווסף אוטומטית לרשימת התצוגה כשלה root (הילד היחיד והיחיד של Stage).
שימו לב גם כי בנאי נוצר אוטומטית. בנאי זה ייקרא כאשר האפליקציה תושק. למי שמכיר שפות תכנות כמו C, C ++ או Java, הקבלן לשיעור היישומים מתנהג כמו main פונקציה בשפות אחרות אלה.
עם פיגומי יישום חדשים זה במקום, נוכל להתחיל לשחק עם חפצים חזותיים. עם זאת, דבר אחד שאנחנו רוצים לעשות קודם. הוסף שורה חדשה ישירות מעל הצהרת הכיתה ("public class Tutorial…") קו שאומר:

[SWF (רוחב = "800", גובה = "600", רקע צבע = "# 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 מדפיס מחרוזת לקונסולה. פלט זה מופיע רק בעת הפעלת האפליקציה במצב "ניפוי באגים".

הנה הקוד:

חבילה {ייבוא ​​flash.display.Sprite; [SWF (רוחב = "800", גובה = "600", רקע צבע = "# ffffff", frameRate = "30")] הדרכה בכיתה ציבורית מרחיבה את Sprite {פונקציה ציבורית הדרכה () {var sprite: Sprite = חדש Sprite () ; sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); this.addChild (ספרייט); sprite.x = 50; sprite.y = 50; trace ("ספרייט שלנו נמצא ב:" + sprite.x + "," + sprite.y); }}}

הפעל את היישום (לחץ באמצעות לחצן העכבר הימני על "Tutorial.as" ובחר "הפעל בשם> Flex יישום"). אתה אמור לראות עיגול אפור עם קו מתאר שחור בפינה השמאלית העליונה, שבמרכזו נקודה 50, 50. אם אתה מריץ את היישום במצב ניפוי באגים (בחר "איתור באגים בתור> יישום להגמיש"), אתה אמור לראות גם את המחרוזת "שלנו sprite הוא ב: 50, 50 "במסוף הפלט.

שודדים מקוננים

עכשיו בואו נהפוך את הסצינה שלנו לקצת יותר מעניינת. נתחיל בהעברת קוד דור הספרייט שלנו לשיטה חדשה. נוסיף שיטה זו לכיתה שלנו:

 פונקציה פרטית createCircle (x: מספר, y: מספר): ספרייט {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; ספרייט חוזר; }

בשלב הבא אנו מחליפים את הקוד בבנאי שלנו. ראשית, אנו יוצרים ספרייט חדש בשם container אשר נשתמש בו כדי להחזיק אוסף מעגלים. אנו ממקמים אותו במרכז הבמה שלנו. שנית, אנו משתמשים בלולאה ליצירת חבורה של מעגלים. כאן אנו מיישרים קו את המעגלים באופן סימטרי סביב נקודת 0,0 של מיכל האב. הבנאי החדש שלנו נראה עכשיו כך:

 הדרכה לתפקוד ציבורי () {var container: Sprite = Sprite new (); 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)); }}

הפעל את הגרסה החדשה של היישום. אתה אמור לראות שורה של עשרה מעגלים באמצע היישום.
כעת אנו יכולים לשנות את המיכל כדי לעדכן את כל המעגלים בתוכו. נסה לשחק עם הגדרת משתנים חזותיים שונים על ספרייט המיכל. לדוגמה, שנה את ה- x, y, scaleX, scaleY, rotation, ו alpha נכסים.

נושאים אחרים

אתה יכול לעשות הרבה יותר עם האפשרויות הבסיסיות ש- Flash מספק. למרבה הצער, הם קצת מעבר למה שיש לנו זמן כאן. כמה דברים שאפשר לחקור כוללים מסנני תמונות (ראה flash.filters חבילה), המאפשרות להוסיף אפקטים חזותיים להצגת אובייקטים באמצעות שלהם filters , והאפשרויות השונות הקיימות ב- flash.display.Graphics כיתה, כולל סגנונות מילוי וקווים, ושגרות רבות נוספות לציור דו מימדי.

חלק 2: אנימציות

עכשיו כשאנחנו יכולים ליצור אובייקטים חזותיים, הגיע הזמן להתחיל לתת להם קצת חיים. התלקחות כוללת את flare.animate חבילה שתעזור להקל על זה. ראשית, עלינו לייבא את ספריות ההתלקחות לשימוש ב- Flex Builder.

יבוא ספריות

לפני שתמשיך, וודא שיש לך את ספריות ההתלקחות כפרויקטים בתוך Flex Builder. היית אמור כבר לפתוח את קבצי ה- flare לרשימת הספרייה בספריית העבודה העיקרית של Flex Builder. השלב הבא הוא לייבא אותם לסביבת Flex Builder:

• וודא שאתה נמצא בפרספקטיבה של "פיתוח פיתוח".
• לחץ באמצעות לחצן העכבר הימני על חלונית הנווט בצד שמאל.
• בחר "יבוא ..." בתפריט הקופץ.
• בתיבת הדו-שיח בחר "כללי> פרויקטים קיימים לסביבת העבודה" ולחץ על כפתור "הבא".
• השתמש בווידג'טים "בחר ספריית שורש" כדי לנווט לספריית סביבת העבודה של Flex Builder שלך
• כעת אתה אמור לראות את פרויקטי ההתלקחויות המופיעים בחלונית "פרויקטים:".
• בחר בפרויקטים "flare" ו- "flare.demos" ולחץ על כפתור "Finish".

כעת אתה אמור לראות את פרויקטי ההתלקחות בחלונית Navigator. כעת תוכל לגלוש בקוד המקור עבור כל הספרייה וההדגמות כאחד.

סקירה כללית של ספריית ההתלקחות

להלן סקירה מהירה של ערכת הכלים להתלקחות. בתוך ה flare פרויקט, התבונן בתיקיית "src / flare". תוכלו למצוא מספר חבילות הכוללות תכונות שונות:

• analytics: מפעילים לחישוב סטטיסטיקות וניתוח נתונים
• animateכלים ליצירת אנימציות
• dataשיטות לקריאה וכתיבה של מערכי נתונים
• display: DisplayObject סוגים שמרחיבים את אלה שמספקים flash.display
• flex: עטיפה להטמעת הדמיות התלקחות ביישומי Flex
• physics: מנוע פיזיקה להשפעות פיזיות או לפריסה מכוונת כוח
• query: מעבד שאילתה עבור אובייקטים של ActionScript
• scale: שיעורים לטיפול בסולמות נתונים, כגון סולמות לינאריים, יומנים וזמנים
• util: קבוצה של שיעורי שירות המספקים פונקציות נפוצות
• vis: רכיבי ההדמיה הבהירה והמפעילים

יש גם את flare.demos פרויקט, המספק מספר דוגמאות ליצירת רכיבי Flare.

ייבוא ​​ספרייה בפרויקט אחר

כדי להשתמש בהתלקחות בפרויקטים משלך, עליך לעדכן את הגדרות הפרויקט שלך. כך תוכלו לעשות זאת:

1. בחלונית Navigator, לחץ באמצעות לחצן העכבר הימני על התיקיה העליונה של פרויקט "הדרכה"
2. לחץ על "מאפיינים" בתפריט ההקשר
3. בתיבת הדו-שיח שהתקבלה, לחץ על "נתיב לבנה של ActionScript" בלוח השמאלי (זה אמור להיות הפריט השלישי מלמעלה)
4. לחץ על הכרטיסייה "נתיב ספריה" בלוח הימני
5. לחץ על כפתור "הוסף פרויקט"
6. כעת אתה אמור לראות רשימת פרויקטים, כולל התלקחות.
7. בחר "התלקחות" ולחץ על "אישור"

הוספת עכשיו את ספריות ההתלקחות לפרויקט שלך, ואתה יכול להשתמש בכל אחת מהכיתות שהיא מספקת.
דבר אחד שיש לציין לגבי מהדר Flex - כברירת מחדל הוא כולל רק את הכיתות בהן אתה משתמש בפועל ביישום שלך. כך שגם אם אתה מייבא ספריה גדולה מאוד, גודל קובץ ה- .swf הסופי שלך עדיין יכול להיות קטן למדי. עם זאת, יש להיזהר שהדבר עלול לגרום לבעיות אם אתה משתמש בהשתקפות לביצוע טעינת כיתות דינאמיות ביישום שלך (תכונה מתקדמת יותר שלא נכללת במדריך זה).

אנימציה בסיסית: טווין, רצף ומקביל

אוקיי, עכשיו בואו להנפיש! ה flare.animate.Transition השיעור הוא מחלקת הבסיס של כל האנימציות. תת-קבוצות חשובות של Transition הם Tween, Sequence, ו Parallel מעברים. טווינים משמשים להנפשת תכונות של אובייקט בודד. רצפים משמשים להפעלת סדרת אנימציות לפי סדר. מעברים מקבילים מריצים אוסף מעברים במקביל. נתחיל עם טווין.

התאמת מאפייני אובייקט

היסודות של מחלקת Tween הם פשוטים: אנו לוקחים אובייקט, נותנים מערך של ערכי מאפיין שנרצה לשנות לאורך זמן, וציין את משך הזמן לאותו שינוי. בעזרת היישום הדרכה מחלק 1, בוא נסובב את אובייקט המיכל. הוסף את השורה הבאה לסוף בנאי כיתות הדרכה:

 var tween: Tween = Tween חדש (מיכל, 3, {סיבוב: 360}); tween.play ();

כמו כן, וודא שיש לך הצהרת ייבוא ​​חדשה בראש הכיתה שלך, כך שהמהדר יודע על מה אתה מדבר. הוסף את זה לרשימת היבוא:

 יבוא flare.animate.Tween;

(הערה: לפעמים 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 שיעורים מאפשרים לקבץ אנימציות יחד. רצף מפעיל סדרת אנימציות בזה אחר זה. לדוגמה, נסה זאת:

 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: רצף = רצף חדש (מקביל חדש (t1, t2), מקביל חדש (t3, t4)); seq.play ();

תצטרך להוסיף גם הצהרות יבוא חדשות בראש הקובץ:

 יבוא התלקחות. חיובי. יבוא flare.animate.Sequence;

זה יוצר ארבעה טווינים: t1, t2, t3, ו t4. לאחר מכן הוא יוצר שני מעברים מקבילים שרצים t1 ו t2 יחד ולרוץ t3 ו t4 יַחַד. המעברים המקבילים מופעלים בזה אחר זה ברצף. באופן זה קל לבנות אנימציות מורכבות יותר.
לקבלת הנפשות מורכבות מתקדמות יותר, הסתכל ב FlareLogo ו flare.demos.Animation שיעורים ב flare.demos פרויקט.

אצווה אנימציה עם מעברים

משתמש ב Tween, Parallel, ו Sequence שיעורים, אתה יכול לבצע כל מספר של מעברים מונפשים. עם זאת, כשמדובר באוספים גדולים של חפצים (נפוצים בהדמיה) זה יכול להיות כאב לטפל ידנית בסט טווינים גדול באותה מידה. יתר על כן, צריך להיות קל להפעיל שגרות נפרדות לקידוד מאפיינים חזותיים כמו פריסה, צבע, גודל, צורה ולא צריך לדאוג לטיפול באנימציה. אולי אתה רוצה להנפיש שינויים או אולי תרצה עדכון סטטי. כך או כך, אתה אמור להיות מסוגל לעשות שימוש חוזר באותו קוד להקצאת ערכים.
כדי לטפל בדאגות אלה, Flare מספקת את Transitioner מעמד. מעברים מפשטים את תהליך יצירת האנימציות לאוספי חפצים. אתה פשוט לוקח אובייקט ומגדיר את המאפיינים הרצויים בזה אחר זה. מאחורי הקלעים, המעבר ייצור אוטומטית ושימוש חוזר בטווינים הדרושים כדי לדגמן את האנימציה המלאה. יתר על כן, אם אנימציה אינה רצויה, ניתן להגדיר את המעבר להגדיר במקום זאת את ערכי המאפיינים באופן מיידי. בקיצור, המעבר מספק שכבת indirection לעדכון מאפייני אובייקט - ניתן לאסוף עדכונים אלה ואז להנפיש אותם או ליישם אותם מייד.
להלן דוגמא פשוטה לשימוש במעבר באפליקציית ההדרכה שלנו.

 var t: מעבר = מעבר חדש (2); עבור (var j: int = 0; j

דוגמה זו אנימציה של כל השודדים בתוך container לאקראי חדש y מיקום וגורם סולם אנכי אקראי. ראשית אנו יוצרים חדש Transitioner זה אמור ליצור אנימציה של שתי שניות. לאחר מכן אנו עוברים דרך כל ילד ספרייט ומשתמשים במעבר להגדרת המאפיינים Tween.
המעבר $ מפעיל מציין שאנחנו רוצים להגדיר ערך יעד עבור אובייקט הקלט. כברירת מחדל, אחד חדש Tween נוצר, או קיים Tween נמצא עבור הפריט הנוכחי. ה $ לאחר מכן מפעיל מחזיר אובייקט עליו ניתן להגדיר את נכס היעד של ה- Tween.
יתר על כן, ניתן להשתמש במעברים ליצירת מעברים סטטיים (לא מונפשים). אם המעבר immediate המאפיין מוגדר לאמיתי, הוא לא ייצור טווינס חדש. במקום זאת, מפעיל $ פשוט יחזיר את ערך הקלט. משמעות הדבר היא שאתה יכול ליצור שיטות מעדכנות ערכים באמצעות מעבר, ואז לשלוט אחר כך אם ברצונך שהערכים הללו יעודכנו או לא. "המצב המיידי" הרגיל Transitioner מוחזר באמצעות הסטטי Transitioner.DEFAULT תכונה. ככה אתה לא צריך להקצות חדש Transitioner בעת ביצוע עדכונים מיידיים.
משתמשים במעברים רבים ברחבי האזור flare.vis חבילה, המאפשרת למעצבי הדמיה לשלוט באילו עדכונים צריך להיות מונפש וכיצד.

חלק 3: הדמיות

טוען נתונים

ייצוג הנתונים הבסיסי עבור Flare פשוט משתמש בסוגי נתוני ה- Flash המובנים: Object ו Array. לדוגמה, טבלת נתונים יכולה להיות מיוצגת כמערך של אובייקטים, שכל אובייקט מכיל את השמות והערכים של כל שדה נתונים. אמנם קיימים ייצוגים יעילים יותר, אולם גישה זו מספקת את הגמישות ביותר תוך ניצול מוסכמות פיתוח Flash קיימות.
כדי לטעון נתונים בנגן הפלאש, ישנן מספר גישות. גישה פשוטה היא להטמיע את הנתונים שלך ביישום עצמו. באופן זה, הנתונים מורידים יחד עם היישום, וזה בסדר למערכות נתונים סטטיות. לדוגמה, אתה יכול להשתמש בסימון האובייקטים של ActionScript כדי להגדיר את מערך הנתונים ישירות כמשתנה:

נתונים על var: מערך = [{id: "Q1", מכירות: 10000, רווח: 2400}, {id: "Q2", מכירות: 12000, רווח: 2900}, {id: "Q3", מכירות: 15000, רווח : 3800}, {id: "Q4", מכירות: 15500, רווח: 3900}];

עם זאת, במקרים רבים תרצה לטעון את הנתונים שלך באופן דינמי, בין מתוך דף אינטרנט (אתה יכול להשתמש ב- JavaScript בדפדפן כדי להעביר ערכים ל- Flash), או משרת באינטרנט. ישנן גישות רבות לעשות זאת ועליך לבחור את כל מה שמתאים ביותר ליישום הספציפי שלך. לדוגמה, ActionScript מספק סוגי נתונים ותחביר נוספים לעבודה XML נתונים באמצעות ECMAScript עבור XML (E4X) תקן.
Flare מספקת גם כמה כלי עזר לטעינת ערכות נתונים חיצוניות. הוא תומך בטעינת נתונים מכל שרת באינטרנט והמרת נתונים לאובייקטים פנימיים של ActionScript. פורמטי הקבצים הנתמכים כרגע הם טקסט המופרד באמצעות לשוניות ("כרטיסייה", תבנית קובץ רגילה לייצוא נתונים מכלים כמו Excel), סימון אובייקט JavaScript ("Json", תבנית נתונים נפוצה ליישומי אינטרנט), ו- GraphML ("Grafml", an XML פורמט לייצוג רשתות עם צמתים וקצוות).
נתונים מרחוק נטענים על ידי התלקחות באמצעות flare.data.DataSource מעמד. להלן דוגמה לשימוש בו כדי לטעון קובץ נתונים המופרד בכרטיסיות:

var ds: DataSource = DataSource חדש ("http://flare.prefuse.org/data/test.tab.txt", "הכרטיסייה"); loader var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, פונקציה (evt: Event): void {// function לטיפול בנתונים ברגע שהטעינה הושלמה var ds: DataSet = loader.data בתור DataSet; // עכשיו תעשו משהו עם הנתונים ...} );

השמיים DataSource לבנאי יש שני טיעונים נדרשים: כתובת האתר של מערך הנתונים ומיתר המציין את פורמט הקובץ. כרגע הפורמטים הנתמכים הם "כרטיסייה" (מופרדת בכרטיסיות), "json" (ציון אובייקט JavaScript) ו- "graphml" (GraphML).
עבור מערכי נתונים שהסכימה שלהם (שמות וסוגי הנתונים של השדות) עשויים להיות לא ברורים, יש גם טיעון בנאי שלישי, אופציונלי, שלוקח DataSchema סוּג. ראה את flare.data.DataSchema ו flare.data.DataField שיעורים לעוד. הסכימה יכולה להועיל להבטיח כי ערכי נתונים נקראים כראוי (למשל, עבור קובץ המופרק לטאבים חסר שורת כותרות) והמרה לסוגי הנתונים המתאימים (למשל, לנתוני JSON שבהם נעטפו ערכים מספריים בציטוטים).
כדי לטעון את הנתונים בפועל, נקראת שיטת העומס של DataSource, החזרת א flash.net.URLLoader למשל. ניתן להשתמש במטעין כדי לעקוב אחר התקדמות ההורדה (למשל אם רצית לספק סרגל התקדמות) ומספק אירוע התראה לאחר סיום ההורדה. בדוגמה שלמעלה אנו מוסיפים מאזין לאירועים כדי לקבל הודעה לאחר סיום ההורדה. ה DataSource ינתח אוטומטית את נתוני הקלט, ימפה אותם לאובייקטים של ActionScript וישמור את התוצאות ב- flare.data.DataSet לְהִתְנַגֵד. ה DataSet המחלקה יכולה לייצג נתוני טבלה וגם נתוני רשת (צומת / קצה).

יצירה וניהול של אובייקטים חזותיים

כעת נרצה לדמיין מערך נתונים. לשם כך אנו ממפים רשומות נתונים נפרדות לפריטים חזותיים. התלקחות מספקת מערכת של אובייקטים חזותיים לייצוג הנתונים. להלן סקירה של הכיתות הבסיסיות הניתנות על ידי flare.vis.data חֲבִילָה.

• DataSprite: מחלקת בסיס עבור שדונים המייצגים נתונים חזותית. DataSprite היא תת-סוג של נגן הפלאש Sprite מעמד. DataSprite כולל data המאפיין בו מאוחסן טפל הנתונים (אובייקט ActionScript) ומספק גם משתנים חזותיים נוספים מעבר לאלה הנתמכים על ידי שודדים בסיסיים, כולל שדות צבע, צורה וגודל ותמיכה להגדרת עמדות בקואורדינטות קוטביות.
• 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 כוויכוח, כך שתוכלו להנפיש את עדכון המאפיין.
לדוגמה, הקוד הבא מביא להנפשה של שנייה בה צבע השורה לכל הצמתים מוגדר לכחול. (שים לב שציון המשושים עבור DataSprite ערכי הצבע כוללים את הערוצים אלפא וכן ערוצים אדומים, ירוקים וכחולים).

data.nodes.setProperty ("lineColor", 0xff0000bb, מעבר חדש (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: מערך; // מערך של אובייקטים נתונים שכבר העמסנו נתונים var: נתונים = נתונים חדשים (); // מיכל נתונים חדש לכל אחד (var o: אובייקט ברשימה) {data.addNode (o); }

התוצאה היא א Data אובייקט מאוכלס חזותי DataSprite (צמתים או קצוות) מופעים.
בפועל, אתה לא תמיד צריך לאכלס את הנתונים המדומיינים באופן ידני. ליצור Data אובייקט להמחשת מערך נתונים טעון, לרוב תוכלו להשתמש בשיטת נוחות במקום זאת. ה Data.fromArray() פונקציה יוצרת Data מופע לנתונים טבליים המאוחסנים כמערך של אובייקטי ActionScript, בעוד Data.fromDataSet() שיטה דומה יוצרת א Data מופע מטעינה DataSet אובייקט.

בניית הדמיה

עכשיו בואו ונרכיב את כל זה כדי להתחיל לבצע הדמיות. ה Visualization המחלקה מייצגת הדמיה יחידה, כולל סימנים חזותיים (המאוחסנים ב Data מופע) וצירים. כדי ליצור הדמיה, אנו טוענים מערך נתונים, מוסיפים את הנתונים להמחשה ומגדירים מפעילים שקובעים כיצד לדמיין את הנתונים. הנה דוגמא. בדוק קודם את הקוד, ואז המשך לקרוא כדי להבין מה כל חלק עושה.

חבילה {יבוא flare.data.DataSet; יבוא flare.data.DataSource; יבוא flare.scale.ScaleType; יבוא flare.vis.Vualization; יבוא 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; [SWF (רוחב = "800", גובה = "600", רקע צבע = "# ffffff", frameRate = "30")] הדרכה בכיתה ציבורית מרחיבה את Sprite {פרטי var vis: ויזואליזציה; פונקציה ציבורית הדרכה () {loadData (); } פונקציה פרטית loadData (): void {var ds: DataSource = חדש DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "הכרטיסייה"); loader var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, פונקציה (evt: Event): void {var ds: DataSet = loader.data בתור DataSet; דמיין (Data.fromDataSet (ds));}); } דמיין פונקציה פרטית (נתונים: נתונים): בטל {vis = חדש ויזואליזציה (נתונים); vis.boards = מלבן חדש (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 השיטה מגדירה את הדמיון. הנה מה שקורה בכל שלב:

• חלק 1: אתחול
  • הדמיה חדשה נוצרת עבור הנתונים
  • קבענו את גבולות ההדמיה. זה קובע את שטח הפריסה.
  • קבענו את ה- x ו y מיקום ההדמיה שלנו ולהוסיף את ההדמיה לרשימת התצוגה.
• חלק 2: ציון קידודים חזותיים
  • אנו משתמשים במערך צירים, תוך הצבת "תאריך" על ציר ה- x ו"גיל "על ציר ה- Y. ה AxisLayout מפעיל גם מגדיר באופן אוטומטי את הצירים להדמיה. אנו משתמשים בתחביר "data.date" כדי לציין את משתני הנתונים, מכיוון שהם נמצאים בתוך NodeSprite's 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) ומעביר אותו ל- a ColorEncoder
2. משנה את source המאפיין עבור מקודד הצבעים כדי להשתמש במשתנה "data.sex"
3. מגדיר לוח צבעים חדש (במקרה זה, אדום לנקבות, כחול לגברים - סדר הצבעים תואם את הסדר האלפביתי של התוויות)
4. אנימציה של השינוי על ידי שיחת עדכון באמצעות א Transitioner מוגדר לאנימציה של שתי שניות. ה vis.update השיטה מחזירה את Transitioner, כדי שנוכל לקרוא לשחק בערך ההחזרה של העדכון. (הערה: אתה יכול גם להשמיט את ה- Transitioner ופשוט העבירו את המספר 2 כוויכוח אליו update. חדש Transitioner ייווצר אוטומטית ויוחזר.)

כעת עלינו לחבר את היישום כדי שנוכל להפעיל את העדכון באופן אינטראקטיבי. לשם כך, הוסף את הקוד הבא לבנאי:

 // הוסף לחצן var תווית הניתנת ללחיצה: TextSprite = TextSprite חדש ("צבע לפי מין"); addChild (כפתור); button.x = 710; כפתור.י = 50; button.buttonMode = נכון; button.addEventListener (MouseEvent.CLICK, פונקציה (evt: MouseEvent): void {colorByGender ();});

קוד זה:

1. יוצר תווית טקסט חדשה (TextSprite הוא כיתת עוזר מהקבוצה flare.display חבילה)
2. מוסיף את התווית ליישום וקובע את מיקומה
3. סטים buttonMode נכון (זה גורם לסמן יד להופיע כשאתה עכבר מעל התווית)
4. מוסיף מאזין לאירועים שמופעל כאשר לוחצים על התווית. אנו מוסיפים פונקציית התקשרות חוזרת הקוראת ל- colorByGender שִׁיטָה.

כדי שהקוד לעיל יעבוד, נצטרך לכלול הצהרות ייבוא ​​נוספות אלה בראש הקובץ:

 יבוא flash.events.MouseEvent; יבוא flare.animate.Transitioner; יבוא flare.display.TextSprite; יבוא flare.util.palette.ColorPalette;

כעת אתה אמור להיות מסוגל לקמפל ולהפעיל את היישום. לחיצה על התווית "צבע לפי מין" אמורה להנפיש את השינוי בקידוד הצבע.

השלבים הבא

הדוגמאות שלעיל מציגות את היסודות של Flash וספריית ה- Flare, אך ישנן תכונות רבות נוספות שטרם חיפשו. בהמשך אנו ממליצים (א) לבדוק גם את הפלאש וגם את התלקחות 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 חֲבִילָה. אל תהסס לשחק עם, לשנות, להעתיק, להדביק ולבנות על ההדגמות כדי להבין טוב יותר את אופן הפעולה של Flash ו- Flare.

קישורים

הורדות

כלים

מדריכים טכניים אחרים

תמיכה

מקור: https://blokt.com/tool/prefuse-flare