Learn how to use Adobe Flash with all the free tutorials. Game Making, Animating, Cartoon Design, Web Design and much more...
Showing posts with label Animation. Show all posts
Showing posts with label Animation. Show all posts
How to make an animated button
If you aren’t familiar with making buttons, you can take a tutorial here
Begin by drawing out the shape you want to be a button, right click on it and select, ‘convert to symbol’.
Now double click on the button to enter its timeline.
Once in the button’s timeline, select the entire button, and right click on it and then go down to ‘convert to symbol’ again. This time, make sure the ‘movie clip’ radio button is checked, and then click OK.
This not change the whole button in to a movie clip, if you go back to the main timeline, flash will recognise the whole thing, as being a button still.
Now double click on the graphic you just converted in to a movie clip, to enter its timeline.
Here is where you can animate the button, notice how the timeline and frames are normal.
Animate it any way you want.
I made a button that has text on it that says ‘Click’. I inserted a keyframe at frame 10, and changed the text to ‘Here’, and inserted another keyframe at frame 20, so ‘Here’ appears for the same time as ‘Click’.
Now I have a button that say’s click, and shortly after it changes to here. This loops so my button displays it over and over.
Animate it anyway you want, that was just an idea for you, change the picture completely if you want.
Other tutorials you might like:
This tutorial has information in it to show you how to link buttons.
How to make glowing text
Glowing text is a great effect, and it can be a great way to catch the users attention, which is why in this example I'll show you how to link the text to a website.
Begin by using the text tool and inserting the text that you want to add a glowing effect to.
I'm using the text 'Learn Flash 8 Pofessional'
Once you have done this, right click on the text, and choose 'convert to symbol'. Check the 'button' radio button, and click on OK.
Right click on this button, and go down to, 'actions'.
Now insert the following code:
on (release) {
getURL(http://www.learnflash8pro.blogspot.com/);
}
Now when the user clicks on the text it will take them to them to my website.
Simply replace the URL in the brackets with the URL you want, include http://www/.
Select the button, and open up it's propert pannel by clicking on the little Up arrow which it in the center of the screen, and at the bottom.
There will be three tabs here,
Properties, Filters and Parameters.
We need to use some Filters, so click on the Filters tab.
There will be a plus symbol, which is used to add filters, click on this and select 'Glow'.
(While you are using the filters, experiment by adding more filter and messing around with the settings,
THAT IS HOW YOU LEARN NEW THINGS, AND BECOME A BETTER USER OF FLASH PROFESSIONAL 8
Once you select glow, you can adjust the settings (to the left) to change the way it looks, larger glow, strength of glow etc.
And that's it, now you can add this to your game or movie, animate the text by making it move around the screen to catch the users attention even more.
How to animate text
Text Animation(tut.13)
This tutorial is good for writing out the titles of games/movie that you are working on.
Rename layer 1 text. Change the fps from 12 down to about 6 or 5.
On the first frame of the text layer, using the text tool right out your first name or something like that. Now right click on the text and select break apart. What this does is separates all the letters so that we can move them individually.
Start by inserting 5 keyframes all next to each other, so it will take up 5 frames.
On the second keyframe slightly move every letter, whether it’s up a little bit higher, or down a little bit lower. Now continue doing this on the other keyframes, but don’t move them to far otherwise it will look like just a bunch of messy text moving around.
Now when you have done this, test your movie, the text will have a nice little animation now. Perhaps you could go back to your mini movie and add a title to it and animate the title.
This tutorial is good for writing out the titles of games/movie that you are working on.
Rename layer 1 text. Change the fps from 12 down to about 6 or 5.
On the first frame of the text layer, using the text tool right out your first name or something like that. Now right click on the text and select break apart. What this does is separates all the letters so that we can move them individually.
Start by inserting 5 keyframes all next to each other, so it will take up 5 frames.
On the second keyframe slightly move every letter, whether it’s up a little bit higher, or down a little bit lower. Now continue doing this on the other keyframes, but don’t move them to far otherwise it will look like just a bunch of messy text moving around.
Now when you have done this, test your movie, the text will have a nice little animation now. Perhaps you could go back to your mini movie and add a title to it and animate the title.
How to make a movie
Making Your Own Mini Movie
We are now advancing again, we will now create our own mini movie. We will be exploring new areas of Flash.
Lets start by inserting all the layers that we will need. We will need the following layers:
Building
Car
Character
Audio
Road
Grass
Sky
Tree
These are the layers that will be required to make our mini movie. Let’s start designing these things. We will start with the buildings.
On the stage in any layer as we won’t be keeping it on the stage, draw out a few rectangles that vary in size, keep the aligned at the bottom. Now add windows to these buildings. Now add any other feature to the buildings that you think is necessary.
When you are happy with these buildings, select them all and convert it to a graphic, naming it Buildings.
Deselect the buildings than reselect them and delete them. (Q. Why did we deselect them first. A. Because if we didn’t, the image that we have put in the library would also be deleted, so to confirm that we are happy the way it is, we must first deselect the image).
We will now start by making our car. Draw a car on the stage, this can be as basic or advanced as you want. It may be just a rectangle with a couple of circles attached to the bottom of it. Convert this to a graphic also, name it Car.
Delete the car using the same method as before.
The audio that we want is the sound of a car horn, you could find one somewhere on the internet, or you could record yourself making a car horn sound, or even the sound of your own car horn.
Once you have this audio file, import it to the library, this was explained in a previous tutorial.
The road is really simple to make, make it probably a black or grey colour. We are just going to make this road another rectangle, a bit longer than the stage. You can add lines to it if you want. Now convert this to a graphic and name it Road.
Delete the road.
For the grass this is just another rectangle, and I would suggest making it a shade of green, as grass seems to have a tendency of being green. Also make this a bit longer than the stage. Now convert it to a graphic, and name it grass.
We will be trying something a little different with the sky to give it a better effect.
Click on the colour and set it to no line (the red diagonal line), than select the fill colour. This is where we will be doing something a little different. Above the library if you have it positioned on the right hand side of the workspace, click on the thing that says color. This will bring up a list of options on what to do with the color. Where it says type, most like be set to solid; change it to linear.
Now at the bottom of the colour panel there is a window that displays what the color looks like. We are going to mix two shades of blue together. Double click on one o the little squares just above the display window, now a pain panel will be displayed select one of the darker shades of blue. Now double click on the other square, and choose a lighter shade of blue. Now these squares can be slide along the bar which will control the colour and how much of the square it will take up, we want these two colours to blend nicely contrast nicely, so move them around until it looks nice and neat. You can add another colour simply by click somewhere else along the slider.
Now when you are happy with the colour, make sure it has been applied to your sky. Now select the whole sky, right click on it and select free transform, rotate it about 45 degrees so that the darker colour is on top of the lighter one, instead of them being next to each other. Stretch it out so it is a little longer than the stage, and convert it to a graphic, and name it Sky.
Last but not least the tree. Draw a simple tree on the stage, giving the leaves a shade
of green, and the trunk a shade of brown.
Convert this to a graphic and name it tree.
We now have everything we need for our mini movie, now we must insert all the animations needed.
First of all we need to work out how to fit all our props on to the stage, start by dragging the sky symbol on to the stage in the sky layer. Position it at the top of stage, we won’t worry about the size just yet.
Now the next thing we will be placing on the stage is the buildings. Place the buildings on the building layer. Make sure that the building layer is above the sky layer, otherwise the sky will hide the buildings.
Now we want the buildings to look like there on the grass, so make sure the grass layer is below the buildings layer and line the grass up with the bottom of the sky.
Next we will insert the road, which will be straight underneath the grass layer.
Now insert the car on the car layer, make sure the car layer is over the road layer, and position the car off the right of the stage. The car will have to be facing towards the left side of the stage.
Now is the time to position and size everything.
Check for the following:
No white showing. Eg. No gap between the sky and the grass etc.
Make things to scale: You obviously don’t want the car to be bigger than the buildings, and you also want the stage nice and neat.
Once you are happy with these results, it is time to add some animation to the car. This is going to be really simple. Insert a keyframe on the 10th keyframe in the car layer, on the 10th keyframe drag the car off to the left side of the stage, making sure it is still on line with the road. Now insert another keyframe at the 11th frame, the car should be off to the left of the stage. Now on the 11th keyframe, flip the car so it is facing the way it just come from, this was explained in a previous tutorial. Now insert another keyframe at frame 21. Create motion tween between frames 1 and 10, and between frame 11 and 21 1.
Test the movie, you should have a car driving across the screen, than it drives back across the screen. Congratulations, you have just made your first mini movie. Keep this file, as when you progress through these tutorials you can edit them to make them better. Now I mentioned that we would be putting the character in this mini movie. I want to leave this bit up to you, for your own good. You figure out what you want the character to do, what the character may say, and where to place him in this movie.
Well done on completing this tutorial, now move on to the next.
We are now advancing again, we will now create our own mini movie. We will be exploring new areas of Flash.
Lets start by inserting all the layers that we will need. We will need the following layers:
Building
Car
Character
Audio
Road
Grass
Sky
Tree
These are the layers that will be required to make our mini movie. Let’s start designing these things. We will start with the buildings.
On the stage in any layer as we won’t be keeping it on the stage, draw out a few rectangles that vary in size, keep the aligned at the bottom. Now add windows to these buildings. Now add any other feature to the buildings that you think is necessary.
When you are happy with these buildings, select them all and convert it to a graphic, naming it Buildings.
Deselect the buildings than reselect them and delete them. (Q. Why did we deselect them first. A. Because if we didn’t, the image that we have put in the library would also be deleted, so to confirm that we are happy the way it is, we must first deselect the image).
We will now start by making our car. Draw a car on the stage, this can be as basic or advanced as you want. It may be just a rectangle with a couple of circles attached to the bottom of it. Convert this to a graphic also, name it Car.
Delete the car using the same method as before.
The audio that we want is the sound of a car horn, you could find one somewhere on the internet, or you could record yourself making a car horn sound, or even the sound of your own car horn.
Once you have this audio file, import it to the library, this was explained in a previous tutorial.
The road is really simple to make, make it probably a black or grey colour. We are just going to make this road another rectangle, a bit longer than the stage. You can add lines to it if you want. Now convert this to a graphic and name it Road.
Delete the road.
For the grass this is just another rectangle, and I would suggest making it a shade of green, as grass seems to have a tendency of being green. Also make this a bit longer than the stage. Now convert it to a graphic, and name it grass.
We will be trying something a little different with the sky to give it a better effect.
Click on the colour and set it to no line (the red diagonal line), than select the fill colour. This is where we will be doing something a little different. Above the library if you have it positioned on the right hand side of the workspace, click on the thing that says color. This will bring up a list of options on what to do with the color. Where it says type, most like be set to solid; change it to linear.
Now at the bottom of the colour panel there is a window that displays what the color looks like. We are going to mix two shades of blue together. Double click on one o the little squares just above the display window, now a pain panel will be displayed select one of the darker shades of blue. Now double click on the other square, and choose a lighter shade of blue. Now these squares can be slide along the bar which will control the colour and how much of the square it will take up, we want these two colours to blend nicely contrast nicely, so move them around until it looks nice and neat. You can add another colour simply by click somewhere else along the slider.
Now when you are happy with the colour, make sure it has been applied to your sky. Now select the whole sky, right click on it and select free transform, rotate it about 45 degrees so that the darker colour is on top of the lighter one, instead of them being next to each other. Stretch it out so it is a little longer than the stage, and convert it to a graphic, and name it Sky.
Last but not least the tree. Draw a simple tree on the stage, giving the leaves a shade
of green, and the trunk a shade of brown.
Convert this to a graphic and name it tree.
We now have everything we need for our mini movie, now we must insert all the animations needed.
First of all we need to work out how to fit all our props on to the stage, start by dragging the sky symbol on to the stage in the sky layer. Position it at the top of stage, we won’t worry about the size just yet.
Now the next thing we will be placing on the stage is the buildings. Place the buildings on the building layer. Make sure that the building layer is above the sky layer, otherwise the sky will hide the buildings.
Now we want the buildings to look like there on the grass, so make sure the grass layer is below the buildings layer and line the grass up with the bottom of the sky.
Next we will insert the road, which will be straight underneath the grass layer.
Now insert the car on the car layer, make sure the car layer is over the road layer, and position the car off the right of the stage. The car will have to be facing towards the left side of the stage.
Now is the time to position and size everything.
Check for the following:
No white showing. Eg. No gap between the sky and the grass etc.
Make things to scale: You obviously don’t want the car to be bigger than the buildings, and you also want the stage nice and neat.
Once you are happy with these results, it is time to add some animation to the car. This is going to be really simple. Insert a keyframe on the 10th keyframe in the car layer, on the 10th keyframe drag the car off to the left side of the stage, making sure it is still on line with the road. Now insert another keyframe at the 11th frame, the car should be off to the left of the stage. Now on the 11th keyframe, flip the car so it is facing the way it just come from, this was explained in a previous tutorial. Now insert another keyframe at frame 21. Create motion tween between frames 1 and 10, and between frame 11 and 21 1.
Test the movie, you should have a car driving across the screen, than it drives back across the screen. Congratulations, you have just made your first mini movie. Keep this file, as when you progress through these tutorials you can edit them to make them better. Now I mentioned that we would be putting the character in this mini movie. I want to leave this bit up to you, for your own good. You figure out what you want the character to do, what the character may say, and where to place him in this movie.
Well done on completing this tutorial, now move on to the next.
Make a talking character
Creating a Character That Talks
This is where you character comes to life, where it get’s it’s personality.
Before we start, if you are still finding it hard to work with flash, don’t worry, flash can take a bit of time to get the hang of, but once you do, you can do all sorts of things, flash is a very powerful tool. Alright, what we need to do first is import some some audio to the library, you will need a microphone if you want to import your own voice, if you don’t have a microphone just have a look around for a short audio file to work with. Once you have an audio file that you are happy with continue on with this tutorial.
To import the audio file to the library click on the menu item file/import/import to library. Now find the audio file that you want and press open.
This will import it to the library. Now rename layer 1, character. Now go to the menu item insert, new symbol, check the box next to movieclip, than name it character. Now in the character timeline, insert a new layer above the layer 1 and name it mouth, layer 1 body and head. In the body and head layer draw you body and head without including the mouth. Now insert another layer called audio, insert a normal frame at about frame 5. now on the first frame select you audio file and drag it on to the stage. On the frames in the audio layer, squiggly lines will appears, that is the sound waves. The only problem is, the audio is most like likely longer than 5 frame. So click on the last frame than drag it out until the whole audio file fits properly. This audio layer is only to get the mouth in sync with the audio, we won’t actually be keeping this layer. Now on the mouth layer draw the normal mouth on the first frame. Where the audio start, insert a new keyframe on the mouth layer and change the shape of the mouth, insert another keyframe about one away form that one and change the mouth shape to math the audio. Where the audio stops talking draw the mouth that is normal, or you can right click on the first frame of the mouth layer where the mouth was normal, and select copy frames, and paste that frame where the audio is speaking. Continue doing this for the rest of the audio file, changing the mouth shapes to match the words of the audio file. This is only your first attempt, so don’t be to worried about making it perfect. When you have got the mouth talking where the audio is speaking, delete the audio layer. That is it for your character, so click on scene 1 to go back to the main timeline. Here you will need to insert a layer named audio. Now repeat the same process as before to put your audio file on the frames. Now on the first frame of your character layer drag your character from the library and place him in the center of the stage. Insert a key frame on the character layer where the audio stops. Now you will have a character that appears to be talking, press ctrl enter and see how it looks. As I said, don’t be to stressed if it is a little sketchy, it all comes with practice.
Here is your first assignment, try and put all the things that you have learnt so far and put them all into the one flash project. This would include a motion tween, shape tween, a motion guide, a button to start the file, a walking person, and a person who talks.
This might help you to think of how you can combine these in to one.
Motion Tween: Create a sun that slowly goes across the stage.
Shape Tween: Could have your characters first name, than have it transform in to his/her last name.
Motion Guide: This could as simple as a bird flying around the scene.
I want you to have a play around with these things I have taught you and really get to understand the possibilities, when feel comfortable, come back and continue with the next tutorial.
Before we move on to the next tutorial we read through these tips.
Tip 1. It is a good idea to plan out your flash presentation first, get an idea of the layers that will be needed etc.
Why this helps: this will help you work through the flash file a lot quicker and easier; it also helps you organize it nice and neat.
Tip 2. Prepare the moviclips, buttons, graphics etc. before you start adding the animations or shape tweens etc.
Why this helps: This gets the designing process out of the way and makes it less confusing when adding the animations that are required.
Tip 3: Have each separate symbol on a different layer.
Why this helps: If the symbol is on a layer of it’s own, it makes it much easier to edit, or make any changes to it that are necessary, and as it is on a layer of its own, it won’t change anything on the other layers.
Tip 4: Take notes of some of the mistakes you make and how you fix these mistakes.
Why this helps: This will help you so much when creating flash projects, as you won’t make this mistake again, and if you do, you will know exactly how to fix it.
Tip 5: Experiment with things.
Why this helps: One of the best way to learn new things in flash is to experiment, try something different, this will improve the quality of the movie/game a lot.
Tip 6: Be creative.
Why this helps: The more creative the flash file is the more appealing it will be. Let you imagination go wild, add all types of this to make it fun and interesting.
Tip 7: Challenge yourself.
Why this helps: The only way you can better is by challenging yourself, do that little bit extra. This will also help you learn new things.
Flash 8 has so many possibilities, it would be near impossible to explain every detail about flash, so it helps to do a little bit of exploring for yourself.
Don’t be afraid to make mistakes, it’s all part of the learning process.
This is where you character comes to life, where it get’s it’s personality.
Before we start, if you are still finding it hard to work with flash, don’t worry, flash can take a bit of time to get the hang of, but once you do, you can do all sorts of things, flash is a very powerful tool. Alright, what we need to do first is import some some audio to the library, you will need a microphone if you want to import your own voice, if you don’t have a microphone just have a look around for a short audio file to work with. Once you have an audio file that you are happy with continue on with this tutorial.
To import the audio file to the library click on the menu item file/import/import to library. Now find the audio file that you want and press open.
This will import it to the library. Now rename layer 1, character. Now go to the menu item insert, new symbol, check the box next to movieclip, than name it character. Now in the character timeline, insert a new layer above the layer 1 and name it mouth, layer 1 body and head. In the body and head layer draw you body and head without including the mouth. Now insert another layer called audio, insert a normal frame at about frame 5. now on the first frame select you audio file and drag it on to the stage. On the frames in the audio layer, squiggly lines will appears, that is the sound waves. The only problem is, the audio is most like likely longer than 5 frame. So click on the last frame than drag it out until the whole audio file fits properly. This audio layer is only to get the mouth in sync with the audio, we won’t actually be keeping this layer. Now on the mouth layer draw the normal mouth on the first frame. Where the audio start, insert a new keyframe on the mouth layer and change the shape of the mouth, insert another keyframe about one away form that one and change the mouth shape to math the audio. Where the audio stops talking draw the mouth that is normal, or you can right click on the first frame of the mouth layer where the mouth was normal, and select copy frames, and paste that frame where the audio is speaking. Continue doing this for the rest of the audio file, changing the mouth shapes to match the words of the audio file. This is only your first attempt, so don’t be to worried about making it perfect. When you have got the mouth talking where the audio is speaking, delete the audio layer. That is it for your character, so click on scene 1 to go back to the main timeline. Here you will need to insert a layer named audio. Now repeat the same process as before to put your audio file on the frames. Now on the first frame of your character layer drag your character from the library and place him in the center of the stage. Insert a key frame on the character layer where the audio stops. Now you will have a character that appears to be talking, press ctrl enter and see how it looks. As I said, don’t be to stressed if it is a little sketchy, it all comes with practice.
Here is your first assignment, try and put all the things that you have learnt so far and put them all into the one flash project. This would include a motion tween, shape tween, a motion guide, a button to start the file, a walking person, and a person who talks.
This might help you to think of how you can combine these in to one.
Motion Tween: Create a sun that slowly goes across the stage.
Shape Tween: Could have your characters first name, than have it transform in to his/her last name.
Motion Guide: This could as simple as a bird flying around the scene.
I want you to have a play around with these things I have taught you and really get to understand the possibilities, when feel comfortable, come back and continue with the next tutorial.
Before we move on to the next tutorial we read through these tips.
Tip 1. It is a good idea to plan out your flash presentation first, get an idea of the layers that will be needed etc.
Why this helps: this will help you work through the flash file a lot quicker and easier; it also helps you organize it nice and neat.
Tip 2. Prepare the moviclips, buttons, graphics etc. before you start adding the animations or shape tweens etc.
Why this helps: This gets the designing process out of the way and makes it less confusing when adding the animations that are required.
Tip 3: Have each separate symbol on a different layer.
Why this helps: If the symbol is on a layer of it’s own, it makes it much easier to edit, or make any changes to it that are necessary, and as it is on a layer of its own, it won’t change anything on the other layers.
Tip 4: Take notes of some of the mistakes you make and how you fix these mistakes.
Why this helps: This will help you so much when creating flash projects, as you won’t make this mistake again, and if you do, you will know exactly how to fix it.
Tip 5: Experiment with things.
Why this helps: One of the best way to learn new things in flash is to experiment, try something different, this will improve the quality of the movie/game a lot.
Tip 6: Be creative.
Why this helps: The more creative the flash file is the more appealing it will be. Let you imagination go wild, add all types of this to make it fun and interesting.
Tip 7: Challenge yourself.
Why this helps: The only way you can better is by challenging yourself, do that little bit extra. This will also help you learn new things.
Flash 8 has so many possibilities, it would be near impossible to explain every detail about flash, so it helps to do a little bit of exploring for yourself.
Don’t be afraid to make mistakes, it’s all part of the learning process.
Make your character walk
Making a Walking Character
Okay let’s begin, we will start by making all the layers that we need, these are the layers that you will need, a layer named actions, button and character. On the actions layer right click on the first frame, select the option actions. This will bring up a screen where actions will be placed. This is what you need to put on the first line:
1.Stop();
What this does is stops the flash movie at this frame. The reason we have done this is because we want to put a button on this layer that will start the flash movie, and without writing stop(); the movie will continue playing without it stopping where the button is. Let’s start by making a button. On the first and only frame of the button layer, draw out a rectangle or an oval, now grab the text tool making sure the text is a different colour than the text, this can be changed via the properties inspector which was explained in a previous tutorial. Now change the text size to a size that will fit in the oval or rectangle, and write start in the text box. Now place this text on top of the circle or rectangle. Now select the whole button and convert it to a symbol. Now this time we are not going to convert it to a graphic, we will be converting it in to a button, give it the name start or whatever you will recognize it by. Now we must also add some simple actions to this button, to do this right click on the button, and select actions, now on the first line put in the following:
on (release) {
gotoAndPlay(2);
}
Here is what this will do:
On(release) = this means that it will do the actions when the mouse is clicked and released on the button.
{gotoAndPlay(2));
} = As this is in front of the on(release) it will when the button has been pressed go to the second keyframe represented by (2) and play from there.
Here is this code translated to English.
On(release) {
gotoAndPlay(2);
} “Actionscript”
When the mouse is clicker is (released) {go to the second keyframe and play it from there} “English”
Ok now let’s move on the character. Start by going to the menu item insert, than select new symbol. Check the box next to movieclip, than name it character.
Now up where it says scene 1, next to that, it will say character, what you have done is entered the characters timeline, which is where we will be creating the walk. To enter any symbols timeline, simply double click on it. Now back to where we were. On the first frame, draw out a very simple character, I suggest to start off with just a simple stick figure until be get the hang of creating the characters walk.
Now insert a new keyframe in the 3rd keyframe, in this third keyframe delete the legs and the legs only. You can do this by clicking on one of the legs, than by holding shift, click on the other leg as well, than delete them both at the same time, or just delete them separately. Okay, in frame 3 is what we want the character legs to look like when he is in the middle of his first step. What we want to do is turn on onion skin. Onion skin is located under the frames, you will see a few little icons, scan through them until you find onion skin, than click on it.
Now a faded picture of what the legs looked like on frame 1 will appear, this will help to keep the legs the same size and to figure out where to put these next legs.
Now imagine stand up and take a few steps, what you want to do is get a very basic idea of the way your legs move when you walk. You should only end up creating about 3-4 separate legs. It is a good idea to skip one frame when inserting a new keyframe so that the characters legs don’t move to fast.
Now when you have got the second pair of legs in, create another pair using the same process. Now when you have the walk ready, turn off onion skin by clicking on it again. Note: you want the legs on the last keyframe to look fairly similar to the legs on the first keyframe.
Now up where it says scene 1 and character, click on scene 1. This will take you back in to the main timeline. Now in the library you will see the movieclip character, click on it once, now a picture of you little man will appear in the library window, in the right corner of this window will be a play button, click on this, and your character will start the walk you made.
In the character layer insert a keyframe in frame 2, then drag your character into the second keyframe and position him off a bit to the right of the stage, make sure he his facing the left way, if not right click on him and select free transform. Now click an hold on the left box that appears around your and drag it to the right, this will flip your character around, similar to a mirror.
Now at frame twenty insert another keyframe in the character layer, in frame 20 drag your character off to the right of the stage, now create a motion tween.
That is it, press ctrl enter, the start button will come up on the screen, when you press on it, the movie will start. You are progressing really well, congratulations. Please move on to the next tutorial.
Okay let’s begin, we will start by making all the layers that we need, these are the layers that you will need, a layer named actions, button and character. On the actions layer right click on the first frame, select the option actions. This will bring up a screen where actions will be placed. This is what you need to put on the first line:
1.Stop();
What this does is stops the flash movie at this frame. The reason we have done this is because we want to put a button on this layer that will start the flash movie, and without writing stop(); the movie will continue playing without it stopping where the button is. Let’s start by making a button. On the first and only frame of the button layer, draw out a rectangle or an oval, now grab the text tool making sure the text is a different colour than the text, this can be changed via the properties inspector which was explained in a previous tutorial. Now change the text size to a size that will fit in the oval or rectangle, and write start in the text box. Now place this text on top of the circle or rectangle. Now select the whole button and convert it to a symbol. Now this time we are not going to convert it to a graphic, we will be converting it in to a button, give it the name start or whatever you will recognize it by. Now we must also add some simple actions to this button, to do this right click on the button, and select actions, now on the first line put in the following:
on (release) {
gotoAndPlay(2);
}
Here is what this will do:
On(release) = this means that it will do the actions when the mouse is clicked and released on the button.
{gotoAndPlay(2));
} = As this is in front of the on(release) it will when the button has been pressed go to the second keyframe represented by (2) and play from there.
Here is this code translated to English.
On(release) {
gotoAndPlay(2);
} “Actionscript”
When the mouse is clicker is (released) {go to the second keyframe and play it from there} “English”
Ok now let’s move on the character. Start by going to the menu item insert, than select new symbol. Check the box next to movieclip, than name it character.
Now up where it says scene 1, next to that, it will say character, what you have done is entered the characters timeline, which is where we will be creating the walk. To enter any symbols timeline, simply double click on it. Now back to where we were. On the first frame, draw out a very simple character, I suggest to start off with just a simple stick figure until be get the hang of creating the characters walk.
Now insert a new keyframe in the 3rd keyframe, in this third keyframe delete the legs and the legs only. You can do this by clicking on one of the legs, than by holding shift, click on the other leg as well, than delete them both at the same time, or just delete them separately. Okay, in frame 3 is what we want the character legs to look like when he is in the middle of his first step. What we want to do is turn on onion skin. Onion skin is located under the frames, you will see a few little icons, scan through them until you find onion skin, than click on it.
Now a faded picture of what the legs looked like on frame 1 will appear, this will help to keep the legs the same size and to figure out where to put these next legs.
Now imagine stand up and take a few steps, what you want to do is get a very basic idea of the way your legs move when you walk. You should only end up creating about 3-4 separate legs. It is a good idea to skip one frame when inserting a new keyframe so that the characters legs don’t move to fast.
Now when you have got the second pair of legs in, create another pair using the same process. Now when you have the walk ready, turn off onion skin by clicking on it again. Note: you want the legs on the last keyframe to look fairly similar to the legs on the first keyframe.
Now up where it says scene 1 and character, click on scene 1. This will take you back in to the main timeline. Now in the library you will see the movieclip character, click on it once, now a picture of you little man will appear in the library window, in the right corner of this window will be a play button, click on this, and your character will start the walk you made.
In the character layer insert a keyframe in frame 2, then drag your character into the second keyframe and position him off a bit to the right of the stage, make sure he his facing the left way, if not right click on him and select free transform. Now click an hold on the left box that appears around your and drag it to the right, this will flip your character around, similar to a mirror.
Now at frame twenty insert another keyframe in the character layer, in frame 20 drag your character off to the right of the stage, now create a motion tween.
That is it, press ctrl enter, the start button will come up on the screen, when you press on it, the movie will start. You are progressing really well, congratulations. Please move on to the next tutorial.
How to insert a motion guide
Motion Guides
Welcome to tut.4, this tut. is an expansion on motion tweening.
Motion guides can be very helpful in creating both flash games and especially flash movies.
Okay, let’s start. Rename layer 1 circle. In frame 1, draw a circle and convert it to a graphic naming it circle. Now insert a keyframe at frame 20. Note: you do not have to insert the keyframe where I have specified, this is just for the example. Say for example you inserted a key frame at frame 1000, the movie would go for 83 seconds, this is if the frames per second is set to 12, but at the same time, the animation would be very slow and rather boring. Now I haven’t mentioned anything about the frames per second yet, so let me quickly tell you what it is and what it does. Flash by default sets the frame rate to 12fps, this means that the movie/game will play 12 frame per second. To adjust the frame rate, double click on the box that says 12fps, which is located under the timeline. Now where it says frame rate, change it to what ever you want it to be, as long it is between 0.01 and 120. So obviously the higher the frame rate, the faster it plays through the frames. Okay, back to the tutorial.
Right click on the circle layer and select the option add motion guide, now above the circle layer a motion guide layer will appear.
On the first frame of the motion guide layer, select the pencil tool and draw out a line, make sure the lines do not overlap. This is the path that the circle will take.
Now, where all the tools are look for the symbol that is represented by a magnet, make sure this is selected, this will make is so the selected object will snap to other objects. Now click on the circle with the selection tool, a little white circle will appear in the centre of the circle, drag the object by clicking on that little white circle and place it at the beginning of the line where you want the object to start.
In the last frame, select the little white circle and drag it to the opposite end of the line (the other side from where you placed it in frame 1). Now click on any frame on the circle layer between frame 1 and 20 and create a motion tween. That is it; the circle will follow the line until it reaches the end. Note: While you are still making the game/movie, the line will be visible, pay no attention to it, as when you watch it via test movie or when it has been published it will not be visible. Okay, I just mentioned two new things, underneath is a overview on these things.
Make a shape tween
Shape Tweening
Welcome to the first tutorial on shape tweening. This is another very important thing to know, this can create great effects, and it is very easy to do basic ones with just text.
By now you should be familiar with inserting and naming layers, knowing what a keyframe is, what the stage is and how to create graphics, if not, take notes from the previous two tutorial.
Lets start by renaming layer 1 text. Now we will be using the brush tool in this tutorial. Start by selecting the brush tool, now down a bit from the brush tool you can change the size of the brush. Change the size to a reasonably small size, and brush shape to a circle. Now on the stage start by writing you first name, I will use flash as an example, now insert keyframe at frame 10. delete your first name at only frame 10 and write in you last name around the same position you first name was. Now click on any frame between 1 and 10 and open the property inspector. Now we haven’t used the property inspector yet, will be displayed at the bottom of the stage, at the bottom of the window there is a little arrow that points in the up direction, click on it and the property inspector will be displayed. You will see an option named tween, select it and choose shape. The frames in the timeline should turn a light green colour and an arrow will appear, just like a motion tween would look, only with the green colour as well.
Now hit the enter button, your first name will now transform in to your last name.
Now how easy was that. We will be using the property inspector very regularly as we progress through the tutorials, but for now let’s not worry about it to much.
As I say with all the other tutorials, if it doesn’t work try again, try pick out where you went wrong, this is a very useful skill.
Try expanding on this also, create a new layer, name it shape, and insert a key frame at frame 20. Draw a circle on the first keyframe, and on the 20th keyframe delete the circle and replace it with a square, now repeat the process of creating a shape tween. You will now have a circle transforming into a square, and your name transforming in to your last name.
Congratulations, you have completed this tutorial, now move on the next tutorial.
Two motion tweens
Creating Two Motion Tweens
Now, this is similar to creating one motion tween, only we will be creating a new layer also.
Lets start by double clicking on layer 1, name it circle. Now right click on this layer and select the option Insert Layer. Another layer named layer 2 will appear, double click on this layer and name it square. You should now have two layers, a circle and a square layer. The reason we need to create two layers is because we want to do two separate motion tweens, and if we only had one layer, the tween would be applied to both of the objects, it is important to understand this as later on you will be working with layers a lot. On the first keyframe (explained in tut.1) of the circle layer, select the oval tool, make it any colour and draw an oval on the stage (explained in tut.1).
Now on the keyframe of the Square layer, select the rectangle tool and draw a square on the stage, make the square a different colour from the circle.
Now that these are on different layers you can apply the motion tween to the separate object without messing up the objects motion tween. If the square layer is currently on top of the circle layer, you can change this simply by left clicking and holding on the layer and drag it to where you want it. Lets say the circle layer is above the square layer, this would meant that the circle on the stage will appear on top of the square.
Using the selection tool select the whole circle and convert it to a graphic giving it the name of circle (explained in tut.1). Now do the same with the Square only name it square.
Now insert a keyframe at 10 and 20 on both layers (explained in tut.1)
At frame 10 where the new keyframe is, move the circle or square to another place on the stage, do this to the other layer also.
Now create a motion tween between frame 1 and 10 on both layers, and insert another one between frame 10 and 20 on both layers.
Now hit the enter key, both the square and the circle will move to the set position on frame ten, and move back to there original position, if this did not happen, just re-read this tutorial and try again, you’ll get it. Congratulations, you have passed this tutorial, move on the next and start with that. Before you move on to the next I would just like to add something, if something goes wrong or doesn’t do what you wanted it to do, don’t be discouraged, it is so easy to make mistakes when using flash, that being said, it is also easy to fix these errors.
Note on this tutorial: try and insert more keyframes to add to the current animation, expand on it, create another layer and make more objects appear in the animation, this will help you greatly in your knowledge and skill.
Subscribe to:
Posts (Atom)