בניית באנרים ב-html5 באמצעות תכנת פלאש cc של Adobe
דף הבית  >>  >>  הרשם  |  התחבר
מאמרים

בניית באנרים ב-html5 באמצעות תכנת פלאש cc של Adobe 

מאת    [ 09/02/2016 ]
מילים במאמר: 702   [ נצפה 2693 פעמים ]

 
 

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

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

שני פתרונות סבירים שנוצרו בידי Google היו אמורים לאפשר מעבר חלק ל"תקופה שאחרי מותה של הפלאש".
הראשון היה Swiffy, שהוא מנוע המרה של גוגל לקבצי פלאש היוצר מערך של קבצים המאפשרים הצגת תוכן של באנר בפורמט swf כתוכן שנתמך בתקן html5. כלומר, נוצר קובץ html המכיל בתוכו אלמנט canvas המאפשר הצגת אנימציות באמצעות קבצי javascript "המציירים" באופן דינמי בשטח האלמנט. לצורך השלמת הפעולה מוצמדות ספריות javascript חיצוניות. מנוע ההמרה הזה מאפשר המרה של קבצים עד משקל מסוים, ולעיתים מבצע המרה עם תקלות ושיבושים קטנים. לפעמים.
הפתרון השני שקיים הוא Google Web Designer. תוכנה חינמית המאפשרת לצור באופן ישיר יצירה של באנרים בפורמט html5 ופועלת עם ממשק גרפי שמזכיר את הממשק הגרפי של הפלאש, ולכן לכאורה המעבר מהפלאש אל התוכנה אמור להיות קל יחסית. אבל...

מעצבים שהשתמשו בכלי האנימציה של פלאש יחושו מיד במגבלות הכלים שהתוכנה החדשה מציעה. התוכנה היא בהחלט כלי סביר וטוב, במיוחד עבור מעצבים "שלא ידעו את פלאש" ונכונים להכיר כלי חדש "שכל עתידו לפניו".
למרבה השמחה וההגיון, בחברת Adobe לא מיהרו לוותר על פלאש, וכך בגרסאות CC ניתן לבחור, עם פתיחת התכנה, ביצירה של קובץ חדש מסוג HTML5 Canvas.
העבודה עם התוכנה נשארה בדיוק אותה העבודה עם אותם הכלים, למעט תכונות מסוימות שמושבתות, מאחר ולא ניתן בשלב זה להציג אותן באמצעות התקן.
לאחר יצירת האנימציה הנדרשת, מבצעים publish לקובץ ופלאש יוצרת קובץ html יחיד עם קובץ javascript המכיל את קוד האנימציה. כמו כן נוצרות תיקיות עבור המשאבים השונים הנדרשים עבור הסרטון (תמונות, צלילים וכיו"ב).

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

על מנת לחסוך זמן ועגמת נפש נציג את השינויים הנדרשים בקוד ה-html שמייצרת הפלאש:

זהו הקוד המקורי:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> כאן יופיעו הקישורים לספריות הjavascript <script> var canvas, stage, exportRoot; function init() { canvas = document.getElementById("canvas"); images = images||{}; var loader = new createjs.LoadQueue(false); loader.addEventListener("fileload", handleFileLoad); loader.addEventListener("complete", handleComplete); loader.loadManifest(lib.properties.manifest); } function handleFileLoad(evt) { if (evt.item.type == "image") { images[evt.item.id] = evt.result; } } function handleComplete() { exportRoot = new lib.fileName(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.update(); createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stage); } </script> </head> <body onload="init();" se="background-color:#D4D4D4;"> <canvas id="canvas" width="190" height="315" se="background-color:#FFFFFF;"></canvas> </a> </body> </html>

לאחר התוספות:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> כאן יופיעו הקישורים לספריות הjavascript <script> var canvas, stage, exportRoot; function init() { canvas = document.getElementById("canvas"); images = images||{}; var loader = new createjs.LoadQueue(false); loader.addEventListener("fileload", handleFileLoad); loader.addEventListener("complete", handleComplete); loader.loadManifest(lib.properties.manifest); } function handleFileLoad(evt) { if (evt.item.type == "image") { images[evt.item.id] = evt.result; } } function handleComplete() { exportRoot = new lib.fileName(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.update(); createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stage); } </script> </head> <body onload="init();" se="background-color:#D4D4D4; margin:0;"> <canvas id="canvas" width="190" height="315" se="background-color:#FFFFFF; display: block;"></canvas> </a> </body> </html>

 

 

התוספות הן:
margin: 0; לתגית body,
ו-display: block; לתגית canvas
שתי התוספות האלה פותרת את הופעתם של סרגלי הגלילה סביב לבאנר.

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

  <meta name="ad.size" content="width=300,height=250">

בזה מסתיימות למעשה הפעולות לבניית באנר html5 באמצעות פלאש.

כחלק מתהליך המיתוג מחדש ו"החייאתה" של הפלאש מתכוונת Adobe להמשיך לשווק אותה תחת השם Adobe Animate החל מראשית שנת 2016.

סטודיו אלעד מרמור - עיצוב גרפי ובניית אתרים 050-8481322 || http://www.emarmor.co.il

מאמרים נוספים שעשויים לעניין אותך:

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

©2017
כל הזכויות שמורות

מורנו'ס - שיווק באינטרנט

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



מדיה חברתית:
חלון מאמרים לאתרך
תנאי שימוש במאמרים
ערוצי מאמרים ב-RSS Recent articles RSS


מאמרים בפייסבוק מאמרים בטוויטר מאמרים ביוטיוב