Hi!
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.
