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

Animating a flame

From: Animation Tips and Tricks with Flash Professional

Video: Animating a flame

This next section is a little trickier. We're taking the principles covered in the last two, where we did waves and the cloud, and we're now applying them to a flame, like you might see in a candle flame or a fireplace. So let's take a look at this; double-click on the flame image. This is the outer Timeline, where I have motion tweened the internal animation. That's shape tweening, so this allows me to undulate the shape up and down. Let's go inside and see exactly how it was done. I will resize the Timeline.

Animating a flame

This next section is a little trickier. We're taking the principles covered in the last two, where we did waves and the cloud, and we're now applying them to a flame, like you might see in a candle flame or a fireplace. So let's take a look at this; double-click on the flame image. This is the outer Timeline, where I have motion tweened the internal animation. That's shape tweening, so this allows me to undulate the shape up and down. Let's go inside and see exactly how it was done. I will resize the Timeline.

So I am going to hide the upper tear animations for now, and just show you the main layer. If we look at in outline, get rid of that gradient, you'll get a better idea of what's going on. So what I have done is animated a fairly simple shape, just a little oval with a couple of points in the top, and then made some variations of that shape. So this one, obviously it's a little more extreme, and bobs back down again to a shape that's kind of a variant of the first. And then we have simple modifications of that. And I've used shape hints on these, and I will activate shape hints so that you can see the process. Let's see if I can zoom in without losing them; no.

So, activate again, and then remove the new one. The new hint is in red, so let's get rid of that. So let's see here. As you can see, the transition from keyframe 1 to keyframe 2; I have locked these left and right points with an A and a B hint, and I have got a C and a D hint moving up. Now, if I show you the next one, the confusion element is going to kick in, because you're seeing the hints from the second key to the third key overlaid on top of the previous. So I am going to delete them temporarily. I will hit Remove All Hints, and now you can just see the first two.

This is basically the process; A and B move to A and B a little higher. That keeps the overall form the same. C and D move just a little bit up. And as you can see, this curve here consists of two little lines, and by using shape hints I can coax it to looking like it's tweened into one single, smooth line there. Let me hide the hints, and you can watch that. So that's what gives us the illusion of a flame; it's a plasma.

It really has a very liquid feel to it. It's dynamic, and it can drastically change from one shape to another, and that's what we're trying to capture with this. The other thing that I did in here -- let me go back in for a second -- to really finish off the illusion of the dynamic flame, is I added all these extra layers, which you can see: tear 1, 3, in two different sections, and they're breaking off all these little triangular shapes up at the top. And that's also helping your eye -- it sells this illusion that there is an upward momentum from the flame.

So a lot to cover here. I cannot, obviously, walk through this entire process. There is simply too much going on. But I will show you the general principles of how this was created, and I think you will be able to figure out, based on that, exactly how you can use this system to make fire effects of your own. So I am going to frame in a little bit, make a rectangle, select the little white thing with the red line through it, so that you don't have a line around it. Let's make a vertical rectangle, hit F8, and we'll call it flamenew.

Now we double-click on that, and we will work in here. What I am going to do is shape the first frame, so let's just click on the point. If you have snapping on, just make sure you switch that off so you can have a finer control. I am going to keep this much simpler than the one that you just saw. I am going to keep a flat ground, and we are going to work with just the top part. And maybe let's put in one more little bump. So if you haven't done this before, keep your shapes fairly simple. You want to get comfortable with the basic principles of the procedure, and don't feel like you have to go in with your very first shape tween fire and have 400 points. You can certainly do that, but for now keep it simple.

So that's our first frame. Let's make two more. We want to get, like, a really nice balance. If you remember from the first two sections when we did the water and the cloud, I only used a single keyframe, and then I duplicated that to the final point, and then we did all of the intermediate animation by varying the shape hints. It might be possible to do that here, but we will get a much, much nicer illusion if we can use more than one state, and then shape tween between them.

So let's move on the second keyframe. I am going to move it up, and maybe change some of these curves. Changing the curve, or trying to blend two curves into one; that's really going to go a long way to creating the effect of liquid action. So now you see, if we go from one to the other, clearly we are not looking at a static block of wood. And the other thing to be trying to sell is this vertical movement. The flame is moving up all the time. No part of that flame should look like it's moving in the down position, unless it's tearing off and reacting. Like from here to here, yes; it's going to snap back into a lower state. But again, there's always that permanent upward drive from the flame, and we are trying to sell that.

So I am going to bring this part down, and this part up, so now when we go from that to that, it will feel like a recoil. And I'll try to do a different shape here. Let's see what that looks like. So now we have three fairly different graphical shapes as I scrub through the Timeline. I am not quite 100% happy with this one, in the third one, so let's pull that down a little. Okay, let's see how that looks when we activate shape tweening. Just select the Timeline, right-click, and Create Shape Tween. Okay, not too bad.

I am going to hit Play. So we get a nice little undulation dancing. Now, that vertical upward thrust that I was telling you about, we're obviously losing some of that hereabouts, but that's why we need to add a few things. We need to add these little triangular shapes that are tearing off somewhere up here, so that as one part recoils downwards, which is happening let's say here, from this point to that point. Perfect! Add another little triangular wedge ripping off, so I'll do that.

First, make a new layer, empty keyframe, use the Eyedropper, make sure you have the same color selected so it matches. I am going to use the Rectangle tool and just drop in a little shape there. Now, that's a square by default, but you can select and pull the point, and now we have a triangle. So when we go from here to, let's see, from this high point -- I would actually have this triangle break off the one after that, so we reach the high point of that point here, and then when it snaps back, that's where the tear is going to happen. So let's push that tear down a little bit.

And it doesn't have to be too big; something like that. And I'm going to have that move up. And I think we can just F6 to make a new keyframe. Hold down the Shift key and the Arrow key to push it up in some big chunks. And you could maybe even change the shape of it, and lengthen it out a little bit. And when that's done, right-click and Create Shape Tween. And if you get really weird behavior, you can add hints to that.

So that will give you something of an idea as to how we can create these little triangular tears. Each tear, I think ideally, should have its own layer, and I would also add a blank frame following it. And once you are happy with this, you can take these, and hold down the Alt, Option key, and drag them. You can lengthen it and add more tears that overlap along here, which is how I did the original in the Exercise file. Let's have a look at this. And so, as you can see, the tear looks really nice.

And it's just a question of adding more tears. Be careful that the timing of all the tears can be a little bit different. They don't all have to be 2, 3, 4, 5 frames in duration. Some could be 4, some could be 6, roughly the same, but slight differences in spacing. Slight differences in timing are always good to give this a more natural feel. If you want to get a little braver with the shape tweening, because I think we got a little bit lucky with this one, it was really nice the way these shapes tweened into one another. What I would also do would be maybe add some shape hints if you think you want to Control+Shift+H to add more hints from this one. Let's put this down here. Oops, I think it was A, B, left, and right.

What happens, for example, if I add a hint here, and then if I move it to there? Oops! See, this one completely wrecked the animation, so maybe I will move it here. And now we get a very different feel. And I will remind you again, back up your file before you start throwing hints around the place, because they do have the ability to crash Flash. And it's nice to set up your scene, save it, and then start applying the hints. So I could apply, and make sure that you always activate the level that you are actually applying the hints to, Control +Shift+H. Let's put a D Hint here.

What happens, for example, if I put it to there? So it's breaking up that almost too smooth tween that we were getting by default, from here to here is the same keyframes as from this block here. So let's see the difference. This is the animation between the two states with the hints making it a little more erratic, and this is the animation without hints. As you can see, this is almost too clean. Well, it is too clean. By breaking up the animation, by adding some hints, and putting a little bit of chaos into the animation, we have made it look a lot better.

And so once I do something like that, then I would obviously like to copy it. So one way of doing it would be to repeat my original process, and copy and paste, so we have the same action happen twice. I could even break up the second section if I want to have, like, different variations, and see if that works. So each one of these transitions would be unique, which also helps to make your cycle less obvious. You might find that you're going to have a multitude of hints overlapping. As I said earlier, that can be confusing. So you might want to make new layers, and have each of these steps in your cycle -- I am just Alt clicking and dragging now, and removing the lower ones; clear keyframe.

You might want to do something like this so that each one of the blocks of the action have their own Timeline. And that would actually enable you to clearly see -- and let me just delete these. This is really going to enable you to have more visual control over the different hinting steps. It does create more layers on your Timeline, but it dose clean up the process of doing these processes. So that I think covers how I would treat a fire animation.

And I think what we can do is this; if we wanted to cycle this, it would be pretty easy. Let's do that. And so what you will be doing will be generating discrete blocks that keep your Timeline clean. It helps your brain to keep track of all the different things that are going on. So let's just play this one more time; I am going to zoom out. There we go. And we can probably get rid of that little block at the end. There is no reason for that. So play around with this. Have fun with it, I hope. Anything that saves you from having to draw these erratic plasma and liquid effects by hand is a very good thing in my book.

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 · 13337 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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.