giáo trình Flash CS4

giáo trình Flash CS4 tài liệu, giáo án, bài giảng , luận văn, luận án, đồ án, bài tập lớn về tất cả các lĩnh vực kinh...

1

Mục lục:

Chương 1: Giới thiệu và cài đặt Flash CS4

Chương 2: Thiết kế hoạch hình với Flash

Chương 3: Giới thiệu về Action Script 3.0

Chương 4: Action Script nâng cao

Chương 5: Giới thiệu về Flex

2

Lời tựa:

Cuốn sách này là sản phẩm của quá trình làm thực tập của clb Flash K51 dưới sự hướng dẫn của thầy Lê Tấn Hùng – giảng viên bộ môn CNPM, khoa CNTT trường ĐHBKHN Cuốn sách hướng tới những đối tượng mới tiếp xúc với Flash và đã có chút ít kinh nghiệm trong lập trình (C hoặc Pascal) Mặc dù vậy chúng tôi hi vọng những độc giả đã từng có kinh nghiệm với các phiên bản trước CS4 và đặc biệt những ai sử dụng Action Script 2.0 sẽ tìm thấy nhiều điều bổ ích ở cuốn sách này.Cuốn sách tiếp cận Flash từ góc độ của người thiết

kế cũng như lập trình viên Tuy nhiên, hướng tiếp cận từ góc độ lập trình viên được nhấn mạnh hơn Trong cuốn sách này, Flash được nhắc đến không chỉ như một công cụ thiết kế

mà còn với tư cách là một bộ thư viện

Chương 1: Giới thiệu bạn cách cài đặt Flash CS4

Chương 2: Giới thiệu cách thiết kế hoạt hình trong Flash và nhấn mạnh các đặc điểm mới của phiên bản CS4 so với các phiên bản trước đó

Chương 3: Tiếp cận với Action Script 3.0 giành cho những ai đã có kinh nghiệm lập trình chút ít, nếu bạn chưa có kinh nghiệm lập trình nên tìm đọc một cuốn sách về lập trình trước khi đọc chương này Chúng tôi giành đa số thời gian đề cập đến đặc điểm của Action Script 3.0 so với các ngôn ngữ phổ biến như C# hay Java

Chương 4: Chương sách này được coi là cầu nối giữa lập trình viên và người thiết kế Các vấn đề phát sinh khi kết hợp giữa viết code và sử dụng các tool có sẵn của Flash sẽ được

đề cập

Chương 5: Sự phát triển của Flash đã dẫn tới nhu cầu phải phát triển nó thành một công cụ mạnh mẽ giành cho việc viết ứng dụng trên máy để bàn cũng như viết các ứng dụng Internet (RIA – Rich Internet Application) Để đáp ứng nhu cầu này, Flex ra đời dựa trên nền tảng Flash Chương sách này đề cập tới các vấn đề căn bản về Flex mà bạn sẽ gặp phải khi phát triển trên môi trường này

Nếu bạn chưa có kinh nghiệm với Flash, chúng tôi khuyên bạn nên đọc lần lượt các chương, đặc biệt chương 5 có thể đọc lại sau khi đã đọc qua các tài liệu khác chúng tôi giới thiệu ở phần tham khảo Nếu bạn đã là một „Flasher‟, bạn cũng sẽ tìm thấy nhiều điều bổ ích ở chương 2, 4, 5

Đa số các mục trong sách đều gắn với một bài thực hành đã được cung cấp file fla (file chuẩn của Flash Proffesional CS4), và project (theo định dạng của Flex Builder 3) đi kèm Bạn có thể tham khảo hoặc sử dụng tự do các tài liệu này

Vì hạn chế về thời lượng cũng như nhiều yếu tố khác, nên trong phiên bản sách này còn rất nhiều sai sót Hi vọng sẽ nhận được sự góp ý của các bạn

Nguyễn Thành Linh

Lê Anh Tùng

4

Chương 1 : Giới thiệu Flash và Hướng dẫn cài đặt

1 Giới thiệu Flash:

Bắt đầu ngay từ khi ra đời, Flash, đứa con cưng của Marcromedia, đã thổi 1 luồng sinh khí mới vào các trang web Nó cho phép cộng đồng những người thích sáng tạo khai phá ra Web với tất cả những gì có thể : phim hoạt hình, nền game, ứng dụng được kết nối, gallery nghệ thuật , video chat, chương trình chơi nhạc MP3 hay bất

cứ thứ gì nhiều hơn nữa mà bạn có thể nghĩ ra

Với ý tưởng đó, Macromedia đã sử dụng khẩu hiệu "What the Web can be" để tiếp thị cho đứa con của mình

Là 1 công cụ sử dụng kỹ thuật vector, Flash cho ra những hình ảnh tốn ít băng thông hơn các media tạo ảnh động khác rất nhiều Điều mà ít người nhận ra là Flash không chỉ đạt hiệu quả về mặt băng thông mà nó còn làm được nhiều hơn thế Khi phần mềm tiếp tục được phát triển thì phạm vi sử dụng của nó cũng ngày càng mở rộng, và bây giờ đã là 1 trong số những media số tương tác linh hoạt nhất không chỉ hoạt động được trên Internet, mà còn trên bảng điều khiển game lẫn các thiết bị di động Nó thực sự là multimedia

Những chương trình tiên phong là các bộ phim hoạt hình ngắn (cartoon shorts) như FishBar của hãng Honkworm, phát trên MTV năm 1998 Hãng này sau đó đã sản xuất 1 loạt các phim gồm có FishBar, Violence of the Lambs Loạt phim này đã chính thức được chọn tham dự festival phim trực tuyến Sundance và sau đó được hãng Mondo Media phát hành trên mạng

Ngay từ phiên bản thứ 3, Flash được dùng để tạo các trò chơi như Whack-a-Mole, Leo's Great Day (<http://www.pepworks.com/leoenglish.swf> ), và cả những nguyên mẫu thô sơ của trò Pacman và cờ vua Bạn hãy nhớ lại rằng ở phiên bản đó, chưa

có ActionScript nên người ta đã xây dựng chúng mà hoàn toàn không dùng 1 dòng lệnh nào

Kể từ khi ra mắt năm 1997, Macromedia Flash đã nhanh chóng trở thành chuẩn cho các tương tác và ảnh động chất lượng cao trên Web Nó cung cấp âm thanh, tương tác, đồ hoạ, ảnh động trên nhiều loại nền và trình duyệt Nó cho phép nhà phát triển tạo ra những giao diện thân thiện có tính tương tác và những ứng dụng Web khác biệt ActionScript là ngôn ngữ lập trình sau hậu trường cung cấp cho người dùng nhiều kiểm soát và chức năng trong lập trình Flash hơn

Nói tóm lại, Flash cung cấp mọi thứ bạn cần để tạo và phân phối các ứng dụng mạnh có nội dung web phong phú Bạn có thể tạo từ 1 hình ảnh động đơn giản cho đến 1 ứng dụng web có tương tác phức tạp, được điều khiển theo dữ liệu như 1 siêu thị trực tuyến Bạn có thể làm phong phú thêm ứng dụng Flash của mình bằng cách bổ sung hình ảnh, âm thanh, video từ bên ngoài Flash cũng có những thành

Trở lại cuối những năm 80, câu chuyện của chúng ta bắt đầu với 4 công ty Đầu tiên

là Macromind, một công ty phần mềm đặt tại Chicago có sản phần chính là ứng dụng mang tên VideoWorks Tiếp đến là Paracomp, trụ sở tại San Francisco, nổi tiếng nhất với phần mềm Swivel3D, một ứng dụng 3D cho máy Macintosh Công ty thứ 3

là Authorware, ở Minnesota với phần mềm Authorware, ứng dụng điều khiển

CBT/multimedia Vào năm 1991, Macromind đã chuyển đến San Francisco và sát nhập với công ty Paracomp thành Macromind-Paracomp Authorware sau đó cũng rời khỏi Minnesota và sát nhập với Macromind-Paracomp ở Redwood Shores,

California để thành lập nên hãng Macromedia hùng mạnh Câu chuyện của chúng ta bắt đầu từ đây

Bạn có thể nhận ra là ta mới nhắc đến 3 thành viên trong bộ tứ làm nên câu chuyện Vậy thành viên thứ tư ở đâu? Ta hãy cùng quay trở lại tháng Giêng năm 1993,

Jonathan Gay, người viết những phần mềm trò chơi khá sớm sủa và đáng chân trọng cho Mac như Dark Castle và Beyond Dark Castle, đã thuyết phục bạn mình là Charlie Jackson (người sáng lập ra Silicon Beach Software) bỏ chút vốn đầu tư và giúp ông thành lập công ty FutureWave Công ty này có sản phẩm đầu tay là ứng dụng Go và mục đích chính của công ty là sản xuất những phần mềm có khả năng chiếm lĩnh thị trường máy tính bút (pen computer market) Nhưng thật không may là những chiếc máy tính này không được tiếp nhận, lại thêm những can thiệp của hãng AT&T nên Go trở thành 1 ứng dụng không có thị trường FutureWave gặp khó khăn nghiêm trọng vì nó chỉ là 1 công ty nhỏ không có nguồn thu nhập và đã phải sử dụng

cả năm trời để phát triển 1 phần mềm mà có khả năng sẽ không bao giờ thấy được ánh sáng của 1 ngày mới Sự cứu nguy cho nó chỉ còn trông chờ vào 1 phần mềm nhỏ mang tên SmartSketch mà họ đã phát triển như một giải pháp phụ bên cạnh Go FutureWave bắt đầu tiếp thị SmartSketch, 1 công cụ để vẽ, dùng được trên cả 2 nền Macintosh và Windows Đó là thời điểm không lâu trước khi người ta đặt ra câu hỏi tại sao FutureWave không biến SmartSketch thành 1 chương trình tạo animation 2D

Có lẽ, một trong số những ví dụ cừ khôi nhất của khả năng tiên đoán công nghệ (technological foresight) là khi FutureWave chuyển SmartSketch từ 1 chương trình tạo ảnh tĩnh thành chương trình tạo animation Sự chuyển đổi này chỉ dựa trên hy vọng rằng Internet sẽ là 1 phương tiện lớn để truyền tải 2D animation

Sau khi cả Adobe và Fractal Design từ chối mua công nghệ này, FutureWave phát hành phần mềm FutureSplash Animator vào mùa hè năm 1996 Đây là 1 ứng dụng tương đối đơn giản cho phép tạo ảnh động trên cơ sở vector tuyến tính Phần mềm này sau đó đã thu được 1 số sự chú ý khi nó được dùng để thiết kế phiên bản web MSN của Microsoft và tạp chí Disney Daily Blast Tháng 11 năm 1996, Macromedia

đề nghị FutureWave cùng hợp tác làm ăn Với FutureWave, một công ty nhỏ chỉ với

6 nhân viên thì đây quả là 1 cơ hội bất ngờ Do đó, vào tháng 12 năm ấy,

Flash 2: là 1 bước tiến lớn của ứng dụng này Nói chung thì nó bắt đầu cho sự chuyển đổi của Flash từ 1 chương trình tạo ảnh động vector tuyến tính đơn thuần thành 1 chương trình thiết kế media có tính tương tác Sự chuyển đổi này xuất phát

từ việc tích hợp các đặc tính như biểu tượng nút tái sử dụng được, đồ hoạ nhúng, font chữ vector, những action rất cơ bản, và âm thanh stereo Flash 2 cũng cho phép nhập các file có định dạng EPS, GIF, JPEG, AutoCAD DXF, BMP, Enhanced

Metafile, AIFF, Windows Metafile, và Shockwave

Flash 3: Bên cạnh sự cải tiến về giao diện thì một trong số những bổ sung đáng kể nhất trong Flash 3 là tầm quan trọng và khả năng tích hợp của các actions đã tăng lên Được xây dựng lỏng lẻo trên ngôn ngữ Javacript, actions (mà sau này được phát triển thành ActionScript) cho phép người dùng kiểm soát và tương tác với movies của họ ở 1 mức độ nhất định Hơn nữa, sự tương tác của mask, shape tweening, và sự trong suốt cho phép người dùng tận dụng được sự kiểm soát hơn đối với việc tác phẩm của họ thực sự trông như thế nào Phiên bản này chưa có được 1 ngôn ngữ kịch bản chính thống

Flash 4: được phát hành năm 1999 Một trong số những cải tiến thú vị nhất của phiên bản này là khả năng thực thi file nén MP3 trong môi trường Flash movie Phiên bản rất sơ khai của ActionScript lần đầu tiên xuất hiện trong Flash Nó làm cho việc thiết kế giao diện, thiết kế game tương tác dễ dàng hơn Những cải tiến khác bao gồm các trường văn bản chỉnh sửa được, giao diện thân thiện, và quá trình publish được đơn giản hoá

Flash 5: Sự nâng cấp lớn nhất trong Flash 5 chính là ActionScript ActionScript được xây dựng theo chuẩn ECMA-262 Hệ thống ActionScript của Flash tiếp tục được bổ sung với Javascript, định dạng HTML Macromedia đã thông báo với thế giới rằng Flash và ActionScript sẵn sàng cạnh tranh với bất kỳ đối thủ nào Những thay đổi khác trong phiên bản này là ở phần giao diện: thêm các công cụ sáng tác, lời giới thiệu panels, Movie Explorer, Macromedia Dashboard (để hỗ trợ và cập nhật qua mạng), các phím tắt do người dùng tự đặt cho các tác vụ và hàm

Flash MX: là một bước tiến lớn của Flash Hệ thống ActionScript được bổ sung UI

7

Component, xml Đây thực ra chỉ là phiên bản thứ sáu của ứng dụng nhưng

Macromedia không đánh số phiên bản như trước nữa mà thay vào đó là cái tên MX Tại sao phải dùng 1 cái tên mới? Theo Macromedia thì họ sử dụng cái tên đó nhằm báo cho nhà phát triển rằng ứng dụng này gồm có các giải pháp được tích hợp phục

vụ cho các media số trên Internet Vì các công cụ của Macromedia (như Flash, Dreamweaver, ColdFusion, …) có thể tích hợp chặt chẽ với nhau, nên công ty cảm thấy mọi việc chỉ hợp lý khi các ứng dụng của họ mang cùng 1 cái tên MX đơn giản

là nhãn hiệu sử dụng cho hệ thống các công cụ của Macromedia

Về mặt đặc điểm mà nói thì Flash MX có những nâng cấp rất giá trị Đáng chú ý nhất

là giao diện mới, sử dụng tốt, và được phân nhỏ hơn Trong phần mềm còn có các thành phần tạo sẵn, là những bộ phận, thiết bị nhỏ có thể dùng ngay, mà nếu trong điều kiện bình thường ta sẽ mất rất nhiều thời gian để tạo từ đầu Thêm nữa, sự tích hợp nhiều công cụ thiết kế trực quan mới như free transform tool, envelope modifier,

bộ hỗ trợ xử lý văn bản nâng cao, và bộ trộn màu nâng cao, cho phép người dùng kiểm soát chặt chẽ hơn các tác phẩm của mình

Flash MX 2004: Tại phiên bản này, ActionScript 2.0 đã chính thức ra mắt Đây là 1 công cụ hoàn hảo cho người thiết kế web, chuyên gia trong lĩnh vực media tương tác, hay chuyên gia phát triển nội dung multimedia Trọng tâm của phiên bản được đặt vào việc tạo, nhập liệu và thao tác nhiều loại media (như audio, video, bitmaps, vectors, text, và dữ liệu)

Flash MX Professional 2004: được dành cho các nhà thiết kế web và xây dựng phần mềm cấp cao Phiên bản này gồm tất cả các đặc tính của Flash MX 2004, cùng với một số công cụ mạnh mới Nó cung cấp những công cụ quản lý dự án để tối ưu hoá lược đồ công việc giữa các thành viên trong 1 đội làm web gồm nhà thiết kế và người phát triển Khả năng lập mã bên ngoài và xử lý dữ liệu từ database là 1 số đặc tính làm cho Flash đặc biệt phù hợp cho các dự án phức tạp, qui mô lớn được triển khai bằng cách sử dụng Flash Player cùng với 1 hệ lai HTML làm nội dung

ActionScript 2.0: chính thức ra mắt trong phiên bản Flash MX 2004 Đó là 1 ngôn ngữ hướng đối tượng theo chuẩn ECMA, hỗ trợ tính kế thừa, đặt kiểu mạnh và có

mô hình sự kiện

Macromedia Flash 8 Basic : phiên bản được công bố ngày 13/9/2005, phiên bản này là một phiên bản rút gọn các tính năng của công cụ Flash, hướng vào đối tượng người dùng chỉ muốn các tính năng cơ bản về vẽ, tạo hình động và tương tác Ra đời cùng Flash Player 8, phiên bản này hạn chế hỗ trợ video và các hiệu ứng hình ảnh cũng như hoạt hoạt

Macromedia Flash 8 Professional 8 : phiển bản này nhấn mạnh vào video và mobile Các chức năng mới bap gồm Filter và chế độ blend, khả năng tùy biến chuyển động, hỗ trợ stroke, chế độ vẽ dựa trên vật thể, chế độ cache ảnh tại thời gian thực, chế độ FlashType chống chữ nhòe, video định dạng On2 VP6, hỗ trợ tùy chỉnh mờ cho video, một bộ mã hóa và import video riêng, hỗ trợ cue point cho file dạng FLV, một thành phần (component) chạy video với nhiều chức năng nâng cao

và một bộ giả lập mobile

Adobe Flash CS3 Professional: (hay là phiên bản 9) Được ra đời vào ngày 16

tháng 4 năm 2007, đây là phiên bản đầy tiên ra đời dưới thương hiệu Adobe CS3

đã hỗ trợ đầy đủ Action Script 3.0 cho phép toàn bộ ứng dụng được chuyển sang Action Script mà không cần tới thiết kế trong tool Adobe Flash CS3 Professional, tương tác tốt hơn với các sản phẩm của Adobe như Adobe Photoshop, Adobe Fireworks, Adobe After Effect, Adobe Illustrator … tạo thành một qui trình xây dựng phần mềm/web hoàn chỉnh bằng các sản phẩm của Adobe; hỗ trợ vẽ vector tốt hơn, thừa hưởng các ưu điểm của Adobe Illustrator và Adobe Fireworks

Adobe Flash CS4 Professional: (phiên bản 10) Được công bố vào ngày 15 tháng

10 năm 2008 Phiên bản này chứa một số tính năng mang tính cánh mạng như: khung xương, xử lý vật thể 3 chiều cơ bản, animation hướng đối tượng, cơ chế xử lý chữ nâng cao và một số cải tiến của Action Script 3.0 CS4 cho phép lập trình viên tạo chuyển động hiệu quả và nhanh chóng hơn với rất nhiều tính năng nâng cao mà các phiên bản trước không có

Adobe Flex Builder: Đây là một bản hỗ trợ phát triển ứng dụng Internet dựa trên nền tảng Adobe Flash Ứng dụng Flex có thể được viết bằng Adobe Flex Builder hoặc Flex SDK được cung cấp miễn phí Hiện tại đã có phiên bản Adobe Flex Builder 3 Ứng dụng Flex có thể được viết bằng Action Script kết hợp với ngôn ngữ đánh dấu MXML, cách phát triển Flex khác với cách phát triển Flash khi mà môi trường phát triển gần giống như các IDE khác như Visual Studio hay Netbean mà bỏ

đi các công cụ vẽ hay timeline truyền thống của Flash

Flash đã phát triển từ một công cụ chuyên vẽ hoạt hình thành một nền tảng mạnh

mẽ, gọn nhẹ thích hợp cho việc phát triển các đoạn hoạt hình, các game vừa và nhỏ, các ứng dụng Internet, ứng dụng trên máy tính để bàn, ứng dụng giành cho điện thoạt di động … Được sự hậu thuẫn của Adobe, Flash chắc chắn sẽ còn phát triển hơn nữa, tiến dần vào các lĩnh vực như hiệu ứng truyền hình, phim ảnh … (phim Star Trek ~ 2009 có sử dụng các hiệu ứng bằng Flash)

Trong thời điểm hiện tại và tương lai gần, có thể khẳng định rằng khó có nền tảng nào có thể cạnh tranh với Flash trong lĩnh vực ứng dụng Internet

2 Cài đặt Flash CS4:

Trong phần sau đây bạn sẽ được hướng dẫn cách cài đặt Flash CS4

I- YÊU CẦU CẤU HÌNH HỆ THỐNG:

Windows:

CPU: 1GHz trở lên

9

OS: Microsoft® Windows® XP Service Pack 2 (Khuyến cáo Service Pack 3), Windows Vista® Home Premium, Business, Ultimate, Enterprice Service Pack 1 (đã được kiểm định với các phiên bản 32-bit)

RAM: 1GB trở lên

Bộ nhớ trống: Tối thiểu 3.5GB cho quá trình cài đặt ( không cài trên bộ nhớ flash ) Màn hình: Độ phân giải 1024x768 với 16-bit đồ họa trở lên

Ổ quang: DVD-ROM

Phần mềm: Quicktime 7.12 trở lên giúp hỗ trợ các tính năng đa phương tiện

Internet: Đường truyền băng thông rộng cho các dịch vụ online

Macintosh:

CPU: PowerPC® G5 hoặc Bộ vi xử lí đa nhân của Intel

OS: Tiger OSX 10.4.11, Leopard 10.5.4 trở lên

RAM: 1GB trở lên

Bộ nhớ trống: Tối thiểu 4GB cho quá trình cài đặt ( không cài trên bộ nhớ flash ) Màn hình: Độ phân giải 1024x768 với 16-bit đồ họa trở lên

Ổ quang: DVD-ROM

Phần mềm: Quicktime 7.12 trở lên giúp hỗ trợ các tính năng đa phương tiện

Internet: Đường truyền băng thông rộng cho các dịch vụ online

II- CÀI ĐẶT:

1- Trước khi tiến hành cài đặt, tắt tất cả các ứng dụng đang chạy, bao gồm cả các ứng dụng của Adobe, Micosoft Office, và các trình duyệt Các bạn cũng được khuyến cáo nên tạm thời tắt các phần mềm diệt virus trong quá trình cài đặt

2- Đăng nhập bằng tài khoản quản trị (Administrative Account)

3- Làm theo hướng dẫn sau:

- Cho đĩa DVD cài đặt vào ổ, và làm theo các chỉ dẫn trên màn hình Nếu bộ chương trình không được tự động cài đặt, vào thư mục Adobe CS4 trong thư mục gốc của đĩa cài, click đúp vào file Setup.exe và bắt đầu quá trình cài đặt

- Nếu bạn download phần mềm từ Internet, vào thư mục Adobe CS4, click đúp vào file Setup.exe và bắt đầu quá trình cài đặt

4- Nếu nâng cấp từ phiên bản cũ, chương trình cài đặt sẽ kiểm tra hệ thống để chọn những sản phẩm được nâng cấp Nếu ko thể tìm ra, chương trình sẽ hỏi bạn nhập mã đăng kí (serial number) của phần mềm được nâng cấp Bạn cũng có thể cài đặt phần mềm dưới dạng dùng thử (trial), sau đó nhập mã đăng kí mới vào cửa

sổ đăng kí lúc sử dụng phầm mềm

10

*) Lưu ý: Để cài đặt các gói bổ sung hoặc cài lại phần mềm sau khi đã cài đặt hoàn

tất, bạn cần sử dụng bộ cài gốc ( nằm trong CD, DVD hoặc từ Internet)

III- GỠ BỎ CÀI ĐẶT:

1- Trước khi gỡ bỏ cài đặt, tắt toàn bộ các chương trình đang chạy, bao gồm cả các ứng dụng của Adobe, Microsoft Office, và các trình duyệt,

2- Làm theo hướng dẫn sau:

- WINDOWS XP: Mở cửa sổ Control Panel và click đúp vào biểu tượng Add or Remove Programs, chọn phần mềm cần gỡ bỏ, Click Uninstall/ Change, và làm theo các chỉ dẫn trên màn hình

- WINDOWS VISTA: Mở cửa sổ Control Panel và click đúp vào biểu tượng Programs and Features, chọn phần mềm cần gỡ bỏ, click Uninstall/Change, và làm theo các chỉ dẫn trên màn hình

- MAC OS (QUAN TRỌNG): đối với hệ điều hành của Apple có tính năng gỡ

bỏ mới Không gỡ bỏ theo phương thức truyền thống là kéo thả ứng dụng vào thùng rác (Trash) Để gỡ bỏ một cách an toàn, click đúp vào bộ cài có trong đường dẫn Application/Utilities/Adobe Installers, đăng nhập bằng tài khoản quản trị, rồi chọn Remove Components và làm theo các chỉ dẫn trên màn hình

HƯỚNG DẪN CÀI ĐẶT BẰNG HÌNH ẢNH:

Vào thư mục cài đặt, click đúp vào file Setup.exe để tiến hành cài đặt

11 Chương trình cài đặt tiến hành kiểm tra thông tin cấu hình máy tính

Nhập mã đăng kí, hoặc lựa chọn cài đặt dùng thử sản phẩm, rồi chọn Next

12

- Chọn ngôn ngữ sử dụng, đường dẫn cài đặt, và các ứng dụng đi kèm rồi click

Install để bắt đầu quá trình cài đặt

- Quá trình cài đặt bắt đầu

13

- Đăng kí thông tin cá nhân:

- Click Exit để hoàn tất việc cài đặt Adobe Flash

14

HƯỚNG DẪN GỠ BỎ ADOBE FLASH BẰNG HÌNH ẢNH:

Mở cửa sổ Control Panel và click đúp vào biểu tượng Programs and Features, click đúp vào biểu tượng Adobe Flash CS4 Professional

Đánh dấu vào ô Remove Application Preferences nếu muốn xóa mọi cài đặt

15

Quá trình gỡ bỏ bắt đầu

Click Exit để hoàn tất việc gỡ bỏ Adobe Flash

16

và mềm dẻo Chương này sẽ giúp các bạn:

1 Làm quen với môi trường làm việc của Flash CS4

2 Cách vẽ, tô màu chuyên nghiệp

3 Tạo các chuyển động hoạt hình

18

Bài 1:

Làm quen với Flash CS4

1 Giao diện của Flash Professional CS4:

Để tạo 1 file Flash mới sử dụng các lựa chọn được liệt kê ở trên

Góc trên bên phải là các cách sắp xếp vùng làm việc tùy theo đối tượng sử dụng Mặc định là kiểu Essential

Mục tiêu bài học:

1 Môi trường làm việc của FlashCS4

2 Các khái niệm cơ bản

19

Do mục đích của chương này nên ta chọn kiểu làm việc Designer

Có một số vùng làm việc quan trọng được hiển thi:

1 Timeline:

Timeline là trục thời gian, thông số fps (frame per second) chỉ ra số frame (cảnh)

được diễn ra trong 1 giây Vạch đỏ chỉ frame hiện tại được hiển thị

20

Trong hình trên, frame đang hiển thị là frame 5

Mỗi dòng là 1 layer Có thể hình dung mỗi layer như một lớp bóng kính trong suốt mà

Để khóa không chỉnh sửa một layer ta sử dụng biểu tượng

Không hiển thị layer, ta sử dụng biểu tượng

Để thêm layer, ta sử dụng biểu tượng hoặc click chuột phải vào 1 layer bất kì, chọn “Insert layer”

Để xóa layer đang chọn, ta sử dụng biểu tượng hoặc click chuột phải vào layer cần xóa, chọn “Delete layer”

Sử dụng Timeline:

Bộ phận này được dùng để tổ chức, điều khiển nội dung movie theo thời gian dưới dạng các lớp và khung hình Cũng giống như khi làm phim, người ta chia độ dài về mặt thời gian của 1 Flash movie thành các khung hình liên tiếp Các lớp thì có thể được coi như những dải phim xếp chồng lên nhau Mỗi lớp là 1 hình ảnh khác nhau được đặt trên Stage Thành phần chính của Timeline gồm có: lớp (layers), khung hình (frames), và playhead (khi playhead trỏ đến khung hình nào thì khung hình đó được thể hiện Nó có nhiệm vụ chạy từ đầu film đến cuối film để các khung hình lần lượt được hiện ra) (xem hình dưới)

Các lớp của movie được liệt kê dưới dạng cột bên phía trái của bảng điều khiển Timeline các khung hình có trong mỗi lớp xuất hiện theo hàng nằm bên phải của tên lớp Vạch Timeline header nằm trên cùng của bảng để chỉ ra số thứ tự các khung hình Còn playhead, vạch màu đỏ, là để chỉ ra khung hình nào đang được biểu biễn trên Stage

Thông tin về trạng thái của Timeline được đặt ở cuối bảng, cho ta biết khung số mấy đang được chọn, tốc độ trôi của khung hình, và thời gian chạy từ khung hình thứ nhất đến khung hình hiện tại là bao nhiêu

21

Bạn có thể thay đổi các khung hình biểu diễn trong Timeline, cũng như đặt dấu (thumbnails, chấm đen, trắng, vuông, tròn ) cho nội dung của khung hình Bảng điều khiển này cho biết ở khung hình nào thì có animation Có 3 loại hình động là animation theo cách hiển thị lần lượt các khung hình, theo cách biến đổi hình dạng

và biến đổi theo đường đi Để biết nhiều thông tin hơn về animation, bạn hãy xem chương 3

Những điều khiển bên cạnh tên lớp trong bảng Timeline cho phép bạn ẩn, hiện, khoá, hay mở khoá các lớp, cũng như biểu diễn nội dung của lớp ở dạng đường viền

Bạn có thể chèn, xoá, chọn và di chuyển các khung hình trong Timeline, cũng như có thể dịch chuyển khung hình đến vị trí mới trên cùng 1 lớp hay sang lớp khác

 S ử dụng Frames và Keyframes:

Keyframe là khung hình đặc biệt, đánh dấu mốc thay đổi trong animation, hay chứa các actions để điều khiển movie Flash có thể tự sinh các khung hình (tween) giữa những keyframe để tạo hình ảnh animation liền mạch Chức năng này của Flash giúp bạn tạo animation dễ dàng hơn vì bạn không phải vẽ từng frame 1 nữa mà chỉ cần tạo một số khung hình mốc Thời lượng của 1 animation cũng có thể thay đổi được bằng cách dịch chuyển các keyframes trong Timeline

Thứ tự xuất hiện khung hình và keyframe trong bảng Timeline sẽ quyết định thứ tự

- chèn, chọn, xoá, dịch chuyển frames và keyframes

- Kéo frames và keyframes đến vị trí mới trong cùng 1 lớp hay sang lớp khác

- Sao chép frames, keyframes

- Kéo các thành phần từ Library panel ra Stage để thêm thành phần vào keyframe hiện tại

Có hai cách để chọn khung hình trong Timeline Cách chọn mặc định là chọn theo khung hình, bạn phải chọn từng khung hình riêng lẻ Trong cách chọn theo khoảng (span-based), toàn bộ khung hình từ keyframe này cho đến keyframe tiếp theo sẽ được chọn khi bạn click bất kỳ khung hình nào nằm trong khoảng đó Người dùng hoàn toàn có thể tự đặt chế độ chọn theo ý mình

Để chèn khung hình vào Timeline, có 1 số cách như sau:

- Chèn 1 khung hình mới: chọn Insert -> Timeline -> Frame

- Tạo keyframe mới: chọn Insert -> Timeline -> Keyframe, hoặc kích chuột phải vào frame được chọn, chọn tiếp Insert Keyframe trên menu vừa bật ra

- Tạo keyframe trắng: chọn Insert -> Timeline -> Blank Keyframe, hoặc kích chuột phải, chọn chức năng Insert Blank Keyframe

Để chọn 1 hay nhiều khung hình trong Timeline:

- Chọn 1 khung hình, rồi kích vào đó Nếu bạn đặt chế độ chọn theo khoảng thì khi kích vào 1 khung hình, toàn bộ chuỗi khung hình nằm giữa 2 keyframes sẽ được chọn

- Chọn nhiều khung hình liền kề nhau: bấm Shift và click các khung hình cần chọn

- Chọn các khung hình không kề nhau: bấm Control và click các khung hình cần chọn

Để chọn tất cả các khung hình trong Timeline:

- Chọn Edit -> Timeline -> Select All Frames

23

Để xoá hay chỉnh sửa 1 frame, keyframe, thực hiện 1 trong số các cách sau:

- Xoá 1 khung hình, 1 keyframe hay chuỗi các khung hình: chọn những khung hình cần xoá, chọn Edit -> Timeline -> Remove Frame, hoặc kích chuột phải vào khung hình đã chọn rồi chọn tiếp Remove Frame từ menu vừa xuất hiện Những frames xung quanh vẫn không thay đổi

- Để dịch chuyển 1 keyframe hay 1 chuỗi các khung hình cùng nội dung của chúng thì chỉ việc kéo keyframe hay chuỗi khung hình đó đến vị trí mong muốn

- Để mở rộng khoảng thời gian của 1 keyframe, bấm Alt và kéo keyframe đó đến khung hình cuối cùng trong chuỗi mới

- Để sao chép keyframe hay chuỗi khung hình: bấm Alt-click và kéo keyframe

đó đến vị trí mới

- Để sao chép 1 hay nhiều khung hình: chọn những khung hình đó rồi chọn Edit -> Timeline -> Copy Frames Chọn khung hình hay chuỗi khung hình mà bạn muốn thay thế, rồi chọn Edit > Timeline > Paste Frames

- Để chuyển 1 keyframe thành khung hình bình thường, ta chọn keyframe rồi vào Edit -> Timeline -> Clear Keyframe, hay kích chuột phải lên keyframe rồi từ menu bật ra, chọn tiếp Clear Keyframe Keyframe đã được xoá và tất cả các khung hình tiếp sau đó cho đến keyframe tiếp theo sẽ được thay thế bằng nội dung của frame đứng liền trước keyframe đã xoá

- Để thay đổi độ dài của 1 chuỗi khung hình đã tweened (được Flash tự động tạo nội dung): kéo keyframe bắt đầu hay cuối cùng của chuỗi đó về bên trái hay bên phải tương ứng

- Để thêm 1 thành phần từ thư viện vào keyframe hiện tại: kéo thành phần đó

từ Library panel vào Stage

 Làm việc với lớp:

Bạn có thể coi lớp như những tờ giấy acetate trong suốt được xếp chồng lên nhau Những lớp này giúp bạn tổ chức tác phẩm của mình dễ dàng hơn Bạn hoàn toàn có thể vẽ và chỉnh sửa trên mỗi lớp mà không làm ảnh hưởng đến các lớp khác Nếu trên 1 lớp không có đối tượng nào, hay nói cách khác là nó trống rỗng thì bạn có thể nhìn xuyên qua nó đến những lớp bên dưới

Để vẽ, tô màu hay chỉnh sửa lớp, bạn phải chọn lớp đó để đặt nó trong trạng thái làm việc (active) Biểu tượng chiếc bút chì ở cạnh tên lớp cho ta biết lớp đó có được chọn hay không Mặc dù có thể có nhiều lớp được chọn tại 1 thời điểm nhưng chỉ có

1 lớp là người dùng thực sự làm việc trên đó

Khi bạn tạo 1 file Flash mới (Flash Document), chương trình sẽ tạo sẵn trong đó 1

24

lớp Bạn có thể bổ sung thêm nhiều lớp tuỳ ý Số lớp bạn sử dụng chỉ bị giới hạn bởi

bộ nhớ máy tính của bạn và các lớp này không hề làm tăng kích thước file swf Bạn

có thể ẩn, khoá hay sắp xếp lại thứ tự các lớp

Bạn cũng có thể tổ chức và quản lý các lớp bằng cách tạo những folder và đặt các lớp vào trong folder đó Bạn có thể mở rộng hay thu nhỏ các lớp trong bảng Timeline

mà không làm ảnh hưởng đến những gì bạn thấy trên Stage Đó là 1 ý kiến tốt nếu bạn dùng các lớp hay folder riêng biệt cho các file âm thanh, actions, nhãn của khung hình, và lời chú thích cho khung hình Điều này giúp bạn tìm những thành phần đó nhanh hơn khi bạn cần chỉnh sửa chúng

Thêm nữa, bạn có thể sử dụng các lớp chỉ dẫn đặc biệt để việc vẽ và biên tập được

dễ dàng hơn, dùng các lớp mặt nạ (mask layers) để tạo những hiệu ứng phức tạp

Để tìm hiểu kỹ hơn thao tác làm việc với lớp trong Flash, bạn hãy chọn Help -> How

Do I -> Basic Flash -> Work with Layers

2 Tools:

Các tool quan trọng hay được sử dụng:

Selection Tool, Free Transform Tool, Text Tool, Line Tool, Rectangle Tool, Pen Tool, Brush Tool, Paint Bucket Tool, Eraser Tool, Zoom Tool

Selection Tool: được sử dụng để chọn các đối tượng

Free Transform Tool: được sử dụng để thay đổi kích cỡ (scale), làm méo (skew), …

3 Stage:

25

Đây là khu vực làm việc chính Tất cả mọi công việc vẽ, thực hiện chuyển động đều thực hiện trên khu vực này

Làm việc với Stage:

Sử dụng grid, guides, rulers:

Trong Flash có rulers và guides giúp người dùng vẽ và sắp đặt các đối tượng 1 cách chính xác Bạn có thể định ra các guides và bắt (snap) đối tượng theo các guides đó hay bật chế độ hiện lưới và bắt đối tượng dóng theo đó

Chú ý: Bạn có thể bắt đối tượng vào các đối tượng khác hay vào các pixel, hay dóng

đối tượng bằng cách sử dụng những đường viền dung sai

a) Dùng grid:

Khi chế độ lưới được bật, một tập các đường thẳng xuất hiện phía sau tác phẩm của bạn trong mọi cảnh Bạn có thể bắt đối tượng vào các lưới đó, và chỉnh sửa kích thước của lưới cũng như màu đường lưới

Để hiển thị hay ẩn lưới vẽ: ta chọn View -> Grid -> Show Grid

Để bật, tắt chế độ bắt (snap) theo lưới: chọn View -> Snapping -> Snap to Grid

Để đặt tuỳ chọn cho lưới:

26

1 Chọn View -> Grid -> Edit Grid Cửa sổ sau xuất hiện:

2 Chọn màu cho đường lưới: click vào tam giác nhỏ trong hộp màu

và chọn màu tuỳ ý từ bảng Màu mặc định cho đường lưới là màu ghi (gray)

3 Chọn Show Grid để hiện lưới

4 Chọn Snap to Grid để bật chế độ bắt theo lưới Sự khác biệt khi bật hay tắt chế độ này được thể hiện ở hình sau:

Hình elip bên trái được vẽ bằng công cụ bút chì khi không có chế độ Snap to Grid Còn hình bên phải có, ta thấy Flash đã tự điều chỉnh để các tiếp tuyến chính của elip

27

trùng với đường lưới

5 Để điều chỉnh khoảng cách giữa các đường lưới, người dùng nhập giá trị vào hộp văn bản bên cạnh mũi tên ngang và dọc trên cửa sổ Grid

6 Có thể thay đổi độ chính xác trong việc bắt lưới bằng cách chọn các tuỳ chọn ở mục Snap accuracy

7 Nếu muốn những cài đặt đó trở thành mặc định thì click Save Default

b) Dùng guides:

Để giúp cho việc vẽ hình đơn giản hơn, Flash cho phép người dùng tạo ra các lớp hướng dẫn (guide layers) Rồi dựa vào những lớp đó, người dùng dóng các đối tượng trên lớp khác với đối tượng đã tạo trên lớp guide Các lớp guide này sẽ không

có mặt trong file swf, và ta có thể chọn bất kỳ lớp nào làm lớp guide Bên trái tên lớp

có biểu tượng riêng, giống như hình 1 chiếc búa, chỉ ra rằng nó là lớp hướng dẫn Bạn có thể tạo 1 lớp guide để kiểm soát chuyển động của đối tượng trong 1

animation Thay vì Flash tự động tạo ra đường chuyển động của đối tượng thì bằng lớp guide này bạn có thể cho đối tượng chuyển động theo lộ trình mà bạn tự vạch ra

Chú ý: Nếu bạn kéo 1 lớp bình thường lên trên lớp guide thì Flash sẽ hiểu là bạn đã

chuyển lớp guide thành lớp guide chuyển động Để tránh sự thay đổi vô ý này, tốt nhất ta nên đặt tất cả các lớp guide ở phía cuối trong thứ tự lớp

Để chỉ định 1 lớp bình thường làm lớp guide: Chọn lớp đó và click chuột phải, chọn tiếp mục Guide từ menu vừa xuất hiện Muốn chuyển lớp guide thành lớp bình thường thì ta cũng làm như vậy và chọn Guide 1 lần nữa để đưa nó về trạng thái ban đầu

28

và chiều rộng của phần tử cũng dịch chuyển theo

4 Properties:

Đây là một panel quan trọng, chứa các thông số của đối tượng đang được lựa chọn

Ví dụ khi ta chọn một hình được vẽ trên stage thì sẽ có panel properties như sau:

Tùy vào đối tượng đang được chọn mà sẽ có các loại thông số khác nhau hiển thị ở panel properties

2 Các khái niệm cơ bản trong Flash:

 Symbol:

Khi muốn định nghĩa một đối tượng trong Flash, ta dùng khái niệm Symbol

Các loại symbol: Movie Clip, Button, Graphic

Chọn đối tượng cần định nghĩa, click chuột phải -> chọn convert to symbol

Ta có 1 Symbol tên là Symbol1 ở frame1, ở frame20; symbol đó thay đổi vị trí

Để làm được việc này, giả sử frame1 đã có sẵn symbol trong stage Chọn

frame20, click chuột phải và chọn “Insert Keyframe”

Ở khoảng giữa 2 frame ta chọn “Create Classic Tween” Ấn Enter để xem kết quả

30

Ở đây, ta sẽ vẽ lại một bản vẽ / bức ảnh có trước để đưa vào Flash theo dạng vector (Sẽ sử dụng hình vector này về sau)

Đây là bản vẽ gốc

Tạo 2 layer, với layer scan chứa ảnh và bị khóa nhằm không bị thay đổi khi vẽ trên layer drawing Sử dụng các công cụ Pen

tool, Rectangle Tool, và Oval Tool để vẽ các khối hình cơ bản dựa theo hình ban đầu

32

Sử dụng chức năng làm cong của Pen tool để chỉnh cho hình vẽ giống thật

bảng vẽ Khi vẽ bằng brush tool, mỗi nét

của bạn sẽ được chuyển thành 1 khối hình Sử dụng brush tool như thế nào thực sự tùy thuộc vào khả năng vẽ và phong cách vẽ của bạn

Thông số bạn chỉnh sửa đầu tiên khi

sử dụng brush tool là độ mềm của nét

vẽ (smoothing

Luôn ghi nhớ khi vẽ rằng mục đích của việc

vẽ này nhằm tạo các animation Chính vì vậy không nên vẽ liền 1 nét mà chia ra nhiều nét nhỏ độc lập sẽ tốt hơn khi tạo chuyển động Sử dụng Selection tool để di chuyển các nét

Có hàng loạt tùy chỉnh cho phét bạn đạt được hình vẽ như mong muốn

34

Kết quả cuối cùng là 1 bản vẽ mang đậm phong cách hoạt hình

3 Sử dụng màu hiệu quả:

Màu thực sự mạnh và hiệu quả trong việc diễn tả tông

của thiết kế hoặc cảm xúc của nhân vật hoạt hình ban

đang vẽ Chúng ta sẽ chỉnh màu sử dụng bảng trộn màu

HSB

Trước hết, hãy chuyển chế độ màu từ RGB sang HSB

Chế độ mặc định RGB là chế độ trộn màu dựa theo tỉ lệ 3

màu cơ bản: Red-Green-Blue

Chế độ HSB (hay HSV) là chế độ trộn màu dựa theo tỉ lệ

của:

H (Hue) – Vùng màu

S (Saturation) – Độ bão hòa màu

B (Bright hay V - Value) – Độ sáng

35

Ta có thiết kế gốc: Muốn chuyển màu về dạng

đen trẳng, hãy chuyển S của màu đó về 0, bạn sẽ đạt được kết quả như dưới đây

Chuyển tòan bộ màu của thiết kế về cùng một giá trị

H cũng sẽ tạo ra một hiệu ứng rất đặc biệt và thú vị

Thay đổi giá trị S sẽ tạo sự tương phản giữa các màu với nhau Chỉnh các giá trị HSB sẽ giúp bạn thay đổi tông của thiết kế nhằm giúp thiết kế phù hợp với những gì có sẵn trước đó

Ta tạo 2 layer chứa đầu và mắt của robot

Cách dùng tương tự như vơi Gradient

Ta có kết quả như sau:

Làm tương tự với phần mắt, ta có:

38

Để chỉnh cho bóng phần mắt hợp với phần đầu,

ta dùng chức năng Gradient Transform Tool

Chỉnh một chút và ta có kết quả như sau:

39

2 Sử dụng ảnh làm texture:

Đôi khi việc đổ màu theo cách trên chưa đạt được hiệu ứng cần thiết, đăc biệt với những chi tiết phức tạp như vỏ cây, bãi cỏ … thì cách đổ màu dựa vào 1 ảnh bit map lại là 1 cách tốt hơn để giải quyết vấn đề trên

Chuẩn bị trước ảnh để làm họa tiết, ảnh

nên đủ nhỏ để có thể xuất file flash lên

web

Chọn Paint Bucket Tool, sau đó chỉnh chế

độ màu sang Bitmap

Chọn ảnh bitmap tương ứng sau đó tô

màu như bình thường, ta có kết quả

như sau

Chỉnh sửa một chút và ta có kết quả