Sliding-Page Effect - Navigation in Flash

The other thing that http://www.fuelfugitives.com/ got me interested in was the way the navigation works. The wonder of Flash is that you don't load a new "page" when you click a "link" (or button). In fact anything can happen - make a noise, play a video, basically anything you can imagine and code. This means we are not constrained to the traditional ideas of navigation transitions from "page" to "page".

Fuel Fugitives utilises a nice idea I have seen a few times. Instead of simply changing to another "page" or screen, you slide gracefully from one place to another, as though all the "pages" are actually on the same sheet, you just change which part of the sheet you are looking at.

Well, unable to resist the challenge I decided to work out a way of getting the same effect myself, using Flash and AS2.

Let's get started

1. Create a new Actionscript 2 document and set the frame rate to 30fps.

2. Create an object on the stage, hit F8 and convert it into a MovieClip, with the registration set to the middle.

3. Create 3 more instances of the MovieClip (for a total of 4), space them out, and give them the instance names object1_mc, object2_mc, object3_mc, and object4_mc.

4. Select (using SHIFT) all of the instances of the MovieClip on the stage, then hit F8 and convert the group into a MovieClip with the registration set to the top left. This new MovieClip should contain all the other clips on the stage. Give this new MovieClip the instance name objholder_mc.

Once that's done it's time for the Actionscript.

The Actionscript

/* First we set a variable called currobj. This will store the name (or in this case number) of the movieclip we want centred on the stage. We will use it later to centre that movieclip if it is not already centred. */

var currobj = 1;

/* Now we need some easing to give the slide animation a bit of style */
var easing = 6;

/* Then we set variables to define the centrepoint we want to centre movieclips to. */

var hmiddle = Stage.width/2;
var vmiddle = Stage.height/2;

/* Then we create the function that moves the current movieclip (defined by currobj) to the centre (defined by hmiddle and vmiddle). */

onEnterFrame = function () {

/* Finding the difference between the object holder x and y and the centre x and y */
objh_v = _root.objholder_mc._y;
objh_h = _root.objholder_mc._x;
vdiff = vmiddle-objh_v;
hdiff = hmiddle-objh_h;

/* Finding the object x and y within object holder. By using the ["object"+currobj+"_mc"] the code works for every object, all we need to do is update the value of the currobj variable. This means that we can keep our code small and reusable. */

obj_h = _root.objholder_mc["object"+currobj+"_mc"]._x;
obj_v = _root.objholder_mc["object"+currobj+"_mc"]._y;

/* Finding the difference between the current object (currobj) x and y and the centre x and y */

finalvdiff = vdiff-obj_v;
finalhdiff = hdiff-obj_h;

/* Finally we get onto the animation. This basically tells the objholder x and y to move so that the currobj MovieClip inside objholder is centred. All the calculations up to now allowed us to find out exactly where objholder needed to move to for this to happen. So that we get the easing effect on the animation, objholder only moves just under half the actual distance to its destination on each frame (this is controlled by the easing variable). */

_root.objholder_mc._y += finalvdiff/easing;
_root.objholder_mc._x += finalhdiff/easing;
};

/* Making the objects act as links to the next object. I am working on a way to write this code only once for any number of objects, on the basis of telling Flash the total number of objects, but not there yet. meanwhile we need a function for each object manually telling it to go to the next by setting the currobj value to the next object. */

_root.objholder_mc.object1_mc.onPress = function () {
currobj = 2;
};
_root.objholder_mc.object2_mc.onPress = function () {
currobj = 3;
};
_root.objholder_mc.object3_mc.onPress = function () {
currobj = 4;
};
_root.objholder_mc.object4_mc.onPress = function () {
currobj = 1;
};

Over to you...

As you can see, the code is fairly straightforward (hopefully the comments explain how it works). But so far all we have is the mechanics, to be really effective you need to have good graphics to go with it. A good idea!

That's what Fuel Fugitives has, now over to you.