Announcement

Collapse
No announcement yet.

Example: "Transparent" Web Object

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Example: "Transparent" Web Object

    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:

    Code:
    -- 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
    Last edited by Ulrich; 10-29-2008, 01:58 PM.

  • #2
    Thanks for this example upeters :yes

    Comment


    • #3
      WoW, Very nice upeters:yes

      Comment


      • #4
        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

        Comment


        • #5
          That really is a nice workaround.
          --[[ Indigo Rose Software Developer ]]

          Comment


          • #6
            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
            amsplugins.com Is Closed.

            Facebook Page

            Comment


            • #7
              Hi Ulrich,

              Thanks again for sharing your knowledge with all of us.
              Newbie Examples
              ------> AMS 7.5 : amstudio.azman.info
              ----> AMS 6 & 5: www.azman.info/ams/
              ----> FB: facebook.com/GuideToWealth

              ----> Content Development Blog: www.AZMAN.asia

              Comment


              • #8
                ...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.

                Comment


                • #9
                  Wow very nice. Thanks for this.

                  Comment


                  • #10
                    Cute as a button!
                    Never know what life is gonna throw at you. ZubTech

                    Comment


                    • #11
                      Thanks!

                      I mirrored it on amsusers.com:

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

                      Comment


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

                        Ulrich
                        Attached Files

                        Comment


                        • #13
                          Thanks a lot upeters! Great trick...I added it to all my little code goodies.
                          https://github.com/CentauriSoldier

                          Comment


                          • #14
                            Originally posted by Ulrich View Post
                            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.

                            Comment


                            • #15
                              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
                              Attached Files

                              Comment

                              Working...
                              X