IntroductionWelcome| 00:00 | Hi, I'm Todd Perkins and aside from
being an overall Flash enthusiast,
| | 00:04 | I've written several books on Flash and
I'm an Adobe certified Flash constructor.
| | 00:09 | In this title, I'm going to walk you
through creating particles and particle systems.
| | 00:14 | Much of my inspiration for this title has come
from other ActionScript gurus like Seb Lee-Delisle.
| | 00:20 | Seb Lee-Delisle has also recorded a title on particles
that can be found in the Online Training Library.
| | 00:26 | Let's take a look at some of the
applications we'll be creating in this title.
| | 00:29 | One of the applications displays the weather
and is powered by Yahoo! weather.
| | 00:34 | If it's raining outside, we have a
particle system that displays rain particles.
| | 00:38 | We'll talk about how to use particles in creative ways.
For example the wake from the boat is a particle system,
| | 00:44 | the splash that the fish makes is a particle system,
| | 00:47 | and the fish itself here is even a particle.
| | 00:50 | We'll talk about how to make interactive particles
like this particle system that explodes when you click on it.
| | 00:56 | We'll talk about to create particle effects
like smoke and we'll even add particles to video.
| | 01:01 | So I hope you're excited to learn
about how to create particle systems.
| | Collapse this transcript |
| Prerequisites| 00:00 | In this title, we're going to be working very fast and I'm going
to assume that you know a lot of ActionScript and are very
| | 00:05 | familiar with the basics of Flash.
| | 00:07 | So in this movie we'll start with some
of the prerequisites for this title.
| | 00:11 | First, I expect to have a basic knowledge
of Flash as taught in Flash CS3 Fundamentals.
| | 00:16 | You should know how to manipulate objects on the Stage,
| | 00:19 | had to create movie clips and how to modify their registration points
| | 00:23 | and a little about working with linkage properties. You should
be familiar with the concepts taught in ActionScript 3.0
| | 00:28 | in Flash CS3 Essential Training and ActionScript 3.0
and Flash CS3 Beyond on the Basics.
| | 00:34 | We're going to quickly write a lot of code here.
| | 00:36 | For a lot of the code, I'm actually going be just explaining it,
assuming that it's very easy for you to read code and catch
| | 00:42 | on to how it's working and how you can do the same things.
| | 00:45 | Another title that's not a prerequisite,
| | 00:47 | but helpful because we'll be talking about XML a
little bit, is ActionScript 3.0: Working with XML.
| | 00:53 | And so know you're familiar with what I
expect you to know, let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're premium subscribers to lynda.com or have this title
on a disc, then you have access to the exercise files.
| | 00:07 | The exercise files in this title are organized by chapters.
| | 00:11 | Each chapter is organized by movies.
| | 00:13 | Throughout the title, I'll be saying we are working in, for example,
the Chapter 4 folder for that chapter. Then I'll say we're
| | 00:19 | working in the movie one folder or the movie two folder, etc.
| | 00:23 | Most of the folders have start and final folders.
| | 00:26 | The start folders contain the initial states of
the files when we start working on that exercise.
| | 00:30 | The final folders contain the final state
of the files after the exercise is complete.
| | 00:34 | If you have access to the exercise files, don't worry, you
can still follow along. I'll explain as we go along how to setup
| | 00:41 | your files similarly to the files we're working
on and I'll walk you through all the code
| | 00:45 | so that you'll be able to retype the code in your file.
| | 00:48 | So let's get started.
| | Collapse this transcript |
|
|
1. Understanding Particle SystemsUnderstanding what particles are| 00:00 | A lot of people think of particle systems as something that looks
really cool, but not very useful in a real-world application.
| | 00:06 | Throughout this title I want to put a lot of emphasis
on how you can use particles in real-world applications.
| | 00:12 | In this application, the splashes coming off of the boat are particles.
| | 00:16 | A particle system is also generated when
the fish hits the water and splashes.
| | 00:21 | The fish itself is even a particle.
| | 00:24 | So you can use particles in all kinds of
different ways in different applications.
| | 00:28 | You'll notice the background is animating to
the left and looping around coming from the right.
| | 00:33 | In this title we're going to talk about how to do that
| | 00:35 | using particles.
| | 00:37 | So as we move forward, don't think the particles are just little
dots that you can only use for a small amount of things. We'll talk
| | 00:43 | about how to use all kinds of different objects as
particles and how to use particles in lots of different ways.
| | Collapse this transcript |
| Understanding how particle systems work| 00:00 | In this movie, we'll take a look at the
general way that a particle system operates.
| | 00:04 | The first thing we have is a particle class.
| | 00:07 | The particle classes actually fairly simple.
It has several properties that we can modify.
| | 00:12 | We initialize the properties in the constructor,
| | 00:16 | and we have an update method
| | 00:17 | to update all the properties based on some pretty simple math.
| | 00:20 | Believe it or not this is actually the same particle class
that we're going to be using throughout most of this title.
| | 00:25 | We're just going to add a little bit here and there and use it in different
ways to create different types of particles that behave differently.
| | 00:32 | Animating many particles of the same time is called a particle
system and in a particle system, you don't have control
| | 00:38 | over all the individual particles, but rather
| | 00:41 | you give each particle a range of values and
the whole group of particles behaves a certain way.
| | 00:47 | For example, I'll test the movie and
you'll see the particles behind the boat
| | 00:52 | shoot out to the left in a little bit. The fish
particles come out when the fish makes a splash
| | 00:58 | and the fish itself as a particle.
| | 01:00 | And so it jumps up every few seconds and
rotates into the direction it's moving.
| | 01:07 | Let's take a look of the particle code here
| | 01:09 | for a particle system.
| | 01:10 | We have some simple variables that dictate how many particles we're
going to create, what a class we're going to use to create the particles.
| | 01:17 | Then we use loops to generate the particles
| | 01:20 | and to update them by running the update method.
| | 01:23 | The particles are connected to the particle class
| | 01:26 | via linkage properties.
| | 01:31 | So that's a general idea of how a particle system works. We're going
to have the same set up with a particle class, a particle system
| | 01:37 | and movie clips connected to the particle class
| | 01:40 | through this whole title.
| | 01:41 | So that's a look at our workflow.
| | 01:43 | Now let's get started making some particles.
| | Collapse this transcript |
|
|
2. Making Particles MoveBuilding the particle class| 00:00 | In this chapter we're going to build the foundation
for our particle class by adding movement to our particles.
| | 00:06 | If you're following along, you can open up the exercise files
folder and in the Chapter 2 folder you'll find the movie
| | 00:12 | one folder and inside that folder, you'll see the start folder
and there's this whole folder structure for our package,
| | 00:18 | com/lynda/particles and the Particle.AS file.
| | 00:22 | If you don't have access to exercise files, you can set up the
same folder structure and create the Particle.AS file now.
| | 00:28 | I'm going to be following the same routine through using
the particle class file throughout this whole title so I'm just
| | 00:34 | going to reference the particle class file for that
movie in each movie. So let's open Particle.AS and
| | 00:40 | take a look at how it's set up. We have our package declaration
importing the display classes, because we're going to be
| | 00:46 | extending sprite class. Now the reason we're extending the sprite class is
because we want to be able to connect movie clips to our particle class.
| | 00:53 | So you have to at least extend the sprite class in order to
do that. You can also extend movie clip class if you'd like to.
| | 00:59 | Then we have our constructor method,
| | 01:02 | and we have method called update. The update method is pretty
much where all the magic happens. Basically the way that this
| | 01:08 | class works is we set up a whole bunch of different properties
like velocity and acceleration and we apply to them using
| | 01:15 | the update method. The way the particles animate
is we run the update method repeatedly, over time
| | 01:21 | from the main Timeline.
| | 01:23 | So there's a look at our basic particle class. The next thing
to do is to start making the particle be able to move by
| | 01:29 | creating velocity properties.
| | 01:31 | We'll talk about how to do that in the next movie.
| | Collapse this transcript |
| Creating particle velocity| 00:00 | Now we'll take a look at adding velocity properties to our
particle class so we can start making the particles move.
| | 00:06 | If you're following along, I'm working
in the particle class for movie two.
| | 00:10 | So the first thing we'll do is create two public properties,
one called xVelocity and one called yVelocity and
| | 00:17 | they'll both be numbers.
| | 00:19 | We're give them a value in the constructor function.
| | 00:28 | So in constructor function, I'm just going to
initialize both of these properties to zero.
| | 00:38 | That way the particles won't move unless we give
them X or Y velocities. In the update method,
| | 00:45 | we'll write the code that moves the particles. All we're
going to do is increment their current X and Y positions
| | 00:51 | by the values of x and yVelocity respectively. We'll take the
particle's x-position and we'll add to it in the amount of xVelocity.
| | 01:01 | So a negative value will move the particle to the left and
a positive value of will move the particle to the right.
| | 01:07 | The same thing for the y-position and yVelocity.
| | 01:10 | So a positive yVelocity will move the particle
down and a negative yVelocity will move the particle up.
| | 01:17 | And that's really all that there is to velocity. So at
this simple level, we simply set a value for the particle's
| | 01:23 | velcoity and we moved the particle by it's velocity amount.
| | 01:28 | Now that we have our velocity set up,
| | 01:30 | we'll connect a movie clip in an FLA file to this class.
| | Collapse this transcript |
| Connecting a movie clip to the particle class| 00:00 | Now we'll take a look at connecting a particle movie clip
in an FLA file to our particle class. If you're following along,
| | 00:07 | I'm working in Simple_Particle.FLA and our particle class file.
Both of these files can be found in the movie three folder.
| | 00:13 | If you don't have access to the exercise files, make sure this
FLA file is in the same folder as the com folder for your class
| | 00:20 | and that it's not inside of the class files
or not somewhere at some remote location.
| | 00:25 | You also want have a movie clip in your library called Ball with
center registration. So I'm going right-click or Control-click
| | 00:31 | the Ball movie clip in the library and choose Linkage
and I'm going to check Export for ActionScript. Now the
| | 00:37 | important thing we do here is we connect the particle class
to the base class for this symbol and not just the class.
| | 00:44 | Each item that you export for ActionScript from
your library needs to have a unique class name.
| | 00:50 | So if we were to put our particle class there then we'd
only be able to link one movie clip for particle class.
| | 00:56 | So we'll put in the base class instead,
| | 00:59 | so that each item we export for ActionScript
from our library can potentially be a particle.
| | 01:04 | So our base class will be com.lynda.particles.Particle- capital P.
| | 01:10 | Now when you click OK, Flash would tell you that the ball
class doesn't already exists so Flash is going to create
| | 01:17 | a class for you, which is exactly what we want to happen,
and that class, ball, is going to inherit from our particle class.
| | 01:24 | That's exactly what we want to happen.
| | 01:26 | SO click OK and we've successfully connected our ball in
the library to our particle class. Next we'll take a look
| | 01:32 | at animating particles.
| | Collapse this transcript |
| Animating a particle| 00:00 | Now we'll look at making our particle move. If you're following along
I'm working in Animating_Particles.FLA in the movie four folder.
| | 00:08 | On this Stage we have our ball particle
and it has an instance name of ball.
| | 00:12 | Let's go to the first keyframe in
the Actions layer and open up the actions panel.
| | 00:16 | Here I've already written some code.
| | 00:18 | A function called updateBall that's connected to an interframe event.
| | 00:23 | So above that,
| | 00:24 | I'll set some initial properties for the x and
yVelocity of the ball. ball.xVelocity and we'll set that
| | 00:30 | equal to 5 and on the next line, we'll set the yVeolcity of the Ball
| | 00:36 | equal to negative one.
| | 00:39 | Then in our updateBall function we'll simply
update the ball by calling the ball's update method.
| | 00:46 | Test the movie and watch the ball animate.
| | 00:52 | We're seeing that the update method is running every frame,
and it's moving the ball based on its x and y velocities.
| | 00:58 | So now you've seen we created a basic
particle animation and it was really simple.
| | 01:02 | Next we'll take a look at making multiple
particles animate at the same time.
| | Collapse this transcript |
| Creating a particle system| 00:00 | Now we'll take a look at building a particle system, that is many
particles that animate. If you're following along, I'm working
| | 00:06 | in a Particle_System. FLA. This file can be found in the movie
five folder. Notice that there's no ball in the Stage anymore.
| | 00:13 | There's only one layer as the actions layer.
| | 00:15 | Let's go the first keyframe in the actions layer and open up
the actions panel and here's all the code for this particle system.
| | 00:22 | Now if you don't have access to the exercise files,
you can just copy this code down.
| | 00:26 | I'll walk you through it quickly and you'll see that is fairly simple.
I have a variable here for the total number of particles that I want.
| | 00:32 | Then I have a variable here that it's an array to hold all
the particles and I just initialize it to an empty array.
| | 00:39 | We add an event listener to the main Timeline to update this
Stage in every frame and the updateStage function is where all the
| | 00:45 | magic happens.
| | 00:46 | The first thing we do is we check to see if the length
of the particles array is less than the number of particles.
| | 00:54 | If so, then we'll make a particle.
| | 00:56 | To make a particle we create a new instance of the
particle class, which is ball, and we add it to the Stage.
| | 01:02 | Then we set its x and y velocities to random values.
| | 01:05 | You can feel free to change the values
here to any values that you want.
| | 01:09 | We place it in an x and y position.
| | 01:12 | Here, I just put the x and y position at the center of
the Stage. Then we add that particle to our particles array.
| | 01:18 | So this keeps on running every frame until we've reached
as many particles as we want in our particles array.
| | 01:24 | Every frame we update
| | 01:26 | every particle in the particles array through a loop.
| | 01:29 | And that's really all there is to it. If you test the movie
at this point, you'll see all the particles animate.
| | 01:37 | You'll notice Flash only creates 20 particles because
that's what we have in our numOfParticles variable.
| | 01:43 | That's really all there is to creating a basic particle system.
So at this point you may be wondering how you make
| | 01:48 | particles continue to come from particle system and to
keep animating and to keep creating particles every frame.
| | 01:54 | We'll take a look at how to do that in the next movie.
| | Collapse this transcript |
| Regenerating particles| 00:00 | Now we'll take a look at one way you can regenerate particles
to make particles continually flowing from the source.
| | 00:07 | If you're following along, I'm working in Regenerating_Particles.FLA.
This file can be found in the movie six folder. Let's open up the
| | 00:13 | actions panel and scroll down to the for loop
that's inside of the updateStage function.
| | 00:18 | Now I've added some code here. Because you're probably familiar
with how to do these exact techniques, I just want to explain it.
| | 00:24 | Now what I'm doing is I'm creating a variable
called particle to represent particles array index I.
| | 00:30 | That way I can refer to it shorthand later on. Now I have a
conditional statement that may seem massive and amazing complex,
| | 00:37 | but you're probably familiar with this process. Basically,
what we're doing is we're checking to see if the particle
| | 00:42 | is off the Stage.
| | 00:44 | We check to see if it's off the Stage to the right
| | 00:47 | or if it's off the Stage to the left or if it's off the Stage
| | 00:51 | at the bottom or if it's off the Stage at the top.
| | 00:55 | So we check the particle's x and y positions
and then if the particle is off the Stage,
| | 01:02 | we reset the particle's velocity,
| | 01:04 | and then reset the particle's position back to the center of the Stage.
| | 01:08 | So may look like a fairly large block of code here,
but you can see it's pretty simple. We check the particle's
| | 01:14 | position and then we reset it if it's out of bounds.
| | 01:17 | So when you test movie you can see that the particles are
continually flowing from the center of the Stage, but really what's
| | 01:23 | happening is that whenever a particle
gets out of bounds, it's properties get reset.
| | 01:27 | And that's just one way to regenerate particles.
| | 01:30 | You can do just based on the y position or just the x position
or you can set up your own boundaries and there
| | 01:36 | are a few different other ways that I'm going
to talk about through the rest of this title.
| | 01:40 | And you also may also come up with you own. So now that we've created
a basic particle system, let's take a look at a particle system in a
| | 01:46 | real-world application.
| | Collapse this transcript |
| In practice pt. 1: Building rain in a weather application| 00:00 | Here is an example of a Flash application that uses the
particle system that we've built up to this point.
| | 00:05 | If you're following along, you can find
the file weather.FLA in the movie seven folder.
| | 00:10 | 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,
| | 00:17 | you may get an error when you try to test the movie.
| | 00:19 | So I'll test the movie and you can see
that we're pulling in the city name and
| | 00:24 | weather information. This is all based on a zip code,
this is current data coming from the Yahoo Weather API.
| | 00:31 | 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
| | 00:37 | this chapter, so we have a y velocity of the particles
making them move down and then they're reset and
| | 00:43 | put it back at the top once they get off the screen.
| | 00:47 | So there's an example of a particle
system in a real-world application.
| | 00:50 | 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
| | 00:57 | developing AIR applications, there's a great lynda title
called AIR Essential Training, and there you can learn
| | 01:02 | all the basics of developing AIR applications.
| | 01:05 | You can also get a lot of the tools you'll need on the Adobe website.
| | 01:10 | To find the Adobe AIR site, you can just go to adobe.com/air.
| | 01:15 | In my browser, it says adobe.com/products/air, but
typing in adobe.com/air will get you there as well.
| | 01:22 | From there you can click the link to download Adobe AIR now.
| | 01:26 | If you want to get more information about developing applications
using Flash, you can go to adobe.com/devnet/air/Flash.
| | 01:35 | This is the Adobe AIR Developer Center for Flash,
| | 01:38 | and here you can find a bunch of tutorials and articles
about developing AIR applications using Flash.
| | 01:45 | So let's go back to Flash
| | 01:46 | and take a look at how this application's set up.
| | 01:49 | Select the first keyframe of the
actions layer and open up the actions panel.
| | 01:53 | Other than the particle system, this application is primarily XML driven.
| | 01:57 | If you want more information about
working with XML and ActionScript 3.0,
| | 02:01 | I recorded a title in Online Training Library
focused entirely on that topic.
| | 02:06 | So here we have a URLLoader and some variables set up,
one of them that's important is the zip code.
| | 02:13 | All this weather application is based on zip code.
To make it work, I'm using the Yahoo Weather API.
| | 02:19 | The way that works is you send a URLRequest
| | 02:22 | to this address that I have highlighted here
| | 02:25 | and then you tack on whatever zip code you want weather for at the end.
| | 02:29 | The data that gets loaded in is an RSS feed
that has weather information for that zip code.
| | 02:35 | So in my dataReady function here, I'm processing that
weather data and setting variables for the city and
| | 02:41 | temperature and the weather.
| | 02:43 | Here for testing purposes, I set the weather equal to rain.
| | 02:48 | Then I have a conditional statement that checks to see
if the string rain is inside of the weather string.
| | 02:54 | If so, then we have
| | 02:57 | a movie clip called icon go to and stop in a frame called rain.
| | 03:01 | Let's take a look at that frame.
| | 03:05 | The icon movie clip is very simple and it just
has two frame labels and two sets of artwork.
| | 03:12 | 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.
| | 03:19 | If I double-click the rain movie clip in the library,
| | 03:22 | I can enter its Timeline.
| | 03:23 | In this movie clip, I have a cloud and a mask.
| | 03:27 | The mask is what masks all the rain.
| | 03:30 | I'll go to the first keyframe of the
actions layer and open up the actions panel.
| | 03:34 | Here you'll see the code is pretty much exactly what we did
in the last movie. We're importing the particle class,
| | 03:41 | we have a numOfParticles variable.
| | 03:43 | One thing that's new here is that we have a variable that's
class datatype that's holding the particle class, which is
| | 03:50 | raindrop in this case which is going to be our rain particle.
| | 03:53 | Using this technique is a little bit easier to transport
this code into another application later on.
| | 03:59 | We have an array for our particles and a container to hold them.
| | 04:03 | At the bottom of the code,
| | 04:05 | we add the container to the Stage
| | 04:07 | and put the cloud in front of everything else.
| | 04:10 | And then run makeParticles every frame
| | 04:13 | The makeParticles function is pretty similar to the function
that we've used before to create particles and to move them.
| | 04:19 | First, we check to see if the length of the particles
array is less than the number of particles that we want.
| | 04:25 | If so, we create a particle
| | 04:27 | and we set the particle's properties. Some additional
things I'm doing here is I'm setting the mask for the container
| | 04:34 | and adding the particle to the container.
| | 04:38 | From there, I have a loop that updates every particle,
| | 04:41 | checks the particle's boundaries
so if it's y position is below the mask,
| | 04:45 | then I reset the values of the particle.
| | 04:48 | That is a best practice from working with
animated elements in an ActionScript set mask,
| | 04:53 | I'm resetting the mask here.
| | 04:55 | Now that we've reviewed the code,
let's look to the application again.
| | 05:01 | So there's our particle system. The rain is simply using y
velocity to move down and resetting its position once it
| | 05:08 | gets out of the range of the mask.
| | 05:10 | So that's it. Now you can take what you know
so far and use it in a real-world application.
| | Collapse this transcript |
|
|
3. Adding Realistic Motion to ParticlesCreating particle gravity| 00:00 | In this chapter we're going to talk about adding more
realistic animation to our particles like gravity and friction and
| | 00:06 | fading and growing and shrinking and such. We'll start with
talking about gravity. If you're following along, I'm working in
| | 00:19 | Particle_Gravity.FLA and our particle class and both
can be found in the Chapter 3, movie one folder.
| | 00:19 | Let's first go to a particle class file.
| | 00:21 | The first thing we're going to do is create
another public property and we'll call that gravity.
| | 00:27 | That's going to be a number
| | 00:29 | and in our constructor we'll initialize that to zero.
| | 00:34 | Then in our update function,
| | 00:36 | above everything else,
| | 00:38 | I'm going to add to the yVelocity in the amount of gravity.
| | 00:43 | So that way if gravity has a positive value, it will keep adding
to the yVelocity value and accelerate the object's movement down.
| | 00:52 | So I'll add to the yVelocity in that way here.
| | 00:58 | And that's it. Let's do a File, Save and make sure
this file's saved before we give test this out.
| | 01:04 | And we'll have to go back to Particle_Gravity.FLA
and open up the actions panel.
| | 01:09 | We'll take a quick look at our code and basically this is
the exact same code from when we looked at regenerating particles.
| | 01:15 | So we have a simple particle system that regenerates.
If you test the movie, you can see that in action.
| | 01:20 | And now we're going to apply gravity to particles.
| | 01:23 | All we're going to do to do that is where we set the x and
y velocities for the ball in updateStage in that first
| | 01:30 | conditional statement, we'll set the gravity for the ball.
So ball.gravity and we'll set that equal to one.
| | 01:38 | Then we'll test the movie and see that in action.
| | 01:43 | So as the balls come out from the center of the Stage,
| | 01:46 | you can see that they fall, there's sort of a gravity pushing on them.
| | 01:51 | We can weaken the gravity by reducing that
amount so let's say .5 for the gravity.
| | 01:59 | And they gradually fall down or let's say
we made the gravity a negative value.
| | 02:07 | And they all gradually move up.
| | 02:12 | I'm going to change the value back to one,
| | 02:15 | and that's how to apply gravity to particles.
| | Collapse this transcript |
| Creating particle friction| 00:00 | Along the same lines as gravity, another thing that can make
particle movement a little bit more realistic is friction.
| | 00:06 | In this movie, we'll take a look at
adding friction to our particle system.
| | 00:09 | If you're following along, I'm working on our particle class
file and Particle_Friction.FLA and both files will be found in
| | 00:15 | the movie three folder.
| | 00:17 | Both files will be found in the movie two folder.
| | 00:20 | So in this file we'll create a public property and
we'll call it friction. It's going to be a number and
| | 00:27 | we'll initialize it in our constructor to one.
| | 00:31 | What we're going to do with friction is we're going to mulitply
it by the current values of the x and y velocity properties.
| | 00:39 | Let's scroll down to our update method
and at the very top of our update method,
| | 00:43 | we'll apply friction into our x velocity property.
| | 00:49 | So we're going to multiply x velocity
| | 00:51 | by friction.
| | 00:54 | Now with a value of one, friction isn't going to
change at all, but let's say the value were something like .9.
| | 01:01 | Then every time we update our particle, friction will reduce
the xVelocity ever so slightly and this will kind of apply like
| | 01:08 | an easing effect and make the motion a little more realistic.
| | 01:11 | So we'll apply the same thing to yVelocity, multiply it by friction.
| | 01:17 | And that's really all there is to applying friction. Other than
setting up the value in our FLA file, that's a pretty simple
| | 01:23 | process. So let's save this file.
| | 01:26 | File, Save and then head over to Particle_Friction.FLA.
| | 01:30 | In the code in that file,
| | 01:31 | right below where we set our gravity for the ball, let's set
the ball's friction. Now I'm doing this in the initial conditional
| | 01:39 | statement because we only need to set
the friction for the ball one time.
| | 01:43 | And I'm going to set this equal to .98
| | 01:48 | and to make it a little the more obvious with the gravity
applied, I'm going to say gravity of .5 so I'll weaken the
| | 01:54 | gravity a little bit and I'll apply some friction and you'll
see the particles slow down horizontally and vertically.
| | 02:01 | So when we test the movie, because of friction, the particles
slow down horizontally and vertically but because of gravity,
| | 02:08 | the particles speed up vertically a little bit.
| | 02:16 | So now our motion's a little bit more realistic.
| | 02:18 | Now, if you wanted the particles to speed up a little
bit with friction you could apply kind of a negative
| | 02:24 | value in gravity but with friction it would just be a value over one.
So let's say I did 1.05, for example. Now when I test the movie
| | 02:32 | we'll see when the particles update,
| | 02:35 | the x and y velocities are increasing.
| | 02:42 | And that's all there is to it. So now you
can apply friction to your particles as well.
| | Collapse this transcript |
| Growing and shrinking particles| 00:00 | Another effect we can add to our particles is to make them
grow or shrink. If you're following along, I'm working in Particle.As
| | 00:07 | and Particle_Grow.FLA. Both of those files are in the movie three folder.
| | 00:11 | We're going to make our particles grow in a similar
way to how we applied friction to our particles.
| | 00:15 | We're going to create growX and growY properties.
They're both going to be numbers.
| | 00:24 | Make sure to specify them as public as well.
| | 00:30 | Then we'll initialize them with values of one.
| | 00:33 | So growX equals one
| | 00:36 | and the same thing for growY.
| | 00:39 | Then at the very bottom of our update method, we'll modify
the scaleX and scaleY properties by their growX and growY
| | 00:49 | properties respectively. So scaleX times
equals growX and the same thing for scaleY.
| | 00:56 | And we'll multiply scaleY by growY.
| | 01:01 | So as the particles shoot out, they'll scale up.
| | 01:04 | Let's save this file, File, Save and then jump over to our FLA file.
| | 01:10 | Right below where we set the initial X and Y
positions of the particles I'm going to set
| | 01:15 | growX and growY properties.
| | 01:18 | Set growX equal to 1.02
| | 01:23 | and then we'll set growY equal to 1.02 as well.
| | 01:28 | And when we test the movie,
| | 01:31 | we'll see they grow then after they-
| | 01:34 | (Laughs.) Ah, that's really funny.
| | 01:39 | You'll see the particles continue to grow after they
regenerate so we kind of want to reset the X and Y scales
| | 01:45 | of the particles once we regenerate them. So I'm going to scroll down
| | 01:49 | and we're in an area where we reset the particles in
the conditional statement, it's within the loop in our code.
| | 01:55 | We'll just set of particle.scaleX equal to particle.scaleY
| | 02:03 | and that will be one.
| | 02:06 | So we'll set both of them in the same
line of code there. That's fine to do.
| | 02:09 | Test the movie
| | 02:11 | and the particles grow,
| | 02:14 | and they shrink back to their original size once they're recreated.
| | 02:18 | And you can see that the particles shrink back
to their original size when we reset them,
| | 02:23 | and that's all at there is to making particles grow.
| | Collapse this transcript |
| Fading particles| 00:00 | Now we'll make our particles fade out.
| | 00:02 | We'll do that in the same way that we applied friction and grow to our particles.
| | 00:06 | If you're following along, I'm working in the Particle class
and Particle_Fade.FLA and both files can be found in the
| | 00:12 | movie four folder.
| | 00:14 | So let's create a public property and we're going to call that fade.
| | 00:22 | We'll set the data type as a number and then initialize
the value at the bottom of our constructor to one.
| | 00:29 | And the what we'll do is at the bottom of our update method,
we'll modify the alpha of the particle by multiplying that by fade.
| | 00:38 | So if the value is a little bit less that one and then the object
would fade out a little bit every time we run the update method.
| | 00:45 | That's also where we're going to add to
our particle class so let's choose File, Save,
| | 00:49 | save this file, jump over to Particle_Fade.FLA, open up
the actions panel and I'm going to scroll up in my code.
| | 00:57 | I'm going to find were we said the initial properties for the ball.
| | 01:01 | And then right below where we set growX and growY
| | 01:05 | we'll set fade for the ball
| | 01:08 | equal to .98.
| | 01:11 | Now we test the movie.
| | 01:14 | And you'll see the particles fade out.
| | 01:19 | Notice that they can become completely invisible after a while
so obviously we'll have to reset the alpha for the particles.
| | 01:25 | So we'll do that
| | 01:26 | at the bottom of our conditional statement inside the loop
| | 01:29 | in the updateStage function.
| | 01:32 | We'll set the alpha of our particle,
for each particle that gets reset, to one
| | 01:38 | and one thing we can do
| | 01:39 | is we can check to see if the particle's
alpha is less than or equal to zero.
| | 01:44 | If so, we can reset that particle.
| | 01:46 | So I'm going to add that to my already large conditional statement. I'll
add an OR operator in there and we'll just check to see if the particle's
| | 01:53 | alpha property is less than or equal to zero.
| | 01:56 | That will just be one more expression is check to see
when we reset the particle. So we'll test movie now
| | 02:04 | and the particles fade out a little bit and they
regenerate and start again in an alpha of one.
| | 02:11 | So that's how to fade particles. Now that we've taken a look at
adding some more realistic animation effects to our particles,
| | 02:18 | let's take a look in using these effects in a real-world application.
| | Collapse this transcript |
| Creating particle rotation| 00:00 | In this movie we'll take a look at adding rotation of particles
so that they rotate in the direction that they're moving.
| | 00:06 | If you're following along, I'm working in Particle.AS and
Particle_Rotation.FLA and both files can be found in
| | 00:11 | the movie five folder.
| | 00:13 | If you have these files, the first thing I want you to do is test the movie.
| | 00:16 | I built a particle system here that has arrows and I took
away their gravity and friction properties so we can really see
| | 00:23 | this in action. So test the movie right now.
| | 00:26 | You can text it straight from Particle.AS.
| | 00:30 | And here you can see arrows and notice that they're all pointing
to the right, but they're all moving in different directions.
| | 00:36 | So our goal here is to make the arrows just rotate
or point towards the direction that they're going.
| | 00:43 | So the first thing we'll do here is we'll create
a public property and we'll call that autoRotate.
| | 00:50 | It's going to be Boolean and
we'll initialize it to false in our constructor.
| | 01:00 | Then in our update method we'll check
to see if the value of autoRotate is true.
| | 01:06 | If so, then we'll rotate the particle based on it's X and
Y velocity. In order to move a particle based on it's X and
| | 01:13 | Y velocities, we calculate the ratio of it's X
and Y velocities and get an angle out of that.
| | 01:20 | In order to do that we're going to use
the built-in Math method called Math.atan2.
| | 01:25 | Math.atan2 takes in two properties. First it takes a
vertical value, so we'll pass in yVelocity first and
| | 01:32 | then it takes a horizontal value so we'll pass in xVelocity second.
| | 01:36 | I'll press F4 on my keyboard to get
a little more space for writing my code.
| | 01:40 | What you really need to remember where you using Math.atan2
is to pass in yVelocity first, because you naturally want
| | 01:47 | to pass in xVelocity first because you typically think X and then Y.
| | 01:51 | But in this method it's reversed.
| | 01:53 | That's how they get you. So remember that and then that value
that's returned by Math.atan2 gives us radians and that's
| | 02:01 | not an angle that we can use to rotate an object. In order
to rotate an object, we need to convert those radians to an angle.
| | 02:09 | The formula to convert radians to an angle
is to multiply the radians by 180 over Pi.
| | 02:15 | So we'll take our Math.atan2 and multiply that by 180 divided by Math.PI.
| | 02:22 | So that's all there is to it. So let's choose File, Save and we'll
jump over to Particle_Rotation.FLA and open up the actions panel.
| | 02:32 | You'll notice that the code for this particle system is
a little bit different than what we've done before.
| | 02:36 | We have our numOfParticles in our particle class that
represents our library items so we can make easily
| | 02:42 | transportable code.
| | 02:43 | We have a particles array, a container to hold them and then
we have a Timer. So we're running our makeParticles function
| | 02:49 | based on a Timer and not just based on ENTER_FRAME event.
| | 02:55 | Let's take a look at the run immediately code.
| | 02:58 | We're putting the container on the Stage, adding
an event listener to the timer to run make particles.
| | 03:03 | Starting the timer and then we're listening for ENTER_FRAME
on the main Timeline and running updateParticles every frame.
| | 03:09 | That function is very simple. It just updates
every particle in the particles array.
| | 03:14 | Where the real magic happens is in the makeParticles function.
Let's go there and the first thing we do is we clear the container.
| | 03:21 | So anything that's inside of our container we get rid of it
| | 03:24 | using both removeChild and the shift method of the array
class to take away the first particle from the particles array.
| | 03:30 | The next thing this function does is it has a loop to create particles
so along with a Timer, we're creating all the particles that
| | 03:36 | we want to create immediately, so we kind of get
this explosion effect. So what we have to do in here
| | 03:41 | is set the particles autoRotate property to true.
| | 03:47 | Then you'll see the particles rotate
| | 03:51 | along with their X and Y velocities.
| | 03:54 | Notice they're appearing wherever the mouse is.
| | 03:57 | Now they're rotating based on the direction that they're moving.
| | 04:01 | So that's a success.
| | 04:03 | The next thing we want to do is apply gravity
and watch them rotate down as they move down.
| | 04:08 | I have that in my code, and it's commented
so I'm going to uncomment that now and show it.
| | 04:14 | Notice as the particles move down they rotate downward.
| | 04:20 | So that works great.
| | 04:22 | Looking at the way these arrows move, reminds me of something else.
So what we're going to do now is uncomment this code
| | 04:28 | and we're going to change those arrows into fireworks.
| | 04:33 | Notice I'm simply uncommenting code
that sets fade values, growX and growY.
| | 04:39 | I'm applying a colorTransform to each particle.
| | 04:45 | Making sure to import the colorTransform classes,
| | 04:48 | and I'm going to change the particle class to firework
| | 04:55 | and inside of the firework particle,
| | 04:58 | there's another movie clip called glow_mc,
and that's where we're applying the colorTransform.
| | 05:03 | Now I'm just going change the background
to black and I'm going to need to press F4
| | 05:08 | to get all the panels back. I'll change
the background to black and test the movie
| | 05:13 | and behold the fireworks.
| | 05:22 | And there you have it. So there's how to rotate particles in
a particle system based on the direction that they're moving.
| | Collapse this transcript |
| In practice pt. 2: Creating boat spray| 00:00 | Here's another example of an application that uses the particle
system techniques that we talked about throughout this chapter.
| | 00:05 | If you're following along, I'm working in boat.FLA
and that file can be found in the movie six folder.
| | 00:11 | So let's test the movie and walk through
some of the features of this application.
| | 00:15 | It is just a simple animation of a boat
| | 00:17 | and the boat's shooting out some splash particles that fade and
grow as you can see. Another particle in this application is the fish.
| | 00:26 | The fish jumps out of the water and
| | 00:28 | using the autoRotate feature from the last movie,
| | 00:31 | it rotates in the direction that it's moving.
| | 00:33 | Once the fish gets back into the water some splash particles shoot up.
| | 00:37 | So there's another example of how you can add particles to one
of your applications. For those of you who'd like to stick around,
| | 00:43 | I'm going to walk through how this application is set up.
| | 00:46 | It's pretty simple on the surface, with several different layers
that are kind of self explanatory, like a background and the
| | 00:51 | moving background and the background waves.
| | 00:55 | There's a mask that is masking the fish and the silhouette of the boat
| | 00:59 | and the actions layer and that's pretty much it.
| | 01:02 | So I'll select the first keyframe of the
actions layer and open up the actions panel.
| | 01:06 | And what we're doing here is we're importing the particle class.
| | 01:10 | We have a number of particles, the particle class variable to
represent the particles that are going to be coming out of the boat,
| | 01:16 | that's called splash, an array for the boat splash particles,
| | 01:21 | a container to hold the boat splash particles,
a Timer for the fish to jump out-
| | 01:26 | that's going to run every three seconds-
| | 01:28 | a variable to hold the initial Y position of the fish,
| | 01:32 | a variable to hold the fish splash particles and a Boolean variable
| | 01:37 | to make sure that we don't continuously
create particles as the fish is jumping.
| | 01:42 | Let's scroll down and see the code that runs immediately.
| | 01:46 | So we're adding some elements to the Stage.
| | 01:48 | Adding an event listener to the main Timeline to listen for
the ENTER_FRAME event and to run the makeParticles function.
| | 01:54 | Adding an event listener to the Timer, listening for TimerEVENT.TIMER
and running a function called moveFIsh. Then we start
| | 02:01 | the timer, so let's first take a look at the function that makes
the particles. It's called makeParticles so I'll scroll up
| | 02:05 | and find makeParticles and what happens first is we create
a variable called particle, we create a new instance of
| | 02:11 | the particle class with that variable
| | 02:14 | and set some initial properties, add it to
the Stage and run a function called makeParticle
| | 02:20 | passing in the particle that we're making.
| | 02:22 | The makeParticle function, if you scroll down, simply sets initial
values for each particle. Values include X and Y, x- and yVelcocity
| | 02:30 | alpha, scaleX and scaleY, then we put
that particle in the particles array.
| | 02:36 | Going back to the makeParticles function,
| | 02:38 | if we ever have more particles in our particles
array than the number of particles that we want total,
| | 02:44 | we first remove that particle from the particles
array then we remove it from its parent container.
| | 02:49 | Then we simply have a loop that runs through each of
the particles in the particles array and updates them all.
| | 02:55 | Inside of here, we also run a function called updateFish,
which simply updates the fish on the Stage and the fish splash
| | 03:03 | particles. Let's take a look at that function.
| | 03:06 | Scrolling down to updateFish, now this is different from
the function that runs on the timer, which is called moveFish.
| | 03:12 | So keep that in mind as we look through this. The first thing we
do in updateFish is we check to see where the fish is on the Stage.
| | 03:18 | If it's low enough to make a splash, then we make the splash.
| | 03:23 | That's what this loop does here.
First we check to see if this is a new jump.
| | 03:28 | Then we said the X and Y positions of the splash particles
for the fish at the same location of where the fish is and
| | 03:34 | then we update
| | 03:36 | each particle in the fishSplash array. After the loop we set
new jump to false so we're not continuously moving fish splash
| | 03:43 | particles to the position of the fish as this
function is running and then we update the fish.
| | 03:49 | Let's take a look at the moveFish function,
which makes the fish shoot out of the water.
| | 03:53 | We have a variable called splash.
| | 03:56 | We're setting newJump to true,
| | 03:58 | setting the initial X and Y properties for the fish, x- and
yVelocity, gravity, friction, autoRotate. Then we empty out
| | 04:07 | the fishSplash array and make sure to
remove all the child elements from the Stage.
| | 04:14 | And then what this loop does right here
| | 04:16 | is it creates a whole bunch of fish splash particles,
kind of like what we did with the timer and the fireworks.
| | 04:22 | So it creates all the particles at once.
| | 04:25 | So we have a new FishSplash,
| | 04:27 | set fade, growX, growY,
| | 04:30 | and the friction, all the properties that are
going to be the same for each splash particle.
| | 04:34 | Add them all to the Stage,
| | 04:36 | put them in the fishSplash array and then
run makeFishSplash on each of the particles.
| | 04:41 | makeFishSplash sort of initializes each particle in the particle system.
| | 04:47 | We set the Y position equal to the fishY,
| | 04:49 | set x- and yVelocity.
| | 04:51 | The yVelocity's based on the velocity of
the fish and the xVelocity is a random value.
| | 04:56 | We set gravity to a random value
| | 04:59 | and initialize alpha, scaleX and scaleY to one,
| | 05:02 | and that's really all there is to it.
| | 05:04 | You can see that the application gets a little bit complicated
because you're using different particle systems at the same time,
| | 05:10 | but I'll test it again and we'll once again review how the particle
systems are working in this application. So we have the boat
| | 05:16 | splash particles that are fading and growing,
| | 05:20 | effected by gravity and friction.
| | 05:22 | The fish is a particle that auto-rotates and the fish splash particles
| | 05:27 | shoot up once the fish hits the water.
| | 05:29 | Now this point, you may be noticing that the animation is slowing down
| | 05:33 | or for some reason it's not playing up to the speed that it
should or playing along with a frame rate and that's because
| | 05:39 | we haven't yet optimized this application. We'll
take a look at how to do that in the next chapter.
| | 05:44 | But for now you have another example of
using particles in actual application.
| | Collapse this transcript |
|
|
4. Optimizing a Particle SystemUnderstanding garbage collection| 00:00 | Ween you're working with something with a lot of complex animation like
a particle system it's really important to keep your files optimized.
| | 00:06 | In this chapter we're going to talk about
two ways you can optimize your particle systems.
| | 00:11 | The first thing we're going to talk about a something called garbage collection.
| | 00:14 | Garbage collection refers to the Flash Player discarding unused objects.
| | 00:19 | In order for an object to be eligible for garbage collection,
it can't be in any array, it can't be on the Stage or in any
| | 00:25 | other display object and it can't have any other references to it, like
event listeners. So you have to manually remove any event listeners
| | 00:31 | that are attached to an object to make it eligible for garbage collection.
| | 00:34 | In a Flash application like this, garbage collection is not
controlled by you the Flash developer. The way that garbage
| | 00:41 | collection works is that as memory usage gets to a certain
point, Flash does something called a mark and sweep.
| | 00:47 | The Flash Player sort of scans your application looking
for elements that are eligible for garbage collection and once
| | 00:54 | it identifies all those elements, it gets
rid of them through a process called a sweep.
| | 00:59 | So it's important for you to note when you're developing
applications that simply removing an object from the Stage or
| | 01:04 | taking it out of an array doesn't automatically
mean it gets garbage collected immediately.
| | 01:09 | Garbage collection is something that happens sporadically and
you're actually not guaranteed when or if it will ever happen.
| | 01:16 | Regardless, you want to keep any unused objects eligible for
garbage collections so that you can keep your file optimized.
| | 01:23 | If you're following along, I'm working Garbage_Collection.FLA,
which can be found in the Chapter 4, movie one folder.
| | 01:29 | Let's open the first keyframe of the
actions layer and open up the actions panel.
| | 01:33 | This is the same boat application that we
looked at in the last movie of the last chapter.
| | 01:39 | The only thing I changed is the number of particles, I changed it to 100.
| | 01:43 | Let's take a look at what I did in this
application to optimize it for garbage collection.
| | 01:48 | There's a while loop inside of the makeParticles function
| | 01:52 | that runs as long as the length of the particles array
| | 01:55 | is greater than the total number of particles that we want.
| | 01:58 | As long as that's the case, we remove the first particle in
the particles array and we hold it in the particle variable.
| | 02:05 | So that's the first step, we take it away from the array.
The second step is to remove it from the Stage.
| | 02:09 | That's what we're doing here using removeChild,
| | 02:12 | and now I know there aren't any other references to this object
later on, but just to be safe I'm setting the particle's value to null.
| | 02:19 | The reason I set the object value to null is so later on I get an Output
window in case I forgot to remove any references to the object later on.
| | 02:27 | The other place where I optimize the application
for garbage collection is toward the bottom of the code.
| | 02:32 | This is in the moveFish function.
| | 02:34 | What I did is I emptied out the fishSplash array
| | 02:38 | using a while loop.
| | 02:39 | I hold the fish splash particle in a variable
| | 02:42 | and remove that from the beginning of the fishSplash array,
remove it from the Stage and set it to null.
| | 02:48 | So that's essentially how you optimize an application for garbage
collection. Take the element out of any arrays, remove it from
| | 02:55 | the Stage, remove any event listeners
or any other references to that object
| | 03:00 | and then garbage collection sort of happens on its own.
| | 03:03 | So I'll test the movie
| | 03:06 | and we'll notice that it runs smoothly,
| | 03:07 | with 100 particles in it.
| | 03:09 | That's 100 particles for the boat and for the fish splash.
| | 03:13 | So that's one way to optimize your Flash movie.
| | 03:16 | So whenever you have unused elements in a Flash application,
make sure to make them eligible for garbage collection.
| | Collapse this transcript |
| Recycling particles| 00:00 | Another way to optimize a particle system is to only create as many
particles as you need and then to simply recycle those particles.
| | 00:07 | If you're following along, I'm working in Recycling.FLA
and this file can be found in the movie two folder.
| | 00:12 | Let's go to the first keyframe of actions
layer and open up the actions panel.
| | 00:16 | If you scroll down to the makeParticles function you'll see that
I'm only creating particles if the length for the particles array
| | 00:22 | is less than the total particles that we want.
| | 00:26 | In the loop, I'm updating all the particles
and if a particle is ready to discard,
| | 00:31 | I simply run the makeParticle function on that particle,
| | 00:34 | which simply initializes the particle.
| | 00:37 | If you scroll down to the moveFish function, you'll
see I did the same thing with the fish splash particles.
| | 00:43 | I only create them while the length of the fishSplash
array is less than the total particles that we want.
| | 00:49 | And then I have a loop to initialize
them using the makeFishSplash function.
| | 00:54 | That's really all there is to recycling. Instead
of discarding them, you just re-initialize them.
| | 00:59 | Let's test the movie and see what it looks like.
| | 01:02 | So here's this example of our recycling technique.
| | 01:08 | And it may look pretty close to the garbage collection technique
and there might not be any difference at all on your machine.
| | 01:14 | So at this point, you may be wondering which method you should use.
| | 01:18 | The answer really depends on your application.
| | 01:21 | So you'll have to test it using both methods and you can pick
which one works better and you can also test using different
| | 01:26 | amounts of particles.
| | 01:27 | If you want to, you can also check out how
the particle system works on different machines.
| | 01:31 | One thing I recommend that you don't do is use as
many particles as your machine can possibly handle.
| | 01:37 | What I recommend doing is using as few particles as you can
because particle systems tend to be pretty intense on the
| | 01:42 | Flash player.
| | 01:44 | So there's look at how to optimize your particle systems.
| | 01:47 | So make sure to go to your particle systems and make sure you're
following at least one of these techniques to keep them optimized.
| | Collapse this transcript |
|
|
5. Adding Collision Detection to ParticlesUsing position-based collision detection| 00:00 | In this chapter we're going to be talking about collision detection,
that is making particles interact with other elements.
| | 00:06 | The first kind of the collision detection we're going
to talk about is position based collision detection.
| | 00:12 | If you're following along, I'm working in Basketball.FLA
| | 00:15 | in the Chapter 5, movie one folder.
| | 00:18 | If you don't have access to the exercise files
you can just create a simple basketball movie clip,
| | 00:23 | or any ball for that matter, and connect it to the particle class.
Let's go to the first keyframe of the actions layer and open up
| | 00:29 | the actions panel.
| | 00:30 | The code I have written here is really simple. We just have an event
listener for ENTER_FRAME running moveBall, which simply updates
| | 00:37 | the ball every frame.
| | 00:38 | If you test the movie now, you'll see that the ball doesn't move
because there's not yet a gravity, friction or velocity applied.
| | 00:45 | So what we'll do is, above this function declaration,
we'll initialize the gravity for the ball to one.
| | 00:55 | Now when we test the movie,
| | 00:57 | we'll see the ball moves down
| | 00:58 | according to gravity and then in the moveBall function
right below where we run the update method, let's do a
| | 01:04 | conditional statement to check the position of the ball.
If the position of the ball is at the bottom of the Stage,
| | 01:10 | we'll make the ball bounce up. So let's check the Y position
of the ball and see if it's greater than stage.stageHeight,
| | 01:19 | minus the height of the ball divided by two,
because the ball has center registration.
| | 01:26 | And if so, I'm going to copy the code in the conditional statement
here and paste it in the curly braces and set that > to an =.
| | 01:37 | If it's past the bottom the Stage, we'll said the ball
right on the bottom the station and we'll reflect its yVelocity.
| | 01:44 | The way that we do that is we multiply its yVelocity by negative one.
| | 01:51 | Let's test the movie and see how this works.
| | 01:54 | So when the ball hits the bottom of the Stage, it bounces right back up.
| | 01:58 | Notice that gravity is affecting the ball,
| | 02:00 | but it's not bouncing less over time.
That's because we also have to apply friction.
| | 02:06 | So on the next line of code, right below where we set the gravity
for the ball, I'm going to set the friction for the ball to .98.
| | 02:17 | Test the movie. The ball bounces less and less each time.
| | 02:22 | Until it pretty much stops.
| | 02:26 | So now we have some initial effects of the ball interacting
with its environment. We're taking the position of the ball,
| | 02:31 | and reflecting its yVelocity based on its position and don't
think you're limited to only yVelocity here. Of course, we could
| | 02:37 | reflect it off the right side of the Stage or off of any other object.
| | 02:41 | We simply check its position and reflect it based on its position.
| | 02:45 | So that's how to control collision detections based on a particle's position.
| | Collapse this transcript |
| Using built-in collision detection methods| 00:00 | Flash actually has some built-in collision detection methods
that we can use to detect collisions between objects and points.
| | 00:07 | In this movie, we'll take a look at those methods.
| | 00:09 | If you're following along, I'm working in Hoop.FLA
and you can find this file in the movie two folder.
| | 00:14 | If you don't have access to the exercise files,
| | 00:16 | you can just make a movie clip of a basketball hoop
| | 00:19 | and call it hoop_mc and put a rim in it called rim_mc.
| | 00:24 | Let's go to the first keyframe of the actions layer
and open up the action panel to see what code is in there.
| | 00:30 | Capturing the initial X and Y position of the ball,
| | 00:34 | adding an event listener to the ball for
a mouse click, setting its button mode to true.
| | 00:39 | When we click the ball,
| | 00:41 | we set its initial gravity, friction and x- and yVelocity properties.
| | 00:45 | Then we add an event listener to the Stage to move the ball.
| | 00:50 | The moveBall function updates the ball, checks to see if the ball
| | 00:55 | is out of bounds of the Stage's height.
| | 00:58 | If so, it resets the X and Y position of the ball
| | 01:01 | and then takes the event listener away from Stage.
So if you test the movie and you click on the ball,
| | 01:06 | see that the ball shoots toward the basket, doesn't appear to go
in the basket and then appears back at its original spot after it
| | 01:12 | goes off the Stage.
| | 01:14 | So our goal is to connect the ball and the rim.
| | 01:18 | So the bottom of this moveBall function, I'll create a conditional
statement and we'll check to see if the ball is touching the rim.
| | 01:26 | ball_RC.hitTestObject. This is the first built-in method
to test to see if one object is touching another object
| | 01:33 | and we'll check against hoop_mc.rim_mc.
| | 01:41 | And if the ball is touching the rim, we'll set
its X position to the same X position as the rim.
| | 01:50 | So to get that a value, we'll have to take the X position of the hoop
| | 01:55 | and add on the X position of the rim inside of the hoop.
| | 02:01 | What you're also going to want to do is set the xVelocity of the ball
to zero so it's doesn't keep moving to the right once it's connected
| | 02:08 | with the rim.
| | 02:14 | Test the movie, click on the ball
| | 02:18 | and it appears to align with a rim once it hits.
| | 02:21 | See how there's kind of a jittery motion? That's because we're
using hitTestObject. So as soon as any part of the ball's bounding
| | 02:28 | box touches any part of the rim's bounding box
| | 02:31 | then we automatically align so that's how hitTestObject works.
Typically hitTestObject is really good for rectangular objects.
| | 02:39 | For any objects that are circular,
| | 02:41 | you want to look at other collision detection methods.
Another built-in method that we can use is called hitTestPoint.
| | 02:49 | The great thing about hitTestPoint is
that we can use the ball's round shape
| | 02:55 | as the hit test area.
| | 02:57 | What you need to pass in are two values, the X and
Y position of the point that we're checking against,
| | 03:03 | and then there is an optional parameter called shape flag
that checks to see if we want to check against the bounding
| | 03:09 | box of the ball or the ball's actual pixel
boundaries. By setting that value to true,
| | 03:15 | we can check against the actual round part
of the ball and not just the bounding box.
| | 03:20 | So the first value we'll pass in the hitTestPoint is hoop_mc.rim_mc.x,
| | 03:25 | then we'll add-on the X position of the hoop.
| | 03:29 | And then the next parameter,
| | 03:32 | we'll take the rim's Y position
| | 03:37 | and add on the Y position of the hoop.
| | 03:41 | For the next parameter, we'll just pass in true.
And we'll test the movie now
| | 03:46 | and it should be a little bit less jerky as it works.
| | 03:51 | So now you'll notice that the ball doesn't shift in; it more
slides right into the hoop and it looks a little bit cleaner.
| | 03:57 | So those of the built-in methods that
are used to detect collisions in Flash.
| | Collapse this transcript |
|
|
6. Exploding ParticlesAdding particle spin| 00:00 | In this chapter, we're going to take a look at making particles explode.
| | 00:03 | The first step in making particles explode
is adding a spin property to our particle class.
| | 00:09 | That's what we're going to do in this movie.
| | 00:10 | If you're following along, I'm working in Spin.FLA and Particle.AS
and both files can be found in the Chapter 6, movie one folder.
| | 00:17 | Let's go to Particle.AS first.
| | 00:19 | In this file, we'll add another public property called spin,
| | 00:24 | and it's a Number and we'll initialize it to zero
| | 00:29 | in our constructor.
| | 00:32 | At the bottom of our update method
| | 00:33 | we'll update the particle's rotation by the spin amount.
| | 00:40 | That's it. Make sure to save this file so
choose File, Save. Let's jump over to Spin.FLA.
| | 00:45 | If you don't have access to the exercise files, you can simply
create a movie clip and connect it to the particle class.
| | 00:51 | Let's go to the the first keyframe of the actions layer and open
up the actions panel. Here we have a pretty simple particle system.
| | 00:57 | I'm only creating one particle at the moment, particle class
is Star, I've got our particles array container to hold them and
| | 01:03 | I'm using the recycling technique to create and
to update the particles. So if we test the movie,
| | 01:10 | you'll see right now the particle has no velocity or acceleration.
| | 01:13 | So what we're going to do is at some spin on the particle
| | 01:17 | and see what it looks like. I'm going to do this in our
IF statement, near the top of the makeParticles function.
| | 01:25 | Let's set it equal to five.
| | 01:28 | Test the movie
| | 01:30 | and watch the particle spin.
| | 01:34 | Now we can add this to our entire particle system along with
gravity and friction if we simply uncomment the code that
| | 01:40 | I have commented here.
| | 01:43 | I'll uncomment the x- and yVelocity lines of code here.
| | 01:46 | And then I'll add some more particles to the particle system,
| | 01:49 | let's try something like 50,
| | 01:51 | and then test the movie.
| | 01:56 | And there you can see our spinning particles.
| | Collapse this transcript |
| Making child objects explode| 00:00 | Now we'll take the spin technique that we talked about in the last
movie and apply it to all the elements inside of any movie clip
| | 00:07 | and make them explode when you click on that movie clip.
| | 00:10 | To do that, we're going to have to modify
our original particle class a little bit.
| | 00:14 | If you're following along, I'm working in Explode.FLA and
ParticleChild.AS. Both files can be found in the movie two folder.
| | 00:20 | Let's jump over to ParticleChild.AS.
| | 00:23 | You'll see here this file's pretty much exactly as
same as our particle class except I changed the name.
| | 00:29 | So now it's ParticleChild instead of particle.
| | 00:32 | This needs to be able to work with any object inside of
a movie clip and the way it's going to work is we can take
| | 00:37 | any object inside of a movie clip, pass that object into our
constructor function and make a particle out of that object.
| | 00:44 | So instead of the extending the Sprite class,
we're not going to extend any class.
| | 00:48 | We're also going to create a public property called object.
That way we can hold the DisplayObject to reference
| | 00:55 | and modify it in this class.
| | 00:58 | So the data type will be DisplayObject.
| | 01:01 | We'll accept one parameter in the constructor,
| | 01:03 | going to call that a OBJ, short for object, and that's going to be
a DisplayObject as well and for the first line of the constructor
| | 01:10 | we'll set the value of our object property to
the value of the object passed into the constructor.
| | 01:16 | Then instead of applying all of the transformations to the
instance of this class, we're going to apply the transformations
| | 01:22 | to the object passed in via the constructor.
| | 01:24 | So I'm going to highlight this
| | 01:26 | and press Command+F or Control+F to open up the
Find and Replace window and replace this with object.
| | 01:33 | Going to click Replace All,
| | 01:34 | click OK and then close the Find and Replace window.
| | 01:37 | Choose File, Save to save the file and then go back to Explode.FLA.
| | 01:42 | On the Stage here, I have a simple stick figure movie clip
that's made up of a circle and a bunch of copies of a line
| | 01:47 | movie clip.
| | 01:48 | If you don't have access to the exercise files, don't
worry about exporting these elements for ActionScript.
| | 01:53 | When we're working with the ParticleChild class, you won't have
to do that. Let's select the first keyframe of the actions layer and
| | 01:58 | open the actions panel.
| | 02:00 | Here we have a variable called particle that's
going to be an instance of the ParticleChild class.
| | 02:06 | At the bottom of the code we added an event
listener to the stick figure on the Stage,
| | 02:09 | listening for a mouse click, and it's
going to run a function called explodeObject.
| | 02:14 | The explodeObject function captures
| | 02:17 | the stick figure that was clicked on in a variable
| | 02:20 | and then runs a loop.
| | 02:22 | For every child in the movie clip,
| | 02:24 | we create a new instance of the ParticleChild class, passing in each child.
| | 02:30 | Set some properties for that particle
| | 02:32 | and put in the particles array.
| | 02:34 | Then we add our event listener to animate the particles,
which simply updates all of the particles.
| | 02:39 | Let's test the movie and see this in action.
| | 02:42 | Click on the stick figure on the Stage and watch it explode.
| | 02:47 | Close the preview window now. Let's go back to the Stage
and watch how easy it is to explode any other object.
| | 02:53 | I'll drag another instance of our stick
figure from the library onto the Stage.
| | 03:00 | Call it stick2_mc
| | 03:04 | and then I'll drag an instance of a movie clip I created called text
| | 03:07 | from the library onto the Stage.
| | 03:09 | This movie clip is a static text field that I broke
apart so that each letter is an individual text field.
| | 03:14 | I'll give this an instance name of text_mc.
| | 03:18 | And I'll go back to my code.
| | 03:20 | Copy the addEventListener line of code at the bottom.
| | 03:24 | We'll add an event listener to stick2_mc and text_mc.
| | 03:29 | Test the movie. Just click on the movies that we
attached those event listeners to and they explode.
| | Collapse this transcript |
| In practice pt. 3: Exploding superheroes| 00:00 | Here's an example of an application uses the exploding techniques
that we talked about in this chapter. If you're following along,
| | 00:06 | I'm looking at Flying.FLA in the Chapter 6, movie three folder.
| | 00:11 | Let's test the movie and see what this application looks like.
| | 00:14 | There's some clouds in the background that wrap around and animate
back to the right after they go to the left edge of the Stage.
| | 00:20 | And there's a flying guy on the right side of the Stage.
If you click the flying guy, he explodes.
| | 00:26 | Notice all the particles fly to the left
because they're affected by the wind.
| | 00:31 | For those of you who would like to stick
around, I'll walk you through this application.
| | 00:34 | Let's go to the first keyframe of
the actions layer and open up the actions panel.
| | 00:38 | This explodeObjects function may look very familiar to you.
The biggest change that I made is that I modified
| | 00:43 | the xVelocity of the particles so they mostly shoot to the left.
| | 00:48 | If you scroll down, you see the animateParticles function
| | 00:51 | and the initial properties that I set for the clouds.
| | 00:56 | And I added the event listener to the Stage
to animate the particles initially.
| | 01:00 | Then I added an event listener to the flying movie clip,
which is inside of the animated movie clip,
| | 01:06 | which simply makes the flying superhero move up and down.
| | 01:09 | Let's take a look at the animateParticles function. It updates each particle
| | 01:13 | and it updates each cloud
| | 01:15 | and runs a function called checkPosition on each cloud.
| | 01:19 | If the cloud particle is passed to the left edge of the Stage,
| | 01:22 | and a little bit more, which is randomly decided,
| | 01:24 | that we reset the particle's X position
| | 01:27 | past the right edge of the Stage a little bit.
| | 01:29 | and we reset the particle's Y
| | 01:31 | and scale X and scale Y properties,
also the particle's xVelocity and alpha.
| | 01:37 | That's really all there is to this application.
| | 01:40 | If we test it again,
| | 01:41 | see the superhero flying.
| | 01:44 | Click on him to see him affected by the wind,
| | 01:46 | and all the particles explode to the left.
| | Collapse this transcript |
|
|
7. Creating a Smoke Particle SystemUsing timeline-animated particles| 00:00 | Now we'll talk about how to build a smoke particle system.
| | 00:03 | If you're following along, I'm working in Smoke.FLA and
AnimatedParticle.AS and both files can be found in the
| | 00:10 | Chapter 7, movie one folder. The first secret to
making smoke is building the particles correctly.
| | 00:15 | I'm going to open up the Smoke movie clip in the library.
| | 00:18 | This is actually a really simple animation of
a graphic symbol that has sort of a moon shape
| | 00:24 | and it grows over 10 frames
| | 00:27 | then it spins in a circle until Frame 50.
| | 00:29 | That's really all there is to it. I'm just having
a movie clip that's animated as my particle.
| | 00:33 | Because I did that I created a new class called AnimatedParticle.
AnimatedParticle is the same thing as the particle class
| | 00:40 | except it extends the movie clip class instead of the Sprite class.
| | 00:45 | If we try to create this smoke particle using the Sprite class,
| | 00:49 | or a class that extends the Sprite class,
| | 00:52 | then we'd only see frame one of this movie clip.
| | 00:55 | And if we extend the movie clip class for every particle
that we created, then we might use more memory than we need.
| | 01:01 | That's why I created a separate class for this.
| | 01:03 | So I'm going to go back to Smoke.FLA.
| | 01:07 | So to scene one,
| | 01:08 | select the first keyframe of the actions
layer and open up the actions panel.
| | 01:12 | You'll see that this particle system is pretty similar
to every other particle system that we've worked with.
| | 01:17 | I'm using the garbage collection method to dispose of unused particles,
| | 01:21 | updating all the particles in the array every frame
| | 01:24 | and discarding particles if their alpha gets too low.
| | 01:27 | One of the big secrets to creating smoke particles
is the properties you set for the particles.
| | 01:32 | For example, I give my particles gravity a value of -. 1
| | 01:37 | so they gradually move up.
| | 01:39 | For the friction of the smoke particles, I put it a value
above one so they gradually speed up as they animate.
| | 01:46 | I gave them random variable low yVelocity values.
| | 01:49 | and xVelocity values.
| | 01:51 | Some fade.
| | 01:53 | Random alpha,
| | 01:54 | random scale,
| | 01:57 | made them grow a little bit
| | 01:58 | and that's about it.
| | 01:59 | If I test the movie,
| | 02:02 | you'll see that it doesn't look too much like smoke.
| | 02:05 | Kind of behaves like smoke,
| | 02:06 | but doesn't exactly like smoke.
| | 02:09 | All that we're missing
| | 02:10 | is applying a Blur filter. So I'll close the preview window
and scroll down and I'm going to apply the Blur filter to the
| | 02:16 | container that's holding all the particles.
| | 02:23 | I'm going to do this in shorthand notation.
| | 02:26 | Inside the square brackets, I'm going to
create a new instance of the BlurFilter class
| | 02:32 | and I'm going to pass in a few values.
| | 02:33 | I'll pass in 200,
| | 02:35 | another 20 for blurX for blurY respectively,
and one, that's for the quality.
| | 02:41 | If you want to optimize your filters then you
can give them even numbers for blurX and blurY.
| | 02:46 | You might want to take a note here that filters
in Flash are optimized for even numbers.
| | 02:51 | I'm going to keep the quality low because the higher
the quality, the more memory I'm going to use.
| | 02:55 | So I'll test the movie at this point
| | 02:58 | and check out the smoke.
| | 02:59 | So there's how to create a smoke particle system.
| | Collapse this transcript |
| In practice pt. 4: Making a boat break down| 00:00 | Here's an example of an application that uses
the smoke particle system that we created.
| | 00:04 | If you're following along, you can open
up Boat.FLA in the movie two folder.
| | 00:08 | This file's an animation of a boat breaking down,
| | 00:11 | and a bunch of smoke coming out of it.
| | 00:15 | So there's an example of using smoke in an actual application.
For those of you who'd like to stick around, I'll walk you through the code.
| | 00:21 | Let's go to the first keyframe of the
actions layer and open up the actions panel.
| | 00:24 | The code in this application is pretty much
the same code as was in the last movie.
| | 00:28 | I simply modified the X position of the smoke
to be a random value based on the width of the boat
| | 00:33 | and the height of the boat.
| | 00:36 | I used the same logic for the gravity and friction of the boat
| | 00:39 | and for the fade, alpha and all the other properties.
| | 00:42 | I used the garbage collection optimization model.
| | 00:46 | And I applied a filter to the smoke container.
| | 00:49 | That's all there is to it.
| | 00:51 | Let's take a look at it again.
| | 00:54 | And there goes the boat.
| | Collapse this transcript |
|
|
8. Integrating a Particle System with VideoAccessing pixel color| 00:00 | In this chapter, we'll add a particle system to Flash Video,
| | 00:04 | by getting the pixel information for the video as it plays
then making particles appear based on the colors in the video.
| | 00:10 | In order to do that we're going to need to be able
to isolate the red, green and blue values of a color.
| | 00:17 | In this movie, we'll talk about how to do that. If you're
following along, I'm working in Understanding_Color.FLA
| | 00:22 | in the Chapter 8, movie one folder.
| | 00:25 | On the Stage, I have a very simple movie clip called color_MC
| | 00:29 | and it just has a bunch of squares that
are red, green, blue, black and white.
| | 00:33 | Our goal is to get the pixel information for these squares
| | 00:37 | and isolate the color values for each one. Let's go to the
first keyframe of the actions layer and open up the actions panel.
| | 00:44 | Here I have some code creating a new instance of the BitmapData class,
| | 00:48 | event listener to run showColor every frame,
| | 00:51 | and a showColor function that has some variables defined
| | 00:56 | and a trace statement.
| | 00:57 | Creating a new instance of the BitmapData class will
allow us to get pixel information for a display object.
| | 01:03 | When you initially create a BitmapData
object, you have to pass in two parameters,
| | 01:07 | the width of the object and the height of the object.
| | 01:10 | I'm going to pass in color_mc.width an color_mc.height.
| | 01:16 | On the next line of code,
| | 01:18 | I'm going to connect our BitmapData
object to our color movie clip on Stage
| | 01:23 | by using the BitmapData's draw method.
| | 01:27 | Once you use the draw method on a display object,
you can access the pixels of that display object.
| | 01:33 | In the showColor function I'll set the value for the color variable
| | 01:36 | equal to pixelData.getPixel.
| | 01:40 | This grabs a pixel at a certain X and Y position and the
X and Y position I'll use is the mouse X and Y position.
| | 01:47 | So this.mouseX and this.mouseY.
| | 01:51 | Then I have a trace statement tracing the value
of color. So let's test the movie and see what we get.
| | 01:55 | You may be surprised to see that the color is
not a hexadecimal representation of the color.
| | 02:01 | Rather the values range from zero, for all the way black,
| | 02:05 | to 16,777,215 for all white. Hexadecimal values
are actually a shorthand way of working with colors.
| | 02:15 | In a hexadecimal color value, each two digits
represent red, green and blue respectively,
| | 02:21 | and they both have values of zero through nine and then A through F.
| | 02:25 | This allows you to give a value between zero and
255, or 256 total values of color for each channel.
| | 02:33 | Red, green or blue.
| | 02:35 | The 16 million plus number comes from multiplying 256 by 256 by 256.
| | 02:43 | So using a colored number isn't quite useful to us.
| | 02:47 | One thing we can do is get the color information as a hexadecimal
value. If you trace color.toString and then pass in 16,
| | 02:57 | 16 means you want a 16 digit base for
your string representation of the number.
| | 03:03 | If you don't pass any value for toString, then the default
value is the 10 digit base, which is used for most numbers.
| | 03:09 | Let's test the movie and see what we get here.
| | 03:12 | So I'm getting my hexadecimal red value, green,
| | 03:15 | and then blue.
| | 03:17 | Notice the hexadecimal zeroes on the left side are cut out
though the zeros on the right side are always included.
| | 03:24 | I'll close the preview window now as well as the Output window.
| | 03:27 | Now we could isolate the colors by manipulating the string,
| | 03:31 | but there's actually a more convenient way.
| | 03:33 | But what we have to do to is break the color down into bits
| | 03:38 | and access the data on a bit level.
| | 03:41 | I'm going to scroll down in the code a little and I'm going to
talk about some code that I have commented in regards to bits.
| | 03:46 | You may have heard the term 24-bit color before.
| | 03:49 | In 24-bit color each channel, red, green and blue, gets 8 bits.
| | 03:55 | So 8 bits for red and 8 bits for green and then 8 bits for blue.
| | 03:59 | Bits can have a value of one or zero, so full whites would be all one's.
| | 04:04 | Full red, is all the red bits with one
and all the rest of the bits have zero.
| | 04:09 | Full green.
| | 04:10 | The green bits have one,
| | 04:12 | the blue bits have zero. Notice that I didn't write the red bits here,
| | 04:17 | because it's the number isn't high enough,
then there's no need to add in extra zero's
| | 04:22 | on the left side.
| | 04:24 | And then we have full blue,
| | 04:25 | which doesn't have any values to the left of it.
| | 04:28 | So if you want to see this in action, you can scroll up
| | 04:31 | and instead of getting a hexadecimal 16 string, we pass in
a value of two into toString. Then we get a two digit number
| | 04:40 | string, which means we either get one's or zero's.
| | 04:43 | So this will convert our color string into binary or bit data.
| | 04:48 | Test the movie.
| | 04:50 | Roll over the colors and just like I wrote below, blue gets all one's,
| | 04:54 | green has ones for the green channel,
| | 04:56 | zero's for the blue channel.
| | 04:59 | Red has ones for the red channel, zeros for the other channels.
| | 05:02 | Black is simply just zero
| | 05:04 | and white it is all one's.
| | 05:06 | Now what we have to do
| | 05:08 | in order to access the data is we have
to shift the bit information over.
| | 05:14 | So if we want just the red data, we have to
shift those red bits 16 places to the right.
| | 05:21 | So what I'm going to do is I'm going to write that in code here.
| | 05:24 | So the value of red is going to be color,
and the way that we shift bits
| | 05:28 | is by using two greater than signs,
| | 05:31 | ActionScript for bitwise shift right.
| | 05:35 | We shift it to the right 16 spaces,
| | 05:38 | and now what we'll do it uncomment this line of code
| | 05:41 | that traces the red value. I'll comment out the
other one that traces of color value in binary form,
| | 05:46 | just so it's not confusing in the Output window,
| | 05:49 | and test the movie.
| | 05:50 | And rollover red. So we get red is 255 when we rollover that. Then
we have red is zero when we roll over the colors that are not red.
| | 05:59 | So that was nice and easy.
| | 06:02 | Unfortunately it's not quite as easy to get
the values for green and blue, but it's not too bad.
| | 06:07 | For green, we'll take color, we'll shift all the bits.
| | 06:12 | When we shift the bits eight spaces to the left,
we still have the information for the red channel,
| | 06:17 | which we don't want. So what we need to do is have a way to get
rid of that. The way we'll do that is using the bitwise AND operator.
| | 06:25 | The bitwise AND operators is one ampersand (&)
and what it does is it compares bits.
| | 06:31 | Now let's type the code and we'll talk about it in just a second.
Type in bitwise AND operator and after that type in OxFF.
| | 06:38 | That's the hexadecimal for 255. Let's scroll down back
into our code and take a look at the bit information.
| | 06:45 | Let's picture full green
| | 06:47 | being compared with full red.
| | 06:50 | Let's say we have full red and we
wanted to get the green for that color.
| | 06:56 | So we want to find at how much green is in
our red color. So we do the bitwise shift.
| | 07:01 | So we shift it eight pixels to the right and
we're left with this information I have highlighted,
| | 07:07 | the red information and the green information.
| | 07:10 | What the bitwise operator does is it compares that information with
| | 07:15 | 255, which in binary is eight one's.
| | 07:20 | So eight one's gets compared with
| | 07:28 | eight one's
| | 07:30 | and eight zero's.
| | 07:33 | So this is our red color here, once it's shifted,
| | 07:36 | and that gets compared with 255.
Notice there is no information to the left.
| | 07:43 | The bitwise AND operator compares bits.
| | 07:47 | And if the bits are both one,
| | 07:49 | then the bitwise AND operator takes that
as a one. And if the bits are not both one,
| | 07:54 | then the bitwise AND operator converts that data to zero.
| | 07:58 | So basically what happens here in comparing these two bits of data,
| | 08:03 | the one's that were originally for our red channel get
thrown out because they are compared against nothing.
| | 08:09 | And if the one's that we want for the green channel,
| | 08:12 | are one's then they remain ones and if they're zero,
| | 08:15 | then they remains zero's.
| | 08:17 | So there's a look at how it works.
| | 08:20 | Let's scroll up in the code
| | 08:22 | and uncomment the trace green line of code. Test the movie
and find accurate green values when you roll over the colors.
| | 08:32 | Last thing you do is set the value for blue. The value's going be color,
| | 08:37 | and we don't need to shift it because the blue data is all
the way to the right, but we do have the data for the other
| | 08:44 | colors that's to the left of that.
So we need to use our bitwise AND operator
| | 08:49 | and compare that against 255, or 0xFF,
to get rid of all the bit data to the left.
| | 08:56 | Let's uncomment the trace blue line of code
| | 08:59 | and test the movie
| | 09:02 | and you'll find accurate information for each color.
| | 09:07 | So now that we've done that,
| | 09:08 | we can access the pixel information for any object
and we can use those in our particle system.
| | Collapse this transcript |
| Triggering particles based on pixel colors| 00:00 | Now we'll take a look at making particles based on the pixels of
an image. If you're following along, I'm working in Pixels.FLA
| | 00:06 | in the movie two folder.
| | 00:08 | On the Stage I have a simple movie clip
that's just a fish with a white mouth.
| | 00:12 | We want the bubble particles to come out of the fish's mouth.
| | 00:15 | If you test the movie,
| | 00:18 | you'll see that they sporadically come out of the mouth of the fish.
| | 00:21 | Let's take a look how this works.
| | 00:23 | Go to the first keyframe of the actions
layer and open up the actions panel.
| | 00:27 | In the top of our code, we have our pixelData object.
| | 00:31 | It's the width and height of the fish, and I passed in two other
optional parameters: whether the BitmapData object is transparent,
| | 00:38 | I passed in false, and then I passed in a background color of black.
| | 00:42 | And that's really significant because I'm looking for white pixels,
so I definitely don't want this background color to be white.
| | 00:49 | I'm going to scroll to the bottom of the code.
| | 00:51 | I'm putting the container on the Stage and
running the draw method of the BitmapData class,
| | 00:56 | passing in fish_mc then I have
my makeParticles function making particles.
| | 01:02 | If we scroll up to the makeParticles function, we're creating
two random values here, a random X and a random Y position.
| | 01:09 | That's a random number based on the fish's width and height.
Notice I data typed them to positive integers.
| | 01:15 | This is a sort of a shortcut to data typing
them as numbers and rounding the values.
| | 01:20 | Data typing a floating point number to uint simply truncates
that number and cuts off anything after the decimal point.
| | 01:26 | In the conditional statement, the condition to create the
particle is that we run the checkPixels function, passing in the
| | 01:32 | random X and Y positions. If the value returned is true,
we create a particle; if not, we don't. If you scroll down
| | 01:38 | to the checkPixels function, in the color variable,
| | 01:42 | we capture the pixel's color in the color variable,
we isolate the red, green and blue values.
| | 01:47 | And then I have a conditional statement
set up to see if red is greater than ee,
| | 01:52 | and green is greater than ee and blue is greater than ee.
| | 01:56 | I could obviously modify this and just check
to see if the color is lighter than a light gray
| | 02:01 | and return true, but this way if I ever want use
a different color I simply to change these color values.
| | 02:07 | So that's all there is to it.
| | 02:09 | I'll test the movie again and you see the bubbles coming out of the fish.
| | 02:15 | So what's happening is random positions on the fish are being picked.
| | 02:19 | All over the fish.
| | 02:21 | If that pixel is white for that frame, then a particle is created.
| | 02:24 | If not, then there's no particle created.
| | 02:27 | Now what we can do is narrow down this looking.
Because we're looking across the whole fish right now.
| | 02:33 | What if we just wanted to take a rectangular area for the
fish's mouth and just search in that area? There is actually a
| | 02:38 | built-in method of the BitmapData class that'll help us do that.
I'm going to create a variable at the top of the code here.
| | 02:44 | And I'll call this mouthRect, with a capital R. This is going to
represent a rectangle that's the bounding box for the fish's mouth.
| | 02:53 | So I'm going to data type it to a rectangle,
| | 02:56 | I'm going to scroll down.
| | 02:57 | And then right under pixelData.draw,
| | 03:00 | at the very bottom of my code, I'm going to type
mouthRect and we'll set the value equal to pixelData.
| | 03:09 | And then we'll run the getColorBoundsRect.
The getColorBoundsRect method allows us to pass in a color value
| | 03:17 | then Flash will look for the colors that we pass in,
| | 03:21 | and create a color bounds rectangle around those colors,
| | 03:25 | and that will allow us to then search within that
rectangle instead of searching for the whole fish
| | 03:30 | to find white pixels.
| | 03:32 | So I'm going to pass in
| | 03:34 | 0x and then eight F's.
| | 03:37 | We're passing in eight F's because this is 32-bit color.
32-bit color simply includes alpha as the first two digits.
| | 03:45 | This first parameter tells Flash which
pixels to consider when looking for colors.
| | 03:51 | So I'm simply passing in white here,
| | 03:54 | with full alpha, that's why I passed in F's at the beginning
and them the color is the color that we're searching for in
| | 03:59 | the next parameter. So I'll type in 0x and then eight F's again.
| | 04:04 | Then I'll close out the parentheses
| | 04:06 | and I'll close out the method. Now let's scroll up in the code
| | 04:10 | and for our random number,
| | 04:12 | instead of getting a random number for the width of the fish,
| | 04:15 | we'll get a random number based on
the width and position of our rectangle.
| | 04:25 | So I'll multiply Math.random
| | 04:27 | by the width of our rectangle
| | 04:29 | and then tack on the rectangle's X position.
| | 04:35 | And we'll do the same thing for height.
| | 04:45 | And now when we test the movie
| | 04:48 | we're only having Flash search for white pixels
| | 04:51 | in the rectangle surrounding the fish's mouth.
| | Collapse this transcript |
| In practice pt. 5: Adding particles to video| 00:00 | Using the techniques in last few movies,
we can add particle effects to video.
| | 00:05 | All we have do is simply redraw the bitmap.
| | 00:08 | Using the techniques in the last two movies,
we can add a particle system to video.
| | 00:12 | Let's take a look at this video on the screen here.
| | 00:14 | (Music plays along with video.)
| | 00:21 | Notice the video has a very prominent white area. What we're
going to do is add particles wherever there's white in the video.
| | 00:28 | If you're following along, open up Video.FLA
| | 00:31 | in the Chapter 8, movie three folder. Let's go to the first
keyframe of the actions layer and open up the actions panel.
| | 00:38 | You'll see that this code is pretty much
similar to the code in the last movie.
| | 00:41 | We've got our BitmapData object.
| | 00:44 | We have a rectangle to represent a white area in the video.
| | 00:49 | And we're using the Draw method to put the pixels of the video
| | 00:53 | inside of our BitmapData object.
The only thing that we're missing here
| | 00:58 | is running the draw method every frame.
| | 01:01 | What I'm going to do is copy the code that runs the draw method,
scroll up in my code and at the very top of the makeParticles function,
| | 01:07 | I'm going to paste the code that I just copied.
| | 01:10 | So every frame, we write the pixel data
for the video into our BitmapData object.
| | 01:15 | Then we draw the rectangle based on that data.
| | 01:19 | From there, we do the same thing to
check for the white values of pixels.
| | 01:23 | If the pixel that's picked is white, then we create
a particle. Let's test the movie and check it out.
| | 01:29 | (Music plays along with video.)
| | 01:38 | So you can use a particle system with any application, even with video.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well that's it. I hope you had fun because I sure did.
| | 00:04 | We talked about all kinds of information about particles,
how to create a particle class and how to build a particle system,
| | 00:09 | how to create different types of particles like rain and smoke
| | 00:13 | and even add particles to video.
| | 00:15 | I hope you found the particles aren't just cool looking, little animated
things, but they're actually useful in real-world applications.
| | 00:22 | So have fun using particles and I'll see you next time.
| | Collapse this transcript |
|
|
