Đồ họa thiết kế - Bài 2: Tạo hoạt ảnh trong flash

BÀI 2: TẠO HOẠT ẢNH TRONG FLASHKHOA CÔNG NGHỆ THÔNG TINTRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘIBài giảng tin học cơ sởBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Nội dungGiới thiệu về hoạt ảnhTimeline (đường thời gian/bảng tiến trình)Lớp (Layer)Khung hình (Frame)Biến đổi chuyển độngBiến đổi hình dạngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Nội dungGiới thiệu về hoạt ảnhTimeline (đường thời gian/bảng tiến trình)Lớp (Layer)Khung hình (Frame)Biến đổi chuyển độngBiến đổi hình dạngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*1. Giới thiệu về hoạt ảnhLà quá trình các đối tượng xuất hiện, di chuyển theo một chuyển động nhịp nhàng và đều đặnThực ra là chuỗi các ảnh tĩnh trong đó mỗi hình ảnh (khung hình - frame) chỉ thay đổi một chút so với hình ảnh trước đó, mỗi hình ảnh chỉ được thể hiện trong một khoảng thời gian ngắnBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*1. Giới thiệu về hoạt ảnh (2)Khung hình (Frame)Biểu diễn một lần thể hiện của phim Flash ở mỗi thời điểm cụ thể trong suốt quá trình phát lạiSau khi dịch và chạy, chương trình được thực hiện từ khung hình đầu đến khung hình cuốiTốc độ khung hìnhSố lượng các hình ảnh riêng biệt (khung hình) xuất hiện trong một giây.Càng cao thì càng có nhiều khung hình trong một đơn vị thời gian phát lại  tăng kích thước tệp tinFlash mặc định và thường dùng là 12 fpsBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*1. Giới thiệu về hoạt ảnh (3)Flash đơn giản hóa hoạt ảnhChỉ cần tạo ra hình ảnh bắt đầu và hình ảnh kết thúcFlash tự tạo mọi thứ nằm giữa hai hình ảnh này để tạo ra hoạt ảnh  Biến đổi (Transformation)Flash có 2 loại biến đổiBiến đổi chuyển động (Motion Transformation)Biến đổi hình dạng (Shape Transformation)Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*1. Giới thiệu về hoạt ảnh (4)Biến đổi chuyển độngThay đổi vị trí, kích thước, màu sắcXoay, xô nghiêng đối tượngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*1. Giới thiệu về hoạt ảnh (5)Biến đổi hình dạngThay đổi hình dạng của đối tượng. Ví dụ chuyển từ hình tròn thành hình vuôngCó thể thay đổi màu sắc, vị trí của đối tượngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Nội dungGiới thiệu về hoạt ảnhTimeline (đường thời gian/bảng tiến trình)Lớp (Layer)Khung hình (Frame)Biến đổi chuyển độngBiến đổi hình dạngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*2. Timeline (đường thời gian/bảng tiến trình)Là nơi các hoạt ảnh diễn raSố khung hìnhTên lớpThời gian phát lạiTốc độ khung hìnhSố khung hình hiện tạiKhung hìnhTên thư mụcMenu của timelineKhung hình đang được chọnBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*2. Timeline (2)Chứa các chế độ thể hiện trên vùng thiết kếCăn giữa khung nhìnChế độ thể hiện Onion SkinChế độ thể hiện đường nét Onion SkinSửa đổi nhiều khung nhìnBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*2. Timeline (3)Center FrameCăn giữa timeline sao cho khung nhìn được chọn ở chính giữa (?)Onion SkinCho phép xem nhiều khung nhìn một lúcHiển thị các khung hình trước và sau khung hình hiện tại dưới dạng bóng mờOnion Skin OutlinesGiống Onion Frame nhưng chỉ theo dạng đường nét/khung (outline)Edit Multiple Frames Cho phép sửa nhiều khung nhìn trong Onion SkinBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*2. Timeline (4)Chứa các nút để quản lý layer (lớp), frame (khung hình), folder (thư mục)Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Nội dungGiới thiệu về hoạt ảnhTimeline (đường thời gian/bảng tiến trình)Lớp (Layer)Khung hình (Frame)Biến đổi chuyển độngBiến đổi hình dạngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*3. Layer (lớp)Layer (lớp)Chứa các đối tượngĐộc lập với nhauCó thể có nhiều lớpNên đặt tên lớp theo tính gợi nhớ nào đó hoặc theo ý nghĩa của các đối tượng thuộc về lớpChọn 1 layer:Các đối tượng của layer được chọn theo trong vùng thiết kếTimeline tương ứng của layer (dùng để điều khiển và kiểm soát các đối tượng thuộc lớp đó) cũng hiển thị bên cạnhLayer được chọnBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*3.1. Các thao tác với lớpTạo mới layer , xóa Khóa layer:Nhấn vào cột bên cạnh layer muốn khóaKhông tác động được các đối tượng trong lớp bị khóaẨn layer:Nhấn vào cột bên cạnh layer muốn ẩn (sau khi ẩn thì bên cạnh layer là )Ẩn/hiện lớp trong giai đoạn thiết kế để dễ quan sát và thao tác với các lớp khác chứ không có tác dụng khi chạyCác layerBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*3.2. Tổ chức lớpMột chương trình có thể gồm rất nhiều lớpKhó quản lýDùng thư mục để tổ chức và quản lý lớpGom các lớp có đặc điểm chung (về chức năng,) vào thành một thư mụcCó thể tạo mới hoặc xóa thư mụcBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Nội dungGiới thiệu về hoạt ảnhTimeline (đường thời gian/bảng tiến trình)Lớp (Layer)Khung hình (Frame)Biến đổi chuyển độngBiến đổi hình dạngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*4. Frame (khung hình)Biểu diễn một lần thể hiện của phim Flash ở mỗi thời điểm cụ thể trong suốt quá trình phát lạiTùy theo chức năng mà Frame có hình dạng, màu sắc và tên gọi khác nhauBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*4.1. Phân loại khung hìnhKeyFrameBiểu thị sự thay đổi trên lớp đóChọn menu Insert  Timeline  KeyFrame hoặc F6Blank KeyFrameLà một KeyFrame trắng, chưa có gìChọn menu Insert  Timeline  Blank KeyFrame hoặc F7FrameCó thể chứa dữ liệu nhưng không có sự thay đổi so với khung hình trướcFrame luôn luôn phải đi sau KeyFrameChọn menu Insert  Timeline  Frame hoặc F5Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*4.1. Phân loại khung hình (2)Flash đặt một chữ cái a trong KeyFrame có chứa các câu lệnh ActionScriptKeyFrame luôn có một chấm tròn trong nó.Là rỗng nếu đây là một Blank KeyFrameĐược tô nếu chứa một số nội dung nào đóKhung nhìn 1 luôn là KeyFrame  Nếu thêm các đối tượng vào các khung hình phía sau mà trước đó không tạo ra KeyFrame cho chúng thì Flash sẽ đặt các đối tượng này vào khung hình 1Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*4.2. Các thao tác với khung hìnhTạo mới một Frame (F5) hoặc tạo mới một KeyFrame (F6) đều tạo ra một khung hình mới có nội dung kế thừa từ frame phía trước nhưng:Frame: Khi thêm vào nó thì frame phía trước cũng cóKeyFrame: Khi thêm vào nó thì frame phía trước không cóXóa bỏ các khung hình được chọn ra khỏi bảng tiến trình:Nhấn chuột phải  Remove FramesShift + F5Chuyển đổi KeyFrame thành FrameNhấn chuột phải  Clear KeyFrameShift + F6Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Nội dungGiới thiệu về hoạt ảnhTimeline (đường thời gian/bảng tiến trình)Lớp (Layer)Khung hình (Frame)Biến đổi chuyển độngBiến đổi hình dạngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5. Biến đổi chuyển độngChỉ được áp dụng với các dạng đối tượngCác đối tượng được gom nhómThể hiện của biểu tượng (Symbol Instance) (học sau)Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.1. Biến đổi chuyển động thẳngBước 1: Vẽ/chèn đối tượng cho biến đổiBước 2: Gom nhóm các đối tượng cần biến đổi (nếu cần)Bước 3: Chuẩn bị Timeline cho biến đổiBước 4: Áp dụng biến đổi chuyển độngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.1. Biến đổi chuyển động thẳng – Bước 1Có thể vẽ đối tượng chuyển động bằng các công cụ trong thanh công cụ của FlashCó thể chèn (import) đối tượng từ thư viện hoặc từ bên ngoài vào vùng thiết kếVD:Vẽ hình người bao gồm một hình elip và một số đoạn thẳngĐây là các đối tượng riêng rẽBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.1. Biến đổi chuyển động thẳng – Bước 2Gom nhóm các đối tượng cần biến đổiVD:Chọn tất các đối tượng vừa vẽ có giữ phím Shift hoặc gõ Ctrl+A để chọn tất cảChọn menu Modify  Group hoặc Ctrl+GLúc này các đối tượng riêng lẻ trở thành một đối tượng nhóm thống nhấtKéo đối tượng nhóm này lên góc trên cùng bên trái và giảm kích thước đối tượng sử dụng công cụ Free Transform hoặc Transform Panel(Chú ý giữ Shift nếu muốn giữ ràng buộc giữa chiều cao và chiều rộng)Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.1. Biến đổi chuyển động thẳng – Bước 3Chuẩn bị Timeline cho biến đổiXác định thời gian của hoạt hình:Xác định nơi đặt KeyFrame thứ 2VD: Đặt KeyFrame ở khung hình 36 cho một hoạt ảnh bắt đầu ở đầu của phim và kéo dài trong 3sNhấn chọn khung hình mà bạn chọn là KeyFrame kết thúc, chọn menu Insert  KeyFrame hoặc F6 để tạo 1 KeyFrameVới KeyFrame kết thúc đang được chọn, di chuyển đối tượng đến vị trí mà nó cần đến khi kết thúc.Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.1. Biến đổi chuyển động thẳng – Bước 3 (2)Ví dụChọn đến khung hình 36Nhấn F6  Một KeyFrame được tạo raBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.1. Biến đổi chuyển động thẳng – Bước 4 (2)Ví dụ (tiếp)Tại frame 36 (KeyFrame kết thúc)Chọn đối tượng hình ngườiKéo xuống phía dưới cùng, bên phảiBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.1. Biến đổi chuyển động thẳng – Bước 4Bước 4: Áp dụng biến đổi chuyển độngNhấn vào timeline tại các khung nhìn nằm trong khoảng giữa của KeyFrame bắt đầu và kết thúcNhấn chuột phải chọn Create Motion Tween hoặc Chọn menu Insert  Create Motion TweenChọn lệnh Control  Test Movie hoặc Ctrl + Enter để xem kết quả hoặc xem trong chế độ Onion SkinBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.1. Biến đổi chuyển động thẳng – Bước 4 (3)Ví dụChọn Frame thứ 18Nhấn chuột phải chọn Create Motion TweenBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.1. Biến đổi chuyển động thẳng – Bước 4 (4)Ví dụ (tiếp)Nhấn Ctrl + Enter để kiểm tra kết quảBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Quay – Rotate khi Create Motion TweenKhi Create Motion Tween (hoặc chọn khung hình giữa đã tạo Motion Tween), mở bảng Properties, chọn Rotate:None: Không quayAuto: Tự động quay theo KeyFrame đầu và cuốiCW (Clockwise): Quay theo chiều kim đồng hồCCW (Counter Clockwise): Quay ngược chiều kim đồng hồBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Ví dụ - Rotate CW – 1 timesBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Ví dụ - Rotate CCW – 2 timesBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Sử dụng EasingThay đổi độ dài thời gian các khung hình xuất hiện (tốc độ thay đổi khung hình)  Chọn Ease trong bảng PropertiesKhông đổi: 0Chậm rồi tăng dần về cuối: -100  -1Nhanh rồi chậm dần về cuối: 1 100Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Ví dụ Ease = -80 – Nhanh dần đềuBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Ví dụ Ease = 80 – Chậm dần đềuBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.2. Biến đổi chuyển động theo quỹ đạoBước 1: Thực hiện các bước để tạo biến đổi chuyển động thẳngBước 3: Tạo lớp chứa quỹ đạo (lớp dẫn)Bước 2: Vẽ quỹ đạo/đường dẫnBước 4: Gắn đối tượng với quỹ đạoBước 5: Thiết lập và chỉnh đối tượng hướng theo quỹ đạo và chạy thửBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.2. Biến đổi chuyển động theo quỹ đạo – Bước 1Thực hiện các bước giống như biến đổi chuyển động thẳng để thu được hình người chuyển động thẳng từ góc trái trên cùng xuống góc phải dưới cùngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.2. Biến đổi chuyển động theo quỹ đạo – Bước 2Lớp dẫn (Guide Layer) là một loại lớp đặc biệt, chứa quỹ đạo/đường dẫnCần tạo một lớp dẫn cho từng biến đổi chuyển động riêng biệtCách tạoChọn lớp chứa các đối tượng cần chuyển động theo quỹ đạoNhấn vào biểu tượng (Add Motion Guide) hoặc chọn menu Insert  Motion GuideĐặt tên cho lớp dẫn nếu muốnBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.2. Biến đổi chuyển động theo quỹ đạo – Bước 3Vẽ quỹ đạo/đường dẫn bằng bất cứ một công cụ tạo đường vẽ nào (Line, Oval, Pen, Pencil, Retangle, Brush)Ví dụ: Vẽ đường bậc thang sử dụng công cụ LineBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.2. Biến đổi chuyển động theo quỹ đạo – Bước 4Gắn đối tượng với quỹ đạo/đường dẫn Frame đầu: Gắn tâm đối tượng vào đầu quỹ đạo/đường dẫnFrame cuối: Gắn tâm đối tượng vào cuối quỹ đạo/đường dẫnBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.2. Biến đổi chuyển động theo quỹ đạo – Bước 4 (2)Ví dụFrame 1: Kéo hình người sao cho tâm của của nó trùng với điểm đầu của đường bậc thangFrame 36: Kéo hình người sao cho tâm của của nó trùng với điểm cuối của đường bậc thangBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Chạy thử Hình người không hướng theo quỹ đạoBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.2. Biến đổi chuyển động theo quỹ đạo – Bước 5Chọn ô Orient to Path để hình hướng theo đường dẫnChỉnh sửa Frame đầu tiên và Frame cuối nếu cần để hình hướng theo đường dẫnBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*5.2. Biến đổi chuyển động theo quỹ đạo – Bước 5 (2)Nhấn Ctrl + Enter để xem kết quảBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Nội dungGiới thiệu về hoạt ảnhTimeline (đường thời gian/bảng tiến trình)Lớp (Layer)Khung hình (Frame)Biến đổi chuyển độngBiến đổi hình dạngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*6. Biến đổi hình dạngBị giới hạn cho một số dạng đối tượng, không thể áp dụng cho:Các đối tượng được gom nhómThể hiện của biểu tượng (symbol instance)Khối văn bản hoặc một hình ảnh bitmapĐể áp dụng cho đối tượng không được phép, ta có thể chọn menu Modify  Break Apart để phân tách đối tượng này thành các dạng đơn giảnBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*6. Biến đổi hình dạng – Các bướcBước 1: Vẽ/chèn đối tượng cho biến đổiBước 2: Chuẩn bị Timeline cho biến đổiBước 3: Áp dụng biến đổi biến dạngBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*6. Biến đổi hình dạng – Bước 1Bước 1: Vẽ/chèn đối tượng cho biến đổiCó thể vẽ bằng các công cụ trong ToolbarCó thể chèn (import) đối tượng từ thư viện hoặc từ bên ngoài vào vùng thiết kếPhân tách đối tượng phức tạp nếu cần (chọn menu Modify  Break Apart)Ví dụ:Vẽ đã giác đều 5 cạnh (Polystar)Chọn menu Modify  Break ApartBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*6. Biến đổi hình dạng – Bước 2Chuẩn bị Timeline cho biến đổiXác định thời gian của hoạt hìnhChọn khung hình mà bạn chọn là KeyFrame kết thúcChọn menu Insert  Blank KeyFrame hoặc F7 để đặt 1 Blank KeyFrame vào khung hình được chọnVới Blank KeyFrame kết thúc đang được chọn, tạo ra đối tượng khác cần biến thành (thường có hình dạng khác với đối tượng ban đầu)Ví dụChọn frame 48, nhấn F7Tại frame 48, tạo một văn bản là chữ BKFont: 80, màu đỏ, đậm và kiểu chữ là Lucida CalligraphyNhấn Ctrl + B 2 lần để tách văn bản thành các phần rời nhauBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*6. Biến đổi hình dạng – Bước 3Áp dụng biến đổi biến dạngNhấn vào timeline tại các khung nhìn nằm trong khoảng giữa của KeyFrame bắt đầu và kết thúcVí dụ: Chọn frame 24Vào bảng Properties, chọn Shape từ hộp danh sách TweenChọn lệnh Control  Test Movie hoặc Ctrl + Enter để xem kết quả hoặc xem trong chế độ Onion SkinBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*6. Biến đổi hình dạng – Bước 3 (2)Ví dụNhấn Ctrl + Enter xem kết quảBài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội*Thông tin giảng viên để liên hệHọ và tên: Nguyễn Thị Thu TrangĐiện thoại: Email: trangntt-fit@mail.hut.edu.vn hoặc trangntt.it@gmail.com Địa chỉ: Bộ môn Công nghệ phần mềm, P.327-C1, Khoa Công nghệ thông tin, trường Đại học Bách Khoa Hà Nội, số 1 Đại Cồ Việt, Hà Nội.