Umíme ve Flashi – 4.díl – řezání a rozházení 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.