Monday, June 8, 2009

Flash Tweening

The term "Tweening" is derived from "in between".

Sometimes you want to add an effect that is graduated over several frames.

For example, moving a car from the left side of the movie to the right side.

Instead of moving the car a little bit on each frame, you can simply:
  • position the car on the first frame,

  • then insert a keyframe where the car should stop

  • and finally tell Flash to tween between the two keyframes.

Tweening simply means going from one keyframe to another while taking small steps for each of the ordinary frames in between.

In this tutorial you can learn to make:
  • Motion Guide Tweenings

    (Moving objects from A to B along a customized path)

  • Tint Tweenings

    (Graduated color changing of an object.)

  • Shape Tweenings

    (Graduated change of one object into another)

Flash Buttons

The only object type in Flash, that can detect mouse events is the Button object.

This means that there is only one way to make buttons with Flash: Creating a button object.

This may sound a bit too simplified, but many are confused by the techniques behind the more sophisticated buttons, that we will cover later in this tutorial.

Creating a button that changes upon mouseover-events is extremely simple. All you really have to do is to tell Flash how you want the button to look 1) in normal state, 2) when the mouse moves over the button and 3) when the user clicks the button.

Once you've learned this 3-step technique you can create buttons in seconds.

However, the buttons you create this way are: simple (that's why they're so easy to make anyway).

If you want to create really fancy buttons you should use a slightly different technique based on movie clips.


Flash handles three types of objects:
  • Graphics

  • Buttons

  • Movieclips

Graphics objects
You probably allready noticed that when you edit Graphics objects you have the entire timeline available for it.
This means that Graphics objects aren't limited to static elements. You can easily create looping animations - simply by creating Graphic objects that uses more than one frame in the timeline.

Button objects
Buttons are different from this. When you create a Button object you only have four frames in the timeline.

One is for drawing the button in normal state.

Another is for drawing the button when a mouse-over is detected.

The third is for drawing the button as you want it to look when the user clicks the button.

The last frame is used to specify which area you want mouse events to react to. That is: you can create a button that only reacts to mouseevents on certain areas of the drawing, - like the center of the button for example.

Movie clip objects
The final object-type: Movieclips, is similar to Graphics objects - on the surface.

In both cases you can create entire animations that can be dragged onto your main movie. But while animations made as Graphics objects simply loops over and over you can control the Movieclips completely.


You can create more fancy buttons based on very simple programming. (You do not have to be a programmer to learn to do this!).

Actions added to frames give complete access to controlling movieclips. This means that you can use "Play", "Stop", and "Goto Frame" commands on a movieclip, that is triggered when a certain mouse event is detected on a button.

Now - if the button is invisible and placed on top of the movie clip it will work as if the movieclip itself was able to detect mouse events.

The next pages will teach you - step by step - how to create both simple and advanced buttons.

Flash Introduction

The drawing tools in Flash let you create and modify shapes for the artwork in your movies. For an interactive introduction to drawing in Flash, choose Help > Lessons > Drawing in your Flash program.

The tools for painting are kept in the "Tools" bar, usually positioned at the left top of your Flash Screen.

Flash Drawing Toolbar.

On the following pages we will guide you through the use of each of these tools, starting with the simplest.

But before going through the different tools, we will look at the way Flash handle drawings.

The most important thing to understand is the distinction between outlines and fills.

When you draw a line there is no fill - only the outline.

When you draw a rectangle (or a circle) you actually draw two things: The outline (border) and the fill. Unlike most other programs, Flash doesn't automatically combine these two into one object.