Odeslání dat z formuláře ve Flashi 4 - I. - Grafika.cz - vše o počítačové grafice

Macromedia Flash tutorial

Macromedia Flash tutorial

14. února 2001, 00.00 | Kompletní osvětlení vleklého problému - jak odeslat data z formuláře vytvořeného ve Flashi? Bohužel opět dvoudílné. V prvním díle grafický postup a v druhém scripty.

V tomto pokračování si vytvoříme e-mailový formulář, který ovšem nebude dělaný jen ve flashi, ale potřebuje ke svému životu ještě jeden soubor - ten, který zapříčiní fyzické odeslání, nic víc. V tomto případě jsem použil script napsaný v PHP. V jakém jazyce to napíšete, je ale celkem jedno. O něco dále si pak vysvětlíme, kde se nalézá cesta k tomuto souboru a kde si tedy budete moci sami udělat změnu.

A jak je již zvykem, hned si ukážeme, jak bude naše dílo vypadat:

Nejedná se o nějaký grafický zázrak, ale zvolil jsem spíš funkčnost nad grafickou složitostí. Vy si s tím potom budete moci udělat co chcete.

Nejdříve si opět vytvoříme pracovní plochu. Velikost bude 400 x 400 pixelů, pozadí jemný okr a jinak vše necháme defaultně nastaveno.

V knihovně symbolů si vytvoříme obvyklým způsobem 3 tlačítka: Button 1, 2 a 3. Jako další krok si vytvoříme "Graphics", což bude kompletní formulář jako celek (jeho design je volitelný, pouze je třeba dodržet textová pole). Stačí, když si ho vytvoříme v jednom časovém rámečku (frame). Není třeba kombinovat vrstvy. V případě, že budeme chtít nějaké tvary výše než ostatní, použijeme nabídku MODIFY-ARRANGE, kde si zvolíme, kde má být tvar, či textové pole umístěno. Nástrojem TEXT FIELD si vytvoříme na tomto formuláři 4 textová pole tak, jak je uvedeno na obrázku:

Tato textová pole si pojmenujeme tak, jak je na obrázku uvedeno červeným textem (" ... "). U polí "vzkaz" a "od" zatrhneme v kontextové nabídce vyvolané kliknutím pravého tlačítka PROPERTIES tyto hodnoty: Multiline, Word wrap a Draw Boarder and Background. U pole "nemail" zaškrtneme: Multiline, Word wrap, Disable editing a Disable selection. U pole "tema" zase: Disable editing a Disable selection. V knihovně symbolů si také vytvoříme dvě tlačítka (buttons) - "zpět" a "odešli". Tato tlačítka poté přetažením z knihovny umístíme do "grafiky" "formulář" Nyní bychom měli mít připraven formulář k oživení a naše knihovna symbolů by měla vypadat asi takto:

Nyní se nastavíme do hlavní scény (scene 1), kde si vytvoříme 4 nové vrstvy: hlavní, pošta, pošta bad 1 a pošta bad 2. Ve vrstvě "hlavní" se nastavíme na první rámeček a poté, přetažením z knihovny, umístíme na plochu všechny tři tlačítka (Button 1, 2 a 3). Dále se ve vrstvě "pošta" nastavíme na 2. rámeček kde, zase přetažením z knihovny, umístíme do středu plochy formulář. Pro tento formulář teď uděláme animaci, která nám zajistí, že celé tělo formuláře vyjede z levé strany plochy doprostřed a zviditelní se. Postupujeme takto: ve vrstvě "pošta" se opět nastavíme na 2. rámeček, kde již je formulář umístěn uprostřed plochy. U tohoto formuláře stiskem pravého tlačítka vyvoláme kontextovou nabídku, kde označíme funkci "scale", která nám pomůže změnit velikost tohoto formuláře tak, že jej stáhneme do levého rohu a tak vlastně zdeformujeme. Na tento "deformovaný" objekt potom DVAKRÁT klikneme levým tlačítkem a v záložce COLOR EFFECT nastavíme hodnotu APLPHA na 0%. Nyní se opět nastavíme na druhý rámeček vrstvy "pošta", kde po stisku levého tlačítka zvolíme CREATE MOTION TWEEN, poté přejdeme na rámeček č. 14 a zvolíme INSERT KEYFRAME. Na zdeformovaném a neviditelném formuláři na ploše změníme APLHU na 100% stejným způsobem, jako jsme ji měnili na 0% a potom pomocí SCALE jej "roztáhneme" na původní velikost. Dále se nastavíme na rámeček č. 15, tam pomocí kontextové nabídky vyvolané pravým tlačítkem zvolíme INSERT KEYFRAME a umístíme zde zase pouhým přetažením z knihovny náš formulář. Děláme to tímto způsobem proto, protože později budeme "oscriptovávat" jednotlivá tlačítka a kdybychom to dělali již přímo na rámečku 14, kde samotná animace končí, tak by nevypadala tak, jak chceme. Můžete si to sami vyzkoušet. Formulář by měl být na rámečku 15 ve stejné pozici, jako na rámečku 14. Toho dosáhneme tak, že si pomocí klávesové zkratky Ctrl+Alt+I otevřeme "inspektora objektů". Najedem si na rámeček č. 14, kde se nám v inspektorovi objeví hodnoty "x" a "y". Tyto hodnoty zkopírujeme na stejné místo (kolonky "x" a "y") na rámečku č. 15. Objekt se nám tedy dostane do stejné pozice. Inspektor vypadá asi takto:

Dalším krokem je doplnit vrstvy "pošta bad 1" a "pošta bad 2". Ve vrstvě "pošta bad 1" se nastavíme na rámeček č. 16, kde si opět přetáhneme náš formulář a pomocí inspektora ho umístíme. Totéž provedeme na rámečku č. 17 ve vrstvě "pošta bad 2".

Graficky máme tedy celý formulář hotov. Zbývá ho jen připravit k provozu.

Ve vrstvě "hlavní" si na rámečku č. 1 dodáme script: stop (pravý klik - PROPERTIES-ACTIONS-+). To nám zapříčiní zastavení celé animace na rámečku č.1, kde bude čekat, co se bude dít dál.

Ve vrstvě "pošta" se nastavíme na rámeček č. 15, kde dodáme script:

Stop

Set Variable: "nemail" = ""

Tento script zajistí, že se animace zastaví na rámčku č. 15 (stop) a do textového pole nemail se nenapíše nic, resp. vymaže vše, co by tam mohlo z předchozího používání zůstat.

Ve zbylých vrstvách na jejich aktivních rámečcích dodáme také script: stop. Vaše animační řada by měla vypadat takto:

Nyní už zbývá jen "oscriptovat" tlačítka a přisoudit jim jednotlivé akce. To však až v dalším díle...