Uživatelské nástroje

Nástroje pro tento web


vyuka:vos3l_-_ukol_5

Úkol 5 - Čokoláda

Vytvoříme si ve Flash Builderu projekt, který bude pojednávat o čokoládě.

Jméno projektu: cokoladaProjekt

projektu nastavte minimální šířku 800px a minimální výšku 600px:

Nastavíme barvu pozadí aplikace

Vytvoříme flashovou komponentu - v té pak uděláme menu, pomocí kterého se budeme přesouvat po stránce.

Začneme editovat tuto komponentu.

Na našem webu o čokoládě budeme mít tyto sekce:

  • Čokoláda (úvod)
  • Druhy
  • Historie
  • Galerie
  • Odkazy

Naše komponenta bude vlastně záhlaví/rozcestník webové stránky. Bude mít čtyři stavy (stejné jako sekce). Každý z těchto stavů bude mít „přístupovou animaci“. Přechod, který se spustí při přechodu z jakéhokoliv stavu. (přechodová animace je objevení se fotky v náhledu - podívejte se na výslednou stránku, aby jste viděli, jak toto funguje)

Flashová komponenta v sobě bude mít tento kód:

Tuto komponentu budeme ovládat neviditelnými tlačítky, které budou její součástí! Nyní vytvořte neviditelná tlačítka (symboly tlačítka jen s hit area). Umístěte je nad názvy sekcí. Vrstva s tlačítky bude v celé komponentě neměnná!

Ukončíme práci na komponentě a vrátíme se zpět do Flash Builderu.

Nyní si vytvoříme jednotlivé stavy:

  • uvod (tento stav již máme, stačí nám přejmenovat stav1)
  • druhy
  • historie
  • galerie
  • odkazy

Nový stav bude vždy duplikát původního stavu. Takto:

Nastavíme, aby se záhlaví ve všech stavech ukazovalo na vrcholu stránky a zarovnávalo se ke středu okna prohlížeče:

Nyní vytvoříme obsah pro jednotlivé stavy.

ÚVOD:

Do úvodu vložíme text pomocí komponenty „TextInput“. Vytáhneme ji z panelu komponent na scénu, pak upravíme její vlastnosti:

  • In states: Úvod
  • Text: (tady bude samotný zobrazený text - až se vám načte do rámečku v design módu, jde upravovat/odřádkovat enterem)
  • Text - arial - 14 - barva
  • Content Background: Color (barva pozadí)
  • Border: (rámeček) - visible (viditelný), color (barva)
  • Padding: (vzdálenost textu od okraje rámečku = odsazení textu), vlevo, vpravo, nahoře, dole
  • Size and Position: (velikost a pozice) - opět nastavíme zarovnávání na střed a konstantní pozici vzhledem k oknu prohlížeče.

V Source módu bude obsah stavu „uvod“ vypadat takto:

DRUHY:

Do stavu „druhy“ vložíme komponentu „viewStack“, která bude ovládaná LinkBarem.

Tato komponenta bude mít tři kontejnery - Tmavá čokoláda, Mléčná čokoláda, Bílá čokoláda

V každém kontejneru bude obrázek.

To nastavte podle návodu v předchozí lekci http://patf-biokyb.lf1.cuni.cz/wiki/vyuka/flash_builder_iv

HISTORIE:

Do historie vložte text pomocí komponenty „TextInput“

GALERIE:

Vytvořte galerii pomocí komponent „ViewStack“ a „Linkbar“

ODKAZY:

přidejte obrázek s odkazem, podle návodu v lekci:

http://patf-biokyb.lf1.cuni.cz/wiki/vyuka/flash_builder_iv

OVLÁDÁNÍ ZÁHLAVÍ WEBU:

Záhlaví budeme ovládat pomocí kódu ve FlashBuilderu. Při inicializaci(spuštění) aplikace přiřadíme tlačítkům uvnitř flashové komponenty posluchače kliknutí myši.

Nejprve vytvoříme funkci, která se provede při spuštění celé aplikace v prohlížeči (creation Complete) jako zde http://patf-biokyb.lf1.cuni.cz/wiki/vyuka/flash_builder_vi

Pojmenujeme naši flashovou komponentu „zahlavi“:

Vrátíme se do sourcemódu a přidáme tlačítkům uvnitř záhlaví posluchače kliknutí myši, těmto posluchačům doplníme i funkce, které spouštějí:

Po kliknutí se nám nyní komponenta záhlaví přesune na přechod (zobrazí se animace a pak se záhlaví zastaví v příslušném stavu). Naším cílem je, aby se aplikace na další stránku (stav) přesunula až po přehrání celé animace přechodu. Tzn. zatím je přehrávána jen animace v záhlaví. Teď přidáme posluchače událostí, které se nám generují v komponentě záhlaví. Jakmile se vygeneruje událost na konci přechodové animace, posluchač v aplikaci ji zachytí a přepne aplikaci na další stranu.

Nyní se nám na kliknutí spustí animace záhlaví a po jejím dokončení se stránka přepne.

Úkoly opět nahrajte na http://hollarka.host22.com

Výsledný projekt:

http://hollarka.host22.com/VYUKA/FB_16032012/cokolada/cokoladaProjekt.html

vyuka/vos3l_-_ukol_5.txt · Poslední úprava: 2012/03/16 16:05 autor: verca