Bài giảng Giao trinh Flash co ban Cong ty Bach Kim

Cụng ty C phn Tin hc Bch Kim a ch: Phũng 502, tng 5, tũa nh HKC, 285 i Cn, H Ni in thoi: (04) 7624015, Fax: (04) 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn Giỏo trỡnh thc hnh Sử dụng các công cụ hỗ trợ thiết kế bài giảng điện tử H Ni - 2007 1 GIÁO TRÌNH MACROMEDIA FLASH 1. CÁC KHÁI NIỆM CƠ BẢN VỀ CHƯƠNG TRÌNH: 1.1 Giao diện chương trình và các panel • Stage (sân khấu) • Stage là vùng màn hình mà bạn vẽ vào và là vùng trình diễn khi phim đã được xuất bản. • Toolbox (hộp công cụ) • Toolbox bao gồm các công cụ vẽ hình, chỉnh sửa hình, xem hình… • Panels (bảng chức năng) • Các bảng (panel) của Flash giúp đỡ bạn những công việc xử lí các đối tượng trên sân khấu như căn chỉnh (Align), chỉnh kiểu màu (Color Mixer, Color Swatches), các phép biến hình: xoay hình, phóng to thu nhỏ… (Transform), … • Có thể cho gọi các bảng từ menu Window. • Timeline (bảng tiến trình) • Bảng tiến trình tổ chức và điều kiển về vấn đề thời gian cho phim. • Layers (các lớp) • Giúp tổ chức trật tự trên dưới của các đối tượng hình vẽ. • Library (thư viện). • Là nơi lưu trữ các tài nguyên của đoạn phim. • Properties (bảng thuộc tính). Cho ta biết thuộc tính của bộ phim (màu nền sân khấu, tốc độ hình ảnh, kích cỡ sân khấu, …), đối tượng hình ảnh (màu nét, màu nền, độ rộng nét .), các thông số trong các chuyển động (tốc độ nhanh dần hay chậm dần, quay theo chiều nào…). 2 Công ty Cổ phần Tin học Bạch Kim Địa chỉ: Phòng 502, tầng 5, tòa nhà HKC, 285 Đội Cấn, Hà Nội Điện thoại: (04) 7624015, Fax: (04) 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn 1.2 Các khái niệm cơ bản: 1.2.1 Giới thiệu về các thành phần của Timeline Frame: khung hình. Blank KeyFrame: trong Frame không chứa đối tượng nào (rỗng) KeyFrame: trong Frame có chứa đối tượng. Blank KeyFrame contain Action Script: Frame rỗng và có lệnh điều khiển. KeyFrame contain Action Script: Frame chứa đối tượng và lệnh điều khiển. 1.2.2 Giới thiệu về chức năng của 3 phím F5, F6 và F7: - 3 phím F5, F6 và F7 đều có 1 chức năng chung là nối dài Frame. Dưới đây là chức năng cụ thể của từng phím: - F5: Chỉ đơn thuần là nối dài Frame. - F6: nối dài Frame và tạo ra 1 KeyFrame giống hệt với KeyFrame ban đầu - F7: nối dài Frame và tạo ra 1 Blank KeyFrame 2. SỬ DỤNG CÔNG CỤ CƠ BẢN (Toolbar) 3 Chọn, chỉnh sửa hình và nét. Vẽ nét trực tiếp. Chọn, chỉnh sửa điểm. Vẽ màu trực tiếp. Vẽ đường thẳng. Các phép biến hình. Chọn miền màu. Tùy biến kiểu tô màu. Vẽ đường cong. Tạo nét viền. Đánh chữ. Đổ màu vào miền. Vẽ Elip. Công cụ hỏi màu. Vẽ hình chữ nhật. Tẩy xóa. Công ty Cổ phần Tin học Bạch Kim Địa chỉ: Phòng 502, tầng 5, tòa nhà HKC, 285 Đội Cấn, Hà Nội Điện thoại: (04) 7624015, Fax: (04) 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn 3. CÁC KỸ THUẬT TẠO HOẠT HÌNH CƠ BẢN: 1. Chuyển động 2. Biến hình 3. Mặt nạ 4. Nút điều khiển 3.1 Chuyển động và biến hình Nắm bắt được cách tạo chuyển động ta sẽ có thể áp dụng vào bài giảng để mô phỏng chuyển động của bàn tay, con dao rọc giấy, cái kéo, compa, thước kẻ… 3.1.1 Chuyển động đơn giản (Motion Tween) • Đầu tiên cần phải có đối tượng hình ảnh mà ta muốn cho nó chuyển động Ví dụ ta có ảnh một con thuyền . vào menu File/ Import . (Đối với hình ta tự vẽ thì phải chọn hình đó rồi nhấn F8 đưa nó thành dạng hình ảnh (Graphic)) • Vào menu Insert/ Convert to symbol, chọn kiểu Graphic. • Xác định vị trí ban đầu của con thuyền. • Trên bảng tiến trình đưa chuột đến Frame 30. Nhấn F6. • Xác định vị trí cuối cùng của con thuyền. • Đưa chuột đến frame 15. Nhấn phải chuột, chọn Create Motion Tween. 4 (*) Ứng dụng của Motion Tween: + Gia tốc trong chuyển động: Ease. - Ease từ 0 đến 100: chuyển động chậm dần đều. - Ease từ 0 đến -100: chuyển động nhanh dần đều. + Tạo chuyển động quay: Rotate. - CW (Clockwise): quay theo chiều kim đồng hồ. - CCW (Counter-Clockwise): quay ngược chiều kim đồng hồ. Công ty Cổ phần Tin học Bạch Kim Địa chỉ: Phòng 502, tầng 5, tòa nhà HKC, 285 Đội Cấn, Hà Nội Điện thoại: (04) 7624015, Fax: (04) 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn 3.1.2 Chuyển động theo quỹ đạo tùy ý (Motion Guide) • Về nguyên tắc thì tương tự như trên, chỉ khác là ta cần phải có một quỹ đạo. Ta tận dụng luôn ví dụ trên. • Nhấn chuột vào nút Add Motion Guider hoặc vào menu Insert/ Motion Guide để tạo ra một lớp chứa quỹ đạo. Lưu ý là lớp này luôn nằm trên lớp chứa hình chuyển động. • Trên lớp Guide, ta vẽ quỹ đạo chuyển động. Có thể dùng để vẽ nét bất kỳ, để vẽ những nét cong, viền nét của hình chữ nhật, viền nét của hình Elip . Vẽ xong quỹ đạo thì khóa lớp Guide này lại để tránh việc chọn nhầm hình sau này. • Trên Frame 1 layer 1, dùng chuột kéo con thuyền tới vị trí ban đầu trên quỹ đạo. Chú ý: kéo sao cho tâm hình xuất hiện một vòng tròn nhỏ bị dính vào quỹ đạo là được. • Tiếp theo ta xác định vị trí cuối cùng của con thuyền ở frame 30, cách làm tương tự. • Con thuyền đã chuyển động theo quỹ đạo. Nhưng là chuyển động tịnh tiến. Để cho giống thật, ta có thể cho con tàu chuyển động mà bụng tàu là tiếp tuyến của quỹ đạo (như hình vẽ). • Chọn frame 15 Layer 1, đánh dấu kích hoạt chức năng Orient to path trên bảng Properties. 5 • Chú ý: Tại khung đầu tiên và khung cuối cùng ta phải chỉnh cho bụng tàu có phương tiếp tuyến với quỹ đạo (dùng công cụ xoay Rotate and Skew) thì mới đảm bảo các thời điểm trung gian bụng tàu vẫn có phương tiếp tuyến. 3.1.3 Biến hình (Shape Tween) • Vẽ hình tròn tại frame 1, viền vàng, nền đỏ. • Chọn frame 30, nhấn F7. • Trong frame 30, vẽ một hình vuông viền tím, nền xanh. • Chọn vào frame 15. Trên bảng thuộc tính (Properties), chọn Shape trong menu thả Tween. Công ty Cổ phần Tin học Bạch Kim Địa chỉ: Phòng 502, tầng 5, tòa nhà HKC, 285 Đội Cấn, Hà Nội Điện thoại: (04) 7624015, Fax: (04) 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn 3.2 Hiệu ứng mặt nạ Hiệu ứng mặt nạ giúp tạo ra các hiệu ứng hình ảnh theo kiểu che khuất. Ta hay dùng hiệu ứng mặt nạ khi muốn che bớt các phần thừa của tranh ảnh, kết hợp với các chuyển động… Kỹ thuật mặt nạ có thể dùng để minh họa nước chảy trong ống, minh họa nhìn vào bên trong vật thể. • Đầu tiên ta cần phải có một hình ảnh để xử lý, ví dụ với ảnh hoa Tulip. Ta vào menu File/ Import hoặc nhấn Ctrl+R để đưa file ảnh vào trong Flash; đặt tên lớp (layer) là background. • Sau đó tạo một lớp mới (menu Insert/ Layer) để chứa mặt nạ và đặt tên là mask. Trên lớp mask ta vẽ một hình kín có màu nền tùy ý (màu nền không ảnh hưởng đến hiệu ứng). Ví dụ ta dùng công cụ để tạo ra hình tròn nền trắng. • Tiếp theo, dùng chuột chọn lớp mask rồi nhấn phải chuột chọn menu Mask. Thế là xong. 6 4. Nút điều khiển và kéo thả Các nút điều khiển được sử dụng để điều khiển một đoạn phim trong Flash, hay để nhảy giữa các khung hình trong bài giảng (mỗi khung hình chứa một trạng thái thể hiện của bài giảng). Không chỉ có chức năng điều khiển các nút còn có thể được kéo thả nữa… chức năng này rất hữu ích trong những bài học ghép hình. Công ty Cổ phần Tin học Bạch Kim Địa chỉ: Phòng 502, tầng 5, tòa nhà HKC, 285 Đội Cấn, Hà Nội Điện thoại: (04) 7624015, Fax: (04) 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn 4.1 Nút Play • Tạo một lớp mới để chứa nút. • Vào menu Windown/ Common Libraries/ Buttons, lúc này bảng Library- Button hiện ra, trong bảng này đã có sẵn rất nhiều loại nút, chỉ cần mở hộp nhóm nút và kéo ra ngoài nút mình muốn sử dụng. • Tiếp theo là đặt chức năng cho nút. Dùng chuột chọn nút, nhấn 7 F9. Bảng Actions hiện ra, mở mục Actions/ Movie Control, kích đúp chuột vào lệnh Play. • Để giữ cho nút luôn xuất hiện trong suốt đoạn phim, ta phải tạo ra chuỗi khung hình giống hệt khung hình 1 (đưa chuột đến thời điểm cuối của bộ phim, nhấn phải chuột, chọn Insert frame). • Trong khung hình 1 của lớp mới, nhấn F9 (hoặc vào menu Window/ Actions). Mở mục Actions/ Movie Control, kích đúp chuột hoặc kéo lệnh Stop vào phần soạn thảo. Mục đích của việc làm này là: cho đoạn phim dừng ngay từ khung hình đầu tiên để đợi ta ra lệnh bằng các nút khi mới vào chương trình. 4.2 Nút Stop Làm giống hệt phần 1, nhưng là chọn lệnh Stop. 4.3 Nút tua tiến • Làm giống hệt phần 1. • Tương tự, chọn lệnh Goto. Kích chọn vào chức năng Goto and stop, chọn Next frame trên menu Type. Công ty Cổ phần Tin học Bạch Kim Địa chỉ: Phòng 502, tầng 5, tòa nhà HKC, 285 Đội Cấn, Hà Nội Điện thoại: (04) 7624015, Fax: (04) 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn 4.4 Nút tua lùi Các bước làm tương tự phần 3. Chọn Previous Frame trên menu Type. 4.5 Nút nhảy đến một khung hình bất kỳ Các bước làm tương tự phần 3 và 4. Chọn Frame Number trên menu Type, nhập số của khung cần nhảy đến trong ô Frame. 8 4.6 Nút dùng để kéo thả • Ví dụ trong một bài giảng cần minh họa việc ghép các tam giác thành hình ngôi nhà. Trước hết ta cần phải có các mảnh ghép… • Nếu là các mảnh ghép giống nhau thì ta chỉ việc vẽ một lần rồi Copy và Paste ra thành nhiều bản. • Kế tiếp là phải chuyển mỗi mảnh thành một nút. Dùng chuột chọn lấy mảnh cần chuyển, nhấn F8 (hoặc menu Insert/ Convert to symbol) rồi chọn kiểu Button. • Và phải đặt tên cho mỗi mảnh… Trên bảng thuộc tính (Properties) ta đánh tên của mảnh đó vào vùng văn bản Instance Name. Ví dụ đặt tên là Manh1 • Cuối cùng là tạo chức năng cho nút. Chọn lấy mảnh vừa đặt tên, nhấn F9 để bảng Action hiện ra. • Trên bảng Action, click chuột vào nút View Options rồi chọn Expert Mode. Rồi nhập đoạn mã sau: on (press) { startDrag("Manh1"); } on (release) { stopDrag(); } • Làm tương tự đối với các mảnh khác, chú ý vì mỗi mảnh tên khác nhau nên khi nhập đoạn mã cũng phải thay đổi theo tên của mảnh đó. Lưu ý: Các mảnh sẽ không được hỗ trợ sai số khi người kéo đến vị trí cần đặt, vì vậy người dùng sẽ khó có thể ghép được một cách chuẩn xác các mảnh lại với nhau. Do đó chỉ nên áp dụng vào những bài học không cần sự chuẩn xác. Công ty Cổ phần Tin học Bạch Kim Địa chỉ: Phòng 502, tầng 5, tòa nhà HKC, 285 Đội Cấn, Hà Nội Điện thoại: (04) 7624015, Fax: (04) 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn 9 . (04) 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn 4.1 Nút Play • Tạo một lớp mới để chứa nút. • Vào menu Windown/ Common Libraries/ Buttons,. 7624015 E-mail: contact@bachkim.vn, Website: www.bachkim.vn 4.4 Nút tua lùi Các bước làm tương tự phần 3. Chọn Previous Frame trên menu Type. 4.5 Nút nhảy