Proste logowanie we Flash'u

Kilka osób pytało mnie w mailach, w jaki sposób stworzyć system logowania na stronie we Flash’u i ActionScript 3. Nic prostszego! Poniżej zamieszczam krótki opis, pliki źródłowe możesz pobrać tutaj., możesz także sprawdzić jak działa gotowy system (login: monkey hasło: business) Zabierzmy się do pracy:

1. Tworzymy nowy plik Flash dla ActionScript 3.0

2. W pierwszej klatce dla warstwy Layer 1 tworzymy dwa pola tekstowe, które posłużą do wpisywania odpowiednio loginu i hasła. Oto właściwości, jakie dla tych pól powinieneś ustawić w panelu Properities:

Pole login:

Pole hasło:

Zwróć uwagę na kilka elementów: po pierwsze typy pól tekstowych ustawiamy na Input Text, czyli z możliwością wprowadzenia danych przez użytkownika, po drugie nadajemy polom unikalne nazwy Instance Name, do których będziemy odnosili się z poziomu ActionScript. Wreszcie, godne uwagi jest to, że dla pola Login ustawiliśmy parametr Single Line, co nie pozwoli przejść do następnej linii po wciśnięciu klawisza Enter, natomiast dla pola z hasłem użyliśmy Password, dzięki czemu wpisywana treść będzie „wygwiazdkowana”.

Kolejnym elementem, który musimy umieścić na stronie, to przycisk pozwalający się zalogować – przypiszemy do niego akcję, która sprawdzi co zostało wpisane w polach Input. Tworzymy więc zwykły obiekt, powiedzmy kształt prostokąta, zaznaczamy i wciskając F8 konwertujemy na symbol typu button. Musimy pamiętać o nadaniu nazwy Instance Name w panelu Properities, niech to będzie „button1„.

Tworzymy także dodatkowe pole Dynamic Text, w którym będzie wyświetlany komunikat o ewentualnym błędzie. Polu nadajemy Instance Name „alert„.

Teraz zajmijmy się ActionScript 3. Tworzymy nową warstwę i w pierwszej klatce umieszczamy akcję:

stop();

function clickHandler(event:MouseEvent):void
{
if (login.text == „monkey” && pass.text == „business”) {
gotoAndPlay (2);
}
else {
alert.text = „ups!?”;
}
}

button1.addEventListener(MouseEvent.CLICK, clickHandler);

Jeśli ten kod nie jest dla Ciebie zrozumiały, poniżej zamieszczam go razem z komentarzem:

//zatrzymujemy film w pierwszej klatce
stop();

//tworzymy funkcję odpowiedzialną za sprawdzenie pól
function clickHandler(event:MouseEvent):void
{
//ustalamy login na monkey oraz haslo na business,
if (login.text == „monkey” && pass.text == „business”) {
//instrukcja po pomyślnym zalogowaniu
gotoAndPlay (2);
}
//jeśli hasło lub login jest niepoprawny
else {
//wyświetlamy w polu input komunikat
alert.text = „ups!?”;
}
}

//przypisujemy funkcję clickHandler do button1
button1.addEventListener(MouseEvent.CLICK, clickHandler);

Pomyślałem, że warto byłoby jeszcze, poza komunikatem w razie podania błędnych danych, wyświetlać komunikat w przypadku, gdy pola nie zostały wypełnione. Dopisujemy więc stosowną instrukcję else if, a nasz cały kod wygląda następująco:

stop();

function clickHandler(event:MouseEvent):void
{
if (login.text == „monkey” && pass.text == „business”) {
gotoAndPlay (2);
}
else if (login.text == „” || pass.text == „”) {
alert.text = „wypełnij wszystkie pola”;
}
else {
alert.text = „ups!?”;
}
}

button1.addEventListener(MouseEvent.CLICK, clickHandler);

To już wszystko, po poprawnym wpisaniu ustalonego hasła i loginu, zostanie wykonana akcja gotoAndPlay(2), a więc przenosząca użytkownika do drugiej klatki filmu. Pozostaje tylko stworzyć coś i umieścić w drugiej klatce, a następnie przetestować działanie naszego skryptu.

W tym krótkim artykule pokazałem Ci jak korzystać z pól tekstowych we Flashu i stworzyć proste logowanie. Przypomnieliśmy sobie także operatory logiczne jak && (and = i) oraz || (or = lub). Więcej wiadomości o operatorach znajdziesz w helpie Flash’a (F1) wpisując Operators. Zachęcam do dodawania kolejnych elementów kodu i dzielenia się ze swoimi spostrzeżeniami!