P1 - Tạo banner quảng cáo đơn giản

Adobe Animate CC là một sản phẩm của hãng Adobe danh tiếng. Adobe Animate CC là công cụ hỗ trợ designer thiết kế các chuyển động trên giao diện trực quan (tương tự như Flash Professional), từ nội dung đã thiết kế đó, Adobe Animate CC sẽ phát sinh tự động mã nguồn dưới dạng HTML5, CSS3, Javascript để chúng ta có được “nội dung động” hoàn chỉnh để tích hợp vào các dự án phát triển Web của mình.

Nội dung chính

•  1. Hướng dẫn tạo banner
• 2. Xây dựng giao diện
  • 2-1. Đổi màu nền
  • 2-2. Tạo Layer xả hàng
  • 2-3. Tạo Layer giảm giá
  • 2-4. Tạo Layer 50
  • 2-5. Tạo Layer %
• 3. Tạo chuyển động cho banner
  • 3-1. Tạo chuyển động cho Layer xả hàng
  • 3-2. Tạo chuyển động cho Layer giảm giá
  • 3-3. Tạo chuyển động cho Layer 50 và %
• 4. Tạo Layer stop
• 5. Xuất bản sản phẩm

1. Hướng dẫn tạo banner

1. Mở phần mềm Adobe Animate CC
2. File >> New... hoặc (Ctrl + N)
3. Ở tab General chọn HTML5 Canvas
4. Các thông số bên cạnh mình để nguyên bao gồm width: 550px, height: 400px, ruler units: pixels, frame rate: 24,00 fps, background color: màu trắng (#FFFFFF)
5. OK

Giao diện các thanh công cụ có thể ẩn hiện và ở vị trí khác so với hình

2. Xây dựng giao diện

2-1. Đổi màu nền

Ta cho màu nền của trang sang màu đỏ #AB2E28 bằng cách chọn Properties >> Stage như hình bên dưới

2-2. Tạo Layer xả hàng

- click đúp chuột trái vào Layer 1 và đổi tên thành xả hàng, bước này không làm cũng được mục đích chủ yếu là khi nhìn các layer sẽ phân biệt dễ hơn.
- Chọn Text Tool (T) và viết chữ XẢ HÀNG
- font chữ: Tahoma, Regular, 80pt, chữ màu trắng
- Sau khi viết xong bạn chọn Selection Tool (V) để căn chỉnh cho layer này được đẹp

2-3. Tạo Layer giảm giá

- click chọn New Layer và đổi tên thành giảm giá
- Chọn Text Tool (T) và viết chữ GIẢM GIÁ
- font chữ: Tahoma, Regular, 30pt, chữ màu trắng
- Sau khi viết xong bạn chọn Selection Tool (V) để căn chỉnh cho layer này được đẹp

2-4. Tạo Layer 50

- click chọn New Layer và đổi tên thành 50
- Chọn Text Tool (T) và viết chữ 50
- font chữ: Tahoma, Regular, 230pt, chữ màu trắng
- Sau khi viết xong bạn chọn Selection Tool (V) để căn chỉnh cho layer này được đẹp

2-5. Tạo Layer %

- click chọn New Layer và đổi tên thành %
- Chọn Text Tool (T) và viết chữ %
- font chữ : Tahoma, Regular, 50pt, chữ màu trắng
- Sau khi viết xong bạn chọn Selection Tool (V) để căn chỉnh cho layer này được đẹp

3. Tạo chuyển động cho banner

3-1. Tạo chuyển động cho Layer xả hàng

- click vào layer xả hàng để bắt đầu tạo chuyển động cho Layer này
- click chuột phải vào ô số 15 chọn Insert Frame

- click tiếp chuột phải vào ô số 15 chọn Create Classic Tween

- sử dụng Selection Tool(V) di chuyển Layer này để tạo chuyển động, ở đây cách mình làm là di di Layer này đi 1 tẹo rồi bấm Ctrl + Z để nó quay về vị trí ban đầu

- kéo thanh thời gian màu đỏ về ô số 1

- sử dụng Selection Tool(V) di chuyển Layer này ra bên ngoài khung của banner
- như vậy là đã xong chuyển động cho Layer đầu tiên

3-2. Tạo chuyển động cho Layer giảm giá

- click vào layer giảm giá để bắt đầu tạo chuyển động cho Layer này
- click chuột phải vào ô số 15 chọn Insert Key Frame

- click vào khoảng thời gian phía trước ô số 15 và ấn Delete

- click chuột phải vào ô số 30 chọn Insert Frame

- click tiếp chuột phải vào ô số 30 chọn Create Classic Tween

- sử dụng Selection Tool(V) di chuyển Layer này để tạo chuyển động, ở đây cách mình làm là di di Layer này đi 1 tẹo rồi bấm Ctrl + Z để nó quay về vị trí ban đầu

- kéo thanh thời gian màu đỏ về ô số 15

- sử dụng Selection Tool(V) di chuyển Layer này ra bên ngoài khung của banner là xong chuyển động cho Layer thứ hai

- click chọn lại vào Layer xả hàng, sau đó click chuột phải vào ô số 45 chọn Insert Keyframe

- click chọn lại vào Layer giảm giá, sau đó click chuột phải vào ô số 45 chọn Insert Keyframe

- như vậy là đã xong chuyển động cho Layer thứ nhất và thứ hai

3-3. Tạo chuyển động cho Layer 50 và %

- click vào Layer 50 để bắt đầu tạo chuyển động cho Layer này
- click chuột phải vào ô số 30 chọn Insert Key Frame

- click vào khoảng thời gian phía trước ô số 30 và ấn Delete

- click chuột phải vào ô số 45 và chọn Insert Frame

- click tiếp chuột phải vào ô số 45 chọn Create Classic Tween

- sử dụng Selection Tool(V) di chuyển Layer này để tạo chuyển động, ở đây cách mình làm là di di Layer này đi 1 tẹo rồi bấm Ctrl + Z để nó quay về vị trí ban đầu

- kéo thanh thời gian màu đỏ về ô số 30

- sử dụng Selection Tool(V) di chuyển Layer này ra bên ngoài khung của banner là xong chuyển động cho Layer thứ ba

- Lặp lại tất cả các bước trên với Layer % là xong

4. Tạo Layer stop

- Qua các bước trên chúng ta đã tạo được chuyển động, ta nhấn tổ hợp phím Ctrl + Enter để preview sản phẩm.
- Hiện tại chuyển động sẽ lặp đi lặp lại suốt, cho nên ta sẽ tạo ra 1 Layer nữa để toàn bộ chuyển động sẽ chỉ diễn ra 1 lần rồi thôi.
- Create New Layer => right click => action => viết đoạn code sau:

this.stop();

- Kéo frame có chữ @ đến frame thứ 45 để xác định toàn bộ chuyển động sẽ dừng ở đó.

5. Xuất bản sản phẩm

- Để xuất bản thành quả đã làm chúng ta click vào File >> Publish Setting...
- Ở tab Basic >> Output name chúng ta chọn chỗ để lưu sản phẩm.
- Ở tab Spritesheet >> PNG Settings >> Quality mặc định là 8 bit thì chất lượng ảnh thấp, chúng ta chuyển sang dạng 32 bit để tốt hơn.
- Còn nhiều setting khác mình cũng chưa biết sử dụng hết nên update sau...
- Cuối cùng bấm Publish và Ok ở dưới để xuất bản.