Je maakt hier een website met schuivende inhoud in Flash Catalist 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 deze training zie je hier.
Het volledige ontwerp van de site kan in Illustrator gemaakt worden.
Denk daarbij aan de verschillende pagina's in verschillende lagen van Illustrator, de verschillende toestanden van een knop in Illustrator.
Handig daarbij is om alle lagen duidelijke namen te geven en de lagen handig te ordenen.
Zet knoppen bij knoppen in dezelfde laag, de achtergrond apart en zo voorts.
Dit alles werkt net zo in Photoshop.
Flash Catalist kan het ontwerp direct vanuit Illustrator inlezen.
Je kunt de verschillende lagen van 1 knop selecteren en vervolgens vertellen dat eht een component van het type Button is.
Je ziet ook hoe je de verschillende 'states' van een knop kunt maken door verschillende lagen 'uit' of 'aan' te zetten.
Vergeet ook het Filter-tool niet in het eigenschappen-venster.
Een Flash site heeft geen losse pagina's en ook Catalist maakt ze niet. Je kunt ze suggereren.
Je kunt de verschillende inhouden laten zien door telkens een nieuwe 'state' aan te maken en daarin de juiste lagen aan te maken.
De knoppen kun je eenvoudig laten werken als je de verschillende states hebt.
Wijs de knop aan;
Kies Add interaction;
Kies Application;
en kies naar welke state er gesprongen moet worden.
Er komt in de tijdbalk beneden ook de mogelijkheid om de overgang 'smooth' te laten verlopen.
Elke overgang is dan apart instelbaar.
Om en stook met foto's te schuiven, moet de strook ook omgezet worden naar een component. (Custom component)
Als je de component bewerkt, kun je daarin verschillende states maken.
Met de knoppen in het menu, kun je dan binnen de component de verschillende states naar elkaar laten overgaan.
In dit voorbeeld bewegen ze dan.
Een vorm kun je omzetten in component van het type Textinput.
In de eigenschappen van de component kun je de tekst ingeven, die vooraf te zien is en verdwijnt als je gaat invullen. Doe dit bij 'Prompt'.
Vervolgens kun je de states weer bewerken. vooral de typografie van het invulveld kun je bepalen als de de state van 'Normal" bewerkt.
Ook de tab-index is aan te geven.
Een tekst met checkbox kan worden geselecteerd en omgezet in een component van het type checkbox.
Je krijgt vervolgens de mogelijkheden van de toestanden van de gekozen en niet-gekozen versies te bewerken.
Radiobuttons maak je ongeveer op dezelfde manier als checkbox elementen.
Het kenmerkende verschil is dat radiobuttons tot een groep behoren. Van die groep kan slechts 1 optie geselecteerd worden.
In deze video wordt ook nog de bestelknop gemaakt.
In deze tutorial kom je eigenlijk alleen maar technieken uit de vorige video's tegen.
Er moet bij een taalkeuze echter wel veel gebeuren.
Niet alleen de inhoud verandert, maar ook de titel en de knoppen zien er in de Engelse versie anders uit. Voor de Engelse knoppen moeten de verschillende 'states' gemaakt zijn. Ze kunnen voor de Nederlandse pagina's buiten beeld geplaatst worden. Voor de Engelse pagina's zijn de Nederlandse knoppen weer buiten beeld.
UIt de Nederlandse homepagina, wordt de Engelse gemaakt door daar een nieuwe 'state' voor te maken.
De taalkeuze knop Engels laat de site naar die state 'homeEngels' toegaan.
De taalkeuze knop Nederlands laat de site naar de gewonde homepagina gaan.
Je ziet in de video ook hoe de overgangen naar de homepagina's vloeiend gemaakt worden, zodat de knoppen boven het beeld in- en uit-schuiven.
Hierna kun je op dezelfde manier als daarvoor uit de Engelse homepagina, de ander Engelse pagina's maken.
De getoonde webpagina uit Catalist staat niet in het midden en laat ook inhoud zien, die buiten het artboard ligt.
Om de site te publiceren, exporteren we deze eerst: Catalist maakt zelf een map hiervoor.
Exporteer in iedr geval met 'build version for upload to a web server'. en 'Build for accesibility".
Vervolgens maken we met Dreamweaver een de hoofdpagina index.html, waarin een iFrame geplaatst wordt. Door dit frame heen zie je de pagina, die Catalist gemaakt heeft.
Tot slot zetten we dat iFrame in het midden, door daar een wrapper omheen te plaatsen.