Bài 20: Câu lệnh tạo thể hiện

Bài 20: Câu lệnh tạo thể hiện

Để thử tạo thể hiện bằng câu lệnh, bạn hãy mở tập tin Flash mới, vẽ một hình ô-van (có màu tô tùy ý nhưng đừng quá đậm), căng khung chọn bao quanh hình vừa vẽ, gõ phím F8, gõ tên Oval và gõ Enter. Bạn biết quá rõ: thao tác vừa thực hiện tạo ra một nhân vật mang tên Oval. Hình ô-van trên sân khấu trở thành một thể hiện của nhân vật Oval. Gõ phím F11 để mở bảng Library, bạn thấy rõ nhân vật Oval được lưu trữ ở đó. Bạn xóa thể hiện của nhân vật Oval trên sân khấu (bấm vào hình ô-van, gõ phím Delete). Ta sẽ tạo ra thể hiện của nhân vật Oval trên sân khấu trống trơn bằng câu lệnh thích hợp. Trước khi làm điều đó, bạn bấm-phải vào tên Oval trong thư viện, chọn Linkage trong trình đơn vừa hiện ra. Trong hộp thoại Linkage Properties, bạn chọn mục Export for ActionScript (hình 1) và bấm OK. Thao tác như vậy nhằm khai báo với Flash rằng: "Khi tạo ra tập tin SWF, nhớ ghi vào đó nhân vật mang tên Oval". Nếu bạn không khai báo như vậy, Flash sẽ không ghi nhân vật Oval vào tập tin SWF với lý do đơn giản: nhân vật Oval không hiện diện trên sân khấu. Một khi trong tập tin SWF không có nhân vật Oval, chương trình được ghi trong SWF không thể tạo ra thể hiện của nhân vật Oval vào lúc chạy.

Có lẽ bạn hơi ngạc nhiên vì chuyện khai báo nêu trên: "Tại sao Flash không tự động ghi mọi nhân vật trong thư viện vào tập tin SWF, dù có hiện diện trên sân khấu hoặc không?". Nghĩ kỹ một chút, bạn thấy ngay sự "khó chịu" của Flash mang đến lợi ích cho bạn. Bạn có thể lưu trữ rất nhiều thứ trong thư viện nhưng tập tin sản phẩm SWF luôn nhỏ gọn, chỉ chứa đựng những thứ thực sự được dùng. Trong trường hợp đang xét, tuy nhân vật Oval không có trong sân khấu nhưng ta cần nó vào lúc chạy, do vậy phải "nói trước" để Flash hiểu rõ ý định của ta. Bạn gõ phím F9 để mở bảng Actions - Frame, nơi dùng để viết chương trình cho khung đầu tiên của thời tuyến chính. Ta dùng thuật ngữ thời tuyến chính (main timeline) để phân biệt với thời tuyến bên trong mỗi thể hiện. Bạn gõ đoạn mã như sau trong bảng Actions - Frame:

attachMovie("Oval", "oval1", 1);

attachMovie("Oval", "oval2", 2);

attachMovie("Oval", "oval3", 3);

Ta dùng ba câu lệnh như trên để tạo ra ba thể hiện của nhân vật Oval có tên là oval1, oval2 và oval3. Đối mục đầu tiên của hàm attachMovie() là tên nhân vật. Đối mục thứ hai là tên của thể hiện. Đối mục thứ ba cho biết thể hiện nằm ở "độ sâu" nào trên sân khấu. Với cách viết như trên, thể hiện oval1 nằm sâu nhất trên sân khấu. Thể hiện oval2 nằm trên oval1 và thể hiện oval3 nằm trên oval2. Ấn Ctrl+Enter để chạy chương trình, bạn thấy trên sân khấu chỉ có một hình ô-van. Đó chính là thể hiện oval3 nằm trên cùng, chồng khít lên hai thể hiện oval2 và oval1. Theo mặc định, hàm attachMovie() tạo ra thể hiện tại điểm gốc (0, 0) trên sân khấu. Muốn thấy rõ cả ba thể hiện, bạn cần xê dịch chúng đôi chút. Trở lại với chương trình đang viết, bạn gõ thêm đoạn mã như sau:

oval1._x += 100; oval1._y += 100;

oval2._x += 160; oval2._y += 100;

oval3._x += 220; oval3._y += 100;

Đoạn mã vừa thêm quy định vị trí cho các thể hiện bằng cách thay đổi trị của biến _x và _y bên trong từng thể hiện. Câu lệnh oval1._x += 100; làm cho hoành độ _x của thể hiện oval1 tăng thêm 100 (xê dịch qua phải 100 điểm ảnh). Câu lệnh oval1._y += 100; làm cho tung độ _y của thể hiện oval1 tăng thêm 100 (xê dịch xuống dưới 100 điểm ảnh). Các câu lệnh tiếp theo làm cho hoành độ _x của thể hiện oval2 và oval3 tăng nhiều hơn oval1. Thử chạy chương trình, bạn có kết quả như hình 2.

Với các thể hiện được tạo ra vào lúc chạy, bạn có thể thay đổi các thuộc tính của chúng một cách bình thường. Chẳng hạn, bạn có thể thay đổi biến _alpha trong từng thể hiện:

oval1._alpha = 50;

oval2._alpha = 50;

oval3._alpha = 50;

Đoạn mã viết thêm như trên làm cho các thể hiện trở nên nửa trong suốt (hình 3).

Bài 21: Sao chép thể hiện

Trong bảng Actions - Frame chứa chương trình ứng với khung 1, bạn gõ thêm một câu lệnh sau đoạn mã đã có:

attachMovie("Oval", "oval1", 1);

attachMovie("Oval", "oval2", 2);

attachMovie("Oval", "oval3", 3);

...

oval2._alpha = 50;

oval3._alpha = 50;

oval3.removeMovieClip();

Câu lệnh vừa thêm dùng để xóa bỏ thể hiện mang tên oval3. Nói đúng hơn, ta gọi hàm removeMovieClip() của oval3 để yêu cầu nó "tự hủy". Ấn Ctrl+Enter để thử chạy chương trình, bạn thấy quả thực thể hiện oval3 mất đi, chỉ còn hai thể hiện oval1 và oval2. Vào lúc chạy chương trình, ta còn có thể tạo ra bản sao của thể hiện nào đó. Bạn thử viết thêm câu lệnh như sau: oval1.duplicateMovieClip("oval3", 3); Câu lệnh vừa viết yêu cầu oval1 tạo ra bản sao của chính nó. Bản sao được đặt tên là oval3 và có độ sâu là 3 (nằm trên oval1 và oval2). Thử chạy chương trình, bạn khó nhận ra sự hiện diện của bản sao vì bản sao oval3 chồng khít lên oval1. Để thấy rõ bản sao oval3, bạn viết thêm câu lệnh như sau để dịch chuyển nó xuống dưới: oval3._y += 100; Bạn thu được kết quả như hình 1 (tên của các thể hiện được ghi vào hình để bạn dễ phân biệt). Bản sao oval3 hoàn toàn giống oval1, cũng nửa trong suốt.

Có thể bạn đang ngờ ngợ: "Lẽ ra nên đặt tên cho bản sao là oval4 vì tên oval3 đã được dùng trước đó?". Đúng là ta đã dùng tên oval3 cho một thể hiện khác, được tạo ra trước. Tuy nhiên, thể hiện đó đã bị xóa bỏ nên bạn có thể dùng lại tên oval3 mà không gây ra xung đột. Nhân tiện, xin... nói nhỏ với bạn rằng nếu ta tạo ra một thể hiện có cùng độ sâu với thể hiện nào đó đã có, thể hiện mới sẽ thay thế thể hiện đã có ở cùng độ sâu. Cho dù bạn không dùng câu lệnh oval3.removeMovieClip(); để xóa bỏ thể hiện oval3, câu lệnh oval1.duplicateMovieClip("oval3", 3); tự động xóa bỏ thể hiện oval3 có trước ở độ sâu là 3 để tạo ra bản sao của oval1 ở độ sâu đó. Nếu không tin, bạn thử vô hiệu hóa câu lệnh oval3.removeMovieClip(); (ghi dấu // ở đầu câu lệnh) và chạy lại chương trình để thấy kết quả vẫn như hình 1. Với thể hiện được tạo ra vào lúc chạy, bạn còn có thể làm cho nó thay hình đổi dạng. Bạn viết thêm hai câu lệnh như sau:

...

//oval3.removeMovieClip();

oval3._y += 100;

Câu lệnh oval3.attachMovie("Oval", "oval1", 1); nhằm tạo ra thể hiện mang tên oval1 của nhân vật Oval bên trong thể hiện oval3 với độ sâu là 1. Bạn chú ý, độ sâu 1 của thể hiện oval1 vừa thêm là độ sâu bên trong oval3. Câu lệnh tiếp theo oval3.oval1._x += 40; dịch chuyển thể hiện vừa thêm qua phải cho dễ phân biệt. Thử chạy chương trình, bạn thấy kết quả như hình 2.

Thể hiện oval3 giờ đây trở thành một thể hiện phức hợp bao gồm hai hình ô-van, trong đó hình ô-van vừa thêm có tên riêng là oval1. Nói rõ hơn, oval3 không còn là thể hiện của nhân vật Oval, mà là một phức hợp chứa đựng hai thể hiện của nhân vật Oval. Thử viết thêm câu lệnh để co chiều rộng của oval3 theo phương ngang (chỉ còn 50%):

...

oval3.attachMovie("Oval", "oval1", 1);

bạn thấy cả hai hình ô-van của oval3 đều bị ép như nhau. Chắc bạn thắc mắc... kinh khủng: "Sao lại dùng tên oval1? Tên oval1 dùng cho thể hiện đầu tiên rồi mà!". Bạn yên tâm, thể hiện oval1 vừa tạo ra nằm bên trong oval3. Nhìn từ bên ngoài oval3, thể hiện vừa thêm có tên là oval3.oval1. Tên oval1 được dùng trong hai phạm vi (scope) khác nhau nên ở đây cũng không có xung đột trong việc đặt tên.