Join Todd Perkins for an in-depth discussion in this video In practice pt. 1: Building rain in a weather application, part of ActionScript 3.0: Building Particle Systems.
- View Offline
Here is an example of a Flash application that uses the particle system that we've built up to this point. If you're following along, you can find the file weather.FLA in the movie seven folder. Before you test the application, make sure Flash is up to date with the latest updates from Adobe. If Flash isn't up to date, you may get an error when you try to test the movie. So I'll test the movie and you can see that we're pulling in the city name and weather information. This is all based on a zip code, this is current data coming from the Yahoo Weather API.
On the left side here, you'll see to this our particle system. It's using the same concepts that we've talked about throughout this chapter, so we have a y velocity of the particles making them move down and then they're reset and put it back at the top once they get off the screen. So there's an example of a particle system in a real-world application. For those of you who want to stick around, I'll show how this application is set up. First if you'd like to learn more about developing AIR applications, there's a great lynda title called AIR Essential Training, and there you can learn all the basics of developing AIR applications.
You can also get a lot of the tools you'll need on the Adobe website. To find the Adobe AIR site, you can just go to adobe.com/air. In my browser, it says adobe.com/products/air, but typing in adobe.com/air will get you there as well. From there you can click the link to download Adobe AIR now. If you want to get more information about developing applications using Flash, you can go to adobe.com/devnet/air/Flash. This is the Adobe AIR Developer Center for Flash, and here you can find a bunch of tutorials and articles about developing AIR applications using Flash.
So let's go back to Flash and take a look at how this application's set up. Select the first keyframe of the actions layer and open up the actions panel. Other than the particle system, this application is primarily XML driven. If you want more information about working with XML and ActionScript 3.0, I recorded a title in Online Training Library focused entirely on that topic. So here we have a URLLoader and some variables set up, one of them that's important is the zip code. All this weather application is based on zip code. To make it work, I'm using the Yahoo Weather API.
The way that works is you send a URLRequest to this address that I have highlighted here and then you tack on whatever zip code you want weather for at the end. The data that gets loaded in is an RSS feed that has weather information for that zip code. So in my dataReady function here, I'm processing that weather data and setting variables for the city and temperature and the weather. Here for testing purposes, I set the weather equal to rain. Then I have a conditional statement that checks to see if the string rain is inside of the weather string.
If so, then we have a movie clip called icon go to and stop in a frame called rain. Let's take a look at that frame. The icon movie clip is very simple and it just has two frame labels and two sets of artwork. One is a sun and it has a sun icon, and one of them's rain and has a cloud and this is where our particle system is contained. If I double-click the rain movie clip in the library, I can enter its Timeline. In this movie clip, I have a cloud and a mask.
The mask is what masks all the rain. I'll go to the first keyframe of the actions layer and open up the actions panel. Here you'll see the code is pretty much exactly what we did in the last movie. We're importing the particle class, we have a numOfParticles variable. One thing that's new here is that we have a variable that's class datatype that's holding the particle class, which is raindrop in this case which is going to be our rain particle. Using this technique is a little bit easier to transport this code into another application later on.
We have an array for our particles and a container to hold them. At the bottom of the code, we add the container to the Stage and put the cloud in front of everything else. And then run makeParticles every frame The makeParticles function is pretty similar to the function that we've used before to create particles and to move them. First, we check to see if the length of the particles array is less than the number of particles that we want. If so, we create a particle and we set the particle's properties. Some additional things I'm doing here is I'm setting the mask for the container and adding the particle to the container.
From there, I have a loop that updates every particle, checks the particle's boundaries so if it's y position is below the mask, then I reset the values of the particle. That is a best practice from working with animated elements in an ActionScript set mask, I'm resetting the mask here. Now that we've reviewed the code, let's look to the application again. So there's our particle system. The rain is simply using y velocity to move down and resetting its position once it gets out of the range of the mask.
So that's it. Now you can take what you know so far and use it in a real-world application.