Tutorial: Komplet site med dynamisk indhold og SwfAddress - del 3

Kategori: Tips og tricks | Kommentarer (0)
Gemt: 2008-06-17 11:02


Menuen er lavet, men nu skal der til at ske noget når man klikker på den, så derfor er det tid til at tage hul på den del af sitet som har med SwfAddress at gøre.

Som det første, er det derfor nu tid til at downloade SwfAddress, hvilket kan ske herfra:
http://www.asual.com/swfaddress/

Efter du har udpakket zip-filen, så finder du de filer som skal bruges til denne tutorial finder i mappen:
Samples\CS3

Herfra skal du kopiere de to mapper swfobject og swfaddress, såvel som filerne SWFAddress.as og SWFAddressEvent.as, og de skal placeres i samme mappe som din fla-fil.
Det kunne se nogenlunde sådan her ud:

Mappestruktur

Det første der skal til, er at vi udvider den funktion der kaldes når man klikker på en knap til, udover blot at trace et id, også at kalde en funktion fra SwfAddress:

function menuClick(_e:Event):void {
	trace(_e.currentTarget.menuid);
	SWFAddress.setValue(menuItems[_e.currentTarget.menuid].address);
}

setValue funktionen bruges til at ændre url’en, hvis sites url eksempelvis er www.mitsite.dk og du kalder funktionen med værdien produkter, så vil url’en ændre sig til www.mitsite.dk/#/produkter/

SwfAddress har en event der holder øje med ændringer i url’en, og det er den event man skal fange for så at loade det rigtige indhold når url’en skifter, den event hedder SWFAddressEvent.CHANGE.

Det er en lidt større funktion, så her kommer først koden og nedenunder forklaringen:

var idPrevious:Number;
var idCurrent:Number;
var idLoading:Number;

const SITE_LABEL:String = "Mit site - ";
function handleSWFAddress(_e:SWFAddressEvent) {
	//try {
		trace("swfaddress: " + _e.value);
		var _address = _e.value.split("/");
		if(_address.length > 2) {
			for(var _i = 0; _i < menuItems.length; _i++) {
				if(menuItems[_i].address == _address[1]) {
					idCurrent = _i;
					break;
				}
			}
		} else {
			idCurrent = 0;
		}
		trace("id: " + idCurrent);
		SWFAddress.setTitle(SITE_LABEL + menuItems[idCurrent].label);
		contentLoad(idCurrent);
	/*
	} catch(err) {
		trace("swfaddress error");
	}
	*/

}
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

De 3 første variabler bruges til at holde styr på hvilken side der blev vist før (idPrevious), hvilken side der vises nu (idCurrent) og hvilken side der er igang med at blive loadet (idLoading).

Dernæst er der en konstant der hedder SITE_LABEL, og den bruger jeg til når titlen på siden ændres. Hvis man eksempelvis er kommet ind på produktsiden, så skal siden title helst ikke kun være “Produkter”, men derimod “Mit site - Produkter”. Det giver et langt bedre overblik når man har mange tabs åbne, og derudover er det også den tekst der vil være default hvis man laver et bogmærke.

Så kommer selve funktionen der kaldes når url’en ændrer sig, og her er det vigtigt at bemærke en ting:
I eksemplet er der en try/catch som jeg har udkommenteret, og det er den fordi, at når man udvikler er det rarest at se den præcise fejl der måtte blive genereret, fremfor en “pæn” fejlmeddelelse man selv har lavet.
Til gengæld bør man overveje at lave en pæn fejlmeddelelse til når sitet i sidste ende går live, sådan så det opfører sig fornuftigt overfor brugerne - men nok om det.

Sammen med eventen får man en value, som er den del af url’en der kommer efter # og den skal så parses for at finde den korrekte side.
Der er tusind måder at parse strenge på, i eksemplet har jeg valgt den allermest simple, nemlig at splitte ved / og så loope igennem arrayet, men har man et større site er det også en oplagt mullighed at bruge Regular Expressions.

Den værdi der sammenlignes med url’en er address, som er den 2. værdi fra dette kald (som er beskrevet nærmere i del 2):

menuItemAdd("Kontakt os","kontakt-os","kontakt.swf");

Som det sidste, inden det korrekte indhold loades, så ændres titlen med funktionen setTitle, jævnfør det jeg skrev længere oppe.

Og, det var sådan set det!
Der er en række andre funktioner i sitet, men de er mere almindelige og har intet med SwfAddress at gøre, så dem vil jeg ikke gå ind i, men blot opfordre dig til at downloade det komplette site med fla-filer und alles.

Se den komplette demo af sitet her:
Site med SwfAddress (Bemærk det lækre design ;-) )

Og filen med det komplette eksempel kan nappes her:
site_med_swfaddress.zip

Håber det kunne bruges, og spørgsmål er som altid velkomne.


Tutorial: Komplet site med dynamisk indhold og SwfAddress - del 2

Kategori: Tips og tricks | Kommentarer (2)
Gemt: 2008-06-3 14:18


Med introduktionen overstået er det nu tid til at dykke ned i selve koden af for vores site.

Hvad er det første man har brug for i en menu? I vores tilfælde er det en simpel knap, med en tekst som kan udskiftes alt efter hvilket menu punkt der er tale om.

Derfor har jeg lavet et movieclip med følgende struktur:
- Top-lag med et dynamisk tekstfelt kaldet Label_txt (husk at embedde de nødvendige tegn!).
- Bund-lag med et movieclip kaldet Background_mc, som indeholder en farvet kasse der er baggrund for teksten.

I mit library har jeg herefter sat den til at blive eksporteret til ActionScript med navnet SiteButton:

SiteButton - Properties

Ingen klasser og i Flash
For at gøre denne tutorial så nem at følge som muligt, så er al koden lavet direkte på første frame i Flash og uden brug af underklasser, men skal man igang med et større projekt, så er det naturligvis oplagt at dele det op samt at bruge en ekstern kode-editor som eksempelvis FlashDevelop.

Menuen genereres
Som første skridt i at generere menuen er her først en funktion som samler de nødvendige informationer i et lille objekt som tilføjes til et array, der kommer til at indeholde alle vores menupunkter:

var menuItems:Array = new Array();

function menuItemAdd(_label:String, _address:String, _file:String):void {
	var _temp:Object = new Object();
	_temp.label = _label;
	_temp.address = _address;
	_temp.file = _file;
	menuItems.push(_temp);
}

De værdier som man sender med til funktionen er:
Label: Det som der skal stå på menupunktet, eksempelvis “Forside”.
Address: Det der skal tilføjes til url’en og som bruges i forbindelse med SwfAddress, eksempelvis “forside”.
File: Den fil der skal loades når man klikker på menupunktet, eksempelvis “forside.swf”.

Angående address, så er det værd at bemærke at værdien skal være unik, og da den bruges som url, så er det også bedst at undgå mellemrum og specialtegn.
Et menupunkt som hedder “Vores øl” kan derfor med fordel have address-værdien “vores-oel”.

Det site som vi laver i denne tutorial har 4 menupunkter, og derfor kaldes funktionen 4 gange:

menuItemAdd("Forside","forside","forside.swf");
menuItemAdd("Produkter","produkter","produkter.swf");
menuItemAdd("Profil","profil","profil.swf");
menuItemAdd("Kontakt os","kontakt-os","kontakt.swf");

Menuen vises
Nu har vi et array med alle vores menupunkter, og ved hjælp af det er det nu tid til at lave og vise selve menuen.

For at gøre det simpelt at ændre placeringen på menuen, er der først et par konstanter:

const MENU_X:Number = 10;
const MENU_Y:Number = 10;
const MENU_PADDING:Number = 10;

X og Y er startplaceringen for det første menupunkt, mens padding er mellemrummet mellem de forskellige menupunkter.

Her så selve funktionen som laver menuen:

function menuCreate():void {
	for(var _i = 0; _i < menuItems.length; _i++) {
		var _temp:SiteButton = new SiteButton();
		_temp.Label_txt.text = menuItems[_i].label;
		_temp.menuid = _i;
		_temp.x = MENU_X + (_temp.width * _i) + (MENU_PADDING * _i);
		_temp.y = MENU_Y;
		_temp.mouseChildren = false;
		_temp.buttonMode = true;
		_temp.useHandCursor = true;
		_temp.addEventListener(MouseEvent.CLICK, menuClick);
		addChild(_temp);
	}
}

Den looper vores array igennem, og for hvert objekt, så indsætter den en ny SiteButton, hvor teksten på Label_txt sættes.
Menuid refererer til knappens position i arrayet, sådan så knappen senere kan finde tilbage til det objekt den er lavet udfra.

mouseChildren = false fortæller Flash at objekter inde i SiteButton ikke kan interagere med musen, mens buttomMode og useHandCursor fortæller Flash at menupunktet skal opføre sig som en knap og at hånden skal vises ved mouseOver.

Hvis du compiler koden nu, så kommer der en fejl, for i denne funktion tilføjer vi også en eventListener, der lytter efter hvornår der klikkes på menupunktet, men den funktion den refererer til er jo ikke defineret endnu.
Den kommer til gengæld her:

function menuClick(_e:Event):void {
	trace(_e.currentTarget.menuid);
}

I først omgang er alt som denne funktion gør, at trace menuid’et, så vi kan se hvilken knap der er blevet klikket på.

Hvis du nu kører al koden, og såfremt du er en ligeså god designer som mig *host*, så vil burde du ende med et resultat nogenlunde i stil med det her:

Step 2

Og den samlede kode, efter lidt restrukturering, kunne se sådan her ud:

//////////////// MENU
const MENU_X:Number = 10;
const MENU_Y:Number = 10;
const MENU_PADDING:Number = 10;

var menuItems:Array = new Array();

menuItemAdd("Forside","forside","forside.swf");
menuItemAdd("Produkter","produkter","produkter.swf");
menuItemAdd("Profil","profil","profil.swf");
menuItemAdd("Kontakt os","kontakt-os","kontakt.swf");

menuCreate();

function menuItemAdd(_label:String, _address:String, _file:String):void {
	var _temp:Object = new Object();
	_temp.label = _label;
	_temp.address = _address;
	_temp.file = _file;
	menuItems.push(_temp);
}

function menuCreate():void {
	for(var _i = 0; _i < menuItems.length; _i++) {
		var _temp:SiteButton = new SiteButton();
		_temp.Label_txt.text = menuItems[_i].label;
		_temp.menuid = _i;
		_temp.x = MENU_X + (_temp.width * _i) + (MENU_PADDING * _i);
		_temp.y = MENU_Y;
		_temp.mouseChildren = false;
		_temp.buttonMode = true;
		_temp.useHandCursor = true;
		_temp.addEventListener(MouseEvent.CLICK, menuClick);
		addChild(_temp);
	}
}

function menuClick(_e:Event):void {
	trace(_e.currentTarget.menuid);
}

Nu har vi noget der ligner en menu, som man endda kan klikke på!

I næste del får vi ting til at ske når der bliver klikket :-)


Tutorial: Komplet site med dynamisk indhold og SwfAddress - del 1

Kategori: Tips og tricks | Kommentarer (0)
Gemt: 2008-05-29 12:29


Som jeg skrev i forbindelse med lanceringen af den sidste version af Se mor! - Digital konceptudvikling og design, så ville jeg benytte erfaringerne med SwfAddress derfra til at lave en lille tutorial, og i dag kommer så første del af den.

Mål
Målet med tutorialen er at lave et komplet og dynamisk microsite, der kan konfigureres via xml og loader alt indhold ind særskilt.
Og, som det måske mest interessante, så integreres det med SwfObject og SwfAddress, sådan så man kan bookmarke og linke til sektioner på sitet.

SwfAddress != SEO
Som noget af det første vil jeg gerne starte med at slå en tyk streg igennem en stor misforståelse som jeg ser flere steder:
SwfAddress har i sig selv intet med SEO (Search Engine Optimisation) at gøre.

SwfAddress gør det muligt forholdsvis enkelt, at lave et site i Flash, hvor man kan linke til og bookmarke bestemte sider og sektioner, med alle de fordele som det nu engang giver.

SwfAddress gør IKKE et Flash-site mere søgevenligt, da Google og andre søgemaskiner stadig ikke kan indeksere dynamiske Flash-sites, og derfor har det altså ingen effekt på det.

Ønsker man er SEO-optimere sit Flash-site, så er det oplagt at bruge SwfAddress som en del af sådan en løsning, men derudover kræver det også en del ændringer server-side.

Bare så vi lige har det på plads :-)

Flow
Det adskiller sig i bund og grund ikke ret meget at lave et site med SwfAddress og et uden, men der kommer en lille ændring i flowet, som jeg har forsøgt at skitsere her:

SwfAddress - Flow

Med andre ord så er det der sker, at der er en speciel event i SwfAddress som bliver aktiveret når url’en ændrer sig, her modtager man så den nye url som en streng, og så kan man ellers begynde og parse den og finde ud af hvad det var som der blev klikket på.

Så, det var introduktionen til det hele, i næste del tager vi hul på koden.


Ny version af Se mor!

Kategori: Egne projekter | Kommentarer (2)
Gemt: 2008-05-16 12:57


Se mor! - Digital konceptudvikling og design

Efter længere tids arbejde har vi netop smidt en ny version af Se mor! i luften:
Se mor! - Digital konceptudvikling og design

Udover ændringen i designet, så er der kommet en mere hensigtsmæssig måde at vise cases på, og derudover har vi også brugt SwfAddress sådan så man kan bookmarke og linke direkte til alle sider.

Erfaringerne med SwfAddress udmynter sig i øvrigt snart i en lille, eller måske endda en større, artikel.

God weekend!