Bài 2: Nhân vật và thể hiện

Bài 2: Nhân vật và thể hiện

Bạn trỏ vào quả banh, giữ phím trái của chuột, thử kéo quả banh qua vị trí khác. Có lẽ bạn sẽ ngạc nhiên vì ở vị trí cũ vẫn còn một đường tròn, không có màu tô. Đó chính là nét viền của hình tròn được tạo ra bởi công cụ Oval Tool. Bạn có thể quy định màu riêng cho nét viền của hình tròn. Ta chỉ cần quả banh không có nét viền, bạn hãy xóa nét viền bằng cách bấm vào nét viền để chọn và gõ phím Delete.

Để "tô màu" cho quả banh, bạn bấm vào quả banh để chọn, bấm vào ô Fill Color trong bảng Color Mixer (tỏ ý rằng bạn muốn quy định màu tô chứ không phải màu nét) và chọn màu bạn thích.

Quả banh hiện có của bạn chỉ là một hình vẽ đơn thuần. Muốn cho quả banh trở thành một đối tượng có hành vi riêng, có thể điều khiển bằng cách lập trình, trước hết bạn cần chuyển đổi quả banh thành một nhân vật (movie clip). Với quả banh đang ở tình trạng "được chọn", bạn chỉ cần gõ phím F8. Khi thấy hộp thoại Convert to Symbol (hình 1), bạn gõ Ball (quả banh) để đặt tên cho nhân vật sắp được tạo ra. Bạn cũng nên chọn điểm mốc của nhân vật ở giữa cạnh dưới khung bao của hình quả banh bằng cách bấm vào ô giữa, dưới cùng trong chín ô vuông nhỏ của mục Registration. Sau này, khi nói về tọa độ của nhân vật, bạn hiểu đó là tọa độ của điểm mốc.

Sau khi bạn bấm nút OK trong hộp thoại Convert to Symbol, hình quả banh trở thành một nhân vật. Khác với những hình vẽ bình thường trong Flash, nhân vật được lưu trữ trong thư viện (library). Ấn Ctrl+L (hoặc gõ phím F11), bạn thấy bảng Library xuất hiện bên phải cửa sổ Flash, trong đó có tên nhân vật Ball, hiện là nhân vật đầu tiên trong danh sách các thứ được lưu trữ trong thư viện. Bấm vào tên Ball trong bảng Library, bạn thấy "chân dung" của nhân vật Ball hiện ra phía trên danh sách.

Thư viện còn là nơi lưu trữ nhiều thứ khác, chẳng hạn những âm thanh cần dùng cho chương trình Flash của bạn.

Sau thao tác chuyển đổi hình vẽ quả banh thành nhân vật, quả banh trên sân khấu dường như không có gì thay đổi. Thực ra đã có thay đổi lớn: quả banh trên sân khấu chỉ là một thể hiện (instance) của nhân vật Ball trong thư viện. Muốn có nhiều quả banh, bạn có thể tạo ra nhiều thể hiện khác của nhân vật Ball. Hoạt cảnh của bạn có thể có rất nhiều quả banh nhưng dung lượng tập tin fla tăng không đáng kể so với trường hợp chỉ có một quả banh. Ngoài ra, nếu bạn chỉnh sửa chi đó cho nhân vật Ball trong thư viện, mọi thể hiện của nhân vật đó đều thay đổi. Cấu trúc nhân vật-thể hiện đem đến những lợi ích tuyệt vời!

Trước mắt, điều nên làm ngay là đặt tên riêng cho thể hiện đầu tiên của nhân vật Ball. Với quả banh trên sân khấu đang ở tình trạng "được chọn", bạn bấm vào thanh tiêu đề Properties ở cạnh dưới cửa sổ Flash (hoặc ấn Ctrl+F3) để mở bảng Properties (hình 2), nơi trình bày các thuộc tính của thể hiện đang được chọn. Trong bảng Properties, bạn bấm vào ô có dòng chữ (tên của thể hiện) và gõ tên ball1 (ngụ ý: đây là thể hiện đầu tiên của nhân vật Ball).

Nếu trên sân khấu chỉ có một thể hiện duy nhất của nhân vật, bạn có thể gọi thể hiện đó là "nhân vật". Nhiều người luôn dùng thuật ngữ "nhân vật" thay cho "thể hiện". Không sao hết, miễn là bạn hiểu khái niệm.

ball1._xscale = 200;

Câu lệnh vừa nêu làm cho thuộc tính _xscale của nhân vật ball1 có trị số là 200 (gán trị số 200 cho biến _xscale của nhân vật ball1). Điều này nghĩa là nhân vật ball1 được kéo dãn 200% theo phương x (phương ngang).

Để "chạy chương trình" (chương trình hiện chỉ có một câu lệnh), bạn ấn Ctrl+Enter. Cửa sổ Flash lập tức thay đổi, nhiều thứ được giấu đi. Giữa cửa sổ là một khung trắng có hình quả banh bầu dục, cho thấy rõ ràng câu lệnh bạn viết đã được thực hiện "nghiêm túc": quả banh được kéo dãn theo phương ngang. Kích thước theo phương ngang của quả banh bầu dục gấp đôi đường kính của quả banh tròn ban đầu.

Để dẹp khung trắng hiển thị kết quả của chương trình, bạn bấm nút ở góc trên, bên phải khung trắng.

Bài 3: Khung chốt của hoạt cảnh

Biến _xscale là biến có sẵn trong mọi nhân vật của Flash. Vế trái của câu lệnh đọc là "biến _xscale của nhân vật ball1". Toàn bộ câu lệnh đọc là "gán trị số 200 cho biến _xscale của nhân vật ball1".

Khi không sợ nhầm lẫn, ta có thể gọi "thể hiện ball1 của nhân vật Ball" là "nhân vật ball1". Bạn chú ý, cần có dấu chấm phẩy (;) để kết thúc câu lệnh. Xem lại thư mục chứa tập tin fla, bạn thấy có thêm tập tin mới thuộc loại swf. Nếu tập tin chứa quả banh của bạn có tên Ball.fla, tập tin mới được tạo ra có tên Ball.swf (chỉ khác phần phân loại). Trước đây, khi bạn ấn Ctrl+Enter, Flash đã ghi xuống tập tin chương trình swf và chạy chương trình đó. Chính tập tin swf mới là chương trình chạy được, có thể dùng trong trang Web. Việc chuyển đổi tập tin fla thành tập tin swf chạy được gọi là biên dịch (compile). Đối với bạn, swf là một chương trình. Đối với người xem trang Web, swf là một hoạt cảnh (animation) hoặc trò chơi (game). Phía trên sân khấu, trong bảng Timeline, bạn thấy có một thanh dài với các số 1, 5, 10,... Đó là số thứ tự của các khung hình (frame), gọi tắt là khung. Diễn biến của chương trình trong Flash theo dòng thời gian giống như một đoạn phim, nên cũng có khái niệm "khung hình". Mỗi ô ở ngay dưới thanh ghi số thứ tự biểu diễn một khung hình. Dải ô như vậy gọi là thời tuyến (timeline). Trong bảng Timeline, bạn thấy ở số 1 có một ô màu đỏ hồng (hình 1). Người ta gọi đó là đầu đọc (playhead). Đầu đọc đang ở khung 1 cho biết bạn đang xem khung 1 (những gì hiện có trên sân khấu là nội dung của khung 1). Trong ô tương ứng với khung 1 có chữ a be bé, ngụ ý nói rằng có câu lệnh ActionScript được ghi ở khung 1.

Nội dung của khung 1 mặc nhiên được duy trì trong các khung tiếp theo trừ khi bạn chủ động thay đổi. Giả sử bạn muốn ở khung 5, quả banh trở về kích thước bình thường, không bị kéo dãn theo phương ngang nữa. Muốn vậy, trước hết bạn báo cho Flash biết có sự thay đổi ở khung 5 bằng cách bấm-phải vào khung 5 (ta có thể gọi tắt như vậy thay vì nói rõ "ô tương ứng với khung 5"), chọn mục Convert to Keyframes trong trình đơn vừa hiện ra. Thao tác này chuyển đổi khung thường thành khung then chốt (keyframe), gọi tắt là khung chốt, giúp Flash hiểu rằng phải cẩn thận xem xét lại mọi thứ ở khung 5 vì nó khác với khung trước. Chính bạn tạo ra sự khác biệt ở khung 5 bằng cách bấm vào khung soạn thảo của bảng Actions (nếu không thấy nó, bạn gõ phím F9) và gõ câu lệnh: ball1._xscale = 100; Câu lệnh như vậy gán trị 100 cho biến _xscale của nhân vật ball1, quy định độ co dãn theo phương ngang của ball1 là 100%, tức là không co dãn gì nữa. Vào lúc chạy chương trình, khi hiển thị đến khung 5, Flash sẽ thi hành câu lệnh mà bạn vừa viết. Quan sát thời tuyến, bạn thấy đầu đọc đã nhảy đến khung 5 (hình 2), nghĩa là những gì bạn thấy trên sân khấu thuộc về khung 5. Tại khung 5 có dấu tròn màu đen cho biết đó là khung chốt. Khung 5 cũng có chữ a giống như khung 1 để nói rằng có câu lệnh ActionScript được viết cho khung 5. Nhận ra dấu tròn đen ở khung 1, có lẽ bạn thắc mắc ngay: "Vậy khung 1 cũng là khung chốt?". Vâng, đúng vậy, khung 1 luôn luôn là khung chốt theo mặc định. Khung thường ngay trước khung chốt được đánh dấu bằng một dấu chữ nhật màu trắng. Dấu như vậy cho thấy rõ sự kết thúc của một loạt khung giống nhau.

Ấn Ctrl+Enter để biên dịch và chạy chương trình, bạn thấy quả banh "phập phồng" liên tục do câu lệnh ActionScript ở khung 1 và khung 5 được thi hành lặp đi lặp lại. Đóng cửa sổ Ball.swf (cửa sổ trình diễn hoạt cảnh) vừa mở, rồi gõ phím F12 (hoặc chọn File > Publish Preview > Default - HTML), bạn thấy cửa sổ trình duyệt xuất hiện, trình bày tập tin Ball.html. Quả banh của bạn "diễn trò" thoải mái trong cửa sổ trình duyệt. Đó là nhờ tập tin Ball.html có chứa liên kết trỏ đến tập tin Ball.swf. Điều này giúp bạn hình dung hoạt cảnh của mình trông ra sao khi được đặt trong trang Web. Xem xong, bạn đóng cửa sổ trình duyệt, trở về cửa sổ Flash, ấn Ctrl+S để lưu lại thành quả của mình trong tập tin Ball.fla.