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:

logowanie flash

Pole hasło:

logowanie we flashu

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!

  • Patryk

    Na pewno taki artykuł się przyda w moich przyszłych projektach :)

  • wojo

    Mam pytanie dotyczace skryptu powyzej.
    W jaki sposob tworzyc nowe loginy i hasla zeby uzytkownik mogl sie najpierw zarejestrowac a potem dopiero zalogowac.
    Pozdrowienia

  • Mielony

    Witaj Grzegorz,
    chciałbym Cię prosić abyś napisał/zrobił tutoriala jak zrobić animację coś al’a kartony z 4fun.tv (Kapitan Bomba, Pod Gradobiciem pytań itp.)
    Jeśli tego nie znasz to wpisz na youtube. Myśle ze taki poradnik by sie wielu ludziom przydal

    Pozdrawiam

  • Witam,

    Dziękuję bardzo za propozycje, jeśli będę miał okazję przygotować taki materiał postaram się to zrobić. Proszę zatem o cierpliwość :)

    Pozdrawiam,
    Grzegorz Róg

  • przemo

    Witam !

    Na poczatek chcialbym pogratulowac ,naprawde dobrych kursow .Wlasnie skonczylem Kurs tworzenie stron internetowych we flashu i mam taki maly problem otoz potrzebuje,aby po wejsciu do podstrony (w tym dziale mam przyciski ,ktore maja ladowac tresc dokumentow w PDF- no wlasnie ladowal sie dokument pdf w nowym oknie ,czyli jesli mam 4 przyciski ,po nacisnieciu na kazdy z osobna artykul ladowal sie on w nowym oknie -uff troche to pogmatwane. Probowalem to robic tak jak w tutorialu czyli ladowac do pustego movie clipa ,uzywajac komendy (load movie) Po wejsciu do podstrony laduja mi sie od razu 4 pdfy.Jak z tego wybrnac?

  • Daro0690

    Witam, Pana kursy sa swietne, wlasnie tworze witryne na ich podstawie, jestem bardzo zadowolony, lecz mam maly problem, strona jest tworzona w as2.0 i komponent „scrollbar” nie pasuje do calosci strony, no a w as2.0 nie mozna go przeedytowac, czy byla by mozliwosc przygotowania jakiegos krotkiego kursu, tutoriala ktory pomogl by mi i mysle ze wielu osobom w stworzeniu wlasnego paska przewijania?? pzdr.

  • Rymar

    W helpie na oficjalnej stronie masz opis jak to zrobić, u mnie działa

    http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00003078.html

  • Ravmax

    Witam
    Panie Grzegorzu zakupiłem u Państwa kursy preloadery, galeria we Flashu i Action Script 3. Jednak nie potrafię poradzić sobie z jednym problemem związanym z preloaderem „future” ale odnoszącym sie chyba do wszystkich preloaderów w tym kursie. Problem polega na tym że za pomocą tego preloadera ładuje plik index.swf i wszystko jest ok oprócz tego że po załadowaniu pliku index.swf animacja nie jest odgrywana od początku lecz od klatki mniej więcej 200. Moje pytanie jest następujące jak z poziomu funkcji onLoadCOmplete w pliku preloadera sterować odtwarzaniem załadowywanego pliku index.swf któremu w pierwszej klatce wpisuje akcje stop. Przekładając to na język polski, brzmiało by to mniej więcej tak. „kiedy ładowanie się zakończy index.swf gotoAndPlay(2)”
    kurcze mam nadzieje że moje wypociny nie są zbyt zagmatwane.

  • marcin [e-life]

    A jak dodać np 5 osób?
    przykład:
    log1+pass1=user1
    log2+pass2=user2
    log3+pass3=user3
    log4+pass4=user4
    log5+pass5=user5

    Z góry dziękuję za podpowiedz.
    Marcin

  • Daro0690

    witam mam male pytanko :)
    stworzylem oto taki kod:

    var aktualna_data:Date = new Date();
    var a:Number = aktualna_data.getDate();

    if (2 <= a && a < 7) {

    aaa.loadMovie(„logo.JPG”);
    }
    if (7 <= a && a < 18)
    {

    aaa.loadMovie(„logo2.JPG”);
    }

    if (18 <= a && a <= 31) {
    aaa.loadMovie(„logo3.JPG”);
    }

    wszystko dziala pieknie ale chcialbym ale powyzszy kod dzialal nie dla danych dni a dla okreslonych dat, np:
    logo1-od 2.luty-5.maja
    logo2-od 6.maja-18.sierpnia
    logo3-od 19.sierpnia-20.listopada
    logo4-od 21.listopada-1.luty

    jak okreslic parametry dla takich dat?? probowalem tak:

    var aktualna_data:Date = new Date();
    var a:Number = aktualna_data.getDate();
    var b:Number = aktualna_data.getMonth();

    if (2.1<=a+”.”+b&&a+”.”+b<=5.4)
    itd. ale niestety nie dziala :( prosze o pomoc i z gory dziekuje.

  • Xox

    Witam ten system logowania można niestety obejsc ;/ Jeśli klikniemy prawym przciskiem myszy i z rozwijalnego menu wybierzemy opcje „do przodu” to opisany powyżej system logowania zostanie ominięty a my uzyskujemy pełny dostęp do strony :/ Polega to na przeskoczeniu następnej klatki. Aby sie zabezpieczyć przed takim czyms wystarczy zastosować pętle w następnej klatce, polegajacej na wykonaniu ponownie poprzedniej klatki. Polecenie takie będzie wygladało tak np: gotoAndPlay(10) gdzie 10 to numer klatki z naszym logowaniem :) Zycze miłej zabawy z flashem :)

  • juxx

    prawym i do przodu,
    trzeba będzie przetestować inne stronki he he :D

  • Grzegorz Róg

    Można bardzo łatwo wyłączyć menu:

    Stage.showMenu = false;

    Ewentualnie tylko opcję forward:

    var moje_menu:ContextMenu = new ContextMenu ();
    moje_menu.forward_back = false;

    Pozdrawiam,
    Grzegorz Róg

  • Rafal

    Posiadam flasha 8 który zawiera tylko ActionScript 2.0. Czy można ustawić obsługiwanie ActionScript 3.0 jesli tak to jak to zrobić.

  • anonim

    By wyłączyć menu można też wejść w
    File > Public Settings > Zakładka HTML > i w playback, odznaczyć Display menu.

  • A mi niestety wywala taki błąd.
    ###
    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 3: The class ‚MouseEvent’ could not be loaded.
    function clickHandler(event:MouseEvent):void

    Total ActionScript Errors: 1 Reported Errors: 1
    ###

  • brzosto

    nie żebym się czepiał, ale na Twoim przykładzie nie wpisując nic, wystarczy kliknąć prawym przyciskiem myszy i wybrać play. tak więc radziłbym coś z tym jeszcze zrobić. np ukrycie play. pozdrawiam

  • Grzegorz Róg

    @Spicmir – wybierz File > Publish Settings, zakładka Flash i zmień wersję ActionScript na 3.0

    @brzosto – przeczytaj komentarze zamieszczone powyżej ;-)

    Pozdrawiam,
    Grzegorz Róg

  • brzosto

    wiem, wiem…. :) przeczytałem później. pozdrawiam. właśnie to wykorzystam na mojej stronie, bo login z php nie jest mi potrzebne. zastosuje tylko haslo, login bedzie bez znaczenia. pozdrawiam.

  • Passarinho

    Mam pytanko: Czy mógłbyś zamieścić taki sam tutorial, tylko że login i hasło byłoby w pliku data.txt, a flash wysyłałby zapytanie do pliku log.php, który by sprawdzał poprawność hasła i jak by było od wysyłałby do falsha inf”login i hasło ok” a jak nie to „zły login lub hasło” =. Z góry dziękuję za odpowiedz. Bardzo mi na tym zależy, gdyż nigdzie nie potafie tego znaleźć. Jeśli znasz jakieś fajne książki lub strony o współpracy flash i php to proszę napisz na passarinho4@gmail.com. Dziękuję Simon

  • Darek

    Witam Panie Grzegorzu,
    na podstawie zakupionych od Pana kursów projektuje stronkę dla mojego synka. Chciałbym stworzyć mały skrypt do logowania. Problem jest w tym, że przykład podany u góry jest pisany w AS3 a kurs do Flasha w AS2.
    Miałbym do Pana prośbę, czy byłoby to możliwe napisanie poniższego kodu w AS2.:
    ****************************************************************
    stop();
    stage.showDefaultContextMenu = false;
    function clickHandler(event:MouseEvent):void
    {
    if (login.text ==”darek” && pass.text == „bla”) {
    gotoAndPlay (2);
    }
    else if (login.text == „” || pass.text == „”) {
    alert.text = „ups”;
    }
    else {
    alert.text = „błędne hasło”;
    }
    }
    button1.addEventListener(MouseEvent.CLICK, clickHandler);

    *********************************************************
    z góry dziekuję za pomoc.
    PS:
    Z niecierpliwością oczekuję kursu Flash i MySQL

  • guma

    Mam pytanie, czy można dać np 10 roznych haseł pod 1 profil? jak je oddzielić w kodzie?

  • max

    dziwne ale nei dziala wywala mi blad zwiazany z trescia upss?!

  • Pawel

    Witam!
    Umieszczanie loginu i hasla bezposrednio w action script to glupota. Wystarczy tagiego swf’a sciagnac na dysk, zdekompilowac odpowienim programem (ktorych mnostwo w sieci) i hasla potrzebne do zalogowania mamy podane na tacy. Polecam do tego celu uzyc PHP. A same hasla trzymac w bazie danych. Oprocz bezpieczenstwa zyskujemy mozliwosc rejestrowania uzytkownikow.

    Pozdrawiam

  • max

    mam ogromną prośbę, proszę o wytłumaczenie jak za pomocą flasha sprawdzić login i hasło które są zapisane w bazie danych.
    Czyli flashowy skrypt logowania z użyciem bazy danych.baza danych dołączona do programu.

  • witam.
    Czy mogę poprosić o kod ale samego logowania przez hasło w action script 3?