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



You are here: Tutorials  Text Hiệu ứng chữ như thanh trượt trên tivi

Hiệu ứng chữ như thanh trượt trên tivi

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

Bạn đã xem tivi và thấy những  dòng chữ chạy phía dưới nhất là những chương trình thời sự. Bạn có muốn Flash làm được như vậy không. Aloflash sẽ giúp bạn làm điều này bằng 1 tut đơn giản sau. 

Đây thực ra là việc ứng dụng Mask nhiều lớp cho layer, dưới đây là hình ảnh sau khi đã hoàn thành bài tut này, bạn có để ý thấy có 2 lớp mask liên tiếp đè lên nhau không, đây chính là điểm quan trọng nhất trong TUT này.

Mời các bạn bắt đầu thôi.

Bước 1:

Tạo mới một tài liệu Flash. Ctrl + N. Tìm một bức ảnh và Import vào làm nền cho file của bạn đặt tên layer nền này là background.

Bước 2:

Tạo một layer mới, đây là layer các bạn sẽ làm nền để cho text chạy trên đó. Mình làm nền chạy text theo kiểu gấp khúc, còn các bạn có thể sáng tạo theo ý mình. Ai làm gấp khúc thì theo hướng dẫn sau đây nhé. Thủ thuật của việc làm gấp khúc nền chạy text là các bạn dùng công cụ Pen Tool (P) vẽ 1 khung đường màu đen (để alpha trong suốt tầm 70 - 80% là đẹp) và với viền màu vàng như hình.

Để làm gấp khúc cho nó đúng dạng không gian 3D, các bạn copy đoạn khung vừa rồi và pase thành 1 cái mới. Bạn chọn cái mới và sử dụng công cụ Free Transform Tool (Q) để xoay và thay đổi hình dạng của nó cho khít với đầu bên kia của thanh nền trượt text cũ.

Sau đó bạn giảm alpha cho màu đen ở cái mới đi 1 chút nhìn cho nó có chiều sâu. Như này có lẽ là OK rồi :D.

Bước 3:

Đây là bước quan trọng để tạo hiệu ứng text chạy qua màn hình. Các bạn chú ý nhé. Giờ các bạn tạo một layer mới đặt tên là text dưới (như hình) các bạn dùng công cụ Text Tool (T) viết một chữ tùy ý các bạn muốn làm mình lấy là aloflash.com, đây là layer sẽ làm đoạn text chạy 1 đoạn đến chỗ gấp khúc.

Tiếp tục tạo 1 layer mới đặt tên là mask duoi (như hình). ở layer này bạn vẽ một hình chữ nhật sao cho mép phải của nó vừa khít vào chỗ gấp khúc.

Sau khi làm xong bạn tắt layer mask dưới đi để thuận tiện làm việc hơn.

Bước 4:

Tương tự như bước 3 bước 4 cũng như vậy chỉ khác là màu chữ sáng hơn chữ bước 3 một chút và hình chữ nhật có mép trái vừa khít với chỗ gấp khúc.

Bước 5:

Đây là bước chúng ta sẽ tạo chuyển động cho text. Ở layer text tren bạn tạo chuyển động cho nó bằng cách ở frame thứ 62 bạn nhấn F6, sau đó click vào giữa frame đầu và frame 62 trên layer text tren bạn chọn Create Motion Tween. Tiếp tục trỏ và frame thứ 35 và nhấn F6. Với tốc độ của chuyển động từ frame 1 đến 35 các bạn để là Ease: 100 và từ frame thứ 35 đến 62 bạn để Ease: -100.

Tương tự như vậy với layer text dưới bạn cũng làm thế, nhưng chỉ làm đến frame 35 thôi nhé. Đến frame 35 bạn sử dụng công cụ Free Transform Tool (Q) để xoay và điều chỉnh sao cho text duoi vừa khít vào text trên sau đó để tốc độ Ease: 100.

Bước 6:

Bước này khá đơn giản, bạn chỉ cần trên những layer còn lại nhấn F5 ở frame thứ 62 thôi.

Bước 7:

Tạo mask cho 2 layer: mask trênmask duoi bằng cách chuột phải chọn mask.

OK. Vậy là TUT này đã hoàn thành bạn hãy thử nhấn Ctrl + Enter để xem thành quả của mình nào.smiley

Hic làm TUT này mệt quá làm cốc sinh tố cho lại sức cái. cool

Chúc bạn thành công !!!

Download file

aloflash.com

Bình luận (30)Add Comment
0
...
được viết bởi Hay quá, Tháng chín 16, 2010
Hay quá cảm ơn bạn nhiều lắm bài hướng dẫn rất hay smilies/cheesy.gif
0
...
được viết bởi ..., Tháng mười 16, 2010
rất hay!
0
...
được viết bởi Dung Nguyen, Tháng mười một 12, 2010
bai viet rat hay!!tks ban!
0
...
được viết bởi tan, Tháng mười một 27, 2010
thanks nhieu lam nha lan cau la duoc
0
...
được viết bởi dokushin, Tháng mười hai 10, 2010
minh làm như các bước huớng dẫn nhưng không hiểu sao ko đc smilies/sad.gif, lúc kéo thanh trượt để xem thì thấy chạy như của bạn nhưng khi Ctr + Enter thì chỉ thấy mỗi BK còn text mất tiêu. Để minh down file bạn về xem sao smilies/smiley.gif
0
...
được viết bởi idesign90, Tháng mười hai 10, 2010
thank anh để em down về làm thử smilies/grin.gif
0
...
được viết bởi tonyhoang, Tháng mười hai 12, 2010
ban viet thiu mot step phai convert text sang dang movie smilies/wink.gif
0
...
được viết bởi tonyhoang, Tháng mười hai 12, 2010
uh nham sang graphic smilies/grin.gifsmilies/grin.gif
0
...
được viết bởi xcvxc, Tháng mười hai 15, 2010
xz vxz vcv
0
...
được viết bởi huynh van dang, Tháng hai 07, 2011
Minh download mai khong duoc?
0
...
được viết bởi hoangti_smiler, Tháng hai 17, 2011
cothay cho na`o download dau ta
smilies/angry.gif
0
...
được viết bởi Thanh Vũ, Tháng hai 17, 2011
bài viết hay quá! Thank
0
...
được viết bởi flash, Tháng năm 12, 2011
bai viet qua hay
0
...
được viết bởi dan38, Tháng năm 24, 2011
cảm ơn pro vì bài viết bổ ích này nha
0
...
được viết bởi ...., Tháng sáu 28, 2011
hay quá! cảm ơn nhiều
0
...
được viết bởi quyên, Tháng bảy 20, 2011
sao mình dùng Pen tool(P) để vẽ đường mà đâu có fill color được đâu. Ai biết chỉ dùm mình với.
0
...
được viết bởi tuong trung, Tháng mười 11, 2011
Mình đang tập tành flash. Rất cám ơn những chia sẻ của bạn.
0
...
được viết bởi BiKnight, Tháng mười 17, 2011
can` tim` tai` lieu hoc flash 8.0 ai co' chi? gium` em vs
0
...
được viết bởi ??????????????/, Tháng mười một 11, 2011
co đổ được màu nền đâu. chẳng thấy chỗ nào down cả
0
...
được viết bởi chuan, Tháng mười hai 10, 2011
totvcb dsgfh fdgfg
0
...
được viết bởi hoang giang, Tháng mười hai 27, 2011
minh cung moi bat dau hoc flash cam on ban rat nhiu !
0
...
được viết bởi abba, Tháng một 04, 2012
thanks hay lam ban
0
...
được viết bởi doclap29, Tháng ba 01, 2012
hay quá, cám ơn aloflash nhiều nhiều
0
...
được viết bởi ntnhoa2011, Tháng ba 24, 2012
CẢM ƠN NHIỀU LẮM
0
...
được viết bởi Vynguyen, Tháng tư 19, 2012
Hi, bạn hướng dẫn luôn làm hình lập phương quay mòng mòng đi. Nhìn đã mắt quá
0
...
được viết bởi dingdong, Tháng năm 01, 2012
híc, mỗi lần muốn down phải spam như thế này à, chuối thế admin ơi ời smilies/sad.gif
0
...
được viết bởi dsdsa, Tháng năm 12, 2012
dsadsadsa
0
...
được viết bởi viccardinle, Tháng bảy 31, 2012
giup em voi ,co cach nao la hieu ung khoi,lua ,nuoc ma ko can code ko ,pleasesmilies/cry.gif
0
...
được viết bởi Nhật Quý, Tháng tám 15, 2012
Cho xin code hình lật trang
0
...
được viết bởi khanh ph¡m, Tháng tám 18, 2012
bài rất hay,thanhs smilies/cheesy.gif

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

busy