Giáo trình thiết kế Banner bằng Flash

Giáo trình Thiết kế banner cho trang web bằng Flash Người viết: Đỗ Mạnh Hà  Mục đích: - Tự thiết kế được banner (đầu đề) cho website (trang web) của đơn vị mình trên hệ thống website của violet.vn  Yêu cầu: - Người thực hiện đã nắm được một số kiến thức cơ bản về phần mềm Flash. (có thể tìm hiểu trên trang web: http://daotao.violet.vn)  Thao tác: - Các bạn khởi động phần mềm Flash. Chọn New Document để tạo trang giấy mới. - Việc đầu tiên là bạn phải đặt kích thước cho trang giấy mới. Banner của các website trên hệ thống của violet.vn có chiều ngang chung là 770pixel. Còn chiều cao của banner thì tùy ý. Tuy nhiên các bạn chỉ nên để chiều cao ở khoảng 150pixel đến 200pixel là vừa đủ. Nếu bạn đăt chiều cao quá lớn thì khi thể hiện trên màn hình 800x600, banner sẽ quá lớn và không đạt yêu cầu thẩm mĩ của một trang web. Sau đây ta chúng ta cùng tìm hiểu những yêu cầu về nội dung và mỹ thuật cần thiết của một banner: • Nội dung: + Đơn vị chủ quản (nếu có). + Tên đơn vị (là tên trang web). + Địa chỉ liên lạc. VD: • Mỹ thuật: + Dùng Font chữ dễ đọc, rõ ràng: không dùng chữ quá hoa lá, uốn lượn… hay chữ có nét quá mảnh. Nên dùng chữ in hoa với dòng tên trang web, chữ thường với dòng địa chỉ. Dòng địa chỉ chỉ cần nhỏ, vừa đủ để đọc được, không nên quá lớn và chiếm nhiều diện tích. Mầu của chữ cũng nên nổi bật so với nền + Phần nền trang trí nên có tông màu thích hợp, không quá lòe loẹt khiến người xem nhức mắt như màu hồng tươi, màu xanh nõn chuối sáng rực, v v… Bạn có thể thêm lô gô – biểu trưng của đơn vị, ảnh minh họa,… Lôgô phải rõ ràng và chính xác. Ảnh minh họa: đã là minh họa thì chỉ ở một phần của banner. Nếu choán cả banner thì chỉ nên mờ nhạt đằng sau chữ làm nền. PHÒNG GIÁO DỤC VÀ ĐÀO TẠO QUẬN HAI BÀ TRĂNG TRƯỜNG THCS TÔ HOÀNG Địa chỉ: 27 Đại Cồ Việt, Hai Bà Trưng, Hà Nội. Điện thoại: (04) 8692236 VD: 1. Tô màu nền: - Bạn sẽ tạo một mầu nền cho banner như sau: Trong bảng Propeties, Mục Background có một ô mầu trắng – mầu mặc định của nền khi ta mới tạo trang mới. Bạn nhấn vào ô mầu trắng đó, một bảng mầu sẽ hiện ra để bạn chọn. Bạn nhấn vào ô mầu mà bạn muốn chọn làm nền - Bạn nên chọn những mầu trầm hoặc tươi sáng như: nâu, đỏ, xanh lam đậm,… Tránh những mầu non như mầu nõn chuối, vàng chanh, v v… 2. Tạo thanh đầu trang (header): - Mỗi website thuộc hệ thống website của violet.vn khi thành viên đăng nhập vào thì sẽ hiển thị lời chào và tên thành viên đó phía trên cùng bên phải website. VD: Xin chào thầy giáo: Đỗ Mạnh Hà Xin chào cô giáo: Ngô Thị Chinh - Vì vậy bạn cần tạo một mảng mầu nằm ngang phía trên có độ cao khoảng 30 pixel. Mảng mầu này có mầu sáng vì lời chào hiển thị chữ màu đen. - Hiện tại bạn đang có Layer 1, bạn sẽ tạo phần đầu trang trên Layer này. Bạn chọn công cụ Rectang Tool (R) để vẽ một hình chữ nhật. Trong bảng Properties, bạn điền kích thước cho hình này: + W (width – chiều rộng) = 770 pixel + H (heigh – chiều cao) = 30 pixel - Bạn kéo mảng hình lên phía đầu trang bằng công cụ Selection Tool (V) . - Chú ý: Hãy nhớ đặt tên cho Layer này nhé! Ví dụ như là: header. - Bạn cũng có thể kéo một file ảnh trong file các mấu header sẵn do Bạch Kim cung cấp để đưa vào làm header. 3. Viết chữ: - Bạn tạo một Layer mới để chứa chữ bằng cách nhấn vào biểu tượng Insert layer - Bạn chọn công cụ Text Tool (T) . Nhấn lên màn hình và gõ các chữ cần thiết. - Bạn cũng có thể đổi Font chữ, thay đổi kích cỡ chữ, mầu chữ, căn lề, khoảng cách chữ, khoảng cách dòng trong bảng Propertise: - Nếu bạn muốn tạo các hiệu ứng cho chữ như bóng đổ, tỏa sáng,… , bạn chọn chữ đó, nhấn F8 để chuyển chữ sang đối tượng Movie Clip. - Trong bảng Properties phía dưới, bạn chọn thẻ Filter. Nhấn vào dấu cộng ( + ) và chọn hiệu ứng mà bạn mong muốn. Bên cạnh đó có các lựa chọn (options) để bạn thay đổi mức độ của hiệu ứng theo ý mình. - Bạn có thể nhấn vào dấu trừ ( - ) để bỏ hiệu ứng mà mình không muốn. - Xóa tất cả hiệu ứng. - Hiện tất cả hiệu ứng. - Ẩn tất cả hiệu ứng - Đổ bóng. - Làm mờ đi. - Tỏa sáng. - Làm nổi - Chuyển độ sáng - Chuyển độ nổi - Đổi tong mầu, chỉnh đậm nhạt 4. Trang trí: - Bạn muốn đưa một bức ảnh vào để trang trí cho phần nền? Bạn hãy lưu ý rằng khi ta đưa thêm bất cứ đối tượng nào vào Flash, bạn hãy tạo một layer mới (Insert Layer) đế chứa nó. Việc này giúp bạn dễ dàng chỉnh sửa từng đối tượng trên mỗi Layer mà không làm ảnh hưởng đến các đối tượng khác trên Layer khác. - Bạn tạo một Layer mới và kéo thả file ảnh vào trang thiết kế Flash. File đó sẽ nằm trên Layer mà bạn vừa tạo. - Bức ảnh có thể quá to hoặc bị nhỏ. Bạn hoàn toàn có thể thay đổi được kích thước của chúng bằng công cụ Free Transform Tool (Q) . Khi bạn chọn vào công cụ này, xung quanh bức ảnh sẽ có những nút vuông màu đen, bạn giữ chuột để kéo làm thay đổi kích thước của ảnh. Nếu bạn muốn thay đổi độ lớn mà giữ nguyên tỉ lệ chiều cao và chiều ngang, bạn giữ phím Shift khi thay đổi kích thước. - Để cho bức ảnh mờ đi làm nền, bạn phải biến đối tượng ảnh đó thành một Movie Clip. Bạn nhấn phím F8. Tích vào ô Movie Clip và nhấn OK. Đối tượng ảnh đã chuyển sang dạng Movie Clip. Bạn chọn vào đối tượng này và trong bảng properties, mục Color, bạn chọn Alpha. Ở ô thông số, bạn gõ vào là 30% hoặc bạn nhấn vào mũi tên nhỏ và kéo thanh trượt xuống cho hình mờ đi. • Flash có một tuyệt chiêu giúp bạn làm cho những bức ảnh ẩn hiện và thay đổi ảnh. Cách làm không khó, chỉ cần bạn làm đúng theo các bước sau: - Bạn cũng đưa một bức ảnh vào, thu nhỏ, biến nó thành đối tượng Movie Clip như phần trên. - Bạn dùng công cụ Selection Tool (V) nhấn đúp vào đối tượng Movie Clip này. Như vậy bạn đã ở trong Movie clip này. - Trong Movie Clip (đoạn phim) này, bạn sẽ tạo ra nhiều Layer (Insert Layer), mỗi Layer bạn sẽ để một bức ảnh. Mỗi bức ảnh bạn sẽ lại nhấn F8 và chuyển nó sang định dạng Movie Clip. Các bức ảnh này nằm trên cùng 1 vị trí. - Sau đây ta sẽ làm cho chúng thay nhau xuất hiện. Ở bức ảnh thứ nhất (photo 1), trên Time line (dòng thời gian), bạn chọn frame 20, nhấn F6 để tạo một Key Frame. - Tiếp tục nhấn F6 ở Frame 5 và Frame 15. - Chọn Frame 1 và Frame 20, kéo Alpha trong mục Color xuống bằng 0%. - Nhấn chuột phải vào Frame trong khoảng giữa của Frame 1 và Frame 5, giữa của Frame 15 và Frame 20, chọn Creat Motion Tween. - Làm tương tự như trên với các bức ảnh còn lại (photo 2, photo 3, …) - Bôi đen cả Time line của bức ảnh thứ 2 (photo 2) và dịch chuyển sao cho Key frame thứ nhất nằm ở frame 20. - Bôi đen cả Time line của bức ảnh thứ 3 (photo 3) và dịch chuyển sao cho Key frame thứ nhất nằm ở frame 40. - Để kéo dài thời gian xuất hiện của ảnh, bạn chỉ cần kéo dài thêm frame xuất hiện của mỗi bức ảnh (khoảng giữa 2 Key Frame có Alpha = 100%): Nhấn vào frame ở giữa, nhấn F5 trên bàn phím để chèn thêm frame. - Dùng công cụ Selections Tool (V) nhấn đúp ra ngoài vùng có ảnh bạn sẽ thoát ra khỏi Movie Clip chứa nhiều Movie Clip nhỏ này. 5. Chiết xuất file: - Sau khi hoàn thành, banner của bạn có thể được sắp xếp như ví dụ sau: - Bạn lưu file Flash này lại: vào File chọn Save. Bảng Save As hiện ra, bạn điền tên file và chọn nơi lưu giữ file này trong máy tính và nhấn OK. - Bạn giữ phím Ctrl và nhấn Enter. Như vậy Flash đã xuất ra một file SWF ngay cạnh file mà bạn vừa lưu. Đây chính là file banner bằng Flash của bạn.  Ghi chú - Thủ thuật: - Bạn có thể tạo một Layer làm Layer mặt nạ (Mask) cho Layer chứa Movie Clip. Trên Layer đó bạn vẽ một hình bằng công cụ Pen Tool (P). Movie Clip có các ảnh chuyển đổi sẽ chỉ hiện ra trong hình mà bạn vẽ. (Tìm hiểu thêm về cách tạo mặt nạ trên http://daotao.violet.vn)  Ghi nhớ: - Luôn luôn lưu ý đến lớp (Layer). Mỗi đối tượng ta để ở một lớp khác nhau để dễ dàng quản lý. - Chú ý khi ta đang làm việc trong Movie Clip. Khi mới làm bạn rất dễ nhầm lẫn mình đang nằm trong Movie Clip nào.  Bài tập: - Thiết kế một banner kích thước 770 x 170 pixel. - Nội dung mang tên của đơn vị mình - Có logo (hoặc không) - Có ảnh minh họa thay đổi. Có ảnh nền mờ phía dưới chữ. - Bố cục khác với ví dụ của giáo trình. . Giáo trình Thiết kế banner cho trang web bằng Flash Người viết: Đỗ Mạnh Hà  Mục đích: - Tự thiết kế được banner (đầu đề) cho website. phím Ctrl và nhấn Enter. Như vậy Flash đã xuất ra một file SWF ngay cạnh file mà bạn vừa lưu. Đây chính là file banner bằng Flash của bạn.  Ghi chú - Thủ