Bài 5: Nút nhấn - Khoa học và Công nghệ của Đỗ Thanh Dương

Gốc > Những vấn đề về CNTT > Bài viết về Flash >

Tạo bài viết mới Bài 5: Nút nhấn

nút nhấn

(symbol button)

Button có thể là hình shape, đoạn text, hình bitmap, hoặc một group các đối tượng riêng lẻ nhau..
Button là một symbol có các frame khác nhau tương ứng với các sự kiện trên chuột (click, press_đè, drag_rê, release_nhả chuột..).

Tên của instance button (Trong Properties > instance name) nên luôn có đuôi là _btn (ví dụ menu_btn, open_btn..)

I. Tạo button:

1. Chuyển 1 hình shape thành button:

Tạo hình shape: Vẽ một hình shape trên stage bằng cách công cụ , , hay (có thể import một hình bitmap làm button)
Chuyển hình shape thành symbol button: Click chọn hình shape, Rclick > convert to symbol...hay Insert > create new symbol (Ctrl_F8). Chọn kiểu symbol là button
Tạo các trạng thái button tương ứng với sự kiện con trỏ:
- Dclick vào instance button trên stage để vào edit mode của button
- Insert Keyframe vào 3 frame đầu (có tên frame là Up,Over, Down): thay đổi trạng thái button như đổi màu, đổi dạng...

Tạo vùng tương tác với con trỏ: Thay đổi kích thước, vị trí hình shape trong frame "Hit".

Thể hiện trạng thái Button	Up: Trạng thái bình thường của button Over: Khi rê chuột lên button Down: Khi click chuột lên button
Xác định vùng tương tác	Hit: (Không hiển thị trong file.swf)

Có thể tách riêng vùng tương tác và button, lúc đó bạn rê con trỏ chuột lên vị trí này thì button ở vị trí khác thay đổi.

Như hình sau, ta có một button màu vàng: - Trạng thái rê chuột trên nút: Khi rê con trỏ chuột lên vùng tương tác (1/2 hình tròn dưới), button sẽ chuyển màu xanh da trời.
- Trạng thái click chuột: Khi click lên vùng tương tác, button sẽ chuyển sang màu xanh lá cây. - Trạng thái bình thường: Khi di chuyển con trỏ chuột ra khỏi vùng tương tác, button trở lại màu vàng.
		Mẫu

Nếu bạn vẫn còn chưa tự tin tạo riêng cho mình 1 button thì có thể chọn trong thư viện có sẵn của flash (Windows > other panels > common library > Buttons).

3. Button vô hình: Khi đó các keyframe Up, Over, Down là các keyframe rỗng, chỉ thêm hình shape cho keyframe "Hit" thôi. Cách khác để tạo ra 1 button trong suốt bằng cách giảm alpha = 0.

Button là 1 đoạn text: Button loại này khá phổ biến, có tính chất tương tự như các đường link trong trang web, khi đó các keyframe Up, Over, Down là text (màu sắc có thể khác nhau), nhưng keyframe Hit phải là 1 hình shape hình chữ nhật phủ lên đoạn text, vì click lên hình sẽ dể hơn là click lên text lúc được lúc không (text chỉ là các nét chữ nên khó click trúng)

II. MovieClip trong symbol button: Để các hiệu ứng của button thêm phần đặc sắc...bạn có thể tạo ra 1 button chuyển động theo sự kiện chuột bằng cách lồng 1 movieClip vào button. Như các ví dụ dưới đây là 1 movieClip lồng trong keyframe "Over" của button tạo ra nhiều kiểu hoạt cảnh thú vị khi rê chuột lên nút:

III. Button và action script:

1. Gán lệnh cho button: Có 2 cách

- Gán trực tiếp vào button: lệnh được đặt trong button
- Gán thông qua tên instance của nó: Lệnh được đặt trong timeline của button đó

Theo cấu trúc:

Nhập lệnh trực tiếp vào button (Event in button): Click chọn button và gõ lệnh trong action panel		Gán lệnh qua tên instance của button (Event in keyframe): Click chọn keyframe có button đó rồi gõ lệnh trong action panel
on(mouseEvent){ statements; }		my_btn.mouseEvent = function(){ lệnh statements; }
Ví dụ: Lệnh nhảy đến keyframe 5 trong cùng timeline khi click chuột lên button "jump_btn"
on(press){ gotoAndStop(5); }		jump_btn.onPress = function(){ gotoAndStop(5); }

Flash khuyến khích nhập lệnh thông qua tên instance do cấu trúc diễn đạt theo OOP. Cách nhập lệnh này còn có thuận lợi hơn khi thay thế đối tượng (khi thay thế các lệnh nhập trực tiếp sẽ biến mất)

IV. Một số mouseEvent thông dụng:

Lệnh trong button

Lệnh gán qua tên instance button

sự kiện

	press
	release
	releaseOutside
	rollOver
	rollOut
	dragOut
	dragOver

	onPress
	onRelease
	onReleaseOutside
	onRollOver
	onRollOut
	onDragOut
	onDragOver

Click chuột trên nút.
Nhả chuột trên nút (thường sử dụng).
Nhả chuột ngoài nút sau khi press.
Rê chuột trên nút.
Rê ra ngoài chuột sau khi rollOver.
Drag chuột ngoài nút sau khi press.
Drag chuột lên nút lại sau khi dragOut.

V. Một số câu lệnh thông dụng:

1. Lệnh thử button: on (release) {

trace("r u click me?");
}

2. Lệnh nhảy frame:

Nhảy đến frame cùng cấp

- Nhảy đến keyframe 3 trong cùng 1 timeline:		gotoAndStop(3);
- Nhảy đến keyframe "on" trong cùng 1 timeline:		gotoAndStop("on");
- Nhảy đến keyframe kế tiếp:		nextFrame ();
- Nhảy về keyframe kế truớc:		previousFrame();

Ví dụ: album hình

b. Nhảy đến các keyframe khác cấp:

Ví dụ ta có cấu trúc các movieClip lồng nhau là:

main timeline > movie1_mc > movie2_mc

và main timeline > clip1_mc > clip2_mc

Nhảy lên các frame cấp trên:

- Nhảy lên 1 cấp (Từ clip2_mc nhảy đến frame 4 của clip1_mc) _parent.gotoAndStop(4);

- Nhảy lên 2 cấp (Từ Clip2 nhảy đến frame 2 của main timeline) _parent._parent.gotoAndStop(2);

- Trở về main timeline (về frame 3, main timeline từ bất kỳ vi trí nào): _root.gotoAndStop(3);

Nhảy xuống các keyframe trong timeline riêng của movieClip:

- Từ main timeline nhảy đến frame 2 của movieClip "Clip1_mc": clip1_mc.gotoAndStop(2);

- Từ main timeline nhảy đến frame 5 của movieClip "Clip2_mc": clip1_mc.clip2_mc.gotoAndStop(5);

Ví dụ: các nút điều khiển biến hình, chuyển màu

Nhảy qua lại giữa 2 movieClip không lồng nhau:

Từ movieClip "Clip2_mc" nhảy đến keyframe 3 của "movie2_mc":
this._parent._parent. movie1_mc.movie2_mc.gotoAndStop(3);

Có thể dùng Insert Target Path trong Actions panel để nhập đường dẫn 1 cách chính xác.

Chạy 1 đoạn chuổi frame hoạt cảnh trong cùng 1 timeline có keyframe đầu là 20: gotoAndPlay(20);

5. Lệnh mở flash toàn màn hình: fscommand("fullscreen", true);

6. Lệnh đóng file flash: fscommand("quit");

6. Lệnh mở trang web: getURL("http://www.google.com.vn", _blank);

7. Lệnh gởi mail: getURL("mdannhut@gmail.com">ailto:dannhut@gmail.com");

Ví dụ: mô phỏng bộ nút đóng mở window

4. Drag button:

Drag nút:

on (press){
     this.startDrag(); hay startDrag("tên instance button");
     }
on (release){
     stopDrag();
     }

Ví dụ: Trang trí cây thông noen

2. Loại bỏ con trỏ dạng bàn tay: collapse_btn.useHandCursor=0;

VI. Behaviors panel (Window > Development Panels > Behaviors):

Ưu: Tạo chức năng cho button dựa trên các các lệnh tạo sẵn của flash, người sử dụng có thể không cần biết lập trình ngôn ngữ actionScript
Khuyết: quá đơn giản, có thể gây xung đột trong file.
chọn button trong stage, click nút Add Behaviors

1. Data: Trigger data source
2. Embedded Video: Các lệnh điều khiển file video
Fast forward, Play, Stop, Pause, Rewind, Hide, Show

3. Movieclip:

Load Graphic: Load 1 hình bitmap bên ngoài vào một movieClip hoặc screen.

Load External Movie Clip: Load 1 file.swf ngoài vào một movieClip hoặc 1 screen.

Unload Flash Movie: Bỏ load file.swf mà đã được load từ ngoài vào tập tin.

Duplicate Movieclip: Nhân bản 1 movieClip hoặc screen

GotoAndPlay at frame or label: Nhảy đến frame cụ thể của movieClip và chạy tiếp.

GotoAndStop at frame or label: Nhảy đến frame cụ thể của movieClip và dừng.

Bring to Front, Bring Forward, Send to Back, Send Backward: Thay đổi thứ tự hiển thị các movieClip trên stage.

Start Dragging movieclip: Khởi động drag một movie clip.

Stop Dragging movieclip: Ngưng drag một movieClip.

4. Sound:

Load sound from Library

Load streaming mp3 file

play sound

stop all sound

stop sound

5. Web > go to Web Page:(_self, _parent,_blank,_top) Trong hộp thoại Go to URL chọn _blank (mở URL trong cửa sổ mới)

Nhắn tin cho tác giả

Đỗ Thanh Dương @ 21:57 28/10/2010
Số lượt xem: 399

Số lượt thích: 0 người

Bài 4: Hoạt cảnh Simbol (28/10/10)
Bài 3 Hiệu ứng mặt nạ (28/10/10)
Bài 2: Gói phim (28/10/10)
Bài 1: Tổng quan về Flash 8 (28/10/10)
GIF Movie Gear 4.2 - Tạo ảnh sống động với GIF Movie Gear (03/10/10)

Thanh Dương xin chào

Thông tin

Ảnh ngẫu nhiên

Tài nguyên dạy học

Ý kiến trao đổi

Điều tra ý kiến

Sắp xếp dữ liệu

Nhúng mã HTML

Thống kê

thống kê truy cập

Tạo bài viết mới Bài 5: Nút nhấn

nút nhấn

HỖ TRỢ QUẢN TRỊ WEBSITE

Thanh Dương xin chào

Thông tin

Ảnh ngẫu nhiên

Tài nguyên dạy học

Ý kiến trao đổi

Điều tra ý kiến

Sắp xếp dữ liệu

Nhúng mã HTML

Đăng nhập

Thống kê

thống kê truy cập

Tạo bài viết mới Bài 5: Nút nhấn

nút nhấn

HỖ TRỢ QUẢN TRỊ WEBSITE