tiện ích online

TIỆN ÍCH ONLINE

Tin tức cập nhật

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • thống kê truy cập

    free counters

    HỌP MẶT VIOLET OPEN HÈ 2017

    Gốc > Lập trình Flash >

    Bài 58: Đối tượng Stage

    Đối tượng Stage
    [Hoàng Ngọc Giao]

    Nếu bạn mở trò chơi điền từ bằng trình duyệt (trong trình duyệt, ấn Ctrl+O và tìm chọn tập tin SWF thu được sau khi biên dịch trò chơi điền từ), bạn sẽ thấy rằng sân khấu cùng mọi chi tiết của trò chơi tự động co dãn khi bạn co dãn cửa sổ trình duyệt (hình 1). Đây là một lợi thế của trò chơi Flash. Tuy nhiên, không phải lúc nào ta cũng mong muốn điều này, chẳng hạn như khi bạn đã dầy công sắp xếp các chi tiết trong chương trình của mình để có bố cục đẹp mắt, thích hợp với kích thước cố định nào đó.

     
     
    Trong thực tế, tập tin SWF thường được dùng trong trang mạng (tập tin HTML). Trong đó, kích thước của sân khấu được quy định cụ thể. Thử chọn File > Publish trong Flash, bạn thu được ngay tập tin HTML trong cùng thư mục với tập tin SWF. Trong tập tin HTML, ta có thẻ lệnh <embed /> liên kết với tập tin SWF và quy định cụ thể kích thước sân khấu (không phụ thuộc vào kích thước cửa sổ trình duyệt):
    <embed src="Words.swf" width="550" height="400" ... />
    Tuy nhiên, nếu sửa đổi quy định về kích thước sân khấu trong thẻ lệnh <embed />, mọi chi tiết trong sân khấu sẽ co dãn theo. Nếu "kiên quyết" không cho phép sân khấu co dãn theo quy định kích thước trong thẻ lệnh <embed />, trong Flash bạn chọn File > Publish Settings. Trong hộp thoại Publish Settings vừa hiện ra, bạn chọn thẻ HTML, bấm vào ô Scale, chọn No scale (hình 2).
     
    Lựa chọn mặc định trong ô Scale là Show all. Ngoài ra, còn các lựa chọn khác: No borderExact fit. Ý nghĩa của các lựa chọn được trình bày ở bảng 1. Các lựa chọn có sự khác nhau về khả năng co dãn của sân khấu, khả năng bị cắt xén của sân khấu và việc bảo toàn tỉ lệ rộng:cao của sân khấu.
    Bảng 1 - Ý nghĩa của các lựa chọn cho thuộc tính Scale.

    Lựa chọn

    Co dãn

    Cắt xén

    Bảo toàn tỉ lệ

    Show all

    Không

    Exact fit

    Không

    Không

    No border

    No scale

    Không

    Sau khi chọn No scale trong ô Scale của hộp thoại Publish Settings, bạn bấm nút Publish. Trong tập tin HTML được tạo ra, thẻ lệnh <embed /> có thêm thuộc tính scale như sau:
    <embed src="Words.swf" scale="noscale" .../>
    Khi đó, dù kích thước sân khấu được quy định lại trong thẻ lệnh <embed />, sân khấu vẫn giữ kích thước nguyên thủy do bạn quy định trong Flash.
    Thay vì điều chỉnh thuộc tính scale trong thẻ lệnh <embed />, bạn có thể quy định tương tự ngay trong chương trình của mình, bằng cách thay đổi thuộc tính scaleMode của đối tượng Stage biểu diễn sân khấu (Flash tự động tạo ra một đối tượng duy nhất thuộc lớp Stage để ghi nhớ các thuộc tính của sân khấu).
    Thuộc tính scaleMode của đối tượng Stage có thể nhận các trị khác nhau: "showAll", "exactFit", "noBorder", "noScale". Quy định đối với thuộc tính scaleMode của đối tượng Stage có hiệu lực lấn át quy định ở thuộc tính scale của thẻ lệnh <embed />.
    Để hiểu rõ ý nghĩa của các trị khả dĩ của thuộc tính scaleMode, bạn hãy mở bảng Actions - Frame của khung 1, thử viết thêm đoạn mã như sau vào cuối chương trình hiện có:

    var sw = true;

    speaker.onPress = doPress;

    function doPress() {

    ...

    }

     

    createTextField("tf", 1, 250, 10, 100, 40);

    tf.textColor = 0xFFFFFF;

    tf.text = Stage.scaleMode;

    Key.addListener(tf);

    var mode = 0;

    tf.onKeyDown = function() {

      if(Key.getCode() == Key.DOWN) {

        mode--;

      }

      else if(Key.getCode() == Key.UP) {

        mode++;

      }

      setScaleMode();

    }

     

    function setScaleMode() {

      if(mode > 3)

        mode = 0;

      else if(mode < 0)

        mode = 3;

      switch(mode) {

        case 0:

          tf.text = Stage.scaleMode = "showAll";

          break;

        case 1:

          tf.text = Stage.scaleMode = "noBorder";

          break;

        case 2:

          tf.text = Stage.scaleMode = "exactFit";

          break;

        case 3:

          tf.text = Stage.scaleMode = "noScale";

          break;

      }

    }

    Đoạn mã viết thêm nhằm cho phép ta dùng phím mũi tên chỉ lên và phím mũi tên chỉ xuống để chuyển bật qua lại giữa các trị khả dĩ của thuộc tính scaleMode của đối tượng Stage (thuộc tính Stage.scaleMode). Trị của thuộc tính Stage.scaleMode được hiển thị ngay trên sân khấu để bạn dễ theo dõi.
    Trước hết, câu lệnh createTextField("tf", 1, 250, 10, 100, 40); nhằm tạo ra khung chữ với tư cách là một thể hiện của nhân vật TextField trên sân khấu có tên là tf (bạn có thể đặt tên tùy ý). Khung chữ chỉ được tạo ra vào lúc chạy chương trình.
    Đối mục thứ hai của hàm createTextField là độ sâu (depth). Ta quy định độ sâu là 1. Hai đối mục tiếp theo (250, 10) là hoành độ x, tung độ y của góc trên, bên trái của khung chữ. Hai đối mục sau cùng (100, 40) là chiều rộng và chiều cao của khung chữ.
    Câu lệnh tf.textColor = 0xFFFFFF; nhằm quy định màu chữ là màu trắng. Nếu bạn dùng màu nền nhạt, bạn viết tf.textColor = 0x000000; để quy định màu chữ là màu đen. Ta sẽ tìm hiểu ý nghĩa của trị biểu diễn màu sắc trong bài sau.
    Câu lệnh tf.text = Stage.scaleMode; nhằm quy định nội dung của dòng chữ là trị hiện hành của thuộc tính Stage.scaleMode.
    Câu lệnh Key.addListener(tf); nhằm làm cho khung chữ "lắng nghe" tình huống gõ phím. Khung chữ xử lý tình huống gõ phím ra sao được thể hiện bới hàm xử lý tình huống onKeyDown.
    Trong hàm xử lý tình huống onKeyDown, nếu phím được nhấn là phím mũi tên lên hoặc xuống, ta tăng hoặc giảm trị của biến mode, rồi gọi hàm setScaleMode.
    Hàm setScaleMode có nhiệm vụ thay đổi trị của thuộc tính Stage.scaleMode và hiển thị thuộc tính đó trong khung chữ. Trong hàm setScaleMode, trước hết ta làm cho trị của biến mode không nhỏ hơn 0 và lớn hơn 3 (chỉ có 4 khả năng: 0, 1, 2, 3). Khi trị của biến mode vượt quá 3, ta cho biến mode nhận lại trị 0. Khi trị của biến mode nhỏ hơn 0, ta cho biến mode nhận lại trị 3. Nhờ vậy, khi ấn liên tiếp phím mũi tên lên/xuống, trị của biến mode "xoay vòng" trong các trị khả dĩ 0, 1, 2, 3.
    Câu lệnh điều kiện trong hàm onKeyDown thuộc loại mới đối với bạn:

    switch(mode) {

      case 0:

        tf.text = Stage.scaleMode = "showAll";

        break;

      case 1:

        tf.text = Stage.scaleMode = "noBorder";

        break;

      case 2:

        tf.text = Stage.scaleMode = "exactFit";

        break;

      case 3:

        tf.text = Stage.scaleMode = "noScale";

    }

    Câu lệnh điều kiện switch như trên liệt kê bốn trường hợp khả dĩ của biến mode và chỉ ra việc cần làm trong từng trường hợp. Câu lệnh tf.text = Stage.scaleMode = "showAll"; gồm hai tháo tác gán trị: gán trị "showAll" cho thuộc tính Stage.scaleMode và gán trị của thuộc tính Stage.scaleMode cho thuộc tính tf.text (biến text của khung chữ tf). Bạn để ý, sau câu lệnh gán như vậy là câu lệnh break; để thoát khỏi câu lệnh điều kiện switch, không thi hành câu lệnh tiếp theo.
    Trước khi biên dịch chương trình, bạn nên vẽ thêm khung viền bao quanh sân khấu để hình dung rõ đường biên của sân khấu. Cụ thể, bạn chọn công cụ vẽ hình khung Rectangle Tool , chọn màu nét (Stroke Color)  phù hợp, chọn màu tô (Fill Color)  là "rỗng" (không tô màu) và căng hình khung bao quanh sân khấu.
    Ấn Ctrl+Enter để biên dịch chương trình và thử gõ phím mũi tên lên/xuống, bạn thấy ngay sự khác biệt. Mở tập tin SWF bằng trình duyệt, bấm vào sân khấu, gõ phím mũi tên lên/xuống, bạn cũng thấy kết quả tương tự (hình 3).
     
     
     
     
    Trong trường hợp "exactFit", sân khấu co dãn để vừa vặn với cửa sổ trình duyệt, không bảo toàn tỉ lệ rộng:cao nguyên thủy. Trong trường hợp "noScale", sân khấu giữ vững kích thước nguyên thủy, chấp nhận bị cắt xén (che khuất) một phần. Trong trường hợp "noBorder", sân khấu co dãn theo kích thước cửa sổ nhưng vì bảo toàn tỉ lệ rộng:cao nguyên thủy nên cũng chấp nhận bị cắt xén. Trường hợp "showAll" có lẽ là trường hợp hoàn hảo nếu không xét đến những gì hiện diện trên sân khấu: sân khấu bảo toàn tỉ lệ rộng:cao nguyên thủy và co dãn linh hoạt để luôn vừa vặn, không bị cắt xén.

    Nhắn tin cho tác giả
    Đỗ Thanh Dương @ 08:05 06/04/2012
    Số lượt xem: 1552
    Số lượt thích: 0 người
    Avatar

    CHúc thầy buổi chiều thật vui

    :h

    Avatar

    Cám ơn Thúy Hằng nhé, chúc em ngày mới vui vẻ!

     
    Gửi ý kiến

    HỖ TRỢ QUẢN TRỊ WEBSITE

    Thay tên website / Chọn thư mục / Mở ra
    Giao diện Module Thư mục Thành viên Tài nguyên Xóa Code
    http://