Eén-pagina-site met Flash

Je maakt hier een online website in Flash die uit één 'pagina' bestaat.
Als de gebruiker met zijn muis over de pagina beweegt, verschuift deze zodat
een ander stuk van de inhoud verschijnt. Dit wordt met actionscript 3 gebouwd.
Het resultaat zie je hier.

stap 1: het brede venster opbouwen (00:07:34)

Met Flash wordt een heel brede pagina gebouwd, die afhankelijk van de positie van de muis heen- en weer schuift.
Daarvoor worden in deze video allerlei beelden naast elkaar gezet tot ver buiten het venster.

stap 2: de achtergrond afronden (00:03:35)

In dit voorbeeld is in Illustrator een achtergrond getekend,
die net zo breed is als alle afbeeldingen bij elkaar.
Deze wordt onder de afbeeldingen in de strook geplaatst.

stap 3: het script voor de beweging (00:07:43)

heeft de strook een instantienaam, dan voegen we script toe om de strook te laten schuiven.
Het script heeft als listener:
stage.addEventListener(Event.ENTER_FRAME, beweeg);
en de functie beweeg ziet er als volgt uit:

function beweeg(Event) {
verschil = mouseX - midden;
snelheid = verschil/30;
strook_mc.x += snelheid;
}

Met een minteken is de snelheid heel snel om te draaien.
Voor dit alles werkt zijn de variabelen midden, snelheid en verschil aangemaakt.

stap 4: de beweging afkappen (00:05:10)

De beweging van de strook moet stoppen als het einde is bereikt.
Dit kan met de Math.min en de Math.max functies.
Zij bepalen van twee waarden wat de laagste is (min) of wat de hoogste is (max).
Daarmee stellen we dat de x-waarde van de strook niet over bepaalde grenzen heen mag.
Dit voegen we binnen de accolades {} van de bewegingsfunctie toe.

stap 5: meer bewegende elementen (00:12:55)

Er worden 2 extra movieclips gemaakt, die tegen de knoppen in gaan bewegen.
Hiervoor worden slechts 3 regeltjes script toegevoegd!

Beide clips krijgen transparantie, en verschillende snelheden.
Door de regel
woorden_mc.x = -strook_mc.x
ontstaat een beweging in tegengestelde richting. De clip beweegt echter teveel naar rechts en dus moet er een flinke waarde van de woorden_mc worden afgehaald: - 4500 in dit geval.

stap 6: een knop actie (00:05:30)

Omdat de knop in een movieclip zit, moet je dat ook met het script duidelijk maken.
In ons voorbeeld doen we dat door strook_mc.gandhi_btn.addEventListener.........
Dan krijgt de knop gandhi_btn in de clip strook_mc een eventlistener.
In de actie wordt een movieclip van buiten het scherm naar binnen gebracht.

stap 7: tekst inschuiven met Tweener Class (00:06:06)

Om de tekst er mooi in te laten schuiven maken we gebruik van de Tweener Class.
Voor meer informatie:

stap 8: verwisselen met behulp van variabelen (00:06:58)

Als een nieuwe quote binnenkomt, moet de oude verdwijnen. Maar je weet niet welke clip de vorige keer gedaald is. Om dit vast te leggen worden er 2 variabelen gemaakt: 'vorige' en 'geklikt'.
Als er geklikt wordt, weet je welke clip de naam 'geklikt' moet krijgen. Maar voordat je dat doet, maak je 'vorige' gelijk aan 'geklikt' en vervolgens ken je de bedoelde movieclip toe aan 'geklikt'.
Met script kun je 'geklikt' dan naar beneden schuiven en 'vorige' omhoog.