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 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 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 dung 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 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 Là q 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 đặn Thự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ắn 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 (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 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 ả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ó 2 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 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 độ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 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ạ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 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 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 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 ra Menu timeline Khung hình chọn Tên lớp Khung hình 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 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 2 Lớp dẫn (Guide Layer) là một loại lớp đặc biệt, chứa quỹ đạo/đường dẫn Cần tạo một lớp dẫn cho từng 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 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 3 Vẽ 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ụ Line 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 43 5.2. Biến đổi chuyển động theo quỹ đạo – Bước 4 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 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 4 (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 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 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 5 Chọn ơ Orient to Path để hình hướng theo đường dẫn Chỉnh sửa Frame đầu tiên và Frame cuối nếu cần để hình hướng theo đường dẫn 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 47 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 48 Nội dung 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 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 49 6. Biến đổi hình dạng Bị 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 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 đượ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ản 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 50 6. 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 cơ sở Khoa Cơng nghệ thơng tin Trường Đại học Bách Khoa Hà Nội 51 6. Biến đổi hình dạng – Bước 1 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 cơ sở Khoa Cơng nghệ thơng tin Trường Đại học Bách Khoa Hà Nội 52 6. Biến đổi hình dạng – Bước 2 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 cơ sở Khoa Công nghệ thông tin Trường Đại học Bách Khoa Hà Nội 53 6. Biến đổi hình dạng – Bước 3 Á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 cơ sở Khoa Cơng nghệ thơng tin Trường Đại học Bách Khoa Hà Nội 54 6. Biến đổi hình dạng – Bước 3 (2) Ví dụ Nhấn Ctrl + Enter xem kết 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 55 Thông tin giảng viên để liên hệ Họ và tên: Nguyễn Thị Thu Trang Điện thoại: Email: trangnttfit@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 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 56 ... Skin 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 12 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... 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 24 5.1. Biến đổi chuyển động thẳng Bước 1: Vẽ/chèn đối tượng cho biến đổi Bước 2: Gom nhóm các đối tượng cần biến đổi ... Chọn menu Insert Timeline Frame F5 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 20 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