Lưu ý: - Các thao tác thay đổi kích thước, làm méo hình, xoay hình bạn cũng có thể thực hiện một cách chính xác bằng cách vào menu Window → Transform phím tắt là Ctrl + T để xuất hiện bả[r]
(1)thùc hµnh kü n¨ng Sö DôNG C¸C PHÇN MÒM Hç TRî D¹Y HäC (2) THỰC HÀNH KỸ NĂNG SỬ DỤNG CÁC PHẦN MỀM HỖ TRỢ DẠY HỌC MỤC LỤC MỤC LỤC CHỦ ĐỀ CHỈNH SỬA ẢNH VỚI PHOTOSHOP Mục tiêu: Bài Cài đặt và khởi động Photoshop 7.0 Bài Thay đổi kích thước ảnh để đưa vào bài giảng, chia sẻ trên Internet Bài Quét (Scan) ảnh từ sách giáo khoa Bài Lồng ảnh vào khung Bài Ghép ảnh thỏ vào vườn hoa 11 Bài Thiết kế banner cho trang web trường 12 Bài Thêm các hiệu ứng hình ảnh cho banner 15 Bài Thêm hiệu ứng động cho banner phần mềm SWFText 17 Bài Tạo ảnh với suốt 22 Bài 10 Tạo ảnh GIF động với Adobe ImageReady 24 CHỦ ĐỀ TẠO ẢNH ĐỘNG VỚI MACROMEDIA FLASH 27 Mục tiêu: 27 Bài Cài đặt và khởi động 27 Bài Vẽ các hình tứ giác đặc biệt 28 Bài Tạo hiệu ứng mũi tên nhấp nháy trên đồ 32 Bài Mô tầu cập bến 36 Bài Mô viên bi lăn từ máng nghiêng xuống 39 Bài Mô ong bay 41 Bài Tạo hiệu ứng biến đổi các hình 44 Bài Mô cắt giấy dao 47 Bài Mô thí nghiệm thả giấy quỳ vào axit 49 Bài 10 Mô quan sát chiến hạm ống nhòm 53 Bài 11 Mô vẽ đường tròn compa 56 Bài 12 Mô chuyển động ô tô 59 Bài 13 Mô chuyển động lắc đơn 62 Bài 14 Mô chuyển động lắc lò xo 63 Bài 15 Tạo chuyển động sóng nước 65 Bài 16 Trò chơi xếp hình 67 Bài 17 Chọn ảnh phóng to 71 (3) CHỦ ĐỀ CHỈNH SỬA ẢNH VỚI PHOTOSHOP Mục tiêu: - Học viên có thể cài đặt phần mềm Photoshop 7.0 trên máy tính - Học viên sử dụng máy Scan để quét ảnh từ sách giáo khoa - Học viên có thể sử dụng phần mềm Photoshop để thay đổi kích thước, dung lượng, độ tương phản, sáng tối ảnh - Học viên có thể chèn thêm văn bản, hình ảnh, tạo các hiệu ứng hình ảnh cho các đối tượng quá trình chỉnh sửa ảnh Bài Cài đặt và khởi động Photoshop 7.0 Để có thể chỉnh sửa các file ảnh Photoshop bạn cần cài đặt phần mềm Photoshop trên máy tính máy tính mình Bước 1: Mở ổ đĩa CD phần mềm và chạy file cài đặt Setup.exe thư mục Adobe Photoshop 7.0 Bước 2: Nhấn Next, chọn ngôn ngữ US English nhấn tiếp Next Bước 3: Nhấn Accept, nhập các thông tin người sử dụng, nhấn Next hay Yes máy tính cài đặt xong Photoshop thì nhấn Finish để hoàn tất Bước 4: Nhấn đúp vào biểu tượng trên màn hình vào menu Start → Programs → Adobe Photoshop 7.0 để khởi động phần mềm (4) Bài Thay đổi kích thước ảnh để đưa vào bài giảng, chia sẻ trên Internet Một ảnh chụp máy ảnh số quét máy scan thường có kích thước và dung lượng lớn Việc đưa trực tiếp các ảnh đó vào bài giảng mình làm cho dung lượng bài giảng lớn theo, gây khó khăn việc chép chia sẻ trên Internet Để tránh điều đó, bạn nên dùng Photoshop để thu nhỏ và bỏ bớt phần thừa ảnh trước đưa vào bài giảng Bước 1: Mở file ảnh để chỉnh sửa Vào menu File → Open (phím tắt là Ctrl + O), chọn file ảnh cần đưa vào để chỉnh sửa và nhấn Open Bước 2: Xoay ảnh Nếu ảnh bạn chụp bị nghiêng, bạn hãy vào menu Image → Rotate Canvas → Abitrary, nhập góc cần xoay vào bảng Rotate Canvas và nhấn OK để xoay ảnh thẳng trở lại Lưu ý: Chọn CW là quay theo chiều kim đồng hồ, CCW là quay ngược chiều kim đồng hồ Bước 3: Cắt ảnh (5) Nhấn vào biểu tượng cắt ảnh Crop Tool trên hộp công cụ Tools bên trái màn hình (phím tắt là C), khoanh vùng ảnh cần sử dụng, di chuyển các ô vuông quanh vùng chọn để xác định chính xác vùng cần sử dụng Nhấn phím Enter để cắt bỏ phần ảnh bên ngoài vùng chọn Lưu ý: - Nếu thao tác sai, bạn có thể nhấn Ctrl + Z để hủy bỏ thao tác đó Để có thể hủy bỏ các thao tác từ trước nữa, bạn hãy vào menu Window → History để mở bảng History kéo thao tác sai vào thùng rác phía - Để lựa chọn chính xác vùng chọn, bạn có thể nhấn Ctrl + phím “+” để phóng to ảnh Nếu ảnh quá to, bạn cần quan sát phần bị khuất, bạn hãy giữ phím Space, trỏ chuyển thành hình bàn tay, bạn dùng chuột kéo ảnh để hiển thị phần cần quan sát Nhấn Ctrl + phím “ –” để thu nhỏ ảnh Bước 4: Thay đổi kích thước ảnh Vào menu Image → Image Size, nhập kích thước chiều rộng (chiều cao) vào ô “Width” (Height) và nhấn nút OK (6) Bước 5: Lưu file soạn thảo Vào menu File → Save as Mục Format, bạn chọn Photoshop (*.PSD; *.PDD), đặt tên file cần lưu là “dongho.psd”, chọn thư mục cần lưu và nhấn Save để lưu file soạn thảo Khi cần chỉnh sửa thêm bạn dùng đến file này Bước 6: Xuất file ảnh Vào menu File → Save for Web Chọn định dạng ảnh cần lưu là JPEG, Quality là 70%, nhấn Save, chọn đường dẫn, đặt tên file ảnh cần lưu là “dongho.jpg” và nhấn Save Bây bạn dùng file ảnh này để đưa vào bài giảng hay chia sẻ trên Internet Bài Quét (Scan) ảnh từ sách giáo khoa Khi soạn bài giảng điện tử, bạn cần lấy hình ảnh sách giáo khoa, sách tham khảo, báo, tạp chí, … để làm tư liệu, bạn có thể sử dụng máy quét ảnh (Scanner) để lấy ảnh vào máy tính Nếu máy tính bạn đã kết nối máy quét thì bạn có thể bỏ qua Bước Bước 1: Cài đặt Trình điều khiển (Driver) máy quét ảnh Ví dụ cài trình điều khiển máy quét Genuis HR-Slim 2400TA: Đưa đĩa cài đặt trình điều khiển máy quét ảnh (được kèm theo mua máy) vào ổ đĩa CD, chạy file (7) “Setup.exe”, chọn cài đặt trình điều khiển và phần mềm hỗ trợ máy quét ảnh và nhấn Next liên tục kết thúc Cắm dây nối máy quét ảnh với máy tính, đợi lát để máy tính nhận thiết bị Bước 2: Quét hình ảnh trên sách giáo khoa Chạy Photoshop, vào menu File → Import và chọn máy quét đã kết nối với máy tính (Nếu không thấy máy quét, bạn hãy tắt Photoshop và kiểm tra máy tính đã kết nối với máy quét chưa) Cửa sổ phần mềm hỗ trợ quét ảnh xuất hiện, bạn khoanh vùng chọn cần quét và nhấn Scan File ảnh quét và chuyển vào Photoshop để bạn chỉnh sửa Bước 3: Căn chỉnh ảnh vừa quét từ sách giáo khoa Nếu ảnh bị nghiêng, bạn hãy để xoay ảnh thẳng trở lại Cắt bỏ phần thừa ảnh, đặt lại kích thước ảnh cho hợp lý (8) Vào menu Image → Adjustments → Levels (phím tắt là Ctrl + L), kéo các hình tam giác để thay đổi độ sáng, tối, độ tương phản ảnh cho phù hợp Lưu ý: Để đơn giản, ta có thể dùng vào menu Image → Adjustments → Auto Levels Bước 4: Lưu ảnh Lưu file soạn thảo với tên “scan.psd” để có thể tiếp tục chỉnh sửa lần sau và xuất thành file ảnh với tên là “scan.jpg” Bài Lồng ảnh vào khung Bước 1: Mở file ảnh để chỉnh sửa Vào menu File → Open, giữ phím Ctrl, chọn file khung ảnh và file ảnh bạn cần ghép vào khung và nhấn Open Bước 2: Di chuyển ảnh vào khung ảnh Nhấn vào biểu tượng Move Tool kéo ảnh vào khung ảnh (9) Bước 3: Chỉnh sửa ảnh cho vừa khung ảnh Vào menu Edit → Free Transform, kéo các ô vuông viền ảnh để điều chỉnh kích thước ảnh to nhỏ lại cho phù hợp với khung ảnh nhấn Enter Chú ý kéo các ô vuông giữ phím Shift thì ảnh không bị méo Để nhìn thấy khung ảnh, bảng Layer chọn lớp chứa ảnh, Giảm Opacity Fill góc trên phải bảng xuống 70% cho ảnh mờ để nhìn thấy khung phía Nhấn vào biểu tượng Rectangular Marquee Tool trên hộp công cụ, khoanh lấy phần ảnh bên ngoài khung nhấn phím Delete để xóa Thực lại thao tác trên để xóa hết phần ảnh bên ngoài khung (10) Sau xóa phần ảnh nằm ngoài khung, ta lại đặt Opacity và Fill lại thành 100% Lưu ý: Bạn có thể xóa nhanh tất phần bên ngoài khung ảnh cách nhấn vào biểu tượng Rectangular Marquee Tool , khoanh vùng chọn là phần ảnh nằm khung, vào menu Select → Inverse nhấn phím Delete Bước 4: Thêm hiệu ứng hình ảnh cho ảnh Vào menu Filter → Artistic, chọn hiệu ứng để ảnh bạn làm từ các chất liệu khác 10 (11) Ảnh gốc Kiểu Graphic Pen Kiểu Note Paper Bước 5: Lưu ảnh Lưu file soạn thảo với tên “khung.psd” để có thể tiếp tục chỉnh sửa lần sau và xuất thành file ảnh với tên “khung.jpg” Bài Ghép ảnh thỏ vào vườn hoa Bước 1: Mở file ảnh để chỉnh sửa Vào menu File → Open, giữ phím Ctrl, chọn file ảnh vườn hoa và file ảnh thỏ và nhấn Open Bước 2: Xác định vùng chọn là thỏ Nhấn vào biểu tượng Polygonal Lasso Tool trên hộp công cụ, nhấn vào các điểm xung quanh thỏ để xác định vùng chọn là thỏ mà bạn định ghép Nếu bạn chọn điểm chưa chính xác, bạn có thể nhấn phím Backspace để xóa bỏ điểm vừa chọn Sau chọn đến điểm cuối cùng, nhấn Enter để đóng khung vùng lựa chọn Nếu điểm cuối trùng với điểm đầu tiên thì vùng chọn tự động đóng khung luôn 11 (12) Bước 3: Ghép thỏ vào vườn hoa Nhấn Ctrl + C, chọn ảnh vườn hoa nhấn Ctrl + V Vào menu Edit → Free Transform, thay đổi kích thước và di chuyển thỏ tới vị trí thích hợp nhấn Enter Chú ý kéo các điểm ô vuông để thay đổi kích thước, giữ phím Shift thì ảnh không bị méo Vào menu Image → Adjustments → Levels, kéo các hình tam giác để thay đổi mầu sắc thỏ cho phù hợp với vườn hoa Bước 6: Lưu ảnh Lưu file soạn thảo với tên “tho.psd” để có thể tiếp tục chỉnh sửa lần sau đồng thời xuất file ảnh hoàn chỉnh với tên “tho.jpg” Bài Thiết kế banner cho trang web trường Bước 1: Mở file ảnh để chỉnh sửa 12 (13) Vào menu File → Open, giữ phím Ctrl, chọn các file ảnh cần sử dụng banner (logo, ảnh trường, phong cảnh,…) và nhấn Open Bước 2: Định kích thước banner Nhấn vào ảnh nền, vào menu Image → Image Size, nhập 770 vào ô “Width” và nhấn nút OK để ảnh có độ rộng là 770 pixels Vào menu Image → Canvas Size, chọn đơn vị đo là Pixels và nhập 180 vào ô “Height”, nhấn OK và nhấn nút Proceed để ảnh có chiều cao là 180 pixels Bước 3: Ghép ảnh trường và logo trường vào banner Nhấn vào ảnh logo trường, nhấn vào biểu tượng Polygonal Lasso Tool trên hộp công cụ, xác định vùng chọn là hình logo trường nhấn vào biểu tượng Move Tool logo vào khung soạn thảo banner 13 và kéo (14) Tương tự, bạn chèn thêm hình ảnh ngôi trường vào banner thay đổi kích thước, xếp vị trí các đối tượng trên banner hợp lý Bước 4: Chèn văn vản vào banner Trên Nhấn vào biểu tượng văn Horizontal Type Tool tùy chọn Toolbar phía trên màn hình, chọn kiểu chữ, kích thước chữ, màu chữ nhấn lên ảnh và bắt đầu nhập nội dung Nhấn vào biểu tượng Move Tool trên hộp công cụ để kết thúc nhập văn và kéo đoạn văn đến vị trí phù hợp Thực lại các bước trên để thêm các đoạn văn khác 14 (15) Lưu ý: Trong số trường hợp bạn không nhập Tiếng Việt có dấu thì bạn hãy chép từ văn Word sang Còn bạn sử dụng Unikey thì trên bảng điều khiển Unikey, bạn nhấn “Mở rộng” và đánh dấu ô “Luôn sử dụng clipboard cho unicode” Bước 5: Lưu ảnh Lưu file soạn thảo với tên “banner.psd” để có thể tiếp tục chỉnh sửa lần sau đồng thời xuất file ảnh hoàn chỉnh với tên “banner.jpg” Bài Thêm các hiệu ứng hình ảnh cho banner Bước 1: Mở file soạn thảo Photoshop để tiếp tục chỉnh sửa Vào menu File → Open, chọn file banner.psd mà bạn đã thực hành Bài và nhấn Open Bước 2: Tạo hiệu ứng mờ dần cho lớp Vào menu Window → Layers để xuất bảng quản lý các lớp (Layers) bên trái trang soạn thảo Nhấn chọn lớp chứa hình ngôi trường để các thao tác có tác dụng lớp này Vào menu Layers → Add Layer Mask → Reveal All Nhấn vào biểu tượng chuyển màu Gradient Tool trên hộp công cụ, nhấn trên chọn kiểu chuyển màu là từ ngoài Radial Gradient 15 (16) tùy chọn Toolbar phía trên màn hình nhấn vào tâm ảnh ngôi trường kéo ngoài ảnh Vào menu Layers → Layer Mask → Apply để hoàn tất Bước 3: Tạo các hiệu ứng hình ảnh cho văn trên hộp Nhấn vào biểu tượng văn Horizontal Type Tool công cụ, bôi đen dòng chữ cần thêm hiệu ứng Vào menu Layer → Layer Style và chọn hiệu ứng cần tạo Thay đổi các thuộc tính hiệu ứng bảng Layer style cho phù hợp nhấn nút OK Nếu muốn dòng chữ cong, hay uốn lượn, bạn hãy nhấn vào biểu tượng Create Warped Text trên tùy chọn Toolbar phía trên màn hình, chọn kiểu uốn lượn nhấn OK Bước 4: Lưu ảnh Lưu file soạn thảo với tên “banner.psd” để có thể tiếp tục chỉnh sửa lần sau đồng thời xuất file ảnh hoàn chỉnh với tên “banner.jpg” 16 (17) Lưu ý: Photoshop cho phép quản lý đối tượng theo các lớp (Layer) khác Việc quản lý đối tượng theo các lớp giúp cho người sử dụng chỉnh sửa ảnh dễ dàng hơn, thao tác chỉnh sửa trên đối tượng thuộc lớp này không ảnh hưởng đến các đối tượng thuộc lớp khác Các thao tác quản lý lớp: - Kéo lớp lên trên, xuống để xếp thứ tự trên, - Nhấn vào biểu tượng mắt để ẩn, lớp tương ứng - Nhấn vào biểu tượng cái khóa để khóa, bỏ khóa lớp - Kéo lớp vào thùng rác phía để xóa bỏ lớp đó Bài Thêm hiệu ứng động cho banner phần mềm SWFText Sau đã tạo cho mình banner ưng ý, bạn có thể sử dụng phần mềm SWFText để thêm vào banner mình hiệu ứng động hay thêm vào banner mình nhạc yêu thích Bước 1: Cài đặt và khởi động phần mềm SWFText Mở đĩa CD, chạy file SWFTextv1.4.exe thư mục SWFText Nhấn Next liên tục quá trình cài đặt thành công Để khởi động SWFText, bạn vào menu Start → Programs → SWFText → SWFText Bước 2: Định kích thước banner Nhấn vào biểu tượng Movie, định Width là 770 và Height là 180 (vì bạn đã có file ảnh banner có kích thước là 770 x 180 pixels) 17 (18) Bước 3: Thêm ảnh và thêm hiệu ứng cho Nhấn vào biểu tượng Background hộp công cụ bên trái, nhấn chọn mục Image bảng bên phải Nhấn Browse, chọn file ảnh banner bạn đã có và nhấn Open Nhấn vào biểu tượng Background Effect hộp công cụ bên trái, chọn hiệu ứng mà bạn thích Nếu không thích có hiệu ứng bạn bỏ chọn Use Background Effect Bước 4: Thêm văn và thêm hiệu ứng cho văn Nhấn vào biểu tượng Font hộp công cụ bên trái, chọn các thuộc tính văn bản: 18 (19) - Font Name: Chọn kiểu font VN hay VNI - Color: Màu chữ - Alpha Transparency: Độ suốt chữ - Text Size: Cỡ chữ - Text Rotation: Xoay nghiêng chữ - Hoz Alignment: Căn theo chiều dọc: Chính (Center), Bên trái (Left), Bên phải (Right) - Ver Alignment: Căn theo chiều ngang: Chính (Middle), Phía trên (Top), Ở (Bottom) - Letter Width: Kéo dãn, thu hẹp chiều ngang chữ - Letter Height: Kéo cao lên làm thấp chiều cao chữ - Letter Space: Co ngắn, kéo dãn khoảng cách các chữ 19 (20) Nhấn vào biểu tượng Text, nhấn Add, nhập đoạn văn bạn cần thêm và nhấn OK Lưu ý: Phần mềm này hỗ trợ hiển thị Tiếng Việt có dấu tốt với các font chữ VN hay VNI, bạn nên dùng bảng mã TCVN3 (ABC) hay VNI Windows để gõ Tiếng Việt Trên bảng nhập văn có thể không hiển thị tốt Tiếng Việt, bạn yên tâm, trên banner bạn không vấn đề gì Nhấn vào biểu tượng Text Effect hộp công cụ, chọn hiệu ứng mà bạn thích Nếu không thích có hiệu ứng văn bạn bỏ chọn Use Text Effect Bước 5: Thêm nhạc cho banner Nhấn vào biểu tượng Sound hộp công cụ bên trái, nhấn chọn Play background music or sound in flash movie Nhấn vào nút Browse, chọn file nhạc MP3 hay WAV máy tính, nhấn OK 20 (21) Nếu bạn muốn nhạc chơi bao nhiêu lần thì bạn nhấn chọn mục Stop sound playing after specified loop times, chọn số lần chơi nhạc vào mục Loop time Nếu muốn nhạc chơi chơi lại mãi mãi thì bạn hãy bỏ chọn mục Stop sound playing after specified loop times Bước 6: Lưu file Sau đã thêm các hiệu ứng động cho banner mình, bạn xuất sản phẩm file Flash cách nhấn nút Publish phía cửa sổ chương trình,, nhấn chọn Save flash movie, nhấn OK Đặt tên file cần lưu là “banner.swf”, chọn thư mục để lưu file và chọn Save 21 (22) Bài Tạo ảnh với suốt Bạn cần tạo đoạn hoạt hình Flash ong bay vườn hoa, ảnh ong của bạn lại hình chữ nhật Làm nào để bạn có thể loại bỏ phần hình ảnh thừa bên ngoài ong? Photoshop có thể giúp bạn thực điều đó Bước 1: Mở file ảnh ong để chỉnh sửa Vào menu File → Open, chọn file ảnh ong và nhấn Open Bước 2: Xác định vùng chọn là ong , nhấn Nhấn vào biểu tượng Polygonal Lasso Tool vào các điểm quanh ong để xác định vùng chọn là ong (xem lại Bài 5: Ghép thỏ vào vườn hoa) Vào menu Edit → Copy Bước 3: Tạo file soạn thảo có suốt 22 (23) Vào menu File → New (phím tắt là Ctrl + N), mục Mode, bạn chọn RGB; mục Contents, bạn nhấn chọn Transparent để trang soạn thảo có suốt và nhấn OK Vào menu Edit → Paste Bước 4: Lưu ảnh Lưu file soạn thảo với “ong.psd” để tiếp tục chỉnh sửa lần sau Vào menu File → Save for Web Chọn định dạng ảnh cần lưu là PNG-24, nhấn Save, chọn đường dẫn, đặt tên file ảnh cần lưu là “ong.png” và nhấn Save Bây bạn dùng file ảnh suốt này đưa vào Macromedia Flash phần mềm Violet 23 (24) Bài 10 Tạo ảnh GIF động với Adobe ImageReady ImageReady là phần mềm cài đặt cùng với Photoshop Với ImageReady bạn hoàn toàn có thể tạo cho mình ảnh GIF động ưng ý Dưới đây là ví dụ tạo ảnh động các thao tác chuyền bóng tay cao Bước 1: Tạo file soạn thảo Khởi động ImageReady cách vào menu Start → Programs → Adobe ImageReady 7.0 Nếu bạn cửa sổ Photoshop thì bạn cần nhấn Ctrl + Shift + M Tại cửa sổ chương trình ImageReady, bạn vào menu File → New Đặt kích thước khung hình nhấn OK Bước 2: Đưa ảnh các tư vào soạn thảo Vào menu File → Place, chọn ảnh động tác 1, nhấn Open nhấn OK Tương tự vậy, bạn chèn tiếp động tác sau vào 24 (25) Bước 3: Tạo thêm các Frame tương ứng với các động tác Tại bảng Animation phía trang soạn thảo, bạn nhấn vào biểu tượng Duplicates current frame lần để tạo thêm Frame Nhấn vào Frame 1, trên bảng quản lý lớp (Layers) bên phải trang soạn thảo, bạn nhấn vào biểu tượng mắt các lớp chứa các động tác 2, 3, để ẩn các lớp này Thực tương tự với các Frame 2, 3, để Frame hiển thị động tác tương ứng 25 (26) Bước 4: Chọn thời gian cho các động tác Lần lượt nhấn vào chữ “0 sec” tương ứng Frame đặt thời gian xuất Frame đó Nếu tất các Frame bạn muốn để thời gian thì bạn hãy chọn tất các Frame cách nhấn vào Frame 1, giữ Shift và nhấn vào Frame cuối cùng Sau đó nhấn vào chữ “0 sec” và chọn thời gian xuất cho các Frame 26 (27) Bước 5: Lưu ảnh Vào menu File → Save Optimized Đặt tên cho ảnh, chọn thư mục lưu ảnh và nhấn Save CHỦ ĐỀ TẠO ẢNH ĐỘNG VỚI MACROMEDIA FLASH Mục tiêu: - Học viên có thể cài đặt phần mềm Macromedia Flash 8.0 trên máy tính - Học viên có thể vẽ hình bản, tô màu cho các hình vẽ, chỉnh, xếp các hình vẽ trên Macromedia Flash 8.0 - Học viên có thể xây dựng các đoạn mô đơn giản phục vụ cho việc xây dựng tư liệu dạy học Bài Cài đặt và khởi động Bước 1: Mở ổ đĩa CD và chạy file cài đặt Setup.exe thư mục Macromedia Flash Bước 2: Nhấn Next chọn “I accept the items in the licensce agreement” và nhấn Next chương trình cài đặt thành công Nhấn Finish để hoàn tất quá trình cài đặt 27 (28) Bước 3: Sau cài đặt phần mềm Macromedia Flash, bạn có thể khởi động chương trình các cách nhấn đúp vào biểu tượng màn hình (Desktop) hay vào menu Start → Flash Programs → Macromedia → Macromedia Flash Bài Vẽ các hình tứ giác đặc biệt Bước 1: Đặt kích thước cho đoạn mô Vào menu Modify → Document, định chiều rộng đoạn mô (width) là 550 pixels và chiều cao (height) là 400 pixels, màu (background color) là màu trắng Nhấn OK để cập nhật Bước 2: Vẽ hình chữ nhật Nhấn đúp vào chữ “Layer 1” bên trái trục thời gian (Timeline), đặt lại tên lớp “Layer1” là “chu_nhat” Tại công cụ (Tools) bên trái trang soạn thảo, nhấn vào biểu , nhấn chọn màu đen Nhấn tiếp vào biểu tượng Stroke color tượng Fill Color nhấn chọn không tô màu trên công cụ Vào Nhấn vào biểu tượng Rectangle Tool menu Windows → Properties → Properties (phím tắt là Ctrl + F3) để xuất bảng Properties phía trang soạn thảo Định độ dày nét (Stroke height) là 3, kiểu nét liền (Solid) 28 (29) Dùng chuột vẽ hình chữ nhật trên trang soạn thảo Bước 3: Điều chỉnh kích thước và vị trí hình chữ nhật Nhấn vào biểu tượng Free Transform Tool trên công cụ nhấn vào lớp (Layer) “chu_nhat” (hoặc khoanh vùng chọn hình chữ nhật vừa vẽ) để lựa chọn hình chữ nhật Kéo các chấm đen xung quanh hình chữ nhật để điều chỉnh kích thước Nhấn vào biểu tượng Selection Tool trên công cụ, đường viền hình chữ nhật chuyển thành lốm đốm trắng (nếu không có lốm đốm trắng thì bạn khoang vùng chọn hình chữ nhật) Di chuyển trỏ tới cạnh hình chữ nhật, trỏ xuất thêm mũi tên bốn chiều phía dưới, kéo hình chữ nhật tới vị trí nửa bên trái trang soạn thảo Bước 4: Vẽ hình vuông Nhấn vào biểu tượng Insert Layer phía tên lớp “chu_nhat” để thêm lớp mới, đặt tên lớp này là “hinh_vuong” Nhấn vào biểu tượng Rectangle Tool trên công cụ giữ Shift và vẽ hình vuông trên trang soạn thảo Tương tự Bước 3, bạn điều chỉnh kích thước (bạn kéo các chấm đen góc đồng thời giữ Shift để thay đổi kích thước thì đảm 29 (30) bảo là hình vuông), sau đó di chuyển hình vuông đến vị trí nửa bên trang soạn thảo Bước 5: Vẽ hình bình hành Nhấn vào lớp “chu_nhat” trên bảng danh sách lớp để lựa chọn hình chữ nhật, nhấn phải chuột vào phần nét hình và chọn Copy (phím tắt là Ctrl + C) Tạo thêm lớp đặt tên là “binh_hanh” nhấn Ctrl + V để chép hình chữ nhật sang lớp (lớp “binh_hanh”) Nhấn vào biểu tượng Free Transform Tool trên công cụ, di chuyển trỏ tới cạnh trên hình chữ nhật Khi trỏ chuyển thành mũi tên hai chiều thì bạn kéo cạnh hình chữ nhật lệch để hình bình hành Di chuyển hình bình hành đến vị trí nửa bên trên trang soạn thảo Bước 5: Vẽ hình thoi Tạo lớp đặt tên là “hinh_thoi” chép hình vuông từ lớp “hinh_vuong” sang lớp “hinh_thoi” bước Nhấn vào biểu tượng Free Transform Tool trên công cụ, di chuyển trỏ sát chấm đen góc trên bên phải hình vuông, trỏ chuyển thành mũi tên vòng cung thì bạn giữ Shift và xoay hình vuông góc 45o 30 (31) Nhấn vào khoảng trắng lại nhấn vào lớp “hinh_thoi” để lựa chọn hình vuông vừa xoay, kéo hạt đen phía trên xuống để hình thoi Di chuyển hình thoi đến vị trí nửa bên phải trang soạn thảo Lưu ý: - Các thao tác thay đổi kích thước, làm méo hình, xoay hình bạn có thể thực cách chính xác cách vào menu Window → Transform (phím tắt là Ctrl + T) để xuất bảng Transform bên phía phải trang soạn thảo Tại bảng này, bạn nhập giá trị vào các ô chiều ngang, chiều dọc, góc quay (Rotate), góc méo (Skew) nhấn Enter để thực - Để vẽ các đa giác đều, bạn nhấn và giữ chuột lúc vào biểu tượng Rectangle Tool , chọn PolyStar Tool Tại bảng Properties, nhấn chọn Option, chọn kiểu đa giác (polygon), nhập số cạnh đa giác, nhấn OK và tiến hành vẽ đa giác trên trang soạn thảo Bước 6: Lưu các hình ảnh đã vẽ Vào menu File → Save, nhấn vào biểu tượng Desktop, đặt File name là “tugiac.fla” nhấn Save để lưu file soạn thảo bạn lên màn hình máy tính Bạn dùng đến file để chỉnh sửa, thêm, bớt nội dung 31 (32) Nhấn tổ hợp phím Ctrl + Enter để xem lại kết mà bạn đã làm đồng thời là để xuất kết thành file chạy độc lập có tên “tugiac.swf” trên màn hình (thư mục mà bạn đã lưu file “tugiac.fla”) Bạn dùng file này để đưa vào bài giảng mình chia sẻ trên Internet Bài Tạo hiệu ứng mũi tên nhấp nháy trên đồ Bước 1: Tạo file Flash mới, kích thước mặc định là 550x400 Bước 2: Chèn đồ vào trang soạn thảo Nhấn đúp vào chữ “Layer 1” bên trái trục thời gian (Timeline), đặt lại tên lớp “Layer1” là “ban_do” Vào menu File → Import → Import to stage (phím tắt là Ctrl + I), chọn file đồ cần đưa vào trang soạn thảo và nhấn Open 32 (33) Gợi ý chỉnh đồ cân đối trên trang soạn thảo: - Vào menu Window → Align (phím tắt là Ctrl + K) để bảng Align nhấn chọn các biểu tượng To Stage, biểu tượng và biểu tượng Align vertical center Align horizontal center để đồ vào chính trang soạn thảo - Nhấn vào biểu tượng Free Transform Tool , giữ phím Shift đồng thời kéo hạt đen góc trên bên phải để điều chỉnh kích thước đồ vừa phủ kín trang soạn thảo Nhấn vào hình tròn trắng phía biểu tượng cái khóa lớp “ban_do” để khóa lớp đồ, tránh lựa chọn nhầm các thao tác sau Bước 3: Vẽ mũi tên Nhấn vào biểu tượng Insert Layer phía tên lớp “ban_do”để thêm lớp và đặt tên lớp này là “mui_ten” 33 (34) Trên công cụ, nhấn vào biểu tượng Stroke color và và chọn màu chọn màu đen, nhấn vào biểu tượng Fill color đỏ Nhấn vào biểu tượng Pen Tool , nhấn Ctrl + F3 để bảng Properties đặt độ dày nét là 3 Tiến hành vẽ mũi tên cách nhấn vào các điểm trên trang soạn thảo Gợi ý chỉnh sửa mũi tên cho vừa ý: - Nhấn vào biểu tượng Subselection Tool , nhấn vào nét mũi tên vừa vẽ kéo các nút ô vuông trên mũi tên để hình dạng đẹp và chính xác - Nếu thao tác sai, bạn có thể nhấn Ctrl + Z để thực lại Nếu cần quan sát kỹ chi tiết nào bạn nhấn Ctrl + phím “+” để phóng to hình (nhấn Ctrl + phím “-” để thu nhỏ) - Để mũi tên cong, bạn nhấn vào biểu tượng Selection Tool , di chuyển trỏ tới cạnh mũi tên cần làm cong, xuất thêm cung tròn phía trỏ, bạn kéo cạnh mũi tên đó lệch Bước 4: Tạo hiệu ứng nhấp nháy cho mũi tên trên công cụ, Nhấn vào biểu tượng Selection Tool khoanh vùng chọn là mũi tên vừa vẽ, nhấn phím F8, đặt tên Name là “quan_ta”, chọn Type là Movie clip nhấn OK 34 (35) Vào menu Edit → Edit in Place (hoặc click đúp vào hình, click phải chuột và chọn Edit in Place), nhấn vào Frame thứ lớp “Layer 1” nhấn phím F6, nhấn tiếp vào Frame thứ lại nhấn phím F6 Frame và Frame là các Keyframe (là Frame mà đó có thể thay đổi đối tượng khác so với các Frame trước đó) Nhấn trở lại Frame lớp “Layer 1”, nhấn bên ngoài mũi tên, nhấn vào phần bên mũi tên, nhấn Delete để xóa màu đỏ mũi tên Vào menu Edit → Edit Document (hoặc click đúp ngoài mũi tên), kéo mũi tên đến vị trí hợp lý nhấn tổ hợp phím Ctrl + Enter để xem lại kết mà bạn đã làm Bước 5: Tạo nhiều mũi tên nhấp nháy 35 (36) Sao chép (Copy, Paste) đối tượng mũi tên, xoay, đặt vị trí thích hợp để nhiều mũi tên quân ta nhấp nháy cùng lúc Bước 6: Tạo mũi tên quân địch Nhấn phải chuột vào mũi tên đã chép ra, chọn Duplicate Symbol, đặt tên là “quan_dich” Thay đổi màu mũi tên cách vào menu Edit → Edit in Place, nhấn vào Frame 1, nhấn vào biểu tượng Fill color, chọn màu đen (làm tương tự với Frame 9) Bước 7: Lưu phim Lưu file soạn thảo trên với tên “bando.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “bando.swf” Bài Mô tầu cập bến Bước 1: Chèn cảnh bến tàu và tàu vào trang soạn thảo Nhấn đúp vào chữ “Layer 1” bên trái trục thời gian (Timeline), đặt lại tên lớp “Layer1” là “ben” Vào menu File → Import → Import to stage, chọn ảnh cảnh bến tầu cần đưa vào trang soạn thảo và nhấn Open Căn chỉnh vị trí ảnh bến tầu phủ kín trang soạn thảo chọn khóa lớp “ben” lại, tránh lựa chọn nhầm các thao tác sau Tương tự, bạn tạo thêm lớp tên là “tau” đưa ảnh tàu vào trang soạn thảo Thay đổi kích thước tàu cho phù hợp và di chuyển nó tới vị trí đầu tiên đường chuyển động 36 (37) Bước 2: Tạo chuyển động cập bến cho tàu Nhấn vào Frame 90 trên trục thời gian (Timeline) lớp “ben” (Số Frame càng lớn thì thời gian chuyển động càng lâu) và nhấn phím F5 để chèn thêm Frame Nhấn vào Frame 90 trên trục thời gian lớp “tau” nhấn phím F6 để chèn KeyFrame Sau đó, di chuyển tàu thủy và đặt vào vị trí cuối cùng đường chuyển động (Giữ Shift để di chuyển theo phương ngang) Nhấn phải chuột vào Frame 45 (hay Frame hai Frame đầu và cuối) lớp “tau” và chọn Create Motion Tween Nhấn tổ hợp phím Ctrl + Enter để xem kết bạn vừa làm Lưu ý: - Để tầu thủy chuyển động chậm dần cập bến, bạn nhấn vào Frame 45 lớp “tau” Nhấn Ctrl + F3 để cửa sổ Properties mục Ease, bạn nhập 100 37 (38) - Để tăng tốc độ, bạn xóa bớt các Frame trên trục thời gian cách chọn Frame hai Frame đầu và cuối nhấn Shift + F5 Tương tự, để giảm tốc độ, bạn chọn vào Frame nhấn phím F5 để tạo thêm các Frame Các thao tác thêm xóa frame phải thực trên lớp “ben” và “tau” Bước 3: Tạo nút điều khiển cho đoạn mô Đoạn mô trên chạy chạy lại liên tục Bạn có thể tạo thêm nút Play để nhấn vào thì đoạn mô thực hiện, đồng thời sau tàu cập bến, đoạn mô không thực lại: Lần lượt Frame và Frame 90 lớp “tau”, nhấn F9 để cửa sổ Actions Frame và nhập vào đó câu lệnh: stop( ); để đoạn mô đầu tiên dừng Frame và sau thực xong dừng lại Frame 90 Tạo thêm lớp và đặt tên là “nut” Vào menu Window → Common Libraries → Buttons lúc này bảng Library - Button.fla Nhấn đúp chuột vào thư mục nút danh sách chọn nút phù hợp và kéo vào trang soạn thảo Nhấn vào nút vừa tạo, nhấn F9 đển cửa sổ Actions – Button và nhập vào đó lệnh điều khiển: on(release) { play(); } Nhấn tổ hợp phím Ctrl + Enter để xem kết Bước 4: Lưu hoạt cảnh 38 (39) Lưu file soạn thảo trên với tên “tau.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “tau.swf” Bài Mô viên bi lăn từ máng nghiêng xuống Bước 1: Vẽ máng lăn Nhấn đúp vào chữ “Layer 1” bên trái trục thời gian (Timeline), đặt lại tên lớp là “mang” Nhấn vào biểu tượng Line Tool đoạn thẳng làm máng lăn cho viên bi trên công cụ, vẽ hai Nhấn chọn khóa lớp “mang” tránh lựa chọn nhầm các thao tác sau Bước 2: Vẽ viên bi phía tên lớp “mang” Nhấn vào biểu tượng Insert Layer để tạo thêm lớp mới, đặt tên là “bi” Nhấn vào biểu tượng Stroke color chọn không vẽ đường viền trên công cụ, nhấn Nhấn tiếp vào biểu tượng Fill Color chọn kiểu tô Gradient , giữ Shift và vẽ Nhấn vào biểu tượng Oval Tool hình tròn trên trang soạn thảo để viên bi 39 (40) Nhấn vào biểu tượng Gradient Transform Tool , nhấn vào hình cầu vừa vẽ, kéo các nút tròn trắng để thay đổi mầu sáng, mầu tối trên hình cầu Bước 3: Tạo chuyển động lăn cho viên bi Nhấn phím F8, nhấn chọn Graphic và nhấn OK để chuyển hình vẽ thành đối tượng ảnh Nhấn vào Frame 60 các lớp “mang” nhấn phím F5 để chèn thêm Frame Tại Frame 30 và Frame 60 lớp “bi”, nhấn phím F6 để chuyển các Frame 30 và Frame 60 thành KeyFrame Nhấn vào biểu tượng Selection Tool , nhấn vào Frame di chuyển viên bi đến đỉnh máng nghiêng Tương tự, nhấn vào Frame 30, di chuyển viên bi đến cuối máng ngiêng Cuối cùng, nhấn vào Frame 60 và di chuyển viên bi đến cuối máng ngang 40 (41) Frame Frame 30 Frame 60 Nhấn phải chuột vào các Frame 15 và Frame 45 lớp “bi” chọn Creat Motion Tween Nhấn vào Frame 15 lớp “bi” Tại cửa sổ Properties phía trang soạn thảo: phần Ease, bạn nhập -100 để chuyển động trên máng nghiêng là chuyển động nhanh dần (nếu không thấy bảng Properties, bạn hãy nhấn tổ hợp phím Ctrl + F3) Nhấn tổ hợp phím Ctrl + Enter và bạn đã có đoạn hoạt hình hoàn chỉnh Bước 4: Tạo nút điều khiến cho đoạn mô và lưu phim Tại các Frame và Frame 60 lớp “bi”, bạn nhấn F9 và nhập lệnh “Stop();” vào cửa sổ Action Frame Tạo thêm lớp và đặt tên là “nut” Rồi làm tuonwg tự Bài 4: Mô tàu cập bến Lưu file soạn thảo trên với tên “bi.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “bi.swf” Bài Mô ong bay Bước 1: Chèn ảnh phong cảnh và ong vào trang soạn thảo Nhấn đúp vào chữ “Layer 1” bên trái trục thời gian (Timeline), đặt lại tên lớp “Layer1” là “hoa” Vào menu File → Import → Import to stage, chọn file ảnh phong cảnh vườn hoa cần đưa vào trang soạn thảo và nhấn Open Căn chỉnh vị trí ảnh phong cảnh phủ kín trang soạn thảo chọn khóa lớp “hoa”, tránh lựa chọn nhầm các thao tác sau 41 (42) Tương tự, bạn tạo thêm lớp tên là “ong” đưa ảnh ong vào trang soạn thảo Thay đổi kích thước ong cho phù hợp và di chuyển nó tới vị trí đầu tiên đường chuyển động Bước 2: Tạo chuyển động cho ong Chọn ong, nhấn F8, đặt tên Name là “ong”, chọn Type là Movie clip nhấn OK Nhấn vào Frame 60 lớp “hoa”, nhấn F5 Nhấn vào Frame 60 lớp “ong”, nhấn F6 Nhấn phải chuột vào Frame 30 lớp “ong”và chọn Create Motion Tween 42 (43) Nhấn nút Add Motion Guide để tạo lớp chứa quỹ đạo Đặt tên lớp này tên là “quy_dao” Chọn lớp “quy_dao” nhấn tiếp vào biểu tượng Pen Tool và vẽ quỹ đạo chuyển động Nhấn vào Frame 60 trên lớp “ong”, nhấn vào biểu tượng Selection Tool và di chuyển ong tới vị trí cuối quỹ đạo vừa vẽ cho tâm hình ong (có hình vòng tròn nhỏ) nằm trên quỹ đạo 43 (44) Nhấn vào Frame lớp “ong”, nhấn vào biểu tượng Free Transfrom Tool , xoay hình ong theo hướng đường dẫn Làm tương tự Frame 60 Frame Frame 60 Nhấn vào Frame 30 lớp “ong” và đánh dấu chọn ô Orient to path bảng Properties phía trang soạn thảo (nếu không thấy bảng Properties, bạn hãy nhấn Ctrl + F3) Nhấn tổ hợp phím Ctrl + Enter để xem kết Bước 3: Lưu hoạt cảnh Lưu file soạn thảo trên với tên “ong.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “ong.swf” Bài Tạo hiệu ứng biến đổi các hình Với các đối tượng hình vẽ (Shape), Flash có hỗ trợ tạo hiệu ứng chuyển đổi từ hình này sang hình khác Ví dụ để tạo hiệu ứng biến đổi hình tròn thành hình vuông chuyển thành chữ “A” chuyển thành dòng chữ “XIN CHÀO”, bạn thực sau: 44 (45) Bước 1: Vẽ hình tròn Trên công cụ, nhấn vào biểu tượng Oval Tool , nhấn và chọn màu đỏ, nhấn vào tiếp vào biểu tượng Stroke color biểu tượng Fill color và chọn màu vàng Nhấn Ctrl + F3 để bảng Properties đặt độ dày nét là giữ Shift và vẽ hình tròn trên trang soạn thảo Bước 2: Vẽ hình vuông Nhấn vào Frame 20 lớp “Layer 1”, nhấn F7 để tạo Blank Keyframe Trên công cụ, nhấn vào biểu tượng Rectangle Tool , nhấn tiếp vào biểu tượng Stroke color và chọn màu xanh và chọn màu xanh nhạt đậm, nhấn vào biểu tượng Fill color Giữ Shift và vẽ hình vuông trên trang soạn thảo Bước 3: Viết chữ A Nhấn vào Frame 40 lớp “Layer 1”, nhấn F7 để tạo Blank Keyframe Trên công cụ, nhấn vào biểu tượng Text Tool , nhấn Ctrl + F3 để xuất bảng Properties, chọn Font chữ là Arial, cỡ chữ là 80 đậm, màu chữ là màu tím Nhấn vào trang soạn thảo gõ chữ A Bước 4: Viết chữ XIN CHÀO 45 (46) Nhấn vào Frame 60 lớp “Layer 1”, nhấn F7 để tạo Blank Keyframe Tương tự Bước 3, bạn viết chữ XIN CHÀO Buớc 5: Chuyển đối tượng chữ viết thành hình vẽ (Shape) Nhấn vào Frame 40 lớp “Layer 1”, vào menu Modify → Break Apart (phím tắt Ctrl + B) để chuyển chữ “A” thành đối tượng hình vẽ (Shape) Nhấn vào Frame 60 lớp “Layer 1”, nhấn Ctrl + B hai lần để chuyển dòng chữ “XIN CHÀO” thành đối tượng Shape Bước 5: Tạo hiệu ứng biến hình Nhấn vào Frame 10 lớp “Layer 1”, nhấn Ctrl + F3 để bảng Properties Tại menu thả Tween, bạn chọn Shape Thực tương tự các Frame 30 và Frame 50 Bước 6: Tạo nút điều khiển và lưu phim Tạo nút điều khiển để bạn nhấn nút thì hình tròn bắt đầu biến thành hình vuông Đồng thời sau chuyển thành XIN CHÀO thì đoạn biến hình không thực lại Lưu file soạn thảo trên với tên “bienhinh.fla” nhấn Ctrl + Enter để xuất đoạn biến hình thành file chạy độc lập “bienhinh.swf” 46 (47) Bài Mô cắt giấy dao Bước 1: Vẽ tờ giấy Đặt lại tên cho lớp “Layer 1” là “giay” và vẽ tờ giấy hình chữ nhật màu đỏ Nhấn vào Frame 20 lớp “giay”, nhấn F6 Nhấn vào biểu tượng Line Tool và vẽ nét cắt trên tờ giấy Nhấn vào nét cắt vừa vẽ, nhấn phải chuột chọn Copy chọn khóa lớp “giay” để tránh chọn nhầm cho các thao tác sau Bước 2: Tạo hiệu ứng nét cắt dần để tạo thêm lớp thứ và Nhấn vào biểu tượng Insert Layer đặt tên là “net_cat” Nhấn phải chuột và trang soạn thảo, chọn Paste in Place để dán nét cắt vào đúng vị trí cũ 47 (48) Nhấn vào Frame 20 lớp “net_cat”, nhấn F6 Sau đó, quay trở lại Frame 1, chọn công cụ Select Tool chọn gần hết đường cắt và nhấn phím Delete để xóa đi, để lại điểm nhỏ đầu làm gốc Nhấn vào Frame 10 lớp “net_cat”, chọn mục Shape menu Tween bảng Properties để tạo chuyển động nét cắt (tới đây thử nhấn Ctrl + Enter để xem kết quả) Bước 3: Tạo chuyển động dao theo nét cắt Tạo thêm lớp thứ và đặt tên là “dao” Trên lớp này, bạn có thể vẽ hình tay cầm dao đưa hình dao vào cách chọn menu File → Import → Import to Stage Nhấn vào biểu tượng Free Transform Tool , chọn hình ảnh dao, kéo nút tròn trắng vào đầu mũi dao để chỉnh kích thước Di chuyển dao cho mũi dao trùng với điểm đầu đường cắt Chọn Frame 20, nhấn phím F6, di chuyển dao cho mũi dao trùng với vị trí cuối đường cắt Nhấn phải chuột vào Frame 10, chọn Create Motion Tween (Ctrl + Enter để xem thử) Bước 4: Tạo chuyển động hai mảnh giấy tách rời Mở khóa lớp “giay” và khóa lớp “dao” lại Nhấn vào Frame 20, chọn tờ giấy và nét cắt, nhấn Ctrl+C Nhấn vào Frame 21, nhấn F7, sau đó nhấn phải chuột vào khoảng trắng, chọn Paste in Place 48 (49) Chọn miếng giấy bên trái, nhấn phải chuột và chọn Cut Nhấn vào Frame 21 lớp “net_cat”, nhấn F7, nhấn phải chuột vào khoảng trắng chọn Paste in Place Nhấn vào Frame 40 lớp “giay”, nhấn F6 kéo miếng giấy bên phải dịch sang phải Nhấn phải chuột vào Frame 30, chọn Create Motion Tween Nhấn vào Frame 40 lớp “net_cat”, nhấn F6 kéo miếng giấy bên trái dịch sang trái Nhấn phải chuột vào Frame 30, chọn Create Motion Tween Bước 5: Tạo nút điều khiển và lưu phim Tạo nút điều khiển để bạn nhấn nút thì dao bắt đầu cắt đôi mảnh giấy Đồng thời sau hai miếng giấy tách thì đoạn mô không thực lại Lưu file soạn thảo trên với tên “catgiay.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “catgiay.swf” Bài Mô thí nghiệm thả giấy quỳ vào axit Bước 1: Vẽ thân ống nghiệm Nhấn đúp vào chữ “Layer 1” và đặt lại tên lớp “Layer1” là “ong_nghiem” Nhấn vào biểu tượng Stroke color , chọn màu đen Nhấn chọn không tô màu tiếp vào biểu tượng Fill Color trên công cụ Nhấn vào biểu tượng Rectangle Tool vẽ hình chữ nhật (thân ống nghiệm) trên trang soạn thảo Bước 2: Vẽ đáy ống nghiệm và mức axit 49 (50) Nhấn tiếp vào biểu tượng Oval Tool , giữ Shift và vẽ hình tròn bên và ngoài hình chữ nhật vừa vẽ Nhấn vào biểu tượng Selection Tool , khoanh vùng chọn là hình chữ nhật và hình tròn Vào menu Window → Align để xuất bảng Align bên phải trang soạn thảo nhấn vào các biểu tượng Match Width , Align horizontal center để chiều rộng hai hình và hai hình cùng nhận đường thẳng đứng làm trục đối xứng Khoanh vùng chọn là hình tròn, giữ Shift và di chuyển hình tròn lên trên cho cạnh đáy hình chữ nhật là đường kính hình tròn Nhấn chuột vùng trắng nhấn vào nửa trên đường tròn, nhấn phím Delete để xóa Tương tự, bạn xóa tiếp cạnh đáy hình chữ nhật Nhấn vào biểu tượng Line Tool , giữ Shift và vẽ đoạn thẳng (mức axit) nằm ngang cắt ống nghiệm Nhấn , chọn vào biểu tượng Fill Color màu xanh Nhấn tiếp vào biểu tượng Paint Bucket Tool nhấn vào phần ống nghiệm bên mức axit để tô màu xanh cho phần này Chọn và xóa nét xác định mức axit Bước 3: Vẽ miệng ống nghiệm Di chuyển trỏ đến cạnh trên hình chữ nhật, xuất thêm cung tròn phía 50 (51) trỏ, bạn hãy kéo cạnh hình chữ nhật lên chút để biến đoạn thẳng thành cung tròn Nhấn vào biểu tượng Subselection Tool (bên cạnh nút Selection Tool) nhấn tiếp vào miệng ống nghiệm (xuất các chấm trắng xung quanh ống nghiệm) Nhấn vào chấm trắng bên trái miệng ống nghiệm (xuất tiếp tuyến với miệng ống nghiệm điểm bạn vừa chọn) Bạn kéo chấm tròn đầu tiếp truyến này sang trái để tạo độ loe miệng ống nghiệm Thực các thao tác tương tự với điểm bên phải miệng ống nghiệm để miệng ống nghiệm hoàn chỉnh Bước 4: Vẽ mẩu giấy quỳ tím và axit ống nghiệm Tạo thêm lớp mới, đặt tên lớp này là “giay_quy” Tại công cụ (Tools) bên trái trang soạn thảo, nhấn vào biểu tượng Stroke color , nhấn chọn không vẽ màu nét tiếp vào biểu tượng Fill color nhấn chọn màu tím 51 Nhấn (52) Nhấn vào biểu tượng Rectangle Tool trên công cụ vẽ hình chữ nhật phía trên ống nghiệm Nhấn chọn biểu tượng Selection Tool kéo hai cạnh bên miếng giấy quỳ cong chút (Có thể xoay mẩu giấy chút cho giống thật) Khoanh vùng chọn ống nghiệm và mẩu giấy, vào menu Window → Align (phím tắt là Ctrl + K) để bảng Align nhấn chọn các biểu tượng To Stage , biểu để mẩu giấy và ống nghiệm vào tượng Align horizontal center trang soạn thảo Bước 5: Tạo chuyển động và hiệu ứng đổi màu cho mẩu giấy Trên trục thời gian (Timeline), nhấn vào Frame 60 lớp “ong_nghiem”, nhấn F5 Nhấn vào Frame 20 lớp “giay_quy”, nhấn F6 để chuyển Frame 20 này thành Keyframe Nhấn vào Frame 40 lớp “giay_quy”, nhấn F6 Giữ Shift và di chuyển mẩu giấy xuống đáy ống nghiệm Sau đó, bạn chuyển các Frame 41 và Frame 60 lớp “giay_quy” thành Keyframe Nhấn phải chuột vào Frame 10 lớp “giay_quy”, chọn Create Motion Tween và làm tương tự với Frame 30 Nhấn vào Frame nhấn vào mẩu giấy, bảng Properties (Nếu không thấy nhấn Ctrl + F3), mục Color bạn chọn là Alpha và định giá trị này là 0% để mẩu giấy xuất dần từ mờ đến rõ 52 (53) Nhấn vào Frame 50, bảng Properties, mục Tween bạn chọn là Shape Nhấn tiếp vào Frame 60 nhấn vào và chọn màu đỏ để mẩu giấy biểu tượng Fill color chuyển dần từ màu tím sang đỏ Bước 6: Tạo nút điều khiển và lưu phim Tạo nút điều khiển để bạn nhấn nút thì mẩu giấy xuất và rơi xuống ống nghiệm Đồng thời sau chuyển thành màu đỏ thì đoạn mô không thực lại Lưu file soạn thảo trên với tên “axit.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “axit.swf” Bài 10 Mô quan sát chiến hạm ống nhòm Bước 1: Vào menu Modify → Document, định chiều rộng (width) đoạn mô là 360 pixels và chiều cao (height) là 200 pixels, màu (Background color) đoạn mô là màu đen Bước 2: Tạo hiệu ứng mặt nạ Đổi lại tên lớp “Layer1” là “chien_ham”, chèn (Import) file ảnh chiến hạm vào trang soạn thảo, điều chỉnh kích thước phía tên lớp Nhấn vào biểu tượng Insert Layer “chien_ham” để tạo thêm lớp mới, đặt tên là “ong_nhom” 53 (54) Nhấn vào biểu tượng Stroke color và chọn không vẽ nét , nhấn vào biểu tượng Fill và chọn màu xanh color Nhấn vào biểu tượng Oval Tool , giữ Shift vẽ hình tròn, chép (copy) hình tròn đó và chỉnh vào chính trang soạn thảo tạo thành mặt ống nhòm Nhấn phải chuột vào lớp “ong_nhom” và chọn Mask (mặt nạ) Bước 3: Tạo hiệu ứng lia ống nhòm Nhấn vào biểu tượng cái khóa trên lớp “chien_ham” để mở khóa hai lớp “ong_nhom” và “chien_ham” Di chuyển ảnh chiến hạm phía trái trang soạn thảo, nhấn vào Frame 45 lớp “ong_nhom”, nhấn phím F5 Nhấn tiếp vào Frame 45 lớp “chien_ham”, nhấn phím F6 di chuyển ảnh phía phải trang soạn thảo cho phần cần quan sát bị che khuất mặt ống nhòm 54 (55) Frame Frame 45 Nhấn phải chuột vào Frame 20 lớp “chien_ham” và chọn Create Motion Tween để chuyển động ảnh từ trái sang phải trang soạn thảo Bước 4: Tạo hiệu ứng phóng to Nhấn vào Frame 90 lớp “ong_nhom”, nhấn phím F5 Nhấn tiếp vào Frame 90 lớp “chien_ham”, nhấn phím F6, sử dụng công cụ Free Transform Tool để phóng to ảnh chiến hạm Bước 5: Tạo nút điều khiển và lưu phim Tạo nút điều khiển để bạn nhấn nút thì bắt đầu lia ống nhòm, Nhấn nút lần thì bắt đầu phóng to ảnh Đồng thời sau phóng to ảnh thì đoạn mô không thực lại Lưu file soạn thảo trên với tên “ong_nhom.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “ong_nhom.swf” 55 (56) Lưu ý: Kỹ thuật trên gọi là mặt nạ Đây là kỹ thuật sử dụng nhiều xây dựng các đoạn mô Flash Bài 11 Mô vẽ đường tròn compa Bước 1: Vẽ đường tròn và xác định tâm đường tròn Đặt tên lớp đầu tiên là “duong_tron”, vẽ đường tròn, đường thẳng đứng và đường nằm ngang rời Chọn đường thẳng đứng, chọn menu Modify, chọn Group Chọn đường thẳng ngang, chọn menu Modify, chọn Group Chọn đối tượng, nhấn Ctrl + K để mở bảng Align nhấn vào biểu tượng Align Horizontal Center nhấn tiếp vào biểu bảng tượng Align Vertical Center Align để xác định tâm hình tròn Bước 2: Tạo chuyển động quay compa Tạo thêm lớp tên là “compa” và chọn đưa ảnh compa vào trang soạn thảo, nhấn F8 và chuyển đổi nó sang dạng Graphic Nhấn vào biểu tượng Free Transform Tool , nhấn vào compa, di chuyển nút tròn trắng (tâm xoay) trùng với đầu cố định compa Thay đổi kích thước, vị trí compa để đầu compa (trùng với tâm xoay) vào tâm đường tròn, đầu còn lại nằm trên đường tròn 56 (57) Tâm xoay đối tượng trùng với đầu compa Vị trí đặt compa trên đường tròn vừa vẽ Chọn và xóa hai đường thẳng Nhấn vào Frame 20 lớp “duong_tron”, nhấn phím F5 Nhấn vào Frame 20 lớp “compa”, nhấn phím F6 Chọn công cụ Free Transform Tool, di chuyển trỏ tới cạnh bên trái hình chữ nhật bao quanh compa, thấy xuất mũi tên hai chiều thì kéo dịch xuống chút Chọn Frame 10 lớp “compa”, nhấn F6 Tiếp theo, kéo hạt đen cạnh bên trái sang phía phải để lật đầu vẽ compa cho chạm vào mép đường tròn bên phải Lần lượt nhấn phải chuột vào Frame 5, Frame 15 và chọn Create Motion Tween Bước 3: Tạo hiệu ứng compa quay đến đâu, đường tròn xuất đến đó Tạo lớp đặt tên là “mat_na” nằm lớp “duong_tron” và lớp “compa” Nhấn phải chuột vào lớp “mat_na”, chọn Mask 57 (58) Chọn khóa lớp “compa” và bỏ khóa lớp “mat_na” nhấn vào Frame lớp “mat_na”, vẽ hình chữ nhật có thể che kín nửa trên đường tròn Đặt hình chữ nhật cho góc bên phải chạm vào đầu xoay compa Nhấn vào Frame 10, nhấn phím F6 kéo hình chữ nhật sang phải để nó che kín nửa trên đường tròn Chọn phải chuột vào Frame và chọn Create Motion Tween Nhấn vào Frame 11 lớp “mat_na”, nhấn phím F7, vẽ hình chữ nhật che kín nửa trên đường tròn, vẽ tiếp hình chữ nhật khác có thể che kín đường tròn Di chuyển hình chữ nhật này cho cạnh bên trái nó tiếp xúc với đường tròn Nhấn vào Frame 20, nhấn phím F6 và kéo hình này sang trái cho nó che hết toàn đường tròn Nhấn phải chuột vào Frame 15 và chọn Creat Motion Tween Bước 4: Lưu phim Lưu file soạn thảo trên với tên “compa.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “compa.swf” 58 (59) Bài 12 Mô chuyển động ô tô Bước 1: Chèn cảnh, ô tô, bánh xe ô tô vào trang soạn thảo Đặt lại tên lớp đầu tiên là “nen”, vào menu File → Import → Import to stage, chọn file ảnh phong cảnh cần đưa vào trang soạn thảo và nhấn Open Căn chỉnh vị trí ảnh phong cảnh chọn khóa lớp “nen” lại Tương tự, tạo lớp đặt tên là “oto” chèn file ảnh ô tô và bánh xe ô tô vào trang soạn thảo Chú ý: ảnh ô tô nên là dạng ảnh PNG có xung quanh suốt Nếu không suốt, bạn phải chọn ô tô, nhấn F8 để tạo thành movieclip, click đúp vào ô tô, sau đó dùng kỹ thuật mặt nạ (xem Bài 9) để làm các vùng thừa xung quanh Bước 2: Tạo movieclip ô tô có bánh xe quay Nhấn phải chuột vào bánh xe ô tô, chọn Cut Nhấn chuột chọn ô tô, nhấn F8, đặt Name là “oto”, Type là Movie clip nhấn OK Vào menu Edit → Edit in Place (hoặc nhấn đúp vào ô tô) để chọn sửa movieclip ô tô, nhấn phải chuột, chọn Paste để đưa bánh xe vào movie “oto” Nhấn F8, đặt Name là “banhxe”, Type là Movieclip nhấn OK 59 (60) Vào menu Edit → Edit in Place để chọn sửa movieclip bánh xe Nhấn vào Frame 15 lớp Layer 1, nhấn F6 Nhấn phải chuột vào Frame 10, chọn Create Motion Tween Nhấn Ctrl + F3 để bảng Properties phía dưới, định Rotate là CW (quay theo chiều kim đồng hồ) Lưu ý: Để bánh xe quay không bị giật, bạn nhấn vào Frame 15, nhấn F9 để bảng Actions – Frame và nhập vào đó câu lệnh: gotoAndPlay(1); Click đúp vùng ngoài bánh xe (hoặc click vào chữ oto danh sách Scene1 - oto - banhxe phía trên Timeline) để thoát khỏi movieclip bánh xe và chỉnh sửa movieclip ô tô Nhấn vào biểu tượng Free Transform Tool , chọn thay đổi kích thước và di chuyển movieclip “banhxe” vào vị trí bánh trước xe ô tô Nhấn phải chuột vào movie “banhxe” chọn Copy, nhấn phải chuột vào khoảng trắng chọn Paste Di chuyển movie vừa sinh tới vị trí bánh sau xe ô tô Vào menu Edit → Document để thoát khỏi movie “oto” (hoặc click đúp ngoài ô tô) Bước 3: Tạo chuyển động ô tô lăn bánh trên đường , chọn thay đổi Nhấn vào biểu tượng Free Transform Tool kích thước và di chuyển movie “oto” phía trái trang soạn thảo 60 (61) Nhấn vào Frame 150 lớp “nen”, nhấn F5, nhấn tiếp vào Frame 150 lớp “oto”, nhấn F6 và di chuyển movie “oto” sang bên phải trang soạn thảo Nhấn phải chuột vào Frame 75 lớp “oto”, chọn Create Motion Tween Bước 4: Lưu phim Lưu file soạn thảo trên với tên “oto.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “oto.swf” 61 (62) Bài 13 Mô chuyển động lắc đơn Bước 1: Vẽ lắc Đặt tên lớp đầu tiên là “con_lac” Vẽ lắc đơn công cụ Line Tool và Oval Tool Chọn lắc đơn, nhấn phím F8, chọn Movie clip, nhấn OK Nhấn đúp vào lắc để chỉnh sửa Movie lắc, kéo lắc cho đầu dây treo trùng với tâm Movie là dấu “+” màu đen (điểm có tọa độ (0, 0)) Bước 2: Tạo chuyển động cho lắc Chọn Frame lớp “Layer 1”, nhấn F9 để bảng Action Frame nhập vào đó các lệnh sau: f = 1; // tần số A = 10; //biên ñộ onEnterFrame = function() { var t = getTimer()/1000.0; var w = 2*Math.PI*f; _rotation= A*Math.sin(w*t); } Lưu ý: Các bạn có thể thay đổi các giá trị f và A để kết theo ý muốn Ngôn ngữ lập trình trên gọi là Action Script Bước 3: Lưu đoạn mô Lưu file soạn thảo trên với tên “conlac.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “conlac.swf” 62 (63) Bài 14 Mô chuyển động lắc lò xo Với cách làm tương tự bài trên, bạn có thể tạo đoạn mô dao động lắc lò xo cách vẽ cái lò xo, chuyển lò xo thành Movie clip và để thuộc tính chiều cao Movie clip (_height) thay đổi theo phương trình dao động điều hòa Tuy nhiên, làm nét vẽ lò xo bị biến đổi dày, mỏng theo thời gian tạo cảm giác không giống thật Để khắc phục điều này, bạn có thể dùng lệnh Action Script để vẽ lắc lò xo Bước 1: Tạo các ô để thay đổi các giá trị đặc trưng Đổi tên lớp đầu tiên thành “giatri”, sử dụng công cụ Text Tool để viết các ô văn “lo :”, “f :”, “A :” Sau viết ô văn trên, bạn tạo thêm ô văn “100”, trên bảng Properties, bạn chọn Input Text menu thả Text Tool, đặt Instance Name là “dodai_txt” và nhấn chọn biểu tượng Show boder around text Tương tự bạn tạo thêm ô Input Text là “1” và “15” Vào menu Window → Common Libraries → Buttons, lúc này bảng Library - Button.fla Chọn nút phù hợp và kéo vào trang soạn thảo Nhấn Ctrl + F3 để bảng Properties và đặt Instance Name cho nút là “thaydoi_btn” Sắp xếp vị trí các ô văn cho phù hợp 63 (64) Bước 2: Vẽ lắc Tạo thêm lớp tên là “conlac”, nhấn vào Frame 1, nhấn F9 để bảng Action - Frame và nhập vào đó các lệnh sau: var var var var var var lo = 100; // ñộ dài tự nhiên lò xo b = 15; // ñộ rộng lò xo n = 10; // số vòng lò xo d = 35; // ñường kính nặng f = 1; // tần số dao ñộng A = 15; // biên ñộ dao ñộng thaydoi_btn.onRelease = function() { var tmp = parseInt(dodai_txt.text); if (!isNaN(tmp)) lo = tmp; ve_lo_xo(lo); x0 = loxo._height; tmp = parseInt(tanso_txt.text); if (!isNaN(tmp)) f = tmp; tmp = parseInt(biendo_txt.text); if (!isNaN(tmp)) A = tmp; } var loxo:MovieClip = _root.createEmptyMovieClip("loxo", 0); loxo._x = Stage.width/2; function ve_lo_xo(lo:Number) { loxo.clear(); loxo.lineStyle(2, 0, 100); for (var i = 0; i<2*n; i++) { loxo.lineTo((i%2*2-1)*b, (i+0.5)*lo/(2*n)); } 64 (65) loxo.lineTo(0, lo); loxo.lineTo(0, lo + 30); loxo.lineStyle(d, 0, 100); loxo.lineTo(0, lo + 30.5); } ve_lo_xo(lo); var x0 = loxo._height; onEnterFrame=function() { var t = getTimer()/1000.0; var w = 2*Math.PI*f; ve_lo_xo(x0 + A*Math.sin(w*t)); } Bước 3: Lưu đoạn mô Lưu file soạn thảo trên với tên “loxo.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “loxo.swf” Bài 15 Tạo chuyển động sóng nước Bước 1: Vẽ bóng trên mặt sóng Vào menu Modify → Document (phím tắt là Ctrl + J), nhập chiều rộng (width) file soạn thảo là 500 pixels và chiều cao (height) là 200 pixels Vào menu Insert → New Symbol (phím tắt là Ctrl + F8), chọn loại (Type) là Movie clip, đặt tên cho Movie clip (Name) là “Ball Movie” Nhấn tiếp vào nút Advanced, nhấn chọn Export for ActionScript và Export in first frame nhấn OK 65 (66) để Sử dụng công cụ Oval Tool bóng Dùng công cụ Selection Tool , khoanh chọn đoạn sóng vừa vẽ, mở bảng Properties (nhấn Ctrl + F3), đặt kích thước cho bóng có đường kính là 15 pixels cách nhập 15 vào các ô W: và H: bảng Properties nhấn Enter Mở bảng Align (nhấn Ctrl + K), chọn bóng vào chính trang soạn thảo Bước 2: Tạo chuyển động sóng Nhấn Ctrl + E để thoát khỏi movie “Ball Movie”, nhấn vào Frame lớp “Layer 1”, nhấn F9 để bảng Action - Frame nhập vào đó các lệnh sau: 66 (67) var n = 15; // thay ñổi số bóng var h = 10; // thay ñổi ñộ cao sóng var v = 20; // thay ñổi vận tốc sóng function DrawWave() { Ball.clear(); Ball.beginFill(0x77A7FF, 50); var d:Number = 550 / n; Ball.moveTo(-0.5*d, 250); for (i = 0; i < n+2; i++) { var obj = Ball["movBall" + i]; var angle = (getTimer() / (v * 100) - i / 10) * * Math.PI; obj._x = -0.5*d + Math.cos(angle) * + i * d; obj._y = 100 + Math.sin(angle) * h; Ball.lineTo(obj._x, obj._y); } Ball.lineTo((n+2)*d + Math.cos(angle) * 5, 250); updateAfterEvent(); } var Ball:MovieClip = this.createEmptyMovieClip("Ball", 0); for (i = 0; i < n+2; i++) { Ball.attachMovie("Ball Movie", "movBall" + i, i); } Mask = this.createEmptyMovieClip("Mask", 1); Mask.beginFill(0x333333); Mask.lineTo(550, 0); Mask.lineTo(550, 200); Mask.lineTo(0, 200); Mask.endFill(); Ball.setMask(Mask); setInterval(DrawWave, 40); Bước 3: Lưu phim Lưu file soạn thảo trên với tên “song.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “song.swf” Bài 16 Trò chơi xếp hình Bước 1: Vẽ khung để đặt các miếng ghép 67 (68) Đặt kích thước trang soạn thảo đúng kích thước ảnh cần ghép (VD: 550 x 400 pixels) Đặt tên lớp đầu tiên là “bang” nhấn vào biểu tượng Line Tool , vẽ bốn đường thẳng đứng và bốn đường nằm ngang tác rời nhau, bên ngoài trang soạn thảo hình bên Chọn bốn đường thẳng nằm ngang, nhấn Ctrl + K để bảng Align, nhấn chọn biểu tượng To stage nhấn vào các biểu tượng Match width, Space evenly vertically và Align horizontal center Chọn bốn đường thẳng đứng, trên bảng Align, nhấn vào các biểu tượng Match height, Space evenly horizontally và Align vertical center Chọn khung vừa vẽ được, nhấn Ctrl + T để bảng Transform, nhấn chọn Constrain, chọn kích thước 60% nhấn Enter để thay đổi Nhấn Ctrl + C để chép bảng vừa vẽ nhấn vào biểu tượng mắt ngang với tên lớp “bang” để ẩn lớp bảng này Bước 2: Chèn và chia ảnh thành nhiều miếng ghép 68 (69) Tạo thêm lớp tên là “anh”, vào menu File → Import → Import to stage, chọn file ảnh cần ghép và nhấn Open Căn chỉnh ảnh vào chính trang soạn thảo để ảnh vừa phủ kín trang soạn thảo và trên bảng Transform chọn thu nhỏ ảnh còn lại 60% Nhấn chọn ảnh, vào menu Modify → Break Apart (phím tắt là Ctrl + B) để chuyển ảnh từ dạng Bitmap thành dạng Shape Nhấn phải chuột vào khoảng trắng và chọn Paste in Place để chéo khung từ lớp “khung” sang lớp “anh” Khung này chia ảnh thành phần Nhấn chuột vào khoảng trắng kéo các miếng ghép tách rời bên ngoài khung xóa các khung Sao chép khung từ lớp “khung” Các miếng ghép kéo sang lớp “anh” ngoài khung Bước 3: Chuyển các miếng ghép thành các nút có thể di chuyển 69 (70) Chọn ẩn lớp “anh” và cho thị lớp “khung”, chọn khung nhấn F8, chọn Type là Movie clip và đặt tên (Name) cho Movie clip là “khung” Nhấn Ctrl + F3 để bảng Properties Đặt Instance Name cho Movie clip này là “khung_mc” Cho hiển thị lớp “anh”, nhấn chọn miếng thứ hàng 1, nhấn F8, đặt Name là “mieng11”, Type là Button nhấn OK Mở bảng Properties (nhấn Ctrl + F3), đặt Instance Name là “b11” Tương tự, chuyển các miếng thành các nút có thể di chuyển có các Instance Name tương ứng là b12, b13, b21, b22, b23, b31, b32, b33 Tạo thêm lớp đặt tên là “lenh” Nhấn vào Frame lớp “lenh”, nhấn F9 để bảng Action - Frame và nhập vào đó các lệnh sau: var cot:Number = 3; var hang:Number = 3; for (var i:Number = 1; i <= hang; i++) { for (var j:Number = 1; j <= cot; j++) { var mc:MovieClip = _root["b"+i+j]; mc.onPress = function():Void { stopDrag(); startDrag(this, false); } mc.onRelease = mc.onReleaseOutside = function():Void { 70 (71) stopDrag(); var toa_do_cot:Number = Math.round((this._x khung_mc._x) / this._width); var toa_do_hang:Number = Math.round((this._y khung_mc._y) / this._height); this._x = khung_mc._x + toa_do_cot * this._width; this._y = khung_mc._y + toa_do_hang * this._height; } } } Bước 4: Xáo trộn vị trí các miếng ghép và lưu phim Sắp xếp lại vị trí các miếng ghép Lưu file soạn thảo trên với tên “ghephinh.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “ghephinh.swf” Bài 17 Chọn ảnh phóng to Bước 1: Chèn các ảnh vào trang soạn thảo Đặt lại tên lớp đầu tiên là “anh”, vào menu File → Import → Import to stage, chọn các file ảnh cần đưa vào trang soạn thảo và nhấn Open Sử dụng công cụ Free Transfrom Tool thước và vị trí ảnh hình sau: 71 để chỉnh kích (72) Lần lượt chuyển các ảnh thành các Movie clip với các Instance Name tương ứng là “anh1_mc”, “anh2_mc”, Bước 2: Tạo hiệu ứng phóng to Tạo thêm lớp đặt tên là “dieu_khien” Nhấn vào Frame lớp “dieu_khien”, nhấn F9 để bảng Action - Frame nhập vào đó các lệnh sau: var arr:Array = [anh1_mc, anh2_mc, anh3_mc, anh4_mc]; var dang_chay:Boolean = false; for (var i:Number = 0; i < arr.length; ++i) { var mc:MovieClip = arr[i]; mc.x = mc._x; mc.y = mc._y; mc.w = mc._width; mc.h = mc._height; var ratio1:Number = Stage.width/mc._width*100; var ratio2:Number = Stage.height/mc._height*100; mc.target_scale = Math.min(ratio1, ratio2); 72 (73) mc.onRelease = anhbe; } function anhbe():Void { if (dang_chay) return; this.target_x = (Stage.width - this._width * this.target_scale / 100) / 2; this.target_y = (Stage.height - this._height * this.target_scale / 100) / 2; this.swapDepths(this._parent.getNextHighestDepth()); dang_chay = true; this.onEnterFrame = phongto; } function anhto():Void { if (dang_chay) return; this.target_x = this.x; this.target_y = this.y; dang_chay = true; this.onEnterFrame = thunho; } function phongto():Void { this._x += (this.target_x - this._x) / 3; this._y += (this.target_y - this._y) / 3; this._xscale += (this.target_scale this._xscale) / 3; this._yscale = this._xscale; if (this._xscale >= this.target_scale - 1) { delete this.onEnterFrame; dang_chay = false; 73 (74) this.onRelease = anhto; } } function thunho():Void { this._x += (this.target_x - this._x) / 3; this._y += (this.target_y - this._y) / 3; this._xscale += (100 - this._xscale) / 3; this._yscale = this._xscale; if (this._xscale <= 101) { delete this.onEnterFrame; dang_chay = false; this.onRelease = anhbe; } } Nhấn Ctrl + Enter để xem kết Bạn nhấn vào ảnh nhỏ nào thì ảnh đó phóng to đầy cửa sổ Nhấn vào ảnh to thì ảnh thu nhỏ lại Lưu ý: Nếu bạn có nhiều ảnh thì bạn làm tương tự và khai báo thêm vào dòng lệnh điều khiển đầu tiên: var arr:Array = [anh1_mc, anh2_mc, anh3_mc, anh4_mc]; các Instance Name các Movie mà bạn thêm vào Ví dụ, bạn có ảnh và bạn đã chuyển ảnh đó thành các Movie clip có Instance Name tương ứng là anh1_mc, anh2_mc, , anh5_mc, anh6_mc thì dòng lệnh điều khiển đầu tiên là: var arr:Array = [anh1_mc, anh2_mc, anh3_mc, anh4_mc, anh5_mc, anh6_mc]; Bước 3: Lưu phim Lưu file soạn thảo trên với tên “phongto.fla” nhấn Ctrl + Enter để xuất đoạn mô thành file chạy độc lập “phongto.swf” 74 (75) 75 (76)