een website in Flash

Je maakt hier een website na met 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.

stap 0: foto's automatisch verkleinen in Photoshop (00:07:45)

Voor een flash-site moeten een hele reeks afbeeldingen verkleind worden.
Om dit voor een hele reeks te doen, kunnen we eerste een handeling maken, die zo vaak af te spelen is als wenselijk.
Door een druppel te maken, hoe je de afbeeldingen daar alleen maar op te slepen.

stap 1: knopversies in lagen in Photoshop (00:02:54)

Een site in Flash kan beginnen met een ontwerp in Photoshop. Wil je bijzonder vormgegeven knoppen, dan kan dat in Photoshop. Werk daar dan wel voor elke knop in een eigen laag. Ook een roll-over staat heeft en eigen laag nodig.
Bij import in Flash wordt elke laag in Photoshop een laag in Flash. Ook het werkveld wordt indien wenselijk vergroot naar het canvas van Photoshop.

stap 2: roll-over knoppen in Flash maken (00:03:23)

Je kunt overal een knop van maken. (behalve van een knop)
Je kiest via Wijzigen >> Omzetten in symbool... (of F8) en geeft de naam van de knop en het symbool-type Knop aan.
Vervolgens kun je op die kop dubbelkikken om deze te bewerken.
Hier zorgen we dat het bovenste beeld in het over-frame geplaatst wordt.

stap 3: inhoud plaatsen (00:06:52)

De knoppen worden in 1 laag geplaatst, de achtergrond in de onderste laag.
Omdat deze niet wijzigen worden in deze lagen alleen frames toegevoegd.
Voor de inhoud wordt een aparte laag gemaakt en met F7 worden daar zoveel lege hoofdframes gemaakt als er 'pagina's' zijn.
In elke lege frame wordt tekst en beeld geplaatst.

stap 4: het script (00:09:45)

De 'pagina's' worden nog als een animatie afgespeeld.
Met script wordt allereerst de animatie gestopt.
Om voor de knop een werkend script te krijgen geven we ze eerst een instantienaam, die in het script gebruikt gaat worden.
Het script wordt dan:
knop_btn.addEventListener(MouseEvent.CLICK, doeIets);
Als er nu op de knop geklikt wordt, wordt de functie doeIets uitgevoerd.
Die moet je dan nog wel omschrijven:
function doeIets(e:MouseEvent) {
gotoAndStop(nummer van een frame);
}
In dit geval laat de functie doeIets de movie naar een framenummer springen, zodat er een andere inhoud getoond wordt.

stap 5: animatie (00:11:05)

Flash is een prima instrument voor animaties.
In deze Flash-site kan dit het beste door eerst van de inhoud een filmclip te maken en daarin je animaties uit te voeren.
De tijdlijn in Scene 1 blijft daardoor net zo eenvoudig als die al was.
toch wordt in deze video een complexe animatie van 4 foto's gedaan, elk met vervaging en 3D.

stap 6: de site publiceren (00:06:11)

de swf wordt in deze video in een webpagina geplaatst.
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.


  1. Zet deze pagina in een map in de Public-map van Dropbox als de vorige training;
  2. Stuur de link van deze pagina naar t.denblanken@ma-web.nl met als titel training 1 Flashsite.