Hướng dẫn sử dụng Macromedia Flash mx

Bài 24: Tạo nút bấm

Bạn hãy mở tập tin FLA mới trong cửa sổ Flash để thực hiện ý định nêu trên. Trước hết, cần tạo một nhân vật đóng vai nút bấm. Bạn ấn Ctrl+F8 (hoặc chọn Insert > New Symbol). Khi hộp thoại Create New Symbol hiện ra, bạn gõ Button để đặt tên cho nhân vật mới. Bấm nút Advanced, bạn thấy hộp thoại được mở rộng, bày ra những quy định bổ sung (hình 1). Trong phần Linkage, bạn bật ô duyệt Export for ActionScript. Chắc bạn còn nhớ, nhờ quy định này, Flash sẽ đưa nhân vật đang xét vào tập tin SWF dù cho nhân vật không hiện diện trên sân khấu lúc biên dịch. Tuy rằng ta định tạo ra nút bấm, bạn đừng chọn Button ở phần Behavior vì lựa chọn đó nhằm tạo ra nút bấm theo cách cũ, tương thích với phiên bản trước của Flash. Bạn cứ giữ nguyên lựa chọn Movie clip.

Bấm OK để đóng hộp thoại Create New Symbol, bạn bắt đầu việc vẽ hình để làm nút bấm. Bạn để ý dấu thập nhỏ trên nền trắng trơn, đó là điểm mốc của nhân vật. Bạn có thể xem đó là góc trên, bên trái của nút bấm. Thử hình dung ta cần làm một "nút khởi động" gì đó màu xanh lá, bạn bấm vào ô Fill Color ở hộp công cụ và chọn màu xanh lá trên bảng màu . Bạn gõ phím R (hoặc chọn Rectangle Tool ), trỏ vào dấu thập, giữ phím trái của chuột, căng ra một hình khung. Hình khung vừa vẽ tự động được tô màu xanh đã chọn. Ta hãy ghi chữ Start màu đen lên hình khung xanh lá. Bạn bấm vào Fill Color, chọn màu đen, Để ghi chữ, bạn gõ phím T (hoặc chọn Text Tool ), trỏ vào đâu đó gần hình khung xanh lá, căng ra một khung chữ và gõ Start. Bạn ấn Ctrl+F3 để mở bảng Properties. Trong bảng Properties, bạn chọn Static text (khung chữ tĩnh) trong ô Text Type , điều chỉnh cỡ chữ ở ô Font Size . Bạn bấm vào đâu đó bên ngoài khung chữ để tỏ ý kết thúc việc ghi chữ, gõ phím V (hoặc chọn Selection Tool ) để lấy công cụ chọn, kéo dòng chữ Start, đặt lên hình khung xanh lá sao cho cân xứng. Bạn có thể gõ các phím mũi tên nếu cần tinh chỉnh vị trí của dòng chữ Start. Bạn bấm vào Scene1  để kết thúc việc tạo hình cho nhân vật Button. Muốn biết chắc nhân vật Button đã được tạo ra trong thư viện hay chưa, bạn gõ phím F11 để mở xem bảng Library. Bạn gõ phím F9 để mở bảng Actions - Frame và viết chương trình (cho khung 1) như sau:

attachMovie("Button", "button1", 1);

button1._x = 200;

button1._y = 200;

button1.onPress = function() {

  trace("Bạn đã bấm nút.");

}

Đoạn mã nêu trên nhằm tạo ra thể hiện button1 của nhân vật Button, quy định vị trí của button1 và định nghĩa hàm onPress của button1. Hàm onPress chỉ làm một việc đơn giản: hiển thị thông báo trong bảng Output. Ấn Ctrl+Enter để chạy thử, bạn thấy nút bấm của ta hoạt động đúng như dự định: mỗi lần bấm nút đó, thông báo Bạn đã bấm nút xuất hiện trong bảng Output. Có lẽ bạn từng thấy các loại nút bấm thay đổi hình dạng hoặc màu sắc khi được trỏ vào hoặc khi được bấm. Ta cũng làm được điều đó. Bạn hãy bấm kép vào nút bấm  trong bảng Library để bắt đầu chỉnh sửa. Nếu nút bấm đang ở tình trạng "được chọn", bạn bấm bên ngoài nút để "thôi chọn". Bạn bấm vào khung 1 trong thời tuyến của nút bấm. Trong bảng Actions - Frame, bạn ghi câu lệnh stop(); cho khung 1. Xong, bạn bấm vào ô có dòng chữ trong bảng Properties và gõ _up để đặt tên cho khung 1. Bạn bấm-phải vào khung 2 ở bảng Timeline, chọn Insert Keyframe nhằm tạo ra khung chốt thứ hai. Bạn ghi câu lệnh stop(); và đặt tên _over cho khung 2. Bạn bấm vào hình khung xanh lá, chọn màu xanh sáng hơn (hình 2) ở ô Fill Color . Tương tự, bạn tạo thêm khung chốt thứ ba, ghi câu lệnh stop(); và đặt tên cho khung 3 là _down. Bạn chọn màu xanh lá đậm cho hình khung và chọn màu vàng cho dòng chữ Start (hình 2). Ấn Ctrl+Enter để chạy thử, bạn thấy nút Start sáng lên khi được trỏ vào. Bấm nút Start, bạn thấy nó "chớp" một phát, trông thật... điệu nghệ.

Bài 25: Nút bấm khởi động

Hình ảnh ở khung _up chính là diện mạo của nút bấm ở trạng thái bình thường. Khi bạn trỏ vào nút bấm, Flash hiển thị hình ảnh ở khung _over của nút bấm. Khi bạn bấm nút, Flash chuyển qua khung _down của nút bấm. Ở mỗi khung _up, _over và _down, ta đều phải viết câu lệnh stop(); để ra lệnh ngừng, ngăn không cho hiển thị khung tiếp theo. Nếu không làm như vậy, các khung  _up, _over và _down sẽ tự động được hiển thị liên tiếp, lặp đi lặp lại vào lúc chạy, khiến bạn thấy nút bấm nhấp nháy liên tục. Ta hãy dùng nút bấm Start hiện có làm nút khởi động trong trò chơi "bắt sao biển" trước đây. Nhờ nút khởi động Start, người chơi có thể chủ động bắt đầu trò chơi khi họ sẵn sàng (hình 1). Khi người chơi bị cá nóc bắt được, trò chơi cần kết thúc với trạng thái tĩnh. Muốn chơi tiếp, người chơi lại bấm nút Start. Nhờ vậy, người chơi kịp "hoàn hồn" để xem điểm số mà mình đạt được.

Nếu đang mở tập tin chứa nút bấm Start, bạn hãy đóng tập tin đó. Bạn mở lại tập tin FLA của trò chơi "bắt sao biển" và ấn Ctrl+Shift+O (hoặc chọn File > Import > Open External Library). Trong hộp thoại Open as Library vừa hiện ra, bạn tìm tập tin FLA chứa nút bấm Start và bấm kép vào nó. Thao tác như vậy mở ra cửa sổ Library của tập tin đã chọn, trong đó có nút bấm Start cần dùng. Trong thời tuyến chính, bạn chọn khung 1 của lớp Layer 1 và mở bảng Actions - Frame (gõ phím F9). Bạn viết thêm như sau vào bên dưới đoạn mã hiện có:

play = false;

attachMovie("Button", "button1", 1);

button1._x = 440;

button1._y = 10;

button1.onPress = function() {

  play = true;

  star.score = 0;

}

Để tạo ra nút bấm Start (nhân vật Button) trên sân khấu, bạn dùng hàm attachMovie đã biết và quy định tọa độ thích hợp cho nút bấm. Biến play đóng vai trò "cờ hiệu", quy định trạng thái của trò chơi. Lúc đầu, ta gán trị false cho biến play. Trong hàm onPress của nút Start (hàm được gọi khi bấm nút Start), ta gán trị true cho biến play và cho điểm số trở lại trị 0. Điểm số được lưu giữ bởi biến star.score, tức biến score bên trong sao biển có tên là star. Tiếp theo, bạn cần chỉnh sửa hành vi của sao biển và cá nóc sao cho chúng "án binh bất động" khi biến play có trị là false. Bạn bấm vào đâu đó trên sân khấu, rồi bấm vào sao biển, quan sát chương trình của nó trong bảng Actions - Movie Clip và viết thêm vào hàm onClipEvent(mouseDown) như sau:

onClipEvent(mouseDown) {

  if(!_root.play)

    return;

  if(hitTest(_root._xmouse, _root._ymouse, true)) {

...

...

onClipEvent(enterFrame) {

  if(!_root.play)

    return;

  caught = false;

  if(_x + step < _root._xmouse)

...

  else if(caught == true) {

    //_root.star.score = 0;

    _root.play = false;

    step = 5;

  }

}

Tương tự như trường hợp sao biển, câu lệnh điều kiện if vừa thêm nhằm kiểm tra biến play ở thời tuyến chính: nếu biến play có trị là false, hàm onClipEvent(enterFrame) kết thúc ngay. Khi biến play có trị là true, cá nóc mới rượt theo con trỏ chuột. Khi cá nóc bắt được con trỏ chuột, ta gán trị false cho biến play để trò chơi chuyển qua trạng thái tĩnh. Ngoài ra, câu lệnh _root.star.score = 0; được vô hiệu hóa để biến star.score giữ nguyên điểm số mà người chơi vừa đạt được, giúp họ đọc điểm dễ dàng hơn. Biến star.score chỉ trở lại trị 0 khi người chơi bấm nút Start để chơi lần nữa. Bạn ấn Ctrl+Enter để chạy chương trình, xem thử những sửa đổi vừa thực hiện có hiệu lực ra sao nha.