tài liệu giáo trình hướng dẫn flash 8

CHỦ ĐỀ TẠO ẢNH ĐỘNG VỚI MACROMEDIA FLASH Mục tiêu: - Học viên cài đặt phần mềm Macromedia Flash 8.0 máy tính - Học viên vẽ hình bản, tơ màu cho hình vẽ, chỉnh, xếp hình vẽ Macromedia Flash 8.0 - Học viên xây dựng đ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 khởi động Bước 1: Mở ổ đĩa CD 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” nhấn Next chương trình cài đặt thành cơng Nhấn Finish để hồn tất q trình cài đặt Bước 3: Sau cài đặt phần mềm Macromedia Flash, bạn khởi động chương trình cách nhấn đúp vào biểu tượng Flash hình (Desktop) hay vào menu Start  Programs  Macromedia  Macromedia Flash Bài Vẽ 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) 550 pixels chiều cao (height) 400 pixels, màu (background color) 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” “chu_nhat” 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 tượng Fill Color , nhấn chọn màu đen Nhấn tiếp vào biểu nhấn chọn không tô màu Nhấn vào biểu tượng Rectangle Tool công cụ Vào menu Windows  Properties  Properties (phím tắt Ctrl + F3) để xuất bảng Properties phía trang soạn thảo Định độ dày nét (Stroke height) 3, kiểu nét liền (Solid) Dùng chuột vẽ hình chữ nhật trang soạn thảo Bước 3: Điều chỉnh kích thước vị trí hình vẽ Nhấn vào biểu tượng Free Transform Tool 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 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 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 bạn lại 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 vng 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 “hinh_vuong” Nhấn vào biểu tượng Rectangle Tool cơng cụ giữ Shift vẽ hình vng 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 chấm đen góc đồng thời giữ Shift để thay đổi kích thước đảm bảo hình vng), sau nhấn vào biểu tượng Selection Tool di chuyển hình vng đế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” 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 chọn Copy (phím tắt Ctrl + C) Tạo thêm lớp đặt tên “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 công cụ, di chuyển trỏ tới cạnh hình chữ nhật (chú ý khơng trùng vào điểm nút) Khi trỏ chuyển thành mũi tên hai chiều bạn kéo cạnh hình chữ nhật lệch để hình bình hành Nhấn vào biểu tượng Selection Tool , di chuyển hình bình hành đến vị trí nửa bên trang soạn thảo Bước 5: Vẽ hình thoi Tạo lớp đặt tên “hinh_thoi” chép hình vng từ lớp “hinh_vuong” sang lớp “hinh_thoi” bước Nhấn vào biểu tượng Free Transform Tool công cụ, di chuyển trỏ sát chấm đen góc bên phải hình vng, trỏ chuyển thành mũi tên vòng cung bạn giữ Shift xoay hình vng góc 45o Nhấn vào khoảng trắng lại nhấn vào lớp “hinh_thoi” để lựa chọn hình vng vừa xoay, kéo hạt đen phía xuống để hình thoi Nhấn Selection Tool , 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 thực cách xác cách vào menu Window  Transform (phím tắt 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 ô chiều ngang, chiều dọc, góc quay (Rotate), góc méo (Skew) nhấn Enter để thực - Để vẽ đa giác đều, bạn nhấn 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 tiến hành vẽ đa giác trang soạn thảo Bước 6: Lưu hình ảnh vẽ Vào menu File  Save, nhấn vào biểu tượng Desktop, đặt File name “tugiac.fla” nhấn Save để lưu file soạn thảo bạn lên hình máy tính để sau chỉnh sửa, thêm, bớt nội dung Nhấn tổ hợp phím Ctrl + Enter để xem lại kết mà bạn làm đồng thời để xuất kết thành file chạy độc lập có tên “tugiac.swf” hình (nơi mà bạn lưu file “tugiac.fla”) Bạn dùng file để đưa vào giảng chia sẻ Internet Bài Tạo hiệu ứng mũi tên nhấp nháy đồ Bước 1: Tạo file Flash mới, kích thước mặc định 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” “ban_do” Vào menu File  Import  Import to stage (phím tắt Ctrl + R), chọn file đồ cần đưa vào trang soạn thảo nhấn Open Gợi ý chỉnh đồ cân đối trang soạn thảo: - Vào menu Window  Align (phím tắt Ctrl + K) để bảng Align nhấn chọn biểu tượng To Stage, biểu tượng Align horizontal center biểu tượng Align vertical center để đồ vào 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 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 khóa lớp “ban_do” để khóa lớp đồ, tránh lựa chọn nhầm 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 đặt tên lớp “mui_ten” Trên công cụ, nhấn vào biểu tượng Stroke color chọn màu đen, nhấn vào biểu tượng Fill color chọn màu đỏ Nhấn vào biểu tượng Pen Tool , nhấn Ctrl + F3 để bảng Properties đặt độ dày nét 3 Tiến hành vẽ mũi tên cách nhấn vào điểm 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 nút ô vng mũi tên để chỉnh sửa hình dạng đẹp xác - Nếu thao tác sai, bạn nhấn Ctrl + Z để thực lại Nếu cần quan sát kỹ chi tiết 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 cong Bước 4: Tạo hiệu ứng nhấp nháy cho mũi tên Nhấn vào biểu tượng Selection Tool công cụ, khoanh vùng chọn mũi tên vừa vẽ, nhấn phím F8, đặt tên Name “quan_ta”, chọn Type Movie clip nhấn OK Vào menu Edit  Edit in Place (hoặc click đúp vào hình, click phải chuột 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 Frame Keyframe (là Frame mà thay đổi đối tượng khác so với Frame trước đó) Nhấn trở lại Frame lớp “Layer 1”, nhấn bên 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 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 kết mà bạn làm Bước 5: Tạo nhiều mũi tên nhấp nháy 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 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 “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 Chú ý: Nếu bạn khơng chọn Duplicate Symbol sửa mũi tên (ví dụ đổi màu), tất mũi tên khác thay đổi theo Bước 7: Lưu phim Lưu file soạn thảo 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 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” “ben” Vào menu File  Import  Import to stage (hoặc Ctrl+R), chọn ảnh cảnh bến tầu cần đưa vào trang soạn thảo 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 thao tác sau Tương tự, bạn tạo thêm lớp tên “tau” đưa ảnh tàu vào trang soạn thảo Thay đổi kích thước tàu cho phù hợp di chuyển tới vị trí đường chuyển động Bước 2: Tạo chuyển động cập bến cho tàu Nhấn vào Frame 90 trục thời gian (Timeline) lớp “ben” (Số Frame lớn thời gian chuyển động lâu) nhấn phím F5 để chèn thêm Frame Nhấn vào Frame 90 trục thời gian lớp “tau” nhấn phím F6 để chèn KeyFrame Sau đó, di chuyển tàu thủy đặt vào vị trí cuối đườ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 cuối) lớp “tau” 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 - Để tăng tốc độ, bạn xóa bớt Frame trục thời gian cách chọn Frame hai Frame đầu cuối nhấn Shift + F5 Tương tự, để giảm tốc độ, bạn chọn vào Frame bất Di chuyển trỏ đến cạnh hình chữ nhật, xuất thêm cung tròn phía trỏ, bạn 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 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 tuyến sang trái để tạo độ loe miệng ống nghiệm Thự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 axit ống nghiệm Tạo thêm lớp mới, đặt tên lớp “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 Nhấn vào biểu tượng Rectangle Tool cơng cụ vẽ hình chữ nhật phía ố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) Nhấn Khoanh vùng chọn ống nghiệm mẩu giấy, vào menu Window  Align (phím tắt Ctrl + K) để bảng Align nhấn chọn biểu tượng To Stage , biểu tượng Align horizontal center để mẩu giấy ống nghiệm vào trang soạn thảo Bước 5: Tạo chuyển động 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 thành Keyframe Nhấn vào Frame 40 lớp “giay_quy”, nhấn F6 Giữ Shift di chuyển mẩu giấy xuống đáy ống nghiệm Sau đó, bạn chuyển Frame 41 Frame 60 lớp “giay_quy” thành Keyframe (bằng cách chọn nhấn F6) Nhấn phải chuột vào Frame 10 lớp “giay_quy”, chọn Create Motion Tween 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 bảng nhấn Ctrl + F3), mục Color bạn chọn Alpha định giá trị 0% để mẩu giấy lúc đầu suốt hoàn toàn Nhấn vào Frame 50, bảng Properties, mục Tween bạn chọn Shape Nhấn tiếp vào Frame 60 nhấn vào biểu tượng Fill color chọn màu đỏ để mẩu giấy chuyển dần từ màu tím sang đỏ Bước 6: Tạo nút điều khiển lưu phim Tạo nút điều khiển để bạn nhấn nút mẩu giấy xuất rơi xuống ống nghiệm Đồng thời sau chuyển thành màu đỏ đoạn mơ khơng thực lại Lưu file soạn thảo 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 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ô 360 pixels chiều cao (height) 200 pixels, màu (Background color) đoạn mô màu đen Bước 2: Tạo hiệu ứng mặt nạ Đổi lại tên lớp “Layer1” “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 ảnh cho phù hợp Nhấn vào biểu tượng Insert Layer phía tên lớp “chien_ham” để tạo thêm lớp mới, đặt tên “ong_nhom” Nhấn vào biểu tượng Stroke color chọn không vẽ nét , nhấn vào biểu tượng Fill color chọn màu xanh Nhấn vào biểu tượng Oval Tool , giữ Shift vẽ hình tròn Sao chép (copy) hình tròn chỉnh vào 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” 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 khóa lớp “chien_ham” để mở khóa hai lớp “ong_nhom” “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 Frame Frame 45 Nhấn phải chuột vào Frame 20 lớp “chien_ham” chọn Create Motion Tween để tạo chuyển động ảnh từ trái sang phải trang soạn thảo Có thể nhấn Ctrl+Enter để xem thử 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 lưu phim Tạo nút điều khiển để bạn nhấn nút bắt đầu lia ống nhòm, Nhấn nút lần bắt đầu phóng to ảnh Đồng thời sau phóng to ảnh đoạn mơ khơng thực lại Lưu file soạn thảo 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” Lưu ý: Kỹ thuật gọi mặt nạ Đây kỹ thuật sử dụng nhiều xây dựng đoạn mô Flash Bài 10 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 “nen”, vào menu File  Import  Import to stage, (hoặc Ctrl+R) chọn file ảnh phong cảnh cần đưa vào trang soạn thảo 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 “oto” chèn file ảnh ô tô ảnh bánh xe ô tô vào trang soạn thảo Chú ý: ảnh tơ nên 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 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 ảnh bánh xe ô tô, chọn Cut Nhấn chuột chọn ô tô, nhấn F8, đặt Name “oto”, Type 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 “banhxe”, Type Movieclip nhấn OK Vào menu Edit  Edit in Place để chọn sửa movieclip bánh xe (hoặc click đúp) Chọ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 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 nhập vào câu lệnh: gotoAndPlay(1); Click đúp vùng bánh xe (hoặc click vào chữ oto danh sách Scene1 - oto - banhxe phía Timeline) để khỏi movieclip bánh xe quay 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 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 để khỏi movie “oto” (hoặc click đúp ngồi tơ) Tới ta nhấn Ctrl + Enter để xem thử bánh xe quay Bước 3: Tạo chuyển động ô tô lăn bánh đường Nhấn vào biểu tượng Free Transform Tool , chọn thay đổi kích thước di chuyển movie “oto” phía trái trang soạn thảo 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 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 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” Bài 11 Trò chơi ghép hình Bước 1: Vẽ khung để đặt miếng ghép Đặt kích thước trang soạn thảo kích thước ảnh cần ghép (VD: 550 x 400 pixels) Đặt tên lớp “bang” nhấn vào biểu tượng Line Tool , vẽ bốn đường thẳng đứng bốn đường nằm ngang tác rời nhau, bên ngồ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 biểu tượng Match width, Space evenly vertically Align horizontal center hình bên Chọn bốn đường thẳng đứng, bảng Align, nhấn vào biểu tượng Match height, Space evenly horizontally Align vertical center hình bên 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ẽ được, nhấn vào biểu tượng mắt lớp “bang” để ẩn lớp bảng Bước 2: Chèn chia ảnh thành nhiều miếng ghép Tạo thêm lớp tên “anh”, vào menu File  Import  Import to stage, chọn file ảnh cần ghép nhấn Open Căn chỉnh ảnh vào trang soạn thảo để ảnh vừa phủ kín trang soạn thảo (để xác thay đổi thuộc tính W, H, X, Y bảng Properties) Trên bảng Transform chọn thu nhỏ ảnh lại 60% Nhấn chọn ảnh, vào menu Modify  Break Apart (phím tắt 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 chọn Paste in Place để chép khung từ lớp “khung” sang lớp “anh” Khung chia ảnh thành phần hình Nhấn chuột vào khoảng trắng kéo miếng ghép tách rời bên khung xóa khung lớp ảnh Sao chép khung từ lớp “khung” sang lớp “anh” Các miếng ghép kéo khung Bước 3: Chuyển miếng ghép thành nút di chuyển Ẩn lớp “anh” cho hiển thị lớp “khung”, chọn khung nhấn F8, chọn Type Movie clip đặt tên (Name) cho Movie clip “khung” Nhấn Ctrl + F3 để bảng Properties Đặt Instance Name cho Movie clip “khung_mc” Cho hiển thị lớp “anh”, nhấn chọn miếng thứ hàng 1, nhấn F8, đặt Name “mieng11”, Type Button nhấn OK Mở bảng Properties (nhấn Ctrl + F3), đặt Instance Name “b11” Tương tự, chuyển miếng thành nút di chuyển có Instance Name tương ứng b12, b13, b21, b22, b23, b31, b32, b33 Tạo thêm lớp đặt tên “lenh” Nhấn vào Frame lớp “lenh”, nhấn F9 để bảng Action - Frame nhập vào lệnh sau: var cot:Number = 3; var hang:Number = 3; for (var i:Number = 1; i