A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: Help on tough question! Apply easing in carousel movement

  1. #1
    Senior Member
    Join Date
    Feb 2004
    Posts
    133

    Help on tough question! Apply easing in carousel movement

    Hi! I am working on a code that I´ve got in gotoandlearn.com that dynamically builds a carousel... Everything is working just fine... I mean, I´ve got many icons "orbiting", and if I put the mouse cursor in the middle of the stage, the carousel´s movement eases out until it stops.

    However, I am looking for a way to make the carousel´s movement ease out with a mouse over event, in any _x coordinate of the stage, not only in the middle of the stage.

    Here is the carousel code (I´ll mark the functions that seem to be important for this matter IMHO):

    *********************************************
    *********************************************
    import mx.utils.Delegate;
    import mx.transitions.Tween;
    import mx.transitions.easing.*;

    var numOfItems:Number;
    var radiusX:Number = 300;
    var radiusY:Number = 75;
    var centerX:Number = Stage.width / 2;
    var centerY:Number = Stage.height / 2;
    var speed:Number = 0.05;
    var perspective:Number = 130;
    var home:MovieClip = this;
    theText._alpha = 0;

    var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
    tooltip._alpha = 0;

    var xml:XML = new XML();
    xml.ignoreWhite = true;

    xml.onLoad = function()
    {
    var nodes = this.firstChild.childNodes;
    numOfItems = nodes.length;
    for(var i=0;i<numOfItems;i++)
    {
    var t = home.attachMovie("item","item"+i,i+1);
    t.angle = i * ((Math.PI*2)/numOfItems);
    t.onEnterFrame = mover; //<---------------------HERE!
    t.toolText = nodes[i].attributes.tooltip;
    t.content = nodes[i].attributes.content;
    t.icon.inner.loadMovie(nodes[i].attributes.image);
    t.r.inner.loadMovie(nodes[i].attributes.image);
    t.icon.onRollOver = over;
    t.icon.onRollOut = out;
    t.icon.onRelease = released;
    }
    }

    function over() //<--------------------------------------------------HERE!
    {
    //BONUS Section
    var sou:Sound = new Sound();
    sou.attachSound("sover");
    sou.start();

    home.tooltip.tipText.text = this._parent.toolText;
    home.tooltip._x = this._parent._x;
    home.tooltip._y = this._parent._y - this._parent._height/2;
    home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
    home.tooltip._alpha = 100;
    }

    function out()
    {
    delete home.tooltip.onEnterFrame;
    home.tooltip._alpha = 0;
    }

    function released()
    {
    //BONUS Section
    var sou:Sound = new Sound();
    sou.attachSound("sdown");
    sou.start();

    home.tooltip._alpha = 0;
    for(var i=0;i<numOfItems;i++)
    {
    var t:MovieClip = home["item"+i];
    t.xPos = t._x;
    t.yPos = t._y;
    t.theScale = t._xscale;
    delete t.icon.onRollOver;
    delete t.icon.onRollOut;
    delete t.icon.onRelease;
    delete t.onEnterFrame;
    if(t != this._parent)
    {
    var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,0,1,tru e);
    var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,0,1,tru e);
    var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,100,0,1,true);
    }
    else
    {
    var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,100,1,t rue);
    var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,100,1,t rue);
    var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,200,1,true);
    var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,320,1,true);
    var tw5:Tween = new Tween(theText,"_alpha",Strong.easeOut,0,100,1,true );
    theText.text = t.content;
    var s:Object = this;
    tw.onMotionStopped = function()
    {
    s.onRelease = unReleased;
    }
    }
    }
    }

    function unReleased()
    {
    //BONUS Section
    var sou:Sound = new Sound();
    sou.attachSound("sdown");
    sou.start();

    delete this.onRelease;
    var tw:Tween = new Tween(theText,"_alpha",Strong.easeOut,100,0,0.5,tr ue);
    for(var i=0;i<numOfItems;i++)
    {
    var t:MovieClip = home["item"+i];
    if(t != this._parent)
    {
    var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,0,t.theScale,1,tr ue);
    var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,0,t.theScale,1,tr ue);
    var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,0,100,1,true);
    }
    else
    {
    var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,100,t.theScale,1, true);
    var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,100,t.theScale,1, true);
    var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,t.xPos,1,true);
    var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,t.yPos,1,true);
    tw.onMotionStopped = function()
    {
    for(var i=0;i<numOfItems;i++)
    {
    var t:MovieClip = home["item"+i];
    t.icon.onRollOver = Delegate.create(t.icon,over);
    t.icon.onRollOut = Delegate.create(t.icon,out);
    t.icon.onRelease = Delegate.create(t.icon,released);
    t.onEnterFrame = mover;
    }
    }
    }
    }
    }


    function moveTip()
    {
    home.tooltip._x = this._parent._x;
    home.tooltip._y = this._parent._y - this._parent._height/2;
    }

    xml.load("icons.xml");

    function mover() // <--------------------------------------HERE!
    {
    this._x = Math.cos(this.angle) * radiusX + centerX;
    this._y = Math.sin(this.angle) * radiusY + centerY;
    var s = (this._y - perspective) /(centerY+radiusY-perspective);
    this._xscale = this._yscale = s*100;
    this.angle += this._parent.speed;
    this.swapDepths(Math.round(this._xscale) + 100);
    }

    this.onMouseMove = function() // <------------------------------HERE!
    {
    speed = (this._xmouse-centerX)/2500;
    }
    *********************************************
    *********************************************

    So, I´ve tried to do the following: inside the function "over", I´ve put the following code

    *********************************************
    onEnterFrame = function () {
    for (var i = 0; i<speed; i++) {
    i = speed-0.01;
    if (i != 0) {
    delete t.onEnterFrame;
    } else {
    i = speed-0.01;
    }
    }
    }
    *********************************************

    It didn´t work again... can any of you guys give some help... I really don´t know what to do...
    Last edited by Mcrodrigues; 03-21-2007 at 03:47 PM.

  2. #2
    Senior Member layerburn's Avatar
    Join Date
    Jul 2006
    Location
    USA
    Posts
    542
    I'm not really sure what you're trying to accomplish, but I've also been working with the carousel tutorial. Here is my script, I have more comments in it as to what specific lines do, you can compare it with yours, maybe this will help. Otherwise, have you visited the gotoandlearn.com forums?? There are lots of topics on the carousel there and that might be a better place to ask your specific question. I hope this helps you out.


    Code:
    import mx.utils.Delegate;
    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    
    var numOfItems:Number;
    var radiusX:Number = 300;  // horizontal size of menu
    var radiusY:Number = 50;   // vertical size of menu
    var centerX:Number = Stage.width / 2.5;  //menu's x center based on stage width divided by 
    var centerY:Number = Stage.height / 2.5;  //menu's y center based on stage height divided by 
    var speed:Number = .005;  //intial drift speed
    var perspective:Number = 130;  //perspective of menu, how far back it rotates
    var home:MovieClip = this;
    theText._alpha = 0;
    
    var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
    tooltip._alpha = 0;
    
    var xml:XML = new XML();
    xml.ignoreWhite = true;
    
    xml.onLoad = function()
    {
    	var nodes = this.firstChild.childNodes;
    	numOfItems = nodes.length;
    	for(var i=0;i<numOfItems;i++)
    	{
    		var t = home.attachMovie("item","item"+i,i+1);
    		t.angle = i * ((Math.PI*2)/numOfItems);
    		t.onEnterFrame = mover;
    		t.toolText = nodes[i].attributes.tooltip;
    		t.content = nodes[i].attributes.content;
    		t.icon.inner.loadMovie(nodes[i].attributes.image);
    		t.r.inner.loadMovie(nodes[i].attributes.image);
    		t.icon.onRollOver = over;
    		t.icon.onRollOut = out;
    		t.icon.onRelease = released;
    		
    	}
    }
    
    function over()
    {
    	//BONUS Section
    	var sou:Sound = new Sound();
    	sou.attachSound("sover");
    	sou.start();
    	
    	home.tooltip.tipText.text = this._parent.toolText;
    	home.tooltip._x = this._parent._x;
    	home.tooltip._y = this._parent._y - this._parent._height/2;
    	home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
    	home.tooltip._alpha = 100;
    }
    
    function out()
    {
    	delete home.tooltip.onEnterFrame;
    	home.tooltip._alpha = 0;
    }
    
    function released()
    {
    	//BONUS Section
    	var sou:Sound = new Sound();
    	sou.attachSound("sdown");
    	sou.start();
    	
    	home.tooltip._alpha = 0;
    	for(var i=0;i<numOfItems;i++)
    	{
    		var t:MovieClip = home["item"+i];
    		t.xPos = t._x;
    		t.yPos = t._y;
    		t.theScale = t._xscale;
    		delete t.icon.onRollOver;
    		delete t.icon.onRollOut;
    		delete t.icon.onRelease;
    		delete t.onEnterFrame;
    		if(t != this._parent)
    		
    		{
    			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,0,1,true);//controls scale when fades, squishing
    			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,0,1,true);
    			var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,100,0,1,true); // controls opacity
    		}
    		else
    		{
    			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,100,1,true); //controls scaling when zooms x 
    			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,100,1,true);//controls scaling when zooms y 
    			var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,30,1,true);  //controls x position when zooms
    			var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,100,1,true); //controls y position when zooms
    			var tw5:Tween = new Tween(theText,"_alpha",Strong.easeOut,0,100,1,true);
    			theText.text = t.content;
    			var s:Object = this;
    			tw.onMotionStopped = function()
    			{
    				s.onRelease = unReleased;
    			}
    		}
    	}
    }
    
    function unReleased()
    {
    	//BONUS Section
    	var sou:Sound = new Sound();
    	sou.attachSound("sdown");
    	sou.start();
    	
    	delete this.onRelease;
    	var tw:Tween = new Tween(theText,"_alpha",Strong.easeOut,100,0,0.5,true);
    	for(var i=0;i<numOfItems;i++)
    	{
    		var t:MovieClip = home["item"+i];
    		if(t != this._parent)
    		{
    			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,0,t.theScale,1,true);//controls scaling when fades
    			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,0,t.theScale,1,true);
    			var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,0,100,1,true);//controls opacity
    		}
    		else
    		{
    			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,100,t.theScale,1,true);//controls scaling when zooms x 
    			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,100,t.theScale,1,true);//controls scaling when zooms y 
    			var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,t.xPos,1,true);
    			var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,t.yPos,1,true);
    			tw.onMotionStopped = function()
    			{
    				for(var i=0;i<numOfItems;i++)
    				{
    					var t:MovieClip = home["item"+i];
    					t.icon.onRollOver = Delegate.create(t.icon,over);
    					t.icon.onRollOut = Delegate.create(t.icon,out);
    					t.icon.onRelease = Delegate.create(t.icon,released);
    					t.onEnterFrame = mover;
    				}
    			}
    		}
    	}
    }
    
    
    function moveTip()
    {
    	home.tooltip._x = this._parent._x;
    	home.tooltip._y = this._parent._y - this._parent._height/2;
    }
    
    xml.load("icon2.xml");
    
    function mover()
    {
    	this._x = Math.cos(this.angle) * radiusX + centerX;
    	this._y = Math.sin(this.angle) * radiusY + centerY;
    	var s = (this._y - perspective) /(centerY+radiusY-perspective);
    	this._xscale = this._yscale = s*30; //scale for object when on the rotating menu
    	this.angle += this._parent.speed;
    	this.swapDepths(Math.round(this._xscale) + 100);
    }
    
    this.onMouseMove = function()
    {
    	speed = (this._xmouse-centerX)/4500;
    }
    This is your brain. This is your brain on script.

  3. #3
    Senior Member
    Join Date
    Feb 2004
    Posts
    133
    layerburn,

    Thanks for your help... unfortunately, gotoandlearn is currently off-line so that I can´t get in their forums to ask for help...

    I appreciate your effort in helping me... What I am trying to accomplish is to make the carousel stop moving with a mouse over event... i´ve already done that by adding the following code to the "OVER" function:

    delete t.onEnterFrame;

    However, (as I said) it makes the carousel stop at once... What I am looking for is a way to make the carousel stop smoothly, gradually, easing out...

    Can you give me a hand on this, please?

    Thanks for your effort...

    best regards...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center