# Web için etkileşimli bir arı karakteri oluştur - Spline’da animasyon ve etkileşimler - Spline Academy (https://spline.design/tr/academy/tutorials/create-an-interactive-bee-character-for-the-web)

> Tekrar hoş geldin! 🙌 Bu video eğitimde sevimli bir arı karakteriyle etkileşimli bir deneyim oluşturmayı göstereceğiz. Spline’a göz at: https://spline.design/

1. [Academy](https://spline.design/tr/academy)
2. [Kurslar](https://spline.design/tr/academy/collections)
3. [Spline’da animasyon ve etkileşimler](https://spline.design/tr/academy/collections/animation-interactions-in-spline)
4. Web için etkileşimli bir arı karakteri oluştur

# Web için etkileşimli bir arı karakteri oluştur

Ders 8 / 14Spline 3DOrta14 dk

Tekrar hoş geldin! 🙌 Bu video eğitimde sevimli bir arı karakteriyle etkileşimli bir deneyim oluşturmayı göstereceğiz. Spline’a göz at: <https://spline.design/>

Arının kanatları ve gözleri için döngülü bir animasyon oluşturmayı ve Mouse Down olayıyla düğmelere tıklandığında öğelerin ekranda hareket etmesini ya da belirmesini sağlayan etkileşimli bir geçiş efekti uygulamayı öğreneceksin.

Bu 3D arıyı indir ve eğitimi takip et.

🐝 Remix: <https://app.spline.design/file/68152128-3ac0-4fdd-a941-1cdcbe075c43>

Etkileşimli olaylar hakkında daha fazlasını Spline dokümantasyonunda öğren! 📘 <https://docs.spline.design/>

İyi öğrenmeler!

## Neler öğreneceksin

1. [0:00Giriş](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=0s)
2. [0:38Döngülü kanat animasyonu oluşturmak](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=38s)
3. [2:44Göz kırpma eklemek](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=164s)
4. [4:13Düğmelerle geçiş efektleri oluşturmak (Mouse Down olayı)](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=253s)
5. [11:53Kamerayı kurmak ve web sitesi için dışa aktarmak](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=713s)

## İlgili kaynaklar

- [Bee - UI interactionŞablon](https://app.spline.design/academy/tutorials/create-an-interactive-bee-character-for-the-web?redirect-duplicate-template-uuid=21a2a3bb-b549-405f-88b0-b0269a8f2390&is-2d-file=false)
- [How state-based animation worksDoküman](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Scroll EventDoküman](https://docs.spline.design/interaction-states-events-and-actions/events/scroll-event)
- [Transition ActionDoküman](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Genel bakış

- Spline 3D
- 14 dk
- Orta

## Sıradaki

[3D’de Drag & Drop etkileşimleri nasıl oluşturulur10 dkBaşlangıç](https://spline.design/tr/academy/collections/animation-interactions-in-spline/how-to-build-drag-drop-interactions-in-3d)[Devam et](https://spline.design/tr/academy/collections/animation-interactions-in-spline/how-to-build-drag-drop-interactions-in-3d)

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