Rectangle Tool, tọa độ và kích thước

Học Adobe Flash CS4 căn bản Flash CS4 - Bài 8: Rectangle Tool, tọa độ và kích thước TTO - Trong bài này, bạn sẽ tìm hiểu về tọa độ và kích thước cũng như làm quen với công cụ Rectangle Tool. Tọa độ và kích thước Để định vị chính xác một đối tượng bất kz trên Stage, bạn cần thiết lập tọa độ cho đối tượng thông qua giá trị X và Y của đối tượng. Để thiết lập kích thước cho đối tượng, bạn điều chỉnh thông số W và H của đối tượng đó (W viết tắt chữ width: chiều rộng, H viết tắt chữ height: chiều cao). Hệ thống trục tọa độ của Flash được xác định như sau: Trục X trùng với đường thẳng nằm ngang, Trục Y trùng với đường thẳng đứng. Gốc tọa độ X=0, Y=0 trùng với góc trên bên trái. Càng về bên phải gốc tọa độ, X sẽ có giá trị dương và giá trị này lớn dần khi đối tượng di chuyển sang phải. Càng xuống dưới gốc tọa độ, Y sẽ có giá trị dương và giá trị này lớn dần khi đối tượng di chuyển xuống dưới. Nếu đối tượng không phải là symbol, góc trên bên trái của đối tượng sẽ được dùng để định vị đối tượng trên Stage. Tọa độ X, Y của đối tượng so với gốc tọa độ được tính theo điểm này. Học Adobe Flash CS4 căn bản Nếu đối tượng là symbol, Registration Point sẽ được dùng để định vị đối tượng trên Stage. Tọa độ X, Y của đối tượng so với gốc tọa độ được tính theo điểm Registration Point này. Trong hình minh họa dưới đây, Registration Point chính là điểm có dấu +. Bạn thiết lập Registration Point bằng cách bấm chuột vào một trong 9 ô vuông bên phải dòng chữ Registration trong hộp thoại Convert to Symbol. Học Adobe Flash CS4 căn bản Để thay đổi giá trị X, Y, W, H bạn bấm chuột vào các ô bên cạnh các chữ X, Y, W, H trên Property Inspector, kế đến bạn gõ giá trị mới vào và bấm phím Enter. Bạn cũng có thể thay đổi các giá trị nói trên bằng cách kéo chuột như sau: Rê chuột vào ô có giá trị bạn muốn thay đổi, khi nhìn thấy chuột biến thành bàn tay có mũi tên hai chiều trên ngón trỏ xuất hiện, kéo chuột sang phải hoặc sang trái và nhìn thấy kết quả cập nhật ngay trên Stage. Nếu muốn giữ nguyên tỉ lệ kích thước W và H, bạn bấm vào sợi dây xích để khóa tỉ lệ cố định. Trong trường hợp mở khóa. Giá trị W và H sẽ thay đổi độc lập. Học Adobe Flash CS4 căn bản Tìm hiểu về màu Bạn thiết lập màu viền hoặc màu ruột cho hình chữ nhật bằng cách chọn màu từ bảng màu. - Bấm chọn vào một mẫu màu trong khu vực chứa màu solid để thiết lập màu đơn sắc (màu thuần). - Bấm chọn vào một mẫu màu trong khu vực chứa màu gradient để thiết lập màu tô chuyển. Học Adobe Flash CS4 căn bản Bạn có thể chọn màu bằng cách đưa chuột vào ô có số hex đến khi chuột biến thành bàn tay với mũi tên hai chiều trên ngón trỏ xuất hiện, kéo chuột sang phải hoặc sang trái và nhìn thấy kết quả cập nhật ở ô bên trái số hex. Màu cho web được hiển thị bằng số thập lục phân – số hex, số này được viết bắt đầu bằng dấu #, tiếp theo là sáu số liên tục, 2 số đầu đại diện cho màu đỏ (red), 2 số giữa đại diện cho màu xanh lục (green), 2 số cuối đại diện cho màu xanh lam (blue). Các giá trị này có thể thay đổi từ 00 đến FF, tương đương với từ 0 đến 255 trong hệ thập phân. Để điều chỉnh độ trong suốt của màu, bạn thay đổi giá trị Alpha trong ô số bên phải chữ Alpha. Giá trị 0 tương ứng với trong suốt hoàn toàn, có thể nhìn xuyên qua đối tượng để thấy những đối tượng nằm dưới. Giá trị 100 tương ứng với mờ đục hoàn toàn, không nhìn thấy những gì nằm phía dưới. Giá trị Alpha có thể gõ trực tiếp vào hoặc kéo sang phải hoặc sang trái giống như kéo giá trị số hex. Nếu không muốn có màu viền hay màu ruột thì bấm vào ô No color (ô Thiết lập không tô màu trong hình minh họa ở trên). Nếu muốn chọn màu khác, bạn bấm vào nút màu hình tròn ở góc trên bên phải (ô Mở hộp thoại chọn màu trong hình minh họa ở trên). Hộp thoại Color xuất hiện: Bạn có thể bấm chọn màu ở khu vực Basic colors hoặc chọn màu ở khu vực màu bên phải hoặc kéo thanh trượt hình tam giác bên phải để chọn hoặc gõ giá trị trực Học Adobe Flash CS4 căn bản tiếp vào các ô số. Sau đó bấm vào nút Add to Custom Colors và bấm OK để chấp nhận màu đã chọn. Màu đó sẽ được áp dụng cho đối tượng của bạn. Sử dụng Color Panel Bạn có thể sử dụng Color panel để thiết lập màu cho đối tượng: - Bấm chọn ô có cây bút chì để thiết lập màu viền. - Bấm chọn ô có thùng nước sơn để thiết lập màu ruột. - Bấm chọn ô đen trắng để thiết lập màu đen cho viền và màu trắng cho ruột. - Bấm chọn ô không màu để để thiết lập không màu cho viền hoặc ruột. - Bấm chọn ô hoán đổi màu để đổi màu viền thành màu ruột và ngược lại. Bạn có thể chọn màu bất kz từ vùng màu bên trên ô có số hex hoặc kéo thanh trượt hình tam giác bên phải hoặc gõ số trực tiếp vào ô số hex theo quy tắc đã giới thiệu ở phần trên hoặc gõ số vào ô R, G, B và Alpha hoặc kéo thanh trượt bên phải các ô này. Màu mà bạn chọn lựa sẽ được cập nhật ở ô Màu được chọn. Bấm vào mũi tên bên phải ô Type để chọn loại màu: Học Adobe Flash CS4 căn bản - None: thiết lập không màu cho viền hoặc ruột. - Solid: chọn màu thuần. - Linear Gradient: màu tô chuyển tuyến tính, đối tượng sẽ được tô màu chuyển đều từ các màu gốc theo hướng đường thẳng. - Radial Gradient: màu tô chuyển hướng tâm, đối tượng sẽ được tô màu chuyển đều từ các màu gốc theo hướng từ tâm ra. - Bitmap: dùng nội dung bitmap làm màu tô. (Xem ví dụ thực hành trong các bài tiếp theo) Sử dụng màu Gradient: Học Adobe Flash CS4 căn bản Bạn có thể chọn màu gradient để tô màu viền hoặc ruột cho đối tượng. Để thêm màu gốc cho màu hiện có bạn đưa chuột vào vùng có chứa các nút đại diện cho màu gốc, khi thấy xuất hiện dấu cộng phía dưới chuột thì bấm vào. Muốn xóa bớt màu gốc thì nắm kéo nút đại diện màu gốc ra khỏi khu vực các nút đại diện cho màu gốc. Muốn đổi màu gốc, bạn bấm đúp vào nút đại diện rồi chọn màu từ bảng màu. Bạn có thể bổ sung tối đa 15 màu cho màu gradient. Tuy nhiên, bạn cần lưu { là màu càng phức tạp sẽ làm tăng kích thước cuối cùng của tác phẩm và có thể làm cho tác phẩm chạy chậm nếu có chọn tween cho đối tượng. Chọn ô Linear RGB sẽ giúp màu gradient trông mượt hơn sau khi bạn thực hiện thao tác co dãn đối tượng đã được tô màu gradient. Tùy chọn Overflow giúp bạn thiết lập cách hiển thị màu gradient khi vùng cần fill có kích thước lớn hơn vùng ảnh hưởng của màu gradient. (Xem thêm phần Gradient Transform Tool trong các bài tiếp theo). Tìm hiểu về Rectangle Tool Để chọn Rectangle Tool, bạn bấm vào biểu tượng Rectangle Tool trên thanh công cụ: Học Adobe Flash CS4 căn bản Sau khi chọn Rectangle Tool, chuột sẽ chuyển sang hình dấu +. Để vẽ, bạn bấm chuột vào vị trí đầu, kéo chuột đến vị trí cuối và nhả chuột ra để thu được một hình chữ nhật. Nếu bạn giữ phím Shift trong khi vẽ, bạn sẽ thu được một hình vuông. Nếu trước khi nhả chuột ra, bạn bấm phím mũi tên xuống hoặc lên nhiều lần, bạn có thể thu được hình chữ nhật có góc bo tròn hoặc lõm vào. Bạn cũng có thể thay đổi góc bo tròn hoặc lõm vào bằng cách điều chỉnh các thông số trên Property Inspector. Property Inspector sẽ tự động cập nhật để cung cấp các thông tin liên quan đến Rectangle Tool như sau: Ngay dưới Property Inspector là biểu tượng một hình chữ nhật kèm dòng chữ cho biết bạn đang chọn Rectangle Tool Ngay dưới phần Fill and Stroke là phần chọn màu cho viền (Stroke-bên trái) và ruột (Fill-bên phải). Bạn chọn màu từ bảng màu khi bấm vào ô màu đen kế bên cây bút chì để thiết lập màu cho viền hoặc ô màu xanh bên phải kế bên thùng nước sơn để thiết lập màu cho Học Adobe Flash CS4 căn bản ruột của hình chữ nhật (xem thêm phần Tìm hiểu về màu bên dưới): Kế đến là chọn độ lớn của đường viền. Bạn có thể nắm kéo thanh trượt nằm ngay bên phải chữ Stroke hoặc gõ số trực tiếp vào ô bên phải. Khi bạn kéo thanh trượt, ô bên phải sẽ cập nhật giá trị tùy theo vị trí thanh trượt. Phần tiếp theo là chọn kiểu dáng cho đường viền. Nếu bạn bấm vào hình tam giác đen kế bên cây bút chì, bạn có thể chọn một trong các kiểu đường viền sau đây: Nếu bạn bấm vào cây bút chì, bạn có thể tùy biến thêm các thông số phụ cho đường viền trong hộp thoại sau đây: Học Adobe Flash CS4 căn bản Bạn có thể thử nghiệm để tìm cho mình một kiểu dáng đường viền ưng {. Tuy nhiên cần lưu { một điều là kiểu dáng phức tạp sẽ làm tăng kích thước cuối cùng của tác phẩm. Phần Scale giúp hiển thị đường viền khi được phóng to hoặc thu nhỏ. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây: Normal: Thay đổi theo giá trị scale. Horizontal: Chỉ scale theo chiều ngang. Vertical: Chỉ scale theo chiều dọc. None: Không thay đổi theo giá trị scale. Nếu chọn ô Hinting, Flash sẽ tự điều chỉnh để làm tròn giá trị stroke, tránh xuất hiện những nét nhòe trên đường thẳng nằm ngang hoặc thẳng đứng. Tùy chọn Cap giúp bạn thể hiện kiểu dáng đầu mút của đường thẳng. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây: Học Adobe Flash CS4 căn bản Join giúp bạn thể hiện kiểu dáng chỗ giao nhau của hai đường thẳng. Bạn sẽ thu được các chọn lựa sau đây khi bấm vào hình tam giác đen: Rectangle Options giúp bạn điều chỉnh độ bo tròn các góc của hình chữ nhật. Bạn có thể kéo thanh trượt sang phải hoặc trái để điều chỉnh: Kéo sang phải để điều chỉnh độ bo tròn (giá trị trong các ô sẽ là số dương), kéo sang trái để điều chỉnh độ lõm (giá trị trong các ô sẽ là số âm). Bạn cũng có thể gõ trực tiếp giá trị vào ô trên cùng bên trái. Nếu bạn bấm vào sợi dây xích để mở ra, bạn có thể thay đổi giá trị cho từng ô để áp Học Adobe Flash CS4 căn bản dụng cho từng góc của hình chữ nhật. Để trả về các giá trị mặc định ban đầu của hình chữ nhật, bạn bấm vào nút Reset. Ví dụ hình chữ nhật có góc bo tròn: Ví dụ hình chữ nhật có góc lõm: Ví dụ hình chữ nhật có bốn góc khác nhau: