Začínáme s Flash MX 2004 – 10. díl – Preloader

Preloader by měl patřit ke každé větší flashové animaci. Jeho účelem je informovat o stavu načítání celé animace a její následné spuštění. V dnešním díle si ukážeme, jak se takový preloader dělá.

Proč preloader?

Pokud vstoupíme na webovou stránku s flashovou animací, začne se stahovat příslušný swf soubor. Pokud ale uživatel začne provádět akce v neúplně nahraném souboru, může se dočkat nepříjemného překvapení, v podobě nedostupnosti některých funkcí či objektů, které se ještě nestihly načíst.

Preloader by měl zajistit, že se animace začne přehrávat až ve chvíli, kdy je celá kompletně stažená.

Preloader by měl být co nejjednodušší, se základními informacemi o tom, co se právě děje a o stavu nahrávacího procesu. Měli bychom se vyvarovat preloaderů, které jsou zbytečně rozsáhlé a náročné na data. Rozumný jednoduchý preloader se musí vejít do velikosti 1KB.

Jak preloader funguje?

Jedná se o MovieClip (MC), umístěný na prvním snímku osy, který neustále vyhodnocuje velikost již stažených dat a podle jejich hodnoty zobrazuje příslušné informace. Jakmile dojde k načtení celé animace, zajistíme jednoduchým příkazem postup na další snímek osy.

Vytvoření preloaderu

Preloader, který si vytvoříme, jste už určitě mnohokrát viděli. Vytvoříme objekt, který bude zobrazovat aktuální velikost staženého souboru v procentech a tato hodnota bude graficky znázorněna na malém obdélníku.

Nejdříve si připravíme výplň objektu na panelu „Color Mixer“. Jako typ zvolíme „Linear“ a vytvoříme přechod, který je na okrajích černý a uprostřed bílý.

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

Obr. 1

Zvolíme nástroj pro kreslení obdélníků „Rectangle Tool“ a otevřeme si panel vlastností „Properties“. Zde zvolíme barvu a typ ohraničení objektu.

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

Obr. 2

Nakreslíme úzký obdélník

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

Obr. 3

My ale chceme, aby byla výplň otočená. Změnu tvaru výplně provedeme nástrojem „Fill Transform Tool“.

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

Obr. 4

Zvolíme tento nástroj, klikneme na výplň, myší najedeme k pravému hornímu rohu objektu k symbolu kolečka, až se objeví místo kurzoru kruh ze šipek. Nyní můžeme tažením myší otočit výplň o 90 stupňů zpět.

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

Obr. 5

Dále najedeme myší na čtverec, který se nachází na stejné úsečce, jako je kolečko a zmenšíme výplň až na okraj objektu.

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

Obr. 6

Vytvoření objektů

Klikneme pravým tlačítkem myši na výplň a z menu zvolíme „Convert to Symbol“.

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

Obr. 7

Pojmenujeme MC jako „preloadbar“

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

Obr. 8

Otevřeme si panel vlastností „Properties“ a pojmenujeme instanci objektu opět „preloadbar“.

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

Obr. 9

Máme tak vytvořen MC, který budeme roztahovat, podle toho, kolik procent z animace máme načteno.

Aby objekt správně měnil své rozměry, musíme posunout jeho registrační bod. Tento bod ukotvuje objekt k danému místu, od kterého se provádí změna velikosti. Defaultně je bod umístěn uprostřed nových klipů. Při animaci změny velikosti se tak MC roztahuje na každou stranu souměrně.

My ale chceme, aby se objekt roztahoval zleva doprava, proto tento bod posuneme nalevo. Zvolíme nástroj „Free Transform Tool“.

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

Obr. 10

Klikneme na objekt výplně, všimneme si malého kolečka uprostřed objektu,

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

Obr. 11

které posuneme do levého horního rohu.

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

Obr. 12

Pro snazší umisťování, můžeme zaškrtnout volbu přichytávání k objektům, která se zobrazí, když klikneme prvým tlačítkem myši někde na ploše dokumentu.

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

Obr. 13

Dynamické textové pole

Dále si vytvoříme textové pole, které bude zobrazovat informace o načtených datech. Zvolíme nástroj „Text Tool“.

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

Obr. 14

Pomocí něho na ploše vytáhneme obdélník textového pole.

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

Obr. 15

Otevřeme si panel vlastností „Properties“, zvolíme typ pole na „Dynamic Text“ a pojmenujeme jej jako „preloadstatus“. Tímto jsme vytvořili instanci objektu textového pole, do které budeme moci později vkládat text.

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

Obr. 16

Nyní zvolíme nástroj pro výběr objektů „Selection Tool“, vybereme celou skupinu nakreslených objektů a vytvoříme z ní nový objekt.

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

Obr. 17

Objekt třeba pojmenujeme preloader.

Nyní vytvoříme druhý, prázdný klíčový snímek na časové ose. Klikneme pravým tlačítkem myši na druhý snímek osy a zvolíme „Insert Blank Keyframe“.

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

Obr. 18

Do tohoto druhého snímku vložíme objekt, který zabere hodně místa, nejlépe fotografii. Zvolíme z hlavního menu: „File - Import - Import to Stage“ a vybereme obrázek.

ActionScript

Aby nám celý preloader fungoval, musíme nejprve zastavit přehrávání hned na prvním snímku. Klikneme tedy na první snímek a otevřeme panel akcí, kde napíšeme příkaz:

stop();

Ten znamená, že se zde animace zastaví. Stejný příkaz vložíme i do druhého snímku.

Nyní už zbývá poslední a nejdůležitější část kódu. Na hlavní scéně klikneme na objekt preloaderu a otevřeme si panel akcí, kde přiřadíme objektu následující funkce:

onClipEvent (load) {
  preloadbar._xscale = 0;
}
onClipEvent (enterFrame) {
  celkem = _root.getBytesTotal();
  nahrano = _root.getBytesLoaded();
  procNahrano = nahrano/(celkem/100);
  procent = Math.round(procNahrano);
  preloadstatus.text = "Již bylo staženo: "+procent+"% z animace.";
  preloadbar._xscale = procNahrano;
  if (procent == 100) {
    _root.gotoAndStop(2);
  }
}

První výraz „onClipEvent (load)“ určuje, co se provede ihned po načtení tohoto objektu. My jsme do hranatých závorek napsali, že objekt, který je vložen v tomto MC a je pojmenován „preloadbar“ bude mít šířku 0 procent (vlastnost _xscale určuje šířku v procentech ve směru x-ové souřadnice).

Druhý výraz „onClipEvent (enterFrame)“ určuje, co se bude provádět neustále. My v této části využijeme metody „getBytesTotal()“, která umožňuje zjistit celkovou velikost objektu. V našem případě jsme ji využili pro zjištění velikosti celé animace. Druhá metoda „getBytesLoaded()“ umožňuje získat aktuální velikost načtených bytů objektu.

Z těchto hodnot určíme pomocí proměnné procnahrano, kolik procent je již staženo. Pro použití v textu ji zaokrouhlíme pomocí metody „round“ z třídy „Math“ a vložíme do proměnné „procent“.

Pro zobrazení textu v dynamickém textovém poli použijeme příkaz „preloadstatus.text=“, který říká, jaký text má být v textovém poli s názvem „preloadstatus“.

Dynamickou změnu velikosti obdélníku provedeme příkazem „preloadbar._xscale=“, který určuje, jak má být objekt široký. Vzhledem k tomu, že proměnná „procNahrano“ není zaokrouhlena, bude změna velikosti plynulejší.

A posledním příkazem je podmínka, která testuje hodnotu načtených procent. Pokud jsme již stáhli celý soubor, můžeme zobrazit animaci na snímku 2 hlavní osy.

Chceme-li otestovat výsledek, stisknutím CTRL+Enter, se dostaneme do okna přehrávače, ve kterém máme, mimo jiné, možnost zobrazit, jak by se teoreticky mohla animace načítat při různém druhu připojení. Toto nastavení si zvolíme v horním menu: „View - Download Settings“ a pak zvolením „View - Simulate Download“ můžeme sledovat, jak by se animace nahrávala při daném typu připojení.

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

Obr. 19

Simulace připojení je čistě teoretická, v reálu to vypadá často jinak, ale pro hrubé testování je tato funkce užitečná.

Poznámka: Pozor na psaní proměnných, názvů objektů a různých výrazů ActionScriptu. Názvy proměnných a instancí objektů nesmí začínat na číslovky a další speciální znaky, proto je raději pojmenovávejte písmeny. Druhé pravidlo ActionScriptu je, že rozlišuje velká a malá písmena. Takže „promA“ není totožná s názvem proměnné „proma“. Jedná se o dvě různé proměnné!

Zdrojový soubor ukázky ke stažení zde.

Diskuze (15) Další článek: Nová verze Kerio MailServeru opravuje bezpečnostní chyby

Témata článku: Software, Programování, Flash, Stejný příkaz, Mixer, Malý objekt, Nepříjemné překvapení, Convert, Textové pole, Promo, Ctrl + Enter, Stage, Nepříjemná vlastnost, Hlavní pole, Díl, První snímek, Nový klip, Druhý typ, Software na Heureka.cz



Sex manželských párů? Jen výjimečně. Ložnice ovládnou roboti s umělou inteligencí

Sex manželských párů? Jen výjimečně. Ložnice ovládnou roboti s umělou inteligencí

** Sex manželských párů jen při zvláštních příležitostech. ** Ložnice ovládnou sexuální roboti s umělou inteligencí. ** I to je jeden ze závěrů Mezinárodní robotické konference.

Filip KůželJiří Liebreich
RobotiSexUmělá inteligence
Jak poznat, že máte možná hacknutý telefon? Toto je devět symptomů, které můžete pozorovat

Jak poznat, že máte možná hacknutý telefon? Toto je devět symptomů, které můžete pozorovat

** Jak poznat, že je váš smartphone hacknutý? ** Hledejte známky po nestandardním chování telefonu ** Stačí když telefon vydrží méně nebo topí i v klidovém režimu...

Martin Chroust
Jak...Malware
Sociální síť BeReal jde proti proudu. Žádné filtry a přetvařování, tohle má být čistá realita

Sociální síť BeReal jde proti proudu. Žádné filtry a přetvařování, tohle má být čistá realita

** BeReal je novou hvězdou mezi sociálními sítěmi ** Ukazuje pouze všední realitu běžných dní ** Aplikace vám jednou denně dá dvě minuty na poslání vlastní fotky

Martin Chroust
BeRealMobilní aplikaceSociální sítě
Recenze cykloradaru Garmin Varia RCT715. Bílé dodávky, všechny si vás natočím

Recenze cykloradaru Garmin Varia RCT715. Bílé dodávky, všechny si vás natočím

** Garmin do svého stále unikátního cykloradaru přidal kameru ** Snímá a ukládá, co se při jízdě děje za sedlem ** Kromě toho je to jedna z nejsilnějších svítilen na kolo

Marek Lutonský
Testy
Němci vyrobili telefon odříznutý od Googlu. V multibootu je na výběr Volla OS nebo několik distribucí Linuxu

Němci vyrobili telefon odříznutý od Googlu. V multibootu je na výběr Volla OS nebo několik distribucí Linuxu

** Volla Phone 22 je kompletně odříznutý od Googlu ** Unikátní funkcí je multiboot. Vyberete si systém, jaký chcete ** A dost nečekaným příadavkem je vyměnitelná baterie

Martin Chroust
Bez GoogluLinuxSmartphony