GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 7 Để tạo mặt nạ cho các Layer bổ sung sau khi tạo một Mask Layer, bạn có thể thực hiện một tro
Trang 1GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 7
Để tạo mặt nạ cho các Layer bổ sung sau khi tạo một Mask Layer, bạn có thể thực hiện một trong những cách sau đây:
Kéo trực tiếp Layer đang tồn tại xuống bên dưới Mask Layer trên thanh thước Timeline
♦
♦
♦
Tạo một Layer mới bất kỳ bên dưới Mask Layer
Chọn trên trình đơn Modify > Layer và chọn Mask trong hộp thoại Layer
Properties
Bỏ kết nối các Layer từ một Mask Layer:
1 Chọn Layer bạn muốn bỏ kết nối
2 Bạn có thể thực hiện một trong những cách sau đây:
Kéo Layer muốn bỏ kết nối lên trên Mask Layer
♦
thoại Layer Properties
Trang 2GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 7
Chuyển đổi một Layer giữa hai chế độ Mask Layer và bỏ Mask Layer:
Nhấn phím Alt và nhấp chuột (trong Windows) hoặc nhấn Option và nhấp (trong Macintosh) vào Layer đó
♦
CÁCH DÙNG HỘP THOẠI LAYER PROPERTIES
Để xem hay thiết lập các thuộc tính cho một Layer, bạn có thể dùng hộp Layer Properties Hầu hết những thuộc tính này có thể được thiết lập trong thanh thước Timeline
Hiệu chỉnh các thuộc tính cho Layer:
1 Nhấp đúp chuột vào một trong những biểu tượng của Layer mà bạn muốn hiệu chỉnh các thuộc tính của Layer đó
2 Bạn có thể chọn một trong những tùy chọn sau:
Mục Name cho phép bạn nhập tên cho Layer
Mục Show làm hiển thị hay ẩn Layer
Mục Lock khoá Layer không cho hiệu chỉnh, chọn lại tùy chọn này sẽ mở khoá cho phép hiệu chỉnh Layer này
Mục Normal xác định Layer theo chế độ mặc định mà trong đó bạn có thể vẽ và làm chuyển động đối tượng
Mục Guide xác định Layer là Guide Layer mà bạn vẽ các đối tượng để giúp bạn canh lề ảnh của bạn
Trang 3GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 7
Mục Guided là Layer bình thường kết nối đến Guide Layer chuyển động Một Guide Layer điều khiển sự chuyển động của các đối tượng trong một Motion Tween
Mục Mask là loại Layer trong đó bạn tạo ra các lỗ để có thể thấy các đối tượng trong các Layer bên dưới Điều này rất có ích cho việc tạo ra các hiệu ứng Spotlight và Transition Bạn có thể kết nối nhiều Layer vào một Mask layer Mục Masked là một Layer bình thường kết nối đến một Mask Layer
Outline color là mục màu dùng để hiển thị các màu viền của đối tượng khi chọn mục View Layer as Outline trong Layer
Mục View Layer as Outlines hiển thị đường viền ngoài của các đối tượng trong Layer
Mục Layer Height xác định chiều cao của Layer trong thanh thước Timeline
Các chế độ chọn trong mục Layer Height
Trang 4GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14
Giả sử đoạn phim bạn vừa thực hiện đã đúng như ý đồ thiết kế, các bước còn lại bạn sẽ xuất đoạn phim dưới các định dạng file (format) mong muốn
Các bước được tiến hành như sau:
8 Vào trình đơn File > Export Movie hay dùng phím tắt Ctrl + Alt + Shift + S để mở hộp thoại Export Movie Chọn định dạng file cần lưu tại mục Save as type
9 Chỉ đường dẫn thư mục chứa file ở mục Save in (ở đây ta chọn thư mục My Documents)
10 Nhập tên file vào trong mục File name
11 Theo mặc định Flash lưu file mới vừa tạo dưới định dạng swf Nếu bạn muốn lưu file dưới định dạng khác nhấp vào mũi tên hướng xuống trong mục Save as type để chọn định dạng thích hợp
12 Một danh sách định dạng file hiển thị cho bạn chọn Ở đây giả sử chúng ta chọn định dạng gif động (Animated GIF) để đưa vào trong trang Web hoặc trong FrontPage Trở về cửa sổ Export Movie nhập tên file (ở đây đặt tên Tween-2)
Trang 5GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14
13 Cửa sổ Export GIF xuất hiện Chọn giá trị mặc định tại mục Width (chiều rộng),
Height (chiều cao) trong mục Dimensions có giá trị đúng với giá trị chọn ban đầu
trong Modify > Movie
14 Bạn có thể nhấp nhận các giá trị mặc định trong mục chọn Dimensions, nhấp chuột vào nút OK để tiến hành xuất đoạn phim
Hãy vào cửa sổ Explorer hay Norton để coi kích thước của file xuất ra Các bạn có
nhận xét gì về kích thước này không - chúng rất nhỏ so với các chương trình làm hoạt hình khác?
Trang 6GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14
THỰC HIỆN ĐOẠN PHIM BIẾN HÌNH TỪ HÌNH TRÒN BIẾN DẠNG THÀNH CÁI NƠ
1 Khởi động Flash 5, mở một tập tin mới
2 Tạo các đường lưới cho
màn hình làm việc, bằng
cách chọn View > Grid
> Show Grid
3 Khi bạn nhấp chuột
chọn lệnh Show Grid
xem như chúng ta chấp
nhận giá trị mặc định
của đường lưới, cửa sổ
làm việc lúc này giống
như hình bên dưới
Chú ý : Nếu các bạn muốn
chỉnh sửa đường lưới, chúng ta
chọn View > Grid > Edit
Grid
4 Cửa sổ Grid xuất hiện, lúc này các bạn có thể hiệu chỉnh màu cho đường lưới ở mục Color và độ dài rộng của mỗi ô luới (ở đây độ dài rộng của mỗi ô lưới là 15)
5 Chọn công cụ Oval Tool (T) trong hộp công cụ để vẽ hình tròn tại keyframe1 trên Layer1
Trang 7GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14
Chọn công cụ Oval Tool trong hộp công cụ
6 Nhấp chuột vào keyframe thứ 3 và nhấn phím F6 Tại keyframe này bạn chọn công cụ Arrow Tool để hiệu chỉnh hình tròn giống như hình trên Khi đưa công cụ Arrow Tool đến đối tượng, hình vòng cung xuất hiện sau mũi tên, bạn có thể kéo vòng tròn để chỉnh sửa
Vòng tròn ban đầu tại keyframe
Dùng công cụ Arrow Tool để hiệu chỉnh hình tròn thành hình Oval
7 Bạn lặp lại bước 6 cho các keyframe tiếp theo bạn chèn các keyframe trong các keyframe kế tiếp trước khi kéo chỉnh hình tròn giống như các hình dưới đây
Ảnh tại keyframe 11 Ảnh tại keyframe 13
Trang 8GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14
8 Bạn dùng công cụ Oval Tool và vẽ thêm hình tròn nhỏ để làm nhụy của cái nơ
9 Lúc này khung keyframe của bạn trong Layer1 giống như hình dưới đây:
10 Bạn hãy nhấp chuột vào nút Play trên
điều khiển Controller hoặc nhấn phím
Enter để xem đoạn phim vừa tạo Đoạn
phim sẽ diễn hoạt từ hình tròn biến thành
cái nơ Vậy là bạn đã thành công
Hình bên đoạn phim đang diễn hoạt
Trang 9GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14
THỰC HIỆN ĐOẠN PHIM DÙNG BÚT VIẾT CHỮ DIRECTOR
Trong bài tập này chúng ta sẽ tạo một đoạn phim có nội dung là một cây viết dịch
chuyển từ trái sang phải giống như một người đang viết chữ Chữ ở đây là từ Director trông rất
hay :
Để bắt đầu tạo một đoạn phim như trên Bước đầu tiên trong
việc tạo phim là cần phải thiết lập các tham số (thuộc tính) chọn
kích cỡ và phông nền cho đoạn phim
1 Chọn trên trình đơn Modify > Movie hoặc nhấn phím tổ hợp
Ctrl + M
2 Trong hộp thoại Movie Properties (thiết lập các thuộc tính cho đoạn phim), chọn kích
thước đoạn phim trong mục Dimensions nhập giá trị vào trong hộp Width và Height
Kích cỡ phim chọn trong đoạn phim này là 600 – 200 pixel
3 Chọn màu trắng cho phông nền Nhấp chuột vào hộp màu trong mục Background Colors
Nhấp chuột vào nút OK để xác định các thuộc tính
Trang 10GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 14
4 Để thuận tiện cho việc quản lý (Layer), ta nên đặt tên cho lớp Nhấp đúp chuột vào tên Layer1 và đặt tên lại thành Layer Giao
5 Nhấp chuột chọn công cụ Text Tool trong hộp công cụ bên trái trong giao diện và xác
định các thuộc tính font chữ bằng cách chọn trên trình đơn Modify > Font nhấp chuột
vào biểu tượng chữ A tại góc phải dưới trong vùng làm việc
6 Trong hộp thoại Font (thuộc tính font) chọn kiểu font chữ từ trong mục Font Ở đây, chúng ta chọn font VNI- Lydi Sau đó chọn kích cỡ chữ là70 từ mục A
Chú yù : Muốn ký tự được mịn sau khi tô màu ta chia một kí tự có khoảng cách vào khoảng 20 keyframe và cũng tùy vào kí tự dài hay ngắn màbạn chọn số keyframe thích hợp
7 Tiếp theo, bạn nhấp chuột vào hộp màu Fill Color và
chọn màu tô cho ký tự là màu xanh dương Đặt con trỏ
vào vùng làm việc và nhập vào chữ “DIRECTOR” Di
chuyển chữ vào giữa trang Dùng công cụ Arrow nhấp
chọn chữ
