Přihlašování pod heslem pomocí FLASH

V dnešním článku si ukážeme, jak jednoduše zabezpečit FLASH stránky pomocí hesla a jak přiřadit každému uživateli jiné přihlašovací jméno a heslo.

Hned na úvod je třeba říct, že tento postup není příliš bezpečný a asi bych ho nedoporučil pro projekty vyžadující velkou bezpečnost, ale pro běžné uživatele bude tento postup plně postačující. Celý algoritmus spočívá v tom, že si vytvoříme Movie Clip, ve kterém se budou nacházet dvě formulářová pole a jedno tlačítko pro vstup. Tlačítku nadefinujeme akci, že pokud bude přihlašovací jméno (login) a heslo odpovídat zadaným hodnotám, tak přeskočí na daný snímek (frame) a pokud nebude odpovídat zadaným hodnotám, tak také přeskočí na jiný daný snímek.

Nejdříve si otevřete novou scénu a nastavte její velikost na 300 x 150 px (CTRL+M). V této scéně vytvořte nový symbol – Movie Clip (CTRL+F8) a pojmenujte jej "prihlaseni". Do tohoto objektu nakreslete dle obrázku dvě formulářová políčka. To provedete tím způsobem, že klepnete myší na ikonku textu (nebo zmáčkněte klávesu "T") a ve spodní části paletky klepnete ještě na tlačítko "ab|", což způsobí, že nebudete psát prostý text, ale budete vytvářet formulářová políčka. Je vhodné si ještě nastavit barvu a typ písma – barva černá, typ Arial CE.

Formulářová políčka

Táhnutím myší vytvořte první políčko, šipkou toto políčko označte a stiskněte pravé tlačítko myši. Z nabídky zvolte "Properties…" (vlastnosti) a v dialogovém okně vyplňte "Variable: login" (název proměnné), zatrhněte políčko "Draw border and background" (vykreslovat okraje a pozadí) a zatrhněte také volbu "Outlines: Do not include font outlines" (nezahrnovat zvolený font). Jednotlivé položky tohoto dialogu byli podrobně vysvětleny v  jednom z minulých dílů seriálu, proto se k nim již nebudu vracet.

Podobně jako první políčko, vytvořte políčko druhé. Jediný rozdíl bude ve stanovení proměnné "Variable: heslo" a zatrhněte také volbu "Password" (obsah políčka bude znázorňován hvězdičkami místo textu). Přepněte se zpět na nástroj textu (nezapomeňte si opět vypnout vytváření formulářových políček) a napište zvoleným písmem bílé barvy vedle příslušných políček nápisy "login" a "heslo".

Tlačítko

V této scéně bude několikrát použito tlačítko. Vytvoříme si jedno tlačítko, kterému budeme však přiřazovat pokaždé jiný nápis a akci. Vytvořte si tedy nový symbol – Button (CTRL+F8), pojmenujte jej "tlacitko" a nakreslete zde obdélník s černým okrajem vyplněný tmavě modrou barvou.

Vložte do ostatních poloh (Over, Down, Hit) klíčové snímky (F6), přičemž můžete barvu výplně obdelníku ještě pomocí nastroje "kyblík" měnit. Tlačítko je tak hotové a můžete se přepnout zpět do editace symbolu "prihlaseni". Otevřete si knihovnu objektů (CTRL+L), myší přetáhněte z knihovny do scény právě vytvořené tlačítko a napište na něj text "vstupte". Stiskněte klávesu CTRL+F a v záložce "Label" pojmenujte tento snímek "start".

Obrazovky pro uživatele.

Přihlašovací dialog máme již téměř kompletní, ale musíme ještě vytvořit obrazovku, která se objeví po úspěšném přihlášení jednotlivých uživatelů. Předpokládejme, že budeme mít 3 uživatele (Pepa, Franta a Jura) a každému budeme chtít nastavit individuální obrazovku po přihlášení, která bude obsahovat například pozdrav a tlačítko zpět.

Do Movie Clipu "prihlaseni" vložte do druhého snímku klíčový snímek (F6) a smažte formulářová políčka včetně popisů a ponechejte jen tlačítko. Nápis na tlačítku změňte na "zpět". Na tlačítko klikněte (nebo klepněte pravým tlačítkem a zvolte "Properties…"). V záložce Actions nadefinujte akci:

Tato akce způsobí, že po stisku tlačítka se přepneme na úvodní přihlašovací dialog (frame 1 – záložka "start"). Nad tlačítko napište nápis: "Ahoj Pepo!" a tomuto klíčovému snímku zadejte název "Pepa" – CTRL+F, záložka Label.

Do Movie Clipu "prihlaseni" vložte podobně jako v tomto případě další dva klíčové snímky (frame 3 a 4), které se budou oproti tomu prvnímu lišit pouze v nápisu "Ahoj …!" (druhý bude "Ahoj Franto!" a třetí "Ahoj Juro!") a názvu záložky (Label) – druhá "Franta" a třetí "Jura".

Do snímku 5 (frame 5) vložíme obrazovku, která se zobrazí po zadání chybných přihlašovacích údajů. Oproti předchozím se bude lišit pouze v tom, že se zde nebude nacházet nápis "Ahoj …!", ale bude zde nápis "Chybné přihlášení". Název záložky (Label) zadejte "chyba".

Akce

Pro funkčnost celého přihlašovacího dialogu je nutné ještě přiřadit tlačítku "vstupte" (snímek 1) akci, která zkontroluje přihlašovací údaje a přepne se do příslušného snímku. Přepněte se tedy na první snímek, klikněte na tlačítko a v záložce Actions nadefinujte následující akce:

Znamená to, že pokud po stisku tlačítka bude proměnné "login" odpovídat řetězec "pepa" a proměnné "heslo" řetězec "josef" animace se přesune a zastaví na záložce "Pepa" atd. Nakonec je nadefinováno, že pokud nebudou proměnné odpovídat žádnému z uvedených případů, přesune se animace na záložku "chyba".

Poslední věc, kterou je třeba ještě udělat je, vložit do prvního snímku akci "Stop", aby se Movie Clip "prihlaseni" nerozběhnul na další snímky. Otevřete si tedy okno Actions (CTRL+F) a složte akci "Stop".

Tím je celý Movie Clip "prihlaseni" hotov a je třeba jej ještě vložit do hlavní scény. Přepněte se tedy do hlavní scény a myší přetáhněte z knihovny symbol "prihlaseni" do scény.

Celý přihlašovací dialog se dá ještě modifikovat. Máte možnost například nadefinovat akci Get URL (místo Go to and Stop) a po přihlášení přejít na dané URL anebo můžete přidávat počet uživatelů, to je jen na Vás.

Celý dnešní příklad si můžete jako vždy stáhnout ve zdrojovém FLA formátu a celou animaci si tak můžete projet přímo v programu Macromedia FLASH.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.