1 UDPM-CĐ-MĐ29-TKHH FLASH 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 Macromedia Flash phần mềm chuyên nghiệp để tạo thước phim hoạt hình, trị chơi, thiết kế giao diện web… Flash có ứng dụng to lớn giới Internet nói chung cơng nghệ giải trí nói riêng Dù nhiều cơng nghệ đời cạnh tranh với Flash, Flash chiếm thị phần hẳn Và việc sử dụng Flash củng củng thành thạo, chúng tơi biên soạn giáo trình Macromedia Flash nhằm cung cấp cho bạn kiến thức Flash để bạn sử dụng Flash cách thành thạo Giáo trình chia thành bài: • BÀI MỞ ĐẦU • BÀI 1: GIỚI THIỆU PHẦN MỀM FLASH VÀ THIẾT KẾ VẼ CƠ BẢN • BÀI 2: TẠO CHUYỂN ĐỘNG • BÀI 3: LÀM VIỆC VỚI LỚP • BÀI 4: XÂY DỰNG CÁC ACTION Trong trình biên soạn khơng thể tránh khỏi sai sót, mong bạn thông cảm mong nhận ý kiến đóng góp từ bạn để hồn thiện giáo trình sau này! Cần Thơ, ngày 04 tháng 05 năm 2017 Tham gia biên soạn Chủ biên: Lê Hoàng Phúc Giang Tuấn Nguyên MỤC LỤC CHƯƠNG TRÌNH MƠ ĐUN ĐÀO TẠO: MACROMEDIA FLASH I VỊ TRÍ, TÍNH CHẤT MÔ ĐUN II MỤC TIÊU MÔ ĐUN III NỘI DUNG MÔ ĐUN BÀI MỞ ĐẦU Giới thiệu làm phim Phần mềm Flash bước cài đặt Các định dạng ảnh tĩnh động Web 11 BÀI 1: GIỚI THIỆU PHẦN MỀM FLASH VÀ THIẾT KẾ VẼ CƠ BẢN 12 Giới thiệu ứng dụng FLASH 12 1.1 Các tính ứng dụng 12 1.2 Giao diện làm việc 12 1.3 Thiết lập môi trường làm việc 13 Các đối tượng 16 2.1 Các đối tượng trang hoạt hình 16 2.2 Khả thiết kế hoạt cảnh 17 2.3 Quản lý đối tượng cửa sổ Library 19 Phân cảnh 20 3.1 Khái niệm phân cảnh 20 3.2 Cách tạo phân cảnh 20 3.3 Sắp xếp hiệu chỉnh phân cảnh 20 Thực hành 21 4.1 Thao tác công cụ vẽ thiết lập môi trường vẽ 21 4.2 Xây dựng đối tượng lớp 21 4.3 Xây dựng phân cảnh cho đối tượng 22 Kiểm Tra 23 BÀI : TẠO CHUYỂN ĐỘNG 24 Thiết kế hoạt hình 24 1.1 Các đối tượng đoạn 24 1.2 Các đối tượng nút 24 1.3 Gán hành động Timeline 24 Biến đổi vị trí hình vẽ 25 2.1 Tạo hình vẽ 25 2.2 Biến đổi theo Tweening 26 2.3 Trình tự bước biến đổi 27 2.4 Ví dụ ứng dụng 28 Sự biến đổi hình dạng hình vẽ 28 3.1 Các yêu cầu biến đổi hình vẽ 28 3.2 Biến đổi theo Shape 28 3.3 Trình tự bước biến đổi 29 3.4 Ví dụ ứng dụng 29 Phép xoay hình 30 4.1 Cách tạo phép xoay hình 30 4.2 Trình tự phép xoay hình 31 4.3 Ví dụ ứng dụng 31 Thực hành 35 5.1 Xây dựng Frame, KeyFrame, BlankKeyFrame 35 5.2 Thiết kế hoạt cảnh bóng di chuyển hình 35 5.3 Vẽ thiết kế mô chuyển động mạch điện 35 5.4 Vẽ thiết kế chuyển động mô trình xử lý liệu máy tính cá nhân 35 BÀI 3: LÀM VIỆC VỚI LỚP 36 Lớp thiết lập lớp 36 1.1 ý nghĩa lớp 36 1.2 Thiết lập lớp 36 1.3 Hiệu chỉnh lớp 37 Lớp mặt nạ 38 2.1 ứng dụng lớp mặt nạ 38 2.2 Cách tạo lớp mặt nạ 38 2.3 Hiệu chỉnh lớp mặt nạ 39 Lớp đường dẫn 39 3.1 ứng dụng lớp đường dẫn 39 3.2 Cách tạo lớp đường dẫn 39 3.3 Hiệu chỉnh lớp đường dẫn 40 Thực hành 40 4.1 Thiết lập lớp cửa sổ Timeline 40 4.2 Tạo chuyển động cho máy bay 41 4.3 Xây dựng phim hoạt hình nhỏ với thời gian phút dựa câu chuyện cổ tích 43 Kiểm tra 43 BÀI : XÂY DỰNG CÁC ACTION 45 Làm việc với nút 45 1.1 Cách tạo nút 45 1.2 Các tính nút 46 1.3 Gán Action cho nút 46 Xây dựng hoạt hình Action 46 2.1 Làm việc với cửa sổ Action 46 2.2 Gán Action lên Frame 46 2.3 Các cấu trúc Action 47 Thư viện Action 47 3.1 Nhóm Autoplay 47 3.2 Nhóm KeyPress 48 3.3 Nhóm Goto 48 Thực hành 48 4.1 Tạo nút xây dựng Action nút 48 4.2 Dùng Action mô tượng tuyết rơi 49 Kiểm tra 51 TÀI LIỆU THAM KHẢO 53 CHƯƠNG TRÌNH MƠ ĐUN ĐÀO TẠO: MACROMEDIA FLASH Mã số mô đun: MĐ29 Thời gian mô đun: 90 (Lý thuyết :30 giờ; Thực hành : 60 giờ) I VỊ TRÍ, TÍNH CHẤT MƠ ĐUN  Vị trí : Là mơ đun chun ngành nghề tin học văn phòng, thực vào kỳ thứ Được thực sau học mô đun kỹ thuật sở mô đun Thiết kế đồ hoạ Corel Draw  Tính chất: Macromedia Flash chuẩn đồ hoạ hoạt hình Web, giúp cho trang Web có tính tương tác hấp dẫn người sử dụng trang Web II MỤC TIÊU MƠ ĐUN  Trình bày cách tạo đối tượng, cảnh phim  Nêu trình tự xây dựng phim hoạt hình Flash  Nêu cách thiết lập chuyển động cách hiệu chỉnh chuyển động Flash  Vận dụng thành thạo cách tạo đối tượng vẽ gán hành động cho đối tượng vẽ Ứng dụng vào thực tiễn  Có phẩm chất đạo đức, kỷ luật tốt, tích cực nghiên cứu học hỏi nâng cao trình độ III NỘI DUNG MÔ ĐUN Thời gian (giờ) STT Tên mô đun Tổng số Lý thuyết Thực hành Kiểm tra Bài mở đầu 2 0 Giới thiệu phần mềm Flash thiết kế vẽ Tạo chuyển động 30 10 18 Làm việc với lớp 20 11 Xây dựng Action 30 21 90 30 56 Cộng BÀI MỞ ĐẦU Mã bài: M29-01 Giới thiệu làm phim Phim hình thức gây ảo ảnh quang học chuyển động nhiều hình ảnh tĩnh chiếu tiếp diễn liên tục Trong phim kỹ nghệ dàn dựng, hoạt họa ám đến kỹ thuật hình ảnh phim kiến tạo riêng rẽ Người ta dùng máy tính, hay cách chụp hình ảnh vẽ, tơ màu, cách chụp cử động nhỏ mơ hình để tạo nên hình ảnh Những hình ảnh sau chụp máy quay phim hoạt họa chuyên ngành Khi tất hình ảnh nối vào với nhau, tạo nên đoạn phim chiếu lên ảnh, chúng gây nên ảo tưởng cử động hoạt động liên tục Ảo tưởng gây tượng biết đến gọi lưu ảnh Phần mềm Flash bước cài đặt Macromedia flash phần mềm ứng dụng đồ họa cho phép sáng tạo sản phẩm chuyên nghiệp thiết kế nội dung tương tác với lôi kéo hấp dẫn kinh nghiệm trực tuyến Macromedia flash bao hàm tất công cụ đơn giản cho việc thiết kế hiệu ứng đồ họa, text, video, nội dung cho thiết bị di động Các bước cài đặt: Vào thư mục cài đặt, click đúp vào file Setup.exe để tiến hành cài đặt Chương trình cài đặt tiến hành kiểm tra thơng tin cấu hình máy tính Nhập mã đăng kí, lựa chọn cài đặt dùng thửsản phẩm, chọn Next sử dụng, đường dẫn cài đặt, ứng dụng kèm click Install để bắt đầu trình cài đặt - Quá trình cài đặt bắt đầu 10 Đăng ký thông tin cá nhân Click exit để hồn tất q trình cài đặt 39 Tạo layer mask: click phải lên layer chọn mask hay Modify/ Timeline/ Layer properties/ chọn mask hay 2.3 Hiệu chỉnh lớp mặt nạ Thêm bớt lớp bị che (Masked layer khỏi layer mask ) cách Drag layer vào Chỉnh sửa lớp mask lớp bị che: bỏ khoá layer, chọn outline để dễ quan sát phần bị che chỉnh sửa Lớp đường dẫn 3.1 ứng dụng lớp đường dẫn Lớp dẫn túy: dùng để xếp đối tượng Lớp dẫn chuyển động (liên kết với đối tượng lớp khác): dùng để làm hoạt hình đối tượng theo đường dẫn 3.2 Cách tạo lớp đường dẫn Tạo lớp dẫn túy: Click phải vào lớp chọn Guide Tạo lớp dẫn chuyễn động: Click phải vào lớp chọn Add Motion Guide 40 Hay click vào 3.3 Hiệu chỉnh lớp đường dẫn Các hiệu chỉnh lớp đường dẫn củng giống với lớp thường Ta dùng công cụ Pen Tool để vẽ đường chuyển động cho đối tượng Thực hành 4.1 Thiết lập lớp cửa sổ Timeline - Khởi động Macromedia Flash CS4 - Chọn Insert/ Timeline/ Layer để tạo số lượng lớp mong muốn - Để thiết lập lớp ta nhấp chọn vào lớp cần thiết lập 41 Hộp thoại xuất ta tiến hành thiết lập lớp 4.2 Tạo chuyển động cho máy bay B1: Tiến hành vẽ máy bay 42 B2: Click phải vào lớp chọn Add Motion Guide dùng pen tiến hành vẽ đường bay cho máy bay Và clich chuột vào Frame thứ 45 nhấn F6 B3: ta đặt máy bay vào đầu đường di chuyển cho trịn giửa máy bay nằm trùng đường dẫn click chuột vào frame 45 ấn F6 kéo máy bay đặt điểm dừng vị trí cuối đường dẫn trịn máy bay phải trùng đường dẫn Tiếp tục click phải vào đoạn Frame chọn Create Motion Tween 43 B4: Nhấn ctrl + Enter để kiểm tra Máy bay bay theo đường dẫn 4.3 Xây dựng phim hoạt hình nhỏ với thời gian phút dựa câu chuyện cổ tích Kiểm tra Tạo mạch điện: Sau giây khóa K đóng đèn cháy sáng Cháy giây đèn lại tắt Tạo chuyển động quay cho kim đồng hồ Trong vòng 12 giây phải quay vòng 44 Tạo chuyển động xe tải chạy thành phố bánh xe quay xe chuyển động (chú y tạo l lớp xe lớp background) Tạo biểu tượng electron chuyển động quỹ đạo (dùng lớp dẫn) Tạo cảnh tảng đá lăn từ đồi xuống chân đống rơm dừng hẳn - Thiết kế tranh đồng quê (đồi, nhà, cây, đống rơm, mây,….) - Tạo lớp dẫn chuyển động Dùng kĩ thuật lớp dẫn diễn tả cảnh đua xe lạng lách Dùng kĩ thuật lớp dẫn diễn tả cảnh bong bóng bay 45 BÀI : XÂY DỰNG CÁC ACTION Mã bài: M29-05 Mục tiêu: - Trình bày Action Flash; Vận dụng vào thiết kế đối tượng hoạt hình; Hình thành tác phong làm việc cơng nghiệp, tập thể Làm việc với nút 1.1 Cách tạo nút Vào Insert \ New Symbol \ 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 - Sử dụng button tạo sẳn vào Window/ Common Libraries/ Button 46 1.2 Các tính nút Khi ta nhấn vào nút thực hành động cho kiện 1.3 Gán Action cho nút Gán lệnh cho button: Có cách - Gán trực tiếp vào button: lệnh đặt button Nhập lệnh trực tiếp vào button (Event in button): Click chọn button gõ lệnh action panel - Gán thông qua tên instance nó: Lệnh đặt timeline button Gán lệnh qua tên instance button (Event in keyframe) Click chọn keyframe có button gõ lệnh action panel Xây dựng hoạt hình Action 2.1 Làm việc với cửa sổ Action Mở bảng điều khiển Action  C1: Window \ Action  C2: Ấn F9 2.2 Gán Action lên Frame Ta click phải vào Frame cần gán Action chọn Action 47 - Khung Action ta tiến hành gõ lệnh 2.3 Các cấu trúc Action - Cấu trúc câu lệnh Action gồm phần Key word (Event) { Actions} ; Tạm dịch : Từ khóa ( Sự kiện) { Hành động } ; Một câu lệnh thường kết thúc dấu ( ;) Nếu bạn thấy câu nằm sau dấu // xem phần thích + Đối với Action TimeLine bạn lệnh trực tiếp cho TimeLine thực hành động Frame mà bạn mong muốn, khơng cần thơng qua từ khóa hay kiện + Đối với Action nút ta thường có câu lệnh dạng on( Sự kiện) { hành động} ; tức sau kiện hành động {} thực + Đối với Action Movie Clip ta thường có câu lệnh dạng : onClipEvent ( Sự kiện) { Hành động} ; Thư viện Action 3.1 Nhóm Autoplay nextFrame: đến khung hình chạy từ prevFrame: quay lại khung hình sau chạy từ Nếu khung hình khung hình khơng làm nextScene(): đến khung hình cảnh chạy từ 48 prevScene(): đến khung hình cảnh trước chạy từ Play(): chạy tiếp từ frame Stop(): dừng lại frame 3.2 Nhóm KeyPress Lệnh Key Press kích hoạt action nhấn phím xác định Nếu bạn chọn tùy chọn này, bạn nhập vào tên phím hộp ký tự 3.3 Nhóm Goto gotoAndPlay ( frame): đến khung hình frame chạy tiếp từ khung hình gotoAndPlay (scene, frame): đến khung hình frame scene chạy tiếp từ gotoAndStop (frame): đến khung hình frame dừng lại gotoAndStop (scene, frame): đến khung hình frame cảnh scene dừng lại Thực hành 4.1 Tạo nút xây dựng Action nút Vào Insert \ New Symbol \ 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 - Sử dụng button tạo sẳn vào Window/ Common Libraries/ Button 49 Sau tạo xong nút ta click phải vào nút chon Action để tiến hành viết code 4.2 Dùng Action mô tượng tuyết rơi Bước Tạo file flash mới, nhấn Ctrl + J (Document Properties) thiết lập kích thước cho file flash cần tạo (kích thước nên trùng với ảnh bạn có) Chọn màu màu tối, thiết lập tốc độ Frame rate 27sau nhấn OK Chèn ảnh làm cho file flash Bước Chọn công cụ Oval Tool (O) Trong phần Colors Tool Panel, khóa màu Stroke lại cách kích vào biểu tượng bút chì nhỏ, chọn hình vng có đường chéo đỏ Thiết lập màu Fill color màu trắng vẽ sau: 50 Bước Trong chọn hình vừa vẽ, nhấn phím F8 (Convert to Symbol) để chuyển hình tròn vừa vẽ sang dạng Movie Clip Symbol Bước Trong chọn Movie Clip vừa tạo, vào phần Properties Panel phía cửa sổ làm việc Trong phần bên trái, phần Instance name nhập tên Movie Clip snow Bước Chọn công cụ Selection Tool (V) kích lần lên Movie Clip (hình trịn) để chọn Vào phần Action Script Panel (F9) nhập vào đoạn mã sau: onClipEvent (load) { movieWidth = 350; movieHeight = 263; i = 1+Math.random()*2; k = -Math.PI+Math.random()*Math.PI; this._xscale = this._yscale=50+Math.random()*100; this._alpha = 75+Math.random()*100; this._x = -10+Math.random()*movieWidth; this._y = -10+Math.random()*movieHeight; } onClipEvent (enterFrame) { rad += (k/180)*Math.PI; this._x -= Math.cos(rad); this._y += i; if (this._y>=movieHeight) { this._y = -5; } if ((this._x>=movieWidth) || (this._x