Bài giảng Tin học cơ sở: Bài 2 - Tạo hoạt ảnh trong flash hướng đến trình bày giới thiệu về hoạt ảnh; Timeline (đường thời gian/bảng tiến trình); lớp (Layer); khung hình (Frame); biến đổi chuyển động; biến đổi hình dạng.
BÀI 2: TẠO HOẠT ẢNH TRONG FLASH KHOA CÔNG NGHỆ THÔNG TIN TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI Bài giảng tin học sở Nội dung Giới thiệu hoạt ảnh Timeline (đường thời gian/bảng tiến trình) Lớp (Layer) Khung hình (Frame) Biến đổi chuyển động Biến đổi hình dạng Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội Nội dung Giới thiệu hoạt ảnh Timeline (đường thời gian/bảng tiến trình) Lớp (Layer) Khung hình (Frame) Biến đổi chuyển động Biến đổi hình dạng Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội Giới thiệu hoạt ảnh Là trình đối tượng xuất hiện, di chuyển theo chuyển động nhịp nhàng đặn Thực chuỗi ảnh tĩnh hình ảnh (khung hình - frame) thay đổi chút so với hình ảnh trước đó, hình ảnh thể khoảng thời gian ngắn Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội Giới thiệu hoạt ảnh (2) Khung hình (Frame) Biểu diễn lần thể phim Flash thời điểm cụ thể suốt trình phát lại Sau dịch chạy, chương trình thực từ khung hình đầu đến khung hình cuối Tốc độ khung hình Số lượng hình ảnh riêng biệt (khung hình) xuất giây Càng cao có nhiều khung hình đơn vị thời gian phát lại tăng kích thước tệp tin Flash mặc định thường dùng 12 fps Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội Giới thiệu hoạt ảnh (3) Flash đơn giản hóa hoạt ảnh Chỉ cần tạo hình ảnh bắt đầu hình ảnh kết thúc Flash tự tạo thứ nằm hai hình ảnh để tạo hoạt ảnh Biến đổi (Transformation) Flash có loại biến đổi Biến đổi chuyển động (Motion Transformation) Biến đổi hình dạng (Shape Transformation) Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội Giới thiệu hoạt ảnh (4) Biến đổi chuyển động Thay đổi vị trí, kích thước, màu sắc Xoay, xơ nghiêng đối tượng Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội Giới thiệu hoạt ảnh (5) Biến đổi hình dạng Thay đổi hình dạng đối tượng Ví dụ chuyển từ hình trịn thành hình vng Có thể thay đổi màu sắc, vị trí đối tượng Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội Nội dung Giới thiệu hoạt ảnh Timeline (đường thời gian/bảng tiến trình) Lớp (Layer) Khung hình (Frame) Biến đổi chuyển động Biến đổi hình dạng Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội Timeline (đường thời gian/bảng tiến trình) Là nơi hoạt ảnh diễn Khung hình chọn Tên lớp Khung hình Menu timeline Số khung hình Thời gian phát lại Tên thư mục Tốc độ khung hình Số khung hình Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 10 5.2 Biến đổi chuyển động theo quỹ đạo – Bước Lớp dẫn (Guide Layer) loại lớp đặc biệt, chứa quỹ đạo/đường dẫn Cần tạo lớp dẫn cho biến đổi chuyển động riêng biệt Cách tạo Chọn lớp chứa đối tượng cần chuyển động theo quỹ đạo Nhấn vào biểu tượng Insert Motion Guide (Add Motion Guide) chọn menu Đặt tên cho lớp dẫn muốn Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 42 5.2 Biến đổi chuyển động theo quỹ đạo – Bước Vẽ quỹ đạo/đường dẫn công cụ tạo đường vẽ (Line, Oval, Pen, Pencil, Retangle, Brush…) Ví dụ: Vẽ đường bậc thang sử dụng công cụ Line Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 43 5.2 Biến đổi chuyển động theo quỹ đạo – Bước Gắ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ẫn Frame cuối: Gắn tâm đối tượng vào cuối quỹ đạo/đường dẫn Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 44 5.2 Biến đổi chuyển động theo quỹ đạo – Bước (2) Ví dụ Frame 1: Kéo hình người cho tâm của trùng với điểm đầu đường bậc thang Frame 36: Kéo hình người cho tâm của trùng với điểm cuối đường bậc thang Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 45 Chạy thử Hình người khơng hướng theo quỹ đạo Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 46 5.2 Biến đổi chuyển động theo quỹ đạo – Bước Chọn ô Orient to Path để hình hướng theo đường dẫn Chỉnh sửa Frame Frame cuối cần để hình hướng theo đường dẫn Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 47 5.2 Biến đổi chuyển động theo quỹ đạo – Bước (2) Nhấn Ctrl + Enter để xem kết Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 48 Nội dung Giới thiệu hoạt ảnh Timeline (đường thời gian/bảng tiến trình) Lớp (Layer) Khung hình (Frame) Biến đổi chuyển động Biến đổi hình dạng Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 49 Biến đổi hình dạng Bị giới hạn cho số dạng đối tượng, áp dụng cho: Các đối tượng gom nhóm Thể biểu tượng (symbol instance) Khối văn hình ảnh bitmap Để áp dụng cho đối tượng không phép, ta chọn menu Modify Break Apart để phân tách đối tượng thành dạng đơn giản Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 50 Biến đổi hình dạng – Các bước Bước 1: Vẽ/chèn đối tượng cho biến đổi Bước 2: Chuẩn bị Timeline cho biến đổi Bước 3: Áp dụng biến đổi biến dạng Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 51 Biến đổi hình dạng – Bước Bước 1: Vẽ/chèn đối tượng cho biến đổi Có thể vẽ cơng cụ Toolbar Có thể chèn (import) đối tượng từ thư viện từ bên vào vùng thiết kế Phân tách đối tượng phức tạp cần (chọn menu Modify Break Apart) Ví dụ: • Vẽ giác cạnh (Polystar) • Chọn menu Modify Break Apart Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 52 Biến đổi hình dạng – Bước Chuẩn bị Timeline cho biến đổi Xác định thời gian hoạt hình Chọn khung hình mà bạn chọn KeyFrame kết thúc Chọn menu Insert Blank KeyFrame F7 để đặt Blank KeyFrame vào khung hình chọn Với Blank KeyFrame kết thúc chọn, tạo đố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 F7 • Tại frame 48, tạo văn chữ BK – Font: 80, màu đỏ, đậm kiểu chữ Lucida Calligraphy • Nhấn Ctrl + B lần để tách văn thành phần rời Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 53 Biến đổi hình dạng – Bước Áp dụng biến đổi biến dạng Nhấn vào timeline khung nhìn nằm khoảng KeyFrame bắt đầu kết thúc • Ví dụ: Chọn frame 24 Vào bảng Properties, chọn Shape từ hộp danh sách Tween Chọn lệnh Control Test Movie Ctrl + Enter để xem kết xem chế độ Onion Skin Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 54 Biến đổi hình dạng – Bước (2) Ví dụ Nhấn Ctrl + Enter xem kết Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 55 Thông tin giảng viên để liên hệ Họ tên: Nguyễn Thị Thu Trang Điện thoại: Email: trangntt-fit@mail.hut.edu.vn 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ố Đại Cồ Việt, Hà Nội Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 56 ... đồng hồ Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 34 Ví dụ - Rotate CW – times Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa. .. dần cuối: -1 00 -1 Nhanh chậm dần cuối: 1 100 Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 37 Ví dụ Ease = -8 0 – Nhanh dần Bài giảng Tin học sở - Khoa Công... thang Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội 45 Chạy thử Hình người khơng hướng theo quỹ đạo Bài giảng Tin học sở - Khoa Công nghệ thông tin - Trường