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
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (208 KB, 0 trang )
Ủ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:
STT
Tên các bài trong mô đun
Thời
Hình thức
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
5
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
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
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
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
10
Tích hợp
để tạo các hiệu ứng text
23
Publish ra Shockwave Flash và HTML
24
Kiểm tra bài 7, 12, 16, 19, 22
25
Tổng cộng
7
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:
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
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.
21
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.
22
Hình 3.2: Điểm dùng của Frame
23
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 framebyframe, 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 đỏ
24
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:
25
