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

<h1>แปลง flash จัดการกับ flash ให้กลายเป็น html5<&sol;h1>&NewLine;<p>หากย้อนกลับไป 3-4 ปีที่ผ่านมา flash คือเทคโนโลยีสำหรับการสร้างงาน animation<br &sol;>&NewLine;และงาน Interactive ที่นักพัฒนาทั่วโลกใช้งานกันอย่างแพร่หลาย<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p>flash สามารถเป็นได้ตั้งแต่ Banner&comma; Audio&sol;Video Player&comma; Interactive Website<br &sol;>&NewLine;รวมไปถึงการนำไปพัฒนาโปรแกรมหลาย ๆ อย่างทั้งบน Website และ Desktop<&sol;p>&NewLine;<p>เวลาผ่านไป ด้วยเหตุและปัจจัยหลาย ๆ อย่างทำให้เทคโนโลยีที่สุดยอด<br &sol;>&NewLine;กลายเป็นเทคโนโลยีที่นักพัฒนาหันหลังให้ และกำลังจะหายไปจากเว็บไซต์<&sol;p>&NewLine;<p>การหายไปหรือการเลิกพัฒนาของ flash ส่งผลกระทบโดยตรงต่อผู้ดูแลเว็บไซต์<br &sol;>&NewLine;เพราะหลาย ๆ เว็บไซต์ที่ถูกพัฒนาขึ้นมาก่อนหน้า ยังมีชิ้นส่วนของ flash หลงเหลืออยู่<&sol;p>&NewLine;<p>คำถามที่ตามมาคือ เทคโนโลยีอะไรที่พอจะมาทดแทนได้<br &sol;>&NewLine;ช่วงหลายปีที่ผ่านมาเราได้ยิน ได้ฟัง คำว่า HTML5<br &sol;>&NewLine;HTML5 จะมาฆ่า flash บ้าง HTML5 vs Flash อะไรดีกว่ากัน<br &sol;>&NewLine;ซึ่งนั่นไม่ไช่สาระสำคัญครับ เพราะตอนนี้ flash ได้จากเราไปแล้ว<&sol;p>&NewLine;<p>HTML5 คือเทคโนโลยีที่จะทำให้เว็บไซต์ของเรา มีการทำงานและให้ลูกเล่นต่าง ๆ &lpar;เกือบ&rpar;เทียบเท่า flash<br &sol;>&NewLine;หลายคนมีปัญหากับเว็บไซต์เวอชั่นเก่าที่มีตัวแฟรชติดมากับเว็บ ปัญหานี้มีตั้งแต่เว็บ SME ไปจนถึง<br &sol;>&NewLine;องค์กรขนาดใหญ่ วันนี้มีวิธีแก้ปัญหาเบื้องต้นโดยการแปลงแฟรชเป็น html code<&sol;p>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;convert-swf-to-html5&period;jpg" alt&equals;"google swiffy แปลงแฟรชเป็น html5" &sol;><&sol;p>&NewLine;<p><strong>เปลี่ยน Flash Animation ให้เป็น HTML5 ด้วย Google Swiffy<&sol;strong><br &sol;>&NewLine;Google Swiffy คือเครื่องมือแปลงไฟล์ &period;swf เป็น html เป็นเครื่องมือที่ถูกพัฒนาโดยทีมพัฒนาของ Google<br &sol;>&NewLine;<strong>วิธีใช้งาน<&sol;strong><br &sol;>&NewLine;&&num;8211&semi; เตรียมไฟล์ &period;swf ของเราให้พร้อมครับ<br &sol;>&NewLine;&&num;8211&semi; ไป <a href&equals;"https&colon;&sol;&sol;developers&period;google&period;com&sol;swiffy&sol;">https&colon;&sol;&sol;developers&period;google&period;com&sol;swiffy&sol;<&sol;a><br &sol;>&NewLine;&&num;8211&semi; เลือกไฟล์ &period;swf ที่เตรียมไว้ กดยอมรับเงื่อนไข กดอัพโหลด<br &sol;>&NewLine;&&num;8211&semi; ถ้าทุกอย่างโอเค Swiffy จะแสดงปุ่ม view conversion กดปุ่มนี้เพื่อดูไฟล์ html ที่ถูกแปลงแล้ว<&sol;p>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;swiffy-flash-to-html&period;png" alt&equals;"flash to html" &sol;><&sol;p>&NewLine;<p>&&num;8211&semi; คลิกขวา กด save link as เพื่อบันทึกไฟล์ &period;html ไปที่เครื่องของเรา<&sol;p>&NewLine;<p><strong>วิธีนำ html code ไปใช้งาน<&sol;strong><br &sol;>&NewLine;หลังจากที่เราได้ไฟล์ &period;html มาแล้ว ให้ลองเปิดไฟล์นี้ด้วยโปรแกรม text editor ครับ<br &sol;>&NewLine;เราจะกับโค๊ดัวเลขตัวหนังสืออะไรเยอะแยะไปหมด ส่วนนี้คือข้อมูลที่ถูกแปลงมาจากแฟรช<&sol;p>&NewLine;<p>ส่วน Head ให้ copy runtime&period;js ตั้งแต่บรรทัดนี้ ลงไปจนสุดบรรทัดของโค๊ดที่ถูกแปลงมาจากแฟรช<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;script type&equals;"text&sol;javascript" src&equals;"https&colon;&sol;&sol;www&period;gstatic&period;com&sol;swiffy&sol;v8&period;0&sol;runtime&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<p>ก๊อปปี้ลงไปจนสุด tag ปิด javascript นะ ยาวมาก ๆ<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;script&gt&semi; &NewLine; swiffyobject &equals; &lbrace;"as3"&colon;false&comma;"frameRate"&colon;30&comma; &NewLine;"frameCount"&colon;1&comma; &NewLine;"backgroundColor"&colon;-14614462&comma; &NewLine;"frameSize"&colon;&lbrace;"ymin"&colon;0&comma;"xmin"&colon;0&comma;"ymax"&colon;13260&comma;"xmax"&colon;19600&rcub;&comma; &NewLine;"fileSize"&colon;81186&comma;"v"&colon;"8&period;0&period;0"&comma;"internedStrings"&colon;&lbrack;"37417318u20640103U20640103u"&comma; &NewLine;&period;&period;&period;&period;&period;&period;&period; bla bla&period;&period;<&sol;pre>&NewLine;<p>ส่วนเหนือ body tag ให้ copy เพื่อนำไปใช้งานแบบนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div id&equals;"swiffycontainer" style&equals;"width&colon; 980px&semi; height&colon; 663px"&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi; &NewLine;&lt&semi;script&gt&semi; &NewLine; &NewLine; var stage &equals; new swiffy&period;Stage&lpar;document&period;getElementById&lpar;'swiffycontainer'&rpar;&comma; &NewLine; swiffyobject&comma; &lbrace;&rcub;&rpar;&semi; &NewLine; &NewLine; stage&period;start&lpar;&rpar;&semi; &NewLine;&lt&semi;&sol;script&gt&semi; &NewLine;<&sol;pre>&NewLine;<p>swiffycontainer คือ div ไอดีที่เราจะสามารถปรับแต่งได้<br &sol;>&NewLine;จากตัวอย่างข้างบนตัว div ถูกกำหนด style ให้กว้าง 980&&num;215&semi;663 ตามขนาดของ &period;swf ต้นแบบ<br &sol;>&NewLine;และถ้าเราอยากให้ตัวแฟรช ย่อขยายได้ตามขนาดหน้าจอก็จะสามารถเขียน CSS ควบคุมได้จาก div นี้<&sol;p>&NewLine;