THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY TẠ O FILLING PILL Trong bài tập thực hành này bạn sẽ tạo ra một đối tượng dạng hình ống và vùng màu sẽ đổ từ trái sang để làm đầy đối tượng hình ống này. Các bạn sẽ dùng nhiều lần công cụ Rectangle Tool và pha chế màu Gradient. Vì các đối tượng có dạng hình trụ hoặc hình ống nên bạn dùng màu tô gradient sẽ trông thực hơn. Các bước tiến hành như sau: Nhấp chọn vào trìh đơn File > New để tạo mới file nếu bạn chưa có file mới trong vùng làm việc. Nhấp chuột vào trình đơn Insert > New Symbol để tạo một symbol graphic. Chọn các thuộc tính như sau vào trong hộp thoại Symbol Properties. Nhấp chọn vào công cụ Rectangle Tool và chọn vào vùng công cụ Round Rectangle Radius. Nhập giá trò 20 points vào trong hộp thoại Rectangle Settings để vẽ hình chữ nhật có các góc bo thật tròn Nhấp chọn màu viền cho đối tượng là màu trắng, nhấp chọn vào vùng màu tô chọn màu gradient. Bạn nên chọn màu gradient sáng có trong bảng phối màu như sau : Nhấp chọn trên trình đơn Window > Panels > Fill. Nhấp chọn tiếp vào mục Linear Gradient, tạo các con trượt màu (bạn có thể xem trong các bài tập trước cách pha màu tô Gradient) để có được các màu như hình bên. Con trượt màu bên phải (4) là màu xanh đen, con trượt kế đó (3) có giá trò màu hex là #0068D0. con trượt màu (2) màu trắng, con trượt bên trái (1) giá trò hex là #0060FF. 1 2 3 4 Con trượt màu trắng THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 86 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Vẽ vào vùng làm việc đối tượng hình chữ nhật thẳng đứng, sau đó dùng công cụ Rotate của công cụ Arrow Tool để xoay đối tượng cho nó nằm ngang. Đối tượng sau khi xoay 90 0 Sau đó dùng công cụ Scale thu nhỏ kích thước đối tượng này. Nhấp chuột trở lại Scene1 và chọn trên trình đơn Modify > Movie, nhập vào mục Dimension kích thước 216 x 72 px. Nhấp phải chuột vào biểu tượng ảnh graphic Ong nho trong thư viện và chọn lệnh Duplicate. Nhập vào tên Khung rong trong hộp thoại Symbol Propeties. Nhấp đúp chuột vào cửa sổ thư viện của đối tượng vừa sao chép để hiệu chỉnh, sau đó nhấp đúp chuột vào đối tượng để chọn cả màu đường viền lẫn màu tô của đối tượng Khung rong này. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 87 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Nhấp chọn tiếp vào trình đơn Window > Panels > Stroke, nhấp chọn vào trong hộp Stroke height để chọn giá trò là 3. Lúc này bạn hãy chọn màu cho đường viền là màu xanh đậm. Nhấp chuột vào vùng màu tô bên trong màu viền và xoá đối tượng này đi. Tạo mới symbol có tên Thanh ong bằng cách nhấn phím Ctrl + F8 trong hộp thoại Symbol Properties chọn Graphic. Dùng công cụ Rectangle Tool và nhấp chuột vào công cụ Round Rectangle Radius, trong hộp thoại Rectangle Settings nhập giá trò 0. Màu tô trên đối tượng này giống như màu trước đó và xoá màu viền đối tượng sau khi vẽ. Vẽ hình chữ nhật thẳng đứng sau đó dùng công cụ Rotate để xoay đối tượng theo phương nằm ngang. Dùng công cụ Rotate xoay đối tượng nằm ngang Bây giờ bạn nhấp chọn lại công cụ Rectangle Tool và nhấp chọn vào vùng công cụ Round Rectangle Radius. Sau đó xác đònh giá trò trong hộp thoại Rectangle Settings là 20. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 88 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Lặp lại các bước trên để tạo được hình như sau, màu tô của đối tượng là màu trắng. Bây giờ bạn hãy di chuyển đối tượng này đặt chính xác lên trên đối tượng Thanh ong. Di chuyển đối tượng vào đúng vi trí giữa Bạn hãy xác đònh cho đối tượng nằm giữa đối tượng hình chữ nhật, sau đó xoá đối tượng có lớp màu trắng để hình chữ nhật bây giờ trông giống như sau. Đối tượng sau khi xoá lớp màu trắng Dùng công cụ Scale kéo nhỏ kích thước của đối tượng, nhấp chọn biểu tượng có tên Khung rong vào trong vùng làm việc và đặt lên đối tượng khung nằm ngang sao cho đối tượng Khung rong là đường viền bên trong của đối tượng này. Dùng công cụ Scale kéo kích thước của đối tượng Khung rong sao cho nó có kích thước bằn g với kích thước của đối tượn g màu trắn g . Bây giờ bạn hãy tạo mới graphic có tên Cham tron (nhấn phím Ctrl + F8) và dùng công cụ Oval Tool vẽ vào vùng tròn có màu tô Gradient như sau, bạn hãy xoá đường màu viền. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 89 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Nhấp chọn trong trình đơn Window > Panels > Fill để hiển thò bảng Fill. Khi bạn chọn màu tô gradient sẽ có hai con trượt màu hai bên trong bảng Fill. Nhấp chọn vào phía bên trái hoặc phải của bất kỳ con trượt nào và kéo sang trái hay phải để thêm vào một con trượt khác - con trượt thứ ba. Muốn xoá một con trượt màu bạn chỉ cần kéo con trượt đó xuống bên dùi đáy bảng Fill. 1 2 3 Con trượt bên trái (1) chọn màu trắng, con trượt giữa (2) chọn màu đỏ có giá trò màu hexa là #F20000 và con trượt bên phải (3) chọn màu đen. Sau đó bạn hãy vẽ vào một vòng tròn có kích thước rất nhỏ, dùng công cụ Zoom Tool phóng lớn vùng làm việc lên đến 900% và vẽ đối tượng như hình bên dưới. Bây giờ bạn hãy tạo mới một symbol graphic có tên Tru dung (nhấn phím Ctrl + F8) và dùng công cụ Rectangle Tool, nhấp chọn vào vùng công cụ Round Rectangle Radius. Sau đó xác đònh giá trò trong hộp thoại Rectangle Settings là 0. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 90 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Vẽ vào vùng làm việc đối tượng hình trụ thẳng đứng có kích thước nhỏ, dùng công cụ Zoom Tool để phóng lớn vùng làm việc để vẽ đối tượng như hình bên. Màu viền đối tượng không có, màu tô giống với màu của các hình trụ trước đó. Nhấp chuột vào nút Scene1 để trở về vùng làm việc chính. Nhấp chuột vào công cụ Rectangle Tool và vẽ vào vùng làm việc đối tượng hình vuông có màu đỏ sậm (giá trò màu hexa là #D00000), không có màu viền. Nhấp chuột vào frame 20 và nhấn phím F6, nhấp chuột trở lại keyframe đầu tiên và chọn trên trình đơn Window > Panels > Frame. Trong mục Tweening chọn chế độ Shape. Nhấp chuột vào keyframe 20 và dùng công cụ Scale kéo kích thước của đối tượng hình vuông dài ra để trở thành hình chữ nhật. Đối tượng đang ở chế độ phóng lớn THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 91 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Bây giờ bạn hãy nhấn phím Enter để xem đoạn phim diễn hoạt. Tạo mới Layer thứ hai và kéo biểu tượng graphic Ong nho trong cửa sổ thư viện vào trong vùng làm việc. Dùng công cụ Scale để xác đònh hai đối tượng trong hai lớp Layer đều bằng nhau, đối tượng trong Layer có thể lớn hơn một chút. Vò trí bên phải của đối tượng trong hai lớp Layer Đối tượng tổng thể ở chế độ phóng đại 400% Nhấp chuột vào keyframe thứ nhất của Layer2 (đối tượng ống nhỏ dài) và chọn trong trình đơn Window > Panels > Effect. Nhấp chọn hiệu ứng Alpha trong bảng Effect có giá trò là 50 để làm mờ chế độ màu của đối tượng. Khi đó bạn sẽ thấy lớp màu đỏ bên dưới trong lớp Layer1. Đối tượng mờ dần khi chọn hiệu ứng Alpha Nhấp chọn tạo mới Layer3 và kéo biểu tượng graphic Thanh ong vào trong vùng làm việc. Thay đổi kích thước của đối tượng sao cho lỗ rỗng của nó lọt vào đúng vò trí của đối tượng trong lớp Layer2. Tạo mới Layer4 và kéo biểu tượng Cham tron vào trong vùng làm việc từ cửa sổ thư viện. Phóng lớn vùng làm việc và đặt đối tượng nằm bên trái thanh ngang, sao đó copy THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 92 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY đối tượng chấm tròn này bằng cách nhấp đối tượng và nhấn phím Ctrl để tạo bản sao của đối tượng. Đặt đối tượng chấm tròn thứ hai bên trái đối tượng chấm tròn thứ nhất. Kéo biểu tượng Tru dung trong cửa sổ thư viện vào vùng làm việc đặt kế bên hai chấm tròn trước đó. Sao chép đối tượng này để có một bản sao cùng kích thước đặt kế bên như trong hình sau. Lặp lại các bước trên cho góc bên phải của đối tượng thanh nằm ngang. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 93 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Thu nhỏ đối tượng Nhấp chuột chọn trên trình đơn Control > Test Movie để kiểm tra đoạn phim. Đoạn phim đang diễn hoạt trong Flash Player Tương tự như trên bạn hãy làm đoạn phim khác, cách thực hiện cũng giống như bài này nhưng bạn hãy xoay đối tượng cho nó thẳng đứng và vùng màu chuyển động theo hai hướng ngược chiều nhau nếu bạn tạo ra hai đối tượng. Chúc các bạn thành công. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 94 . giá trò hex là #0 060 FF. 1 2 3 4 Con trượt màu trắng THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 86 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN. – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 92 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY đối tượng chấm tròn này bằng cách nhấp đối. xác đònh giá trò trong hộp thoại Rectangle Settings là 20. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 88 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH