Flash webdesign jednoducho

07.07.2009

Vítam Vás pri dnešnom tutoriále. Tentoraz sa pokúsime vytvoriť síce jednoduchú, no efektnú webstránku. Verím že tutoriál oceníte a v neposlednom rade dúfam, že nakŕmi i duše bažiace aj po iných znalostiach ako je tvorba „guličiek“.

Autor: PeeDee | Hodnotenie:

Pri surfovaní na internete možno nájsť mnoho funkčných templates pre flash zadarmo. No pri týchto šablónach máme často rôzne obmedzenia. Väčšinou môžeme upraviť iba text, no kompletný design (od backgroundu po jednotlivé buttony) by sme mali ponechať pôvodný, rovnako aj vetičku ako „design by...“, alebo „copyright...“. Tak prečo, ak máme základné znalosti, si nevytvoriť vlastný, použiteľný template? Mimochodom, kľudne sa môžeme nechať inšpirovať nejakým hotovým. ;) Aj keď, originalita sa cení.

Dosť bolo reči na úvod. Pusťme sa teda do práce. (Používať budeme ActionScript 2.0)

ZAČÍNAME - BACKGROUND

1.Otvoríme si nový dokument 800x600 pixelov s bielym pozadím.

2. Prvú vrstvu premenujeme na „body“. Táto vrstva bude obsahovať grafické pozadie webu.

Veľmi dôležité je správne rozvrhnutie jednotlivých elementov na stránke (osobne si robím radšej hrubý náčrt na papier). Netreba mať strach, nie je to nič zložité. Ale aby sme si to ešte uľahčili, necháme si zobraziť mriežku. Takže View -> Grid -> Show grid a potom dáme Edit grid. Mriežku nastavíme na 10x10 pixelov. Malo by to vyzerať takto:

Naše pozadie sa skladá z dvoch útvarov. Nakreslíme 2 štvoruholníky, obidva konvertujeme na symbol movieclip. Prvý pomenujeme “top”(bude obsahovať logo) a druhý pomenujeme “bottom” (buttony a text). Z označení nám vyplýva, ktorý bude kde umiestnený. Potom už stačí len dvojklik na jednotlivý symbol a môžeme ho editovať na scéne ako sa nám páči. Moju finálnu grafiku môžete vidieť na nasledujúcom obrázku:

Ako môžme vidieť, mriežka nám pomohla, aby sme odsadili symboly od okraju z každej strany scény presne 10px. Medzi “top” a ”bottom” je taktiež voľný priestor 10px. Pravá strana “bottom” je jemne sfarbená do šedej (tu bude text). Nakoniec obidvom symbolom na scéne pridáme Filters -> Drop Shadow.

Dobrým zvykom je uzamykať vrstvy, s ktorými už nebudeme manipulovať. Vyvarujeme sa tak zbytočným omylom a urýchli to našu prácu. Tak uzamkneme aj túto vrstvu “body” a môžeme pokračovať tretím krokom.

3. Nad aktuálnou vrstvou vytvoríme novú vrstvu a pomenujeme ju “head”. Tu bude obsiahnuté naše logo, slogan, poprípade akýkoľvek stručný obsah charakterizujúci danú spoločnosť/stránku. Logo vložíme do tejto vrstvy tak, aby prekrýval symbol “top”. Ak chceme, môžme úplne dole (poprípade hocikde inde, ale nenapadá ma lepšie miesto), napísať niečo ako “designed, copyright…”.

BUTTONY

Málo webov funguje bez rôznych buttonov, vďaka ktorým si môžme prezerať informácie rozložené na rôznych miestach webu. Vo flashi to funguje tak, že jednotlivé tlačítka nás presúvajú medzi snímkami (existujú samozrejme aj iné možnosti, ale toto je najjednoduchšia cesta, ak náš web nie je veľmi obsiahly) na ktorých je rôzny obsah. K tomu sa ešte dostaneme neskôr, v tomto kroku si tie tlačítka však pripravíme.

1. Vytvoríme si nový symbol button s názvom nie iným ako “button”. Otvoríme ho pre editáciu, na frame UP nakreslíme žiadaný tvar a ofarbíme. Zvolíme Modify -> Convert to Symbol -> Graphic a pomenujeme ho “button_graph”. Konvertujeme znova, tentoraz na MovieClip s názvom “button_up”. Ubezpečíme sa, že editujeme movieclip “button_up”, na prvom snímku zvolíme Tween: Motion, označíme 5. snímok ako keyframe a náš button posunieme trošku doprava. Desiaty snímok taktiež označíme ako keyframe a button vrátime na pôvodnú pozíciu.Vrátime sa na prvý snímok, označíme button, navolíme Color: Tint ako sa nám páči (ja som volil bielu farbu, prekrytie 50%), a na 10. snímok nezabudneme vložiť do ActionScriptu

stop();

Môj približný postup možno vidieť na nasledujúcom obrázku:

2. Na snímok “Over” (stále pracujeme so symbolom “button”), vložíme Blank Keyframe a potom z knižnice pretiahneme na snímok symbol „button_graph“. Následne ho konvertujeme na symbol MovieClip a pomenujeme ho „button_over“. Tento symbol ideme teraz editovať, takže sa ubezpečíme, že ho máme zvolený. Na prvom snímku štandardne zvolíme Motion: Tween, a náš symbol posunieme o minimálne 90px doprava (ak máte zapnutú mriežku, nie je to problém, taktiež skúste SHIFT + ŠÍPKA V PRAVO). Na šiesty snímok pridáme keyframe a symbol posunieme o ďalších 20px. Na jedenástom snímku znova keyframe a symbol navrátime o 50px doľava. V tomto snímku taktiež v Properties tohto MovieClipu zvolíme Color: Brightness niečo medzi 20-30 percent.

Toto je postup, ktorý vyhovoval mne, môže sa stať, že niečo vám nebude fungovať tak ako má, poprípade to bude vyzerať inak ako u mňa. V podstate pri button_over ide o to, aby ihneď po nabehnutí kurzorom myši na button bol tento trošku posunutý vpravo, následne sa ešte kúsok posunul doprava a potom po jedenásty snímok sa presunul vľavo, až za svoju pôvodnú pozíciu. Skutočne to nie je žiadna veda, treba si to odskúšať. Ale aj tak dúfam, že ten krok bol väčšine jasný.

3. S „button_over“ sme hotoví. Vrátime sa k editácií „button“ a na snímok „Down“ proste vložíme Insert -> Timeline -> Frame.

4. Posledná vec, ktorú v tomto kroku urobíme je, že z knižnice pretiahneme na hlavnú scénu na vrstvu „button“ (ak ste podľa mojej rady zamkli ostatné 2 vrstvy, tak inde to dať ani nepôjde) toľko tlačítok, koľko budeme potrebovať. Myslím že nášmu ukážkovému webu postačí 5. Umiestnime ich na ľavú stranu nad symbol „bottom“. Pekne ich pod seba zarovnáte taktiež pomocou mriežky, len si nechajte skryť layer „body“ (Ja som ich zarovnal tak, že medzi 2 buttonmi je priestor 20px).

POPISKY

Toto je najjednoduchší krok, ktorý nás čaká. Aby sme vedeli, kam nás ktoré tlačítko zavedie, musíme im dať nejaké popisky.

1. Nad vrstvu “button” (dúfam, že už ste ju uzamkli) pridáme novú vrstvu. Pomenujme ju “labels”.

2. Vyberieme Text Tool (T), vytvoríme obyčajný StaticText a napíšeme pod seba popisky, ktoré chceme aby náše buttony obsahovali. Napríklad “O nás, Produkty, Galéria, Partneri, Kontakt”. Tento text zarovnáme tak, aby “O nás” bolo nad prvým tlačítkom.

V Properties tohto textu nájdeme Edit Format Option a Line Spacing nastavíme na 24.5 (toto číslo vyhovuje, ak ste tlačitka zarovnali rovnako ako ja).

3. Teraz už len zvolíme farbu a font textu, taktiež môžme pridať nejaký ten tieň pomocou Filters.

Ak sa vám nedarí text pomocou Edit Format Option zarovnať pekne nad buttony, môžte taktiež vytvoriť 5 rôznych Static Text a každý zarovnať zvlášť.

OBSAH

Tak sme sa s ľahkosťou prebojovali takmer ku poslednej etape v tvorbe našej stránky. Grafiku máme hotovú, buttony pripravené. Musíme však pridať ešte nejaký text a obrázky, aby všetkým bolo jasné o čom naša stránka je.

1. Nad poslednou vrstvou si vytvoríme tri nové vrstvy. Pomenujeme ich “Pictures, Content, Actions”. Na všetkych vrstvách pridáme na 10.,20.,30. a 40. snímok KeyFrame. Na 50. snímok bude stačit pridať len Frame. Úplne by postačilo, keby sme KeyFrame pridali napríklad na 2.,3.,4. a 5. snímok, ale to by sme neskôr neprečítali poznámky, ktoré pridáme v ďalšom kroku.

2. V tomto kroku sa zameriame na vrstvu “Content”. Označíme prvý snímok a v Properties pod Frame napíšeme “O nás”. Takto označíme 10. snímok a do Properties napíšeme “Produkty”. Podobne pokračujeme na 20.,30. a 40. snímku.

3. Presunieme sa do vrstvy Pictures a na každý KeyFrame pridáme nejaký obrázok vhodný k tématike stránky. Obrázok vložíme nad tu sivú plochu, najlepšie by bolo, keby všetky obrázky mali rovnaké rozlíšenie. Šírka obrázka by mala byť o trošku menšia než je šírka šedej plochy. Ak si to rozrátame na našej mriežke, zistíme, že ideál je menší než 530 px. Výška môže byť ľubovoľná, ale musíme myslieť aj na text, ktorý chceme pod obrázok ešte pridať. Ja som si zvolil niečo menej ako je jedna tretina šedej plochy.

Obrázky si teda pripravte v nejakom grafickom editore tak, ako potrebujete. Ja som použil čiernobiele obrázky s rozlíšením 525x140 px a vo flashi som ich konvertoval na symbol MovieClip, následne v Properties nastavil Color: Tint na modrú.

4. Obrázky sú tam, kde byť majú, treba však pod ne umiestniť ešte text. Textové polia sme v dnešnom tutoriále už tvorili, takže znova vytvoríme obyčajný StaticText, (na vrstve „content“) navolíme si vlastnosti fontu a umiestnime pod obrázok. Do poľa vpíšeme čo chceme a je to. Keď to urobíme, tak na prvom snímku označíme polia pomocou SHIFT+leftclick potom CTRL+C, presunieme sa na 5. snímok a cez SHIFT+CTRL+V vložíme tieto polia na snímok presne na tú istú pozíciu ako na snímku prvom.

5. Označíme vrstvu Actions a postupne od 1. snímku po 40. snímok všade tam, kde máme KeyFrame napíšeme do ActionScriptu:

Stop();

FUNKCIONALITA TLAČÍTOK

Konečne úplne na záver nám ostáva sfunkčniť naše buttony. Pretože ak teraz cez CTRL+ENTER otestujeme stránku zistíme, že síce vyzerá dobre, pekne sa nám zastaví na prvom snímku „O nás“ ale tlačítka nás ďalej neposunú.

1. Odomkneme vrstvu „button“, snímok 1. a označíme prvé tlačítko. Do ActionScriptu vpíšeme:

on (release) {

gotoAndStop("O nas");

}

Následne pokračujeme obdobne pri ostatných tlačítkach, len v zátvorke uvedieme korektný snímok. Ak máte script napísaný na každom tlačítku na prvom snímku, prejdite k druhému kroku.

2. V druhom bode musíme odstrániť menšiu závadu. Keďže sme KeyFrame na ostatné snímky umiestnili ešte pred napísaním scriptu, tak ak stránku otestujeme, zistíme že buttony fungujú len na prvom snímku, potom sa ďalej nedostaneme. Naštastie to nie je nič vážne. Takže postup je jednoduchý. Označte 1. snímok vrstvy „button“ potom CTRL+C. Označte piaty snímok, DEL a následne SHIFT+CTRL+C. Toto opakujte až po 40. snímok.

Web máme hotový, dúfam že sa páči a že tutoriál bol aspoň k niečomu užitočný. (: