Now I want to show you an array. Put
simply, an array is something that you
use to hold and retrieve data. In this
tutorial, we will use arrays to hold
the different positions we want our clips
to scroll to. Here's an example.
anArray=new Array("hi","how","are","you","?",24,57);
As you can see, an array can hold different
datatypes - including strings (text)
and numbers.
To access an "element" from
an array we use something like this -
anArray[3];
This would return the string - you.
This is because the first element of
an array has an "index" of
0 (zero).
Make sense? If it doesn't, hopefully
it will soon.
Let's make a couple of arrays to store
the x and y positions we want our content1
clip to scroll to.
Add this code underneath the prototype
that is alrready in frame 1 of the actions
layer.
stop();
//set the starting value of a variable
arrayIndex = 0;
//make a couple of arrays to hold the
x and y positions for our clip
content1Xpositions = new Array(305,250);
content1Ypositions = new Array(180,250);
//set the scrolling animation for the
content1 mc
content1.onEnterFrame = function() {
this.scrollme(content1Xpositions[arrayIndex],
content1Ypositions[arrayIndex]);
};
Let's go through that bit by bit. First
we stop the main timeline. Then we set
a variable that we will use to tell flash
which element of our our array we want
it to access when working our where to
scroll our clip to. I should point out
that I would normally use much shorter
array and variable names but I wanted
to try and make this as clear as possible.
Next let's make a couple of arrays to
store our scroll to positions. You will
notice that I have entered a couple of
elements for each array - this was because
Flash acted all stupid when I only had
one element for each - not going to waste
any more time trying to figure out why
(took me long enough just to work out
what was causing the problem). Anway
for now we will just be using the first
elements of the arrays.
Then we set the scrolling animation
for the content1 mc. Let's look at this
line closely.
this.scrollme(content1Xpositions[arrayIndex],
content1Ypositions[arrayIndex]);
As you can see when we call our prototype
we have to provide 2 parameters - the
target x position and the target y position.
The line in green is exactly the same
as saying
this.scrollme(305,
180);
but by storing the data in an array
we can easily change the target scroll
to positions for all our clips. For example,
all we need to do is change arrayIndex
to equal 1 and our scrolling code updates
itself to become
this.scrollme(250,
250);
This is because
content1Xpositions[arrayIndex]
is the same as
content1Xpositions[1]
which equals
250
All clear?
|
| When you have all your x
and y data your simply enter the values
into the appropriate array. We will be
making 2 arrays for each mc (one for x
and one for y) and you need to make sure
that you enter all the data in the right
order. For example, if we wanted to scroll
our content1 mc to a x position of 50 and
a y position of 75 and we set our arrays
up like so
content1Xpositions
= new Array(50,567);
content1Ypositions = new Array(978,75);
Then it wouldn't work. This is particularly
important when we have multiple scrolling
mcs and a heap of arrays - enter your
values in the right order!!
The buttons in the butMC will be used
to change the value of our arrayIndex
variable.
Remove all the actions that are current
on frame 1 of the actions layer and paste
these in -
//code by Billy
T
//feel free to steal it, plagiarise it,
claim it as your own or whatever...
//this is a prototype to smoothly scroll
a clip to a certain position
//the parameters within the ( ) must
be provided when calling the prototype
Movieclip.prototype.scrollme = function(xPos,
yPos) {
//this get the current X position of
the clip calling the function
cX = this._x;
//this works out the distance between
its current X position and where it has
to go
difX = cX-xPos;
//this sets the new X position of the
clip
//in this example, the clip moves 1/5th
of the total distance every frame
//because the total distance will get
smaller every frame, so will the speed
of the movement
this._x = cX-(difX/5);
//the actions below do the same as the
ones above except along the y axis
cY = this._y;
difY = cY-yPos;
this._y = cY-(difY/5);
};
stop();
//set the starting value of a variable
arrayIndex = 0;
//make a couple of arrays to hold the
x and y positions for our clip
content1Xpositions = new Array(200,196,276,305,253);
content1Ypositions = new Array(180,270,133,290,192);
//more arrays
wideXpositions=new Array(180,220,292,277,125);
wideYpositions=new Array(282,164,239,159,296);
tallXpositions=new Array(307,85,158,48,362);
tallYpositions=new Array(206,295,163,140,290);
butXpositions=new Array(207,250,263,260,149);
butYpositions=new Array(84,370,287,33,96);
//set the scrolling animation for the
mcs
content1.onEnterFrame = function() {
this.scrollme(content1Xpositions[arrayIndex],
content1Ypositions[arrayIndex]);
};
wide.onEnterFrame = function() {
this.scrollme(wideXpositions[arrayIndex],
wideYpositions[arrayIndex]);
};
tall.onEnterFrame = function() {
this.scrollme(tallXpositions[arrayIndex],
tallYpositions[arrayIndex]);
};
butMC.onEnterFrame = function() {
this.scrollme(butXpositions[arrayIndex],
butYpositions[arrayIndex]);
};
//set the button actions
butMC.but1.onRelease=function(){
arrayIndex=1;
}
butMC.but2.onRelease=function(){
arrayIndex=2;
}
butMC.but3.onRelease=function(){
arrayIndex=3;
}
butMC.but4.onRelease=function(){
arrayIndex=4;
}
|
