(NB) Mục tiêu của Giáo trình Thiết kế hoạt hình là Thiết kế website flash, làm banner, logo động cho website; Làm game, E-card, E-Calalog; Dựng phim hoạt hình trên nền flash; Làm hình động cho điện thoại di động
ỦY BAN NHÂN DÂN TỈNH BR – VT TRƯỜNG CAO ĐẲNG NGHỀ GIÁO TRÌNH THIẾT KẾ HOẠT HÌNH NGHỀ CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ CAO ĐẲNG VÀ TRUNG CẤP Ban hành kèm theo Quyết định số: 01 /QĐCĐN ngày 04 tháng 01 năm 2016 của Hiệu trưởng trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu Bà Rịa – Vũng Tàu, năm 2016 TUN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thơng tin có thể được phép dùng ngun bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm LỜI GIỚI THIỆU Adobe Flash (trước đây là Macromedia Flash và trước đó FutureSplash), hay cịn gọi một cách đơn giản là Flash, được dùng để chỉ chương trình sáng tạo đa phương tiện (multimedia) lẫn phần mềm dùng để hiển thị chúng Macromedia Flash Player Flash là cơng cụ để phát triển các ứng dụng như thiết kế các phần mềm mơ phỏng. Sử dụng ngơn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim. Điểm mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động. Người lập trình có thể chủ động lập các điều hướng cho chương trình. Flash cũng có thể xuất bản đa dạng các file kiểu html, exe, jpg để phù hợp với các ứng dụng của người sử dụng như trên Web, CD Bà Rịa – Vũng Tàu, ngày .tháng năm 2015 Nguyễn Bá Thủy MỤC LỤC BÀI 1: MƠ ĐUN THIẾT KẾ HOẠT HÌNH Vị trí, tính chất mơn học Vị trí của mơn học: Mơn học được bố trí sau khi học sinh học xong các mơn học chung, các mơn học, mơ đun kỹ thuật cơ sở và học trước các mơn thiết kế và lập trình Web, lập trình Windows Flash là cơng cụ để phát triển các ứng dụng như thiết kế các phần mềm mơ phỏng Sử dụng ngơn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim. Điểm mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động. Người lập trình có thể chủ động lập các điều hướng cho chương trình Tính chất của mơn học: Là mơ đun kết hợp làm cơng cụ cho các mơn lập trình giao diện Mục tiêu modun Thiết kế website flash, làm banner, logo động cho website Làm game, Ecard, ECalalog Dựng phim hoạt hình trên nền flash Làm hình động cho điện thoại di động Làm các CD tương tác với ưu điểm là file siêu nhẹ, tương thích rất tốt với Photoshop và Illustrator để dùng làm hình minh họa, phù hợp với xu hướnng website tương tác với giao diện đẹp hiện nay. Nội dung: STT Tên các bài trong mơ đun Thời Hình thức gian giảng dạy Khởi đầu với Adobe Flash Tích hợp Các biểu tượng symbol Tích hợp Thao tác với timeline Tích hợp Tạo hoạt hình Frame by frame và Classic tween Tích hợp Tạo hoạt hình theo đường dẫn Tích hợp Tạo hoạt hình Motion tween Shape tween Sử Tích hợp dụng Shape hint Sử dụng mặt nạ (mask) công cụ tạo hoạt Tích hợp Tích hợp hình: bone, deco, bind, 3D Sử dụng kiểu dữ liệu, biến, hằng. Tốn tử và biểu thức Tạo Action script bằng cấu trúc lệnh rẽ nhánh Tích hợp 10 Tạo Action script bằng cấu trúc lặp Tích hợp 11 Sử dụng Hàm Tích hợp 12 Điều khiển Chuột và Bàn phím bằng các sự kiện Tích hợp 13 Vẽ giao diện các trang web (trang intro, trang chủ, Tích hợp Tích hợp các trang chi tiết, …) 14 Tạo các movie clip và các nút bấm liên kết đặt lên trang 15 Gán âm thanh, lện action script cho các nút bấm Tích hợp 16 Điều khiển âm nhạc cho trang web Tích hợp 17 Chuyển file phim thành Video Flash Tích hợp 18 Cách đưa phim video flash vào trang ( embedded Tích hợp hoặc external) 19 Tạo các điều khiển xem phim Tích hợp 20 Tạo các banner quảng cáo bằng biến đổi hình dạng, Tích hợp mặt nạ, biến đổi chuyển động 21 Chèn hoạt hình Flash vào trang web Tích hợp 22 Sử dụng phần mềm Banner Design Pro, Swish max Tích hợp 10 Tích hợp để tạo các hiệu ứng text 23 Publish ra Shockwave Flash và HTML 24 Kiểm tra bài 7, 12, 16, 19, 22 25 Tổng cộng 120 BÀI 1 KHỞI ĐẦU VỚI ADOBE FLASH Giới thiệu Flash là cơng cụ để phát triển các ứng dụng như thiết kế các phần mềm mơ phỏng. Sử dụng ngơn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim. Điểm mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động. Người lập trình có thể chủ động lập các điều hướng cho chương trình. Flash cũng có thể xuất bản đa dạng các file kiểu html, exe, jpg để phù hợp với các ứng dụng của người sử dụng như trên Web, CD Mục tiêu Hiểu rõ cơng dụng các cơng cụ vẽ và tơ màu Thao tác vẽ và tơ màu cho đối tượng hình cơ bản Rèn luyện tính cẩn thận, tư duy sáng tạo 1. Giới thiệu giao diện Adobe Flash Khi khởi động lần đầu tiên, Flash CS4 có giao diện như sau: Hình 1.1: Cửa sổ khởi động Flash Vùng khoanh trịn màu đỏ hình trên có chữ ESSENTIALS. Đây là vùng làm việc (workspace) mặc định khi khởi động Flash CS4 lần đầu. Có nhiều vùng làm việc khác nhau để chọn lựa tùy theo thói quen và sở thích của từng người, ví dụ như đối với người đã từng sử dụng Flash có thể chọn vùng làm việc CLASSIC Khi bấm vào chữ ESSENTIALS đề cập ở trên, Flash sẽ xổ xuống một menu cho bạn chọn lựa vùng làm việc như sau: Hình 1.2: Menu lựa chọn vùng làm việc Để giúp làm quen với Flash khơng gặp khó khăn trong việc thiết lập vùng làm việc, bạn sẽ thực hành dựa trên vùng làm việc mặc định 2. Các thao tác cơ bản trên file: Tạo mới, lưu, đóng, mở Dùng chuột bấm vào nút Flash File (ActionScript 3.0): Hình 1.3: Chọn ActionScrip 3.0 Flash sẽ tạo ra một file mới có tên là Untitled1: Hình 1.4: Tạo tên file flash (Xem thêm phần Flash document và Flash movie ở phần kế tiếp) Lưu một flash document Tất cả các bài thực hành được lưu vào một folder chính để tiện cho việc quản lý. Sẽ tạo một folder mới có tên FLASH CS4 ONLINE, sau đó lưu file này lại với tên 001_frame_by_frame.fla trong folder vừa tạo ra, sau đó sẽ thực hành tiếp. Cách làm như sau: Chọn File > Save: Hình 1.5: Chọn lưu tập tin 10 Ở hộp thoại mới mở ra, bấm nút Create New folder: Hình 1.6: Chọn khu vực lưu Một folder mới được tạo ra với tên mặc định là New Folder Hình 1.7: Chọn thư mục lưu Đổi tên lại thành FLASH CS4 ONLINE Hình 1.8: Chọn lưu đúng tên 11 Di chuyển vào bên trong folder này và đặt tên file là 001_frame_by_frame.fla, xong bấm vào nút Save để lưu lại Hình 1.9: Lưu đúng định dạng file 3. Cơng cụ vẽ: Pencil, Brush, Eraser, AirBrush, Line Cơng cụ Pencil: Hình 1.10: Cơng cụ Pencil Đối với cơng cụ Pencil, bạn có thể dùng để vẽ các đối tượng bằng tay. Các thuộc tính tương ứng với cơng cụ Pencil mà bạn có thể hiệu chỉnh là: Stroke color: màu sắc của nét vẽ 12 Stroke: kích thước của nét vẽ Style: dạng thức của nét vẽ đường liền nét, đứt nét… Cơng cụ Brush: Cũng tương tự cơng cụ Pencil, Brush cũng được dùng để vẽ. Chỉ có một khác biệt là nét vẽ của Brush khơng bao gồm viền chỉ có màu nền, cịn Pencil thì ngược lại chỉ có màu viền khơng có màu nền. Các thuộc tính của Brush bao gồm: Fill color: chọn màu cho nét vẽ brush Smoothing: độ mềm dẻo cho nét vẽ Hình 1.11: Cơng cụ Smoothing Cơng cụ Erase: Cơng cụ dùng để tẩy xóa các nét vẽ 4. Rectangle, Oval, PolyStar, Text Sử dụng cơng cụ Oval ( ) vẽ hình trên cửa sổ làm việc Shift + di chuột để vẽ hình trịn 13 Chọn các hình tương ứng cho hình vẽ Text: Chức năng chính: viết chữ trong flash Kết hợp cùng bảng Properties để điều chỉnh (font, màu sắc, kích thước vị trí, …) Cơng cụ Text (T) 3 định dạng kiểu văn bản Hình 1.12: Cơng vụ văn bản 5. Cơng cụ Pen, Add anchore Point, Delete anchore point Pen Tool (P): dùng tạo các nét thẳng hoặc cong 14 Hình 1.13: Các cơng cụ chuẩn 6. Convert anchore point, subselection Sub select tool (A): dùng chọn đối tượng, thành phần của hình 7. Cơng cụ chọn: Selection, Lasso Lựa chọn cơng cụ Selection ( ), lựa chọn 1 vùng trên hình vẽ và di chuyển vùng chọn ra vị trí khác Hình 1.14: Cơng cụ Selection 8. Cơng cụ tơ màu Paint Bucket, InK Bottle, Eye dropper Bucket Tool (K): dùng tơ màu các hình được tạo ra từ đường viền (màu bên trong hình) 15 Dropper Tool (I): dùng cho phép lấy mẫu tơ, kiểu đường nét của 1 đối tượng rồi áp dụng mẫu tơ đó cho 1 đối tượng khác. (chọn 1 mẫu rồi qt vào 1 mẫu khác) 9. Cơng cụ Free Transform, Gradient Transform Flash hỗ trợ 2 loại kiểu màu gradient: Linear: hịa trộn màu theo cách đồng dạng theo một đường thẳng đi theo một hướng hoặc một góc xác định Radial: hịa trộn màu theo cách thức tỏa trịn, theo 2 hướng: hướng tâm và hướng ra ngồi Hình 1.5: Cơng cụ gradient 16 BÀI 2 CÁC BIỂU TƯỢNG SYMBOL Giới thiệu Một Symbol là một đối tượng tái sử dụng được lưu trữ trong thư viện một tài liệu của Flash. Có thể vẽ một hình dạng và sau đó chuyển đổi nó thành một biểu tượng. Sau khi chuyển đổi, nó được lưu trữ trong thư viện các tài liệu của Flash. Sau đó, từ thư viện, có thể dễ dàng làm nhiều bản sao của biểu tượng mà khơng cần phải tạo lại nó. Có thể biến bất cứ điều gì muốn vẽ vào biểu tượng Mục tiêu Trình bày vai trị của các biểu tượng, thư viện Library Thao tác lệnh đồ họa với Graphic, Button, MovieClip Sử dụng các thư viện cho đối tượng hình Rèn luyện tính cẩn thận, tư duy sáng tạo 1. Biểu tượng Graphic, Button, MovieClip Graphics: Sử dụng biểu tượng đồ họa cho tác phẩm nghệ thuật tĩnh và hình ảnh động mà bạn khơng có kế hoạch bổ sung thêm bất kỳ chức năng tương tác để. Lý do của việc này là bạn sẽ cần ActionScript để thêm các tương tác, và biểu tượng đồ họa khơng được thiết kế để làm việc với ActionScript Nút: Sử dụng các biểu tượng nút nếu bạn muốn thêm các tương tác chuột liên quan như nhấp chuột và cuộn thuyết minh cho phim Flash của bạn. Ví dụ, bạn có thể tạo ra một nút mà chơi một bài hát bất cứ khi nào nó được click Movie Clip: 17 Các biểu tượng movie clip là giống như một sự kết hợp của đồ họa, các nút và nhiều hơn nữa. Nó có thể được sử dụng cho các tác phẩm nghệ thuật tĩnh và hoạt hình, nhưng nó cũng có thể được sử dụng với ActionScript để chức năng tương tác có thể được thêm vào nó. Nhưng khơng giống như các nút, clip có khả năng nhiều hơn so với tương tác chuột liên quan Có thể tạo ra một biểu tượng của bất kỳ tác phẩm nghệ thuật để vẽ hoặc nhập khẩu lên sân khấu. Trong hướng dẫn này, chúng ta sẽ vẽ một hình trịn đơn giản, chuyển đổi nó thành một biểu tượng, và sau đó chỉnh sửa biểu tượng đó Hình 2.1: Hiểu chỉnh TimeLines 2. Làm việc với thư viện Library Để hiển thị cửa sổ Library, thực hiện một trong những bước sau đây: Chọn trong trình đơn Window > Library Hoặc nhấp chuột vào nút Library trong thanh Launcher tại góc phải bên dưới của cửa sổ giao diện Cách dùng mục Item trong đoạn phim hiện hành : Kéo mục Item trong cửa sổ Library vào vùng Stage. Mục Item đó được thêm vào trong Layer hiện hành 18 Hình 2.2: Chọn thư mục hiện hành trong thư viện Mở thư viện từ trong một file Flash Chọn trình đơn File > Open as Library Chọn file Flash bạn muốn mở tại thư viện, sau đó nhấp chuột vào nút Open Cửa sổ của file được chọn mở trong đoạn phim hiện hành với tên của file đó xuất hiện ở phía trên cùng trong cửa sổ Library. Để sử dụng các mục có trong cửa sổ Library vào trong đoạn phim hiện hành, bạn chỉ việc kéo mục chọn đó và thả vào trong cửa sổ thư viện của đoạn phim hiện hành 3. Làm việc với Common Library Tất cả những loại thư viện này được hiển thị trong trình đơn phụ Window > Common Libraries Hình 2.3: Các lựa chọn của Common Library 19 Cách tạo ra một thư viện tạm thời trong chương trình Flash: • Tạo một file Flash với một thư viện chứa các biểu tượng muốn đặt chúng vào thư viện tạm thời • Đặt file Flash vào trong thư mục Libraries trong thư mục chương trình Flash trong đĩa cứng Cách dùng một mục từ thư viện chung trong đoạn phim: • Chọn trong trình đơn Window > Common Libraries và chọn một thư viện có trong trình đơn phụ Hình 2.4: Lụa chọn Graphics 20 BÀI 3 THAO TÁC VỚI TIMELINE Giới thiệu Phần này có thể coi là quan trong nhất trong flash vì nó là cho ta thể hiện mọi thứ trong q trình thiết kế như câu lệnh, âm thanh, hình ảnh, chuyển động… Mục tiêu Hiểu rõ vai trị của timeline Vận dụng các cơng cụ timeline tạo hoạt hình Rèn luyện tính cẩn thận, tư duy sáng tạo 1. Giới thiệu timeline Ta có thể dùng bảng tiến trình (Timeline) để làm cho Flash trở nên động đậy?! Nhưng với bảng tiến trình ta thường mất nhiều thời gian và thao tác hơn so với dùng ActionScript 2. Vai trị trong xử lý hoạt hình Timeline dài để đặt chuỗi hình ảnh của mình lên đó (hãy tượng tượng Timeline giống như 1 cuốn băng dài chứa tồn bộ các khung hình của 1 bộ phim vậy) Timeline đó được thể hiện bằng 1 chuỗi liên tục các Frame nối tiếp nhau theo chiều ngang, mỗi Frame thể hiện 1 hình ảnh nào đó (giống như 1 khung hình riêng biệt trong chuỗi hình ảnh của 1 bộ phim). Khi chạy, Flash sẽ lướt qua lần lượt các frame này từ đầu tới cuối và hiển thị các hình ảnh chứa trong mỗi frame đó để tạo ra 1 đoạn hoạt cảnh 21 Hình 3.1: Frame trong TimeLine 3. Xử lý hoạt hình cho đối tượng Khi soạn thảo 1 file Flash, Playhead là 1 vạch đỏ cắt ngang qua Timeline (xem hình dưới). Nó cho biết ta hiện đang thao tác ở frame số bao nhiêu trên Timeline. Ngồi ra, sau khi file Flash được xuất ra thành 1 đoạn phim hồn chỉnh và chạy trên flash player thì khơng cịn vạch đỏ nào cả nhưng người ta vẫn có thể nói tới khái niệm Playhead như 1 con trỏ cho biết hiện thời frame nào đang được trình chiếu. (Trong hình mình hoạ, frame hiện tại được trỏ đến là frame 8) Cịn Stage chính là nơi mà ta sẽ vẽ hoặc đặt hình ảnh lên đó (mặc định stage có màu trắng). Stage có dạng một hình chữ nhật. Những gì nằm ngồi phạm vi của stage khơng được nhìn thấy khi đoạn hoạt cảnh được trình chiếu. Kích thước của stage cũng chính là kích thước màn hình của đoạn phim mà ta tạo ra 22 Hình 3.2: Điểm dùng của Frame 23 BÀI 4 TẠO HOẠT HÌNH BẰNG FRAME BY FRAME VÀ CLASSIC TWEEN Giới thiệu Tạo ảnh động (animation) theo phương pháp framebyframe, tức là phương pháp tạo ảnh động với mỗi khung hình có một nội dung khác nhau, cụ thể là cho dịng chữ TUỔI TRẺ CAO ĐẲNG NGHỀ xuất hiện dần theo từng ký tự thơng qua các bước sau đây Mục tiêu Hiểu rõ vai trị Frame by frame, Classic tween Vận dụng các cơng cụ Frame by frame, Classic tween để tạo hoạt hình cho đối tượng Rèn luyện tính cẩn thận, tư duy sáng tạo 1. Hoạt hình Frame by frame Frame by frame trong flash được dùng để tạo một hiệu ứng chuyển động cơ bản nhất trong flash. Các đối tượng sẽ chuyển động từng frame một và tất cả các frame đó sẽ hình thành một chuyển động chung là frame by frame Thiết kế chuyển động gồm: Sử dụng cơng cụ Oval tool để vẽ hình eclips và để vẽ được hình trịn thì bạn cần nhấn phím “Shift” trên bàn phím Một đối tượng hình trịn với kích thước width:150, height: 150 Màu sắc background là màu đỏ 24 Hình 4.1: Sử dụng cơng cụ Oval tool để vẽ hình eclips Sau khi bạn thiết kế xong bây giờ đến lúc chúng ta tạo nên chuyển động Tại panel timeline sẽ nhận thấy các frame có biểu tượng là một dấu chấm trịn đen Bây giờ tiếp theo hấn phím F6 từ bàn phím để được 1 frame tiếp theo Hình 4.2: Tạo Frame chuyển động cho hình elip Nhấn thêm 19 lần phím F6 để tổng số điểm sẽ là 21 điểm (frame) Để đối tượng chuyển động được thì ở mỗi vị trí frame (điểm trịn đen) bạn phải dịch chuyển vị trí của đối tượng hình trịn màu đỏ sang bên phải ví dụ như hình sau: 25 Hình 4.3: Tạo điểm đầu và điểm cuối Điển hình ở vị trí thứ 4 sẽ dịch chuyển sang bên phải sao cho khơng trùng với điểm trước nó Và tương tự như vậy so với các frame cịn lại cứ dịch chuyển vị trí tương ứng từng frame Và cuối cùng là ta nhận được kết quả như mong đợi bằng cách bạn sử dụng tổ hợp phím Ctrl + Enter trên bàn phím 2. Hoạt hình Classic tween Classic Tween là một kỹ thuật tạo chuyển động được cung cấp trong các phiên bản từ Flash CS3 trở về trước (lúc đó gọi là Motion Tween). Từ phiên bản Flash CS4, Adobe vẫn cịn duy trì kỹ thuật này nhưng đổi tên là Classic Tween. Về cơ bản, khi thao tác với kỹ thuật Classic Tween ta cần phải sử dụng đến hai keyframe, đó là KeyFrame khởi đầu và KeyFrame kết thúc Ngun tắc: Trong khung hình đầu tiên (gọi là keyframe khởi đầu) ta tạo các đối tượng hoạt hình (như là graphic symbol, movie clip symbol, buttom symbol). Rồi đến một vị trí khác trên timeline ta tạo thêm một keyframe kết thúc, trong đó đối tượng hoạt hình có thay đổi kích thước, vị trí, xoay, các hiệu ứng style, filter, vv. Sau đó thực hiện Classic Tweening Sử dụng Classic Tween để tạo hiệu ứng động: 26 Bước 1: Chọn frame đầu tiên (ví dụ frame 1) trên tiến trình, rồi tạo các hình (graphic symbol, movie clip symbol, button symbol) trên stage. Đây là keyframe đầu tiên Bước 2: Chọn frame cuối (ví dụ frame 45) trên tiến trình, rồi click phải và chọn lệnh Insert KeyFrame thì ta được một khung hình khóa có nội dung giống như khung hình khóa kế trước. Hiệu chỉnh lại nội dung hoạt hình như thay đổi kích thước, vị trí, xoay, …vv . Bước 3: Chọn lại frame đầu tiên (ví dụ frame 1). Rồi click phải trong timeline , chọn lệnh Create Classic tween Hình 4.4: Tạo hoạt hình cho hình ảnh Bước 4: Ở panel Properties. mục Tweening có các tùy chọn: Ease: chỉnh tốc độ bắt đầu, hoặc nhấp Edit Easing để hiện hộp thoại Ease In / Ease Out Rotate: cho phép xoay.(None, Auto, CW, CCW) Snap: bắt dính theo đườmg dẫn Orient to Path: hướng theo đường dẫn Scale: cho phép co dãn kích thước khi chuyển động 27 Sync: đồng bộ Hình 4.5: Thiết lập thuộc tính Bước 5: Ctrl + Enter để xem kết quả 28 BÀI 5 TẠO HOẠT HÌNH THEO ĐƯỜNG DẪN Giới thiệu Hoạt hình theo đường dẫn phản hồi hành động của người dùng và cung cấp tính liên tục trực quan khi người dùng tương tác với ứng dụng Mục tiêu Hiểu hoạt hình theo đường dẫn Vận dụng các cơng cụ tạo hoạt hình theo đường dẫn Rèn luyện tính cẩn thận, tư duy sáng tạo 1. Giới thiệu hoạt hình theo đường dẫn Đối với Classic tween ta có thể tạo chuyển động theo đường dẫn như sau: Tạo thêm một layer mới đặt tên là path, rồi vẽ đường path bằng pencil tool Click phải vào tên layer path > chọn lệnh Guide. (layer Guide sẽ khơng hiển thị các phần tử trên layer này khi xem hoạt hình) Kéo rê layer kế bên dưới vào bên trong layer Path Chỉnh tâm của đối tượng hoạt hình ở cả hai frame khóa đầu tiên và frame khóa cuối cùng vào hai đầu mút của đường dẫn 2. Thao tác hoạt hình theo đường dẫn 29 Hình 5.1: Tạo đường dẫn cho đối tượng Nếu muốn đối tượng chuyển động theo hướng của đường dẫn, thì trên panel properties, mục Tweening: click thiết lập Orient to Path Hình 5.2: Thiết lập thuộc tính đối tượng 3. Bài tập áp dụng Tạo hoạt hình quả bóng nhảy theo hình zich zac 30 BÀI 6 TẠO HOẠT HÌNH VỚI MOTION TWEEN, SHAPE TWEEN Giới thiệu Kỹ thuật Motion Tween cũng được dùng để tạo chuyển động (tương tự như kỹ thuật Classic Tween) nhưng nó khơng địi hỏi bạn phải tạo trước các KeyFrame. Một ưu điểm của Motion Tween ( từ phiên bản Flash CS4) là hỗ trợ hiệu ứng 3D (có hai hiệu ứng 3D là Transformation và Rotation) Mục tiêu Hiểu vai trị Motion tween, Shape tween Vận dụng các cơng cụ Motion tween, Shape tween tạo hoạt hình Rèn luyện tính cẩn thận, tư duy sáng tạo 1. Hoạt hình Motion tween Kỹ thuật Motion Tween cũng được dùng để tạo chuyển động (tương tự như kỹ thuật Classic Tween) nhưng nó khơng địi hỏi bạn phải tạo trước các KeyFrame. Một ưu điểm của Motion Tween ( từ phiên bản Flash CS4) là hỗ trợ hiệu ứng 3D (có hai hiệu ứng 3D là Transformation và Rotation) Nếu so sánh với kỹ thuật Frame by Frame và Classic Tween, thì với kỹ thuật Motion Tween tối ưu kích thước của file Flash khi xuất bản. Ngồi ra với Motion Tween, ta hiệu chỉnh đường dịch chuyển, tọa độ, góc xoay, Filter, Blending… Nhờ vào cơng cụ Selection và thuộc tính trong bảng Motion Editor Sử dụng Motion Tween để tạo hiệu ứng động Bước 1: Chọn frame đầu tiên (ví dụ frame 1) trên tiến trình, rồi tạo các hình (graphic symbol, movie clip symbol, button symbol) trên stage. Bước 2: Chọn lại frame đầu tiên (ví dụ frame 1). Rồi click phải trong timeline , chọn lệnh Create Motion tween. Flash sẽ tự động tạo một khoảng Frame mặc định để tạo 31 chuyển động (thơng thường 1 second hoạt hình). Nếu số lượng Frame này khơng thỏa mãn nhu cầu xử dụng, ta thay đổi nó bằng cách đặt con trỏ chuột vào vị trí frame cuối cùng. Khi trỏ chuột có dạng , thì nhấp chuột và kéo sang trái hoặc sang phải Bước 3: Click chọn frame cuối, rồi di chuyển hình được vẽ sang vị trí mới. Khi đó, trên stage xuất hiện một đường mơ tả chuyển động của đối tượng. Sử dụng cơng cụ Selection để thay đổi dạng thức của đường chuyển động. Bước 4: Ctrl + Enter để xem kết quả Hình 6.1: Tạo hoạt hình bằng Motoon tween 2. Hoạt hình Shape tween. Sử dụng Shape hint Có những chuyển động đều hoặc chuyển động theo quy luật như theo một curve chẳng hạn, có quyền dùng keyframe để mơ tả chuyển động! nhưng có thể sẽ mất hàng đống frame, rất lu bu và khó kiểm sốt. Nhưng cũng may là chúng ta cịn sự lựa chọn khác! đó là dùng Action Script để điều khiển (biết viết code là khỏe re, viết giỏi có thể dùng chỉ 1 frame cũng đủ), hoặc là vẫn dùng keyframe nhưng hạn chế lại đó là sử dụng motion tween để làm chuyển động suy diễn! chọn 2 keyframe trên bản timeline (tất nhiên là phải cùng layer), sau đó làm 1 motion tween giống như là nối 2 chúng nó lại, chuyển động sẽ rất mượt Tạo motion tween cho chim bay. Bấm chọn và kéo symbol chim xuống góc dưới bên trái: 32 Hình 6.2: Tạo motion tween cho chim bay. Bấm phím phải chuột và chọn Create Motion Tween từ menu ngữ cảnh: Hình 6.3: Thiết lập các thuộc tính Trong khu vực frame của Timeline, Flash đã tự động bổ sung thêm số frame thành 24 frame (mặc định cho motion tween hồn thành trong một giây theo mặc định Flash CS4 thiết lập tốc độ 24 fps). Đồng thời Playhead được di chuyển đến frame số 24. Bên cạnh đó bạn cịn thấy các frame từ 1 24 đã được đổi sang màu xanh nhạt đặc trưng của motion tween của Flash CS4. 33 Hình 6.4: Tạo frame Bấm chọn và kéo symbol chim lên góc trên bên phải: Hình 6.5: Chọn vị trí di chuyển của đối tượng Khi nhả chuột ra, Flash tự động tạo thêm một đường thẳng nối từ góc dưới bên trái lên góc trên bên phải với các dấu chấm ở giữa, mỗi dấu chấm là một frame của motion tween. Ngồi ra Flash cũng thêm một key frame vào timeline, hiển thị bằng một hình thoi màu đen 34 Hình 6.6: Tạo frame Với chỉ một giây cho motion tween, bạn khơng thể nhìn kịp hiệu ứng chim vỗ cánh. Bạn sẽ cho bổ sung frame cho motion tween hoạt động 4 giây, tức 96 frame. Đưa chuột vào keyframe 24 cho đến khi chuột biến thành mũi tên hai chiều: Hình 6.7: Tạo điểm cuối cho Frame Nắm giữ chuột và kéo sang phải cho đến frame 96 thì nhả chuột ra, hình thoi thể hiện keyframe đã được di chuyển từ frame 24 sang frame 96. Hình 6.8: Di chuyển điểm cuối Frame 35 Lúc này nếu chọn Control > Test Movie từ menu thì Flash xuất ra flash movie với một con chim đang vỗ cánh bay từ góc dưới bên trái sang góc trên bên phải. 36 BÀI 7 SỬ DỤNG SỬ DỤNG MẶT NẠ (MASK) Giới thiệu Mask hay cịn gọi là mặt nạ trong Flash đúng là một điều bí mật như một người đeo mặt nạ làm người ta khơng biết phía sau nó ẩn chứa những gì Mục tiêu Hiểu vai trị mặt nạ (mask) Vận dụng thao tác với các cơng cụ tạo hoạt hình Rèn luyện tính cẩn thận, tư duy sáng tạo 1. Mặt nạ (mask) Mask hay cịn gọi là mặt nạ trong Flash đúng là một điều bí mật như một người đeo mặt nạ làm người ta khơng biết phía sau nó ẩn chứa những gì. nào mời các bạn cùng flash khám phá phía sau nó có gì nào 2. Các cơng cụ tạo hoạt hình: bone, deco, bind, 3D Bước 1: Tạo 1 tài liệu flash mới Ctrl +N, Trên layer 1 bạn dùng cơng cụ Rectangle Tool (R) vẽ 1 hình chữ nhật để làm background cho file flash, sau đó vào Window > Color hoặc nhấn phím Shift + F9 để mở bảng màu ra. Chọn loại Radial có sẵn là màu xanh đen. kết quả sẽ như hình dưới: 37 Hình 7.1: Chọn loại Radial có sẵn Tiếp tục tạo 1 layer mới và tương tự vẽ 1 hình như trên rồi đổ màu cho nó như sau: Hình 7.2: Tạo1 layer mới Bước 2: 38 Tạo 1 layer mới đây sẽ là layer thể hiện chuyển động Mask của mình. Trước đó bạn hãy khóa 2 layer kia đi để đỡ đụng chạm vào nhé. Ở Layer 1 và 2 trên Frame thứ 50 nhấn F5. OK Đầu tiên sử dụng cơng cụ Oval Tool (O) vẽ 1 chấm trịn như sau: Hình 7.3: Vẽ chấm trịn Oval Tool Tại frame thứ 4 nhấn F6 rồi di chuyển chấm trịn sang bên phải 1 chút Sau đó tại Frame 5 nhấn F6 rồi nhấn phím Delete để xóa cái chấm trịn đi, thay vào đó ta lại sử dụng cơng cụ Oval Tool (O) để vẽ một hình bầu dục như sau: 39 Hình 7.4: Vẽ hình bầu dục bằng Oval Tool Tại Frame thứ 24 các bạn nhấn phím F6, sau đó di chuyển hình bầu dục ra góc gần mép phải của khung. (Thủ thuật các bạn có thể giữ phím Shift và di chuyển để nó đi theo 1 đường thẳng tránh bị lẹch khi kéo đối tượng) Hình 7.5: Di chuyển hình bầu dục Tiếp tục tại Frame thứ 25 nhấn phím F6, và ở Frame thứ 44 nhấn F6 tiếp sau đó kéo hình bầu dục về vị trí như ở Frame thứ 5 40 Hình 7.6: Di chuyển hình bầu dục về lại Frame cũ K. Tiếp tục nào ! Tại frame thứ 45 các bạn nhấn F6 và nhấn phím Delete để xóa hình bầu dục đi, click vào fram thứ 4 và nhấn chuột phải, nó sẽ sổ ra 1 menu lựa chọn Copy Frames Và đây là kết quả cuối cùng của chúng ta Hình 7.7: Kết quả vẽ hình trịn theo u cầu 41 BÀI 8 SỬ DỤNG DỤNG CỦA KIỂU DỮ LIỆU, BIẾN, HẰNG CHO ACTION SCRIPT Giới thiệu Khi vào trang web chúng ta thường thấy ấn tượng bời đoạn animation làm Flash thật đẹp Flash không có dùng để làm đoạn animation mà Flash cịn hỗ trợ khả năng lập trình bằng ngơn ngữ Action Script, chúng ta thấy hiện nay có rất nhiều game được viết bằng Flash. Và có thể nói Flash sẽ mất đi một nửa hay hơn nếu như khơng hỗ trợ phần lập trình này Trong phần này chúng ta sẽ làm quen với một số ActionScript đơn giản Mục tiêu Hiểu được khái niệm và cơng dụng của kiểu dữ liệu, biến, hằng Hiểu quy tắc xây dựng tốn tử, biểu thức Viết các Action script sử dụng các biến hằng, tốn tử, biểu thức trong chương trình Rèn luyện tính cẩn thận, tư duy sáng tạo 1. Các kiểu dữ liệu Biến ngun thủy (primitive): dữ liệu là 1 giá trị bất biến, 1 hằng số String (chuỗi): là 1 chuổi ký tự, ln được khai báo trong dấu nháy var myStr:String = "u like ActionScript?"; trace(myStr);//u like ActionScript Number (số): là một con số var myNum:Number=10; trace("The value is "+ myNumber);//The value is 10 Boolean (luận lý): kiểu dữ liệu đúng, sai (true, false). var myBoo:Boolean=false; Chỉ nhận 1 trong 2 giá trị như ví dụ sau var myNum:Number=2; 42 var myBoo:Boolean = (myNum>0); if (myBoo==true) var myStr:String = "u right, kq="+myNum+">0"; else var myStr:String = "u wrong, kq="+myNum+"