Je maakt hier een online website in Flash. Je maakt gebruik van actionscript 3 om te navigeren.
Er zijn knoppen waar een gebruiker op klikt en dan verschijnt er andere inhoud. Het resultaat zie je hier.
Als je een afbeeldingen-galerie wilt maken, dan kun je dat heel goed apart maken. Zie hiervoor deze tutorialreeks.
De achtergrond is in Photoshop getekend (950 bij 600 pixels) en opgeslagen als jpg-afbeelding. Het direct openen van een Photoshopbestand is ook mogelijk, zelfs met behoud van lagen. Hier is een jpg-document geïmporteerd om de bestandsgrootte te beperken.
De knoppen zijn in Illustrator getekend, daaruit gekopieerd en geplakt in een eigen laag in Flash. Vervolgens zijn de knoppen omgezet naar knop-symbool.
Door op een knop te dubbelklikken, kun je de verschillende toestanden van een knop bewerken: Omhoog, boven, omlaag en 'hit'-gebied.
Als je een hoofdframe (Fn +) F6 plaatst, kun je een nieuwe toestand van een knop tekenen of aanpassen.
Voor een roll-over maak je dus een keyframe in het 'boven'-frame en indien noodzakelijk kun je in het 'hit'-frame het gebied aangeven, waar de knop gevoelig is.
Voor de inhoud wordt een aparte laag gemaakt.
De inhoud is hier dat deel dat telkens anders zal zijn.
Je kunt ook hier afbeeldingen importeren, vlakken en tekst vrijelijk plaatsen.
Getekende vormen vallen binnen een laag vanzelf onder bitmaps en symbols (knoppen, filmclips en afbeeldingen).
Over de tijdbalk wordt in elke laag frames toegevoegd met (Fn+) F5.
n de inhoudlaag komt er voor elk stukje andere inhoud een Hoofdframe (keyframe) met de toets(combinatie) (Fn+) F6. Je kunt ook met (Fn+) F7 werken waarbij er een leeg Hoofdframe gemaakt wordt.
In deze stap komt het script voor de navigatie. We gebruiken hier AS3. Eerst zorgen we ervoor dat de knoppen een instantienaam hebben.
Vervolgens komt in het frame van de actielaag het volgende script:
stop();
bruggen_btn.addEventListener(MouseEvent.CLICK, naarBruggen);
function naarBruggen(MouseEvent) {
gotoAndStop(10);
}
De actie stop(); zorgt ervor dat er geen frames worden afgepeeld. Er moet immers gewacht worden op een klik op een knop, om vervolgens direct naar een ander framenummer over te gaan.
Dat gebeurt in 2 stappen: de addEventListener zegt dat bij een klik op de knop bruggen_btn de functie naarBruggen moet worden uitgevoerd. De functie naarBruugen houdt vervolgens in dat ernaar frame 10 moet worden overgegaan.
Hier zie je hoe eenvoudig aanpassingen in de site zijn door te voeren. Een afbeelding in de bibliotheek is snel aangepast. De inhoud op de pagina's kan vervolgens ook weer herplaatst worden.
Wil je de inhoud een animatie geven, dan maak je daar eerst een filmclip (movieclip) van.
Door op de filmclip te dubbelklokken, kun je zijn eigen tijdlijn gaan bewerken en daar ook weer lagen aanbrengen.
Je weet nog wel dat voor elk element dat beweegt een eigen laag aangemaakt moet zijn en dat alleen symbolen een animatie kunnen krijgen.
Met de caurina Tweener class (te downloaden van Google-code) kun je met script animeren.
Maak van de te bewegen elementen eerst een filmclip (movieclip).
Zorg ervoor dat Flash de Tweener Class importeert. Daarna wordt de filmclip met script buiten de stage geplaatst om vervolgens met de regel naar binnen te schuiven:
Tweener.addTween(myMovie, {x:10, time:1, transition:"linear"});
'myMovie' is de instantienaam van de movieclip, die je beweegt;
x:10 betekent dat je de x-positie naar 10 toe animeert.
Je kunt in dezelfde regel ook de y-postitie naar een waarde bewegen;
'time:1' zegt dat de animatie 1 seconde duurt;
Het type van de beweging is hier 'linear' maar kan bijvoorbeeld ook 'easeOutSine', 'easeInOutSine', 'easeOutElastic' of 'easeOutBounce' zijn.
Ook is het argument delay=0.5 toe te voegen waardoor de beweging en halve seconde later wordt gestart.
site met de Tweener-class
downloadpagina voor Flash AS3
documentatie
bewegingstypen
extra mogelijkheden
Deze stap is niet bitter noodzakelijk maar geeft wel enkele praktische voordelen.
Door frame te voorzien van labels zie je in een oogopslag waar de verschillende inhouden zitten.
Als je bovendien in het script naar de labels laat springen in plaats van naar framenummers, kun je ook frames toevoegen of weghalen, zonder dat je het script moet aanpassen.
De bestandsgrootte van de flash-movie kan door de gebruikte bitmaps behoorlijk groot worden. Dit komt omdat ze allemaal met de Flash-movie meegebakken worden.
Met de component UI-Loader kun je afbeeldingen tijdens de movie inladen. Hierdoor wordt de bestandsgrootte beperkt.
Met het venster componenten kun je de component op het werkblad zetten en met het venster component-controle kun je de geschikte afbeelding aanwijzen en instellen dat je niet wilt schalen.
De swf wordt op een webpagina geplaatst.
Dit kan eenvoudig met een vooringestelde lay-out in Dreamweaver.
Denk aan het definiëren van de site, het opslaan van de nieuwe pagina en aan de extra bestanden die Dreamweaver dan aanmaakt.
Het invoegen zelf is eenvoudig met Invoegen>Media>SWF...
Er is een aparte pagina voor een bestelformulier aangemaakt. d
Daarin wordt een tekstinvoer veld gemaakt.
Vanuit de componenten, wordt tekstinput gehaald.
De skin wordt aangepast en via script wordt de tekststijl bepaald:
var tekstStijl:TextFormat = new TextFormat();
tekstStijl.font = "Gill Sans Ultra Bold";
tekstStijl.size = 14;
tekstStijl.color = 0xFF0000;
naamTi.setStyle("textFormat", tekstStijl);
Ook kan de tekeninvoer worden beperkt. Als je bijvoorbeeld geen cijfers wenst geef je dat op met
naamTi.restrict = "A-Z .a-z";
Het formulier wordt verder afgemaakt.
Er wordt een checkbox toegevoegd vanuit de componenten, maar ook een radiobutton (keuzerondje) en een verzendknop.
De labels van deze elementen krijgen ook weer een eigen stijl via het script.
Met wat actionscript wordt functionaliteit toegevoegd aan het formulier.
Om af te dwingen dat er een keuze gemaakt wordt voor de betaalwijze wordt de bestelknop eerst verborgen.
Pas nadat een selectie gemaakt is verschijnt deze weer.
Afhankelijk van de keuze ga je via een klik op de knop naar een andere webpagina.
zet deze site als hij klaar is op N@tschool!
In deze special, wordt eerst het draaipunt van de knop aangepast. De vorm wordt eerst gekopieerd en onder de knoppenlaag geplakt en gesplitst tot een vorm.
Vervplgens wordt de knop verplaatst, en daarna bewerkt, waarbij de inhoud in elk frame wordt teruggeplaatst.
Gebruik hierbij de pijltjes-toetsen in combinatie met de shift-toets.
Om knoppen te animeren wordt de tween-class gebruikt.
Eerst verdraaien en daarna teruganimeren naar de uitgangspositie.
Ongewenste delen van de verdraaiing kunnen worden gemaskerd.
Maak voor ELKE knop een masker. Dit is een vorm die tot movieclip is gemaakt.
Met één regel script kun je de knop vervolgens maskeren:
knop_btn.mask = masker_mc.
Hierbij is masker_mc de instantienaam van het masker.
We hebben flink wat regels script, die we de vorige video gemaakt hebben. Als we ze vaker willen aanroepen, kunnen we ze makkelijker aanroepen.
We zetten alle acties om in een functie, en we roepen deze functie aan bij frame 1, zodat hij uitgevoerd wordt bij de start.
Vervolgens roepen we hem ook aan bij elke knopactie in het navigatiemenu.