Document setup

Arrays

Actions explained

Movie clip setup

Positioning

Actions explained

OK this is the movie you will be making.



Start by loading Flash MX. Open the document properties window and set the stage size to 400X400, the background colour to dark grey and the frame rate to 21. Name the one and only layer "actions" and paste this action into the first frame.

//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);
};

Have a read of the comments after you paste it into Flash. You will soon see how it all works.

Make a new layer and name it "content". Draw a 150X150 rectangle and convert it to a movieclip. Make sure the registration point is set to the center and name it "content1MC". Click OK and then give it an instance name of "content1" (obviously, without the ""). Double click on the content1 mc to go inside it and type content1 on top of it to make it easy to identify. Go back to the main timeline.

  ';

OK 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.

OK lets 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.

OK then we 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?

Let's move on. Select the content layer and draw another rectangle that is 50X200. Convert it to a movieclip and name it tallMC - give it an instance name of "tall". Copy and paste another instance of this mc and change its instance name to "wide". Rotate the wide instance 90 degrees so it is actually wide. Draw another rectangle that is 250X30. Convert it to a movieclip, name it butMC and click ok. Give it an instance name of butMC. It is extremely important that you give your clips exactly the same instance names as I have - so don't use "butmc" or "but MC" - OK? :)

Now double click on the butMC to go inside it. Make a new layer and draw a small circle. Convert the circle to a button and name it buttonTemplate. Give it an instance name of but1. Double click on but1 to go inside it and change the circle colours for the over and down states. Make your way back to inside the butMC



and drag out 3 copies of the buttonTemplate - change the instance names of the copies to but2,but3, and but4.

Now would be a good time to save your file if you haven't already done so.

OK so now all our mcs are set up we need to work our where we want them scroll to. To do this, move the mcs on the stage around until you have an arrangement you are happy with - when you have one, make a note of the x and y positions of each clip in the info panel. Make sure that you are getting the info for the center of the mc and not the top-left corner.



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!!

OK. 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 -


//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;
}

Ouch. That's a lot of actions. Don't be scared though - it's really just an expansion of what we have already covered. I mean it - stop crying :)

Let's go through it all quickly. At the top you see our scrolling prototype. Then we set the starting value of a our arrayIndex variable. Then we have a bunch of arrays. You will see that each array has 5 elements - one for the starting value and the others to be accessed when a certain button is clicked.

After that we have our code to scroll the different mcs. These just call our scrolling prototype and get data from the arrays to use as its parameters.

Then we set the actions for the buttons - these are pretty self-explanatory. They just change the value of our arrayIndex variable and force the mc's to access a different element of the arrays to get their parameters for the scrolling code. Obviously you could add extra code to the buttons to tell the various mcs to go to another frame or whatever.

Test your movie. It should look like the one seen at the top of this tute. If it doesn't then I'm sorry ;)

You can download the source file from this tute here.