Classic Tween và trò chơi bập bênh đơn giản

Học Adobe Flash CS4 cơ bản Flash CS4 - Bài 11: Classic Tween và trò chơi bập bênh đơn giản TTO - Trong bài này bạn sử dụng Classic Tween để tạo một trò chơi bập bênh đơn giản. Các bước thực hành như sau: 1. Chuyển về vùng làm việc mặc định. Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials để khôi phục vùng làm việc mặc định này và bắt đầu vào bài thực hành 11 (xem bài thực hành 1 về vùng làm việc). 2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document) 3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document) Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 011_classic_tween.fla. 4. Cho hiện Grid (khung lưới) để dễ định vị các nét vẽ. 4.1 Chọn View > Grid > Edit Grid từ menu (hoặc phím tắt Ctrl+Alt+G) (xem thêm phần Tìm hiểu về Grid ở cuối bài): Học Adobe Flash CS4 cơ bản Hộp thoại Grid hiện ra với các thông số mặc định như sau: 4.2 Bạn sửa số 10 thành 25 vào hai ô thông số của Grid , bấm chọn các ô Show grid và Snap to grid. Tiếp theo bấm nút OK để chấp nhận các giá trị mới này: Học Adobe Flash CS4 cơ bản Trên Stage xuất hiện khung lưới như sau: 5. Vẽ tấm ván dùng cho trò chơi bập bênh. 5.1 Bấm chọn Line Tool trên thanh công cụ bên phải: Học Adobe Flash CS4 cơ bản 5.2 Bấm vào ô Stroke color để chọn màu cho Line Tool: 5.3 Bạn chọn màu xanh cho đường viền để không trùng màu với màu Grid: Học Adobe Flash CS4 cơ bản 5.4 Đưa chuột vào khoảng giữa trên Stage, kéo chuột sang góc dưới bên trái để vẽ đường thẳng: 5.5 Bạn thu được đường thẳng nghiêng màu xanh đầu tiên. Đưa chuột vào khoảng giữa trên Stage, kéo chuột sang góc dưới bên phải để vẽ đường thẳng thứ hai: Học Adobe Flash CS4 cơ bản 5.6 Bạn thu được đường thẳng nghiêng màu xanh thứ hai. Bạn giữ phím Shift và kéo chuột từ giao điểm của đường thẳng nghiêng bên trái với ô lưới thứ ba từ dưới lên, sang giao điểm của đường thẳng nghiêng bên phải với Grid như hình sau: Học Adobe Flash CS4 cơ bản 5.7 Bạn thu được một đường thẳng nằm ngang màu xanh cắt hai đường thẳng nghiêng đã vẽ trước đó. Bạn vẽ thêm một đường thẳng song song với đường thẳng đã vẽ bằng cách giữ phím Shift, và kéo chuột từ giao điểm của đường thẳng nghiêng bên trái với ô lưới thứ tư từ dưới lên sang giao điểm của đường thẳng nghiêng bên phải với Grid như hình sau: Học Adobe Flash CS4 cơ bản 5.8 Bạn thu được đường thẳng nằm ngang thứ hai. Từ giao điểm của đường thẳng nằm ngang dưới cùng và đường thẳng nghiêng bên trái, bạn kéo xuống một ô lưới để vẽ một đường thẳng ngắn: Học Adobe Flash CS4 cơ bản 5.9 Bạn thu được đường thẳng đứng thứ nhất. Từ giao điểm của đường thẳng nằm ngang dưới cùng và đường thẳng nghiêng bên phải, bạn kéo xuống một ô lưới để vẽ một đường thẳng ngắn: Học Adobe Flash CS4 cơ bản 5.10 Bạn thu được đường thẳng đứng thứ hai. Kéo chuột nối đầu mút của hai đường thẳng đứng vừa vẽ như hình minh họa: Học Adobe Flash CS4 cơ bản 5.11 Bạn thu được hình dáng một tấm ván có một mặt đang hướng về phía bạn, mặt trên nghiêng, hai mặt bên gặp nhau ở cuối đường, nơi giao của hai đường thẳng nghiêng: Học Adobe Flash CS4 cơ bản 6. Tô màu ruột cho tấm ván 6.1 Để tô màu ruột cho tấm ván, bạn sử dụng màu lấy từ hình bitmap có hoa văn gỗ import từ ngoài vào. Bạn chọn Window > Color từ menu (hoặc phím tắt Shift+F9): Học Adobe Flash CS4 cơ bản Color Panel xuất hiện với màu viền đang được chọn (ô màu với cây bút chì đang lõm xuống): Bạn bấm chuột vào thùng nước sơn để chuyển sang chọn màu ruột: Học Adobe Flash CS4 cơ bản Ô màu với thùng nước sơn lõm xuống - dấu hiệu đang chọn màu ruột: 6.2 Ở ô Type bạn bấm cho menu xổ xuống và chọn Bitmap: Học Adobe Flash CS4 cơ bản 6.3 Hộp thoại Import to Library xuất hiện. Bạn chuyển đến folder chứa ảnh wood.jpg (file wood.jpg được cung cấp kèm theo bài), bấm chọn file ảnh này và chọn nút Open : Color Panel được cập nhật như sau: Học Adobe Flash CS4 cơ bản 6.4 Bấm chọn Paint Bucket Tool trên thanh công cụ bên phải, công cụ này dùng để tô màu ruột cho đối tượng: Học Adobe Flash CS4 cơ bản 6.5 Chuột đổi sang thành thùng nước sơn. Đưa chuột vào mặt trên của tấm ván và bấm vào để tô màu gỗ cho mặt trên: 6.6 Mặt trên tấm ván được tô màu gỗ. Bạn bấm tiếp vào mặt trước tấm ván đối diện bạn: Học Adobe Flash CS4 cơ bản 6.7 Hai mặt của tấm ván đã được tô màu gỗ: Học Adobe Flash CS4 cơ bản Bạn bấm dấu chéo ở góc trên bên phải của Color Panel để đóng lại. 7. Dùng Gradient Transform Tool để chỉnh màu ruột tấm ván 7.1 6.1 Bấm chuột vào Free Transform Tool và giữ vài giây cho xuất hiện menu phụ và chọn Gradient Transform Tool (xem thêm phần Tìm hiểu về Gradient Transform Tool ở cuối bài): Học Adobe Flash CS4 cơ bản Chuột đổi thành mũi tên có ruột màu trắng. 7.2 Đưa chuột vào vùng ruột phía mặt trên tấm ván, phía dưới chuột xuất hiện một hộp chữ nhật biểu hiện màu tô chuyển. Bấm chuột vào vùng này của tấm ván: Học Adobe Flash CS4 cơ bản 7.3 Các núm điều chỉnh màu bitmap xuất hiện: Học Adobe Flash CS4 cơ bản 7.4 Đưa chuột vào núm điều chỉnh góc trên bên phải, chuột đổi thành vòng tròn có bốn mũi tên xoay theo chiều kim đồng hồ: Học Adobe Flash CS4 cơ bản 7.5 Nắm kéo chuột xoay sang phải để đường viền của màu ruột song song với đường thẳng nghiêng bên trái: Học Adobe Flash CS4 cơ bản 7.6 Thả chuột ra, bạn thu được kết quả tấm ván đã nghiêng một bên như sau: Học Adobe Flash CS4 cơ bản (Còn tiếp)