Chuyển từ flash sang html5

Vào tháng 11 năm 2011, Adobe tuyên bố sẽ ngừng phát triển Flash Player cho thiết bị di động sau khi phát hành Flash Player 11.1 cho thiết bị Android và BlackBerry Playbook, thay vào đó chọn cách tập trung vào các công cụ để xây dựng ứng dụng HTML5 cho thiết bị di động. Mặc dù Adobe đã nhắc lại sự hỗ trợ của Flash Player cho các trình duyệt máy tính cá nhân, nhiều người cho rằng đây chỉ là vấn đề thời gian trước khi Adobe cũng chấm dứt hỗ trợ cho phiên bản PC. Đây là tin xấu cho các công ty đầu tư nhiều vào ứng dụng Flash, cũng như các nhà phát triển đã đầu tư thời gian để có được các kỹ năng lập trình cần thiết để xây dựng các ứng dụng Flash.

Hãy xem xét một số khác biệt giữa Flash và HTML5 và cung cấp một số mẹo và công cụ để giúp dễ dàng chuyển đổi giữa hai nền tảng này.

Khái niệm cơ bản về nền tảng Flash

Flash thường được sử dụng như một thuật ngữ ô để chỉ một nền tảng Adobe độc ​​quyền thực sự bao gồm các thành phần sau:

• Flash: Một công cụ được sử dụng chủ yếu để thiết kế và tạo hình động
• Flex: Môi trường phát triển được sử dụng để xây dựng các ứng dụng, bao gồm bộ công cụ phát triển phần mềm (SDK)
• MXML: Ngôn ngữ đánh dấu được sử dụng trong các dự án Flash
• ActionScript: Một ngôn ngữ kịch bản

Để chạy ứng dụng Flash trong trình duyệt Web, phải tải xuống trình cắm Flash Player. Thay vào đó, một ứng dụng Flash có thể được biên dịch để chạy trong môi trường thời gian chạy máy tính để bàn Adobe AIR. Một lần nữa, Adobe AIR phải được cài đặt trên máy tính của người dùng để ứng dụng AIR chạy.

Flash sử dụng các định dạng tệp chính sau:

• .fla: Tệp dự án Flash
• .flv: Tệp video flash
• .swf: Tệp ứng dụng Flash / Flex được biên dịch có thể chứa các tệp .flv

Khái niệm cơ bản về nền tảng HTML5

HTML5 là một nền tảng tiêu chuẩn mở bao gồm:

• HTML5: Ngôn ngữ đánh dấu được sử dụng để tạo các trang Web
• Cascading Style Sheets 3 (CSS3): Ngôn ngữ biểu định kiểu được sử dụng để chỉ định định dạng cho các đối tượng trên trang Web HTML5
• Giao diện lập trình ứng dụng (API): API để hỗ trợ các tính năng như kéo và thả và nhắn tin tài liệu chéo
• JavaScript: Ngôn ngữ kịch bản được sử dụng với HTML5 để kích hoạt hoạt hình

Một trong những lợi thế của HTML5 là nó chạy trên các trình duyệt Web nguyên bản và không yêu cầu trình cắm. Tuy nhiên, để chạy đúng cách, trình duyệt phải hỗ trợ các tính năng HTML5 và CSS3 cho trang Web HTML5. Các trình duyệt chính có các mức hỗ trợ khác nhau cho HTML5 và CSS3 và việc triển khai chưa hoàn tất. JavaScript hầu như được hỗ trợ bởi các trình duyệt; tuy nhiên, người dùng có tùy chọn để Tắt tắt JavaScript JavaScript, trong trường hợp đó, các kịch bản phía máy khách được tạo bằng JavaScript không chạy.

Các định dạng tệp HTML5 bao gồm:

• .htm / .html: Tệp trang web HTML5
• .css: tệp bảng kiểu CSS3

Kể từ năm 2011, đặc tả HTML5 hiện tại không chỉ định các định dạng tệp video được hỗ trợ, tùy thuộc vào các trình duyệt riêng lẻ để chọn định dạng nào sẽ hỗ trợ. Các định dạng được hỗ trợ hiện tại bao gồm:

• .mp4: Tệp video MPEG 4 với codec video H.264 và codec âm thanh AAC
• .webm: Tệp video WebM với codec video VP8 và codec âm thanh Vorbis
• .ogg: Tệp video Ogg với codec video Theora và codec âm thanh Vorbis

Chuyển đổi dự án Flash sang HTML5

Chuyển đổi thủ công một dự án Flash phức tạp sang HTML5 là một quá trình tốn nhiều công sức và thời gian, do sự khác biệt về nền tảng. Nhà phát triển phải chuyển đổi hình ảnh động được tạo bằng Flash và ActionScript thành HTML5 và JavaScript. May mắn thay, có một vài công cụ giúp tự động chuyển đổi từ Flash sang HTML5.

Adobe đã phát hành Wallaby, một công cụ thử nghiệm có thể tải xuống miễn phí từ trang web Adobe Labs. Wallaby lấy tệp dự án Flash (.fla) làm đầu vào và xuất HTML5 và hỗ trợ các tệp CSS và JavaScript. Tuy nhiên, các ghi chú phát hành Wallaby chứa một danh sách khá dài các tính năng không được chuyển đổi - trong đó quan trọng nhất là ActionScript, phim và âm thanh. Wallaby là một công cụ giới hạn được thiết kế chủ yếu để chuyển đổi nội dung đồ họa hoạt hình thành HTML5, do đó nó có thể được tích hợp vào các trang Web bằng công cụ thiết kế trang Web.

Google Labs đã phát hành Swiffy, một công cụ dựa trên Web miễn phí để chuyển đổi tệp ứng dụng Flash đã biên dịch (.swf) thành HTML5. Đầu ra sau đó có thể được nhúng vào một trang Web nhưng không dễ để nhà phát triển chỉnh sửa. Giống như Wallaby, Swiffy không chuyển đổi tất cả các tính năng Flash. Swiffy hỗ trợ chuyển đổi ActionScript, nhưng chỉ có phiên bản 2.0 (ActionScript hiện đang ở phiên bản 3.0). Đầu ra Swiffy chỉ chạy trên các trình duyệt hỗ trợ Đồ họa vectơ có thể mở rộng (SVG).

Edge, một công cụ phát triển mới cho HTML5

Khi HTML5 trở thành nền tảng được lựa chọn, các công cụ mới đang nổi lên để cung cấp các môi trường thiết kế và phát triển tích hợp HTML5, CSS3 và JavaScript.

Vào tháng 8 năm 2011, Adobe đã phát hành phiên bản xem trước của công cụ phát triển Edge. Edge cho phép một nhà thiết kế tạo hoạt hình HTML5 và thêm hoạt hình vào các dự án HTML5 hiện có. Các nhà thiết kế flash sẽ nhận ra một số yếu tố quen thuộc trong giao diện người dùng Edge, bao gồm giai đoạn, cửa sổ thuộc tính và dòng thời gian hoạt hình. Tuy nhiên, Edge tạo các tệp CSS và JavaScript và nội dung hoạt hình của nó được lưu trữ trong cấu trúc dữ liệu Ký hiệu đối tượng JavaScript (JSON).

Tại thời điểm viết bài này, Edge đã dự đoán bản phát hành xem trước thứ tư của nó. Các tính năng mới đang được thêm vào mỗi bản phát hành.

Chuyển đổi YouTube sang HTML5

Một dấu hiệu của việc chuyển sang HTML5 là YouTube hiện cung cấp tùy chọn sử dụng trình phát video HTML5 để xem video.

Trước khi cung cấp tùy chọn HTML5, tất cả các video YouTube được phân phối qua trình phát video Flash. Người dùng có thể tải lên các tệp video ở hầu hết mọi định dạng và sau đó YouTube sẽ chuyển đổi từng video sang định dạng Flash (.flv) được yêu cầu.

YouTube hiện cũng đang mã hóa video với codec video H.264 và định dạng WebM để phân phối HTML5. Để xem video ở định dạng HTML5, bạn phải có trình duyệt hỗ trợ thẻ video HTML5 và định dạng video được YouTube sử dụng.

Di sản của Flash

Như đã lưu ý trước đó, Adobe hiện đang tiếp tục phát triển trên phiên bản PC của Flash Player - cho đến nay. Ngay cả khi Adobe ngừng hỗ trợ Flash Player trong tương lai, các ứng dụng Flash cũ sẽ tiếp tục được hỗ trợ trên Web - có thể trong nhiều năm. Vì vậy, Flash sẽ không hoàn toàn biến mất bất cứ lúc nào sớm. Các công cụ có sẵn để chuyển đổi ứng dụng Flash sang ứng dụng HTML5, nhưng hiện tại, các công cụ này không hỗ trợ chuyển đổi tất cả các tính năng Flash. Khi tiêu chuẩn HTML5 trở nên chiếm ưu thế, có khả năng các công cụ chuyển đổi tệp Flash sẽ trở nên tinh vi hơn và các công cụ mới sẽ được tạo để phát triển nội dung với nền tảng HTML5.