Jump to content
GreenSock

felixaburg

Jumpy Animation [SOLVED]

Recommended Posts

Hi there,

 

I have a problem with an animation which I'm trying to do with TweenMax.

 

First i'm loading a bunch of pictures in an empty MovieClip on the stage, which I'm resizing dependent from screensize.

 

You can see the swf here:

http://www.nocommerce.de/flash-test/s2-noani.swf

 

When I try to add an scrolling effectdepending from mouseposition (function moveMC) the tiles jump about 1px and I get white lines between the images.

 

Animated swf: http://www.nocommerce.de/flash-test/s2.swf

 

Here's my code

 

package 
{
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;
import com.greensock.loading.display.*;
import com.greensock.plugins.*;
//import com.mobinex.scouts.Loaders;
TweenPlugin.activate([ColorTransformPlugin]);


import flash.display.*;
import flash.events.*;
import flash.text.*;
import com.greensock.loading.data.ImageLoaderVars;


public class s2 extends Sprite
{

	public function s2()
	{
		// constructor code
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
		stage.addEventListener(Event.RESIZE, resize);
		tnContainer.alpha = 0;

		init();

	}

	private function init()
	{
		resize(null);
		var _xmlLoader:XMLLoader = new XMLLoader("data.xml",{onComplete:loadThumbs});
		_xmlLoader.load();
	}

	private function progressHandler(event:Event)
	{
		preloader.scaleX = event.target.progress;
	}

	private function completeHandler(event:Event)
	{
		TweenLite.to(preloader, 0.5, {scaleX:0 });
		TweenLite.to(tnContainer, 0.5, {alpha: 1});
		trace('loading complete');
		beginDrag();
	}

	private function loadThumbs(event:Event)
	{
		var xData = event.target.content;
		var customerList:XMLList = xData.customer;

		var thumbLoader:LoaderMax = new LoaderMax({name:"thumbloader",onProgress:progressHandler,onComplete:completeHandler});

		//Setting up grid
		var nums:Number = stage.stageWidth / 230;///4,441
		var columns:Number = Math.round(nums);//4
		var rows:Number = Math.ceil(customerList.length() / columns);
		var gridSize:Number = stage.stageWidth / columns;
		gridSize = Math.ceil(gridSize);
		var x_counter:Number = 0;
		var y_counter:Number = 0;
		var ix:Number = 0;
		var iy:Number = 0;



		for (var i:int = 0; i < customerList.length(); i++)
		{
			//Positioning Thumbnails
			ix = gridSize * x_counter;
			iy = gridSize * y_counter;

			var mc_holder:MovieClip = new MovieClip;
			mc_holder.x = ix;
			mc_holder.y = iy;

			tnContainer.addChild(mc_holder);


			var imgLoad:ImageLoader = new ImageLoader(customerList[i].thumb.Image.@url, new ImageLoaderVars()
			  .name(customerList[i].@name)
			  .smoothing(true)
			  .height(gridSize)
			  .width(gridSize)
			  .prop('index',customerList[i].@id)
			  .prop('headline',customerList[i].@name)
			  .prop('subline',customerList[i].@subline)
			  );


			TweenMax.to(imgLoad.content, 0, {colorMatrixFilter:{saturation:0}, alpha:0.5});
			thumbLoader.append(imgLoad);
			mc_holder.addChild(imgLoad.content);

			createWhitebox(mc_holder, customerList[i]. @ id, gridSize, customerList[i]. @ name, customerList[i]. @ subline)


			trace(imgLoad);

			mc_holder.addEventListener(MouseEvent.ROLL_OVER, onOver);
			mc_holder.addEventListener(MouseEvent.ROLL_OUT, onOut);
			//mc_holder.addEventListener(MouseEvent.CLICK, loadDetail);
			mc_holder.buttonMode = true;

			//Set Coordinates
			if (x_counter + 1 < columns)
			{
				x_counter++;
			}
			else
			{
				x_counter = 0;
				y_counter++;
			}
		}

		thumbLoader.load();
		trace(tnContainer.width);
	}

	private function createWhitebox(holder, idw, size, hl, sl)
	{
		var newWhitebox:whitebox = new whitebox();
		holder.addChild(newWhitebox);
		holder.id = idw;
		newWhitebox.x = 0;
		newWhitebox.y = 0;
		newWhitebox.width = size;
		newWhitebox.height = size;
		newWhitebox.alpha = 0;
		newWhitebox.text1.text = hl;
		newWhitebox.text2.text = sl;
	}

	private function onOver(event:Event)
	{
		TweenLite.to(event.currentTarget.getChildAt(0), 0.8, {colorMatrixFilter:{saturation:1},alpha:1, overwrite:1});
		TweenLite.to(event.currentTarget.getChildAt(1), 0.8, {delay:0.5, alpha:0.8, overwrite:1});
	}

	private function onOut(event:Event)
	{
		TweenLite.to(event.currentTarget.getChildAt(1), 0.8, { alpha:0, overwrite:1});
		TweenLite.to(event.currentTarget.getChildAt(0), 0.8, {delay:0.2,colorMatrixFilter:{saturation:0},alpha:0.5, overwrite:1});
	}

	//Scroll-Function
	private function beginDrag():void
	{
		stage.addEventListener(MouseEvent.MOUSE_MOVE,moveMC);
	}

	private function moveMC(e:MouseEvent):void
	{
		var mousePercent:Number = mouseY / stage.stageHeight;
		var absValue:Number = mousePercent*(tnContainer.height-stage.stageHeight);
		if (tnContainer.height > stage.stageHeight)
		{
			TweenMax.to(tnContainer,3,{y:-(absValue)});
		}
		e.updateAfterEvent();
	}



	// Resize Window;
	private function resize(event:Event):void
	{
		preloader.scaleX = 0;
	}

}
}

 

I tried now for 3 days to point out a solution.

 

What I tried:

- Added the images directly via "container" in Loadermax

- Disabled the colortransform

- Math.ceil(gridSize)

and some more which all led to no better performance

 

I would appreciate if someone can give me a hint to fix this.

 

Thanks in advance

Felix

Link to comment
Share on other sites

I just saw that in Club-Package exists a dynamicProps Plugin.

 

That's what I changed my functions:

 

	private function moveMC(e:MouseEvent):void
	{	
		TweenLite.to(tnContainer, 4, {dynamicProps:{y:getMouseY}});
	}


	private function getMouseY():Number
	{	
		var mousePercent:Number = mouseY / stage.stageHeight;
		var absValue:Number = mousePercent*(tnContainer.height-stage.stageHeight);
		return absValue * -1;
	}

 

This works also like before but with the same problems.

Link to comment
Share on other sites

Hi felixaburg,

I'm not an expert on these things but using absValue will return a decimal value, so I wonder if you actually want to return a whole number, so all the pixel align.

I noticed on your example that sometimes I could move the mouse to get the screen to not have the white lines and I think absValue might be the cause of this.

Did you try using a function that would return a whole number, rather than a decimal?

Also, are the heights and containers even or odd values, I wonder if dividing on an odd number would give a half pixel amount that also adds to the issue?

Link to comment
Share on other sites

I think x10 is on the right track. during your tween there are probably sub-pixel values that are causing the shift.

 

try roundProps (tweenMax only)

 

sample code:

 

import com.greensock.*;

import com.greensock.easing.*;

 

TweenMax.to(mc, 2, {x:150, y:300, roundProps:["x","y"]});

 

go to plugin explorer: http://www.tweenmax.com

 

 

-------------

 

if that doesn't work, remove the rounding and try this tip from the ImageLoader documentation:

 

Jerky animation? If you animate the image after loading it and you notice that the movement is rather jerky, try setting the scaleX and/or scaleY to something other than 1, like 1.001 because there is a bug in Flash that forces Bitmaps to always act like their pixelSnapping is "auto" when their scaleX/scaleY are 1.
Link to comment
Share on other sites

Hi X10 and Carl,

 

very thanks for your solutions.

That was the thing!

 

It solved the problem... It works like it should!

 

Best regards and thanks again for your replies.

 

Felix

Link to comment
Share on other sites

  • 1 year later...

Okay, this solution using roundprops solved a solution of mine where a flow chart diagram I drew had no issues as long as I had everything set to a sprite .  Shapes with circles drawn, and added as child objects to sprites, would deviate from their position.  I converted these all to sprites and it solved deviation on those...

 

But the lines that connected the end point dots on my diagram would always deviate, even when converting them to sprites..... one thing that was different - they weren't a child of another sprite - perhaps that would have fixed the issue...

 

I've been reading alot about the rounding issue,and now have any values that  pertain to final coordinates rounded,everywhere, but is this "roundprops" a general "catch all" solution? 

Other than this issue, I've dealt with the last couple days, all has been good wtih this library.

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.
×