Uživatelské nástroje

Nástroje pro tento web


vyuka:animovany_puzzle

Animovaný puzzle

Struktura animovaného puzzle

Pro přehrání obsahu potřebujete Adobe Flash Plugin.

Když se potáhne kostičkou, objeví se v kostičce animace, pokud ji na obrázku pustíme do správného místa, kostička zmizí. Cílem je umístit všechny kostičky na správná místa tak aby všechny kostičky zmizely.

Princip řešení je jednoduchý, vytvoříme si šest kostiček, každá kostička bude mít masku nad pohyblivým movieClipem parnik_mc, který má na začátku nastavenu vlastnost _visible==false. Tuto blastnost můžeme měnit - když je nastavena na true, vidíme část animovaného obrázku pod maskou, když ji nastavíme na false, vidíme pod maskou njen jednobarevný podklad - viz následující obe:

Pro přehrání obsahu potřebujete Adobe Flash Plugin.

Tažení a pouštění kostiček

Pro každou kostku vytvoříme jednu instanci v hlavním klipu a pomocí startDrag a stopDrag naprogramujeme zsčátek a konec tažení.

Při začátku tažení nastavíme viditelnost podkladového pohyblivého klipu pod maskou na true - takže např. pro instanci kostičky k1 naspíšemek1._visible=true. Když kostičku pustíme, viditelnost podkladového klipu nastavíme na false (pohyblivý podkladový movie clip zmizí), a zavoláme funkci testujPolohu(), která otestuje, zsda jsme kostičku dali na správné místo a pokud ano, tak celou kostičku zneviditelní.

k0.onPress = function() {
	k0.startDrag();
	k0.parnik_mc._visible = true;
};
k0.onRelease = function() {
	k0.stopDrag();
	k0.parnik_mc._visible = false;
	k0.testujPolohu();
 
 
};
k1.onPress = function() {
	k1.startDrag();
	k1.parnik_mc._visible = true;
 
};
k1.onRelease = function() {
	k1.stopDrag();
	k1.parnik_mc._visible = false;
	k1.testujPolohu();
 
};
k2.onPress = function() {
	k2.startDrag();
	k2.parnik_mc._visible = true;
 
};
k2.onRelease = function() {
	k2.stopDrag();
	k2.parnik_mc._visible = false;
	k2.testujPolohu();
};
k3.onPress = function() {
	k3.startDrag();
	k3.parnik_mc._visible = true;
 
};
k3.onRelease = function() {
	k3.stopDrag();
	k3.parnik_mc._visible = false;
	k3.testujPolohu();
 
};
k4.onPress = function() {
	k4.startDrag();
	k4.parnik_mc._visible = true;
 
};
k4.onRelease = function() {
	k4.stopDrag();
	k4.parnik_mc._visible = false;
	k4.testujPolohu();
 
};
k5.onPress = function() {
	k5.startDrag();
	k5.parnik_mc._visible = true;
};
k5.onRelease = function() {
	k5.stopDrag();
	k5.parnik_mc._visible = false;
	k5.testujPolohu();
};

Testování správného uložení kostiček

Vlastní funkce testujPolohu je naprogramovaná tak, že otestuje, zda koordiáty kostičky (přesně řečeno podkladového klipu) se shodují se správným nastavením (to schováváme v proměnných trueX a trueY. Shodu testujeme následovně:

pokud absolutní hodnota rozdílu skutečné koordináty _x a požadované koordináty trueX je menší než deset pixelů, nastavíme hodnotu _x na požadovanou a testovací logickou proměnnou xOK nastavíme na true.

Totéž uděláme pro ypsilonovu souřadnici. N

akonec otestujeme zda je po testu zároveň hodnota xOK a yOK pravdivá (logické spojka „a“ kterou v ActionScriptu zapisujeme jako . Tedy testujeme výraz: xOK && yOK. Pokud je tento výraz pravdivý tak celou kostičku zneviditelníme.

Pro každou kostičku v jejím prvním framu ptoto naprogramujeme:

parnik_mc._visible=false;
var trueX=512;
var trueY=385.9;
function testujPolohu(){
	var xOK:Boolean=false;
	var yOK:Boolean=false;
	trace("_x="+_x+" _y="+_y);
	if (Math.abs(trueX-this._x)<5){
		this._x=trueX;
		xOK=true;
		trace("xOKtrue")
	}
	if (Math.abs(trueY-this._y)<5){
		this._y=trueY;
		yOK=true;
		trace("yOK=true")
	}
	if (xOK && yOK){
		this._visible=false;
		trace("zneviditelňuji");
	}
}

zdrojový text příkladu

vylepšení příkladu - tažená kostička musí být vždy navxhu

Problém je v tom, že když táhneme nějakou kostičkou, někdy se stane, že tažená kostka je táhnuta pod nějakou jinou kostičkou. Potřebujeme zabezpečit, aby kostička, kterou táhneme byla vždy navrchu.

To uděláme jednoduchým způsobem:

Nejprve zjistíme nejvyšší možnou volnou hloubku pomocí this.getNextHighestrDepth.

Pak vždy při uchopení kostičky(při onPress) si do proměnné puvodniHloubka uložíme původní hloubku, na které bylas uložena kostička. Např. pro kostičku k0 napíšeme: puvodniHloubka = k0.getDepth();

Dále kostičce pořiřadíme pomocí swapDepth nejvyšší možnou hodnotu. Pro kostičku k0 tedy napíšeme: k0.swapDepths(nejvyssiHloubka);

Při pouštění kostičky (při onRelease) přiřadíme kostičce její původní hloubku, jejíž pořadové číslo jsme uložili do proměnné stavajiciHloubka. Pro kostičku k0 tedy napíšeme: k0.swapDepths(puvodniHloubka);

var nejvyssiHloubka = this.getNextHighestDepth(); 
//nejvyšší hloubka pro klipy kterými budeme táhnout
 
var stavajiciHloubks:Number;  
//sem budeme ukládat původní hloubku klipu kreým táhneme
 
 
k0.onPress = function() {
	puvodniHloubka = k0.getDepth();
	k0.swapDepths(nejvyssiHloubka);
	k0.startDrag();
	k0.parnik_mc._visible = true;
};
k0.onRelease = function() {
	k0.swapDepths(puvodniHloubka);
	k0.stopDrag();
	k0.parnik_mc._visible = false;
	k0.testujPolohu();
};
k1.onPress = function() {
	puvodniHloubka = k1.getDepth();
	k1.swapDepths(nejvyssiHloubka);
	k1.startDrag();
	k1.parnik_mc._visible = true;
};
k1.onRelease = function() {
	k1.swapDepths(puvodniHloubka);
	k1.stopDrag();
	k1.parnik_mc._visible = false;
	k1.testujPolohu();
};
k2.onPress = function() {
	puvodniHloubka = k2.getDepth();
	k2.swapDepths(nejvyssiHloubka);
	k2.startDrag();
	k2.parnik_mc._visible = true;
};
k2.onRelease = function() {
	k2.stopDrag();
	k2.swapDepths(puvodniHloubka);
	k2.parnik_mc._visible = false;
	k2.testujPolohu();
};
k3.onPress = function() {
	puvodniHloubka = k3.getDepth();
	k3.swapDepths(nejvyssiHloubka);
	k3.startDrag();
	k3.parnik_mc._visible = true;
};
k3.onRelease = function() {
	k3.swapDepths(puvodniHloubka);
	k3.stopDrag();
	k3.parnik_mc._visible = false;
	k3.testujPolohu();
};
k4.onPress = function() {
	puvodniHloubka = k4.getDepth();
	k4.swapDepths(nejvyssiHloubka);
	k4.startDrag();
	k4.parnik_mc._visible = true;
};
k4.onRelease = function() {
	k4.swapDepths(puvodniHloubka);
	k4.stopDrag();
	k4.parnik_mc._visible = false;
	k4.testujPolohu();
};
k5.onPress = function() {
	puvodniHloubka = k5.getDepth();
	k5.swapDepths(nejvyssiHloubka);
	k5.startDrag();
	k5.parnik_mc._visible = true;
};
k5.onRelease = function() {
	k5.swapDepths(puvodniHloubka);
	k5.stopDrag();
	k5.parnik_mc._visible = false;
	k5.testujPolohu();
};
vyuka/animovany_puzzle.txt · Poslední úprava: 2007/06/07 10:32 autor: kofranek