Kullanıcı etkileşiminin temelleri

İster klavye isterse fare ile ya da her ikisi ile kurulan kullanıcı etkileşimi, etkileşimin temelini oluşturur. ActionScript 3.0 içerisinde kullanıcı etkileşimini tanımlamak ve yanıt vermek öncelikle bu olayları dinlemeye dayanır.

DisplayObject sınıfının bir alt sınıfı olan InteractiveObject sınıfı kullanıcı etkileşimini işlemek için gerekli olan yaygın olay yapısını ve işlevselliğini sağlar. Doğrudan bir InteractiveObject sınıfı örneği oluşturmazsınız. Bunun yerine SimpleButton, Sprite, TextField gibi görüntüleme nesneleri ve çeşitli Flash geliştirme aracı ve Flex bileşenleri, kullanıcı etkileşimi modelini bu sınıftan miras alır ve bu nedenle ortak bir yapıya sahiptir. Bu da InteractiveObject öğesinden derlenmiş olan bir nesnede kullanıcı etkileşimini işlemek için öğrendiğiniz tekniklerin ve yazdığınız kodun diğerlerine de uygulanabileceği anlamına gelir.

Etkileşimli bir nesne, programlama veya kullanıcı eylemi ile odak alabilir. Ayrıca, tabEnabled özelliği true olarak ayarlanmışsa kullanıcı Sekme tuşu ile odağı bir nesneden diğerine geçirebilir. Aşağıdaki durumlar haricinde tabEnabled değerinin varsayılan olarak false şeklinde olduğuna dikkat edin:

• Bir SimpleButton nesnesi için değer true olur.

• Bir giriş metni alanı için değer true olur.

• buttonMode değeri true olan bir Sprite veya MovieClip nesnesi için değer true olur.

Her iki durumda da odak değiştiğinde ek davranış sağlamak için FocusEvent.FOCUS_IN veya FocusEvent.FOCUS_OUT öğelerine dinleyici ekleyebilirsiniz. Bu durum özellikle metin alanları ve formlar için kullanışlıdır ancak InteractiveObject sınıfından miras alan hareketli grafikler, film klipleri veya diğer nesneler için de kullanılabilir. Aşağıdaki örnek Sekme tuşu ile odak değiştirmenin nasıl etkinleştirileceğini ve sonra gelen odak olayına nasıl yanıt verileceğini gösterir. Bu durumda, karelerin her biri odak haline geldiğinde renk değiştirir.

var rows:uint = 10; 
var cols:uint = 10; 
var rowSpacing:uint = 25; 
var colSpacing:uint = 25; 
var i:uint; 
var j:uint; 
for (i = 0; i < rows; i++) 
{ 
    for (j = 0; j < cols; j++) 
    { 
        createSquare(j * colSpacing, i * rowSpacing, (i * cols) + j); 
    } 
} 
 
function createSquare(startX:Number, startY:Number, tabNumber:uint):void 
{ 
    var square:Sprite = new Sprite(); 
    square.graphics.beginFill(0x000000); 
    square.graphics.drawRect(0, 0, colSpacing, rowSpacing); 
    square.graphics.endFill(); 
    square.x = startX; 
    square.y = startY; 
    square.tabEnabled = true; 
    square.tabIndex = tabNumber; 
    square.addEventListener(FocusEvent.FOCUS_IN, changeColor); 
    addChild(square); 
} 
function changeColor(event:FocusEvent):void 
{ 
    event.target.transform.colorTransform = getRandomColor(); 
} 
function getRandomColor():ColorTransform 
{ 
    // Generate random values for the red, green, and blue color channels. 
    var red:Number = (Math.random() * 512) - 255; 
    var green:Number = (Math.random() * 512) - 255; 
    var blue:Number = (Math.random() * 512) - 255; 
     
    // Create and return a ColorTransform object with the random colors. 
    return new ColorTransform(1, 1, 1, 1, red, green, blue, 0); 
}

Girdi keşfetme API’leri, bir kullanıcının aygıt yetkilerinden faydalanabilmenize imkan verir veya bu yetkiler mevcut olmadığında alternatifler sunar. Bu API’ler özellikle mobil ve dokunmatik uygulamalar geliştirmek için faydalıdır. Örneğin, stilus için küçük düğmeleri bulunan bir mobil aygıt arabirimine sahipseniz, kullanıcının parmakla giriş yapabileceği daha büyük düğmelere sahip alternatif bir arabirim sağlayabilirsiniz. Aşağıdaki kod, stilus etkileşimine uygun bir kullanıcı arabirimi öğesi grubu atayan createStylusUI() adlı işleve sahip bir uygulama içindir. createTouchUI() adı verilen bir diğer işlev ise parmak etkileşimine uygun başka bir kullanıcı arabirimi öğesi grubu atar:

if(Capabilities.touchscreenType == TouchscreenType.STYLUS ){ 
    //Construct the user interface using small buttons for a stylus 
    //and allow more screen space for other visual content 
    createStylusUI(); 
} else if(Capabilities.touchscreenType = TouchscreenType.FINGER){ 
    //Construct the user interface using larger buttons 
    //to capture a larger point of contact with the device 
    createTouchUI(); 
}