(single) REDIGERET 8 August 2010 • by admin

Panoramic sliders 3

Eksplorativ navigation, se panoramic sliders 1 og panoramic sliders 2.
Her med faste stationer og en flytbar menu.

En grafik-bund (større end scenemålene, men med samme proportioner) og et par “arealer”, som udgør forskelligt præsentations-indhold – samlet i en movieclip: areas. Skaleres op og ned med klik på bunden.
Knapper for at kunne fokusere på disse arealer samlet i en movieclip: menu. Flyttes med musen.
Se fx. billyharveymusic eller sqcircle for inspiration.

pan

//////////////////////////
//Scenens størrelser - NB: angiv værdier i tal
//hvis filmen skal kunne loades ind i en andenswf.
var SW:int=stage.stageWidth;
var SH:int=stage.stageHeight;
//lokale faktiske mål, som nye mål kan beregnes udfra
var aW:Number=areas.width;
var aH:Number=areas.height;
/////////////////////////////
// Antal trin før målet nås (ease in)
var steps:int=12;
// zoom faktorer i forhold til scenestørrelse
var zFactorBig:int=3;
var zFactorSmall:int=1;
////////////////////////////
//Den skalering (stor lille) areas skal vises med nu
var zFactor:int=zFactorBig;
//areas indledende skalering
var targW:Number;
var targH:Number;
// Det mål, som areas haster imod lige nu
var targX:Number=areas.x;
var targY:Number=areas.y;
//////////////////

Start- variablerne er opdelt i 3 kategorier:
- Statiske mål som af praktiske grunde er gemt i variabler, fordi de hele vejen igennem skal bruges i udregninger.
- Parametre som nemt kan justeres. (her er areas beredt til at kunne blive 3 gange så stor som scenen.)
- Dynamiske værdier, som ændrer sig undervejs og som skal være tilgængelige for funktionerne.

menu.buttonMode=true;
menu.addEventListener(MouseEvent.MOUSE_DOWN, drag);
menu.addEventListener(MouseEvent.MOUSE_UP, drop);
menu.a1but.buttonMode=true;
menu.a1but.addEventListener(MouseEvent.CLICK, setTarget);
menu.a2but.buttonMode=true;
menu.a2but.addEventListener(MouseEvent.CLICK, setTarget);
areas.area1.buttonMode=true;
areas.area1.addEventListener(MouseEvent.CLICK, setTarget);
areas.area2.buttonMode=true;
areas.area2.addEventListener(MouseEvent.CLICK, setTarget);
menu.zoombut.buttonMode=true;
menu.zoombut.addEventListener(MouseEvent.CLICK, setTarget);
areas.bund.addEventListener(MouseEvent.CLICK, setTarget);
//////////////////////////
function drag(e:MouseEvent):void {
	e.target.startDrag();
}
function drop(e:MouseEvent):void {
	e.target.stopDrag();
}
///////////////////////////
function setTarget(e:MouseEvent) {
	// op- og ned-zomning (bund og den røde knap)
	if (e.target.name=="zoombut"||e.target.name=="bund") {
		// hvis målet var lille, så sæt det til stort - ellers omvendt!
		if (zFactor==zFactorSmall) {
			zFactor=zFactorBig;
			//areas koordinater, musens klik, skaleret op og centreret
			targX=(-mouseX*zFactorBig)+(SW/2);
			targY=(-mouseY*zFactorBig)+(SH/2);
		} else {
			zFactor=zFactorSmall;
			targX=0;
			targY=0;
		}
	}
	//forskellen mellem areas medfødte mål og det skalerede mål
	//bruges til at finde area1's og area2's præcise koordinater 
	var adifX:Number=((SW*zFactorBig)/aW);
	var adifY:Number=((SH*zFactorBig)/aH);
	if (e.target==menu.a1but||e.target==areas.area1) {
		zFactor=zFactorBig;
		targX=-(areas.area1.x*adifX)+(SW/2);
		targY=-(areas.area1.y*adifY)+(SH/2);
	}
	if (e.target.name=="a2but"||e.target.name=="area2") {
		zFactor=zFactorBig;
		targX=(-areas.area2.x*adifX)+(SW/2);
		targY=(-areas.area2.y*adifY)+(SH/2);
	}
	targW=SW*zFactor;
	targH=SH*zFactor;
	areas.addEventListener(Event.ENTER_FRAME, GETGOING);
}
//////////////////
function GETGOING(e:Event):void {
	areas.x += (targX-areas.x)/steps;
	areas.y += (targY-areas.y)/steps;
	areas.width += (targW-areas.width)/steps;
	areas.height += (targH-areas.height)/steps;
	//Hvis den næsten er i mål, så siger vi den er hjemme og slukker motoren!
	if (Math.abs(areas.x - targX) < 1 && Math.abs(areas.y-targY)<1&&Math.abs(targW-areas.width) < 1 && Math.abs(targH-areas.height) < 1) {
		areas.x=targX;
		areas.y=targY;
		areas.width=targW;
		areas.height=targH;
		areas.removeEventListener(Event.ENTER_FRAME, GETGOING);
	}
}