Remove white flickering with browse. in Developer Help

ID:139027
 
Aug 3 2011, 9:24 am
Code:
    proc
        SPLASHSCREEN()
            var/mob/Loginscreen/M = usr
            M << browse_rsc('web\\SplashScreen.htm',"SplashScreen.htm")
            M << browse_rsc('web\\SplashScreen.png',"SplashScreen.png")
            M << browse({"<meta http-equiv="Refresh" content="0; url=SplashScreen.htm">"},"window=SplashScreenBrowser")
            sleep(65)
            M << browse_rsc('web\\SplashScreen2.htm',"SplashScreen2.htm")
            M << browse_rsc('web\\SplashScreen2.png',"SplashScreen2.png")
            M << browse({"<meta http-equiv="Refresh" content="0; url=SplashScreen2.htm">"},"window=SplashScreenBrowser")


Problem description:

Between the first display of a picture and the second picture, it always gives a white flickering, how can I remove that so my splashscreen seems to be smoother?

Thanks in advance.
#1 Aug 3 2011, 2:09 pm
You can use javascript to change the image so there's no page loading that occurs.
#2 Aug 3 2011, 2:11 pm
In response to Forum_account (#1)
I do not really know any JavaScript. I may be wrong to ask this, but since I don't know any Javascript, would you bother to help me out?
#3 Aug 3 2011, 3:03 pm
In response to Raimo (#2)
Raimo wrote:
I do not really know any JavaScript. I may be wrong to ask this, but since I don't know any Javascript, would you bother to help me out?

http://www.w3schools.com/js/default.asp That's where I would go to learn javascript.

I have never done any thing like your asking for but off the top of my head.

You could time it all in javascript. It has it's own timer event functions. Most likely you would be using the HTML DOM to change an image objects src value. You also have the option of setting up a function in javascript which could be called later by byond to change the image.

If you need any more information, please reply.

- Green Lime
#4 Aug 3 2011, 3:40 pm
use a pane rather than a browser...
#5 Aug 3 2011, 3:43 pm
In response to Pirion (#4)
This is in the htm file. Would it still be useful to use a pane?
<html>
    <script>
        function FadeInAndOut(id, i, d)
        {
            if (i >= 100)
            {
                d = "out";
            }

            if (i <= -1)
            {
                return;
            }

            var e = document.getElementById(id);

            //
            // Are we fading out or in?
            //
            if (d == "out")
            {
                e.style.filter = "alpha(opacity=" + i + ")";
                e.style.visibility = "visible";
                i = i - 4;
                setTimeout("FadeInAndOut('" + id + "', " + i + ", '" + d + "')", 44);
            }
            else
            {
                e.style.filter = "alpha(opacity=" + i + ")";
                e.style.visibility = "visible";
                i++;
                setTimeout("FadeInAndOut('" + id + "', " + i + ", '" + d + "')", 44);
            }
        }
        function StartAnimation()
        {
            setTimeout("FadeInAndOut('poplava', 0, 'in')", 10);
        }
        //
        // User clicked our splash screen, send this to client/topic to skip.
        //
        function Skip()
        {
            window.location.href = "byond://?skip=1";
        }
    </script>
    <head>
        &lt;style&gt;
            body
            {
                background: black;
                overflow: hidden;
            }
            img
            {
                visibility: hidden;
            }
        &lt;/style&gt;
    </head>
    <body id="b1" disabledload="StartAnimation()" disabledclick="Skip()">
        <center>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <img src="SplashScreen.png" id="Splashscreen" />
        </center>
    </body>
</html>

Before you mention it, I did bought it from the Tsfreaks' Resource Center.
#6 Aug 3 2011, 3:45 pm
In response to Pirion (#4)
Yeah bro, panes don't do fading effects. And plus, a pane is a window. You still have to put something in it. I could put a browser in a pane and do the exact same thing.
#7 Aug 3 2011, 3:48 pm
In response to Albro1 (#6)
"No Bro", It does. You also put an image in it, that is what he is doing here.
#8 Aug 3 2011, 3:50 pm
In response to Pirion (#7)
Panes don't fade from black into the image, then fade back to black. That is what he is trying to accomplish. That is what he has accomplished, he just doesn't want to see the browser reloading itself with new content.
#9 Aug 3 2011, 3:52 pm
In response to Raimo (#5)
Well this is the browser implementation, which is fine but is as limited as far as the browser is.

The Skin implementation would be by calling winsets to change the alpha of the window.
#10 Aug 3 2011, 4:26 pm
In response to Raimo (#5)
To change the image you'd do this:

document.getElementById("Splashscreen").src = "web\\SplashScreen2.png";
// not sure if you need the double \\ or if one will do.


So you can change the StartAnimation() function to make the image fade in, fade out, change the image, then fade again.
#11 Aug 3 2011, 4:33 pm
In response to Forum_account (#10)
This didn't work;
        function StartAnimation()
        {
            setTimeout("FadeInAndOut('poplava', 0, 'in')", 10);
            document.getElementById("Splashscreen").src = "web\\SplashScreen2.png";
            setTimeout("FadeInAndOut('poplava', 0, 'in')", 10);
        }
#12 Aug 3 2011, 5:25 pm
In response to Raimo (#11)
Show the whole thing so we know exactly why it didn't work...
#13 Aug 3 2011, 7:14 pm
In response to Raimo (#11)
I figured it out. I added 2 functions.

        function StartAnimation()
        {
            FirstAnimation();
            setTimeout("SecondAnimation()",18000);
        }
        //
        // User clicked our splash screen, send this to client/topic to skip.
        //
        function FirstAnimation(){
            document.getElementById("subdev").src = "SubDev.png";
            setTimeout("FadeInAndOut('subdev', 0, 'in')", 10);
        }
        function SecondAnimation(){
            document.getElementById("subdev").src = "BANBTitle.png";
            setTimeout("FadeInAndOut('subdev', 0, 'in')", 100);
        }


I used setTimeout() to make the change to the second one wait.
#14 Aug 4 2011, 12:11 am
In response to Raimo (#11)
When you set the img's src, set it to the same name as the browse_rsc() you used, not the location of the image in the directory's path (as the client will not have access to it).
Ex:
src << browse_rsc("web/X.img", "X.png")
...
...src = "X.png"
...
#15 Aug 4 2011, 2:31 am
In response to Albro1 (#13)
This solved the problem pretty much, thanks Albro.