# Tween nav effect

**URL:** <https://forum.kirupa.com/t/tween-nav-effect/178676>\
**Category:** Uncategorized\
**Created:** [February 13, 2006, 11:57am UTC](https://forum.kirupa.com/t/tween-nav-effect/178676 "2006-02-13T11:57:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dirksmith](https://avatars.discourse-cdn.com/v4/letter/d/47e85d/32.png) [@dirksmith](https://forum.kirupa.com/u/dirksmith)\
**Post date:** [February 13, 2006, 11:57am UTC](https://forum.kirupa.com/t/tween-nav-effect/178676/1 "2006-02-13T11:57:43Z")

</div>

Hi

I’m trying to use the mx teen class to replicate the movement in this website:

> **[Digital Recruitment Specialists | Zebra People - London](http://zebrapeople.com/)**
>
> User Experience, Creative, Client Services, Technology – whatever area you’re in or recruiting for, we’ll listen to your requirements and work with you from start to finish.

So far I’ve got here:  
[http://www.detkendesign.com/detken3/test6.php](http://www.detkendesign.com/detken3/test6.php)

I’ve got the basic structure but am having problems with the xscale / yscale aspect and getting the tween to a new box to avoid the looping movement from above when the new box enters frame.

The AS is below - .fla attached - grateful for any input.

Thanx

d

```auto

stop();

import mx.transitions.Tween;
import mx.transitions.easing.*;
MovieClip.prototype.tween = function(theProp:String, from:Number, to:Number, time:Number) {
    _global.when = new Tween(this, theProp, Strong.easeInOut, from, to, time, true);
};

//function for button
function btn1Function() {
    //first move to center in one second witih no delay
    main_mc.tween("_x", -1000, 329, 1);
    main_mc.tween("_y", 126, 126, 1);
    // and in 2 seconds scale closer
    main_mc.tween("_xscale", 60, 120, 2);
    main_mc.tween("_yscale", 60, 120, 2);
    _global.when.onMotionFinished = function() {
        trace("ok");
    };
}
//call function now
btn1Function();
//add function to button onRelease
btn1.onRelease = function() {
    btn1Function();
};

btn2.onRelease = function() {
    gotoAndStop("bt2");
    //first move to center in one second witih no delay
    main_mc.tween("_x", 280, -717, 1);
    main_mc.tween("_y",126, 126, 1);
    // and in 2 seconds scale closer
    main_mc.tween("_xscale", 100, 120, 2);
    main_mc.tween("_yscale", 100, 120, 2);
    _global.when.onMotionFinished = function() {
        
        trace("ok");
};
}
btn3.onRelease = function() {
    gotoAndStop("bt3");
    //first move to center in one second witih no delay
    main_mc.tween("_x", 280, 329, 1);
    main_mc.tween("_y", 126,-1086, 1);
    // and in 2 seconds scale closer
    main_mc.tween("_xscale", 100, 120, 2);
    main_mc.tween("_yscale", 100, 120, 2);
    _global.when.onMotionFinished = function() {
        
        trace("ok");
};
}

btn4.onRelease = function() {
    gotoAndStop("bt4");
    //first move to center in one second witih no delay
    main_mc.tween("_x", 280,-717, 1);
    main_mc.tween("_y", 126,-1086, 1);
    // and in 2 seconds scale closer
    main_mc.tween("_xscale", 100, 120, 2);
    main_mc.tween("_yscale", 100, 120, 2);

_global.when.onMotionFinished = function() {
        
        trace("ok");
};
}

btn5.onRelease = function() {
    gotoAndStop("bt5");
    //first move to center in one second witih no delay
    main_mc.tween("_x", 280,-193, 1);
    main_mc.tween("_y", 126,-466, 1);
    // and in 2 seconds scale closer
    main_mc.tween("_xscale", 100, 120, 2);
    main_mc.tween("_yscale", 100, 120, 2);

_global.when.onMotionFinished = function() {
        
        trace("ok");
};
}

```