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



You are here: Tutorials  Hiệu ứng Làm kính lúp trong flash

Làm kính lúp trong flash

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

Chào các bạn, trước đây mình có hướng dẫn 1 bài làm kính lúp, nhưng nó khá sơ xài nên rất nhiều bạn mới học flash còn bỡ ngỡ và nhiều thắc mắc hoặc có thể vẫn chưa làm được.

Hôm nay mình sẽ hướng dẫn chi tiết để bạn nào chưa làm được sẽ có thể hoàn thành và ứng dụng hiệu ứng này tốt trong công việc hay xây dựng những ý tưởng mới.

Đầu tiên mình xin gửi vài ví dụ nữa để các bạn tham khảo trước khi chúng ta bắt đầu với TUT này:

Đây là kiểu mở từng phần khi di chuột. Bạn cũng có thể ứng dụng làm tấm thiệp gửi cho người thân yêu. Lúc đó có thể bạn hãy thay hình kính lúp tròn thành hình trái tim cho lãng mạn nhỉ.

Còn đây là kiểu thông thường:

Và đây là Demo cho TUT hôm nay:

Và tiếp là chúng ta bắt đầu nhé:

Bước 1:

Bạn hãy chuẩn bị 2 bức ảnh, 1 bức ảnh có kích thước nhỏ và 1 bức ảnh có kích thước lớn hơn. Trong ví dụ demo cho TUT này mình làm 1 bức ảnh có kích thước 450x320:

http://aloflash.com/file/TUT/kinh-lup/kinh-lup-small.png

Và 1 bức ảnh lớn có kích thước gấp khoảng 4 lần bức ảnh 450x320 là 1875x133:

http://aloflash.com/file/TUT/kinh-lup/kinh-lup-big.png

Các bạn nên làm bức ảnh lớn có kích thước lớn gấp số lần chẵn (2 lần, 3 lần hoặc 4 lần) bức ảnh nhỏ. Để lúc code ta sẽ dễ dàng hơn.

Để làm ảnh lớn và nhỏ các bạn có thể sử dụng công cụ Paint của Windows (Các bạn có thể vào đây để tham khảo cách sử dụng) hoặc sử dụng Photoshop hay 1 số phần mềm làm ảnh khác.

Sau khi đã có 2 bức ảnh rồi, chúng ta sẽ bắt đầu sang bước 2.

Bước 2:

Mở phần mềm Flash, tạo 1 tài liệu Flash mới và chọn loại ActionScript 2.0.

Bước 3:

Import bức ảnh nhỏ (như trong ví dụ là: kinh-lup-small.png) bạn đã có vào Flash bằng cách chọn: File > Import > Import to Stage... hoặc nhấn (Ctrl + R). như hình dưới:

Sau khi Import xong bạn chọn bức ảnh và căn chình nó vào giữa khung làm việc của Flash (Stage). bằng cách chọn hình ảnh vừa Import vào và mở bảng Align bằng cách vào Window > Align hoặc nhấn (Ctrl + K) lựa chọn như sau:

Sau đó bạn hãy khóa Layer này lại để tránh việc di chuyển hay đụng chạm đến nó, bằng cách click vào biểu tượng chiếc khóa như hình dưới:

Ok, giờ bạn tạo 1 layer mới bằng cách Click vào button mình đã khoanh đỏ:

Sau đó bạn lại Import nốt bức ảnh lớn vào trong Flash như cách trên ở layer mới tạo ra.

Như vậy chúng ta sẽ có 2 layer, với layer 1 sẽ chứa bức ảnh nhỏ và Layer 2 sẽ chứa bức ảnh lớn:

Bước 4:

Click chọn bức ảnh lớn nhấn F8 để Convert nó thành dạng MovieClip như hình dưới:

Bạn nhìn sang bảng Properties của MovieClip này tại ô Instance Name bạn đặt tên là big.

Sau đó bạn cũng khóa layer này lại và Click vào biểu tượng con mắt gần chiếc khóa để ẩn layer này đi cho đỡ choáng diện tích, lúc cần thiết ta lại bật con mắt để hiện thị layer này sau.

Bước 5:

Sử dụng công cụ Oval Tool (O) vẽ 1 vòng tròn (Khi vẽ bạn giữ phím Shift để tạo vòng trong tuyệt đối). vòng tròn này sẽ chính là chiếc kính lúp sau này của chúng ta, do vậy khi vẽ bạn hãy cân nhắc về độ lớn của kính cho phù hợp với file Flash của bạn.

Giờ bạn Sử dụng công cụ Selection Tool (V) click chọn vào hình tròn vừa vẽ nhấn F8 để Convert nó thành dạng MovieClip và đặt tên trong ô Instance Name là kinhlup làm xong bạn cũng khóa layer này lại nhé.

Vậy là giờ chúng ta đã có chiếc kính lúp nhưng muốn nó giống kính lúp hơn còn thiếu cái viền cho nó.

Bước 6:

Tạo viền cho kính lúp, tạo 1 layer mới sử dụng công cụ Oval Tool (O) chúng ta chọn màu Stroke (viền) và màu Background (nền) là trong suốt nhé:

Sau khi đã chọn màu xong chúng ta tiếp hành vẽ viền cho kính, bạn vẽ sao cho cái viền Stroke nó bao quanh hình kính lúp ở bước trước nhé.

Sau khi vẽ xong bạn có thể sử dụng công cụ Selection Tool (V) Click chuột vào đường viền vừa vẽ để chỉnh độ lớn của viền. Vùng mình khoanh đỏ ở dưới chính là độ lớn của viền, mình để trong ví dụ này là 3.

Giờ chúng ta nhấn F8 để Convert cái viền này thành dạng MovieClip và đặt tên ở ô Instance Namevienkinh. Vậy là chúng ta đã hoàn thành cơ bản việc thiết kế cho bài tập này. Còn 1 công việc khá quan trong nữa là tạo tâm cho các đối tượng Symbol (đối tượng) để khi code tâm của đối tượng sẽ ở nơi ta mong muốn. Bạn có thể tham khảo bài viết này để xem cách tạo tâm: http://aloflash.com/forum/forum.php?mod=viewthread&tid=835&extra=page%3D1

Với bài tập này bạn cần tạo tâm cho chiếc viền kính và chiếc kính lúp. Sau khi mình chỉnh sửa tâm nó sẽ có dấu cộng tương ứng ở vị trí như sau:

(Tùy theo việc bạn muốn di kính lúp từ đâu mà tạo tâm ở đó nhé, thông thường nên chọn vào giữa đối tượng, còn với những hình đặc biệt khác hình tròn thì bạn có thể tạo tùy ý theo sở thích).

Vậy là xong với việc tạo tâm cho kính lúp và viền của nó.

Giờ bạn mở khóa và mở con mắt ở layer chứa hình ảnh lớn. Sau khi đã mở mắt và khóa ở layer bạn sử dụng công cụ Selection Tool (V), click đúp 2 lần để vào bên trong MovieClip big (ảnh lớn) này. click chọn bức ảnh và SET tọa độ cho nó như sau:

Các bạn để ý, mình chọn SET tọa độ là -450 và -320 cho hình ảnh này, vì hình ảnh con có toạ độ 450x320 nên mình SET tọa độ của hình ảnh lớn là -450 và -320 để khi Soi nó sẽ khớp với hình. (Với các bạn làm kích thước khác thì khi SET tọa độ nó sẽ tương ứng với giá trị âm của kích thước ảnh nhỏ của bạn).

Chúng ta trở lại bên ngoài bằng cách vào 1 trong những chỗ mình khoanh đỏ.

Bước 7:

Click chọn layer 3 (LAYER CHỨA KÍNH LÚP) chuột phải chọn Mask:

Bước 8:

Tạo 1 layer mới Click vào Frame đầu tiên nhấn F9 để mở bảng ActionScript và chèn vào đoạn code sau:

this.onEnterFrame = function (){ kinhlup._x = _xmouse; kinhlup._y = _ymouse; vienkinh._x = _xmouse; vienkinh._y = _ymouse; big._x = _xmouse - _xmouse / 450 * big._width + big._width / 4; big._y = _ymouse - _ymouse / 320 * big._height + big._height / 4; };

Trong đó 450320 là kích thước file Flash (hay hình ảnh nhỏ) của bạn. Giá trị 4 là số lần lớn hơn của kích thước ảnh to so với ảnh nhỏ. (nếu ảnh to của bạn lớn hơn ảnh nhỏ 2 lần thì bạn thay số 4 thành 2 nhé).

Hãy thử nhấn Ctrl + Enter để xem kết quả nhé.

Vậy là chúng ta đã hoàn thành bài tập này.

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

aloflash.com

Download

Bình luận (21)Add Comment
0
...
được viết bởi Thuy Trang, Tháng tư 23, 2012
Cảm ơn anh ! Bài viết hay quá, em làm được rồi, mấy đứa bạn sẽ giật mình cho xem smilies/cool.gif
0
...
được viết bởi NOVA Logic, Tháng năm 06, 2012
Thứ nhất tôi xin cám ơn vì bài viết khá hay và sự chỉ bảo khá tận tình của người viết. Tuy nhiên, tôi cũng xin mạo muội góp 1 số ý kiến như thế này:
- Việc tạo đường viền như trong bài viết là khá phức tạp và khó làm. Tại sao chúng ta không vẽ luôn hình một hình tròn có viền và sau có "cut" cái viền đó và "paste in place" sang layer mới?
- Bạn cũng quên hướng dẫn về việc điều chỉnh kích thước của stage sao cho phù hợp với khung hình.
Dù sao cũng thanks vì bài viết.
0
...
được viết bởi NOVA Logic, Tháng năm 06, 2012
Mình làm nó bị sai tọa độ zoom. Ai chỉ mình với?
0
...
được viết bởi My, Tháng năm 07, 2012
Bạn chú ý xem file ảnh lớn so với ảnh bé là gấp bao nhiêu lần, và MovieClip ảnh lớn có tọa độ bên trong là "Âm" của kích thước ảnh bé.
0
...
được viết bởi aloflash, Tháng năm 07, 2012
Cảm ơn bạn đã góp ý smilies/smiley.gif
Thực ra với việc tạo đường viền, bạn nào biết rồi thì sẽ có cách làm riêng, ví dụ ta chỉ cần CLick chuột phải vào vùng nền hoặc viền của hình tròn chọn Distribute to Layers Như hình:[url= http://aloflash.com/file/TUT/k...-layer.jpg là sẽ được 1 layer mới chứa đối tượng mà ta đã chọn. Nhưng mình thấy bài viết khá dài nên đã lược bỏ phần hướng dẫn này, Mình nghĩ cứ làm theo cách thủ công có lẽ sẽ hiệu quả với tất cả mọi người, rồi trong lúc học mọi người sẽ phát triển và cải biến cách làm trở nên khoa học và sáng tạo hơn.
Rất mong nhận được sự đóng góp của bạn và mọi người !
Còn về sai tọa độ hình khi Zoom thì như bạn My ở trên đã nói, bạn chú ý 2 điểm.
1 là đoạn code ở bước 8
2 là SET tọa độ MovieClip của hình ảnh lớn cuối bước 7
Chúc bạn vui vẻ và thành công !
0
...
được viết bởi Ray, Tháng chín 11, 2012
Bạn có thể giải thích đoạn code AS được k? mình k hiểu nên k thể nào nhớ được, tks bạn nhiều lắm smilies/smiley.gif
0
...
được viết bởi nhim xu, Tháng mười 22, 2012
tại sao m làm hình như sai tọa độ. k zoom lên đc. k bít sai ở đâu. smilies/sad.gif(
0
...
được viết bởi giúp đỡ cách làm, Tháng mười một 23, 2012
bạn ơi cho mình hỏi cách làm lash như flash đâu tiên có 3 cái kính với. mình đang dạy sinh học lớp 6 thấy flash đó hay và thiết thực quá. mà mình mới làm được có một chiếc kính lúp. Bạn giúp mình với!
0
...
được viết bởi ...., Tháng mười hai 23, 2012
mình làm cũng bị sai tòa độ lun, chẳng biết sai chỗ nào mặc dù làm giống y như trên, sử dụng hình ảnh ở trên lun, chưa tìm ra nguyên nhân mong dc giúp đỡ
0
...
được viết bởi thobeo, Tháng mười hai 28, 2012
Các bạn chú ý cái tâm của MovieClip và kích thước của File mà bạn làm là sẽ không bị sai tọa độ nữa
0
...
được viết bởi hùng, Tháng một 26, 2013
sao mình làm mà cái chỗ hắn phóng to như kính lúp hắn nằm ở gần giữa khung hình là sao bạnsmilies/sad.gif
0
...
được viết bởi huonghainam, Tháng ba 01, 2013
Bài viết của bạn thật hữu ích. Tôi thấy rất hay. Có 1 thắc mắc nho nhỏ, mong bạn chỉ giúp: Tôi làm tâm cho các MovieClip bằng cách:
- Chọn đối tượng
- Nhấn F8, chọn MovieClip
- Ở bên Registration, tôi chọn ô vuông ở chính giữa để chọn làm tâm (Tôi dùng Flash smilies/cool.gif
Bằng cách đó tôi chọn tâm cho cả 2 đối tượng là viền kính và kính lúp. Làm như vậy có ổn k nhỉ?
P/S: khi tôi kiểm tra thì hình ảnh Zoom không được chính xác như Tut của bạn.Không hiểu sao nữa.
Mong bạn chỉ giúp. Thạnks!
0
...
được viết bởi Trần Duy Hoàng, Tháng tư 18, 2013
mình có 1 thắc mắc là sao minh lam nhưng khi zoom lại lệch là thê nào ah.
0
...
được viết bởi nhung, Tháng sáu 09, 2013
tạo sao kính soi mà ảnh ko thay đổi gì nhỉ,mấy tut đều thế
0
...
được viết bởi ..., Tháng sáu 27, 2013
tại sao của mình thì cái kính lúp đứng yên vậy nhăng vẫn zoom đc bình thường
smilies/cry.gif
0
...
được viết bởi ..., Tháng sáu 28, 2013
nó cứ bị sai tọa độ zôm lên ý nhỉ smilies/shocked.gif
0
...
được viết bởi ..., Tháng sáu 28, 2013
Mình thử làm theo cách này thì nó không bị lệch zoom nữa :v không biết đúng không:
Ở bước 3 thì sau khi import cũng ấn F8 nhưng chọn graphic rồi ok
Bước 4 cũng sau khi improt rồi ấn F8 cũng chọn graphic rồi ấn F8 lần nữa chọn MovieClip ròi làm tương tự hướng dẫn
Rồi cứ làm theo hướng dẫn nếu Ctrl + Enter mà thấy lệch thì dùng dụng cụ Select kích đúp vào ảnh lớn rồi kéo thả cái ảnh lớn sao cho nó trùng với cái mà khi chạy nó bị lệch ý ( vd như nếu bạn soi vào 1 chỗ mà thấy nó lệch lên trên thì kéo cái ảnh xuống dưới căn sao cho vừa đủ) rồi thứ lại xem :v
Mình thử down cái file mẫu về rồi so sánh làm cái giống hệt rồi làm tương tự với cái khác thì thấy nó được nên post nên cho các bạn thử làm.
P/S đừng gạch đá nhe XDsmilies/cheesy.gif
0
...
được viết bởi yen vy, Tháng hai 17, 2014
trời ơi mày viết tầm phào em tao còn làm được làm hay hơn cái này nữa :
0
...
được viết bởi nhật, Tháng hai 17, 2014
đụ má thằng nào chửi tao viết tầm phào
0
...
được viết bởi thuy, Tháng ba 24, 2014
sao cái đoạn code k làm đc hả adim
0
...
được viết bởi mrmourinho8x, Tháng mười hai 17, 2014
mình muốn chuyển đổi ảnh 1 vài hiệu ứng như trong powpoint . Bạn nào chỉ giáo cho mình vài chiêu được ko

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

busy