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

(Tài liệu chưa được thẩm định)
Nguồn: http://aloflash.com/
Người gửi: Trịnh Thị Kim Loan (trang riêng)
Ngày gửi: 08h:42' 14-09-2012
Dung lượng: 24.1 KB
Số lượt tải: 11
Mô tả:

Đâ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
if (scrollFace._y
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
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

 

CODE CHÈN CỘT CHỨC NĂNG: 

<embed src="http://d.violet.vn/uploads/resources/615/violet_180X3011.swf "
width="180" height="301" type="application/x-shockwave-flash"
wmode="transparent" allowscriptaccess="never">


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

Cô Kim Loan cũng chịu khó sưu tầm, nghiên cứu thật !!! Đúng là tấm gương tự học và sáng tạo.

Avatar

Có người tải Flash này về chỉnh sửa và thêm vài chi tiết vào tạo ra một Flash hơi khác một chút.

Nhưng lại ghi:

Nguồn: tui làm

+Từ đó tôi tìm ra bài viết này và cũng chỉnh sửa lại đôi chút - tải lên đây để minh chứng: người ăn cắp Flash nhưng lại dám tự xưng tui làm.

 * Nên mới có tấm Flash này. 

 
Gửi ý kiến