Začínáme s Flash MX 2004 – 12. díl - lupa

V části, věnované úvodu do kreslení ve Flashi, jsme si vyzkoušeli, jak lze využít efektu masky. V dnešním díle si ukážeme další možnost, jak masku použít, tentokrát však pro její vytvoření použijeme pouze příkazů Action Scriptu.

Vytvoření lupy

Výsledkem bude efekt lupy, kterou budeme zvětšovat obrázek, v našem případě se bude jednat o mapu ČR.

Nejdříve vytvoříme MC mapa, zvolíme z hlavního menu: „Insert - New Symbol“ a vytvoříme MC.

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

Obr. 1

Do nového MC importujeme zvolením „File - Import - Import to Stage“ obrázek mapy, který si můžete stáhnout zde. Vložíme mapu na scénu a pojmenujeme její instanci na panelu vlastností „Properties“ například „mapa“.

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

Obr. 2

Pomocí panelu „Transform“ změníme velikost objektu na 70 %.

Dále vytvoříme další prázdný MC, který pojmenujeme „lupa“.

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

Obr. 3

Zvolíme „File - Import to Stage“ a do MC „lupa“ vložíme soubor, který obsahuje objekt samotné lupy. Tento soubor si můžete stáhnout zde. Protože potřebujeme vytvořit další objekt z čočky lupy, musíme lupu rozdělit na jednotlivé části. Klikneme tedy pravým tlačítkem na lupu a zvolíme „Break Apart“.

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

Obr. 4

Nyní už můžeme kliknout pravým tlačítkem myši na střed lupy a zvolením „Convert to Symbol“ vytvoříme objekt čočky. Zvolíme panel vlastností „Properties“ a pojmenujeme instanci objektu „cocka“.

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

Obr. 5

Tento objekt bude sloužit jako maska, skrz kterou uvidíme zvětšeninu mapy, nad kterou se budeme pohybovat. Protože je ale maska neviditelná, bylo by dobré, abychom ještě vytvořili čočku, která bude nad zvětšeným obrazem.

Vytvoříme tedy v MC další vrstvu, do které nakreslíme čočku, výplň zvolíme radiální, s bílo-modrým přechodem a s průhledností „Alpha“ 10% - 20%.

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

Obr. 6

Vložíme objekt lupy na hlavní scénu a zmenšíme jej na 50%.

Pojmenujeme instanci objektu lupy na panelu vlastností jako „lupa“.

Action Script

Klikneme na první snímek osy hlavní scény, otevřeme si panel akcí a napíšeme do něj následující script:

mapa.duplicateMovieClip("mapa2", 1);
mapa2._xscale = 100;
mapa2._yscale = 100;
mapa.onEnterFrame = function() {
  if (lupa.hitTest(mapa)) {
    mapa2._visible = true;
    mapa2.setMask(lupa.cocka);
  } else {
    mapa2.setMask(null);
    mapa2._visible = false;
  }
};

První příkaz je nám už známý, pomocí něho vytvoříme kopii mapy a vložíme ji do úrovně 1. Následně zvětšíme kopii mapy na 100% její velikosti. Tato kopie bude sloužit jako maskovaný objekt.

Funkci maskování budeme chtít vyvolat, když najedeme lupou na objekt malé mapy. Testujeme tedy pomocí funkce, která se neustále vyhodnocuje (onEnterFarme), jestli se dotýká MC „lupa“ s klipem malé mapy „mapa“. Pokud ano, použijeme metodu „setMask“, která má dva parametry.

Prvním je název instance objektu, který chceme maskovat, v našem případě se jedná MC „mapa2“. druhým parametrem je instance objektu, který chceme použít jako masku, v našem případě se jedná o objekt čočky „cocka“, který je umístěn v klipu „lupa“.

Pokud s objektem lupy odjedeme z malé mapky, chceme zrušit maskování. Co by se ale stalo, kdybychom v scriptu nepoužili výraz „mapa2._visible = false;“? Jakmile totiž pomocí metody „setMask(null);“ zrušíme maskování, objeví se nám původně schovaný maskovaný objekt. Abychom tomu zabránili, použije příkaz, který objekt schová.

K dokončení nám zbývá už jenom doplnit několik řádků AS pro lupu. Zvolíme tedy objekt lupy a na panelu akcí napíšeme tento script:

onClipEvent (load) {
  this.swapDepths(10);
}
on (press) {
  startDrag(this);
}
on (release) {
  stopDrag();
}

První část scriptu říká, že ihned po načtení objektu jej přesuneme do úrovně 10. Bude tedy nad všemi klipy na scéně a lupa tak nebude překrytá mapkami. Další části scriptu nám jsou již známé z minulého dílu a říkají, že při kliknutí na tento objekt se začne přetahovat a při uvolnění tlačítka myši, objekt na místě upustíme.

Ve funkci, která testuje dotyk dvou klipů se samozřejmě nabízí různé úpravy. Můžeme testovat kolizi pouze čočky lupy, pak bude ve scriptu opravena první část podmínky na „ ... if (lupa.cocka.hitTest(mapa)) { ... „ .

Jako další možnost se nabízí hlídání dotyku čočky lupy s velkou mapou. V tomto případě bude první podmínka upravena na „ ... if (lupa.cocka.hitTest(mapa2)) { ... „. V tomto případě ale bude lupa zvětšovat i v okamžiku, kdy s ní nejsme na objektu malé mapky. Na druhou stranu zase docílíme toho, že se velký náhled mapky zobrazí plynule a „nenaskočí“ do objektu čočky najednou.

Úplně poslední a vlastně nejjednodušší řešení masky, by představoval script bez jakéhokoliv testování dotyku a změny maskování. Místo celé funkce by bylo pouze:

„mapa2.setMask(lupa.cocka);“

Maskování by tak probíhalo neustále, bez dalšího vyhodnocování polohy čočky.

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

Diskuze (7) Další článek: MSI MegaBook S250: Robustní konstrukce a skvělý displej

Témata článku: Software, Programování, Flash, Dokončené dílo, Výsledné dílo, První příkaz, První funkce, Convert, Malá část, Díl, Stage, První parametr, Malý objekt, První případ, Hlavní funkce, Import, Lupa


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



Aktuální číslo časopisu Computer

Velký test autokamer

Test ATX skříní

Jak surfovat pohodlně

Sportovní aplikace

Jak funguje procesor