แปลง 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 ตั้งแต่บรรทัดนี้ ลงไปจนสุดบรรทัดของโค๊ดที่ถูกแปลงมาจากแฟรช

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

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

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

กระทู้ใกล้เคียง

HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ P... HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP ตัวอย่าง HTML5 Canvas เซฟรูป การเขียนโปรแกรมด้วย Javascript บนแคนวาส Canvas เป็นความส...
HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax... HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax ใน HTML5 Canvas เราสามารถโหลดรูปให้เสร็จก่อนและใช้คลาส new Image() โหลดรูปอีกรอบหนึ่งก่อนที่ใช้ คำสั่ง ...
HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นด้วย Canvas... HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ...
วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...

Comments

comments