Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Animating smoke with particles

From: Animation Tips and Tricks with Flash Professional

Video: Animating smoke with particles

This is an example of a hand-rigged particle system in Flash. And sometimes, even though you can do this obviously in After Effects, and other programs. And if you can do them, by all means be my guest. It can be done, and here I'll show you how. So the way I build this system: I'm going to tunnel all the way inside, and work my way out. I think it'll make a lot more sense that way. So at the very root of this structure of symbols, we have the particle. Now you'll see the path; the smoke 1 is inside smoke 2, smoke 2 is inside smoke 3, smoke 3 is inside smoke 4; don't panic.

Animating smoke with particles

This is an example of a hand-rigged particle system in Flash. And sometimes, even though you can do this obviously in After Effects, and other programs. And if you can do them, by all means be my guest. It can be done, and here I'll show you how. So the way I build this system: I'm going to tunnel all the way inside, and work my way out. I think it'll make a lot more sense that way. So at the very root of this structure of symbols, we have the particle. Now you'll see the path; the smoke 1 is inside smoke 2, smoke 2 is inside smoke 3, smoke 3 is inside smoke 4; don't panic.

So here we have the particle, and it's a flat solid color area. Although the final particle that we'll render out is currently guided out as a gradient layer. And the reason why is because if I guide this in and guide out the solid, and then we begin animating, it'll be very slow; you just won't have the same kind of response that you would like to have. So when I'm working on this, I like to work with just a placeholder. So again let me reverse that, right-clicking, and guiding in and out.

So we can see exactly where we are. I mean, these are both exactly the same shape, and they occupy the same size. So it's a true representation of where the animation is going to go. On the second symbol in which the particle resides, I'll you show one of these layers; it'll make more sense. I just made a little undulation cycle and I duplicated this four times so that we have this nice little throbbing, and then they just dissipate. And then we have -- the particle is emitted from this point, and we've motion tweened it up and away.

And then by copying this onto 20 different layers, changing the sizes, changing the rotation, flipping some of them horizontally, then you get this nice natural-looking cloud, dissipating. And then the last touch, if you really want to add another layer to this, is to duplicate the cloud, and create a smoke effect. So that when we get to Frame 30, I fade in another one of these, and I can do as many of these as I like. I could do another 20 levels of these things, and just have a constant cloud of smoke coming up.

So having shown you that, let's build one of these systems from scratch. Now I'm not going to build anything like as complex as that; I really just want to show you the basic principles of how this system works, and how you can really push your computer to the best of its limits. Let's make the first particle; it's already appeared as a gradient. Okay, delete that frame. So here's our particle. I'm going to go with that, hit F8, and we'll call this 1 particle.

Let's click in there. Now we want to have our guide layer, so let's make a new layer. Hold down the Alt key and drag, and so our finished layer will be particle. It's very important with this that you name your layers really, really well so that you don't get too badly lost in them. And we'll call the lower layer reference. And obviously, we don't want the lower layer to be a gradient, so let's just click on the color and make that just a regular old black or maybe gray is better. Okay.

So that's what we'll be seeing for the time that we are actually animating this in Flash. So now we have our particle. I might be a little big. I'll go in and make it a bit smaller. Make sure we make both of them smaller. I'll hold down the Q key for Free Transform, and I'm going to pull that in, and use the arrow keys to center it. Now the next step is to make our cluster. So I'm going to select the particle, hit F8, number 2 cluster, and double-click again.

So now we're inside the cluster symbol. It's very easy to lose your place in this because everything looks visually the same, but that'll change soon as you begin to add little animations here. So what I want to do here is keep it reasonably simple, so just two more layers are fine. And I'm going to copy the particle holding down the Alt, Option key to there. And I'm going to make a 30 frame long action, where these particles move and dissipate. So I hit the F5 key to put in some blank frames there, and actually let's just hit F6.

I'm going to just grab one at a time. I'm going to just move them out, so what we're seeing is these particles are now moving out into little triangular pattern. So let's select the Timeline, right- click, and go Create Classic Tween. And so that's pretty much what's happening. And we can beef this up a little bit; Free Transform tool and scale some of these into different shapes or sizes So it doesn't look all the same size. I'm going to zoom in a little bit, and we'll offset these very slightly, and use Free Transform, Q on the keyboard.

And if you feel like,"They're all on top of one another, I can't!" I would just pull them all apart. And you can drag them back in until they're more or less over one another. And there's a little funky little rotation movement there; if we go into Outline mode, we can see, okay, the orange guy, maybe that's a bit eye-catching, so let's pull that in. Purple, it's okay; maybe the green could be a little bit further out that way. Okay, and I would also like them to dissipate into pretty much nothing at the end.

So I'm going to hold down the Shift key, click on them to select them all, color effect in the Properties panel, select Alpha, and they're now at 0. So now we have a little three-particle cluster that's going to dissipate for us. So back to the main Stage and we will, guess what: start another symbol. Hit F8, 3, and we'll call this one cloud, and double-click on that again. And what I want to do first is just animate one of these little particles floating up into the air. And it will be a short little action; this is pretty quick.

I've made it 30 frames. You can make it 100 if you want something a little more elegant, but let's make it little simpler to do. So all I want to do is to move this particle on little S curve up to the top. So I'm going to select the Line tool, and make sure that Snap to Object is on. It's very important that they really connect properly. Let's name these, so we'll call this one 1 path, and 1 particle.

So I'm going to hit F6 down here, make a new keyframe, I'm holding down the Shift, I'm moving the arrow keys, just to get it out of the way, and then I can drag it until it snaps to the end of that line. And now if I curve that line -- it's not a guide yet, so don't worry about that. And now we can switch the Snap to Objects off, because I want to do some finer work. If I hold down the Alt key and click on the line, I can curve it into a nice little S shape by adding a new point.

That's not too bad. So now right- click on the path and say it's a guide. It won't work until I drag the particle layer directly into the guide. And now if we follow this animation, it's not quite working yet; we have to activate tweening. So we right-click on the particle, Create Classic Tween, and you'll see that's really nice, it's following the guide. So now we can make a few more of these, I'm just going to make, say, four more.

And the quickest way to do it is simply to select the path in the particle layers, hold down the Alt key and drag, or right-click and go Copy Frames, select your target layers, right-click, and go Paste Frames. But I think Alt is quicker, so I hold down the Alt or Option key and drag these. Now we have a bunch of these layers but they're all the same, so let's padlock the bottom two layers. And they were called the same, so with enough time I'd actually go through all these and number them, 2.

I can't stress this enough actually, and you really need to keep on top of your names for all of these layers. They can become very confusing, so it's the question of having a good disciplined work process. There's the first layer here. If I, for example, just select these two, and hold down the Shift key, and move the arrow up by one-click. Do the same at the end of the Timeline for the second key. I've already shifted them off a little bit. Now I can go in and fine-tune them, maybe stick with the guide, so I'll just move the guide around, there we go.

So by moving the guide, actually, in this version of Flash -- all the versions of Flash seem to be slightly different in the way they handle this, but this one seems to be glued to the symbol, which is okay. So now I can go in to this little fellow, and just hit the Free Transform tool or Q on the keyboard, maybe rotate that symbol. Scale it a little bit to vary the position. Definitely vary the flight path. So let's just do something that's slightly different from the first one; maybe change the end state too. I'm going to hide these; aah! There it is! So don't be afraid to hide layers; switch them on and off if something goes missing.

I going to switch Snap to Objects on, because the final frame of the symbol is actually an empty blank square, so it's kind of getting a little difficult to find it to select it. So what I'm going to do, another little trick with the guides, double-click on that, and I'm going to put in an empty image. It will be ultimately guided out later on. Let's give a default color so we can't get confused; make it an orange. Drop it there. And now when I work with these, we'll see this little orange layer that will help us to select it.

So let's make the guides reactive again; they were following that path. I think we can make that path more interesting. Let me padlock that off. Okay, better. Let's now zoom out, and if I look at both of them together, and switch off the guides, you see that they're looking kind of the same. So I think we should rotate one of these. Still it's kind of similar, so probably the start state too.

So I'm using the Free Transform tool. Okay, that's a little better. So what I'm going to do is go through all of these layers, and repeat this process, and when I come back to you, because this is obviously that's a bit time consuming, when I come back to you, you'll see all five of these that have being nudged and pushed into varying different guide paths just by making little modifications to all these layers. Okay, so what I've done is just made some small little additions to the other layers, just to vary the paths.

If we look at the entire path system, it looks like a little strand of tangled hair or something. As you follow the particles, it gives them a much more natural flow. Couple of last pieces of housekeeping are required; the little guide layer that I created so that we could select this thing: we can guide that out. So I just click on the Cluster symbol and guide out that top layer. And now when we play the animation, that's looking really sweet. And then the last thing to do is we tunnel all the way into the particle, and we reverse the guides, so we're now in the particle symbol.

I've guided out the reference layer, and I'm going to guide in the particle layer. I'll click all the way out to the top of the scene. And last step in this process, you can duplicate the cloud, and make several of these; I'm just going to make some new layers and drop them in. So there's one there; maybe change its position, and now when you play the scene, you can have waves of these things. And again, you can vary these. You can rotate them.

It'll show you a general outline suggestion of where your flight path might be heading. So it's a pretty cool little toy to have at your disposal. So, one of the more intensive sections of this course. So I hope you enjoyed it.

Show transcript

This video is part of

Image for Animation Tips and Tricks with Flash Professional
Animation Tips and Tricks with Flash Professional

46 video lessons · 13635 viewers

Dermot O' Connor
Author

 
Expand all | Collapse all
  1. 6m 35s
    1. Welcome
      1m 4s
    2. Using the exercise files
      51s
    3. Common keystrokes and shortcuts used in this course
      4m 40s
  2. 1h 24m
    1. Understanding video versus SWF
      2m 30s
    2. Overview of shortcuts, extensions, and setup
      6m 27s
    3. Understanding linear and radial gradients
      2m 39s
    4. Overlapping and animating the colors
      3m 53s
    5. Lighting a scene
      10m 24s
    6. Creating lens flares
      10m 40s
    7. Animating ripples
      7m 2s
    8. Creating a gradient globe
      11m 41s
    9. Creating a gradient bottle
      10m 26s
    10. Applying gradients to a character's eye
      10m 2s
    11. Applying gradients to a character's skull
      8m 49s
  3. 56m 53s
    1. Tweening a circle to a square
      10m 9s
    2. Using thumbnails
      4m 39s
    3. Animating a magic carpet jump
      10m 12s
    4. Setting up a magic carpet walk cycle
      7m 41s
    5. Animating a magic carpet walk cycle
      9m 33s
    6. Shape tweening hair
      3m 50s
    7. Intro to overlapping hair
      1m 57s
    8. Animating overlapping hair
      8m 52s
  4. 1h 8m
    1. Animating waves
      8m 7s
    2. Animating clouds
      7m 48s
    3. Animating a flame
      11m 38s
    4. Animating an explosion
      9m 1s
    5. Adding in-betweens to the explosion
      4m 36s
    6. Adding explosion clusters
      6m 43s
    7. Optimizing the explosion
      7m 30s
    8. Animating smoke with particles
      12m 45s
  5. 32m 18s
    1. Introduction to staggers
      1m 5s
    2. Animating a simple stagger
      5m 8s
    3. Animating a diving board
      6m 15s
    4. Animating a tremor
      5m 56s
    5. Animating a scream
      7m 12s
    6. Refining the scream
      6m 42s
  6. 47m 49s
    1. Introduction to Virtual Camera
      5m 4s
    2. Animating parallax
      6m 9s
    3. Animating a crane shot
      6m 26s
    4. Animating a zoom and rotate shot
      9m 30s
    5. Animating a track shot
      11m 0s
    6. Lighting a 3D shot
      9m 40s
  7. 19m 48s
    1. Animating a cross dissolve
      6m 10s
    2. Animating a wipe
      3m 34s
    3. Animating a fadeout
      10m 4s
  8. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Animation Tips and Tricks with Flash Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.