31/05/2010 14:58 GMT+7

Flash CS4 - Bài 17: sử dụng Motion presets để tạo slideshow (Phần 2)

GV TRƯƠNG VĂN NĂNGCông ty TNHH Khải Thiên (KTC Co., Ltd)

TTO - 10. Tạo preloader. Trong phần này, bạn sử dụng lại preloader từ bài 16 và cải tiến một chút để làm phong phú thêm phần preloader.

10.1 Chọn File Open… từ menu (Hoặc phím tắt Ctrl+O):

Phóng to

10.2 Chọn file 016_slideshow.fla và bấm nút Open để mở file này:

Phóng to

10.3 Chọn keyframe 1 của layer preloader:

Phóng to

10.4 Trên Stage bạn thấy preloader được chọn:

Phóng to

10.5 Chọn Edit Copy từ menu (Hoặc phím tắt Ctrl+C):

Phóng to

10.6 Bấm chuyển sang file 017_slideshow2.fla:

Phóng to

10.7 Bấm đúp vào Layer 1 và đổi tên layer thành preloader:

Phóng to

10.8 Chọn frame đầu của layer preloader:

Phóng to

10.9 Chọn Edit Paste in Center từ menu (Hoặc phím tắt Ctrl+V):

Phóng to

10.10 Bạn thu được Movie Clip preloader ở giữa Stage. Bấm đúp chuột vào Movie Clip preloader để mở Timeline ra:

Phóng to

10.11 Bấm đúp chuột tiếp vào Graphic symbol vong tron bên trong Timeline của Movie Clip preloader. Flash đưa bạn vào Timeline của Graphic symbol vong tron với một vòng tròn đang được chọn (xuất hiện các hạt li ti):

Phóng to

10.12 Kéo chuột từ góc trên bên trái sang góc dưới bên phải một đoạn ngắn sao cho hình chữ nhật phủ khoảng 2/3 vòng tròn:

Phóng to

Nhả chuột ra, bạn thu được 2/3 vòng tròn được chọn:

Phóng to

10.13 Bấm phím Delete để xóa phần đã được chọn:

Phóng to

10.14 Bấm chọn Scene 1 để quay ra Timeline chính:

Phóng to

Flash đưa bạn ra Timeline chính với Movie Clip preloader đã được điều chỉnh:

Phóng to

Chọn Control Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem lại kết quả.

Flash sẽ xuất thành file 017_slideshow2.swf như sau:

Phóng to

10.15 Để thấy được hoạt động của preloader, bạn chọn View Simulate Download từ menu của Flash Player đang chạy. (Không phải từ menu lúc đang biên soạn Flash document) (Hoặc phím tắt Ctrl+Enter).

Phóng to

Lúc này bạn sẽ nhìn thấy vòng tròn xoay liên tục, báo hiệu tác phẩm của bạn đang được tải về:

Phóng to

Sau khi tải về và play:

Phóng to

11 Bỏ qua keyframe đầu khi đã tải về đầy đủ.

Khi Flash play đến frame cuối và quay lại frame đầu, bạn thấy màn ảnh hiện lên preloader rất nhanh. Điều này có thể gây khó chịu cho người xem. Bạn có thể sử dụng một dòng lệnh actionscript đơn giản để khắc phục điều này.

11.1 Lúc này layer preloader đang được chọn. Bấm vào nút New Layer để bổ sung layer mới:

Phóng to

11.2 Flash bổ sung Layer 7 vào Timeline. Bấm đúp vào và đổi tên thành actions:

Phóng to

11.3 Di chuyển đến frame cuối. Bấm chọn frame cuối (frame 182) của layer actions:

Phóng to

11.4 Bấm phím tắt F6 để bổ sung keyframe:

Phóng to

11.5 Bấm phím phải chuột vào frame 286 của layer actions cho xuất hiện menu ngữ cảnh và chọn Actions:

Phóng to

11.6 Action Panel xuất hiện. Bạn gõ vào dòng chữ gotoAndPlay(2); như hình minh họa (chú ý không có khoảng trắng ở giữa và viết đúng chữ hoa và chữ thường). Câu lệnh này yêu cầu Flash di chuyển đến frame số 2 và play:

Phóng to

Bấm vào dấu x ở góc trên bên phải để đóng Actions Panel lại.

Trên Timeline tại keyframe 182 bạn thấy có một chữ a nhỏ. Đó là dấu hiệu cho biết có action tại frame này:

Phóng to

Chọn Control Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem lại kết quả.

Trong bài thực hành, bài đã tạo được slideshow cho bốn ảnh. Bạn có thể thực hiện theo cách tương tự để áp dụng cho nhiều ảnh hơn.

Bạn có thể tạo một slideshow cho bộ sưu tập mới bằng cách thay thế các ảnh trong Library như được hướng dẫn ở bài thực hành 16. Phần này được trích dẫn từ bài thực hành 16 cho bạn tiện tham khảo.

12. Cập nhật ảnh cho slideshow.

12.1 Chọn Library Panel:

Phóng to

Nội dung của Libray hiện ra:

Phóng to

12.2 Bạn có thể tạo các folder để sắp xếp Library theo các nhóm đối tượng để dễ quản lý. Bạn bấm vào nút New Folder phía dưới Library để bổ sung một folder:

Phóng to

Flash bổ sung folder với tên mặc định là untitled folder 1:

Phóng to

12.3 Bạn đổi tên folder thành bitmaps:

Phóng to

12.4 Bạn sẽ chuyển các ảnh vào folder này. Giữ phím Ctrl, bạn bấm chọn lần lượt vào các tấm ảnh, các ảnh được chọn sẽ có màu đậm hơn trong Library:

Phóng to

12.5 Rê chuột đến một trong các ảnh đã được chọn:

Phóng to

12.6 Kéo chuột về phía folder bitmaps. Khi chuột đã đến folder bitmaps, folder sẽ đổi màu như hình minh họa:

Phóng to

Nhả chuột ra, các ảnh đã được chuyển vào folder bitmaps:

Phóng to

12.7 Bấm vào hình tam giác bên trái folder để mở nội dung folder ra, các ảnh lại xuất hiện với biểu tượng nằm dịch sang phải một chút so với biểu tượng của các symbol khác:

Phóng to

12.8 Bấm đúp vào biểu tượng bitmap của ảnh tên Blue-hills.jpg:

Phóng to

12.9 Hộp thoại Bitmap Properties xuất hiện. Bấm vào nút Import…:

Phóng to

12.10 Hộp thoại Import Bitmap hiện ra. Di chuyển đến nơi chứa ảnh cần import. Chọn ảnh Lago_Lacar.jpg (đính kèm theo bài mẫu) và bấm nút Open:

Phóng to

Ảnh mới được đưa vào thay thế ảnh cũ. Tuy nhiên tên ảnh vẫn không đổi:

Phóng to

12.11 Bạn đổi tên ảnh thành Lago_Lacar.jpg. Bấm OK để đóng hộp thoại lại:

Phóng to

Ảnh mới và tên ảnh được cập nhật trong Library:

Phóng to

12.12 Thực hiện theo các bước trên đây để thay mới toàn bộ các ảnh trong slideshow, bạn thu được slideshow cho bộ sưu tập ảnh mới. Chọn File Save as… từ menu để lưu file với tên gọi tương ứng với bộ sưu tập mới của bạn.

Bài tập gợi ý:

* Đối với mỗi Movie Clip chứa ảnh, bạn bổ sung một layer đặt tên thành text. Sử dụng Text Tool để viết một dòng chữ ngắn phía dưới để mô tả nội dung ảnh.

---------------------------------------------------------------------------------------

KIẾN THỨC ADOBE FLASH CS4 CĂN BẢN

* Bài 1: Giới thiệu chương trình Flash và các điểm mới của Flash CS4 Professional* Bài 1: Giới thiệu giao diện chương trình * Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame* Bài 2: Tạo ảnh động theo phương pháp Frame-By-Frame(tiếp theo)* Bài 3: Tạo ảnh động theo phương pháp Motion Tween* Bài 4: Tạo ảnh động theo phương pháp Shape Tween* Bài 4: Tạo ảnh động theo phương pháp Shape Tween (tiếp theo)* Bài 5: Sử dụng Motion Presets để tạo ảnh động* Bài 5: Sử dụng Motion Presets để tạo ảnh động(tiếp theo)* Bài 6: Điều chỉnh Motion Path* Bài 7 Tối ưu hóa cách quản lý các Layer* Bài 7: Tối ưu hóa cách quản lý các Layer(tiếp theo)* Bài 7: Tạo bản preview cho custom presets* Bài 8: Tạo hiệu ứng lấp lánh cho chữ* Bài 8: Tạo hiệu ứng lấp lánh cho chữ (tiếp theo)* Bài 8: Tìm hiểu về Rectangle Tool, tọa độ và kích thước* Bài 9: Tạo trò chơi bóng bàn đơn giản* Bài 9: Tạo trò chơi bóng bàn đơn giản(tiếp theo)* Bài 9: Tìm hiểu về Oval Tool(tiếp theo)* Bài 10: Sử dụng Shape Hint* Bài 10: Sử dụng Shape Hint (tiếp theo) * Bài 10:Tìm hiểu về PolyStar Tool* Bài 11: Classic Tween và trò chơi bập bênh đơn giản* Bài 11: Classic Tween và trò chơi bập bênh đơn giản (tiếp theo)* Bài 11: Phần lý thuyết bổ sung cho bài thực hành: Tìm hiểu về Grid* Bài 12: Thay đổi tốc độ hoạt động với tùy chọn Ease* Bài 12: Tìm hiểu về Ease(Phần lý thuyết bổ sung cho bài thực hành)* Bài 13: Sử dụng Classic motion guide* Bài 13: Tìm hiểu về Tweening(Phần lý thuyết bổ sung cho bài thực hành)* Bài 14: Sử dụng Color effect* Bài 14: Sử dụng Color effect(tiếp theo)* Bài 14: Tìm hiểu về Color Effect(Phần lý thuyết bổ sung cho bài thực hành)* Bài 16: Áp dụng color effect để tạo slideshow* Bài 16: Áp dụng color effect để tạo slideshow(Phần 2)* Bài 16: Áp dụng color effect để tạo slideshow(Phần 3)* Bài 16: Áp dụng color effect để tạo slideshow(Phần 4)* Bài 16: Tìm hiểu về Preloader(Phần 5)* Bài 17: Sử dụng Motion presets tạo slideshow(Phần 1)* Bài 17: Sử dụng Motion presets tạo slideshow (Phần 2)