In order to create a fluid and elegant site, transitions
between information need to be non-linear. Unfortunately,
a timeline is linear. To get around this problem we use
actionscript, and this tutorial will show you a method that
works in both Flash 5 and Flash MX.
There are four parts to this tutorial. Each section builds
on the previous one. What you're going to be dealing with
is what's often referred to as a scripted motion tween.
I'll take you through stage by stage, finishing with an
effective method of creating a scripted shape tween. I've
written the examples here hoping that you'll want to expand
on them for your own projects, and I've left as much room
for that as I can. I will be assuming you have some prior
knowledge of the Flash authoring environment, and I'll be
concentrating on actionscript.
Note: Throughout this tutorial I have repeated
frame labels and variable names. This can lead to confusion
and is not considered good practise. I have done so here
to emphasise similarities between the actionscript you are
using, but you should avoid emulating this in your own projects.
On your first layer, you need a movie clip, give it the
instance name pages. Position the top left of this movie
clip at 50.0x and 25.0y
This movie clip should contain three more movie clips.
These need the instance names pageOne, pageTwo and pageThree.
They should each have a y co-ordinate of 0.0 and x co-ordinates
of 0.0, 220.0 and 440.0 respectively.
Now create a movie clip that contains a rectangle (x co-ordinate
of 0.0 and y co-ordinate of 0.0) and place an instance of
this clip inside pageOne, pageTwo and pageThree. Give each
instance the instance name page. Give it an x co-ordinate
of 0.0 and a y co-ordinate of 0.0. Also I've placed text
inside each of the pages to make them unique. This is where
you would place your content.
Note: Positioning the objects in the movie
is important because Flash assumes numbers in the script
relating to _x and _y refer to the centre point of the object.
Note: It's permissible to name three instances
of the same movie clip identically only because they exist
on separate timelines. Normally instances should possess
unique instance names.
On the main timeline, on the second layer, create a button,
and place three instances of it on this layer.
Create a movie clip, and place it on the third layer. Give
this movie clip the instance name of controlMC. Inside there
needs to be two layers, the top one called script, the bottom
one called labels.
On the labels layer, place a keyframe on frames 2,3 and
4. In the frame panel label these one, two and three respectively.
On the script layer you need keyframes on frames 1,2,3 and
4. On these frames place the following script:
Key Frame 1:
stop();
Key Frame 2:
//This is the variable that sets the destination
of our change
_root.pagesTargetX = 50;
//This sends the appropriate MC into action
_root.motionScript.gotoAndPlay ("change");
Key Frame 3:
//This is the variable that sets the destination
of our change
_root.pagesTargetX = -170;
//This sends the appropriate MC into action
_root.motionScript.gotoAndPlay ("change");
Key Frame 4:
//This is the variable that sets the destination
of our change
_root.pagesTargetX = -390;
//This sends the appropriate MC into action
_root.motionScript.gotoAndPlay ("change");
This movie clip, as the name suggests, is to control the
actions of our whole movie. Because each frame is essentially
the same I'll just explain one. The first frame sets the
variable pagesTargetX on the main timeline to the number
you enter (On key frame 2 I used 50). The second line sends
the movie clip with the instance name motionScript (Don't
worry, you haven't missed anything, I'm leaving that to
last.) to the frame with the label change. The stop action
on the first frame stops the movie clip from playing as
soon as it loads.
Tip: I always place movie clips with no visible
content at the 0.0, 0.0 position on the main time line so
I know where to find them.
Now on the main timeline, place the following code on your
buttons, as you can see each button is scripted to send
the controlMC to the correct frame:
Button 1:
on(press){
controlMc.gotoAndStop ("one");
}
Button 2:
on(press){
controlMC.gotoAndStop ("two");
}
Button 3:
on(press){
controlMC.gotoAndStop ("three");
}
One last task; create another movie clip and place it on
the top layer, in the giving it the instance name motionScript.
This is the movie clip that's going hold your main script.
It needs two layers. The top one is script and the bottom
is labels. On the labels layer at key frame 2 place the
label change. On the script layer you need key frames at
positions 1,2 and 3. Here's the script:
Key Frame 1:
stop();
Again this is to stop the movie clip playing as soon as
it loads.
Key Frame 2:
//This controls the x position of the pages
gap = _root.pagesTargetX - _root.pages._x;
_root.pages._x = _root.pages._x + (gap / 3);
As usual, the code itself is less confusing, but here it
is in layman's terms: Get the x position of the movieclip
called pages that's on the main time line and subtract it
from the variable that's called pagesTargetX that's on the
main timeline. Divide the result of that sum by three and
add it to the x position of the pages movie clip that's
on the main timeline, move the pages movie clip that's on
the main time line to the x position that equates to this
result.
In the second line of this script is the number 3. You
can change this number to anything you like. Higher is slows
down the tween, lower speeds it up, 1 would make the change
instantaneous.
Key Frame 3:
gotoAndPlay ("change");
This sends the frame head back to frame two to run the
script again.
And that's the end of step one. Test your movie, and click
those buttons.
