AloFlash ! Cộng đồng flash Việt Nam



You are here: Tutorials  AS 1.0 - 2.0 Làm thanh cuộn trong flash với AS 2.0

Làm thanh cuộn trong flash với AS 2.0

Email In PDF.
Xem kết quả: / 13
Bình thườngTuyệt vời 

Đây là ứng dụng rất phổ biến trong Flash, aloflash sẽ hướng dẫn các bạn làm bài tập về ứng dụng này, hy vọng nó sẽ giúp ích cho mọi người.

Bài tập này sẽ chia làm 2 giai đoạn, giai đoạn làm thành cuộn, và giai đoạn làm văn bản cuộn. Chúng ta sẽ đi vào làm chi tiết ngay bây giờ nhỉ.

Bước 1:

Tạo 1 file tài liệu Flash mới, Ctrl + N chọn loại là ActionScript 2.0 nhé. Sau đó bạn nhấn Ctrl + J  để mở bảng Document Setting điều chỉnh các thông số phù hợp với yêu cầu bạn muốn.

Bước 2:

Chúng ta sẽ tiến hành làm thanh cuộn trước nhé.

Bạn hãy sử dụng công cụ Rectangle Tool (R) vẽ 1 hình chữ nhật nhỏ, bạn đổ màu cho nó thế nào tùy theo ý tưởng của bạn nhé. mình chọn màu xanh da trời đậm  như hình dưới:

Chọn công cụ Selection Tool (V), click vào hình chữ nhật vừa vẽ nhấn F8 convert nó thành dạng Button. (Mình nhầm bạn Convert nó thành Movie Clip nhé chứ không phải button như trong hình, tại chót post hình rồi lười sửa hình quá, các bạn thông cảm nhé.).

Bước 3:

Click đúp vào Button vừa tạo để vào bên trong, Nhấn Ctrl + để phóng to hình chữ nhật lên, sau đó khóa luôn layer này lại. Tạo 1 layer mới chúng ta sẽ vẽ mũi tên bằng cách sử dụng công cụ Line Tool (N), Bạn để Stroke là màu trắng và độ dầy là 2 vẽ như hình dưới nhé.

Ok, giờ thoát ra ngoài Scene bằng cách click vào 1 trong những vùng mình đánh dấu tròn đỏ như hình:

Sau đó đặt tên cho Button này là: btnUp (cái này là đặt tên cho Movie Clip chứ không phải Button bạn nhé).

Ok ta đã xong btnUp, giờ ta làm tiếp vào btnDown.

Bước 4:

Bạn sử dụng công cụ Selection Tool (V) Click vào btnUp vừa tạo nhấn tổ hợp phím Ctrl + V hoặc click chuột phải chọn Copy, sau đó nhấn phím Ctrl + V hoặc chuột phải ra ngoài button đó chọn Pase.

Ta sẽ có 1 button nữa giống hệt cái button cũ. Giờ bạn sử dụng công cụ Free Transform Tool (Q) quay cái button này lộn ngược lại như hình.

Đặt tên cho Button này là btnDown

Bước 5: 

Giờ xắp xếp ở 2 điểm mép trên và dưới của tại liệu flash như hình:

Bước 6: 

OK. Ta đã xong 2 cái button trên và dưới, giờ sẽ làm đến thanh trượt cho thanh cuộn.

Sử dụng công cụ Rectangle Tool (R), vẽ như trong hình để tạo thanh trượt, 

Sau khi vẽ xong bạn chọn công cụ Selection Tool (V) click vào thanh trượt và nhấn F8, Convert nó thành dạng Movie Clip, và đặt tên cho nó là: scrollTrack

OK đã xong thanh trượt, giờ ta tiến hành tạo thanh kéo.

Bước 7: 

Nhấn Ctrl + để phóng ta file flash lên thuận tiện cho việc vẽ. Sử dụng công cụ Rectangle Tool (R) để màu Fill là 1 màu nổi bật nhé mình chọn màu hồng cho Teen, 

OK, Chọn công cụ Selection Tool (V), click vào hình vừa vẽ nhấn F8 để convert nó thành dạng Button, tiếp tục nhấn F8 1 lần nữa để convert nó thành dạng Movie Clip, đặt tên cho movie clip này là: scrollFace

Sau khi đặt tên xong bạn kéo cho cái thanh kéo vừa đè khít lên thanh trượt như hình:

OK vậy là ta đã xong giai đoạn 1, giai đoạn tạo thanh cuộn. Giờ chúng ta sẽ bước sang giai đoạn 2 tạo nội dung.

Bước 8:

Bạn khóa layer chưa thanh cuộn lại rồi tạo thêm 1 layer mới.

Chọn công cụ Text Tool (T), chọn loại Dynamic Text, như hình dưới:

Sau đó bạn vẽ 1 khung text và viết nội dung trong đó như hình dưới:

Nhấn F8 để convert đoạn text này thành dạng Movie Clip và đặt tên cho movie clip này là: contentMain

làm xong bạn khóa layer này lại nhé.

Bước 9:

Tạo 1 layer mới, sử dụng công cụ Rectangle Tool (R), vẽ 1 hình chữ nhật vừa che lấp khung hiện thị flash như hình vẽ (đây là hình mà text sẽ hiện thị trong đó vì ta sẽ làm mặt nạ cho nội dung bằng hình chữ nhật này, các bạn muốn nó hiện trong hình gì thì dùng hình đó nhé như tròn, sao... chứ không nhất thiết phải chữ nhật).

Sau đó bạn sử dụng công cụ Selection Tool (V) click vào hình chữ nhật này nhấn F8 để convert nó thành dạng Movie Clip và đặt tên cho nó là: maskedView

Bước 10:

Click chuột phải vào layer hình chứa hình chữ nhật vừa vẽ bạn chọn Mask.

OK vậy là ta đã hoàn thành tất cả các bước thiết kế, giờ chỉ là chèn code vào cho nó chạy thôi.

Bước 11:

Tạo layer mới Click vào frame đầu tiên của layer này nhấn phím F9 để mở bảng ActionScript ra và chèn vào đoạn code sau:

 

scrolling = function () {
var scrollHeight:Number = scrollTrack._height;
var contentHeight:Number = contentMain._height;
var scrollFaceHeight:Number = scrollFace._height;
var maskHeight:Number = maskedView._height;
var initPosition:Number = scrollFace._y=scrollTrack._y;
var initContentPos:Number = contentMain._y;
var finalContentPos:Number = maskHeight-contentHeight+initContentPos;
var left:Number = scrollTrack._x;
var top:Number = scrollTrack._y;
var right:Number = scrollTrack._x;
var bottom:Number = scrollTrack._height-scrollFaceHeight+scrollTrack._y;
var dy:Number = 0;
var speed:Number = 10;
var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);
 
scrollFace.onPress = function() {
var currPos:Number = this._y;
startDrag(this, false, left, top, right, bottom);
this.onMouseMove = function() {
dy = Math.abs(initPosition-this._y);
contentMain._y = Math.round(dy*-1*moveVal+initContentPos);
};
};
scrollFace.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};
btnUp.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y+speed<maskedView._y) {
if (scrollFace._y<=top) {
scrollFace._y = top;
} else {
scrollFace._y -= speed/moveVal;
}
contentMain._y += speed;
} else {
scrollFace._y = top;
contentMain._y = maskedView._y;
delete this.onEnterFrame;
}
};
};
btnUp.onDragOut = function() {
delete this.onEnterFrame;
};
btnUp.onRelease = function() {
delete this.onEnterFrame;
};
btnDown.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y-speed>finalContentPos) {
if (scrollFace._y>=bottom) {
scrollFace._y = bottom;
} else {
scrollFace._y += speed/moveVal;
}
contentMain._y -= speed;
} else {
scrollFace._y = bottom;
contentMain._y = finalContentPos;
delete this.onEnterFrame;
}
};
};
btnDown.onRelease = function() {
delete this.onEnterFrame;
};
btnDown.onDragOut = function() {
delete this.onEnterFrame;
};
 
if (contentHeight<maskHeight) {
scrollFace._visible = false;
btnUp.enabled = false;
btnDown.enabled = false;
} else {
scrollFace._visible = true;
btnUp.enabled = true;
btnDown.enabled = true;
}
};
scrolling();

OK. Như vậy là chúng ta đã hoàn thành bài tập này. Bạn hãy nhấn Ctrl + Enter xem sao nhỉ.

Chúc các bạn thành công.

aloflash.com

Note: Mình bị nhầm các bạn chú ý từ bước 2 đến bước 5 chúng ta chọn convert thành Movie Clip chứ không phải Button nhé. còn lại thì vẫn như thế. Tại mình chót post hình rồi hơi ngại sửa hình.

Download

Bình luận (6)Add Comment
0
...
được viết bởi banhmiopla, Tháng mười 27, 2010
ban quen viet a
0
...
được viết bởi aloflash, Tháng mười 27, 2010
hic ban qua. minh se viet som nhat. hi thong cam nhe'. smilies/wink.gif
0
...
được viết bởi Chipp, Tháng một 13, 2011
Làm để làm thanh cuộn nằm ngang vậy, bạn có thể cho mình ví dụ dc ko. Thanks
0
...
được viết bởi dragon88, Tháng ba 27, 2011
Nếu ko convert 2 nút btnUp và btnDown thành dạng Button thì làm sao mà click nó được nhỉ. Nếu thế này thì chẳng phải chỉ sử dụng được thanh cuộn chứ ko thế sử dụng được 2 nút Up và Down.
0
...
được viết bởi hường, Tháng ba 20, 2012
cách này không đúng với flash 8.0 phải không ad
0
...
được viết bởi doansinhak44, Tháng mười một 03, 2012
ae test thử trên flahs 8 hỏng zui na.

Viết bình luận
nhỏ hơn | lớn hơn

busy