by kirupa |
19 February 2006In the
previous page,
I provided a brief overview of the design behind the animation. In the next few pages, we will
shift gears and focus on the code that runs the sliding effect.
Let's get started:
- b1.onRelease
= function()
{
- menuSlide(contentHold.content1);
- };
- b2.onRelease
= function()
{
- menuSlide(contentHold.content2);
- };
- b3.onRelease
= function()
{
- menuSlide(contentHold.content3);
- };
- b4.onRelease
= function()
{
- menuSlide(contentHold.content4);
- };
- b5.onRelease
= function()
{
- menuSlide(contentHold.content5);
- };
The above lines of code execute when any of our five buttons are clicked
because they are tied to the onRelease event handler. When a button is clicked,
you make a call to the menuSlide function. The menuSlide function takes in the
argument of a movie clip, and in our case, the movie clip our button is
associated with. For example, button b1 is associated with the content1 movie
clip located in our contentHold movie clip.
- var currentPosition:Number
= contentHold.content1._x;
- var startFlag:Boolean
= false;
The currentPosition variable stores the x position of the movie clip that is
currently displayed. Our initial position is the content1 movie clip's x
position because that is the default movie clip that displays when your
animation loads.
The startFlag variable stores a boolean value, true or false. When you click
on a button, the menu slides to a new location. If you happen to click on
another button while the menu is moving, nothing happens. Our startFlag value,
as you will later see, ensures that you do not change the final destination
while our menu is moving.
- menuSlide =
function (input:MovieClip)
{
The menuSlide function is responsible for actually moving our menu. It takes
a movie clip object as its argument, and it references that movie clip object as
the variable input.
- if (startFlag
== false)
{
In the menuSlide function, I immediately check to see whether the startFlag
value is set to false. If our startFlag variable is not set to false, that means
our menu is still moving.
If our startFlag is set to False, the rest of our code executes.
- startFlag =
true;
I now set the value of startFlag to true. This means that we are in the
process of moving the slider and that it is too late to change your final
destination.
- var finalDestination:Number
= input._x;
- var distanceMoved:Number
= 0;
- var distanceToMove:Number
= Math.abs(finalDestination-currentPosition);
- var finalSpeed:Number
= .3;
- var currentSpeed:Number
= 0;
- var dir:Number
= 1;
The above six lines are variable declarations. The finalDestination variable
stores the final destination of our movie clip. The distanceMoved variable is a
counter that increments each time our menu actually moves.
The distanceToMove variable gets the magnitude of the distance you need to
travel. I subtract our finalDestination value with our currentPosition value.
That ensures we have a positive number representing the total distance we have
to travel.
The finalSpeed variable stores the maximum speed our menu moves. The
speed should be between 0 and 1. The currentSpeed variable stores the speed your
movie is currently moving in, and the dir variable is stores the direction your
menu should slide.
All of these variables are only declared and initialized here. When your menu
is sliding, most of the variables will change their values.
- if (currentPosition<=finalDestination)
{
- dir =
-1;
- } else
if (currentPosition>finalDestination)
{
- dir =
1;
- }
These lines are fairly straightforward. I check to see if where I need to go
is to the left of where I am now or to the right of where I am now. The dir
variable stores either a negative 1 or a positive depending on the answer to my
question.
I can use the dir value to determine the direction my menu moves easily. For
example, instead of having separate this._x +=5 or this._x -= 5 statements, I
can cleanly write this._x += dir*5. When dir is 1, I am either moving right by
5, and when dir is -1, I am moving left by 5.
Onwards to the
next page!
|