Giáo trình thiết kế web - Cách tạo ra các ảnh chuyển động animation

GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYấT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HÌNH ẢNH CHƯƠNG 9 - t a m s ' CÁCH TẠO RA CÁC ẢNH CHUYỂN ĐỘNG ANIMATION TỔNG QUAN VỀ CÁCH TẠO RA CÁC ANIMATION Bạn tạo ra các Animation bằng cách thay đổi nội dung của frame liên tiếp nhau. Bạn có thể tạo đối tượng di chuyển ngang qua vùng Stage, thay đổi kích thước, hướng xoay, màu sắc, hình dạng và cách làm cho đối tượng vào hay ra mờ dần (Fade In hay Fade Out). Những thay đổi này có thể xảy ra độc lập nhau hoặc kết hợp với những sự thay đổi khác. Ví dụ, bạn có thể tạo cho đối tượng xoay và khi nó di chuyển vào ngang qua vùng Stage mờ dần. Có hai cách để tạo ra một đối tượng Animation chuyển động liên tiếp trong Flash: chuyển động Animation theo frame-by-frame và Tweened Animation. Trong cách chuyển động Animation theo frame-by-frame, bạn phải tạo ra ảnh toong mỗi frame. Trong cách chuyển động theo Tweened Animation, bạn có thể tạo ra frame bắt đầu và frame kết thúc và cho phép Flash tạo ra nhiều frame trong khoảng giữa frame đầu và frame cuối này. Flash thay đổi kích thước, hướng xoay, màu sắc hoặc các thuộc tính khấc ngang nhau giữa frame đầu và frame cuối để tạo ra ảnh thay đổi chuyển động về hình dáng. Cách chuyển động theo Tweened Animation là một cách có hiệu quả để tạo ra ảnh chuyển động và thay đổi liên tục trong khi đó kích thước file rất nhỏ. Trong cách chuyển động Tweened Animation này, Flash chỉ lưu lại các giá tộ thay đổi giữa các frame. Trong cách chuyển động Animation theo frame-by-frame, Flash lưu lại các giá tri cho mỗi frame kết thúc. Để biết thêm cách hướng dẫn tạo ra ảnh chuyển động Animation này, bạn hãy tham k h ả o th ê m t à i l i ệ u “GIÁO TRÌNH THIẾT KẾ WEB : PHAN THựC h à n h - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH” c ù n g t á c g iả . Chủ V : Ngoài ra bạn cũng có thể tạo ảnh chuyển động Animation bằng cách dùng Set Property action. Bạn có thể xem mục ActionScript Help để biết thêm chi tiết. CÁCH TẠO RA CÁC KEYFRAME Một keyframe là một frame mà nơi đó bạn thay đổi quá trình chuyển động Animation. Khi bạn tạo ra ảnh chuyển động Animation theo cách frame-by-frame, mỗi frame là một keyframe. Trong keyframe chuyển động theo cách Tweened Animation, bạn phải xác định tại những điểm quan trọng trong quá trình chuyển động và cho phép Flash tạo ra nội dung giữa các frame. Flash hiển thị các frame bổ sung của chế độ Tweened Animation như các màu xanh nhạt, xanh đậm có mũi tên vẽ giữa các keyframe. Flash sẽ vẽ lại hình dáng của đối tượng trong mỗi keyframe. Bạn chỉ nên tạo ra các keyframe tại những điểm đó toong ảnh thay đổi. Các Keyframe được xác định trong thanh thước Timeline : một keyframe có một vòng tròn đặt trên đó cho biết keyframe đó đang chứa dữ liệu và một keyframe trống thể hiện một đường thẳng đứng trước một frame. Các frame thêm vào sau đó trên cùng một layer sẽ có cùng một dữ liệu như keyframe. TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 191 BIÊN SOẠN: KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 9 » a □ 1 r 1 “f - 5 \ r- 20 - l J Layer 2 * * D -» I / ^ 1 1Ị Keyframe có chứa dữ liệu V 10 15 2 0 * • 4¥ m - \k Static Keyframe trong □ Cách tạo ra một keyframe, bạn có thể chọn một trong những bước sau đây: • Chọn một frame trong thanh thước Timeline và chọn trên tành đơn Insert > Keyframe. • Nhấp phải chuột (trong Windows) hoặc nhấp Control (trong Macintosh) tại một frame trong thanh thước Timeline và chọn lệnh Insert Keyframe có trong trình đơn. Ú \ r 25 30 C ie đ te M o tio n T w een Insert Frame Remove Flames I M S Insert B lank Keyliame Cleai K.ẹyfi<jrne i f l i p i CÁC BIỂU TƯỢNG CHUYỂN ĐỘNG ANIMATION TRÊN THANH THƯỚC TIMELINE Flash phân biệt chế độ chuyển động Tweened Animation với chế độ chuyển động frame-by-frame trong thanh thước Timeline như sau: ■ Các keyframe chuyển động theo chế độ Tweening là Motion được xác định bằng dấu chấm đen và các frame Tween ở giữa liên tục và hai đầu cổ mũi tên màu đen cùng với nền Background có màu xanh nhạt. Các Keyframe chuyển động theo chế độ Tweening là Shape được xác định bằng dấu chấm đen và các frame Tween ở giữa liên tục và hai đầu cổ mũi tên màu đen cùng với nền Background có màu xanh lá cây. ----- — TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 192 BIÊN SOẠN: KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 9 Một đường gạch cho biết các keyframe cuối cùng đang bị thiếu. Một keyframe đơn độc được xác định bằng một dấu chấm đen. Các frame có màu xám sáng sau một keyframe có chứa cùng dữ liệu và cổ một đường màu đen, một hình chữ nhật nhỏ rỗng ở frame cuối cùng. ------------ Một chữ a nhỏ chỉ ra rằng frame đổ đã được gán một Action (hành động) trong bảng Actions. Một lá cờ màu đỏ cho biết frame đó có lời chú thích và frame đó có tên. I* animation CÁC LAYER TRONG ANIMATION Mỗi Scene trong Flash movie có thể gồm có nhiều Layer. Khi bạn tạo ảnh chuyển động, bạn dùng các Layer để sắp xếp các thành phần của một trình tự chuyển động và tách biệt các đối tượng chuyển động vì vậy chúng không xoá, kết nối hoặc phân rã lẫn nhau. Nếu bạn làm Flash chuyển động nhiều nhóm hoặc các Symbol cùng lúc, mỗi đối tượng phải ở trên từng Layer độc lập. Đặc biệt, Layer Background là một ảnh tĩnh, các Layer bổ sung chỉ chứa một đối tượng chuyển động độc lập với nhau. Các Layer xuất hiện thành hàng trong thanh thước Timeline Khi một đoạn phim có nhiều Layer, Track và hiệu chỉnh các đối tượng trong một hay nhiều Layer trở nên rất khó khăn. Công việc này trở nên dễ dàng nếu bạn làm việc với trên một dữ liệu trong từng Layer tại lúc nào đó. TỐC ĐỘ FRAME Một tốc độ frame quá chậm có thể làm cho ảnh chuyển động không liên tục. Đối với tốc độ frame quá nhanh có thể làm mờ chi tiết chuyển động. Một tốc độ frame 12 frame trên một giây (fps) thường cho kết quả tốt nhất khi xuất đoạn phim trên trang Web. Đoạn phim QuickTime và AVI movies có một tốc độ chung là 12 fps trong khi đó tốc độ ảnh chuyển động chuẩn là 24 fps. Độ chuyển động phức tạp và tốc độ của máy tính đều ảnh hưởng đến tốc độ phát lại của đoạn phim. Kiểm tra đoạn phim chuyển động của bạn trên nhiều máy khác nhau để xác định tốc độ tối ưu cho các frame. Vì bạn chỉ xấc định một tốc độ frame cho toàn đoạn phim Flash Movie, đó là một cách thiết lập tì lệ tốt nhất trước khi bạn bắt đầu tạo ra ảnh chuyển động. MỞ RỘNG ẢNH Khi bạn tạo ra một ảnh nền Background chuyển động, điều đó rất cần thiết cho việc tạo ra một ảnh tĩnh trong nhiều frame. Việc thêm vào các frame mới (không phải là keyframe) vào một Layer sẽ làm tăng kích thước dữ liệu của frame cuối trong tất cả cấc frame mới. TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 193 BIÊN SOẠN: KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 9 K 1 5 "bo ' K . 1 l > Mở rộng ảnh trong nhiều frame: 1. Tạo một ảnh toong keyframe đầu tiên của đoạn phim. 2. Chọn một frame bên phải, tại vị trí frame cuối mà b ạ n m u ố n th ê m v à o . 3. Chọn trình đơn Insert > Frame. > Dùng một Shortcut để mở rộng ảnh: 4. Tạo một ảnh trong keyframe đầu tiên. 5. Nhấn phím Alt và nhấp chuột vào keyframe sang phải. Điều này sẽ tạo ra một vùng mở rộng mới mà không cần một keyframe mới tại điểm cuối. TỔNG QUAN VỀ CHẾ ĐỘ CHUYEN đ ộ n g TWEENED ANIMATION Flash có thể tạo ra 2 loại chuyển động của Tweened Animation. ■ Chế độ Motion Tweening, bạn phải xác định các thuộc tính như vị trí, kích thước và hướng xoay cho một Instance, Group hoặc khối ký tự tại một điểm và sau đó bạn thay đổi các thuộc tính này tại một điểm khác. ■ Chế độ Shape Tweening, bạn phải vẽ đối tượng tại một điểm và sau đó bạn thay đổi hình dạng hoặc vẽ một đối tượng khác tại một điểm khác. Flash sẽ thêm vào các giá trị hoặc hình dạng cho các frame giữa, tạo ra chuyển động. TẠO CHUYỂN ĐỘNG (TWEEN) CHO CÁC INSTANCE, NHÓM (GROUP) VÀ KÝ Tự (TYPE) Để làm thay đổi các thuộc tính của các Instance, nhóm và ký tự, bạn sử dụng chế độ chuyển động Motion Tweening. Flash có thể thay đổi vị trí, kích thước, hướng xoay và kéo xiên các Instance, nhóm hoặc ký tự. Ngoài ra, Flash có thể thay đổi màu của Instance và ký tự, tạo ra sự chuyển đổi màu từ từ hoặc tạo ra một Instance ở chế độ vào hoặc ra mờ dần. Để thay đổi màu của các nhóm hoặc ký tự, bạn phải tạo cho chúng trở thành các Symbol. Bạn có thể xem mục “Cách tạo ra các Symbol” để biết thêm chi tiết. Nếu bạn thay đổi số frame giữa hai keyframe hoặc di chuyển nhóm hoặc Symbol trong keyframe, Flash sẽ tự động tween các frame này một lần nữa. □ Bạn cố thể tạo ra chế độ chuyển động Motion Tweening dùng một trong hai cách sau: ■ Cách Thứ N hất: Tạo ra keyframe đầu và keyframe kết thúc cho quá trình chuyển động và dùng tùy chọn Motion trong mục Tweening từ bảng Frame Properties. I Flame m f i 3 ln s tl Ỉ G F la m e ] Ị j j< f S o u |T jE F(e< j ( ? ) J Label: I ” 1 1 T w ee n in g :| M o tio n ’ 1 S c-ìle 1 E asin g : |o - r j R o ta te : ! A u to ^ 1 III I 'r f rK . O p tio n s; Ị- O l i e n t to p a th S y n ch ro n ize | 7 S n a p J TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 194 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 ■ Cách Thứ Hai ỉ Tạo ra keyframe chuyển động đầu tiên và sau đổ chọn trên trình đơn Insert > Create Motion Tween và di chuyển đối tượng đến vị trí mới trong vùng. Rash sẽ tự động tạo ra keyframe kết thúc. Khỉ thay đổi vị trí, bạn cố thể tạo cho đối tượng di chuyển dọc theo một đường dẫn phỉ tuyến (Nonlinear Path). Ảnh ví dọ con ong tại frame thứ hai, ba và thứ tư là kết quả chuyển động từ key&ame đầu đến keyframe cuối cùng □ Tạo một ảnh chuyển động Motion Tween dùng tùy chọn Motion trong mục Tweening: 1. Nhấp chuột vào tên của Layer để kích hoạt nố ưở thành Layer hiện hành và sau đố chọn một Keyframe trống trong Layer nơi bạn muốn tạo vùng chuyển động bắt đầu. 31 s □ 1—1 I I r 1—1 -1 1 1 11 IUa BsiiM 1 .j f lEI 1 IK 0 © © ỉ I □! n * | 2. Tạo một Instance, nhóm hay một khối ký tự trong vùng Stage hoặc kểo một Instance của một Symbol trong cửa sổ thư viện Library. Để chuyển động đối tượng đã vẽ, bạn phải chuyển đổi đối tượng đó trở thành một Symbol. 3. Tạo keyframe thứ hai (keyframe kết thúc), nơi bạn muấn vùng chuyển động kết thúc bằng cách dùng chuột nhấp vào xác định vị trí frame cuối cùng. Sau đó bạn nhấp phải chuột chọn lệnh Insert Blank Keyframe có trong trình đơn để thêm vào các keyframe trống cho đoạn phim. ũ? Layer 1 □ ■0 5 10 15 J —L JL-LJL - LJL-LJL-I—UJLJ-JL Xác định vị frame cuối 20 25 30 35 40 C reate M o tio n T w ee n ỉn se it Frame R em ove Fram es J j '□ [ □ I jo ] |l2-0<F In se ll Key flam e Inseit B lank Keyiiam e Cl&ar Kejiliame Chọn lệnh Insert Blank Keyframe TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 195 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 ạ * a □ V ' ' 5 ' 1 1C -.5 ị L J 1 • ũl U) Layer 1 * • □ ¡1 S Ẽ ? m ỉ 1 Lầm *1 i-]|f 20 [ĨMÍPS Sau khi chọn lệnh Insert Blank Keyframe 4. Sau đố bạn nhấp chuột vào keyframe thứ nhất. Tại đây bạn cố thể thực hiện một trong những bước sau để thay đổi Instance, Group hoặc khối ký tự tại frame cuối cùng: ■ Di chuyển đối tượng đến vị trí mới. ■ Thay đổi kích thước, hướng xoay hoặc kéo xiên đối tượng. ■ Thay đổi màu sắc của đối tượng (chỉ có Instance hoặc khối ký tợ). ■ Để thay đổi màu sắc của các thành phần khác ngoài Instance hoặc khếi ký tự, bạn phải dùng chế độ chuyển động Shape Tweening. 5. Chọn trình đơn Window > Panels > Frame để xuất hiện bảng Frame. 6. Đối với mục Tweening, chọn Motion. Sau khi bạn chọn lệnh Motion trong mục Tweening, trên thanh thước Timeline xuất hiện các đường gạch trên keyframe © © ( ý - l c u h 151 j lr' gt-j ~ i^ J Fiame| ' [ j f f i S c u p C J E(fe<| !. j ) L d t i p l : T'#« riirig; j Motiori 3 w Seal* Easing: |o ” Rotate: | Au(0 ~T3 F “ rims« O p t i o n s : J ” O r i e n t t o p a t h i f ” Synchronise Snap 7. Nếu bạn muốn thay đổi kích thước của đối tượng như trong bước 4, bạn hãy chọn lệnh Scale trong trình đơn Modify > Transform để thay đổi kích thước của đối tượng đã chọn. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 196 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 8. Nhấp chuột vào kéo các phím mũi tên kế tiếp chọn giá trị trong mục Easing hoặc nhập vào giá tậ để hiệu chỉnh tỉ lệ thay đổi giữa các frame chuyển động như: F ía m e JÚ [S Q instiỊE Q Fr 1 SouỊ i 7 ] EFFecj! Ỷ Ir Label; 1“ T weening: 1 Moti s í " 1 Seal* Easing: |ij ' ' < Rotate: ị Auto ^ | ~ , ¡ ™ Options; O co p-ath F 3 ị, _ _ ronize Snap ■ Khi bắt đầu chuyển động tốc độ chầm chậm sau đó tãng tốc hướng về phía kết thúc chuyển động, kéo con trượt lến hoặc nhập vào giá trị từ -1 đến -100. ■ Khi bắt đầu, chuyển động có tốc độ rất nhanh sau đố giảm tốc chuyển động hướng về điểm kết thức chuyển động, kéo con trượt xuếng hoặc nhập vào giá trị dương từ 1 đến 100. ■ Theo mặc định, tấc độ thay đổi giữa các frame liên tục. Mục Easing tạo ra hình dạng đếi tượng xuất hiện nhỏ dần hoặc lớn dần bằng cách hiệu chỉnh tấc độ thaỵ đổi của chứng. 9. Để xoay các đấi tượng được chọn trong khi chuyển động, bạn cố thể chọn một tùy chọn trong trình đơn Rotate: ■ Chọn None (chế độ thiết lập mặc định) không ứng dụng chế độ xoay cho đấỉ tượng. ■ Chọn Auto xoay đối tượng chuyển động ít nhất một lần theo hướng xác định. ■ Trong mục Rotate chọn Clockwise (CW) hay Counterclockwise (CCW) để xoay đối tượng theo hướng được xác định và sau đố nhập vào gổc độ xoay. Chủ V : Hướng xoay này thêm vào bất kỳ hướng xoay nào bạn ứng dụng vào frame cuối cùng trong bước 4. 10. Nếu bạn đang dừng một đường dẫn chuyển động (Motion Path), chọn mục Orient to Path để đinh hướng đường biên chuyển động vào đường Motion Path. F r a m e 0 i f s Q l n s c } ; Q F ra m e ! B £ s o u [ ¡ G e M ® ► Label: n Tw eening: 1 M o tio n ▼ 1 | 7 S c a le E asin g : r R o ta te : 1 A u to _ V ] lo t im e s □ p lio n s : ïHSŒÜIt'l A u to ..............H i c w th ¡ 7 S n a p D C V _ J JN F r a m e B Í iS G ln s l ĩ * 2 FramefkJili: S a u [ ỉ£ ] Eítecị □ L-ãbel. Ị 1 Tweenirg:| Motion T 1 | 7 Scale 1 Easing: |ij 1 Rotate: 1 Auto ỊÕ tirris-j ^O p tions; [ 7 p i i e n f l C O p a t h ! 1 [ 7 Bjrtchrortise Is? Snap J TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 197 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 11. Chọn mục Synchronization để đảm bảo Instance diễn hoạt lặp đi lặp lại đứng trong đoạn phim. Dùng lệnh Synchronize nếu so frame quá trình chuyển động bên ưong Symbol thậm chí không nhiều hơn sấ frame mà Instance Graphic giữ trong đoạn phim. 12. Nếu bạn đang dùng một đường Motion Path, chọn Snap để gắn các thành phần chuyển động vào đường Motion Path theo điểm khai báo (Registration Point). 13. Cuối cùng nhấp chuột vào keyframe cuối cùng vào kéo đối tượng đến vị trí xác định điểm dừng chuyển động để tạo ra đường Motion Tween. Bạn cố thể xem ví dụ như hình bên dưới. © Layer 1 □ 1 5 10 15 > 1 I - I * t > ĩ ì i \ l ị '■ I ị I C E l a & h « s ã □ 1 5 1ũ 15 " ] ã ' / \ 25 ' ' ' 30 ' T 35 D ? Layer 1 * * □ í f \ © i ? m 1 } 1 m n | % \ [■ :! 13 112.0 fps I 1.5s i ] -------------------------------► (^ I t ụ h , 14. Đối tượng đã tạo xong và bạn cố thể nhấn phím Enter để diễn hoạt đoạn phim vừa tạo. Lúc này bạn sẽ thấy ký tự “Flash” sẽ chuyển động từ trái sang phải. Đoạn phim đang diễn hoạt TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 198 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB ; PHAN LỶ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h ________ CHƯƠNG 9 □ Tạo một Motion Tween dùng lệnh Create Motion Tween: 1. Chọn một keyframe trống và vẽ đối tượng trong vùng Stage hoặc kéo một Instance của một Symbol trong cửa sổ Library. Nếu vẽ một Instance thì sau khỉ vẽ phải chọn tất cả đối tượng đố. 2. Chọn trình đơn Insert > Create Motion Tween. Nếu bạn vẽ một đối tượng trong bước một, Hash sẽ tự động chuyển đổi đối tượng thành một Symbol và gán nó với tến là Tween 1. Nếu bạn vẽ nhiều đối tượng, các đối tượng thêm vào cổ các tên là Tween2, Tween3 và v.v. Bây giờ bạn sẽ thấy xuất hiện dấu cộng trên đối tượng. Đố là điểm khai báo cho Motion Tween. 11 ' 12.0 Fps G te Đối tượng trước và sau khỉ chọn lệnh Create Motion Tween 3. Nhấp chuột vào số frame mà bạn muốn vùng chuyển động kết thức và chọn trên trình đơn Insert > Frame. Sau đố nhấp chuột phải chọn lệnh Insert Keyframe cố trong txình đơn xổ xuống. Lúc này bạn sẽ thấy đường Motion Tween xuất hiện. m ã n 1 tó ir » 2fi an * 40 I Ịjj C r e a t e M o t io n T w e e n 1 z / \ \ l n s e r t F r a m e R e n o v e F r a m e s S B □ W S S H M C l P I n s e r t K e y f r a m e k '— ■■■■■ ................................................ I n s f t r t B la n k I C e y f i S n e C l e j i K e j i f r a m e - W Î / ] S c h ü l A ll C u l F l a m e s C o p y F r a m e s P a s t e F l a m e ? Chọn lệnh Insert Keyframe trong trình đơn sễ thấy xuất hiện đường Motion Tween TỦ SẨCM STK - THẾ g iớ i Đ ồ HỌA 199 BIÊN SOẠN : KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h________ CHƯƠNG 9 4. Di chuyển đối tượng Instance hoặc khối ký tợ trong vùng Stage đến vị trí frame cuối cùng mong muến. Hiệu chỉnh kích thước của cắc đấi tượng nếu bạn muến chứng chuyển động thay đổi kích thước của nó. Hiệu chinh hướng xoay nếu bạn muốn nó chuyển động xoay. Bỗ chọn đấỉ tượng khỉ bạn đã hiệu chỉnh xonr m J j lĩĩ%1 ® [M]]~ặõ~irĩEõFp7 * 5. Nhấp chuột vào keyframe cuối của quá trình chuyển động Motion Tween và chọn trên trình đơn Window> Panels > Frame. Chế độ Motion Tweemng sẽ được chọn một cách tự động trong bảng Frame. 6. Nếu bạn muấn thay đổi kích thước của đối tượng giếng như trong bước 4, bạn hãy chọn lệnh Scale trong trình đơn Modffy > Transform. 7. Nhấp chuột và kểo vào mũi tên để chọn giá trị bên cạnh mục £asing hoặc nhập giá trị vào để thaỵ đổi tốc độ chuyển động giữa các frame. ■ Khỉ bắt đầu chuyển động tốc độ chầm chậm sau đố tăng tốc hướng về phía kết thúc chuyển động, kéo con trượt lên hoặc nhập vào giá trị từ -1 đến - 100. ■ Khỉ bất đầu chuyển động tốc độ rất nhanh sau đố giảm tốc chuyển động hướng về điểm kết thúc chuyển động, kéo con trượt xuống hoặc nhập vào giá trị dương từ 1 đến 100. ■ Theo mặc định, tốc độ thay đổi giữa các frame liến tục. Mục Easing tạo ra hình dạng đếi tượng xuất hiện nhỏ dần hoặc lớn dần bằng cách hiệu chỉnh tốc độ thay đổi của chứng. 8. Để xoay các đối tượng trong lức chuyển động, bạn cố thể chọn một ưong các chế độ chọn cố trong trình đơn Rotate như sau: ■ Chọn None (chế độ thiết lập mặc định) không ứng dụng chế độ xoay cho đếi tượng. ■ Chọn Auto xoay đối tượng chuyển động ít nhất một lần theo hướng xác định. ■ Chọn Clockwise (CW) hay Counterclockwise (CCW) xoay đối tượng theo hướng được xác định và sau đố nhập vào gốc độ xoaỵ. Chứ V : Hướng xoay này thêm vào bất kỳ hướng xoay nào bạn ứng dụng vào frame cuối cùng trong bước 4. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 200 BIÊN SOẠN: KSPHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 9 9. Nếu bạn đang dùng một đường chuyển động (Motion Path), chọn mục Orient to Path để định hướng đường biên chuyển động vào đường Motion Path. Easing: |o Rotate: I Auto Options: ĩ? jöriennö pâịiiị 1 ^ SynJrt^ ni times 10. Chọn mục Synchronization để đảm bảo Instance diễn hoạt lặp đi lặp lại đúng trong đoạn phim. Dùng lệnh Synchronize nếu số frame quá trình chuyển động bên trong Symbol thậm chí không nhiều hơn số frame mà Instance Graphic giữ trong đoạn phim. 11. Nếu bạn đang dùng một đường Motion Path, chọn Snap để gắn các thành phần chuyển động vào đường Motion Path theo điểm khai báo (Registration Point). a □ u Lạya 2 □ ữ _L| %!*] *1 M Hi [T2.0 Fps I 2.?s J_u ± Đoạn phim đang cho chuyển động CHUYỂN ĐỘNG (TWENNING MOTION) DỌC THEO ĐƯỜNG DAN Các Motion Guide Layer (Layer hướng dẫn chuyển động) cho phép bạn vẽ các đường dẫn trong đó các Instance, group hoặc khối ký tự có thể chuyển động dọc theo các Motion Guide Layer. Bạn có thể kết nối nhiều Layer vào một Motion Guide Layer cho nhiều đối tượng theo cùng một đường dẫn. Một layer bình thường được kết nối đến một Motion Guide Layer sẽ trở thành một Guided Layer. Ảnh trong ví dụ này, là hai đối tượng trên 2 Layer độc lập được gắn trên cùng một Motion Path □ Tạo ra một đường Motion Path cho một ảnh chuyển động Tweened Animation: TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 201 BIÊN SOẠN: KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 9 1. Tạo một đường chuyển động Motion-Tweened Animation như đã mô tả trong phần “Tạo chuyển động các Instance, Group và Ký tự ” để biết thêm chi tiết. Nếu bạn chọn mục kiểm Orient to Path, đường cơ bản của đối tượng chuyển động sẽ hướng vào đường chuyển động Motion Path. Nếu bạn chọn mục Snap, điểm khai báo của đối tượng chuyển động sẽ bắt dính vào đường Motion Path. 2. Sau đó bạn thực hiện một trong những thao tác sau: ■ Chọn Layer có chứa đối tượng chuyển động và chọn trên trình đơn Insert > Motion Guide. ■ Nhấp phải chuột (trong Windows) hoặc nhấp phím Control (trong Macintosh) vào Layer có chứa ảnh chuyển động và chọn lệnh Add Motion Guide toong trình đơn dọc. Show AM Lock CMheis Hide Otheis Insert Layei Delete L a y « Properties... Guide Add Motion Guide 0 Mask Show M ask ing •a» n L ỡ Layer 1 • • □ , )■........................................ — ...........................» , I Flash tạo ra một Layer mới bên trên Layer được chọn với biểu tượng Motion Guide bên trái của tên Layer. 3. Dùng công cụ Pen, Pencil, Line, Circle, Rectangle hoặc Brush để vẽ đường dẫn mong muốn. 4. Lúc này tâm của đối tượng sẽ bắt dính vào điểm đầu tiên của đường Guide trong frame thứ nhất và điểm kết thúc đường Guide trong frame cuối cùng. Chứ Ý: Kéo Symbol bằng cách kéo điểm khai báo trên đối tượng để có được kết quả bắt dính vào đường Guide tốt nhất. TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 202 BIÊN SOẠN : KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h________ CHƯƠNG 9 5. Bạn có thể dấu Layer Motion Guide và đường chuyển động để chí cho xuất hiện các đếi tượng chuyển động trong khi bạn làm việc. Bạn hãy nhấp chuột vào cột biểu tượng con mắt Eye trong Layer Motion Guide. a * a □ 1 5 ' 1tỉ Guide: Layei 1 hC * □ • !? ’ Layer 1 / * ■ * © © m O . l H m s □ 1 5 I- Guide: Layer 1 1 * 0 * m u H i l m © | g i m ỉ 1 Nhấp chuột vào cột con mắt để dấu Layer Motion Guide Đối tượng là Group hoặc Symbol cố thể chuyển động tbeo một đường dẫn kbi bạn diễn hoạt chúng Bài tập ví dụ mẫu sau cũng cố cho phần tạo chuyển động cho các instance - group - type và mục chuyển động theo đường dẫn Motion Path : Bây giờ bạn có thể làm một ví dụ nhỏ với ảnh là mũi tên bay xung quanh qũy đạo như sau: TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 203 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h________ CHƯƠNG 9 1. Trước hết bạn hãy mở file Flash mới. Sau đố cho hỉển thị lưới để vẽ hình như bên dưới tại keyframe thứ nhất trong Layer 1. 2. Sau đó chọn công cụ Arrow để chọn mũi tên này và chọn trên trình đơn Modify > Group để nhóm tất cả các thành phần rời tạo thành hình mũi tên lại với nhau. Flames Gioup Ungioup B re a k A p a rt Ciil+Shĩlí+G - Clih-B Transfaim Arrange Bây giờ bạn sẽ thấy xung quanh mũi tên cố bao bọc đường viền màu xanh nhạt. Nhớ tắt lưới di. Sau đố chọn trên trình đơn Modify > Frame để hiển thị bảng Frame. Tại đây trong mục Tweening chọn Motion, mục Easing chọn là 0, mục Rotate chọn None và đánh dấu vào các tùy chọn cổ trong mục Options như Orient to path, Synchronize và Snap. m a □ [ |—I 'T~ r i* - 5 1C ^ t 1 í 15 20 2 ỊIH ỉnstỊgẸ] Fr-3mef'Ị r^SouỊ'ĩ,~l f'. Label: Ị- Twee-ning; I Motion 3 F Scale- E-55Ìn<Ị; |d "" »I R o ta te : I M a rie “ H r Options: |7] □lientiQpaih E Synohronree- [ ? Snap 4. Sau đó bạn tạo thêm một Layer mới tên là Layer2. Sau chép ảnh mũi tên này và dán vào Layer2 để cổ thêm một mũi tên nữa trong Layer2. lúc này hai mũi tên này độc lập với nhau. Bạn cố thể đổi màu cho mũi tên trên Layer 2 nàỵ để phân biệt Layerl và Layer2. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 204 BIÊN SOẠN: KSPHẠM QUANG HUY GIẨO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ỉn h Ản h ch ư ơng 9 Bây giờ bạn lặp lại bước 3 cho mũi tên i 1 1 1 1 1 30 35 40 45 50 55 trong Layer2 này. Sau đó nhấp chuột vào r Akeyframe thứ nhất trên Layerl. Sau đó Cie-ate Motion Tween xác định sế vị trí keyframe cuối cùng. / ^ ^ n s e r t Fíame Trong ví dụ chọn keyframe cuối cùng là '1 1 Remove Frames 35. Insert Keyframe Insert Blank K e y f ia m e k Clew Keyfiame 6. Bây giờ bạn sẽ thấy đường Motion Tween xuất hiện trong thanh thước Timeline trong Layerl và lặp lại bước chọn số keyframe cuối cùng như bước 5 cho Layer2. i» i □ 1 5 10 15 20 26 30 3E ................................................................ 1 ũ? Laụer 1 □ • ------------------------------------------------ ị © ® ft ♦ i b N |%| Hi 3* 112.0 Fps 2.8s i 1 7. Bây giờ bạn nhấp chuột vào Layer2 và nhấp phải chuột chọn lệnh Add Motion Guide để tạo Layer Motion Guide. Hide Others TỦ SÁCH STK-THẾ GIỚI ĐÒ HỢA 205 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h________ CHƯƠNG 9 8. Tiếp đến bạn nhấp chuột vào keyframe đầu tiên trong Layer Guide và dùng công cụ Pencil Tool hoặc công cụ Cừcle Tool để vẽ đường quỹ đạo. I » a n l l ũ y p 1! 15 20 25 30 3Ĩ Guide: Layer 2 m m o K 1 Ũ? Layer 2 * ' □ K M ________ ........................................... 1 ũ ? Layer 1 • ' □ ■ 1® © a II111 Ỉ * M ■&! Ễ-ill 1 12.0 fps c.ữs 1 1 9. Nhấp chuột vào keyframe cuối cùng trong Layerl và kéo mũi tên trên Layer này để xác định điểm ngừng chuyển động và để tạo ra đường Motion Tween. Bạn cũng làm tương tợ như vậy cho mũi tên trong Layer2. 1 5 10 15 20 25 50 Ị s • í / 1 m 5---------------------------------------------------------------------------------------- * [ * >---------------------------------------------------------------------------------------- + « \ | . 34 12.d ips ¿.is i I I Đường chuyển động Motion Tween 10. Sau đố bạn chọn keyframe thứ nhất trong Layer1 và nhấp phải chuột chọn lệnh Create Motion Tween trong trình đơn dọc để tạo điểm khai báo chuyển động cho mũi tên trong Layerl. Còn lại Layer2, bạn lặp lại bước 10 này tương tự cho Layer2. a * s □ ĩ | V 10 ’ ' ' 15 ’ ’ 20 ’ ' 25 ' 30 tỉ Guide: Layer 2 * * □ o D Ũ? Layer 2 * ■» □ II )----------------------------------------------------------------- > • 1 ----------------- * * í 1 C reate Motion Tw een f s 1 HP m L 1 n fp il Fmmp 5 i 1' 11 1 1 1 l u l l l t R em ove Flam es 11. Vì bạn muến hai mũi tên trong Layerl và Layer2 cùng chạy trên một qũy đạo theo hai hướng ngược nhau. Do đó bây giờ bạn nhấp chuột vào Layerl và chọn lệnh Rotate trong trình đơn Modify > Transform để hiệu chỉnh hướng đi của mũi tên trong Layerl này nằm trên đường quỹ đạo. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 206 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB ; PHAN LỶ THUYẾT - T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h ________ CHƯƠNG 9 Sau khi hiệu chỉnh hướng xoay cho mũi tên trong Layerl 12. Trên từng keyframe bạn phải xác định từng điểm chạy và chọn lệnh Rotate trong trình đơn Modify > Transform sau đố xoay mũi tên sao cho nố nằm ngay trên đường quỹ đạo bạn cứ tiếp tục thực hiện cho đến keyframe cuối cùng vị trí mũi tên nằm ngay vị trí xuất phát đầu tiên. Xoaỵ mũi tên sao cho nố nằm gom trên đường quỹ đạo TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 207 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 Chu V : Khi đếi tượng đến các chỗ cong bạn phải dùng công cụ xoay Rotate này lần nữa để hiệu ch ìn h cho mũi tên nằm trên đường quỹ đạo như h ìn h trang trước 13. Bạn cố thể chia các keyframe không đều nhau tùy thuộc vào đường đỉ đến chỗ khúc cong của quỹ đạo mà chia cho phù hợp YỚi đếi tượng. Guide: Lạyei 2 Q? Layei 2 I?1 Layei 1 14. Bạn thực hiện tương tợ từ bước 11 cho đến bước 13 cho mũi tên trong Layer2. Sau đó bạn sẽ có kết quả như hình bên dưới. Keyítame cuấi cùng đối tượng dừng lại tại ví ưí bắt đầu 15. Cuối cùng trước khi diễn hoạt chuyển động bạn muốn làm ẩn đường Motỉon Guide trong vùng Stage, bạn hãy nhấp chuột vào cột bên dưới con mắt ưong Layer Motìon Guide. « â □ 1 5 1 ũ? Laver 2 ^ □ « >— ► • >------ ?■ ị Ũ? Layer 1 * * □ • j----* • :>------ + ( E Ẽ3 m I I TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 208 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 Để diễn hoạt chuyển động, bạn hãy nhấn phím Ctrl + Enter để diễn hoạt ảnh trong môi trường Debug. Hai đối tượng đang chuyển động trong Flash Player □ Kết nối cắc Layer vào một Layer Motion Guide, bạn cố thể thực hiện một trong những cách sau: ■ Kéo Layer đang tồn tại bên dưới Layer Motion Guide. Bây giờ Layer này sẽ thục vào trong bên dưới Layer Motion Guide. Tất cả các đối tượng trong Layer này sẽ tự động bắt dính vào đường Motion Path. Tạo một Layer mới bên dưới Layer Motion Guide. Các đối tượng bạn chuyển động trong Layer này sẽ tự động chuyển động dọc theo đường Motion Path. Chọn một Layer bên dưới Layer Motion Guide. Chọn trên tành đơn Modify > Layer và chọn mục Guided trong hộp thoại Layer Properties. Layei Properties Name: iLaj-'er 3 |7 Show r Lock yjpe; Normal o GiUtte Guided Masked Outline Color: 1“ View layer as outlines Laụet Height: 100% OK Cancel Help ■ Nhấn phím Alt và nhấp chuột (trong Windows) hoặc nhấn phím Option và nhấp chuột (trong Macintosh) vào Layer muốn liên kết với Layer Motion Guide. □ Tháo bỏ các liên kết Layer từ một Layer Motion Guiđeỉ ■ Chọn Layer bạn muốn bỏ liên kết. ■ Sau đó bạn có thể thực hiện một trong những thao tác sau: TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 209 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 ■ Kéo Layer bên dưới Layer Motion Guide. ■ Chọn trên bình đơn Modify > Layer và chọn Normal trong mục chọn Type ưong hộp thoại Layer Properties. Layei Properties Name: 1 Layer 1 OK. 1 K Ịv» Show r Lock Cancel /T y p e : i* -Norma! r TO*)» Help c G uided o Mdsfc: c Masked Outline Color: j \ f- V ie w layer a s outlines Layer Height: ị 1 ũũ% ^ • Nhấn phím Alt và nhấp chuột (trong Windows) hoặc nhấn phím Option và nhấp chuột (trong Macintosh) vào Layer muốn bỏ liên kết với Layer Motion Guide. CHUYỂN ĐỘNG BIEN d ạ n g c h ế độ Tw een in g sh a pe Vổi chế độ chuyển động Tweening Shape, bạn có thể tạo ra một hiệu ứng tương tợ như hiệu ứng Morphing (viết tắt của từ Metamorphosing), một kỹ thuật tạo các hiệu ứng đặc biệt trong kỹ xảo hoạt hình, tạo cho một ảnh xuất hiện thay đổi liên tục thành một ảnh khác (biến hình). Ngoài ra Flash cũng làm chuỵển động vị trí, kích thước và màu sắc của đếi tượng. Kỹ xảo hoạt hình hay được sử dụng hơn gọi là tweening (viết tắt của chữ in-betweening), tạo cho máỹ tính cố khả năng tính toán và vẽ các khung hình trung gian gỉữã các khung hình chính do các hoạ sĩ vẽ bằng tay. Morphing chính là quá trình tvveening vào một đối tượng khác. Khi bạn nhấp chuột vào nút Play, ảnh con Gà sẽ chuyển động biến dạng từ từ thành con Bê Khi bạn Tweening một đối tượng tại một lúc nào đó thường tạo ra kết quả tốt nhất. Nếu bạn muốn Tweening nhiều đối tương cùng lúc, tất cả các đối tượng này phải ở trên cùng một Layer. Flash không thể Tweening các đối tượng như Group, Symbols, ký tự hoặc ảnh Bitmap. Bạn phải sử dụng trinh đơn Modify > Break Apart để gán chế độ Tweening Shape vào những đối tượng này. Để điều khiển các đối tượng không chắc có thực và nhiều thay đổi phức tạp, bạn hãy dùng chế độ Shape Hints, điều khiển từng phần trong ảnh gếc di chuyển thành đếi tượng mới. Bạn cố thể xem mục “Cách dùng Shape Hints (các hình gợi ý)” toong phần sau để biết thêm chỉ tiết TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 210 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 □ Cách Tween một đối tượng: 1. Nhấp chuột vào tên của một Layer để kích hoạt Layer này hoạt động và chọn một keyframe trống nơi bạn muốn vùng chuyển động bắt đầu. ạ* â □ ĩ | 1 /[ ' iộ' 'iỊ I x {I ¡Ii]¥| %\ r-:| 1 2. Tạo ảnh đấỉ tượng cho frame đầu tiên. Bạn cố thể dùng bất kỳ công cụ vẽ nào để tạo một đối tượng. Ví dụ, để đơn giản nhất bạn cố thể vẽ hình tròn. 3. Tiếp đến bạn hãy tạo keyframe thứ hai có số frame mong muến sau frame thứ nhất. 1. E 10 15 2D 25 30 3E s <Ễ 1 Cieate Motion Tween Insert Frame Remove Frames r n s r a IU [ ũ i n Insert Kevhame Insert Blank. Keyfiame L " 1 4. Tạo ảnh trong frame cuối cùng trong quá trình chuyển động. (Bạn cố thể làm chuyển động hình dạng, kích thước, màu sắc và vị trí của đối tượng trong bước 2). Tại frame này bạn có thể dùng công cụ bút chì Pencil Tool và vẽ vào chữ ’’Flash 5” chẳng hạn. ữ II iàN 1*1 5. Sau đố bạn nhấp chuột trở về frame thứ nhất và chọn trên trình đơn Window > Panels > Frame. 6. Trong mục Tweening, chọn Shape. 7. Nhấp chuột và kéo mũi tên kế bên mục Easing hoặc nhập giá trị vào trong ô để hiệu chỉnh tấc độ thay đổi giữa các frame chuyển động: TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 211 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 ■ Khi bắt đầu chuyển động tốc độ chầm chậm sau đố tâng tốc hướng về phía kết thức chuyển động, kểo con trượt lên hoặc nhập vào giá trị từ -1 đến -100. ■ Khi bắt đầu chuyển động tốc độ rất nhanh sau đó giảm tốc chuyển động hướng về điểm kết thúc chuyển động, kéo con trượt xuấng hoặc nhập vào giá trị dương từ 1 đến 100. ■ Theo mặc định, tốc độ thay đổi giữa các frame liên tục. Mục Easing tạo ra hình dạng đếi tượng xuất hiện nhỏ dần hoặc lớn dần bằng cách hiệu chỉnh tốc độ thay đổi của chứng. 8. Chọn một tùy chọn trong mục Blend: ■ Mục chọn với Dỉstrỉbutỉve tạo ảnh chuyển động mà trong đó các đối tượng trung gian nhẳn hơn và không đều nhau. ■ Mục chọn Angular tạo ảnh chuyển động mà vẫn giữ lại các biên rõ ràng và các đường thẵng trong đối tượng trung gian. Sau khỉ chọn xong tất cả các mục cố trong bảng Frame, các frame của bạn trên thanh thước Timeline cố hình giống như hình bên dưới F r a m e B 1 Ị 1 ■' J líìstỊ 5 0 Fram el'y^r S ouỊií jE ifec] © > | | Label: Twewiing: 1 S h ip? * I ị1 - — 1 Easing: Bleríd: ¡Distributive- Angular Đối tượng được diễn hoạt bây giờ hình tròn biến thành chữ Flash5 Chứ V : Mục chọn với Angular chỉ thích hợp với các biên sắc nét và các đường thẳng. Nếu đối tượng của bạn không cố các biên, Flash hoàn trở lại mục chọn Tween Shape là Distributive. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 212 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 CẨCH DÙNG SHAPE HINT (CẮC HÌNH GỢl Ý) Để điều khiển các đối tượng khống chíc có thực và nhiều thay đổi phức tạp, bạn hãy sử dụng Shape Hint. Chế độ Shape Hint này xác đinh các điểm tương ứng trong ảnh đầu và ảnh cuối. Ví dụ như nếu bạn đang chuyển động một bản vẽ khuôn mặt khi nó thay đổi nét mặt, bạn cố thể dùng một ảnh gỢỈ ý để đánh dấu vào mỗi con mắt. Sau đố, thaỵ vì nểt mặt trở thành một ảnh lộn xộn vô định trong khi ảnh vẫn thay đổi chuyển động, mỗi con mắt vẫn còn thay đổi, bạn cố thể nhận biết được những độc lập nhau trong suết quá trình chuyển động. Các hình giống nhau chuyển động cố và không cố cắc hình gợi ý liêng biệt ■ Shape Hint cố chứa các chữ cái từ (a đến z) để xác định các điểm tương xứng tại đếi tượng bắt đầu và đấỉ tượng kết thức. Bạn cố thể dùng đến 26 Shape Hint. ■ Các Shape Hint nằm trong keyframe đầu tiên đều có màu vàng và màu xanh trong keyframe cuấi. Cắc Shape Hint ỉà màu đỏ nếu nố không nằm trên đường cong. Các Shape Hint cổ các ký tợ a, b, c, d, e nằm trên đường cong cố màu vàng trong khỉ đổ Shape Hint ký tự f không nằm trong đường cong nên cố màu đô TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 213 BIÊN SOẠN: KSPHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 9 □ Để CÓ được kết qủa tốt nhất khỉ các đối tượng chuyển động, bạn có thể làm theo những cách chỉ dẫn sau đây: ■ Đối với các đối tượng chuyển động phức tạp, bạn hãy tạo ra các đối tượng trung gian và làm chuyển động chúng thay vì bạn chỉ xác định một đối tượng bắt đầu và đối tượng kết thúc. ■ Bạn phải chắc chắn rằng các Shape Hint đều hợp lý. Ví dụ, nếu bạn đang dùng ba đối tượng Shape Hint cho một hình tam giác, ba tam giác này phải ở trong cùng một loại trong tam giác gốc ban đầu và tam giác được thay đổi. Loại trật tự này không thể là các chữ cái abc trong keyframe đầu và abc toong keyframe thứ hai được. ■ Các Shape Hint cho kết quả tốt nhất nếu bạn đặt chúng vào theo hướng ngược chiều kim đồng hồ đầu góc trái trên của đối tượng. □ Cách dùng các Shape Hint: 1. Chọn keyframe đầu tiên trong tiến trình tạo chuyển động Shape Tweening. «a* a □ 1 5 10 Shape T weening © Ẽ Ị @ 1 U M b fc j K l 2. Chọn trên trình đơn Modify > Transform > Add Shape Hint. Ảnh ở chế độ chọn Shape Hint đầu tiên xuất hiện vòng tròn màu đỏ có chứa ký tự nằm trên đối tượng. Flip Hoiizonlal Remove Tiansịorm Ctfl+Shill+Z Cenlei Add Shape Hint Remove All Hints ■ 3. Di chuyển ảnh gợi ý Shape Hint đến điểm bạn muốn đánh dấu.n 4. Chọn keyframe cuối cùng trong chế độ chuyển động. Ảnh ở chế độ Shape Hint cuối cùng xuất hiện tại nơi nào đó trong đối tượng với ký tự “a” có vòng tròn màu xanh lá cây. TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 214 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB ; PHAN LỶ THUYẾT - T ự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h ả n h ________ CHƯƠNG 9 5. 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. Những Shape Hint mới xuất hiện ; • í----------------------------- + i C m liíll HI lũi 24- 12.0 fps Ị 1.9 \ -------- ^ □ Trong khi làm việc với cắc Shape Hint, bạn có thể thực hiện cắc bước sau: ■ Để xem tất cả các Shape Hint, bạn hãy chọn trên trình đơn View > Show Shape Hints. Layer và keyframe có chứa các Shape Hint phải hiện hành đối với lệnh Show Shape Hints. ■ Xoá bỏ một Shape Hint bằng cách kểo nố ra khỏi vùng Stage. Xoá bỏ tất cả các Shape Hint, bạn hãy chọn trên trình đơn Modify > Transform > Remove All Hints. H ip Hatizortf-al R e m o v e Transform Ctft+SW ft+Z E dit C en ter A d d S h a p e Hint D ri+ S h ift+ H R e m o v e All H ints TẠO ẢNH CHUYỂN ĐỘNG ANIMATION THEO CHẾ ĐỘ FRAME-BY-FRAME Ảnh chuyển động theo chế độ frame-by-frame làm thay đổi nội dung trong vùng Stage trong mỗi frame và thích hợp nhất đấi với các đối tượng phức tạp trong đố một ảnh thay đổi liên tục trong mỗi frame thay vì chỉ đơn giản di chuyển. Chế độ chuyển động theo dạng frame-by- frame sẽ làm tăng kích thước file nhanh hơn chế độ chuyển động theo dạng Tweened Animation. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 215 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 Timeline 0 í □ 1 5 10 15 20 25 30 35 40 45 !................... 1 1 1 1 1 1 1 1 1 I?-1 animation Ị * * ' 1Ị ! ; ; : : : ; ; ; ; : ; ; ; ; ; * # * t 1 > * * • « Jk. T © w H 1 n l í M í ỉ i H i m 12 0 fps O.Os <1 1 _ d 1 Sử dụng chế độ chuyển động theo dạng frame-by-frame khi bạn cần làm thay đổi một ảnh trong mỗi frame. Ảnh mẫu chuyển động theo dạng firame-by-frame □ Tạo ảnh chuyển động theo dạng frame-by-frame: 1. Nhấp chuột vào tên Layer để kích hoạt nổ trở thành Layer hiện hành và nhấp chuột vào một frame nơi bạn muốn điểm chuyển động bắt đầu. m ã n ra » 0 □ 15 w Layer 1 / * * ■ ! ! I Static © Ẽ9 © I H Rbl K i r - I 2. Nếu frame đố chưa cố một keyframe, bạn hãy chọn trên trình đơn Insert > Keyframe để tạo một keyframe trong frame đố. <3* Eầ □ 10 © Sf Frame chưa cố keyframe 3. Tạo ảnh tại frame trình tự đầu tiên. Bạn có thể dùng công cụ vẽ, dán vào một ảnh từ ừong Clipboard hoặc nhập một file. 4. Nhấp chuột vào frame kế tiếp bên phải trong cùng một hàng và chọn Insert > Keyframe hay nhấp phải chuột (trong Windows) hoặc nhấp Control (trong Macintosh) và chọn lệnh Insert Keyframe trong trình đơn xổ xuếng Frame. a t i □ 1 5 1 ỊỊ ' |11 ■ i f c i rj| «Ế r © p © t p l p ĩ > TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 216 BIÊN SOẠN: KSPHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 9 a □ 10 20 Cleat e Motion Tween Inserí Flame Rem ove Flam es Inserí Kẹyírame Insert Blank Keyframfe Chọn lệnh này sẽ thêm vào một keyframe mđi mà nội dung dữ liệu của nó giống như nội dung dữ liệu của keyframe đầu tiên 5. Lần lượt thay đổi nội dung dữ liệu của frame này trong vùng Stage để phát triển các vùng chuyển động tiếp theo sau đó. 6. Để hoàn thành tình tự chuyển động theo dạng frame-by- frame, bạn hãy lặp lại bước 4 và bước 5 cho đến khi bạn tạo được vùng chuyển động bạn muốn. 7. Sau đó để xem trước đoạn phim vừa tạo, bạn có thể chọn trên trình đơn Control > Play hoặc nhấp chuột vào nút Play trên thanh Controller. Bạn có thể chọn chế độ Play Back (xem lại) khi bạn tạo. HIỆU CHỈNH CHUYỂN ĐỘNG ANIMATION Sau khi bạn tạo ra một frame hay một keyframe, bạn có thể di chuyển nó đến bất kỳ vị trí nào toong Layer hiện hành hoặc sang một Layer khác. Bạn cũng có thể xoá bỏ hoặc thực hiện những thay đổi khác. Bạn chỉ có thể hiệu chỉnh trên các keyframe. Bạn có thể xem các frame chuyển động nhiữig không thể hiệu chỉnh trực tiếp lên nó được. Bạn có thể hiệu chỉnh các frame chuyển động Tween bằng cách thay đổi một trong những keyframe đã xác định hoặc chèn vào một keyframe mới giữa keyframe đầu và keyframe cuối. Bạn có thể kéo các mục Item trong cửa sổ Library vào trong vùng Stage để thêm các Item vào trong keyframe hiện hành. TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 217 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ản h ________ CHƯƠNG 9 Để hiển thị và hiệu chĩnh nhiều frame cùng lức, bạn dùng Onion Skinning. □ Chèn nhiều frame vào trong thanh thước Timeline, bạn cổ thể thực hiện một trong những thao tác sau: ■ Chèn vào một frame mới, chọn trên trình đơn Insert > Frame. ■ Tạo một keyframe mới, chọn trên trình đơn Insert > Keyframe, hoặc nhấp phải chuột (trong Windows) hoặc nhấp Control (trong Macintosh) tại frame bạn muốn đặt vào một keyframe và chọn lệnh Insert Keyframe trên trình đơn đố. â □ 1 -'1 r'l 1- '1 IT i-i-r-1-l T'l !■' 1—1 1—1- |— 5 10 15 2D 2E ũ ? Layer 1 * * □ j • : C rea te M otion T w e e n In sert Fram e R e m o v e F ra m es a © g p m t 1 ^ In sert B lank K ej» fram e\| u 1 ■ Để tạo một keyframe trấng mới, bạn hãy chọn trên trình đơn Insert > Blank Keyframe hoặc nhấp phải chuột (trong Windows) hoặc nhấp Control (trong Macintosh) tại frame bạn muốn chèn vào một keyframe và chọn lệnh Insert Blank Keyframe trong trình đơn. □ Xoá hoặc thay đổi một frame hay keyframe, bạn cồ thể thực hiện một trong những bước sau: ■ Xoá một frame, keyframe hoặc một chuỗi các frame, bạn hãy chọn một frame, keyframe hoặc chuỗi frame đố và chọn trên trình đơn Insert > Remove Frame hoặc nhấp phải chuột (trong Windows) hoặc nhấp Control (trong Macintosh) tại frame, keyframe hoặc chuỗi frame đố và chọn lệnh Remove Frame cố trong trình đơn xổ xuống này. Các frame xung quanh vẫn không thay đổi. & 5 □ [ j? Layer 1 20 25 Create Motion Tween Insert Frame Remove Flames Insert Keyframe TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 218 BIÊN SOẠN: KSPHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ả nh________ CHƯƠNG 9 ■ Di chuyển một keyframe hoặc một frame và nội dung dữ liệu của nó bằng cách kểo keyframe hoặc chuễi frame đố sang vị trí mong muến. Kéo một frame đầu tiên sang phải tại vị trí cuối cừng <3p â □ 1 5 10 IE 2D 25 30 E"ậ « ũ? Layer 2 * * □ ** + f ! B• >------------- 'f+# >.................> © ẼP © ♦ 1 rd ó| %\ c*]j[ 35 12.0IPS 2.8S 4 I Ị Frame sau khi di chuyển ■ Mở rộng khoảng thời gian diễn hoạt của một keyframe, nhấn phím Alt và kéo chuột (trong Windows) hoặc nhấn phím Option (trong Macintosh) tại keyframe đến vị trí frame cuối cùng của chuỗi frame mới. ■ Sao chép một keyframe hoặc frame bằng cách kéo chuột, bạn nhấn phím Alt (trong Windows) hoặc nhấn phím Option (trong Macintosh) và kéo keyframe sang vị trí mới. ■ Sao chép và dán một frame hay một chuỗi frame, chọn một frame hay một chuỗi frame đó. Sau đó chọn trên trình đơn Edit > Copy Frames. Chọn một frame hay một chuỗi frame mà bạn muến thay thế, sau đố chọn trên trình đơn Edit > Paste Frames. ■ Chuyển đổi một keyframe thành một frame, bạn hãỵ chọn keyframe đố và chọn trên trình đơn Insert > Clear Keyframe, hoặc nhấp phải chuột (ưong Windows) hay nhấp Control (trong Macintosh) tại keyframe và chọn lệnh Clear Keyframe ưong trình đơn dọc đố. Các keyframe sẽ bị xoá và tất cả các frame trong keyframe sau đố được thay thế bằng nội dung của frame đứng trước keyframe bị xoá đố. ■ Thay đổi chiều dài của một quá trình chuyển động Tween, bằng cách kéo keyframe đầu hoặc keyframe cuối sang phải hay trái. Để thay đổi độ dài của tiến trình chuyển động theo dạng frame-by-frame, bạn cố thể tham khảo mục ’Tạo chuyển động theo dạng frame-by-frame” để biết thêm chi tiết. ■ Thêm vào một mục Item từ thư viện vào trong keyframe hiện hành, kéo mục Item đố trong cửa sổ Library vào trong vùng Stage. ■ Chuyển đổi tiến trình chuyển động, bạn hãy chọn các frame thích hợp ữong một hay nhiều Layer và chọn trình đơn Modify > Frames > Reverse. Phải là các keyframe đầu và keyframe cuối của quá trình chuyển động. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 219 BIÊN SOẠN: KSPHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 9 ONION SKINNING Thông thường, Flash hiển thị một frame chuyển động tại một thời điểm nào đó trong vùng Stage. Để giúp bạn định vị và hiệu chỉnh vùng chuyển động theo dạng frame-by-frame, bạn có thể xem 2 hoặc nhiều frame trong vùng Stage cùng lúc. Frame bên dưới đầu Playhead xuất hiện đầy màu toong khi đó các frame xung quanh bị mờ đi, tạo cho ảnh xuất hiện mờ đi giống như các frame được vẽ trên một tờ giấy trong suốt mờ (Translucent Onion Skin Paper) và những tờ giấy này được xếp chồng các mặt lên nhau. Các frame bị mờ không thể hiệu chỉnh được. Để xem nhiều frame cùng lúc trong quá trình tạo chuyển động trong vùng Stage, bạn có thể dùng nút Onion Skin. ỉ I * _ .. . 1ĩ '■ 10 • >----- ----->*E nd 0 nion s kin Nhấp chuột vào nút Onion Skin. Tất cả các frame chính giữa các dấu Start Onion Skin và End Onion Skin (trong Timeline header) được xếp chồng lên như một frame trong cửa sổ Movie. NutOrionSkin T im elin e H ead er ¡ B E ÉỆ S c e n e 1 © IS lơ 15 20 25 . I . . ■ 1 I . : I I . . » ! w o J j .% ] 6 12.0 fp* I 0.+Í r r • s] I I * 4 1 1 J JÜ I 100m □ Để điều khiển cho Onion Skin hiển thị, bạn có thể thực hiện một trong những thao tác sau: ■ Hiển thị các viền ngoài của các frame Onion Skin bằng cách nhấp chuột vào nút Onion Skin Outlines bên dưới thanh thước Timeline. TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 220 BIÊN SOẠN: KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BANG HĨNH ẢNH CHƯƠNG 9 <s* ã □ 1 6 r. 10 15 20 25 • )------ © L l r" l [K || s 12.0 fps 0.4s Ẩ ĩ x Ỉ L-. — = 7 ^ Onion Skin Outlines! % M - )) V R x f 8 f ( [ ■ Thay đổi vị trí của dấu Onion Skin, kéo con trỏ sang vị trí mới. (Thông thường, các dấu Onion Skin di chuyển cùng với con trỏ frame hiện hành) 0' 1" 15 w> Layer 2 i » • ■ , • :------ ■ Bạn có thể hiệu chỉnh tất cả các frame chính giữa các dấu Onion Skin bằng cách nhấp chuột vào nút Edit Multiple Frames. Thông thường, chế độ Onion Skin cho phép bạn hiệu chỉnh chỉ có frame hiện hành mà thôi. Tuy nhiên, bạn có thể hiển thị nội dung dữ liệu của mỗi frame giữa các dấu Onion Skin và hiệu chỉnh chúng, bất chấp frame này có phải là frame hiện hành hay không. } 1 Til'ö i«fc H] 7 120 fP5 0.5s Edit Multiple Frames Chủ V : Các Layer bị khoấ (các Layer có biểu tượng cái móc khoá) không hiển thị khi bạn mở chế độ Onion Skin. Để tránh nhầm lẫn với nhiều ảnh khác nhau, bạn có thể khoá hoặc làm ẩn các Layer mà bạn không muốn Layer đó ở chế độ Onion Skin. » “I D 5 10 15 u Laver 4 • . m I o I Lock/- U/ Layer 3 • *- fcj IUnlock AI Lavers « > >------------------- * * rĩ? I auRr 1 • • m © [£> © +1 il'bi 5a! [■] 1 1: □ Thay đổi vùng hiển thị của các dấu Onion Skin: Nhấp chuột vào nút Modify Onion Markers và chọn một mục Item có trong trình đơn: TỦ SÁCH STK - THẾ GIỚI Đồ HỌA 221 BIÊN SOẠN: KS PHẠM QUANG HUY GIẢO TRÌNH THIẾT KẾ WEB : PHAN LÝ THUYẾT - Tự HỌC MACROMEDIA FLASH 5.0 BẰNG h ìn h Ả nh________ CHƯƠNG 9 | |.||liỉ%| |ịí HI s II l2.QFps|| 0.7s [7T I ----------- 1 ^ Always Show Markers / Anchor Onion Onion 2 Onion 5 Onion All ■ Mục Always Show Markers hiển thị hoặc không hiển thị các dấu Onion Skin trong Timeline header. ■ Mục Anchor Onỉon Marks khoá các dấu Onion Skin sang vị trí hiện hành trong Timeline header. Bình thường, vùng Onion Skin tương ứng với con trỏ frame hiện hành và các dấu Onion Skin. Bằng cách thả neo các dấu Onion Skin, bạn cố thể ngăn cản không cho chúng di chuyển với con trỏ frame hiện hành. ■ Mục Onỉon 2 hiển thị 2 frame cả hai mặt trong frame hiện hành. ■ Mục Onỉon 5 hiển thị 5 frame cả hai mặt trong frame hiện hành. ■ Mục Qnỉon All hiển thị tất cả các frame trong cả hai mặt tại frame hiện hành. m n n ® B 5 I112.0 fps I 0.3s 4 Ĩ Always Show Markers ịAnchoi ũnionOnion 2 Onion 5 ũnion All ự f 5*/ — ỵ „ -rí' :s ' (p 'À í - 1 ' Ảnh với mục chọn Onion ÂU DI CHUYỂN TOÀN BỘ VÙNG CHUYỂN đ ộ n g a n im a tio n Nếu bạn cần di chuyển toàn bộ vùng chuyển động trong vùng Stage, bạn phải di chuyển các ảnh Graphics trong tất cả các frame và các Layer một lần để tránh việc tổ chức lại tất cả mọi thức. □ Để đi chuyển toàn bộ vàng chuyền động sang một vị trí khác trong vùng Stage: 1. Md khoá tất cả các Layer. Để di chuyển mọi thứ ưong một hoặc nhiều Layer nhưng không phải các Layer khác, bạn cố thể khoá lại hoặc làm ẩn đi các Layer bạn không muốn di chuyển. 2. Nhấp chuột vào nút Edit Multiple Frames trong thanh thước Timeline. TỦ SÁCH STK - THẾ GIỚI Đ ồ HỌA 222 BIÊN SOẠN: KSPHẠM QUANG HUY