Začínáme s Flash MX 2004 – 15. díl – prezentační stránka, 2. díl

Dnes využijeme preloaderu z předchozích dílů a začleníme jej do naší stránky. Díky dalším zkušenostem s maskou a duplikováním objektů vytvoříme také zajímavý efekt v menu prezentace.

Preloader

Otevřeme si zdrojový soubor z minulého dílu. Abychom mohli vložit preloader, je nutné umístit stávající objekty do snímku číslo 2, aby byl volný první snímek pro preloader. Nejdříve odemkneme případně zamčené vrstvy - kliknutím na symbol zámku ve vrstvě. Pak klikneme na klíčový snímek jedné vrstvy a tažením myši jej přesuneme do dalšího políčka. Takto posuneme klíčové snímky ve všech třech vrstvách.

Klepněte pro větší obrázek

Obr. 1

Pro větší přehlednost si vytvoříme vrstvu, do které budeme psát AS. Vrstvu pojmenujeme, klikneme pravým tlačítkem na druhý snímek této vrstvy a zvolíme „Insert Keyframe“. Abychom zajistili, že se animace zastaví hned na prvním snímku, klineme na první snímek vrstvy pro AS a na panelu akcí vložíme příkaz:

stop();

Ten nám zaručí, že se zde přehrávání zastaví, dokud nedáme pomocí preloaderu příkaz pro pokračování. Stejný příkaz vložíme do druhého snímku vrstvy.

Otevřeme si zdrojový soubor z 10. dílu, kde jsme vytvořili preloader. Klikneme myší na objekt reloaderu na scéně a pomocí CTRL+C jej zkopírujeme do schránky.

Vrátíme se k naší rozpracované webové stránce a opět kvůli větší přehlednosti vytvoříme další vrstvu, kterou pojmenujeme „Preloader“.

Klepněte pro větší obrázek

Obr. 2

Klineme na první snímek vrstvy pro preloader s pomocí STRCL+SHIFT+V (tímto trojhmatem vložíme objekt přesně na stejné místo, odkud jsme jej kopírovali) vložíme objekt preloaderu.. Protože ale chceme, aby se preloader objevil pouze na prvním snímku, musíme zrušit jeho zobrazení na snímku číslo dva. Klikneme tedy pravým tlačítkem myši na snímek číslo 2 vrstvy s preloaderem a zvolíme „Remove Frames“.

Klepněte pro větší obrázek

Obr. 3

Nyní upravíme kód na objektu preloaderu. Klikneme v prvním snímku na objekt preloaderu a otevřeme si panel akcí a podmínku:

if (procent ==100) {
    _root.gotoAndStop(2);
  }

změníme na:

if (celkem == nahrano) {
    _root.gotoAndStop(2);
  }

Dynamické pozadí menu

V knihovně symbolů najdeme objekt horního menu a otevřeme si jej. Protože budeme chtít vytvořit dynamické pozadí, které bude obsahovat masku, potřebujeme vytvořit další dvě vrstvy, přičemž první vrstva bude obsahovat maskovaný obrázek a druhá vrstva bude obsahovat samotnou masku. Nově vytvořené vrstvy přesuneme nad vrstvu pozadí.a obě nové vrstvy také pojmenujeme.

Klepněte pro větší obrázek

Obr. 4

Do spodní nové vrstvy vložíme pomocí „File - Import - Import to Stage“ obrázek pozadí, který si můžete stáhnout zde. Obrázek po vložení zarovnáme na střed. Vzhledem k tomu, že se jedná o GIF obrázek, automaticky se nám při exportu nastaví bezeztrátová komprese.

To ale zbytečně zvětší velikost výsledného swf souboru. Kdybychom to takto nechali, bude výsledná velikost cca 32 kB. To je zbytečně velký luxus, zvlášť když z vloženého obrázku bude vidět jen část pod maskou.

Proto si otevřeme knihovnu symbolů a klikneme pravým tlačítkem na objekt vloženého obrázku, v našem případě se jedná o „01“. Z nabídky zvolíme „Properties“. Zobrazilo se nám okno, ve kterém máme možnost nastavit typ a velikost komprese („Compression“).

Pokud zvolíme „Losseless..“ dosáhneme nejlepšího výsledku ale největšího souboru. Proto je vhodné použít jpg kompresi u které, po odškrtnutí tlačítka „Use document default quality“, můžeme určit stupeň. Nám ale stačí, když zůstane tlačítko zaškrtnuté a použije se tak výchozí nastavení komprese při exportu.

Klikneme nyní na vrchní vrstvu, která bude tvořit masku a nakreslíme v ní obdélník, který bude vysoký minimálně jako je výška vloženého obrázku a široký bude o něco více než je jedno písmeno položky menu. Dvojklikem vybereme nakreslený obdélník včetně jeho okraje, klineme na něj pravým tlačítkem myši a zvolíme „Convert to Symbol“. Nový objekt, který bude sloužit jako část masky, pojmenujeme na panelu vlastností „m1“.

Klepněte pro větší obrázek

Obr. 5

Opět klikneme pravým tlačítkem myši na objekt obdélníka a zvolíme „Convert to Symbol“. Objekt nazveme „maska“ a stejný název napíšeme na panelu vlastností do pole „Instance Name“.

Klepněte pro větší obrázek

Obr. 6

Jak bude maska fungovat?

Budeme chtít vytvořit z obdélníka několik dalších objektů, které budou sledovat s určitým zpožděním kurzor myši. Tyto objekty budou tvořit masku, která tak bude odkrývat vložený maskovaný obrázek menu. Dále budeme chtít, aby maska reagovala pouze při najetí myši na horní menu a při jeho opuštění, aby se objekty pomalu seřadily za první objekt.

Vzhledem k tomu, že ve vrstvě masky může být pouze jeden objekt, vložili jsme obdélník do dalšího MC, který jsme nazvali maska. Pak už je jedno, kolik objektů máme v MC „maska“, hlavní je, že je jen jeden objekt v maskovací vrstvě a tím je právě MC „maska“.

Klepněte pro větší obrázek

Obr. 7

Nyní v MC „menu“ vytvoříme další vrstvu a do prvního snímku nové vrstvy umístíme následující AS:

maska.m1.num = 1;
x = 2;
do {
  maska.m1.duplicateMovieClip("m"+x, x);
  eval("maska.m"+x).num = x;
  eval("maska.m"+x)._xscale = 100/x;
  x++;
} while (x<10);

Tento script vytvoří 9 kopií objektu „m1“, který máme vložený v objektu „maska“. Chceme, aby si každý objekt uchoval v proměnné své číslo a dále pak chceme, aby byla každá kopie o něco užší než předchozí.

Pokud máme napsáno, budeme potřebovat vložit script pro objekt „m1“. de stačí, že je script jen na tomto objektu, protože každá jeho kopie automaticky „dědí“ jeho vlastnosti i případné scripty.

Otevřeme si tedy objekt „maska“ (dvojklikem na obdélník, pokud jsme v MC „menu“) a klikneme na objekt obdélníka pojmenovaný „m1“. Otevřeme si panel akcí a napíšeme následující kód:

onClipEvent (enterFrame) {
  //testování jestli jsme s myší na objektu horního menu
  if (this._parent._parent.hitTest(_root._xmouse, _root._ymouse, true)) {
    //testování zdali je toto první objekt menu
    if (num == 1) {
      //pokud ano, určíme rozdíl mezi myší a objektem, vydělíme 3 a
//určíme novou polohu
      goto = this._x+this._xmouse;
      rozdil = this._xmouse;
      this._x = this._x+rozdil/3;
    } else {
    //pokud se nejedná o první objekt, vyhodnocujeme polohu vzhledem k
//předchozímu objektu
      predchozi = num-1;
      goto = eval("this._parent.m"+predchozi)._x;
      rozdil = goto-this._x;
      this._x = this._x+rozdil/3;
    }
  } else if (num != 1) {
    //pokud nejsme s myší na horním menu, necháme dojet
// zbytek objektů masky
    predchozi = num-1;
    goto = eval("this._parent.m"+predchozi)._x;
    rozdil = goto-this._x;
    this._x = this._x+rozdil/3;
  }
}

Pro konečný efekt masky otevřeme MC „menu“, klikneme pravým tlačítkem myši vrstvu s objektem masky a z nabídky zvolíme „Mask“.

A máme hotovo. V příštím díle si představíme načítání externích dat, abychom nemuseli při každé změně v textu znovu generovat celý swf soubor.

Zdrojový soubor ukázky ke stažení zde, výsledek si můžete prohlédnout zde.

Diskuze (9) Další článek: Ke stažení: Nové Nero, WinAmp a Skype

Témata článku: Software, Programování, Flash, Díl, Snímek, Menu, Výsledné dílo, První snímek, Pravé tlačítko, Convert, Největší soubor, Stránka, Remove, První objekt, Klíčový snímek, Klíčová vlastnost, Str, Druhá vrstva, Stejný příkaz, První vrstva, Velký luxus, Stage


Určitě si přečtěte

Nejlepší notebooky do 10 000 korun: Co koupit a čemu se raději vyhnout

Nejlepší notebooky do 10 000 korun: Co koupit a čemu se raději vyhnout

** Do deseti tisíc korun lze dnes koupit slušné notebooky ** V nabídce ale i tak převládají zastaralé a pomalé modely ** Poradíme, jak dobře vybrat i s omezeným rozpočtem

David Polesný | 116

Koupili jsme nejlevnější dron s kamerou. Stál nás 300 Kč a má rozměry kreditky

Koupili jsme nejlevnější dron s kamerou. Stál nás 300 Kč a má rozměry kreditky

** Kvalitní drony začínají na 10 000 Kč ** Šli jsme na to jinak a koupili ten nejlevnější s kamerou ** I když je to čínský šmejd, je s ním zábava

Jakub Čížek | 34

Měření rychlosti internetu: Populární Speedtest.net neřekne o skutečné rychlosti internetu téměř nic

Měření rychlosti internetu: Populární Speedtest.net neřekne o skutečné rychlosti internetu téměř nic

** Speedtest stále častěji měří jen rychlost na poslední míli ** Ta však ale neodpovídá reálnému surfování ** Jak se tedy pokusit změřit tu skutečnou?

Jakub Čížek | 85



Aktuální číslo časopisu Computer

Megatest 12 bezdrátových sluchátek

Vyplatí se Apple z bazaru?

Test batohů pro notebooky

Vybíráme nejlepší sportovní hodinky