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