แปลง Flash Banner เป็น HTML5 Banner

Devil Other

ปัจจุบัน Banner ใน Website ต่างๆ เริ่มมีการปรับเปลี่ยนจาก Flash มาเป็น HTML5   เหตุผลที่มีการนำ HTML5 มาเป็น Banner เนื่องจาก  Flash ไม่รองรับใน Smart Phone ต่างๆนั่นเอง

แต่ในการที่จะให้เปลี่ยนให้คนสร้าง Banner จาก Flash มาเขียน Script HTML5 ก็เป็นเรื่องที่ยากและเร็วเกินไป  จึงทำให้มีโปรแกรมแปลง Flash เป็น HTML5 อยู่เยอะพอสมควร  ซึ่งก็แล้วแต่คนใช้ชอบ  สำหรับผมใช้ Swiffy ของ Google

แต่การใช้โปรแกรมแปลงก็พบปัญหาเช่นกันทั้งในเรื่อง เอาเข้า Adserver แล้วมีปัญหา  ค้างหรือคลิกไม่ได้  จับ clicktag ไม่ได้  ฯลฯ  จากที่ได้ลองศึกษาแหละหาวิธีแก้ไข ก็ได้ออกมาเป็นขั้นตอนดังนี้  (จากตัวอย่างผมใช้ Actionscript 1-2 นะครับ  และ Adserver ใช้ Revive)

ขั้นตอนการสร้าง Banner HTML5

1.   สร้าง Banner ในโปรแกร Flash

2.  สร้างปุ่มและตั้งชื่อเพื่อให้สามารถ clickTag ของ Adserver จับค่าได้ แล้วเขียน Script ดังนี้

ตัวอย่าง

ชื่อปุ่ม.onRelease = function (){
     if (clickTAG.substr(0,5) == "http:") {
         getURL(clickTAG,clickTARGET);
     }
}
หมายเหตุ  ไม่ควรสร้างเป็นปุ่มแล้วใช้ Script on(release) เพราะ Adserver บางอันไม่สามารถจับค่าได้

3.  เข้าไปแปลงไฟล์ใน Swiffy  จะได้ Script มายาวๆ  (ส่วนใหญ่ที่ยาวเพราะมีการแปลงรูปเป็น Script)

4.  ตัด Script ในส่วนที่ยาวๆออกมาไว้อีกไฟล์แล้ว Save เป็น .js และเพิ่ม stage.setFlashVars เข้าไป ดังตัวอย่างข้างล่าง  (เหตุผลที่ต้องแยก Script ออกมาเพราะหากนำ Script  ยาวๆทั้งหมดลง Adserver  ในบางอันจะทำให้ Adserver ค้าง  หรือ คลิกไม่ได้)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Swiffy Output</title>
    <script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3/runtime.js"></script>
    <script type="text/javascript" src="http://... /xxx.js"></script>
     </head>
<body>
    <div id="swiffycontainer" style="width: 300px; height: 250px"></div>
    <script>
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {});
      stage.setFlashVars("clickTAG=ใส่ URL ปลายทาง");
      stage.start();
    </script>
  </body>
</html>

5.  นำ Script เข้า Adserver ก็เป็นอันเสร็จ

ข้อควรระวัง

1.  ในการสร้างต้องเปลี่ยนชื่อในส่วน Div  และ getElementById ด้วย  เนื่องจากหากในหน้าเดียวกันมีการเรียกใช้ชื่อเดียวกัน  จะพบว่า  Ad ทั้งหมดที่เรียนกในชื่อเดียวกัน จะไปต่อกันทับกับไฟล์อื่นๆ

2.  ในการเซต Adserver ต้องพยายามให้ Ad แสดงพร้อมกันในหน้าเดียวกัน

หมายเหตุ วิธีง่ายที่สุดคือ Gen Zone ของ Adserver ออกมาให้เป็นรูปแบบ Iframe แต่ถ้าหาก Ad มีลูกเล่นออกนอกตัว Ad ก็ต้องเซตชื่อให้ไม่ตรงกัน