ย้ายจาก Flash เป็น HTML5

เนื้อหา

• ข้อมูลพื้นฐานเกี่ยวกับแพลตฟอร์ม Flash
• ข้อมูลพื้นฐานเกี่ยวกับแพลตฟอร์ม HTML5
• การแปลงโปรเจ็กต์ Flash เป็น HTML5
• Edge เครื่องมือพัฒนาใหม่สำหรับ HTML5
• แปลง YouTube เป็น HTML5
• Legacy of Flash

Takeaway:

Flash จะไม่หายไปเร็ว ๆ นี้ แต่ผู้เชี่ยวชาญหลายคนเชื่อว่าในที่สุดจะถูกแทนที่ด้วย HTML5 ค้นหาว่าการเปลี่ยนแปลงนี้จะหมายถึงอะไรสำหรับ บริษัท และนักพัฒนาที่ลงทุนใน Flash เป็นอย่างมาก

ในเดือนพฤศจิกายน 2554 Adobe ประกาศว่าจะยุติการพัฒนา Flash Player สำหรับอุปกรณ์มือถือหลังจากเปิดตัว Flash Player 11.1 สำหรับอุปกรณ์ Android และ BlackBerry Playbook โดยเลือกใช้เครื่องมือในการสร้างแอปพลิเคชัน HTML5 สำหรับอุปกรณ์มือถือแทน แม้ว่า Adobe ขอย้ำถึงการสนับสนุน Flash Player สำหรับเบราว์เซอร์คอมพิวเตอร์ส่วนบุคคล แต่หลายคนคิดว่ามันเป็นเพียงแค่ช่วงเวลาก่อนที่ Adobe จะยุติการสนับสนุนสำหรับเวอร์ชั่น PC นี่เป็นข่าวร้ายสำหรับ บริษัท ที่ลงทุนในแอพพลิเคชั่นแฟลชเป็นอย่างมากรวมถึงนักพัฒนาที่ลงทุนเวลาในการรับทักษะการเขียนโปรแกรมที่จำเป็นในการสร้างแอพพลิเคชั่นแฟลช

มาดูความแตกต่างระหว่าง Flash และ HTML5 และให้คำแนะนำและเครื่องมือบางอย่างเพื่อช่วยให้การเปลี่ยนระหว่างสองแพลตฟอร์มนี้ง่ายขึ้น

ข้อมูลพื้นฐานเกี่ยวกับแพลตฟอร์ม Flash

Flash มักใช้เป็นคำศัพท์ในการอ้างอิงถึงแพลตฟอร์ม Adobe ที่เป็นกรรมสิทธิ์ซึ่งจริง ๆ แล้วประกอบด้วยองค์ประกอบต่อไปนี้:

• Flash: เครื่องมือที่ใช้เพื่อออกแบบและสร้างภาพเคลื่อนไหวเป็นหลัก
• Flex: สภาพแวดล้อมการพัฒนาที่ใช้ในการสร้างแอปพลิเคชันรวมถึงชุดพัฒนาซอฟต์แวร์ (SDK)
• MXML: ภาษามาร์กอัปที่ใช้ในโครงการ Flash
• ActionScript: ภาษาสคริปต์

ในการเรียกใช้แอปพลิเคชัน Flash ในเว็บเบราว์เซอร์จะต้องดาวน์โหลดปลั๊กอิน Flash Player เป็นทางเลือกแอพพลิเคชั่น Flash สามารถคอมไพล์ให้ทำงานในสภาพแวดล้อมรันไทม์บนเดสก์ท็อป Adobe AIR ต้องติดตั้ง Adobe AIR อีกครั้งบนคอมพิวเตอร์ของผู้ใช้เพื่อให้แอปพลิเคชัน AIR ทำงานได้

Flash ใช้รูปแบบไฟล์หลักต่อไปนี้:

• .fla: ไฟล์โครงการ Flash
• .flv: ไฟล์วิดีโอ Flash
• .swf: ไฟล์แอปพลิเคชัน Flash / Flex ที่คอมไพล์ซึ่งอาจมีไฟล์. flv

ข้อมูลพื้นฐานเกี่ยวกับแพลตฟอร์ม HTML5

HTML5 เป็นแพลตฟอร์มมาตรฐานแบบเปิดที่ประกอบด้วยสิ่งต่อไปนี้:

• HTML5: ภาษามาร์กอัปที่ใช้สร้างเว็บเพจ
• Cascading Style Sheets 3 (CSS3): ภาษาสไตล์ชีตที่ใช้ในการระบุการจัดรูปแบบสำหรับวัตถุบนเว็บเพจ HTML5
• Application Programming Interfaces (API): API เพื่อรองรับคุณสมบัติต่างๆเช่นการส่งข้อความแบบลากและวางและข้ามเอกสาร
• JavaScript: ภาษาสคริปต์ที่ใช้กับ HTML5 เพื่อเปิดใช้งานภาพเคลื่อนไหว

ข้อดีอย่างหนึ่งของ HTML5 ก็คือมันทำงานบนเว็บเบราว์เซอร์โดยพื้นฐานและไม่จำเป็นต้องมีปลั๊กอิน อย่างไรก็ตามเพื่อให้ทำงานได้อย่างถูกต้องเบราว์เซอร์จะต้องรองรับคุณสมบัติ HTML5 และ CSS3 สำหรับเว็บเพจ HTML5 เบราว์เซอร์หลักมีระดับการสนับสนุน HTML5 และ CSS3 ที่แตกต่างกันและการติดตั้งใช้งานไม่สมบูรณ์ JavaScript รองรับเบราว์เซอร์เกือบทุกระดับ อย่างไรก็ตามผู้ใช้มีตัวเลือกในการ "ปิด" JavaScript ซึ่งในกรณีนี้สคริปต์ฝั่งไคลเอ็นต์ที่สร้างด้วย JavaScript จะไม่ทำงาน

รูปแบบไฟล์ HTML5 มีดังต่อไปนี้:

• .htm / .html: ไฟล์เว็บเพจ HTML5
• .css: ไฟล์สไตล์ชีท CSS3

ตั้งแต่ปี 2011 ข้อกำหนด HTML5 ปัจจุบันไม่ได้ระบุรูปแบบไฟล์วิดีโอที่รองรับปล่อยให้มันขึ้นอยู่กับแต่ละเบราว์เซอร์เพื่อเลือกรูปแบบที่จะสนับสนุน รูปแบบที่รองรับในปัจจุบัน ได้แก่ :

• .mp4: ไฟล์วิดีโอ MPEG 4 ที่มีตัวแปลงสัญญาณวิดีโอ H.264 และตัวแปลงสัญญาณเสียง AAC
• .webm: ไฟล์วิดีโอ WebM พร้อมตัวแปลงสัญญาณวิดีโอ VP8 และตัวแปลงสัญญาณเสียง Vorbis
• .ogg: ไฟล์วิดีโอ Ogg ที่มีตัวแปลงสัญญาณวิดีโอ Theora และตัวแปลงสัญญาณเสียง Vorbis

การแปลงโปรเจ็กต์ Flash เป็น HTML5

การแปลงโครงการ Flash ที่ซับซ้อนด้วยตนเองเป็น HTML5 เป็นกระบวนการที่ใช้แรงงานมากและใช้เวลานานเนื่องจากความแตกต่างของแพลตฟอร์ม นักพัฒนาจะต้องแปลงภาพเคลื่อนไหวที่สร้างด้วย Flash และ ActionScript เป็น HTML5 และ JavaScript โชคดีที่มีเครื่องมือบางอย่างที่ช่วยให้การแปลงอัตโนมัติจาก Flash เป็น HTML5

Adobe ได้เปิดตัว Wallaby ซึ่งเป็นเครื่องมือทดลองที่สามารถดาวน์โหลดได้ฟรีจากเว็บไซต์ Adobe Labs Wallaby ใช้ไฟล์โครงการ Flash (.fla) เป็นอินพุตและส่งออก HTML5 และสนับสนุนไฟล์ CSS และ JavaScript อย่างไรก็ตามบันทึกประจำรุ่นของ Wallaby มีรายการคุณลักษณะที่ค่อนข้างยาวซึ่งไม่ได้รับการแปลงซึ่งสำคัญที่สุดคือ ActionScript, ภาพยนตร์และเสียง Wallaby เป็นเครื่องมือที่มีข้อ จำกัด ที่ออกแบบมาเพื่อแปลงเนื้อหากราฟิกเคลื่อนไหวเป็น HTML5 เพื่อให้สามารถรวมเข้ากับเว็บเพจโดยใช้เครื่องมือออกแบบเว็บเพจ

Google Labs เปิดตัว Swiffy เครื่องมือฟรีทางเว็บที่แปลงไฟล์แอปพลิเคชัน Flash ที่คอมไพล์แล้ว (.swf) เป็น HTML5 จากนั้นสามารถฝังเอาท์พุทลงในเว็บเพจ แต่ไม่ใช่เรื่องง่ายสำหรับนักพัฒนาที่จะแก้ไข เช่นเดียวกับ Wallaby Swiffy ไม่ได้แปลงฟีเจอร์ Flash ทั้งหมด Swiffy รองรับการแปลง ActionScript แต่รุ่น 2.0 เท่านั้น (ปัจจุบัน ActionScript เป็นรุ่น 3.0) ผลลัพธ์ Swiffy จะทำงานบนเบราว์เซอร์ที่รองรับ Scalable Vector Graphics (SVG) เท่านั้น

Edge เครื่องมือพัฒนาใหม่สำหรับ HTML5

ในขณะที่ HTML5 กลายเป็นแพลตฟอร์มที่เลือกเครื่องมือใหม่ ๆ ก็กำลังโผล่ออกมาเพื่อมอบสภาพแวดล้อมการออกแบบและการพัฒนาที่รวม HTML5, CSS3 และ JavaScript

ในเดือนสิงหาคม 2554 Adobe ได้เผยแพร่เครื่องมือพัฒนา Edge รุ่นตัวอย่าง Edge ช่วยให้นักออกแบบสร้างภาพเคลื่อนไหว HTML5 และเพิ่มภาพเคลื่อนไหวให้กับโครงการ HTML5 ที่มีอยู่ นักออกแบบ Flash จะรู้จักองค์ประกอบที่คุ้นเคยบางอย่างในส่วนติดต่อผู้ใช้ของ Edge ซึ่งรวมถึงขั้นตอนหน้าต่างคุณสมบัติและเส้นเวลาภาพเคลื่อนไหว อย่างไรก็ตาม Edge สร้างไฟล์ CSS และ JavaScript และเนื้อหาภาพเคลื่อนไหวจะถูกเก็บไว้ในโครงสร้างข้อมูล JavaScript Object Notation (JSON)

ในขณะที่เขียนนี้ Edge คาดว่าจะมีการเปิดตัวตัวอย่างครั้งที่สี่ มีการเพิ่มคุณสมบัติใหม่ในแต่ละรุ่น

แปลง YouTube เป็น HTML5

หนึ่งสัญญาณของการย้ายไปที่ HTML5 คือตอนนี้ YouTube มีตัวเลือกให้ใช้เครื่องเล่นวิดีโอ HTML5 เพื่อดูวิดีโอ

ก่อนที่จะเสนอตัวเลือก HTML5 วิดีโอ YouTube ทั้งหมดจะถูกส่งผ่านโปรแกรมเล่นวิดีโอ Flash ผู้ใช้สามารถอัปโหลดไฟล์วิดีโอในเกือบทุกรูปแบบจากนั้น YouTube จะแปลงวิดีโอแต่ละไฟล์เป็นรูปแบบ Flash (.flv) ที่ต้องการ

ขณะนี้ YouTube กำลังเข้ารหัสวิดีโอด้วยตัวแปลงสัญญาณวิดีโอ H.264 และรูปแบบ WebM สำหรับการส่ง HTML5 ในการดูวิดีโอในรูปแบบ HTML5 คุณต้องมีเบราว์เซอร์ที่รองรับแท็กวิดีโอ HTML5 และรูปแบบวิดีโอที่ YouTube ใช้

Legacy of Flash

ดังที่กล่าวไว้ก่อนหน้านี้ Adobe กำลังพัฒนา Flash Player เวอร์ชัน PC อย่างต่อเนื่อง แม้ว่า Adobe จะหยุดการสนับสนุน Flash Player ในอนาคตแอปพลิเคชัน Flash แบบดั้งเดิมจะยังคงได้รับการสนับสนุนบนเว็บต่อไป - เป็นไปได้หลายปี ดังนั้น Flash จะไม่หายไปอย่างสมบูรณ์ในเวลาไม่นาน มีเครื่องมือในการแปลงแอปพลิเคชัน Flash เป็นแอปพลิเคชัน HTML5 แต่ปัจจุบันเครื่องมือเหล่านี้ไม่รองรับการแปลงคุณสมบัติ Flash ทั้งหมด เมื่อมาตรฐาน HTML5 โดดเด่นเป็นไปได้ว่าเครื่องมือการแปลงไฟล์ Flash จะมีความซับซ้อนมากขึ้นและเครื่องมือใหม่จะถูกสร้างขึ้นเพื่อพัฒนาเนื้อหาด้วยแพลตฟอร์ม HTML5