Kết hợp Flax và Flash trong việc tạo trang chủ Web

Chia sẻ: Lac Tran | Ngày: | Loại File: PDF | Số trang:22

Thêm vào BST

Báo xấu

208
lượt xem 73
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài tập này hướng dẫn bạn kết hợp chương trình tạo chữ động Flax vào trong Flash để làm trang web chủ. Thêm ba tiêu chí: “Xem thao tác bằng hình ảnh”, “Học nhanh chóng dễ dàng” và “Ứng dụng ngay những gì đã học” vào bên phải vòng tròn chữ. Các tiêu chí này được tạo từ chương trình Flax, mỗi tiêu chí gồm hai hiệu ứng khác nhau và các hiệu ứng này sẽ được ghép lại bằng chương trình Flash. Độ Khó: 3/10 Để bắt đầu công việc, hãy khởi động chương trình Flash bằng cách nhấp chọn...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Kết hợp Flax và Flash trong việc tạo trang chủ Web

KẾT HỢP FLAX 1.5 VÀ FLASH 5 TRONG VIỆC TẠO TRANG WEB CHỦ Bài tập này hướng dẫn bạn kết hợp chương trình tạo chữ động Flax vào trong Flash để làm trang web chủ. Thêm ba tiêu chí: “Xem thao tác bằng hình ảnh”, “Học nhanh chóng dễ dàng” và “Ứng dụng ngay những gì đã học” vào bên phải vòng tròn chữ. Các tiêu chí này được tạo từ chương trình Flax, mỗi tiêu chí gồm hai hiệu ứng khác nhau và các hiệu ứng này sẽ được ghép lại bằng chương trình Flash. Độ Khó: 3/10 Để bắt đầu công việc, hãy khởi động chương trình Flash bằng cách nhấp chọn Start > Programs > Macromedia Flash 5 > Flash 5. Cửa sổ Flash 5 xuất hiện.
Trong cửa sổ này, nhấp File > Open trên thanh trình đơn hoặc nhấn tổ hợp phím Ctrl+O. Cửa sổ Open xuất hiện. Tại cửa sổ này, hãy chọn thư mục đã lưu trữ file bai tap 1.fla tại khung Look in (ở đây chúng tôi lưu trong thư mục 01 flax_flash). Nhấp chọn file này (tên file này sẽ xuất hiện trong mục File name). Xong nhấp chọn Open.
File bai tap 1 được mở ra trong cửa sổ Flash. Lúc này, tiến hành lưu lại file này với một tên khác để có thể thực hiện những thay đổi mới mà không bị mất đi file dữ liệu ban đầu. Để thực hiện, nhấp chọn File > Save As trên thanh trình đơn hoặc nhấn tổ hợp phím Ctrl+Shift+S.
Cửa sổ Save As xuất hiện. Trong cửa sổ này, hãy chọn thư mục để lưu trữ file tại mục Save in. Tiếp theo, tại mục File name, bạn nhập tên mới cho bài tập này là bai tap 2 (đây là file mà bạn sẽ thực hiện công việc đưa các tiêu chí vào). Xong chọn Save để hoàn tất việc lưu trữ. Tiếp tục, bạn hãy định lại các thông số cho file này bằng cách nhấp chọn Modify > Movie trên thanh trình đơn hoặc nhấn tổ hợp phím Ctrl + M. Cửa sổ Movie Properties xuất hiện, tiến hành hiệu chỉnh các thông số sau: Frame Rate: 12 fps, Width: 700, Height: 500, Background Color: màu trắng, Ruler Unit: Pixels. Chọn xong nhấp OK.
Bây giờ, vùng làm việc đã được mở rộng, phục vụ cho việc đưa các tiêu chí vào. Tuy nhiên, yêu cầu của bài tập này là tạo ba tiêu chí bằng chương trình Flax. Vì thế, hãy khởi động Flax bằng cách chọn Start > Programs > start_flax.
Cửa sổ Welcome xuất hiện cho bạn hai mục chọn lựa là Order và OK. Nhấp OK bỏ qua việc đăng nhập mã vào chương trình này. Cửa sổ Flax xuất hiện gồm 4 cửa sổ con. Tại cửa sổ Movie Properties, bạn hãy định các thông số như sau: Width: 650, Height: 300, Fps: 20 và Background là màu trắng (#FFFFFF).
Tại cửa sổ Text Properties, trong mục text bạn nhập vào tiêu chí đầu tiên “Xem thao tác bằng hình ảnh”. Sau đó, định các thông số liên quan: X: 25, Y: 7, Font: VNI-Swiss-Extreme, cỡ chữ: 18, Spacing: 0 và màu chữ là màu đỏ (#FF0000). Tại cửa sổ Wave Fx Properties, chọn hiệu ứng Wave và định các thông số đi kèm: Length: 241, Height: 8, Duration: 34, X-Scale: 289, Y-Scale: 325, Fade: 6. Như vậy, bạn đã nhanh chóng tạo được hiệu ứng đầu tiên cho tiêu chí thứ nhất. Bây giờ, hãy tiến hành lưu giữ file này bằng cách nhấp chọn File > Export as SWF trên thanh trình đơn hoặc nhấn tổ hợp phím Ctrl + E. Cửa sổ Save As xuất hiện. Trong cửa sổ này, hãy lưu file này với tên ‘tieu chi 1’ sau đó nhấp Save.
Trở lại cửa sổ làm việc Flax, tiến hành thay đổi hiệu ứng cho tiêu chí này. Hãy giữ nguyên các thông số trên cửa sổ Movie Properties, trên cửa sổ Text Properties, hãy chọn màu chữ là xanh dương (#0000CC) và chọn hiệu ứng Rainbow cho tiêu chí này. Đi kèm với hiệu ứng, hiệu chỉnh các thông số đi kèm: Speed: 2, Color: lần lượt là #FF00CC, #FF0000, #0000FF, #FFCC00. Khi đã có một chọn lựa vừa ý, hãy lưu file này với tên ‘tieu chi 11’ cũng bằng cách chọn File > Export as SWF (hoặc nhấn Ctrl+E). Tiếp tục, nhập tiêu chí thứ hai “Học nhanh chóng – dễ dàng” vào mục Text trên cửa sổ Text Properties. Sau đó, chọn hiệu ứng Come in cho tiêu chí này cùng các thông số đi kèm như sau:
Duration: 25, Overlap: 90, Scale: 50, Direction chọn kiểu cuối cùng (các thông số không đề cập đến sẽ được giữ nguyên). Tương tự, bạn hãy lưu tiêu chí này lại với tên tieu chi 2. Sau đó, bạn đổi hiệu ứng Rainbow cho tiêu chí này với các thông số màu đi kèm như sau: #00FF00, #FF0000, #00000FF, #000000. Chọn xong, bạn hãy lưu lại với tên tieu chi 21. Cuối cùng, bạn hãy nhập tiêu chí thứ 3 “Ứng dụng ngay những gì đã học” vào mục Text trên cửa sổ Text Properties và chọn màu chữ với thông số màu là #006633. Tiếp tục, bạn chọn hiệu ứng Rotate cho tiêu chí này đồng thời hiệu chỉnh các thông số đi kèm như sau: Overlap: 76, Fade: 76.
Xong, lưu lại tiêu chí này với tên tieu chi 3. Bây giờ, bạn đổi hiệu ứng Rainbow cho tiêu chí này cùng với việc định lại thông số màu lần lượt như sau: #CC0033, #0000CC, #FFFF00, #00000. Và tiến hành lưu lại tiêu chí này với tên tieu chi 31. Chú ý: Tất cả những lưu trữ trên đều được thực hiện bằng cách nhấp chọn File > Export as SWF (hoặc nhấn Ctrl + E). Lúc này, bạn đã có được ba tiêu chí động (với hai hiệu ứng cho mỗi tiêu chí). Trở lại cửa sổ Flash. Trong cửa sổ này, bạn dễ dàng nhận thấy vòng tròn chữ và logo stk đang nằm ở góc trên trái màn hình làm việc. Vì thế, điều cần thực hiện bây giờ là dịch chuyển chúng đến một vị trí thích hợp hơn. Để thực hiện, hãy chọn cùng lúc cả hai layer bằng cách nhấn Shift rồi nhấp chọn vào hai keyframe của hai layer này hoặc dùng chuột kéo một khung chứa hai layer.
Sau đó, đưa chuột vào vùng chọn cho đến khi con trỏ chuột có dạng , bạn hãy nhấp giữ chuột và kéo rê chúng đến vị trí mong muốn (như minh họa). Tiếp tục, bạn sẽ bắt đầu công việc chính của mình là đưa ba tiêu chí đã tạo trước đó vào vùng trống phía bên phải vòng tròn chữ.
Trước tiên, bạn hãy nhập tiêu chí một “Xem thao tác bằng hình ảnh” vào bằng cách chọn Insert > New Symbol trên thanh trình đơn hoặc nhấn tổ hợp phím Ctrl + F8. Cửa sổ Symbol Properties xuất hiện. Nhấp chọn mục Movie Clip và tại mục Name hãy đặt tên cho Clip này ‘tieu chi 1’. Chọn xong nhấp nút OK. Bây giờ, cửa sổ làm việc hiện hành của bạn là trên Clip tieu chi 1. Trên thanh Timeline, bạn hãy đổi tên layer 1 thành tieu chi 1 bằng cách nhấp đúp chuột vào tên layer này. Sau đó nhập file tieu chi 1 đã tạo trong Flax vào bằng cách nhấp chọn File > Import hoặc nhấn tổ hợp phím Ctrl + R. Cửa sổ Import xuất hiện.
Trong cửa sổ này, chọn thư mục lưu trữ file tieu chi 1.swf (file đã lưu trong cửa sổ Flax) trong mục Look in. Nhấp chọn file này (tên file sẽ xuất hiện trong mục File name). Chọn xong, nhấp nút Open. Tiêu chí một “Xem thao tác bằng hình ảnh” xuất hiện trong cửa sổ Clip tieu chi 1. Bạn nhấp chọn Control > Play hoặc nhấn Enter để xem kết quả.
Tiếp tục, chèn thêm một layer vào bằng cách nhấp chọn Insert > Layer hoặc nhấp vào biểu tượng Insert Layer trên cửa sổ Timeline. Một layer mới được chèn vào với tên là Layer 2. Nhấp đúp chuột vào layer này và đổi tên thành tieu chi 11. Tiếp tục, trên layer tieu chi 11 bạn sẽ chèn file tieu chi 11.swf (đã được lưu từ Flax) vào bằng cách nhấp chọn File > Import hoặc nhấn tổ hợp phím Ctrl + R. Cửa sổ Import xuất hiện, bạn hãy chọn file tieu chi 11 sau đó nhấp Open.
Sau khi nhấp chọn Open, trên thanh Timeline của Layer tieu chi 11 xuất hiện một loạt các keyframe. Nhấn phím Enter để xem kết quả diễn hoạt.
Trong khi diễn hoạt Clip tieu chi 1, bạn thấy các keyframe trên hai Layer tieu chi 1 và tieu chi 11 diễn hoạt song song với nhau trông rất rối mắt. Đây không phải là điều mà bạn mong muốn. Tiến hành một số thao tác tiếp theo để nhận được kết quả: Khi diễn hoạt xong tất cả các keyframe trên Layer tieu chi 1 thì mới diễn hoạt đến các keyframe trên Layer tieu chi 11. Trước tiên, trên khung Timeline bạn nhấp chuột vào Layer tieu chi 11 để tiến hành tô đen toàn bộ Layer này. Sau đó nhấp giữ chuột và kéo thanh trượt cho đến khi nhìn thấy keyframe cuối cùng của Layer tieu chi 1. Tiếp tục, đưa chuột đến phần tô đen trên Layer tieu chi 11 cho đến khi con trỏ chuột có hình bàn tay với chữ Static bên dưới. Khi con trỏ chuột có hình bàn tay, bạn hãy nhấn giữ chuột và kéo rê toàn bộ các Frame trên Layer này về phía tay phải sao cho giáp với keyframe cuối cùng trên Layer tieu chi 1 (xem hình minh họa).
Khi thực hiện xong, bạn thả chuột. Kết quả sẽ giống như hình minh họa dưới: Bây giờ, bạn nhấp trở lại keyframe đầu tiên của Layer tieu chi 1 và nhấn phím Enter hoặc nhấp chọn Control > Play từ thanh trình đơn. Lúc này, trong quá trình diễn hoạt, bạn không còn nhận thấy sự trùng lấp của hai Layer này nữa. Trên thanh Timeline, đoạn keyframe từ 1 cho đến 73 là diễn hoạt của Layer tieu chi 1. Và đoạn keyframe từ 74 cho đến 145 là diễn hoạt của Layer tieu chi 11.
Như vậy là bạn đã hoàn tất Movie Clip tieu chi 1. Bước tiếp the, tạo Movie Clip tieu chi 2 để nhập hai file tieu chi 2.swf và tieu chi 21.swf với nội dung “Học nhanh chóng – dễ dàng” vào. Tương tự như với Movie Clip tieu chi 1, nhấp chọn Insert > New Symbol… hoặc nhấn tổ hợp phím Ctrl + F8. Hộp thoại Symbol Properties xuất hiện. Trong mục Name, nhập tên cho Clip này là tieu chi 2. Trong mục Behavior chọn Movie Clip sau đó nhấp OK. Sau khi nhấp chọn OK, trên Movie Clip tieu chi 2 bạn tiến hành các thao tác đổi tên Layer, thêm Layer sau đó nhập (import) file vào. Kết quả thực hiện như sau: Cũng như Movie Clip tieu chi 1, để tránh sự diễn hoạt trùng lấp giữa hai Layer tieu chi 2 và tieu chi 22, bạn hãy tô đen Layer tieu chi 22 sau đó đưa chuột đến vùng frame bị tô đen. Con trỏ chuột có hình bàn tay, nhấn giữ chuột và kéo rê cho đến khi Frame đầu tiên của
Layer tieu chi 21 giáp với Frame cuối cùng của Layer tieu chi 2. Kết quả thực hiện như hình minh họa. Khi thực hiện xong thao tác di chuyển Frame, nhấp trở lại keyframe đầu tiên trên Layer tieu chi 2 và nhấn phím Enter để xem kết quả diễn hoạt. Trên thanh Timeline, đoạn keyframe từ 1 đến 82 là diễn hoạt của Layer tieu chi 2. Và đoạn keyframe từ 83 đến 118 là diễn hoạt của Layer tieu chi 21. Như vậy bạn thực hiện xong Movie Clip tieu chi 2. Bây giờ, hãy thực các bước tương tự như trên để tạo Movie Clip tieu chi 3 với nội dung “Ứng dụng ngay những gì đã học”. Movie Clip này cũng có hai Layer là tieu chi 3 (nhập file tieu chi 3.swf) và tieu chi 31 (nhập file tieu chi 31.swf).
Tương tự như hai Movie Clip trước, hãy thực hiện các thao tác để loại bỏ sự trùng lấp hiệu ứng giữa hai Layer tieu chi 3 và tieu chi 31 trên Movie Clip tieu chi 3. Kết quả thực hiện giống như minh họa dưới: Cuối cùng, công việc quan trọng cần thực hiện là đưa 3 Movie Clip tương ứng với 3 tiêu chí vào bên phải của vòng tròn chữ. Bạn hãy thực hiện các thao tác sau: Trước tiên, để trở về màn hình chính, nhấp vào chữ Scene 1 (nằm bên trái chữ tieu chi 3) trên thanh Timeline.