Home
Latest imagesFlash Tutorial
D.ChaosMS Forum :: Community :: Graphics
Page 1 of 1 • Share
- HolyBelief
Average Member
- Posts : 96
Points : 120
Reputation : 4
Join date : 2011-12-27
Flash Tutorial
by HolyBelief Sun Feb 12, 2012 6:46 pm
ALL CREDITS GOES TO THIEFOFROSES FROM MAPLEMATION
ThiefOfRoses' Guide to Basic Animations
Hello, and welcome to my guide to basic animation techniques, using Macromedia Flash 8!
Today we will be covering:
Setting Up Flash
Basic Poses (Stand and Alert)
Walking
Jumping
Basic Attacks
Fight Combinations, including Flow
Resizing
Dashing
After Effects
Skills
V-Cam Usage
Please note that I animate at 30 FPS, so if you animate at 24 FPS, you may need a different amount of frames, depending on what you're doing.
Also, I will be using screenshots, but most screenshots will only be of either the Timeline, your Library, your Stage, or other specific parts of Flash.
What You Need
Flash 8 Terminology
Setting up Flash to Start Animating
Basic Pose Animations (Standing and Alert Pose)
Walking
Jumping
Basic Attacks
Fight Combinations, Including Flow
Resizing
Dashing
After Effects
ThiefOfRoses' Guide to Basic Animations
Hello, and welcome to my guide to basic animation techniques, using Macromedia Flash 8!
Today we will be covering:
Setting Up Flash
Basic Poses (Stand and Alert)
Walking
Jumping
Basic Attacks
Fight Combinations, including Flow
Resizing
Dashing
After Effects
Skills
V-Cam Usage
Please note that I animate at 30 FPS, so if you animate at 24 FPS, you may need a different amount of frames, depending on what you're doing.
Also, I will be using screenshots, but most screenshots will only be of either the Timeline, your Library, your Stage, or other specific parts of Flash.
What You Need
- Spoiler:
You're going to need a few things to start animating, so be sure to have these beforehand.
1)Macromedia Flash 8, or some sort of Flash program. This is used for actually animating, and is what I'll be using for this guide.
2)Maplestory Sprites. You can get a spritesheet of your character through Bannedstory. Simply make your character, and then Go to “File”>”Save Sprite Sheet”>”Normal Sprite Sheet” OR “Sprite Sheet with Face Expressions”, depending on what you want.
With these, you can start doing basic animations!
Flash 8 Terminology
- Spoiler:
This is terminology I will be using as I go along with this tutorial. Read this if you are unclear with a word that shows up, that relates to Flash.
Some of this Terminology only I use. So don't think you're crazy if someone else calls specific parts of Flash, something else.
The Library: This is where, when you import your sprites, they will go. This keeps track of every object, from bitmaps to symbols, and is where you can choose certain objects to move to your stage. In Macromedia Flash 8, the Library is on the right, and looks like this:- Spoiler:
The Timeline: The timeline is where you will see your frames, and can adjust how many frames each Keyframe has, and so on. In Macromedia Flash 8, the Timeline is on the top, and looks like this:- Spoiler:
The Toolbar: The toolbar is where you can choose certain objects that will help you with your animations. This ranges from a magnifier, which lets you zoom in and out, to a Free Transform tool, which lets you arrange how big or small you want your image. In Macromedia Flash 8, the Toolbar is on the left, and looks like this:- Spoiler:
The Stage: The stage is where most of the animating happens. The stage is where you move sprites, Resize them, make them slide, etc. In Macromedia Flash 8, the Toolbar is dead center, and looks like this:- Spoiler:
The Properties Bar: The Properties Bar is where you can edit the properties of the sprites. Since our animation is currently devoid of sprites, this is what it looks like:- Spoiler:
For any other terms that you may or may not be familiar with, please refer to the Urban Dictionary on MapleMation, which you can find here:
[Urban Dictionary] Maple Terms
Credits to Xassissian for posting this dictionary.
Setting up Flash to Start Animating
- Spoiler:
Setting up your Flash Screen is relatively simple, and needs minor adjustments before you actually start animating.
Step 1: Open up Flash, and choose a new Flash Document (.fla will be the file format.)
Step 2: Now we adjust your settings. Since this guide will be animated at 30 FPS, you want to adjust your FPS by going to your timeline, and double-clicking where it says, 12 FPS (This is the default FPS for all new Flash Documents.)
This is where it is:- Spoiler:
Please note that my FPS has already been edited to 30 FPS, ahead of time. Yours will look like 12 FPS.
And then, a window like this will pop up:- Spoiler:
Where it says Frame Rate, edit it to make it say 30 FPS. Again, mines is already set to 30 FPS, ahead of time.
In this screen, you can also edit your canvas size. Simply edit the numbers that designate Height and Width.
Step 3: Now, we set up your timeline. For now, we will have a basic Timeline, including only an alignment line layer, and a layer for your sprites.
Your timeline will look like this:- Spoiler:
To rename layers, simple double click the layer name, and edit the name. I call my character layers by my name.
Step 4: Now, we import your sprites, that you want for animating. Go to “File”>”Import”>”Import to Library,” and choose the sprites you want to import, for your animation.
To get to Import to Library, simply follow this:- Spoiler:
Step 5: Finally, we need an alignment line. An alignment line is where all your sprites will stand during the animation, and it is how we will position the sprite accordingly.
To actually be able to draw the line, simply choose the line tool on the toolbar, which looks like this:- Spoiler:
Your stage will now look like this:- Spoiler:
Please note, that your alignment line does not have to be anywhere specific at this point in time. Just make sure there's decent room for your character.
Also note that this line MUST go onto the Layer that says “Line” (If you're following my Timeline setup). Simply click on the layer “Line,” and draw your line on your stage.
And now, you're all set to start animating! So, let's get started!
Basic Pose Animations (Standing and Alert Pose)
- Spoiler:
So now we're going to start with the basics. Maplestory's Standing, and Alert Poses.
To start out, set up your Flash as told during the “Setting Up Flash to Start Animating” section.
Then, import your standing and alert poses. We'll start out by animating your Standing pose.
Animating your Stand Pose- Spoiler:
Import your standing sprites. Your Library should now look like this:- Spoiler:
Next up, you're going to want to smoothen your sprites. Smoothing ensures that your sprite will be less pixely, the more you adjust it.
Simple right click a sprite in your library, and click “Properties.”
You will see this window:- Spoiler:
You'll need to do this for all the sprites you have. To make this go by much faster, highlight all your remaining sprites, and press “Ctrl+Y.” This will copy the same action as before, and perform it on all the selected sprites. In this case, it will smoothen all your sprites for you!
Now then, move your first Sprite, labeled by default, “Stand_0,” To your stage, onto your alignment line. You'll notice your sprite is very blurry. To fix this, simply remove any of the decimals in your X and Y values at your bitmap properties, so that it looks something like this:- Spoiler:
As you can tell, I removed any decimals from the X and Y values, so that all the numbers end with “.0”.
Now, your sprite, which is on your alignment line, should look like this:- Spoiler:
Next up, you'll want to convert your sprite from a Bitmap, to a Movie Clip. This is done by right clicking the sprite that's on the stage, and going to “Convert to Symbol.” Click on that, and you'll end up with a screen that looks like this:- Spoiler:
Make sure that “Movie Clip” is checked, and press ok. You're sprite will now be a movie clip! Now, double click on the sprite, and you'll be inside the movie clip, where you can animate the sprite.
Now, for every 10 frames, you will create a new keyframe to swap poses. Swapping poses means simply changing the current sprite into the next sprite in the list. To create a new keyframe, simply choose where you want to create it, and press “F6” on your keyboard. This will create a new keyframe, but it will contain the sprite used in the last keyframe. This is what we want.
To swap bitmaps, simply click on your character, and look at your properties bar. It should now look like this:- Spoiler:
Click on “Swap,” and you'll get a window like this:- Spoiler:
Click on the next sprite that you need (So if you're at Stand_0, click on Stand_1, and so on.), and press Ok. Be sure that this is on the next keyframe.
Continue this process, until your timeline looks like this:- Spoiler:
Then, double click out of the sprite, and your timeline will return to normal.
Choose a time limit of how long you want your animation to go to. For example, if I wanted the animation to last 2 seconds, I would go to Frame 60, since my FPS is 30, or 30 Frames per Second. Once you've chosen your time limit, go to that frame, and for both the alignment line, and character, press “F5” at that frame. This will extend the frames to that point.
Your timeline should look like this:- Spoiler:
And now, you're all done! Press “Ctrl+Enter” to preview your image.
It should look a little something like this:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/739150TutorialAnimation.swf[/flash]
Animating Your Alert Pose- Spoiler:
Animating an Alert Pose will follow exactly the same thing as the stand pose, just, with the alert sprites.
I won't go into much detail about this, because I explained it all in the standing pose tutorial. Just replace the standing poses with alert poses, and poof! You've done it!
This is what it should look like:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/817023TutorialAnimation(Alert).swf[/flash]
Walking
- Spoiler:
Walking is the next thing to learn when you start out animating.
To start out making a walking sprite, set up your Library, Timeline, and Stage just like you would for the Standing or Alert Poses.
But this time, your stage should look like this:- Spoiler:
Notice how the sprite is actually outside the view of the animation. This is so the sprite can walk into the screen, versus just randomly pop into the screen and start walking.
Remove all the decimals, making sure the image is clear. Then, convert the sprite into a movie clip.
Double-click the movie clip, and this time, for every 7 frames, create a new keyframe, and swap the walking sprite with the next walk.
When you're done, double click outside of the sprite, to return to your original timeline.
Move to about 200 Frames after the beginning, and create a new keyframe. At this point, move your walking sprite all the way to the other end of the screen. It should look like this:- Spoiler:
You might be wondering, Why 200 Frames? Won't that take too long? The answer to that question is yes, yes it is quite a bit of frames. But, the idea behind it is that if you have too few frames for walking, the walking will go by like a blur, and won't look pretty. Two-hundred Frames is just about right for a smooth walk from one end to the other.
Now, we'll explore a new concept. Tweening. Tweening is when you can move one sprite to the other end without having to do it frame by frame.
To do tweening, right click any frame between the two keyframes you have made, and this menu should show up:- Spoiler:
Simply click “Create Motion Tween,” and now your timeline looks like this:- Spoiler:
Now you're all done. Press “Ctrl+Enter” to preview your animation, and it should look something like this:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/971409TutorialAnimation(Walk).swf[/flash]
Please note that Tweening is primarily used for walking, and nothing else. (This only applies to Frame By Frame animators. Since I don't know how to tween animate, I won't be diving into tweening that much.) Tweening should also NOT be abused, because it leads to a lot of slow animation.
Jumping
- Spoiler:
Jumping, while it seems simple, is actually screwed up the most often because lack of an idea of Physics.
For jumping, you need only 2 sprites. An Alert pose, and a Jump Pose.
First, move your alert pose onto the screen, remove decimals, and ensure that it is smoothened. Make the alert pose keyframe about 5 frames long.
Create a new keyframe, and switch to a jump pose. Then, follow these steps:- Spoiler:
1)Create another keyframe, and move the jump pose up 10 pixels.
2)Create another keyframe, and move the jump pose up 6 pixels.
3)Create another keyframe, and move the jump pose up 4 pixels.
4)Create another keyframe, and move the jump pose up 2 pixels.
5)Create another keyframe, and move the jump pose up 1 pixel.
6)Create another keyframe, and move the jump pose down 5 pixels.
7)Create another keyframe, and move the jump pose down 8 pixels.
8)Create another keyframe, and move the jump pose down 10 pixels.
9)After moving it down 5 pixels, swap the jump pose with the alert pose.
10)Make the alert pose about 10 frames.
If you've followed all of these steps correctly, your timeline should look like this:- Spoiler:
And so, your animation should look like this:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/224145TutorialAnimation(Jump).swf[/flash]
Yes, this animation is relatively fast, but jumps aren't meant to be prolonged, unless you're trying cinematic effects, which I will not be covering. (Sorry.)
Basic Attacks
- Spoiler:
Now we'll focus on basic attacks.
Basic Attack 1: Swinging.- Spoiler:
We'll start with swinging. For this tutorial, I will be using Swing_O1, in your Spritesheet.
1)Import your sprites, and smoothen them.
2)Move your sprites to the stage, remove the decimals, align it correctly.
3)Each attack sprite will be one frame long.
4)So, for every keyframe, swap the sprite with the next one.
By the time you've done this, your timeline should be 3 keyframes in a row.
But, we're not done. To ensure realism in your animations, you want to add slide.
Slide in an animation is the equivalent of the final step in an action. For example, you cannot come to a complete halt in a Maplestory Animation, just as you can't come to a complete halt while walking in real life, without taking that last step.
To actually do slide, you will move your finishing sprite (In this case, Swing_O1 3), either right or left, depending on the direction they're facing.
Regardless of the direction the sprite is facing, what you want to do is this:
1)When you first change to your final action sprite, move that sprite forward 5 pixels.
2)Create a new Keyframe, and move the sprite forward 3 pixels.
3)Create another keyframe, and move the sprite forward 1 pixel. This is your last movement, and should last for about 7-10 frames. (This is NOT the case when you are trying a combo, or attempting good flow. More on that later.)
If you have done this correctly, your timeline should look something like this:- Spoiler:
Then, preview your animation. It should look a little something like this:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/011959TutorialAnimation(Swing).swf[/flash]
And there you go! You've pulled off a succesful swing.
Basic Attack 2: Punching.- Spoiler:
Punching follows the same concept as swinging does, just with different sprites.
I won't go through all the details of animating a punchin, because it's exactly how you would animate a swing, which was explained earlier in this tutorial.
By the time you're done with you punch, your timeline should look like this:- Spoiler:
And your animation should look like this:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/242185TutorialAnimation(Punch).swf[/flash]
Fight Combinations, Including Flow
- Spoiler:
Now we're going to cover fight combinations, and the adaption of good flow.
Fight combinations are generally made up of, but not limited to, 3 to 5 consecutive attacks.
Flow is defined as smoothly moving through each attack, without noticeable pauses.
To start our combination attack, you'll need to import sprites. For this example, I'll be using:
Stab_O1
Swing_O1
Swing_TF
Please note that these sprites will be based off of a Bannedstory made Spritesheet, and so, if you're using someone's custom spritesheet, you may or may not have different sprites.
First things first. Import all of the sprites for the Combination, smoothen them all, and prep your stage with an alignment line.
We'll start with the Stab_O1 Sprite. Set a starting position for your attack, and continue with the process shown before. Don't forget to add slide.
This is what your timeline shouold look like so far:- Spoiler:
And this is what your animation should look like so far:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/150195TutorialAnimation(ComboPt.1).swf[/flash]
Next, we'll add in the Swing_O1 attack. There is no special transition when doing a combo with flow, so simply add in the Swing_O1 attack combo directly after the Stab_O1 attack. Don't forget slide. (I'll constantly remind you this, so DON'T FORGET IT.)
Now your timeline should look like this:- Spoiler:
And this is your animation so far:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/874508TutorialAnimation(ComboPt.2).swf[/flash]
Finally, we'll add in the last part of the Combo, Swing_TF. Again, there is no special transition, so simply add in the attack directly after Swing_O1. Don't forget Slide.
Now your timeline should be this:- Spoiler:
And your final animation should be this:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/693667TutorialAnimation(Combo).swf[/flash]
Congratulations, you've performed your first combo, and it has decent flow!
If you want practice with this, toy around with other combos of attacks. It works out well.
Resizing
- Spoiler:
Resizing helps give smooth transition when changing poses (That aren't part of a combo), changing emotes, or changing directions that you face.
For this animation, I'll be resizing to change emotes.
There are two methods to resizing emotes. You can either:
a) Resize into the same exact pose, except with the face changed to the one you want
OR
b) Resize into the same pose, but add in the face only, on a separate layer.
For the tutorial, I'll be doing the first of the two methods.
So, to start with, we'll need two sprites.
The two sprites are my original pose (Which will be Stand1_0) and the pose I will resize into. (Stand1_0 with Bewildered face.)
I'll import these two sprites, smoothen them, align them, etcetera.
Now then, to resize, you'll want to follow these steps:- Spoiler:
1)Shrink your sprite's height by 6 pixels, and increase it's Y-value(Positioning) by 6 pixels.
2)Increase sprite's height by 2 pixels, decrease Y-Value position by 2 pixels.
3)Increase sprite's height by 2 pixels, decrease Y-Value position by 2 pixels.
4)Increase sprite's height by 2 pixels, decrease Y-Value position by 2 pixels.
5)Replace the last sprite with the sprite you wish to resize into.
And now your Timeline should look a little something like this:- Spoiler:
And your animation will look like this:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/363754TutorialAnimation(Resize).swf[/flash]
And congratulations, you've just learned how to resize! Practice a bit with switching directions, poses, and emotes, and you'll be good to go!
Dashing
- Spoiler:
Dashing is the act of moving quickly from place to place, like a blur. It is generally used for speedy movements and chasing other people.
Dashing is actually a relatively simple process, consisting of only a few short steps. For this animation, I will have my sprite dash into the screen.
1)Import your sprites. For the tutorial, I'll only need one sprite. That sprite is SwingOF_3.
2)Smoothen the sprite.
3)Place the sprite outside the stage, but on the alignment line. Remove decimals, etc.
4)Turn the sprite into a movie layer.
5)Go to Filters, press the “+” sign, and add Blur.
6)Make sure the X and Y values for Blur are not locked. You can do this by clicking the small lock symbol next to the values, and make sure it looks unlocked.
7)Change the quality of the Blur to high.
8)Set the Y-Value for blur to 0, and set the X-Value to 10.
9)For long distances, create a new keyframe and move your sprite 100 Pixels to the left or right, depending on which way it is dashing. This can be done by holding down the shift key, and pressing left or right on your arrowpad 10 times. (Shift Key + Pressing Left/Right Once = 10 Pixels in that direction.)
10)Continue this until your sprite reaches it's destination.
11)Remove the blur from the sprite.
12)Add slide when the sprite stops, to promote realism.
If you've followed all these steps, your Timeline should look a little like this:- Spoiler:
Please note that the amount of keyframes you use will be dependent on the distance you are dashing. Since I had my sprite dash into the middle of the screen, each keyframe is worth 100 Pixels.
And your animation should be a little like this:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/764719TutorialAnimation(Dash).swf[/flash]
And there you go, you've performed a Dash! Don't abuse Dashes though, there are other methods to transitioning in animations, like running, walking, or teleportation.
After Effects
- Spoiler:
After Effects are used to emphasize swings and punches. There are a variety of after effects for all sorts of weapons, all found on Bannedstory under the Effects category.
After Effects require 3 layers, instead of the usual two. They go in order from top to bottom as such:
-After Effects
-You
-Alignment Line
So, your timeline should look a little like this:- Spoiler:
So now that your timeline is set up, you want to import your sprites, smoothen them, and place your first sprite onto the screen (For me, it will be SwingO1_0).
What I like to do is first, finish the actual attack with slide and such.
1)Complete the swing attack, following the attack animation tutorial explained earlier.
2)Add Slide.
3)On your newly made layer, labeled “After Effects,” create a new keyframe at the first keyframe of your last sprite (IE: New keyframe at wherever you first put in the SwingO1_2 or whatever you're using.)
4)Extend the keyframe to 4 frames for length.
5)Go to to the last part of your slide (IE: The 1 Pixel Slide), and align the after effect with the hand.
6)Turn the After Effect into a Movie Clip.
7)Under the properties menu, change the Color to Alpha. You'll notice that Opacity will now show up next to the “Color” option.
8)On the very first Keyframe, set the Opacity to 100%
9)Create a second keyframe with the 4 Frames in the After Effect layer, and change the opacity to 75%.
10)Do the same thing for the Third Keyframe, except turn the opacity into 50%.
11)Finally, on the last Keyframe, change the opacity to 25%.
Your timeline should now look like this:- Spoiler:
And your animation will look like this:- Spoiler:
[flash= width = 550 height = 400]http://www.truploader.com/uploads/894064TutorialAnimation(AfterEffect).swf[/flash]
And congrats! You now have succesfully pulled off an After Effect! Try to use after effects with every attack, as to exaggerate it and make it more noticeable. Except when you're doing speedy combos, and I mean insanely fast ones, where there isn't enough frames for each after effect.
- Zalen
Ultimate Member
- Posts : 217
Points : 267
Reputation : 1
Join date : 2012-03-19
Age : 29
Location : Sacramento, CA
Re: Flash Tutorial
by Zalen Sun Apr 15, 2012 9:31 am
You need to clean up some of the spoilers and such.
Similar topics» In Need of FireWorks and Flash
» Getting better at flash animation.
» Infinity Flash Jump
» N00B Flash Animation {Beginner}
» First Attempt with Hand Drawn Shit (Flash)
» Getting better at flash animation.
» Infinity Flash Jump
» N00B Flash Animation {Beginner}
» First Attempt with Hand Drawn Shit (Flash)
D.ChaosMS Forum :: Community :: Graphics
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum