Welkom!

Deel je kennis met anderen in deze Flashgemeenschap!
Gebruikersnaam:
Wachtwoord:
Wachtwoord opslaan?
Wachtwoord vergeten?

TUTORIALS / Effecten

Bewegende wolken
314 downloads, 52159 keer gelezen
(July 15, 2002)
Waardering: 352 keer gestemd 
 4.3 van de 5
Eigenschappen
Flash Versie  Flash MX
Moeilijkheidsgraad  Gemiddeld

Formaat:   220 KB

Een leuk effect voor de achtergrond van je site. Dit laat zien hoe je een wolk achter bijvoorbeeld een raam of gebouwen kan laten schuiven. Natuurlijk kan je de wolken of veranderen in iets anders.

 
Intro

Dit effect heb ik zelf ook weleens op mijn eigen site gebruikt. Het is een image van bijvoorbeeld een raam of gebouw waarachter je wolken ziet bewegen. Het principe is eigenlijk heel simpel. Je hebt twee plaatjes. 1 Van bijvoorbeeld het raam en 1 van de wolk. Daarna wordt een mask gebruikt of je knipt het raam uit. Ik leg hier eerst de mask manier uit en daarna de uitknip manier.

Overigens is deze tutorial gemaakt aan de hand van Flash MX, ik weet niet of de werk methode ook in Flash5 zo gaat, maar het echte werk en eind resultaat zullen hetzelfde zijn.

Succes,

Michael Rispens

 

Hoe te beginnen

Het eerste wat je nodig heb is Flash. Mocht je gaan plaatje hebben van wolken, dan kan je die heel makkelijk maken in Adobe Photoshop. Maak een nieuwe image. Gebruik dan zwart en wit als kleuren en doe dan effects --> render --> render clouds. Et Voila daar zijn je wolkjes. Import dan de 2 images in flash op de layers. Dit zijn de 2 plaatjes die ik gebruik.

Het gebouw
De wolken

Als je de mask manier gebruikt doe dan de wolken in een layer boven het andere plaatje.
Bij uitknip methode komen de wolken onder.

Uittekenen voor de mask

Daarna begint het tekenwerk. Zelf gebruik ik altijd de brush-tool hiervoor. Deze vind ik persoonlijk wat makkelijker dan de pencil tool. Maak een derde layer aan en teken de uitlijnen om het gebied waar je uiteindelijk de wolken wil laten zien. Zelf vind ik dit nog al een minder werkje, omdat het nogal langzaam en soms lastig gaat. Ondanks dat moet je ervoor zorgen dat je het precies doet. Bij een gebouw of raam zal je een fout niet snel zien. Doe je het fout bij een hoofd krijg soms vreemde dingen te zien. Het kan dan gebeuren dat je in plaats van een neus wolken ziet, beetje vreemd dus. Nadat je klaar ben met tekenen vul je het gebied met een willekeurige kleur, zelf gebruik ik altijd een totaal andere kleur dan de images gebruiken zodat je het verschil ziet.

De omlijning
De omlijning gevuld

 

Bij het uitknippen

Ook hier teken je weer eerst de omlijning. Als dat klaar is, doe je break-apart bij de achtergrond image. Knip en paste daarna het uitgetekende deel over de achtergrond. Deselect het deel en selecteer het dan weer. Delete het dan dat stuk. Zet daarna de layer met de wolken eronder en klaar

Afwerken

Nu kan het afwerken beginnen. Maak van de 3e layer met de invulling een mask en maak van de layer met de wolken, die eronder ligt, een masked layer. Doe nu beide layers op slot. Nu kan je je goed zien waar de wolken gemask worden. Kijk of je geen fouten ziet. Bijvoorbeeld een stukje lucht van de image met het gebouw, waar je eigenlijk de wolken zou moeten zien. Gewoon de mask layer weer unlocken en bijwerken das alles.

Nu de wolk afmaken. Maak van de wolk een MC met de instance wolk en zet het plaatje op de positie (0,0). Plak daarna een kopie van het plaatje ernaast en flip het horizontaal. Daarnaast plak je er weer eentje naast zoals hij normaal hoort. Als je foto te wijd is kan je er eventueel nog een mirror ervan naast plakken. Nu sluit hij netjes aan als je hem laat bewegen.

Om de wolk nu te laten bewegen kan je 2 manieren gebruiken:

.1 Een gewone tween. Je laat hem doormiddel van een motion tween bewegen. Zorg er voor dat je wolk op de juiste plek eindigt. Dus als hij op de _x as op 0 begint en het plaatje van de gewoone wolk is 200, moet je hem tot -400 laten bewegen. Zo lijkt het dat het begin en eind hetzelfde zijn.

.2 Via actionscript. maak een tweede keyframe aan. Zet in de eerste keyframe de volgende actie

if (getProperty(wolk,_x)eq -400) {
setProperty("wolk", _x, 0);
} else {
setProperty("wolk", _x, getProperty(wolk,_x)-1);
}

Zo wordt de wolk zolang de positie groter dan -400 is met 1 verlaagd. Zodra hij op -400 of minder is wordt hij weer op 0 gezet.

Denk erom dat je de wolk niet te snel laat bewegen, anders lijkt het net een storm en dat ziet er niet altijd even mooi uit.

Doe ook de alpha van de wolk wat omlaag zodat je een mooi effect krijgt

 

Klaar
Als het goed is ben je nu klaar. Hieronder zie je een voorbeeld van mijn afgewerkte ding.


Voor vragen kan je me altijd even mailen of een topic starten in het forum

Geef hier je waardering: Matig 1 2 3 4 5 Geweldig!
  Waardering:
help hans bs (29 December 2006, 19:45)

leuk met die bewegende wolken,maar ik heb hier nog iets zou jij mij daar mee kunnen helpen, er zitten licht en scaduw effecten in over een image.

http://home.wanadoo.nl/h.b.s/index


hij zet hem niet terug robert gaatjenixaan (26 July 2006, 13:43)
mm bij mij schuift hij netjes opzij maar hij zet hem niet terug
snap niet hoe het kan want hij leest het script wel omdat het netjes opschuift
dus zou niet begrijpen waarom hij hem niet gewoon terugzet??

iemand enig iee hoe dit zou kunnen ?

alvast bedankt
help hans bs (29 December 2006, 19:52)
Beter... Mark Mul (11 June 2005, 18:45)

Erg leuk en praktisch... Kan ik eindelijk mn bootje laten zeilen zonder de boot te bewegen.. Goeie tut.. ben er blij mee.. Ga zo door zou ik zeggen..

Mark.


fla peter Lodde (24 May 2005, 21:39)
hello, perhaps someone can give me the data.fla, cause I don´t understand anything in this language, but I need it...
1-5 | 6-10 | 11-15 | 16-20 | 21-25 | 26-30 | 31-31