Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin Trình độ trung cấp)

BM/QT10/P.ĐTSV/04/04 Ban hành lần: UBND TỈNH BÀ RỊA – VŨNG TÀU TRƯỜNG CAO ĐẲNG KỸ THUẬT CÔNG NGHỆ GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ HOẠT HÌNH NGHỀ: CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ: TRUNG CẤP (Ban hành kèm theo Quyết định số: /QĐ-CĐKTCN ngày…….tháng….năm Hiệu trưởng Trường Cao đẳng Kỹ thuật Công nghệ BR – VT) BÀ RỊA-VŨNG TÀU TUYÊN BỐ BẢN QUYỀN Nhằm đáp ứng nhu cầu học tập nghiên cứu cho giảng viên học sinh nghề Công nghệ Thông tin trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, thực biên soạn tài liệu Thiết kế hoạt hình Flash Tài liệu biên soạn thuộc loại giáo trình phục vụ giảng dạy học tập, lưu hành nội Nhà trường nên nguồn thơng tin phép dùng nguyên 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 Giáo trình “Thiết kế hoạt hình Flash” biên soạn khung chương trình đào tạo Trung cấp nghề Công nghệ thông tin Trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu phê duyệt Giáo trình đề cập đến nội dung chi tiết nhất, trọng tâm cung cấp kiến thức kỹ tới người học đáp ứng nhu cầu thực tế doanh nghiệp Giáo trình Thiết kế hoạt hình Flash cơng cụ để phát triển ứng dụng thiết kế phần mềm mô Hướng dẫn chi tiết để tạo tương tác, hoạt cảnh phim hoạt hình nhúng file âm thanh, hình ảnh động lên trang Web Nội dung giáo trình chia làm 18 bài: Bài 1: Khởi đầu với Adobe Flash Bài 2: Sử dụng công cụ vẽ Bài 3: Sử dụng công cụ chọn tô màu Bài 4: Các biểu tượng symbol Bài 5: Thao tác với timeline Bài 6: Tạo hoạt hình Frame by frame Classic Tween Bài 7: Tạo hoạt hình Classic Tween, Guide Bài 8: Tạo hoạt hình Motion Tween Bài 9: Tạo hoạt hình Shape Tween Sử dụng Shape hint Bài 10: Sử dụng mặt nạ (mask) Bài 11: Các cơng cụ tạo hoạt hình: bone, deco, bind, 3D Bài 12: Điều khiển Chuột Bàn phím kiện Bài 13: Tạo banner quảng cáo biến đổi hình dạng, mặt nạ, biến đổi chuyển động Bài 14: Vẽ giao diện trang web (trang intro, trang chủ, trang chi tiết, …) Bài 15: Tạo movie clip nút bấm liên kết đặt lên trang Bài 16: Gán âm thanh, lện action script cho nút bấm Bài 17: Chuyển file phim thành Video Flash Bài 18: Publish Shockwave Flash HTML Trong trình biên soạn giáo trình, tác giả cố gắng cập nhật thông tin mới, đồng thời tham khảo nhiều giáo trình khác, chắn không tránh khỏi hạn chế định Rất mong nhận ý kiến đóng góp nhà chuyên môn, đồng nghiệp bạn độc giả để giáo trình hồn thiện Bà Rịa – Vũng Tàu, ngày .tháng năm Tham gia biên soạn Nguyễn Bá Thủy – Chủ biên MỤC LỤC LỜI GIỚI THIỆU MỤC LỤC BÀI MỞ ĐẦU: KHỞI ĐẦU VỚI ADOBE FLASH 10 Giới thiệu giao diện Adobe Flash 10 Các thao tác file: Tạo mới, lưu, đóng, mở 11 Câu hỏi ôn tập, tập .14 BÀI 1: SỬ DỤNG CÁC CÔNG CỤ VẼ 15 Công cụ vẽ: Pencil, Brush, Eraser, AirBrush, Line .15 1.1 Công cụ Pencil: 15 1.2 Công cụ Brush 16 1.3 Công cụ Erase .16 Rectangle, Oval, PolyStar, Text .16 2.1 Công cụ Rectangle 16 2.2 Sử dụng công cụ Oval ( ) 18 2.3 Sử dụng công cụ PolyStar ( ) .20 2.4 Sử dụng công cụ Text (T) 22 Câu hỏi ôn tập, tập .22 BÀI 2: SỬ DỤNG CÁC CÔNG CỤ CHỌN VÀ TÔ MÀU .23 Công cụ Pen, Selection Tool, subselection, Free Transform 23 1.1 Pen Tool ( ): dùng tạo nét thẳng cong .23 1.2 Selection Tool ( ): Di chuyển phần đối tượng chọn 25 1.3 Subselection Tool ( 1.4 Free Transform Tool ( ): Làm biến dạng đối tượng 25 ): Di chuyển đối tượng chọn 26 Công cụ tô màu Paint Bucket, Eye dropper 27 2.1 Bucket Tool ( ): dùng tơ màu hình tạo từ đường viền (màu bên hình) 27 2.2 Eye dropper ( ): 28 Công cụ Gradient Transform ( ) 28 Câu hỏi ôn tập, tập .28 BÀI 3: CÁC BIỂU TƯỢNG SYMBOL 32 Biểu tượng Graphic, Button, MovieClip .32 Làm việc với thư viện Library .37 Làm việc với Common Library .38 Câu hỏi ôn tập, tập .39 BÀI 4: THAO TÁC VỚI TIMELINE .41 Giới thiệu timeline 41 Vai trò xử lý hoạt hình 43 Xử lý hoạt hình cho đối tượng .46 Câu hỏi ôn tâp, tập .47 BÀI 5: TẠO HOẠT HÌNH BẰNG FRAME BY FRAME VÀ CLASSIC TWEEN .48 Hoạt hình Frame by frame .48 Hoạt hình Classic Tween .50 Câu hỏi ôn tập, tập .52 BÀI 6: TẠO HOẠT HÌNH THEO ĐƯỜNG DẪN 53 Giới thiệu hoạt hình theo đường dẫn .53 Thao tác hoạt hình theo đường dẫn .53 Câu hỏi ôn tập, tập .54 BÀI 7: TẠO HOẠT HÌNH VỚI MOTION TWEEN 56 Mô tả chế 56 Hoạt hình Motion Tween .57 Tạo chuyển động nhờ vào Motion Presets 58 Câu hỏi ôn tập, tập .59 BÀI 8: TẠO HOẠT HÌNH VỚI SHAPE TWEEN 60 Mô tả chế 60 Các bước sử dụng Shape Tween 60 Sử dụng Shape hint 61 Câu hỏi ôn tập, tập .62 BÀI 9: SỬ DỤNG SỬ DỤNG MẶT NẠ (MASK) 64 Mặt nạ (mask) 64 Sử dụng mặt nạ động .64 Sử dụng mặt nạ biến hình 65 Tạo SlideShow ảnh 67 Câu hỏi ôn tập, tập .70 BÀI 10: CÁC CÔNG CỤ TẠO HOẠT HÌNH: BONE, DECO, BIND, 3D 71 Bone Tool .71 Công cụ Bind Tool 75 Công cụ 3D 75 Câu hỏi ôn tập, tập .81 BÀI 11: ĐIỀU KHIỂN CHUỘT VÀ BÀN PHÍM BẰNG CÁC SỰ KIỆN 82 Sự kiện Chuột 82 Sự kiện Bàn phím 83 Đưa đối tượng vào ActionScript 83 Câu hỏi ôn tập, tập .85 BÀI 12: TẠO CÁC BANNER QUẢNG CÁO 88 Giới thiệu banner quảng cáo 88 Tạo banner quảng cáo biến đổi hình dạng, mặt nạ 89 Tạo banner quảng cáo biến đổi chuyển động 94 Câu hỏi ôn tập, tập .96 BÀI 13: VẼ GIAO DIỆN CÁC TRANG WEB 97 Mô tả giao diện 97 Chuẩn bị công cụ vẽ 98 Thiết kế vẽ 99 Câu hỏi ôn tập, tập .100 BÀI 14: TẠO CÁC MOVIE CLIP VÀ CÁC NÚT BẤM .101 Tạo movie clip đặt lên trang 101 Tạo nút bấm liên kết 105 Câu hỏi ôn tập, tập .108 BÀI 15: TẠO ÂM THANH, XỬ LÝ ÂM THANH 109 Xử lý âm 109 Xử lý âm 110 Câu hỏi ôn tập, tập .111 BÀI 16: CHUYỂN FILE PHIM THÀNH VIDEO FLASH 112 Chọn file phim .112 Chuyển file phim thành flash 112 Câu hỏi ôn tập, tập .114 BÀI 17: PUBLISH RA SHOCKWAVE FLASH VÀ HTML 115 Chọn banner 115 Chọn vị trí phù hợp trang .115 Publish để xuất tập tin 116 Câu hỏi ôn tập, tập .117 TÀI LIỆU THAM KHẢO .118 GIÁO TRÌNH MƠ ĐUN Tên mơn học/mơ đun: THIẾT KẾ HOẠT HÌNH FLASH Mã mơn học/mơ đun: MĐ17 Vị trí, tính chất, ý nghĩa vai trị mơn học/mơ đun: - Vị trí: 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ở, photoshop học trước mơn thiết kế lập trình Web, lập trình Windows - Tính chất: Là mơ đun kết hợp làm cơng cụ cho mơn lập trình giao diện, làm baner động cho trang web, banner quảng cáo 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 hoạt hình - Ý nghĩa vai trị mơn học/mơ đun: 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 mô đun: - Về kiến thức: + Trình bày kiến thức cơng cụ xử lý hoạt hình; kiến thức sở hoạt hình đồ họa vi tính + Giải thích kiến thức sở hình ảnh tĩnh, hình động, video, audio, tảng làm phim hoạt hình + Giải thích Flash công cụ tạo để giúp chuyên viên kỹ thuật viên tạo ứng dụng Flash (Hình ảnh động) + Ứng dụng kiến thức cơng cụ kiện tích hợp sẵn để xử lý hình ảnh, xử lý âm thanh, dựng video; kiến thức chế 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: 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 106 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) Hình 14.5 Tạo vùng tương tác Có thể tách riêng vùng tương tác button, lúc rê trỏ chuột lên vị trí button vị trí khác thay đổi Hình 14.6 Các trạng thái Button Một số câu lệnh thông dụng: Lệnh thử button: on (release) { trace("r u click me?"); } Lệnh nhảy frame: Nhảy đến frame cấp - Nhảy đến keyframe timeline: gotoAndStop(3); - Nhảy đến keyframe "on" timeline: gotoAndStop("on"); - Nhảy đến keyframe kế tiếp: nextFrame (); 107 - Nhảy keyframe kế truớc: previousFrame(); Ví dụ: album hình Nhảy đến keyframe khác cấp: Ví dụ ta có cấu trúc movieClip lồng là: main timeline > movie1_mc > movie2_mc main timeline > clip1_mc > clip2_mc Nhảy lên frame cấp trên: - Nhảy lên cấp (Từ clip2_mc nhảy đến frame clip1_mc) _parent.gotoAndStop(4); - Nhảy lên cấp (Từ Clip2 nhảy đến frame main timeline) _parent._parent.gotoAndStop(2); - Trở main timeline (về frame 3, main timeline từ vi trí nào): _root.gotoAndStop(3); Nhảy xuống keyframe timeline riêng movieClip: - Từ main timeline nhảy đến frame movieClip "Clip1_mc": clip1_mc.gotoAndStop(2); - Từ main timeline nhảy đến frame movieClip "Clip2_mc": clip1_mc.clip2_mc.gotoAndStop(5); Ví dụ: nút điều khiển biến hình, chuyển màu Nhảy qua lại movieClip không lồng nhau: Từ movieClip "Clip2_mc" nhảy đến keyframe "movie2_mc": this._parent._parent movie1_mc.movie2_mc.gotoAndStop(3); Có thể dùng Insert Target Path Actions panel để nhập đường dẫn cách xác 108 Chạy đoạn chuổi frame hoạt cảnh timeline có keyframe đầu 20: gotoAndPlay(20); Lệnh mở flash tồn hình: fscommand("fullscreen", true); Lệnh đóng file flash: fscommand("quit", true); Lệnh mở trang web: getURL("http://www.google.com.vn", _blank); Lệnh gởi mail: getURL("mailto:dannhut@gmail.com"); Câu hỏi ôn tập, tập 14.1 Tạo Movie Clip từ file hoạt hình SWF GIF 14.2 Tạo Banner quảng cáo tạo button Stop, Play, 109 BÀI 15: TẠO ÂM THANH, XỬ LÝ ÂM THANH Giới thiệu: Âm cho nút sống động làm cho trang web sinh động Để xử lý âm Flash, Adobe cung cấp trình tiện ích riêng dành cho nhiệm vụ Adobe SoundBooth Với SoundBooth, 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 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 Nội dung chính: Xử lý âm Mặc dù chức Import to Library hỗ trợ chức Import Video, bạn nên sử dụng chức cho âm hình ảnh Riêng với video, bạn nên sử dụng chức Import Video Cả hai chức tổ chức menu File>Import 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 - Hoặc Edit with Soundbooth Bảng thuộc tính âm có dạng sau: 110 Hình 15.1 Bảng thuộc tính âm Có thể 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, thay đổi định dạng nén cho file âm nhờ vào Compression Xử lý âm Để 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 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 15.2 Giao diện SoundBooth Một vài chức SoundBooth: 111 - Trích xuất phần file âm thanh: 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 biểu diện trạng thái đến vị trí cần kiểm tra, sau nhấp Play - Tạo hiệu ứng cho âm thanh: 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, cần tạo riêng Layer cho Đảm bảo phần âm phải tương ứng với hoạt cảnh phim Điều giúp phim thật hơn, sinh động Câu hỏi ôn tập, tập 1) Tạo nút bấm xử lý có gán âm cho tập làm 2) Xử lý kiện nút bấm lệnh action script 112 BÀI 16: CHUYỂN FILE PHIM THÀNH VIDEO FLASH Giới thiệu: Tạo Video Flash từ file phim cho phép tận dụng kế thừa sản phẩm phát triển hồn thiện thành sản phẩm có chất lượng kỹ xảo đẹp 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 Nội dung chính: Chọn file phim Khi import video vào Flash, cho phép video 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 Chuyển file phim thành flash Kĩ xảo gấu thổi lửa: Trong ví dụ này, sử dụng thước phim có hình gấu Chú gấu há miệng Khi đó, luồng ánh sáng màu đỏ (mà ta gọi lửa) phóng Kĩ xảo mong chờ thước phim cuối thước phim gấu thổi lửa Đầu tiên, tạo dự án Import Video hình gấu vào (File Bear.flv thư mục Video CD đính kèm) Hiệu chỉnh thuộc tính import liệu theo hình mơ tả hình bên đây: 113 Hình 16.1 Hiệu chỉnh thơng số import liệu Sau đó, nhấp vào Next Trong cửa sổ tiếp theo, chọn Embbed Video nhấp Finish Giờ đây, video import vào nằm thư viện (nếu chọn import to Library), nằm Stage (nếu chọn import to Library) Để tạo kĩ xảo điện ảnh, thực bước sau đây: Bước 1: Kéo video thư viện vào Stage, sử dụng chức Align để hiệu chỉnh kích thước cho video trùng với kích thước Stage đặt trùng khớp lên Stage Hình 16.2 Hiệu chỉnh thuộc tính Align cho Video gấu Stage Video hình gấu đặt vào Layer Sửa tên Layer thành Bear Bước 2: Tạo Layer, đặt tên cho Fire Vẽ lên Layer hình chữ nhật màu đỏ, loại bỏ viền Tiếp theo, convert thành MovieClip Trong 114 bảng thuộc tính MovieClip này, chọn Filter Blur, hiệu chỉnh độ BlurX BlurY 41 Bước 3: Kéo đánh dấu Frame TimeLine, xem vị trí cần tạo cầu lửa xuất Bấm vào Frame tương ứng Layer Fire, nhấn phím F6 để tạo KeyFrame Kích chuột phải lên cầu lửa, chọn Create Motion Tween Chọn Frame kết thúc việc phóng lửa kéo vị trí kết thúc Tween vị trí Frame Tại Frame kéo giãn cầu lửa dài Trên vị trí bên Tween, hiệu chỉnh vị trí cầu lửa khớp với miệng gấu (các vị trí đánh dấu đen TimeLine) Nhấn Ctrl+Enter để kiểm tra Có thể kết hợp với video mà bạn xây dựng nên Việc xây dựng video sử dụng Flash để tạo kĩ xảo trải nghiệm thú vị Hình 16.3 Hiệu chỉnh vị trí phóng lửa Câu hỏi ơn tập, tập 16.1 Kĩ xảo chiến không hai chim 115 16.2 Kĩ xảo người bay ngựa 116 BÀI 17: PUBLISH RA SHOCKWAVE FLASH VÀ HTML Giới thiệu Nếu thường xuyên duyệt web, thấy nhiều website có thước phim Flash động di chuyển trang web không che khuất nội dung trang web đặc biệt khơng có khung hình bao quanh đối tượng phim Flash Mục tiêu - Chọn lựa banner phù hợp - Chọn thông số 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 Nội dung chính: Chọn banner Hình 17.1 Sử dụng Banner có thư viện Chọn vị trí phù hợp trang Các đối tượng hiển thị lên trình duyệt web màu Stage không hiển thị trình duyệt 117 Hình 17.2 Phim Flash suốt trình duyệt Publish để xuất tập tin Hình 17.3 Hộp thoại Publish Settings 118

Về thông số cho code chèn banner flash phần style bạn css vị trí banner hợp lý nhất! Cịn height width tùy vào kích thước banner, link banner chèn link flash (có đuổi swf), phần title bạn ghi tùy ý, vài Câu hỏi ôn tập, 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ủ đề 2) Sử dụng kĩ thuật chèn âm video, tạo hát karaoke flash 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 119 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 Hồ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 Flash CS4 Professional - Robert Reinhardt and Snow Dowd Wiley Publishing, 2009 CD Video Training Flash CS4 Professional Essential Training - Todd Perkins - Lynda.com, 2009 CD Video Training ActionScript in Flash CS4 - Todd Perkins - Lynda.com, 2009 Actionscript 3.0 - Roger Braunstein Wiley Publishing 2010 Foundation Flash: Cartoon Animation - Tim Jones, Barry J Kelly, Allan S Rosson, David Wolfe Apress, 2007 120 ... nghiệp Giáo trình Thiết kế hoạt hình Flash công cụ để phát triển ứng dụng thiết kế phần mềm mô Hướng dẫn chi tiết để tạo tương tác, hoạt cảnh phim hoạt hình nhúng file âm thanh, hình ảnh động lên... Giáo trình ? ?Thiết kế hoạt hình Flash” biên soạn khung chương trình đào tạo Trung cấp nghề Công nghệ thông tin Trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu phê duyệt Giáo trình đề cập đến... viên học sinh nghề Công nghệ Thông tin trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, thực biên soạn tài liệu Thiết kế hoạt hình Flash Tài liệu biên soạn thuộc loại giáo trình phục vụ giảng