IE 8 problem

[raccoon]

Hello im testing testing a new web site http://www.deepvfx.com/test I've created a preloader into the about section with the tweening platform 11 and the preloader works in Firefox And Chrome but in IE8 does not, then, created a basic preloader with plain as3 and it works, posting the code hoping to find a solution.

 

Thanks for your help

 

stop();

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.TimelineMax;

//This array will contain all the preloader circles
var circles:Array = [c1,c2,c3,c4,c5];

//Listen for the loading progress
loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);

//This function is called as the loading progresses
function progressHandler(e:ProgressEvent):void {

//Check how much has been loaded (in percentages)
var loadedPercentage:Number = (e.bytesLoaded * 100 / e.bytesTotal);

//If over 20% is loaded, tween the first circle if it hasn't been tweened yet.
if (loadedPercentage>20&&! circles[0].tweened) {

	//Tween the circle
	TweenMax.to(circles[0], 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});
}

//If over 40% is loaded, tween the second circle if it hasn't been tweened yet.
if (loadedPercentage>40&&! circles[1].tweened) {

	//Tween the circle
	TweenMax.to(circles[1], 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});
}

//If over 60% is loaded, tween the third circle if it hasn't been tweened yet.
if (loadedPercentage>60&&! circles[2].tweened) {

	//Tween the circle
	TweenMax.to(circles[2], 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});
}

//If over 80% is loaded, tween the fourth circle if it hasn't been tweened yet.
if (loadedPercentage>80&&! circles[3].tweened) {

	//Tween the circle
	TweenMax.to(circles[3], 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});
}

//If 100% is loaded, tween the fifth circle if it hasnn't been tweened yet.
if (loadedPercentage==100&&! circles[4].tweened) {

	//Tween the circle and call the function circlesTweened() when the tween is complete (this is the last circle).
	TweenMax.to(circles[4], 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}, onComplete: circlesTweened});
}
}

//This function is called when the cirlces have been tweened (the image is loaded)
function circlesTweened():void {

//Loop through the circles
for (var i = 0; i < circles.length; i++) {

	//Tween the circles to the left side of the stage.
	//Call the function circleLeft() when the tween is finished
	TweenMax.to(circles[i], 0.5, {delay: i * 0.1, x: -200, alpha: 0, onComplete: circleLeft, onCompleteParams: [circles[i]]});
}
}

//This function is called when a circle is animated to the left side.
function circleLeft(circle:Circulo):void {


//Check if the circle is the last one (most right)
if (circle==circles[4]) {
	nextFrame();
}
}

[GreenSock]

TweenMax doesn't run differently in different browsers (unless there's a bug in the Flash Player itself for a particular browser, but I haven't heard of any bugs like that which would affect TweenMax).

 

I glanced at your code and it seems problematic because it would create a LOT of duplicate tweens. Every time a progress event is dispatched as your file is loading, it creates a new tween for the various percentages. For example, let's say it's 20% loaded. It'll create a tint/glow tween for circle 1. Great. Then at 20.2% (or anytime thereafter) it creates that same tween again which will overwrite the previous one. And again and again. Then when it hits 60%, it creates another tween for circle 1, as well as one for circle 2 and also for circle 3. It gets worse as more of the file loads until it's at 100% and it creates 5 tweens. By the time your file has loaded, you may have easily created many hundreds of tweens (depending on how many progress events were dispatched) when all you needed was to create 5. Add trace() statements in there wherever you're creating tweens and I bet you'll see a ton of calls. Maybe I'm wrong, though, because I don't see where you're setting the "tweened" property on your circles. If you set it as soon as it starts tweening the first time, then you're probably fine.

 

If you're still having trouble, please post an example FLA & supporting HTML/JS that clearly demonstrates the issue. I'd recommend simplifying it as much as possible so that you can isolate things and identify whether or not it is related to TweenMax.

 

Oh, and you're using the latest version of the GreenSock classes, right? Definitely make sure you've got the latest & greatest. http://www.tweenmax.com

[raccoon]

Thank you for your answer, i followed your advise, improved the code, now it works but, it can't play the next frame after the time line is finished, used onComplete property, and does not work, what I'm i doing wrong.

thank you again.

 

here's the code:

 

stop();

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.TimelineMax;



//calls the event listener to listen for the loading function

this.addEventListener(Event.ENTER_FRAME, loading);

//Building the loading function

function loading(e:Event):void{
var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;
var loadedPercentage:Number = (loaded/total) * 100;

var myTimeline:TimelineMax=new TimelineMax();

//If over 20% is loaded, tween the first circle.
if (loadedPercentage > 20) {

//Tween the hex

TweenMax.to(c1, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});

}

//If over 40% is loaded, tween the second circle.
if (loadedPercentage > 40) {

//Tween the hex
myTimeline.append(TweenMax.to(c2, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}}));
}

//If over 60% is loaded, tween the third circle.
if (loadedPercentage > 60) {

//Tween the hex
myTimeline.append(TweenMax.to(c3, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}}));
}

//If over 80% is loaded, tween the fourth circle.
if (loadedPercentage > 80) {

//Tween the hex
myTimeline.append(TweenMax.to(c4, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}}));
}

//If 100% is loaded, tween the fifth circle.
if (loadedPercentage == 100) {

//Tween the circles
myTimeline.append(TweenMax.to(c5, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}}));
myTimeline.appendMultiple(TweenMax.allTo([c1,c2,c3,c4,c5], 0.5, {x: -200, alpha:0, onComplete:nextframe},.1));
}

function nextframe():void {
//tells the movie if everything is loaded to remove the loading function and play the next frame
if (total == loaded){
	play();
	this.removeEventListener(Event.ENTER_FRAME, loading);}
	}
}

[GreenSock]

Why are you using a TimelineMax and creating a new one on every frame? Typically TimelineMax instances are for setting up sequences or groups of tweens that you need to be able to manage as a whole. And you certainly don't need to create one on every frame (again, a big waste). I'd remove it altogether. If you want to delay a tween's start time, use the delay special property.

 

Anyway, two problems I see right away is this line:

 

myTimeline.appendMultiple(TweenMax.allTo([c1,c2,c3,c4,c5], 0.5, {x: -200, alpha:0, onComplete:nextframe},.1));

 

1) You're setting the onComplete in the vars object which means it will be called after each of the 5 tweens has completed. Since you want it to be called only once after all of the tweens have completed, use the onCompleteAll parameter of allTo(), like:

 

TweenMax.allTo([c1,c2,c3,c4,c5], 0.5, {x: -200, alpha:0}, .1, nextFrame);

 

2) You used "nextframe" instead of "nextFrame" (notice the capital "F").

[raccoon]

Thank you for your answer again, you're very kind, the line works, but the fifth tween does not run, how can i add a gap to this tween to be completed?

 

//If 100% is loaded, tween the fifth circle.
if (loadedPercentage == 100) {

//Tween the circles
myTimeline.append(TweenMax.to(c5, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}}));

TweenMax.allTo([c1,c2,c3,c4,c5], .5, {x: -200, alpha:0}, .1, nextFrame);

//tells the movie if everything is loaded to remove the loading function and play the next frame
  if (total == loaded){
     this.removeEventListener(Event.ENTER_FRAME, loading);
  }
  }
}

[GreenSock]

Which tween doesn't work? TweenMax.to(c5, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}})? Or the allTo() one? If you want to delay the start time, just use the "delay" property like TweenMax.to(c5, 1, {delay:1, ...})

[raccoon]

thank for your answer again, but, i'm stuck with this preloader, i change the code again and i can't finished yet, the code works well in all browser until i want to load the next frame, my intention is not to bother you, but, i really need help, here's the new code and function in red is causing the problem.

 

Thanks for your help.

 

stop();

 

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.TimelineMax;

 

var total:Number;

var loaded:Number;

 

//calls the event listener to listen for the loading function

 

loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);

 

//Building the loading function

 

function progressHandler(e:ProgressEvent):void{

total = this.stage.loaderInfo.bytesTotal;

loaded = this.stage.loaderInfo.bytesLoaded;

var loadedPercentage:Number = (loaded/total) * 100;

 

 

 

//If over 20% is loaded, tween the first circle.

if (loadedPercentage > 20) {

 

//Tween the circle

 

TweenMax.to(c1, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});

 

}

 

//If over 40% is loaded, tween the second circle.

if (loadedPercentage > 40) {

 

//Tween the circle

TweenMax.to(c2, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});

}

 

//If over 60% is loaded, tween the third circle.

if (loadedPercentage > 60) {

 

//Tween the circle

TweenMax.to(c3, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});

}

 

//If over 80% is loaded, tween the fourth circle.

if (loadedPercentage > 80) {

 

//Tween the circle

TweenMax.to(c4, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});

}

 

//If 100% is loaded, tween the fifth circle.

if (loadedPercentage == 100) {

 

//Tween the circle

TweenMax.to(c5, 1, {tint:0xff0000, glowFilter:{color:0xff0000, alpha:1, blurX:10, blurY:10}});

 

if (total==loaded){

TweenMax.allTo([c1,c2,c3,c4,c5], 1, {x: -200, alpha: 0, onComplete:goTo}, .1);

trace("done");

}

}

}

function goTo():void{

nextFrame();

trace("done2");

}

[GreenSock]

Please be as specific as possible. What is happening? What is not happening that you want to happen? As I mentioned earlier, the fact that you're using an onComplete inside the vars object of your allTo() means that ALL 5 of the tweens will call that function when they finish. I assume that's not what you want. You should use the onCompleteAll parameter of the allTo() method to call a single function after all your tweens are done.

[raccoon]

thanks for your answer change for onCompleteAll but the function goTo does not work yet.

[GreenSock]

Please post a sample FLA or something - it's tough to troubleshoot a generic "it doesn't work" issue

[raccoon]

Thanks for your help I'll appreciated.