Giáo trình flash phần 2

Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– CHƯƠNG 4: TẠO HOẠT CẢNH Tìm hiểu Timeline TimeLine vùng tương tác để tạo chuyển động movie Flash Để tạo chuyển động, TimeLine thay Frame theo thời gian Hình 4.1a – Vùng TimeLine Trong TimeLine, bạn dễ dàng thấy ba phần chính: Phần quản lý Layer (bên trái), Phần quản lý Frame (phía bên phải) Phần quản lý Công cụ (phía bên phải) - Layer: Quản lý lớp đối tượng Mỗi đối tượng Layer có TimeLine riêng Trong trường hợp minh họa trên, đối tượng Layer nằm TimeLine phía đối tượng Layer nằm TimeLine phía - Thanh TimeLine: Chứa nhiều Frame Khi tạo chuyển động, Frame thay cho Frame sau thay cho Frame trước Ta xem qua hành động cách kéo Frame (Frame đánh dấu màu đỏ) sang trái phải TimeLine Các chức hiển thị Timeline: Trong biểu tượng menu thả xuống nằm phı́a trê n bên phải có chức 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 công cụ - Gồm công cụ sau đây: + Center Frame: Xác định Frame trung tâm + Onion Skin: Cho phép hiển thị toàn hình ảnh đối tượng vùng Frame chọn Sự hiển thị bao gồm toàn đố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 hình ảnh đối tượng vùng Frame chọn Sự hiển thị bao gồm viền đối tượng Hình 4.1c – Onion Skin Outlines + Edit Multiple Frames: Cho phép hiển thị đối tượng gốc toàn đối tượng hiển thị theo hai chức Onion Skin Khi đó, ta chỉnh sửa đối tượng + Các thông số khác: Current Frame – vị trí Frame (Frame đánh dấu đỏ) Frame rate – tốc độ chuyển động (tính số Frame giây) Thông số Frame rate lớn, phim diến nhanh Theo chuẩn kĩ thuật 24 hình giây tốc độ 24fps Hiển nhiên, bạn thay đổi giá tri ̣ Tuy nhiên, điều không khuyến khích chuẩn quốc tế Elapsed Time – thời gian thực thi từ vi ̣trí (frame 1) Frame (current Frame) TimeLine 52 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 4.1d – Onion Skin Onion Skin Outlines kết hợp với Edit Multiple Frames Một số chức 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 TimeLine (tương ứng với Insert Frame) Nếu vùng TimeLine TimeLine tạo Tween, tự động giãn vùng Tween (chèn thêm Frame vào vùng Frame tạo Tween, Frame tạo kế thừa Tween) Nếu chưa tạo Tween, đơn chép toàn đối tượng keyframe liền trước vi ̣trí frame chèn Khi thay đổi đối tượng frame khoảng các đối tượng frame khác cập nhật theo + Phím F6: Chèn KeyFrame vào TimeLine (tương ứng với Insert KeyFrame) Frame cuối chèn KeyFrame Với KeyFrame này, ta tạo điểm chốt cho hành động movie Khi kết hợp với Tween, tạo chuyển động mềm mại cho movie Flash Điểm khác biệt sử dụng Keyframe so với frame thông thường frame thông thường đơn chép đối tượng keyframe trước để tạo dãy khung hình giống Trong đó, keyframe tạo điểm chốt Nó chép toàn đối tượng keyframe trước sang frame liền trước keyframe tạo điểm chốt Nhưng ta thay đổi đối tượng keyframe tạo này, các đối tượng frame khác không thay đổi Có thể tham khảo ví dụ sau đây, để hiểu rõ hai phím tắt Trong ví dụ này, tạo hình chữ nhật có trắng 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 viền (thuộc tính Stroke = 5) Xem Hình 4.1f Giờ bạn kiểm tra độ lớn viền Frame Như bạn thấy, viền tất hình chữ nhật Frame thay đổi thành Bây giờ, bạn làm lạm lại ví dụ cách thay phím F5 phím F6 Bạn thấy thuộc tính Stroke không thay đổi Frame, thay đổi KeyFrame cuối (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 hình thể KeyFrame Hình 4.1f – Chèn Frame phím F5 Hình 4.1g– Chèn KeyFrame phím F6 54 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Như vậy, thấy rằng, muốn chép Frame cho Frame tiếp theo, bạn sử dụng phím F5 Ngược lại, bạn muốn tạo thay đổi, bạn cần sử dụng phím F6 Sao chép cắt dán nhóm Frame: Để thực chức này, bạn bôi đen nhóm Frame mà bạn muốn chép cắt dán, sau bạn kích chuột phải chọn Copy Frames Cut Frames Để thực chức dán, bạn chọn vị trí cần dán nhóm Frame copy TimeLine Sau đó, kích chuột phải chọn Paste Frames Clear Frames, Clear KeyFrame Remove Frames: Chức Clear Frames làm cho đối tượng Layer Frame chọn bị xóa Hay nói cách khác, Clear Frames tạo hai KeyFrame vị trí bắt đầu kết thúc nhóm Frame đánh dấu Tương ứng với vị trí đầu tiên, chèn Blank KeyFrame (là KeyFrame không chứa đối tượng nó) KeyFrame tương ứng với vị trí kết thúc Clear KeyFrame tương tự Clear Frame, áp dụng cho KeyFrame Còn Remove Frames xóa Frame lẫn đối tượng Convert to KeyFrames Convert to Blank KeyFrames: Chuyển đổi Frame thành KeyFrame Blank KeyFrame Insert Blank KeyFrame: Chèn Blank KeyFrame Reverse Frames: Cho phép lật ngược thứ tự nhóm Frame Để thực chức này, bạn chọn nhóm Frame, kích chuột phải chọn Reverse Frame Với chức này, bạn tạo chuyển động mang tính đối xứng Tạo chuyển động nhờ vào kĩ thuật “Frame by Frame” Đây kĩ thuật tạo chuyển động dựa sở kĩ thuật 24 hình/giây Các Frame thị Scene Sự hiển thị Frame tạo chuyển động cho đối tượng Ta minh họa kĩ thuật “Frame by Frame”.bằng ví dụ sau Ví dụ minh họa cách tạo hiệu ứng động cho kí tự từ “Flash” Bước 1: Sử dụng công cụ Text, tạo dòng văn có nội dung “Flash” Bước 2: Chọn công cụ Selection Bấm vào dòng văn sau kích chuột phải chọn Break Apart Bước 3: Nhấp chọn Frame thứ hai TimeLine Nhấp phím F6 Sau bấm chọn kí tự – kí tự F, dịch chuyển lên so với kí tự lại thay đổi màu sắc 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 TimeLine Nhấp phím F6 Sau tiếp tục với kí tự thứ hai ( kí tự l) Quá trình tiếp diễn kí tự cuối kí tự h Bước 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 tạo hoạt cảnh Nhưng nhược điểm kĩ thuật bạn muốn tạo hiệu ứng mềm mại bạn phải thao tác thời gian Flash cung cấp cho bạn phương pháp sau để tạo chuyển động với tên gọi Tween Có ba phương pháp Tween: Classic Tween, Motion Tween Shape Tween Về bản, chúng có nhiều điểm tương đồng nhiều điểm khác biệt đặc trưng Chúng ta khảo sát ba loại Tween Classic Tween Classic Tween kĩ thuật tạo chuyển động cung cấp phiên từ Flash CS3 trở trước Trong phiên Flash CS6+, Adobe trì kĩ thuật Về bản, thao tác với kĩ thuật Classic Tween ta cần phải sử dụng đến hai KeyFrame khởi đầu KeyFrame kết thúc Kể từ ấn CS4, Adobe đưa vào kĩ thuật gọi Motion Tween – kĩ thuật mà theo Adobe sử dụng đơn giản, không cần tạo KeyFrame rắc rối Classic Tween Mục đích tạo kĩ thuật Classic Tween tạo chuyển động cho đối tượng Khi sử dụng Classic Tween, đối tượng chuyển đổi thành hai biểu tượng Graphic (một biểu tượng cho KeyFrame biểu tượng cho KeyFrame kết thúc) Bạn sử dụng hiệu ứng 3D cho Classic Tween sử dụng chức swap symbol cho đối tượng thể Nhưng Adobe lưu lại kĩ thuật phiên CS6 dù kĩ thuật Motion Tween có nhiều ưu điểm kĩ thuật Classic Tween có ưu điểm riêng mà Motion Tween thay Một ưu điểm 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 trình bày cho bạn phương pháp tạo bóng rơi nhờ vào kĩ thuật Classic Tween Bước Trên khung sáng tác, sử dụng công cụ Oval để tạo hình bóng trang trí cho theo hình bóng chuyền Bước 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 thay đổi vị trí bóng (chạm mặt đất) Sau chạm đất, bóng 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 thay đổi vị trí bóng lần (vị trí bóng nẩy đến) Bạn tiếp tục trình bạn cảm thấy phù hợp (thời điểm mà bóng dừng) Bạn quan sát trình hình 4.2 bên Bước Bấm chuột vào khoảng cách KeyFrame mở đầu KeyFrame kết thúc, kích chuột phải chọn Classic Tween Bạn lặp lại điều cho khoảng KeyFrame lại Bước Nhấn Ctrl+Enter để kiểm tra kết Đây ví dụ đặc trưng sử dụng Classic Tween – dùng để tạo chuyển động đối tượng Bạn hoàn toàn sử dụng để hiệu chỉnh thuộc tính đối tượng, việc chức yếu dành cho Bạn cần lưu ý rằng, ví dụ trên, lần bạn nhấn phím F6 bạn tạo KeyFrame kết thúc KeyFrame KeyFrame kết thúc đóng chức KeyFrame mở đầu KeyFrame kết thúc sau Nghĩa lần bạn nhấp F6, bạn tạo thêm 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 chứa bóng, Layer 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 TimeLine Layer KeyFrame Các khoảng nút khoảng đánh dấu KeyFrame Classic Tween Shape Tween Kĩ thuật Shape Tween dường có tính riêng biệt Mặc dù dùng để chuyển đổi màu sắc, hình dáng vật thể hai loại Tween lại Nhưng chức “biến hình” Để tạo biến hình, tương tự Classic Tween, bạn phải tạo hai KeyFrame mở đầu kết thúc Shape Tween không hỗ trợ hiệu ứng 3D, không hỗ trợ chức swap symbol để thay đổi biểu tượng nguồn cho đối tượng thể Khi tạo Shape Tween, đối tượng chuyển đổi thành hai đối tượng Graphic Hai biểu tượng tương ứng với hai Keyframe Keyframe cuối Shape Tween Về chế Shape Tween, sử dụng thuật toán Transform – nghĩa dịch chuyển điểm đánh dấu theo số Frame đến vị trí đánh dấu số Frame cuối Các bước sử dụng Shape Tween để tạo hiệu ứng động Trong ví dụ này, tạo hiệu ứng biến đường thẳng thành đường cong Bạn tạo hiệu ứng Tween lại Đây ví dụ điển hình sử dụng Shape Tween Hình 4.3a – Kĩ thuật Shape Tween Bước Dùng công cụ Line vẽ đường thẳng hình làm việc Bước Với công cụ Shape Tween, bạn tạo Tween trước chèn KeyFrame sau chèn KeyFrame Ta minh họa việc tạo Tween trước Bạn dùng công cụ Selection, bấm chọn đối tượng, kích chuột phải chọn Create Shape Tween Bước Bấm chọn vào Frame 30 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 bấm vào vị trí đườ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 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 uốn đường thẳng thành đường cong Bước Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm Bạn lưu ý rằng, hình minh họa trên, sử dụng chức Onion Skin Sử dụng Shape Hint để điều khiển biến hình Khi sử dụng Shape Tween, tự động tạo biến hình theo thuật toán định sẵn Nếu bạn muốn điều khiển biến hình này, Flash cung cấp cho bạn công cụ Shape Hint Shape Hint điểm điều khiển sử dụng Shape Tween Để sử dụng chức này, bạn cần tạo Shape Tween cho đối tượng, sau vào menu Modify > Shape > Add Shape Hint (phím tắt Ctrl+Shift+H) Shape Hint xuất theo cặp: Một điểm Frame TimeLine Tween điểm Frame cuối Các Shape Hint đánh số a, b, c… Bạn quan sát hai hình vẽ sau Hình 4.3b– Các cặp Shape Hint Frame đầu (bên trái) Frame cuối (bên phải) Khi sử dụng Shape Hint, điểm cặp (cùng số) tạo biến hình tương ứng, đảm bảo điểm cặp Frame thứ chuyển thành điểm cặp Frame cuối (điểm a hình bên trái biến thành điểm a hình bên phải, tương tự điểm b c) Bằng cách bổ sung Shape Hint này, bạn điều khiển chuyển động đối tượng Để gỡ bỏ Shape Hint, bạn việc chọn nó, kích chuột phải chọn Remove Hint Motion Tween Như nêu trên, kĩ thuật Motion Tween dùng để tạo chuyển động Nó tương tự kĩ thuật Classic Tween, đơn giản kĩ thuật Classic Tween nhiều Nó không đòi hỏi bạn phải tạo KeyFrame Một ưu điểm Motion Tween mà phiên Flash CS4 bổ sung vào hỗ trợ hiệu ứng 3D Có hai hiệu ứng 3D Translation Rotation Chi tiết hai chức ta tìm hiểu thêm mục cuối chương 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 Classic Tween, bạn nên biết rằng, với kĩ thuật Motion Tween, bạn tối ưu kích thước file Flash xuất Với Motion Tween, bạn hiệu chỉnh đường dịch chuyển, tọa độ, góc xoay, Filter, Blending… Nhờ vào công cụ Selection thuộc tính 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 vẽ Trong hình minh họa, đường màu xanh minh họa cho đường chuyển động đối tượng Bước Dùng công cụ Brush vẽ hình ảnh hình làm việc Bước 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 tự động tạo khoảng Frame mặc định để tạo chuyển động Nếu số lượng Frame không thỏa mãn nhu cầu sử dụng, bạn thay đổi cách đặt trỏ chuột vào vị trí cuối cùng vùng Frame đánh dấu Khi trỏ chuột có dạng , bạn nhấp chuột kéo sang trái sang phải Bước Di chuyển hình vẽ sang vị trí Khi đó, bạn thấy hình làm việc xuất mô tả chuyển động đối tượng (thanh màu xanh hình minh họa) Bạn sử dụng công cụ Selection để thay đổi dạng thức đường chuyển động Bước Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm Hiệu chỉnh chuyển động hiệu ứng nâng cao với Motion Editor Đây công cụ mạnh mẽ tích hợp với kĩ thuật Motion Tween Để sử dụng chức này, bạn tạo Motion Tween Sau đó, vào Windows>Motion Editor Khi đó, cửa sổ Motion Editor xuất Hộp thoại Motion Editor chia làm hai phần: phần bên trái phần bên phải Phần bên trái chứa chức thông số liên quan, phần bên phải biểu đồ minh họa Ta hiệu chỉnh hai phần Các nhóm chức 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 ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 5.6c – Hộp thoai Properties đối tượng file âm 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 xây dựng cho đối tượng âm (ví dụ myMusic) Ngay bên Base Class tức lớp sở mà thừa kế Sau nhấp Ok Kết thúc thao tác trên, bạn nhận đối tượng btnPlay lớp myMusic Tiếp theo, Nhấn F9 để mở khung soạn thảo ActionScript viết mã lệnh cho chương trình Bạn bổ sung kiện kích chuột cho đối tượng btnPlay 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 thể lớp myMusic Khi bấm chuột vào nút btnPlay, hàm func() gọi đến Kết phương thức play đối tượng Player thực thi Nếu muốn bổ sung thêm phương thức, thuộc tính cho lớp myMusic, ta việc thêm mã lệnh vào lớp myMusic thu Bạn cần lưu ý rằng, trường hợp này, lớp myMusic kế thừa lớp flash.media.Sound 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ông cụ tô vẽ, vẽ đồng hồ kim sau lập trình mô trình hoạt động kim thơi gian thực Bài tập 2: Vẽ thiệp mừng giáng sinh Sau lập trình tạo hiệu ứng tuyết rơi thiệp mừng giáng sinh Bài tập 3: Vẽ menu đề mục theo chủ đê sau lập trình tạo hiệu ứng di chuyển chuột qua 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 Xử lý âm thanh, hình ảnh, video a Import âm thanh, hình ảnh video vào thư viện Để chèn âm thanh, hình ảnh video vào thư viện chọn menu File -> Import -> Import to Library… Một sổ lựa chọn ra, chọn đến file cần chèn click vào “open” Mặc dù chức Import to Library hỗ trợ chức chèn video, bạn nên sử dụng chức cho file âm hình ảnh Riêng với video, bạn nên sử dụng chức Import Video, nằm menu File -> Import -> import Video Sau chèn file âm thanh, hình ảnh video file nằm thư viện flash bạn làm, để kiểm tra bạn vào: Window -> Library b Xử lý âm Sau import file âm vào thư viện, ta hiệu chỉnh thuộc tính Bạn chọn file âm vừa nhập vào, kích chuột phải chọn Properties Bảng thuộc tính âm có dạng sau Hình 6.1a – Bảng thuộc tính âm Bạn nghe qua âm nhờ vào chức Test, dừng chơi nhờ chức Stop, thay đổi file nguồn nhờ chức Import,… Đặc biệt, bạn thay đổi định dạng nén cho file âm nhờ vào Compression Để xử lý âm Flash, Adobe cung cấp cho ta trình tiện ích riêng dành cho nhiệm vụ Adobe SoundBooth Với SoundBooth, bạn 89 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– thay đổi định dạng âm (bao gồm video), trích tách âm khỏi video, bổ sung hiệu ứng cho âm thanh, trích tách phần file âm thanh,… nhiều tính khác Hình 6.1b - Giao diện SoundBooth CS6 Sau vài chức SoundBooth - Trích xuất phần file âm thanh: bạn dùng trỏ chuột bôi đen phần âm biểu đồ phổ Kích chuột phải nhấp chọn Crop Sau nhấp Save As chọn định dạng xuất Để kiểm tra phần âm chọn có hay không, kéo trạng thái đến vị trí cần kiểm tra, sau nhấp Play - Tạo hiệu ứng cho âm thanh: bạn chọn mục effect bên cạnh, chọn hiệu ứng cần áp dụng Khi sử dụng âm phim Flash, bạn cần tạo riêng Layer cho Bạn cần đảm bảo phần âm bạn phải tương ứng với hoạt cảnh phim Điều giúp phim bạn thật hơn, sinh động c Xử lý hình ảnh Sau import file hình ảnh vào thư viện, ta hiệu chỉnh thuộc tính Bạn chọn file âm vừa nhập vào, kích chuột phải chọn: Properties, Edit with PhotoShop Bảng thuộc tính hình ảnh có dạng 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 bảng thuộc tính tương tự với chức thuộc tính âm Đối với hình ảnh nén JPEG, bạn chọn độ nén cho hình ảnh để giảm kích thước tập tin sau xuất Để xử lý hình ảnh Flash, Adobe cho phép ta chỉnh sửa chúng chương trình chuyên dụng Adobe Photoshop Có 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 chức thú vị Flash Bạn hoàn toàn sử dụng Flash để tạo kĩ xảo điện ảnh (dù 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 tham khảo chương trình Adobe Premier Adobe After Effect 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 tập tin video thành tập tin cho phép sử dụng Flash flv f4v Để chuyển đổi, bạn việc chọn Export Setting hiệu chỉnh thông số cần thiết Với tiện ích này, bạn hiệu chỉnh vài thuộc tính cho đoạn video bạn Hình 6.1e – Giao diện Adobe Media Encoder CS6 Ngoài ra, Flash 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 Adobe Premier Adobe After Effect Khi import video vào Flash, bạn cho phép video mà bạn import vào nằm khung hình độc lập hay nhúng vào trình media playback (nghĩa chương trình có thành phần điều khiển chế độ chơi) Với việc tạo khung hình độc lập, ta tạo mặt nạ với hình thù phức tạp, tạo khung trình chiếu hấp dẫn Bạn tìm hiểu điều tìm hiểu kĩ mặt nạ Ghép nối nhiều hoạt cảnh Khi bạn xây dựng 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 Flash thực tự động Bạn tạo 92 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– cảnh quay khác Scene khác Các hoạt cảnh ghép nối tự động theo dãy Scene xếp Kĩ thuật mặt nạ(Mask) Mặt nạ kĩ thuật cho phép bạn tạo riêng khung trình chiếu với hình dạng phức tạp Mọi hoạt động trình chiếu bên mặt nạ Để tạo mặt nạ, bạn cần tạo khung trình chiếu Để tạo khung này, bạn đơn vẽ hình thể Layer tạm gọi Layer Mask Bạn tiếp tục tạo thêm Layer thứ hai để tạo hoạt cảnh Để tạo mặt nạ, bạn đặt Layer Mask lên layer hoạt cảnh, kích chuột phải vào Layer Mask này, chọn Mask Nếu bạn có nhiều Layer hoạt cảnh cần tạo Layer Mask, bạn việc kéo chọn Layer vào Layer Mask khung Layer Đến đây, bạn tưởng tượng làm để tạo khung hình phức tạp cho video ? Layer Mask tạo khung trình chiếu, Layer video layer hoạt cảnh Thế công việc bạn hoàn tất ! 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 sử dụng nhiều mặt nạ đồng thời cảnh quay Một mặt nạ có tác dụng cho 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ụ việc sử dụng mặt nạ động: Trong ví dụ này, bạn tạo mặt nạ động cho lớp đối tượng Bạn sử dụng hai lớp: Layer Art Layer Mask Hình 6.3a – Mặt nạ động Bạn 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 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 tạo hiệu ứng xuất phần cho đối tượng hình nghệ thuật  Ví dụ việc sử dụng mặt nạ biến hình: Trong ví dụ này, bạn tạo mặt nạ biến hình Hoàn toàn tương tự ví dụ trên, khác điểm ví dụ trên, bạn sử dụng Motion Tween (hoặc Classic Tween), 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 hiệu ứng thú vị Mặt nạ biến hình có chức không thú vị Bạn hoàn toàn sử dụng hai loại mặt nạ tạo hiệu ứng hay trình chiếu Album ảnh Tạo nút nhấn điều khiển Trong thư viện Flash cung cấp cho ta nhiều template nút điều khiển: nút điều khiển có kiểu dáng chuẩn Windows, nút điều khiển tạo sẵn Bạn tự tạo kiểu nút điều khiển cho riêng Trong phần này, tìm hiểu cách sử dụng nút điều khiển tạo sẵn để điều khiển phim Flash - Tạo nút Play Stop Bật hộp thoại Library Button: Windows>Common Libraries>Button Tiếp đến bạn chọn loại Button mà bạn cho phù hợp Hình 6.4a – Tạo nút nhấn điều khiển Tiếp đến, bạn cài đặt tên hiển thị cho Trong Action, bạn sử dụng chức quản lý kiện kích chuột Trong hàm kiện tương ứng, với hành động play, bạn 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 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 PlayBack Bạn tạo Movie, sau bạn sử dụng Slider để làm playback hình minh họa Hình 6.4b – Tạo Playback Bạn cài đặt tên hiển thị cho đối tượng Slider playbar Trong khung soạn thảo Action, bạn viết nội dung 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 ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Ở đoạn chương trình này, playbar.maximum gán số Frame Scene Biến allowed tương ứng với kiện chuột ấn xuống hay thả Khi kết hợp kiện ấn chuột di chuyển chuột Slider này, nhảy đến Frame định tiếp tục trình diễn nhờ vào hàm gotoAndPlay Xuất Movie Sau bạn hoàn chỉnh video, công việc bạn cần xuất Trước xuất bản, bạn cần hiệu chỉnh vài thông số liên quan mục Publish Setting Để xuất phim, bạn chọn chức Export Movie menu File/Export Trong hộp thoại xuất hiện, bạn chọn định dạng *.swf Với định dạng swf này, bạn chạy trình Flash Player file html với trình duyệt có cài đặt plugin flash Đều đôi lúc phiền nhiễu Bạn hoàn toàn chọn định dạng video khác, nhiên không giữ lại hiệu ứng tương tác với nút nhấn Để đơn giản, Flash Player cung cấp cho ta chức tạo trình movie khả thi *.exe Để tạo movie dạng này, bạn mở movie vừa xuất Flash Player, sau chọn File >Create Projector, nhập tên movie bạn  Xuất tập tin cho thiết bị di động Để xuất tập tin cho thiết bị di động, có hai hướng tiếp cận: Nếu thiết bị di động hỗ trợ flash lite dạng plugin: cần chọn lựa tạo dự án flash (chọn phiên flash lite phù hợp) Bạn cần lưu ý rằng, dòng điện thoại hỗ trợ ActionScript 3, bạn cần lưu ý Sự hỗ trợ phụ thuộc vào phiên flash lite Việc xuất tập tin cho thiết bị di động hoàn toàn tự động, bạn sử dụng chức Export Movie Nếu thiết bị di động hỗ trợ Adobe AIR (như dòng máy tính bảng tablet): tạo dự án, cần chọn dự án Adobe AIR Việc xuất tập tin đóng gói để cài đặt Adobe AIR không diễn tự động Chúng ta cần thiết lập thông số cấu hình cho Một tập tin cài đặt cho AIR có phần mở rộng *.air (nếu đính kèm tập tin chứng thực) *.airi (nếu chưa đính kèm tập tin chứng thực) Chúng ta cài đặt lên AIR tập tin chứng thực *.air Để thiết lập thông số cho tập tin cài đặt AIR, ta chọn File > Air 3.2 for Desktop Settings Mục General  Output file: Tên tập tin cài đặt xuất 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 dạng *.exe  File name: Tên tập tin sau cài đặt  Apps name: Tên ứng dụng  Version: Tên phiên  Apps ID: ID ứng dụng Hình 6.5a – Thiết lập tập tin cài đặt air Mục General  Description: Thông tin mô tả ứng dụng  Copyright: Bản quyền  Windows Style: Dạng hiển thị 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) Transparent (trong suốt) Mục Signature Hình 6.5b – Thiết lập tập tin cài đặt air Mục Signature Tạo tập tin chứng thực Nếu chưa có tập tin chứng thực, bấm vào nút Create  Publisher name: Tên nhà xuất tạo 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 bảo vệ nhập lại mật  Type: Thuật sử dụng để toán mã hóa 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 kích thước cho biểu tượng: 16x16, 32x32, 48x48 128x128 Mục Advanced a) Hình 6.5d – Thiết lập tập tin cài đặt air – Mục Advanced  Associated file type: Chương trình quản lý tập tin  Initial Windows Settings: Các thông số 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ị menu program) Sau thiết lập xong thông số, bạn chọn Publish để xuất 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 âm tạo video trình chiếu hình ảnh chèn vào theo chủ đề Bài tập 2: Sử dụng kĩ thuật chèn âm video, tạo hát karaoke flash Bài tập 3: Hãy xây dựng thước phim quảng cáo giới thiệu 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 phút Trong phim phải sử dụng âm có lời thuyết trình chữ 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 phim hoàn chỉnh Sau đó, bạn cắt lấy đoạn phim hay phim TÀI LIỆU THAM KHẢO Tự học flash hình ảnh – Nhà xuất Thống kê Script kĩ thuật hoạt hình – Đặng Ngọc Hoàn Thành Hướng dẫn thực hành Adobe Flash cs6- Nhà xuất Giao thông vận tải Lập trình Action Script cho Flash- Nhà xuất 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 Sơ lược đồ họa vector lịch sử đời Flash Cài đặt Adobe Flash CS6 Giới thiệu Adobe Flash CS6 CHƯƠNG 2: CÁC CÔNG CỤ VẼ CƠ BẢN 21 Các công cụ Pencil, Brush Erase 21 Công cụ vẽ hình 23 Công cụ Text 30 Công cụ chọn Selection Lasso 32 Các công cụ đổ màu Paint Bucket, Ink Bottle bắt màu 34 Công cụ Free Transform Gradient Transform 35 Các công cụ làm việc với đường Bezier 37 Làm việc với đối tượng 39 CHƯƠNG 3: CÁC BIỂU TƯỢNG TRONG FLASH 44 Biểu tượng Graphic 44 Biểu tượng Button 46 Biểu tượng MovieClip 48 Làm việc với Library 49 CHƯƠNG 4: TẠO HOẠT CẢNH 51 Tìm hiểu Timeline 51 Classic Tween 56 Shape Tween 58 Motion Tween 59 Công cụ Bone Bind 63 Công cụ Deco 66 Công cụ 3D Translation 3D Rotation 75 CHƯƠNG 5: LẬP TRÌNH VỚI ACTION SCRIPT 78 Khái niệm ActionScript(AS) 78 Các kiểu liệu 78 Biến Hằng 79 100 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Các cấu trúc lệnh điều khiển 79 Sự kiện chuột, bàn phím 82 Đưa đối tượng vào ActionScript 85 CHƯƠNG 6: CÁC HIỆU CHỈNH NÂNG CAO 89 Xử lý âm thanh, hình ảnh, video 89 Ghép nối nhiều hoạt cảnh 92 Kĩ thuật mặt nạ (Mask) 93 Tạo nút nhấn điều khiển 94 Xuất Movie 96 101 [...]... 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); for(var index in items) { trace( "Phần tử thứ " + index + " là " + items[index]); } - Phần tử thứ 0 là 1 Phần tử thứ 1 là 2 Phần tử thứ 2 là 3 Câu lênh lặp for each…in Tương tự như câu lệnh for…in, câu lệnh for... 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à... 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ú... 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... 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 –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––... 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); for each (var item in items) { trace(item); } 1 2 3 Khác với câu lệnh... (i>0) { trace(i); i ; } 3 2 1 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... 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à -23 1... 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... 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 ... hai phần: phần bên trái phần bên phải Phần bên trái chứa chức thông số liên quan, phần bên phải biểu đồ minh họa Ta hiệu chỉnh hai phần Các nhóm chức Motion Editor mà bạn cần quan tâm là: 60 Giáo. .. int -23 1 đến 23 1-1 giá trị uint 0 23 2-1 Bạn lưu ý rằng, kiểu liệu, có kiểu số nguyên có chữ viết thường (int Int) - Kiểu số thực Số thực dấu chấm động theo chuẩn IEEE-754 Số thực AS chiếm 32 bit... 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ệnh điều khiển trình lặp for - Hành động lặp: Là khối lệnh để máy tính thực lặp lại nhiều lần 80 Giáo trình: Flash Trường