Bài 22: Nhân vật trống rỗng

Bài 22: Nhân vật trống rỗng

Bạn có thể tạo ra bản thân nhân vật vào lúc chạy, không cần tạo trước nhân vật như đã làm. Đó là loại nhân vật trống rỗng (empty movie clip) chưa có hình thù gì cả vào lúc được tạo ra. Sau khi tạo ra nhân vật như vậy, bạn có thể dùng các câu lệnh thích hợp để vẽ vời "chân dung" cho nó. Bạn cũng có thể đưa vào nhân vật trống rỗng các thể hiện của nhân vật khác, tạo thành nhân vật phức hợp. Trong thực tế, người ta thường tạo ra nhân vật trống rỗng và đưa vào đó các hình ảnh được tải xuống từ máy chủ (khi việc tải xuống hoàn tất). Điều này được thực hiện vào lúc chương trình đang chạy, không đòi hỏi các hình ảnh được tải xuống ngay khi khởi động, nhờ vậy rút ngắn đáng kể thời gian khởi động của chương trình. Bạn ấn Ctrl+A và gõ phím Delete để xóa mọi câu lệnh đã viết. Bạn viết đoạn mã mới như sau để thử tạo nhân vật trống rỗng:

createEmptyMovieClip("myOvals", 1);

myOvals._x = 100;

myOvals._y = 100;

for(i = 1; i < 6; i++) {

}

Câu lệnh createEmptyMovieClip("myOvals", 1); tạo ra một thể hiện của nhân vật trống rỗng ở thời tuyến chính, có tên là myOvals và được đặt ở độ sâu là 1. Hai câu lệnh tiếp theo quy định hoành độ _x và tung độ _y của thể hiện đó (dù nó chưa "mặt mũi"). Vòng lặp for có nhiệm vụ lặp lại năm lần việc tạo thể hiện của nhân vật Oval bên trong myOvals. Nhớ lại cách dùng hàm attachMovie(), bạn hiểu ngay: các thể hiện của nhân vật Oval có tên là oval1,..., oval5 và được đặt ở các độ sâu từ 1 đến 5 (các trị khả dĩ của biến i) bên trong myOvals.. Để phân biệt dễ dàng các thể hiện oval1,..., oval 5 bên trong myOvals, ta cần làm cho chúng có vị trí khác nhau. Bạn viết thêm như sau bên dưới vòng lặp for:

myOvals.oval2._x = 80;

myOvals.oval3._x = 120;

myOvals.oval4._x = 160;

myOvals.oval5._x = 200;

Năm câu lệnh vừa nêu xê dịch các thể hiện qua phải. Các thể hiện có hoành độ _x khác nhau. Bạn chú ý, biểu thức myOvals.oval1._x dùng để diễn tả hoành độ _x của thể hiện oval1 bên trong thể hiện myOvals. Nếu bạn viết đơn giản oval1._x, Flash sẽ không thực hiện được yêu cầu của bạn vì ở thời tuyến chính không có thể hiện nào tên là oval1. Thử chạy chương trình, bạn thấy kết quả như hình 1.

Thay vì dùng đến năm câu lệnh để thay đổi hoành độ _x của năm thể hiện oval1,...,oval5, bạn viết lại theo cách khác, lịch lãm hơn, chỉ dùng một câu lệnh trong vòng lặp for:

...

for(i = 1; i < 6; i++) {

  eval("myOvals.oval" + i)._x += i*40;

}

/*

myOvals.oval1._x = 40;

myOvals.oval2._x = 80;

myOvals.oval3._x = 120;

myOvals.oval4._x = 160;

myOvals.oval5._x = 200;

Câu lệnh vừa thêm trong vòng lặp dùng hàm eval(), một hàm mà bạn chưa từng biết. Hàm eval() chuyển đổi một chuỗi thành tham chiếu (reference). Chẳng hạn, khi trị số của i là 1, câu lệnh vừa thêm tương đương với câu lệnh eval("myOvals.oval" + 1)._x += 40; hoặc myOvals.oval1._x += 40;. Nhờ có hàm eval(), Flash hiểu được rằng chuỗi "myOvals.oval" + 1 dùng để trỏ đến thể hiện oval1 bên trong thể hiện myOvals: myOvals.oval1. Nhờ hàm eval(), bạn có thể tạo ra biến mới với tên tùy ý vào lúc chạy. Điều này là một thế mạnh của Flash, giúp bạn đưa ra những quyết định linh hoạt vào lúc chạy chương trình, chứ không phải vào lúc viết chương trình. Bạn hãy viết tiếp một câu lệnh nữa ở cuối chương trình để thay đổi thuộc tính _alpha của thể hiện myOvals: myOvals._alpha = 50; Chạy lại chương trình, bạn thấy kết quả như hình 2. Việc thay đổi thuộc tính _alpha của myOvals tác động lên cả năm thể hiện oval1,...,oval5 của nhân vật Oval bên trong myOvals, làm cho chúng đều trở nên nửa trong suốt (thuộc tính _alpha của các thể hiện oval1,...,oval5 đều trở thành 50). Rõ ràng, việc gộp các thể hiện riêng lẻ vào một thể hiện duy nhất giúp bạn thay đổi đồng loạt thuộc tính của chúng.

Bài 23: Gán hành vi vào thể hiện

Đối với thể hiện được tạo ra vào lúc chạy chương trình, cách quy định hành vi của thể hiện có khác. Trước khi chạy, thể hiện không có trên sân khấu để bạn bấm chọn. Do vậy, bạn chỉ có thể gán hàm xử lý tình huống vào thể hiện trong lúc chạy. Bạn hãy mở lại tập tin FLA dùng để thử nghiệm việc tạo các thể hiện vào lúc chạy, mở bảng Actions - Frame, xóa hết đoạn mã hiện có ứng với khung 1 và viết đoạn mã thử nghiệm mới như sau:

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

oval1._x = 200;

oval1._y = 100;

oval1.onMouseDown = function() {

  this._xscale += 5;

}

Ba câu lệnh đầu tiên trong đoạn mã vừa viết rất quen thuộc với bạn, chúng dùng để tạo ra thể hiện oval1 từ nhân vật Oval và quy định tọa độ cho thể hiện đó. Câu lệnh cuối cùng quy định hàm xử lý tình huống onMouseDown của thể hiện oval1. Đó là hàm được gọi khi người dùng nhấn phím chuột. Như bạn thấy, "quy định hàm xử lý tình huống onMouseDown của thể hiện oval1" ở đây nghĩa là viết ra một định nghĩa hàm cụ thể và gán định nghĩa dó cho hàm onMouseDown của oval1. Trước phép gán như vậy, hàm onMouseDown của oval1 chưa có nội dung gì cả. Sau phép gán, hàm onMouseDown của oval1 có nhiệm vụ cộng thêm 5 cho thuộc tính _xscale của oval1. Thử chạy chương trình và bấm chuột nhiều lần vào đâu đó trong sân khấu, bạn thấy hình ô-van của ta phình ra theo phương ngang do thuộc tính _xscale của nó tăng dần mỗi lần bấm chuột. Bạn để ý, ta đã viết this._xscale để chỉ rõ thuộc tính _xscale của thể hiện đang xét. Nếu bạn chỉ viết _xscale, Flash sẽ hiểu đó là thuộc tính _xscale của sân khấu vì ta đang viết chương trình cho khung 1 của thời tuyến chính. Khi đó, mỗi lần bấm chuột, sân khấu (cùng nội dung của nó) phình ra từ điểm mốc là góc trên, bên trái (gốc tọa độ của sân khấu). Bạn hãy viết thêm vài câu lệnh như sau:

oval2._x = 200;

oval2._y = 150;

oval2.onMouseDown = oval1.onMouseDown;

Đoạn mã vừa thêm tạo ra một thể hiện nữa của nhân vật Oval, đặt tên là oval2, nằm trên oval1 (độ cao là 2). Câu lệnh cuối gán hàm onMouseDown của oval1 cho hàm onMouseDown của oval2. Chạy lại chương trình và bấm chuột nhiều lần, bạn thấy cả hai hình ô-van đều phình ra như nhau. Điều này nghĩa là khi muốn hai thể hiện có hành vi như nhau, bạn không cần lặp lại định nghĩa hàm xử lý tình huống cho thể hiện thứ hai, chỉ cần cho hai thể hiện dùng chung một hàm xử lý tình huống. Chú ý rằng khi sao chép một thể hiện, bạn thu được thể hiện mới với các thuộc tính giống hệt bản gốc nhưng hành vi của thể hiện không được sao chép. Bạn có thể kiểm tra ngay điều đó bằng cách viết thêm:

oval1.duplicateMovieClip("oval3", 3);

oval3._y += 100;

oval3.onMouseDown = oval1.onMouseDown;

trong đó, ta gọi hàm duplicateMovieClip của oval1 để tạo ra một bản sao của oval1, lấy tên là oval3, có độ cao là 3 (nghĩa là nằm trên oval2). Câu lệnh cuối cho phép oval3 dùng chung hàm onMouseDown với oval1. Thử chạy chương trình, bạn thấy cả ba hình ô-van (oval1, oval2, oval3) đều phình ra như nhau khi bấm chuột (hình 1). Trở lại với đoạn mã đang xét, bạn ghi thêm dấu // trước câu lệnh cuối (để vô hiệu hóa câu lệnh đó). Chạy lại lần nữa và bấm chuột nhiều lần, bạn thấy oval3 không hề thay đổi (hình 2). Điều này chứng tỏ việc sao chép một thể hiện không bao gồm hành vi của thể hiện.

Trong bảng Actions - Frame, bạn hãy bấm nút Replace  để mở hộp thoại Replace. Trong ô Find what, bạn gõ onMouseDown. Trong ô Replace with, bạn gõ onMouseUp (hình 3). Bấm Replace All, bạn thấy tất cả tên hàm onMouseDown trong chương trình của ta được thay thế bằng onMouseUp. Thử chạy chương trình, bạn thấy các hình ô-van chưa phình ra khi nhấn phím chuột, chỉ phình ra khi bạn buông phím chuột.

Theo cách tương tự, bạn thử lần lượt khảo sát hai hàm xử lý tình huống onPress và onRelease. Hai hàm này tương tự hai hàm onMouseDown và onMouseUp nhưng có điểm khác biệt quan trọng: chỉ được gọi khi bạn bấm trúng thể hiện. Hai hàm onPress và onRelease rất cần thiết cho bạn sau này.