restart animation after certain amount of inactivity?

[timaging]

Hi,

 

Maybe I'm not searching for the right term, but I want my animation to restart after nothing has happened after a period of time. Is this called something, or is it something that's possible? I'm really not even sure what to search for.

 

Thanks-

Dave

 

[GreenSock]

Can you describe what you mean by "after nothing has happened after a period of time"? Are you saying that if the user interacts with the page in any way, it would start the timer over again (thus not restart the animation)? So a scroll, a mouse move, a click, or anything like that would prevent things from restarting? Or are you just saying that you want your animation to repeat with a certain amount of time inbetween each iteration?

[timaging]

yes, so let's say no mouse move or click within the flash stage, after 5 secons, the animation would reset.

 

this map basically goes gray. I would like it to do back to it's original state after a certain amount of time:

 

https://www.dropbox.com/s/6og9b8w20lotcu5/NICmap540.zip?dl=0

 

Thanks! 

[Carl]

Hi Dave!

 

i didn't see an fla in the zip.

 

you can just start a delayedCall when the animation completes. if a MOUSE_MOVE (or other event) fires then kill the delayedCall.

 

Try this:

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.*;






var rectangle:Shape = new Shape;
rectangle.graphics.beginFill(0xFF0000); 
rectangle.graphics.drawRect(0, 0, 100,100);
rectangle.graphics.endFill();






addChild(rectangle);


var tl = new TimelineLite({onComplete:wait})
tl.to(rectangle, 1, {x:200, y:200})
  .to(rectangle, 2, {rotation:360});
  
function wait():void {
trace("starting to wait");
stage.addEventListener(MouseEvent.MOUSE_MOVE, killWait)
TweenLite.delayedCall(2, restart)


}




function restart():void {
trace("wait expired, let's restart");
tl.restart();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, killWait);
}
  
function killWait(e:MouseEvent):void {
  trace("MOUSE MOVED, no more waiting");
  TweenLite.killTweensOf(restart);
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, killWait);
}

[timaging]

Hi Carl,

 

I didn't supply the .fla only because it's in the brandie new Adobe Animate... 

 

This here is the code. I am having a tough time figuring out how this would work with what you have here. My way of going about things is more "longhand", since I'm kind of a sucky coder... also here is the fla if you have the latest version of animate

 

https://www.dropbox.com/s/5w9gq3k2hja3a2j/NICmap-540-0203.fla.zip?dl=0

 

 

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.plugins.*;

 

import flash.events.MouseEvent;

import flash.ui.Mouse;

 

 

btn_northeast.buttonMode = true;

btn_northeast.useHandCursor = true;

btn_northeast.buttonMode = true;

btn_northeast.useHandCursor = true;

btn_east.buttonMode = true;

btn_east.useHandCursor = true;

btn_east.buttonMode = true;

btn_east.useHandCursor = true;

btn_central.buttonMode = true;

btn_central.useHandCursor = true;

btn_central.buttonMode = true;

btn_central.useHandCursor = true;

btn_west.buttonMode = true;

btn_west.useHandCursor = true;

btn_west.buttonMode = true;

btn_west.useHandCursor = true;

 

 

 

var introClips:Array = [btn_northeast, btn_east, btn_central, btn_west, neDesc, eastDesc, centralDesc, westDesc, 

dotsNEover, dotsEastOver, dotsCentralOver, dotsWestOver, over_NE, over_east, over_central, over_west, txt_click,

dotsNEoff, dotsEastOff, dotsCentralOff, dotsWestOff];

TweenMax.allTo(introClips, 0, {alpha:0});

 

 

//main Intro begin =========================================================================================================;

var mainIntroIn:TimelineLite = new TimelineLite({repeat:0});

 

 

mainIntroIn.appendMultiple([new TweenLite(over_NE,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(over_east,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(over_central,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(over_west,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(border,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(btn_west,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(btn_central,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(btn_east,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(btn_northeast,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(dotsWestOff,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(dotsCentralOff,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(dotsEastOff,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(dotsNEoff,  1, {alpha:1, ease:Quad.easeInOut}),

                           new TweenLite(txt_click,  1, {alpha:1, ease:Quad.easeInOut})], 0, TweenAlign.START, 0.1);

 

 

//main Intro end =========================================================================================================

 

 

//Button01 begin =========================================================================================================

btn_northeast.addEventListener(MouseEvent.ROLL_OVER, fl_MouseOverHandler01);

 

function fl_MouseOverHandler01(event:MouseEvent):void

{

TweenMax.to(over_NE,  2, {alpha:1, ease:Expo.easeOut});

TweenMax.to(dotsNEover,  1, {alpha:1, ease:Expo.easeOut});

TweenMax.to(over_east,  2, {alpha:0, ease:Expo.easeOut});

TweenMax.to(over_central,  2, {alpha:0, ease:Expo.easeOut});

TweenMax.to(over_west,  2, {alpha:0, ease:Expo.easeOut});

}

 

 

btn_northeast.addEventListener(MouseEvent.ROLL_OUT, fl_MouseOutHandler01);

 

function fl_MouseOutHandler01(event:MouseEvent):void

{

TweenMax.to(over_NE,  1, {alpha:0, ease:Quad.easeInOut});

 

TweenMax.to(dotsNEover,  1, {alpha:0, ease:Quad.easeInOut});

}

 

btn_northeast.addEventListener(MouseEvent.CLICK, fl_showDescription01);

 

function fl_showDescription01(event:MouseEvent):void

{

TweenMax.to(neDesc,  1, {alpha:1, ease:Quad.easeInOut});

TweenMax.to(eastDesc,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(centralDesc,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(westDesc,  1, {alpha:0, ease:Quad.easeInOut});

 

 

}

//Button01 end =========================================================================================================

 

//Button02 begin =========================================================================================================

btn_east.addEventListener(MouseEvent.ROLL_OVER, fl_MouseOverHandler02);

 

function fl_MouseOverHandler02(event:MouseEvent):void

{

TweenMax.to(over_east,  2, {alpha:1, ease:Expo.easeOut});

TweenMax.to(dotsEastOver,  1, {alpha:1, ease:Expo.easeOut});

TweenMax.to(over_west,  2, {alpha:0, ease:Expo.easeOut});

TweenMax.to(over_central,  2, {alpha:0, ease:Expo.easeOut});

TweenMax.to(over_NE,  2, {alpha:0, ease:Expo.easeOut});

}

 

 

btn_east.addEventListener(MouseEvent.ROLL_OUT, fl_MouseOutHandler02);

 

function fl_MouseOutHandler02(event:MouseEvent):void

{

TweenMax.to(over_east,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(dotsEastOver,  1, {alpha:0, ease:Quad.easeInOut});

}

 

btn_east.addEventListener(MouseEvent.CLICK, fl_showDescription02);

 

function fl_showDescription02(event:MouseEvent):void

{

TweenMax.to(neDesc,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(eastDesc,  1, {alpha:1, ease:Quad.easeInOut});

TweenMax.to(centralDesc,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(westDesc,  1, {alpha:0, ease:Quad.easeInOut});

}

//Button02 end =========================================================================================================

 

//Button03 begin =========================================================================================================

btn_central.addEventListener(MouseEvent.ROLL_OVER, fl_MouseOverHandler03);

 

function fl_MouseOverHandler03(event:MouseEvent):void

{

TweenMax.to(over_central,  2, {alpha:1, ease:Expo.easeOut});

TweenMax.to(dotsCentralOver,  1, {alpha:1, ease:Expo.easeOut});

TweenMax.to(over_east,  2, {alpha:0, ease:Expo.easeOut});

TweenMax.to(over_west,  2, {alpha:0, ease:Expo.easeOut});

TweenMax.to(over_NE,  2, {alpha:0, ease:Expo.easeOut});

}

 

 

btn_central.addEventListener(MouseEvent.ROLL_OUT, fl_MouseOutHandler03);

 

function fl_MouseOutHandler03(event:MouseEvent):void

{

TweenMax.to(over_central,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(dotsCentralOver,  1, {alpha:0, ease:Quad.easeInOut});

}

 

btn_central.addEventListener(MouseEvent.CLICK, fl_showDescription03);

 

function fl_showDescription03(event:MouseEvent):void

{

TweenMax.to(neDesc,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(eastDesc,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(centralDesc,  1, {alpha:1, ease:Quad.easeInOut});

TweenMax.to(westDesc,  1, {alpha:0, ease:Quad.easeInOut});

 

 

}

//Button03 end =========================================================================================================

 

//Button04 begin =========================================================================================================

btn_west.addEventListener(MouseEvent.ROLL_OVER, fl_MouseOverHandler04);

 

function fl_MouseOverHandler04(event:MouseEvent):void

{

TweenMax.to(over_west,  2, {alpha:1, ease:Expo.easeOut});

TweenMax.to(dotsWestOver,  1, {alpha:1, ease:Expo.easeOut});

TweenMax.to(over_east,  2, {alpha:0, ease:Expo.easeOut});

TweenMax.to(over_central,  2, {alpha:0, ease:Expo.easeOut});

TweenMax.to(over_NE,  2, {alpha:0, ease:Expo.easeOut});

}

 

 

btn_west.addEventListener(MouseEvent.ROLL_OUT, fl_MouseOutHandler04);

 

function fl_MouseOutHandler04(event:MouseEvent):void

{

TweenMax.to(over_west,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(dotsWestOver,  1, {alpha:0, ease:Quad.easeInOut});

}

 

btn_west.addEventListener(MouseEvent.CLICK, fl_showDescription04);

 

function fl_showDescription04(event:MouseEvent):void

{

TweenMax.to(neDesc,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(eastDesc,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(centralDesc,  1, {alpha:0, ease:Quad.easeInOut});

TweenMax.to(westDesc,  1, {alpha:1, ease:Quad.easeInOut});

 

}

//Button04 end =========================================================================================================

 

 

 

 

 

stop();

[Carl]

I haven't yet installed Animate but I hope to soon to experiment with the HTML5 features. 

The example I provided was as concise as I could make it. 

You should be able to just copy over the custom functions I created:

 

function wait():void {
  trace("starting to wait");
  stage.addEventListener(MouseEvent.MOUSE_MOVE, killWait)
  TweenLite.delayedCall(2, restart)
}


function restart():void {
  trace("wait expired, let's restart");
  tl.restart();
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, killWait);
}
  
function killWait(e:MouseEvent):void {
  trace("MOUSE MOVED, no more waiting");
  TweenLite.killTweensOf(restart);
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, killWait);
}

and use the wait function as your onComplete callback of your timeline

var mainIntroIn:TimelineLite = new TimelineLite({repeat:0, onComplete:wait});

[timaging]

ok, I'll give this a shot... Thank You!!!

[timaging]

Hi Carl,

 

This did not work. Once it gets to MOUSE MOVED no more waiting, then it cancels itself, thus defeating the purpose. No matter how long I wait after this, it never resets.

 

Dave

[Carl]

it wasn't clear from your initial request that you wanted to repeatedly test for inactivity.

Being that the waiting for inactivity happens when the timeline completes and calls the wait() function you just have to call the wait() function whenever you want to start testing for activity. from what you are describing it sounds like every time the mouse moves you want to start waiting again, so just add the *** new *** line of code below

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.*;






var rectangle:Shape = new Shape;
rectangle.graphics.beginFill(0xFF0000); 
rectangle.graphics.drawRect(0, 0, 100,100);
rectangle.graphics.endFill();






addChild(rectangle);


var tl = new TimelineLite({onComplete:wait})
tl.to(rectangle, 1, {x:200, y:200})
  .to(rectangle, 2, {rotation:360});
  
function wait():void {
trace("starting to wait");
stage.addEventListener(MouseEvent.MOUSE_MOVE, killWait)
TweenLite.delayedCall(2, restart)
}


function restart():void {
trace("wait expired, let's restart");
tl.restart();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, killWait);
}
  
function killWait(e:MouseEvent):void {
  trace("MOUSE MOVED, no more waiting");
  TweenLite.killTweensOf(restart);
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, killWait);
  // **** NEW ****
  wait();
  // **** END NEW ****
}

when you test keep moving the mouse for about 5 seconds after the animation ends. 2 seconds after you stop moving the animation will repeat

 

this is the code button: 

[timaging]

this almost works. Still some of the graphics aren't resetting, and ideally once it resets, it wouldn't reset again, until after additional mouse movement.

 

we can hold off on this for now. I can't figure out why everything isn't resetting and need to look in to that. I'm just hoping now that the client went with the Plan B approach.

 

Thanks

Dave