 |
25-11-2005, 04:38
|
|
|
|
חבר מתאריך: 20.02.03
הודעות: 2,396
|
|
שימוש בפלאש על פי התקנים
שימוש בפלאש על פי התקנים
הצגת הבעיה
אחת הבעיות העיקריות שלנו עם פלאש היא שהפלט שתוכנת הפלאש מייצר אינו תקני על פי שום תקן של html. קוד פלט לדוגמא אשר נוצר על ידי תוכנת הפלאש נראה ככה:
קוד:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="150" height="100" id="flashfile" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flashfile.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="flashfile.swf" quality="high" bgcolor="#ffffff" width="150" height="100" name="flashfile" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
ניתן למצוא את הקוד הנ"ל בדוגמא 1, ולראות כי הקוד לא עובר בדיקת תקניות.
כפי שניתן לראות, מדובר בקוד מסורבל מאוד, והבעיה העיקרית שלו היא נושא התקנים. התג embed הינו תג שהוציאה בעבר Netscape על מנת להשתמש בתוספים שונים לדפדפן. התג מקובל על נטסקייפ ופעיל בכלל הדפדפנים המבוססים על המנוע שלהם הידוע בשמו gecko, אולם הגוף האחראי על התקנים (w3) לא הכניס את התג המדובר לתוך רשימת התגים התקניים.
הייחוד של תג ה object, אשר יעזור לנו לקראת סוף המדריך, הוא בעיקרון העבודה שלו, אשר מאפשר לנו לכלול תגים נוספים בתוכו אשר מהווים אינפורמציה אלטרנטיבית במידה והאובייקט המבוקש לא ניתן להצגה (מסיבות כאלו ואחרות).
מתחילים לכתוב על פי התקן
עברתי על כמות לא קטנה של אתרים הכתובים על פי התקנים, ורובם אינם כוללים שום קובץ של פלאש. אחד האתרים בהם נתקלתי הוא האתר הבא: http://damowmow.com/playground/demos/flash/001.html אשר מביא דוגמא לקובץ פלאש שעובד באקספלורר ובפיירפוקס (המבוסס על מנוע הגקו של נטסקייפ), ובנוסף – כתוב על פי התקנים.
ניתן לראות שהשימוש פה בתוכן האלטרנטיבי של התג object בא לידי ביטוי באמצעות התג object הפנימי אשר נראה (בערך) ככה:
קוד:
<object data="flashfile.swf" type="application/x-shockwave-flash" width="150" height="100" id="flashfile">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
שימו לב שהפעם התג object אינו כולל את שני המאפיינים classid ו-codebase.
כפי שניתן לראות בדוגמא 2 הקוד הנ"ל תקין לחלוטין. ניקח את הקוד הנ"ל בתור בסיס ונראה איך מתקדמים איתו הלאה. השימוש הנ"ל אמנם מאפשר לנו להשתמש בתג object בשביל להציג קבצי פלאש ב-FF, אולם הוא לא מציג את קובץ הפלאש באקספלורר, ויוצר לנו בעיות נוספות אותן נזכיר בהמשך.
מסדרים בעיות באקספלורר
מעבר למאפיינים classid ו-codebase חלק נוסף ש"הלך לאיבוד" פה הוא התג param שמכיל את "name="movie. נוסיף אותו לקוד הנ"ל ונקבל קוד html תקני המציג פלאש באקספלורר ובפיירפוקס:
קוד:
<object data="flashfile.swf" type="application/x-shockwave-flash" width="150" height="100" id="flashfile">
<param name="movie" value="flashfile.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
את הקוד הנ"ל ניתן למצוא בדוגמא 3.
בעיות חדשות
הגענו למצב בו הפלאש עובד בסדר גמור בשני הדפדפנים העיקריים איתם אנו מתעסקים, אולם בעקבות השינויים הללו שגרמו לתקינות הקוד, יצרנו מספר בעיות חדשות:
1. המאפיין codebase שהורדנו מאפשר לדפדפן להתריע לגולש במידה ואין לו גרסה מסויימת של פלאש הדרושה להרצת קובץ הפלאש אותו אנו מנסים להציג.
2. המאפיין classid שהורדנו אומר לאקספלורר להריץ את קובץ הפלאש באמצעות הפלאגין של הפלאש. אחד היתרונות להרצה דרך הפלאגין בצורה ישירה (ולא בדרך עקיפה כפי שביצענו בקוד האחרון) הוא השימוש בפונקציית הטעינה המקדימה של הפלאש, פונקציה המאפשרת הצגה של מסך מיוחד המיידע את הגולש כי קובץ הפלאש נמצא בתהליכי טעינה, ובסיום הטעינה – הוא יוצג.
פיתרון בעיית חוסר הפלאגין
את הפיתרון לבעיה הראשונה אנו פותרים (חלקית) באמצעות תג param נוסף המכיל את "name="pluginurl. הבעיה היא שרק דפדפנים מבוססי גקו יודעים לקרוא אותו ולהבין כי מדובר בקובץ פלאש ויש צורך להוריד את הפלאגין על מנת לנגן את הקובץ בצורה סדירה.
על מנת לפתור את הבעיה באקספלורר ניצור קובץ פלאש בגודל של 1 על 1 ונשים אותו במקום כלשהו בדף. הפעם נשאיר את ה codebase ואת ה classid על מנת שהאקספלורר יתריע במצב בו הפלאגין אינו מותקן:
קוד:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="1" height="1" id="pixel">
<param name="movie" value="pixel.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
טעינה מקדימה – הרחבה בנושא ופיתרון הבעיה
תודה לפורום פלאש שעזרו ביצירת הקובץ עם הטעינה המקדימה 
הבעיה השניה שיצרנו בעקבות הניסיון לעמוד בתקנים גורמת לנו בעצם להמון בעיות חדשות שלא ממש חשבנו עליהן במהלך הניסיון לעמידה בתקנים. אחד היתרונות בשימוש בקבצי פלאש הינו האפשרות להכין קובץ פלאש גדול מאוד, ובזמן שהקובץ נטען ליצור מסך מיוחד המידע את הגולש כי קובץ הפלאש נטען, ובקרוב – בסיום טעינתו, יוכל הגולש לצפות בו. דפדפנים מבוססי גקו מציגים את הטעינה המקדימה ללא כל בעיה, אולם האקספלורר (מסיבה לא כל כך ברורה) דורש עבודה ישירה דרך הפלאגין (ולא בצורה בה אנו משתמשים) על מנת להציג את הטעינה המקדימה. השינוי בקוד יוצר מצב בו האקספלורר טוען לחלוטין את כל הקובץ לפני הצגתו, ולכן לא מתאפשרת לנו הפונקציה של תצוגה מקדימה, דבר היוצר בעיה בשימוש בקבצי פלאש גדולים.
בדוגמאות הקודמות קבצי הפלאש היו קבצים קטנים. צירפתי דוגמא מיוחדת (עם אותו קוד מדוגמא 3) אולם הפעם קובץ הפלאש הינו קובץ גדול, אשר מדגים את בעיית הטעינה המוקדמת באקספלורר. ניתן למצוא את קובץ הפלאש הגדול בדוגמא 4.
הפיתרון הפעם (עד כמה שהוא נראה מוזר ולא קשור) יהיה ישירות באמצעות הפלאש עצמו. מכיוון שהאקפלורר לא מוכן להציג את קובץ הפלאש עד שאינו נטען לחלוטין, נגרום לו לטעון את הקובץ בצורה המהירה ביותר שאפשר: מי שמגיע מרקע של xhtml+css מכיר מקרוב את כל הנושא של containers, והפעם נעשה שימוש שכזה, אולם באמצעות הפלאש. ניצור קובץ פלאש קטן מאוד (על מנת לדייק עד כמה קטן, מדובר בקובץ השוקל 95 בתים). קובץ שכזה כמובן ייטען מהר מאוד באמצעות הדפדפן.
כל מה שנשאר לנו עכשיו זה לטעון באמצעות הקובץ הזה את הקובץ המקורי שלנו, וטעינה זו מתבצעת באמצעות הפלאש. מכיוון שטעינה זו מתבצעת באמצעות הפלאש עצמו, הדפדפן לא מהווה מקור לבעיה בצורת הפענוח שלו את קובץ הפלאש, כלומר – במידה ומדובר בדפדפן שמציג את המידע בצורה נכונה, הוא לא מהווה בעיה להצגת הטעינה המקדימה בקבצי פלאש גדול. על מנת לטעון קובץ חיצוני כחלק מהסצינה שלנו נשתמש בקוד ה AS הבא:
קוד:
this.loadMovie("filename.swf", 0);
הבעיה היא שאנו לא רוצים להגיע למצב שכל אתר חדש שנצטרך להוסיף בו פלאש ידרוש מאיתנו ליצור עוד קבצים חדשים, ולכן אנו צריכים למצוא דרך בה נוכל להשתמש בקובץ אחד על מנת לבצע את הפעולה הנ"ל.
אחת האפשרויות בפלאש היא שימוש במשתנים חיצוניים. באותו אופן בו אנו משתמשים במשתני הכתובת (file.php?id=1&action=new) אנו יכולים להשתמש במשתנים אלו בפלאש. הגישה למשתנים הללו נעשית באמצעות _root.varname מכיוון שהם מתקבלים מהשורש.
אם כן, כל שנותר זה לשנות את הקוד שלנו לצורה הבאה:
קוד:
this.loadMovie(_root.filename, 0);
והקישור לקובץ הפלאש יראה ככה:
קוד:
data="container.swf?filename=myfile.swf"
את כל הקוד ניתן למצוא בדוגמא 5.
סיכום
נראה שפתרנו את כל הבעיות, אולם עדיין חשוב לי לתת כמה הערות לסיום
את הקטע הקוד שמוודא התקנת פלאש באקספלורר ניתן למקם בתוך DIV בלתי נראה:
קוד:
<div style="display: none;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="1" height="1" id="pixel">
<param name="movie" value="pixel.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
</div>
באופן זה לא תיתקעו עם פיקסל לבן באמצע האתר שלכם שהורס לך את העיצוב המושקע. למרות שמדובר בשכבה בלתי נראית, האקספלורר קורא את התוכן שלה, מזהה כי מדובר בפלאגין אשר אינו קיים במערכת, ומתריע על חסרונו. הקוד הנ"ל בדוגמא 6.
בעיה נוספת שאנו נתקלים בה היא מה להציג במקום קובץ הפלאש אשר אינו מוצג לנו בעקבות חסרונו של התוסף. הזכרנו כבר את צורת העבודה של התג object אשר מאפשרת לנו להוסיף אינפורמציה אלטרנטיבית. לאחר רשימת תגי ה-param אשר נמצאים בתוך מקטע הקוד object נוכל להוסיף תמונה אשר תוצג במידה והפלאגין לא מותקן. התמונה תהיה כמובן באותו גודל של קובץ הפלאש המדובר, והיא יכולה להכיל משפט כגון "פה אמור לבוא קובץ פלאש מאוד יפה, אולם אינכם רואים אותו כיוון שלא מותקן לכם פלאש במחשב". חשוב לציין כי מתוך מספר ניסיונות שלי, מספר דפדפני IE לא מתלהבים מהרעיון של להציג את התמונה לאחר כל השינויים שבוצעו. כדאי לבדוק את הנושא קצת יותר לעומק לפני שמשתמשים בו.
רשימת הקבצים מעבר לקבצי הפלאש המקוריים:
container.swf
pixel.swf
מי תומך?
עשינו את כל העבודה הרצינית, אבל כדאי לבדוק מי תומך במה. רוב הדפדפנים אמורים לתמוך בשיטה הנ"ל, אולם לא כולם נבדקו. רשימת הדפדפנים אשר נבדקו ומציגים את הפלאש בצורה טובה כולל תצוגה של טעינה מוקדמת:
- אקספלורר 6
- מבוססי אקספלורר: Avant 10.1, Fast Browser Pro 8.1, Maxthon 1.5, Crazy Browser 2.0.1, LE Multibrowser 1, MSN Explorer 7.02
- פיירפוקס 1.0.7 גרסאות win ו-bsd.
- פיירפוקס 1.5 גרסה סופית win.
- Netscape 8.0.4
- opera 8.51
- mozilla 1.7.3
כל דפדפן שלא מופיע ברשימה וניתן להכניסו (או לחילופין, ידוע לכם כי הוא אינו תומך), אשמח לדעת על כך. (כולל תוכנות שונות מבוססי דפדפן כלשהו, כיוון שחלקן נוטות לשנות הגדרות בסיסיות של הדפדפן המקורי).
דקל
נערך לאחרונה ע"י דקל בתאריך 25-12-2005 בשעה 21:16.
|
|
ראשי
צ'אט
מצב כלאיים
