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. [...]... 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... 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... chuột vào vùng chọn cho đến khi con trỏ chuột có dạng chuột và kéo rê chúng đến vị trí mong muốn (như minh họa) , bạn hãy nhấp giữ 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. .. 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 Trong cửa sổ của Scene 1, hãy thu nhỏ vùng làm việc lại bằng cách nhấp vào mũi tên hướng xuống trên thanh trạng thái và chọn 50% Tiếp theo, nhấp chọn Grid > Show Grid để hiển thị lưới Sau khi hiển thị lưới, trên bảng Timeline nhấp chọn biểu tượng Insert Layer để chèn vào một layer mới sau đó nhấp đúp vào tên layer này... 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... > 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... đầu tiên của layer tieu chi sau đó nhấp kéo lần lượt các Symbol tieu chi 1, tieu chi 2 và tieu chi 3 từ vùng Preview của bảng Library vào vùng Stage như hình minh họa dưới (nhấn Ctrl+L để mở bảng Library) Bây giờ, hãy nhấn tổ hợp phím Ctrl + Enter để xem kết quả diễn hoạt Để hiển thị file flash này trên trình duyệt Web bạn nhấn phím F12 Chúc bạn thành công!   ... 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ư... 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ữ... 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ì . 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. 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