# Membuat Desain Interaktif yang Bereaksi terhadap Mouse dengan Hana - Hana | Semua yang Perlu Anda Ketahui - Spline Academy (https://spline.design/id/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> Dalam video ini, kami akan memberikan pengantar dan menunjukkan berbagai contoh cara mengubah desain menjadi pengalaman interaktif, sehingga desain Anda…

1. [Academy](https://spline.design/id/academy)
2. [Kursus](https://spline.design/id/academy/collections)
3. [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/id/academy/collections/hana-everything-you-need-to-know)
4. Membuat Desain Interaktif yang Bereaksi terhadap Mouse dengan Hana

# Membuat Desain Interaktif yang Bereaksi terhadap Mouse dengan Hana

Pelajaran 5 dari 15HanaPemula6 mnt

Dalam video ini, kami akan memberikan pengantar dan menunjukkan berbagai contoh cara mengubah desain menjadi pengalaman interaktif, sehingga desain Anda merespons kursor di Hana. Kita akan menjelajahi event seperti Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At, dan Follow, serta cara memakainya untuk memicu animasi dan efek.

## Yang akan Anda pelajari

1. [0:00Intro](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Membuat Objek Bisa Diklik – Event Mouse Down](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Melepas Klik – Event Mouse Up](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Menahan Klik – Event Mouse Press](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Keajaiban Hover – Event Mouse Hover](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Membuat Desain Menghadap Kursor – Event Look At](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Membuat Desain Mengikuti Kursor – Event Follow](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Sekilas Tutorial Berikutnya](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Sumber terkait

- [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 HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Ikhtisar

- Hana
- 6 mnt
- Pemula

## Berikutnya

[Membuat Interaksi Follow 2D8 mntPemula](https://spline.design/id/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)[Lanjutkan](https://spline.design/id/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

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

Editor 3D dan 2D untuk tim dan agen mereka. Rilis ke web, iOS, dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Desain 3D](https://spline.design/id/3d-design)
- [Hana](https://spline.design/id/hana)
- [Omma](https://omma.build)
- [Pembuatan 3D dengan AI](https://spline.design/id/ai-generate)
- [Spline MCP](https://spline.design/id/mcp)
- [Spline Arena](https://spline.design/id/arena)
- [Harga](https://spline.design/id/pricing)
- [Enterprise](https://spline.design/id/enterprise)

#### Runtime

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

#### Aplikasi

- [Unduh](https://spline.design/id/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Unduh Spline Mirror](https://spline.design/download-mirror)

#### Belajar

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

#### Komunitas

- [Komunitas Spline](https://community.spline.design)
- [Blog](https://spline.design/id/blog)
- [Changelog](https://spline.design/id/changelog)
- [Pendidikan](https://spline.design/id/education)
- [Contra](https://spline.design/contra)
- [Afiliasi](https://spline.design/id/affiliate)

#### Perusahaan

- [Pelanggan](https://spline.design/id/customers)
- [Karier](https://www.ycombinator.com/companies/spline/jobs)
- [Keamanan](https://spline.design/id/security)

#### Legal

- [Syarat & Ketentuan](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Kontak

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

© 2026 - Spline, Inc.