Tạo chuyển động lồng nhau (Nested Animation)

Tháng bảy 2, 2025
 |  Không có bình luận

🧠 Khi nào nên dùng?

  • Khi bạn muốn một đối tượng vừa chuyển động bên ngoài, vừa có chuyển động riêng bên trong.
  • Ví dụ: một nhân vật di chuyển qua màn hình (motion tween ngoài) và vẫy tay hoặc nháy mắt (animation bên trong).
  • Giúp quản lý nội dung phức tạp dễ dàng hơn vì các chuyển động được chia rõ ràng theo cấp độ.

🛠️ Các bước thực hiện:

🔹 Bước 1: Tạo nội dung chuyển động bên trong symbol

  1. Vẽ hoặc đặt các đối tượng nhỏ như tay, mắt, cánh, v.v.
  2. Convert chúng thành Symbol nếu cần → chọn đối tượng > nhấn F8 > chọn Movie Clip.
  3. Double-click vào symbol chính để vào chế độ chỉnh sửa bên trong.
  4. Tại đây, dùng Motion Tween hoặc Frame-by-frame để tạo chuyển động cho các bộ phận (ví dụ: tay vẫy).

📌 Kết quả: Symbol này giờ đã có “chuyển động riêng” hoạt động độc lập.

🔹 Bước 2: Tạo chuyển động bên ngoài (trên Stage chính)

  1. Quay lại Stage chính (nhấn Scene 1).
  2. Kéo symbol vừa tạo (đã có animation bên trong) lên Stage.
  3. Convert thành Movie Clip nếu chưa (F8).
  4. Chọn symbol này > tạo Motion Tween mới.
  5. Thêm keyframe ở frame 40 (hoặc số tùy ý), sau đó di chuyển đối tượng từ trái sang phải, hoặc bất kỳ hướng nào.

💡 Lưu ý: bạn có thể thêm cả scale hoặc rotation bên ngoài nếu muốn!

🔹 Bước 3: Kiểm tra kết quả hoạt hình lồng nhau

  • Nhấn Enter hoặc Ctrl + Enter để chạy thử:
    • Bạn sẽ thấy đối tượng vừa di chuyển trên Stage, vừa thực hiện chuyển động bên trong (vẫy tay, xoay cánh, nhấp nháy…).

💬 Ví dụ thực tế ứng dụng:

  • Con chim bay: cánh vỗ (chuyển động bên trong), bay theo đường cong (chuyển động bên ngoài).
  • Nhân vật hoạt hình: chớp mắt, cười (bên trong), đi bộ xuyên cảnh (bên ngoài).
  • Nút tương tác: hiệu ứng sáng nhấp nháy (bên trong), phóng to khi rê chuột vào (bên ngoài).

Ví dụ

hoạt hình nhỏ cực vui: một mặt trời vừa bay ngang bầu trời, vừa tự quay tròn

🎬 Mục tiêu của ví dụ:

  • Dùng Motion Tween để tạo chuyển động ngang.
  • Dùng animation lồng nhau (nested) để mặt trời xoay tròn liên tục.

🛠️ Các bước thực hiện từng bước một

🔶 Bước 1: Tạo biểu tượng mặt trời

  1. Mở Adobe Animate → Tạo tài liệu mới (HTML5 Canvas).
  2. Chọn công cụ Oval Tool (O) → vẽ một hình tròn màu vàng làm mặt trời.
  3. Nếu thích, vẽ thêm tia nắng (bằng Line hoặc PolyStar).
  4. Chọn tất cả các phần → nhấn F8 → đặt tên: sun_mc → chọn loại: Movie Clip.

✅ Giờ bạn đã có một biểu tượng mặt trời để tái sử dụng.

🔄 Bước 2: Tạo chuyển động quay tròn bên trong symbol (nested)

  1. Double-click vào sun_mc để vào bên trong symbol.
  2. Trên timeline bên trong, thêm 2 keyframe: frame 1 và frame 60 (F6).
  3. Ở frame 60:
    • Chọn mặt trời → mở bảng Properties → nhập Rotation = 360°.
    • Hoặc dùng Free Transform Tool để xoay 1 vòng.
  4. Click phải lên giữa tween → chọn Create Motion Tween.
  5. Nhấn Enter để kiểm tra → mặt trời quay tròn liên tục.

☀️ Đây là animation “nội bộ” – sẽ quay bất kể bên ngoài làm gì.

✈️ Bước 3: Di chuyển mặt trời qua bầu trời (motion tween ngoài)

  1. Quay lại Scene 1 (click “Scene 1” trên timeline).
  2. Kéo sun_mc từ Library ra Stage → đặt ngoài mép trái màn hình.
  3. Chọn symbol → nhấn F8 nếu cần → đặt lại tên (nếu chưa), giữ nguyên là Movie Clip.
  4. Trên timeline:
    • Tại frame 1: đặt mặt trời ở bên trái.
    • Tại frame 100: nhấn F6, kéo mặt trời sang bên phải.
    • Click vào tween layer → Create Motion Tween.

✅ Kết quả: mặt trời vừa bay ngang bầu trời, vừa quay tròn như thật.

🌟 Bước 4: Xem và tinh chỉnh

  • Nhấn Ctrl + Enter để xem hoạt hình.
  • Tùy chỉnh thêm:
    • Dùng Easing để mặt trời bay chậm dần hoặc nhanh dần.
    • Thêm nền trời hoặc đám mây để tạo chiều sâu cho cảnh.