DemoDHTML: Tranistion- Blend

Blend transition

Here is Text

Tips on using Blend transitions:
1. Did you see the jumps during the blends?
Jumping of the buttons and text below them is caused by the objects being of different dimensions.
A little care can avoid such distracting jumps.

You could resize the objects so that they are exactly the same size.
You could just let the browser stretch or squash the new object to fit the original dimensions.
You could put the objects inside something , like a TD or DIV or SPAN, with defined dimensions which are large enough to hold the larger object. Be careful that the alignment matches well, too.

2. All changes between the Apply() and the Play() lines of the script are implemented before the blend transition is played. I changed the vertical alignment of the text from "middle" to "top" to illustrate the effect.

3. If you have a slowish connection, you may have seen the lake stretched to fit the new diminsions of the sunset before the sunset picture blended in. This could be avoided by pre-loading the sunset image. (I left it this way on purpose to illustrate the possible problem.)

4. While a blend in underway, we don't want another one to be started on the same object. Thus there is script included that toggles a counter. When the counter is on, a blend is already running, and a script for another blend won't run. This can also be handled by checking the status of the transiton using an expression like: object.filters.blendTrans.status. The value will be 0 when not running.

Syntax & Settings

1. Set filter: For example, the images blend above is first set in STYLE with:

filter:blendTrans(duration=3)

In STYLE the general form for a blend transition is:

{ filter: blendTrans(Duration=duration)}

Duration is the number of seconds the blend should take to complete, expressed as "seconds.milliseconds" (5.500 would be the form for five and a half seconds.)

2. SCRIPT apply, changes, play: Setting the blend in STYLE is only the beginning, however. Nothing will happen until you make some changes using SCRIPT. You must script a new source or new innerText or some such change. These changes are placed between lines which Apply() the blend and later Play() the blend. Remember that the changes are done and then the blend is played.

So a general form for such a SCRIPT would be:

<SCRIPT language=JavaScript>
function myBlend()
{ myobject.filters.blendTrans.Apply();
myobject.src="newimage.gif" **All changes coded here**
myobject.filters.blendTrans.Play();
}
</SCRIPT>