[Crossfade Transparency in ie8 and 7.]

Thank you to everyone.

 

As far as I know, the most modern Microsoft browser supported by WindowsXP is ie8. There are still a lot of people using WindowsXP so many of us will be supporting it for some time to come.

 

The plug-in that I am using happens to work in this case, but not without enormous overhead and, to make it work in ie8 I found that I must force ie8 to emulate ie7. This is a terrible state of affairs.

 

Microsoft supplies filters to support the alpha property in ie7 and ie8. In addition, there are css filters the support transparent background gradients. I tried these filters. They displayed images properly until I wanted to fade them at which point they failed.

(progid:DXImageTransform.Microsoft.AlphaImageLoader

DXImageTransform.Microsoft.gradient)

 

Jack, your comment about creating 32-bit PNGs in Photoshop attracted my attention. In Photoshop when saving for "Web and Devices" the options for .png are 8 bit and 24 bit. It is my understanding that '24 bit' means '24 bits of color and 8 bits of alpha'. I have been wondering if this might be the problem as the Microsoft filters failed with images created this way. I tried "Save As" and ran into the same problem. Maybe I'm missing something in Photoshop? Perhaps, as you say, the problem lies in the images themselves?

 

I need to continue to monitor this issue because, while the plugin I used managed to (just barely) work on my current project, I have a second project that requires greater manipulation of semi-transparent images and it needs to work on "grandma's old computer in the basement". Yikes!

 

Any thoughts or wisdom you might have will be appreciated. And, for the benefit of everyone else who needs to build an application for old machines in the basement (and the garage), a page describing Tweenlite's capabilities on the old MS browsers would be appreciated (and it might save time in these forums as well).

 

Much thanks,

 

Don Booth

Toronto

[Crossfade Transparency in ie8 and 7.]

Hi Don,

 

Question, are you trying this with IETester or some IE rendering engine?, because i see no problem with the following example using Chrome IETab, which I've learn to cherish and trust more than IETester.

 

http://jsfiddle.net/rhernando/Z2qEN/

 

Also it would help if you could post some of your code in order to see if someone here can find another way to help you.

 

Also if you search in the forum there's been a lot of people with some trouble in IE8 mainly, and as Jack has explained before, it seems that the rendering abilities of IE8... well... they pretty much stink

 

Anyway take a look at the code of my example and post some of yours in order to get a more complete idea of what you're trying to achieve.

 

Best,

Rodrigo.

 

Thanks, Rodrigo.

 

My difficulty is with png transparency.

I would like the site to work with ie7 and ie8. I'm testing with ie7 (the real thing) and, once I nail that, I'll make it work with 8.

 

Specifically, the problem is with cross fades.

 

My images have a shadow baked in and, without assistance, the crossfades don't work.

Working late last night I found DD_belatedPNG.js.

 

I built a little test:

http://www.donbooth.ca/gsap_test/

The images on the left fade as they should with jquery and tweenlite.

The image on the right just gets ugly.

In further testing I could not animate scale and I did not try other properties but, frankly, opacity will work just fine for me here. In this case I don't need more. I have yet to test this in the site I am building but it looks promising. As well, I have to tested it in ie8 and I'm crossing my fingers and holding my breath because Microsoft changed things in 8. We'll see.

 

At any rate, cross faded png images with gradient transparency are an important part of my work and if I am missing something in the way I should be using tweenlite then I'd very much like to know about it.

 

As I thought, these older versions of ie are still very much with us and, as gsap grows in popularity I'm sure that these browsers will be the focus of many questions. Perhaps it would be helpful to include a section that deals with tweenlite and explorer.

 

Much thanks for your assistance,

 

Don Booth

Toronto

[Crossfade Transparency in ie8 and 7.]

I have been wrestling with a site that is filled with crossfading 24bit png images.

 

My images have transparent shadows.

 

Since this is so common, I wonder if anyone knows on an example?

 

I've wrestled with the ms filters and I can get them to work in jquery where there is only one transparent color but I cannot render smooth baked in shadows.

 

Is there an example?

 

Does GSAP handle png images for ie7 and ie8?

 

Much thanks,

 

Don Booth

[Video Loader - difference between video loader and component]

I am very, very new to video.

 

Found Jack's tutorial at tutsplus and it is just what I need. I don't want to reinvent the wheel....

 

After encoding I found that playback was jerky, skipped frames, etc. So I removed smoothing and deblocking. Then I loaded Jack's original example and loaded the same .f4v file into the new (I think) Flash component 2.5

The component always played better, especially on slower machines.

 

I'm scratching my head over this.

 

Any thoughts?

 

from the tutsplus tutorial:

http://www.donbooth.ca/uncounted/vidtest3/

 

with the adobe player

http://www.donbooth.ca/uncounted/vidtes ... enant.html

 

In terms of configuration, I just added the url to the player.

the xml for Jack's player is: <?xml version="1.0" encoding="UTF-8"?>

 

 

Much thanks for any insight.

 

Don Booth

Toronto

[Can we talk? overwrite control from unrelated classes]

Point of information - curiosity?

 

Can we control overwrite on an object that is a child of one class where the tweens acting on that object are in several different (non-classes?

 

I had some trouble with this and managed to find a way around it but, for future reference....

 

I hope this question makes sense....

 

 

Much thanks,

 

 

Don Booth

Toronto

[Using an Array to set bezier points [SOLVED]]

Good Grief!

 

I tried to insert an array but I must have made a mistake elsewhere.

 

I KNEW there was an easier way to do this.

 

(I sort of feel silly.)

 

Thanks for your gracious answer.

 

 

d booth.

[Using an Array to set bezier points [SOLVED]]

There must be a better way to do this.

 

I am sort of making leaves fall. I want them to swing from side to side (from bezier point to bezier point) as they land on the ground.

 

The bezier requires an array of values.

 

I dynamically generate an array of values for each leaf.

 

If I used a separate tween for each swing then I lose the continuity of one very long, smooth tween and the easing that comes with it.

 

I'm using version 10.

 

There must be a better way to dynamically create the following:

 

private function makeSwings(signTile:DisplayObject3D)
		{
			var bezPoints:uint = 14; //would like this to be a dynamic number

			var swingArray:Array = [];

			// pinacle
			swingArray[0] = [];
			swingArray[0][0] = ( -1200 * Math.random()) + 600;
			swingArray[0][1] = signTile.y + Math.random() * SH;
			swingArray[0][2] = ( -1000 * Math.random()) + 1000;

			// first swing
			swingArray[1] = [];
			swingArray[1][0] =  swingArray[0][0] + ( -1200 * Math.random()) + 600;
			swingArray[1][1] = swingArray[0][1]  - 75;
			swingArray[1][2] = swingArray[0][2] - 100;

			// subsequent swings up to bezPoints
			for (var i:uint = 2; i < bezPoints+1;i++)
			{

				//  NB - the following calculations will change.  
				//  The concept of their implementation will not change.

				swingArray[i] = []; //this defines the "row"		
				//swingArray[i][0] = ( -1200 * Math.random()) + 600;
				swingArray[i][0] = 
				//swingArray[i][1] = signTile.y + Math.random() * SH; 
				swingArray[i][1] = swingArray[i - 1][1] - 75;
				//swingArray[i][2] = ( -1000 * Math.random()) + 1000;
				swingArray[i][2] = swingArray[i - 1][2] - 125;
			}

			TweenMax.to(signTile, 8, { timeScale: 0.6, 
			x:swingArray[bezPoints][0], y:swingArray[bezPoints][1],z:swingArray[bezPoints][2], 
				bezier:[ 
				{x:swingArray[1][0], y:swingArray[1][1], z:swingArray[1][2] },
				{x:swingArray[2][0], y:swingArray[2][1], z:swingArray[2][2] },
				{x:swingArray[3][0], y:swingArray[3][1], z:swingArray[3][2] },
				{x:swingArray[4][0], y:swingArray[4][1], z:swingArray[4][2] },
				{x:swingArray[5][0], y:swingArray[5][1], z:swingArray[5][2] },
				{x:swingArray[6][0], y:swingArray[6][1], z:swingArray[6][2] },
				{x:swingArray[7][0], y:swingArray[7][1], z:swingArray[7][2] },
				{x:swingArray[8][0], y:swingArray[8][1], z:swingArray[8][2] },
				{x:swingArray[9][0], y:swingArray[9][1], z:swingArray[9][2] },
				{x:swingArray[10][0], y:swingArray[10][1], z:swingArray[10][2] },
				{x:swingArray[11][0], y:swingArray[11][1], z:swingArray[11][2] },
				{x:swingArray[12][0], y:swingArray[12][1], z:swingArray[12][2] },
				{x:swingArray[13][0], y:swingArray[13][1], z:swingArray[13][2] },
				], ease:Sine.easeInOut } );
		}

 

Thanks to all.

 

(by the way, I'm a member of the "club" and transform from a point/center saved my bacon this year.

It was well worth the money.)

 

thanks,

 

 

d. Booth

Toronto