Tween i rollOver

[ sekvoja @ 14.04.2006. 03:07 ] @

Nemojte da se uplasite zbog ovakve zapetljancije u kodu jer je u sustini vrlo prost. Na stage-u je movieClip "kvadrat", dupliran je u 5 komada i svaki od njih se na rollOver-u skalira po _xscale i _yscale do 200%, a na rollOut-u vrati na prvobitnu vrednost. Problem je sto kad za isti movieClip uradim rollOver, pa rollOut, pa brzo pre zavrsetka povratnog tween-a jos jedan rollOver, sve se pomeri, tj ne vrati se na svoje mesto. Kako bih uzeo promenljive XPOS, YPOS... izvan rollOver-a?

for(i=0; i<5; i++) {
duplicateMovieClip(kvadrat, "kvadrat"+i, i)
this["kvadrat"+i]._x = i*55;

this["kvadrat"+i].onRollOver = function() {

XPOS = this._x;
YPOS = this._y;
WPOS = this._width;
HPOS = this._height;

var easeType = mx.transitions.easing.Regular.easeOut;

var kraj = 200;
var vreme = .4;
Tween_xscale = new mx.transitions.Tween(this, "_xscale", easeType, this._xscale, kraj, vreme, true);
Tween_yscale = new mx.transitions.Tween(this, "_yscale", easeType, this._yscale, kraj, vreme, true);

var krajX = XPOS-WPOS/2;
var vreme = .4;
Tween_x = new mx.transitions.Tween(this, "_x", easeType, this._x, krajX, vreme, true);

var krajY = YPOS-HPOS/2;
Tween_y = new mx.transitions.Tween(this, "_y", easeType, this._y, krajY, vreme, true);
}

this["kvadrat"+i].onRollOut = function() {
var easeType = mx.transitions.easing.Regular.easeOut;

var kraj = 100;
var vreme = .4;
Tween_xscale = new mx.transitions.Tween(this, "_xscale", easeType, this._xscale, kraj, vreme, true);
Tween_yscale = new mx.transitions.Tween(this, "_yscale", easeType, this._yscale, kraj, vreme, true);

var krajX = XPOS;
var vreme = .4;
Tween_x = new mx.transitions.Tween(this, "_x", easeType, this._x, krajX, vreme, true);

var krajY = YPOS;
Tween_y = new mx.transitions.Tween(this, "_y", easeType, this._y, krajY, vreme, true);
}

}

[ Vranac @ 14.04.2006. 08:12 ] @

Evo jednog od mogucih resenja...
Moras da pokupis _x i _y od duplikata na pocetku u var koja je na _level0,
jer se onda nece menjati tweenom.

Code:

// make the original invisible first so it wont get in the way
this.kvadrat._visible = false

for(i=0; i<5; i++) {
    duplicateMovieClip(kvadrat, "kvadrat"+i, i)

    // make the copy visible
    this["kvadrat"+i]._visible = true
    this["kvadrat"+i]._x = i*55;

    // add the id to the duplicate, you will need it later
    this["kvadrat"+i].id = i

    // put the x and y of the duplicate in the _level0 var
    // you will use this to anchor the duplicate to its original position
    _level0["origXPos"+i] = this["kvadrat"+i]._x
    _level0["origYPos"+i] = this["kvadrat"+i]._y


    this["kvadrat"+i].onRollOver = function() {
        XPOS = this._x;
        YPOS = this._y;
        WPOS = this._width;
        HPOS = this._height;

        var easeType = mx.transitions.easing.Regular.easeOut;

        var kraj = 200;
        var vreme = .4;
        Tween_xscale = new mx.transitions.Tween(this, "_xscale", easeType, this._xscale, kraj, vreme, true);
        Tween_yscale = new mx.transitions.Tween(this, "_yscale", easeType, this._yscale, kraj, vreme, true);

        var krajX = XPOS-WPOS/2;
        var vreme = .4;
        Tween_x = new mx.transitions.Tween(this, "_x", easeType, this._x, krajX, vreme, true);

        var krajY = YPOS-HPOS/2;
        Tween_y = new mx.transitions.Tween(this, "_y", easeType, this._y, krajY, vreme, true);
    }

    this["kvadrat"+i].onRollOut = function() {
        var easeType = mx.transitions.easing.Regular.easeOut;



        var kraj = 100;
        var vreme = .4;
        Tween_xscale = new mx.transitions.Tween(this, "_xscale", easeType, this._xscale, kraj, vreme, true);
        Tween_yscale = new mx.transitions.Tween(this, "_yscale", easeType, this._yscale, kraj, vreme, true);

        // use the _level0 x and y vars for this copy to set the ending position of the duplicate
        //  _level0["origXPos"+this.id]

        var vreme = .4;
        Tween_x = new mx.transitions.Tween(this, "_x", easeType, this._x, _level0["origXPos"+this.id], vreme, true);

        Tween_y = new mx.transitions.Tween(this, "_y", easeType, this._y,  _level0["origYPos"+this.id], vreme, true);

    }
}

_{[Ovu poruku je menjao Vranac dana 14.04.2006. u 09:13 GMT+1]}

[ Vranac @ 14.04.2006. 08:49 ] @

Evo jos jednog resenja,
ovog puta se _x i _y od duplikata smesta u var u samom duplikatu

Code:

// make the original invisible first so it wont get in the way
this.kvadrat._visible = false

for(i=0; i<5; i++) {
    duplicateMovieClip(kvadrat, "kvadrat"+i, i)

    // make the copy visible
    this["kvadrat"+i]._visible = true
    this["kvadrat"+i]._x = i*55;

    // collect the original _x and _y in vars in the duplicate movie
    this["kvadrat"+i].origXPos = this["kvadrat"+i]._x
    this["kvadrat"+i].origYPos = this["kvadrat"+i]._y

    this["kvadrat"+i].onRollOver = function() {

        XPOS = this._x;
        YPOS = this._y;
        WPOS = this._width;
        HPOS = this._height;

        var easeType = mx.transitions.easing.Regular.easeOut;

        var kraj = 200;
        var vreme = .4;
        Tween_xscale = new mx.transitions.Tween(this, "_xscale", easeType, this._xscale, kraj, vreme, true);
        Tween_yscale = new mx.transitions.Tween(this, "_yscale", easeType, this._yscale, kraj, vreme, true);

        var krajX = XPOS-WPOS/2;
        var vreme = .4;
        Tween_x = new mx.transitions.Tween(this, "_x", easeType, this._x, krajX, vreme, true);

        var krajY = YPOS-HPOS/2;
        Tween_y = new mx.transitions.Tween(this, "_y", easeType, this._y, krajY, vreme, true);
    }

    this["kvadrat"+i].onRollOut = function() {
        var easeType = mx.transitions.easing.Regular.easeOut;



        var kraj = 100;
        var vreme = .4;
        Tween_xscale = new mx.transitions.Tween(this, "_xscale", easeType, this._xscale, kraj, vreme, true);
        Tween_yscale = new mx.transitions.Tween(this, "_yscale", easeType, this._yscale, kraj, vreme, true);

        // use the origXPos and origYPos vars for this copy to set the ending position of the duplicate
        //  this.origXPos, this.origYPos

        var vreme = .4;
        Tween_x = new mx.transitions.Tween(this, "_x", easeType, this._x, this.origXPos, vreme, true);

        Tween_y = new mx.transitions.Tween(this, "_y", easeType, this._y,  this.origYPos, vreme, true);

    }
}

[ kelja @ 14.04.2006. 09:25 ] @

A evo i jos jednog:-).Ne koristi Tween...samo 2 funkcije i to je to...

_{[Ovu poruku je menjao kelja dana 14.04.2006. u 10:27 GMT+1]}

[ Vranac @ 14.04.2006. 11:39 ] @

Evo korekcije male,
Naime oba moja resenja su imala bug da kada dovoljno brzo pocnes da
radis rollOver/rollOut pocnu malo da beze duplikati

sad reseto :)

Code:

// make the original invisible first so it wont get in the way
this.kvadrat._visible = false

for(i=0; i<5; i++) {
    duplicateMovieClip(kvadrat, "kvadrat"+i, i)

    // make the copy visible
    this["kvadrat"+i]._visible = true
    this["kvadrat"+i]._x = i*55;

    // collect the original _x and _y in vars in the duplicate movie
    this["kvadrat"+i].origXPos = this["kvadrat"+i]._x
    this["kvadrat"+i].origYPos = this["kvadrat"+i]._y
    // collect the original _x and _y centers in vars in the duplicate movie
    this["kvadrat"+i].origXCenter = this["kvadrat"+i]._x + (this["kvadrat"+i]._width/2)
    this["kvadrat"+i].origYCenter = this["kvadrat"+i]._y + (this["kvadrat"+i]._height/2)

    this["kvadrat"+i].onRollOver = function() {

        XPOS = this._x;
        YPOS = this._y;
        WPOS = this._width;
        HPOS = this._height;

        var easeType = mx.transitions.easing.Regular.easeOut;

        var kraj = 200;
        var vreme = .4;
        Tween_xscale = new mx.transitions.Tween(this, "_xscale", easeType, this._xscale, kraj, vreme, true);
        Tween_yscale = new mx.transitions.Tween(this, "_yscale", easeType, this._yscale, kraj, vreme, true);

        // track the onMotionChanged event and compensate for the moving
        // of x and y centers
        Tween_xscale.onMotionChanged = function() {
            var currXCenter:Number = this.obj._x + (this.obj._width/2)
            this.obj._x = this.obj._x - (currXCenter - this.obj.origXCenter)
        }

        Tween_yscale.onMotionChanged = function() {
            var currYCenter:Number = this.obj._y + (this.obj._height/2)
            this.obj._y = this.obj._y - (currYCenter - this.obj.origYCenter)
        }
    }

    this["kvadrat"+i].onRollOut = function() {
        var easeType = mx.transitions.easing.Regular.easeOut;



        var kraj = 100;
        var vreme = .4;
        Tween_xscale = new mx.transitions.Tween(this, "_xscale", easeType, this._xscale, kraj, vreme, true);
        Tween_yscale = new mx.transitions.Tween(this, "_yscale", easeType, this._yscale, kraj, vreme, true);

        // use the origXPos and origYPos vars for this copy to set the ending position of the duplicate
        //  this.origXPos, this.origYPos

        var vreme = .4;
        Tween_x = new mx.transitions.Tween(this, "_x", easeType, this._x, this.origXPos, vreme, true);

        Tween_y = new mx.transitions.Tween(this, "_y", easeType, this._y,  this.origYPos, vreme, true);

    }
}

[ sekvoja @ 14.04.2006. 23:41 ] @

Hvala ljudi!! Ovo resenje od Vranca je OK. A i ovo Keljino je OK, samo sto procesor zakucava kad pocnes brzo da setas :)

[ kelja @ 15.04.2006. 00:04 ] @

He he,zavisi koji procesor:-)...Nego,sad ozbiljno,bice da je problem u sledecem redu:
mx.behaviors.DepthControl.bringToFront(this);
Zeleo sam da se movie clip nad kojim se radi rollover nadje ispred ostalih,a kad su klipovi tako gusto zbijeni i kad ih ima mnogo...