TweenMax.killTweensOf

[Amnesicat 6 Likes (Newbie)]

Hi,
 
I have some video player code below which is loaded in via a main constructor and then unloaded with a dispose method (see end of code below) that uses a TweenMax.killTweensOf(this) to purge all tweens for GC. The trouble is this doesn't seem to be working as memory continuously rises without dropping at all. Using TweenMax.killAll() instead works great, but I have tweens within the main constructor that I don't want deleted.
 
So, is there a way to use TweenMax.killAll() and place an exception on the main constructor tweens so that they don't get destroyed? Or is it that I am not using the TweenMax.killTweensOf() method correctly?
 
Any advice would be greatly appreciated.

 

Thanks.
 

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Rectangle;
	
	import com.greensock.*;
	import com.greensock.easing.*;
	import com.greensock.events.LoaderEvent;
	import com.greensock.loading.LoaderMax;
	import com.greensock.loading.XMLLoader;
	import com.greensock.loading.VideoLoader;
	
	public class VideoPlayerMain extends MovieClip
	{
		private var _videos:Array;
		private var _currentVideo:VideoLoader;
		private var xmlLoader:XMLLoader;
		private var queue:LoaderMax;
		private var _silentMode:Boolean;
		private var _preScrubPaused:Boolean;
		private var currentNav:MovieClip;
		private var navItem:MovieClip;
		private var tl:TimelineMax;
		
		public function VideoPlayerMain()
		{
			if (stage)
			{
				init();
			}
			else
			{
				this.addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
			}
		}
		
		private function init(e:Event = null):void
		{
			this.removeEventListener(Event.ADDED_TO_STAGE, init);
			
			var mcArray:Array = [navBarBtn.vid3Btn, navBarBtn.vid2Btn, navBarBtn.vid1Btn];
			var mcArray2:Array = [navBarBtn.vid4Btn, navBarBtn.vid5Btn, navBarBtn.vid6Btn];
			
			tl = new TimelineMax();
			tl.add(TweenMax.allFrom(mcArray2, 2, {y:-800, ease:Bounce.easeOut}, 0.1));
			tl.add(TweenMax.from(videoMC, 2, {y:-240, ease:Bounce.easeOut, onComplete:addButtonListeners}), 1.2);
			tl.add(TweenMax.allFrom(mcArray, 2, {y:-800, ease:Bounce.easeOut}, 0.1), 0.8);
			
			initUI();
			
			LoaderMax.activate([XMLLoader, VideoLoader]);
			
			xmlLoader = new XMLLoader("assets/Page3/xml/videoList.xml", {name:"videoList", onComplete:xmlHandler});
			xmlLoader.load();
			
			var curParent:DisplayObjectContainer = this.parent;
			while (curParent)
			{
				if (curParent.hasOwnProperty("loader") && curParent.hasOwnProperty("rawContent"))
				{
					Object(curParent).loader.addEventListener("unload", dispose, false, 0, true);
				}
				curParent = curParent.parent;
			}
		}
		
		private function xmlHandler(event:LoaderEvent):void
		{
			queue = LoaderMax.getLoader("videoListLoader");
			_videos = queue.getChildren();
			queue.load();
			
			showVideo(_videos[0]);
			_currentVideo.pauseVideo();
			TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0.6});
			videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("paused");
		}
		
		private function initUI():void
		{
			videoMC.controlUI_mc.progressBar_mc.mouseEnabled = false;
			videoMC.controlUI_mc.blendMode = "layer";
			videoMC.controlUI_mc.progressBar_mc.width = videoMC.controlUI_mc.loadingBar_mc.width = 0;
			videoMC.controlUI_mc.scrubber_mc.x = videoMC.controlUI_mc.progressBar_mc.x;
			
			TweenMax.allTo([videoMC.playPauseBigButton_mc], 0, {autoAlpha:0});
		}
		
		private function addButtonListeners():void
		{
			navBarBtn.vid1Btn.addEventListener(MouseEvent.CLICK, vid1Play, false, 0, true);
			navBarBtn.vid2Btn.addEventListener(MouseEvent.CLICK, vid2Play, false, 0, true);
			navBarBtn.vid3Btn.addEventListener(MouseEvent.CLICK, vid3Play, false, 0, true);
			navBarBtn.vid4Btn.addEventListener(MouseEvent.CLICK, vid4Play, false, 0, true);
			navBarBtn.vid5Btn.addEventListener(MouseEvent.CLICK, vid5Play, false, 0, true);
			navBarBtn.vid6Btn.addEventListener(MouseEvent.CLICK, vid6Play, false, 0, true);
			
			navBarBtn.addEventListener(MouseEvent.MOUSE_DOWN, btnHiliteOn, false, 0, true);
			navBarBtn.addEventListener(MouseEvent.MOUSE_UP, btnHiliteOff, false, 0, true);
			navBarBtn.addEventListener(MouseEvent.MOUSE_OUT, btnHiliteOff, false, 0, true);
		}
		
		private function activateUI():void
		{
			addListeners([videoMC.controlUI_mc.playPauseButton_mc, videoMC.playPauseBigButton_mc, videoMC.videoContainer_mc], MouseEvent.CLICK, togglePlayPause);
			videoMC.controlUI_mc.scrubber_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownScrubber, false, 0, true);
			videoMC.controlUI_mc.loadingBar_mc.addEventListener(MouseEvent.MOUSE_DOWN, scrubToMouse, false, 0, true);
			
			navBarBtn.vid1Btn.mouseChildren = false;
			navBarBtn.vid2Btn.mouseChildren = false;
			navBarBtn.vid3Btn.mouseChildren = false;
			navBarBtn.vid4Btn.mouseChildren = false;
			navBarBtn.vid5Btn.mouseChildren = false;
			navBarBtn.vid6Btn.mouseChildren = false;
			navBarBtn.vid1Btn.startBtnHi.mouseEnabled = false;
			navBarBtn.vid1Btn.btnHi.mouseEnabled = false;
			navBarBtn.vid2Btn.btnHi.mouseEnabled = false;
			navBarBtn.vid3Btn.btnHi.mouseEnabled = false;
			navBarBtn.vid4Btn.btnHi.mouseEnabled = false;
			navBarBtn.vid5Btn.btnHi.mouseEnabled = false;
			navBarBtn.vid6Btn.btnHi.mouseEnabled = false;
			
			TweenMax.to(navBarBtn.vid1Btn.startBtnHi, 0, {autoAlpha:1});
			
			var controls:Array = [videoMC.controlUI_mc.playPauseButton_mc, videoMC.playPauseBigButton_mc, videoMC.controlUI_mc.scrubber_mc];
			var i:int = controls.length;
			while (i--)
			{
				controls[i].buttonMode = true;
				controls[i].mouseChildren = false;
			}
		}
		
		private function showVideo(video:VideoLoader):void
		{
			if (video == _currentVideo)
			{
				return;
			}
			
			if (_currentVideo == null)
			{
				activateUI();
			}
			else
			{
				_currentVideo.removeEventListener(LoaderEvent.PROGRESS, updateDownloadProgress);
				_currentVideo.removeEventListener(VideoLoader.VIDEO_COMPLETE, restartVideo);
				_currentVideo.removeEventListener(VideoLoader.PLAY_PROGRESS, updatePlayProgress);
				_currentVideo.removeEventListener(LoaderEvent.INIT, refreshTotalTime);
				
				if (_currentVideo.videoPaused)
				{
					togglePlayPause();
				}
				
				TweenMax.to(_currentVideo.content, 0.8, {autoAlpha:0});
				TweenMax.to(_currentVideo, 0.8, {volume:0, onComplete:rewindAndPause, onCompleteParams:[_currentVideo]});
			}
			
			_currentVideo = video;
			_currentVideo.addEventListener(LoaderEvent.PROGRESS, updateDownloadProgress, false, 0, true);
			_currentVideo.addEventListener(VideoLoader.VIDEO_COMPLETE, restartVideo, false, 0, true);
			_currentVideo.addEventListener(VideoLoader.PLAY_PROGRESS, updatePlayProgress, false, 0, true);
			
			if (_currentVideo.progress < 1 && _currentVideo.bufferProgress < 1)
			{
				_currentVideo.prioritize(true);
			}
			
			_currentVideo.gotoVideoTime(0, true);
			_currentVideo.volume = 0;
			
			if (!_silentMode)
			{
				TweenMax.to(_currentVideo, 0.8, {volume:1});
			}
			
			videoMC.videoContainer_mc.addChild(_currentVideo.content);
			
			TweenMax.to(_currentVideo.content, 0.8, {autoAlpha:1});
			
			refreshTotalTime();
			
			if (_currentVideo.metaData == null)
			{
				_currentVideo.addEventListener(LoaderEvent.INIT, refreshTotalTime, false, 0, true);
			}
			
			updateDownloadProgress();
			updatePlayProgress();
		}
		
		private function rewindAndPause(video:VideoLoader):void
		{
			video.pauseVideo();
			video.gotoVideoTime(0);
		}
		
		private function refreshTotalTime(event:LoaderEvent = null):void
		{
			var minutes:String = force2Digits(int(_currentVideo.duration / 60));
			var seconds:String = force2Digits(int(_currentVideo.duration % 60));
			videoMC.controlUI_mc.totalTime_tf.text = minutes + ":" + seconds;
		}
		
		private function vid1Play(event:Event):void
		{
			showVideo(_videos[0]);
			_currentVideo.gotoVideoTime(0);
			_currentVideo.pauseVideo();
			TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0.6});
			videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("paused");
			navItem = navBarBtn.vid1Btn;
			navClick();
		}
		
		private function vid2Play(event:Event):void
		{
			showVideo(_videos[1]);
			_currentVideo.gotoVideoTime(0);
			_currentVideo.pauseVideo();
			TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0.6});
			videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("paused");
			navItem = navBarBtn.vid2Btn;
			navClick();
		}
		
		private function vid3Play(event:Event):void
		{
			showVideo(_videos[2]);
			_currentVideo.gotoVideoTime(0);
			_currentVideo.pauseVideo();
			TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0.6});
			videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("paused");
			navItem = navBarBtn.vid3Btn;
			navClick();
		}
		
		private function vid4Play(event:Event):void
		{
			showVideo(_videos[3]);
			_currentVideo.gotoVideoTime(0);
			_currentVideo.pauseVideo();
			TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0.6});
			videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("paused");
			navItem = navBarBtn.vid4Btn;
			navClick();
		}
		
		private function vid5Play(event:Event):void
		{
			showVideo(_videos[4]);
			_currentVideo.gotoVideoTime(0);
			_currentVideo.pauseVideo();
			TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0.6});
			videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("paused");
			navItem = navBarBtn.vid5Btn;
			navClick();
		}
		
		private function vid6Play(event:Event):void
		{
			showVideo(_videos[5]);
			_currentVideo.gotoVideoTime(0);
			_currentVideo.pauseVideo();
			TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0.6});
			videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("paused");
			navItem = navBarBtn.vid6Btn;
			navClick();
		}
		
		private function navClick():void
		{
			if (currentNav != null)
			{
				TweenMax.to(currentNav.btnHi, 0, {autoAlpha:0});
				TweenMax.to(currentNav.btnBg, 0, {autoAlpha:1});
			}
			
			TweenMax.to(navItem.btnHi, 0, {autoAlpha:1});
			TweenMax.to(navItem.btnBg, 0, {autoAlpha:0});
			currentNav = navItem;
			
			if (navBarBtn.vid1Btn.startBtnHi != null)
			{
				navBarBtn.vid1Btn.removeChild(navBarBtn.vid1Btn.startBtnHi);
				navBarBtn.vid1Btn.startBtnHi = null;
				TweenMax.to(navBarBtn.vid1Btn.btnBg, 0, {autoAlpha:1});
			}
		}
		
		private function btnHiliteOn(e:MouseEvent):void
		{
			TweenMax.to(e.target.hiliteMC, 0, {autoAlpha:1});
		}
		
		private function btnHiliteOff(e:MouseEvent):void
		{
			TweenMax.to(e.target.hiliteMC, 0, {autoAlpha:0});
		}
		
		private function restartVideo(event:Event):void
		{
			_currentVideo.gotoVideoTime(0);
			_currentVideo.pauseVideo();
			TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0.6});
			videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("paused");
		}
		
		private function updateDownloadProgress(event:LoaderEvent = null):void
		{
			videoMC.controlUI_mc.loadingBar_mc.scaleX = _currentVideo.progress;
		}
		
		private function updatePlayProgress(event:LoaderEvent = null):void
		{
			var time:Number = _currentVideo.videoTime;
			var minutes:String = force2Digits(int(time / 60));
			var seconds:String = force2Digits(int(time % 60));
			videoMC.controlUI_mc.currentTime_tf.text = minutes + ":" + seconds;
			videoMC.controlUI_mc.progressBar_mc.scaleX = _currentVideo.playProgress;
			videoMC.controlUI_mc.scrubber_mc.x = videoMC.controlUI_mc.progressBar_mc.x + videoMC.controlUI_mc.progressBar_mc.width;
		}
		
		private function togglePlayPause(event:MouseEvent = null):void
		{
			_currentVideo.videoPaused = !_currentVideo.videoPaused;
			
			if (_currentVideo.videoPaused)
			{
				TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0.6});
				videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("paused");
				TweenMax.to(videoMC.videoContainer_mc, 0.3, {blurFilter:{blurX:4, blurY:4}, colorMatrixFilter:{brightness:0.5}});
			}
			else
			{
				TweenMax.to(videoMC.playPauseBigButton_mc, 0.3, {autoAlpha:0});
				videoMC.controlUI_mc.playPauseButton_mc.gotoAndStop("playing");
				TweenMax.to(videoMC.videoContainer_mc, 0.3, {blurFilter:{blurX:0, blurY:0, remove:true}, colorMatrixFilter:{brightness:1, remove:true}});
			}
		}
		
		private function mouseDownScrubber(event:MouseEvent):void
		{
			_preScrubPaused = _currentVideo.videoPaused;
			_currentVideo.videoPaused = true;
			videoMC.controlUI_mc.scrubber_mc.startDrag(false, new Rectangle(videoMC.controlUI_mc.loadingBar_mc.x, videoMC.controlUI_mc.loadingBar_mc.y, videoMC.controlUI_mc.loadingBar_mc.width, 0));
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpScrubber, false, 0, true);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, progressStopper, false, 0, true);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, scrubToMouse, false, 0, true);
		}
		
		private function scrubToMouse(event:MouseEvent):void
		{
			videoMC.controlUI_mc.progressBar_mc.width = videoMC.controlUI_mc.mouseX - videoMC.controlUI_mc.progressBar_mc.x;
			_currentVideo.playProgress = videoMC.controlUI_mc.progressBar_mc.scaleX;
		}
		
		private function mouseUpScrubber(event:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpScrubber);
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, progressStopper);
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, scrubToMouse);
			videoMC.controlUI_mc.scrubber_mc.stopDrag();
			_currentVideo.videoPaused = _preScrubPaused;
		}
		
		private function progressStopper(event:MouseEvent):void
		{
			if (videoMC.controlUI_mc.scrubber_mc.x > 147)
			{
				stage.removeEventListener(MouseEvent.MOUSE_MOVE, scrubToMouse);
				videoMC.controlUI_mc.scrubber_mc.stopDrag();
			}
		}
		
		private function addListeners(objects:Array, type:String, func:Function):void
		{
			var i:int = objects.length;
			while (i--)
			{
				objects[i].addEventListener(type, func, false, 0, true);
			}
		}
		
		private function force2Digits(value:Number):String
		{
			return (value < 10) ? "0" + String(value) : String(value);
		}
		
		private function dispose(event:Event):void
		{
			queue.dispose();
			xmlLoader.dispose(true);
			TweenMax.killTweensOf(this);
			
			videoMC.controlUI_mc.scrubber_mc.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownScrubber);
			videoMC.controlUI_mc.loadingBar_mc.removeEventListener(MouseEvent.MOUSE_DOWN, scrubToMouse);
			navBarBtn.vid1Btn.removeEventListener(MouseEvent.MOUSE_DOWN, vid1Play);
			navBarBtn.vid2Btn.removeEventListener(MouseEvent.MOUSE_DOWN, vid2Play);
			navBarBtn.vid3Btn.removeEventListener(MouseEvent.MOUSE_DOWN, vid3Play);
			navBarBtn.vid4Btn.removeEventListener(MouseEvent.MOUSE_DOWN, vid4Play);
			navBarBtn.vid5Btn.removeEventListener(MouseEvent.MOUSE_DOWN, vid5Play);
			navBarBtn.vid6Btn.removeEventListener(MouseEvent.MOUSE_DOWN, vid6Play);
			navBarBtn.removeEventListener(MouseEvent.MOUSE_DOWN, btnHiliteOn);
			navBarBtn.removeEventListener(MouseEvent.MOUSE_UP, btnHiliteOff);
			navBarBtn.removeEventListener(MouseEvent.MOUSE_OUT, btnHiliteOff);
			_currentVideo.removeEventListener(LoaderEvent.PROGRESS, updateDownloadProgress);
			_currentVideo.removeEventListener(VideoLoader.VIDEO_COMPLETE, restartVideo);
			_currentVideo.removeEventListener(VideoLoader.PLAY_PROGRESS, updatePlayProgress);
			_currentVideo.removeEventListener(LoaderEvent.INIT, refreshTotalTime);
		}
	}
}

[Carl 9,066 Likes (Superhero)]

I see you are passing in "this" to TweenMax.killTweensOf(this);

 

is "this" ever a target of your tween? I can only guess that "this" refers to an instance of VideoPlayerMain. I don't see where that object is a direct target of a tween.

 

It appears there is code inside the VideoPlayerMain class that creates tweens on OTHER objects like 

 

videoMC.playPauseBigButton_mc

navBarBtn.vid1Btn.btnBg

mcArray

mcArray2

 

etc.

 

You would have to pass those objects specifically into killTweensOf()

 

You may be able to kill multiple tweens on multiple objects if they are all children of the same DisplayObjectContainer with killChildTweensOf()

[Amnesicat 6 Likes (Newbie)]

Hi Carl,

 

Yes, "this" refers to this video player instance which is a child swf of a main constructor swf. Sorry if there was some confusion there. I see you use TweenMax.killChildTweensOf(this) in your code illustrated here: http://forums.greensock.com/topic/7382-killall-only-in-a-loaded-mc/?hl=killchildtweensof#entry27762. I also tried this method but there is no difference. Is it because I'm using local variables like mcArray & mcArray2, will changing them to a global variable help? Sorry, I'm a bit lost as to what would be the best approach to get the same effect as TweenMax.killAll() without destroying the main swf tweens.

 

Cheers.

[Carl 9,066 Likes (Superhero)]

Not really sure why killChildTweensOf() isn't working.

If you need more help please create a very simple set of files that replicates the issue.

 

We don't need your production files or anything that relates to a video player. 

Using the files from the other thread (http://forums.greensock.com/topic/7382-killall-only-in-a-loaded-mc/?hl=killchildtweensof#entry27762) would be best. 

 

If you can get killChildTweensOf() to break in a simple setup like that it will be very helpful in helping us resolve the issue. 

[Amnesicat 6 Likes (Newbie)]

Hi Carl,

 

As you suggested, I have created a simple example (see attachment) where the killChildTweensOf(this) doesn't seem to be destroying the tweens, resulting in increased memory that doesn't get fully released. But if you uncomment and use the killAll() method in each gallery child-swf instead, it works fine.

 

Thanks for helping me with this Carl, I really appreciate it.

killChildTweensOf_Test.zip

[Carl 9,066 Likes (Superhero)]

Thanks for providing. I took a brief look but will have to spend some more time poking around.

[Carl 9,066 Likes (Superhero)]

NandiTo,

 

There are a number of uses for the various kill() methods. Tweens don't have a clear() method, only timelines. 

 

As for killing tweens, usually that happens when an animation is in progress and then some user or another process needs to interupt the animation.  For instance maybe your app is an interactive story that randomly generates tweens to havea  ghost spinning, moving and fading. When the user chooses to turn the page you may want all tweens of the ghost to stop and be killed.

 

import com.greensock.*;


TweenLite.to(ghost, 5, {x:500});
TweenLite.to(ghost, 3, {rotation:360});
TweenLite.to(ghost, 10, {alpha:0});




TweenLite.delayedCall(2, kill);


function kill() {
TweenMax.killTweensOf(ghost); 
}

killTweensOf() comes in really handy in such a case. You don't need to worry about which tweens need to be killed, you just keep track of the objects you need to stop animating.

 

Hope this helps.

 

In the future, please start a new thread for new questions. Thanks.

 

 

[GreenSock 8,117 Likes (Superhero)]

The reason you were seeing the memory increase after your dispose() was called is because you had created TimelineMax instances that you didn't kill(). You only killed the individual tweens with the killChildTweensOf(). So if you simply add tl.kill() inside your dispose() method, you'll see that the memory usage is pretty much identical to the one that used TweenMax.killAll(). Keep in mind that killAll() does kill timelines by default. 

[Amnesicat 6 Likes (Newbie)]

Ok, so rule of thumb is killChildTweensOf(this) should kill all tweens but any Timeline instances need to be disposed of individually? I guess I was just hoping that it would be a sort of killAll(this) type of alternative.

 

Thanks for the clarification, Jack.