Tài liệu Tạo giao diện với Flash 5 phần 13 docx

TẠO GIAO DIỆN TRANG WEB VỚI FLASH 5 (PHẦN 13)

Tạo giao diện cho trang thứ hai phần 4:
Bây giờ, hãy tạo một đoạn Movie Clip mới bằng cách chọn trên trình đơn Insert > New
Symbol, chọn Movie Clip trong hộp thoại Symbol Properties. Đặt tên cho Movie Clip này là
The Gioi Do Hoa trong mục Name.


Chọn công cụ Text Tool, nhập vào chuỗi ký tự với các thuộc tính như hình sau:

Nhấp phải chuột vào keyframe thứ nhất và chọn lệnh Create Motion Tween. Nhấp vào
keyframe 50 để chèn keyframe, sau đó nhấn phím F6.



Nhấp trở lại keyframe thứ nhất và chọn công cụ Scale để thu nhỏ kích thước ký tự này.

Sau khi thay đổi kích thước ký tự, bạn hãy di chuyển chuỗi ký tự này hướng lên trên một
chút, nhấn phím Shift trong khi di chuyển bằng các phím mũi tên để thẳng hàng.


Điểm khi báo tại vị trí bắt đầu

Nhấp vào keyframe cuối và chọn tiếp trên trình đơn Window > Actions. Nhấp chọn danh
mục Basic Actions lệnh Stop trong bảng Frame Actions.


Nhấn phím Enter để đoạn phim diễn hoạt, lúc đó bạn sẽ thấy chuỗi ký tự sẽ phóng lớn dần
và chạy từ trên xuống. Bạn hãy trở lại vùng làm việc chính và tạo mới Layer có tên là The
Gioi và kéo đoạn Movie Clip này vào vùng làm việc từ trong cửa sổ thư viện và đặt đoạn
phim ngay trên đầu scene.

Bây giờ bạn sẽ tạo thêm một Movie Clip khác là chuỗi ký tự “TỦ SÁCH STK” trong đó ký tự
“TỦ SÁCH” chạy từ bên trái vào giữa giao diện. Còn chuỗi ký tự “STK” chạy theo hướng
ngược lại từ phải vào giữa. Bây giờ hãy chọn trên trình đơn Insert > New Symbol và chọn
các thuộc tính giống như trong hình.


Nhập vào chuỗi ký tự “TỦ SÁCH” với thuộc tính như trong hình.

Tạo cho chuỗi ký tự chuyểân động theo đường dẫn Create Motion Tween và cho chuỗi ký tự
chuyển động từ trái sang. Nhấp chuột tạo mới Layer và dùng công cụ Text Tool nhập vào
chuỗi ký tự “STK”. Cho chuỗi này chuyển động theo cách Create Motion Tween. Bạn có thể
xem lại cách đối tượng chuyển động theo đường dẫn dùng lệnh Create Motion Tween trong
các bước trước đó. Cho chuỗi ký tự này chuyển động theo hướng từ phải chạy ra đến giữa
giao diện rồ
i dừng. Khi đó hai chuỗi ký tự “TỦ SÁCH” và “STK” gặp nhau.

Nhấp vào keyframe 70 và nhấn phím F6 trên từng Layer để cho khi diễn hoạt hai chuỗi ký
tự gặp nhau và dừng chuyển động một khoảng thời gian là 10 frame.



Nhấp trở lại giao diện và tạo mới Layer có tên Layer Tu Sach. Sau đó kéo đoạn Movie Clip
vừa tạo trong cửa sổ thư viện vào Layer này và đặt nó nằm bên dưới chuỗi ký tự “THẾ GIỚI
ĐỒ HỌA”.


Nhấn phím Ctrl + Enter để xem đoạn phim diễn hoạt.

Tạo giao diện cho trang thứ hai phần 5:
Bây giờ bạn có thể đưa một biểu tượng logo mà bạn đã vẽ bằng Corel hay Illustrator ở bên
ngoài (nhớ lưu dưới định dạng .AI). Sau đó nhấp vào trong giao diện Flash bằng cách chọn
File > Import. Chọn file cần nhập có trong hộp thoại Import sau đó nhấp chọn vào nút
Open.




Nhấn phím Ctrl + Enter để xem vị trí logo trong vùng đoạn phim đang diễn hoạt.

Chú ý: Nếu bạn vẽ biểu tượng logo bằng Corel, bạn hãy xuất file vẽ trong Corel Draw đó
sang định dạng .ai của Adobe Illustrator. Nhờ đó mà bạn có thể import vào trong Flash mà
không thấy ảnh nền của logo. Lúc đó bạn có thể bỏ vùng ảnh nền có trên logo để giữ lại các
đường viền của đối tượng.

Sau đó, bạn có thể thêm vào một số nút bên dưới trang này để liên kết đến một trong các
trang kế tiếp.


Để tạo các nút trên, chỉ cần nhấp phải chuột vào nút bắt đầu trong thư viện và chọn lệnh
Duplicate để những nút này có các thuộc tính giống như nhau.


Khi đó bạn chỉ cần đặt tên lại cho nút đó trong hộp thoại Symbol Properties và thay đổi ý
nghĩa của nút đó trong vùng hiệu chỉnh.


Nhấp đúp chuột vào nút hiển thị ở cửa sổ thư viện để vào chế độ hiệu chỉnh.

Lặp lại các bước trên để tạo ra một số nút mong muốn và khi diễn hoạt trong Flash Player,
bạn nên gán các hành động cho từng nút này liên kết đến một scene nào đó phù hợp với
chứ năng của nút đó. Ví dụ như nút giới thiệu thì phải liên kết đến trang giới thiệu về công
ty hoặc đơn vị nào đó v . v. . .

Bây giờ giả sử rằng bạn đã tạo ra các nút “GIỚI THIỆU”, “SÁCH”, “TRỞ VEà” và “CÂU HỎI”.
Nhấp vào trình đơn Modify > Scene, thay vì nhấp vào nút dấu cộng trong bảng Scene để
thêm một vài Scene có tên tương ứng với các nút trên. Do bạn muốn tất cả các trang liên
kết với nhau đề có cùng chung một giao diện mà bạn vừa mới thực hiện như trên. Bạn hãy
nhấp chuột vào Scene có tên TRANG 1 nhấp vào nút Duplicate tại đáy của bảng Scene và
chỉ cần đặ
t tên lại Scene đó.


Khi đó bạn chỉ cần nhấp chuột vào góc phải trên của bảng Timeline và chọn Scene bạn
muốn hiệu chỉnh nội dung bên trong cho phù hợp Scene đó.


Khi đó trong từng Scene bạn mới thêm vào, bạn sẽ xóa đoạn phim Xem- Học-Ứng dụng mà
đã tạo ra trong phần trước đó.

Sau đó bạn hãy sắp xếp các nút này nằm trên trang giao diện sao cho nó phù hợp với nội
dung của phần đó.

Chú ý: Nếu bạn muốn nhập vào phần văn bản cho trang hiển thị, bạn có thể nhập văn bản
trong Word, sau đó copy và dán vào trong Scene cần hiển thị. Có một điều là bạn phải sắp
xếp các ký tự này cho chúng canh đều vùng văn bản trong Scene đang làm việc giống như
ảnh minh họa dưới:

Ghi chú: Bạn có thể dùng hộp thoại Text Options (chọn trên trình đơn Window > Panels >
Text Opotions) để chọn kiểu đánh văn bản là Dynamic Text. Từ trước đến giờ bạn chỉ dùng
kiểu nhập ký tự là Static Text do vậy bạn phải hiệu chỉnh từng dòng nếu bạn sao chép từ
một chương trình văn bản. Nếu bạn dùng Dynamic Text thì sẽ không cần phải hiệu chỉnh gì
hết.


Đối với Scene có tên SACH, bạn có thể import vào một số ảnh JPG hoặc GIF để minh họa
cho phần này. Sau đó sắp xếp các ảnh này có cùng kích thước và sắp xếp chúng lại thành
hàng như trong hình.


Có thể biến đổi và phát triển thêm cho phần này bằng cách thêm vào các nút nằm bên dưới
ảnh. Các nút này có kích thước bằng kích thước ảnh và bạn sắp đặt cho các nút này nằm
bên dưới ảnh. Các nút này có màu giống như màu nền Background mà bạn đã chọn trong
Modify > Movie.


Khi diễn hoạt trong chế độ Flash Player, mỗi ảnh sẽ liên kết đến một trang khác. Vì vậy bạn
sẽ phải tạo thêm một số Scene nữa tương ứng với các ảnh đó. Cách tạo thêm các Scene có
thuộc tính giống nhau, bạn có thể xem lại các bước trên.


Dùng các đường guideline để xác định các vị trí của ảnh và làm ẩn các ảnh này bằng cách
nhấp chuột vào biểu tượng con mắt trên Layer cần làm ẩn. Sau đó đưa vào các nút nằm
trong các đường guideline đó.


Tắt Layer hiển thị trong vùng làm việc

Trước khi nhấn phím Ctrl + S để lưu file này, bạn hãy nhấn phím Ctrl + Enter hoặc chọn
trên trình đơn Control > Test Player để diễn hoạt tất cả các trang có trong đoạn phim này ở
chế độ Flash Player.


Chúc các bạn thành công!
