Có rất nhiều bạn quan tâm đến hiệu ứng này, vậy hôm này mình sẽ hướng dẫn các bạn làm nó nhé. Chắc chắn xem xong tut này 90% các bạn mới học flash đều làm được vì nó quá đơn giản đến bất ngờ. :)
Nguyên vật liệu cho bài tập này chỉ là một tấm hình mà bạn muốn tạo hiệu ứng sóng nước, bạn nên dùng qua photoshop để chỉnh cho phù hợp. Mình là mình chọn luôn cái ảnh này đỡ phải chỉnh nhiều:
Ah nhân tiện mình sẽ hướng dẫn luôn các bạn cách tạo, anh nền qua photoshop trước khi làm nguyên vật liệu cho Flash.
Có rất nhiều các tạo bóng nước nhưng mình chỉ xin giới thiệu 2 cách thôi nhé, các cách khác các bạn nghiên cứu thêm.
Cách 1: Tạo nước bằng Filter.
Vidu: Mình có 1 bức ảnh như vậy:
Giờ ta sẽ tiến hành tạo nước cho nó ở bên dưới qua Photoshop.
sau khi đã cho bức ảnh vào trong Photoshop bạn chọn công cụ Rectangular marquee Tool (M), Kéo ở đoạn dưới bức ảnh như hình dưới:
Tiếp đó bạn chọn như trong hình:
Nó sẽ ra 1 bảng nữa, Bạn nhấn OK.
Tiếp theo bạn vào Filter > Stylize > Wind, thiết lập như hình dưới:
OK. Cuối cùng ta sẽ được như kết quả như sau:
Cách 2: Đảo ngược ảnh và tạo bóng nước
Tương tự như trên chỉ khác là, cái bóng dưới nước là hình ảnh đảo ngược của ảnh như hình dưới:
Và kết quả tương tự cách 1 ta sẽ có:
Đây là cách đơn giản chúng ta là bóng nước trong Photoshop. Nhưng chúng không đẹp và trông buồn tẻ quá. Vậy chúng ta sẽ bắt đầu với flash để xem nó khác biệt thế nào nhé. Nhớ giữ lại bức ảnh dưới để ta sẽ sử dụng trong Flash nhé:
Ok bắt đầu nào.
Bước 1:
Tạo 1 tài liệu Flash mới Ctrl + N, nhấn Ctrl + J để tùy chỉnh các thông số cho bài flash này như sau: (tùy theo kích thước bức anh hay yêu cầu mà bạn điều chỉnh cho phù hợp nhé, mình chọn thiết đặt như vậy vì bức ảnh của mình có kích thước 450x320).
Bước 2:
Import bức ảnh vào flash, File > Import > Import to Stage... (Ctrl + R), Sau đó bạn điều chỉnh bức ảnh cho vừa với khung hiển thị của flash bằng cách mở bảng Align: Window > Align (Ctrl + K) và điều chỉnh như hình sau:
Bước 3:
Sử dụng công cụ Selection Tool (V), Click chuột phải vào tấm hình chọn Break Apart.
Bước 4:
Bạn click vào vùng xám (vùng không hiển thị của flash), giữ chuột và béo sang bên phải sao cho tạo thành 1 khung như hình dưới, (bạn cố gắng kéo đúng điểm giao phân cách trong ảnh nền giữ phần trên mặt nước và dưới mặt nước).
Sau khi bạn kéo xong sẽ được kết quả: (Phần mình khoanh đỏ là phần bạn vừa kéo chọn ở trên).
Bước 5:
Tiếp theo nhấn luôn F8 bạn nhé để covert nó thành Movie Clip, đặt tên cho movie clip này là: aloflash
Bước 6:
Tạo 1 layer mới Click vào frame đầu tiên trên layer mới này và nhấn F9, bạn chèn vào đoạn code sau:
ripple = new flash.display.BitmapData(aloflash._width, aloflash._height);offset = new flash.geom.Point(0, 0);speed = 0.5;this.onEnterFrame = function() {offset.y -= speed;ripple.perlinNoise(150, 6, 2, 1.1, true, true, 1, true, offset);aloflash.filters = [new flash.filters.DisplacementMapFilter(ripple, ripple, 0, 1, 30, 30)];};
Ok thế là xong rồi, quá đơn giản phải không các bạn. Hãy nhấn Ctrl + Enter để thưởng thức nhé.
Chúc các bạn thành công
aloflash.com
DownloadTags:
Đánh dấu
Chia sẻ
Gửi mail
Số lần xem: 18647
Bình luận (80)
được viết bởi hay qua, Tháng mười 17, 2010
Cảm ơn bạn đã viết 1 tut rất hay, mình đã làm được rồi. Hi rất đẹp 
-
- +1
-
-
được viết bởi Mybabyhate, Tháng mười 17, 2010
Bác chơi ác thật, code bác gõ sai làm copy vào báo lỗi 
-
- +0
-
-
được viết bởi banhmiopla, Tháng mười 27, 2010
co cach nao viet de cho hinh an o duoi nuoc chuyen dong nhu o tren mat nuoc khong nhi
-
- +1
-
-
được viết bởi papi, Tháng mười hai 16, 2010
Mình đã làm theo hướng dẫn nhưng không chạy (làm bằng flash 8 )
cũng chẳng báo lỗi nó chỉ ra cái ảnh nền không có bóng nước
Mong mọi người giúp đỡ
cũng chẳng báo lỗi nó chỉ ra cái ảnh nền không có bóng nước
Mong mọi người giúp đỡ
-
- +2
-
-
được viết bởi aloflash, Tháng mười hai 17, 2010
Bạn nên cài phần mềm bản CS3 trở lên để nó hỗ trợ tốt hơn, mình chưa test trên flash8 có thể 1 số code ko hỗ trợ cho bản flash 8.
Chúc bạn vui vẻ.
Chúc bạn vui vẻ.
-
- +0
-
-
được viết bởi bily12e, Tháng mười hai 23, 2010
co ai chi giup e voi ( Flash CS3 ma van lam k dc. mac du e go dung code,view len thi thay hinh chop lien tuc chu k thay j nua het ( ai giup e voi
( Flash CS3 ma van lam k dc. mac du e go dung code,view len thi thay hinh chop lien tuc chu k thay j nua het ( ai giup e voi
-
- +0
-
-
được viết bởi aloflash, Tháng mười hai 25, 2010
Bạn hãy làm lại từ đầu nhé, lần lượt từng bước 1, nhớ chọn loại ActionScript 2.0 nhé. Không bạn mở file gốc mình đính kèm xem chi tiết nhé. Chắc bạn thiếu ở bước nào đó.
Chúc vui vẻ.
Chúc vui vẻ.
-
- +0
-
-
được viết bởi Funky man, Tháng một 02, 2011
Bó tay, nguyên cái hình, không chạy cái effect bóng nước gì đâu., chơi ác thiệt, xài CS3 vẫn không duoc, file gốc thì không mở bằng Flash duoc luon.
-
- +0
-
-
được viết bởi PowerDesign, Tháng ba 28, 2011
Tạo 1 file kích thước khác thì code sửa ở đâu vậy bạn?
-
- +0
-
-
được viết bởi Tera, Tháng tư 03, 2011
Làm ơn coi lại dùm cái đi anh, làm hoài ko ra , xài cs3 + as2 mà cũng ko làm ra được , hix
-
- +0
-
-
được viết bởi lin lin chin, Tháng tư 13, 2011
anh ấy chỉ đúng rồi! coi chừng các bạn chưa đặt tên cho moviecilp ak! bạn vieest code tên aloflash mà không đặt tên cho movieclip thì sap adobe hiểu và xử lý!
-
- +0
-
-
được viết bởi CuVinh, Tháng tư 25, 2011
chỉ cần sửa cái aloflash thành alo_flash là xong hết thôi có zậy mà cũng ko chịu xem lại code nữa
-
- +0
-
-
được viết bởi Long, Tháng năm 14, 2011
Mình làm được rồi, thanks bài viết rất hữu ích. Mấy bạn khác làm không đc là do chưa đặt tên cho mc để viết code.
-
- +0
-
-
được viết bởi hung, Tháng bảy 13, 2011
các bạn chỉ mình với, mình xài CS5 mà vẫn chỉ len tấm hình, không có bóng nước nào cả, làm đi làm lại gần 20 lần vẫn vậy, bó tay
-
- +0
-
-
được viết bởi ..., Tháng bảy 14, 2011
Tôi cũng làm rất kỹ từng bước, cũng đặt tên movie clip giống trong đoạn code " aloflash " nhưng vẫn là một bức ảnh trơ. Bạn xem lại code cho anh em đê.
-
- +1
-
-
được viết bởi Trần Anh Tuấn, Tháng bảy 19, 2011
Mình xài flash 8, cũng thử đặt mc tên là "aloflash" nhưng không dc, vào code thử đổi thành "alo_flash", rồi đặt mc tên là "alo_flash" cũng không được luôn, mình đã test thử các bước giống bài tut hơn 30 lần rồi, pó tay, có ai giúp mình không ?!!!
-
- +0
-
-
được viết bởi quyên, Tháng bảy 20, 2011
mình xài cs3 mà cũng không được, chỉ ra kết quả là hình backgound thôi. Hic, không biết admin chỉ có sai không đấy.
Mà download demo về mở lên xem cũng không được, nó báo "Unexpect file format". Potay luôn.
Mà download demo về mở lên xem cũng không được, nó báo "Unexpect file format". Potay luôn.
-
- +1
-
-
được viết bởi Tuấn hoàng, Tháng bảy 22, 2011
Bạn ơi chỉ lại có hình anh được không, minh ko hiểu cách đặt fame của bạn nhu nào. mình làm theo các bước thì actions ko chạy bạn chỉ mình mới hen. nick yahoo minh nè chuot_2484 rất mong được bạn giúp đỡ cảm ơn nhiều lắm :
-
- +0
-
-
được viết bởi Trần Anh Tuấn , Tháng bảy 23, 2011
admin chỉ đúng rồi các bạn àh, sau mấy ngày "ấm ức" vì thực hiện k được, mình đã thành công, xin phép bổ sung cho admin tí nhé, sau khi đặt cho mc name là "aloflash", các bạn nhớ chỉnh ở instance name cũng là "aloflash" luôn thì ok thôi ! Chúc các bạn thành công !
-
- +1
-
-
được viết bởi TuÂ¥n ho�ng, Tháng bảy 23, 2011
Ồ mai cốt, thế hệ 8x hồi trước ko đc ăn muối nhiều, bạn đừng chơi mẹo nữa, bầy dõ dàng lên nha huhu ,. minh cũng đã làm đc huhu
-
- +0
-
-
được viết bởi n.Tu, Tháng bảy 30, 2011
Anh bạn này hướng dẫn hơi chệch 1 tí code 1 tên mà tên đặt 1 tên thì làm sao ra được.Mọi người sửa lại trong đoạn code là "alo_flash" thì được luôn
-
- +0
-
-
được viết bởi Nguyễn Thanh Bình, Tháng tám 01, 2011
Cái tên thì đúng rồi nhưng không hiểu sao vẫn báo 4 lỗi mặc dù nó vẫn chạy có bác nào biết chỉ giùm cái nhỉ.
-
- +0
-
-
được viết bởi Ngoc Hoa, Tháng chín 01, 2011
Cam on tat ca cac ban nhieu lam. dac biet la admin nha
-
- +0
-
-
được viết bởi nguyenthienson, Tháng chín 04, 2011
Bạn ơi cho mình xin link dow cái phần mềm này với !
-
- +0
-
-
được viết bởi nguyentoan5387, Tháng chín 17, 2011
mãi mới tìm ra thiếu sót chỗ nào. Bác nào chưa làm ra kiểm tra lại kĩ lúc đặt tên đi nhé. Vào properties đặt tên aloflash cạnh cái swap ấy thanks bài viết của tác giả.
-
- +0
-
-
được viết bởi why not?, Tháng mười 16, 2011
Vào properties,instance name chỗ nào hả bạn chỉ mình với máy mình nó không báo lỗi nhưng cũng không chạy được hiệu ứng mong các bạn chỉ giúp mình với nhé
-
- +0
-
-
được viết bởi Nguyễn Xuân Trung, Tháng mười 22, 2011
admin ơi chỉ giúp em tải phần mềm làm flash này có được ko?thank anh nhiều.
-
- +0
-
-
được viết bởi nguyen van toan, Tháng mười 25, 2011
minh lam duoc roi.ban nao lam chua duoc thi vao properties ,ben tay trai co mot o trong dat ten vao la aloflash la xong
thanks admind
thanks admind
-
- +0
-
-
được viết bởi nguyen van toan, Tháng mười 25, 2011
tai sao em lam duoc 3 den 4 lan roi .lan sau lam cung giong nhu cach buoc truoc thi ko lam duoc la sao ko hieu ?
anh chi giup minh voi
anh chi giup minh voi
-
- +0
-
-
được viết bởi Hoc Flash, Tháng mười một 12, 2011
Công nhận hay ! Thx Admin đã chia sẻ !
@All : Có 3 chỗ trong code nếu các bạn không đặt tên file đúng theo aloflash thì nhớ đối chỗ nào có chữ đó thành tên Movie Clip mà các bạn đặt. Thêm 1 lưu ý là nhớ copy tên Movie Clip mà các bạn đặt tên vào chỗ khoanh tròn ở hình bước 5 !
Sau các lưu ý này mà các bạn làm không xong thì ... buồn vì các bạn ... non nghề
@All : Có 3 chỗ trong code nếu các bạn không đặt tên file đúng theo aloflash thì nhớ đối chỗ nào có chữ đó thành tên Movie Clip mà các bạn đặt. Thêm 1 lưu ý là nhớ copy tên Movie Clip mà các bạn đặt tên vào chỗ khoanh tròn ở hình bước 5 !
Sau các lưu ý này mà các bạn làm không xong thì ... buồn vì các bạn ... non nghề
-
- +0
-
-
được viết bởi Hoc Flash, Tháng mười một 12, 2011
Tiện thể mình cũng mong đựơc admin chỉ giáo thêm
các bạn có thấy rằng mấy cành hoa ở trên mặt nước bị cứng quá không ??? nước động thì đẹp rồi nhưng hoa lại chết nên chưa đẹp lắm .. và bài toán giờ là làm sao để các cành hoa kia rung rinh trước gió thế mới khó ... và mời admin giải bài toán này dùm anh em nha !
Thx Admin !
các bạn có thấy rằng mấy cành hoa ở trên mặt nước bị cứng quá không ??? nước động thì đẹp rồi nhưng hoa lại chết nên chưa đẹp lắm .. và bài toán giờ là làm sao để các cành hoa kia rung rinh trước gió
thế mới khó ... và mời admin giải bài toán này dùm anh em nha ! Thx Admin !
-
- +0
-
-
được viết bởi dothieuxuyen, Tháng mười hai 13, 2011
bai viet nay hay , cac ban tai phan mem adobe flash CS3 la lam duoc bai nay . minh cung ga lam nen chi cho ai ko biet tai phan mem thoi .
-
- +0
-
-
được viết bởi DoThieuXuyen, Tháng mười hai 13, 2011
Minh da lam thanh cong , cam on Amin ve bai viet nay . Con ai lam ko duoc thi hay kien nhan , that ra Amin chi ko co sai , ban chi viet them vao sua thanh aloflash thi ok . minh bo sung cho Amin roi do . minh cung ga lam , xin loi Amin vi da sua bai viet cua ban . Cam on AE trong aloflash nay . chuc suc khe AE.
-
- +0
-
-
được viết bởi Quantam.chem, Tháng mười hai 31, 2011
Cac ban chu y hay quen cai cho dat ten cho Movie Clip. He he. Cam on Linh. Tuyet voi that. Chuc ban nam moi vui ve hanh phuc. Dong gop nhieu hon nua cho nhung nguoi dam me Flash! Co khi nao ban thu huong dan lam mot cai game Flash duoc ko?
-
- +0
-
-
được viết bởi hang, Tháng một 05, 2012
troi oi sao minh da lam nhieu lan va rat can than tu viec dat ten den cac buoc sao van khong duoc nhi. ai giup voi ( flash 8 )
-
- +0
-
-
được viết bởi hang, Tháng một 05, 2012
khong bao loi gi ca nhung chi ra hinh ban dau thoi, khong co chuyen dong
-
- +0
-
-
được viết bởi tomwanbiart, Tháng một 10, 2012
thanks admin. bài viết hay quá, ứng dụng được khá nhiều đây. ^^
-
- +0
-
-
được viết bởi huong nguyen, Tháng một 19, 2012
Co cach nao khong can dung doan code ma anh cho ma co the tao hieu ung nuoc trong flash de dang ko?
-
- +0
-
-
được viết bởi Thi, Tháng một 19, 2012
mấy bạn làm sai là do đặt tên movie clip là: aloflash và tên instance lại là: alo_flash mà trong khi AS viết tên là aloflash => tên instance name phải sửa lại là aloflash thì nó mới chạy được
-
- +0
-
-
được viết bởi Nhật, Tháng ba 08, 2012
Mình dùng CS3 nhưng cũng ko làm đc. Làm các bước y hệt như hướng dẫn, đặt tên chuẩn, copy chuẩn. Nhưng cũng giống nhiều bạn ở trên. Ảnh ko có hiệu ứng bóng nước tý tẹo tèo teo nào cả Mình cũng mới tự học flash đc 2 ngày. Mình thỉng thoảng ko hiện đc cái bảng properties có nút wap, mình chỉ sửa tên đc ngay trong hộp name bên phải hoặc chuột phải chọn properties thôi.
Mình cũng mới tự học flash đc 2 ngày. Mình thỉng thoảng ko hiện đc cái bảng properties có nút wap, mình chỉ sửa tên đc ngay trong hộp name bên phải hoặc chuột phải chọn properties thôi.
-
- +0
-
-
được viết bởi thobeo, Tháng ba 23, 2012
Ban Nhat phai su dung dat ten trong bang Properties co chu Wap nhu trong hinh moi dc. Click 1 lan vao MovieClip do thi no se hien ra bang Properties cua bang do.
-
- +0
-
-
được viết bởi Nhật, Tháng ba 27, 2012
Tuyệt vời, cám ơn các bạn, nhất là aloflash và thobeo. Mình đã làm đc rồi. Hehe I Love U
I Love U
-
- +0
-
-
được viết bởi Nhật, Tháng ba 27, 2012
Những bạn từng ko làm đc như mình là do chưa điền lại tên aloflash vào cái ông trắng dài, gần nút có chữ Wap. Mặc dù đã đặt tên lúc F8 rồi, mình vẫn phải điền lại vào cái ô đó một lần nữa mới đc
-
- +0
-
-
được viết bởi Trí, Tháng ba 29, 2012
mình thấy hiệu ứng đẹp quá nên vọc ngay nhưng là lính mới trong flash nên mày mò cả ngày cũng ko làm dc, mình xin các bạn đã làm dc hãy hướng dẫn giúp mình nhé, cám ơn nhiều lắm
các bạn làm ơn ping dùm mình yh mail Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó. '> Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó. nhé
các bạn làm ơn ping dùm mình yh mail Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó. '> Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó. nhé
-
- +0
-
-
được viết bởi Trí, Tháng ba 30, 2012
hehe nghịch ngợm chút xíu, tự nhiên làm dc, kỳ lạ ghê. cám ơn mọi người
-
- +0
-
-
được viết bởi Thuy Trang, Tháng ba 30, 2012
Bạn Trí đọc những Comment của mọi người viết chắc sẽ làm được thôi
-
- +0
-
-
được viết bởi alex, Tháng tư 06, 2012
các bạn phải đặt tên cho cái movie clip nữa ngay chỗ swap ak... flash 8 chạy tốt các ạ... em làm đc rùi thanks ad nhé
-
- +0
-
-
được viết bởi TienXu.Flash Mặt nước sóng sánh, Tháng năm 26, 2012
đặt gạch bài này
tut quá tuyệt
tut quá tuyệt
-
- +0
-
-
được viết bởi yoona nguyen, Tháng sáu 03, 2012
lúc đầu mình cũng ko làm dc...
ai xài flash 8 xem nhé.
đầu tiên: chèn hình. sau đó chuột fai: Break Apart
dùng chuột kéo ô chữ nhật như admin hướng dẫn. nó sẽ hiện ra 1 ô chấm chấm. mình nhấp f8. đặt tên là: aloflash . chọn movieclip. ok
sau đó nhìn xuống cái bảng properties góc trái. có cái hàng instance name j đó. gõ vào aloflash.
rùi tạo layer 2: làm y như admin chỉ: copy đoạn code đó vào f9. sau đó ctrl enter là ra ngay
lúc đầu mình cũng ko làm dc... sau đó mò lại thì thấy ad thiếu hướng dẫn chỗ đặt tên bên dưới properties
ai xài flash 8 xem nhé.
đầu tiên: chèn hình. sau đó chuột fai: Break Apart
dùng chuột kéo ô chữ nhật như admin hướng dẫn. nó sẽ hiện ra 1 ô chấm chấm. mình nhấp f8. đặt tên là: aloflash . chọn movieclip. ok
sau đó nhìn xuống cái bảng properties góc trái. có cái hàng instance name j đó. gõ vào aloflash.
rùi tạo layer 2: làm y như admin chỉ: copy đoạn code đó vào f9. sau đó ctrl enter là ra ngay
lúc đầu mình cũng ko làm dc... sau đó mò lại thì thấy ad thiếu hướng dẫn chỗ đặt tên bên dưới properties
-
- +0
-
-
được viết bởi thitruongnhadat, Tháng sáu 21, 2012
http://www.thitruongnhadat24h.vn/
thanhks bạn rất nhiều
thanhks bạn rất nhiều
-
- +0
-
-
được viết bởi phú, Tháng bảy 24, 2012
admin ơi, export ra định dạng .avi phải làm thế nào để nó chạy y như định dạng .swf
thank admin nhiều nha !(^_^)
thank admin nhiều nha !(^_^)
-
- +0
-
-
được viết bởi chautuan, Tháng tám 07, 2012
bài viết hay, đúng là admin viết thiếu
dùng chuột kéo ô chữ nhật như admin hướng dẫn. nó sẽ hiện ra 1 ô chấm chấm. mình nhấp f8. đặt tên là: aloflash . chọn movieclip. ok
sau đó nhìn xuống cái bảng properties góc trái. có cái hàng instance name j đó. gõ vào aloflash.
rùi tạo layer 2: làm y như admin chỉ: copy đoạn code đó vào f9. sau đó ctrl enter là ra ngay
dùng chuột kéo ô chữ nhật như admin hướng dẫn. nó sẽ hiện ra 1 ô chấm chấm. mình nhấp f8. đặt tên là: aloflash . chọn movieclip. ok
sau đó nhìn xuống cái bảng properties góc trái. có cái hàng instance name j đó. gõ vào aloflash.
rùi tạo layer 2: làm y như admin chỉ: copy đoạn code đó vào f9. sau đó ctrl enter là ra ngay
-
- +0
-
-
được viết bởi troi, Tháng chín 11, 2012
wow hay quá !!! Mình sẽ lấy ảnh người iu để làm cô ấy bất ngờ Thanks Admin rất nhiều
-
- +0
-
-
được viết bởi Luckytomoto, Tháng mười hai 03, 2012
Mình ko làm dc, loay hoay mấy lần rồi ý, thay cả tên rồi mà, bạn nào xem mình với, mình up lên coi nhé.
http://www.mediafire.com/?82rphcagln81lao
Thanks!
http://www.mediafire.com/?82rphcagln81lao
Thanks!
-
- +0
-
-
được viết bởi tớ là chớp, Tháng ba 10, 2013
cái bác chủ thớt này, nhiều chỗ chả nói rõ ràng gì cả, những chi tiết nhỏ nhặt không cần nói thỳ dân hiểu biết nhiều về shop có thể hiểu, nhưng ma mới còn gà mờ thì bó tay.
cái cách hai e chả biết làm sao mà bác lật được ngược ảnh . bác nào chỉ nốt dùm e cái
cái cách hai e chả biết làm sao mà bác lật được ngược ảnh . bác nào chỉ nốt dùm e cái
-
- +0
-
-
Viết bình luận
| < Lùi | Tiếp theo > |
|---|
