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 ứ

Đầ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 Importvà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 Name là vienkinh. 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:

Trong đó 450 và 320 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.