Macromedia Flash - Hiệu ứng bong bóng nước

Theo dõi tỉ mỉ bài hướng dẫn chi tiết này bạn sẽ biết cách tạo một hiệu ứng cực kỳ độc đáo và ngộ nghĩnh với những hình ảnh bong bóng nước bằng sử dụng Motion Guide. Bạn sẽ không cần dùng tới bất kỳ đoạn mã Action Script nào trong bài này mà vẫn tạo được hình ảnh như sau:

Bước 1

Tạo một file Flash mới. Nhấn phím Ctrl + J trên bàn phím (Document Properties) và thiết lập độ rộng của file tùy ý bạn. Chọn màu nền là #64CDFF và thiết lập Frame rate là 28, sau đó kích OK.

Bước 2

Chọn công cụ Oval Tool (O) và vào phần Properties Panel (Ctrl + F3) ở dưới, chọn các tùy chọn sau:

- Nhập màu viền là #021E3E 

- Màu nền cho hình vẽ chọn tùy ý (Fill color) 

- Chọn nét vẽ là Solid với độ dày là 1.

Sau khi chọn xong các tùy chọn trê, vẽ một hình tròn có kích thước 20x20 px (xem hình sau)

Bước 3

Chọn công cụ Selection Tool (V) và chỉ chọn phần Fill Color (phần màu nét vẽ chọn ô vuông trắng gạch chéo đỏ). Kích vào phần vẽ màu nền, mở Color Mixer Panel (Window > Color Mixer) và chọn theo các thông số sau:

- Kích chọn biểu tượng xô màu để định dạng cho màu nền (Fill color) 

- Trong phần Type chọn Linear 

- Kích lên ô vuông màu nhỏ ở phía bên trái của thanh trượt màu và chọn màu là #FFFFFF. Thuộc tính Alpha đặt là 30% 

- Kích lên ô vuông màu nhỏ thứ hai ở phía bên phải của thanh trượt màu và chọn màu là #0066CC, nhưng thay đổi thuộc tính Alpha là 0% (tương đương với màu trong suốt)

Sau khi chọn xong bạn sẽ có được màu hình tròn như sau

Bước 4 

Sử dụng các công cụ của Flash để vẽ một hình shape nhỏ màu trắng trên bong bóng như hình dưới đây

Bước 5 

Chọn cả bong bóng và hình shape vừa vẽ và nhấn phím F8 (Convert to Symbol) để chuyển đổi hình bong bóng sang dạng Graphic Symbol.

Bước 6

Chọn công cụ Selection Tool (V) và kích đúp vào layer 1 để đổi tên nó thành bubble.

Bước 7 

Chọn layer bubble, nhấn chuột phải lên tên layer và chọn Add Motion Guide (xem hình dưới).

Bước 8 

Chọn layer Guide vừa tạo xong, sử dụng công cụ Pencil Tool (Y) và vẽ một đường lộ trình di chuyển cho bong bóng như sau

Bước 9 

Kích lên frame 150 của layer Guide và nhấn phím F5

Bước 10 

Trở lại frame đầu tiên của layer bubble và đặt bong bóng vào điểm đầu tiên của lộ trình đã vẽ (như hình dưới)

Bước 11

Kích vào frame 150 của layer bubble và nhấn phím F6. Đặt bong bóng vào điểm cuối của lộ trình như hình sau:

Bước 12 

Kích chuột phải lên bất kỳ vị trí nào trong vùng màu xám giữa frame 1 và 150 của layer bubble và chọn Create Motion Tween từ menu xuất hiện. Xem hình sau

Vậy là bạn đã tạo xong lộ trình cho bong bóng đầu tiên. Giờ hãy tạo thêm một vài bong bóng nữa với nhiều lộ trình di chuyển khác nhau tương tự như đã tạo ở trên. Sau khi tạo xong các bong bóng, hãy import vào một bức ảnh nền phù hợp và chạy thử sản phẩm xem sao.

Download file nguồn tại đây.