דבר אלי בצלילים

אמיר דותן

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

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

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

השדרוג התרכז בשלושה מישורים עיקריים:
1. XML – הפיכת הרדיו למבוסס XML על מנת שכל שינוי בתוכן יבוצע מחוץ לפלאש.
2. OOP – פיתוח הפלאש בגישה מונחת אובייקטים על מנת לשמור על סדר, נוחות וגמישות.
3. Flash MX – ניצול היכולות החדשות של פלאש MX בכדי לייעל ולשכלל את המנגנון.

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

למה לשדרג?

בגרסתו הראשונה, הרדיו היה קובץ פלאש סטטי סגור וככזה התיחזוק השוטף שלו היה בעייתי מכיוון שכל משימת עידכון תוכן היתה צריכה להיות מבוצעת על ידי מישהו שמבין בפלאש ומבין כיצד המנגנון עובד. יותר מכך, הצורך ליצור מחדש אנימציה, לעדכן את הסקריפט ולשמור קובץ MP3 בתוך קובץ SWF חדש שהרדיו יטען דרש השקעת זמן מיותרת.

המשימה היתה להפריד את התוכן מהתצוגה ולשמור את כל המידע בקובץ חיצוני פשוט, מה שחייב יצירת מנגנון פלאש אוטומטי שיקרא את המידע וידע מה לעשות איתו.
מכיוון שהמידע המדובר הוא אוסף קטעים כאשר לכל קטע יש מספר מאפיינים (טקסט לתצוגה, קובץ להשמעה, קובץ להורדה וכו') XML נראה הפתרון האידיאלי. למרות שאפשר היה להשיג את התוצאה בעזרת ASP,PHP וכו' העדפנו להתעסק עם קובץ אחד פשוט ולשמור את העבודה מול בסיס נתונים לגרסה 3.

על XML ופלאש

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

<xml>
  <songlist>
   <song>
	<src>song1.mp3</src>
	<text>song number 1</text>
	<id>1</id>
   </song>
  </songlist>
	  

ה-XML הוא בסה"כ היררכיית מידע שיצרנו על מנת לארגן את כל המידע בצורה ברורה ופשוטה. הצעד הבא היה לתרגם את המידע הזה לפלאש כדי שהסרט ידע להשתמש בהם. מאז פלאש 5 ניתן לקרוא קובץ XML בתהליך שנקרא Parsing ולנתח את המידע השמור בו על מנת לעשות בו ככל העולה על הדימיון ולפי הצורך.

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

מערך אובייקטים – שמירת נתוני ה-XML בפלאש

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

<xml>
 <songlist>
  <song>
   <src>song1.mp3</src>
   <text>song number 1</text>
   <id>1</id>
  </song>
  </songlist>
	  
songListArray=new Array();
src= //local var getting value from xml
text=//local var getting value from xml
id= //local var getting value from xml
songListArray.push
({src:src,text:text,id:id})

וכעת, על מנת לדעת מה הטקסט של שיר (אובייקט) מספר 3 כל מה שעלינו לעשות הוא

songListArray[2].text

*ספירת אלמנטים במערך מתחילה מאפס

בדרך זו הרדיו מקבל את המידע המעודכן כל פעם שהסרט נטען ושומר אותם לשימוש בהמשך. ברגע שהפלאש מתרגם את המידע השמור ב-XML למערך כל שאר העבודה מתבצעת מקומית בתוך הסרט.

האובייקטים

ראינו כיצד מערך רשימת השירים מכיל אובייקטים. האובייקטים האלה זהים מבחינת המאפיינים שלהם אך שונים בהגדרות של כל מאפיין. הרדיו עצמו מונע על ידי שלושה אובייקטים נוספים שעושים את כל "העבודה השחורה".
1.אובייקט רדיו – אחראי על הפונקציונליות של הרדיו ומכיל מתודות כמו: אחורה, קדימה, שחרר רדיו, החזר רדיו למצב רגיל, הורד שיר, נגן והשתק.
2.אובייקט שליטת סאונד – אחראי לכל מה שקשור בסאונד בסרט (טעינה, buffering,, השמעה והשתקה).
3.אובייקט תנועת טקסט – אחראי לתנועת הטקסט האין סופית בסרט.

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

מדוע דווקא פלאש MX?

השידרוג לפלאש MX איפשר התייעלות חשובה באוטומטיות והפשטות של המנגון. ההתייעלות הזאת באה לידי ביטוי בשלושה היבטים חשובים (כמו בצה"ל, לא?):
1. טעינה ישירה של קבצי MP3 – אם עד כה היינו צריכים לייבא כל קובץ MP3 ישירות לסרט פלאש חדש ולשמור אותו מחדש כקובץ SWF כדי שזה יטען לסרט המקורי, בעזרת המתודה החדשה שנוספה לאובייקט הסאונד (loadSound) יכולנו לטעון את הסאונד ישירות מהשרת לסרט. ללא ספק קיצור תהליכים משמעותי.
2. שליטה בשדות טקסט – בגרסה הקודמת כל אנימציית טקסט היתה אנימציה נפרדת שהיתה מורכבת מטקסט סטטי. כל שינוי בתוכן חייב יצירת טקסט חדש ואנימציה חדשה.היכולת לשלוט במימדים של שדה טקסט בצורה דינמית בפלאש MX ולהגדיר שהשדה תמיד יהיה ברוחב התוכן שהוא מציג (mytext2.autoSize="center") איפשרה יצירת אובייקט שכל מה שהוא עושה זה להזיז שני שדות טקסט דינמים על מנת לדמות לופ אין סופי ומעדכן את התוכן שלהם בהתאם. התנועה מותנית ברוחב המשתנה וכך שני שדות טקסט ריקים יכולים לשמש מספר אין סופי של תכנים.
3. שימוש ב-events בתוך אובייקטים – היכולת החדשה להגדיר –events כמו onEnterFrame ישירות בתוך אובייקטים איפשרה יצירת אובייקטים יותר משוכללים המסוגלים לעשות שימוש ב-events של מוביקליפים על מנת ליצור לופים אין סופיים, לזהות לחיצות עכבר וכו'.

tickerObject.prototype.moveText=function (){
 onEnterFrame=function(){
  //do something on every enter frame
  	}
  }

כל מה שנותר עכשיו הוא ליהנות מהמוזיקה

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

לצפייה בקוד המקור של הרדיו, לחץ כאן.

		שם:
		דואר:
		אתר:
		כותרת:

		שם:
		דואר:
		אתר:
		כותרת: