# Bermula dengan 2D Interaktif dalam Hana - Spline Academy (https://spline.design/ms/academy/tutorials/get-started-with-interactive-2d-in-hana)

> Hana ialah kanvas reka bentuk 2D masa nyata baharu dalam Spline yang membolehkan anda mencipta adegan beranimasi dan interaktif terus dalam pelayar. Video…

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Bermula dengan 2D Interaktif dalam Hana

# Bermula dengan 2D Interaktif dalam Hana

HanaPemula17 min

Hana ialah kanvas reka bentuk 2D masa nyata baharu dalam Spline yang membolehkan anda mencipta adegan beranimasi dan interaktif terus dalam pelayar. Video pengenalan ini direka untuk membantu pengguna membiasakan diri dengan antara muka dan membimbing pemula melalui proses mencipta peristiwa 2D interaktif.

Panduan ini merangkumi antara muka, ciri, keadaan, peristiwa dan pilihan eksport, sambil turut menunjukkan cara membina animasi dan berkongsi reka bentuk.

Sama ada anda baru bermula atau ingin meluaskan kemahiran anda, video ini akan memberi anda asas untuk mula mencipta dengan Hana.

✨ Lihat dan duplikasikan adegan daripada video: <https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c>

Temui lebih ramai pencipta dan projek hebat #MadeInSpline di <https://community.spline.design/>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=DD8z1voLghU&t=0s)
2. [0:26Cara mencipta fail reka bentuk 2D](https://www.youtube.com/watch?v=DD8z1voLghU&t=26s)
3. [0:55Meneroka antara muka dan ciri Hana](https://www.youtube.com/watch?v=DD8z1voLghU&t=55s)
4. [7:47Cara menambah animasi dan interaktiviti pada reka bentuk 2D anda](https://www.youtube.com/watch?v=DD8z1voLghU&t=467s)
5. [9:24Mencipta contoh interaksi ringkas](https://www.youtube.com/watch?v=DD8z1voLghU&t=564s)
6. [13:51Cara mengeksport dan membenamkan reka bentuk anda](https://www.youtube.com/watch?v=DD8z1voLghU&t=831s)
7. [15:58Cara berkongsi reka bentuk anda dan menetapkan kebenaran penyuntingan](https://www.youtube.com/watch?v=DD8z1voLghU&t=958s)

## Sumber berkaitan

- [Hana Public DemosTemplat](https://app.spline.design/academy/tutorials/get-started-with-interactive-2d-in-hana?redirect-duplicate-template-uuid=91cbe967-5529-4c64-aa6c-7872116ddb5a&is-2d-file=true)

## Gambaran keseluruhan

- Hana
- 17 min
- Pemula

## Sebahagian daripada

- [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know/get-started-with-interactive-2d-in-hana)

## Tutorial berkaitan

[Semua tutorial](https://spline.design/ms/academy/tutorials)

[Cipta Interaksi Follow 2DHanaPemula8 min](https://spline.design/ms/academy/tutorials/create-a-2d-follow-interaction)[Cara Menganimasikan Sepanjang Laluan dengan Hana dan SplineHanaPemula7 min](https://spline.design/ms/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline)[Cipta Reka Bentuk Interaktif yang Bertindak Balas terhadap Tetikus Anda dengan HanaHanaPemula6 min](https://spline.design/ms/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

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

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

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

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

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

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

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

#### Hubungi

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

© 2026 - Spline, Inc.