Giáo trình Thiết kế hoạt hình (Nghề Công nghệ thông tin)

ỦY BAN NHÂN DÂN TỈNH BR – VT TRƯỜNG CAO ĐẲNG NGHỀ GIÁO TRÌNH THIẾT KẾ HOẠT HÌNH NGHỀ CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ CAO ĐẲNG VÀ TRUNG CẤP Bà Rịa – Vũng Tàu TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Adobe Flash (trước Macromedia Flash trước FutureSplash), hay gọi cách đơn giản Flash, dùng để chương trình sáng tạo đa phương tiện (multimedia) lẫn phần mềm dùng để hiển thị chúng Macromedia Flash Player Flash công cụ để phát triển ứng dụng thiết kế phần mềm mô Sử dụng ngơn ngữ lập trình ActionScript để tạo tương tác, hoạt cảnh phim Điểm mạnh Flash nhúng file âm thanh, hình ảnh động Người lập trình chủ động lập điều hướng cho chương trình Flash xuất đa dạng file kiểu html, exe, jpg để phù hợp với ứng dụng người sử dụng Web, CD Bà Rịa – Vũng Tàu, ngày .tháng năm Nguyễn Bá Thủy MỤC LỤC BÀI 1: MƠ ĐUN THIẾT KẾ HOẠT HÌNH Vị trí, tính chất mơn học - Vị trí mơn học: Mơn học bố trí sau học sinh học xong môn học chung, môn học, mô đun kỹ thuật sở học trước môn thiết kế lập trình Web, lập trình Windows - Flash công cụ để phát triển ứng dụng thiết kế phần mềm mô Sử dụng ngơn ngữ lập trình ActionScript để tạo tương tác, hoạt cảnh phim Điểm mạnh Flash nhúng file âm thanh, hình ảnh động Người lập trình chủ động lập điều hướng cho chương trình - Tính chất mơn học: Là mô đun kết hợp làm công cụ cho mơn lập trình giao diện Mục tiêu modun - Thiết kế website flash, làm banner, logo động cho website - Làm game, E-card, E-Calalog - Dựng phim hoạt hình flash - Làm hình động cho điện thoại di động - Làm CD tương tác với ưu điểm file siêu nhẹ, tương thích tốt với Photoshop Illustrator để dùng làm hình minh họa, phù hợp với xu hướnng website tương tác với giao diện đẹp Nội dung: STT Tên mơ đun Thời Hình thức gian giảng dạy Khởi đầu với Adobe Flash Tích hợp Các biểu tượng symbol Tích hợp Thao tác với timeline Tích hợp Tạo hoạt hình Frame by frame Classic tween Tích hợp Tạo hoạt hình theo đường dẫn Tích hợp Tạo hoạt hình Motion tween Shape tween Sử dụng Tích hợp Tích hợp Shape hint Sử dụng mặt nạ (mask) cơng cụ tạo hoạt hình: bone, deco, bind, 3D Sử dụng kiểu liệu, biến, Tốn tử biểu thức Tích hợp Tạo Action script cấu trúc lệnh rẽ nhánh Tích hợp 10 Tạo Action script cấu trúc lặp Tích hợp 11 Sử dụng Hàm Tích hợp 12 Điều khiển Chuột Bàn phím kiện Tích hợp 13 Vẽ giao diện trang web (trang intro, trang chủ, Tích hợp Tích hợp trang chi tiết, …) 14 Tạo movie clip nút bấm liên kết đặt lên trang 15 Gán âm thanh, lện action script cho nút bấm Tích hợp 16 Điều khiển âm nhạc cho trang web Tích hợp 17 Chuyển file phim thành Video Flash Tích hợp 18 Cách đưa phim video flash vào trang ( embedded Tích hợp external) 19 Tạo điều khiển xem phim Tích hợp 20 Tạo banner quảng cáo biến đổi hình dạng, Tích hợp Tích hợp mặt nạ, biến đổi chuyển động 21 Chèn hoạt hình Flash vào trang web 22 Sử dụng phần mềm Banner Design Pro, Swish max để Tích hợp 10 Tích hợp tạo hiệu ứng text 23 Publish Shockwave Flash HTML 24 Kiểm tra 7, 12, 16, 19, 22 25 Tổng cộng 120 BÀI KHỞI ĐẦU VỚI ADOBE FLASH Giới thiệu Flash công cụ để phát triển ứng dụng thiết kế phần mềm mô Sử dụng ngơn ngữ lập trình ActionScript để tạo tương tác, hoạt cảnh phim Điểm mạnh Flash nhúng file âm thanh, hình ảnh động Người lập trình chủ động lập điều hướng cho chương trình Flash xuất đa dạng file kiểu html, exe, jpg để phù hợp với ứng dụng người sử dụng Web, CD Mục tiêu - Hiểu rõ công dụng công cụ vẽ tô màu - Thao tác vẽ tô màu cho đối tượng hình - Rèn luyện tính cẩn thận, tư sáng tạo Giới thiệu giao diện Adobe Flash Khi khởi động lần đầu tiên, Flash CS4 có giao diện sau: Hình 1.1: Cửa sổ khởi động Flash Vùng khoanh trịn màu đỏ hình có chữ ESSENTIALS Đây vùng làm việc (workspace) mặc định khởi động Flash CS4 lần đầu Có nhiều vùng làm việc khác để chọn lựa tùy theo thói quen sở thích người, ví dụ người sử dụng Flash chọn vùng làm việc CLASSIC Khi bấm vào chữ ESSENTIALS đề cập trên, Flash xổ xuống menu cho bạn chọn lựa vùng làm việc sau: Hình 1.2: Menu lựa chọn vùng làm việc Để giúp làm quen với Flash khơng gặp khó khăn việc thiết lập vùng làm việc, bạn thực hành dựa vùng làm việc mặc định Các thao tác file: Tạo mới, lưu, đóng, mở Dùng chuột bấm vào nút Flash File (ActionScript 3.0): Hình 1.3: Chọn ActionScrip 3.0 Flash tạo file có tên Untitled-1: Hình 1.4: Tạo tên file flash (Xem thêm phần Flash document Flash movie phần kế tiếp) Lưu flash document Tất thực hành lưu vào folder để tiện cho việc quản lý Sẽ tạo folder có tên FLASH CS4 ONLINE, sau lưu file lại với tên 001_frame_by_frame.fla folder vừa tạo ra, sau thực hành tiếp Cách làm sau: Chọn File > Save: Hình 1.5: Chọn lưu tập tin Ở hộp thoại mở ra, bấm nút Create New folder: 10 BÀI 13 VẼ GIAO DIỆN CÁC TRANG WEB Giới thiệu Các sản phẩm Flash đa dạng: website, banner, quảng cáo, game, animation, nhiều ứng dụng khác với tên gọi chung RIA: Rich Internet Applications (các ứng dụng web có tính tương tác cao) Ngồi khả chạy web, flash chạy máy tính cục Flash player standalone, trình duyệt có cài Flash plugin, embed vào chương trình khác cách xuất định dạng file EXE, Flash dùng để tạo ứng dụng game nhỏ chạy desktop chạy đĩa CD Mục tiêu - Mô tả giao diện trang web theo yêu cầu - Thiết kế giao diện web - Vẽ giao diện web hồn chỉnh - Rèn luyện tính cẩn thận, tư sáng tạo Mơ tả giao diện Flash làm thành trang web (full flash site): http://danz-media.com, http://www.socnhi.com/ Flash phần trang web Ví dụ dễ thấy flash video player trang web chia sẻ video tiếng: http://youtube.com - gói gọn phạm vi player để xem video hiệu không nhỏ Banner, quảng cáo, intro, phổ biến gặp nhiều trang web mạng Chuẩn bị công cụ vẽ Thiết kế vẽ 55 56 Bài 14 Tạo movie clip nút bấm Giới thiệu Mục tiêu - Hiểu vai trò nút bấm movie clip - Tạo liên kết lên trang nút bấm công cụ movie clip - Rèn luyện tính cẩn thận, tư sáng tạo Tạo movie clip đặt lên trang Để hiệu ứng button thêm phần đặc sắc bạn tạo button chuyển động theo kiện chuột cách lồng movieClip vào button Như ví dụ movieClip lồng keyframe "Over" button tạo nhiều kiểu hoạt cảnh thú vị rê chuột lên nút: Load Graphic: Load hình bitmap bên ngồi vào movieClip screen Load External Movie Clip: Load file.swf vào movieClip screen Unload Flash Movie: Bỏ load file.swf mà load từ vào tập tin Duplicate Movieclip: Nhân movieClip screen GotoAndPlay at frame or label: Nhảy đến frame cụ thể movieClip chạy tiếp GotoAndStop at frame or label: Nhảy đến frame cụ thể movieClip dừng Bring to Front, Bring Forward, Send to Back, Send Backward: Thay đổi thứ tự hiển thị movieClip stage Start Dragging movieclip: Khởi động drag movie clip Stop Dragging movieclip: Ngưng drag movieClip Tạo nút bấm liên kết Chuyển hình shape thành button: 57 Tạo hình shape: Vẽ hình shape stage cách cơng cụ , hay (có thể import hình bitmap làm button) Chuyển hình shape thành symbol button: Click chọn hình shape, Rclick > convert to symbol hay Insert > create new symbol (Ctrl_F8) Chọn kiểu symbol button Tạo trạng thái button tương ứng với kiện trỏ: Dclick vào instance button stage để vào edit mode button Insert Keyframe vào frame đầu (có tên frame Up,Over, Down): thay đổi trạng thái button đổi màu, đổi dạng Tạo vùng tương tác với trỏ: Thay đổi kích thước, vị trí hình shape frame "Hit" Thể trạng thái Button Up: Trạng thái bình thường button Over: Khi rê chuột lên button Down: Khi click chuột lên button Xác định vùng tương tác Hit: (Khơng hiển thị file.swf) Có thể tách riêng vùng tương tác button, lúc bạn rê trỏ chuột lên vị trí button vị trí khác thay đổi 58 Bài 15 Tạo âm thanh, nút bấm liên kết lên trang Giới thiệu Mục tiêu - Hiểu rõ vai trò âm thanh, nút bấm liên kết lên trang - Thiết kê âm liên kết lên trang - Vân dụng lệnh action script cho nút bấm - Rèn luyện tính cẩn thận, tư sáng tạo Gán âm cho nút bấm Load sound from Library Load streaming mp3 file play sound stop all sound stop sound Gán lệnh action script cho nút bấm Gán lệnh cho button: Có cách - Gán trực tiếp vào button: lệnh đặt button - Gán thông qua tên instance nó: Lệnh đặt timeline button Theo cấu trúc: Nhập lệnh trực tiếp vào button (Event in button): Click chọn button gõ lệnh action panel on(mouseEvent){ statements; 59 } Gán lệnh qua tên instance button (Event in keyframe): Click chọn keyframe có button gõ lệnh action panel my_btn.mouseEvent = function(){ lệnh statements; } 60 Bài 16 Điều khiển âm nhạc Giới thiệu Mục tiêu - Thiết kế điều khiển âm nhạc - Liên kết lên trang - Rèn luyện tính cẩn thận, tư sáng tạo Mơ tả điều khiển âm nhạc Âm tập tin video giống hình bitmap, import vào library đóng vai trị symbol (biểu tượng giả): dùng dùng lại nhiều lần mà phần dung lượng tăng khơng đáng kể Có loại âm tập tin SWF: (Chỉ áp dụng cho file âm dạng wave mp3) Âm kiện (event sounds): Thường đoạn âm ngắn khởi động kiện (tiếng click chuột lên button ) kiểu âm cần phải tải vào máy hoàn toàn trước sử dụng, Âm phân dòng (stream sounds): Thích hợp cho đoạn nhạc dài làm âm nền, phát trước tồn nhạc download hồn tồn, khơng phù hợp cho âm lặp (loop) nhạc, tiếng nói Loại âm đồng hố với hoạt cảnh Movie Xử lý âm nhạc Có thể sử dụng đoạn âm dài nhạc, lời thoại cho presentation - Chọn file menu > import > import to Library; Chọn tập tin âm (wave hay mp3) - Tạo thêm lớp sound Timeline, chọn keyframe bắt đầu đoạn âm Drag âm từ Library vào stage 61 - Chọn keyFrame có đoạn âm thanh, properties panel chọn Sync: Stream Liên kết âm nhạc lên trang Khảo sát âm layer: Rclick lên timeline chọn properties để mở bảng layer properties, sau chọn layer height=300% Lúc nhìn vào layer sound khảo sát đồ thị sóng âm xác định khoảng lặng dãy nhạc Trong properties panel: Click chọn keyframe chứa đối tượng âm (My Way.mp3) Sound: Tên file Effect: bảng Edit Envelope Sync: Event (âm kiện), Start , Stop : để đồng hoá với kiện đó, Stream (âm dịng) Repeat (giới hạn số lần lặp), Loop (lặp vô hạn) Sync (Event:âm kiện), Edit > Edit Envelope: Mở bảng Edit Envelope 62 Bài 17 Tạo Video Flash từ file phim Giới thiệu Mục tiêu - Chọn file phim, flash theo yêu cầu - Chuyển file phim video thành flash - Rèn luyện tính cẩn thận, tư sáng tạo Chọn file phim Chuyển file phim thành flash 63 Bài 18 Liên kết video flash vào trang Giới thiệu Mục tiêu - Chọn file video flash phù hợp - Liên kết phim video flash vào trang - Rèn luyện tính cẩn thận, tư sáng tạo Chọn file flash Liên kết file flash vào trang 64 Bài 19 Tạo điều khiển xem phim Giới thiệu Mục tiêu - Chọn lựa phương thức điều khiển xem - Tạo điều khiển xem - Rèn luyện tính cẩn thận, tư sáng tạo Chọn phương thức điều khiển xem Tạo điều khiển xem 65 Bài 20 Tạo banner quảng cáo Giới thiệu Mục tiêu - Hiểu mục đích tạo banner quảng cáo - Thiết kế loại banner quảng cáo - Tạo hoạt hình hiệu ứng cho banner quảng cáo - Rèn luyện tính cẩn thận, tư sáng tạo Nội dung Giới thiệu banner quảng cáo Tạo banner quảng cáo biến đổi hình dạng, mặt nạ Tạo banner quảng cáo biến đổi chuyển động 66 Bài 21 Chèn hoạt hình Banner vào trang web Giới thiệu Mục tiêu - Chọn lựa banner phù hợp - Liên kết lên trang web - Rèn luyện tính cẩn thận, tư sáng tạo Chọn banner Chọn vị trí phù hợp trang Chèn banner lên trang 67 Bài 22 Sử dụng phần mềm Banner Design Pro, Swish max Giới thiệu Mục tiêu - Hiểu rõ mục tiêu chức phần mềm - Tạo hiệu ứng text - Rèn luyện tính cẩn thận, tư sáng tạo Sử dụng phần mềm Banner Design Pro Sử dụng Swish max để tạo hiệu ứng text 68 Bài 23 Publish Shockwave Flash HTML Giới thiệu Mục tiêu - Sử dụng Free Full Flash Website cho Web - Xuất hoạt hình file HTML - Rèn luyện tính cẩn thận, tư sáng tạo Nội dung Publish HTML Sử dụng Free Full Flash Website 69 ... ĐUN THIẾT KẾ HOẠT HÌNH Vị trí, tính chất mơn học - Vị trí mơn học: Mơn học bố trí sau học sinh học xong mơn học chung, môn học, mô đun kỹ thuật sở học trước mơn thiết kế lập trình Web, lập trình. .. layer xem hoạt hình) Kéo rê layer kế bên vào bên layer Path Chỉnh tâm đối tượng hoạt hình hai frame khóa frame khóa cuối vào hai đầu mút đường dẫn Thao tác hoạt hình theo đường dẫn 27 Hình 5.1:... properties, mục Tweening: click thiết lập Orient to Path Hình 5.2: Thiết lập thuộc tính đối tượng Bài tập áp dụng Tạo hoạt hình bóng nhảy theo hình zich zac 28 BÀI TẠO HOẠT HÌNH VỚI MOTION TWEEN, SHAPE