# Gumawa ng mga Interactive na Design na Tumutugon sa Mouse Mo gamit ang Hana - Hana | Lahat ng Kailangan Mong Malaman - Spline Academy (https://spline.design/fil/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> Sa video na ito, magbibigay kami ng introduksyon at magpapakita ng iba't ibang halimbawa kung paano gawing interactive experience ang mga design mo para…

1. [Academy](https://spline.design/fil/academy)
2. [Mga Kurso](https://spline.design/fil/academy/collections)
3. [Hana | Lahat ng Kailangan Mong Malaman](https://spline.design/fil/academy/collections/hana-everything-you-need-to-know)
4. Gumawa ng mga Interactive na Design na Tumutugon sa Mouse Mo gamit ang Hana

# Gumawa ng mga Interactive na Design na Tumutugon sa Mouse Mo gamit ang Hana

Aralin 5 ng 15HanaBaguhan6 min

Sa video na ito, magbibigay kami ng introduksyon at magpapakita ng iba't ibang halimbawa kung paano gawing interactive experience ang mga design mo para tumugon ang mga ito sa cursor mo gamit ang Hana. Tutuklasin namin ang mga event gaya ng Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At at Follow, at kung paano gamitin ang mga ito para mag-trigger ng mga animation at effect.

## Ang matututunan mo

1. [0:00Intro](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Pag-click sa mga Bagay – Mouse Down Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Pagbitaw sa Click – Mouse Up Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Pagdiin nang Matagal – Mouse Press Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Hover Magic – Mouse Hover Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Paharapin ang Design Mo sa Cursor – Look At Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Pasunurin ang Design Mo sa Cursor – Follow Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Silip sa Susunod na Tutorial](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Mga kaugnay na resource

- [Interactive Flat IconsTemplate](https://app.spline.design/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana?redirect-duplicate-template-uuid=2a05e307-90dd-4666-bc8b-f2b7f3c2cce8&is-2d-file=true)
- [Designing in HanaDokumento](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDokumento](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Overview

- Hana
- 6 min
- Baguhan

## Susunod

[Gumawa ng 2D Follow Interaction8 minBaguhan](https://spline.design/fil/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)[Magpatuloy](https://spline.design/fil/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

[Spline](https://spline.design/fil)

Ang 3D at 2D editor para sa mga team at kanilang mga agent. I-publish sa web, iOS at Android.

#### Magtanong sa AI tungkol sa Spline

#### Mga Produkto

- [3D Design](https://spline.design/fil/3d-design)
- [Hana](https://spline.design/fil/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/fil/ai-generate)
- [Spline MCP](https://spline.design/fil/mcp)
- [Spline Arena](https://spline.design/fil/arena)
- [Presyo](https://spline.design/fil/pricing)
- [Enterprise](https://spline.design/fil/enterprise)

#### Runtimes

- [Web](https://spline.design/fil/web)
- [iOS](https://spline.design/fil/ios)
- [Android](https://spline.design/fil/android)

#### Apps

- [I-download](https://spline.design/fil/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [I-download ang Spline Mirror](https://spline.design/download-mirror)

#### Matuto

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/fil/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Mga Solusyon](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/fil/blog)
- [Changelog](https://spline.design/fil/changelog)
- [Edukasyon](https://spline.design/fil/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/fil/affiliate)

#### Kumpanya

- [Mga Customer](https://spline.design/fil/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/fil/security)

#### Legal

- [Mga Tuntunin at Kundisyon](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.