🆕 1. Tạo file mới
Các bước thực hiện:
- Mở Adobe Animate CC.
- Ở màn hình Start, chọn “HTML5 Canvas” (vì đây là định dạng phù hợp cho banner web).
- Thiết lập kích thước:
- Ví dụ: 300 × 250 pixel cho banner Medium Rectangle.
- Đặt tên file và chọn nơi lưu.
- Nhấn “Create” để bắt đầu.
🧱 2. Thêm các layer vào Timeline
Tác dụng: Tách biệt từng thành phần (ảnh, text, nút…) để dễ quản lý và tạo chuyển động.
Các bước:
- Vào Timeline, click biểu tượng “Add New Layer” (hình tờ giấy).
- Đặt tên layer (VD: “Text”, “Button”, “Image”).
- Mỗi nội dung nên nằm trên 1 layer riêng biệt.
➡️ Mẹo: Bạn có thể khóa các layer không chỉnh sửa để tránh ảnh hưởng lẫn nhau.
⏱ 3. Quản lý Keyframe trên Timeline
Keyframe là nơi ghi nhận sự thay đổi (vị trí, màu, hiệu ứng…).
Các thao tác chính:
- Click chuột phải vào frame → Insert Keyframe (F6) để tạo khung mới có nội dung thay đổi.
- Dùng Motion Tween hoặc Classic Tween để tạo hiệu ứng chuyển động giữa các keyframe.
- Kéo thanh timeline để xem quá trình chuyển động.
➡️ Ví dụ: Bạn muốn dòng chữ “MUA NGAY” bay từ trái vào giữa sau 1 giây → Tạo keyframe ở frame 1 và 24, sau đó áp dụng tween.
🧰 4. Chọn và sử dụng các Tool
Adobe Animate có rất nhiều công cụ mạnh mẽ. Một số công cụ cơ bản:
Công cụ | Biểu tượng & Phím tắt | Chức năng chính |
Selection Tool | (V) | Di chuyển, chọn đối tượng |
Text Tool | (T) | Thêm và định dạng văn bản |
Brush Tool | (B) | Vẽ tự do bằng cọ |
Rectangle Tool | (R) | Vẽ hình cơ bản như hình chữ nhật, elip… |
Transform Tool | (Q) | Xoay, thay đổi kích thước đối tượng |
➡️ Lưu ý: Mỗi đối tượng trên Stage nên được Convert sang Symbol để dễ kiểm soát và hoạt hình.
👁 5. Xem trước kết quả
Mục đích: Kiểm tra xem chuyển động, hiệu ứng, kích thước có hợp lý chưa.
Cách thực hiện:
- Nhấn Ctrl + Enter (Windows) hoặc Cmd + Return (Mac) để chạy xem trước banner trong trình duyệt.
- Sửa lỗi nếu có (chuyển động bị giật, lỗi font, quá nhiều hiệu ứng làm nặng file…).
- Sau khi hoàn tất → Xuất file qua menu File → Publish Settings → chọn HTML5 Canvas để xuất banner dùng cho web.