Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
timaging

restart animation after certain amount of inactivity?

Recommended Posts

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

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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);
}
  • Like 1
Link to comment
Share on other sites

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();
Link to comment
Share on other sites

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});
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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: Z6peIEE.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×