Nhấn vào biểu tượng Free Transform Tool trên thanh công cụ rồi nhấn vào lớp Layer “chu_nhat” hoặc khoanh vùng chọn cả hình chữ nhật vừa vẽ để lựa chọn cả hình chữ nhật.. Nhấn vào biểu t
Trang 1CHỦ ĐỀ 1 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ênmáy tính
- Học viên có thể vẽ những hình cơ bản, tô màu cho các hình vẽ,căn chỉnh, sắp 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ô phỏng đơn giản phục
vụ cho việc xây dựng tư liệu dạy học
Bài 1 Cài đặt và khởi động
Bước 1: Mở ổ đĩa CD và chạy file cài đặt Setup.exe trong thư mục
Macromedia Flash 8.
Bước 2: Nhấn Next rồi
chọn “I accept the items
in the licensce agreement”
và nhấn Next cho đến khi
chương trình cài đặt thành
công Nhấn Finish để
hoàn tất quá trình cài đặt
Bước 3: Sau khi cài đặt
phần mềm Macromedia
Flash, bạn có thể khởi động chương trình bằng các cách nhấn đúp
vào biểu tượng Flash ở màn hình nền (Desktop) hay vào
menu Start Programs Macromedia Macromedia Flash.
Trang 2Bài 2 Vẽ các hình tứ giác đặc biệt
Bước 1: Đặt kích thước cho đoạn mô phỏng
Vào menu Modify Document, định chiều rộng đoạn mô phỏng
(width) là 550 pixels và chiều cao (height) là 400 pixels, màu nền
(background color) là màu trắng Nhấn OK để cập nhật.
Bước 2: Vẽ hình chữ nhật
1 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”
2 Tại thanh 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 màu đen Nhấn tiếp vào biểu
tượng Fill Color rồi nhấn chọn không tô màu nền
3 Nhấn vào biểu tượng Rectangle Tool trên thanh công cụ Vào
menu Windows Properties Properties (phím tắt là Ctrl + F3)
để xuất hiện bảng Properties phía dưới trang soạn thảo Định độ dàycủa nét (Stroke height) là 3, kiểu nét liền (Solid)
4 Dùng chuột vẽ một 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 vẽ
1 Nhấn vào biểu tượng Free Transform Tool
trên thanh công cụ rồi nhấn vào lớp (Layer)
“chu_nhat” (hoặc khoanh vùng chọn cả hình
chữ nhật vừa vẽ) để lựa chọn cả hình chữ nhật Kéo các chấm đenxung quanh hình chữ nhật để điều chỉnh kích thước
Trang 32 Nhấn vào biểu tượng Selection Tool trên
thanh 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 lại khoang vùng chọn cả hình chữ
nhật) Di chuyển con trỏ tới cạnh của hình chữ nhật, khi con trỏ xuấthiện 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í ở giữa của nửa bên trái trang soạn thảo
Bước 4: Vẽ hình vuông
1 Nhấn vào biểu tượng Insert Layer
ở phía dưới tên lớp “chu_nhat” để
thêm một lớp mới, đặt tên lớp mới này
là “hinh_vuong”
2 Nhấn vào biểu tượng Rectangle Tool trên thanh công cụ rồi
giữ Shift và vẽ một hình vuông trên trang soạn thảo.
3 Tương tự như Bước 3, bạn điều chỉnh kích thước (bạn chỉ kéo các
chấm đen ở góc đồng thời giữ Shift để khi thay đổi kích thước thì đảm bảo vẫn là hình vuông), sau đó nhấn vào biểu tượng Selection Tool và di chuyển hình vuông đến vị trí ở giữa của nửa bên dướitrang soạn thảo
3 Nhấn vào biểu tượng Free
Transform Tool trên thanh công
cụ, di chuyển con trỏ tới cạnh trên
Trang 4của hình chữ nhật (chú ý không trùng vào các điểm nút) Khi contrỏ chuyển thành mũi tên hai chiều thì bạn kéo cạnh của hình chữnhật lệch đi để được hình bình hành.
4 Nhấn vào biểu tượng Selection Tool , di chuyển hình bìnhhành đến vị trí ở giữa của nửa bên trên trang soạn thảo
Bước 5: Vẽ hình thoi
1 Tạo lớp mới đặt tên là “hinh_thoi” rồi sao chép hình vuông từ lớp
“hinh_vuong” sang lớp “hinh_thoi” như bước 5
2 Nhấn vào biểu tượng Free Transform Tool
trên thanh công cụ, di chuyển con trỏ sát
chấm đen góc trên bên phải của hình vuông,
khi con trỏ chuyển thành mũi tên vòng cung
thì bạn giữ Shift và xoay hình vuông một góc
45o
3 Nhấn vào khoảng trắng rồi 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 ở giữa xuống dưới để
được hình thoi
4 Nhấn Selection Tool , di chuyển hình
thoi đến vị trí ở giữa của nửa bên phải trang
menu Window Transform (phím tắt là
Ctrl + T) để xuất hiện bảng Transform bên phía phải của trang soạn thảo Tại bảng này, bạn sẽ nhập giá trị vào các ô chiều ngang, chiều dọc, góc quay (Rotate), góc méo (Skew) rồi nhấn Enter để thực hiện.
Trang 5- Để vẽ các đa giác đều, bạn nhấn và
giữ chuột mộ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.
xuất bản kết quả thành file chạy độc lập có
tên “tugiac.swf” trên màn hình nền (nơi mà
bạn đã lưu file “tugiac.fla”) Bạn sẽ dùng file này để đưa vào bàigiảng của mình hoặc chia sẻ trên Internet
Trang 6Bài 3 Tạo hiệu ứng mũi tên nhấp nháy trên bản đồ
Bước 1: Tạo một file Flash mới, kích thước mặc định là 550x400 Bước 2: Chèn bản đồ vào trang soạn thảo
1 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”
2 Vào menu File Import Import to stage (phím tắt là Ctrl + R), chọn file bản đồ cần đưa vào trang soạn thảo và nhấn Open.
Gợi ý căn chỉnh bản đồ cân đối trên trang soạn thảo:
- Vào menu Window Align (phím tắt là Ctrl + K) để hiện bảng
Align rồi lần lượt nhấn chọn các biểu tượng To Stage, biểu tượng Align horizontal center và biểu tượng Align vertical center
để căn bản đồ vào chính giữa 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 bản đồ vừa phủ kín trang soạn thảo.
Trang 73 Nhấn vào hình tròn trắng phía dưới
biểu tượng cái khóa của lớp “ban_do” để
khóa lớp bản đồ, tránh lựa chọn nhầm
trong các thao tác sau
Bước 3: Vẽ mũi tên
1 Nhấn vào biểu tượng Insert Layer ở
phía dưới tên lớp “ban_do”để thêm một
lớp mới và đặt tên lớp này là “mui_ten”
2 Trên thanh công cụ, nhấn vào biểu tượng Stroke color và
chọn màu đen, nhấn vào biểu tượng Fill color và chọn màu
đỏ Nhấn vào biểu tượng Pen Tool , nhấn Ctrl + F3 để hiện bảng Properties rồi đặt độ dày nét là 3.
3 Tiến hành vẽ mũi tên bằng cách nhấn lần lượt 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ẽ rồi kéo các nút ô vuông trên mũi tên
để chỉnh sửa hình dạng đẹp và chính xác hơn.
- Nếu thao tác sai, bạn có thể nhấn Ctrl + Z để thực
hiện 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ỏ).
- Để được mũi tên cong, bạn nhấn vào biểu tượng
Selection Tool , di chuyển con trỏ tới giữa cạnh mũi
tên cần làm cong, khi xuất hiện thêm cung tròn phía
dưới con trỏ, bạn kéo cạnh mũi tên đó cong đi.
Bước 4: Tạo hiệu ứng nhấp nháy cho mũi tên
Trang 81 Nhấn vào biểu tượng Selection Tool trên thanh công cụ,
khoanh vùng chọn là cả 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 rồi nhấn OK.
2 Vào menu Edit Edit in
Place (hoặc click đúp vào hình,
hoặc click phải chuột và chọn
Edit in Place), nhấn vào Frame
thứ 5 của lớp “Layer 1” rồi nhấn
phím F6, nhấn tiếp vào Frame
thứ 9 rồi lại nhấn phím F6.
Frame 5 và Frame 9 sẽ là các
Keyframe (là những Frame mà
tại đó có thể thay đổi đối tượng khác đi so với các Frame trước đó)
3 Nhấn trở lại Frame 5 của lớp
“Layer 1”, nhấn ra bên ngoài
mũi tên, rồi nhấn vào phần bên
trong của mũi tên, nhấn Delete
để xóa màu đỏ của mũi tên
4 Vào menu Edit Edit
Document (hoặc click đúp ra
ngoài mũi tên), kéo mũi tên đến
vị trí hợp lý rồi nhấn tổ hợp
phím Ctrl + Enter để xem kết quả mà bạn đã làm.
Bước 5: Tạo nhiều mũi tên nhấp nháy
Trang 9Sao chép (Copy, Paste) đối tượng mũi
tên, rồi xoay, đặt ở các vị trí thích hợp
để được 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ột mũi tên đã
được sao chép ra, chọn Duplicate
Symbol, đặt tên là “quan_dich” Thay đổi màu của mũi tên bằng 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.
Chú ý: Nếu bạn không chọn Duplicate Symbol thì khi sửa một mũitên (ví dụ đổi màu), tất cả các mũi tên khác cũng sẽ thay đổi theo
Bước 7: Lưu phim
Lưu file soạn thảo trên với tên “bando.fla” rồi nhấn Ctrl + Enter để
xuất bản đoạn mô phỏng thành file chạy độc lập “bando.swf”
Bài 4 Mô phỏng tầu cập bến
Bước 1: Chèn cảnh bến tàu và chiếc tàu vào trang soạn thảo
1 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”
2 Vào menu File Import Import to stage (hoặc Ctrl+R), chọn bức ảnh cảnh bến tầu cần đưa vào trang soạn thảo và nhấn Open.
3 Căn chỉnh vị trí của ảnh bến tầu phủ kín trang soạn thảo rồi chọnkhóa lớp “ben” lại, tránh lựa chọn nhầm trong các thao tác sau
4 Tương tự, bạn tạo thêm một lớp mới tên là “tau” rồi đưa bức ảnhcon tàu vào trang soạn thảo Thay đổi kích thước chiếc tàu cho phùhợp và di chuyển nó tới vị trí đầu tiên của đường chuyển động
Trang 10Bước 2: Tạo chuyển động cập bến cho con tàu
1 Nhấn vào Frame 90 trên trục thời gian (Timeline) của 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.
2 Nhấn vào Frame 90 trên trục thời gian của lớp “tau” rồi nhấn phím F6 để chèn một KeyFrame Sau đó, di chuyển chiếc tàu thủy
và đặt vào vị trí cuối cùng của đường chuyển động (giữ Shift để di
chuyển theo phương ngang)
3 Nhấn phải chuột vào một Frame 45
(hay Frame bất kỳ giữa hai Frame đầu
và cuối) của lớp “tau” và chọn Create
Motion Tween Nhấn tổ hợp phím Ctrl
+ Enter để xem kết quả bạn vừa làm.
Lưu ý: - Để chiếc tầu thủy chuyển
động chậm dần khi cập bến, bạn nhấn
vào Frame 45 của lớp “tau” Nhấn
Ctrl + F3 để hiện cửa sổ Properties rồi
tại mục Ease, bạn nhập 100.
- Để tăng tốc độ, bạn sẽ xóa bớt các Frame trên trục thời gian bằng cách chọn một Frame bất kỳ giữa hai Frame đầu và cuối rồi nhấn Shift + F5 Tương tự, để giảm tốc độ, bạn chọn vào một Frame bất
Trang 11kỳ ở giữa rồi 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 hiện trên cả 2 lớp “ben” và “tau”.
- Mặc định Flash sẽ chạy 12 hình (Frame) trong 1 giây, tức là 90 frame sẽ là 7.5 giây Bạn có thể thay đổi số hình trên giây bằng cách vào menu Modify Document tại mục Frame rate.
Bước 3: Tạo nút điều khiển cho đoạn mô phỏng
Đoạn mô phỏng trên sẽ chạy đi chạy lại liên tục Bạn có thể tạo
thêm nút Play để khi nhấn vào thì đoạn mô phỏng mới thực hiện,
đồng thời sau khi tàu cập bến, đoạn mô phỏng không thực hiện lại:
1 Tại Frame 1 của lớp “tau”, nhấn F9 để
hiện cửa sổ Actions - Frame và nhập vào đó
câu lệnh: stop( ); Làm tương tự với
Frame 90, để đoạn mô phỏng đầu tiên sẽ
dừng ở Frame 1 và sau khi thực hiện xong
sẽ dừng lại ở Frame 90
2 Tạo thêm một lớp mới và đặt tên là “nut”
Vào menu Window Common Libraries
Buttons lúc này bảng Library - Button.fla
hiện ra Chọn một nút phù hợp và kéo vào
trang soạn thảo
3 Nhấn chuột vào nút vừa tạo, nhấn phím F9 đển hiệ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 quả.
Bước 4: Lưu hoạt cảnh
Lưu file soạn thảo trên với tên “tau.fla” rồi nhấn Ctrl + Enter để
xuất bản đoạn mô phỏng thành file chạy độc lập “tau.swf”
Bài 5 Mô phỏng viên bi lăn từ máng nghiêng xuống
Bước 1: Vẽ máng lăn
Trang 121 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”.
2 Nhấn vào biểu tượng Line Tool trên thanh công cụ, vẽ haiđoạn thẳng làm máng lăn cho viên bi
3 Khóa lớp “mang” để tránh lựa chọn
nhầm trong các thao tác về sau
Bước 2: Vẽ viên bi
1 Nhấn vào biểu tượng Insert Layer phía dưới tên lớp “mang”
để tạo thêm một lớp mới, đặt tên là “bi”
2 Nhấn vào biểu tượng Stroke color trên thanh công cụ, nhấnchọn không vẽ đường viền Nhấn tiếp vào biểu tượng Fill Color rồi chọn kiểu tô Gradient
3 Nhấn vào biểu tượng Oval Tool , giữ Shift và vẽ
một hình tròn trên trang soạn thảo để được viên bi
4 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
1 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
Trang 132 Nhấn vào Frame 60 của các lớp “mang” rồi nhấn phím F5 để chèn thêm Frame Tại Frame 30 và Frame 60 của lớp “bi”, nhấn phím F6 để chuyển các Frame 30 và Frame 60 thành KeyFrame.
3 Nhấn vào biểu tượng Selection Tool , nhấn vào Frame 1 rồi di
chuyển viên bi đến đỉnh của 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.
4 Nhấn phải chuột lần lượt vào các Frame 15 và Frame 45 của lớp
“bi” rồi chọn Creat Motion Tween.
5 Nhấn vào Frame 15 của lớp “bi” Tại
cửa sổ Properties ở phía dưới 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).
6 Nhấn Ctrl + Enter và bạn đã có đoạn hoạt hình hoàn chỉnh.
Trang 14Bước 4: Tạo nút điều khiến cho đoạn mô phỏng và lưu phim
1 Tại các Frame 1 và Frame 60 của lớp “bi”, bạn nhấn F9 và nhập
lệnh “Stop();” vào cửa sổ Action Frame.
2 Tạo thêm một lớp mới và đặt tên là “nut” Vào menu Window Common Libraries Buttons lúc này bảng Library - Button.fla
hiện ra Chọn một 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 để hiện cửa sổ Actions – Button và nhập
vào đó lệnh điều khiển:
On (release) { play();
}
3 Lưu file soạn thảo trên với tên “bi.fla” rồi nhấn Ctrl + Enter để
xuất bản đoạn mô phỏng thành file chạy độc lập “bi.swf”
Bài 6 Mô phỏng con ong đang bay
Bước 1: Chèn ảnh phong cảnh và con ong vào trang soạn thảo
1 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”
2 Vào menu File Import Import to stage (hoặc Ctrl +R),
chọn file ảnh phong cảnh vườn hoa cần đưa vào trang soạn thảo và
Trang 15Bước 2: Tạo chuyển động theo quỹ đạo cho con ong
1 Chọn con ong, nhấn F8, đặt tên Name là “ong”, chọn Type là Movie clip rồi nhấn OK.
2 Nhấn vào Frame 60 của lớp “hoa”, nhấn F5 Nhấn vào Frame
60 của lớp “ong”, nhấn F6 Nhấn phải chuột vào Frame 30 của lớp
“ong”và chọn Create Motion Tween.
2 Nhấn nút Add Motion Guide để tạo ra một lớp chứa quỹ đạo.
Đặt tên lớp này tên là “quy_dao” Chọn lớp “quy_dao” rồi nhấn tiếp
vào biểu tượng Pen Tool và vẽ đường quỹ đạo chuyển động
Trang 163 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 con ong tới vị trí cuối của quỹ đạo
vừa vẽ sao cho tâm của hình con ong (có hình
vòng tròn nhỏ) nằm trên quỹ đạo
4 Nhấn vào Frame 1 của lớp “ong”, nhấn vào biểu tượng Free Transfrom Tool , xoay hình con ong theo hướng đường dẫn
Làm tương tự đối với Frame 60.
Trang 17Frame 1 Frame 60
6 Nhấn vào Frame 30 của lớp “ong” và
đánh dấu chọn ở ô Orient to path trong
bảng Properties ở phía dưới 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 quả.
Bước 3: Lưu hoạt cảnh
Lưu file soạn thảo trên với tên “ong.fla” rồi nhấn Ctrl + Enter để
xuất bản đoạn mô phỏng thành file chạy độc lập “ong.swf”
Bài 7 Tạo hiệu ứng biến đổi giữa các hình
Với các đối tượng hình vẽ (Shape), Flash có hỗ trợ tạo hiệu ứngchuyể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 rồi chuyển thành chữ “A” rồichuyển thành dòng chữ “XIN CHÀO”, bạn thực hiện như sau:
Bước 1: Vẽ hình tròn
1 Trên thanh công cụ, nhấn vào biểu tượng Oval Tool , nhấn tiếp
vào biểu tượng Stroke color và chọn màu đỏ, nhấn vào biểu
tượng Fill color và chọn màu vàng
2 Nhấn Ctrl + F3 để hiện bảng Properties rồi đặt độ dày nét là 3 rồi giữ Shift và vẽ một hình tròn trên trang soạn thảo.