Hướng dẫn làm hiệu ứng kính lúp trong flash

Bạn di chuột vào flash này xem có ngạc nhiên không

Đầu tiên cần chuẩn bị 2 ảnh giống nhau, 1 ảnh nguyên gốc và 1 ảnh đã xử lí bằng bộ lọc (filter), ở đây em chọn filter là blur (có thể dùng Photoshop cho dễ)
Trong ví dụ này mình chỉ làm 1 ảnh, nhưng mình sẽ làm cho kích thước nó to nhỏ khác nhau để giống kiểu kính lúp hơn

Bước 1: Bạn tạo 1 file flash mới có kích thước 640 x 480 (đó là kích thước bức ảnh của mình còn tuỳ vào bức ảnh của bạn to hay nhỏ mà chọn kích thước sao cho hợp lý).

Bước 2: bạn tạo 4 layer như trong hình vẽ, ở layer 1 bạn import cái ảnh vào, nhớ set position chính giữa nhé (ở đây cần nói thêm cho các bạn newbies hiểu, muốn set position đúng chính giữa thì cách dễ nhất là sử dụng properties, chỉ cần chọn cái ảnh, mở properties lên, ngay chỗ X, Y điền vào số 0 hết).




Bước 3: Ở layer 2 thì copy và pase cái ảnh ở layer 1 sang, cũng set position chính giữa nhé.

Bước 4: Ở layer thứ 3, dùng công cụ Oval tool vẽ 1 vòng tròn, màu gì cũng được, vì bước sau chúng ta sẽ convert layer này thành mask layer. Tiếp theo chọn vòng tròn này (nhớ chọn luôn phần viền ngoài (stroke)) và convert nó thành Movie Clip, tên là c1 và instance name cũng là c1.

Bước 5: Convert cái layer thứ 3 thành mask layer bằng cách click chuột phải vào layer, chọn mask.



Bước 6: Ở layer trên cùng vẽ 1 vòng tròn cùng kích cỡ với vòng tròn c1 ban nãy, nhưng không có phần fill, chỉ là stroke thôi nhé, phần stroke để dày lên cho dễ nhìn. Chọn vòng tròn này và convert nó thành Movie Clip, tên là c2 và instance name cũng là c2.

Bước 7: thế là chúng ta đã hoàn thành phần hình ảnh, bây giờ bắt tay vào viết code:

Chọn frame 1 layer 4 và viết vào đó đoạn code này:
this.onEnterFrame = function () { c1._x = _xmouse; c1._y = _ymouse; c2._x = _xmouse; c2._y = _ymouse; };

Bước 8: Tới đây movie của chúng ta vẫn chưa giống kính lúp hẳn, cần phải làm thêm sao cho phần trong vòng tròn phóng to lên một chút nữa thì sẽ giống hơn nhỉ.
Bạn scale cái ảnh ở layer thứ 2 cho lớn hơn khoảng 50% (dùng công cụ Free tránform tool để kéo to bức ảnh ra.), đặt nó ở vị trí trên chếch chếch 1 chút *-:). convert nó thành Movie Clip tên là i1, instance name cũng là i1.


Sau đó thêm đoạn code này vào đoạn code lúc nãy (dưới dòng c2._y = _ymouse)
i1._x = _xmouse - (_xmouse/512)*i1._width + i1._width/2; i1._y = _ymouse - (_ymouse/384)*i1._height + i1._height/2;

Và bây giờ chúng ta có đoạn code hoàn chỉnh:
this.onEnterFrame = function (){ c1._x = _xmouse; c1._y = _ymouse; c2._x = _xmouse; c2._y = _ymouse; i1._x = _xmouse - _xmouse / 640 * i1._width + i1._width / 2; i1._y = _ymouse - _ymouse / 480 * i1._height + i1._height / 2; };



Note: Đây chỉ là ví dụ cơ bản, các bạn có thể biến tấu theo những cách khác dựa trên bài hướng dẫn cơ bản này. Chúc các bạn có những tác phẩm độc đáo và tuyệt đẹp

Posted in: Thực hành code