(category) LIST of posts

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);
	}
}

Panoramic sliders 2

se Panoramic sliders 1 for en ‘loopende’ version.
Den panorerende effekt i alle disse eksempler, forudsætter at slideren er “for stor” til scenen, på den ene eller begge leder.

Vandret panorering med selvstop

Klik for at aktivere:

Her er bevægelsen til begge sider den samme som i Panoramic sliders 1 – men den standser i begge yderpositioner, i stedet for at gentage sig. En enkelt movieclip-instance på scenen – med grafik og knapper iinlejret deri:

Scene1
> slider – mc-instance med indhold i form af bund og mc/knapper
> > Eventuelle mc-instances eller knapper, med deres indhold
> > bund – mc-instance med grafik eller billedfil

bunds indsætningspunk (det lille kryds på sliders’ timeline) skal være 0, 0.

Bemærk ændringen i SLIDE funktionen fra Panoramic sliders 1. 2 betingelser standser slideren i stedet for at flytte den hen til et tilsvarende sted med mere grafik. (Igangsættelse af slider’s ENTER_FRAME er her kontrolleret med et klik på sliderens bund):

//  Skift til tal-værdi, hvis du har problemer med at loade denne film
// var SW = 550; // din scenes bredde
var SW:int=stage.stageWidth;
var cStageX:int=SW/2;
var steps:int=15;//antal trin i en ease-bevægelse
var movement:Boolean=false;//Mulighed for at stoppe bevægelsen
slider.bund.addEventListener(MouseEvent.CLICK, startstop);
// et klik på slider's bund tænder eller slukker for slider's SLIDE function
function startstop(e:MouseEvent) {
	if (! movement) {
		slider.addEventListener(Event.ENTER_FRAME, SLIDE);
		movement=true;
	} else {
		slider.removeEventListener(Event.ENTER_FRAME, SLIDE);
		movement=false;
	}
}
function SLIDE(e:Event) {
	//  afpas dine skridt efter afstand mellem mus og scenemidten 
	var difX=(cStageX-mouseX)/steps;
	//  hvis kanten er overskredet, juster afstandens længde til 0
	if (e.target.x+difX <= -(e.target.width-SW)) {
		e.target.x =-(e.target.width-SW);
		difX=0;
	}
	if (e.target.x+difX>=0) {
		e.target.x=0;
		difX=0;
	}
	e.target.x+=difX;
}

Vandret ELLER lodret panorering

Eksemplet ovenfor panorerer vandret på x-aksen. Skal det gøres lodret, må grafikken laves på højkant, og alle x-værdier erstattes med y-værdier, samt width-referencer blive til height.

Vandret OG lodret panorering

Klik for at sætte igang:

Her er også kun en stor movieclip på scenen, med hele scenariet deri. Der er rent faktisk også en knap midt på billedet.
movieclip-hierarkien ser sådan ud (der refereres til instance-navne):

Scene1
> scenario – mc – (kunne sagtens have flere indholds-scener i sin timeline)
> > infobut – mc med 2 labels: but og info, med forskelligt indhold på hver
> > > boble – mc med shapetween
> > bund – mc med grafik eller billedfil – (evt. flere frames med forskellig bg)
> se – mc – øjet med 2 labels: “sened” og “seop” – hver deres indhold

// Hvis du planlægger at loade filmen ind i en anden swf
// vil stage.stageWidth og stage.stageHeight måske udløse fejl
// Nemmeste løsning: at angive statiske tal
// Ellers: Flyt dem ind i de funktioner der bruger dem
// Spørg - eller/og Google: as3 stage.stageWidth in loaded swf
var SW:int=stage.stageWidth;
var SH:int=stage.stageHeight;
var cStageX:int=SW/2;
var cStageY:int=SH/2;
var steps:int=20;//antal trin i en ease-bevægelse
var movement:Boolean=false;//Mulighed for at starte bevægelsen
scenario.bund.addEventListener(MouseEvent.CLICK, startstop);
// et klik på scenario's bund tænder eller slukker for scenario's SLIDE function
function startstop(e:MouseEvent) {
	if (! movement) {
		scenario.addEventListener(Event.ENTER_FRAME, SLIDE);
		movement=true;
	} else {
		scenario.removeEventListener(Event.ENTER_FRAME, SLIDE);
		movement=false;
	}
}

/*
Hvorfor sætte bevægelsen i gang med klik på scenario.bund? hvorfor ikke bare på scenario?
Med et klik direkte på scenario, ville alle dens eventuelle knap-børn arve, og hvert et knap-klik ville automatisk forårsage en on/off effekt.
- bund ligger under børnene, så de arver ikke dens events.
En hvilken som helst anden knap kunne selvfølgelig også kalde den event.
*/

function SLIDE(e:Event) {
	//  afpas dine skridt efter afstand mellem mus og scenemidten 
	var difX=(cStageX-mouseX)/steps;
	var difY=(cStageY-mouseY)/steps;
	//  hvis kanten er overskredet, juster afstandens længde til 0
	if (e.target.x+difX<=-(e.target.width-SW)) {
		e.target.x =-(e.target.width-SW);
		difX=0;
	}
	if (e.target.x+difX>=0) {
		e.target.x=0;
		difX=0;
	}
	if (e.target.y+difY<=-(e.target.height-SH)) {
		e.target.y =-(e.target.height-SH);
		difY=0;
	}
	if (e.target.y+difY>=0) {
		e.target.y=0;
		difY=0;
	}
	e.target.x+=difX;
	e.target.y+=difY;
}

Knap-funktionaliteten

scenario.infobut.buttonMode=true;
scenario.infobut.addEventListener(MouseEvent.MOUSE_OVER, over);
scenario.infobut.addEventListener(MouseEvent.MOUSE_OUT, out);
scenario.infobut.addEventListener(MouseEvent.CLICK, showINFO);
function over(e:MouseEvent) {
	// brems, flere skridt(længere tid)
	steps*=2;
}
function out(e:MouseEvent) {
	// farten op, færre skridt(kortere tid)
	steps/=2;
}
function showINFO(e:MouseEvent) {
	if (e.target.currentLabel=="but") {
		e.target.gotoAndPlay("info");
	} else {
		e.target.gotoAndStop("but");
	}
}

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;
}

Tutorials XML

Lynda.com introduktion til xml Se de gratis videoer på listen

random image med uiloader til xml
En simpel imageloader vel forklaret

En simpel xml-menuloader til knapper
En simpel menu får menupunkter med en xml-fil, der hentes fra en class på et movieclip
ria-coder.com/blog/creating-xml-based-menus-with-flash-cs4-and-flex

accordeon med xml fra thetechlab
accordeon med xml fra riacodes

Slideshow med Caurina tweener
thetechlabs.com: create-a-as3-slideshow-with-xml
Slideshow mwd Tweenmax
active.tutsplus.com: build-a-dynamic-flash-and-xml-slideshow-with-scripted-transitions

Slideshow mwd flash’s egen tweener
republicofcode: as3slideshow

videoplayer med xml playlist

podcast-player (ikke testet)

On Off knap

var igang:Boolean = false;
 
but.addEventListener(MouseEvent.CLICK,ONOFF);
function ONOFF(e:MouseEvent) {
	if (igang==false) { // if (!igang)
		but.gotoAndStop("on");
		// Noget sættes i gang
		igang=true;
	} else {
		but.gotoAndStop("off");
		// Noget stoppes
		igang=false;
	}
}

Kunne også se således ud:

var igang:Boolean = false;
 
but.addEventListener(MouseEvent.CLICK,ONOFF);
function ONOFF(e:MouseEvent) {
	if (!igang) { 
		but.gotoAndStop("on");
		// Noget sættes i gang
	} else {
		but.gotoAndStop("off");
		// Noget stoppes
	}
	// igang sættes til at blive det omvendte af det det er nu..
	igang=!igang;
}

Preloader ekstern

Den nemmeste relaterede tutorial – er nok denneher:
monkeyflash.com/flash/creating_a_custom_preloader

var ldr:Loader = new Loader();
 
ldr.load(new URLRequest("content.swf"));
 
ldr.contentLoaderInfo.addEventListener(Event.OPEN, loadOpen);
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
 
function loadOpen(e:Event):void {
    trace("Loading begun");
} 
 
function loadProgress(e:ProgressEvent):void {
    var percentLoaded:Number = e.bytesLoaded/e.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);
    trace("Loading: "+percentLoaded+"%");
}
 
function loadComplete(e:Event):void {
    addChild(ldr);
    trace("Complete");
}