Welkom!

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

TUTORIALS / Effecten

Maken van sneeuw m.b.v. ActionScript
299 downloads, 47682 keer gelezen
(December 15, 2006)
Waardering: 93 keer gestemd 
 4 van de 5
Eigenschappen
Flash Versie  MX04 Pro
Moeilijkheidsgraad  Gemiddeld

Formaat:   268 KB

Wil jij ook graag een sneeuwende achtergrond? Aarzel dan niet, en neem eens een kijkje in mijn tutorial!

Have Fun!

 

Sneeuw tutorial

intro stap .1. .2. .3. .4.  voorbeeld download

Intro

Aangezien de oude sneeuwtutorial een beetje oud werd , is hier eindelijk de vernieuwing.
Het basisprincipe is nog steeds hetzelfde. Namelijk sneeuw maken, maar er is een beetje variatie en vooral
efficiŽntie aan toegevoegd. Het script is helemaal vernieuwd en gemoderniseerd.

Maar natuurlijk is het nog steeds even makkelijk als voordien. Met een beetje basiskennis kan je nu direct aan de slag.
Ik heb alles zoveel mogelijk becommentarieerd.

Veel succes


Stap 1

  1. Open Flash >> nieuw Flash Document
  2. Zet de achtergrond naar zwart (#000000), de width = 400, de height = 350 en FPS = 30

  3. Document Properties
  4. Je kan deze eigenschappen natuurlijk allemaal naar eigen keuze aanpassen.
  5. Ga nu naar Insert >> New Symbol >> Name = "sneeuw", type = "MovieClip"

  6. New Symbol
  7. Window >> Library >> Druk met rechtermuisknop op de movieclip "sneeuw" >> linkage
  8. Je vinkt "Export for actionscript" aan >> Identifier = "sneeuw"
  9. We gaan nu het sneeuwvlokje maken. Maak een wit bolletje zonder rand met width = 6 en height = 6 >> x=0 en y=0.
  10. Druk eenmaal op het wit bolletje >> Modify >> Convert to Symbol >> Name = "sneeuwvlok", Type:"MovieClip"
  11. Dit doen we om het mogelijk te maken wat effecten op het sneeuwbolletje te zetten. Heb je geen Flash 8, ga dan direct naar het volgende deel.
  12. Druk nu eenmaal op de movieclip "sneeuwvlok" >> Window >> Properties >> Filters
    Je drukt op + (add Filter) en je kiest "Glow"

    Achtergrond = wit, quality = high, de rest blijft hetzelfde.

Stap 2

  1. Je gaat terug naar mainStage. Je benoemt de layer zoals je wilt en je opent de acties van de eerste keyframe.
  2. Onze eerste lijn is een variabelen die alle sneeuwvlokjes een unieke diepte zal geven.

    var depth:Number = 0;

  3. Het volgende dat je toevoegt is dit:

    this.onEnterFrame = function() {
    }

    Alles wat in deze functie zal geschreven worden zal zich elke frame herhalen. In het begin hebben we
    onze FPS gelijkgesteld aan 30,dus dit betekent dat deze functie 30 keer per seconde zal worden herhaald.
     
  4. Achter "this.onEnterFrame = function() {" en voor"}" schrijf je dan :

        if (random(4) == 0) {

             var mc = _root.attachMovie("sneeuw", "sneeuw" + depth, depth);

             var scale = random(60) + 40;

             mc._xscale = mc._yscale = scale;

             mc._x = random(Stage.width);

             mc._y = -mc._height;

             mc.speed = random(3) + 2;

             mc.wind = Math.random() * (random(3) - 1);

             mc.i = 0

             mc.onEnterFrame = function() {
                 if (this._y < (Stage.height - this._height)) {
                     this._y += this.speed;
                     this._x += this.wind;
                 } else {

                     delete this.onEnterFrame;
                 }
             }
             depth++
         }

  5. De eerste regel wordt een random getal gekozen uit 4 en als dat getal = 0 dan pas kan er een nieuw sneeuwvlokje worden gemaakt.
    Dit is ingevoerd omdat er anders te veel sneeuwvlokjes zouden zijn. Nu is er elke 1/30 van een seconde een 1/4 kans dat er
    een sneeuwvlokje wordt aangemaakt. Dat zijn dus gemiddeld 8 sneeuwvlokjes per seconde.
     
  6. De tweede regel gaan we een nieuw sneeuwvlokje aan onze movie toevoegen. Dit doen we door de funtie:
    attachMovie("sneeuw" >> de identifiernaam dat we aan ons sneeuw movieclip hadden gegeven bij de "linkage", "sneeuw"+depth >> nieuwe unieke naam voor het sneeuwvlokje, depth >> de diepte van ons movieclip);.
    We geven deze movieclip tijdelijk de naam "mc" voor onze gemakkelijkheid.
     
  7. De derde regel wordt er een random getal gekozen uit 60 en dit getal wordt dan + 40 gedaan. Dit is de schaal van
    het sneeuwvlokje. Je krijgt dus een waarde tussen 40 en 99. Aangezien ons bolletje 6 px groot was zal de minimum waarde dus
    40 % * 6 = 0.4 * 6 = 2.4 px en de maximum waarde = 99 % * 6 = 0.99 * 6 = 5.9 px
     
  8. De hieropvolgende regel zetten we zowel de xschaal als de yschaal gelijk aan dit bekomen getal.
     
  9. De twee volgende regels houden we ons bezig met de x en y waarde van onze movieclip.
    Eerst zetten we de x gelijk aan een random getal tussen 0 en Stage.width = de breedte van ons document.
    Daarna zetten we de movieclip juist boven ons document buiten het zicht.
     
  10. Het volgende is de snelheid die hoe kan het ook anders ook random wordt bepaald. We kiezen een getal tussen 2 en 5.
     
  11. Hierna komt een variabele genaamd "wind". Dit is eigenlijk de snelheid maar dan in de horizontale(x)-richting. Zodat niet alle sneeuwvlokjes loodrecht
    naar beneden vallen, maar dat er een beetje chaos is. Ook dit is random maar nu wel iets ingewikkelder.

    Het eerste deel = Math.random() >> Hier wordt een getal gekozen tussen 0 en 1 met ongeveer 11 decimalen.
    Dit getal wordt dan maal een getal gedaan tussen -1 en 1. Dat is voor de richting te bepalen.
     
  12. Een variabelen dat we later zullen gebruiken
     
  13. Nu komt er een nieuwe onEnterFrame maar nu van de sneeuw movieclip.
     
  14. 30 keer per seconde wordt gecontroleerd of de sneeuw movieclip de grond al bereikt heeft. Zoniet dan wordt de y-waarde + speed gedaan en de x-waarde + wind.
     
  15. Heeft de sneeuw movieclip de grond bereikt dan wordt de onEnterFrame van de movieclip gedelete zodat onze flash movie dit niet nodeloos blijft controleren.
     
  16. De laatse lijn wordt de depth variabele vermeerderd met 1.

Stap 3

Nu hebben we sneeuw, maar willen we er nog een object bij waar de sneeuw kan op blijven liggen dan moeten we het volgende doen:
  1. Maak een nieuwe movieclip met je gewenste object er in. Ik heb er tekst voor gebruikt.
     
  2. Zet de movieclip ergens op je Stage.
     
  3. Geef hem de instancename: "versiering_mc".
     

  4. Ga terug naar de acties ga naar : if (this._y < (Stage.height - this._height)) { en maak er dit van:

    if (this._y < (Stage.height - this._height) && !this.hitTest(versiering_mc)) {


     
  5. Nu stopt de sneeuw ook als het op de randen van je object valt. Het is wel zeer vervelend als je object geen rechthoek is.

Stap 4

De laatste mogelijkheid is dat de sneeuw niet blijft liggen maar na een tijdje wegsmelt.
  1. Dit doen we door dit deel : "delete this.onEnterFrame;" te vervangen door:


         this.i++;
         //
         if (this.i > 250) {
             this._alpha -= 3;
             //
             if (this._alpha <= 0) {
                 this.removeMovieClip();
             }
         }

  2. Eerst wordt de variabelen i daarstraks gelijkgesteld aan 0 vermeerderd met 1. En als die i groter is als 250 (na 250/30 = 8.3 seconden)
    dan kan het sneeuwvlokje beginnen "wegsmelten" doordat de alpha telkens verminderd wordt.
    Als de alpha = 0 dan wordt de movieclip verwijderd.
    Het getal 250 is getal dat beslist hoelang de movieclip blijft bestaan. Hoe hoger dit getal hoe minder rap
    het sneeuwvlokje zal beginnen te smelten. Hoe lager hoe rapper.



Voila, je moet nu zelf kiezen wat je het meest aanspreekt. Ga eens kijken bij voorbeelden wat ik er van heb gemaakt.

Of download het gewoon door hier te klikken.

Bedankt voor het volgen van mijn tutorial.
Geef hier je waardering: Matig 1 2 3 4 5 Geweldig!
  Waardering:
Sneeuw over Image? david stolk (24 November 2010, 21:49)
Zodra ik een plaatje invoeg dat een button word en de sneeuw erover heengaat worden het zwarte vlokken. Hoe dit op de lossen? Mvg David
Error Jervin van Veen (07 November 2008, 21:24)

Hee mensen,
wanneer ik de stappen volg, volgt er een error.
kan iemand mij helpen? Ben net begonnen met flash

**Error** symbol="Sneeuw," layer="Layer" 1, frame="1:Line" 1: Statement must appear within on/onClipEvent handler
     var depth:Number = 0; this.onEnterFrame = function()

alvast bedankt


Mijn reactie Thomas vdH (12 December 2007, 19:05)

Leuk script! Ik wil het verwerken in een headerbestand voor een website.

Nou zou het wel fijn zijn dat het veld waar de sneeuw valt 400px breed is en helemaal rechts is uitgelijnd. Ik heb al een hele tijd met Stage.align lopen klooien maar kom er niet uit. Heeft iemand de tip?

 

Bvd


sneeuw op het object cecile hanrath (09 November 2007, 11:13)
Hoi
Ik heb de sneeuw gemaakt ziet er goed uit bedankt! Maar nu heb ik nog een vraagje ik wil dat de sneeuw op een kerst man blijft liggen maar dat lukt niet.. komt dat doordat het geen vierkant is? en hoe zet ik de sneeuw zo dat hij achter het plaatje valt?
Alvast bedankt!
niet bliijft liggen sjoerdje kootstra (21 May 2007, 21:54)
 maby niet goed gelezen maar ik wil de sneeuw(bij mij zijn het  blaadjes ) niet laten liggen hoe doe ik dit?
1-5 | 6-10 | 11-15 | 16-20 | 21-25 | 26-28