Hướng dẫn tạo một hiệu ứng quảng cáo hình sản phẩm

Thảo luận trong 'Lập trình website' bắt đầu bởi Đình Trinh, 25 Tháng tư 2013.

  1. Offline

    Đình Trinh

    • Windows 3.0

    Số bài viết:
    20
    Đã được thích:
    42
    Điểm thành tích:
    40
    Nhằm nâng cao kiến thức cũng như giúp đỡ những bạn trong quá trình làm đồ án TKWeb được tốt hơn, mình xin chia sẽ kinh nghiệm cách làm 1 banner hiệu ứng quảng cáo sinh động cho bài Web của mình bằng phần mềm Macromedia Flash.


    Bước 1

    Chuẩn bị một bức ảnh sản phẩm mà bạn cần quảng cáo. Trong bài này ví dụ mình chọn 1 chiếc smartphone HTC.

    [IMG]
    Bước 2

    Tạo một file flash mới. Nhấn phím Ctrl + J trên bàn phím (Document Properties) và thiết lập độ rộng của nó là 346 px, chiều cao là 387 px (tùy thuộc vào hình ảnh sản phẩm của bạn đang có mà độ rộng và chiều dài có thể khác đi). Chọn màu nền là màu trắng, tốc độ Frame rate là 24, sau đó kích OK.

    [IMG]
    Bước 3

    Vào File > Import > Import to stage (phím tắt là Ctrl + R) để nạp một bức ảnh vào trong file Flash đang làm việc.

    Bước 4

    Chọn bức ảnh vừa nạp, vào phần Align Panel (Ctrl + K) và thực hiện các thao tác sau:

    - Đảm bảo nút To stage trong phần Align/Distribute đã được chọn
    - Kích vào nút Align horizontal center
    - Kích vào nút Align vertical center

    [IMG]
    Bước 5

    Trong khi bức ảnh vẫn đang được chọn, nhấn phím F8 (Convert to Symbol) để chuyển bức ảnh sang dạng Movie Clip Symbol.

    [IMG]
    Bước 6

    Kích vào frame 15 và nhấn phím F6. Sau đó, trở lại frame đầu tiên, dùng công cụ Selection Tool (V) và kích vòa bức ảnh để chọn nó. Vào phần Properties Panel (Ctrl + F3) và chọn tab Filters ở phía bên trái. Kích vào biểu tượng dấu cộng và chọn Blur filter. Đảm bảo các thông số sẽ như sau:

    [IMG]
    Bước 7

    Kích chuột phải vào bất kỳ vị trí nào trong vùng màu xám giữa frame 1 và 15 trên timeline và chọn Create Motion Tween từ menu xuất hiện

    [IMG]
    Bước 8

    Lại chọn công cụ Selection Tool (V) và kích đúp vào layer 1 để đổi tên nó thành HTC. Sau đó, tạo một layer mới phía trên layer HTC và đặt tên là mask.

    [IMG]
    Bước 9

    Chọn layer mask vừa tạo, dùng công cụ Rectangle Tool (R) vẽ một hình chữ nhật dài ở phía bên trái của bức ảnh với kích thước khoảng 50 x 410 px (hình dưới)

    [IMG]
    Bước 10

    Kích vào frame 15 và nhấn phím F6

    Bước 11

    Trong khi vẫn chọn frame 15, dùng công cụ Selection Tool (V) và thực hiện thao tác theo hình sau.

    [IMG]
    Bước 12

    Chọn frame 1 và vào phần Properties Panel. Trong menu Tween chọn Shape.

    [IMG]
    Bước 13

    Chọn layer mask và chuyển nó sang dạng mask bằng cách kích chuột phải vào tên layer và chọn Mask.

    [IMG]
    Bước 14

    Tạo một layer mới phía trên layer mask và đặt tên là HTC 1. Sau đó trở lại frame đầu tiên của layer HTC và nhấn phím Ctrl + C (Copy). Kích vào frame 15 của layer HTC 1, nhấn phím F6 và sau đó nhấn tổ hợp phím Ctrl + Shift + V (Paste in Place)

    Bước 15

    Kích vào frame 30 và nhấn phím F7 (Blank keyframe). Trở lại frame 15 và nhấn phím Ctrl + C (Copy). Sau đó vào frame 30 và nhấn Ctrl + Shift + V (Paste in Place).

    Bước 16

    Kích chuột phải vào bất kỳ vị trí nào trên vùng màu xám giữa frame 15 và 30 trên timeline và chọn Create Motion Tween từ menu xuất hiện.

    [IMG]
    Bước 17

    Tạo một layer mới phía trên layer HTC 1 và đặt tên là mask 1.

    Bước 18

    Chọn layer mask 1, kích vào frame 15 và nhấn F6. Sau đó vẽ một hình chữ nhật ở phía bên phải của ảnh với kích thước khoảng 50 x 410 px.

    [IMG]
    Bước 19

    Kích vào frame 30 và nhấn phím F6. Sau đó, dùng công cụ Selection Tool (V) và thực hiện thao tác như hình sau

    [IMG]
    Bước 20

    Trở lại frame 15, vào phần Properties Panel. Tại menu Tween bạn chọn Shape.

    Bước 21

    Chọn layer mask 1 và chuyển nó sang dạng mask bằng cách kích chuột phải vào tên layer và chọn Mask.

    [IMG]
    Bước 22

    Kích vào frame 30 của layer mask và HTC, lần lượt nhấn phím F5.

    Sau khi hoàn thành xong bạn có thể nhấn Ctrl + Enter để xem sản phẩm đã tạo.

    Chúc các bạn thành công!^^
  2. Offline

    white.smut

    • Administrator

    • Loading: |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||] 99% Completed - Error: Disconnected. Please try again!
    Số bài viết:
    842
    Đã được thích:
    425
    Điểm thành tích:
    450
    Có cái file demo nữa thì tốt nhỉ?
    Đình Trinh thích bài này.

Chia sẻ trang này

Advertising: Linux system admin | nukeviet | nukeviet 4 | Upload ảnh miễn phí