Kar
06-05-2003, 07:32
* Ok, để đền bù cho cái tut Clock lần trước, hôm nay mình xin giới thiệu một cách làm một đoạn MovieClip dùng để show các tấm ảnh. Bạn cũng có thể áp dụng kỹ thuật này trong một vài đoạn phim của bạn để làm một vài demo chẳng hạn.
* Đầu tiên bạn phải có một số “vật liệu” sau:
- Khoảng 6 tấm hình size 40x60 để làm nút nhấn, bạn nên đặt tên là a.jpg, b.jpg... cho dễ nhớ.
- 6 tấm hình khổ 100x150 giống như các tấm hình size nhỏ ở trên được nối lại với nhau thành một “dây hình” (500x150) với trình tự a, b, c, d, e, f. (đặt tên là multipic.jpg)
Rồi, mở Flash lên đi Bây giờ các công việc cần làm là:
- Tạo một đối tượng Graphic tên "show" và import cái "multipic.jpg" vào. Nhớ chỉnh (X, Y) cho nó là (0,0) nha.
- Tạo một MovieClip (MC) tên "mShow" và lôi cái "show" trong thư viện ra. (X,Y) = (0,0).
- Tạo tiếp một MC nữa tên là "allShow" có 3 layer.
+ Layer 1, bạn chèn "mShow" vào với (X,Y) = (1,1). Đặt tên cái MC này trong bảng Instance là "images".
+ Layer 2, bạn vẽ một hình vuông không có đường viền sao cho hình vuông này sẽ che lấp hoàn toàn 1 tấm hình trong dãy hình của "mShow". Tôi vẽ nó với kích thước 103x153 và (X,Y) = (0,0). Như thế, nó sẽ che hoàn toàn tấm hình đầu tiên của "mShow" mà bạn chèn vào ở layer thứ nhất. Bây giờ chuyển layer 2 thành layer mask đi nào, bạn sẽ thấy nó chỉ xuất hiện tấm hình đầu tiên thôi, còn các tấm sau mất sạch, kệ nó, đừng lo.
+ Layer 3, bạn có hay không layer này cũng không quan trọng, nó chỉ là một cái khung bao quanh cho đẹp thôi. Tôi vẽ một cái khung bao quanh hình vuông ở layer 2 (khung này không có fill đâu nhé) với kích thước và tọa độ X,Y như hình vuông nhưng có đường viền 5px.
- Tiếp theo, bạn tạo lần 6 đối tượng Button a, b, c, d, e, f với từng tấm ảnh size 40x60 mà bạn chèn vào. Có thể tùy biến các hiệu ứng cho button bạn thêm đẹp.
- Và bây giờ ra ngoài scence chính đi nào, bạn tạo trong scence chính 2 layer.
+ Layer 1: chứa "allShow" với tọa độ X, Y = (150,30). Đặt tên cho "allShow" trong bảng Instance là "mask".
+ Layer 2: chứa 6 cái Button bạn đã tạo ở trên, bạn đặt ở đâu tùy ý, nhưng nhớ để theo thứ tự cho dễ làm việc.
- Bây giờ đến phần viết code cho bọn nó đây.
+ Đầu tiên bạn viết code cho "allShow" trước: đoạn code thế này:
onClipEvent (load) {
i = images._width/6;
speed = 8;
base_x = images._x;
menu = 0;
}
onClipEvent (enterFrame) {
to_x = base_x-i*menu;
images._x = (to_x-images._x)/speed+images._x;
}
- Sau đó đến các Button, bạn lần lượt bấm vào từng button để đưa đoạn code này vào: (bạn sẽ thay thế giá trị 0, 1, 2... cho từng button. Vd: button a thì mask.menu=0, button b thì mask.menu=1... đến button f thì mask.menu=5.
on (rollOver) {
mask.menu = 0;
}
Chú ý:
- Bạn có thể thay đổi các giá trị của đoạn code cho allShow như dòng i=images.width/6 thành 7,8,9 nếu số lượng hình trong dãy hình của bạn nhiều hơn (đoạn code này chia độ rộng dãy hình bạn thành nhiều đoạn nhỏ ứng với tấm hình bạn đặt trong đó.)
- Hoặc bạn cũng có thể thay đổi tốc độ lướt cho allShow tại dòng speed, giá trị càng nhỏ thì tốc độ càng cao.
- Bạn cũng có thể thay đổi cách click vào button tại dòng on (rollOver) của button. Tất cả điều đó không quan trọng, miễn sao scence của bạn xuất ra đẹp mắt là ok rồi.
- Chúc bạn thành công, nhớ cho mình cái ý kiến của bạn về bài viết. Nếu có gì thắc mắc, mail cho mình.
- Bài viết này có kèm theo file source để ví dụ...
* Đầu tiên bạn phải có một số “vật liệu” sau:
- Khoảng 6 tấm hình size 40x60 để làm nút nhấn, bạn nên đặt tên là a.jpg, b.jpg... cho dễ nhớ.
- 6 tấm hình khổ 100x150 giống như các tấm hình size nhỏ ở trên được nối lại với nhau thành một “dây hình” (500x150) với trình tự a, b, c, d, e, f. (đặt tên là multipic.jpg)
Rồi, mở Flash lên đi Bây giờ các công việc cần làm là:
- Tạo một đối tượng Graphic tên "show" và import cái "multipic.jpg" vào. Nhớ chỉnh (X, Y) cho nó là (0,0) nha.
- Tạo một MovieClip (MC) tên "mShow" và lôi cái "show" trong thư viện ra. (X,Y) = (0,0).
- Tạo tiếp một MC nữa tên là "allShow" có 3 layer.
+ Layer 1, bạn chèn "mShow" vào với (X,Y) = (1,1). Đặt tên cái MC này trong bảng Instance là "images".
+ Layer 2, bạn vẽ một hình vuông không có đường viền sao cho hình vuông này sẽ che lấp hoàn toàn 1 tấm hình trong dãy hình của "mShow". Tôi vẽ nó với kích thước 103x153 và (X,Y) = (0,0). Như thế, nó sẽ che hoàn toàn tấm hình đầu tiên của "mShow" mà bạn chèn vào ở layer thứ nhất. Bây giờ chuyển layer 2 thành layer mask đi nào, bạn sẽ thấy nó chỉ xuất hiện tấm hình đầu tiên thôi, còn các tấm sau mất sạch, kệ nó, đừng lo.
+ Layer 3, bạn có hay không layer này cũng không quan trọng, nó chỉ là một cái khung bao quanh cho đẹp thôi. Tôi vẽ một cái khung bao quanh hình vuông ở layer 2 (khung này không có fill đâu nhé) với kích thước và tọa độ X,Y như hình vuông nhưng có đường viền 5px.
- Tiếp theo, bạn tạo lần 6 đối tượng Button a, b, c, d, e, f với từng tấm ảnh size 40x60 mà bạn chèn vào. Có thể tùy biến các hiệu ứng cho button bạn thêm đẹp.
- Và bây giờ ra ngoài scence chính đi nào, bạn tạo trong scence chính 2 layer.
+ Layer 1: chứa "allShow" với tọa độ X, Y = (150,30). Đặt tên cho "allShow" trong bảng Instance là "mask".
+ Layer 2: chứa 6 cái Button bạn đã tạo ở trên, bạn đặt ở đâu tùy ý, nhưng nhớ để theo thứ tự cho dễ làm việc.
- Bây giờ đến phần viết code cho bọn nó đây.
+ Đầu tiên bạn viết code cho "allShow" trước: đoạn code thế này:
onClipEvent (load) {
i = images._width/6;
speed = 8;
base_x = images._x;
menu = 0;
}
onClipEvent (enterFrame) {
to_x = base_x-i*menu;
images._x = (to_x-images._x)/speed+images._x;
}
- Sau đó đến các Button, bạn lần lượt bấm vào từng button để đưa đoạn code này vào: (bạn sẽ thay thế giá trị 0, 1, 2... cho từng button. Vd: button a thì mask.menu=0, button b thì mask.menu=1... đến button f thì mask.menu=5.
on (rollOver) {
mask.menu = 0;
}
Chú ý:
- Bạn có thể thay đổi các giá trị của đoạn code cho allShow như dòng i=images.width/6 thành 7,8,9 nếu số lượng hình trong dãy hình của bạn nhiều hơn (đoạn code này chia độ rộng dãy hình bạn thành nhiều đoạn nhỏ ứng với tấm hình bạn đặt trong đó.)
- Hoặc bạn cũng có thể thay đổi tốc độ lướt cho allShow tại dòng speed, giá trị càng nhỏ thì tốc độ càng cao.
- Bạn cũng có thể thay đổi cách click vào button tại dòng on (rollOver) của button. Tất cả điều đó không quan trọng, miễn sao scence của bạn xuất ra đẹp mắt là ok rồi.
- Chúc bạn thành công, nhớ cho mình cái ý kiến của bạn về bài viết. Nếu có gì thắc mắc, mail cho mình.
- Bài viết này có kèm theo file source để ví dụ...