Tài liệu Thiết kế giao diện với Flash 5 phần 1 docx

Các bước thực hiện giao diện này được mô tả chi tiết như sau: BẠN SẼ TẠO RA ĐOẠN PHIM CHUYỂN ĐỘNG Trang Web chủ này trông rất sinh động với hàng chữ chính là Giáo trình điện tử Flash 5 c

THIẾT KẾ GIAO DIỆN VỚI FLASH 5

Độ khó: 5/10

Bài tập thực hành trên nền Flash 5 nếu bạn dùng các phiên bản Flash mới hơn như Flash MX

2004, Flash 8 việc thực hành không ảnh hưởng nhiều

Trong bài thực hành này, bạn sẽ tạo ra giao diện của trang chủ cho giáo trình điện tử “ Tự học Flash” Các bước thực hiện giao diện này được mô tả chi tiết như sau:

BẠN SẼ TẠO RA ĐOẠN PHIM CHUYỂN ĐỘNG Trang Web chủ này trông rất sinh động với hàng chữ chính là Giáo trình điện tử Flash 5 cùng với Logo STK ở góc trái phía trên và các chữ Tủ sách STK xuất hiện ở góc phải phía trên tự động chuyển màu, phía dưới là một vệt màu mô tả việc nạp chương trình lần lượt xuất hiện từ trái sang phải minh họa cho việc nạp chương trình Điểm nổi bật và khó thực hiện nhất cho trang web nhưng cũng là trọng tâm của việc thiết kế giao diện này là: Khi di chuyển chuột ngang qua chữ Flash 5 trong trình duyệt Internet Explorer thì có các hàng chữ Xem thao tác bằng hình ảnh, Học nhanh chóng dễ dàng, Ứng dụng ngay những gì đã học hay các sao băng rơi xuống cùng với hiệu ứng âm thanh rất sống động

Để tạo ra giao diện Flash như trên các bước được tiến hành như sau: Khởi động Flash, tạo file mới có tên index, nhấp chọn tiếp vào trình đơn Modify > Movie để xác định kích thước của đoạn phim là 700 x 360 (Trong thiết kế Web trang chủ nên đặt tên là Index hay Homepage)

Nhấp chuột tiếp vào hộp màu Background Color để chọn màu đen cho lớp màu nền.

Bây giờ, bạn hãy tạo chuyển động cho Logo STK, đối với ký tự này bạn có thể vẽ trực tiếp trong Flash, CorelDraw hay Illustrator Nếu vẽ trong CorelDraw, hãy xuất đối tượng này sang định dạng ai (Illustrator) sau đó nhập vào Flash vì Flash không cho phép nhập định dạng của CorelDRAW Nhấp chuột chọn trên trình đơn Insert > New Symbol, chọn các thuộc tính trong hộp thoại Symbol Properties như sau:

Chú ý: Logo STK này là kết quả từ bài tập “Vẽ Logo STK”

Nhấp chọn tiếp vào trình đơn File > Import hoặc nhấn phím tổ hợp Ctrl + R, nhấp chọn file Logo STK với định dạng ai trong hộp thoại Import để nhập vào sau đó nhấp chuột vào nút Open

Ghi chú: Do trong file giao diện này xuất hiện trong nền đen, do vậy tất cả các màu tô lẫn màu nền của đối tượng bạn chọn đều hiện lên rất rõ và cũng rất dễ chọn màu

Bây giờ, tạo chuyển động thay đổi màu cho Logo này bằng cách nhấp chọn vào frame

200 từ Layer 1 và nhấn phím F6, nhấp phải chuột trở lại keyframe thứ nhất và chọn lệnh Create Motion Tween (Cần nhờ Logo này có màu đỏ)

Lúc này, một mũi tên chạy suốt từ Frame 1 tới Frame 200 Nhấn phím F6 tại frame 50 và

mở bảng Effects (chọn trên trình đơn Window > Panels > Effects)

Bảng Effects xuất hiện, chọn hiệu ứng Tint trong bảng này Nhấp chọn màu xanh dương (Blue) trong bảng màu

Lặp lại bước trên cho keyframe 100, 150 và 200 Tại những keyframe này bạn lần lượt chọn hiệu ứng màu xanh lá cây (Green), màu vàng đậm và màu trắng

Nhấp chuột vào vùng Scene1 để trở về giao diện chính của đoạn phim.

Tiến hành nhấn phím Ctrl + L để xuất hiện cửa sổ thư viện

Kéo biểu tượng Logo STK trong cửa sổ thư viện vào vùng làm việc và đặt tại góc trái phía trên của vùng làm việc Sau khi đặt Logo STK vào vị trí thích hợp trên màn hình nhấn phím Ctrl + Enter để xem Logo diễn hoạt

Ghi chú: Các bạn có thể tự thiết kế một Logo nào khác cũng như chọn màu theo ý thay vì dùng Logo của STK cũng như không nhất thiết phải theo các hướng dẫn trong sách Đơn giản nhất là chọn font chữ thích hợp sau đó nhập trực tiếp chữ STK từ bàn phím

Nhấp chuột trở lại vùng làm việc chính, tạo mới symbol có tên Tu_sach STK trong hộp thoại Symbol Properties (nhấn tổ hợp phím Ctrl + F8)

Dùng công cụ Text Tool nhập vào ký tự “TỦ SÁCH STK” Với các tham số như trong hình dưới Có thể chọn màu mong muốn cho ký tự (nhớ chỉ dùng Vietkey 4.09 không dùng Vietkey 2000) Nhấn phím F6 tại frame 200, nhấp phải chuột trở lại keyframe thứ nhất và chọn lệnh Create Motion Tween

Nhấn phím F6 tại frame 50 và chọn hiệu ứng màu xám trong bảng Effects có tên hiệu ứng Tint

Lặp lại bước trên tại frame 100, 150 và 200 với màu chọn là màu đỏ, xanh dương và xanh

lá Cuối cùng nhấn phím Enter để xem đoạn phim diễn hoạt