Thiết kế giao diện bằng Flash kết hợp photoshop

Sử dụng kết hợp photoshop và các công cụ của Flash để thiết kế giao diện web.



(Kết quả)

Bước 6

Chuẩn bị hình ảnh minh họa cho các nút bằng photoshop.

Khởi động photoshop è mở file index.psd ở bài lab3.

Nhấn F7 mở bảng layer è xóa layer background để có nền trong suốt.

Sử dụng công cụ slide tool è vẽ các vùng chọn hình chữ nhật để chia cắt hình ảnh các nút.










Chọn file / Save for web để tối ưu hóa hình ảnh cho web è chọn các tham số theo hình.




Bước 7
Layout trang index.fla bằng Flash

Tạo file flash mới

Ctrl + N è Ctrl + J è set thuộc tính cho file flash như hình (Màu background color: black)




Chèn hình nút vào thư viện Flash

File / Import / Import to Library è Chọn các hình nút cần chèn è Ok

Kéo thả các hình nút từ Library ra màn hình và sắp xếp vị trí phù hợp.




Bước 8
Thêm các nút có text

Vẽ hình tròn có troke: 4px

Chọn hình chon è F8 è chọn button và đặt tên home.




Định thuộc tính cho nút Home

Double click vào nút home và quy định các thuộc tính theo hình.




Nhấn chọn Scene 1 để trở về sân khấu chính è nhấn Ctrl + Enter để xem kết quả nút home (Khi con trỏ vào nút Home sẽ đổi màu).





Bước 9
Tạo link cho nút home

Chọn nút Home è Chọn Instance name trên thanh Properties nhập vào tên: home (Đây là tên để lập trình điều khiển).

Chọn lại nút Home è Nhấn phím F9 (mở bảng Action script) è nhập vào code để tạo link cho nút như sau.




URL: nhập vào lien kết (http://nhatnghe.com) .

Window: chọn _blank hoặc bỏ trống è quy định cửa sổ mở link (“_blank” è mở link trên cửa sổ mới).


Tags: Photoshop