Tvorba jednoduchého webu ve Flashi (AS3)

Zpět do sekce Flash - 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)

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://devbook.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 sdraco.cz se přejmenuje na islandsoft.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://devbook.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.sdraco.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.

Stáhnout

Program je včetně zdrojových kódů v jazyce Flash

Autor: sczdavos

Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií. Studuje střední školu informačních technologií v Brně.

---

Jak se vám líbí článek?

Celkem (2 hlasů):

 

Tweet

Tisk

Všechny články v sekci
Flash - AS3
Flash - ActionScript 3, hry, programy, příklady se zdrojovými kódy v Adobe Flashi.

Další článek
Vlastní spořič obrazovky za pomocí Flashe
Vlastní spořič obrazovky za pomocí mocného Flashe