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

Deze week gaan we weer iets met masking doen zodat je kunt zien wat je eigenlijk allemaal met flash kunt doen. We gaan namelijk 2 foto’s pakken waarmee we gaan spelen zodat we een dynamisch effect krijgen. 

Voor een voorbeeld van wat we gaan maken klik je HIER. 

Laten we beginnen. 

Stap 1: 

Voordat we gaan beginnen download je de 2 foto’s die we nodig hebben. 1tje is een foto van een gebouw die ik op internet heb gevonden. Die kun je overal vinden waar je maar wilt, try Google of flickr.com bijvoorbeeld. 

De 2de foto is de wolk die achter het gebouw langs gaat komen. Die heb ik gedownload van een of ander texture website. Daar heb je een hoop gratis textures die je kunt downloaden. Probeer het maar eens vanuit Google. Ik heb deze foto gepakt en in photoshop aan elkaar geplakt zodat het langer werd. Waarom zul je straks zien. 

Download het zip bestandje HIER.

Stap 2: 

Maak een nieuw bestand aan. Houd de FPS op de standaard instelling. Maar pas de grootte van het bestand aan op 600 x 450. 

Stap 3: 

Nu gaan we de gedownloade bestanden importeren. Elk op aparte layers. 

Het is je misschien opgevallen dat de wolk een JPG bestand is, en het gebouw een PSD bestand. Waarom dat zo is leg ik hier uit. Als je de PSD bestand opent zul je zien dat het gebouw is uitgeknipt en geen achtergrond heeft. Dat moet het natuurlijk ook niet hebben want daar gaan we onze eigen wolk achter langs laten lopen. Als je deze PSD als JPG opslaat en het importeert in Flash zul je zien dat er een achtergrond is bijgekomen. Dat is nou eenmaal zo met JPG bestanden, die kun je niet doorzichtig laten. Vandaar dat ik het als een PSD heb gelaten, zodat je direct een doorzichtig geknipt foto hebt. 

Als je dus iets doorzichtigs wilt hebben, sla het dan op als een PSD en importeer het dan in Flash. 

Goed nu heb je dus de 2 foto’s geimporteerd. Noem ze “gebouw” en “wolken” zoals hieronder te zien. 

Stap 4: 

Zorg ervoor dat je plaatjes netjes uitlijnt op de 0 punt. Je kunt dat doen bij de “properties” panel zoals hieronder te zien. 

De X en de Y as zijn allebei op 0. Daarmee lijnt het precies uit. Doe dit voor het gebouw, maar voor de wolken kunnen op de Y as natuurlijk niet op de 0 punt. Want die moet aan de bovenkant en links uitgelijnd worden. Dus dan wordt de X as wel 0, maar de Y as wordt dan 600. 

Stap 5: 

Klik op de wolken layer en maak een motion tween hiervan. Ga naar frame 750 en maak daar een keyframe aan. Motion tweens maken heb je eerder al gedaan en moet je inmiddels weten. Zo niet, kijk dan terug naar de eerdere tutorials. 

Vergeet niet het gebouw layer ook tot frame 750 door te laten lopen. 

Stap 6: 

Met de keyframe op 750, ga je de wolken naar links schuiven, zodat het rechts uitgelijnd wordt. Kijk naar onderstaand screenshot.

Stap 7: 

Nu we dat gedaan hebben gaan we 1 laatste ding doen. Een masker zetten om het plaatje heen. Maak een nieuwe layer aan, noem het masker en zet het boven de “wolken” layer. Je filmpje is 600 breed, dus teken nu een rechthoek van 600 x 400. 

Klik op de layer, op je rechtermuisknop en klik op “Mask”. Nu heb je de wolken layer gemaskerd zodat het niet uitsteekt aan de linker en rechterkant. 

Stap 8:

Test je filmpje! We zijn namelijk klaar. Zo zie je dat je niet perse animaties en tekeningen moet maken om leuke dingen te kunnen doen met Flash. Nu zie je dat je ook met echte foto’s dynamiek kunt creeeren. Je kunt op dezelfde manier bijvoorbeeld een autotje laten rijden of wat dan ook. Je kunt alles doen wat je wilt! 

Mocht je het niet snappen vraag het dan hier. En anders mag je de bronbestand HIER downloaden.

Deze week gaan we weer iets anders maken. Een fotoalbum Maar niet zomaar 1tje, eentje die er mooi uitziet. Deze week heb ik een mooi design gemaakt, en het ziet er erg leuk uit. Meesten van jullie zouden dit ook al moeten kunnen maken, want zo moeilijk is het nou ook weer niet, maar toch heb ik de PSD klaarstaan voor jullie. 

Goed, voor een voorbeeld van wat we gaan maken, klik je HIER. 

Voor we beginnen download je het PSD bestand, zodat je foto’s al klaar hebt staan. Klik HIER.

Stap 1:

Maak een nieuw bestand aan, en maak het 800 x 600 pixels. De FPS kun je laten op 12. 
Maak de achtergrond kleur donkergrijs.

Stap 2:

Nu gaan we de PSD importeren in de bibliotheek. Dit doe je via FILE > IMPORT > IMPORT TO LIBRARY.
Voordat we daarmee verder gaan, gaan we de layers netjes organiseren.

Stap 3:

In totaal hebben we 6 layers, en 6 frames. Het lijkt moeilijk, maar zoals ik al zei, het is erg simpel om zoiets te maken.
Maak 6 layers aan, waarbij de allereerste layer tot frame 6 moet doorlopen. Noem deze layer “knopjes”.

De resterende layers gaan de foto’s bevatten, dus noem die layers foto 1, foto 2 etcetera.  Elk van deze layer moet steeds op een volgende frame beginnen. Dus foto 1 heeft een keyframe op frame 2. Foto 2 heeft een keyframe op frame 3. Kijk naar onderstaand voorbeeld. 

Stap 4: 

Op elke keyframe gaan we stukje code plaatsen om het te stoppen. Dit weten jullie inmiddels al: stop (); 

Stap 5: 

Nu we de layers georganiseerd hebben gaan we de geimporteerde fotos inladen. Klik op de “knopjes” layer en ga naar je bibliotheek. Selecteer daar je PSD bestand en sleep het je werkveld in. Maak het zonodig wat kleiner via de “free transform” tool, mocht het niet passen.

Klik nu op het bestand en dan je rechtermuisknop, en klik op BREAK APART. Nu is alles uit elkaar. 

Stap 6: 

Nu gaan we de foto’s verdelen over de layers. Dit kun je zelf simpel doen door op foto 1 te klikken, CUT te zeggen, op de foto 1 layer te gaan op de keyframe en PASTE te klikken. Nu is foto 1 op layer 1. Doe ditzelfde voor elke foto, maar laat de buttons wel op deze layer staan. 

Stap 7: 

Oke, nu je de foto’s hebt verdeeld gaan we de knopjes maken. De knopjes worden onzichtbare knopjes die we netjes over de foto’s gaan plaatsen. Een onzichtbare knop weet je inmiddels te maken, maar zal ik alsnog kort uitleggen. Klik op F8 om een nieuw symbol te maken. Kies button, en geef het een willekeurig naam. Nu ben je in de button en zie je de 4 frames. 

Ga naar de HIT frame en klik op F6 voor een nieuw keyframe. In die keyframe trek je een willekeurig rechthoek. Nu ben je klaar, en gaan we weer terug naar je scene. 

Stap 8: 

Sleep je button uit de library je werkveld in. Doe dit wel in de “knopjes” layer natuurlijk. Je ziet nu de lichtblauwe button die je kunt vervormen met de “free transform tool”. 

Je kan dezelfde knopje 5 keer kopieren en over elke foto heen plaatsen. Kijk hieronder hoe ik het gedaan heb. 

Het hoeft niet precies 100% perfect te zijn, maar werk wel netjes natuurlijk. 

Stap 9: 

Nu je de knopjes klaar hebt staan, de foto’s hebt geplaatst zijn we bijna klaar. We gaan nu wat actionscript toevoegen. Klik op de eerste knopje, ga naar je “actions” panel en voeg daar onderstaand stukje code in:

on (release)
  { gotoAndStop ("foto1") ; }

Doe dit voor elke knopje, maar verander daar wel de (“foto1″) cijfer naar de juiste foto nummer. foto2, foto3 enzovoorts dus. 

Stap 10:

Nu gaan we aan elke frame van elke layer een ID meegeven. Dit hebben we eerder gedaan, maar zal ik nog even kort uitleggen. Onder de “properties” panel vind je een leeg textbox waar “instance name” instaat. Kijk hieronder. 

Voor elke keyframe van elke layer voegen we de volgende namen in: foto1, foto2, foto3 etcetera. Nu zijn de knopjes gekoppeld aan de frames.

Stap 11: 

Test je movie want we zijn klaar! Nu heb je een mooie fotoalbum die je op je eigen manier ook kan uitbreiden met veel meer foto’s. Maar bedenk wel je eigen stijl! 

Als je iets niet snapt kun je het hier vragen. De bronbestand download je HIER.

Vorige week hebben we een dropdown menu gemaakt. Omdat het teveel zou worden om in 1 les uit te leggen, heb ik het verdeeld in 2 lessen. Vorige week kon de dropdown menu verder nog niets dan alleen openen en sluiten. Deze week gaan we daar movieclips aan koppelen. Elke knopje gaat ervoor zorgen dat er nieuwe movieclips worden ingeladen, en uitgeladen. Voor een voorbeeld van wat we gaan maken klik je HIER. 

Lets start! 

Stap 1: 

Open de .fla file die we vorige week hebben gemaakt. We gaan hieraan namelijk wat actionscript aan toevoegen zodat de movieclips kunnen worden ingeladen. Maar dat gaan we straks doen, dus laat dit bestand in ieder geval open. 

Stap 2: 

Maak een nieuw bestand aan. We gaan nu een movieclip maken die ingeladen gaat worden. Om het zo simpel mogelijk te houden, houd je dezelfde afmetingen en FPS aan als wat je hebt gebruikt in de dropdown menu. 

Voeg geen achtergrond kleur of iets dergelijks toe aan deze nieuwe file. Laat het wit, want op dit moment is deze filmpje doorzichtig, en dat moeten we precies zo houden. 

Bedenk nu iets leuks voor deze movieclip, maar maak wel zoiets dat het herkenbaar is dat je op de juiste button de juiste movieclip ziet. We hebben de buttons genummerd vorige keer, dus heb ik de movieclips ook zo gemaakt. Vergeet geen STOP action toe te voegen aan de laatste frame. Anders blijft de movieclip de hele tijd afspelen. 

Maak 4 verschillende movieclips en noem ze als volgt: 

clip1, clip2, clip3 en clip4

Als je niets kunt bedenken kijk dan naar wat ik heb gemaakt. Als je klaar bent gaan we naar stap 3. 

Stap 3: 

Nu de je de movieclips klaar hebt staan gaan we ze koppelen aan de dropdown menu. 

De vorige keer hadden we de buttons al klaar gemaakt voor gebruik. We gaan voor elke button een stukje actionscript toevoegen. Aan de 1ste button voegen we dit stukje actionscript toe:  

on (release) {

  unloadMovie (2);

    unloadMovie (3);

      unloadMovie (4);

loadMovie ("clip1.swf", 1);

}

De onrelease action kennen we al. Dat zorgt ervoor dat als je klikt op iets, er iets moet gebeuren. Eerst leg ik de loadmovie uit, en daarna de unloadmovie.

Bij het schrijven van een loadmovie, zeg je als het ware, laad dit filmpje in. Tussen haakjes schrijf je de naam van de movieclip die je wilt dat wordt ingeladen. Vergeet niet de .SWF erachter te zetten anders doet ie het niet. Na de komma zie je een 1 staan. Dat betekent dat het direct bovenop deze laag moet komen. Dat zijn dus lagen. Als je er een 2 neerzet, dan overlapt die movieclip de laag 0 en 1. Als je er een 3 neerzet, dan overlapt het laag 0, 1 en 2 enzovoorts. 
Omdat we dit stukje actionscript aan de 1ste knopje toevoegen, schrijf je dus clip1.swf en moet het op laag 1 komen. 

De unloadmovie staat voor het uitladen van het filmpje. Je wilt niet dat er tientallen filmpjes over en door elkaar heen geladen worden. Dat maakt je applicatie onnodig traag en jij raakt de tel kwijt. Omdat we 4 verschillende knopjes hebben, gaan we het verdelen over 4 verschillende lagen. Omdat wij onze filmpje op laag 1 laden, willen we dat laag 2, 3 en 4 uitgeladen worden als je klikt op dit knopje. Dit gaan we voor elke knopje doen, maar je laadt natuurlijk nooit de laag waarop je je filmpje inlaadt. 

Als je dus straks clip 2 op laag 2 gaat inladen, dan laad je de lagen 1, 3 en 4 uit. 

Stap 4: 

Voeg nu de onderstaande code toe aan je 2de knopje: 

on (release) {

  unloadMovie (1);

    unloadMovie (3);

      unloadMovie (4);

loadMovie ("clip2.swf", 2);

}

Stap 5: 

Voeg nu de onderstaande code toe aan je 3de knopje: 

on (release) {

  unloadMovie (1);

    unloadMovie (2);

      unloadMovie (4);

loadMovie ("clip3.swf", 3);

}

Stap 6: 

Voeg nu de onderstaande code toe aan je 4de knopje: 

on (release) {

  unloadMovie (1);

    unloadMovie (2);

      unloadMovie (3);

loadMovie ("clip4.swf", 4);

}

Stap 7:

Je bent nu klaar met de actionscripts. Ook zijn je movieclips klaar. Wat nu alleen nog gedaan moet worden is alles bij elkaar zetten. Je moet dus nu in totaal 5 filmpjes hebben. De dropdown swf, en 4 movieclips. Zet alles bij elkaar in 1 map. Test je movie nu uit en je zult zien dat bij elke knopje een nieuwe movieclip ingeladen wordt. 

Mocht je iets niet snappen, stel je vraag hier. Of download de bronbestand via HIER.

Het is tijd voor een nieuwe tutorial, en wel eentje waarbij we een dropdown menu gaan maken. Dit is een eerste stap richting het maken van een complete website. Met de tutorials hiervoor moet je nu een dropdown menu op een simpele manier kunnen maken. 

Voor een voorbeeld van wat we gaan maken klik je HIER. 

Lets start! 

Stap 1: 

Maak een nieuw document aan. Je kunt de afmetingen en frame rate op de standaard instellingen laten. 

Stap 2:

Maak een leuk menuknopje. Ik heb iets simpels gemaakt, maar jij kan je helemaal uitleven als je wilt. Als je klaar bent met je menuknopje, selecteer je alles en maak je er een movieclip van (F8 -> movieclip) en geef je het een leuke naam. 

Stap 3: 

Dubbelklik op je nieuwe movieclip zodat je erin zit. Je gaat nu in je movieclip verder werken. 

Selecteer weer alles wat je net hebt getekend, en maak er nu een “button” van (F8->button) en geef het de naam “menuknop”.
Noem deze layer nu: link buttons. 

Maak 2 nieuwe layers aan in deze movieclip en doe dat als volgt. 
- de 2de layer noem je: actions
- de 3de later noem je: onzichtbare knop 

Het moet eruit zien zoals hierboven. Klik nu op de “actions” frame, open je “actions” panel (F9) en vul daar een stopactie in:

stop (): 

Stap 4: 

Ga naar de “links buttons” layer en klik op je knopje. Open je actions panel en vul daar onderstaand code in: 

 on (rollOver)
      { gotoAndStop(2); }

Voeg nu bij elke layer een nieuwe keyframe toe. Het moet er dan uitzien zoals hieronder. 

Stap 5: 

Klik nu op de 2de keyframe van je “links buttons” layer. Daar gaan we de resterende knopjes inmaken. Je kan als je wilt nieuwe knopjes maken, andere kleur enzo dus, maar je kan ook dezelfde gebruiken. Dat doe door naar je library te gaan, de menuknop te selecteren, en dan met je rechtermuisknop “duplicate” te zeggen. Doe dit 4 keer, dan heb je 4 verschillende knopjes. Vergeet niet de namen in je library te veranderen, en ook de namen van de knopjes zelf. Check hieronder. 

Stap 6: 

Nu moeten we nog een onzichtbare knop maken, dit is nog makkelijker dan een gewone knop. Alleen gaan we het wel zo maken dat ie omrand wordt. Zoals hieronder dus.

Maak weer een nieuwe knop (F8) “button” en maak op de “hit” frame een blanke keyframe, de 1e,2e en 3e frame MOET leeg zijn. Selecteer de “hit” frame en trek daar een rechthoek die ongeveer zo groot is als je menu. Als dit niet het geval is, is er niets aan de hand, want je kan die altijd nog groter/kleiner maken in een ander stadium. En je hebt nu een onzichtbare button! 

Het licht blauwe gedeelte is de onzichtbare knop. Die zul je zelf ook zo zien, mocht die knop toch te klein zijn, dan kan je hem gewoon groter maken met de “free transform tool (q)” . Open nu weer het actions window en assign deze actie:

on (rollOver, dragOver)
   {gotoAndStop(1); }

Je kopieert dus dezelfde knop 4 keer en omrand het zoals hierboven. Voor elke knop voeg je bovenstaande actie toe. 

Stap 7: 

Were done! Je hebt nu een dropdown menu gemaakt. Het kan nog niet veel, alleen maar openen en sluiten, maar dit was een aanleiding voor de komende tutorials. Daar gaan we namelijk een aantal stappen verder, en gaan we richting een complete website. 

Mocht je vragen hebben dan kun je die hier stellen. Is het je niet helemaal gelukt, dan kun je de bronbestand downloaden via HIER. 

Deze week gaan we nog een stapje verder dan hiervoor. We gaan nu namelijk niet iets tekenen, en ook niet van de ene naar de andere kant laten bewegen. Nee, deze week gaan we aan de slag met ActionScript. De taal van Flash waarmee alles werkt. Het is niet zo heel moeilijk, maar je moet er wel even naar kijken. 

Je hebt inmiddels een aantal stukjes code gezien, zoals het stoppen en afspelen van objecten. Van de ene frame naar de andere springen. Maar nu wordt het anders. We gaan namelijk een object tekenen, en verder niets met dat object doen. Geen motion tween, geen effecten niets. Alleen met en stukje code zorgen we ervoor dat het object de gewenste richting op gaat bewegen

Voor de voorbeeld van wat we gaan maken klik je HIER. 

Let’s start! 

Stap 1: 

Maak een nieuw document aan. Geef een willekeurige hoogte breedte, en FPS. Het kan allemaal standaard blijven als je wilt. 

Stap 2: 

Teken iets leuks Een rondje met een puntje eraan, een stukje text of een vierkantje of iets dergelijks. Teken wel iets zodat je weet dat het object naar links, rechts, boven of onder kijkt. Ik heb zoiets als hieronder gemaakt. 

Maak van deze object dat je hebt getekend een movieclip. Je weet inmiddels hoe dat moet. 

Stap 3: 

Aan deze movieclip gaan we een stukje code toevoegen. We gaan het stap voor stap doen, en ik leg ook uit wat de codes betekenen, zodat je het helemaal snapt. 

Klik op de movieclip dat je net hebt gemaakt. Ga naar de “actions” panel, en vul daar als eerst onderstaande code in. 

onClipEvent (load) {
loopsnelheid = 10;
}
onClipEvent (enterFrame) {

        if (Key.isDown(Key.UP)) {

                _y-= loopsnelheid;}

        if (Key.isDown(key.DOWN)) {

                _y+= loopsnelheid;}

        if (Key.isDown(key.LEFT)) {

                _x-= loopsnelheid;}

       if (Key.isDown(key.RIGHT)) {

                _x+= loopsnelheid;}
}

Uitleg van de bovenstaande code is als volgt.

onClipEvent (load) { actie,(s) ; } 
Zodra die clip is geladen wordt er aan die clip verteld wat die loopsnelheid is (in dit geval dus 10)

onClipEvent (enterFrame) {
if (Key.isDown(Key.UP)) {
_y-= loopsnelheid;
} 

Zodra er op de tijdlijn deze frame wordt bereikt, wordt er gekeken welke knop er gebruikt werd vb:(Key.UP), en wordt de loopsnelheid er bij opgeteld/afgetrokken (in dit voorbeeldje werd het dus afgetrokken, door de min voor de = teken)

Stap 4: 

Nadat we deze code hebben toegevoegd kun je je filmpje uittesten. Je zult zien dat het object beweegt naar de richting van de knoppen. Alleen zul je zien dat het niet de juiste kant op wijst. Dat stukje code gaan we nu ook toevoegen, door middel van een “rotation”. Het is 1 regel code (_rotation) die je op de bovenstaande code voor elke knopje moet toevoegen. Hieronder staat de code.

if (Key.isDown(Key.UP)) {

        _rotation = 0;
        _y-= loopsnelheid;}

Wil je dus dat je code goed werkt, en dat je object de juiste kant van de pijltjes op wijst, dan moet je code er nu als volgt uitzien. 

onClipEvent (load) {
        loopsnelheid = 10;}

onClipEvent (enterFrame) {

        if (Key.isDown(Key.UP)) {
                 _rotation = 0;
                 _y-= loopsnelheid;}

        if (Key.isDown(key.DOWN)) {
                _rotation = 180;
                _y+= loopsnelheid;}

        if (Key.isDown(key.LEFT)) {
                _rotation = 270;
                _x-= loopsnelheid;}

       if (Key.isDown(key.RIGHT)) {
                _rotation = 90;
                _x+= loopsnelheid;}

}
} 

Als je naar beneden zou klikken zou het _rotation =180; moeten zijn, de andere combies kun je zelf wel bedenken, maar staan al wel hierboven.  Zodra je voor elke button deze property hebt ingevoerd zal ons figuurtje ook de juiste kant opkijken.

Opmerking: 
De loopsnelheid is mede afhankelijk van de framerate van je movie (10 is dus eigenlijk relatief) en een hogere framerate zou een hogere snelheid opleveren.

Stap 5: 

Om ervoor te zorgen dat ons figuurtje niet uit het scherm loopt moeten we nog even tegen hem vertellen tot waar hij mag bewegen.
Met de onderstaande AS kunnen we dit verwezenlijken.

onClipEvent (enterFrame){
        if (this._x < 0 ) {
                this._x = 0;
                //0 is het begin van de movie (in de breedte)
        }

        else if (this._x > 550) {
                this._x = 550;
                //550 is de breedte van de swf
        }
}
onClipEvent (enterFrame){
        if (this._y < 0 ) {
                this._y = 0;
                //0 is het begin van de movie (in de hoogte)
        }

        else if (this._y > 400) {
                this._y = 400;
                //400 is de hoogte van de swf
        }
}

De breedte en hoogte kun je instellen zoals je wilt. Mijn afmetingen waren 550 px breed bij 400 px hoog. Je kunt ook groter of kleiner gaan, een kader toevoegen etc.

And that’s it. Nu weet je movieclip welke kant hij op moet gaan, en wanneer hij moet stoppen. Het is niet zo moeilijk om dit in elkaar te zetten, maar het gaat er vooral om dat je snapt wat er gedaan wordt, en wat de codes nou echt betekenen. Speel ermee, maar niet teveel. Verander bijvoorbeeld de snelheid, of de hoek waarin het object draait. 

Volgende week gaan we weer een stapje verder. Actionscript zal nu steeds vaker aan bod komen, maar het zal niet overdreven coderen worden. Er komen een hoop leuke dingen om te doen in Flash dus don’t miss it! )

En als je er niets van gebakken hebt, is hier de .fla gereed om te downloaden. KLIK  ;)

Deze week gaan we weer aan de slag met buttons. 2 weken terug hebben we ook een button gemaakt, maar die kon alleen linken naar een website. Nu gaan we ervoor zorgen dat de button functies binnen in je applicatie gaan werken. Dus bijvoorbeeld het starten en stoppen van animaties. Hier kun je weer een hoop nieuwe dingen mee doen, en je moet zeker gaan spelen.

Voor een voorbeeld moet je hier zijn, KLIK.

Oke, let’s start!

Maak een nieuw document aan. De grootte en frame rate zijn niet zo belangrijk, dat mag je zelf bepalen.

Stap 1:

Maak een willekeurige button en noem het “start”. Je weet al hoe je het van kleur en dergelijke moet laten veranderen, dus daar ga ik niet nog een keer op in. Wil je dat weten, kijk dan naar de “het maken van een button” les. 

Plaats op de allereerste frame in de “actions” panel een stop code neer. De actionscript code schrijf je zo:

stop ();

Nu gaan we deze keyframe een ID meegeven, een Label eigenlijk. Klik op de 1ste frame, en ga dan naar je “properties” panel. In je properties panel heb je links bovenaan een leeg vakje waar er Frame of Label staat. Daar gaan we deze frame een naam geven: start. Het moet er nu uitzien zoals hieronder.

Stap 2:

Klik op de 2de frame en maak weer een keyframe (F6). Nu gaan we op de 2de frame een STOP button maken. Maak een zelfde soort button zoals je voor start hebt gemaakt, alleen schrijf je er geen start in, maar stop. Je timeline moet er uitzien zoals hierboven. 

Stap 3: 

Maak een nieuwe layer aan en noem het zoiets als: animatie. Nu ga je naar de 2de frame en maak je een keyframe (F6) aan. 
Nu gaan we deze keyframe ook een ID meegeven. Ga naar je “properties” panel, en geef daar de naam: animatie. Het moet er nu uitzien zoals hieronder. 

Stap 3: 

Nu gaan we een animatie maken voor op deze frame. Je weet al hoe je een animatie maakt, dus bedenk er iets leuks voor. Bijvoorbeeld een rollende bal, of iets wat beweegt. Het moet in ieder geval wel bewegend zijn zodat je het start/stop effect kunt zien natuurlijk. Laat de animatie doorlopen tot frame #50. 

Op frame #50 zet je weer een keyframe (F6) neer, want daar gaan we een stukje actionscript neerzetten. Zet de code op de frame:

{ gotoAndPlay("animatie");}

Door middel van deze actionscript zorg je ervoor dat als de frame tegen het einde aankomt, het automatisch weer naar het begin van je animatie springt. Je hebt aan het begin van je animatie namelijk een label meegegeven, en dit stukje code zegt dat als het op de frame komt met deze code, het weer terug moet naar de “animatie” frame en vanaf daar weer je filmpje afspeelt. 

Je 2de (animatie) layer is nu klaar. 

Stap 4:

Nu is de 1ste layer klaar, en ook de 2de layer. Maar als je nu je filmpje test zie je dat je buttons nog niet werken. Dus gaan we een stukje code meegeven, zodat de buttons weten wat ze moeten doen. 

Ga naar de 1ste frame en klik op de “start” button. Ga naar je “actions” panel en vul daar de onderstaande code in: 

on (release) 
{ gotoAndPlay ("animatie");
}

Ga nu naar de 2de frame en klik dan op de “stop” button. Daar vul je onderstaande code in:

on (release) 
{ gotoAndPlay ("start");
}

Test je movie en sla het op. Were done!

Vragen stel je hier, en de bronbestanden kun je HIER downloaden. 

Deze week gaan we een mask maken. De naam zegt het al, een masker. Een masker kun je gebruiken om bepaalde dingen te verbergen, maar kun je ook gebruiken om leuke dingen mee te doen. Bijvoorbeeld als een soort vergrootglas, of om leuke effecten te geven. Wij gaan een dag en nacht plaatje maken, waarbij het dag is, en als de masker eroverheen gaat, het nacht wordt. Dit is een voorbeeld, maar het principe wordt duidelijk. Hier zie je een voorbeeld: KLIK 

Lets start! 

Stap 1:

Download de 2 plaatjes die hieronder staan als voorbeeld. Deze gaan we namelijk gebruiken bij het maken van de masker.

Stap 2:

Maak een nieuw document aan en maak het 390 bij 300 pixels groot. De frame rate kun je laten op 12 FPS.
Je importeert de 2 afbeeldingen die je net hebt gedownload. Dit weet je al, maar leg ik kort nog een keer uit. Via File -> Import -> Import to library -> en dan selecteer je de afbeeldingen.

Stap 3:

Nu sleep je de afbeelding in de eerste layer, en geef je een naam als “dag”. Je gaat naar frame #75 en klikt op F5. 
Je zorgt ervoor dat de afbeelding precies uitgelijnd is op je werkveld (stage) door op de afbeelding te klikken -> naar je properties panel te gaan en daar de X en Y settings op 0 te zetten. Zie hieronder de voorbeeld.

Stap 4:

Doe ditzelfde voor de “nacht” afbeelding. Wel op een nieuwe layer natuurlijk.

Stap 5:

Nu maak je weer een nieuwe layer aan, en deze geef je een naam als “mask” of iets dergelijks. Teken een willekeurig figuur, een rondje, een vierkantje, het maakt niet uit. Teken het aan de linkerkant van je werkveld, buiten het scherm, zoals hieronder bijvoorbeeld. Ik heb een blauwe rechthoek getekend. 

Stap 6: 

Klik op je frame, je rechtermuisknop en dan create motion tween. Ga naar frame #40 en klik op F6. Ga naar frame #75 en klik weer op F6. Je hebt nu 2 keyframes in je tijdlijn, en het moet er inmiddels zoals hieronder uitzien. 

Je klikt op frame #40 en sleept het vierkantje naar de rechterkant van je werkveld, weer buiten het scherm. 

Je vierkantje gaat nu van links naar rechts en weer terug. Frame #75 hoef je niets te doen, want die staat als links. Je hebt namelijk een keyframe aangemaakt toen die nog links stond, dus heeft Flash dat ook onthouden

Stap 7:

Nu maak je je Mask aan, en zijn we bijna klaar. Klik op de “mask” layer, bovenop de naam, met je rechtermuisknop. Dan selecteer je “mask”. Het ziet er dan uit als hieronder. 

Test nu je filmpje, want we zijn klaar! Je hebt nu een masker aangemaakt, waarmee je een soort van een doorschijnend effect geeft. Je kan hier nog een hele hoop dingen mee, dus test het zeker uit. Ik heb bijvoorbeeld nog laatst een website gemaakt waarbij ik de masking heel leuk heb gebruikt. Klik op de verschillende buttons bovenaan om de banner elke keer te zien veranderen. De zwart-wit afbeeldingen zijn volledig gemasked. Kijk op: www.avrasya-tr.com

Als iets je niet is gelukt kun je het hier vragen of de bronbestand downloaden. KLIK 

Lets start! 

Ok open Flash en maak een nieuw document aan. Jullie weten inmiddels hoe dit moet. Toch zet ik het even hieronder weer neer. 

Stap 1:

File -> New, en maak het document 500 bij 100 pixels groot. Zet je frame rate op 20 FPS.

Stap 2: 

Als je daar mee klaar bent gaan we “Grid” toevoegen, Grid is een extra hulplijntje die je kunt gebruiken voor het tekenen van objecten.
Je voegt een “Grid” toe door met je rechtermuis in de stage te klikken en dan op Grid -> Show Grid te klikken.

Stap 3: 

Als je daarmee klaar bent ga je naar layer 1, frame 1 en je tekent een willekeurig bolletje aan de linker kant. Dit doe je door te klikken op de Oval tool. Houd je “shift” toets ingedrukt bij het tekenen van het bolletje, zodat het echt een mooi rondje wordt. De “shift” toets zorgt er namelijk voor dat het gelijkmatig verticaal en horizontaal getekend wordt. Dit geldt niet alleen voor de Oval tool, maar ook als je een vierkantje of iets dergelijks tekent. 

Ik heb een grijs rondje met een rood lijntje gemaakt. Daarna heb ik er nog een rondje in getekend, zodat je kunt zien dat het bolletje wel echt een rondje draait. Teken net als mij een nog een klein rondje in het grote rondje. Dit doe je allemaal in frame 1 van layer 1. 

Om je stage net wat mooier te maken kun je nog wat meer dingetjes tekenen als je wilt. Teken een grond waarop de bal rolt bijvoorbeeld, of een achtergrond of iets dergelijks. Maar vergeet dit niet allemaal op een nieuwe layer te doen. De bal blijft namelijk in 1 layer, en de rest wat je tekent moet in een andere layer. De bal moet ook bovenop de achtergrond layer komen, anders zie je de bal niet. De volgorde van de layers zijn erg belangrijk! Kijk hieronder voor een voorbeeld van hoe het zou kunnen worden. 

Stap 4: 

Nu je klaar bent met het maken van je achtergrond en bolletje gaan we verder. Nu ga we het namelijk animeren. 
Klik op de frame met het bolletje zodat je je bolletje geselecteerd hebt.  Klik nu op F8, en maak een “movieclip”. Geef een leuke naam, en klik op OK. Nu is je bolletje klaar om geanimeerd te worden. 

Nu klik je weer op de eerste frame van je “bolletje” layer, en met je rechter muisknop klik je op “create motion tween. Check hieronder hoe dat moet. 

Stap 5: 

Nu je bolletje helemaal klaar is om geanimeerd te worden, ga je je timeline vullen. Klik op frame #20 en dan op F6. Je hebt nu een motion tween gemaakt die van de 1ste tot de 20ste frame loopt. Het moet er uitzien zoals hieronder.

Je klikt op de 20ste frame en sleept het bolletje naar rechts toe. Het maakt niet echt uit tot waar je het laat komen, maar kies maar een leuke plaats uit. Kijk hieronder voor een voorbeeld. 

Als je nu klikt op ctrl+enter kun je je eerste animatie zien. Je ziet dan alleen dat het balletje simpel van rechts naar links gaat. Je achtergrond verdwijnt ook, maar dat gaan we straks in 1 keer goed zetten. Focus je nu eerst op het balletje. 

Stap 6: 

Om je balletje echt een rondje te laten draaien gaan we het volgende doen. Je klikt weer op de 1ste frame, en dan moet je kijken naar je “properties” panel. Daar zie je een aantal opties staan, waaronder “rotate”. Je klikt op “rotate” en selecteert CW. Dat betekent dat je movieclip nu met de klok mee gaat draaien. Als je dat hebt ingesteld dan maakt je bolletje nu echt een rondje. Test je filmpje maar eens door te klikken op ctrl+enter.

Stap 7: 

Nu moet je balletje ook nog terugrollen naar zijn plaats. Klik op frame #40 en klik weer op F6. Nu heb je weer een keyframe gemaakt. Nu je op frame #40 bent, pak je het bolletje, en sleep je het weer terug naar links. Dat betekent dat het nu van links naar rechts gaat, en weer terug.  
Maar hij rolt niet terug, want je hebt geen “rotate” ingesteld. Klik op frame #20, want dat is de keyframe. Ga weer naar de “properties” panel en klik daar op “rotate”. Nu moet hij niet met de klok mee, maar juist het tegenovergestelde. Daarom klik je op CCW. Als je dat hebt gedaan, is je balletje klaar, en rolt hij van links naar rechts, en weer terug. 

Stap 8: 

Je achtergrond is nog steeds op frame 1. Omdat je nu klaar bent met je balletje, kun je je achtergrond verlengen. Klik op frame #40 en dan op F5. Er is geen keyframe geplaatst, maar als je dat wilt kun je het wel doen. Het ziet er nu uit als hieronder. 

 Test de movie nu nog een keer! (Ctrl+Enter.)

Als je kaar bent met het filmpje ga je het opslaan, en dat kan op de verschillende manieren, namelijk op:

.FLA
Bij een .fla bestand kun je het flash filmpje nog veranderen. Ook is een .fla bestand groter dan een .swf bestand. 
Je slaat het op door naar File->Save As... te klikken en dan een naam te geven.

.SWF
Bij een .swf bestand kun je het filmpje NIET meer bewerken, maar het bestand is wel kleiner dan een .fla bestand.
Je slaat een .swf bestand op door naar File->Export Movie te klikken en dan op te slaan. Dan kun je met Dreamweaver het bestand in een website zetten.

Sla het wel altijd op als een .FLA want anders kun je niets meer doen!

Mocht het niet je lukken of iets dergelijks, dan klik je HIER om het zipje te downloaden. Vragen kun je hier stellen!

TIPS:

Als je wilt dat je balletje langzamer rolt, verleng je je frames. In plaats van frame #20, laat je hem doorrollen tot frame #30 en dan pas terug rollen. Speel hiermee want je kan leuke dingen doen. 

Bij het instellen van je “rotate” heb je meteen naast deze knop een vakje met TIMES staan. Die staat standaard ingesteld op 1. Dat betekent dat hij van de ene tot de andere keyframe 1 keer rolt. Als je dat op 3 instelt maakt hij 3 rondjes. Speel hiermee!

Want nu gaan we echt iets maken in Flash, de meest voorkomende en simpelste actie die je vaak zult gebruiken. Een “button”. Een knopje waarmee je van alles en nog wat kunt doen. Het eerste wat ik over een knopje zal uitleggen is het geanimeerd maken ervan, dus als je erover gaat met je muis, dat ie verandert. En als je erop klikt, het naar een link gaat die je opgeeft. Daarvoor gaan we gebruik maken van actionscript, maar nog op basis niveau. Met action kun je verschillende dingen laten gebeuren in flash bijvoorbeeld: Een procentenbalk maken, spelletjes, complete websites enz. Pas later zul je steeds meer actionscript tegenkomen op mijn blog. 

Maar vandaag gaan we een button maken. Klik hier om een voorbeeld te bekijken. 

Ok, open Flash en maak een nieuw document aan. Als je dat hebt gedaan ga je naar insert->New Symbol…
Je krijgt dan dit te zien:

Bij Name vul je een slimme naam in. Iets wat je kunt onthouden, en werkelijk refereert aan het ding wat je maakt. In dit geval maken we een button, die ömer heet. Noem je knopje dan bijvoorbeeld: omer_b of iets dergelijks.

Bij Type  (soms heet dit Behaviour afhankelijk van de versie die je gebruikt en of je op een Mac bent of een Windows) klik je op Button en daarna op OK.

Je krijgt nu een nieuw scherm te zien en bij de frames zie je 4 dingen staan:
UP, OVER, DOWN, HIT

 
Als eerst gaan we de  #UP frame bewerken. Ik heb een kleine afbeelding (200×50 pixels) gemaakt in Photoshop die ik gebruikt heb bij het maken van de button. Je mag zelf weten hoe groot de button mag zijn, je kunt ook gewoon in Flash dingetjes tekenen als je wilt. Als je klaar bent ga je naar #OVER, #DOWN en #HIT. Je voegt elke keer een nieuwe “keyframe” toe door te klikken op F6 of op de gewenste frame je rechtermuisknop in te drukken en “insert keyframe” te kiezen. 

Ik heb het zo gedaan:

UP

OVER

DOWN

Op de “HIT” frame hoeft in een geval als deze niets getekend te worden, de “hit frame” word namelijk nooit vertoont in een button.De hit frame word namelijk gebruikt om een gebied in te tekenen wat een button moet worden. 

Om de afbeeldingen op deze frames te kunnen plaatsen moet je de gemaakte afbeeldingen eerst importeren in de bibliotheek. Dat doe je als volgt. Je gaat naar file -> import -> import to library. Daarna selecteer je de afbeeldingen en deze worden geimporteerd in de “library” zoals je hieronder kunt zien. 

Nu je afbeeldingen in de library zijn, en je in de button bent, klik je op 1 van de afbeeldingen en sleep je deze naar het midden, de scene in dus. Onthoud hierbij dat je de juiste afbeelding bij de juiste frame neerzet. 

Na het maken van de verschillende knoppen ga je naar Scene1 (kan ook een andere Scene zijn).

Je gaat dan naar Library (Ctrl+L) daar kies je dan de naam uit van de button die je hebt gemaakt, en je sleept het naar je scene. De gemaakte button ziet er als volgt uit in je library. 

Selecteer de button en klik met je rechter muisknop op Actions. Je krijgt dan een schermpje te zien. Vul in dat scherm onderstaande Actions script in. In plaats van mijn website kun je je eigen website plaatsen. 

on (release) {

     getURL(“http://www.omeronder.nl”, “_blank”);

}

Als je de volgende foutmelding krijgt “Mouse events are permitted only for button instances” dan wil dat zeggen dat je de actionscript in de tijdlijn hebt gezet en niet op de button zoals dat zou moeten. Selecteer dus eerst de button en vul dan pas de actionscript in.

Natuurlijk kunnen er veel meer dingen gebeuren via dat action panel, zoals naar en andere frame springen op je tijdlijn, waardes toekennen aan andere opjecten etc etc, maar dat is voor een andere keer.

Wat veel gebruikt word in mooie flash buttons zijn geluidjes en animaties. Als je een geluid of animatie wilt hebben in je “over” state, sleep dan een geluidje/animatie op de “Over” frame.
Hetzelfde geld natuurlijk voor de Up, en Down frames (beter geen geluid zetten op de Up frame) dan zou die knop nonstop geluid maken)

De knop is nu klaar, en kan getest worden!
Als je vragen hebt kun je die hier stellen