Navigatie in Flash

Doel is het maken van een site in Flash.

Hieronder staat een screencast van meneer Brouns waarin hij een eenvoudige navigatie in flash maakt.

Navigatie in Flash met Actionscript 3 from Luc Brouns on Vimeo.

Hier de originele pagina

Wat een mooie aanpassing zou zijn is het gebruik van een apart .as bestand om de ActionScript in op te slaan. Dit kun je doen door een Document klasse te koppellen en daarin de volgende code te plaatsen:

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import fl.transitions.easing.*;
	import fl.transitions.Tween;
 
	public class Navigatie extends MovieClip {
 
		public function Navigatie() {
                        // stop zorgt er voor dat de playhead niet meer verder loopt
			stop();
                       // grey is het grijze kleine vierkant dat we als knop gebruiken
			grey.addEventListener(MouseEvent.CLICK, colorNav);
			// hieronder moeten de andere knoppen nog komen...
		}
 
                // deze functie wordt aangeroepen als er op een vierkantje met de muis is geklikt
		public function colorNav(event:MouseEvent):void {
			gotoAndStop(event.target.name);
		}
	}
}

Bekijk hier hoe je een documentklasse kunt gebruiken…

Nog een uitbreiding:

Het dynamisch aanpassen van de vormgeving van een TextField

Dit kan door een TextFormat object aan te maken, dat de gewenste eigenschap waardes geven en vervolgens toe te kennen. In dit voorbeeldje (fragmenten code) heb ik een mouseover event gedefinieerd, en in de functie die bij dat event wordt aangeroepen pas ik het lettertype aan, de kleur en het formaat:

...
// eerst een import...
import flash.text.TextFormat;
 
...
// grey is een MovieClip of een SimpleButton
// ergens in een functie (de constructor bijvoorbeeld)
// koppel ik een event aan 'grey'
grey.addEventListener(MouseEvent.MOUSE_OVER, mouseOverGrey);
...
 
public function mouseOverGrey(event:MouseEvent):void {
    // greyLabel is een TextField
    greyLabel.text = "over";
    var format:TextFormat = new TextFormat();
    format.font = "Wide Latin";
    format.color = 0xFF00FF;
    format.size = 14;
    format.underline = true;
    greyLabel.setTextFormat(format);
}

Geef een reactie

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

*

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>