# Color

Color, mimik ekranı üzerindeki nesnelerin renklerini değiştirilebilmesini sağlamaktadır.

Color özelliği tasarım aşamasında oluşturacağınız koşullara göre renk değişimleri canlı bir şekilde gerçekleşecektir. Örneğimizde ( Resim 1 ) de kırmızı ile gösterilen color alanında bulunan üç adet kutumuz değişken değerlerine göre renkleri anlık değişmektedir.

![Resim 1 : Animation Color](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/QOq8yEfUmzpV4FhRXUp2/Resim%201%20color.jpg)

Color özelliğinin tasarımı üç farklı yöntem ile yapılabilinmektedir. Animasyonunuzu hazırladıktan sonra color özelliği eklemek istediğiniz mimiği animasyon sayfasının "ctrl " özelliğini aktif hala getirdikten sonra yine animasyon sayfası üzerinden seçilerek ![](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/kJg10hjkPGLh1203ky6R/edit.jpg) ikonu yardımı ile edit animation element sayfası açılmaktadır.  Resim 1 'de gösterilen örneğimizde mimiğimiz kırmızı ile gösterilmiştir. 

* **Animation Color Type - Expression :** 

Expression alanı ile kendi java script kodlarınızı kullanarak dilediğiniz koşul / şarta göre color özelliğinin çalışmasını sağlayabilirsiniz.

![Resim 2 : Animation Color Type - Expression](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/EtfWlZZ9HsRD9cNMNyRp/Resim%202%20color%20type%20expression.jpg)

Örneğimizde expression kısmında yazılı olan java script kodunu aşağıda inceleyelim.

```
// Percent isimli variable alınıyor.
var tag=ins.getVariableValue("Percent");
// Null kontrol yapılıyor eğer null ise nesne purple renginde olacak.
if (tag===null) {
    return "purple";
}
// Percent isimli değişkenin aşağıda tanımlanan aralıklara 
// göre nesnenin farklı renklerde gösterilmesi sağlanıyor.
if (tag.value>0 && tag.value<11) {
    return "red";
}

if (tag.value>10 && tag.value<21) {
    return "gray";
}

if (tag.value>20 && tag.value<31) {
    return "blue";
}

if (tag.value>30 && tag.value<41) {
    return "lime";
}

if (tag.value>40) {
    return "yellow";
}

return "green";
```

* **Animation Color Type - Switch :**&#x20;

Color type swicth özelliği, seçili bir nesne üzerinde, seçili bir değişkenin farklı değerlerde farklı renklerde görünmesini kodlamadan, form üzerinde yapılandırma ayarlarını ekleyerek veya düzenleyerek yapılabilinmesini sağlamaktadır.

![Resim 3 : Animation Color Type - Switch](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/DXPrEIBeT63VOU7w1fSL/Resim%203%20color%20type%20switch.jpg)

**Variable** : Color animasyonumuzu bağlamak istediğimiz değişken.

**Default Value** : Bağlantı yaptığımız variable değerinin okunamaması durumunda veya haberleşmenin kesildiği durumda gösterilmek istenen renk değeri.

**Bit** : Word tipinde bir değişkeninizin var ise okutmak istediğiniz bit değerini seçilebilinmesini sağlar.

**Condition-Value-Color** : Değişken değeri üzerinde belirleyeceğimiz şartlara göre farklı renklerde gösterim yapmamızı sağlar. <img src="https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/wkV2ZxiarPSMAtJC3R2g/add.jpg" alt="" data-size="line"> butonuna basarak şartlar ekleyebilirsiniz. Condition kısmı ile büyük, küçük, eşit, büyük eşit, küçük eşit vb gibi formulasyonlar yapabilirsiniz. Value alanına koşul değerinizi ve Color alanına dilediğiniz rengi seçebilirsiniz.

{% hint style="info" %}
Color kısmında sizden 2 adet renk istenmektedir. Burada ikinci renk zorunlu alan değildir. 2. rengi girdiğinizde seçili 2 renk arasında blink yapacaktır.
{% endhint %}

**Gradient :** Seçili bir nesne üzerinde switch-color gradient animasyonu ile bir değişken değerinin 0 ile 100 değeri arasında seçili 2 renk üzerinde oransal olarak geçiş yapmasını sağlar. Resim 3 'te gösterilen alt alandaki " gradient " alanının işaretlenerek min - max değerlerinin girilmesi gerekmektedir.

* **Animation Color Type - Tetra :**&#x20;

Color type tetra özelliği, seçili bir nesnenin iki farklı değişkene bağlanarak değerlerine true/false olarak beraber kontrol ettiği ve buna göre renk almasını sağlamaktadır.

![Resim 4 : Animation Color Type - Tetra](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/HOvGpQ3zPvIMkEtNRH9y/Resim%204%20color%20type%20tetra.jpg)

Örneğimizde mimiğimize A ve B değişkenkeri atanmış ;

AB- > 00 : iki değişken değeride " false " olması durumunda " yeşil "&#x20;

AB- > 01 : A değişken değeri " false " , B değişken değeri " true " olması durumunda "mavi"&#x20;

AB- > 10 : A değişken değeri " true " , B değişken değeri " false " olması durumunda " sarı"

AB- > 11 : iki değiken değerinin de " true " olması durumunda " kırmızı " gösterim olacak şekilde ayarlanmıştır.

## Color Visualization, Preview

Color tasarım işlemlerini tamamladığınızda " animation preview " ekranında veya ikonu yardımı ile açılan preview ekranında ,  " visualization " ekranında ilgili animasyonun ilgili alanında belirlediğiniz kural / şart' lara göre hazırladığınız tasarım resim1 de gösterildiği gibi ekran üzerinden görüntülenebilinecektir.