New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Animating an explosion

From: Animation Tips and Tricks with Flash Professional

Video: Animating an explosion

Now we are going to do a different kind of effect. Previous effects that we've been doing have been entirely dependent on shape tweening, and using the internal processes of Flash for the most part. Now we are going to try something that's a little more traditional. Flash has its built-in brush tools that you can draw with, and this part of the course will be particularly useful for people who have a drawing tablet: a Wacom tablet, a Cintiq, or one of those devices. You could, I guess, draw this on paper, clean it up with a marker pen or something, and scan it into your computer. But it's also possible to tough it out and do it with the mouse, so there's different methods that we can proceed with.

Animating an explosion

Now we are going to do a different kind of effect. Previous effects that we've been doing have been entirely dependent on shape tweening, and using the internal processes of Flash for the most part. Now we are going to try something that's a little more traditional. Flash has its built-in brush tools that you can draw with, and this part of the course will be particularly useful for people who have a drawing tablet: a Wacom tablet, a Cintiq, or one of those devices. You could, I guess, draw this on paper, clean it up with a marker pen or something, and scan it into your computer. But it's also possible to tough it out and do it with the mouse, so there's different methods that we can proceed with.

What I want to do right now is show you the basic procedure for roughing in your own effect stuff. You could also probably use a series of nested symbols instead of drawing this thing curve by curve. Anyhow, I am going to hide the lower sky. I don't need it, and I will show you how this was initially assembled. The first thing to do is not to get lost in these little details, and there's a lot of stuff happening here. The main thing to do is to realize you're dealing with an expanding form; it's got a structure to it, even though it looks chaotic. So in this case, we have the initial ball of smoke which expands, poofs, and dissipates. And I have set this circle to shape tween, and this gives us basically our parameters in which to work.

So then as you draw each frame you can essentially match the outer line of this red ring for your work. Now obviously this is far too detailed for me to be able to go into every single frame; it would take hours. So what I will do instead is just show you the general principles of how I would approach this. I am not working right now with a tablet; I just have a clunky old mouse. So let's make a new symbol. I am just going to hide this one. Make a new layer. I'll start with the Oval tool, just make a little circle, and I am going to make that a symbol right away so I work internally within that.

We'll call the smoke ring, and let's make it centered, because it's going to have its center of mass right in the middle, so click OK. Now if I right-click on that and click on Edit, now we're comfortably inside the smoke ring symbol, and we have lots of room to play with. So first thing I want to do is to make a red line that's more like the original. So let's grab this, drag it down and pick red; whatever hot color you happen to have on your palette. If you're not seeing my palette, we cover that in an earlier course; how you can basically setup your palette to look a lot more like this. Although the default palette that comes with Flash also has plenty of colors that you will be able to use if you prefer.

Okay, so I am going to reselect that red, and we will select the Ink Bottle tool and paint that. You'll see, if we go in closer, there's now a red outline there. I want to get rid of the inside color; Control+X, or Delete. Let's make our really quick little expanding circle. F6, and have the outer ring happen around 12, and F7 so that we have an empty space after that where it dissipates. So use the Magnifying tool to zoom out a bit, and let's see, let's select the second frame and hit the Free Transform tool; if I hold down Shift and Alt, so that's what we want.

So this will be the ring that we will use to expand, and I want a shape tween here, so Create Shape Tween. If you motion tween by mistake, then just hit Control+Z and go back. And I want this to ease out all the way. So it starts fast, and slows out. Now 100 might be too much, so let's try 90 instead. Nice. Okay so once we have that, padlock it. That's just our guide, and being a guide layer for reference, let's guide it out. When I say guide, I don't mean make your layer beneath it a child of that; I just mean keep that as a guide layer so that when you look at this on the outer layer you won't see that ring. It's only there for drawing reference.

So the next thing that I would do would be to select all these frames, and hit F7, and that gives you a series of blank keyframes to work with. Now let's go in a little bit tighter. Now we have access to the Brush tool here, so let's click that. If you don't see it, it might also be the Spray Bottle tool, but we want the Brush tool. And let's make our line nice and black; this will be the outline. And our brush selector, so we'll take the small one. If you have a drawing tablet you can select this to have access to pressure sensitivity, which is really nice. Now that circle there is a little too big for me, so I'm going to change the outline color. We can make a red as well, just like the line.

That way when we look at it it's a little bit thinner. Okay, back to Layer 2. Essentially use this outer line as your guide for the various shapes that you are going to be drawing. And I stress again, I'm drawing with a mouse, so it's probably the worst possible drawing experience a human being could have. It's pretty hard on the elbow. You get the general idea, and if you have tablet, you can really fly at this; actually a lot of fun with one of those tablets. I only began using the tablets recently, and I really wish I had done it a long time ago. So anyway, with the red line as your help -- you can go outside of it, or inside of it. You don't have to slavishly adhere to the contour of that red line; better if you actually do push these lines into a slightly more varied position.

I have been warning people throughout this course that when you apply shape hints that's Flash is prone to crashing. I used to work in a TV animation studio where the Brush tool was used a lot by the artists there, and that also, I hate to say, will crash the program. So if you get to a point when you think, that's nice, I like these; save your file. And I would advise you to use sequential frames. So if you are going to call this one explosion_1, I would put an _001, and the next say would be 002, and so on.

So I have loads to fall back on if something goes horribly mangled. If you remember from the earlier sample; right now the first few frames are pretty simple. When you get to the outer edge, here of course, we begin to break up the smoke into smaller particles. And the thing to keep in mind when you hand animate effects like this: irregularity really helps to sell the idea that this is a natural effect. So somewhere around the middle this thing is going to start breaking up into clumps. We'll move this down a little. If you find that this is a little cumbersome to work with, the other way that you could create this object would be to select the Oval tool -- and I am going to deselect that outline, we don't need that line -- and you could draw the entire thing as a series of circles or ellipses.

They might look somewhat crude right now, but you can always go back in later and soften these edges off a little bit. So, for example, you could select the Brush tool, pick a larger brush, or maybe a medium one here. And then go over it and make these shapes a little more pleasing; a little less geometrical, like that. I've been doing a lot of scenes like this recently, and you just have to get into very relaxed state of mind. Not the kind of thing you want to do if you're super stressed out or anything. Just take it easy, and sit back, put on an audio book, or some music, or something, and start drawing all these cool little shapes.

So that's basically the process. We'll go ahead and fill these. We have, obviously, these empty frames, so you do have to toggle back and forth quite a bit as you begin filling in these transitions. For example, where does the black cloud begin to break up. So the other thing that you can do, if you want a quick cheat, I would copy that, and I would Control+Shift+V to paste it in place. And then use the Transform tool, maybe twist it, and cheat by pushing this out to a different position. Then you could go back in, make any modifications or changes, use the Erase tool, and then start to break out the inside as this big cloud of smoke and dust begins to break into smaller pieces. And then you have these in-between frames.

So same process; I might go Control+C, Control+ Shift+V, maybe move this again; we could even twist it horizontally. Anything to break it up so you don't see the same two shapes occupying the same physical space. I can just stretch it to match that little red outline. And I think at this point I probably would like to start to pop a hole into the center of it. So this is the basic process that I would use to create little smoke and cloud rings. And if you look at the original, on this one of course I have a black outline, and a gray inside.

If I wanted to achieve that kind of effect, it would be pretty simple. I will just show you one sample frame. Go into this image, select a gray color, and select a black one. Back to the Brush tool, small, and then just go in and again -- and it comes down to again your comfort level working within whatever constraints you happen to be working in. I wouldn't recommend drawing these with the mouse for any extended period; you will probably end up with a pain in your elbow.

But as you can see, it's quite doable. If you follow these procedures I don't think you'll go too far wrong. So with that we will move on, and I'll show you how we can take these basic techniques, and then apply them to take our original smoke ring, that is this creature here, expand on it, and make it a little more interesting.

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 · 13224 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

Are you sure you want to delete this note?

No

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.