Macromedia Flash - posun pozadí - Grafika.cz - vše o počítačové grafice

18. září 2001, 00.00 | Máte rozměrný obrázek, který byste rádi použili jako pozadí do Flashe, ale animace větší rozměry mít nesmí? Podívejme se
jak pohybovat pozadím pomocí tlačítek a podmínkových akcí.

Tento tutoriál procvičuje deklaraci proměnných, změnu jejich hodnot, ale také stanovení a nastavení podmínkových akcí.

1. Začínáme jako obvykle nastavením velikosti plochy, dnes to bude 300 x 300 px.

2. Vytvoříme si nový MC (Movie Clip), pojmenujeme jej pozadi (v paletce Instance). Do tohoto MC vložíme připravený obrázek a pomocí paletky Align jej vyrovnáme na střed plochy. Tím naše práce v tomto MC skončila.

3. MC pozadi vložíme na hlavní plochu a posuneme jej někam stranou, prozatím jej nebudeme přesně usazovat.

4. V nové vrstvě si vytvoříme libovolné tlačítko. (Jestliže chcete mít tlačítko shodné jako v ukázce, nakreslete si čtverec, vložte do knihovny jako Button, kde ve stavu tlačítka Up, bude výplň s průhledností Alha = 0 (nastavujeme v paletce Mixer) a ve stavu Down bude Alpha = 10%.)

5. Vložíme na plochu tolik instancí tlačítka, kolikrát budeme pozadím pohybovat. Akce k tlačítkům přidáme až nakonec.

6. Usadíme MC pozadi na místo, ze kterého bude startovat. V ukázce je posazen mimo plochu.

7. Po jeho usazení, pravým klikem myši začneme vkládat akce a tvořit ovladače:

// Událost klipu když se instance objeví poprvé
onClipEvent (load) {

    // Vytvoření proměnné, která bude určovat novou pozici klipu,
    // prázdná hodnota nechává klip na místě které jsme nastavili na ploše
    _root.novaPoziceX = "";
    _root.novaPoziceY = "";
}

// Událost klipu je prováděna na každém snímku
onClipEvent (enterFrame) {

    // Zadání aktuální x-ové a y-ové pozice klipu
    aktualniPoziceX = getProperty(_root.pozadi, _x);
    aktualniPoziceY = getProperty(_root.pozadi, _y);

    // Jestliže je x-ová nová pozice menší než x-ová aktuální pozice
    if (_root.novaPoziceX < aktualniPoziceX) {

       // Nastavíme proměnnou, která zjistí rozdíl mezi pozicemi
       vzdalenostX = aktualniPoziceX - _root.novaPoziceX;

       // A nastavíme x-ovou pozici klipu
       // Kdybychom pouze odečetli hodnoty aktualniPozice a vzdálenosti,
       // klip by na tuto pozici skočil, ale tím, že vzdálenost vynásobíme
       // desetinným číslem, docílíme jeho pomalého dojezdu
       setProperty ("_root.pozadi", _x, aktualniPoziceX - (vzdalenostX * 0.2));
    }

    // Jestliže je x-ová nová pozice větší než x-ová aktuální pozice
    if (_root.novaPoziceX > aktualniPoziceX) {

       // Nastavíme proměnnou, která zjistí rozdíl mezi pozicemi
       vzdalenostX = _root.novaPoziceX - aktualniPoziceX;

       // A nastavíme x-ovou pozici klipu
       // Rychlost dojezdu nastavíme jako výše
       setProperty ("_root.pozadi", _x, aktualniPoziceX + (vzdalenostX * 0.2));
    }

    // Jestliže je y-ová nová pozice menší než y-ová aktuální pozice
    if (_root.novaPoziceY < aktualniPoziceY) {

       // Nastavíme proměnnou, která zjistí rozdíl mezi pozicemi
       vzdalenostY = aktualniPoziceY - _root.novaPoziceY;

       // A nastavíme y-ovou pozici klipu
       // Rychlost dojezdu nastavíme jako výše
       setProperty ("_root.pozadi", _y, aktualniPoziceY - (vzdalenostY * 0.2));
    }

    // Jestliže je y-ová nová pozice větší než y-ová aktuální pozice
    if (_root.novaPoziceY > aktualniPoziceY) {

       // Nastavíme proměnnou, která zjistí rozdíl mezi pozicemi
       vzdalenostY = _root.novaPoziceY - aktualniPoziceY;

       // A nastavíme y-ovou pozici klipu
       // Rychlost dojezdu nastavíme jako výše
       setProperty ("_root.pozadi", _y, aktualniPoziceY + (vzdalenostY * 0.2));
    }
}

8. Nakonec přiřadíme akce tlačítkům, začneme akcí na levém horním tlačítku, která vlastně nastavuje hodnoty x-ových a y-ových souřadnic. Pozor, nastavujeme pozici středového bodu obrázku k levému hornímu rohu plochy.

on (release) {
    novaPoziceX = 450;
    novaPoziceY = 450;
}

9. Následující obrázek je vlastně tabulka, která znázorňuje x-ové a y-ové hodnoty, přiřazené k jednotlivým tlačítkům v ukázce. Plocha má velikost 300x300 px a obrázek na pozadí 900x900 px.

Nakonec ještě ZDROJOVÝ SOUBOR.