(index) LIST of posts

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

Tutorials Navigation

Menuer

flashvalley mouse_events_in_actionscript_3.0

flash-and-silverlight-fish-eye-menu (Classes)

Med en tweener

riacodes.com: smooth-horizontal-menu-with-as3
riacodes.com: circular-menu-with-as3
riacodes.com: create-a-bouncing-menu-with-as3
riacodes.com: sliding-menu-with-actionscript-3-and-tweenlite
flashmymind.com: modern-horizontal-flash-menu

Med xml

xml accordeon

ria-coder.com/blog/creating-xml-based-menus-with-flash-cs4-and-flex

Navigation generelt

riacodes.com: create-a-sliding-content-with-back-and-forward-navigation
Lineær sekvens af swf-filer loadet med en funtion i en samlende film

Biltur

En øvelse med movieclips inden i movieclips inden i movieclips – som gerne skulle samle op på det basale animation, flere tidslinier og anvendelsen af playback-actions.

Hierarkien for objekterne er som følgende:
biltur
< instancenavn >
blå: indeholder motiontweens
grøn: indeholder shapetween
gul: indeholder en tidslinie med “sektioner”
grå: knapper

.

Tutorials Sound

Lyd på timeline

event eller streeming basic howto
lyd på knap og edit envelope

Sound object

soundbasic play stop
Simple playback sound load
Komplet Sound-gennemgang fra republicofcode
Simple playback med volumeslider
Nem tutorial med playback og volume
interessant script med spectrum

sound basics fra gotoAndLearn

Player

Player i en class

Med xml playlist

gskinner- omfattende

Tutorials Video

import wizzard til cs3
den lynhurtige component(hvis man har en flv)

skew video
Videoer i movieclips og hjemmelavede knapper
videoplayer med xml playlist
pixel2life.com: play_videos_in_sequence_using_flash

Alt om video indsættelsses teknik. Bemærk den tekniske forklaring om encoding “View Screencast: Section Four”
pixel2life.com: an_introduction_to_flash_video

Alt om video Caption (undertekst) – med xml
video caption med Tom Greene
Og anden del af serien

Youtube Cromeless player AS3 Api
riacodes.com: develop-with-the-official-youtube-chromeless-player-as3-api