แปลง flash จัดการกับ flash ในเว็บเก่าให้เป็น html5

แปลง flash จัดการกับ flash ให้กลายเป็น html5

หากย้อนกลับไป 3-4 ปีที่ผ่านมา flash คือเทคโนโลยีสำหรับการสร้างงาน animation
และงาน Interactive ที่นักพัฒนาทั่วโลกใช้งานกันอย่างแพร่หลาย

flash สามารถเป็นได้ตั้งแต่ Banner, Audio/Video Player, Interactive Website
รวมไปถึงการนำไปพัฒนาโปรแกรมหลาย ๆ อย่างทั้งบน Website และ Desktop

เวลาผ่านไป ด้วยเหตุและปัจจัยหลาย ๆ อย่างทำให้เทคโนโลยีที่สุดยอด
กลายเป็นเทคโนโลยีที่นักพัฒนาหันหลังให้ และกำลังจะหายไปจากเว็บไซต์

การหายไปหรือการเลิกพัฒนาของ flash ส่งผลกระทบโดยตรงต่อผู้ดูแลเว็บไซต์
เพราะหลาย ๆ เว็บไซต์ที่ถูกพัฒนาขึ้นมาก่อนหน้า ยังมีชิ้นส่วนของ flash หลงเหลืออยู่

คำถามที่ตามมาคือ เทคโนโลยีอะไรที่พอจะมาทดแทนได้
ช่วงหลายปีที่ผ่านมาเราได้ยิน ได้ฟัง คำว่า HTML5
HTML5 จะมาฆ่า flash บ้าง HTML5 vs Flash อะไรดีกว่ากัน
ซึ่งนั่นไม่ไช่สาระสำคัญครับ เพราะตอนนี้ flash ได้จากเราไปแล้ว

HTML5 คือเทคโนโลยีที่จะทำให้เว็บไซต์ของเรา มีการทำงานและให้ลูกเล่นต่าง ๆ (เกือบ)เทียบเท่า flash
หลายคนมีปัญหากับเว็บไซต์เวอชั่นเก่าที่มีตัวแฟรชติดมากับเว็บ ปัญหานี้มีตั้งแต่เว็บ SME ไปจนถึง
องค์กรขนาดใหญ่ วันนี้มีวิธีแก้ปัญหาเบื้องต้นโดยการแปลงแฟรชเป็น html code

google swiffy แปลงแฟรชเป็น html5

เปลี่ยน Flash Animation ให้เป็น HTML5 ด้วย Google Swiffy
Google Swiffy คือเครื่องมือแปลงไฟล์ .swf เป็น html เป็นเครื่องมือที่ถูกพัฒนาโดยทีมพัฒนาของ Google
วิธีใช้งาน
– เตรียมไฟล์ .swf ของเราให้พร้อมครับ
– ไป https://developers.google.com/swiffy/
– เลือกไฟล์ .swf ที่เตรียมไว้ กดยอมรับเงื่อนไข กดอัพโหลด
– ถ้าทุกอย่างโอเค Swiffy จะแสดงปุ่ม view conversion กดปุ่มนี้เพื่อดูไฟล์ html ที่ถูกแปลงแล้ว

flash to html

– คลิกขวา กด save link as เพื่อบันทึกไฟล์ .html ไปที่เครื่องของเรา

วิธีนำ html code ไปใช้งาน
หลังจากที่เราได้ไฟล์ .html มาแล้ว ให้ลองเปิดไฟล์นี้ด้วยโปรแกรม text editor ครับ
เราจะกับโค๊ดัวเลขตัวหนังสืออะไรเยอะแยะไปหมด ส่วนนี้คือข้อมูลที่ถูกแปลงมาจากแฟรช

ส่วน Head ให้ copy runtime.js ตั้งแต่บรรทัดนี้ ลงไปจนสุดบรรทัดของโค๊ดที่ถูกแปลงมาจากแฟรช

<script type="text/javascript" src="https://www.gstatic.com/swiffy/v8.0/runtime.js"></script>

ก๊อปปี้ลงไปจนสุด tag ปิด javascript นะ ยาวมาก ๆ

<script>
      swiffyobject = {"as3":false,"frameRate":30,
"frameCount":1,
"backgroundColor":-14614462,
"frameSize":{"ymin":0,"xmin":0,"ymax":13260,"xmax":19600},
"fileSize":81186,"v":"8.0.0","internedStrings":["37417318u20640103U20640103u",
....... bla bla..

ส่วนเหนือ body tag ให้ copy เพื่อนำไปใช้งานแบบนี้

<div id="swiffycontainer" style="width: 980px; height: 663px">
</div>
<script>
  
  var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
      swiffyobject, {});
  
  stage.start();
</script>

swiffycontainer คือ div ไอดีที่เราจะสามารถปรับแต่งได้
จากตัวอย่างข้างบนตัว div ถูกกำหนด style ให้กว้าง 980×663 ตามขนาดของ .swf ต้นแบบ
และถ้าเราอยากให้ตัวแฟรช ย่อขยายได้ตามขนาดหน้าจอก็จะสามารถเขียน CSS ควบคุมได้จาก div นี้