3.Tạo tư liệu giáo dục minh họa với Flash
3.7.Chuyển động theo quỹ đạo (path)
Tại Frame 30 của các lớp Mang và lớp Gia_do, bạn nhấn phím F5 để chèn thêm Frame. Cũng tại Frame 30 nhưng của lớp vienbi, bạn nhấn phím F6 để chèn thêm một KeyFrame và di chuyển vị trí của viên bi tới chân máng nghiêng.
Chọn chuột phải vào Frame bất kỳ giữa Frame 1 và Frame 30 của lớp vienbi chọn Creat MotionTween. Sau đó, bạn có thể nhấn tổ hợp phím Ctrl+Enter để xem kết quả và bạn đã có viên bi lăn xuống máng nghiêng.
Tuy nhiên, để viên bi lăn và chuyển động nhanh dần, bạn chọn vào Frame bất kỳ giữa Frame1 và Frame 30 của lớp vienbi, chọn menu Windows, chọn Properties và chọn Properties. Tại cửa sổ
Properties: phần Ease = -100 để viên bi chuyển động nhanh dần, phần Rotate chọn là CW để viên bi quay theo chiều kim đồng hồ.
Hình 3-101
Như vậy, bạn đã tạo được chuyển động lăn xuống dốc của viên bi. Bây giờ bạn sẽ tạo chuyển động cho viên bi trên máng nằm ngang.
Tại Frame 60 của Mang và Gia_do, bạn nhấn F5. Tại Frame 60 của vienbi, bạn nhấn F6 và di chuyển vị trí viên bi tới cuối máng nằm ngang.
Chọn Frame bất kỳ giữa hai Frame 30 và 60, click phải chuột chọn CreateMotion Tween. Sau đó tại cửa sổ Properties, bạn chọn Rotate là CW và Ease = 0 để viên bi lăn đều.
Nhấn tổ hợp phím Ctrl + Enter và bạn đã có đoạn hoạt hình hoàn chỉnh.
Bài tập:
Mô tả chuyển động quả bóng rơi xuống đất: Vẽ một hình tròn (quả bóng). Và một đường thẳng (mặt đất). Tạo chuyển động cho quả bóng rơi thẳng xuống đất với tốc độ nhanh dần. Khi chạm đất (đường thẳng), quả bóng nảy thẳng lên chậm dần và lại rơi xuống nhanh dần, lại đập vào mặt đất và nảy lên. Cứ thế khoảng 5 lần. Lưu ý độ cao khi nảy lên sau mỗi lần lại thấp dần, thấp dần.
3.7. Chuyển động theo quỹ đạo (path)
Về nguyên tắc thì cách tạo chuyển động theo quỹ đạo tương tự cách tạo chuyển động thẳng, chỉ khác là bạn cần phải vẽ một đường quỹ đạo chuyển động.
Chẳng hạn, để con ong bay theo một quỹ đạo nào đó bạn làm như sau:
Vào menu File→Import→Import to stage để đưa bức ảnh con ong vào trang soạn thảo. Dùng công cụ FreeTransformTool để thay đổi kích thước cho phù hợp. Đặt con ong ở sát biên bên phải của trang. Đặt tên cho lớp này là Ong.
Sau đó, bạn hãy tạo chuyển động của con ong giống như chuyển động thẳng của con thuyền ở phần 6.1 (Chọn Frame 30, nhấn F6 rồi kéo con ong sang phải đến một vị trí mới; click phải chuột vào một Frame ở giữa chọn Create Motion Tween)
Tiếp theo, tạo lớp dẫn chuyển động như sau: bạn chọn nút AddMotionGuide để tạo ra một lớp chứa quỹ đạo. Mặc định lớp này có tên là Guide: Ong.
Hình 3-102
Trên Layer Guide: Ong, bạn vẽ quỹ đạo chuyển động (có thể dùng công cụ Pencil để vẽ). Vẽ xong quỹ đạo, chọn Frame 30 trên lớp này dùng công cụ Select Tool di chuyển con ong tới vị trí cuối của quỹ đạo vừa vẽ sao cho tâm của hình con ong (vòng tròn nhỏ) bị dính vào điểm cuối của quỹ đạo.
Hình 3-103
Nhấn tổ hợp phím Ctrl + Enter để xem đoạn hoạt hình con ong bay theo quỹ đạo vừa vẽ. Tuy nhiên, bạn sẽ thấy con ong đã chuyển động theo quỹ đạo đã vẽ nhưng hình con ong không thay đổi theo hướng bay nên không giống thật, bạn sẽ sửa điều đó bằng cách:
Chọn Frame 1 của lớp Ong, chọn con ong rồi dùng công cụ FreeTransfrom xoay hình con ong theo hướng đường dẫn và làm tương tự đối với Frame 30.
Chọn Frame bất kỳ ở giữa hai Frame 1 và 30, mở bảng thuộc tính (Properties) và đánh dấu chọn ở ô Orient to path.
Hình 3-104
Nhấn tổ hợp phím Ctrl + Enter để kiểm tra kết quả.
Lưu ý: Bạn cũng có thể chèn thêm một lớp Canh và Import bức ảnh phong cảnh vào làm nền để có được đoạn hoạt hình con ong bay trên vườn hoa chẳng hạn.
Bài tập:
Vẽ hai tam giác nằm trên đường thẳng, một cái quay lên một cái quay xuống. Tam giác quay lên sẽ như ngọn núi, tam giác quay xuống sẽ như một cái hố. Tạo chuyển động cho ô tô đi trên đường thẳng, leo núi rồi qua hố. Chú ý tốc độ ô tô lên dốc sẽ chậm dần và xuống dốc sẽ nhanh dần.
Hình 3-105 3.8. Biến hình
Với phần mềm Flash, bạn có thể dễ dàng tạo cho mình một đoạn hoạt hình với hiệu ứng biến đổi đối tượng hình vẽ này (Shape) thành đối tượng hình vẽ khác.
Chẳng hạn, để tạo hoạt hình biến đổi hình tròn thành hình vuông rồi sau đó biến thành chữ A, bạn thực hiện các thao tác như sau: (adsbygoogle = window.adsbygoogle || []).push({});
Đầu tiên, bạn chọn công cụ Oval Tool để vẽ một hình tròn.
Trên trục thời gian (Timeline), bạn chọn vào Frame 20. Nhấn phím F7 để tạo một Blank Keyframe và vẽ một hình vuông.
Chọn vào Frame bất kỳ giữa hai Frame 1 và 20, mở bảng thuộc tính (Properties), chọn
Shape trong menu thả Tween.
Hình 3-106
Nhấn tổ hợp phím Ctrl + Enter và bạn sẽ thấy hình tròn được biến dần thành hình vuông. Tương tự, bạn chọn vào Frame 40, nhấn phím F7, dùng công cụ TextTool để viết chữ A. Sau đó, bạn chọn công cụ Selection Tool, chọn chữ A vừa vẽ, chọn menu Modify→Break Apart để chuyển đối tượng hình ảnh (Graphic) thành đối tượng hình vẽ (Shape).
Hình 3-107
Tiếp theo bạn lại chọn vào Frame ở giữa Frame 20 và 40, mở bảng thuộc tính và chọn Shape
trong menu thả Tween.
Hình 3-108
Lưuý: Nếu bạn chọn biến thành một dòng chữ thì bạn cần chọn Break Apart hai lần, lần thứ nhất để tách đối tượng hình ảnh (Graphic) dòng chữ thành các đối tượng hình ảnh là các chữ cái, lần thứ hai là để chuyển các đối tượng hình ảnh đó thành đối tượng hình vẽ (Shape).
Bài tập:
Bài tập 1: Làm biến hình các chữ cái trong tên của bạn. Chú ý mỗi chữ một màu.
Bài tập 2: Vẽ hình một bông hoa. Tạo biến hình thành tên của bạn rồi lại biến thành bức ảnh chân dung của bạn.
Hình 3-109 3.9. Hiệu ứng mặt nạ (mask)
Hiệu ứng mặt nạ là một hiệu ứng phổ biến khi xây dựng các đoạn hoạt hình bằng Flash. Với việc sử dụng hiệu ứng mặt nạ, bạn có thể chỉ cho phép người dùng quan sát một phần của đối tượng.
Chẳng hạn, để làm một đoạn hoạt hình quan sát phong cảnh qua ống nhòm, bạn làm như sau: Đầu tiên, bạn đặt tên cho Layer này là Nen. Tiếp theo, bạn chọn menu
File→Import→ImporttoStage để chèn một bức ảnh phong cảnh vào trang soạn thảo và dùng công cụ FreeTransformTool để thay đổi kích thước cho phù hợp.
Xác định vị trí đầu tiên của bức ảnh cho phù hợp rồi chọn vào Frame 60, nhấn phím F6, di chuyển bức ảnh đển vị trí cuối cùng sao cho phù hợp. Tiếp theo, chọn vào Frame bất kỳ giữa Frame 1 và 60 chọn phải chuột và chọn Create Motion Tween để được chuyển động của bức ảnh từ vị trí ban đầu đến vị trí cuối cùng.
Khóa lớp Canh lại để không bị thay đổi khi bạn thực hiện các thao tác khác.
Việc tiếp theo là bạn sẽ tạo một mặt nạ (Mask) hình cái ống nhòm để người dùng chỉ có thể quan sát được bức ảnh qua cái mặt nạ đó mà thôi.
Bạn tạo một lớp mới và đặt tên là Ong_nhom.
Trên lớp Ong_nhom, bạn chọn công cụ Oval Tool để vẽ một hình tròn. Dùng công cụ
Selection Tool để chọn cả hình tròn đó rồi click phải chuột chọn Copy, click phải chuột vào chỗ khác và chọn Paste. Các bạn di chuyển hình tròn vừa dán để căn chỉnh với hình tròn ban đầu cho giống ống nhòm.
Chọn phải chuột vào lớp Ong_nhom và chọn Mask.
Hình 3-110
Nhấn tổ hợp phím Ctrl + Enter và bạn đã có một đoạn hoạt hình dùng ống nhòm để quan sát cảnh biển.
Lưu ý: Bạn có thể thay đổi màu nền của trang soạn thảo thành màu đen để giống thật hơn.
Bài tập: (adsbygoogle = window.adsbygoogle || []).push({});
Bài tập: Vẽ một hình bông hoa và trong bông hoa đó có các bức ảnh của bạn chuyển động.
3.10.Gấp hình
Flash giúp bạn tạo chuyển động gấp hình như gập trang sách, lật mặt sau của hình, v…v… Nếu cần một đoạn hoạt hình gấp giấy để minh họa bài giảng, bạn có thể thực hiện các thao tác sau:
Tại Layer1, bạn chọn công cụ Rectangle Tool để vẽ một hình chữ nhật.
Dùng công cụ Line Tool để vẽ nếp gấp và chọn công cụ Align để căn vào giữa hình chữ nhật. Chọn công cụ SelectionTool và giữ phím Shift để chọn phần bên trái (chọn cả nền và viền), rồi nhấn phím F8, chọn Graphic, chọn OK để chuyển đối tượng hình vẽ thành đối tượng hình ảnh.
Tạo một lớp mới (Layer2) ở trên lớp hiện tại, click phải chuột vào phần trắng của trang soạn thảo và chọn PasteinPlace để dán đúng vào vị trí vừa cắt nhưng ở trên một lớp khác.
Hình 3-111
Tại Frame 1\Layer 2, bạn chọn công cụ Free TransformTool để xuất hiện hạt đen và hạt trắng trên hình và kéo hạt trắng về phía mép của nếp gấp trùng với hạt đen ở giữa bên phải. (Nhằm đưa tâm quay đặt vào nếp gấp)
Hình 3-112
Chọn Frame 15 trên Layer 1 và nhấn phím F5 để chèn thêm các Frame. Tiếp tục chọn Frame 15 trên Layer 2, nhấn phím F6 để chèn thêm một Keyframe.
Tại Keyframe này, bạn kéo hạt đen ở giữa bên trái của miếng chuyển động sang phải trùng với mép bên phải của miếng không chuyển động.
Tiếp theo, bạn đưa chuột đến sát cạnh bên phải của hình, khi xuất hiện mũi tên hai chiều, bạn giữ chuột trái và kéo lên một khoảng nhỏ.
Hình 3-113
Chọn Frame bất kỳ giữa Frame 1 và 15 của Layer 2, click phải chuột chọn CreateMotion Tween để tạo chuyển động.
Nhấn tổ hợp phím Ctrl+Enter là bạn đã có một đoạn hoạt hình gấp giấy.
Về cơ bản chuyển động đã xong nhưng khi đến đoạn giữa hình có vẻ bị kéo cao lên... không giống thật. Phần bên trong của hình trong lúc gấp nên tối dần vì thiếu ánh sáng như thế sẽ cho hiệu quả hình ảnh giống thật hơn. Để chỉnh sửa chúng ta làm như sau:
Chọn Frame 7, click phải chuột rồi chọn Convert to Keyframe. Sử dụng công cụ Free Transform Tool để điều chỉnh lại kích thước của miếng chuyển động tại Frame cho phù hợp.
Tiếp theo, chọn Frame 15 của Layer 1, nhấn phím F6 để chuyển thành Keyframe, rồi chọn công cụ Fillcolor để thay đổi màu thành đậm hơn.
Chọn Frame bất kỳ nằm giữa Frame 1 và 15 của Layer 1. Cho xuất hiện bảng thuộc tính (Properties), chọn Shape tại menu thả Tween và đặt tham số Ease = -100.
Nhấn tổ hợp phím Ctrl + Enter để kiểm tra kết quả của bạn.
Bài tập:
Bài tập: Tạo một bức ảnh, xoay ra mặt sau là một bức ảnh khác.
3.11.Cắt giấy
Flash giúp bạn tạo ra những đoạn hình mô phỏng thực tế. Điều quan trọng là ta phải biết xử lý, kết hợp hài hòa giữa các lớp (Layer) hình.
Nếu bạn cần một đoạn mô phỏng hành động cắt giấy, bạn có thể dễ dàng tự tạo được với phần mềm Macromedia Flash như sau:
Tại Frame 1 của Layer 1, dùng công cụ RectangleTool để vẽ tờ giấy hình chữ nhật màu đỏ, sau đó chọn cả tờ giấy đó, click phải chuột chọn copy.
Chọn Frame 20 của lớp này, nhấn F6 rồi click phải chuột chọn Paste inPlace. Tại đây, bạn sử dụng công cụ Line để vẽ nét cắt trên tờ giấy. Sau khi vẽ nét cắt xong, chọn nó và click phải chuột chọn Copy. Khóa và ẩn Layer này đi để tránh chọn nhầm cho các thao tác sau đây: (adsbygoogle = window.adsbygoogle || []).push({});
Chèn thêm một lớp nữa là Layer 2 bằng biểu tượng . Tại Frame 1 của Layer 2, click phải chuột chọn Paste in Place để dán nét cắt vào đúng vị trí vừa Copy.
Chọn tiếp Frame 20 của Layer 2, nhấn F6 rồi lại chọn Paste inPlace để dán nét cắt như trên. Sau đó, quay trở lại Frame 1, dùng công cụ Select Tool chọn gần hết đường cắt và nhấn phím Delete
để xóa đi, chỉ để lại một điểm rất nhỏ ở đầu làm gốc.
Click chọn một Frame ở giữa Frame1 và 20, cho xuất hiện bảng thuộc tính (Properties), chọn mục Tween, chọn Shape để tạo ra chuyển động của nét cắt.
Như vậy nét cắt đã chuyển động dài dần ra. Bây giờ ta sẽ cần một con dao chuyển động cùng đường cắt để đoạn mô phỏng phù hợp với thực tế.
Bạn tạo thêm Layer 3. Trên Layer này, bạn có thể vẽ hình tay cầm dao hoặc đưa hình con dao vào bằng cách chọn menu File→Import→ImporttoStage.
Dùng công cụ Free Transform Tool, chọn hình ảnh con dao, dùng chuột kéo nút tròn trắng vào đầu mũi dao. Tại Frame 1 của Layer 4, kéo con dao sao cho nút tròn trắng trùng với điểm đầu của đường cắt.
Hình 3-114
Chọn Frame 20, nhấn phím F6 để chèn một Keyframe rồi đưa con dao đến vị trí cuối của đường cắt sao cho nút tròn trắng trùng với điểm cuối của đường cắt. Click phải chuột vào Frame bất kỳ giữa Frame 1 và 20, chọn Create Motion Tween. Như vậy con dao đã di chuyển và tạo nên vết cắt trên tờ giấy đỏ.
Để cho tờ giấy bị cắt làm đôi tách ra, bạn chọn Layer 1 và mở khóa nó. Tại Framer 20, chọn cả miếng giấy và nét cắt rồi Copy. Click chuột chọn Frame 21, nhấn F7, sau đó chọn Paste and Place. Click đúp vào miếng giấy bên trái, rồi click phải chuột chọn Cut.
Chọn Layer 2, tại Frame 21 nhấn F7, rồi chọn Paste in Place. Như vậy ta tạo ra hai miếng cắt ở hai lớp 1 và 2. Bây giờ bạn sẽ làm hai miếng tách ra như sau:
Tại Layer 1 chọn Frame 40, nhấn F6. Rồi kéo miếng cắt dịch sang phải. Làm tương tự tại Frame 40 của Layer 2 nhưng kéo miếng cắt sang bên trái. Tạo chuyển động cho hai miếng bằng cách chọn Create Motion Tween như cách tạo chuyển động khác.
Hình 3-115
Nhấn tổ hợp phím Ctrl + Enter và bạn đã có một đoạn mô phỏng hoàn chỉnh.
Bài tập:
Bài tập 1: Tạo hình viên gạch bay vào bức tường làm bức tường nứt vỡ ra làm 3 mảnh.
Bài tập 2: Tạo một tờ giấy mầu đỏ và con dao cắt bỏ những phần thừa thành tên của bạn.
3.12.Quay compa
Chuyển động quay tròn của hình cũng giống như phần gấp giấy. Tuy nhiên trong một số trường hợp sẽ có chuyển động khác đi kèm với nó như bút vẽ ra nét, compa quay vẽ hình tròn,… Sau đây ta cùng tìm hiểu một ví dụ là hình Compa xoay vẽ hình tròn.
Việc đầu tiên, bạn đổi tên Layer là Duong_tron và bạn vẽ hình tròn mà compa sẽ vẽ ra bằng công cụ Oval Tool. Để tìm được tâm hình tròn, bạn vẽ một đường thẳng đứng và một đường nằm ngang bằng công cụ Line Tool. Nhóm từng đối tượng lại bằng cách chọn vào đối tượng, trên menu chọn Modify, chọn Group.
Dùng công cụ Selection Tool chọn cả ba đối tượng. Trên menu chọn menu Window→Align
để mở bảng căn chỉnh. Trong bảng này, chọn biểu tượng Align Horizontal Center và Align Vertical Center. Khi đó tâm của hình tròn là giao điểm của hai đường thẳng.
Tiếp theo ta cần một chiếc compa. Các bạn tạo một Layer mới (đặt tên là Compa), bạn vẽ một chiếc compa (nếu có sẵn hình, bạn có thể đưa vào bằng cách chọn menu File→Import→Import To Stage). Nếu là hình tự vẽ, cần chuyển thành đối tượng ảnh bằng cách nhấn phím F8, chọn
Graphic và chọn OK.
Chọn công cụ Free Transform Tool, để di chuyển nút tròn trắng ở giữa (tâm xoay) trùng với một đầu của compa. Thay đổi kích thước, vị trí của compa để đầu compa (trùng với tâm xoay) chỉ vào tâm của đường tròn, đầu còn lại nằm trên đường tròn.
Ở lớp Duong_tron, bạn xóa hai đường thẳng đi và tại Frame 20, bạn nhấn phím F5 để chèn thêm các Frame.
Ở lớp Compa, bạn chọn Frame 20, nhấn phím F6 để chèn một Keyframe. Chọn công cụ Free