(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
AMBIENT/
Chủ đề:
Nội dung Text: Giáo trình Thiết kế hoạt hình - Nghề: Công nghệ thông tin - CĐ Kỹ Thuật Công Nghệ Bà Rịa-Vũng Tàu
- Ủ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.
3
- 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
4
- MỤC LỤC
BÀI 1:
5
- 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, 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:
Thời Hình thức
STT Tên các bài trong mô đun
gian 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ử 5 Tích hợp
dụng Shape hint
6
- 7 Sử dụng mặt nạ (mask) và các công cụ tạo hoạt 4 Tích hợp
hình: bone, deco, bind, 3D
8 Sử dụng kiểu dữ liệu, biến, hằng. Toán tử và biểu 5 Tích hợp
thức
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ủ, 5 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 5 Tích hợp
trang
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 5 Tích hợp
hoặc external)
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, 5 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 5 Tích hợp
22 Sử dụng phần mềm Banner Design Pro, Swish max 4 Tích hợp
để tạo các hiệu ứng text
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
7
- 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:
8
- 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
9
- 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 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
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
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
