(single) REDIGERET 14 October 2009 • by admin

Panoramic sliders 1

Se eventuelt Panoramic sliders 2, for slidere der stopper når de når til kanten.

Koden

/*
slider1 = 2 instances af img1
slider2 = 2 instances af img2
slider3 = 2 instances af img3
Sørg for: 
- at importere aflange billedfiler eller lave aflang grafik, >= scenebredden.
- at aligne hver billedfil til 0,0 - i dens billedmovieclip (img1, img2, img3).
- at placere 2 instancer af billedmovieclippet side om side ind i slideren. 
- at aligne det første instance af billedmovieclippet til 0,0 i slideren. 
- at placere eventuelle knapper i billedmovieclippet - ikke i slideren.
- at sætte frameraten op til 32, for en glidende bevægelse.
*/
// Hvis du planlægger at loade filmen ind i en anden swf
// vil stage.stageWidth her sandsynligvis udløse fejl
// fordi Stage ikke findes mens filmen importeres
// Det kan undgås ved at angive statiske tal
// var SW = 550; // din scenes bredde
var SW = stage.stageWidth;
var cStageX = SW/2;
slider1.steps = 50;
slider2.steps = 30;
slider3.steps = 10;
slider1.addEventListener(Event.ENTER_FRAME, SLIDE);
slider2.addEventListener(Event.ENTER_FRAME, SLIDE);
slider3.addEventListener(Event.ENTER_FRAME, SLIDE);
function SLIDE(e:Event):void {
	var difX=(cStageX-mouseX)/e.target.steps;
	e.target.x += difX;
	if (e.target.x <= -(e.target.width/2)) {
		var underStep = -(e.target.width/2)-e.target.x;
		e.target.x = 0-underStep;
	} else if (e.target.x >= 0) {
		var overStep = e.target.x;
		e.target.x = -(e.target.width/2)+overStep;
	}
}

Pauseknap, mere kode

var pausing:Boolean=true;
butclip.buttonMode= true;
butclip.addEventListener(MouseEvent.CLICK, ON_OFF);
function ON_OFF(e:MouseEvent):void {
	if (!pausing) {
		butclip.gotoAndStop("pl");
		slider1.removeEventListener(Event.ENTER_FRAME, SLIDE);
		slider2.removeEventListener(Event.ENTER_FRAME, SLIDE);
		slider3.removeEventListener(Event.ENTER_FRAME, SLIDE);
		pausing=true;
	} else {
		butclip.gotoAndStop("st");
		slider1.addEventListener(Event.ENTER_FRAME, SLIDE);
		slider2.addEventListener(Event.ENTER_FRAME, SLIDE);
		slider3.addEventListener(Event.ENTER_FRAME, SLIDE);
		pausing=false;
	}
}

Timeline hierarkien:

Fidusen med de dobbelte instancer i hver slider, skal sikre at der ikke bliver “huller” i animationen, når slideren når ud til kanten af scenen i begge retninger. Slideren flyttes bare lyn-hurtigt hen til et tilsvarende punkt i nærheden af dens sammenføjning, og fortsætter bevægelsen derfra. Der skal være to for at opnå denne evighedseffekt (!).

sliders1

Scene1
> slider1 – mc
> > img1a – mc-instance af img1
> > img1b – mc-instance af img1
> slider2 – mc
> > img2a – mc-instance af img2
> > img2b – mc-instance af img2
> slider3 – mc
> > img3a – mc-instance af img3
> > img3b – mc-instance af img3
> butclip – mc-instance med 2 labels stadier:”pl” og “st”, med forskellig grafik

sliders2

Yderligere interaktion

En eventuel knap i panoramaen vil derfor være smart at placere i det movieclip, som tvillinge-instancerne er dannet udfra (og ikke i slideren). For at kunne nå denne knap med actionscript skal instancen navngives, og begge tvillinge-instancerne omkring dem skal have navne – derfor: img1a, img1b, osv.
Koden på scenen for en knap kaldet ‘dut’ vil kunne ligne dette:

// Dobbelte aktiveringer, men deler samme event-function
slider1.img1a.dut.buttonMode= true;
slider1.img1b.dut.buttonMode= true;
slider1.img1a.dut.addEventListener(MouseEvent.CLICK, GROW);
slider1.img1b.dut.addEventListener(MouseEvent.CLICK, GROW);
function GROW(e:MouseEvent):void {
	slider1.img1a.dut.scaleX *= 1.5;
	slider1.img1b.dut.scaleX *= 1.5;
}