[FLASH] Basic Flash Tools and Features

Curves"]
You’ve probably heard of them, if you’re tired of using the same -100 and 100 ease on your motion tweens you can get access to a broader variety of movements by clicking on the edit button or the pencil button in newer versions in your classic tweens.



So there are a bunch of line movements you can do but, I’m just going to focus on three to explain how they work, you can try out different variations yourself and find out how they could be useful to you. Please keep in mind that this is how I personally understand it, I could go as far to say this is only applicable to flash and if you’re looking for a source in this matter with a doctorate in animation or mathematics it's not me.

The first graph represents a normal classic tween with no ease, the movement is constant and it goes well with objects/things that are supposed to move on a constant speed such as a walk cycle, the movement of the sky, clouds, ocean etc.

In my graph I’ve placed five main components: Black squares, Handles, X Axis, Y Axis and properties.



The way you control them is by clicking on the black squares, once you do that you’ll see a small white transparent circle (handle) shows up which I painted red; you can also create more black squares by clicking on the line but that’s a bit more advanced, experiment with that once you know what you’re doing. If you uncheck the box that says “Use one setting for all properties” you can get access to more options to further customize your tweens.

The second graph shows a curve with +100 influence by pulling the right handle to the left, the result you get by using the flash preset ease out is only about +30 influence, if you use +100 influence instead of +30 your object will “start” to move faster and the “end” will be slower/smoother; by analyzing the graph you’ll see that the curve is fairly close to the upper X axis, and that’s why the movement slows down at the end, because you're telling it to reach the final position faster.

On the contrary, the third graph shows a curve with -100 influence by pulling the left handle to the right, this makes it have a slow start and a fast end.

For this specific case and in short, the closer your curve is aligned to the same X Axis [COLOR=#ff4d4d]as the upper black square the movement will "end" slower,[/COLOR] simultaneously, it will move faster or stay for longer in the same starting position the closer it is to the Y Axis regarding the lower black square.

It's kind of a mess huh? I think you'll get a better understanding if you try it out and compare your experience with what I'm saying.

Masks"]
The first thing you're going to do is to create three layers, now go to the top one and to access masks you have to right click “layer” and a drop down menu should show, if this doesn’t work you can double click on it and it will do the same thing, put something on your bottom layer (should be layer 1).



Masks work this way: you have a mask layer (layer 3) and multiple masked layers (just layer 2 in this case). Nothing will happen as long as you don’t have anything on the mask layer, if you insert a shape within your mask layer the objects below it (masked layers) will take on that shape.

Put simply, a mask layer determines a chosen range of what YOU want to display and that’s the basic concept, you can use it to cut stuff, make transitions or neat effects.



You always need a “fill”, only using strokes won’t do the trick, what I do is that I set my fill to 50% opacity because I like to see exactly what I’m choosing.



Now lock your mask layers, this is what happens:



You can animate your mask layers, if you insert a shape -say a small circle and you tween it from being really small to covering the whole screen you'll get this result: (I added the same animation on a different layer so it gives it that border.



RESULT: http://www.fastswf.com/KIcobz8
DOWNLOAD: https://www.mediafire.com/?b0xbd0d5vjzevb1

[SPOILER="Understanding Masks Though The Smash Bros Intro"]

RESULT 1: http://www.fastswf.com/AMLxBKY
ANIMATE YOUR OWN: https://www.mediafire.com/?4r8cmcbxhm2t23g

And after that long title, this is more of an interactive tutorial, follow these steps:

1. Drag sound effects into stage, make it 200 frames long.



2. Make a black background on a new layer.



3. Start adding your flames on a new layer going from top to bottom and from left to right (that way you won't have to send as much symbols to the back as if you were doing it the opposite way...)



Note: make sure to change the parameters below indicated with the red circle for each flame, flip some of them horizontally. Where it says "first:" that's where your symbol will start animating -say it goes 1,2,3,4 for ALL of the symbols so in this case, it would end up looking like the flames are synchronized and that's unnatural, nothing that is natural moves in a synchronized manner. BUT THAT MIGHT BE JUST ME. So yeah, add variation where you need it, by changing the number down there your animation can start from the second frame, or the sixth frame and so on.

4. Once you're halfway done, just copy what you have and adjust accordingly.



5. Done.



6. Create a new layer and turn it into a masked layer.



7. In your mask layer, create a rectangle and set the alpha to 50%



8. Lock mask and masked layers, see what it looks like.



9. I noticed that I missed some spots, so fill them in with more flames.



10. Go back to your mask layer, turn it into a motion tween, add a final keyframe (mine was frame 36), go to the first keyframe, click on the top part of your rectangle and drag it towards the center to make it very thin.



11. Now you have your first line.



Note: You could make this in one (animate both horizontal and vertical rectangle on the same layer) go by using a shape tween, but since there are people who still use Flash 8 to this day I had to make it this way.

12. Copy and paste your layers into a new symbol, call it whatever you want, on the side you can see how it will look (Fire 1).



13. Now adjust the rectangle in your mask layer, rotate it and move it to where the other rectangle should go



14. This is what it should look like at the end:



15. Now drag the symbol you made in step 12 to the stage and align.



16. [MEDIA=youtube]1HIytF-wsZc[/MEDIA]



17. Align with the sound effects.



18. Place the other effects.



19. I moved my effect down to layer 3 because I like having as less layers as possible, I also made this same animation into a symbol so I could use it for the vertical slash.



Note: Remember the mask layer will not do anything unless theres something on it, meaning the masked layers will act like normal layers.

20. Aaaand that should be it.



Now for some people; good isn't enough if better is possible. I wanted to make some of the flames pop outside of the frame, the way I did this was by duplicating twice the "Fire 1" Symbol along with "Tween 1" because I need two rectangles. then I just modified the shape of the rectangle that was on the mask.

RESULT 2: http://www.fastswf.com/TfO3vck
DOWNLOAD: https://www.mediafire.com/?kk5udph919pktis

This effect was pretty popular back then, this is how you do if you were wondering.

1. Take a screenshot of your fight scene and crop the section you want to emphasize on
2. Align it with your current scene, create a mask layer and a masked layer and insert your screenshot in said layer.
3. Make a small circle inside the mask layer, tween and scale up.

1. Create a mask layer and various masked layers.
2. Create a different scene using your masked layers.
3. Make an animation for your mask layer.
4. Done.

1. Create a looping animation with a neat-loopable texture or effect.
2. Create or import a bar, if you are importing it then crop it or trace it in a way you have the ”frame” of the bar and the “fill” in two separate layers.
3. Create one normal layer, one mask layer and one masked layer in that order, place your frame on the normal layer (which should be above the mask layer) place the fill of the frame in the mask layer and your loop animation in your masked layer.
4. Remember that you can animate your mask layer, so it can “grow or shrink” depending on the use you want it to have, maybe a special attack charging up or HP going down.

RESULT:http://www.fastswf.com/WG9_Vfc
DOWNLOAD:https://www.mediafire.com/?pbt4ut3kxsdedtp

For this example I should have used shape tween in my mask layer because you can see a little bit of the loop animation peeking out of the bar, but I had to let people download this in flash 8 so yeah.

1. Make a black background on your first layer
2. Create 2 layers, the one on top is your mask layer
3. Insert your image or other elements In your middle masked layers
4. Create a Circle shape in your mask layer and tween.

This same concept applies to bitmap traced sprites; practically it’s also the same as process the Sniper Scope.

1. Black Background
2. Create Mask Layer and Masked Layers
3. Shape goes in the Mask Layer; the objects you want to show will go in the masked layers.
4. Inversely, you can have a shape as mask that is big enough to cover the screen and then make it go smaller to make those black shape transitions like the ones you see on the kingdom hearts games.

This will not work if your character has wings, long hair or if the back hair can be seen behind the body, you’ll see why.

In this picture you can see that I placed a mask on this walk cycle, I only made a single mask and moved it up and down according to the maple walk cycle, meaning it’s only going to show the body and you can see how it will look on the preview on the top right corner, then you can make your head rigs on the main scene on a new layer that is on top of the headless body.

I made this background for a secret project and I wanted to share how it occurred to me.

http://www.fastswf.com/bizF6R0

1. The first thing you’ll do is a loop of the texture/map you want in a symbol.



2. Bring this symbol into your main stage, create three extra layers, make the top one a mask layer then two masked layers and lastly a normal layer, that’s your background

2.1. Top layer is your mask, 2nd layer is your fade, 3rd Layer is your loop and 4th Layer is your background.



3. Select the linear gradient preset, turn both ends into white and set the left one to 0% alpha.



4. Create an ellipse and rotate it like it’s shown in the picture so the white goes at the top and the fade goes on the bottom.



5. Extend this ellipse to cover what you need to show, this will be your mask shape.



6. Copy and paste on top layer.



7. Now lock the masked layers to see what it looks like, I don’t like it, it’s too small and the background need to be moved up a bit.



8. So fix it. I moved the background and extended the mask shape.



You’ll get this, but this is too boring so add more action, maybe some buildings, mountains, clouds, make it more 3D-ish, maybe some parallax, get your v-cam rotations etc…

RESULT 1: http://www.fastswf.com/6V4XT8o

This is what I got in the end, the clouds are a mess and I think the loop needs more work, the "perspective" isn't good enough to me... but you get the point. I also noticed the loop was backwards, at least for what I wanted to make so I just flipped them vertically on its respective layer.

RESULT 2: http://www.fastswf.com/KXK_alM
DOWNLOAD:https://www.mediafire.com/?m2192h51g8k3339

Guide Layers and motion guide layers"]
I stopped using alignment lines years ago and I see a lot of people leave them in their animations so this is something you can do, if you set your layer to be a guide layer you won’t have to delete it after you’re done, or this could be quite useless and you just might be lazy af.



This is something I discovered recently, guided layers can save you a lot of time if you want to move an object in a specific manner; if you insert a shape or make a line in the guide layer and you insert a motion tween below it , the guide layer will turn into a guided layer, it’s that simple.

RESULT:
DOWNLOAD:https://www.mediafire.com/?i4rt0qbr8orktb6

Shape Tweens"]
I know this feature is available in flash 8 but I find it easier to handle in CS6. So, just as the title says it’s the kind of tween you’ll use for shapes, now how could it be useful or different from a classic tween? Well, there are many more things you can do with it other than moving objects and adding effects that’s for sure:



[SPOILER="Shape Morph"]
Have you ever needed to morph an object into another or letters into other letters? You can do it in Flash.

1. Once you have your shape tween, all you have to do is to add a different shape at the end of your shape tween, this will always work if you make sure your object/image/text is a SHAPE, this means it needs to have those little white circles (as seen in the picture above), to transform objects into shapes use Ctrl B or use bitmap tracing for sprites.



2. Go crazy, play around. These are the parameters you can use in your shape tweens:
• Position and size
• Fill and Stroke (Colors, you can even animate gradient transitions)
• Stroke Width
• Cap (To make the end of your stroke flat or rounded)

RESULT:http://www.fastswf.com/23gK6U4
DOWNLOAD: https://www.mediafire.com/?dg1ru0xgldtwlo1

Note: You might notice the tweening aspect is a bit different, you don’t have curves and you have a new option that lets you pick between “distributive” and “angular”. In my experience I’ve used distributive when the object I’m trying to transform is very organic and angular when I need to define sharp edges, for example word morphing.

Just as before, you’re going to make new shape and then turn it into a shape tween but this time I’m going to focus on gradients; with this you can make your own effects.



1. Make sure to click the shape on your final keyframe from your shape tween, the color tab or more specifically the gradient control bar is what’s going make the changes in the scene, all you have to do is to move those handles indicated with the green arrows, you can also add more by clicking on the bar and you can change their color as well.




2. You’ve probably seen this effect tons of times, where a spoke of light moves across a monitor, well here’s my FLA so you can see how I did it; basically I added another handle, colored them all white, I left the one in the middle at alpha 100 and the two on the side at 0%, placed them to the left on my first keyframe and moved them to the right on the last keyframe.

RESULT: http://www.fastswf.com/V53fxlA
DOWNLOAD: https://www.mediafire.com/?30mjcp9bbcc9kwh

You can use both the pen tool and the line tool so create a full line and turn it into a shape tween.
1. Go to the first keyframe, click (in this case) the right part at the “end” and drag it back to the “start” but not entirely, because the line will disappear; then do the same process backwards so the line fades out.




this arrow should be pointing down, not up lol wdf is wrong with me



And you’re done, that’s all there is to it. Now I’m gonna show you a couple of animations where I made some other modifications.

In this first one you will notice that unlike a classic tween, you can integrate multiple shapes on a shape tween, you can also click and drag on the sides to make curves.

RESULT: http://www.fastswf.com/D5ZynnA
DOWNLOAD: https://www.mediafire.com/?6p6jtz8l7xwd508

In this second one I made every line by separate because IN FLASH really often, if you want to trace a complex shape with many angles and you try doing it on a single layer you won’t get a good result.

RESULT: http://www.fastswf.com/tL3E9SA
DOWNLOAD: https://www.mediafire.com/?13mcd0vgd6vic7j

So yeah, if you do all of that you’ll have a basic understanding of 2D motion graphics; if you’re interested in that style I HIGHLY recommend moving to After Effects as you can make the same type of animations with much less effort for amazing results by duplicating and tweaking the same animation.

RESULT 1: http://www.fastswf.com/AMLxBKY
ANIMATE YOUR OWN: https://www.mediafire.com/?4r8cmcbxhm2t23g

And after that long title, this is more of an interactive tutorial, follow these steps:

1. Drag sound effects into stage, make it 200 frames long.



2. Make a black background on a new layer.



3. Start adding your flames on a new layer going from top to bottom and from left to right (that way you won't have to send as much symbols to the back as if you were doing it the opposite way...)



Note: make sure to change the parameters below indicated with the red circle for each flame, flip some of them horizontally. Where it says "first:" that's where your symbol will start animating -say it goes 1,2,3,4 for ALL of the symbols so in this case, it would end up looking like the flames are synchronized and that's unnatural, nothing that is natural moves in a synchronized manner. BUT THAT MIGHT BE JUST ME. So yeah, add variation where you need it, by changing the number down there your animation can start from the second frame, or the sixth frame and so on.

4. Once you're halfway done, just copy what you have and adjust accordingly.



5. Done.



6. Create a new layer and turn it into a masked layer.



7. In your mask layer, create a rectangle and set the alpha to 50%



8. Lock mask and masked layers, see what it looks like.



9. I noticed that I missed some spots, so fill them in with more flames.



10. Go back to your mask layer, turn it into a motion tween, add a final keyframe (mine was frame 36), go to the first keyframe, click on the top part of your rectangle and drag it towards the center to make it very thin.



11. Now you have your first line.



Note: You could make this in one (animate both horizontal and vertical rectangle on the same layer) go by using a shape tween, but since there are people who still use Flash 8 to this day I had to make it this way.

12. Copy and paste your layers into a new symbol, call it whatever you want, on the side you can see how it will look (Fire 1).



13. Now adjust the rectangle in your mask layer, rotate it and move it to where the other rectangle should go



14. This is what it should look like at the end:



15. Now drag the symbol you made in step 12 to the stage and align.



16. [MEDIA=youtube]1HIytF-wsZc[/MEDIA]



17. Align with the sound effects.



18. Place the other effects.



19. I moved my effect down to layer 3 because I like having as less layers as possible, I also made this same animation into a symbol so I could use it for the vertical slash.



Note: Remember the mask layer will not do anything unless theres something on it, meaning the masked layers will act like normal layers.

20. Aaaand that should be it.



Now for some people; good isn't enough if better is possible. I wanted to make some of the flames pop outside of the frame, the way I did this was by duplicating twice the "Fire 1" Symbol along with "Tween 1" because I need two rectangles. then I just modified the shape of the rectangle that was on the mask.

RESULT 2: http://www.fastswf.com/TfO3vck
DOWNLOAD: https://www.mediafire.com/?kk5udph919pktis