Je maakt hier een fotogalerij in Flash. Hierbij wordt gebruik gemaakt van de UI-Loader. Hiermee laad je de eigenlijke foto's in flash. Deze foto's staan dus niet zelf in flash: hierdoor blijft het Flashbestand beperkt in bestandsgrootte.
Vooraf met je wel kunnen beschikken over miniaturen van de foto's. Deze maak je op maat met bijvoorbeeld Bridge. De hoogte moet 100 pixels worden worden (stel de maximale breedte in op 160 pixels). Ook de 'grote' foto's moeten op kleiner gemaakt worden dan dat de camera ze gemaakt heeft. Kies hiervoor een hoogte van maximaal 500 pixels (breedte maximaal 800 pixels). Een tutorial hierover vind je hier.
Er zijn kleine afbeeldingen, die je op het werkvlak zet.
Zet elke foto om in een movieclip en geef deze een instantienaam.
Als er op een knop geklikt wordt, moet de grote foto in de UI-Lader met de naam 'houder' geladen worden. Het script voor luidt:
f1_mc.addEventListener(MouseEvent.CLICK, toon1);
function toon1(MouseEvent) {
var fotoAdres:URLRequest = new URLRequest("afb/groot/DSC00543.jpg");
houder.load(fotoAdres);
}
Hierbij wordt eerst een adres gemaakt van een foto met de padnaam afb/groot/DSC00543.jpg
Als dit adres vast staat, kan deze zo geladen worden in de houder.
Er gaat met script geanimeerd worden: de foto in 'houder' moet naar binnen schuiven.
Daarvoor wordt de Tweener-class gedownload en uitgepakt.
link voor download | link voor documentatie | link voor bewegingstypen
Met onderstaand script heb je dan al de animatie:
import caurina.transitions.Tweener;
Tweener.addTween(houder, {x:168, time:2, transition:"easeOutSine"});
Door het type 'easOutSine' te gebruiken ontstaat er een beweging, die uitdempt.
nu het animeren gelukt is, gaan we met 2 afbeeldingen animeren.
De nieuwe afbeelding komt in een nieuwe houder met een eigen instantienaam 'houderBoven'.
'houder' heeft de vorige foto.
Ze schuiven alebei naar links.
Nadat de animatie is afgerond, wordt de afbeelding ook in 'houder' geladen, de houder wordt daarna onder 'houderBoven' geplaatst.
Dit kan door toevoeging van:
onComplete: function() {houder.load(fotoAdres); houder.x = 168}
Als men op een knop klikt, wordt 'houderBoven' eerst rechts buiten beeld gebracht, voordat de nieuwe afbeelding geladen wordt. Daarna kan het proces zich herhalen.
Om de knoppen niet door de foto's te laten bedekken, komen ze in aparte laag. De foto's worden met een masker afgedekt, zodat ze de knoppen niet raken."
de knoppen passen niet allemaal in een venster.
De aanwezige knoppen worden aangevuld met de overige afbeeldingen en het geheel wordt omgezet tot een movieclip met de instantienaaam 'strook_mc'.
Hierdoor werkt het script niet meer: daar moet het ook duidelijk worden dat de knoppen nu in een movieclip zitten.
Bovendien moeten de afbeeldingen nog omgezet worden naar een symbool (filmclip of knop) en een instantienaam krijgen.
afhankelijk van de muispositie moet de strook vertikaal naar boven of beneden schuiven.
Dit moet continue gebeuren: een ENTER_FRAME gebeurtenis.
Het beweegt al met het volgende script:
var midden:Number = 300; // hoogte gedeeld door 2
var snelheid:Number = 0;
var verschil:Number = 0;
stage.addEventListener(Event.ENTER_FRAME, beweeg);
function beweeg(evt) {
verschil = mouseY - midden;
snelheid = verschil/20;
strook_mc.y += snelheid;
}
Hierbij zijn 3 variabelen gedefinieerd met vanzelfsprekende namen, en die worden elk moment gebruikt om de beweging te berekenen.
De juiste knop is nu moeilijk te raken. In dit script mag de beweging alleen plaatsvinden als de muis NIET boven de knoppen is: we doen dit door de beweging alleen toe te staan als de muis een x-waarde heeft die groot genoeg is.
Hiervoor komt het if-statement:
if(mouseX > 160) {
hiertussen de acties ;
..
..
}
Om te voorkomen dat de strook te hoog of te laag komt maken we gebruik van de Math.min en de Mat.max functie, die van 2 waarden de laagste respectievelijk de hoogste kiest.
Zet deze galerij als hij klaar is, in de vorige flashtraining en het geheel op N@tschool!
Je kunt de galerij in een andere flash-site opnemen door ok daar de UI-Loader te gebruiken.
Je kunt daarmee niet alleen afbeeldingen, maar ook swf-movies inladen.
Vergeet daarbij niet de map met foto's mee te nemen en houdt de padnamen op orde!