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
