Giáo trình Thiết kế hoạt hình

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: 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. 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.

docx68 trang | Chia sẻ: thanhle95 | Lượt xem: 517 | Lượt tải: 0download
Bạn đang xem trước 20 trang tài liệu Giáo trình Thiết kế hoạt hình, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
Ủ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 TUYÊN 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 nguyên 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 của 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, 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 - 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 gian Hình thức giảng dạy 1 Khởi đầu với Adobe Flash 5 Tích hợp 2 Các biểu tượng symbol 5 Tích hợp 3 Thao tác với timeline 5 Tích hợp 4 Tạo hoạt hình Frame by frame và Classic tween 5 Tích hợp 5 Tạo hoạt hình theo đường dẫn 5 Tích hợp 6 Tạo hoạt hình Motion tween và Shape tween. Sử dụng Shape hint 5 Tích hợp 7 Sử dụng mặt nạ (mask) và các công cụ tạo hoạt hình: bone, deco, bind, 3D 4 Tích hợp 8 Sử dụng kiểu dữ liệu, biến, hằng. Toán tử và biểu thức 5 Tích hợp 9 Tạo Action script bằng cấu trúc lệnh rẽ nhánh 5 Tích hợp 10 Tạo Action script bằng cấu trúc lặp 5 Tích hợp 11 Sử dụng Hàm 5 Tích hợp 12 Điều khiển Chuột và Bàn phím bằng các sự kiện 4 Tích hợp 13 Vẽ giao diện các trang web (trang intro, trang chủ, các trang chi tiết, ) 5 Tích hợp 14 Tạo các movie clip và các nút bấm liên kết đặt lên trang 5 Tích hợp 15 Gán âm thanh, lện action script cho các nút bấm 5 Tích hợp 16 Điều khiển âm nhạc cho trang web 4 Tích hợp 17 Chuyển file phim thành Video Flash 5 Tích hợp 18 Cách đưa phim video flash vào trang ( embedded hoặc external) 5 Tích hợp 19 Tạo các điều khiển xem phim 4 Tích hợp 20 Tạo các banner quảng cáo bằng biến đổi hình dạng, mặt nạ, biến đổi chuyển động 5 Tích hợp 21 Chèn hoạt hình Flash vào trang web 5 Tích hợp 22 Sử dụng phần mềm Banner Design Pro, Swish max để tạo các hiệu ứng text 4 Tích hợp 23 Publish ra Shockwave Flash và HTML 10 Tích hợp 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à Untitled-1: 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 Ở 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 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ẽ. - 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 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. 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). 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 quét 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 ngoài Hình 1.5: Công cụ gradient 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: 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. 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 - 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 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 quá 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 toà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. 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. Ngoài ra, sau khi file Flash được xuất ra thành 1 đoạn phim hoà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 ngoài phạm vi của stage sẽ 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. Hình 3.2: Điểm dùng của Frame 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 frame-by-frame, 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 đỏ 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: 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. Nguyên 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: 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. Sync: đồng bộ. Hình 4.5: Thiết lập thuộc tính Bước 5: Ctrl + Enter để xem kết quả. 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 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 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. Ngoà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 chuyển độn
Tài liệu liên quan