Tvorba jednoduchého webu ve Flashi (AS3)

Často se jistě shledáváte s weby, které disponují jistými animacemi a mají jakési kouzlo designu - jsou vytvořené ve flashi. Já vám zde ukážu jak takový jednoduchý web vytvořit.

Budeme potřebovat:

Adobe Flash CS5 - trial verzi možno stáhnout zde
(pozn. příklad budu prezentovat na anglické verzi)

Produkt nainstalujete jednoduchým klikáním na ‘next‘ a odsouhlasením licenčních podmínek.
Po instalaci program spusťte.



Z nabídky zvolte ActionScript 3.0 a pustíme se do práce.




Uživatelské prostředí (pozn. Vy jej máte jinak rozložené pouhým kliknutím a tažením lze nabídky přesunout dle libosti)

1. - Tool Bar - Panel nástrojů - zde jsou nástroje, které budeme používat při kreslení a modifikování našich budoucích objektů na webu.
   
2. - Time line - časová osa - zde budeme rozkládat snímky, které se budou v naší animaci přehrávat a pomocí action scriptu jim budeme říkat, kdy se mají přehrát a dávat jim pokyny.
   
3. - FPS (fraps per second) - počet snímků za sekundu - optimálně tak 30 (podle toho na jakou animaci na náš web může být i standardních 24).
   
4. - Size - velikost plátna na které budeme kreslit. Zvolil bych velikost úměrnou naší stránce animace se roztáhne na celou plochu resp. můžeme její velikost měnit.  Např. 640 x 480 nebo ponechte původní hodnotu záleží na tom, jak moc se chcete roztahovat a jak velké objekty chcete kreslit.
   
5. - Plátno - zde budeme kreslit a umísťovat aktivní prvky našeho flashového webu.
   

Pozadí - jsou dva způsoby (doporučuji přečíst oba, ale udělat to tím druhým)

1. Způsob
Vezmeme z lišty nástroj Rectangle tool napravo u plechovky (Fill color) vybereme barvu pozadí - zvolte takovou jakou uznáte za vhodnou, já volím modrou.  (pozn. Symbolem si můžete namíchat vlastní odstín). U Stroke color (obrys) zvolte přeškrtlý obdélník (žádná barva).  A poté roztáhněte přes plochu obdélník.

Nyní klepněte na černou šipečku v panelu nástrojů Selection tool (V) klepněte jí na pozadí které jste nakreslili tím jej označíte a stiskněte F8.



Name - název - např. pozadi
Type - typ (aneb k čemu hodláme objekt použít)
Movie Clip (MC) - animovatelný objekt s možnostmi akce (ActionScriptu - AS)
Button - tlačítko - normální tlačítko s možnostmi akce (AS) a stylováním že se při přejetí myši změní nebo při kliku atd ...
Graphic - grafika - žádná akce jen stojí
My vybereme Graphic a klepneme na OK.

To byl ten složitý ale také se dá upotřebit když potřebujete speciální pozadí např. obrázek či nějaké klikyháky...

2. Způsob

Pod rozlišením je Stage- tam jednoduše vyberete barvu pozadí a done

Nyní si rozvrhneme design webu. Já bych to viděl tak, že nahoru dáme obrázek doleva menu a napravo bude obsah. Jednoduché a prosté



Vložíme logo.

Nahoře v nabídce zvolíme záložku INSERT - New symbol

Name -např. logo_webu
Type -MC (po kliku na logo nás přesměruje na hlavní stránku u graphic by to nešlo)

Nyní se nám objevilo prázdné plátno.

Máme dvě možnosti - Naimportujeme obrázek ze souboru - FILE - IMPORT - Import to stage (zk. Ctrl + R).
Nebo něco nakreslíme - Rectangle tool (R), Pencil tool(Y), Text tool(T).... ve můžeme použít je to na vás.
(pozn. U text tool si dejte pozor na nastavení nejlepší je nastavit - Classic text, Static Text  a dole anti-alias for Readabiliry)

Poté objekt nebo symbol jak chcete vycentrujeme - záložka napravo nahoře - Align. (pozn. Pokud ji tam nemáte tak záložka - window - Align (zk. Ctrl + K)).




Horizontálně a vertikálně ke středu.
Align to stage - zarovnává se absolutně přímo ve stage - pokud nemáte zašrtnuté zarovná se jen relativně.

Nyní máme logo hotové a tak se pod časovou osou překlikneme zpět na Scénu 1.

Naprav nahoře vybereme Library (pokud není - WINDOW nebo Ctrl + L).
A přetáhneme objekt logo_webu a umístíme jej nahorů na plochu.

Můžete si jej pomocí align zarovnat na top a horizontálně vycentrovat.

LOGO je hotové. (později poupravíme pomocí AS)

Nyní menu.

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

Zvolíme si rectangle tool , vybereme barvičku třeba i okraje a nakreslíme menu o rozměrech asi tak 150 x 50 (š. v.). (můžete pak vybrat ctrl + a dát záložku info a rozměry si změnit).

Horizontálně vycentrujeme a zarovnáme vertikálně na TOP.

Poté na časové ose klepneme na snímek 10 pravým myšítkem a zvolíme Insert keyframe. To samé uděláme u snímku č. 20.



Nyní klepneme na snímek 10 levým myšítkem klepneme do pole stiskneme Ctrl + A a napravo zvolíme záložku transform (ctrl + T).



Zkontrolujte Constrain (mění velikosti souměrně musí být rozpojeno)
U šipeček nahoru a dolu přepíšeme hodnotu na 300% a potvrdíme enterem.
V align zarovnáme na TOP.
A nyní uděláme kouzlo .
Klepneme mezi 1 - 10 snímek pravým tlačítkem a zvolíme Create shape tween, to samé uděláme mezi 11 - 20 snímkem.



Časová osa se nám takto změní a pokud zmáčkneme ENTER tak se nám menu krásně rozkládá a skládá. Pokud nefunguje zkontrolujte zda máte v záložce Control  - povoleno -Enable live preview.

Nyní budeme chtít přidat na scénu tlačítka.

Ctrl + F8 a vytvoříme čtyři MC (v závorkách jsou uvedeny texty které u nich vytvořte) - menu_button (otevřít menu), close_menu (zavřít menu), test_button (zobrazit text), hyperlink_button (hyperlink).
Pozn. V Properties u textu lze nastavit schopnosti - Readonly - text nelze vybrat lze jen číst (nejde označit myší), Selectable - text lze vybrat, Editable - text lze vybrat a editovat

Je lepší doplnit samotné písmo ještě barevným nebo průhledným obdélníkem aby tlačítko lépe kolidovalo s myší.

Nyní když máme tlačítka vrátíme se zpět k menu - Library a poklepeme na menu. (pozn. Klepejte tam jak je ta ikonka)

Vytvoříme novou vrstvu



Vložíme do ní dva prázdné keyframy (Insert - Blank KeyFrame) u snímku 1 a 10

Poté klepneme na Vrstvu 2 a snímek č. 1 a přetáhneme z library menu_button.

Poté na Vrstvu 2 a snímek 10 a tam vložíme test button.

Klepneme na Vrstvu 2 a snímek 1 pravým myšítkem a dole zvolíme actions.
Otevře se nám okno kde můžeme psát Action Scriptem.
Napíšeme jednoduché - stop();
To samé uděláme u Vrstvy 2 a snímku 10.

Tento jednoduchý příkaz zajistí že ve výsledné animaci se přehrávání zastaví na začátku když jej pak donutíme aby se přehrála tak se zastaví na 10 a pak až jí dovolíme pokračovat skončí zase u prvního snímku.

Nyní se vrátíme na scénu 1 a vložíme menu do pole, stiskneme (V) a v properties napište do instance name - menu .

Vytvoříme další symbol - text_area , typ - MC

Nakreslíme čtverec o rozměrech např. 250 px a zarovnáme jej horizontálně ke středu a vertikálně k topu.

Pomocí text tool napíšeme text např. Vítej

Na časové ose vytvoříme keyframe u snímku 2 a text přepíšeme na TEST.

A u obou napíšme do actions - stop();

Vrátíme se na scénu 1 a vložíme text_area do pole.

Pomocí nástroje Free transform tool  (zk. Q) si jej můžete převzorkovat.

Poté v properties napište do instance name - text_area

Nyní dáme web do chodu poklepeme na logo a dole na ose klepneme na 1. snimek a dáme actions.

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

addEventListener(MouseEvent.CLICK, logo_webu);

Příkaz říká - po klepnutí - objekt.text_area - zobrazí snímek č. 1 z jeho časové osy a u něj se zastavý

Ikona zaměřovače se hodně hodí když hledáte cestu nemusíte přemýšlet (dole si můžete vybrat mezi relativní a absolutní cestou jen krátce příklad na adresách - http://itnetwork.cz/…a/soubor.php - absolutní, slozka/soubor.php - relativní - použít můžete co chcete záleží na situaci když se např změní název itnetwork.cz se přejmenuje na itnetwork.cz a použijete absolutní tak to nebude fungovat a pokud použijete relativní a změní se složka tak to taky nepůjde např (http://itnetwork.cz/…a/soubor.php, soubor je ve slozce slozka2 a odkazuje na soubor ve slozce slozka - ../slozka/sou­bor.php) pokud slozku2 umístíte např do dalšího adresáře nebude směrování fungovat)



Nyní poklepeme na menu a napíšeme trochu kódu do něj.

Dáme první snímek a poklepeme na tlačítko menu (klepnete mimo pole a pak na tlačítko) a dole na ose dáte actions.

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

addEventListener(MouseEvent.CLICK, menu_button);

Description - Po klepnutí bude pokračovat v animaci (zastaví se u desítky kde je stop();)

Vrátíme se zpět dáme snímek 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 víte kdo ne je to o pár řádek výše)

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 samé jako do logo_webu:

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

addEventListener(MouseEvent.CLICK, logo_webu);

Krása nyní vítězoslastně stiskněte CTRL + ENTER a pokochejte se vaším výtvorem.

Můžete udělat úpravy přidat nějaký text grafiku pohrát si s tím co jsme se naučili a web dovést k dokonalosti.

Export

Prvně web uložíme jako *.fla projekt - Ctrl + S

A poté dáme File - Publish - web se vyexportuje do složky do které jsme uložili *.fla projekt.

Ve File - Publish Settings si můžete nastavit co se má vyexportovat a nějaké parametry.

Najďete soubor jmeno_projektu.html a otevřete jej v textovém editoru.

Všem mezi tagem <object ... ></object> je naše flashová animace takže pokud budete někdy chtít vložit na stránky něco co vytvoříte ve flashi stačí zkopírovat vše od tohoto tagu až po konec tohoto tagu včetně tohoto tagu a vložit to do zdrojového kódu vašich stránek.

Pokud chcete web roztáhnout přes celou stránku najděte si v tagu object - width a height a hodnoty změňte na ‘100%‘. Ale moc to nedoporučuji zejména pokud používáte bitmapové obrázky stratí při deformování kvalitu.  Web vycentrujte připsáním align=“center“ do tagu <div> který je před object a nebo jednoduše napíšeme nad tag <object ...> tag <center>a pod </object> zase center ukončíme </center>.

Tak a teď pokud jste to dokázali si můžete říct sakra sem dobrý/á umím dělat jednoduchý weby ve Flashi, cheche .
Vám co se něco nevyvedlo přidávám zdrojové kód jako soubor ke článku, abyste se mohli podívat, kde je chyba.