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

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



Del:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg

2 kommentarer

  1. Niels siger: (10. august 2009 kl. 10:36 )

    Hej, jeg tænkte på, om det er muligt at lave effekter på menuen, i så fald hvordan gøres dette via kode.?

  2. Mads Buch Stage siger: (10. august 2009 kl. 17:00 )

    Hej Niels,

    Svaret er ja, der kan laves mange effekter på menuen - men der går desværre et stykke tid inden jeg selv har lejlighed til at vise et eksempel på det.

    /Mads

Skriv en kommentar