Flash Virtual Keyboard with ActionScript

actionscript 2, animatii Flash, as2, flash, invata Flash, tastatura virtuala

Ati vazut noul gadget propus de google (tastatura virtuala)? Este o metoda buna pentru a adauga functionalitate unei aplicatii… persoanele cu probleme vor naviga mult mai usor daca vor avea tastatura on-screen direct in aplicatia voastra.

Astazi ne vom ocupa de crearea unei tastaturii virtuale in Flash.

In primul rand va trebui sa desenam modelul pentru un buton al tastaturii virtuale.

Avem urmatoarele: un fundal convertit intr-un shape si un text field dinamic numit letter Aceste 2 elemente le convertim intr-un movieclip numit letter. Noul movieclip creat il convertim si pe el intr-un alt movie clip pe care il numim keyboard. Deci tineti minte, adresa pentru text field-ul dinamic este: _root.keyboard.letter.letter.text.

Facem toate acestea pentru a putea manevra mai usor pozitia intregii tastaturii. Daca nu am fi introdus letter in movieclip-ul keyboard, atunci, daca am fi vrut sa schimbam pozitia intregii tastaturii, ar fi trebuit sa modificam o mare parte din cod. In cazul nostru, prin simplul drag&drop al movieclip-ului keyboard mutam intreaga tastatura virtuala.

Acum sa vedem cum vom putea duplica acest movieclip si cum ii putem atribui valoarea unei litere din alfabet.

function virtualKeybord() { }

Vom crea o functie numita virtualKeybord.

var positiony:Number = 0;
var positionx:Number = 0;
var alphabet:Array = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

In cadrul functiei vom initia 3 variabile: positionx si positiony de care ne vom folosi la pozitionarea butoanelor tastaturii virtuale si un vector numit alphabet care va contine pe fiecare pozitie cate o litera din alfabetul englezesc. Am fi putut imparti literele pe elemente si atribuindu-le manual (alphabet[0]=”a”, alphabet[1]=”b” etc.), dar functia de split ne scuteste de o munca in plus.

Acum sa vedem cum putem duplica butoanele si cum le putem atribui literele corespunzatoare.

for (i=0; i450) {
		positiony = 0;
		positionx += 50;
	} else {
		positiony += 50;
	}
}

Vom crea un loop care se va repeta de la 1 pana la penultima pozitie din lungimea vectorului alphabet (penultima pentru ca functia split intoduce un element undefined dupa ultima litera din alfabet).

In cadrul loop-ului vom duplica de 26 de ori movieclip-ul letter din cadrul movieclip-ului keyboard. De fiecare data ii vom modifica pozitia noului mc prin parametrii positionx (daca a depasit o anumita valoare pe axa Y, atunci vom trece pe randul urmator si vom seta valoarea 0 pentru positiony) si positiony (ne permite sa modificam spatiile dintre litere per linie).

Tot aici vom atribui si litera corespunzatoare fiecarui text field din array-ul alphabet. Daca testati aplicatia acum veti vedea ca tastatura apare pe ecran dar ca nu se intampla nimic atunci cand apasati pe un buton.

Inainte de toate sa generam un mic efect la hover peste fiecare buton. Am ales sa modific proprietatea alpha la 80 in cazul unui rollOver, si inapoi la 100 in cazul unui rollOut.

keyboard["letter"+i].onRollOver = function(){
	this._alpha = 80;
}
keyboard["letter"+i].onRollOut = function(){
	this._alpha = 100;
}

Acum sa vedem cum putem face functionala aceasta tastatura virtuala. In Stage desenati un nou text field dinamic numit status.

keyboard["letter"+i].onPress = function() {
	_root.status.text = "Ati apasat tasta "+this.letter.text;
}

Sa vedem cum arata codul complet.

function virtualKeybord() {
	var positiony:Number = 0;
	var positionx:Number = 0;
	var alphabet:Array = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
	for (i=0; i450) {
			positiony = 0;
			positionx += 50;
		} else {
			positiony += 50;
		}
		keyboard["letter"+i].onPress = function() {
			_root.status.text = "Ati apasat tasta "+this.letter.text;
		}
		keyboard["letter"+i].onRollOver = function(){
			this._alpha = 80;
		}
		keyboard["letter"+i].onRollOut = function(){
			this._alpha = 100;
		}
	}
}
virtualKeybord();

And there you go! Acum tastatura este functionala. Nu ramane decat sa va ganditi cum sa o implementati in aplicatiile voastre.

DEMO TASTATURA VIRTUALA

C’ya next time!

Ai nevoie de rezolvarea pentru o problema?

Iti rasplatim activitatea!

Iti recomandam si urmatoarele articole: