Je maakt hier een website met schuivende inhoud in Flash CS5.5.
Als uitgangspunt kies je de foto's van de wandeling, die je in de eerste schoolweek gemaakt hebt.
Ook kun je werken met fotomateriaal van de lessen van Iris.
Het resultaat van de training zie je hier.
Een Flash-site waarbij de inhoud langs schuift heeft een eenvoudige opbouw.
Er is een menu en een laag met een grote filmclip, die alle inhoud bevat.
Door deze inhoud in outline te laten zien, kun je goed bepalen welke delen in een venster zichtbaar zijn.
Met de Tweener class kun je met 1 regel script een animatie laten plaatsvinden.
In deze tutorial schuift hij 1000 pixels naar links, zodat je een andere inhoud gaat zien.
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(inhoud_mc, {x:168, time:2, transition:"easeOutSine"});
Door het type 'easOutSine' te gebruiken ontstaat er een beweging, die uitdempt.
Nu we weten hoe je iets laat bewegen, moeten we ervoor zorgen dat dit gebeurt als we op een knop klikken. Dat gaat net zoals in de vorige tutorial:
knop_btn.addEventListener(MouseEvent.CLICK, doeIets);
function doeIets(e:MouseEvent) {
tussen de accolade komt nu de opdracht van de Tweener.
}
Je moet bij elke knop dus een functie aanroepen en bij elke functie komen er andere waarden waar naar toe geschoven moet worden.
Omdat we met script tweenen, kun je makkelijk meerdere dingen tegelijk laten bewegen.
Je kunt de opdracht eenvoudigweg tussen de beide accolades toevoegen.
Ook kun je in dezelfde regel 2 dingen tegelijk laten bewegen.
Flash is een prima instrument voor animaties.
Hier zie je hoe voor de inhoud de positie bepaald kan worden.
Omdat het nogal veel werk is de inhoud en het draadkruis telkens terug te plaatsen naar de uitgangspositie, kun je dat met script doen.
Ook in een site met schuivende inhoud kun je een animatie maken.
Daarvoor zet je een aantal foto's om in een filmclip. In die filmclip kun je dan de elementen animeren. In dit voorbeeld krijgt elke foto een bewegingstween.
Om ervoor te zorgen dat de beelden buiten het veld niet zichtbaar zijn, vallen alle tweens onder een masker.
Om ervoor te zorgen dat de animatie niet herhaald komt er in het laatste frame een stop-actie.
Om de animatie te kunnen zien, moet NA het verschuiven van de inhoud, de aniamtie gestart worden. daarvoor kun je een functie schrijven, die de opdracht bevat. Hier is dat:
function speelExpo() {
inhoud_mc.expo_mc.play();
}
Je kunt dan binnen de argumenten van de Tweener het volgende argument meegeven:
.... onComplete:speelExpo ....
Dan wordt de speelExpo uitgevoerd nadat de beweging klaar is.
De swf wordt in deze video in een webpagina geplaatst.
Deze video is gelijk aan in de vorige tutorial.
Met Dreamweaver wordt deze swf midden op de pagina gezet en de achtergrondkleur van de pagina wordt aangepast.
Omdat de webpagina in de Public-map van de Dropbox staat, kun je dan direct de openbare link kopiëren en versturen.