Giáo trình Flash (Phần 2) - Trường Cao đẳng nghề Yên Bái

51 trang cucquyet12 3940

Download

Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Flash (Phần 2) - Trường Cao đẳng nghề Yên Bái", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

giao_trinh_flash_phan_2_truong_cao_dang_nghe_yen_bai.pdf

Nội dung text: Giáo trình Flash (Phần 2) - Trường Cao đẳng nghề Yên Bái

Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– CHƯƠNG 4: TẠO HOẠT CẢNH 1. Tìm hiểu về Timeline TimeLine là vùng tương tác để tạo ra chuyển động trong movie của Flash. Để tạo ra chuyển động, TimeLine thay thế từng Frame một theo thời gian. Hình 4.1a – Vùng TimeLine Trong TimeLine, bạn có thể dễ dàng thấy được ba phần chính: Phần quản lý Layer (bên trái), Phần quản lý Frame (phía trên bên phải) và Phần quản lý Công cụ (phía dưới bên phải). - Layer: Quản lý các lớp đối tượng. Mỗi một đối tượng trên Layer sẽ có một thanh TimeLine của riêng mình. Trong trường hợp minh họa trên, thì đối tượng trên Layer 1 nằm trên TimeLine phía dưới và đối tượng trên Layer 2 nằm trên TimeLine phía trên. - Thanh TimeLine: Chứa nhiều Frame. Khi tạo ra chuyển động, các Frame sẽ lần lượt thay thế cho nhau. Frame sau sẽ thay thế cho Frame trước đó. Ta có thể xem qua hành động bằng cách kéo Frame hiện tại (Frame đánh dấu màu đỏ) sang trái hoặc phải trên TimeLine. Các chức năng hiển thị trên thanh Timeline: Trong biểu tượng menu thả xuống nằm phı́a trên bên phải có các chức năng sau: Tiny (siêu nhỏ), Small (nhỏ), Normal (bình thường), Medium (trung bình), Large (lớn), Preview (xem rõ hình), Preview in Context (xem rõ hình theo ngữ cảnh). - Vùng thanh công cụ - Gồm các công cụ sau đây: + Center Frame: Xác định Frame trung tâm. + Onion Skin: Cho phép hiển thị toàn bộ hình ảnh của đối tượng trên vùng Frame được chọn. Sự hiển thị này bao gồm toàn bộ đối tượng. 51
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.1b – Onion Skin + Onion Skin Outlines: Cho phép hiển thị toàn bộ hình ảnh của đối tượng trên vùng Frame được chọn. Sự hiển thị này chỉ bao gồm viền của đối tượng. Hình 4.1c – Onion Skin Outlines + Edit Multiple Frames: Cho phép hiển thị đối tượng gốc trên toàn bộ đối tượng hiển thị theo hai chức năng Onion Skin ở trên. Khi đó, ta có thể chỉnh sửa đối tượng + Các thông số khác: - Current Frame – vị trí của Frame hiện tại (Frame được đánh dấu đỏ). - Frame rate – tốc độ chuyển động (tính bằng số Frame trên giây). Thông số Frame rate càng lớn, thì phim sẽ càng diến ra nhanh. Theo chuẩn của kĩ thuật 24 hình trên giây thì tốc độ này là 24fps. Hiển nhiên, bạn có thể thay đổi giá tri ̣ này. Tuy nhiên, điều này không được khuyến khích vì nó là chuẩn quốc tế. - Elapsed Time – thời gian thực thi từ vi ̣trí đầu tiên (frame 1) cho đến Frame hiện tại (current Frame) trên thanh TimeLine. 52
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.1d – Onion Skin và Onion Skin Outlines kết hợp với Edit Multiple Frames Một số chức năng khi làm việc với TimeLine Khi làm việc với TimeLine, ta thường xuyên sử dụng đến hai phím tắt sau đây: + Phím F5: Chèn Frame vào thanh TimeLine (tương ứng với Insert Frame). Nếu vùng TimeLine trong thanh TimeLine đã được tạo Tween, thì nó sẽ tự động giãn vùng Tween này (chèn thêm Frame vào trong vùng Frame đã tạo Tween, các Frame mới tạo này cũng kế thừa Tween). Nếu chưa tạo Tween, thì nó đơn thuần sao chép toàn bộ các đối tượng trên keyframe liền ngay trước vi ̣trí của frame được chèn. Khi thay đổi các đối tượng của bất kì một frame nào trong khoảng này thì các các đối tượng trên các frame khác cũng sẽ được cập nhật theo. + Phím F6: Chèn KeyFrame vào thanh TimeLine (tương ứng với Insert KeyFrame). Frame cuối cùng khi chèn là một KeyFrame. Với KeyFrame này, ta có thể tạo điểm chốt cho hành động trong một movie. Khi kết hợp với Tween, nó sẽ tạo một chuyển động mềm mại cho movie của Flash. Điểm khác biệt khi sử dụng Keyframe so với frame thông thường là frame thông thường chỉ đơn thuần sao chép các đối tượng của keyframe trước đó để tạo ra một dãy các khung hình giống nhau. Trong khi đó, keyframe sẽ tạo ra điểm chốt. Nó cũng sao chép toàn bộ các đối tượng của keyframe trước đó sang các frame liền ngay trước keyframe tạo ra điểm chốt. Nhưng khi ta thay đổi đối tượng ở keyframe mới tạo ra này, thì các các đối tượng trên các frame khác không thay đổi. Có thể tham khảo ví dụ sau đây, để hiểu rõ hơn về hai phím tắt này. Trong ví dụ này, chúng ta sẽ tạo một hình chữ nhật có nền trắng và viền đen (Hình 4.1e). Tại Frame thứ 5, bạn nhấp vào Frame này, nhấn phím F5. Sau đó, bạn thay đổi độ lớn của viền (thuộc tính Stroke = 5) Xem Hình 4.1f. Giờ bạn hãy kiểm tra độ lớn của viền trên mọi Frame. Như bạn thấy, viền của tất cả hình chữ nhật trên mọi Frame đều thay đổi thành 5. Bây giờ, bạn hãy làm lạm lại ví dụ trên bằng cách thay phím F5 bằng phím F6. Bạn sẽ thấy rằng thuộc tính Stroke sẽ không thay đổi trên mọi Frame, chỉ thay đổi duy nhất ở KeyFrame cuối cùng (KeyFrame mà bạn hiệu chỉnh). 53
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.1e – Khởi tạo một hình thể trên KeyFrame đầu tiên. Hình 4.1f – Chèn các Frame bằng phím F5 Hình 4.1g– Chèn KeyFrame bằng phím F6 54
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Như vậy, có thể thấy rằng, nếu muốn sao chép một Frame cho các Frame tiếp theo, bạn sử dụng phím F5. Ngược lại, nếu bạn muốn tạo một sự thay đổi, bạn cần sử dụng phím F6. Sao chép và cắt dán một nhóm Frame: Để thực hiện chức năng này, bạn hãy bôi đen nhóm Frame mà bạn muốn sao chép hoặc cắt dán, sau đó bạn kích chuột phải và chọn Copy Frames hoặc Cut Frames. Để thực hiện chức năng dán, bạn hãy chọn vị trí cần dán nhóm Frame đã copy trên TimeLine. Sau đó, kích chuột phải và chọn Paste Frames. Clear Frames, Clear KeyFrame và Remove Frames: Chức năng Clear Frames sẽ làm cho các đối tượng trên Layer của Frame được chọn sẽ bị xóa đi. Hay nói cách khác, Clear Frames sẽ tạo ra hai KeyFrame ở vị trí bắt đầu và kết thúc của nhóm Frame được đánh dấu. Tương ứng với vị trí đầu tiên, nó sẽ chèn một Blank KeyFrame (là một KeyFrame nhưng không chứa đối tượng nào trên nó) và KeyFrame tương ứng với vị trí kết thúc. Clear KeyFrame cũng tương tự như Clear Frame, nhưng nó áp dụng cho một KeyFrame. Còn Remove Frames sẽ xóa sạch các Frame này lẫn đối tượng trên nó. Convert to KeyFrames và Convert to Blank KeyFrames: Chuyển đổi một Frame thành KeyFrame hoặc Blank KeyFrame. Insert Blank KeyFrame: Chèn một Blank KeyFrame. Reverse Frames: Cho phép lật ngược thứ tự của một nhóm Frame. Để thực hiện chức năng này, bạn chọn nhóm Frame, kích chuột phải và chọn Reverse Frame. Với chức năng này, bạn có thể tạo ra một chuyển động mang tính đối xứng. Tạo chuyển động nhờ vào kĩ thuật “Frame by Frame” Đây là kĩ thuật tạo chuyển động dựa trên cơ sở của kĩ thuật 24 hình/giây. Các Frame sẽ hiện thị tuần tự trên Scene. Sự hiển thị từng Frame một này tạo ra chuyển động cho đối tượng. Ta sẽ minh họa kĩ thuật “Frame by Frame”.bằng ví dụ sau đây. Ví dụ sẽ minh họa cách tạo hiệu ứng động cho các kí tự trong từ “Flash”. Bước 1: Sử dụng công cụ Text, tạo một dòng văn bản có nội dung là “Flash”. Bước 2: Chọn công cụ Selection. Bấm vào dòng văn bản sau đó kích chuột phải và chọn Break Apart. Bước 3: Nhấp chọn Frame thứ hai trong TimeLine. Nhấp phím F6. Sau đó bấm chọn kí tự đầu tiên – kí tự F, và dịch chuyển nó lên trên so với các kí tự còn lại hoặc thay đổi màu sắc của nó. 55
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.1h – Kĩ thuật Frame by Frame Chọn Frame thứ ba trong TimeLine. Nhấp phím F6. Sau đó tiếp tục với kí tự thứ hai ( kí tự l). Quá trình này cứ tiếp diễn cho đến kí tự cuối cùng là kí tự h. Bước 4. Nhấp Ctrl+Enter để kiểm tra sản phẩm. Với kĩ thuật Frame by Frame, bạn hoàn toàn có thể tạo ra hoạt cảnh. Nhưng một nhược điểm của kĩ thuật này là nếu bạn muốn tạo một hiệu ứng mềm mại thì bạn phải thao tác rất mất thời gian. Flash cung cấp cho bạn các phương pháp sau đây để tạo chuyển động với tên gọi là Tween. Có ba phương pháp Tween: Classic Tween, Motion Tween và Shape Tween. Về cơ bản, chúng có nhiều điểm tương đồng và nhiều điểm khác biệt đặc trưng. Chúng ta sẽ lần lượt khảo sát ba loại Tween này. 2. Classic Tween Classic Tween là một kĩ thuật tạo chuyển động được cung cấp trong các phiên bản từ Flash CS3 trở về trước. Trong phiên bản Flash CS6+, Adobe vẫn còn duy trì kĩ thuật này. Về cơ bản, khi thao tác với kĩ thuật Classic Tween ta cần phải sử dụng đến hai KeyFrame khởi đầu và KeyFrame kết thúc. Kể từ ấn bản CS4, Adobe đã đưa vào một kĩ thuật mới gọi là Motion Tween – một kĩ thuật mà theo Adobe là sử dụng đơn giản, không cần tạo KeyFrame rắc rối như Classic Tween. Mục đích tạo ra kĩ thuật Classic Tween là tạo ra chuyển động cho đối tượng. Khi sử dụng Classic Tween, đối tượng sẽ được chuyển đổi thành hai biểu tượng Graphic (một biểu tượng cho KeyFrame đầu tiên và một biểu tượng cho KeyFrame kết thúc). Bạn không thể sử dụng các hiệu ứng 3D cho Classic Tween cũng như không thể sử dụng chức năng swap symbol cho đối tượng thể hiện. Nhưng sở dĩ Adobe vẫn lưu lại kĩ thuật này trong phiên bản CS6 dù kĩ thuật Motion Tween có nhiều ưu điểm hơn là vì kĩ thuật Classic Tween có những ưu điểm riêng mà Motion Tween không thể thay thế được. Một trong những ưu điểm đó là kĩ thuật Classic Tween cho phép chứa Frame ActionScript. 56
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Các bước sử dụng Classic Tween để tạo hiệu ứng động Ví dụ sau đây sẽ trình bày cho bạn phương pháp tạo quả bóng rơi nhờ vào kĩ thuật Classic Tween. Bước 1. Trên khung sáng tác, sử dụng công cụ Oval để tạo một hình quả bóng và trang trí cho nó theo hình quả bóng chuyền. Bước 2. Kích chuột vào Frame thứ 10, nhấp phím F6 để chèn KeyFrame kết thúc. Tại Frame thứ 10 này, bạn hãy thay đổi vị trí của quả bóng (chạm mặt đất). Sau khi chạm đất, quả bóng sẽ nẩy lên. Để tạo điều này, bạn bấm vào Frame thứ 20, nhấp phím F6 để chèn KeyFrame kết thúc. Tại KeyFrame này, bạn hãy thay đổi vị trí của quả bóng lần nữa (vị trí quả bóng nẩy đến). Bạn hãy tiếp tục quá trình này cho đến khi bạn cảm thấy phù hợp (thời điểm mà quả bóng dừng). Bạn có thể quan sát quá trình này trong hình 4.2 bên dưới. Bước 3. Bấm chuột vào khoảng cách giữa KeyFrame mở đầu và KeyFrame kết thúc, kích chuột phải và chọn Classic Tween. Bạn hãy lặp lại điều này cho các khoảng KeyFrame còn lại. Bước 4. Nhấn Ctrl+Enter để kiểm tra kết quả. Đây là một ví dụ đặc trưng sử dụng Classic Tween – dùng để tạo chuyển động của đối tượng. Bạn hoàn toàn có thể sử dụng nó để hiệu chỉnh thuộc tính của đối tượng, dù rằng việc này không phải là chức năng chính yếu dành cho nó. Bạn cũng cần lưu ý rằng, trong ví dụ ở trên, mỗi lần bạn nhấn phím F6 là bạn đã tạo mới một KeyFrame kết thúc và KeyFrame kế tiếp của KeyFrame kết thúc đó cũng đóng chức năng là KeyFrame mở đầu của KeyFrame kết thúc sau. Nghĩa là mỗi lần bạn nhấp F6, bạn đã tạo ra thêm một khoảng đánh dấu KeyFrame để tạo Classic Tween. Hình 4.2 – Kĩ thuật Classic Tween 57
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Trong hình minh họa trên, Layer 1 chứa quả bóng, Layer 2 chứa đối tượng minh họa cho sàn nhà (hình chữ nhật màu xanh). Các nút đen trên TimeLine của Layer 1 là các KeyFrame. Các khoảng giữa các nút này là các khoảng đánh dấu KeyFrame của Classic Tween. 3. Shape Tween Kĩ thuật Shape Tween dường như có những tính năng riêng biệt. Mặc dù nó cũng có thể dùng để chuyển đổi màu sắc, hình dáng của vật thể như hai loại Tween còn lại. Nhưng chức năng chính của nó là “biến hình”. Để tạo sự biến hình, cũng tương tự Classic Tween, bạn phải tạo hai KeyFrame mở đầu và kết thúc. Shape Tween không hỗ trợ hiệu ứng 3D, không hỗ trợ chức năng swap symbol để thay đổi biểu tượng nguồn cho một đối tượng thể hiện. Khi tạo Shape Tween, đối tượng sẽ chuyển đổi thành hai đối tượng Graphic. Hai biểu tượng này tương ứng với hai Keyframe đầu tiên và Keyframe cuối cùng của Shape Tween. Về cơ chế của Shape Tween, nó sử dụng thuật toán Transform – nghĩa là sẽ dịch chuyển các điểm được đánh dấu theo một chỉ số nào đó ở Frame đầu tiên đến vị trí được đánh dấu cùng chỉ số trong Frame cuối cùng. Các bước sử dụng Shape Tween để tạo hiệu ứng động Trong ví dụ này, chúng ta sẽ tạo hiệu ứng biến đường thẳng thành đường cong. Bạn không thể tạo được hiệu ứng này bằng các Tween còn lại. Đây cũng là một ví dụ điển hình sử dụng Shape Tween. Hình 4.3a – Kĩ thuật Shape Tween Bước 1. Dùng công cụ Line vẽ một đường thẳng trên màn hình làm việc. Bước 2. Với công cụ Shape Tween, bạn có thể tạo Tween trước khi chèn KeyFrame hoặc sau khi chèn KeyFrame. Ta sẽ minh họa bằng việc tạo Tween trước. Bạn hãy dùng công cụ Selection, bấm chọn đối tượng, kích chuột phải và chọn Create Shape Tween. Bước 3. Bấm chọn vào Frame 30 trên TimeLine, nhấp phím F6 để chèn KeyFrame kết thúc. Bạn bấm chọn công cụ Add Anchor Point và bấm vào vị trí giữa đường thẳng để bổ sung điểm điều khiển. Tiếp đến, bạn chọn công cụ Convert Anchor Point để tạo điểm uốn. Bạn hãy bấm chọn 58
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– điểm mà bạn vừa tạo và uốn đường thẳng này thành đường cong như trên. Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm. Bạn lưu ý rằng, trong hình minh họa trên, tôi đã sử dụng chức năng Onion Skin. Sử dụng Shape Hint để điều khiển sự biến hình Khi sử dụng Shape Tween, nó sẽ tự động tạo ra sự biến hình theo một thuật toán được định sẵn. Nếu bạn muốn điều khiển sự biến hình này, Flash cũng cung cấp cho bạn công cụ đó là Shape Hint. Shape Hint là một điểm điều khiển khi sử dụng Shape Tween. Để sử dụng chức năng này, bạn cần tạo một Shape Tween cho một đối tượng, sau đó vào menu Modify > Shape > Add Shape Hint (phím tắt là Ctrl+Shift+H). Shape Hint sẽ xuất hiện theo cặp: Một điểm ở Frame đầu tiên trên TimeLine của Tween và một điểm ở Frame cuối cùng. Các Shape Hint này được đánh chỉ số là a, b, c . Bạn hãy quan sát hai hình vẽ sau đây Hình 4.3b– Các cặp Shape Hint ở Frame đầu (bên trái) và Frame cuối (bên phải) Khi sử dụng Shape Hint, các điểm cùng cặp (cùng chỉ số) sẽ tạo ra sự biến hình tương ứng, nhưng luôn đảm bảo điểm cùng cặp của Frame thứ đầu tiên sẽ chuyển thành điểm cùng cặp của Frame cuối cùng (điểm a ở hình bên trái sẽ biến thành điểm a ở hình bên phải, tương tự điểm b và c). Bằng cách bổ sung các Shape Hint này, bạn có thể điều khiển chuyển động của đối tượng. Để gỡ bỏ một Shape Hint, bạn chỉ việc chọn nó, kích chuột phải và chọn Remove Hint. 4. Motion Tween Như đã nêu ở trên, kĩ thuật Motion Tween cũng được dùng để tạo chuyển động. Nó cũng tương tự như kĩ thuật Classic Tween, nhưng nó đơn giản hơn kĩ thuật Classic Tween nhiều. Nó không đòi hỏi bạn phải tạo các KeyFrame. Một ưu điểm của Motion Tween mà trong phiên bản Flash CS4 mới được bổ sung vào là hỗ trợ hiệu ứng 3D. Có hai hiệu ứng 3D là Translation và Rotation. Chi tiết về hai chức năng này ta sẽ tìm hiểu thêm trong mục cuối cùng của chương này. 59
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.4a – Kĩ thuật Motion Tween Nếu so sánh với kĩ thuật Frame by Frame và Classic Tween, thì bạn cũng nên biết rằng, với kĩ thuật Motion Tween, bạn có thể tối ưu kích thước của file Flash khi xuất bản. Với Motion Tween, bạn còn có thể hiệu chỉnh đường dịch chuyển, tọa độ, góc xoay, Filter, Blending Nhờ vào công cụ Selection và thuộc tính trong bảng Motion Editor. Các bước sử dụng Motion Tween để tạo hiệu ứng động Trong ví dụ này, ta tạo hiệu ứng chuyển động theo hình cánh cung cho đối tượng được vẽ. Trong hình minh họa, đường màu xanh minh họa cho đường chuyển động của đối tượng. Bước 1. Dùng công cụ Brush vẽ một hình ảnh bất kì trên màn hình làm việc. Bước 2. Bấm vào công cụ Selection, nhấp chọn đối tượng vừa vẽ. Kích chuột phải chọn Create Motion Tween. Flash sẽ tự động tạo một khoảng Frame mặc định để tạo chuyển động. Nếu số lượng Frame này không thỏa mãn nhu cầu sử dụng, bạn có thể thay đổi nó bằng cách đặt con trỏ chuột vào vị trí cuối cùng cùng vùng Frame được đánh dấu. Khi trỏ chuột có dạng , bạn hãy nhấp chuột và kéo sang trái hoặc sang phải. Bước 3. Di chuyển hình được vẽ sang vị trí mới. Khi đó, bạn sẽ thấy trên màn hình làm việc xuất hiện một thanh mô tả chuyển động của đối tượng (thanh màu xanh trong hình minh họa). Bạn có thể sử dụng công cụ Selection để thay đổi dạng thức của đường chuyển động. Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm. Hiệu chỉnh chuyển động và các hiệu ứng nâng cao với Motion Editor Đây là một công cụ mạnh mẽ được tích hợp với kĩ thuật Motion Tween. Để sử dụng chức năng này, đầu tiên bạn hãy tạo một Motion Tween. Sau đó, vào Windows>Motion Editor. Khi đó, cửa sổ Motion Editor xuất hiện. Hộp thoại Motion Editor này được chia làm hai phần: phần bên trái và phần bên phải. Phần bên trái chứa các chức năng và các thông số liên quan, phần bên phải là biểu đồ minh họa. Ta có thể hiệu chỉnh một trong hai phần này. Các nhóm chức năng trong Motion Editor mà bạn cần quan tâm là: 60
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– - Basic Motion: Dịch chuyển vị trí của vật trong không gian ba chiều (theo tọa độ x,y,z Hình 4.4b – Bảng thuộc tính Motion Editor - Transformation: Xoay chuyển (skew) theo chiều x, y hoặc kéo giãn (scale) theo chiều x, y. - Color Effect: Bấm vào biểu tượng dấu cộng để bổ sung vào các hiệu ứng. Có các hiệu ứng Alpha, Tint, Brightness và Advanced color. Nếu muốn loại bỏ, ta chỉ việc nhấp vào dấu trừ, và chọn hiệu ứng cần xóa. - Filter: Cũng tương tự như Filter cho văn bản. Ta có thể bổ sung bằng cách bấm vào dấu cộng, và loại bỏ bằng cách bấm vào dấu trừ. - Eases: Bổ sung thêm các hiệu ứng khác. Tạo chuyển động nhờ vào Motion Presets Flash CS6 cung cấp sẵn cho ta các hiệu ứng chuyển động có sẵn trong vùng chức năng Motion Presets. Để sử dụng chức năng này, ta vào Windows > Motion Presets. Vùng chức năng Motion Presets này cung cấp cho chúng ta rất nhiều hiệu ứng làm sẵn. Khi sử dụng các hiệu ứng trong vùng chức năng này, các đối tượng của bạn không cần phải chuyển đổi sang biểu tượng. Bạn có thể thao tác trực tiếp trên các đối tượng. Dĩ nhiên, bạn cũng có thể áp dụng các hiệu ứng này cho các biểu tượng như Graphic, Button hay MovieClip. Để minh họa cho vùng chức năng này, ta sẽ cùng nhau xây dựng một vài hiệu ứng hoạt hình sau đây: Hiệu ứng quả bóng chuyển động: Bạn hãy tạo một khối cầu dạng 3D như trên hình vẽ. Sau đó, bạn hãy bấm chọn đối tượng, bấm tiếp vào khung Motion Presets và chọn lựa hiệu ứng chuyển động tương ứng. 61
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.4c – Chức năng Motion Presets: chọn hiệu ứng bounce-in-3D Ở trong ví dụ này, tôi sử dụng loại chuyển động bounce-in-3D. Sau khi chọn lựa hiệu ứng chuyển động, bạn nhấp nút Apply. Nếu kết hợp với Onion Skin, chúng ta sẽ thấy dạng chuyển động của nó như hình minh họa bên dưới. Khi sử dụng dạng thức chuyển động được tạo sẵn của Motion Presets, bạn sẽ nhận thấy rằng việc tạo chuyển động trong trường hợp này cũng sẽ quy về việc sử dụng Motion Tween. Bạn sẽ dễ dàng kiểm tra được điều này khi quan sát thanh Timeline. Trên Timeline bạn sẽ nhận thấy được dạng Tween được sử dụng là Motion Tween (hay bạn có thể nhìn thấy đường chuyển động của đối tượng – đây là dấu hiệu của Motion Tween). Nếu bạn quan sát trong thư viện Library, bạn cũng sẽ thấy rằng một movieClip mới đã được tạo ra. Điều này có nghĩa Flash CS6+ đã làm sẵn cho bạn từ A-Z. Hình 4.4d – Chức năng Motion Presets: Motion Path Hiệu ứng chữ chạy 3D: 62
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Thông thường, khi kết thúc một bộ phim thời trung cổ, các thông tin về phim sẽ được hiển thị theo dạng thức chữ chạy từ dưới lên, hãy nhập một đoạn nội dung văn bản, sau đó chọn hiệu ứng text-scroll-3D trong vùng chức năng Motion Presets. Nhấp Apply. Hình 4.4e - Hiệu ứng text-scroll-3D Cuối cùng, bạn hãy nhấn tổ hợp Ctrl+Enter để kiểm tra. 5. Công cụ Bone và Bind Công cụ Bone Với công cụ Bone, bạn có thể tạo ra các chuyển động dựa trên các khớp nối. Các chuyển động này có thể lấy ví dụ như các khớp xương tay chân, các khớp nối của cần cẩu, hình rồng uốn lượn, rắn trườn, Công cụ này rất hữu ích và đơn giản. Đây là công cụ mới được bổ sung vào trong Adobe Flash CS4. Khi sử dụng công cụ này, ta cần phân biệt các trường hợp sau: - Trường hợp 1: Nếu đối tượng cần tạo khớp nối là đối tượng liên tục (hình rắn trườn, rồng lượn ), ta sẽ sử dụng công cụ này một cách trực tiếp. Trường hợp này thường sử dụng khi ta thao tác trực tiếp trên các đối tượng đồ họa vector được thiết kế bằng các công cụ của Flash hoặc import từ các trình xử lý đồ họa vector như Illustrator. - Trường hợp 2: Nếu đối tượng cần tạo không liên tục, cần có khớp nối (như khớp xương, khớp nối cần cẩu ), ta sẽ sử dụng công cụ này sau khi convert các phần của nó thành các biểu tượng. Trường hợp này thường sử dụng khi ta import các đối tượng đồ họa điểm và sử dụng Photoshop để cắt thành các phần khác nhau. Sau đây là 2 ví dụ minh họa cho việc sử dụng công cụ Bone trong hai trường hợp trên.  Công cụ Bone trong trường hợp 1 63
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Bước 1. Bạn hãy sử dụng công cụ Pencil hoặc Brush để tạo hình một chú rắn Bước 2. Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình minh họa. Bước 3. Hãy sử dụng công cụ Selection để kiểm tra các mối nối. Để tạo hiệu ứng động, bạn hãy nhấp chọn vào một Frame nào đó (ví dụ Frame 20), nhấn phím F6. Cơ chế làm việc tự động của công cụ Bone sẽ giúp tạo ra chuyển động nếu bạn hiệu chỉnh độ cong của đối tượng tại Frame này nhờ vào các khớp nối. Bạn hoàn toàn không cần sử dụng đến kĩ thuật Tween. Bước 4. Nhấp tổ hợp Ctrl+Enter để kiểm tra kết quả. Hình 4.5a – Công cụ Bone trường hợp 1  Công cụ Bone trong trường hợp 2 Bước 1. Bạn hãy tạo ba khối hình chữ nhật (tượng trưng cho các phần của cần cẩu) và sau đó convert chúng thành các đối tượng Graphic. Bước 2. Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình minh họa. Bước 3. Hãy sử dụng công cụ Selection để kiểm tra các mối nối. Chọn Frame 20, nhấn phím F6, sau đó thay đổi hình dạng của cần cẩu bằng cách điều chỉnh các mối nối. Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra. 64
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.5b - Công cụ Bone trường hợp 2 Nếu bạn gặp khó khăn trong việc điều khiển các bộ phận của chiếc cần cẩu này, bạn hãy dành chút thời gian để tìm hiểu các thuộc tính của công cụ Bone này ở ngay dưới đây. Bảng thuộc tính của các đoạn nối bởi công cụ Bone Khi bạn nhấp chuột vào một đoạn thẳng nối các mối nối, trong bảng thuộc tính Properties sẽ hiện ra các thông số như hình sau: –Location: Position X và Y (tọa độ của thanh nối), Length (độ dài của thanh nối), Angle (góc nghiêng của thanh nối), Speech (tốc độ xoay của thanh nối). - Joint Rotation: Cho phép hoặc không cho phép thanh nối có thể xoay – tương ứng với Enable được chọn hay không được chọn. - Rotation Constrain: Cho phép mối nối gốc của thanh nối dịch chuyển trong vùng từ Min đến Max. - Joint x Translation và Joint y Translation: Cho phép thanh nối dịch chuyển theo chiều x hay chiều y. Thuộc tính constraint cho hai trường hợp này hoàn toàn tương tự thuộc tính constraint của Rotation. Hình 4.5c – Bảng thuộc tính của - Spring: Là một chức năng mới mối nối tạo bởi công cụ Bone của IK Bone, nó có hai thuộc tính Strength (số lượng của Spring. Khi giá trị này lớn hơn 0, khung sườn sẽ phản 65
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– ứng lại với một chuyển động vật lý có tỷ lệ thuận giữa giá trị Strength và chuyển động tổng thể) và Damping (giá trị đề kháng Strength). Tùy chọn này ảnh hưởng đến độ tắt dần của chuyển động, lần lượt xác định bằng khoảng thời gian giữa sự chuyển động ban đầu và thời gian khi IK Bone trở lại vị trí dừng của nó). Đây là một tính năng mới đối với công cụ này trong phiên bản Flash CS6+ này mà Adobe đã bổ sung vào. Công cụ Bind Công cụ này phải dùng kết hợp với công cụ Bone. Khi sử dụng công cụ Bone trong trường hợp 1, ta có thể kết hợp với công cụ Bind. Với công cụ Bind, bạn có thể ép buộc các thanh nối phụ thuộc lẫn nhau. Khi sử dụng công cụ Bind, và bấm vào một thanh nối, sẽ hiện ra bốn điểm điều khiển đối với thanh nối đó (trong hình minh họa bên dưới, đó là các nút được đánh dấu vàng). Hình 4.5d – Công cụ Bind Tương ứng với các điểm điều khiển này là các viền của phần đối tượng được điều khiển bởi thanh nối. Để cho mỗi mối nối liên kết với một mối nối khác, ta sử dụng công cụ Bind, bấm chọn các nút điều khiển này và kéo thả vào vị trí thanh nối khác (thanh nối mà các điểm này phụ thuộc vào). 6. Công cụ Deco Là công cụ trang trí nghệ thuật. Với công cụ này, ta có các hiệu ứng tùy chọn: Vine Fill, Grid Fill, Symmetry Brush, 3D Brush, Building Brush, Decorated Brush, Fire Animation, Flame Brush, Flower Brush, Lightning Brush, Particle System, Smoke Animation và Tree Brush. Hiệu ứng Vine Fill Tạo hiệu ứng nghệ thuật dạng cây nho. Khi bấm chọn dạng biểu tượng này, sẽ xuất hiện bảng thuộc tính sau • Leaf: Biểu tượng tương ứng với biểu tượng lá. Nếu bạn muốn thay đổi, bạn chỉ việc nhấp vào Edit và chọn dạng symbol tương ứng. Nếu bạn muốn đổi màu lá, bạn nhấp vào biểu tượng Color tương ứng với Leaf. 66
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.6a - Công cụ deco với hiệu ứng Vine Fill • Flower: Hoàn toàn tương tự nhưng nó tương ứng với biểu tượng hoa. Nếu bạn muốn thay đổi màu hoa, bạn nhấp vào biểu tượng Color tương ứng với Flower. Nếu muốn sử dụng hình mặc định, bạn bấm chọn Default Shape. • Advanced Option: Branch Angle (góc xoay của các cành nho), Color (màu của cành nho), Pattern Scale (kéo giãn mẫu cành nho) và Segment Length (độ dài của các cành nho). • Animate Pattern: Xây dựng một nhóm (gồm cành, là và hoa) lên từng Frame một. Chức năng này giúp tạo hiệu ứng động. Bạn có thể hiệu chỉnh tốc độ nhờ vào Frame Step. Hiệu ứng Grid Fill Tạo hiệu ứng nghệ thuật dạng lưới. Khi bấm chọn hiệu ứng Grid Fill, trong bảng thuộc tính có các thuộc tính sau: • Fill: Nhấp chọn edit để thay đổi biểu tượng. Bấm vào biểu tượng color để đổi màu cho biểu tượng. Bấm vào Default Shape để chọn hình mặc định. • Advanced Options: Horizontal Spacing (khoảng cách theo chiều ngang), Vertical Spacing (khoảng cách theo chiều dọc) và Pattern Scale (độ phóng to Hiệu ứng Symmetry Brush Hiệu ứng này giúp tạo các mầu nghệ thuật có tính chất đối xứng. Khi bấm chọn hiệu ứng Symmetry Brush, trong bảng thuộc tính Properties sẽ hiện ra các thuộc tính sau đây: • Module: Bấm edit để thay đổi biểu tượng. Bấm color để đổi màu cho biểu tượng. Chọn Default Shape để chọn hình mặc định. • Advanced Options: Reflect Across Line (tạo cặp điểm đối xứng qua đường chuẩn), Reflect Across Point (tạo cặp điểm đối tứng qua điểm chuẩn), 67
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Rotate Around (tạo các điểm dạng vòng), Grid Translation (tạo một mảng các điểm). • Test Collisions: Cho phép tránh hiện tượng các biểu tượng va chạm vào nhau. Hình 4.6b - Công cụ Deco với hiệu ứng Symmetry Brush Hiệu ứng 3D Brush Hiệu ứng 3D Brush được sử dụng để tạo các kiểu phối màu từ nhiều đối tượng. Mỗi một thao tác phun màu bằng hiệu ứng này cần sử dụng tối da 4 đối tượng. Hình 4.6c - Công cụ Deco với hiệu ứng 3D Brush 68
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Với hiệu ứng này, các đối tượng sẽ được phun theo hiệu ứng 3D (tạo tọa độ ngẫu nhiên trong không gian 3 chiều ). Để thay đổi các đối tượng, bạn chỉ việc nhấp vào nút Edit, và chọn một đối tượng khác để thay thế. Các đối tượng để thay thế phải là các biểu tượng của Flash (MovieClip, Button hoặc Graphic). Các tính năng trong mục Drawing Effect này hoàn toàn tương tự trong hiệu ứng Vine và Grid. Trong mục Advanced Options có các tùy chọn sau đây: • Max objects: Số lượng đối tượng được tạo cực đại trong mỗi lần phun. • Spray area: Vùng được phun (tính theo pixel). • Perspective: Cho phép tạo hiệu ứng phối cảnh hay không. • Distance scale: Độ kéo giãn theo khoảng cách (độ phóng to – zoom). • Random scale range: Tỉ lệ kéo giãn ngẫu nhiên (bao nhiêu trong số các biểu tượng đó chịu tác động của độ kéo giãn ngẫu nhiên). • Random rotation range: Tạo các góc quay ngẫu nhiên cho các biểu tượng. Hiệu ứng Building Brush Với hiệu ứng Building Brush, bạn có thể tạo dựng các tòa nhà cao tầng. Hình 4.6d - Công cụ Deco với hiệu ứng Building Brush Trong mục Advanced Options, có hai chức năng: • Tùy chọn thả xuống: Cho phép bạn lựa chọn các mẫu nhà cao tầng. Bạn có 4 lựa chọn mẫu nhà cao tầng – skyscraper 1, skyscraper 2, skyscraper 3 và skyscraper 4. Nếu bạn muốn tạo các mẫu nhà ngẫu nhiên, bạn có thể chọn Radom Building. • Building size: Kích thước (theo chiều ngang) của tòa nhà. Khi xây dựng các tòa nhà, bạn cần lưu ý: sau khi chọn công cụ Deco và chọn mẫu nhà, bạn hãy nhấp chuột và kéo dọc theo hướng lên phía trên. Nếu độ cao của tòa nhà đã phù hợp, bạn thả chuột. 69
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Với hiệu ứng này bạn có thể dễ dàng tạo dựng các ngôi nhà cao tầng. Bạn lưu ý rằng, các ngôi nhà cao tầng này được tạo bằng cách lắp ghép các phần lại với nhau để tạo nên một tòa nhà hoàn chỉnh. Nếu bạn muốn tạo hiệu ứng cho một đối tượng ngôi nhà hoàn chỉnh, bạn cần nhóm các phần của ngôi nhà thành một đối tượng. Hiệu ứng Decorated Brush Với công cụ Decorated Brush, bạn có thể tạo các đường viền nghệ thuật theo các mẫu được cung cấp sẵn Hình 4.6e - Công cụ Deco với hiệu ứng Decorated Brush Trong mục tùy chọn Advanced Option, bạn có 3 tùy chọn: • Tùy chọn thả xuống: Có 20 dạng đường viền nghệ thuật cho bạn chọn lựa. • Pattern color: Chọn màu cho đường viền nghệ thuật. • Pattern size: Kích thước của biểu tượng nghệ thuật. • Pattern width: Độ rộng của biểu tượng nghệ thuật. Hiệu ứng Fire Animation Hiệu ứng Fire Animation sẽ tạo ra một ngọn lửa cháy sáng. Nó rất hữu dụng trong các tác vụ cần tạo dựng ngọn lửa. Đối với hiệu ứng này, mục Advanced Options có các tùy chọn sau: • Fire size: Kích thước ngọn lửa. • Fire speech: Tốc độ cháy của lửa. • Fire duration: Hiệu ứng động của lửa sẽ diễn ra trong bao nhiêu frame. Bạn sẽ thấy đó chính là số keyframe hiển thị trên thanh TimeLine. Nhưng điều này chỉ đúng trong trường hợp tùy chọn End Animation không được chọn. • End Animation: Ngọn lửa tàn dần (nếu được chọn), hoặc diễn tiến mãi mãi (nếu không được chọn). 70
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– • Flame color: Màu phía rìa ngoài của ngọn lửa. • Flame core color: Màu của lõi ngọn lửa. • Fire spark: Số ngọn lửa Hình 4.6f - Công cụ Deco với hiệu ứng Fire spark Thông thường, khi tạo dựng một hoạt cảnh có sử dụng đến ngọn lửa, bạn nên kết hợp với hiệu ứng tạo khói (Smoke Animation) mà chúng ta sẽ tìm hiểu ở phần tiếp theo. Hiệu ứng Flame Brush Hiệu ứng này giúp tạo dựng cách phun màu theo hình dáng ngọn lửa. Trong mục Advanced Options có 2 tùy chọn: • Flame size: Kích thước của ngọn lửa. • Flame color: Màu của ngọn lửa. Hiệu ứng này tương đối đơn giản. Nó không có nhiều ứng dụng trong các dự án thiết kế phim hoạt hình. Hình 4.6g - Công cụ Deco với hiệu ứng Flame Brush 71
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hiệu ứng Flower Brush Hiệu ứng này quả thật rất thú vị. Nhờ vào nó, chúng ta có thể tạo các cành hoa. Với mục Advanced Options, ta có các tùy chọn sau: • Tùy chọn thả xuống: cho phép bạn chọn lựa các loại hoa sau: Garden, Flower, Rose, PoinSettia và Berry Hình 4.6h - Công cụ Deco với hiệu ứng Flower Brush • Flower color: Màu cho hoa. • Flower size: Kích thước của hoa. • Leaf color: Màu cho lá. • Leaf size: Kích thước của lá. • Fruit color: Màu của quả. • Tùy chọn branch: Cho phép hiển thị cành cây hay không. Nếu tùy chọn này được kích hoạt, bạn có thể chọn tùy chọn bên dưới Branch color. • Branch color: Màu của cành cây. Hiệu ứng Lightning Brush Hiệu ứng Lightning dùng để tạo các tia sáng. Nó được ứng dụng trong việc tạo các tia sét, hoặc các hiệu ứng phóng điện khác. Với mục Advanced Options, bạn có các tùy chọn sau đây: • Lightning color: Màu của tia sáng. • Lightning scale: Độ kéo giãn của tia sáng. • Tùy chọn Animation: Nếu muốn tạo hiệu ứng động cho tia sáng. • Beam width: Độ rộng của tia sáng. • Complexity: Độ phức tạp của chùm tia sáng. 72
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.6i - Công cụ Deco với hiệu ứng Lightning Brush Hiệu ứng Particle System Hiệu ứng này tạo một chùm hạt được phóng ra từ một nguồn phát. Bạn sẽ thấy nó cũng rất hữu ích trong tác vụ: Phun bong bóng nước, phun các hạt bụi Hình 4.6k - Công cụ Deco với hiệu ứng Particle System - Mục Drawing Effect có hai tùy chọn cho các loại hạt. Bạn có thể thay đổi chúng như đối với hiệu ứng vine, grid và 3D brush. - Mục Advanced options có các tùy chọn sau: • Total length: Diễn tiến hành động trên bao nhiêu frame. • Particle generation: Nguồn phát các hạt sẽ diễn ra trên bao nhiêu frame. • Rate per frame: Tốc độ trên mỗi frame. • Life span: Mỗi một hạt sẽ có thời gian tồn tại trên bao nhiêu frame. • Initial speech: Tốc độ khởi tạo. • Initial size: Kích thước khởi tạo. 73
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– • Min initial direction: Góc phun nhỏ nhất. • Max initial direction: Góc phun lớn nhất. • Gravity: Trọng lượng của hạt. • Rotation rate: Tốc độ quay vòng của hạt. Hiệu ứng Smoke Animation Hiệu ứng này tương tự với hiệu ứng Fire Animation. Nó dùng để tạo hiệu ứng bóc khói. Thường hiệu ứng này sử dụng kết hợp với hiệu ứng Fire Animation. Hình 4.6l – Công cụ Deco với hiệu ứng Smoke Animation Trong mục Advanced options có các tùy chọn sau đây: • Smoke size: Kích thước của khói. • Smoke speed: Tốc độ khói. • Smoke duration: Diễn tiến của hiệu ứng khói trên bao nhiêu frame. Cũng tương tự Fire Animation, số keyframe trên Timeline sẽ chính là giá trị của Smoke duration trong trường hợp tùy chọn End Animation không được chọn. • End Animation: Hiệu ứng khói bốc lên và tan biến vào không khí (nếu tùy chọn này được chọn) và không tan biến vào không khí (trong trường hợp tùy chọn này không được chọn). • Smoke color: màu của khói. • Background color: Màu của khói khi khói dần tan vào không khí. Hiệu ứng Tree Brush Hiệu ứng này sử dụng để tạo các loại cây khác nhau. Flash cung cấp cho ta khá nhiều dạng cây để sử dụng. Trong mục Advanced options có các tùy chọn sau đây: • Tùy chọn thả xuống: Cho phép bạn chọn lựa các loại cây. Flash cung cấp sẵn cho chúng ta 20 loại cây khác nhau. 74
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– • Tree scale: Độ kéo giãn của cây. • Branch color: Màu của cành cây. • Leaf color: Màu của lá cây. • Flower/Fruit color: Màu của hoa hoặc quả. Hình 4.6m - Công cụ Deco với hiệu ứng Tree Brush Với công cụ Deco, bạn thả sức để sáng tác các kịch bản cho các thước phim hoạt hình của bạn cũng như cho game. Dù rằng công cụ Deco này đã có trong phiên bản CS4, nhưng với phiên bản CS6 này, công cụ này đã hoàn thiện hơn, cung cấp cho ta nhiều tùy chọn hơn để sáng tác. 7. Công cụ 3D Translation và 3D Rotation Công cụ 3D Translation Công cụ này cho phép chúng ta có thể tạo chuyển động 3D cho đối tượng. Như chúng ta đã thảo luận ở trên, công cụ này chỉ hoạt động đối với đối tượng được tạo Motion Tween. Ví dụ sau đây sẽ minh họa cho việc sử dụng công cụ 3D Translation. Trong ví dụ này, ta sẽ tạo một mặt phẳng và cho phép nó chuyển động trong không gian 3 chiều. Để làm được điều này, chúng ta sẽ thao tác theo các bước sau đây: - Bước 1. Trên Layer 1, bạn hãy tạo một hình bình hành (sử dụng công cụ hình chữ nhật và công cụ Free Transform) để tượng trưng cho mặt phẳng và trên Layer 2 bạn hãy tạo một hệ tọa độ Descartes 3 chiều như hình minh họa. - Bước 2. Chọn hình bình hành, kích chuột phải và chọn Create Motion Tween Sau đó, bấm chọn công cụ 3D Translation. Bạn có thể sử dụng công cụ này để di chuyển mặt phẳng theo các chiều x (trục ngang), y (trục đứng) và z (điểm chấm trung tâm). 75
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– - Bước 3. Để đảm bảo rằng trục tọa độ mà ta tạo tồn tại song song với các layer của mặt phẳng, ta cần chọn Frame cuối cùng trên TimeLine mặt phẳng của Layer này và nhấn phím F5. - Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả. Hình 4.7a - Công cụ 3D Translation Công cụ 3D Rotation Công cụ này cho phép chúng ta có thể xoay chuyển 3D cho đối tượng. Như đã trình bày ở trên, công cụ này cũng chỉ hoạt động đối với đối tượng được tạo Motion Tween. Ví dụ sau đây mặt phẳng sẽ xoay chuyển 3D trong không gian. Để làm được điều này, chúng ta sẽ thao tác theo các bước sau đây: - Bước 1. Trên Layer 1, bạn hãy một hình bình hành (sử dụng công cụ hình chữ nhật và công cụ Free Transform) để tượng trưng cho mặt phẳng và trên Layer 2 bạn hãy tạo một hệ tọa độ Descartes 3 chiều như hình minh họa. - Bước 2. Chọn hình bình hành, kích chuột phải và chọn Create Motion Tween Sau đó, bấm chọn công cụ 3D Rotation. Bạn có thể sử dụng công cụ này để xoay chuyển mặt phẳng theo các chiều x (trục ngang), y (trục đứng) và z (vòng tròn bên trong) Hình 4.7b - Công cụ 3D Rotation 76
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– - Bước 3. Để đảm bảo rằng trục tọa độ mà ta tạo tồn tại song song với các layer của mặt phẳng, ta cần chọn Frame cuối cùng trên TimeLine mặt phẳng của Layer này và nhấn phím F5. - Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả. BÀI TẬP THỰC HÀNH Bài tập 1: Hãy sử dụng kĩ thuật Tween kết hợp với các công cụ tạo hiệu ứng 3D để tạo dựng các hiệu ứng sau: a) Hiệu ứng quả bóng di chuyển trong không gian. b) Chữ chạy 3D. Bài tập 2: Sử dụng các công cụ tô vẽ. vẽ hình con lắc đơn sau đó tạo hiệu ứng mô phỏng chuyển động của con lắc đơn như hình sau Bài tập 3: Tạo một đoạn văn bản với nội dung “SAO VÀNG” và một ngôi sao 5 cánh màu vàng. Tạo hiệu ứng biến đổi chữ “SAO VÀNG” thành ngôi sao. 77
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– CHƯƠNG 5: LẬP TRÌNH VỚI ACTION SCRIPT 1. Khái niệm về ActionScript(AS) ActionScript là một ngôn ngữ lập trình hướng đối tượng được dùng để phát triển các ứng dụng chạy trên Adobe Flash Player, Flash Plugin, Flash Lite, Shockwave và Adobe AIR. Ngôn ngữ lập trình ActionScript có thể được biên dịch bởi: - Adobe Flex Builder. - Adobe Flash Professional. - Command Line nhờ vào bộ SDK. Cũng tương tự như Java, sau khi được biên dịch, các ActionScript sẽ được chuyển thành dạng bytecode mà chỉ có máy ảo ActionScript (AVM) mới hiểu được. Máy ảo ActionScript này được tích hợp bên trong Flash Player, Flash Plugin, Flash Lite, Shockwave và Adobe AIR. 2. Các kiểu dữ liệu Trong AS, mọi kiểu dữ liệu đều tương ứng với một lớp đối tượng tạo ra nó: kiểu int và lớp int, kiểu Number và lớp Number - Kiểu số nguyên Có hai dạng số nguyên được hỗ trợ trong AS là kiểu số nguyên có dấu int và số nguyên không dấu uint. Cả hai loại số nguyên này điều chiếm 4byte, nghĩa là vùng giá trị của int là -231 đến 231-1 và giá trị của uint là 0 232-1. Bạn lưu ý rằng, trong các kiểu dữ liệu, thì chỉ có kiểu số nguyên có chữ cái đầu tiên viết thường (int chứ không phải là Int). - Kiểu số thực Số thực dấu chấm động theo chuẩn IEEE-754. Số thực trong AS chiếm 32 bit. Từ khóa khai báo là Number. Bạn lưu ý Number viết hoa chữ cái đầu tiên. - Kiểu Boolean Kiểu Boolean trong AS có hai giá trị là true và false. Bạn lưu ý Boolean viết hoa chữ cái đầu tiên, true và false viết thường mọi chữ cái. - Kiểu xâu String Xâu kí tự được đánh dấu từ 0. Phần tử cuối cùng trong xâu có chỉ số là xâu.lengh1. Kiểu xâu được khai báo nhờ từ khóa String. Bạn cũng cần lưu ý rằng String viết hoa chữ cái đầu tiên. - Kiểu mảng Array Việc đánh dấu trong Array hoàn toàn tương tự String. Kiểu Array cũng viết hoa chữ cái đầu tiên. - Kiểu đối tượng object Tương tự kiểu Struct của C, đồng thời cũng giống kiểu enum trong Java. Nhưng mềm dẻo hơn rất nhiều. 78
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Chú ý: Để xử lý các dữ liệu liên quan đến các kiểu dữ liệu nguyên thủy này ta phải làm việc với các lớp đối tượng tương ứng: kiểu int và uint với lớp int và uint, kiểu Number với lớp Number, kiểu String với lớp String, kiểu Array với lớp Array và kiểu đối tượng Object. Chi tiết về các phương thức xử lý của các lớp này ta sẽ thảo luận sau khi tìm hiểu về lớp trong AS. 3. Biến và Hằng a. Biến Biến là yếu tố cơ bản của bất kỳ ngôn ngữ máy tính nào. Biến là vùng trống trong bộ nhớ máy tính dành cho một kiểu dữ liệu nào đó và có đặt tên. Các biến trong bộ nhớ ở các thời điểm khác nhau có thể cất giữ các giá trị khác nhau. Trước khi sử dụng một biến nào đó phải khao báo nó. Khi khai báo một biến ta khai báo theo cú pháp sau: var tên_biến:Kiểu_Dữ_Liệu [= giá_trị_khởi_tạo]; Khi khai báo một biến, bạn phải sử dụng từ khóa var. Ta có thể lấy một vài ví dụ về khai báo biến trong AS var a:int = 1; var b:Number; b = 1.5; var ar:Array = new Array(“a”, “b”); var ar:Array = new Array(3); b. Hằng: Hằng(const) là một đại lượng không thay đổi giá trị trong toàn chương trình. Hằng có thể là số nguyên, số thực, ký tự hoặc chuỗi ký tự. Trong AS, để khai báo hằng ta thay từ khóa var trong khai báo biến bằng từ khóa const. Bạn lưu ý rằng khi khai báo hằng bạn cần phải bổ sung giá trị cho nó. Nghĩa là cú pháp khai báo hằng phải tuân theo quy tắc sau const tên_hằng:Kiểu_Dữ_Liệu = ; ví dụ: const a:int = 1; const s:String = “abc”; 4. Các cấu trúc lệnh điều khiển a. Câu lệnh if Lệnh rẽ nhánh này cho phép rẽ hai nhánh ứng với trường hợp đúng hoặc sai của biểu thức trọn, cách viết như sau: Cú pháp: if(điều_kiện_lựa_trọn) Hành_động_1; else hành_động_2; 79
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Trong đó: - Điều kiện lựa trọn: Là biểu thức logic có giá trị đúng hoặc sai - Hành động 1 và 2: Là các khối lệnh để thực hiện cho trường hợp 1 và 2 tương ứng. Chức năng: - Máy sẽ thực hiện hành động 1 nếu điều kiện lựa chọn có giá trị dúng, ngược lại máy sẽ thực hiện hành động 2. Chú ý: Câu lệnh if có thể có hoặc không có từ khóa else và hành_động_2. Khi không có từ khóa else và hành động 2 Nếu điều kiện lựa chọn trả về giá trị sai thì máy bỏ qua việc thực hiện công việc trong câu lệnh if mà tiến hành thực hiện ngay các công việc sau câu lệnh if. b. Câu lệnh switch Cú pháp switch(biểu_thức) { case giá_trị_1: Lệnh 1; break; case giá_trị_(n-1): Lệnh n-1; break; default: Lệnh n; } Giải thích: Kiểm tra giá tri ̣của biểu thức, nếu nó nhận giá tri ̣1 thì Lệnh 1 sẽ được thực thi, , nếu nó nhận giá tri ̣n-1 thì Lệnh n-1 sẽ được thực thi. Trong trường hợp, biểu thức không nhận từ giá tri ̣1 cho đến giá tri ̣n-1 thì nó sẽ thực hiện Lệnh n. Sau mỗi câu lệnh trong các trường hợp case, cần có câu lệnh break để thoát khỏi vòng lặp case. Nếu không có break, các trường hợp case tiếp theo cũng sẽ được thực hiện. c. Các câu lệnh lặp Lệnh lặp cho phép máy thực hiện một hành động nào đó lặp lại nhiều lần, mặc dù chúng ta chỉ viết một lần. - Lệnh lặp for Cú pháp: for (nhóm lệnh 1;biểu thức 2; nhóm lệnh3) Hành động lặp; Trong đó : - Các nhóm lệnh 1,2,3 là các lệnh điều khiển trong quá trình lặp của for - Hành động lặp: Là khối lệnh để máy tính thực hiện lặp lại nhiều lần. 80
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Chức năng: Máy thực hiện nhóm lệnh 1 duy nhất một lần đầu tiên, sau đó thực hiện tính biểu thức 2 và nếu kêt quả tương ứng với giá trị đúng thì máy thực hiện hành đông lặp, tiếp theo máy thực hiện nhóm lênh 3, và lặp lại kiểm tra biểu thức 2 cho đến khi kết quả tương ứng với giá trị sai ví dụ: //in ra các con số nguyên từ 0 -> 5 for(var i:int = 0; i<6; i++) { trace(i); } - Câu lệnh lặp for in Khi chỉ số của mảng không liên tục hoặc không tuân theo một quy tắc nào đó, thì cách sử dụng vòng lặp for ở trên tỏ ra không còn hiệu quả. Để khắc phục nhược điểm này, AS bổ sung vòng lặp for in. Bên cạnh đó, đối với trường hợp Object, thı̀ phần đánh chỉ số có thể khô ng đơn thuần là số mà có thể là kiểu dữ liệu bất kì. Khi đó, ta bắt buộc phải sử dụng vòng lặp for in này (hoặc for each in trong mục tiếp theo). Cú pháp for(var index in Array/Object) { Lệnh; } Giải thích: Trong vòng lặp for in này, chỉ số index sẽ được liệt kê trong tập chỉ số của Array hoặc Object. Tương ứng với chỉ số này, ta có thể thu được giá tri ̣của các phần tử tương ứng. - Ví dụ: Ví dụ sử dụng for in kết hợp với Array Ví dụ Kết quả var items:Array = new Array(1, 2, 3); Phần tử thứ 0 là 1 for(var index in items) Phần tử thứ 1 là 2 { Phần tử thứ 2 là 3 trace("Phần tử thứ " + index + " là " + items[index]); } - Câu lênh lặp for each in Tương tự như câu lệnh for in, câu lệnh for each in cũng có thể sử dụng cho mảng có chỉ số không liên tục hoặc Object. Tuy nhiên, for each in truy cập đến các phần tử trực tiếp mà không cần thông qua chỉ số. 81
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Cú pháp for each(var item in Array/Object) { Lệnh; } Ví dụ: Ví dụ sử dụng for each in kết hợp với Array Ví dụ Kết quả var items:Array = new Array(1, 2, 3); 1 for each (var item in items) { 2 trace(item); 3 } Khác với câu lệnh for in, biến item trong câu lệnh for each in sẽ nhận giá tri ̣của các phần tử của mảng chứ không phải là chỉ số như trong trường hợp trên. Nó cũng được khai báo trực tiếp trong vòng lặp for. - Lệnh lặp while Cú pháp while(biểu_thức_điều_kiện) { Lệnh; } Nếu biểu thức điều kiện đúng thì lặp lại quá trình thực thi lệnh. Nghĩa là câu lệnh while luôn kiểm tra biểu thức điều kiện trước khi thực hiện lệnh. Nếu biểu thức điều kiện sai ngay từ đầu thì lệnh sẽ không được thực hiện. Ví dụ: In ra các số giảm dần từ 3 đến 1. Ví dụ Kết quả var i:int = 3; 3 while (i>0) 2 { trace(i); 1 i ; } 5. Sự kiện chuột, bàn phím a. Sự kiện chuột Khi làm việc với sự kiện chuột trong AS, ta cần cài đặt tên hiển thị cho đối tượng. Để minh họa cho việc xử lý sự kiện chuột trong AS, ta sẽ minh họa sự 82
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– kiện này trên đối tượng stage (khung trình chiếu). Ví dụ sau đây sẽ in ra dòng chữ “Hello” khi nhấn chuột trái lên stage. import flash.events.MouseEvent; stage.addEventListener(MouseEvent.CLICK, func); function func(e:MouseEvent):void{ trace("Hello"); } Sự kiện chuột được quản lý bởi lớp MouseEvent. Sự kiện chuột lắng nghe (tham số đầu tiên trong phương thức addEventListener) có thể nhận một trong các giá tri ̣sau: SỰ KIỆN CHUỘT LẮNG NGHE GIẢI THÍCH CLICK : String = "click" Khi kích đơn chuột trái lên đối tượng. CONTEXT_MENU : String = Khi menu ngữ cảnh hiện ra (menu ngữ "contextMenu" cảnh hiện ra sau khi ta kích chuột phải lên đối tượng). DOUBLE_CLICK : String = Khi kích đúp chuột trái lên đối tượng. "doubleClick" MIDDLE_CLICK : String = Khi kích chuột giữa (con lăn) lên đối "middleClick" tượng. MIDDLE_MOUSE_DOWN : String Khi chuột giữa (con lăn) được nhấn lên = "middleMouseDown" đối tượng. MIDDLE_MOUSE_UP : String = Khi chuột giữa (con lăn) được thả ra khỏi "middleMouseUp" đối tượng. MOUSE_DOWN : String = Khi chuột trái được nhấn lên đối tượng. "mouseDown" MOUSE_MOVE : String = Khi trỏ chuột di chuyển trên đối tượng. "mouseMove" MOUSE_OUT : String = Khi trỏ chuột di chuyển ra khỏi đối "mouseOut" tượng. MOUSE_OVER : String = Khi trỏ chuột đặt trên đối tượng. "mouseOver" MOUSE_UP : String = "mouseUp" Khi chuột trái được thả ra khỏi đối tượng. 83
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– MOUSE_WHEEL : String = Khi chuột giữa (con lăn) lăn trên đối "mouseWheel" tượng. RIGHT_CLICK : String = Khi nhấp chuột phải lên đối tượng. "rightClick" RIGHT_MOUSE_DOWN : String = Khi chuột phải nhấn lên đối tượng. "rightMouseDown" RIGHT_MOUSE_UP : String = Khi chuột phải được thả ra khỏi đối "rightMouseUp" tượng. ROLL_OUT : String = "rollOut" Nếu mouseEnabled = false thì tương tự MOUSE_OUT, ngược lại, nếu true thì nó sẽ khác chỉ duy nhất ở một điểm khi nó có đối tượng con ở trong (ngăn việc xảy ra sự kiện của đối tượng con). ROLL_OVER : String = "rollOver" Tương tự như trên khi so sánh với MOUSE_OVER. Cũng tương tự như Event, MouseEvent với các tham số sự kiện chuột lắng nghe ở trên được hỗ trợ hoàn toàn với phiên bản AIR mới nhất. Tùy theo các phiên bản khác nhau mà mức hỗ trợ các tham số sự kiện chuột lắng nghe khác nhau. b. Sự kiện bàn phím Hoàn toàn tương tự sự kiện chuột, để nắm bắt được các sự kiện bàn phím ta sử dụng lớp KeyboardEvent. Khi làm việc với các sự kiện bàn phím, ta cần làm việc với các phím. Các phím này được quản lý bởi lớp Keyboard trong AS. Xét ví dụ sau: import flash.events.KeyboardEvent; import flash.ui.Keyboard; stage.addEventListener(KeyboardEvent.KEY_UP, func); function func(e:KeyboardEvent):void { if(e.keyCode==Keyboard.ENTER) trace("Hello "); } Trong ví dụ trên, khi ta nhấn phím Enter thì sẽ in ra dòng thông báo “Hello”. Sự kiện của phím KeyboardEvent chỉ bao gồm KEY_UP (khi phím được nhả ra) và KEY_DOWN (khi phím được ấn xuống). Trong lớp KeyboardEvent có các thuộc tính sau: THUỘC TÍNH GIẢI THÍCH 84
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– altKey:Boolean Phím ấn là phím Alt ctrlKey:Boolean Phím ấn là phím Ctrl shiftKey:Boolean Phím ấn là phím Shift commandKey:Boolean Phím ấn là các phím lệnh controlKey:Boolean Phím ấn là các phím điều khiển charCode:uint Kí tự được nhấn keyCode:uint Mã của kí tự được nhấn KeyLocation:uint Vi ̣ trí của phím được ấn (Shift trái/phải, Ctrl trái/phải, Alt trái/phải) - KeyLocation.LEFT/KeyLocation.RIGHT, phím chuẩn - KeyLocation.STANDARD, phím số - KeyLocation.NUM_PAD. Lớp KeyBoard có các thuộc tính sau: THUỘC TÍNH GIẢI THÍCH capsLock:Boolean Bật chế độ CapsLock hay không. hasVirtualKeyboard:Boolean Có sử dụng bàn phím ảo hay không. numLock:Boolean Có bật chế độ NumLock hay không. 6. Đưa đối tượng vào ActionScript Flash cho phép bạn tạo một đối tượng bằng các công cụ vẽ. Đưa các đối tượng này và các đối tượng được cung cấp sẵn (như các thành phần GUI đề cập ở trên) vào AS. Để đưa một đối tượng ngoài vào trong môi trường runtime của Flash, bạn cần chuyển đổi các đối tượng của bạn thành các biểu tượng MovieClip hoặc Button.(Đối tượng Graphic không được hỗ trợ bởi actionscript). Sau đó, bạn hãy kích chọn đối tượng. Trong bảng thuộc tính, bạn hãy nhập tên của đối tượng thể hiện cần tạo ra vào mục , sau đó nhấp Enter. Giờ đây, đối tượng của bạn đã được khởi tạo và bạn có thể thao tác với nó bên trong AS theo tên thể hiện mà bạn vừa cài đặt. Hình 5.6a – Tạo một tên thể hiện cho đối tượng 85
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Nếu bạn import một đối tượng từ bên ngoài vào trong thư viện Library, bạn cũng có thể tạo một lớp chứa nó (tức là lớp để tạo ra đối tượng này). Ở ví dụ sau đây: Ta chèn một file âm thanh vào trong Library. Lập trình Khi bấm chuột vào nút Play thì nó sẽ mở file âm thanh này. - Trong Stage, bạn hãy tạo một nút Play (là biểu tượng Button) và cài đặt tên thể hiện cho nó ở Properties là “btnPlay”. - Thực hiện import file âm thanh vào trong thư viện. Trong cửa sổ thư viện Library, bấm chọn file âm thanh, kích chuột phải và chọn Properties. Hình 5.6b – Thao tác với thuộc tính Properties của đối tượng trong thư viện - Khi đó, sẽ xuất hiện hộp thoại Properties như sau: 86
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 5.6c – Hộp thoai Properties của đối tượng file âm thanh Bạn cần đánh dấu tích vào Export for ActionScript. Trong Class, bạn nhập vào tên lớp sẽ được xây dựng cho đối tượng âm thanh này (ví dụ là myMusic). Ngay bên dưới là Base Class của nó tức lớp cơ sở mà nó thừa kế. Sau đó nhấp Ok. Kết thúc các thao tác trên, bạn đã nhận được một đối tượng btnPlay và một lớp myMusic. Tiếp theo, Nhấn F9 để mở khung soạn thảo ActionScript và viết mã lệnh cho chương trình. Bạn hãy bổ sung sự kiện kích chuột cho đối tượng btnPlay như sau: import flash.events.MouseEvent; btnPlay.addEventListener(MouseEvent.CLICK, func); var Player:flash.media.Sound = new myMusic(); function func(e:MouseEvent):void { Player.play(); } Đối tượng Player là một sự thể hiện của lớp myMusic. Khi bấm chuột vào nút btnPlay, hàm func() sẽ được gọi đến. Kết quả là phương thức play của đối tượng Player được thực thi. Nếu muốn bổ sung thêm phương thức, thuộc tính cho lớp myMusic, ta chỉ việc thêm mã lệnh vào trong lớp myMusic thu được ở trên. Bạn cũng cần lưu ý rằng, trong trường hợp này, lớp myMusic kế thừa lớp flash.media.Sound nên nó có phương thức play() để phát nhạc. 87
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– BÀI TẬP THỰC HÀNH Bài tập 1: Sử dụng các công cụ tô vẽ, vẽ đồng hồ chiếc kim sau đó lập trình mô phỏng quá trình hoạt động của chiếc kim trên thơi gian thực. Bài tập 2: Vẽ một thiệp mừng giáng sinh. Sau đó lập trình tạo hiệu ứng tuyết rơi trên thiệp mừng giáng sinh đó. Bài tập 3: Vẽ một menu các đề mục theo một chủ đê bất kỳ. sau đó lập trình tạo hiệu ứng khi di chuyển chuột qua các thanh menu. 88
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– CHƯƠNG 6: CÁC HIỆU CHỈNH NÂNG CAO 1. Xử lý âm thanh, hình ảnh, và video a. Import âm thanh, hình ảnh và video vào thư viện Để chèn âm thanh, hình ảnh và video vào thư viện chọn menu File -> Import -> Import to Library Một của sổ lựa chọn hiện ra, hãy chọn đến file cần chèn rồi click vào “open”. Mặc dù chức năng Import to Library hỗ trợ cả chức năng chèn video, nhưng bạn nên sử dụng chức năng này cho file âm thanh và hình ảnh. Riêng với video, bạn nên sử dụng chức năng Import Video, nằm trong menu File -> Import -> import Video. Sau khi chèn file âm thanh, hình ảnh hoặc video thì file đó nằm trong thư viện của flash bạn đang làm, để kiểm tra bạn vào: Window -> Library. b. Xử lý âm thanh Sau khi import một file âm thanh vào trong thư viện, ta có thể hiệu chỉnh thuộc tính của nó. Bạn hãy chọn file âm thanh vừa nhập vào, kích chuột phải và chọn Properties. Bảng thuộc tính của âm thanh sẽ có dạng như sau Hình 6.1a – Bảng thuộc tính âm thanh Bạn có thể nghe qua âm thanh nhờ vào chức năng Test, dừng chơi nhờ chức năng Stop, thay đổi file nguồn nhờ chức năng Import, Đặc biệt, bạn có thể thay đổi định dạng nén cho file âm thanh nhờ vào Compression. Để xử lý âm thanh trong Flash, Adobe đã cung cấp cho ta một trình tiện ích riêng dành cho nhiệm vụ này đó là Adobe SoundBooth. Với SoundBooth, bạn 89
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– có thể thay đổi định dạng âm thanh (bao gồm cả video), trích tách âm thanh khỏi video, bổ sung các hiệu ứng cho âm thanh, trích tách một phần của file âm thanh, và nhiều tính năng khác. Hình 6.1b - Giao diện SoundBooth CS6 Sau đây là một vài chức năng trong SoundBooth. - Trích xuất một phần file âm thanh: bạn hãy dùng trỏ chuột và bôi đen phần âm thanh trên biểu đồ phổ của nó. Kích chuột phải và nhấp chọn Crop. Sau đó nhấp Save As và chọn định dạng xuất bản. Để kiểm tra phần âm thanh được chọn có đúng hay không, hãy kéo thanh trạng thái hiện tại đến các vị trí cần kiểm tra, sau đó nhấp Play. - Tạo hiệu ứng cho âm thanh: bạn hãy chọn mục effect bên cạnh, và chọn hiệu ứng cần áp dụng. Khi sử dụng âm thanh trong phim Flash, bạn cần tạo riêng một Layer cho nó. Bạn cần đảm bảo các phần âm thanh của bạn phải tương ứng với các hoạt cảnh trong phim. Điều đó sẽ giúp phim của bạn thật hơn, sinh động hơn. c. Xử lý hình ảnh Sau khi import một file hình ảnh vào trong thư viện, ta có thể hiệu chỉnh thuộc tính của nó. Bạn hãy chọn file âm thanh vừa nhập vào, kích chuột phải và chọn: Properties, hoặc Edit with PhotoShop. Bảng thuộc tính của hình ảnh sẽ có dạng như sau: 90
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 6.1c – Bảng thuộc tính hình ảnh Chức năng trong bảng thuộc tính này tương tự với chức năng thuộc tính của âm thanh. Đối với hình ảnh khi nén bằng JPEG, bạn có thể chọn độ nén cho hình ảnh để giảm kích thước tập tin sau khi xuất bản. Để xử lý hình ảnh trong Flash, Adobe cho phép ta chỉnh sửa chúng bởi chương trình chuyên dụng là Adobe Photoshop. Có lẽ, đây là chương trình mà bạn đã quen thuộc. Hình 6.1d – Giao diện Adobe PhotoShop CS6 d. Xử lý Video Đây có thể là chức năng thú vị của Flash. Bạn hoàn toàn có thể sử dụng Flash để tạo các kĩ xảo điện ảnh (dù rằng đây không phải là chương trình chuyên dụng 91
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– – Nếu bạn quan tâm, bạn có thể tham khảo chương trình Adobe Premier và Adobe After Effect trong cùng gói Master CS6 này). Để làm việc với video, Flash cung cấp cho ta tiện ích Adobe Media Encoder để chuyển các tập tin video thành tập tin cho phép sử dụng trong Flash là flv hoặc f4v. Để chuyển đổi, bạn chỉ việc chọn Export Setting và hiệu chỉnh các thông số cần thiết. Với tiện ích này, bạn có thể hiệu chỉnh một vài thuộc tính cho các đoạn video của bạn. Hình 6.1e – Giao diện Adobe Media Encoder CS6 Ngoài ra, Flash còn cho phép bạn hiểu chỉnh nâng cao với hai chương trình hỗ trợ kĩ xảo điện ảnh là Adobe Premier và Adobe After Effect. Khi import một video vào Flash, bạn có thể cho phép video mà bạn import vào sẽ nằm trên một khung hình độc lập hay được nhúng vào một trình media playback (nghĩa là chương trình có các thành phần điều khiển chế độ chơi). Với việc tạo một khung hình độc lập, ta có thể tạo các mặt nạ với hình thù phức tạp, tạo các khung trình chiếu rất hấp dẫn. Bạn sẽ được tìm hiểu điều này khi chúng ta tìm hiểu kĩ hơn về mặt nạ. 2. Ghép nối nhiều hoạt cảnh Khi bạn xây dựng một bộ phim hoạt hình, bạn cần đến nhiều hoạt cảnh. Việc ghép nối nhiều hoạt cảnh trong Flash được thực hiện tự động. Bạn hãy tạo 92
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– các cảnh quay khác nhau trên các Scene khác nhau. Các hoạt cảnh sẽ được ghép nối tự động theo dãy các Scene đã được sắp xếp. 3. Kĩ thuật mặt nạ(Mask) Mặt nạ là một kĩ thuật cho phép bạn tạo riêng một khung trình chiếu với hình dạng phức tạp. Mọi hoạt động chỉ có thể trình chiếu bên trong mặt nạ. Để tạo một mặt nạ, bạn cần tạo một khung trình chiếu. Để tạo khung này, bạn chỉ đơn thuần vẽ một hình thể nào đó trên một Layer tạm gọi là Layer Mask. Bạn tiếp tục tạo thêm một Layer thứ hai để tạo hoạt cảnh. Để tạo mặt nạ, bạn hãy đặt Layer Mask lên trên layer hoạt cảnh, kích chuột phải vào Layer Mask này, và chọn Mask. Nếu bạn có nhiều Layer hoạt cảnh cần tạo bởi một Layer Mask, bạn chỉ việc kéo chọn Layer này vào trong Layer Mask ở khung Layer. Đến đây, chắc bạn đã tưởng tượng làm thế nào để tạo khung hình phức tạp cho các video ? Layer Mask tạo khung trình chiếu, Layer video là layer hoạt cảnh. Thế là công việc của bạn đã hoàn tất rồi ! Remarks: việc sử dụng mặt nạ không buộc bạn phải áp dụng cho toàn cảnh quay. Bạn có thể sử dụng nhiều mặt nạ đồng thời trong một cảnh quay. Một mặt nạ có tác dụng cho một lớp Layer chứa đối tượng. Một vài ví dụ sử dụng kĩ thuật mặt nạ Mask  Ví dụ về việc sử dụng mặt nạ động: Trong ví dụ này, bạn sẽ tạo một mặt nạ động cho một lớp đối tượng. Bạn sẽ sử dụng hai lớp: Layer Art và Layer Mask. Hình 6.3a – Mặt nạ động Bạn hãy sử dụng Motion Tween (hoặc Classic Tween) để tạo hiệu ứng dịch chuyển lớp mặt nạ dọc theo đường nghệ thuật. Tiếp theo, bạn hãy kích chuột phải lên lớp Mask, chọn Mask. Lập tức lớp mặt nạ chuyển động này sẽ tạo hiệu ứng xuất hiện từng phần cho đối tượng hình nghệ thuật.  Ví dụ về việc sử dụng mặt nạ biến hình: Trong ví dụ này, bạn sẽ tạo một mặt nạ biến hình. Hoàn toàn tương tự như ví dụ trên, nhưng chỉ khác một điểm là trong ví dụ trên, bạn sử dụng Motion Tween (hoặc Classic Tween), còn trong ví dụ này, bạn sử dụng Shape Tween. 93
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 6.3b – Mặt nạ biến hình Mặt nạ động tạo ra một hiệu ứng khá thú vị. Mặt nạ biến hình có chức năng cũng không kém thú vị. Bạn hoàn toàn có thể sử dụng hai loại mặt nạ này tạo ra các hiệu ứng hay khi trình chiếu một Album ảnh. 4. Tạo các nút nhấn điều khiển Trong thư viện của Flash cung cấp cho ta rất nhiều template của các nút điều khiển: nút điều khiển có kiểu dáng chuẩn của Windows, nút điều khiển tạo sẵn. Bạn cũng có thể tự tạo một kiểu nút điều khiển cho riêng mình. Trong phần này, chúng ta sẽ tìm hiểu về cách sử dụng các nút điều khiển tạo sẵn để điều khiển phim trong Flash. - Tạo nút Play và Stop Bật hộp thoại Library Button: Windows>Common Libraries>Button. Tiếp đến bạn hãy chọn một loại Button mà bạn cho là phù hợp. Hình 6.4a – Tạo nút nhấn điều khiển Tiếp đến, bạn hãy cài đặt tên hiển thị cho nó. Trong Action, bạn hãy sử dụng chức năng quản lý sự kiện kích chuột. Trong hàm sự kiện tương ứng, với hành động play, bạn hãy dùng hàm play (nhưng bạn cần hiệu chỉnh cho đoạn 94
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– phim không được chơi tự động nhờ vào hàm stop), với hành động dừng phim bạn sử dụng hàm stop. Tạo thanh PlayBack Bạn hãy tạo một Movie, sau đó bạn hãy sử dụng thanh Slider để làm thanh playback như hình minh họa Hình 6.4b – Tạo thanh Playback Bạn cài đặt tên hiển thị cho đối tượng Slider là playbar. Trong khung soạn thảo Action, bạn viết nội dung như sau: stop(); playbar.maximum = 300; var allowed:Boolean = false; playbar.addEventListener(MouseEvent.MOUSE_MOVE, laybacknow); function playbacknow(e:MouseEvent):void{ if (allowed) gotoAndPlay(playbar.value); } playbar.addEventListener(MouseEvent.MOUSE_DOWN, PlayIt); function PlayIt(e:MouseEvent):void{ allowed = true; } playbar.addEventListener(MouseEvent.MOUSE_UP, StopIt); function StopIt(e:MouseEvent):void{ allowed = false; } 95
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Ở trong đoạn chương trình này, playbar.maximum được gán bằng số Frame trong Scene. Biến allowed tương ứng với sự kiện chuột được ấn xuống hay thả ra. Khi kết hợp sự kiện ấn chuột và di chuyển chuột trên thanh Slider này, sẽ nhảy đến Frame được chỉ định và tiếp tục trình diễn nhờ vào hàm gotoAndPlay. 5. Xuất bản một Movie Sau khi bạn đã hoàn chỉnh một video, công việc tiếp theo là bạn cần xuất bản nó. Trước khi xuất bản, bạn cần hiệu chỉnh một vài thông số liên quan trong mục Publish Setting. Để xuất bản phim, bạn hãy chọn chức năng Export Movie trong menu File/Export. Trong hộp thoại xuất hiện, bạn hãy chọn định dạng *.swf. Với định dạng swf này, bạn có thể chạy nó trong trình Flash Player hoặc trong một file html với trình duyệt có cài đặt plugin flash. Đều này đôi lúc cũng phiền nhiễu. Bạn hoàn toàn có thể chọn định dạng video khác, tuy nhiên nó không giữ lại những hiệu ứng tương tác với các nút nhấn. Để đơn giản, Flash Player cung cấp cho ta chức năng tạo trình movie khả thi *.exe. Để tạo một movie dạng này, bạn hãy mở movie vừa xuất bản bằng Flash Player, sau đó chọn File >Create Projector, và nhập tên movie của bạn.  Xuất bản tập tin cho thiết bị di động. Để xuất bản tập tin cho thiết bị di động, chúng ta có hai hướng tiếp cận: Nếu thiết bị di động chỉ hỗ trợ flash lite dưới dạng plugin: chúng ta cần chọn lựa khi tạo mới một dự án trong flash (chọn phiên bản flash lite phù hợp). Bạn cũng cần lưu ý rằng, không phải dòng điện thoại nào cũng hỗ trợ ActionScript 3, vì vậy bạn cũng cần lưu ý. Sự hỗ trợ này phụ thuộc vào phiên bản flash lite. Việc xuất bản một tập tin cho thiết bị di động là hoàn toàn tự động, hoặc bạn có thể sử dụng chức năng Export Movie như trên. Nếu thiết bị di động hỗ trợ Adobe AIR (như các dòng máy tính bảng tablet): khi tạo một dự án, chúng ta cần chọn dự án Adobe AIR. Việc xuất bản tập tin đóng gói để cài đặt trên Adobe AIR không diễn ra tự động. Chúng ta cần thiết lập các thông số cấu hình cho nó. Một tập tin cài đặt cho AIR có phần mở rộng là *.air (nếu đã được đính kèm tập tin chứng thực) hoặc *.airi (nếu chưa đính kèm tập tin chứng thực). Chúng ta chỉ có thể cài đặt lên AIR đối với tập tin đã chứng thực *.air. Để thiết lập các thông số cho tập tin cài đặt trên AIR, ta chọn File > Air 3.2 for Desktop Settings. Mục General . Output file: Tên tập tin cài đặt sẽ xuất bản. 96
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– . Windows Installer (*.exe): Tên tập tin cài đặt xuất bản ở dạng *.exe. . File name: Tên tập tin sau khi cài đặt. . Apps name: Tên của ứng dụng. . Version: Tên phiên bản. . Apps ID: ID của ứng dụng. Hình 6.5a – Thiết lập tập tin cài đặt trên air Mục General . Description: Thông tin mô tả về ứng dụng. . Copyright: Bản quyền. . Windows Style: Dạng hiển thị của cửa sổ Windows dành cho ứng dụng AIR. Có ba dạng hiển thị: System Chrome (theo hệ thống), Custom Chrome (tùy chỉnh) và Transparent (trong suốt). Mục Signature Hình 6.5b – Thiết lập tập tin cài đặt trên air Mục Signature Tạo một tập tin chứng thực. Nếu chưa có một tập tin chứng thực, chúng ta bấm vào nút Create. . Publisher name: Tên nhà xuất bản đã tạo ra tập tin. . Organization unit: Đơn vị tổ chức. . Organization name: Tên tổ chức. . Country: Quốc gia. . Password/Confirm password: Mật khẩu bảo vệ và nhập lại mật khẩu. . Type: Thuật được sử dụng để toán mã hóa dữ liệu. . Save as: Vị trí lưu tập tin. 97
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 6.5c – Tạo tập tin chứng thực. Mục Icon: Chọn biểu tượng cho chương trình. Chúng ta cần tạo ra 4 kích thước cho biểu tượng: 16x16, 32x32, 48x48 và 128x128. Mục Advanced a) Hình 6.5d – Thiết lập tập tin cài đặt trên air – Mục Advanced. . Associated file type: Chương trình sẽ quản lý tập tin nào. . Initial Windows Settings: Các thông số về cửa sổ Windows – chiều rộng (width), chiều cao (height), tọa độ x, tọa độ y, độ rộng tối đa (maximum width), độ cao tối đa (maximum height), độ rộng tối thiểu (minimum width), độ cao tối thiểu (minimum height), cho phép hiển thị ở chế độ cực đại (maximizable), cho phép hiển thị ở chế độ tối thiểu (minimizable), cho phép thay đổi kích thước (resizable), cho phép hiển thị (visible). . Other settings: Các thiết lập khác – install folder (thư mục cài đặt), program menu folder (thư mục hiển thị trong menu program). Sau khi thiết lập xong các thông số, bạn chọn Publish để xuất bản. 98
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– BÀI TẬP THỰC HÀNH Bài tập 1: Sử dụng kĩ thuật chèn hình ảnh và âm thanh tạo một video trình chiếu các hình ảnh được chèn vào theo một chủ đề bất kỳ Bài tập 2: Sử dụng kĩ thuật chèn âm thanh hoặc video, tạo một bài hát karaoke bằng flash Bài tập 3: Hãy xây dựng một thước phim quảng cáo giới thiệu về một bộ phim có sử dụng kĩ xảo điện ảnh. Đoạn phim quảng cáo có đội dài trình diễn khoảng 5 phút. Trong phim phải sử dụng âm thanh và có lời thuyết trình bằng chữ hoặc lời thuyết minh để xây dựng thước phim quảng cáo này, bạn cần sử dụng một bộ phim hoàn chỉnh. Sau đó, bạn cắt lấy những đoạn phim hay trong bộ phim. TÀI LIỆU THAM KHẢO 1. Tự học flash bằng hình ảnh – Nhà xuất bản Thống kê. 2. Script và kĩ thuật hoạt hình – Đặng Ngọc Hoàn Thành. 3. Hướng dẫn thực hành Adobe Flash cs6- Nhà xuất bản Giao thông vận tải. 4. Lập trình Action Script cho Flash- Nhà xuất bản Lao động xã hội 99
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– MỤC LỤC CHƯƠNG 1: GIỚI THIỆU VỀ FLASH 3 1. Sơ lược về đồ họa vector và lịch sử ra đời của Flash 3 2. Cài đặt Adobe Flash CS6 4 3. Giới thiệu về Adobe Flash CS6 7 CHƯƠNG 2: CÁC CÔNG CỤ VẼ CƠ BẢN 21 1. Các công cụ Pencil, Brush và Erase 21 2. Công cụ vẽ hình cơ bản 23 3. Công cụ Text 30 4. Công cụ chọn Selection và Lasso 32 5. Các công cụ đổ màu Paint Bucket, Ink Bottle và bắt màu 34 6. Công cụ Free Transform và Gradient Transform 35 7. Các công cụ làm việc với đường Bezier 37 8. Làm việc với các đối tượng 39 CHƯƠNG 3: CÁC BIỂU TƯỢNG TRONG FLASH 44 4. Biểu tượng Graphic 44 5. Biểu tượng Button 46 6. Biểu tượng MovieClip 48 7. Làm việc với Library 49 CHƯƠNG 4: TẠO HOẠT CẢNH 51 1. Tìm hiểu về Timeline 51 2. Classic Tween 56 3. Shape Tween 58 4. Motion Tween 59 5. Công cụ Bone và Bind 63 6. Công cụ Deco 66 7. Công cụ 3D Translation và 3D Rotation 75 CHƯƠNG 5: LẬP TRÌNH VỚI ACTION SCRIPT 78 1. Khái niệm về ActionScript(AS) 78 2. Các kiểu dữ liệu 78 3. Biến và Hằng 79 100
Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– 4. Các cấu trúc lệnh điều khiển 79 5. Sự kiện chuột, bàn phím 82 6. Đưa đối tượng vào ActionScript 85 CHƯƠNG 6: CÁC HIỆU CHỈNH NÂNG CAO 89 1. Xử lý âm thanh, hình ảnh, và video 89 2. Ghép nối nhiều hoạt cảnh 92 3. Kĩ thuật mặt nạ (Mask) 93 4. Tạo các nút nhấn điều khiển 94 5. Xuất bản một Movie 96 101