Coding

Hiệu ứng ánh sáng chạy qua text

 

Có rất nhiều bạn đã biết đến hiệu ứng này, nhưng mình nghĩ mỗi người sẽ có những cách riêng để làm nó. 

Mình xin chia sẻ cách mình hay làm với hiệu ứng này. Không biết có nhiều bạn trùng với cách mình làm không nhỉ? laugh

Hi, chúng ta bắt đầu nhé.

Bước 1:

Tạo 1 tài liệu flash mới (Ctrl + N).

Bước 2:

Bạn sử dụng công cụ Text Tool (T) viết 1 đoạn text, hoặc bạn có thể chèn một bức ảnh vào, mình là mình chèn logo của aloflash vào. File > Import > Import To Stage.. (Ctrl + R).

Bạn có thể sử dụng nền flash màu nào cho phù hợp với bức ảnh hay màu text của bạn nhé. Mình chọn màu đen.

Bước 3:

Sử dụng công cụ Selection Tool (V) click vào ảnh của bạn nhấn chuột phải và chọn Copy.

Click chuột ra ngoài vùng nền flash và nhấp chuột phải chọn Pase.

Bước 4:

Ta đã có 2 hình ảnh logo, dùng công cụ Selection Tool (V), click chọn 1 hình logo nhấp chuột phải và chọn Distribute to Layers.

Bước 5:

Bạn hãy xếp 2 bức ảnh cho chúng chồng khít vào nhau, sau đó click vào layer bên trên và nhấn F8chọn Convert to Symbol thành dạng Movie Clip.

Bước 6:

Sau khi đã convert thành Movie Clip ta tiếp tục tạo Effect cho nó. Bằng cách mở bảng Properties (Ctrl + F3). Chọn hiệu ứng Brightness.

Thiết đặt chỉ số cho nó sáng lên 1 chút tầm 40% có lẽ là đẹp :D.

Bước 7:

Tạo 1 layer mới, sử dụng công cụ Rectangle Tool (R) vẽ 1 hình chữ nhật dài như sau:

Convert hình vừa vẽ thành dạng Movie Clip (nhấn F8). Tại frame thứ 40 bạn nhấn F6. ở 2 layer dưới cũng trên frame thứ 40 bạn lần lượt nhấn F5.

Bước 8:

Ở layer 40 bạn dùng công cụ Selection Tool (V) kéo hình chữ nhật qua bên kia hình logo, sau đó click vào bất kỳ chỗ nào giữa frame 1 và 40 ở layer 8 rồi nhấp chuột phải chọn

Bước 9:

Click vào layer 8 nhấp chuột phải chọn Mask.

Ok vậy là ta đã hoàn thành bài tập này rồi, hãy thử nhấn Ctrl + Enter để xem kết quả của bạn nhé.

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

aloflash.com

Download

 

0 Bình luận

Trở về
  • HTML5 Canvas
  • HTML5 Canvas

     The <canvas> element is used to draw graphics, on the fly, on a web page. Draw a red rectangle, a gradient rectangle,...