(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)

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

Preloader intern

Hvor preloader af eksterne filer håndteres med “contentLoaderInfo”, ligger den interne info om enhver flashfil i “loaderInfo”.
Forbered følgende:
Dynamiak tekstfelt: pct_txt
Animeret movieclip på 100 frames: frames100_mc

flashscope.com: the-most-creative-flash-preloaders-of-all-times

// placeres på en keyframe - før alle andre frames ..
// Husk at trykke CTRL+ENTER 2 gange for at teste preloader.
stop();
loaderInfo.addEventListener(ProgressEvent.PROGRESS, pHANDLER);
function pHANDLER(e:ProgressEvent):void {
	var pctLoaded:int = Math.round(e.bytesLoaded/e.bytesTotal * 100);
	pct_txt.text=pctLoaded.toString()+" %"; 
	frames100_mc.gotoAndStop(pctLoaded); 
}
loaderInfo.addEventListener(Event.COMPLETE, cHANDLER);
function cHANDLER(e:Event):void {
	gotoAndStop("scene1");
}

Drop_and_Catch classes

fruit class

package {
	import flash.display.MovieClip;
	import flash.events.*;
	public class fruit extends MovieClip {
		var ySpeed;
		var points;
		public function fruit() {
		}
		function INIT() {
			position();
			addEventListener(Event.ENTER_FRAME, update);
		}
		function update(e:Event) {
			y+=ySpeed;
			if (y>stage.stageHeight) {
				position();
			}
		}
		function position() {
			y=0;
			x=Math.random()*stage.stageWidth-width;
			ySpeed=(Math.random()*10)+2;
		}
		function EXIT() {
			removeEventListener(Event.ENTER_FRAME, update);
		}
	}
}

basket class

package {
	import flash.display.MovieClip;
	import flash.events.*;
	public class basket extends MovieClip {
		public function basket() {
			INIT();
		}
		function INIT() {
			addEventListener(Event.ENTER_FRAME, update);
		}
		function update(e:Event) {
			x=stage.mouseX;
			y=stage.stageHeight-height;
		}
		function EXIT() {
			removeEventListener(Event.ENTER_FRAME, update);
		}
	}
}

doc class

package {
	import flash.display.MovieClip;
	import flash.events.*;
	import flash.ui.Mouse;
	public class doc extends MovieClip {
		var hart=new fruit  ;
		var knife=new fruit  ;
		var ourBasket=new basket  ;
		var score:int=0;
		public function doc() {
			stop();
			INIT();
			buttonMode=true;
		}
		function INIT() {		
			score=0;
			Mouse.hide();
			addChild(hart);
			hart.gotoAndStop("hart");
			hart.points=10;
			hart.INIT();
			addChild(knife);
			knife.gotoAndStop("knife");
			knife.points=-10;
			knife.INIT();
			addChild(ourBasket);
			ourBasket.INIT();
			addEventListener(Event.ENTER_FRAME, update);
		}
		function update(e:Event) {
			testCollision(hart);
			testCollision(knife);
		}
		function testCollision(someFruitName) {
			if (someFruitName.hitTestObject(ourBasket)) {
				score+= someFruitName.points;
				someFruitName.position();
				result();
			}
		}
		function result() {
			trace("Du har " + score + " points");
			if (score>20) {
				EXIT();
				gotoAndStop("win");
			}
			if (score<-20) {
				EXIT();
				gotoAndStop("lose");
			}
		}
		function EXIT() {
			Mouse.show();
			removeEventListener(Event.ENTER_FRAME, update);
			removeChild(hart);
			hart.EXIT();
			removeChild(knife);
			knife.EXIT();
			removeChild(ourBasket);
			ourBasket.EXIT();
		}
		function goGame(e:MouseEvent) {
			gotoAndStop("game");
			INIT();
		}/**/
	}
}