Tạo Shape Tween

Bài giảng Thiết kế đa truyền thông với Adobe Flash CS6: Học phần D giới thiệu tổng quan tạo hoạt hình. Cùng nắm các kiến thức trong học phần này thông qua việc tìm hiểu hoạt hình, lựa chọn phương pháp hoạt hình, tìm hiểu về Tween trong Timeline, các bước tạo và sao chép Motion Path. Ngoài ra, bài giảng còn cung cấp một số thông tin hữu ích về tạo hoạt hình cho Symbol lồng ghép, tạo hoạt hình Frame-by-Frame và tạo Shape Tween và còn một số nội dung khác nữa. Để tìm hiểu rõ về nội dung chi tiết bài giảng, mời các bạn cùng tham khảo.

43p kimngan29092009 15-10-2018 121 38   Download

Di chuyển ảnh Shape Hint đến điểm trong đối tượng sau cùng mà tương thích với điểm đầu tiên bạn đã đánh dấu. Diễn hoạt đoạn phim lại lần nữa để xem chế độ Shape Hint làm thay đổi chế độ chuyển động Shape Tweening. Di chuyển các Shape Hint để tinh chỉnh ảnh chuyển động. 6. Lặp lại tiến trình này để thêm vào các Shape Hint.

8p bichtram865 30-05-2011 61 8   Download

Bạn thu được kết quả hình chữ nhật chuyển sang ngôi sao năm cánh đều và đẹp. Đồng thời màu cũng chuyển tiếp liên tục từ đỏ sang xanh. Một số bài tập gợi ý: Sử dụng Shape Tween và Shape Hint để chuyển hình chữ nhật thành hình tam giác. Xem gợi ý hai Shape Hint ở hình minh họa sau đây (so sánh kết quả với bài mẫu 010_shape_hint2.fla)

5p bichtram859 17-05-2011 78 7   Download

8.5 Giữ phím Shift và bấm chọn vào frame 122 của layer T, toàn bộ các layer khác cũng được chọn: 8.6: Bấm phím tắt F5 để bổ sung frame vào cho các layer: 9. Tạo folder chứa các layer. Với cách thực hiện như trên, bạn dễ dàng kiểm soát được nội dung của các layer. Bạn có thể quản lý hiệu quả hơn nữa bằng cách tạo folder chứa các layer này. 9.1 Bấm chọn layer T trên cùng của Timeline:

5p bichtram859 17-05-2011 47 5   Download

4.3. Đổi số 12 thành 50 rồi nhấn phím ENTER để chấp nhận giá trị mới: 4.4. Bấm chuột vào Stage và gỏ vào dòng chữ TUỔI TRẺ ONLINE: 4.5. Bấm phí ESCAPE để thoát khỏi khung text, lúc này cả đoạn text đã được chọn và có một khung hình chữ nhật bao quanh: 4.6. Để canh giữa đoạn text này trên Stage, trước hết chọn EditCut từ menu:

5p bichtram859 17-05-2011 60 7   Download

6.4 Bấm giữ chuột và kéo mép trên của Timeline lên phía trên đến khi nhìn thấy toàn bộ các layer thì nhả chuột ra: 6.5 Bấm chuột chọn keyframe 1 của layer T: 6.6 Giữ phím Shift và bấm chuột chọn keyframe 1 của layer E. Lúc này keyfram 1 của tất cả layer được chọn: 7. Sử dụng Motion Presets để tạo ảnh động. 7.1 Chọn Window Motion Presets từ menu:

5p bichtram859 17-05-2011 84 7   Download

Phần lý thuyết bổ sung cho bài thực hành Tìm hiểu về Pencil Tool Pencil Tool là công cụ để vẽ đường cong bất kỳ. Sau khi chọn Pencil Tool, chuột sẽ chuyển sang hình cây bút chì. Để vẽ, bạn bấm chuột vào vị trí đầu, kéo chuột theo đường cong bất kỳ đến vị trí cuối và nhả chuột ra để thu được một đường cong. Bạn cũng có thể vẽ đường thẳng bằng cách giữ phím Shift trước khi vẽ. Bạn có thể chọn bổ sung phương án xử lý nét vẽ bằng cách chọn Pencil Mode...

5p bichtram859 17-05-2011 68 5   Download

8.3 Bấm chuột ra vùng xám để bỏ chọn. Bấm chuột chọn lại ký tự U: 8.4 Ở Motion Presets Panel, bấm phím phải chuột vào my motion trong Custom Presets và chọn End at current location: 8.5 Flash tạo motion tween cho ký tự U và bổ sung Layer 3 vào timeline: 8.6 Tiếp tục chọn các ký tự còn lại và thực hiện tương tự. Bạn thu được 13 motion tween cho 13 ký tự:

5p bichtram859 17-05-2011 63 7   Download

6.2 Motion Presets Panel xuất hiện. Bạn đưa chuột vào hình tam giác màu xám phía trước biểu tượng folder của Default Presets. Bấm chuột để mở folder này ra. 6.3 Bạn bấm chuột vào fly-in-blur-left để xem thử hiệu ứng này. Bạn sẽ dùng hiệu ứng này để tạo ảnh động cho ký tự đầu tiên (chữ T).

4p bichtram859 17-05-2011 69 6   Download

Nếu thấy bục gỗ vượt lên phủ qua tấm ván, bạn phải chọn bục gỗ và di chuyển xuống một chút, hoặc chuyển cho layer chứa bục gỗ xuống dưới layer chứa tấm ván. 10. Tạo Classic Tween cho tấm ván chuyển động. 10.1. Bấm chuột vào Gradient Transform Tool trên thanh công cụ và giữ vài giây cho xuất hiện menu phụ, chọn Free Transform Tool (Free Transform Tool sẽ được giới thiệu ở các bài thực hành

5p bichtram859 17-05-2011 65 5   Download

Theo mặc định, các Tween do Flash tạo ra có tốc độ đều. Tuy nhiên, có lúc bạn phải cho tốc độ nhanh dần hoặc chậm dần cho phù hợp với thực tế hoặc tạo một sự khác biệt nào đó. Để thay đổi tốc độ, bạn sử dụng tùy chọn Ease trên Property Inspector. Trong bài này, bạn sẽ tạo chuyển động cho một quả bóng rơi xuống và nảy lên. Sau đó sử dụng tùy chọn Ease để thay đổi tốc độ cho phù hợp với thực tế. Các bước thực hành như sau...

5p bichtram855 14-04-2011 57 3   Download

ếu thấy bục gỗ vượt lên phủ qua tấm ván, bạn phải chọn bục gỗ và di chuyển xuống một chút, hoặc chuyển cho layer chứa bục gỗ xuống dưới layer chứa tấm ván. 10. Tạo Classic Tween cho tấm ván chuyển động. 10.1. Bấm chuột vào Gradient Transform Tool trên thanh công cụ và giữ vài giây cho xuất hiện menu phụ, chọn Free Transform Tool

5p bichtram855 14-04-2011 47 3   Download

Bạn thu được kết quả hình chữ nhật chuyển sang ngôi sao năm cánh đều và đẹp. Đồng thời màu cũng chuyển tiếp liên tục từ đỏ sang xanh.Một số bài tập gợi ý: Sử dụng Shape Tween và Shape Hint để chuyển hình chữ nhật thành hình tam giác.

5p bichtram855 14-04-2011 82 7   Download

Tạo folder chứa các layer. Với cách thực hiện như trên, bạn dễ dàng kiểm soát được nội dung của các layer. Bạn có thể quản lý hiệu quả hơn nữa bằng cách tạo folder chứa các layer này.Bấm chọn layer T trên cùng của Timeline

5p bichtram855 14-04-2011 65 4   Download

Bấm giữ chuột và kéo mép trên của Timeline lên phía trên đến khi nhìn thấy toàn bộ các layer thì nhả chuột ra:Bấm chuột chọn keyframe 1 của layer T:Giữ phím Shift và bấm chuột chọn keyframe 1 của layer E. Lúc này keyfram 1 của tất cả layer được chọn:

5p bichtram855 14-04-2011 51 3   Download

Đổi số 12 thành 50 rồi nhấn phím ENTER để chấp nhận giá trị mới:Bấm chuột vào Stage và gỏ vào dòng chữ TUỔI TRẺ ONLINE:Bấm phí ESCAPE để thoát khỏi khung text, lúc này cả đoạn text đã được chọn và có một khung hình chữ nhật bao quanh:

5p bichtram855 14-04-2011 85 5   Download

Xuất file thành flash movie Để xuất file thành flash movie, bạn chọn Control Test Movie từ menu: Flash sẽ xuất thành file 004_motion_path.swf:

5p bichtram855 14-04-2011 87 5   Download

Đưa chuột vào Stage. Lúc này chuột biến thành cây bút chì. Bạn vẽ một đường cong bất kỳ từ góc dưới bên trái lên góc trên bên phải: Nhả chuột ra bạn thu được đường cong như trên. 5.5 Bấm chọn Selection Tool từ thanh công cụ

5p bichtram855 14-04-2011 63 4   Download

Điều chỉnh motion path 4.1. Rê chuột vào con chim phía dưới cho đến khi phía dưới chuột xuất hiện hình mũi tên bốn chiều. Bấm chọn con chim. Lúc này đường thẳng nối từ vị trí đầu đến vị trí cuối của chim xuất hiện.

5p bichtram855 14-04-2011 47 4   Download

Motion Presets panel có 2 folder: Default Presets chứa các hiệu ứng ảnh động mà Flash đã dựng sẵn và Custom Presets chứa các hiệu ứng do bạn lưu lại. Trong hình trên, my motion là Custom Preset mà bạn đã lưu trong bài thực hành.

5p bichtram855 14-04-2011 78 5   Download