reklama

Umíme ve Flashi – 3. díl – novinky verze 8, dokončení

Nová třída BitmapData v sobě skrývá obrovský potenciál využití. Dnes nakoukneme pod pokličku této významné třídy a ukážeme si zajímavou metodu, která umožňuje kopírovat obrázky pixel po pixelu.

Nová třída BitmapData

Tato třída se svými metodami a funkcemi přináší do flashových animací opravdovou revoluci. Už jen tím, že díky ní máme možnost významně snížit zatížení procesoru, když vektorové objekty překreslíme do jejich bitmapové reprezentace.

Všechny metody, které s sebou tato třída přináší, si teď vysvětlovat nebudeme, zaměříme se pouze na jednu, nazvanou „copyPixels“. Jak již název napovídá, umožňuje nám kopírovat pixely. Jedná se o vynikající metodu, díky níž můžeme velice snadno „rozřezat“ obrazovou předlohu na menší kousky, vložit je do klipů a dále s nimi pracovat.

Předlohou může být jak rastrový tak vektorový obrázek, přímo vytvořený v prostředí Flashe. Navíc zde můžeme aplikovat průhlednou masku, pomocí které určíme okraje kopírované oblasti pomocí průhledného objektu.

Popis metody copyPixels

Jak již bylo řečeno, tato metoda umožňuje kopírování zdrojového obrázku pixel po pixelu. Samozřejmě, že má i své parametry, na které se nyní podíváme podrobněji:

  • sourceBitmap – zdrojová bitmapa, ze které budeme kopírovat. Tento objekt musí být instancí třídy BitmapData (flash.display.BitmapData)
  • sourceRect – čtyřúhelník, který vymezuje kopírovanou oblast zdrojové bitmapy
  • destPoint – bod, určující umístění vytvořené kopie v cílovém objektu
  • alphaBitmap – objekt, který tvoří masku průhlednosti
  • alphaPoint – levý horní roh umístění objektu pro vytvoření průhledné masky
  • mergeAlpha – hodnota true nebo false. Určíme, zdali bude průhlednost ovlivněna objektem průhledné masky

Příprava objektů

Vyzkoušíme si nyní, jakým způsobem lze novu metodu využít. Na scénu si vložíme fotku, ze které budeme postupně „vyřezávat“ myší čtyřúhelníky a výsledné objekty budeme moci různě poskládat po ploše.

Vložíme si tedy na scénu nějakou fotografii, nebo obrázek (ke stažení zde). Vložený obrázek převedeme na MC (klikneme na něj pravým tlačítkem myši a vybereme „Convert to Symbol“) a objekt zarovnáme do levého horního rohu scény.

Otevřeme si knihovnu symbolů a klikneme pravým tlačítkem na vložený objekt obrázek. Z menu zvolíme „Linkage“:

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

V zobrazeném okně zaškrtneme „Export for ActionScript“ a do pole „Identifier“ napíšeme název objektu, pod kterým jej můžeme na scénu pomocí AS importovat. V naší ukázce jsme zvolili název “houbicka“.

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

ActionScript

Objekt máme připravený, budeme se věnovat psaní ActionScriptu. Otevřeme si panel akcí pro první snímek časové osy a napíšeme sem první část kódu:

import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.filters.DropShadowFilter;
num = 1;
this.onMouseDown = function() {
 startX = _xmouse;
 startY = _ymouse;
 draws = true;
};
this.onMouseUp = function() {
 finX = _xmouse;
 finY = _ymouse;
 sirka = finX-startX;
 vyska = finY-startY;
 draws = false;
 if (maskaCreated != true) {
  maskaCreated = true;
  var bmpData:BitmapData = new BitmapData(sirka, vyska, false, 0x00CCCCCC);
  var kopieObr = flash.display.BitmapData.loadBitmap("houbicka");
  eval("maska"+num).bmp.attachBitmap(bmpData, this.getNextHighestDepth());
  bmpData.copyPixels(kopieObr, new Rectangle(startX, startY, sirka, vyska), new Point(0, 0));
  stin(eval("maska"+num));
 }
 eval("maska"+num).onPress = function() {
  startDrg();
 };
 eval("maska"+num).onRelease = function() {
  stopDrag();
 };
};

Nejdříve importujeme některé potřebné objekty, které využijeme při manipulaci s bitmapovými objekty.

Budeme chtít, aby se tažením myši na scéně vytvořil obdélník, který bude tvořit „masku“, pomocí které vyřízneme z kresby příslušnou část. Proto musíme určit při kliknutí myši, od kterého bodu začneme kreslit. To nám obstarají proměnné, které si naplníme při události stisknutí tlačítka myši.

Při uvolnění myši chceme, aby se vytvořila kopie zdrojového obrázku. Použijeme tedy metodu „copyPixels“. Aby vše správně fungovalo, musí být zdrojový a cílový objekt ze třídy „bitmapData“. To zajistíme tím, že si vytvoříme jeden objekt příslušné třídy, nazvaný „bmpData“, do kterého později překopírujeme obsah druhého, který jsme pojmenovali „kopieObr“. Do objektu „kopieObr“ vložíme z knihovny náš obrázek. Tento objekt bude uložen v paměti a budeme jej používat pouze pro vytvoření výřezů, nebude se tedy objevovat na scéně.

Následuje vložení objektu „bmpData“ do klipu v masce a pak už jen provedeme překopírování části ze vzorového obrázku na scénu. Nakonec, po dokončení kopírování, přidáme ke klipu filtr, kterým vytvoříme stín výřezu.

Protože chceme s výřezy pohybovat, musíme každému MC „maska1“, „maska2“ … přiřadit příslušnou funkci pro přetahování, kterou si definujeme v další části skriptu:

this.onEnterFrame = function() {
 if (draws == true && maskaCreated != true) {
  this.createEmptyMovieClip("maska"+num, num);
  eval("maska"+num).lineStyle(2, 0x000000, 100, true, "none", "round", "round", 1);
  eval("maska"+num).beginFill(0xFFFFFF, 30);
  eval("maska"+num).moveTo(startX, startY);
  eval("maska"+num).lineTo(_xmouse, startY);
  eval("maska"+num).lineTo(_xmouse, _ymouse);
  eval("maska"+num).lineTo(startX, _ymouse);
  eval("maska"+num).lineTo(startX, startY);
  eval("maska"+num).endFill();
  eval("maska"+num).createEmptyMovieClip("bmp", eval("maska"+num).getNextHighestDepth());
  eval("maska"+num).bmp._x = startX;
  eval("maska"+num).bmp._y = startY;
 }
};
stin = function (cil) {
 vzdalenost = 10;
 uhel = 45;
 barva = 0x000000;
 pruhlednost = .8;
 rozmazX = 10;
 rozmazY = 10;
 sila = 1;
 kvalita = 2;
 var filter:DropShadowFilter = new DropShadowFilter(vzdalenost, uhel, barva, pruhlednost, rozmazX, rozmazY, sila, kvalita);
 var filterArray:Array = new Array();
 filterArray.push(filter);
 cil.filters = filterArray;
};
startDrg = function () {
 xn = 1;
 do {
  if (eval("maska"+xn).hitTest(_xmouse, _ymouse, true)) {
   eval("maska"+xn).startDrag();
  }
  xn++;
 } while (xn<num+1);
};

Nejdříve si ale musíme vytvořit funkce, pomocí kterých budeme kreslit onen čtyřúhelník. Využijeme přitom událost „onEnterFrame“, kde nejdříve testujeme, jestli pořád ještě táhneme s myší a chceme tedy kreslit objekt čtyřúhelníka a jestli jsme už náhodou masku nevytvořili. Pokud jsme podmínky splnili, vytvoříme si MC „maska“ s indexem podle počtu vytvořených výřezů a začneme v něm kreslit čtyřúhelník.

Dokud máme stisknuté tlačítko myši, neustále překreslujeme původní MC. Po uvolnění tlačítka myši se provede překopírování vzorového obrázku do vytvořeného MC. Tuto funkci jsme si vytvořili v předcházející části.

Následují dvě funkce. První funkcí si vytvoříme stín výřezu. Pomocí druhé funkce určíme, nad kterým objektem se právě kurzor myši, abychom věděli, který objekt máme přetahovat.

Posledním krokem je vytvoření tlačítka, které nám umožní, po vytvoření výřezu, pokračovat a zkopírovat další označenou část z obrázku. Umístíme tedy tlačítko na scénu a přiřadíme mu následující akci:

on (release) {
  maskaCreated = false;
  num++;
}

Resetujeme proměnnou „maskaCreated“ a pomocí proměnné „num“ zvýšíme číslo, které určuje index aktuálně vytvořeného výřezu.

Nyní si můžeme výslednou animaci otestovat. Určitě zde narazíme na nedostatky, především se jedná o situaci, kdy tažením myši vytvoříme záporné hodnoty rozměrů čtyřúhelníku. Pak se kopie zdrojového obrázku nezobrazí, ale náprava je otázkou několika dalších podmínek.

Výsledek dnešní lekce si můžete prohlédnout zde.
Zdrojový soubor lekce k dispozici zde.

Témata článku: Software, Programování, Import, Convert

1 komentář

Nejnovější komentáře

  • gully, gully 24. 10. 2005 0:33:55
    http://diskuse-zaciname-s-flash-mx-2004.wz.cz
reklama
Určitě si přečtěte

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 102

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

6.  12.  2016 | Jakub Čížek | 36

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 74

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

** V notebooku s cenou nad 20 tisíc nesmí chybět kvalitní displej a rychlé úložiště ** Za dalších deset tisíc můžete dostat navíc styl nebo výkonnější komponenty ** Vybírat můžete z různých velikostí i konstrukcí

8.  12.  2016 | Stanislav Janů | 82


reklama