(page) REDIGERET 13 February 2010 • by admin

Position – zoom

Her demonstreres med en række eksempler, hvordan skalering af et objekt hænger sammen med placering/flytning af objektet.
De kan bruges med en enkelt movieclip.
Der bygges et framescript op, der indeholder startvariabler og bevægelsens funktionalitet:

  • “-target” variabler defineres med værdier for hvordan objektet skal se ud
  • En “GO” funktion sættes igang på enterframe og ændrer værdierne gradvist indtil de når deres “-target”, hvorefter den fjernes

Derefter indsættes et knap-script fra et af eksemplerne.

  • En knap funktion “setDESTINATION” fyres af ved klik, ændrer “-target” værdierne til nogle nye, og sætter GO funktionen igang igen.

Opbygning, skabelon

Skabelon script

Bevægelse og startværdier alene (ingen knapfunktion)

// Objektets kommende størrelse
// fx. halv scenestørrelse
var Wtarget:Number=stage.stageWidth/2;
var Htarget:Number=stage.stageHeight/2;
// Hvor objektet skal havne 
// Halvdelen af scenens størrelse for centrering
// minus halvdelen af objektets kommende størrelse
// for præcis centrering med nulpunkt i venstre top hjørne
var Xtarget:Number=(stage.stageWidth/2)-(Wtarget/2);
var Ytarget:Number=(stage.stageHeight/2)-(Htarget/2);
 
addEventListener(Event.ENTER_FRAME, GO);
function GO(e) {
	// En tiendedel af afstanden mellem destination og objekt
	// Prøv at ændre kvotient-tallet..
	k.x += (Xtarget-k.x)/10;
	k.y += (Ytarget-k.y)/10;
	k.width += (Wtarget-k.width)/10;
	k.height += (Htarget-k.height)/10;
	// Her kan fortsættes med mange andre properties..
	// Hvis en af egenskaberne næsten er i mål.. // så sluk motoren
	if (Math.abs(Xtarget-k.x)<1) {
		removeEventListener(Event.ENTER_FRAME, GO);
	}
}

Eksemplerne bruger alle denne samme animerende funktion, samme start-variabler for de indledende destinationsværdier og samme objekt.

Simple easing tweener

I eksemplerne er ændringer af størrelse og placering animeret over tid, med en loopende funktion igangsat af en ENTER_FRAME-event. Efter en meget simpel easing-teknik:
For hver frame lægges en værdi til ojektets egenskab, svarende til en brøk af afstaden mellem destination og udgangspunkt.

instancenavn.property += (destinations_værdi - nuværende_værdi) / fart_kvotient

Denne logik kan erstattes af andre animationstekniker, der kræver target-værdier. Fx. flash’s egen Tween-class eller TweenLight, Caurina og andre.
Target-variablerne som indeholder udregningerne vil kunne indsættes i den foretrukne syntaks.

removeEventListener

Den sidste betingelse i GO funktionen går ud på at måle hvornår noget næsten er i mål, for at kunne fjerne den hukommelseskrævende ENTER-FRAME event funktionen igen. Objekterne når aldrig helt i mål, eftersom de kun tager en brøkdel af den resterende afstand, selvom denne er nok så lille.
ovenstående betingelse er den korte version. Her er den lange version med kontrol og præcision:

	//Hvis alle næsten er nået frem, 
	//så skub dem helt derhen - og sluk motoren
	if (Math.abs(Xtarget-k.x)<1 && Math.abs(Ytarget-k.y)<1 && Math.abs(Wtarget-k.width)<1 && Math.abs(Htarget-k.height)<1 ) {
		k.x = Xtarget;
		k.y = Ytarget;
		k.width = Wtarget;
		k.height = Htarget;
		removeEventListener(Event.ENTER_FRAME, GO);
	}

Hver knapfunktion i eksemplerne kalder en ny enterframe lytter, da den efter hver endt operation har fjernet sig selv.


addEventListener(Event.ENTER_FRAME, GO);

W- H- X- Y-targets

At ændre placering og skalering (eller iøvrigt transparens, rotation, mm) vil i eksemplerne handle om at ændre destinations-værdier for x, y, width og height.
Den eneste forskel mellem eksemplerne er den MouseEvent.CLICK-drevne funktion på movieclippet: “k” – med nye kombinerede udregninger for skalering og placering.

Skalerings udregninger er skrevet FØR placerings udregninger, fordi deres slutresultat ofte indgår i placeringen. Eksempelvis:

	// 1 tredjedel scenestørrelse;
	Wtarget=stage.stageWidth*3;
	Htarget=stage.stageHeight*3;
	// halv scenestørrelse minus halv kommende objektstørrelse
	Xtarget=(stage.stageWidth/2)-(Wtarget/2);
	Ytarget=(stage.stageHeight/2)-(Htarget/2);

k’s indsætningspunkt

Sættes objektets 0-punkt i top og left, i modsætning til midt i objektet, vil nogle scriptede manipulationer bliver enklere og kortere, mens nogle andre bliver længere (fx. centrering). Mange bruger øverste venstre 0-punkt konsekvent, da scenens eget 0-punkt altid er i øverste venstre hjørne – samt alle dynamisk genererede objekter på scenen – og det fx. vil gøre det enklere at loade og positionere eksterne filer ind i objektet.

Eksempler Variationer

Random placering, samme skalering

Klik på movieclippet for at flytte det et tilfældigt sted hen på scenen.

k.addEventListener(MouseEvent.CLICK, setDESTINATION);
function setDESTINATION(e:MouseEvent) {
	//******Størrelsen
	// en tredjedel scenestørrelse 
	Wtarget=stage.stageWidth/3;
	Htarget=stage.stageHeight/3;
	//******Placeringen
	// random tal mellem (scenestørrelse-kommende objektstørrelse) og 0 
	// (Math.random()*b-a)+a 
	var randomX:Number=Math.random()*(stage.stageWidth-(Wtarget))+0;
	var randomY:Number=Math.random()*(stage.stageHeight-(Htarget))+0;
	// random destination indenfor scenestørrelse
	Xtarget=randomX;
	Ytarget=randomY;
 
	addEventListener(Event.ENTER_FRAME, GO);
}

Centrering, random skalering

Klik på movieclippet for at centrere det med en tilfældig skalering

k.addEventListener(MouseEvent.CLICK, setDESTINATION);
function setDESTINATION(e:MouseEvent) {
	// random tal mellem 1 og 4 
	// (Math.random()*b-a)+a 
	var random4:Number=(Math.random()*3)+1;
	//******Størrelsen
	// en tredjedel scenestørrelse X random4
	Wtarget=(stage.stageWidth/3)*random4;
	Htarget=(stage.stageHeight/3)*random4;
	//******Placeringen
	// Halvdelen af scenens størrelse for centrering
	// minus halvdelen af objektets kommende størrelse
	// for præcis centrering med nulpunkt i venstre top hjørne
	Xtarget=(stage.stageWidth/2)-(Wtarget/2);
	Ytarget=(stage.stageHeight/2)-(Htarget/2);
 
	addEventListener(Event.ENTER_FRAME, GO);
}

Placering ved mus, random skalering

Klik på hvilket som helst sted på scenen for at centrere det

// bemærk stage lytter (i stedet for k) - for klik udenfor k
stage.addEventListener(MouseEvent.CLICK, setDESTINATION);
function setDESTINATION(e:MouseEvent) {
	// random tal mellem 1 og 4 
	// (Math.random()*b-a)+a 
	var random4:Number=(Math.random()*3)+1;
	//******Størrelsen
	// en tredjedel scenestørrelse X random4
	Wtarget=(stage.stageWidth/3)*random4;
	Htarget=(stage.stageHeight/3)*random4;
	//******Placeringen
	// Halvdelen af scenens størrelse for centrering
	// minus halvdelen af objektets kommende størrelse
	// for præcis centrering med nulpunkt i venstre top hjørne
	Xtarget=(mouseX)-(Wtarget/2);
	Ytarget=(mouseY)-(Htarget/2);
 
	addEventListener(Event.ENTER_FRAME, GO);
}

Centrering af klik-sted, samme skalering

Klik et sted på objektet for at centrere klik-stedet

k.addEventListener(MouseEvent.CLICK, setDESTINATION);
function setDESTINATION(e:MouseEvent) {
	//******Størrelsen
	// fx. hele scenens størrelse
	Wtarget=stage.stageWidth;
	Htarget=stage.stageHeight;
	//******Placeringen
	// Musens oprindelige koordinat på objektet 
	// ganges med objektets nuværende og kommende skalerings-factorer
	var scaledMouseX:Number= k.mouseX*k.scaleX*(Wtarget/k.width);
	var scaledMouseY:Number= k.mouseY*k.scaleY*(Htarget/k.height);
	// Scenens centrum - 
	// - minus musens kommende koordinat på objektet
	Xtarget =((stage.stageWidth/2)-(scaledMouseX));
	Ytarget =((stage.stageHeight/2)-(scaledMouseY));
 
	addEventListener(Event.ENTER_FRAME, GO);
}

Centrering af klik-sted, random skalering

Klik et sted på objektet for at centrere stedet med ny tilfældig skalering 

k.addEventListener(MouseEvent.CLICK, setDESTINATION);
function setDESTINATION(e:MouseEvent) {
	// random tal mellem 1 og 4 
	// (Math.random()*b-a)+a 
	var random4:Number=(Math.random()*3)+1;
	//******Størrelsen
	// en tredjedel scenestørrelse X random4
	Wtarget=(stage.stageWidth/3)*random4;
	Htarget=(stage.stageHeight/3)*random4;
	//******Placeringen
	// Musens oprindelige koordinat på objektet 
	// ganges med objektets nuværende og kommende skalerings-factorer
	var scaledMouseX:Number= k.mouseX*k.scaleX*(Wtarget/k.width);
	var scaledMouseY:Number= k.mouseY*k.scaleY*(Htarget/k.height);
	// Scenens centrum - 
	// - minus musens kommende koordinat på objektet
	Xtarget =((stage.stageWidth/2)-(scaledMouseX));
	Ytarget =((stage.stageHeight/2)-(scaledMouseY));
 
	addEventListener(Event.ENTER_FRAME, GO);
}