You're almost there. With any luck, by this stage, you've
a solid grasp of the process and you understand how the
scripts in the movie are interacting with the movie clips.
So, it's time to get a bit more complicated. The next section
deals with a scripted shape tween as opposed to a scripted
motion tween, but you can't use the same script as you have
up until now.
You can use the processes I've covered so far to alter
any of the movieclip's properties that can be written as
well as read, with the exception of _visible, (O.K., you
can, but it's pointless because _visible can only be true
or false, in place of it, we use _alpha). Motion tweens
don't alter a movie clip, they alter the way it's displayed,
scale, position etc. If you wanted to change it's shape
you would have to use a shape tween. Usually, this would
prevent the fluid and elegant transitions that you're trying
to achieve, but this section will show you how to solve
that. Before we start, I should state that what follows
is not nearly as malleable as what we've covered so far,
but it is very effective.
There's only one obstacle in your way. Unfortunately it's
a major one. movie clip properties such as _x and _alpha
can be written as well as read because it's possible to
have fractions. For example:
MC._x = MC._x / 2;
will function correctly, even if MC._x starts as 3. You
can't do that with the _currentFrame property, firstly,
because it's read only (you could get around that) and secondly,
time lines only have whole numbers as frames. You cannot
have frame 1.5, and I'm sorry if I'm ruining anyone's fantasies
here, but the mythical frame number 0 does not exist either.
Fortunately there's a simple solution to the problem: Math.floor()
Math.floor() is an actionscript method that rounds a number
down to the nearest whole number. So for example the code:
gap = Math.floor(1.9);
would set the variable gap to 1. That's the fraction problem
sorted out. Here's what you're going to build:
So, let's get on with it. Remember that page movie clip
with a square in it? You need to turn it into a shape tween.
Create key frames at frames 1, 5, 196 and frames at 197,
198, 199 and 200. With this shape tween it's best to use
a lot of frames because it will produce a smoother animation.
Alter the shape of the rectangle at positions 1 and 5. (I've
rounded the corners.) Make sure they're identical, and that
the change requires a shape tween (If you just alter the
scale you may as well use the methods we've already covered).
Key frame 196 and the frames 197, 198, 199 and 200 have
the same rectangle that you started with. Now create a shape
tween between key frame 5 and key frame 196. I'll explain
why you need 5 identical frames at the beginning and end
of the tween in a minute.
Tip: If you're going to round the corners
as in the example, you'll need to use shape hints.
Add a stop action on frame one to stop the movie clip playing
as soon as it loads:
stop();
O.K. back to scripting so open up the controlMC movie clip
and alter the code to match the following:
Key Frame 2 :
//These are the variables that set the destination
of our changes
_root.pagesTargetX = 50;
_root.buttonsTargetX = 130;
_root.pageOneAlpha = 100;
_root.pageTwoAlpha = 50;
_root.pageThreeAlpha = 50;
_root.pageOneShape = 200;
_root.pageTwoShape = 1;
_root.pageThreeShape = 1;
//This sends the appropriate MC into action
_root.motionScript.gotoAndPlay ("change");
_root.shapeScript.gotoAndPlay ("change");
Key Frame 3:
//These are the variables that set the destination
of our changes
_root.pagesTargetX = -170;
_root.buttonsTargetX = 80;
_root.pageOneAlpha = 50;
_root.pageTwoAlpha = 100;
_root.pageThreeAlpha = 50;
_root.pageOneShape = 1;
_root.pageTwoShape = 200;
_root.pageThreeShape = 1;
//This sends the appropriate MC into action
_root.motionScript.gotoAndPlay ("change");
_root.shapeScript.gotoAndPlay ("change");
Key Frame 4:
//These are the variables that set the destination
of our changes
_root.pagesTargetX = -390;
_root.buttonsTargetX = 30;
_root.pageOneAlpha = 50;
_root.pageTwoAlpha = 50;
_root.pageThreeAlpha = 100;
_root.pageOneShape = 1;
_root.pageTwoShape = 1;
_root.pageThreeShape = 200;
//This sends the appropriate MC into action
_root.motionScript.gotoAndPlay ("change");
_root.shapeScript.gotoAndPlay ("change");
Simply, what you've done, is add yet more variables, and
added another line to send the shapeScript movie clip you're
about to build to the frame labelled change as well as the
motionScript movie clip.
Note: In the same way that you can name different
instances the same as each other you can also do it with
labels, only if they're on different timelines.
Note: Whilst it's not strictly necessary I've
separated the motionScript movie clip and the shapeScript
to enable you to develop the movie as far as possible. You
could for example dynamically load the content of the pages
and only bring in the shape tween after the content has
loaded.
On the main timeline, create a new layer, and on it place
a new movie clip. Give this movie clip the instance name
shapeScript. The structure is identical to the motionScript
movie clip. You need two layers, the bottom one being labels
the top one being script. The second frame of the labels
layer needs to be labelled change.
On the script layer this is the code you need to write:
Key Frame 1:
stop ();
Once again this stops the movie clip playing as soon as
it loads.
It looks a bit complicated but it isn't. Here's what it
says in layman's terms:
If the variable pageOneShape that's on the main time line
is greater than the current frame position of the page movie
clip that's inside the pageOne movie clip, that's inside
the pages movie clip, that's on the main timeline, then
continue with this code: Subtract the current frame position
of page from the pageOneShape variable, and divide the result
by 5. Now add the current frame position of the page movie
clip and round the result down to the nearest whole number.
Send the page movieclip to the frame number that equates
to this result and stop the frame head when it gets there.
If the variable pageOneShape that's on the main time line
is less than the current frame position of the page movie
clip that's inside the pageOne movie clip, that's inside
the pages movie clip, that's on the main timeline, then
continue with this code: Subtract the pageOneShape variable
from current frame position of page, and divide the result
by 5. Now subtract the result from the current frame position
of the page movie clip rounding down to the nearest whole
number. Send the page movieclip to the frame number that
equates to this result and stop the frame head when it gets
there.
This is why we have five frames identical at the beginning
and end of our hand-made shape tween. Because we can't garuntee
that the number of the variable movePos will reach the point
we've asked it to (It may for example reach 199.9 and then
get rounded down to 199). The five frames act as a buffer,
to ensure that even if the playhead does not reach 200,
the shape tween will reach it's conclusion visually. If
you wanted to speed up the shape tween by dividing by 4
instead of 5, you would only require a buffer of 4 frames
at each end of the tween.
That sorts out the tween for pageOne, below that code,
you do the same thing for pageTwo and pageThree, like this:
