Flash Animation Tutorial – How to Use Animation on Your Flash Website


This tutorial is all about animation in Flash. Animation is one of the core elements of Flash. In fact animation is the very reason Flash was originally created. In Flash animation is extremely easy and a very powerful way to create a flash website.  For anyone willing to learn flash, this is the one thing they must know. This tutorial covers the elementary animation techniques in Flash at the absolutely beginner level.

Before I begin, if you want a very easy way out of this Flash tutorial, you can make a free website with Wix that will have mind-blowing animation. Now for those of you who are still interested in reading the tutorial, I will continue.

If you have ever made a flipping page animation as a child where you draw several consecutive pictures in a book and then flip the pages very fast to see the images in motion then that is pretty similar to how animation works in Flash. You draw different pictures on different pages, called frames, in flash and then the flash plays them consecutively to show the images in motion.

Well I hope you have understood the logic of animation, now let us see this in action. It is best if you follow along with me. Fire up Flash on your computer. I am using the CS5 version but you can use any version for animation.  When the flash runs, you are shown a splash page to choose the document you want to open, you can choose either “Action Script 3.0” or “Action Script 2.0”.

Now you will see a white area in the screen. This white area is called the stage and you do all the animation on the stage. Objects outside the stage do not appear in the final animation. The first thing to do before animation is to set you stage dimensions. Press the keyboard shortcut “Ctrl+J” and you will see dialogue box open up, you can set your stage dimensions here and press OK.

Now you need to open the timeline. Press the keyboard shortcut  “Ctrl+Alt+T” to open up the timeline. The timeline is where you control all the flow of your animation. The little white rectangles you see in the timeline are the frames which I told you about earlier. You can draw on these frames and then run them back to back.

Right now we are on frame 1. Choose any tool from the right like pencil tool, brush tool or rectangle and draw something on frame 1. Now press F6 to go to the next frame. Keep drawing like this on frames and keep pressing F6 to add new frames. You will see the frames grow in the timeline.

When You think you have drawn enough then press “Ctrl+ENTER” and you will see your images running consecutively in Flash. Congratulations, you have made your first animation in Flash. But this was very basic, lets move to something advanced now. Flash has a very special thing called “tweening”. Tween is a word derived from the word “between”. So, in tweening you only tell Flash the first and last frames of an animation and Flash would create the frames in between for you. Create a new Flash document as you did the last time and draw a circle on the first frame.

Now click on some other frame, lets say 10, on the timeline and press F6. This will create a new frame on the frame 10 and leave the frames in between the same as frame 1. Now move the circle on frame 10 to some other position. Right click on any frame in between frames 1 and 10 and click on “create shape tween”.

You will see the frames in between turn to green, this means that shape tween has been applied.

Now press  “Ctrl+ENTER” to test your movie and you will see the circle move from the position in frame 1 to the position in frame 10 automatically.

Now to make the world see your work, you have to publish your animation. To publish,  go to “File>Publish Settings” in the menu. Now you would see various publishing options, for now you can choose the swf and the exe formats. Select the two and click on the publish button. The published files will become available in the same folder where you have saved your flash document.

Now its your time to experience and experiment. Try to change other things like color of objects and size of objects in tweening and see how Flash handles them . With time you will become experienced. You can use a combination of tweening and simple frame by frame animation to create short animations.  Stay creative and original, and enjoy yourself animating.

Don’t forget, if Flash is  just too complicated for you, then you can always use a free drag and drop site builder from Wix, which allows you to create a professional flash website for free.

Recommended for you:

Leave a Reply

Your email address will not be published. Required fields are marked *