MỤC TIÊU MÔ ĐUN
Trình bày được cách tạo các đối tượng, các cảnh trong phim
Nêu được trình tự xây dựng phim hoạt hình bằng Flash
Nêu được các cách thiết lập chuyển động và cách hiệu chỉnh chuyển động trong Flash
Vận dụng thành thạo cách tạo các đối tượng vẽ và gán hành động cho đối tượng vẽ Ứng dụng được vào thực tiễn
Có phẩm chất đạo đức, kỷ luật tốt, tích cực nghiên cứu học hỏi nâng cao trình độ.
NỘI DUNG MÔ ĐUN
Phần mềm Flash và các bước cài đặt
Macromedia Flash là phần mềm đồ họa chuyên nghiệp, cho phép tạo các sản phẩm nội dung tương tác hấp dẫn và thu hút người dùng trực tuyến Phần mềm này tích hợp tất cả các công cụ đơn giản để thiết kế hiệu ứng đồ họa, chữ, video và nội dung dành cho thiết bị di động Với khả năng sáng tạo đa dạng, Macromedia Flash là công cụ lý tưởng để phát triển nội dung tương tác chuyên nghiệp, nâng cao trải nghiệm người dùng trên các nền tảng khác nhau.
Vào thư mục cài đặt, click đúp vào file Setup.exe để tiến hành cài đặt
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
Để bắt đầu quá trình cài đặt, bạn cần nhập mã đăng ký hoặc chọn tùy chọn dùng thử sản phẩm, sau đó nhấn Next Tiếp theo, hãy sử dụng đường dẫn cài đặt và chọn các ứng dụng đi kèm phù hợp, rồi nhấn Install để tiến hành cài đặt phần mềm một cách thuận tiện và nhanh chóng.
- Quá trình cài đặt bắt đầu Đăng ký thông tin cá nhân
Click exit để hoàn tất quá trình cài đặt.
GIỚI THIỆU PHẦN MỀM FLASH VÀ THIẾT KẾ VẼ CƠ BẢN
Giới thiệu ứng dụng FLASH
1.1 Các tính năng của ứng dụng
Flash là công cụ phát triển ứng dụng đa dạng như thiết kế 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 và hoạt cảnh sống động Điểm mạnh của Flash là khả năng nhúng các file âm thanh và hình ảnh động, giúp nâng cao trải nghiệm người dùng Người lập trình có thể dễ dàng thiết kế các điều hướng tùy chỉnh cho chương trình của mình Ngoài ra, Flash còn hỗ trợ xuất bản đa dạng các dạng file như HTML, EXE, JPG phù hợp cho các ứng dụng trên Web hoặc đĩa CD.
Kỹ thuật Flash có thể tích hợp vào trang web hoặc hoạt động như một ứng dụng Internet độc lập, giúp thực thi tệp tin swf mà không cần phần mềm hoặc kết nối Internet Flash đặc biệt phù hợp cho các nội dung "RichMedia" hoặc "Motion Design", mang lại trải nghiệm tương tác và hấp dẫn cho người dùng Ví dụ về ứng dụng của Flash bao gồm các trình diễn đa phương tiện, game trực tuyến và các hoạt động quảng cáo sáng tạo, đáp ứng các yêu cầu về đồ họa động và âm thanh chất lượng cao.
- Tạo trang Web hoặc trò chơi
- Tạo ra các hướng dẫn
- Tạo các Video truyền hình hoặc điện ảnh
- Truyền chiếu Video qua Internet
Ngoài ra, ứng dụng Flash còn dùng trong nhiểu các phần mềm và định dạng khác, ví dụ:
- Flash Video với đuôi mở rộng flv
- FlashPaper, định dạng tương tự Acrobat PDF
Khả năng truy cập (Accessibility)
Việc xây dựng trang web bằng Flash đòi hỏi sự tối ưu cao để đảm bảo tính truy cập và trải nghiệm người dùng tốt nhất So với các trang web sử dụng XHTML hoặc HTML, phát triển web bằng Flash gặp nhiều thách thức kỹ thuật và yêu cầu tối ưu hóa đặc biệt để đảm bảo hiệu suất và khả năng truy cập cao.
- Menu: Gồm nhiều chức năng, có nhiệm vụ điều khiển tổng quát cho file flash
- Thanh công cụ: dùng để thiết kế các đối tượng, gồm có 4 phần:
+ Tool: nhóm công cụ dùng để thiết kế
+ View: nhóm công cụ hỗ trợ việc quan sát
+ Color: nhóm màu hỗ trợ cho các công cụ;
+ Options: mở rộng, bổ sung thêm các chức năng cho các công cụ trong tool
1.3 Thiết lập môi trường làm việc
- Thay đổi kích thước Stage
Kích thước của Stage xác định kích thước phim Flash
+ Thiết lập các thông số kích thước Stage rồi OK
- Phóng to – thu nhỏ Stage
- Tắt – mở thước đo (Ruler)
C1: Vào View \ Grid \ Show Grid
Hiệu chỉnh lưới: Edit Grid
Các đối tượng cơ bản
2.1 Các đối tượng trong trang hoạt hình
Đối tượng Graphic là hình ảnh tĩnh có thể tái sử dụng để tạo ra các hoạt động chuyển động Bất kỳ hình ảnh điểm, vector hoặc văn bản nào cũng có thể được chuyển đổi thành đồ họa động, giúp tăng tính hấp dẫn và khả năng truyền tải thông điệp một cách hiệu quả hơn.
Graphic Chúng chỉ có 1 frame trên thanh TimeLine Đối tượng Graphic củng không hổ trợ Action Script
- Để tạo một Graphic ta làm như sau:
+ Chọn đối tượng cần chuyển đổi sang Graphic
+ Nhấn phím F8 ( hoặc kích chuột phải chọn Convert to symbol)
Đối tượng Button được sử dụng để tương tác với phim, đáp trả các sự kiện như nhấn chuột, ấn phím và kéo các thanh trượt Một đối tượng Button có thể xử lý các hành động khác nhau để nâng cao trải nghiệm người dùng Tích hợp Button trong giao diện giúp người dùng dễ dàng điều hướng và kiểm soát các chức năng của ứng dụng phim một cách hiệu quả.
Trong Flash, có bốn loại khung tương tác chính gồm Up, Down, Over và Hit, giúp điều khiển phản hồi của đối tượng Button thông qua ActionScript Đối tượng Button có thể được cài đặt và điều khiển linh hoạt, khác biệt rõ rệt so với đối tượng Graphic Ngoài ra, lưu ý rằng trong Flash có hai lớp đối tượng Button là Simple Button và Button trong thư viện fl.Controls; Simple Button do người dùng thiết kế và chuyển đổi thành symbol, trong khi lớp Button trong thư viện dùng để thiết kế giao diện GUI cho ứng dụng Hai lớp này hoàn toàn khác biệt, mặc dù chúng có nhiều điểm tương đồng, góp phần nâng cao khả năng tùy biến và sử dụng trong từng mục đích phù hợp.
MovieClip là mẫu hoạt hình Flash có thể tái sử dụng, khác biệt với Button và Graphic nhờ có riêng một Timeline với nhiều Frame để tạo hoạt hình phức tạp Một MovieClip có thể chứa nhiều biểu tượng như Graphic, Button hoặc thậm chí nhiều MovieClip khác, giúp xây dựng các hoạt cảnh đa dạng Tương tự Button, MovieClip có khả năng điều khiển bằng ActionScript để tạo ra các hiệu ứng hoạt hình tương tác sống động và linh hoạt trong thiết kế web và ứng dụng đa phương tiện.
2.2 Khả năng thiết kế các hoạt cảnh
To access the Document Properties, go to the 'Menu' and select 'Modify' then 'Document ' or press Ctrl + J, or right-click and choose 'Document Properties.' To change the background color, click on 'Background Color' in the dialog box, which will open the color options for customization.
Chọn nhiều hình dạng cùng lúc trên khung làm việc, không phải là các phần tử của một nhóm, để dễ dàng chỉnh sửa Sau đó, vào menu Modify rồi chọn Shape, tiếp theo chọn Soften Fill Edges để làm mềm các cạnh của hình dạng Hộp thoại hiện ra cho phép bạn tù chỉnh các thông số phù hợp theo ý muốn, giúp tạo ra hiệu ứng mềm mại và chuyên nghiệp cho các hình dạng trong thiết kế của bạn.
-Distance: Khoảng cách giữa đường biên mềm và đường biên ngoài tính trên Pixel
Số bước là số lượng bước từ đường biên đầu đến kết thúc đường biên mềm Nên hạn chế số bước để giảm khối lượng tính toán của máy mỗi khi thực hiện các cử động flash, giúp tối ưu hiệu suất Tuy nhiên, không nên chọn quá nhiều bước vì điều này sẽ làm tăng đáng kể thời gian xử lý Một mức tối đa lý tưởng là 10 bước để đảm bảo cân bằng giữa độ chính xác và hiệu quả xử lý.
-Derection: Chọn hướng để đường biên mềm tạo ra bên ngoài (Expand) hoặc trong (Insert) hình dạng
Gióng hàng các đối tượng :
Nhấn Ctrl + K để sử dụng chức năng này Với các tham số :
Align left edge: canh trái đều các đối tượng
Align horizontal center: canh giữa theo hàng dọc các đối tượng
Align right edge: canh phải đều các đối tượng
Align top edge: canh trên đều các đối tượng
Align vertical center: canh giữa theo hàng ngang các đối tượng
Align bottom edge: canh dưới đều các đối tượng
Distribute top edge: canh trên đều cho các hàng đối tượng
Distribute vertical center: canh giữa theo hàng ngang cho các dòng đối tượng
Distribute bottom edge: canh dưới đều cho các hàng đối tượng
Distribute left edge: canh trái đều cho các hàng đối tượng
Distribute horizontal center: canh giữa theo hàng dọc cho các dòng đối tượng
Distribute right edge: canh phải đều cho các hàng đối tượng
Match width: canh đều trái và phải tất cả đối tượng
Match height: canh đều trên và dưới tất cả đối tượng
Match width and height: kết hợp hai thứ trên
Space evenly vertically: khoảng cách đều giữa các đối tượng theo hàng ngang
Space evenly horizontally: khoảng cách đều giữa các đối tượng theo hàng dọc
Trong quá trình làm việc với flash, việc lật hoặc quay đối tượng để tạo hiệu ứng phù hợp là điều cần thiết Các tính năng Flip giúp bạn dễ dàng lật ngược hoặc xoay đối tượng theo góc mong muốn Để thực hiện, bạn chỉ cần chọn đối tượng rồi truy cập vào Modify > Transform, nơi bạn sẽ tìm thấy các tùy chọn lật và quay phù hợp để chỉnh sửa hình ảnh một cách dễ dàng và chuyên nghiệp.
-Free Transform: tại đây bạn có thể quay một góc bất kỳ , tăng giảm kích thước , thay đổi góc độ cho một phần đối tượng
-Distort: thay đổi góc độ cho một phần đối tượng từ một điểm
-Envelope: tương tự như distort nhưng giữa các điểm vuông sẽ thêm vào các điểm tròn , các điểm tròn này có nhiệm vụ bo tròn các góc nhọn
-Scale: Chỉ có tác dụng thay đổi kích thước , nếu xài chức năng này thì tốt hơn là xài Free Transform
-Rotate and Skew: quay đối tượng bằng chuột và dời đối tượng
-Scale and Rotate: thay đổi kích thước đối tượng (%) và góc xoay tự nhập
-Rotate 90' CC: quay đối tượng một góc 90' từ bên trái lên trên
-Rotate 90' CCW: quay đối tượng một góc 90' từ bên phải lên trên
-Flip Vertical: lật ngược đối tượng theo chiều ngang
-Flip Horizontal: lật ngược đối tượng theo chiều dọc
-Remove Transform: bỏ chọn Transform
2.3 Quản lý các đối tượng bằng cửa sổ Library
Library là nơi lưu trữ các đối tượng được nhập khẩu và chuyển đổi để dễ dàng quản lý Để chuyển đổi một đối tượng thành Symbol, bạn chỉ cần nhấn chuột phải vào đối tượng và chọn "Convert to Symbol", sau đó biểu tượng này sẽ xuất hiện trong Library, chứa các đối tượng dùng trong Movie Để nhập khẩu đối tượng từ nguồn bên ngoài, bạn chọn File/Import/Import to Library, và các đối tượng đã chọn sẽ được đưa vào Library để thuận tiện sử dụng trong dự án.
Phân cảnh
Trong ngành điện ảnh, một bộ phim không thể chỉ dựa trên một cảnh duy nhất mà là tổng hợp của nhiều cảnh quay khác nhau trong các không gian đa dạng, tạo thành một câu chuyện hoàn chỉnh Trong lĩnh vực phát triển game hoặc phần mềm bằng Flash, "scene" còn mang ý nghĩa lớn hơn khi tượng trưng cho các màn chơi khác nhau, mỗi màn chơi là một phần của toàn bộ trò chơi Với các nhà lập trình, "scene" còn ám chỉ các phần riêng biệt ẩn trong cùng một form, giúp phân chia chức năng và tổ chức mã nguồn hiệu quả Do đó, "scene" đóng vai trò quan trọng trong việc xây dựng nội dung đa chiều, từ phim ảnh đến game và phần mềm, đều dựa trên nguyên tắc kết nối các thành phần nhỏ để tạo ra sản phẩm hoàn chỉnh và hấp dẫn.
Window \ Other Panels \ Scene hoặc nhấn Shift + F2
3.2 Sắp xếp và hiệu chỉnh phân cảnh Để hiển thị hộp quản lý Scene bạn chọn từ menu Window/Design
Panels/Scene (hoặc nhấn Shift + F2), hộp thoại sau sẽ hiển thị:
Khung hình hiển thị toàn bộ các scene trong dự án của bạn, giúp bạn dễ dàng quản lý và theo dõi tiến trình Hộp thoại liệt kê cho phép thao tác nhanh chóng các hành động như chỉnh sửa, thêm hoặc xóa scene một cách dễ dàng Việc sắp xếp các scene một cách hợp lý giúp nâng cao hiệu quả làm việc và tối ưu hóa quá trình sáng tạo nội dung.
+ Sử đổi tên phân cảnh: việc làm này rất có ích, lợi ích rơ ràng nhất mà ta có muốn
+ Xếp lại thứ tự phân cảnh: chọn phân cảnh muốn đổi chỗ, sau đó nhấn và giữ chuột phải, di chuyển phân cảnh đến vị trí mà bạn muốn
Trong công việc thiết kế, đôi khi bạn cần nhân đôi các phân cảnh để tiết kiệm thời gian và đảm bảo tính nhất quán Macromedia hỗ trợ chức năng nhân đôi giúp bạn dễ dàng sao chép các phân cảnh, kể cả khi chúng chứa nhiều layer hoặc khung hình lồng ghép phức tạp Việc này giúp rút ngắn quá trình thiết kế, tối ưu hóa hiệu suất làm việc và đảm bảo các phân cảnh giống hệt nhau một cách chính xác Sử dụng chức năng nhân đôi trên Macromedia là giải pháp hiệu quả cho những dự án yêu cầu tạo nhiều phân cảnh tương tự nhanh chóng và chuyên nghiệp.
Để nhân đôi cảnh quay trong dự án của bạn, hãy chọn phân cảnh cần phân đôi trong danh sách liệt kê, sau đó nhấn vào biểu tượng "Duplicate Scene" ở cuối hàng Chức năng này tương tự như "Duplicate Layer" trong Photoshop, giúp bạn sao chép nhanh chóng và dễ dàng các phân cảnh để tiết kiệm thời gian chỉnh sửa Đây là bước quan trọng trong quá trình chỉnh sửa video, đảm bảo bạn có thể nhanh chóng tạo ra các bản sao của phân cảnh để chỉnh sửa hoặc thử nghiệm các ý tưởng mới.
Chức năng thêm cảnh mới hoạt động giống như việc bạn tạo phân cảnh trước đó, giúp dễ dàng phân chia nội dung rõ ràng hơn Để thực hiện, bạn chỉ cần nhấn vào biểu tượng thứ hai có hình dấu cộng, từ đó tạo ra phân cảnh mới một cách nhanh chóng và thuận tiện.
+ Xóa một phân cảnh: không nói hơn đó là biểu tượng hình thùng rác.
Thực hành
4.1 Thao tác các công cụ vẽ và thiết lập môi trường vẽ
4.2 Xây dựng 3 đối tượng trên 3 lớp
- Vào Insert/ TimeLine/ Layer tạo thêm 2 lớp
- Chọn vào Layer 1 để vẽ đối tượng hình tròn băng Oval Tool
- Chọn vào Layer 2 để vẽ đối tượng hình chử nhật bằng Rectangle Tool
- Chọn Layer 3 và vẽ tương tự
4.3 Xây dựng 5 phân cảnh cho 3 đối tượng
- Chọn Insert/ Scene tạo thêm 4 scene
- Chọn scene 1 vẽ đối tượng thứ 1 và tiến hành vẽ đối tượng
- Các Scene sau cũng vẽ tương tự.
TẠO CHUYỂN ĐỘNG
Thiết kế hoạt hình
1.3 Gán hành động bằng Timeline
Sử dụng khung nối tiếp là phương pháp đặt từng phần tử khác nhau vào các frame hoặc đoạn frame riêng biệt, sau đó ráp nối chúng như một đoạn phim Phương pháp này dễ thực hiện và mang lại nhiều khả năng kiểm soát hơn, giúp bạn dễ dàng tùy chỉnh các phần tử trong quá trình sản xuất Tuy nhiên, nhược điểm của phương pháp này là mất nhiều thời gian hơn so với các kỹ thuật khác, đòi hỏi sự kiên nhẫn và kỹ năng để hoàn thiện sản phẩm một cách chuyên nghiệp.
Sử dụng khung biến đổi giúp tiết kiệm công sức so với phương pháp thủ công, nhờ vào khả năng biến đổi tự động của phần mềm Flash Chúng ta chỉ cần xác định điểm bắt đầu và điểm kết thúc, phần mềm sẽ tự động tính toán và điều chỉnh đối tượng theo đúng quá trình chuyển đổi mong muốn Ví dụ, chọn điểm đầu là hình vuông và điểm cuối là hình tròn trong 24 khung hình tương đương 2 giây, hình vuông sẽ dần biến thành hình tròn bằng cách bo tròn các cạnh một cách tự nhiên và liên tục.
Chúng ta sẽ bắt đầu với việc tìm hiểu chức năng của các thành phần trên khung Sau đây sẽ là những phần mà các bạn cần quan tâm :
Tính từ trái qua thì lần lượt là :
Nút canh giữa khung hình giúp căn giữa khung hình mà bạn đang chọn một cách nhanh chóng Ví dụ, nếu bạn cuộn đến vị trí 1500 trong tổng số 2000 khung hình của đoạn flash, nhưng trỏ chuột của bạn đang ở vị trí 300, việc nhấn nút canh giữa sẽ tự động đưa bạn trở lại vị trí 300 một cách nhanh chóng, tối ưu hóa quá trình chỉnh sửa và xem phim.
Nút Onion Skin giúp bạn xem và chỉnh sửa nhiều khung hình cùng lúc, thuận tiện cho quá trình tạo hoạt hình Khi đang ở một vị trí trên thanh tiến trình, chọn nút Onion Skin sẽ gom toàn bộ nội dung của các khung hình vào giữa hai điểm đánh dấu, giúp bạn dễ dàng quan sát và chỉnh sửa các đoạn khung hình một cách chính xác Tính năng này tối ưu hóa quá trình sáng tạo, nâng cao hiệu quả làm việc với các dự án hoạt hình.
- Nút Edit Multiple Frames :chỉnh sửa nhiều khung hình và phần thể hiện tương tự Onion Skin
- Nút Modify Onion Markers :khi nhấp vào nút này thì một bành sẽ hiện ra :
Bảng này có nhiệm vụ thay đổi các điểm đánh dấu của Onion Skin với các thông số sau :
+ Always Show Marker: làm cho các điểm đánh dấu Onion Skin hiển thị hay không hiển thị cho dù bạn có hay không có chọn tính năng Onion Skin
+ Anchor Onion: giữ lại hay khóa các điểm được đánh dấu chọn Onion Skin tại vị trí mà chúng đang hiện diện
+ Onion 2: Thiết lập các điểm đánh dấu bằng Onion Skin ở vị trí hai khung hình nằm trước và sau vị trí thanh thực hiện
+ Onion 5: giống như Onion 2 nhưng thay vào 2 là 5 khung hình trước và sau
+ Onion All: thực hiện chức năng Onion skin với tất cả các khung hình trong cảnh hiện tại.
Biến đổi vị trí hình vẽ
- Vẽ đường thẳng với Line
B1: Nhấp vào công cụ Line
B2: Di chuyển con trỏ chuột lên Stage
B1: Nhấp vào công cụ Oval
B2: Di chuyển con trỏ lên Stage
B1: Nhấp vào công cụ Rectangle
B2: Di chuyển con trỏ chuột lên Stage
-Vẽ hình đa giác nhiều cạnh
B1: Nhấp vào công cụ Rectangle
B2: Nhấp vào Nút Options trên bảng Properties Xuất hiện hộp thoại Tool Settings
Bạn chọn keyframe đầu của Tween Property Inspector sẽ cung cấp các tùy chọn dưới đây
Auto: tự động xoay đối tượng theo góc xoay được bạn thực hiện thông qua công cụ Free Transform Tool
Trong phần hướng dẫn, bạn sẽ gặp lệnh CW, viết tắt của "clockwise", có nghĩa là xoay đối tượng theo chiều kim đồng hồ Để thiết lập số vòng xoay, bạn có thể gõ trực tiếp số vòng mong muốn vào ô bên phải hoặc rê chuột đến khi con trỏ chuyển thành hình bàn tay có mũi tên hai chiều, sau đó nhấn giữ để kéo và thay đổi số vòng một cách dễ dàng.
CCW: (counterclockwise) xoay đối tượng ngược chiều kim đồng hồ Bạn xác lập số vòng xoay tương tự như trường hợp CW
Mục Snap giúp đối tượng bắt đường dẫn (đường cong đã vẽ trong bài thực hành, còn gọi là motion guide) một cách chính xác Mặc định, mục này đã được kích hoạt sẵn, nhưng nếu đối tượng chưa tự động hít vào đường dẫn, người dùng cần chọn mục Snap thủ công để đảm bảo hành trình của đối tượng diễn ra đúng theo hướng dẫn Điều này giúp tạo chuyển động mượt mà và chính xác trong quá trình thiết kế motion guide.
Chọn mục "Orient to Path" để đối tượng luôn xoay hướng theo đường dẫn, giúp chuyển động trông chân thực hơn Để đạt hiệu quả tối ưu, bạn cần xoay đối tượng ở keyframe đầu và keyframe cuối phù hợp với hướng của đường dẫn, đảm bảo chuyển động mượt mà và tự nhiên.
Mục Sync: chọn mục này để đồng bộ hóa Timeline của graphic symbol với Timeline chính (Xem các bài thực hành tiếp theo)
Chọn mục Scale để đối tượng co giãn liên tục trong suốt quá trình chuyển động khi kích thước của đối tượng ở keyframe đầu và keyframe cuối khác nhau Nếu không chọn mục này, đối tượng sẽ giữ nguyên kích thước ban đầu và chỉ thay đổi kích thước khi đến keyframe cuối, giúp tạo hiệu ứng chuyển động mượt mà và linh hoạt hơn trong quá trình chỉnh sửa.
2.3 Trình tự các bước biến đổi
Bước 1 Trên khung sáng tác, bạn hãy sử dụng công cụ vẽ đối tượng mong muốn
Bước 2 Kích chuột vào Frame thứ bất kỳ, nhấp F6 để chèn KeyFrame kết thúc Tại Frame kết thúc, bạn hãy thay đổi vị trí của đối tượng
Bước 3 Bấm chuột vào khoảng cách giửa các KeyFrame mở đầu và KeyFrame kết thúc, kích chuột phải và chọn Classic Tween
Bược 4: nhấn Ctrl + Enter để kiểm tra kết quả
- Các bước sử dụng Classic Tween để tạo hiệu ứng động của quả bóng chuyền:
Bước 1 Trên khung sáng tác, bạn hãy sử dụng công cụ Oval để tạo một hình quả bóng và trang trí nó theo hình quả bóng chuyền
Trong bước này, bạn cần kích chuột vào Frame thứ 10 và nhấn F6 để chèn KeyFrame kết thúc, sau đó thay đổi vị trí của quả bóng khi chạm mặt đất Tiếp theo, tại Frame thứ 20, nhấn F6 để thêm một KeyFrame mới và chỉnh vị trí quả bóng để thể hiện quả bóng nảy lên Quá trình này cần lặp lại nhiều lần với các KeyFrame tiếp theo cho đến khi quả bóng dừng lại phù hợp, tạo hiệu ứng bóng nảy tự nhiên trong hoạt hình.
Trong bước 3, bạn cần nhấn chuột vào khoảng cách giữa các KeyFrame mở đầu và KeyFrame kết thúc, sau đó chọn "Classic Tween" để tạo hiệu ứng chuyển động mượt mà Hãy lặp lại thao tác này cho tất cả các khoảng KeyFrame còn lại để hoàn thiện quá trình hoạt hình.
Bược 4: nhấn Ctrl + Enter để kiểm tra kết quả.
Sự biến đổi hình dạng hình vẽ
3.1 Các yêu cầu của biến đổi hình vẽ
Shape tween chỉ áp dụng cho đối tượng dạng Shape, thường hiển thị các hạt li ti khi chọn đối tượng cùng biểu tượng hình tròn và hình vuông cắt nhau dưới Property Inspector Nếu đối tượng không phải dạng Shape, trên Timeline sẽ xuất hiện lỗi dạng đường chấm chấm như hình minh họa Trường hợp này thường xảy ra khi vô tình thêm đối tượng vào một tween đã có hoặc chuyển đổi Shape sang symbol mà không phải.
Shape Tween có các tính năng riêng biệt, chủ yếu là để “Biến hình” giữa các đối tượng, khác với các loại Tween khác có thể chuyển đổi màu sắc hoặc hình dạng đơn giản Để tạo hiệu ứng biến hình, bạn cần thiết lập hai KeyFrame mở đầu và kết thúc, tương tự như Classic Tween Tuy nhiên, Shape Tween không hỗ trợ hiệu ứng 3D hoặc chức năng swap symbol để thay đổi biểu tượng nguồn của đối tượng Khi thực hiện Shape Tween, đối tượng sẽ chuyển đổi thành hai đối tượng Graphic, tương ứng với hai KeyFrame ban đầu và cuối, và sử dụng thuật toán Transform để điều chỉnh quá trình biến đổi này.
Trong bước 2, bạn có thể sử dụng công cụ Shape Tween để tạo hiệu ứng chuyển động cho đối tượng Bạn nên chọn tạo Tween sau khi chèn KeyFrame để dễ dàng kiểm soát quá trình chuyển đổi, và sử dụng công cụ Selection để chọn đối tượng, sau đó nhấn chuột phải và chọn Create Shape Tween Việc tạo Shape Tween giúp hiệu quả hoạt hình trở nên mượt mà và chuyên nghiệp hơn.
Trong bước 3, bạn chọn một Frame trên Timeline và nhấn phím F6 để chèn KeyFrame kết thúc, giúp lưu lại vị trí chỉnh sửa Sau đó, sử dụng công cụ Add anchor point để thêm điểm điều khiển chính giữa đường thẳng, tạo sự linh hoạt trong chỉnh sửa đường cong Tiếp đó, chọn công cụ Convert Anchor Point để tạo điểm uốn, cho phép bạn điều chỉnh hình dạng của đường cong theo ý muốn Cuối cùng, hãy chọn điểm mới tạo ra và điều chỉnh biến hình để đạt được kết quả mong muốn, nâng cao hiệu quả thiết kế trong quá trình animation.
- Bước 4: nhấp tổ hợp Ctrl + Enter để kiểm tra sản phẩm
-Ví dụ biến đường thẳng thành đường cong:
- Bước 1: Dùng công cụ Line vẽ một đường thẳng trên khung sáng tác
Bước 2: Sử dụng công cụ Shape Tween để tạo hiệu ứng chuyển động mượt mà cho đối tượng Bạn có thể tạo Shape Tween trước hoặc sau khi chèn KeyFrame, trong đó hướng dẫn tạo Shape Tween trước để dễ dàng minh họa quá trình chuyển động Để thực hiện, hãy dùng công cụ Selection, chọn đối tượng muốn Tween, nhấn chuột phải và chọn "Create Shape Tween" để bắt đầu quá trình tạo hiệu ứng chuyển đổi dạng hình ảnh.
Trong bước 2, người dùng cần chọn Frame 30 trên Timeline và nhấn F6 để chèn KeyFrame kết thúc Tiếp theo, sử dụng công cụ Add Anchor Point để thêm điểm điều khiển tại giữa đường thẳng, giúp kiểm soát dễ dàng hơn Sau đó, chọn công cụ Convert Anchor Point để tạo điểm uốn, rồi điều chỉnh điểm vừa tạo để biến đường thẳng thành đường cong mềm mại, tạo nên hình dạng mong muốn trong quá trình thiết kế.
- Bước 3: nhấp tổ hợp Ctrl + Enter để kiểm tra sản phẩm.
Thực hành
Macromedia Flash là phần mềm chuyên nghiệp giúp tạo hoạt hình, trò chơi và thiết kế giao diện web, đóng vai trò quan trọng trong lĩnh vực internet và công nghệ giải trí Mặc dù nhiều công nghệ mới cạnh tranh, nhưng Flash vẫn chiếm thị phần lớn và được nhiều người sử dụng Tuy nhiên, không phải ai cũng thành thạo trong việc sử dụng Flash, vì vậy chúng tôi đã biên soạn giáo trình Macromedia Flash để cung cấp kiến thức cơ bản và giúp bạn làm quen cũng như thành thạo công cụ này Giáo trình được chia thành các bài học phù hợp để nâng cao kỹ năng sử dụng Flash một cách hiệu quả.
• BÀI 1: GIỚI THIỆU PHẦN MỀM FLASH VÀ THIẾT KẾ VẼ CƠ BẢN
LÀM VIỆC VỚI LỚP
Lớp và thiết lập lớp
Lớp trong thiết kế giống như những tờ giấy trong suốt được xếp chồng lên nhau, giúp bạn tổ chức tác phẩm dễ dàng hơn Bạn có thể vẽ và chỉnh sửa trên mỗi lớp riêng biệt mà không làm ảnh hưởng đến các lớp khác Khi một lớp trống rỗng, bạn có thể nhìn xuyên qua nó để xem các lớp bên dưới, tạo điều kiện thuận lợi cho quá trình sáng tạo và chỉnh sửa hình ảnh.
Bạn có thể thêm nhiều Layer để sắp xếp các ảnh, ảnh chuyển động và các thành phần khác trong đoạn phim, giúp tổ chức dự án dễ dàng hơn Các Layer cho phép bạn vẽ và hiệu chỉnh các đối tượng riêng biệt mà không ảnh hưởng đến các đối tượng khác, kể cả khi không có đối tượng trên Layer đầu tiên, bạn có thể nhìn xuyên qua các Layer phía dưới Số lượng Layer không giới hạn và không làm tăng kích thước tệp khi xuất video, phù hợp với khả năng bộ nhớ của máy tính Bạn có thể ẩn, khóa hoặc hiển thị nội dung của Layer, cũng như thay đổi trật tự của chúng để tùy chỉnh quy trình làm việc Ngoài ra, Guide Layer giúp việc vẽ và hiệu chỉnh dễ dàng hơn, trong khi Mask Layer cho phép tạo ra các hiệu ứng phức tạp để nâng cao chất lượng đoạn phim.
- Tạo lớp bằng cách Insert/ Timeline/ Layer hay click phải
- Chọn lớp cần thiết lập Modify\ Timeline\ Layer Propetries
- Tiến hành thiết lập theo ý muốn
Trong quá trình làm việc, bạn có thể dễ dàng hiển thị hoặc ẩn các Layer bằng cách sử dụng biểu tượng dấu X đỏ bên cạnh tên Layer, cho biết Layer đang bị ẩn đi Các Layer ẩn vẫn được giữ lại khi xuất ra đoạn phim, đảm bảo các đối tượng quan trọng không mất đi Để phân biệt các loại Layer và dễ dàng quản lý, bạn có thể hiển thị tất cả các đối tượng trong một Layer dưới dạng đường viền màu, giúp dễ quan sát hơn Ngoài ra, bạn còn có thể tùy chỉnh màu viền của từng Layer để phù hợp với nhu cầu làm việc, nâng cao hiệu quả thiết kế.
Bạn có thể ẩn và hiển thị lại Layer bằng cách nhấp vào biểu tượng con mắt Eye đặt bên phải tên Layer Khi nhấp vào biểu tượng này, Layer sẽ biến mất khỏi màn hình, giúp bạn dễ dàng tập trung vào nội dung khác Để hiển thị lại Layer, chỉ cần nhấp vào biểu tượng con mắt một lần nữa Việc quản lý Layer theo cách này giúp tối ưu hóa quá trình chỉnh sửa và tổ chức dự án của bạn một cách hiệu quả.
Nhấn vào cột Outline bên phải tên của Layer để hiển thị tất cả các đường viền của các đối tượng trong Layer đó Nhấp lại để tắt chế độ hiển thị các đường viền, giúp bạn dễ dàng quản lý và chỉnh sửa các đối tượng trong dự án của mình.
Lớp mặt nạ
2.1 ứng dụng lớp mặt nạ
Hiệu ứng mặt nạ (Masking) cho phép thiết lập vùng hiển thị tùy ý các hình ảnh trên các lớp bị che nằm dưới thông qua lớp mặt nạ ở trên (mask layer) Kỹ thuật này sử dụng cấu trúc gồm lớp mặt nạ ở trên cùng và một hoặc nhiều lớp bị che nằm phía dưới chứa hình ảnh nền cần hiển thị rõ nét Masking giúp kiểm soát chính xác phần hình ảnh được hiển thị, tối ưu hóa hiệu ứng thị giác trong quá trình xử lý ảnh.
Bạn có thể tạo ra nhiều hiệu ứng đẹp mắt như hiệu ứng đèn pha, kính lúp, chụp x-quang bằng cách thêm các chuyển động vào lớp mask hoặc các lớp bị che trong thiết kế của bạn Việc này giúp tăng tính sáng tạo và đa dạng cho các dự án hình ảnh và video của bạn Sử dụng chuyển động cho mask sẽ mang đến các hiệu ứng động hấp dẫn, giúp nội dung của bạn nổi bật và chuyên nghiệp hơn.
2.2 Cách tạo lớp mặt nạ
2.3 Hiệu chỉnh lớp mặt nạ
Thêm bớt các lớp bị che (Masked layer ) bằng cách Drag các layer vào hoặc ra khỏi layer mask
Chỉnh sửa lớp mask và các lớp bị che: bỏ khoá layer, chọn outline để dễ quan sát phần bị che trong khi chỉnh sửa
XÂY DỰNG CÁC ACTION
Làm việc với nút
Vào Insert \ New Symbol \ Button
Up: Trạng thái bình thường của button
Over: Khi rê chuột lên button
Down: Khi click chuột lên button
- Sử dụng button tạo sẳn vào Window/ Common Libraries/ Button
1.2 Các tính năng của nút
Khi ta nhấn vào nút sẽ thực hiện các hành động nào đó cho một sự kiện
Gán lệnh cho button: Có 2 cách
- Gán trực tiếp vào button: lệnh được đặt trong button
Nhập lệnh trực tiếp vào button (Event in button):
Click chọn button và gõ lệnh trong action panel
- Gán thông qua tên instance của nó: Lệnh được đặt trong timeline của button đó
Gán lệnh qua tên instance của button (Event in keyframe)
Click chọn keyframe có button đó rồi gõ lệnh trong action panel
Xây dựng hoạt hình bằng Action
2.1 Làm việc với cửa sổ Action
Mở bảng điều khiển Action
2.2 Gán Action lên các Frame
Ta click phải vào Frame cần gán Action chọn Action
- Khung Action hiện ra ta tiến hành gõ lệnh
2.3 Các cấu trúc Action cơ bản
- Cấu trúc của một câu lệnh Action gồm 3 phần chính
Tạm dịch là : Từ khóa ( Sự kiện) { Hành động } ;
Một câu lệnh thường kết thúc bằng dấu ( ;) Nếu bạn thấy một câu nào đó nằm sau dấu // thì nó được xem là phần chú thích
Trong Action trên Timeline, bạn có thể gửi lệnh trực tiếp cho Timeline thực hiện một hành động cụ thể tại một khung hình mong muốn, mà không cần sử dụng từ khóa hay sự kiện trung gian Điều này giúp quá trình lập trình trở nên nhanh chóng và trực quan hơn, phù hợp cho việc tạo ra các hiệu ứng hoặc hành động chính xác trong dự án của bạn.
Trong lập trình, để xử lý Action trên nút, ta thường sử dụng câu lệnh dạng on( Sự kiện ) { hành động } , nghĩa là khi xảy ra một sự kiện cụ thể trên nút như nhấn hoặc click, thì các hành động trong khối {} sẽ được thực thi Cấu trúc này giúp tạo ra các tương tác mượt mà và hiệu quả cho ứng dụng của bạn.
+ Đối với Action trên Movie Clip thì ta thường có câu lệnh dạng : onClipEvent ( Sự kiện) { Hành động} ;
Kiểm tra
1 Tạo một mạch điện: Sau 3 giây khóa K đóng thì đèn cháy sáng Cháy trong
5 giây thì đèn lại tắt
2 Tạo chuyển động quay cho kim đồng hồ Trong vòng 12 giây phải quay được 1 vòng
3 Tạo chuyển động của xe tải chạy trong thành phố trong đó bánh xe quay khi xe chuyển động (chú y chỉ tạo l lớp xe và 1 lớp background)
4 Tạo biểu tượng electron chuyển động trên quỹ đạo (dùng lớp dẫn)
5 Tạo cảnh tảng đá lăn từ trên đồi xuống chân đống rơm rồi dừng hẳn
- Thiết kế bức tranh đồng quê (đồi, nhà, cây, đống rơm, mây,….)
- Tạo lớp dẫn chuyển động
6 Dùng kĩ thuật lớp dẫn diễn tả cảnh đua xe lạng lách
7 Dùng kĩ thuật lớp dẫn diễn tả cảnh bong bóng bay
- Trình bày các Action trong Flash;
- Vận dụng vào thiết kế các đối tượng hoạt hình;
- Hình thành tác phong làm việc công nghiệp, tập thể
Vào Insert \ New Symbol \ Button
Up: Trạng thái bình thường của button
Over: Khi rê chuột lên button
Down: Khi click chuột lên button
- Sử dụng button tạo sẳn vào Window/ Common Libraries/ Button
1.2 Các tính năng của nút
Khi ta nhấn vào nút sẽ thực hiện các hành động nào đó cho một sự kiện
Gán lệnh cho button: Có 2 cách
- Gán trực tiếp vào button: lệnh được đặt trong button
Nhập lệnh trực tiếp vào button (Event in button):
Click chọn button và gõ lệnh trong action panel
- Gán thông qua tên instance của nó: Lệnh được đặt trong timeline của button đó
Gán lệnh qua tên instance của button (Event in keyframe)
Click chọn keyframe có button đó rồi gõ lệnh trong action panel
2 Xây dựng hoạt hình bằng Action
2.1 Làm việc với cửa sổ Action
Mở bảng điều khiển Action
2.2 Gán Action lên các Frame
Ta click phải vào Frame cần gán Action chọn Action
- Khung Action hiện ra ta tiến hành gõ lệnh
2.3 Các cấu trúc Action cơ bản
- Cấu trúc của một câu lệnh Action gồm 3 phần chính
Tạm dịch là : Từ khóa ( Sự kiện) { Hành động } ;
Một câu lệnh thường kết thúc bằng dấu ( ;) Nếu bạn thấy một câu nào đó nằm sau dấu // thì nó được xem là phần chú thích
Trong Action trên Timeline, bạn có thể ra lệnh trực tiếp cho Timeline thực hiện một hành động cụ thể tại một frame mong muốn mà không cần sử dụng từ khóa hoặc sự kiện trung gian nào Điều này giúp tăng tính linh hoạt và trực quan trong quá trình chỉnh sửa hoặc lập trình dự án của bạn.
Trong lập trình, để xử lý các hành động khi người dùng nhấn nút, ta thường sử dụng câu lệnh dạng on(Sự kiện) { hành động } Câu lệnh này cho phép thực hiện các hành động nhất định sau khi một sự kiện như nhấn nút xảy ra, đảm bảo tương tác linh hoạt và hiệu quả cho trang web hoặc ứng dụng của bạn.
+ Đối với Action trên Movie Clip thì ta thường có câu lệnh dạng : onClipEvent ( Sự kiện) { Hành động} ;
3.1 Nhóm Autoplay nextFrame: đến khung hình tiếp theo và chạy từ đó prevFrame: quay lại khung hình sau và chạy từ đó Nếu khung hình hiện tại là khung hình 1 thì không làm gì cả nextScene(): đến khung hình 1 của cảnh tiếp theo và chạy từ đó prevScene(): đến khung hình 1 của cảnh trước và chạy từ đó
Play(): chạy tiếp từ frame hiện tại
Stop(): dừng lại ở frame hiện tại
Lệnh Key Press kích hoạt action khi nhấn phím xác định Nếu bạn chọn tùy chọn này, bạn hãy nhập vào tên phím trong hộp ký tự
3.3 Nhóm Goto gotoAndPlay ( frame): đến khung hình frame và chạy tiếp từ khung hình này gotoAndPlay (scene, frame): đến khung hình frame của scene và chạy tiếp từ đó gotoAndStop (frame): đến khung hình frame và dừng lại gotoAndStop (scene, frame): đến khung hình frame cảnh scene và dừng lại
4.1 Tạo các nút và xây dựng Action trên nút
Vào Insert \ New Symbol \ Button
Up: Trạng thái bình thường của button
Over: Khi rê chuột lên button
Down: Khi click chuột lên button
- Sử dụng button tạo sẳn vào Window/ Common Libraries/ Button
Sau khi tạo xong nút ta click phải vào nút chon Action để tiến hành viết code
4.2 Dùng Action mô phỏng hiện tượng tuyết rơi
Create a new flash file, press Ctrl + J to open Document Properties, and set the dimensions to match the background image you have Choose a dark background color and set the frame rate to 27 fps, then click OK Next, insert the background image into the flash file for a seamless design.
Chọn công cụ Oval Tool (O) để bắt đầu vẽ hình Trong phần Colors của Tool Panel, khóa màu Stroke bằng cách nhấn vào biểu tượng bút chì nhỏ và chọn hình vuông có đường chéo đỏ để cài đặt chức năng khóa màu Đặt màu FillColor là màu trắng để đảm bảo hình vẽ có nền phù hợp Sau đó, tiến hành vẽ hình theo ý muốn để hoàn thiện thiết kế.
Trong khi vẫn chọn hình vừa vẽ, nhấn phím F8 (Convert to Symbol) để chuyển hình tròn vừa vẽ sang dạng Movie Clip Symbol
While maintaining the selected Movie Clip, navigate to the Properties Panel located at the bottom of the workspace On the left side, in the Instance Name field, enter "snow" as the name of the Movie Clip.
Select the Selection Tool (V) and click once on the Movie Clip (circle) to select it Then, open the ActionScript Panel (F9) and input the following code: onClipEvent (load) { movieWidth = 350; movieHeight = 263; i = 1 + Math.random() * 2; k = -Math.PI + Math.random() * Math.PI; this._xscale = this._yscaleP + Math.random() * 100; this._alpha = 75 + Math.random() * 100; this._x = -10 + Math.random() * movieWidth; this._y = -10 + Math.random() * movieHeight; }
} onClipEvent (enterFrame) { rad += (k/180)*Math.PI; this._x -= Math.cos(rad); this._y += i; if (this._y>=movieHeight) { this._y = -5;
Chọn frame đầu tiên, vào lại phần Action Script Panel (F9) và nhập vào mã sau: for (k=0; k