Hiện nay đã có nhiều công cụ giúp chúng ta dễ dàng chuyển đổi từ một file flash swf sang HTML5 để thực hiện những công việc khác nhau như làm game, banner quảng cáo hay nội dung web... Sau khi convert từ flash sang html5, file chạy nhẹ hơn rất nhiều mà vẫn giữ được chất lượng hình ảnh cũng như hiệu ứng tương đương.
Sau đây là cách chuyển đổi một file flash swf sang html5 nhanh nhất đó là dùng chính phần mềm Adobe Flash, nếu là bản Adobe flash CS6 thì các bạn cài thêm plugin Toolkit for CreateJS, trên Adobe Flash CC thì đã có sẵn.
Trong bài viết này mình xin hướng dẫn trên Adobe Flash CC:
Mở Adobe Flash Professional CC lên:
Chọn Open để mở file swf của bạn, sau khi mở, bạn chọn Commands -> Convert To Other Document Format như hình bên dưới:
Cửa sổ popup hiện lên, tại Convert your document to bạn chọn HTML5 Canvas, tại Save As bạn browse tới vị trí lưu file .FLA Flash HTML5 Cavas, bạn có thể giữ nguyên đường dẫn vì phần mềm đã đặt tên khác cho file FLA:
Sau khi convert từ file FLA Flash sang FLA HTML5 Canvas thì chúng ta sẽ xuất file HTML5:
Tại tab đang mở file FLA HTML5 Canvas bạn chọn: Property -> Publish Setting... như trong hình:
Tại cửa sổ Publish Setting bạn check hoặc không check những option sau:
+ Loop timeline: Check nếu bạn muốn file flash lập lại sau khi kết thúc timeline và ngược lại
+ Overwrite HTML: Check nếu bạn muốn ghi đè lên file html có sẵn và ngược lại (chỉ khi bạn đã từng publish rồi)
+ Export all bitmaps as Spritesheets: Nếu check thì tất cả các hình ảnh bitmap trong flash sẽ xuất ra thành 1 file chung dung lượng khá nặng, bạn nên bỏ check để xuất ra theo từng file riêng.
+ Các option còn lại bạn không cần để ý, sau đó nhấn Publich để xuất file.
Lưu ý là hành động Ctrl + Enter cũng là Publich nhưng sẽ xuất file theo Setting mặc định.
Vậy là xong, bây giờ bạn ra ngoài folder chứa file html vừa xuất và mở nó lên trên trình duyệt để kiểm tra nhé, bây giờ file swf đã là html5:
Rất dễ dàng phải không các bạn? Chúc các bạn thành công!
Xem thêm:
- Hướng dẫn làm banner quảng cáo HTML5
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Một số hiệu ứng ánh sáng chói trong Flash để làm banner, intro...
- Hướng dẫn làm hiệu ứng tuyết rơi bằng Action Script 3 trong Flash
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Load hình hoặc movie từ bên ngoài vào một file Flash với Action Script 2
Sau đây là cách chuyển đổi một file flash swf sang html5 nhanh nhất đó là dùng chính phần mềm Adobe Flash, nếu là bản Adobe flash CS6 thì các bạn cài thêm plugin Toolkit for CreateJS, trên Adobe Flash CC thì đã có sẵn.
Trong bài viết này mình xin hướng dẫn trên Adobe Flash CC:
Mở Adobe Flash Professional CC lên:
Chọn Open để mở file swf của bạn, sau khi mở, bạn chọn Commands -> Convert To Other Document Format như hình bên dưới:
Cửa sổ popup hiện lên, tại Convert your document to bạn chọn HTML5 Canvas, tại Save As bạn browse tới vị trí lưu file .FLA Flash HTML5 Cavas, bạn có thể giữ nguyên đường dẫn vì phần mềm đã đặt tên khác cho file FLA:
Sau khi convert từ file FLA Flash sang FLA HTML5 Canvas thì chúng ta sẽ xuất file HTML5:
Tại tab đang mở file FLA HTML5 Canvas bạn chọn: Property -> Publish Setting... như trong hình:
Tại cửa sổ Publish Setting bạn check hoặc không check những option sau:
+ Loop timeline: Check nếu bạn muốn file flash lập lại sau khi kết thúc timeline và ngược lại
+ Overwrite HTML: Check nếu bạn muốn ghi đè lên file html có sẵn và ngược lại (chỉ khi bạn đã từng publish rồi)
+ Export all bitmaps as Spritesheets: Nếu check thì tất cả các hình ảnh bitmap trong flash sẽ xuất ra thành 1 file chung dung lượng khá nặng, bạn nên bỏ check để xuất ra theo từng file riêng.
+ Các option còn lại bạn không cần để ý, sau đó nhấn Publich để xuất file.
Lưu ý là hành động Ctrl + Enter cũng là Publich nhưng sẽ xuất file theo Setting mặc định.
Vậy là xong, bây giờ bạn ra ngoài folder chứa file html vừa xuất và mở nó lên trên trình duyệt để kiểm tra nhé, bây giờ file swf đã là html5:
Rất dễ dàng phải không các bạn? Chúc các bạn thành công!
Xem thêm:
- Hướng dẫn làm banner quảng cáo HTML5
- Tổng hợp những hiệu ứng ánh sáng flash để làm banner hoặc intro
- Một số hiệu ứng ánh sáng chói trong Flash để làm banner, intro...
- Hướng dẫn làm hiệu ứng tuyết rơi bằng Action Script 3 trong Flash
- Tạo bộ đếm giờ (Countdown Timer) bằng Action Script 2 trong Flash
- Chèn nhạc từ bên ngoài vào file flash bằng ActionScript 3
- Load hình hoặc movie từ bên ngoài vào một file Flash với Action Script 2
