# Hana ile etkileşimli bir klavye oluştur - Hana | Bilmen gereken her şey - Spline Academy (https://spline.design/tr/academy/tutorials/build-an-interactive-keyboard-with-hana)

> Selam! 👋

1. [Academy](https://spline.design/tr/academy)
2. [Kurslar](https://spline.design/tr/academy/collections)
3. [Hana | Bilmen gereken her şey](https://spline.design/tr/academy/collections/hana-everything-you-need-to-know)
4. Hana ile etkileşimli bir klavye oluştur

# Hana ile etkileşimli bir klavye oluştur

Ders 10 / 15HanaBaşlangıç9 dk

Selam! 👋

Bu eğitimde tamamen Hana’da yapılmış etkileşimli bir klavye oluşturmayı öğreneceksin. Tasarımlarımıza derinlik katmak için gölgeleri nasıl ekleyeceğimizi ve sahnemizle gerçek klavyemiz üzerinden etkileşim kurmak için tuş olaylarını nasıl uygulayacağımızı ele alacağız. Bu tasarım çok esnek ve pek çok farklı şekilde kullanılabilir. Hadi dalalım!

Bu demoyu buradan remiksle: <https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c>

## Neler öğreneceksin

1. [0:00Giriş](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=0s)
2. [0:22Temel frame’i eklemek](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=22s)
3. [0:34Klavye gövdesini oluşturmak](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=34s)
4. [1:14Klavye gövdesine gölge eklemek](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=74s)
5. [1:37Harf ve rakam tuşlarını oluşturmak](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=97s)
6. [3:31Enter tuşunu oluşturmak](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=211s)
7. [3:45Rakam ve harflere drop shadow eklemek](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=225s)
8. [4:07Tuşa basma olayını eklemek](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=247s)
9. [6:57Ekran etkileşimini oluşturmak](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=417s)
10. [8:50Son tasarım](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=530s)
11. [9:04Kapanış](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=544s)

## İlgili kaynaklar

- [Interactive KeyboardŞablon](https://app.spline.design/academy/tutorials/build-an-interactive-keyboard-with-hana?redirect-duplicate-template-uuid=f3103f23-97e2-4ee8-807c-8c73bc5ae38a&is-2d-file=true)
- [Designing in HanaDoküman](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDoküman](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Genel bakış

- Hana
- 9 dk
- Başlangıç

## Sıradaki

[Hana ve Spline ile bir yol boyunca nasıl animasyon yapılır7 dkBaşlangıç](https://spline.design/tr/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)[Devam et](https://spline.design/tr/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)

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

Ekipler ve ajanları için 3D ve 2D editör. Web’de, iOS’ta ve Android’de yayınla.

#### Spline’ı yapay zekaya sor

#### Ürünler

- [3D Tasarım](https://spline.design/tr/3d-design)
- [Hana](https://spline.design/tr/hana)
- [Omma](https://omma.build)
- [Yapay Zekayla 3D Üretim](https://spline.design/tr/ai-generate)
- [Spline MCP](https://spline.design/tr/mcp)
- [Spline Arena](https://spline.design/tr/arena)
- [Fiyatlandırma](https://spline.design/tr/pricing)
- [Kurumsal](https://spline.design/tr/enterprise)

#### Runtime’lar

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

#### Uygulamalar

- [İndir](https://spline.design/tr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror’ı indir](https://spline.design/download-mirror)

#### Öğren

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/tr/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Çözümler](https://spline.design/solutions)

#### Topluluk

- [Spline Topluluğu](https://community.spline.design)
- [Blog](https://spline.design/tr/blog)
- [Sürüm Notları](https://spline.design/tr/changelog)
- [Eğitim](https://spline.design/tr/education)
- [Contra](https://spline.design/contra)
- [Ortaklık](https://spline.design/tr/affiliate)

#### Şirket

- [Müşteriler](https://spline.design/tr/customers)
- [Kariyer](https://www.ycombinator.com/companies/spline/jobs)
- [Güvenlik](https://spline.design/tr/security)

#### Yasal

- [Şartlar ve Koşullar](https://spline.design/terms)
- [Gizlilik](https://spline.design/privacy)

#### İletişim

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

© 2026 - Spline, Inc.