מפלאש ל-HTML5 – איך עושים את זה נכון? [אורח]

ה-HTML5 וכלי הפיתוח שלו הגיעו לרמה כזו שפשוט דוחקת הצידה את מה שעוד נשאר מהפלאש. נשארנו עם הקושיה: האם ניתן להמיר פרויקט קיים ואיך לעשות זאת בלי לבלות 40 שנה במדבר?

shutterstock html5

מאת רונן צמיר, CTO ב-OneCode.

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

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

התנועה האנטי פלאשיסטית

אחרי כל הפתיחה הזאת, לפני שרצים להמיר את האפליקציות שלכם, כדאי לעצור שנייה ולשאול את עצמנו באילו מקרים באמת כדאי להשקיע את המשאבים ולעבור ל-HTML5.

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

לדוגמא, פנה אלינו CTO של חברה גדולה, בעלת כמות תוכן נכבדה בפלאש, בכדי שנעזור לו להמיר את התוכן הפלאשי ל-HTML5, וזאת תוך כדי פיתוח ושיפור המוצר הקיים. בפגישה התברר שהחברה בכלל לא רוצה לשמוע על מובייל, ורק הדסקטופ חשוב להם. ניסינו להבין אם כך למה כל כך חשוב להם לעבור ל-HTML5, שהרי שכאשר מדובר בדסקטופ בלבד הפלאש עדיין עובד נהדר, ויש לו עדיין יתרונות על ה-HTML5 בביצועים, בשליטה ב-SOUND וכמובן באפשרות להציג אותו בדפדפנים ישנים יותר כמו אקספלורר 8 ו-7 (כאחוז מהגולשים). אבל ה-CTO התעקש שהחזון שלו זה לא לשמוע יותר את המילה פלאש תוך 4 חודשים.

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

באיזה סוג פרויקטים נעשה המרה מפלאש?

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

בסך הכל יש מקום להמיר כל פרויקט, כל עוד הגרפיקה הווקטורית שלו איננה מורכבת (ללא הרבה גרדיינטים ואפקטים) או שאפשר להפוך את הגרפיקה המורכבת לתמונות (אל דאגה ישנה דרך קלה יותר ופשוטה להעביר גרפיקה פלאשית לתמונות). בנוסף נמיר בעיקר פרויקטים הכוללים pure Action Script (כלומר לא Flex – לכך יש כלים  מיוחדים שלא נדון בהם פה).

איך עושים זאת בפועל?

ועכשיו נרד קצת לרמת הטכנולוגיה…..

הדרך הקלה ביותר להמיר תוכן פלאשי או לכתוב תוכן חדש בסגנון פלאש היא לשלב שימוש ב-Flash CC – Canvas ליצירת הגרפיקה עם createJS ו-Type Script לכתיבת הקוד. הגרפיקאי יכול להמשיך להשתמש בכלי שהוא מכיר ואוהב, Flash CC, ליצירת הגרפיקה והאנימציה. רק ש… במקום לייצא קובץ לנגן פלאש הוא מייצא לקובץ Java Script + תמונות וסאונד, שמוצגים ישירות מעל HTML5 ללא צורך בתוסף הפלאש.

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

התוכניתן שכתב עד היום ב-Action Script הנהוגה בפלאש יכול לעבור בקלות מאחר שהיצוא לקובץ ה-Java Script נעשה על בסיס ספריית CreateJS. ספריה זו מספקת לנו API המזכיר מאוד את Action Script גם בשמות הפקודות וגם במבנה הרעיוני.

הרבה תוכניתנים, כאשר מעבירים אותם לכתוב ב-Java Script מצקצקים בלשונם, שהרי איך אפשר לכתוב פרויקט גדול ומורכב כמו הפרויקטים שכתבנו בפלאש, ללא שימוש ב-Design Patterns או לפחות יכולות Object Oriented מינימליות.

ב-Java Script אמנם קיימות יכולות דומות אבל הן לא קריאות או נוחות לשימוש. גם לכך יש פיתרון נוח וקליל והוא דוקא הגיע אלינו מבית מיקרוסופט ושמו Type Script. פתרון זה מוסיף בדיוק את מה שחסר ב- JavaScript, יכולות Object Oriented קלות לכתיבה וקריאה, ובנוסף אפשרות ל-Strong Type שנבדק בזמן קומפילציה.

אני אישית מעדיף פתרון זה על אפשרויות אחרות, מאחר שהמעטפת פועלת כך שהקוד נשאר מאוד קריא גם לאחר קומפילציה ל-JS ואין תלות עתידית ב-Type Script. בונוס נוסף מתקבל מצורת הכתיבה (syntax) של Type Script, אשר  דומה מאוד Action Script הנהוגה בפלאש. במקרים רבים תרגום פרויקט מ-Action Script ל-Type Script תוך שימוש ב-CreateJS. הוא דבר יחסית קל ולא מצריך שינויים רבים.

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

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

קרדיט תמונה: html5 via shutterstock

כתב אורח

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

הגב

10 Comments on "מפלאש ל-HTML5 – איך עושים את זה נכון? [אורח]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
Tomer Cohen
Guest
הימנעות מפלאש אינה בהכרח אידיאולוגיה. פלאש ידוע כזולל משאבים ואחת הסיבות לכך שאנשים בוחרים לנטוש את מחשביהם לטובת דגמים חזקים יותר, אנשים שבוחרים לחסום פרסומות פלאש כדי להצליח לגלוש בצורה סבירה, וכמובן גם מבחינת סוגיות הפרטיות והאבטחה – אדובי ידועים בכמות הפרצות הגדולה במוצריהם ובמהירות העדכון האטית יחסית. כיום ישנה חלופה לכל היכולות של פלאש, וניתן לבצע בדפדפנים דברים שפלאש מעולם לא היה מסוגל לבצע, וזאת עם ההגנה המובנת של הדפדפן והתחשבות בכל סוגיות הפרטיות והאבטחה המקובלות. כיום ישנם דפדפנים מובילים שחוסמים פלאש כבררת מחדל או שמציעים חלופות לפלאש משלהם בעבור אותם מקרים בהם האתרים מתעקשים להמשיך להשתמש בפלאש. כיום… Read more »
Guest
Guest

כדי להגיע בHTML5 ליכולות המובילות של פלאש (בלי שימו באדובי פלאש החדש) אתה צריך לעבוד פי 4 יותר קשה !

שוב רוב הללו שכותבים בגנות הפלאש מעולם לא התעסקו בו לעומק.

כאחד שמכיר את 2 הטכנולוגיות על בוריים (פלאש אני מכיר כ10 שנים) ו HTML5 כ 5 עד 6 שנים , אי אפשר להשוות מה גם שרק ב2014 ה CSS3 הוכרז רשמית !

'Ofer Shelly
Guest
כדי להגיע בHTML5 ליכולות המובילות של פלאש (בלי שימוש באדובי פלאש 2014 החדש) אתה צריך לעבוד פי 4 יותר קשה ! שוב רוב הללו שכותבים בגנות הפלאש מעולם לא התעסקו בו לעומק. כאחד שמכיר את 2 הטכנולוגיות לעומק (פלאש אני מכיר כ10 שנים) ו HTML5 כ 5 עד 6 שנים , אי אפשר להשוות מה גם שרק ב2014 ה CSS3 הוכרז רשמית ! ופלאש מסוגל לעשות כל מה ש HTML5 מסוגל לעשות היום כבר ב 2006 , אם היית נכנס יותר לעומק היית מבין שב HTML5 כמעט בלתי אפשרי להגיע למה שטכנולוגיית פלאש מאפשרת בדפדפן מ מנוע BOX2D ועד תלת… Read more »
Ronen Tsamir
Guest

אתה צודק חלקית ובעיקר לגבי המובייל,

בדסקטופ דווקא הדפדפנים המובילים Chrome, FF ו IE חסמו חלקית או בצורה מלאה את שאר התוספים חוץ מהפלאש.
גם מבחינת ביצועים עדיין המחליף הרישמי של הפלאש ה Canvas של HTML5 מציג ביצועים חלשים משמעותית מאלה שלהפלאש.

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

Yotam Nachum
Guest

Canvas הוא לא התחליף היחיד לFlash, אתה תמיד יכול להשתמש בWebGL ובעזרת ספרייה כמו PixiJS שמאפשרת API קל לעבודה 2D בWebGL + תמיכה לCanvas לדפדפנים ישנים אין בעיה להשתמש בזה כבר היום

Ronen Tsamir
Guest

אכן PixiJS כמו אגב phaser הן סיפריות מעולות, עם יתרון חזק של תמיכה ב WebGL על פני CreateJS, ולשתיהן API שמאוד מזכיר את ActionScript של הפלאש.
הסיבה שלא בחרתי בהן במאמר היא בעיקר בגלל ש CreateJS מתחברת יותר טוב עם תוכן פלאשי קיים ו / או תוכן שמיוצר בפלאש IDE.

אודי קיאני
Guest

כתבה מקיפה ומעניינת. תודה ויישר כוח!

'Ofer Shelly
Guest

אחלה כתבה רונן ! אכן צריך לשים לב ל HTML5 אך פלאש לעולם לא ימחק מהעולם ! :) כל עוד HTML5 לא ודע לקבץ PNG כמו שפלאש יודע וכל עוד סביבת העבודה שלו קשה לתפעול (מלבד אם עובדים על הפלאש CC עצמו)

Ronen Tsamir
Guest

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

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

ירונימוס
Guest

אני רוצה להודות לכותב באופן אישי, הייתי תקוע כאשר הייתי צריך לעשות באנרים, ויש לי רק ידע בפלאש. אז בדקתי את עניין הפלאש קנבס והבנתי שבפלאש cc יש אופציה להמיר את הבאנרים לhtml 5, וזה סגר לי את הפינה.
תודה רבה!!

wpDiscuz

תגיות לכתבה: