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.
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.
Met Flash maken we een website met AS3. In dit voorbeeld een portfolio, welke uit veel afbeeldingen bestaat. Al deze afbeeldingen moeten eerst op maat worden gemaakt.
Dat gaat handig met Bridge CS4.
De basisstructuur wordt gemaakt door in de tijdlijn de navigatie te verzorgen.
Achtergrond en knoppen worden gemaakt. Ze krijgen elk apart een laag.
De knoppen krijgen een roll-over effect.
Voor de inhoud wordt een aparte laag gemaakt.
De organisatie van de tijdlijn en het script komen in deze video aan de orde.
Het gaan naar een andere pagina wordt gesimuleerd door te springen naar een ander frame op de tijdlijn.
Er wordt gewerkt met AS 3.
Eerst krijgt de knop een instantie-naam.
Daarna wordt op de tijdlijn het script toegevoegd. Het eerste commando is het commando stop, dat verhindert dat de movie zich als een animatie afspeelt. Daarna komt de actie voor de knop(pen).
De navigatie op de tijdlijn wordt uitgebreid en er worden framelabels toegevoegd.
Deze maken de structuur inzichtelijker en wijzigingen zijn eenvoudiger aan te brengen.
Door knoppen in de bibliotheek te dupliceren, maak je extra knoppen erbij.
Voor de knoppen van een submenu maak je een aparte laag, met een extra hoofdframe.
De knoppen zijn soms binnen de movie te zien, en aan het begin staan ze onzichtbaar buiten de movie.
Verder werken de knoppen hetzelfde als de gebruikelijke knoppen.
We maken in het submenu een animatie. Dit gaat niet op de hoofd-tijdlijn maar we maken daarvoor een filmclip. De animatie kan dan helemaal in de filmclip. Je hebt dan alle vrijheid voor het maken van hoofdframes en frames en lagen en een stopscript.
Ook komen er nu zoveel afbeeldingen in de bibliotheek dat we ze moeten ordenen in mapjes.
De gallery wordt nu opgezet, waarbij de methode erg lijkt op een gewoon navigatiemenu (stap 2 en 3):
met een knop spring je naar een andere plek op de tijdlijn.
De grote afbeeldingen worden echter niet zomaar op de tijdlijn geplaatst. Dit zou de movie veel te zwaar maken
(het swf-bestand zou uit meerdere MB's gaan bestaan!).
Met een component: de UILoader worden de afbeeldingen getoond zodra ze nodig zijn.
In de gallery is het praktisch als je weer terug kan naar het overzicht.
Met Actionscript maken we de UI-Loader klikbaar, zodat er teruggesprongen wordt naar het frame met alle foto's.
De terugfunctie wordt maar één keer geschreven en elke Loader krijgt een eigen eventHandler.
Hier maken we een knop, die de volgende afbeelding in de gallery laat zien.
Ook maken we een terugknop.
Hier wordt ook duidelijk waarom de foto's in een opvolgende frames geplaatst zijn.
De flashmovie wordt in een HTML-document geplaatst.
Dit gaat met eenvoudig met Dreamweaver:
1. eerst site definiëren;
2. daarna een layout kiezen: 1 kolom, vast gecentreerd;
3. de pagina opslaan;
4. swf plaatsen;
5. lay-out in de breedte aanpassen;
6. padding verwijderen.
zet deze site als hij klaar is op N@tschool!