(page) REDIGERET 18 October 2011 • by admin

Menu og Galleri

Version “ligetil”

Menuen

På scenen er menuen her tegnet op som en firkant, hvorefter den er konverteret til et movieclip og kaldt slider – NB: også som instancenavn.
Igen på scenen er der sat tid af til animation. Den første frame kan få en label start, og længere fremme er der to labels for bevægelsen: in og out – på et lag kaldt Labels, naturligvis.
Derefter stop(); actions for at bremse sektionerne op – på et lag kaldt actions.
Så animeres fx. med motiontweens de forskellige stadier for slider – hvordan den kommer til syne, hvordan den viger tilbage -

Menuens design

Meningen er, at menuen skal kaldes frem og bruges, for derefter at vige for indholdet. Her i eksemplet er den en firkant der kommer ind fra siden. MEN – du giver den bare en anden form senere, tænk beholder med plads til knapper – og en anden placering og kombinerer evt. en anden slags animation (fx. zoom, noget der folder sig ud, kombinerer det med andre animationsteknikker..). Og så har nogen måske læst om easing, måske motion-presets, eller andre animation “hjælpemidler”.

Koden til menuens animation

På scenens action lag kodes både slider’s MouseEvent-funktioner – og senere knappernes.
Bemærk de to nye MouseEvents til at styre animationen med.
Test filmen med denne kode..

slider.buttonMode=true;
slider.addEventListener(MouseEvent.ROLL_OVER, M_OVER);
function M_OVER(e:MouseEvent) {
	gotoAndPlay("in");
}
slider.addEventListener(MouseEvent.ROLL_OUT, M_OUT);
function M_OUT(e:MouseEvent) {
	gotoAndPlay("out");
}

Galleriet

På scenen placeres en movieclip med instance-navn: galleri, hvori billeder (her er der 4 stk.) er lagt ind på hver sin keyframe. De får hver deres label (her samme navne som knap-navnene (b1, b2, b3, b4) - det er der en bagtanke med) og hver sin action stop();. Stop er ikke super nødvendigt her – vi navigerer med gotoAndStop – men det skader ikke.
Billeder, Labels og Actions ligger selvsagt på hver deres lag, inden i movieclippet: galleri.

Knapperne

Inde i slider er der arrangeret nogle knapper/movieclips. Her er der 4 instancer af samme rektangulære movieclip på det ene lag, og et lag med tekstbokse ovenpå – af dovenskabelige årsager. Disse knapper får hver deres instancenavn: b1, b2, b3, b4.

Koden til knappernes funktioner

Eksempel for b2, så det tilknyttede galleribillede vises

slider.b2.buttonMode=true; // kun for movieclips
slider.b2.addEventListener(MouseEvent.CLICK, B2CLICK);
function B2CLICK(e:MouseEvent) {
	galleri.gotoAndStop("b2");
}

Eksempel for b2, med roll-over og roll-out.:

slider.b2.addEventListener(MouseEvent.ROLL_OVER, B2OVER);
function B2OVER(e:MouseEvent) {
	slider.b2.alpha = .7;
}
slider.b2.addEventListener(MouseEvent.ROLL_OUT, B2OUT);
function B2OUT(e:MouseEvent) {
	slider.b2.alpha = 1;
}

Her er effekten en svag nedtoning via kodning af nogle egenskaber og værdier, men hvis nu fx. b2 fik sine egne sektioner på tidslinien, havde man kunne bruge: slider.b2.gotoAndPlay("somelabel");.

Flere variationer

Designet
Event target