Vẽ đường thẳng và đường tròn bằng Macromedia flash

GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 VẼ ĐƯỜNG THẲNG VÀ VÒNG TRÒN BÀI TẬP 1 : VẼ KHỐI CHỮ NHẬT Các bạn vừa qua đã làm quen các công cụ vẽ đường thẳng. Bây giờ hãy bắt đầu vẽ một số kết quả dựa trên các đường thẳng. Hãy thử vẽ khối chữ nhật như hình bên. Giống như các bài tập thực hành đồ họa, việc đầu tiên các bạn phải chọn kích thước. Chọn Modify > Movies , hộp thoại Movie Properties xuất hiện. Hãy chấp nhận những tham số mặc đònh trong hộp thoại sau đó nhấp chuột vào nút OK. Kế tiếp hãy đặt lưới bằng cách chọn trình đơn View > Grid > Show Grid Lập tức lưới sẽ xuất hiện trên cửa sổ làm việc của Flash. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 76 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Bây giờ bạn hãy chọn công cụ Line Tool để vẽ một hình khối chữ nhật. Hãy nhấp vào một điểm trong lưới chỗ hai đường chéo giao nhau. Sau đó kéo qua đường chéo của bốn ô vuông lưới, rồi kéo thêm nhiều đường thẳng bạn sẽ có hình như sau. Tiếp tục kéo thêm hai đường nữa bạn đã hoàn tất khối chữ nhật. Dùng công cụ mũi tên chọn toàn bộ khối chữ nhật sau đó chọn trình đơn Edit > Copy để lưu nó vào clipboard và chọn lệnh Edit > Paste bạn sẽ dán thêm một khối chữ nhật rất nhanh chóng vào cửa sổ làm việc, nối thêm bốn đường thẳng bạn sẽ nối được hai khối chữ nhật vào với nhau, và nếu được tô thêm màu nó sẽ trở nên tuyệt đẹp như hình bên. Các bạn sẽ học tô màu ở chương sau. BÀI TẬP 2 : VẼ THƯỚC Ê KE Cũng với công cụ Line Tool sau khi vẽ các đường thẳng, các bạn sẽ tạo được cây thước Ê-Ke thật dễ dàng Bước còn lại khó hơn dành cho các bạn là làm sao : vạch đều các khấc chia độ. Các bạn hãy xem thử thước mẫu để có ý tưởng thiết kế. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 77 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 BÀI TẬP 3 : VẼ CÂY CỌ VẼ Bài tập này các bạn tiến hành vẽ một cây cọ như hình bên. Phần lông cọ là phần phải vẽ đầu tiên, đây cũng là phần khó nhất trong bài tập nầy. Đầu tiên dùng công cụ Line Tool bạn kéo từ dưới lên, xong rồi kéo ngang kế tiếp kéo xuống để vẽ đầu cọ. Để vẽ lông co,ï tiến hành kẻ thêm vài nét dài ngắn khác nhau. Ở đây ta vẽ thêm ba nét. Dùng công cụ mũi tên kết hợp với phím Shift bạn chọn ba nét vừa vẽ (Khi chọn nét nào ta thấy có những vệt lấm chấm như kiến bò trên nét đó), nhấp vào trình đơn Edit > Copy để lưu 3 nét vào clipboard kế tiếp chọn Edit > Paste. Những nét dài ngắn sẽ được nhân bản. Tiếp đó chúng ta lật theo hướng ngang bằng cách nhấp vào Flip Horizontal từ trình đơn Modify > Transform > Dùng công cụ mũi tên kết hợp với phím Shift chọn hết ba vạch vừa xoay xong. Dùng các phím mũi tên đưa ba vạch đó gắn liền với ba vạch đầu tiên, xong dùng công cụ mũi tên kết hợp với phím Shift chọn hết rồi nhân bản bằng cách chọn Edit > Copy rồi sau đó chọn Edit > Paste. Tiếp tục dùng công cụ mũi tên kết hợp phím Shift chọn hết rồi dùng các phím mũi tên gắn kề bên các vạch vừa tạo xong. Tới đây phần lông cọ coi như giải quyết xong. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 78 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Kế tiếp là vẽ phần đầu cọ. Đầu tiên bạn chọn công cụ Line Tool kéo một đường ngang sau đó xổ xuống một đường xiên, tiếp tục kéo đường ngang nhỏ sau đó trổ trở lên đường xiên. Bạn đã hoàn tất đầu cọ (nhớ bổ xung thêm hai vạch thẳng cho đầu cọ thêm sinh động) Cứ tiếp tục như trên bạn sẽ hoàn tất phần thân cọ. Cũngï giống như đầu cọ bạn kẻ thêm một vạch dài cho thêm sinh động. Cuối cùng cây cọ đã hoàn tất. Nhớ lưu lại kết quả. BÀI TẬP 4 : VẼ MỘT MẪU GẠCH BÔNG Muốn vẽ một mẫu gạch bông như hình dưới, đầu tiên các bạn phải thiết lập các đường lưới. Kế đó bạn phải dùng công cụ Line Tool kéo mỗi cạnh đơn vò bằng 5 ô lưới. Chúng ta sẽ được một hình vuông. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 79 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Tiếp tục dùng công cụ Line Tool kẻ đường chéo của một ô lưới như hình bên dưới. Kế tiếp kẻ đường chéo phía đối diện. Xong bạn kẻ đường chéo của bốn ô vuông. Và cũng với công cụ Line Tool bạn kẻ hai đường chỉ màu nâu chạy dọc theo các đường chéo. Dùng công cụ tô màu Paint Bucket Tool để đưa màu vào. Dùng công cụ mũi tên kết hơpï với phím Shift chọn những đường thẳng ngoài rìa hình vuông (chú ý sau khi chọn xong những đường thẳng có dạng chấm chấm), rồi xóa đi. Bước kế tiếp dùng công cụ mũi tên tạo marquee chọn hết vùng vẽ. Sau đó chọn lần lượt Edit > Copy rồi Edit > Paste để nhân bản những phần đã vẽ. Kế tiếp dùng con trỏ chuột nhấp vào Flip Horizontal từ trình đơn Modify > Transform. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 80 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Phần vừa mới tạo đã được lật ngang.Ta dùng các phím mũi tên di chuyển nó nằm sát lên phần đầu. Xong dùng công cụ mũi tên tạo marquee chọn hết. Rồi lần lượt chọn từ trình đơn Edit > Copy rồi Edit > Paste như cách trên trên để tạo một nhân bản mới. Kế tiếp bạn hãy dùng con trỏ chuột nhấp vào Flip Vertical từ trình đơn Modify > Transform > Flip Vertical. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 81 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Phần tạo mới đã được xoay xuống phía dưới. Dùng các phím mũi tên gắn liền chúng lại với nhau. Ta đã có viên gạch men hoàn hảo. Đối với các bạn có niềm mơ ước thiết kế các mẫu gạch men, ceramic, gạch bông thì nên luyện tập vẽ nhuần nhuyển về đường thẳng. Chẳng hạn như viên gạch Ceramic phía dưới thì các đường thẳng đóng vai trò vừa tạo nét vừa tạo hình,và nếu bạn đưa thêm màu sắc thích hợp vào mẫu các bạn sẽ có những mẫu rất đẹp khác nhau. Hãûy thử thiết kế một số mẫu khác. Cần chú ý khả năng kết nối giữa các viên gạch với nhau khi thiết kế. Nhớ lưu lại file để thực tập cho phần thực hành ở chương sau. BÀI TẬP 5 : TRANG TRÍ MỘT MẪU GẠCH BÔNG. Để tạo mẫu gạch như hình dưới Chúng ta hãy bắt đầu vẽ một hình vuông với đường lưới và công cụ quen thuộc là Line Tool. Chúng ta hãy kẻ bốn đường thẳng, đường cuối cùng sẽ nối lại là một hình vuông. Tiếp tục chúng ta chọn một vò trí, vò trí nầy cách các cạnh hình vuông khoảng ba ô lưới. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 82 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Từ vò trí đã chọn, kéo một đường thẳng về phía tay trái (nhớ nhấn phím Shift cho việc kẻ đường thẳng dễ dàng hơn). Tiếp tục vẽ, cứ cách ba ô lưới ta chọn một vò trí kéo thẳng đến một cạnh của hình vuông. Tiếp tục cho đến khi chúng ta đạt được bốn đường thẳng. Kế tiếp cũng ở một vò trí cách ba ô lưới ta cũng kẽ một đường thẳng đụng một cạnh của hình vuông (chú ý đường thẳng bây giờ rất ngắn). Chúng ta vẽ bốn đường thẳng ngắn tạo thành bốn ô vuông nhỏ. Tiếp tục vẽ ta có kết quả sau. Dùng công cụ xô sơn (Pain Bucket Tool). Chọn một màu tô và loại màu tô. Ta đưa màu nâu vào trong các hình vuông nhỏ. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 83 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Hình vuông ở trung tâm. Ta đổ màu cam vào. Còn lại bốn hình chữ nhật ta đổ màu vàng vào. Cuối cùng ta được một hình vuông hoàn hảo. BÀI TẬP 6 : VẼ PHỐI CẢNH Với các bài tập vẽ các đoạn thẳng trong 5 bài tập trước đã được thực hiện thì bài tập kế tiếp này sẽ dễ dàng với bạn. Bài tập này các bạn vẽ một hình khối chữ nhật trong không gian. Đầu tiên bạn hãy dùng chuột nhấp vào biểu tượng Show Info trên thanh Launcher. Hộp thoại Info sẽ xuất hiện. Bạn hãy dùng con trỏ chuột nhấp vào Tab Stroke Hộp thoại Stroke xuất hiện. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 84 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Dùng con trỏ chuột nhấp vào tam giác nhỏ ở góc phải phía trên của hộp thoại. Một hộp thoại mới xuất hiện, ta dùng con trỏ chuột chọn đường chấm chấm. Dùng công cụ Line Tool kẻ một đường thẳng ngang qua lưới. Đường này ta gọi là đường tầm mắt. Xác đònh vò trí một chấm bất kỳ cách đường tầm mắt hai ô lưới, Dùøng công cụ Line Tool kẻ một đường thẳng lên trên với độ cao chiếm 8 ô . Trong hộp thoại Info. Chọn Tab Stroke và bạn vẫn chọn đường đứt khúc. Bạn kéo từ đỉnh của đường thẳng đến đường tầm mắt. Và từ một điểm của đường tầm mắt ta kéo đến cạnh đáy của đường thẳng. Tương tự cũng với công cụ Line Tool ta kéo hai đỉnh còn lại về đường tầm mắt phía đối diện. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 85 [...]... PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Tiếp tục kẻ đường thẳng bất kỳ (chọn khoảng cách tùy ý) Đường thẳng này sẽ nối hai đường chéo chấm chấm tại hai đỉnh Kẻ đường thẳng bất kỳ (công cụ Line Tool) phía đối diện Đường này sẽ tiếp giáp hai đường chéo chấm chấm Kẻ đường chấm chấm từ đỉnh đường thẳng mới tạo về điểm hội tụ trên đường tầm mắt Kẻ thêm đường chấm chấm bên dưới... trước, cũng với hình Oval trục đứng và trục ngang Sau đó vẽ mắt, tròng đen và mũi TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 98 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Vẽ thêm miệng và hai khóe miệng bằng công cụ Pencil Tool Thêm cằm và hai mí mắt cũng bằng công cụ trên Kẻ thêm hai chân mày và tô đen bằng công cụ tô sơn Cuối cùng dùng... Flash 5 vẽ tuyệt vời hay chưa Bây giờ bạn hãy vẽ mũi cho nhân vật Sau đó hãy đưa nó vào vò trí thích hợp Kế tiếp dùng Pencil Tool vẽ miệng cho nhân vật Vẽ gò má, lổ tai và tóc cũng dùng công cụ đó ( Pencil Tool) TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 95 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Vẽ thêm chân mày, con ngươi và tròng... THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 BÀI TẬP 7 : VẼ BẰNG ĐƯỜNG THẲNG VÀ VÒNG TRÒN Các bạn hãy thử vẽ 3 hình đơn giản sau : nhà, gà con, đóa vi tính Cần chú ý khi vẽ đóa vi tính, một số hình chữ nhật có bo tròn ở góc nên xem đóa thực tế để vẽ chính xác BÀI TẬP 8 : VẼ NÂNG CAO Một trong những thế mạnh của Flash là làm các đoạn phim cho các đối tượng chuyển động sau đó xuất sang... KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Tạo thêm con mắt phía đối diện Hình 9f Hình 9g Tiếp tục chọn công cụ Oval Tool vẽ hình Oval tạo mũi nhân vật rồi gắn vào chỗ thích hợp Sử dụng Pencil Tool vẽ miệng nhân vật rồi gắn vào đúng vò trí như hình dưới Hình 9h Hình 9i Vẽ thêm cằm và gò má nhân vật Hình 9j Hình 9k Vẽ thêm lỗ tai, tóc và cằm của nhân vật Hình 9l Hình... mặt là ảnh cần phải vẽ đầu tiên Hình 8 Hình 9 Hình 10 Hình 11 Trước tiên các bạn hãy vẽ hình 8 Để cho việc vẽ được dễ dàng các bạn cần phải hiển thò lưới như các bài tập trước đây Dùng công cụ Oval Tool kết hợp với phím Shift vẽ một vòng tròn như hình (hình 8a) Từ tâm vòng tròn kẻ một đường thẳng đi lên (hình 8b) Đường thẳng này xem như là trục của đầu nhân vật Dùng công cụ Oval Tool vẽ thêm một hình... hình Oval vào vò trí thích hợp Dùng chuột nhấp chọn công cụ Pencil Tool trên thanh công cụ, sau đó dùng công cụ này vẽ hai bên gò má TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 90 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Vẽ tiếp miệng và cằm Vẽ tiếp hàm dưới và lỗ tai Hãy nhớ là cũng với công cụ Pencil Tool, vẽ thêm chân mày và tóc Cuối... hai hình Oval trùng với tâm vòng tròn Tiếp tục dùng công cụ Line Tool vẽ phần trục đầu phía dưới Hình 8g Hình 8h Đường trục nằm khuất trong hình cầu (hình 8g) Chúng ta phải tạo nó thành đường chấm chấm bằng cách vẫn sử dụng hộp thoại Stroke Chọn tab Stroke, sau đó dùng con chuột nhấp chọn đường chấm chấm Xong nhấp chọn trở lại đường trục Bây giờ đường thẳng đã trở thành đường chấm chấm (hình 8h) Từ trình... sơn vẽ thêm con ngươi và tròng mắt đen Sau đó dùng công cụ mũi tên chọn và xóa hết những đường cấu trúc như hình dưới Cuối cùng bạn đã có một gương mặt diễn xuất như sau TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 93 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 BÀI TẬP 10 Trong hai bài tập trước bạn đã quen dần với cấu trúc hình tròn, ... thêm một con mắt và một con ngươi giống y như vậy và đặt phía đối diện TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 99 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 Hãy tạo mũi nhân vật bằng công cụ Oval Tool hoặc bằng Pencil Tool rồi dùng các phím mũi tên đưa vào vò trí như hình bên dưới Dùng Pencil Tool kẻ thêm miệng, cằm và gò má Cũng với . MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 VẼ ĐƯỜNG THẲNG VÀ VÒNG TRÒN BÀI TẬP 1 : VẼ KHỐI CHỮ NHẬT Các bạn vừa qua đã làm quen các công cụ vẽ đường thẳng. Bây giờ hãy bắt đầu vẽ. TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 3 BÀI TẬP 7 : VẼ BẰNG ĐƯỜNG THẲNG VÀ VÒNG TRÒN Các bạn hãy thử vẽ 3 hình đơn giản sau : nhà, gà con, đóa vi tính Cần chú ý khi vẽ đóa. Info. Chọn Tab Stroke và bạn vẫn chọn đường đứt khúc. Bạn kéo từ đỉnh của đường thẳng đến đường tầm mắt. Và từ một điểm của đường tầm mắt ta kéo đến cạnh đáy của đường thẳng. Tương tự