Jump to content
Search Community

felixaburg

Members

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Posts posted by felixaburg

    How to achieve this

    in GSAP (Flash)

    Posted

    hello Flash-Professionals out there,

     

    I wonder how to make an effect like the on on this website: http://robertjaso.com/

     

    1. I know how to load with LoaderMax

    2. I know how to set up the initial screen with all images set on the right place (so I think :-))

    3. That's the first problem: How would you set up the scroll-effect when you drag with the mouse and new pictures are appearing (maybe I'm just stuck in my "stage"-thinking) don't know how to expand this stage endless

    4. Second prob: I'm stucking in that fade in and movearound with the mouse in the thumbs.

     

    Would be great, if so could point me a hint for that things.

     

    Thanks in advance.

     

    Felix

    Jumpy Animation [SOLVED]

    in GSAP (Flash)

    Posted

    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.

    Jumpy Animation [SOLVED]

    in GSAP (Flash)

    Posted

    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

×
×
  • Create New...