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í

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
Určitě si přečtěte

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

Operační systém běžným počítačům nedal Bill Gates, ale Gary Kildall

** Gary Kildall pochopil, že levné výpočetní čipy mohou posloužit jako univerzální počítače pro všechny ** Připravil pro ně proto první operační systém ** Později mu systém vyfoukl Microsoft a nazval ho MS DOS

23.  4.  2017 | Pavel Tronner | 51

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

Umělá inteligence je sice v plenkách, už teď ale přestáváme rozumět, jak vlastně funguje. To je problém

** Už je to tady, lidé přestávají chápat počítače ** Systémy neuronových sítí začínají pracovat tak, že ani jejich tvůrci přesně neví, co se uvnitř děje ** Do budoucna to může být závažný problém

24.  4.  2017 | Jakub Čížek | 111

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

Před 35 lety měl premiéru legendární počítač ZX Spectrum. Připomeňte si „Gumáka“

** Slavný osmibitový počítač Sinclair ZX Spectrum byl uveden právě před 35 lety ** Připomeňte si tento průkopnický počítač v tematických článcích ** Podívejte se, jak funguje dnes

23.  4.  2017 | Pavel Tronner | 13

Správný počítač má alespoň dva monitory. Anebo je to jinak?

Správný počítač má alespoň dva monitory. Anebo je to jinak?

** David si nedokáže představit práci bez dvou a více monitorů ** Kubovi naopak stačí jeden a ve více displejích se ztrácí ** Jaký přístup je lepší?

23.  4.  2017 | Jakub Čížek | 59

Český Google Překladač začal používat umělou inteligenci. Konec „drahoušků zákazníků“

Český Google Překladač začal používat umělou inteligenci. Konec „drahoušků zákazníků“

** Google ve svém překladači roky používal statistickou technologii ** Nyní zavádí strojové učení a neuronové sítě ** Rozdíl by měl být zvláště na větších textech patrný už nyní

20.  4.  2017 | Jakub Čížek | 31

Brno otevřelo největší českou dílnu pro bastlíře. Kladívka, vrtačky, 3D tiskárny, laserové řezačky. Je tu vše

Brno otevřelo největší českou dílnu pro bastlíře. Kladívka, vrtačky, 3D tiskárny, laserové řezačky. Je tu vše

** Máte nápad, ale chybí vám stroje a pořádná dílna? ** Chcete postavit ptačí budku, nebo krabičku pro Arduino? ** Brno otevřelo svůj FabLab – laboratoř pro bastlíře

19.  4.  2017 | Jakub Čížek | 31


Aktuální číslo časopisu Computer

První test AMD Ryzen

Velké testy: 22 powerbank a 8 bezdrátových setů

Radíme s koupí Wi-Fi routeru

Co dokáží inteligentní domy?