Shaky Flash Menu with ActionScript 3

This tutorial will teach you how to create a cool looking shaky menu with ActionScript 3. All the animation is done with ActionScript, so no timeline animation is needed. Check out the end result!

Get TweenMax

We will use TweenMax for the animation of the menu items. Therefore, download TweenMax for AS3. TweenMax will save us a lot of time from coding the animation ourselves! Save the “gs” folder to the same location where your .fla file will be located.

New Document

Start your Flash and create a new Flash ActionScript 3 document.

Flash Document Properties

Set the following document properties.
width: 400px
height: 100px
background color: black
frame rate: 30

Menu Rectangle Shape (...)

Drawing Line Art in Flash

If you're a dab hand with the mouse, you could always draw your artwork straight off onto the screen, but most of us mortals are going to need a picture to work with as a base. If your creative skills leave a little to be desired, or you're new to working this way, it can be easier to use well drawn artwork by an established artist. Screenshots are also a good idea. Or of course you can sketch something yourself. Whichever way you choose, all you'll need is a .gif or .jpg that you can import into Flash and size up to the movie dimensions. 

Below is an image that I've scanned in, and this is the one that I'll be demonstrating with in the tutorial. Feel free to download it to experiment with.

 [ original art ]

Once you've chosen your starting picture, import it into Flash, place it on Layer 1 and lock it. Create a new layer just above it - this is the one we will start drawing on. Depending on your drawing skills, you can either draw freehand or with the line tool. Anime artwork especially is generally composed of a lot of curves, and I find that to get the quality of these with the pencil is very difficult. Having said this, there are times when you find that lines won't cut it, and you just have to use the pencil. If you do, I recommend clicking on the smooth or ink options first. The smoothing effect that you will get depends on the magnification. Too far out and it may smooth over too much, and you won't get the line that you need. Play around with the zoom to get an idea of how it changes your lines. Ink allows those of you with very precise drawing techniques to get exactly the line you have drawn.
Now we are ready to begin drawing. I always draw two sets of lines - one for all the major outlines, and one for minor guides. The major lines (which we will draw first) define the general shape of the image. Minor lines act as a reference for colour and shading.