Alfred Fayek

I am sure I will fill this up one day

View all articles by Alfred Fayek

DOH, what is this?? I can hear you saying that this can be done with frames and a couple of buttons. Yes, but wait and let's move to the dynamic parts, the easing and the trasition parts.

The Easing:

In its simplest discription, the easing in the calculation of the 'new property' minus the 'old property' devided by the 'easing factor' and the old property needs to be calculated untill the 'new' and 'old' properties are equal.

So, in our example we do have all the pictures in a long row, all of them are 320 pixel wide and the first one starts at _x=0 and the next one is of course at 320, then 640, 960,....

Let's make an example for navigating the 4th picture which it resides at _x=960 within the pictures holder movie, the script would look like:

thePixHolder._x +=( theNewXPosition - thePixHolder._x) / easingAmount

and in Numbers

thePixHolder._x += (960-0)/10

this is easy enough, but as mentioned the 'thePixHolder._x' needs to be calculated untill the 'new' and 'old' properties are equal, so it's needed to be within an onEnterFrame statment. And the new script would look like:

speed = 10
theButton4.onRelease = function() {
        _level0.theTgt = 960;
};
theButton4.onEnterFrame = function() {
        _level0.thePix_mc._x += (_level0.theTgt-_level0.thePix_mc._x)/_level0.speed;
};

and the swf will look like this:

and the added script within the for loop just after the onRelease statment:

_level0["the"+i+"_btn"].onEnterFrame = function() {
        _level0.thePix_mc.panorama_mc._x += (_level0.theTgt-_level0.thePix_mc.panorama_mc._x)/_level0.speed;
};

Now for the transition thing, we need to:

• Make a new layer just above our 'pix_mc' layer, name it 'Second Pix_mc', and insert another copy of our 'pix_mc' in it, give it an instance name as 'thePix2_mc' . Make sure it cordinates are the same as the first one
• Make another layer above it, name it 'Mask', pick the Rectangle Tool from the tool bar and draw a square just the same dimension as the 'thePix2_mc'. Convert it to MovieClip and name it 'mask' with an instance name of 'mask_mc' . Now edit it [Ctrl+E], make a couple of extra KEY FRAMES (I did 5 frames), just as much you want for the number of masks, and thenmake a new layer for script, add a stop() in the first frame.
• Back to the main stage, make the Mask layer as a mask to the 'thePix2_mc'

This it, what this will do?? we will make the new pix_mc that we've added (thePix2_mc) to react just as the first one but with difference in the speed, so we will add a new variable for it, name it speed2 and change the first one to speed1 and also we add a variable to hold the total number of frame of the mask_mc:

var speed1:Number = 15;
var speed2:Number = 9;
var numOfFrames:Number = _level0.mask_mc._totalframes-1;

and then we add these new two lines within the onRelease and onEnterFrame statments:

_level0["the"+i+"_btn"].onRelease = function() {
        _level0.theTgt = _level0.pos[this.n-1]*-1;
        _level0.info_txt.text = _level0.theInfo[this.n-1];
        _level0.mask_mc.gotoAndStop(Math.round(Math.random()*_level0.numOfFrames+1));
};
_level0["the"+i+"_btn"].onEnterFrame = function() {
        _level0.thePix_mc.panorama_mc._x += (_level0.theTgt-_level0.thePix_mc.panorama_mc._x)/_level0.speed1;
        _level0.thePix2_mc.panorama_mc._x += (_level0.theTgt-_level0.thePix2_mc.panorama_mc._x)/_level0.speed2;
};

The end, tadaaaaaaaaaaaaaaa