Hi and welkom!
Dit is de laatste les van de workshop. Zoals ik al eerder heb gezegd, we gaan een samenhang maken van bijna alle lessen die we hiervoor hebben gehad. Alles gaat samenkomen in een mooie Flash website waarvan je het design mag gebruiken, maar alleen voor jezelf. Het is namelijk een ontwerp van mij, en dat mag niet gebruikt worden voor andere doeleinden dan voorjezelf. Dus geen bedrijfswebsite of iets dergelijks, maar alleen als test voor persoonlijk gebruik. Mocht het toch gebruikt worden, en ik kom het tegen, dan wordt je niet blij! 
Goed, laten we beginnen met het bouwen van een leuke Flash website. Deze website is anders dan de standaard websites. De knopjes zien er heel anders uit, de indeling is heel anders, het is gewoon anders. Ik probeer mezelf altijd te onderscheiden van de kudde wat iedereen volgt. En op deze manier kun je nogmaals zien wat er allemaal mogelijk is met dit prachtige programma!
Stap 1:
Maak een nieuw document aan. Geef dit document de volgende afmetingen: 900×600 pixels. En de FPS kun je instellen op 25.
Stap 2:
We gaan nu de achtergrondkleur veranderen. In je “properties” panel zie je “background” staan en een klein wit vierkantje. Klik op dit vierkantje zodat het kleurenpallet geopend wordt. In het kleurenpallet bovenaan zie je de kleurcode staan. Vul daar het volgende kleurcode in: #B8C9C3
Stap 3:
Nu gaan we de eerste spullen importeren. Download eerst deze ZIP. Open het en importeer alle onderdelen in je library. Je weet inmiddels hoe dat moet.
Stap 4:
Kijk in je library en vind daar het “wolken” bestand. Sleep dat in je stage en noem die layer “wolken. Klik nu op je wolken en maak daarvan een movieclip.
Stap 5:
We beginnen met het animeren van de wolken. De wolken zijn een leuk extratje aan de website. We gaan de wolken constant van links naar rechts of andersom laten bewegen. Een soort lucht wind effectje dus.
Als je klikt op je wolken ga je in de movieclip zitten en van daaruit verder werken. Nu je in de movieclip zit ga je de wolken helemaal naar rechts slepen, buiten je werkveld. Daarna trek je een hulplijntje zodat je weet op welke hoogte je het straks naar links moet trekken.
Daarna klik je op de frame, rechtermuisknop en klik je op “create motion tween”. Nu ga je naar frame nummer 400 en klik je op F6.
Pak je wolken weer vast, en sleep het helemaal naar links buiten je werkveld. Dit doe je uiteraard op frame 400, niet vergeten!
Test je filmpje nu uit. Zo simpel is het bijvoorbeeld om wolken te laten waaien
Als je wilt dat je wolken nog langzamer gaan kun je de keyframe op frame 600 zetten bijvoorbeeld. Als je het sneller wilt zet je het bijvoorbeeld op 300 .
Stap 6:
Nu gaan we de buttons gebruiken. Maak een nieuwe layer aan en noem deze “buttons”. Klik op de frame, en sleep daarna de buttons uit de library je werkveld in. Je zult zien dat alles bij elkaar hoort. Dat is handig want we gaan de knopjes uit de lucht doen vallen.
Zorg er wel voor dat de buttons buiten je werkveld vallen, want het moet eerst leeg zijn en daarna komen ze het werkveld in.
Klik met je rechtermuisknop op de frame en doe dan “create motion tween”. Nu gaan we een paar keyframes plaatsen om het vallende effect te creeeren. Op de volgende frames klik je op F6 om een keyframe te plaatsen, 25, 30, 40, 45 en op 60. Dat zijn de keyframes in de motion tween. We hebben nog 1tje nodig en dat moet op 61. Op frame 61 klik je op de rechtermuisknop en doe je “remove motion tween”. Daarna open je je actions panel, en schrijf je STOP (); in de actionscript gedeelte.
Stap 7:
Om een mooi effect te creeeren gaan we de “easy” functie in de “properties” gebruiken.
Op frame 1, bij de eerste keyframe dus ga je de easy functie op -100 instellen.
Op frame 25: Easy out 100
Op frame 30: Easy in -100
Op frame 40: Easy out 100
Op frame 45: Easy out 100
Nu heb je een mooi effect wat betreft het stuiterend invallen.
Stap 8:
Nu ga je naar frame 61 en daar klik je op de buttons in je werkveld. Vervolgens klik je met je rechtermuisknop op “break apart”. Nu zijn je knopjes los, dus ook de lijntjes en je rondjes.
Selecteer met hulp van de “shfift” knop de elementen die bij elkaar horen. Dus de lijn, het rondje en de text bij knop 1. Klik daarna op je rechtermuisknop en dan op “convert to symbol” en dan kies je “button”.
Doe dit ook voor de andere knopjes.
Stap 9:
Nu je alles “buttons” hebt gemaakt, gaan we in de buttons werken om een animatie te maken. Dubbelklik op de de eerste button zodat je erin gaat zitten. Eenmaal erin heb je zoals je weet 4 frames. Alleen de UP frame is vol. Klik nu op je button en creeer opnieuw een symbool, maar ditmaal een “movieclip”.
Nadat je dat hebt gedaan klik je dubbel op het knopje zodat je ook daarin gaat zitten. Nu zie je 1 layer met alleen de eerste frame vol. Hier gaan we een slingerend effect in maken, zodat de knopjes heen en weer gaan slingeren en een leuk dynamisch effect ontstaat.
Stap 10:
Als eerst klik je op het knopje en klik je op de “free transform tool”. Nu zie je op je knopje in het midden een rondje zoals hieronder.
Klik op dat rondje en sleep het daarna op het puntje van de witte lijn, helemaal boven zoals hieronder te zien.
Nu heb je ervoor gezorgd dat als je dit onderdeel gaat draaien, dat ie om dat rondje heen gaat draaien. En omdat wij de buttons gaan laten slingeren, slingeren ze vanaf dat punt.
Stap 11:
Klik nu op je rechtermuisknop en doe “create motion tween”. Nu gaan we 3 keyframes plaatsen en dat doen we op de volgende framenummers: 25, 50 en 75.
Als je dat hebt gedaan klik op keyframe nummer 25 en middels het “free transform tool” draai je het knopje een klein stukje naar links.
Als je dat hebt gedaan klik je op keyframe 50, en daar draai je het knopje een klein stukje naar rechts.
Nu gebruiken we weer de “easy” functie. Op keyframe 1 doe je: Easy out 100, en op keyframe 25 doe je ook Easy out 100.
De button is nu klaar. Doe dit ook voor de andere buttons, maar plaats dan de keyframes niet op exact dezelfde framenummer. In plaats van frame 25 doe je dan bijvoorbeeld 20, of juist 30. Dit zorgt ervoor dat alle knopjes niet tegelijk gaan slingeren!
Stap 12:
Oke, deel 1 van de website is klaar. Je hebt nu de buttons gereed gemaakt, maar de rest moet natuurlijk nog komen.
Volgende keer gaan we verder met de rest van de website. Het is namelijk vrij groot! Dus zorg maar eerst dat dit deel goed werkt
