(category) LIST of posts

Actionscript sproget

friendsofed: sample fra “The Essential Guide to Flash CS4 with ActionScript”

Lynda.com Se kapitel 2 og 3 på listen med gratis videoer

Variables, Data types, Classes, Properties, Methods fra RC
loops fra republicofcode
if-conditions fra RC
branching fra tutsplus

arrays i 3 dele fra flashmagazine123

as3-101-variables
as3-101-arrays
as3-101-functions

Class A B C

Dette er en skabelon til en class. Actioncript-filen hedder: ABC.as.

Bemærk fil-navnet, class-navnet og constructor-navnet – som altid skal være ens.

A- B- C- D- er betegnelsen for niveauer, jeg vil referere til for at tydeliggøre strukturen i actionscript og for at gøre det nemt at implementere funktionalitet – (fx. fra andre poster i snippet-kategorien).

package {
    // ::: A ::: // flAAsh clAAsses importeres
    import flash.display.MovieClip;
 
    public class ABC extends MovieClip {       
        // ::: B ::: // variaBBler og oBBjekter BBliver BBrugbare i kommende funktioner
 
        public function ABC() {
        // ::: C ::: // CConstruCCtor - Indledende handlinger
 
        }
        // ::: D ::: // DDiverse funktioner DDu laver DDem
 
    }
}

Emner:
Linke til flash fil, movieclip, instanciering
Samme struktur på en framescript – forskelle – fordele / ulemper
OOP. Genbrug, uden copy-paste. Inheritance, Encapsulation & Polymorphism
Public, Private, Protected, Internal: Access Modifiers

XML loader

Hvad er XML?

Extensible Markup Language. En tekst-fil med extensionen: “.xml”, hvor repetitivt data og indhold kan lagres i en struktureret form, der anvender tags og atributter, som i xhtml.
Xml-filer agerer som lette databaser og som “feeds” i form af RSS-indhold. (Really Simple Syndication).

Hvorfor XML?

XML er let at redigere og ligger gerne ekstern i forhold til en flash-fil. Det bruges ofte til at lagre oplysninger som filnavne og stier på den type filer, der kan loades ind i actionscript (swf, jpg, gif, png, mp3, flv..). XML er foruden playlister af forskellig art, brugt til menusystemer.

Eksempel

Den rå kode for at loade en xml-fil, hvis du har en sådan:

//A
	import flash.net.URLRequest;
	import flash.net.URLLoader;
//B
	var XMLLoader:URLLoader = new URLLoader();
//C/D i relevant sammenhæng
	XMLLoader.load(new URLRequest("adressen_paa_din_xml_fil.xml")); 
	XMLLoader.addEventListener(Event.COMPLETE, onLoadXML);
//D
	function onLoadXML(e:Event):void  {
		var xml:XML = new XML(e.target.data);//xml i en string
		var xmlList:XMLList = new XMLList(xml.children());//emne liste
		trace(xml); //Prøv også: trace(xmlList);
	}

Det er praktisk at trace xml for at få indblik i filens struktur og indhold, hvis den loades fra en internet adresse. Læg mærke til Tagnavne og Atributnavne.
xmlList er nødvendig for at fortolke og få adgang til oplistede emner. Den indeholder nu struktur og data fra xml.

Filtrering af data

Kan sammenlignes med at skrive ’stien’ til det ønskede emne. Forestil dig som 100 årig foran en xml-fil med dine efterkommere:

xmlList.barn.barnebarn.oldebarn; for at nå frem til alle oldebørn.
xmlList.barn.barnebarn.oldebarn[0]; for at få fat i første oldebarn på listen.
xmlList.barn.barnebarn.@foedselsdag; er det samme som:
xmlList.barn.barnebarn.attribute(foedselsdag); for at se børnebørn med atributten: foedselsdag.

RSS Reader

//Paste fx. denne adresse ind i URLLoaderen's URLRequest: 
'http://curlingthebrackets.com/category/flash/feed/'
//og lav denne trace: 
trace(xmlList.item.title);

Galleri med XML

I eksemplet her, er navnene og adresserne på de billeder, som skal bruges i galleriet, listet op i en xml-fil.

Get Adobe Flash player

Opbygning og overblik

xmlgalleri0

Billedmapperne thumbnails og images indeholder samme billeder i henholdsvis lille og fuld størrelse.
Xml-filen: images.xml laves som en ganske almindelig tekstfil og lægges til dette eksempel i en mappe data og refererer til billedernes sti, navne og billedtekst:

<?xml version="1.0" encoding="utf-8"?>
<images>
	<image full="images/image1.jpg" thumb="thumbnails/image1.jpg">Description of image 1.</image>
	<image full="images/image2.jpg" thumb="thumbnails/image2.jpg">Description of image 2.</image>
	<image full="images/image3.jpg" thumb="thumbnails/image3.jpg">Description of image 3.</image>
</images>

Forberedelse (brug af classes)

En flashfil: XMLgallery.fla med et tomt movieclip: gallery
Linkage mellem gallery og en as-fil: gallery.as
Instanciering af gallery-class – ved at trække gallery ind på scenen – ELLER som her dynamisk med et framescript på scenen:

var gallery1:gallery=new gallery();
addChild(gallery1);

Opsæt gallery.as og dens class-constructor i sin package:

package {
	/// :::: A :::: /// Import af flash classes
	import flash.display.MovieClip;
	import flash.events.*;
	public class gallery extends MovieClip {		
		/// :::: B :::: /// Oprettelse af variabler og tilgængeliggørelse af objekt-navne
		public function gallery() {	
			/// :::: C :::: /// Indledende handlinger - "constructor"
		}
		/// :::: D :::: /// Tilknyttede funktioner	
	}
}

NB: Bemærk niveauerne A, B, C, D, som opdeler en class, hvori forskellige dele af et actionscript hører hjemme, og som jeg vil henvise til gennem alle nedenstående 3 trin. Hver funktionalitet involverer actions på flere af niveauerne.
Næste trins kode skal ikke erstatte den forrige, men flettes ind i den eksisterende kode på de anviste niveauer, og således implementeres.

Forberedelse (brug af framescript)

En flashfil: XMLgallery.fla med et actionscript-lag på scenen. På dens første keyframe kan niveau-inddeles med kommentarer:

	/// :::: A :::: /// Import af flash classes
 
	/// :::: B :::: /// Oprettelse af variabler og tilgængeliggørelse af objekt-navne
 
	/// :::: C :::: /// Indledende handlinger - "constructor"
 
	/// :::: D :::: /// Tilknyttede funktioner

Kodneanvisningerne i nedenstående trin bruges og flettes sammen i frameskriptet UDEN ORDET “PUBLIC” FORAN VARIABLER OG FUNKTIONER

Resten af arbejdet foregår med en trinvis scripting af funktionalitet i opsætningen, gennem følgende 3 trin:
1 – Load og fortolk xml-filen
2 – Load og vis alle thumbnails
3 – Load og vis det valgte billede

1 – Load og fortolk xml-filen

//Niveau A
	import flash.net.URLRequest;
	import flash.net.URLLoader;
//Niveau B
		public var xmlDoc:String="data/images.xml"; //Adressen på xml-filen
		public var xmlLoader:URLLoader=new URLLoader(); //Opret det relevante URLLoader-objekt
		public var xml:XML; //Navnet på xml-objektet
		public var xmlList:XMLList; //Navnet på den liste, hvori xml.elementerne kommer til at stå
//Niveau C
			// Load xml-filen med adressen
			xmlLoader.load(new URLRequest(xmlDoc));
			// Når xml-filen er færdig-loadet, udføres XMLCOMPLETE funktionen
			xmlLoader.addEventListener(Event.COMPLETE, XMLCOMPLETE);
//Niveau D
		public function XMLCOMPLETE(e:Event):void {
			// Påfyld flash's xml-beholder med xmlLoader-data!
			xml=XML(e.target.data);
			// Oplist elementerne fra xml-filens "rod" i rækkefølge
			xmlList=xml.children();
			// Udfør funktionen LOADTHUMBS
			LOADTHUMBS();
		}

2 – Load og vis alle thumbnails

//Niveau A
	// URLRequest skal kun tilføjes hvis den ikke er importeret på trin 1
	import flash.net.URLRequest;
	import flash.display.Loader;
//Niveau B
		public var thumbLoader:Loader;
//Niveau D
		public function LOADTHUMBS():void {
			var thumbUrl:String;
			// For hvert element i xml-filen dannes en "thumbLoader"
			for (var i:int=0; i<xmlList.length(); i++) {
				//værdien af hver "thumb" attribut overføres til thumbUrl
				thumbUrl=xmlList[i].attribute("thumb");
				thumbLoader=new Loader();
				thumbLoader.load(new URLRequest(thumbUrl));
				//thumbLoader bliver snedigt omdøbt til adressen på det fulde billede
				thumbLoader.name=xmlList[i].attribute("full");
				thumbLoader.x=20;
				// 130=thumb's bredde, 20= passende luft 
				thumbLoader.y=i*130+20;
				addChild(thumbLoader);
				// hver thumbLoader aktiveres til at kunne udføre SHOWFULL
				thumbLoader.addEventListener(MouseEvent.CLICK, SHOWFULL);
			}
		}

3 – Load og vis det valgte billede

//Niveau A
	// URLRequest skal kun importeres hvis den ikke allerede er der
	import flash.net.URLRequest;
	// Loader er allerede importeret i trin 2, skal kun tilføjes hvis den mangler
	import flash.display.Loader;
//Niveau B
		public var fullLoader:Loader;
//Niveau D
		public function SHOWFULL(e:MouseEvent):void {
			// fjern det viste billede, hvis der er et i forvejen
			if (fullLoader) {
				removeChild(fullLoader);
			}
			// Opret en fullLoader til det billede, der skal vises
			fullLoader=new Loader();
			//"e.target.name" er  "thumbLoader.name" fra LOADTHUMBS
			var imgUrl=new URLRequest(e.target.name);
			fullLoader.load(imgUrl);
			fullLoader.x=160;
			fullLoader.y=20;
			addChild(fullLoader);
		}

Ekstra funktionalitet

- En dynamisk tekstboks til at vise billedteksten fra xml-filen
- En Fade-effekt med flash’s indbyggedeTween-class, på selve billederne når de vises.

//Niveau A
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
//Niveau B
		public var imageText:TextField=new TextField();
		public var fadeTween:Tween;
//Niveau C
			// Sæt tekstboksens bredde
			imageText.autoSize=TextFieldAutoSize.LEFT;
			// Opret den tekstboks, som skal indeholde billedtekst
			addChild(imageText);
			// Kan starte med at vise en instruktion til bruger
			imageText.text=" Klik på en af billederne for at se et stort";
//Niveau D, indenfor SHOWFULL funktionen - nederst 
			// Placer tekstboksen lige over billedkanten
			imageText.x=fullLoader.x;
			imageText.y=fullLoader.y-20;		
			// Find den billedtekst, der hører til 
			for (var j:int=0; j<xmlList.length(); j++) {
				// Samlign thumbLoaders navn med alle xml-listens "full" atributter
				// "e.target.name" er "imageLoader.name" fra LOADTHUMBS
				if (xmlList[j].attribute("full")==e.target.name) {
					// Indholdet fra nummer "j" på xmlList er tekst indpakket i tags			
					// Overfør denne tekst til tekstboksen
					imageText.text=xmlList[j];
					// Igangsæt den importerede Tween class med ønskede indstillinger
					fadeTween=new Tween(fullLoader,"alpha",None.easeNone,0,1,1,true);
				}
			}

Yderlig øvelse og info:

Kapitel 14 i “Learning ActionScript 3.0″ handler specifikt om XML i AS: Strukturen, skrive, læse, slette, loade. Kapitlet afsluttes med en menubar som øvelse.
simple image loader

Tint

Hvis farvning foretages i en class:

//A
import fl.motion.Color;
import flash.geom.ColorTransform;
//D
function tintColor(mc:MovieClip, colorNum:Number, alphaSet:Number) {
   var cTint:Color = new Color();
   cTint.setTint(colorNum, alphaSet);
   mc.transform.colorTransform = cTint;
}
//C/D
// Kald funktionen med værdier for dens 3 parametre: 
// pågældende movieclip, den ønskede farve, mægde af alpha
tintColor(mc2, 0xFF00FF, .5);

Se her for variationer

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