reklama

Umíme ve Flashi – 4.díl – řezání a rozházení obrázku

V dnešní lekci ještě na chvilku zůstaneme u kopírování a práce s bitmapovým objektem. Ukážeme si, jak rozřezat obrázek do malých objektů, které budeme náhodně rozhazovat po původním obrázku.

Další variace na jedno téma

Protože nová třída BitmapData je opravdu skvělá, neodbudeme jí jen jednou ukázkou. Aplikací, ve kterých ji využijete, je jistě dost a proto si dnes ukážeme, jak lze snadno rozstříhat obrázek do malých objektů, které pak náhodně rozmístíme na původním obrázku. Výsledek pak může tvořit základ nejrůznějších her, skládaček, pexesa a dalších.

Postup

Základem bude ukázka z minulého dílu. Z ní využijeme funkce pro vytvoření výřezu z obrázku, proto si dnes už nebudeme podrobně vysvětlovat uvedené funkce, zaměříme se na jiné. Základní myšlenkou je vytvoření určitého počtu obdélníků, abychom jimi mohli vyplnit původní obrázek.

Jakmile budeme mít objekty (MovieClipy) vytvořené, rozmístíme je jako dlaždice na originální obrázek a do každého vložíme určitý výřez z obrázku. Na konec si vytvoříme funkci pro zamíchání objektů na scéně a máme hotovo.

Úprava zdrojového kódu

Úvod máme za sebou, takže do práce. Otevřeme si zdrojový soubor z minulého dílu, který si můžeme stáhnout zde. Objekty na scéně můžeme nechat, ale kód v prvním snímku musíme změnit. Nejlepší bude, když jej vymažeme celý a začneme na novo:

import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;

startDrg = function () {
 xn = 1;
 do {
  if (eval("objekt"+xn).hitTest(_xmouse, _ymouse, true)) {
   eval("objekt"+xn).startDrag();
   eval("objekt"+xn).swapDepths(this.getNextHighestDepth());
  }
  xn++;
 } while (xn<objNum);
};
stopDrg = function () {
 stopDrag();
};

V první části opět importujeme důležité části, které využijeme při práci s bitmapou. Následuje poněkud obměněná funkce, pro přetahování objektů. Funkce „startDrg“ je vyvolána vždy, když se klikne na objekt, jenže my nevíme, na který objekt jsme kliknuli, nevíme, který máme přetahovat. To určíme pomocí cyklu, který zjistí pozice kurzoru myši a objektů a podle nich vyhodnotí aktuální objekt pro přetahování.

Druhá funkce je jednoduchá, díky ní přestaneme objekt přetahovat. Tady není nutné zjistit, o který objekt se jedná, funkce pro zrušení přetahování nemá další parametry.

Následuje nejdůležitější část kódu:

Xobjektu = 5;
Yobjektu = 10;
Wobjektu = obr._width/Xobjektu;
Hobjektu = obr._height/Yobjektu;
xobj = 0;
objNum = 1;
do {
 yobj = 0;
 do {
  this.createEmptyMovieClip("objekt"+objNum, objNum);
  eval("objekt"+objNum)._x = obr._x+xobj*Wobjektu;
  eval("objekt"+objNum)._y = obr._y+yobj*Hobjektu;
  eval("objekt"+objNum).createEmptyMovieClip("bmp", eval("objekt"+objNum).getNextHighestDepth());
  var bmpData:BitmapData = new BitmapData(Wobjektu, Hobjektu, false, 0x00CCCCCC);
  var kopieObr = flash.display.BitmapData.loadBitmap("houbicka");
  eval("objekt"+objNum).bmp.attachBitmap(bmpData, this.getNextHighestDepth());
  bmpData.copyPixels(kopieObr, new Rectangle(xobj*Wobjektu, yobj*Hobjektu, Wobjektu, Hobjektu), new Point(0, 0));
  eval("objekt"+objNum).onPress = function() {
   startDrg();
  };
  eval("objekt"+objNum).onRelease = function() {
   stopDrg();
  };
  yobj++;
  objNum++;
 } while (yobj<Yobjektu);
 xobj++;
} while (xobj<Xobjektu);

Zde dojde k vytvoření objektů, do kterých rozřežeme původní obrázek. Abychom to ale mohli provést, nejdříve musíme zjistit, kolik objektů vůbec budeme chtít vytvořit. K tomu poslouží proměnné „Xobjektu“ a „Yobjektu“. Určují kolik objektů bude v řádku a kolik ve sloupci. Pak si musíme vypočítat velikosti a můžeme se pustit do tvorby výřezů.

Použijeme dva cykly, díky kterým projdeme všechny řádky a sloupce. Objekty pro vložení výřezu se jmenují „objekt+číslo objektu“. Každý, nově vytvořený objekt umístíme na jeho pozici na obrázku a dále v něm vytvoříme další MC s názvem „bmp“. Ten v sobě bude ukrývat výřez originálního obrázku. Zde se vracíme k funkci z minulého dílu, která nám vytvoří výřez přesně podle velikosti a umístění objektu. Následuje už jenom přiřazení funkcí pro přetahování a je hotovo.

Poslední část skriptu budeme věnovat zamíchání objektů na scéně:

zamichat = function () {
 Xpole = new Array();
 Ypole = new Array();
 zx = 1;
 do {
  Xpole.push(eval("objekt"+zx)._x);
  Ypole.push(eval("objekt"+zx)._y);
  zx++;
 } while (zx<objNum);
 objx = 1;
 do {
  nahodne = Math.round(Math.random()*(Xpole.length-1));
  eval("objekt"+objx)._x = Xpole[nahodne];
  eval("objekt"+objx)._y = Ypole[nahodne];
  Xpole.splice(nahodne, 1);
  Ypole.splice(nahodne, 1);
  objx++;
 } while (Xpole.length>0);
};
obr._visible = false;

Tato funkce nejdříve zjistí aktuální souřadnice všech objektů na scéně a vloží je do dvou polí. V dalším kroku náhodně vybíráme z polí prvky a podle vybraného prvku umisťujeme znovu objekty výřezů. Na posledním řádku schováme originální obrázek.

Funkce pro zamíchání musí být někde spuštěná, nejlépe na tlačítku. Můžeme využít tlačítko, které nám zbylo z minula, nebo si vytvořit nové. Po exportu můžeme vyzkoušet, jak se původní obrázek rozstříhá podle nastavených objektů.

Pokud bychom chtěli objekty více rozházet po scéně, můžeme do kódu, kde z polí vybíráme náhodně souřadnice, zařadit další část:

posuv = Math.pow(-1,Math.round(Math.random()*2))*Math.random()*20;

Vygenerujeme si zde náhodné číslo od 0 do 20, které má buď kladnou, nebo zápornou hodnotu. Když uvedenou proměnnou přičteme k nové pozici výřezu, náhodně tak rozházíme všechny objekty:

eval("objekt"+objx)._x = Xpole[nahodne]+posuv;
eval("objekt"+objx)._y = Ypole[nahodne]+posuv;

Zdrojový soubor dnešní ukázky je k dispozici zde.
Ukázka je k nahlédnutí zde.

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

3 komentáře

Nejnovější komentáře

  • OBr 31. 10. 2005 16:58:44
    je to dělané ve F8, takže je nutný mít instalovaný nový flashplayerový...
  • Calven 31. 10. 2005 13:36:37
    No nejako mi ta ukazka nechce fungovat v Opere 8.50...
  • gully, gully 31. 10. 2005 6:13:08
    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 | 101

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 | 73


reklama