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

> Selam! 👋

1. [Academy](https://spline.design/tr/academy)
2. [Eğitimler](https://spline.design/tr/academy/tutorials)
3. Hana ile etkileşimli bir klavye oluştur

# Hana ile etkileşimli bir klavye oluştur

HanaBaş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ıç

## Ait olduğu kurs:

- [Hana | Bilmen gereken her şey](https://spline.design/tr/academy/collections/hana-everything-you-need-to-know/build-an-interactive-keyboard-with-hana)

## İlgili eğitimler

[Tüm eğitimler](https://spline.design/tr/academy/tutorials)

[Hareket ve etkileşimle tepki veren bir 3D küre nasıl oluşturulurSpline 3DOrta7 dk](https://spline.design/tr/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Hana ile fareye tepki veren etkileşimli tasarımlar oluşturHanaBaşlangıç6 dk](https://spline.design/tr/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)[Spline’da değişkenler ve gerçek zamanlı API’lerle 3D veri görselleştirmeleri nasıl oluşturulurSpline 3Dİleri15 dk](https://spline.design/tr/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[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.