Hướng dẫn làm banner quảng cáo HTML5

by Unknown 12:40:00 PM 2 nhận xét

Hiện nay HTML5 đã trở nên phổ biến và được hỗ trợ ở mọi trình duyệt vì vậy việc thay thế định dạng quảng cáo Flash bằng HTML5 là cần thiết và trở thành xu hướng bắt buộc.
Về cơ bản HTML5 chạy nhẹ, hỗ trợ trên cả thiết bị mobile hay các hệ điều hành khác nhau kể cả iOS mà không cần bất kì trình player nào như Flash.

Để làm banner quảng cáo HTML5 hay chuyển đổi các banner Flash thành HTML5 rất đơn giản, các bạn chỉ cần làm theo các bước sau đây:

1 Làm mới một banner HTML5:

Để làm banner HTML5 dễ dàng nhất bạn nên cài đặt và sử dụng phần mền Adobe Flash CC, sau khi cài đặt bạn mở ứng dụng lên chọn New -> HTML Canvas

- Làm banner bình thường như làm với banner Flash, lưu ý là hiện tại Flash CC chưa hỗ trợ một số hiệu ứng Flash cho HTML5 như Style: Tint, Advanced hay một số hiệu ứng Filter nên khi xuất ra file chạy sẽ không thấy được.

- Xuất file HTML5 bằng cách nhấn Enter hoặc vào Publich để setting chi tiết ( Bạn có thể đọc thêm bài viết Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC để biết thêm)

- Đặt code redirect link khi người dùng click banner:
 Sau khi xuất ra file HTML5, bạn sẽ nhận được file .html và .js, bạn mở file HTML lên trên editor và thêm đoạn code sau vào cuối function handleComplete

stage.addEventListener('click', btnRediect);
function btnRediect(){
 location.href = "http://www.obinb.com";
}

Bạn chỉnh link redirect theo ý bạn nhé :) Sau đó lưu lại và kiểm tra kết quả trên trình duyệt.

Download file banner cơ bản trong bài viết này tại đây

Lưu ý: Khi gắn banner HTML5 bạn có thể gắn trực tiếp trong qua thẻ Canvas trong html hoặc sử dụng một iframe để load vào vị trí mình muốn.

2 Chuyển đổi một banner Flash có sẵn sang HTML5:
Rất đơn giản, bạn mở file gốc của banner Flash định dạng FLA rồi làm theo các bước trong bài viết Hướng dẫn cách convert swf sang HTML5 dễ dàng bằng Adobe Flash CC là được.
Đến bước gắn link bạn làm như ở trong bài viết này nhé.

Chúc các bạn thành công!

Xem thêm:
- 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
- Tổng hợp những Tag (Thẻ) mới trong HTML5
- Cấu trúc chuẩn của một trang HTML5