(category) LIST of posts

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

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

Eksempler Præsentation

revafrance af soleilnoir
stayfocus
billyharveymusic
ringelgoslinga

http://www.sonyericsson.com/cws/cws/home?cc=dk&lc=da
http://www.pixelpeach.com/2009/flash/

http://www.plasticparticles.de/particle.html
http://www.phatterism.com/
www.sfmoma.org/projects/artscope/index.html