Tvorba jednoduchého webu vo Flashi (AS3)

Často sa určite považujete za s weby, ktoré disponujú istými animáciami a majú akési kúzlo dizajnu - sú vytvorené vo flashi. Ja vám tu ukážem ako taký jednoduchý web vytvoriť.

Budeme potrebovať:

Adobe Flash CS5 - trial verziu možno stiahnuť tu
(Pozn. Príklad budem prezentovať na anglickej verzii)

Produkt nainštalujete jednoduchým klikaním na 'next' a odsúhlasením licenčných podmienok.
Po inštalácii program spustite.

" ":images/img/we­binflash/flash1­.jpg

Z ponuky vyberte ActionScript 3.0 a pustíme sa do práce.

" ":images/img/we­binflash/flash2­.jpg


Užívateľské prostredie (pozn. Vy ho máte inak rozložené jednoduchým kliknutím a ťahaním možno ponuky presunúť podľa ľubovôle)

1. - Tool Bar - Panel nástrojov - tu sú nástroje, ktoré budeme používať pri kreslení a modifikovanie našich budúcich objektov na webe.
2. - Time line - časová os - tu budeme rozkladať snímky, ktoré sa budú v našej animácii prehrávať a pomocou action scriptu im budeme hovoriť, kedy sa majú prehrať a dávať im pokyny.
3. - FPS (Fraps per second) - počet snímok za sekundu - optimálne tak 30 (podľa toho na akú animáciu na náš web môže byť i štandardných 24).
4. - Size - veľkosť plátna na ktoré budeme kresliť. Zvolil by som veľkosť úmernú našej stránke animácie sa roztiahne na celú plochu resp. môžeme jej veľkosť meniť. Napr. 640 x 480 alebo ponechajte pôvodnú hodnotu záleží na tom, ako veľmi sa chcete rozťahovať a ako veľké objekty chcete kresliť.
5. - Plátno - tu budeme kresliť a umiestňovať aktívne prvky nášho flashového webu.

Pozadie - sú dva spôsoby (odporúčam prečítať obaja, ale urobiť to tým druhým)

1. Spôsob
Vezmeme z lišty nástroj Rectangle tool
napravo u plechovky (Fill color) vyberieme farbu pozadia - vyberte takú akú uznáte za vhodnú, ja volím modrú. (Pozn. Symbolom
si môžete namiešať vlastné odtieň). U Stroke color (obrys) zvoľte prečiarkol obdĺžnik (žiadna farba). A potom roztiahnite cez plochu obdĺžnik.

Teraz kliknite na čiernu sipecka v paneli nástrojov Selection tool (V) kliknite jej na pozadí ktorej ste nakreslili tým ho označíte a stlačte F8.



Name - názov - napr. Pozadi
Type - typ (aneb k čomu hodláme objekt použiť)
Movie Clip (MC) - animovatelný objekt s možnosťami akcie (ActionScriptu - AS)
Button - tlačidlo - normálne tlačidlo s možnosťami akcie (AS) a stylovaním že sa pri prejdení myši zmení alebo pri kľučku atď ...
Graphic - grafika - žiadna akcia len stojí
My vyberieme Graphic a klikneme na OK.

To bol ten zložitý : D ale tiež sa dá upotrebiť keď potrebujete špeciálne pozadie napr. obrázok či nejaké klikiháky ...

2. Spôsob

Pod rozlíšením je Stage- tam jednoducho vyberiete farbu pozadia a done

Teraz si rozvrhneme dizajn webu. Ja by som to videl tak, že hore dáme obrázok doľava menu a napravo bude obsah. Jednoduché a prosté

" ":images/img/we­binflash/flash6­.jpg

Vložíme logo.

Hore v ponuke zvolíme záložku INSERT - New symbol

Name -napr. logo_webu
Type -MC (po kliku na logo nás presmeruje na hlavnú stránku u graphic by to nešlo)

Teraz sa nám objavilo prázdne plátno.

Máme dve možnosti - importujete obrázok zo súboru - FILE - IMPORT - Import to stage (zk. Ctrl + R).
Alebo niečo nakreslíme - Rectangle tool (R), Pencil tool (Y), Text tool (T) .... vo môžeme použiť je to na vás.
(Pozn. U text tool si dajte pozor na nastavenie najlepšie je nastaviť - Classic text, Static Text a dole anti-alias for Readabiliry)

Potom objekt alebo symbol ako chcete vycentrujeme - záložka napravo hore - Align. (Pozn. Pokiaľ ju tam nemáte tak záložka - window - Align (zk. Ctrl + K)).




Horizontálne a vertikálne k stredu.
Align to stage - zarovnáva sa absolútne priamo vo stage - ak nemáte zašrtnuté zarovná sa len relatívne.

Teraz máme logo hotové a tak sa pod časovou osou prekliknite späť na Scénu 1.

Naprav hore vyberieme Library (pokiaľ nie je - WINDOW alebo Ctrl + L).
A pretiahneme objekt logo_webu a umiestnime ho nahor na plochu.

Môžete si ho pomocou align zarovnať na top a horizontálne vycentrovať.

LOGO je hotové. (Neskôr poupravíme pomocou AS)

Teraz menu.

Zase vložíme symbol - MC. (INSERT - New Symbol (zk. Ctrl + F8)).

Zvolíme si rectangle tool, vyberieme farbičku napríklad aj okraje a nakreslíme menu s rozmermi asi tak 150 x 50 (š. V.). (Môžete potom vybrať ctrl + a dať záložku info a rozmery si zmeniť).

Horizontálne vycentrujeme a zarovnáme vertikálne na TOP.

Potom na časovej osi klikneme na snímku 10 pravým tlačítkom myši a zvolíme Insert Keyframe. To isté urobíme pri snímke č. 20.

" ":images/img/we­binflash/flash8­.jpg

Teraz klikneme na snímku 10 ľavým tlačítkom myši klikneme do poľa stlačíme Ctrl + A a napravo zvolíme záložku transform (ctrl + T).



Skontrolujte Constrain (mení veľkosti súmerne musí byť rozpojené)
U šipeček hore a dolu prepíšeme hodnotu na 300% a potvrdíme Enter.
V align zarovnáme na TOP.
A teraz urobíme kúzlo : D .
Klikneme medzi 1 - 10 snímku pravým tlačidlom a zvolíme Create shape tween, to isté urobíme medzi 11 - 20 snímkou.



Časová os sa nám takto zmení a ak stlačíme ENTER tak sa nám menu krásne rozkladá a skladá. Ak nefunguje skontrolujte či máte v záložke Control - povolené -enable live preview.

Teraz budeme chcieť pridať na scénu tlačidla.

Ctrl + F8 a vytvoríme štyri MC (v zátvorkách sú uvedené texty ktoré u nich vytvorte) - menu_button (otvoriť menu), close_menu (zatvoriť menu), test_button (zobraziť text), hyperlink_button (hyperlink).
Pozn. V Properties u texte možno nastaviť schopnosti - Readonly - text nemožno vybrať možno len čítať (nejde označiť myšou), Selectable - text možno vybrať, Editable - text možno vybrať a editovať

Je lepšie doplniť samotné písmo ešte farebným alebo priehľadným obdĺžnikom aby tlačidlo lepšie kolidovalo s myšou.

Teraz keď máme tlačidla vrátime sa späť k menu - Library a poklepeme na menu. (Pozn. Klepte tam ako je tá ikonka)

Vytvoríme novú vrstvu



Vložíme do nej dva prázdnej keyframy (Insert - Blank Keyframe) pri snímke 1 a 10

Potom klikneme na Vrstvu 2 a snímku č. 1 a pretiahneme z library menu_button.

Potom na Vrstvu 2 a snímku 10 a tam vložíme test button.

Klikneme na Vrstvu 2 a snímka 1 pravým tlačítkom myši a dole zvolíme actions.
Otvorí sa nám okno kde môžeme písať Action Script.
Napíšeme jednoduché - stop ();
To isté urobíme u Vrstvy 2 a snímky 10.

Tento jednoduchý príkaz zaistí že vo výslednej animácii sa prehrávanie zastaví na začiatku keď ho potom donútime aby sa prehrala tak sa zastaví na 10 a potom až jej dovolíme pokračovať skončí zase pri prvej snímke.

Teraz sa vrátime na scénu 1 a vložíme menu do poľa, stlačíme (V) a v properties napíšte do inštancie name - menu.

Vytvoríme ďalší symbol - text_area, typ - MC

Nakreslíme štvorec s rozmermi napr. 250 px a zarovnáme ho horizontálne k stredu a vertikálne k topu.

Pomocou text tool napíšeme text napr. Vitaj

Na časovej osi vytvoríme Keyframe pri snímke 2 a text prepíšeme na TEST.

A u oboch napíšte do actions - stop ();

Vrátime sa na scénu 1 a vložíme text_area do poľa.

Pomocou nástroja Free transform tool (zk. Q) si ho môžete prevzorkovat.

Potom v properties napíšte do inštancie name - text_area

Teraz dáme web do chodu poklepeme na logo a dole na osi klikneme na 1. snimek a dáme actions.

function logo_webu(evt:MouseEvent):void {
  Object(root).text_area.gotoAndStop(1);
}

addEventListener(MouseEvent.CLICK, logo_webu);

Príkaz hovorí - po kliknutí - objekt.text_area - zobrazí snímku č. 1 z jeho časovej osi au neho sa zastaví

Ikona zameriavača sa veľa hodí keď hľadáte cestu nemusíte premýšľať (dole si môžete vybrať medzi relatívnou a absolútnou cestou len krátko príklad na adresách - http://itnetwork.cz/...a/soubor.php - absolútna, zlozka / soubor.php - relatívna - použiť môžete čo chcete záleží na situácii keď sa napr zmení názov itnetwork.cz sa premenuje na itnetwork.cz a použijete absolútna tak to nebude fungovať a ak použijete relatívna a zmení sa zložka tak to taky nepôjde napr ( http://itnetwork.cz /...a/soubor.php, súbor je v priecinku slozka2 a odkazuje na súbor v priecinku priecinok - ../slozka/sou­bor.php) ak slozku2 umiestnite napr do ďalšieho adresára nebude smerovania fungovať)

" ":images/img/we­binflash/flash1­5.jpg

Teraz poklepeme na menu a napíšeme trochu kódu do neho.

Dáme prvý záber a poklepeme na tlačidlo menu (kliknete mimo poľa a potom na tlačidlo) a dole na osi dáte actions.

function menu_button(evt:MouseEvent):void {
   Object(root).menu.gotoAndPlay(2);
}

addEventListener(MouseEvent.CLICK, menu_button);

Description - Po kliknutí bude pokračovať v animácii (zastaví sa u desiatky kde je stôp ();)

Vrátime sa späť dáme snímku 10

• menu_close - actions

function menu_close_button(evt:MouseEvent):void {
   Object(root).menu.gotoAndPlay(11);
}

addEventListener(MouseEvent.CLICK, menu_close_button);

(No comment šak viete kto nie je to o pár riadkov vyššie)

Do hyperlink-button:

function test_button(evt:MouseEvent):void {
  var url:String = "http://www.itnetwork.cz/";
  var request:URLRequest = new URLRequest(url);
  navigateToURL(request, '_blank');
}

addEventListener(MouseEvent.CLICK, test_button);

A do test_button dáme to isté ako do logo_webu:

function logo_webu(evt:MouseEvent):void {
   Object(root).text_area.gotoAndStop(2);
}

addEventListener(MouseEvent.CLICK, logo_webu);

krása teraz vítězoslastně stlačte CTRL + ENTER a pokochajte sa vaším výtvorom.
Môžete urobiť úpravy pridať nejaký text grafiku pohrať sa s tým čo sme sa naučili a web doviesť k dokonalosti.
Export
Najprv web uložíme ako * .fla projekt - Ctrl + S
A potom dáme File - Publish - web sa vyexportuje do zložky do ktorej sme uložili * .fla projekt.
Vo File - Publish Settings si môžete nastaviť čo sa má vyexportovať a nejaké parametre.
Nájdeme súbor jmeno_projektu.html a otvorte ho v textovom editore.
Všetkým medzi tagom <object ...> </ object> je naša flashová animácia takže ak budete niekedy chcieť vložiť na stránky niečo čo vytvoríte vo flashi stačí skopírovať všetko od tohto tagu až po koniec tohto tagu vrátane tohto tagu a vložiť to do zdrojového kódu vašich stránok.
Pokiaľ chcete web roztiahnuť cez celú stránku nájdite si v tagu object - width a height a hodnoty zmeňte na '100%'. Ale veľmi to neodporúčam najmä ak používate bitmapové obrázky stratí pri deformovaniu kvalitu. Web vycentrujte pripísaním align = "center" do tagu