Example: "Transparent" Web Object

[Ulrich]

I placed this idea recently as response in another topic, but I have made some improvements since then. Here is an example how you can make a Web Object appear as transparent on the page, using layers, CSS and some masking "magic".

All you have to do to make the Web Object appear as transparent is call a function in the On Show event of the page, like this one:

-- function to make a web object appear as transparent on the page
-- arguments:
-- 1: name of the web oject
-- 2: document to be displayed in the web object
-- 3: the background image used on the page
maketransparent("Web1", ".\\AutoPlay\\Docs\\demo.htm", "..\\Images\\630B2747.jpg");

The HTML document will be modified to include an additional layer (which will carry the background image), and a style sheet document will be created to adjust the correct position of this layer, to blend the Web Object into the background of the page. I have done several tests, but it may be necessary to make additional adjustments for a specific case.

Here are examples showing how this works:

In the editor, move the Web Object, then preview/run. Move the Web Object to another position, and preview again. The background should be corrected on each iteration.

For those who might find this useful, please check the sample project below.

Ulrich

[WebCyb]

Thanks for this example upeters :yes

[Esfahan]

WoW, Very nice upeters:yes

[yosik]

That is a VERY nice trick!.
Mix that with window transparent option for flash and you have a transparent flash object as well...
Thanks!!!
:yes:yes:yes

Yossi

[Lorne]

That really is a nice workaround.

[reteset]

wow great ,how did i miss this thread

i found this when i was looking for a way to execute javascript from ams
now i can make a web object (with your example) as a label and call some
javascript functions

thank you for this great job

[azmanar]

Hi Ulrich,

Thanks again for sharing your knowledge with all of us.

[holtgrewe]

...transfer to Example section

upeters

Thanks for this example.

Maybe IR should transfer this into the EXAMPLES section so it doesn't get buried amongst the other threads.

[Radioguy]

Wow very nice. Thanks for this.

[bule]

Cute as a button!

[Intrigued]

Thanks!

I mirrored it on amsusers.com:

http://www.amsuser.com/ams/examples/...S7-upeters.apz

[Ulrich]

Reuploading the same project file, I deleted the attachment by accident. :o

Ulrich

[Centauri Soldier]

Thanks a lot upeters! Great trick...I added it to all my little code goodies.

[O'Callaghan]

The HTML document will be modified to include an additional layer (which will carry the background image), and a style sheet document will be created to adjust the correct position of this layer,

Hi Ulrich,

Is there any way to do it with a background in motion, in fact an image that moves with a global timer on the background (no with a static image)?

Thanks beforehand.

[Ulrich]

If you move the background, you would have to reload the HTML to reflect the changes you made. Each time you reload the document, the Web object will flash (the same happens when you press F5). In order to avoid this flickering, you would need to perform the same movement in the HTML with Javascript. Of course, in that case the synchronization between the movement of the image in the AutoPlay application and what happens in the HTML is almost impossible.

I am attaching an updated project file, so you can get an idea. I used two Web objects to reduce the flickering a bit. Please note that, if you reload a HTML, the animated GIF or Flash file will be reset to its first frame and may appear static.

Ulrich