delayedCall kills animation

[pinguwien]

Hey there, now my first post... as expected, a problem

 

I'm Dominik from germany and I'm trying to create an Animation with your great framework TweenMax and AS3. But when I compile it (flash cs4 on mac osx 10.6 at university), it shows me a white blank page after a while (the animation runs to a point where i use delayedCall and then it just goes blank.)

 

EDIT: well, looks like i'm doing some other thing wrong i just commented the whole function and the call out, but the bug still occurs. If anybody see's what's the mess, help would be so nice!

 

EDIT 2: Seems to rely on this f*ckin computers here... works fine after publishing it... or? If anybody notices a problem, please answer, here the published version as it is at the moment:

http://nie-wieder.net/philomelostest/an ... /test.html

For better understanding, here's a port of my code:

 

			...//Called with TweenMax.delayedCall(5,lightbox, [notenKomplett, 195, 95]); from my preloadcomplete-handler. worked fine every time.

protected function lightbox(lbContent:ContentDisplay, xPos:int, yPos: int){
			//background
			var bga:ContentDisplay = LoaderMax.getContent("lbBG");
			var texturBg:ContentDisplay = LoaderMax.getContent("bgtextur");
			var cursor:ContentDisplay = LoaderMax.getContent("cursor");
			var logoKomplett:ContentDisplay = LoaderMax.getContent("logoKomplett");

			//adding to movieclip from back to front
			ct.addChild(bga);
			ct.addChild(texturBg);
			ct.addChild(lbContent);
			ct.addChild(logoKomplett);
			ct.addChild(cursor);
			trace("moin1");

			//mc added
			addChild(ct);
			trace("moin2");

			//tween for looking tres chic
			TweenMax.fromTo(lbContent, 2, {x:xPos, y:yPos, scale:0.1, alpha:1}, {x:30, y:80, autoAlpha:1,dropShadowFilter:{color:0x37393b, alpha:1,blurX:5, blurY:5, distance:1},scale:.7, delay: .2});
			TweenMax.fromTo(bga,2, {x:xPos, y:yPos, scale:0.1}, {x:-5,y:-5, scale:1.2, autoAlpha:.5});
			TweenMax.fromTo(texturBg,2, {x:xPos, y:yPos, scale:0.1}, {x:10,y:10, scale:1, dropShadowFilter:{color:0x37393b, alpha:1,blurX:40, blurY:40, distance:5},autoAlpha:1});
			TweenMax.fromTo(logoKomplett, 2, {x:xPos, y:yPos, scale:0.1}, {x:30,y:12, scale:.5, autoAlpha:1});
			trace("moin3");

			TweenMax.fromTo(cursor, 2, {x:xPos + 20, y: yPos + 20, scale:0.1}, {x: 50, y: 50, scale:0.2, dropShadowFilter:{color:0x37393b, alpha:1,blurX:5, blurY:5, distance:1}, autoAlpha:1});
			TweenMax.to(cursor, 3, {x:285, y:182, delay: 3});
			trace("moin4");
			//call remove ease.
			TweenMax.delayedCall(12, remove);
			}
		//fadeoutLightbox
		protected function remove(){
			trace("moin");
			TweenMax.to(ct, 1, {alpha:0});
			}

 

I searched the forums but found no solution, so can u please help me? The weirdest thing is: from time to time, the delayedCall (or, better, the remove-function) is called properly when I compile my script, but most of the time it just gets blank after the trace("moin4"). The Code should remove the lightbox after a defined time, so I can animate some functionality into the lightbox.

 

Would be so glad if you could answer my question!

 

Greetings,

Dominik

 

ps: perhaps you got a good tip how to create a button animation? I have no mouseevents, the cursor itself is an animated png.

[Carl]

hi dominik,

 

it appears the version you posted is working as expected. the assets load, the lighbox effect kicks in, the animation plays, then the lightbox fades away.

 

If you want to post your files, I can give them a test, but as I'm understanding it... you only get the wrong results some of the time on a certain computer?

 

-carl

[pinguwien]

yep, it was a problem with my computer at the university. nevermind, but thanks for the reply

 

Although, i've got yet another problem now with ImageLoader/LoaderMax...(except my bad english ) I got a local variable into a function:

var cursor:ContentDisplay = LoaderMax.getContent("nameofcursor.png"); 

 

I add this contentDisplay object to a movieclip and do some tweeningmagic. Then, I remove the MovieClip with removeChild(mc);

 

After removing the MC, Into another function, I want to call another instance of :

 

var cursor_new:ContentDisplay = LoaderMax.getContent("nameofcursor.png"); 

 

and tween it around, but, and here's my problem, when I add cursor_new to my Stage/MovieClip, the old cursor appears and is tweened, although my tweencode is

TweenMax.fromTo(cursor_new, 2, {x:20, y:20, scale:0.1, autoAlpha:1}, {x: 140, y: 250, scale:0.2, dropShadowFilter:{color:0x37393b, alpha:1,blurX:5, blurY:5, distance:1}, autoAlpha:1, delay: 2});

At the moment, my workaround is "put alpha of cursor_new to 0 and put it to 1 while tweening", but my question is if I'm missing something or doing something completely wrong, because I don't think it's a good behavior.

 

Would be nice if you could give me a hint, if not, i'll continue with this workaround.

[pinguwien]

aaand again I found the answer myself... or let's say, I used the search function of this board correctly after getting some sleep

 

here's a solution for getting multiple instances:

 

viewtopic.php?f=6&t=4894

[Carl]

Hey Dominik,

 

glad you found your answer, thanks for posting it.

 

when checking my forum message yesterday on my little phone all I saw was:

 

yep, it was a problem with my computer at the university. nevermind, but thanks for the reply

 

and I thought you were finished. totally missed the new problem.

 

-carl

[pinguwien]

First of all, thank you for this awesome framework. It saved me tons of work. Great Job!

 

Second.. do you use a mask or s.th. like that in the scrollRect-Plugin-example? I tried to get it to work as in the example, but it doesn't work as expected.

 

I have a really big picture (sprite) and this function:

 

protected function scrollit(scrollSprite:Sprite){
			TweenMax.to(scrollSprite, 6, {setSize:{width:scrollSprite.width,height:400},scrollRect:{left:0,right:scrollSprite.width,top:scrollSprite.height-400,bottom:scrollSprite.height}});
			TweenMax.to(scrollSprite, 6, {delay:6.5,setSize:{width:scrollSprite.width,height:300},scrollRect:{left:0,right:scrollSprite.width,top:0, bottom:scrollSprite.height-400}});
			}
			}

Where the big picture is the scrollSprite. Now the Picture should scroll from start to end of picture, but the pic itself disappears completely when the animation ends. So I'm confused. What I want is a "transparent" layer, width 800, height 200, where the big picture's scrolling inside form top to bottom, and back.. but it should only appear inside my "mask" (i tried to to it with setSize, but the picture shows bigger as it should) I tried to add a flash mask too, but when I added my mask-sprite, the whole thing disappeared just when the animation should've started.

 

Can you, or anybody, please, please help me? I'm kind of desperate right now (4:37 am, sitting here for 3 hours but this masks just won't work).

 

Regards,

Pinguwien

[Carl]

this example http://www.snorkl.tv/dev/scrollRect/

 

was built with only this code... no masks

 

import com.greensock.*;

import com.greensock.plugins.*;

TweenPlugin.activate([scrollRectPlugin]);


TweenMax.to(mc, 3, {scrollRect:{ top:-mc.height, bottom:0}, repeat:-1, yoyo:true});

 

i don't know if I am understanding the animation you want completely but you should be able to tweak to suit your needs

 

fla attached

[pinguwien]

Hi Carl,

 

Sorry, I went to bed... was a little bit frustrated.

 

Thank you very much for posting this example. The Problem is, my picture is larger than my stage, but the part shown should be centered on the stage. I uploaded my animation with your code -> http://nie-wieder.net/philomelostest/an ... /test.html

 

perhaps this shows my problem better.

 

edit:

My Mask-Try looked like this:

 

call: 				TweenMax.fromTo(page1complete,2,{x:xPos, y:yPos, scale:0.1, alpha:0},{autoAlpha:1,x:30,y:80, dropShadowFilter:{color:0x37393b, alpha:1,blurX:5, blurY:5, distance:1},scale:.975,onComplete:scrollit, onCompleteParams:[page1complete]});


	private function scrollit(scrollSprite:Sprite){
			var rect:Sprite = new Sprite(); 
			rect.graphics.lineStyle(1, 0x000000); 
			rect.graphics.beginFill(0,0);
			rect.graphics.drawRect(30,80,800,400); 
			rect.graphics.endFill(); 
			maskMC.addChild(rect);
			maskMC.addChild(scrollSprite);

			scrollSprite.cacheAsBitmap = true; 
			rect.cacheAsBitmap = true; 
			scrollSprite.mask = rect;
			addChild(maskMC);

			TweenMax.to(scrollSprite,0,{alpha:1, x:100});
			//TweenMax.to(scrollSprite, 3, {scrollRect:{ top:-scrollSprite.height, bottom:0}, repeat:-1, yoyo:true});
			}

tried to do it like done here: http://help.adobe.com/de_DE/ActionScrip ... -7e0b.html. Weird thing is, well... look at the picture

 

 

looks like the rect is _over_ the picture, but I don't know how to change it. (playing with addChild didn't work).

 

I've the feeling i'm making every possible mistake.

[Carl]

i'm sorry that my first reply didn't help more. it was a bit late here and I may have rushed through the reading.

 

anyway, I have another sample for you which allows you to have precise control. take a look:

 

http://www.snorkl.tv/dev/scrollRect/scrollMask.html

 

basically there is a sprite that contains an image and mask.

the image can be tweened within the masked area.

furthermore you can scale the container, so while the whole mask reveal animation is happening, you can scale or slide the whole thing around.

 

 

import com.greensock.*;

import com.greensock.plugins.*;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Shape;

TweenPlugin.activate([scrollRectPlugin]);

//linkage set in library of simple mc with bitmap inside
var mc:MovieClip = new MyImage();

//create container sprite to hold the image and the mask
var container:Sprite = new Sprite();


//put the mc in the container


container.addChild(mc);

//put the container on stage
addChild(container);



//create a mask to reveal the image inside container
var maskSprite:Sprite = new Sprite();

//make the mask a little smaller than the image
var newRect:Shape = getRectangle(mc.width, mc.height*.5, 0xff0000)
maskSprite.addChild(newRect)


//center the container
container.x = stage.stageWidth * .5 - ( maskSprite.width * .5);

container.y = stage.stageHeight * .5 - ( maskSprite.height * .5);



container.addChild(maskSprite);

container.mask = maskSprite;





function getRectangle(width, height, color):Shape{
var child:Shape = new Shape();
       child.graphics.beginFill(color);

           child.graphics.drawRect(0, 0, width, height);
           child.graphics.endFill();
		return child;
}



//tween the mc being revealed by the mask
TweenMax.to(mc, 3, {y:-mc.height*.5, repeat:-1, yoyo:true})

//scale the whole container and its contents
TweenMax.from(container, 3, {scaleX:.5, scaleY:.5, x:200, repeat:-1, yoyo:true});

 

I find it easier some times to provide something that I know will work than to find exact errors in other people's code.

 

I think your latest example is giving you trouble because you are mixing and matching masking with scrollRect plugin.

I think you can do exactly what you want with just a mask.

 

Let me know if this seems like a better solution.

 

Carl

 

fla here http://www.snorkl.tv/dev/scrollRect/scrollMask.fla

[pinguwien]

Hey Carl, you shouldn't be sorry. You help me that much, so first of all, i want to thank you for that!

 

I made another solution, with scrollRectPlugin and masks. It works, too, so perhaps you can do something with it

 

			private function scrollit(scrollSprite:Sprite,scrollouttime:Number){
			var rect:Sprite = new Sprite(); 
			rect.graphics.lineStyle(1, 0x000000); 
			rect.graphics.beginFill(0);
			rect.graphics.drawRect(30,80,815,400); 
			rect.graphics.endFill(); 
			maskMC.addChild(scrollSprite);
			maskMC.addChild(rect);

			scrollSprite.cacheAsBitmap = true; 
			rect.cacheAsBitmap = true; 
			scrollSprite.mask = rect;
			addChild(maskMC);


			TweenMax.to(scrollSprite,3,{delay:2,x:30,y:80,alpha:1,dropShadowFilter:{color:0x37393b, alpha:1,blurX:5, blurY:5, distance:1}});
			TweenMax.to(scrollSprite, 8, {delay:5,scrollRect:{ top:scrollSprite.height-400, bottom:scrollSprite.height}});
			TweenMax.to(scrollSprite, 8, {delay:14,scrollRect:{ top:0, bottom:scrollSprite.height}});
			TweenMax.to(scrollSprite, 1, {delay:24+scrollouttime,alpha:0});
			}

 

scrollSprite = image, rect = mask, maskMC = container, scrollouttime = i need this function more often with different fadeouttimes... so i should call it fadeoutdelay.

 

example: http://nie-wieder.net/philomelostest/an ... /test.html (you have to wait a minute for the first lightbox to disappear 'cause the timeout for the animation is too high yet... come on, let's get a coffee, i'll pay )

[Carl]

very glad to see you got it working.

I really like the light box effect and all the animation you have in place.

 

I think I'll need an iced coffee its 100F degrees today. whew. thanks!