Concept Art Animation – Explosions!

Having just spoken about Flash animations in a blog post yesterday, it’s nice that we were taught some more techniques in the program today. Tony began class by talking to us about the Christmas game we’ve been asked to develop (which I’ve written about in a separate post). In light of this, he wanted us to have a look at some special effects and animations we could incorporate into our work.

We were shown how to create a a rock exploding in Flash using some quick tools and just thinking about the way that sort of action would happen in the real world. As such, we were shown some videos from a couple of places that would help us create our on rock explosion.

The first is found at: http://flashfx.blogspot.co.uk/2008/12/2-smoke.html

This is a fantastic tutorial about how to create a stylised explosion in Flash. It takes you through the steps on how to draw the various parts of the explosion, but also how to animate it in the program.

flashfxtutorial
It all starts with a concept/idea.

They start with enforcing the idea that you need to sketch your plan and the frame-by-frame stills you would like to stick to during the animation. This is so you can decide on the size, speed, and detail you would like to use in your animation – I think this is a very important lesson to remember when I’m creating further special effects in Flash. This tutorial is extremely in-depth and I would like to tackle it in its entirety at a later date.

Secondly, we were shown the Slow Mo Guys on YouTube. My focus of the video below was at about 44 seconds in, when the slow motion droplet footage actually starts.

I find there’s something fascinating and calming about watching these sorts of actions being done in slow motion; it’s what inspired one of the Flash animations I decided to try beyond the rock explosion task. Looking at videos like this is extremely useful for capturing the motion of liquid, fire, explosions, and so on. This is because you can clearly see how each second of the action would pass and what position you should draw next in your animation.

With these things in mind, we began to blow up our rock.

We were shown how to utilise onion layers in Flash – this tool allows you to see more than one frame on the Stage at a time. I’d not known about this feature, but it’s VERY useful for animating something that heavily relies on the last frame you just drew.

onionskin

At this point, we were also reminded about the quick-keys for adding new key frames (F7) and lengthening the key frame you have selected (F5).

rock-explosion

To the left is the explosion I made. I think the part I enjoyed most about this exercise is how random it can be. You don’t necessarily have to be fantastic at drawing. It’s more important you understand the stages of the action you’re trying to capture. Overall, I like the way it looks, but there were other special effects I was interested in trying.

The only other thing I would critique about the animation is the lines of the rocks. Since I was drawing with a mouse rather than a tablet, I found it quite difficult to get the lines to join. Since a rock has a solid shape, I find this is something I’d have to be more careful of in any future efforts.

I came home and thought about other effects that could be drawn in the same sort of way. The first two that came to mind were a fire and a water droplet. I used the same techniques Tony showed us, but I think the fire turned out the best. These are actually quite simple examples, so I’ll have to revisit this as I continue working in Flash – I could have added some extra smoke to the fire animation, or have some smaller droplets falling with the larger one. There are small details that could be added to all three animation now that I’m looking at them closely. It will add more depth and interest to the animations, especially if I want to include something like them in a game.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s