Trong bài này, bạn sẽ sử dụng mask layer và màu gradient (màu tô chuyển) để tạo hiệu ứng lấp lánh cho dòng chữ TUỔI TRẺ ONLINE. Các bước thực hành như sau:
1. Chuyển về vùng làm việc mặc định.
Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials để khôi phục vùng làm việc mặc định này và bắt đầu vào bài thực hành 8. (Xem bài thực hành 1 về vùng làm việc)
2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document)
3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document)
Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 008_laplanh.fla
4. Sử dụng Text Tool để viết một đoạn text.
4.1. Bấm chọn vào Text Tool trên thanh công cụ bên phải:
4.2. Nhấp chuột vào chỗ 12.0pt trên Property Inspector:
4.3. Đổi số 12 thành 50 rồi nhấn phím ENTER để chấp nhận giá trị mới:
4.4. Đưa chuột vào hình tam giác bên phải tùy chọn Family:
4.5. Bấm chuột cho xổ xuống bảng liệt kê font chữ và chọn font Arial:
4.6. Đưa chuột vào hình tam giác bên phải tùy chọn Style:
4.7 Bấm chuột cho xổ xuống bảng liệt kê kiểu chữ và chọn Bold:
Bạn thu được kết quả như sau:
4.8. Bạn đưa chuột vào Stage và gõ vào dòng chữ TUỔI TRẺ ONLINE:
4.9. Bấm phí ESCAPE để thoát khỏi khung text, lúc này cả đoạn text đã được chọn và có một khung hình chữ nhật bao quanh.
4.6. Để canh giữa đoạn text này trên Stage, trước hết chọn Edit>Cut từ menu:
Kế đến chọn Edit>Paste in Center từ menu:
Bạn thu được dòng chữ được canh giữa Stage như sau:

5. Sử dụng Rectangle Tool để vẽ hình chữ nhật.

5.1 Bấm vào nút New Layer ở Timeline để thêm một layer:
5.2 Bấm chọn vào Rectangle Tool trên thanh công cụ bên phải (xem thêm phần Tìm hiểu về Rectangle Tool ở cuối bài):
5.3 Bấm chuột vào ô Stroke color để chọn màu viền cho hình chữ nhật:

5.4 Bảng màu hiện ra, bạn bấm chọn vào ô bên phải có dấu chéo màu đỏ. Ô này dùng để thiết lập giá trị không màu cho đường viền, tức là đối tượng được vẽ sẽ không có viền:

5.5 Bấm chuột vào ô Fill color để chọn màu ruột cho hình chữ nhật:
5.6 Bảng màu hiện ra, bạn bấm chọn vào ô dưới cùng bên trái để chọn màu gradient cho màu ruột của hình chữ nhật:
5.7 Đưa chuột vào khoảng giữa Stage, Bấm chuột vào khoảng màu xám và kéo sang phải lấn vào vùng màu trắng như hình vẽ:
5.8 Bạn thu được một hình chữ nhật có màu gradient như sau:

6. Điều chỉnh tọa độ và kích thước của hình chữa nhật. (xem thêm phần Tìm hiểu về Tọa độ và kích thước ở phần sau)
6.1 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:
6.2 Bấm chọn vào hình chữ nhật vừa vẽ.Khi đã được chọn, hình chữ nhật chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều
6.3 Ở Property Inspector bạn bấm vào ô kế bên chữ X và gõ vào giá trị -60:
6.4 Bấm vào ô kế bên chữ Y và gõ vào giá trị 155:
6.5 Bấm vào ô kế bên chữ W và gõ vào giá trị 80:
6.6 Bấm vào ô kế bên chữ H và gõ vào giá trị 80:

Ghi chú: Khi điều chỉnh giá trị W và H cần lưu ý trạng thái của dây xích bên trái:

7. Sử dụng Color Panel để điều chỉnh màu Gradient.
7.1 Chọn Window>Color từ menu:

Color Panel xuất hiện. Lúc này màu ruột của hình chữ nhật đang được thể hiện ở đây với kiểu màu là Linear Gradient ở ô Type. Màu này là màu mặc định được chọn ban đầu với 2 màu gốc là màu trắng ở bên trái và màu đen ở bên phải, thể hiện bằng hai nút đại diện màu gốc phía dưới Color Panel. Bạn sẽ điều chỉnh để bổ sung thêm một màu gốc ở giữa (xem thêm phần Tìm hiểu về màu ở cuối bài).

7.2 Bấm vào nút đại diện màu trắng và kéo vào giữa:

7.3 Đưa chuột vào bên trái khu vực chứa các nút đại diện cho màu gốc, phía dưới chuột xuất hiện một dấu cộng. Bấm chuột để bổ sung thêm một màu mới:

7.4 Bấm đúp chuột vào nút đại diện màu gốc bên trái. Bảng màu xuất hiện để bạn chọn lựa, đồng thời chuột biến thành ống hút màu. Bạn đưa chuột vào chữ I để chọn màu gốc cho nút bên trái:
7.5 Bấm đúp chuột vào nút đại diện màu gốc bên phải. Bảng màu xuất hiện để bạn chọn lựa, đồng thời chuột biến thành ống hút màu. Bạn đưa chuột vào chữ I để chọn màu gốc cho nút bên phải.
Bạn thu được màu Linear Gradient với 3 màu gốc: 2 màu xanh ở hai bên và 1 màu trắng ở giữa.
7.6 Color Panel không còn cần đến nữa, bạn bấm vào nút x ở góc trên bên phải để đóng lại:

8. Chuyển hình chữ nhật thành symbol. Lúc này hình chữ nhật vẫn đang được chọn. Bạn chọn Modify>Convert to Symbol…(hoặc bấm phím tắt F8) để chuyển thành symbol: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> Hộp thoại Convert to Symbol xuất hiện. Bạn gõ vào tên hinh chu nhat ở ô Name, chọn Type là Movie Clip và bấm OK để đóng hộp thoại lại. <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 9. Tạo motion tween cho hình chữ nhật di chuyển sang phải. 9.1 Rê chuột vào symbol hình chữ nhật vừa được tạo ra. Bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Creat Motion Tween: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 9.2. Flash tạo một motion tween ở Layer 2 của hình chữ nhật với 24 frame (tương ứng với 1 giây), đồng thời di chuyển Playhead đến frame số 24: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 9.3. Bạn đưa chuột vào hình chữ nhật, giữ phím Shift và kéo hình chữ nhật sang phải như hình minh họa: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 9.4. Bạn sẽ bổ sung frame để hiệu ứng kéo dài 2 giây. Rê chuột vào keyframe 24 đến khi chuột biến thành mũi tên hai chiều: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 9.5. Kéo chuột đến frame 48 và nhả chuột ra: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 9.6. Keyframe từ frame 24 được chuyển đến frame 48: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 10. Sử dụng mask layer để tạo hiệu ứng lấp lánh. 10.1 Layer 1 chứa dòng chữ TUỔI TRẺ ONLINE ở keyframe 1. Bạn bấm chọn frame 48: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 10.2 Bấm phím F5 để bổ sung frame: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 10.3 Đưa chuột kéo Layer 1 lên phía trên Layer 2: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 10.4 Đưa chuột vào Layer 1, bấm phím phải chuột cho xuất hiện menu ngữ cảnh và chọn Mask: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 10.5 Hiệu ứng mask được kích hoạt. Cả hai layer được khóa lại. <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 10.6 Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> Kết quả thu được là khung chữ nhật với màu gradient chạy qua màn hình từ trái sang phải với dòng chữ xuất hiện thoáng qua. Bạn sẽ bổ sung một layer với dòng chữ TUỔI TRẺ ONLINE cố định phía dưới để hiệu ứng đạt được tốt hơn. 11. Bổ sung layer để tăng hiệu quả của hiệu ứng lấp lánh. 11.1 Bấm vào nút X để đóng flash movie đang xem. Bấm vào biểu tượng ổ khóa của Layer 1 để mở khóa: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 11.2 Đưa chuột vào dòng chữ TUỔI TRẺ ONLINE. Bấm phím phải chuột để xuất hiện menu ngữ cảnh và chọn Copy: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 11.3 Bấm chuột ra vùng màu trắng để bỏ chọn. Bấm phím phải chuột vào một ví trí không trùng với các đối tượng trên Stage cho xuất hiện menu ngữ cảnh và chọn Paste in Place: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 11.4 Bạn thu được một dòng chữ TUỔI TRẺ ONLINE thứ hai nằm chồng ngay trên dòng chữ cũ. Bạn bấm phím phải chuột vào dòng chữ cho xuất hiện menu ngữ cảnh và chọn Distribute to Layers: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 11.5. Bạn thu được layer TUỔI TRẺ ONLINE nằm ngay trên Layer 2: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 11.6 Bạn nắm kéo layer TUỔI TRẺ ONLINE xuống dưới Layer 2, chú ý kéo chệch sang bên trái để layer này thoát ra ngoài, không bị ảnh hưởng của hiệu ứng mask: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> Bạn thu được kết quả như hình minh họa: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> 11.8 Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả: <table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table> Một số bài tập gợi ý - Thực hành lại bài trên với dòng chữ có màu khác. - Thực hành lại bài trên với màu gradient khác, hoặc bổ sung thêm nhiều màu gốc hơn. - Thực hành lại bài trên với hình chữ nhật di chuyển theo chiều ngược lại hoặc kết hợp di chuyển sang phải rồi sang trái. - Thực hành lại bài trên với dòng chữ cuối lệch vài pixel so với dòng chữ ban đầu. <table style="border-collapse: separate;" align="center" border="0" cellpadding="5" cellspacing="5" width="95%"><tr><td bgcolor="#cfe6f9" valign="center"> Mời bạn đọc theo dõi tiếp phần giới thiệu Rectangle Tool, những kiến thức về Tọa độ và kích thước ở bài sau</td></tr></table>